/* Operasyon kompozisyonu — ortada ürün kartı, çevresinde panelde yapılan işler.

   Fotoğraf yerine HTML/SVG: her ölçekte net, marka renkleriyle uyumlu, sayfanın
   tipografisiyle aynı dilde. Kartlar hafif; kabartma ve 3B perspektif yok. */

.orbit {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    aspect-ratio: 1 / 1.06;
    /* Yumuşak marka halesi — kompozisyonu zemine oturtur */
    background:
        radial-gradient(58% 50% at 50% 46%, var(--brand-50) 0%, transparent 70%);
}

/* ------------------------------------------------------------ Ürün kartı */

.orbit__card {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 54%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.orbit__media {
    aspect-ratio: 1 / 1;
    background: var(--surface-soft);
}

.orbit__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orbit__meta { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.orbit__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--ink-200);
}

.orbit__stars .is-on { color: #f59e0b; }

.orbit__name {
    margin-top: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.orbit__price {
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--brand-700);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ İşlem kartları */

.orbit__tile {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 58%;
    padding: 9px var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}

.orbit__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-700);
}

.orbit__text { display: grid; min-width: 0; }

.orbit__label {
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.orbit__value {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yerleşim: kartlar ürünün çevresine dağılır.
   Kural: fotoğrafın üstüne binebilirler, ürün ADI/FİYATININ üstüne binemezler.
   Bu yüzden sol alttaki kart, kart metninin başladığı hizanın üzerinde kalır. */
.orbit__tile--a { top: 4%;     left: 0; }
.orbit__tile--b { top: 30%;    right: 0; }
.orbit__tile--c { bottom: 36%; left: 0; }
.orbit__tile--d { bottom: 0;   right: 4%; }

/* ------------------------------------------------------------ Kanal rozetleri

   Gerçek pazaryeri logosu KULLANILMAZ (ticari marka). Kanallar nötr renk
   noktalarıyla temsil edilir; mesaj "birden çok kanal", marka adı değil. */

.orbit__channels {
    position: absolute;
    top: 8%;
    right: 14%;
    display: flex;
    gap: 6px;
}

.orbit__chan {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-300);
    box-shadow: 0 0 0 3px var(--surface);
}

.orbit__chan--2 { background: var(--indigo-400); }
.orbit__chan--3 { background: var(--brand-500); }
.orbit__chan--4 { background: var(--ink-300); }

/* Yığılmış düzende kompozisyon daralıyor ve alttaki kartlar ürün kartının
   ad/fiyat satırının üstüne biniyordu.

   Ürün FOTOĞRAFININ üstüne binmek bu kompozisyonun dili; ürün ADINI ve
   FİYATINI kapatmak değil. Dikey pay artırıldı, kartlar metnin altına indi. */
@media (max-width: 900px) {
    .orbit {
        max-width: 400px;
        aspect-ratio: 1 / 1.28;
    }

    .orbit__card { top: 12%; width: 50%; }
    .orbit__tile--c { bottom: 8%; }
}

@media (max-width: 400px) {
    .orbit__tile { max-width: 64%; padding: 7px var(--sp-2); }
    .orbit__icon { width: 26px; height: 26px; }
    .orbit__label { font-size: 9px; }
}