/* Anasayfa hero sağ kutusu: yörüngede dönen sigorta şirketi logoları */
.sigorta-bileseni {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}

.sigorta-bileseni *,
.sigorta-bileseni *::before,
.sigorta-bileseni *::after {
    box-sizing: border-box;
}

.sigorta-bileseni .sb-gorsel {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
}

.sigorta-bileseni .sb-yorunge {
    position: relative;
    width: 92%;
    aspect-ratio: 1;
    container-type: inline-size;
}

.sigorta-bileseni .sb-halka {
    position: absolute;
    inset: 0;
    animation: sb-don var(--sb-sure) linear infinite var(--sb-yon, normal);
}

.sigorta-bileseni .sb-halka-1 { --sb-yaricap: 17cqw; --sb-sure: 44s; }
.sigorta-bileseni .sb-halka-2 { --sb-yaricap: 31cqw; --sb-sure: 64s; --sb-yon: reverse; --sb-ters-yon: normal; }
.sigorta-bileseni .sb-halka-3 { --sb-yaricap: 45.5cqw; --sb-sure: 90s; }

.sigorta-bileseni .sb-halka::before {
    content: "";
    position: absolute;
    inset: calc(50% - var(--sb-yaricap));
    border: 1px dashed #ffffff50;
    border-radius: 50%;
}

.sigorta-bileseni .sb-konum {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(var(--sb-aci)) translateX(var(--sb-yaricap)) rotate(calc(-1 * var(--sb-aci)));
}

.sigorta-bileseni .sb-ters-donus {
    position: absolute;
    inset: 0;
    animation: sb-don var(--sb-sure) linear infinite var(--sb-ters-yon, reverse);
}

.sigorta-bileseni .sb-logo {
    position: absolute;
    display: grid;
    place-items: center;
    width: 8cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    color: #344667;
    font-size: 4cqw;
    font-weight: 700;
    box-shadow: 0 3px 9px #0513244d, 0 0 0 2px #ffffff36;
    transform: translate(-50%, -50%);
}

.sigorta-bileseni .sb-logo img {
    display: block;
    width: 69%;
    height: 69%;
    object-fit: contain;
}

.sigorta-bileseni .sb-logo:empty::after { content: attr(data-harf); }

.sigorta-bileseni .sb-merkez {
    position: absolute;
    inset: 41.5%;
    display: grid;
    place-items: center;
    border: 1px solid #ffffff99;
    border-radius: 50%;
    background: #ffffff29;
    color: #fff;
}

.sigorta-bileseni .sb-merkez svg { width: 46%; }
.sigorta-bileseni .sb-merkez:has(img) { background: #fff; }
.sigorta-bileseni .sb-merkez img { width: 74%; height: 74%; object-fit: contain; }

@keyframes sb-don { to { transform: rotate(360deg); } }

/* Hareket azaltma tercihi olan ziyaretçilerde logolar sabit durur */
@media (prefers-reduced-motion: reduce) {
    .sigorta-bileseni :is(.sb-halka, .sb-ters-donus) {
        animation-play-state: paused;
    }
}