.erdal-kategori-gorsel,
.erdal-rozet {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    max-width: 100%;
    height: auto;
    display: block;
}

.erdal-efekt-fade {
    animation-name: fadeInErdal;
}
@keyframes fadeInErdal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.erdal-efekt-zoom {
    animation-name: zoomInErdal;
}
@keyframes zoomInErdal {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.erdal-efekt-slide {
    animation-name: slideInErdal;
}
@keyframes slideInErdal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.erdal-rozet-wrapper {
    position: absolute;
    z-index: 10;
    width: 48px;
    height: 48px;
}
.erdal-rozet {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Konumlar */
.erdal-konum-top-left { top: 10px; left: 10px; }
.erdal-konum-top-center { top: 10px; left: 50%; transform: translateX(-50%); }
.erdal-konum-top-right { top: 10px; right: 10px; }

.erdal-konum-middle-left { top: 50%; left: 10px; transform: translateY(-50%); }
.erdal-konum-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.erdal-konum-middle-right { top: 50%; right: 10px; transform: translateY(-50%); }

.erdal-konum-bottom-left { bottom: 10px; left: 10px; }
.erdal-konum-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }
.erdal-konum-bottom-right { bottom: 10px; right: 10px; }

@media only screen and (max-width: 768px) {
    .erdal-rozet-wrapper {
        width: 36px;
        height: 36px;
    }
}