/* ========================================================================
   TEMEL MAGAZA TEMASI

   Butun magaza temalarinin zemini. Bir tema yalnizca degistirmek
   istedigi sablonu ve stili tasir; kalani buradan duser.

   =======================================================================
   NEDEN TAILWIND DEGIL, DUZ CSS
   =======================================================================
   Musteri, vitrinin gorunumunu YAPAY ZEKAYA degistirtebilecek
   (App\Services\Design). O katman CSS OZEL OZELLIKLERINI ve bolum
   kimliklerini okuyup duzenliyor. Tasarim Tailwind yardimci siniflarina
   gomulseydi katmanin degistirebilecegi hicbir sey olmazdi: renk sinif
   adinin icinde, sinif da HTML'de olurdu.

   Ayni sebeple RENKLER SINIF ADINA GOMULMEZ, jeton olarak durur.

   =======================================================================
   JETON SOZLUGU SERBEST SECILMEZ
   =======================================================================
   Adlar statik temalarla AYNIDIR (--ana / --vurgu / --zemin / --metin
   ...). Tasarim katmani bu adlari arar; farkli adlandirilsaydi magaza
   temalari duzenlenemez, statik temalar duzenlenebilir olurdu ve
   musteriye "hangi siteyi aldiysan ona gore" demek zorunda kalirdik.
   ======================================================================== */

:root {
    /* Ana renk: dugme zeminleri ve baglantilar. */
    --ana: #d4356f;
    --ana-koyu: #a82454;
    --ana-acik: #f5a0c0;

    /* Vurgu: etiketler, rozetler, ikincil dikkat. */
    --vurgu: #16161a;
    --vurgu-koyu: #000000;
    --vurgu-acik: #6b6b78;

    --zemin: #ffffff;
    --zemin-2: #f6f6f8;
    --metin: #16161a;
    --metin-2: #5b5b66;
    --cizgi: #e6e6ea;
    --koyu: #16161a;

    /*
        ANLAMSAL FINANS RENKLERI - MARKA RENGI DEGILDIR.

        Fiyat panosunda artis yesil, dusus kirmizi olmak ZORUNDA:
        bu bir tasarim tercihi degil, rakama bakan herkesin bildigi
        bir sozlesme. Marka jetonlarindan (`--ana`, `--vurgu`)
        turetilseydi, sicak bakir bir temada artis kirmiziya yakin
        gorunur ve sayfa yanlis okunurdu - gulkuyumcu.com'da tam
        olarak boyle oldu.

        Tasarim katmaninin duzenledigi jeton sozlugune BILEREK
        alinmadilar: musterinin yapay zekaya "artisi kirmizi yap"
        dedirtebilmesi, duzeltilmesi gereken bir ozgurluk degil.

        Kontrast (WCAG 2.x): yesil beyaz uzerinde 5.33:1, ikincil
        zeminde 4.99:1; kirmizi 5.88:1 ve 5.51:1.
    */
    --artis: #1d7a4c;
    --dusus: #c0272d;

    --yumusak: 14px;
    --kap: 1200px;
    --golge: 0 18px 40px -24px rgb(0 0 0 / .35);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /*
        Yazi tipi SISTEM YIGINI. Tema kendi yazi tipini gomebilir ama
        temel tema HICBIR AG ISTEGI YAPMAZ: harici bir yazi tipi, hem
        gizlilik (ziyaretcinin adresi ucuncu tarafa gider) hem de
        hiz sorunudur.
    */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--metin);
    background: var(--zemin);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ana-koyu); }
a:hover { color: var(--ana); }

/*
    ODAK HALKASI KALDIRILMAZ. Klavyeyle gezen ziyaretci nerede oldugunu
    gormek zorunda; `outline: none` en sik yapilan erisilebilirlik
    hatasidir.
*/
:focus-visible {
    outline: 3px solid var(--ana);
    outline-offset: 2px;
}

/*
    `min-width: 0` PAZARLIKSIZ.

    =====================================================================
    NE OLDU
    =====================================================================
    Bazi temalar kendi isaretlemesi icin `.guvence` sinifini `display:
    grid` ya da `flex` olarak tanimliyor. Ortak guvence bandi da ayni
    sinifi tasiyor; sonucta `.kap` bir IZGARA/FLEX OGESI oluyor ve
    varsayilan `min-width: auto` yuzunden kendi EN KUCUK ICERIK
    genisligine kadar buyuyor.

    Telefonda olculen sonuc: 375 piksellik ekranda 758 piksellik bir
    bant ve sayfanin tamaminda yatay kaydirma - kendi kuralimiza
    aykiri.

    `min-width: 0` ogenin kucululmesine izin verir; ic izgara o zaman
    tek sutuna duser. Kural burada, TEK YERDE duruyor: her banda ayri
    ayri yazmak, yeni eklenen bir bandin unutulmasi demekti.
*/
.kap {
    max-width: var(--kap);
    min-width: 0;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Ekran okuyucuya gorunur, ekranda gizli. */
.gizli-metin {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.atla {
    position: absolute;
    inset-inline-start: -9999px;
}
.atla:focus {
    inset-inline-start: 1rem;
    top: 1rem;
    z-index: 60;
    background: var(--koyu);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 8px;
}

/* ========================================================================
   1. UST SERIT VE BASLIK
   ======================================================================== */

.serit {
    background: var(--koyu);
    color: #fff;
    font-size: .82rem;
}
.serit-ic {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-block: .55rem;
}
.serit p { margin: 0; }

.ust {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}
/*
    BASLIK SATIRI TEK HIZADA.

    `align-items: center` ve SABIT bir dikey dolgu; menu sarsa bile
    marka ile ikon rayi ortada kalir. Onceden kaydirma cubugu menunun
    yuksekligini degistiriyor ve hiza temadan temaya kayiyordu.
*/
.ust-ic {
    display: flex;
    align-items: center;
    gap: .75rem 1rem;
    min-height: 68px;
    padding-block: .75rem;
}

/*
    MARKA = ISARET + AD.

    Yalnizca YERLESIM burada; her tema harf araligini, agirligini ve
    boyutunu kendi kimligine gore eziyor ve isaret `currentColor`
    kullandigi icin metinle ayni rengi kendiliginden aliyor. Isaret
    ayri bir renk jetonuna baglansaydi koyu temalarda (taki) gorunmez
    olurdu.

    `margin-inline-end: auto` - marka SOLDA, ikon rayi sagda. Onceden
    `margin-inline: auto` ile ortalanmisti; menu solda dururken
    ortalanmis bir marka satiri dengesiz gosteriyordu.

    `min-height: 44px` dokunma hedefi icindir: marka ana sayfa
    baglantisidir ve tek satirlik metin olarak 44px'in altinda kalirdi.
*/
.marka {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--metin);
    margin-inline-end: auto;
}
.marka:hover { color: var(--metin); }

/* Isaret metinle birlikte buyuyup kuculsun diye `em`; her temada
   marka yazi boyutuyla orantili kalir. */
.marka-isaret {
    width: 1.55em;
    height: 1.55em;
    flex: 0 0 auto;
}

/* Harf araligi .2em'e varan temalarda (moda, taki, kozmetik) son
   harften sonra kalan bosluk isareti adin ortasindan kaydirir; ad
   kendi kutusunda dengelenir. */
.marka-ad { margin-inline-end: -.14em; }

.menu {
    display: none;
    align-items: center;
    gap: .5rem 1.5rem;
    font-weight: 600;
    font-size: .95rem;
}
.menu a { color: var(--metin); text-decoration: none; }
.menu a:hover { color: var(--ana); }

/*
    ACILIR ALT MENU - BETIKSIZ.

    `:hover` fare, `:focus-within` klavye icin. Betikle calissaydi
    betigin yuklenmedigi her durumda alt kategoriler ulasilamaz olurdu.

    Panel gorunurken `visibility` de degisir: yalnizca `opacity: 0`
    birakilsaydi gorunmeyen baglantilar klavyeyle odaklanabilir kalirdi.
*/
.menu-oge { position: relative; display: inline-flex; align-items: center; }

.menu-oge > a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }

.menu-ok { width: 14px; height: 14px; }

.menu-alt {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: -.75rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: .5rem 0;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    box-shadow: var(--golge);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu-oge:hover .menu-alt,
.menu-oge:focus-within .menu-alt {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-alt a {
    display: flex;
    align-items: center;
    /* Acilir listedeki her satir da bir dokunma hedefi. */
    min-height: 44px;
    padding-inline: 1rem;
    font-size: .92rem;
    font-weight: 500;
}
.menu-alt a:hover { background: var(--zemin-2); }

.raylar { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }

/*
    IKON DUGMELERI 44 PIKSEL. WCAG 2.5.8 alt siniri 24 piksel; 44
    Apple/Material tavsiyesi ve parmakla isabet icin gercek esik.
    Ikonlar tek basina anlam tasidigi icin erisilebilir ADLARI var
    (sablonda aria-label).
*/
.ray-dugme {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    color: var(--metin);
    text-decoration: none;
    position: relative;
}
.ray-dugme:hover { background: var(--zemin-2); color: var(--metin); }
.ray-dugme svg { width: 20px; height: 20px; }

.rozet {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-width: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--ana);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/*
    BASLIK UC SUTUN.

    Marka onceden `position: absolute` ile ortalaniyordu ve akistan
    ciktigi icin menuye YER AYIRMIYORDU: kategori sayisi arttiginda
    menu markanin ustune biniyor, baslik darmadagin gorunuyordu
    (kozmetik temasinda "Tum urunler" markanin uzerine geldi).

    Izgara ucuncu sutunu markaya AYIRIR; menu ve raylar kendi
    sutunlarinda kalir ve carpisma imkansiz hale gelir. Orta sutun
    `auto`: marka ne kadar genisse o kadar yer alir, yan sutunlar
    `1fr` ile esitlenir - marka boylece GERCEKTEN ortada durur.
*/
/*
    MARKA SOLDA, MENU YANINDA, RAYLAR SAGDA.

    =====================================================================
    ORTALANMIS MARKA NEDEN BIRAKILDI
    =====================================================================
    Referans tasarimlarda marka ortada duruyor ve orada CALISIYOR cunku
    menuleri sabit ve kisa (Home, Shop, Pages, Blog). Bizimki DINAMIK:
    magaza sahibi kategori ekledikce uzuyor.

    Iki deneme yapildi ve ikisi de kirildi:
      - `position: absolute` ile ortalama: marka akistan cikti, menuye
        yer ayirmadi, uzerine bindi.
      - `1fr auto 1fr` izgara: sol sutun ikon rayiyla esitlendi,
        daraldi, menu iki satira kirildi.

    Ucuncu deneme (kaydirma) da ise yaramadi: kayan menunun son ogesi
    markanin dibinde YARIM kaliyor ve bozuk gorunuyordu.

    Marka SOLA alindi. Kategori sayisi ne olursa olsun carpisma
    imkansiz; menu tasarsa kendi icinde kayar ve markanin altina
    girmez. Ortalanmis marka isteyen tema bu kurali ezebilir - ama
    o zaman kendi menu uzunlugunu da kontrol etmis olur.
*/
@media (min-width: 48rem) {
    /*
        MENU KAYDIRILMAZ.

        Onceden `overflow-x: auto` vardi ve iki kusur dogurdu:
        (a) arama ikonunun solunda GORUNUR BIR KAYDIRMA CUBUGU beliriyordu,
        (b) cubuk yer kapladigi icin menu satirinin dikey hizasi temadan
        temaya kayiyordu - kimi tema menusu yukarida, kimi asagida
        duruyordu.

        Cozum kaydirmak degil, YER ACMAK: marka artik uzun magaza
        adini degil kompakt bir isaret+ad tasiyor ve menu sigiyor.
        Sigmadigi olcude ogeler kendi araliklarini daraltir
        (`gap` esnek), en son da menu sarar - kaydirma cubugu hicbir
        durumda cikmaz.
    */
    .menu { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
    .marka { flex: 0 0 auto; order: -1; margin-inline-end: 1.25rem; }
    .raylar { flex: 0 0 auto; }
}

/*
    MENU OGELERI SATIR KIRMAZ.

    Kirildiginda baslik iki-uc satira cikiyor ve yapiskan serit ekranin
    ucte birini yiyordu. Tasan menu kayar; kaydirma cubugu ince.
*/
.menu > a,
.menu-oge > a { white-space: nowrap; }

/* ========================================================================
   2. VITRIN
   ======================================================================== */

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
    padding-block: 5rem;
}

/* Dekoratif lekeler - ekran okuyucudan gizli (sablonda aria-hidden). */
.vitrin-leke {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}
.vitrin-leke-1 {
    inset-block-start: -6rem; inset-inline-end: -6rem;
    width: 26rem; height: 26rem;
    background: color-mix(in srgb, var(--ana) 12%, transparent);
}
.vitrin-leke-2 {
    inset-block-end: -8rem; inset-inline-start: -4rem;
    width: 20rem; height: 20rem;
    background: color-mix(in srgb, var(--koyu) 6%, transparent);
}

/*
    FOTOGRAFLI VITRIN.

    Fotograf mutlak konumlanir ve bandin tamamini kaplar; PERDE
    (`::after`) uzerine biner. Perde olmadan baslik, acik bir
    fotografta okunmaz olurdu - fotografi biz secmedigimiz icin en
    kotu ihtimale gore hesaplanir.

    Perde jetondan turetilir: tema rengini degistirdiginde perde de
    birlikte degisir ve yapay zeka tasarim katmani onu ayrica
    duzenlemek zorunda kalmaz.
*/
/*
    FOTOGRAFLI VITRINDE METIN BEYAZ - AMA YALNIZCA TIPOGRAFI.

    Once kural bandin TAMAMINA `color: #fff` veriyordu ve KENDI ACIK
    ZEMINI OLAN ogeler (market temasindaki onay rozetleri gibi) beyaz
    uzerine beyaz kaldi: rozetlerde yalnizca onay isareti gorunup metin
    KAYBOLDU.

    Kural artik yalnizca dogrudan fotografin uzerinde duran tipografiyi
    hedefler. Kendi zeminini tasiyan bilesenler kendi renklerini korur.
*/
/*
    ROZET DISARIDA BIRAKILIR - `:not()` ILE, OZGULLUK YARISIYLA DEGIL.

    Ilk denemede geri alan ayri bir kural yazildi ve KAYBETTI: beyazlatan
    liste icinde `.vitrin-duzen > div > p` (0,3,2) gibi daha ozgul bir
    secici vardi. Ozgulluk yarisina girmek yerine kuralin rozeti HIC
    eslememesi dogru - niyet zaten "fotografin uzerindeki tipografi",
    kendi zemini olan bir hap degil.

    Kozmetik temasinda gorunen sonuc: rozet BOMBOS BEYAZ BIR HAP'ti ve
    kusur vitrin kartinda (kucuk fotograflarda) fark edildi.
*/
.vitrin:has(> .vitrin-arka) h1,
.vitrin:has(> .vitrin-arka) h2,
.vitrin:has(> .vitrin-arka) > .kap > p:not(.vitrin-rozet),
.vitrin:has(> .vitrin-arka) .vitrin-ic > p:not(.vitrin-rozet),
.vitrin:has(> .vitrin-arka) .vitrin-soz p:not(.vitrin-rozet),
.vitrin:has(> .vitrin-arka) .vitrin-duzen > div > p:not(.vitrin-rozet) { color: #fff; }

/*
    KENDI ZEMINI OLAN OGELER GERI ALINIR.

    Kural yukarida daraltilmisti ama yetmedi: kozmetik temasinin
    vitrin rozeti bir <p> ve `.kap`in dogrudan cocugu, yani beyaza
    boyaniyordu - kendi ZEMINI de acikti ve rozet BOMBOS BEYAZ BIR
    HAP olarak goruldu. Dugmeler de ayni durumda: ikincil dugmenin
    metni kendi acik zemini uzerinde kayboluyordu.

    Ogelerin kendi rengine donmesi icin `revert` degil `inherit`
    degil, ACIKCA jetondan okunuyor - `revert` tarayicinin varsayilan
    rengine doner ve temanin secimini yok sayardi.

    Bu kusur vitrin kartlarinda (kucuk fotograflar) gorulur oldu:
    kozmetik temasinin kartinda rozet bos bir beyaz hap gibi
    duruyordu.
*/
/*
    IKINCIL DUGME de kendi zemini olan bir ogedir: fotograf uzerindeki
    beyazlatma onu kendi acik zemininde okunmaz birakiyordu.
*/
.vitrin:has(> .vitrin-arka) a.dugme-ikincil,
.vitrin:has(> .vitrin-arka) .dugme-ikincil { color: var(--metin); }

.vitrin-arka {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vitrin:has(> .vitrin-arka)::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Perde fotografin USTUNDE, icerigin ALTINDA. */
    z-index: 1;
    /*
        ORTA DURAK %55 DEGIL %70.

        Banner'lara insan girince fotograflar aydinlandi (gun isigi
        alan oturma odasi, pazar tezgahi) ve BASLIK METNININ SAGA
        DOGRU BITTIGI YERDE beyaz yazi 4.5:1'in altina dustu -
        mobilya 4.15, market 4.02. Perdenin yalnizca sol kenari
        koyuydu, metin ise %45'e kadar uzaniyor.

        Sag kenar (%15) BILEREK acik birakildi: fotograftaki kisi
        oradadir ve perdelenirse vitrinin butun anlami kaybolur.
        Olcum: MagazaVitrinBannerTest.
    */
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--koyu) 82%, transparent) 0%,
        color-mix(in srgb, var(--koyu) 70%, transparent) 45%,
        color-mix(in srgb, var(--koyu) 15%, transparent) 100%
    );
}

/*
    ICERIK PERDENIN USTUNDE KALIR.

    Once yalnizca `.vitrin-ic` yukseltilmisti ve temalarin cogu o sinifi
    KULLANMIYOR (kendi `.vitrin-duzen`leri var); metin perdenin altinda
    kaldi ve fotografli vitrinde BASLIK KAYBOLDU.

    Kural artik fotograf DISINDAKI her dogrudan cocugu yukseltir; hangi
    sinifi kullandiklarini bilmek gerekmez.
*/
.vitrin:has(> .vitrin-arka) > *:not(.vitrin-arka) { position: relative; z-index: 2; }

/*
    TEMANIN KENDI VITRIN CIZIMI FOTOGRAFLA BIRLIKTE GOSTERILMEZ.

    Ikisi ust uste bindiginde cizim fotografin uzerinde duruyor ve
    tasarim bozuk gorunuyordu. Fotograf varken suslemenin isi biter.
*/
.vitrin:has(> .vitrin-arka) .vitrin-panel,
.vitrin:has(> .vitrin-arka) .vitrin-pano,
.vitrin:has(> .vitrin-arka) .vitrin-desen,
.vitrin:has(> .vitrin-arka) .vitrin-isaret,
.vitrin:has(> .vitrin-arka) .vitrin-leke { display: none; }
.vitrin:has(> .vitrin-arka) .slogan { color: #f4f4f5 !important; }
.vitrin:has(> .vitrin-arka) .ust-etiket { color: #fff !important; }

.vitrin-ic { position: relative; max-width: 40rem; }

.ust-etiket {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ana-koyu);
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.slogan {
    margin: 1rem 0 0;
    font-size: 1.05rem;
    color: var(--metin-2);
}

/* ========================================================================
   3. DUGMELER
   ======================================================================== */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding-inline: 1.75rem;
    border: 2px solid var(--ana);
    border-radius: 999px;
    background: var(--ana);
    /* Ana renk uzerinde BEYAZ metin 4.5:1 saglar; deger olculdu. */
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.dugme:hover { background: var(--ana-koyu); border-color: var(--ana-koyu); color: #fff; }

.dugme-ikincil {
    background: transparent;
    color: var(--metin);
    border-color: var(--cizgi);
}
.dugme-ikincil:hover { background: var(--zemin-2); color: var(--metin); border-color: var(--metin-2); }

.dugme-genis { width: 100%; }

/* ========================================================================
   4. BOLUM BASLIKLARI
   ======================================================================== */

.bolum { padding-block: 4rem; }
.bolum-2 { background: var(--zemin-2); }

.bolum-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 2rem;
}
.bolum h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }

/* ========================================================================
   5. URUN IZGARASI VE KARTI
   ======================================================================== */

.izgara {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.urun-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    transition: box-shadow .25s ease, transform .25s ease;
}
.urun-kart:hover { box-shadow: var(--golge); }

.urun-gorsel {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--zemin-2);
}
.urun-gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.urun-kart:hover .urun-gorsel img { transform: scale(1.05); }

/* Gorsel yoksa bos cerceve degil, ne oldugunu soyleyen bir alan. */
.urun-gorsel-yok {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    font-size: .82rem;
    color: var(--metin-2);
}

.urun-etiket {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--koyu);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.urun-govde {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
    padding: 1rem;
}

.urun-ad { margin: 0; font-size: .96rem; font-weight: 600; line-height: 1.35; }
/*
    KARTIN TAMAMI TIKLANABILIR ama ic ice baglanti YOK: baslik
    baglantisi genisletilmis bir tiklama alani birakir. Kartin tamamini
    <a> ile sarmak, icindeki dugmeleri gecersiz isaretleme yapardi.
*/
.urun-ad a { color: inherit; text-decoration: none; }
.urun-ad a::after { content: ''; position: absolute; inset: 0; }

.urun-fiyat { margin: auto 0 0; font-size: 1.05rem; font-weight: 700; }
.urun-fiyat small { display: block; font-size: .78rem; font-weight: 500; color: var(--metin-2); }

/*
    ESKI FIYAT USTU CIZILI.

    `<s>` etiketi kullanildi, yalnizca `text-decoration` DEGIL: bicim
    kaldirildiginda ya da ekran okuyucuda "artik gecerli degil" anlami
    isaretlemede kalmali.
*/
.urun-eski-fiyat {
    margin-inline-start: .5rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--metin-2);
}

/* Indirim rozeti - metin tasir, yalnizca renk degil. */
.urun-rozet {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-end: .75rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.urun-rozet-indirim { background: var(--ana); color: #fff; }

/*
    RENK NOKTALARI.

    Nokta DEKORATIF (aria-hidden), rengin ADI yanindaki gizli metinde.
    Yalnizca renk gosterilseydi renk koru kullaniciya hicbir sey ifade
    etmezdi.
*/
.urun-renkler {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.urun-renkler li { display: flex; }

.urun-renk {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--nokta, #d4d4d8);
    /* Beyaz/krem tonlar beyaz zeminde kaybolmasin diye ince cerceve. */
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}

.urun-renk-fazla { font-size: .74rem; color: var(--metin-2); }

/*
    HIZLI SEPETE EKLEME.

    Hover'da BELIRMEZ: dokunmatik ekranda "uzerine gelme" yoktur ve
    beliren bir dugme orada hic gorunmezdi. Her zaman durur.
*/
.urun-sepet { margin-top: .35rem; }

.dugme-kucuk {
    min-height: 40px;
    padding-inline: 1rem;
    font-size: .88rem;
    width: 100%;
}

/* ========================================================================
   6. FILTRE PANELI
   ======================================================================== */

.liste-duzen { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
    .liste-duzen { grid-template-columns: 16rem 1fr; }
}

.filtre {
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    padding: 1.25rem;
}
.filtre fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.filtre fieldset:last-of-type { margin-bottom: 1rem; }
.filtre legend {
    padding: 0;
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.filtre-secenek {
    display: flex;
    align-items: center;
    gap: .65rem;
    /* Dokunma hedefi: satirin tamami tiklanabilir ve 44 piksel yuksek. */
    min-height: 44px;
    font-size: .92rem;
    cursor: pointer;
}
.filtre-secenek input { width: 18px; height: 18px; accent-color: var(--ana); }
.filtre-adet { margin-inline-start: auto; color: var(--metin-2); font-size: .82rem; }

/* ========================================================================
   7. SEPET, KASA, SIPARIS
   ======================================================================== */

.satirlar { list-style: none; margin: 2rem 0 0; padding: 0; border-block: 1px solid var(--cizgi); }
.satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
}
.satir + .satir { border-top: 1px solid var(--cizgi); }

.satir-gorsel {
    width: 80px; height: 80px;
    flex: none;
    overflow: hidden;
    border-radius: 12px;
    background: var(--zemin-2);
}
.satir-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.satir-bilgi { flex: 1; min-width: 12rem; }
.satir-bilgi p { margin: 0; }
.satir-ad { font-weight: 600; }
.satir-alt { font-size: .88rem; color: var(--metin-2); }
.satir-uyari { font-size: .88rem; font-weight: 600; color: var(--ana-koyu); }
.satir-tutar { width: 7rem; text-align: end; font-weight: 700; }

.alan { margin-bottom: 1.25rem; }
.alan label { display: block; margin-bottom: .5rem; font-size: .9rem; font-weight: 600; }
.alan input, .alan textarea, .alan select {
    width: 100%;
    min-height: 48px;
    padding: .6rem .85rem;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--zemin);
    color: var(--metin);
    font: inherit;
}
.alan textarea { min-height: 7rem; }
.alan-dar { max-width: 8rem; }

/* Hata ILGILI ALANIN ALTINDA durur, sayfa basindaki bir listede degil. */
.alan-hata { margin: .5rem 0 0; font-size: .88rem; font-weight: 600; color: var(--ana-koyu); }

.uyari {
    margin-block: 1.5rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--ana);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ana) 6%, transparent);
    font-size: .92rem;
}
.uyari p { margin: 0; }
.uyari ul { margin: .5rem 0 0; padding-inline-start: 1.25rem; }

/*
   MAGAZANIN TANITIM METNI.

   `pre-line`: musterinin satir sonlari korunur ama HTML yorumlanmaz
   (sablon `{{ }}` ile basiyor). Genislik 62em ile sinirli - uzun
   satir okumayi zorlastirir.
*/
/*
   KATEGORI DOSEMESI - iki buyuk kare.

   Yazi gorselin USTUNDE degil ALTINDA duruyor: gorsel uzerine yazilan
   metnin kontrasti fotografa gore degisir ve her magazada baska cikar.
   Altta duran yazinin kontrasti jetonlardan gelir ve olculebilir.
*/
.doseme {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.doseme-kare {
    display: block;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    overflow: hidden;
    background: var(--zemin);
    text-decoration: none;
    color: inherit;
}

.doseme-kare img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.doseme-yazi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1rem;
}

.doseme-ad { font-weight: 700; }
.doseme-adet { font-size: .82rem; color: var(--metin-2); font-variant-numeric: tabular-nums; }

.tanitim-metin {
    margin: .8rem 0 0;
    max-width: 62ch;
    line-height: 1.8;
    color: var(--metin-2);
    white-space: pre-line;
}

.bos-durum {
    margin-top: 2rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--cizgi);
    border-radius: var(--yumusak);
    text-align: center;
    color: var(--metin-2);
}

.ozet {
    align-self: start;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    padding: 1.25rem;
}
.ozet ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.ozet li { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; font-size: .92rem; }
.ozet-toplam {
    display: flex;
    justify-content: space-between;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cizgi);
    font-size: 1.1rem;
    font-weight: 700;
}

.kasa-duzen { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .kasa-duzen { grid-template-columns: 1fr 20rem; } }

.urun-duzen { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .urun-duzen { grid-template-columns: 1fr 1fr; } }

.urun-kapak { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--yumusak); background: var(--zemin-2); }
.urun-kapak img { width: 100%; height: 100%; object-fit: cover; }

.kucuk-gorseller { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1rem 0 0; padding: 0; }
.kucuk-gorseller li { aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--zemin-2); }
.kucuk-gorseller img { width: 100%; height: 100%; object-fit: cover; }

.ozellikler { display: grid; gap: .5rem; margin: 1.5rem 0 0; }
@media (min-width: 40rem) { .ozellikler { grid-template-columns: 1fr 1fr; } }
.ozellik {
    display: flex; gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    background: var(--zemin-2);
    font-size: .9rem;
}
.ozellik dt { margin: 0; font-weight: 600; }
.ozellik dd { margin: 0; }

/*
    SEKMELER (`<details>`).

    Betiksiz calisir; tarayici acma/kapama, klavye ve ekran okuyucu
    bildirimini kendisi yapar. JavaScript'li bir sekme, betigin
    yuklenmedigi durumda butun icerigi GIZLI birakirdi.
*/
.sekmeler {
    margin-top: 2rem;
    border-top: 1px solid var(--cizgi);
}

.sekmeler details {
    border-bottom: 1px solid var(--cizgi);
}

.sekmeler summary {
    /* Dokunma hedefi: satirin tamami tiklanabilir ve 48 piksel yuksek. */
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-block: .5rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.sekmeler summary::-webkit-details-marker { display: none; }

/* Ok isareti DURUMU GOSTERIR; yalnizca renkle degil bicimle anlatilir. */
.sekmeler summary::after {
    content: '';
    margin-inline-start: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.sekmeler details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.sekme-metin { margin: 0 0 1rem; color: var(--metin-2); font-size: .95rem; }

.sekmeler .ozellikler { margin-bottom: 1rem; }

/*
    WHATSAPP DUGMESI.

    Marka rengi (#25D366) SABIT: WhatsApp'in kendi rengidir ve tema
    jetonundan turetilmez - turetilseydi her temada baska renkte bir
    "WhatsApp" dugmesi cikar, taninmaz olurdu. Uzerindeki metin KOYU:
    beyaz metin bu yesilde 1.8:1 kalir.
*/
.whatsapp-satir { margin: 1rem 0 0; }

.dugme-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #0b2e17;
    gap: .5rem;
}
.dugme-whatsapp:hover { background: #1da851; border-color: #1da851; color: #0b2e17; }
.dugme-whatsapp svg { width: 20px; height: 20px; }

.ozellik-baslik {
    margin: 2rem 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.urun-toplam {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--metin-2);
}
.urun-toplam strong { color: var(--metin); font-size: 1.15rem; }

.yonerge {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin-2);
}
.yonerge pre {
    margin: .75rem 0 0;
    font: inherit;
    white-space: pre-wrap;
}

/* Sayfalama */
.sayfalama { margin-top: 2.5rem; }

/* ========================================================================
   7a. BANTLAR (kategori kutulari, firsat, galeri)
   ======================================================================== */

/*
    KATEGORI KUTULARI.

    Kare oran: kategori adlarinin uzunlugu degisir ama kutular ayni
    yukseklikte kalmali; degisken yukseklik izgarayi kirik gosterirdi.
*/
.kategori-kutular {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.kategori-kutu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    color: var(--metin);
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
}
.kategori-kutu:hover { color: var(--metin); box-shadow: var(--golge); transform: translateY(-2px); }

.kategori-kutu-gorsel {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--zemin-2);
}
.kategori-kutu-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.kategori-kutu-ad {
    display: block;
    padding: .85rem 1rem .15rem;
    font-weight: 700;
    font-size: .95rem;
}
.kategori-kutu-adet {
    display: block;
    padding: 0 1rem 1rem;
    font-size: .82rem;
    color: var(--metin-2);
}

/*
    FIRSAT BANDI - iki sutun: solda soz, sagda urun.

    Zemin `--zemin-2`: bant sayfadan AYRILMALI, yoksa bir bolum daha
    gibi durur ve "firsat" oldugu anlasilmaz.
*/
.firsat {
    background: var(--zemin-2);
    border-block: 1px solid var(--cizgi);
    overflow: hidden;
}

.firsat-ic {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding-block: 3.5rem;
}
@media (min-width: 56rem) {
    .firsat-ic { grid-template-columns: 1fr 20rem; }
}

.firsat h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.firsat-fiyat {
    margin: 1rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
}
.firsat-fiyat s {
    margin-inline-start: .6rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--metin-2);
}

.firsat-gorsel {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--yumusak);
    background: var(--zemin);
}
.firsat-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/*
    GORSEL SERIDI.

    Dar ekranda YATAY KAYAR, sarmaz: sarmak seridi iki-uc satirlik bir
    izgaraya cevirir ve "serit" olma niteligini kaybettirir. Kaydirma
    sayfayi degil SERIDI etkiler.
*/
.galeri-serit {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    gap: .75rem;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem;
}
.galeri-serit li { aspect-ratio: 1; overflow: hidden; border-radius: var(--yumusak); background: var(--zemin-2); }
.galeri-serit img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeri-serit a:hover img { transform: scale(1.06); }

/* ========================================================================
   7b. GUVENCE SERIDI
   ======================================================================== */

/*
    ORTAK BANT `.guvence-serit`, `.guvence` DEGIL.

    Bazi temalar kendi isaretlemesi icin `.guvence` sinifini
    tanimliyor (taki ve kozmetik `display: grid`, elektronik `flex`).
    Ortak bant ayni adi tasidiginda o kurallar buraya da uyguluyor ve
    `.kap` bir izgara ogesine donusup telefonda 758 piksele kadar
    sisiyordu.
*/
.guvence-serit {
    border-top: 1px solid var(--cizgi);
    background: var(--zemin);
}

.guvence-ic {
    display: grid;
    gap: 1.5rem;
    padding-block: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.guvence-oge { display: flex; gap: .85rem; align-items: flex-start; }

.guvence-oge svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--ana);
}

.guvence-baslik { margin: 0; font-size: .95rem; font-weight: 700; }
.guvence-metin { margin: .2rem 0 0; font-size: .86rem; color: var(--metin-2); }

@media print { .guvence { display: none; } }

/* ========================================================================
   8. ALT BILGI
   ======================================================================== */

.alt {
    margin-top: 4rem;
    border-top: 1px solid var(--cizgi);
    background: var(--zemin-2);
}
.alt-ic {
    display: grid;
    gap: 2rem;
    padding-block: 3rem;
}
@media (min-width: 40rem) { .alt-ic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .alt-ic { grid-template-columns: repeat(4, 1fr); } }

.alt h2 { margin: 0 0 .75rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.alt p { margin: 0; font-size: .92rem; color: var(--metin-2); }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: .5rem; }
.alt li a { font-size: .92rem; text-decoration: none; color: var(--metin); }
.alt li a:hover { color: var(--ana); }

.alt-serit { border-top: 1px solid var(--cizgi); }
.alt-serit p { padding-block: 1.25rem; text-align: center; font-size: .82rem; }

/* ========================================================================
   9. HAREKET TERCIHI
   ======================================================================== */

/*
    Ziyaretci hareketi azaltmayi sectiyse gecisler KAPANIR. Vestibuler
    rahatsizligi olan kullanicilar icin bu bir konfor degil, gerekliliktir.
*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ========================================================================
   10. BASKI
   ======================================================================== */

@media print {
    .serit, .ust, .alt, .filtre { display: none; }
    body { background: #fff; color: #000; }
}

/* ==========================================================
   YORUMLAR
   ==========================================================
   Yildizlar DEKORATIF (`aria-hidden`); puan ayrica metin olarak
   yaziliyor - renk ve sekil tek basina bilgi tasimamali.
*/
.yorum-ozet {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.05rem;
}

.yildiz { letter-spacing: .08em; color: var(--cizgi); }
.yildiz .dolu { color: var(--vurgu); }

.yorum-adet { color: var(--metin-2); font-size: .92rem; }

.yorum-bilgi {
    margin: 1.5rem 0 0;
    padding: .9rem 1.1rem;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--zemin-2);
    font-size: .95rem;
}

.yorum-bos { margin-top: 1.5rem; color: var(--metin-2); }

.yorum-listesi {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.25rem;
}

.yorum {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    background: var(--zemin);
}

.yorum-basi {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}

.yorum-ad { font-size: .98rem; }
.yorum-tarih { color: var(--metin-2); font-size: .85rem; }
.yorum-metin { margin: 0; color: var(--metin-2); }

.yorum-form {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cizgi);
    max-width: 46rem;
}

.yorum-form h3 { margin: 0 0 1.25rem; font-size: 1.15rem; }

.yorum-alan { margin-bottom: 1.1rem; }

.yorum-alan label,
.yorum-alan legend {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
    font-size: .92rem;
}

.yorum-istege-bagli { font-weight: 400; color: var(--metin-2); }

.yorum-alan input[type="text"],
.yorum-alan input[type="email"],
.yorum-alan textarea {
    width: 100%;
    min-height: 44px;
    padding: .65rem .85rem;
    border: 1px solid var(--metin-2);
    border-radius: 10px;
    background: var(--zemin);
    color: var(--metin);
    font: inherit;
}

.yorum-alan textarea { min-height: 7rem; resize: vertical; }

/* Radyo dugmeleri: dokunma hedefi 44px, betiksiz calisir. */
.yorum-puanlar { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

.yorum-puan {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    font-weight: 500;
    cursor: pointer;
}

.yorum-hata { margin: .4rem 0 0; color: var(--vurgu-acik); font-size: .88rem; font-weight: 600; }

.yorum-not { margin: 0 0 1.1rem; color: var(--metin-2); font-size: .88rem; }

/* ==========================================================
   FAVORI DUGMESI
   ==========================================================
   Gorselin ustunde, kartin sag ust kosesinde. Dokunma hedefi 44px -
   ikon 20px ama tiklanabilir alan buyuk (WCAG 2.5.8 ve Apple HIG).

   Dolu/bos kalp bir RENK ve SEKIL farki; durum ayrica `aria-pressed`
   ile bildiriliyor - renk tek basina bilgi tasimamali.
*/
/*
    KONUMLAR CAKISMAZ.

    Ust koseler ZATEN DOLU: sol ustte "Tükendi" etiketi
    (`.urun-etiket`), sag ustte indirim rozeti (`.urun-rozet`). Ilk
    yazimda kalp sag uste konuldu ve indirim rozetinin uzerine bindi -
    yani satisi surukleyen bilgiyi kapatti.

    Iki dugme ALT KOSELERDE: karsilastirma solda, favori sagda.
*/
.favori-form { position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem; z-index: 2; margin: 0; }

.favori-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    color: var(--metin-2);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.favori-dugme svg { width: 20px; height: 20px; }

.favori-dugme:hover { color: var(--vurgu); background: var(--zemin); }
.favori-dugme.dolu { color: var(--vurgu); }

/* `.urun-gorsel` zaten `position: relative` (yukarida, 575. satir
   civari); burada tekrarlanmadi - ayni ozelligi iki yerde tanimlamak,
   birini degistirenin digerini gormemesi demek. */

/* ==========================================================
   KARSILASTIRMA TABLOSU
   ==========================================================
   Tablo KENDI ICINDE kayar: dort sutun telefonda sigmaz ve sayfanin
   tamamini yatay kaydirilabilir yapmak butun duzeni bozardi.
*/
.karsilastirma-sarmal { margin-top: 2rem; overflow-x: auto; }

.karsilastirma {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: .95rem;
}

.karsilastirma th,
.karsilastirma td {
    padding: .85rem 1rem;
    border: 1px solid var(--cizgi);
    text-align: start;
    vertical-align: top;
}

/* Satir basliklari (ozellik adlari) daha silik: gozun once
   degerleri taramasi icin. */
.karsilastirma tbody th {
    width: 10rem;
    color: var(--metin-2);
    font-weight: 600;
}

.karsilastirma thead th { background: var(--zemin-2); }

.karsilastirma thead img {
    display: block;
    width: 100%;
    max-width: 9rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: .6rem;
}

/* Karsilastirma dugmesi - favori kalbinin yaninda. */
.karsilastir-form { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; z-index: 2; margin: 0; }

.karsilastir-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    color: var(--metin-2);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.karsilastir-dugme svg { width: 20px; height: 20px; }
.karsilastir-dugme:hover { color: var(--ana-koyu); background: var(--zemin); }
.karsilastir-dugme.dolu { color: var(--ana-koyu); }

/* ==========================================================
   LISTE SAYFASI BASLIGI (fotografli)
   ==========================================================
   Vitrindeki perdeyle AYNI mantik ama daha kisa: burada okunacak tek
   sey basliktir, uzun bir metin yok.
*/
.liste-basi-gorselli {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 15rem;
    padding-block: 2.5rem;
    overflow: hidden;
}

.liste-basi-arka {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
    PERDE - vitrindekinden DAHA KOYU ve daha esit.

    Vitrinde perde soldan saga aciliyor cunku fotografta bir kisi var ve
    sag taraf acik kalmali. Burada okunacak tek sey basliktir ve baslik
    sola dayali; perdenin esit olmasi, hangi fotograf gelirse gelsin
    basligi okunur tutar.
*/
.liste-basi-gorselli::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--koyu) 82%, transparent) 0%,
        color-mix(in srgb, var(--koyu) 62%, transparent) 60%,
        color-mix(in srgb, var(--koyu) 40%, transparent) 100%
    );
}

/*
    `.kap` FLEX OGESI OLARAK DARALIYORDU.

    Flex icinde `.kap` icerigine gore kuculuyor ve `margin: 0 auto`
    onu ORTALIYORDU - baslik sayfanin ortasinda duruyordu, oysa
    vitrinde ve butun diger bolumlerde sola dayali. `width: 100%`
    kabi eski genisligine dondurur.
*/
.liste-basi-gorselli > .kap { position: relative; z-index: 2; width: 100%; }

.liste-basi-gorselli h1 { margin: 0; color: #fff; }
.liste-basi-gorselli .slogan { margin: .6rem 0 0; color: #f4f4f5; max-width: 46rem; }

/*
    BASLIKTAKI IKON RAYI - DAR EKRAN
    ================================
    Dort ikon + marka telefonda sigmiyordu ve sayfa YATAY KAYIYORDU
    (375 piksellik ekranda 757 piksel). Kucultmek secenek degil:
    dokunma hedefi 44 pikselin altina inemez.

    Karsilastirma ikonu dar ekranda gizlenir; liste yine urun
    kartlarindaki dugmeden yonetilir ve `/karsilastir` adresi calisir.

    Marka da SINIRLANIR: uzun bir magaza adi (ozellikle genis harf
    arali temalarda) tek basina rayi disari itebiliyordu.
*/
.ray-dugme-genis { display: none; }

/*
    MARKA ADI DAR EKRANDA KUCULUR.

    Olculdu (375 piksel, taki temasi): marka 217 + ikon rayi 140 +
    bosluk + dolgu = 401 piksel. Yani baslik tek basina sayfayi yatay
    kaydiriyordu.

    Kucultme `.marka` UZERINDE DEGIL `.marka-ad` uzerinde: her tema
    `.marka`nin yazi boyutunu kendi kimligine gore eziyor ve tema
    stili temelden SONRA yuklendigi icin buradaki bir kural
    kaybederdi. `.marka-ad`i tema ezmiyor; `em` ile yazildigi icin de
    temanin sectigi boyutla orantili kaliyor.

    HARF ARALIGI DA DARALIR ve asil kazanc oradan gelir: taki
    temasinda arali 7.2 piksel, yedi harfte 50 piksel ediyor - yani
    ismin yarisi kadar bosluk. Yalnizca yazi boyutunu kucultmek adi
    "KUYUMC…" diye kirpiyordu; adin TAMAMI gorunmeli, marka bu.

    Ust sinir son care olarak duruyor: cok uzun bir magaza adi yine de
    rayi disari itmesin diye - ama olagan adlarda devreye girmez.
*/
.marka-ad {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-size: .84em;
    letter-spacing: .06em;
}

@media (min-width: 48rem) {
    .ray-dugme-genis { display: grid; }
    .marka-ad { max-width: none; overflow: visible; font-size: inherit; letter-spacing: inherit; }
}

/* =====================================================================
   ALTIN & DOVIZ FIYAT PANOSU - KENDI SAYFASI
   =====================================================================
   Renkler JETONDAN. Tema sozlesmesi (CLAUDE.md) renk yazmayi yasaklar:
   musteri panoyu da yapay zekaya yazarak degistirebilmeli.

   Bu sayfa magaza vitrininden AYRI bir duzendir (Abdullah'in istegi,
   2026-09-07): "gercek bir finans sayfasi gibi gozukmeli". Vitrinin
   menusu, sepeti ve seridi burada yok - ziyaretci buraya tek bir sey
   icin gelir: rakama bakmak.
   ===================================================================== */

.pano-sayfa {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
}

.pano-kap {
    width: min(100% - 2rem, 76rem);
    margin-inline: auto;
}

/* --- Ust serit: marka + canli saat --- */

.pano-ust {
    border-bottom: 1px solid var(--cizgi);
    background: var(--zemin-2);
}

.pano-ust .pano-kap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
}

.pano-marka {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--metin);
}

.pano-marka:hover { color: var(--ana); }
.pano-marka .marka-isaret { width: 1.4rem; height: 1.4rem; }

.pano-ust-sag {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.pano-geri {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Dar ekranda "Magazaya don" baglantisi gizlenir: ust serit iki
   satira dusmesin. Marka zaten ayni yere goturuyor. */
@media (max-width: 32rem) {
    .pano-geri { display: none; }
}

/*
    CANLI SAAT.

    `tabular-nums` sart: oransal rakamlarda saniye her degistiginde
    genislik oynar ve saat titrer. Titreyen bir saat, sayfanin
    "canli" degil "bozuk" gorunmesini saglar.
*/
.pano-saat {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: var(--metin-2);
}

/* --- Baslik --- */

.pano-baslik-satiri { padding-top: clamp(1.6rem, 4vw, 3rem); }
.pano-baslik-satiri h1 { margin: 0.2rem 0 0.4rem; }
.pano-baslik-satiri .ust-etiket { margin: 0; }
.pano-aciklama { margin: 0; color: var(--metin-2); }

/*
    MAGAZANIN KENDI TANITIM METNI - tabloyla baslik arasinda.

    Genislik SINIRLI: fiyat tablosu ekranin tamamini kullanir ama duz
    metin oyle olmamali; 70 karakteri gecen satirlarda goz satir basini
    kaybeder.
*/
.pano-giris { margin: 14px 0 0; max-width: 68ch; display: grid; gap: 8px; }
.pano-giris p { margin: 0; color: var(--metin-2); line-height: 1.65; }

.pano-durum {
    min-height: 1.4rem;
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--metin-2);
}

/* --- Izgara: tablo solda, cevirici sagda --- */

.pano-izgara {
    display: grid;
    gap: 1.5rem;
    padding-bottom: 3rem;
}

/*
    IZGARA OGESI DARALABILMELI.

    Grid ogelerinin varsayilan `min-width` degeri `auto`dur: icindeki
    genis tablo kadar genislerler. Sonucu telefonda olculdu - SAYFANIN
    KENDISI yatay kayiyordu ve "Satis" sutunu ekran disinda kaliyordu.
    Tablo kendi kabinda kaymali, sayfa degil.
*/
.pano-izgara > * { min-width: 0; }

@media (min-width: 60rem) {
    .pano-izgara {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }

    /* Cevirici kaydirirken gorunur kalir - ziyaretci tabloya bakarken
       hesap yapabilmeli. */
    .pano-yan { position: sticky; top: 1.5rem; }
}

.pano-blok { margin-top: 1.5rem; }

.pano-blok-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.pano-blok-basi h2 { margin: 0; font-size: 1.1rem; }

.pano-yas {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.pano-yas-canli { border-color: var(--ana); color: var(--ana); }
.pano-yas-gecikmis { color: var(--metin-2); }
.pano-yas-bayat { border-color: var(--vurgu); color: var(--vurgu-koyu); }

/* --- Tablo --- */

.pano-tablo {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
}

.pano-tablo th,
.pano-tablo td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--cizgi);
    font-size: 0.95rem;
}

.pano-tablo thead th {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--metin-2);
    font-weight: 600;
}

.pano-tablo tbody tr:last-child th,
.pano-tablo tbody tr:last-child td { border-bottom: 0; }

.pano-tablo th:first-child,
.pano-tablo tbody th { text-align: left; font-weight: 600; }

.pano-sag { text-align: right; }

/*
    RAKAM SUTUNLARI SABIT GENISLIKTE.

    Fiyat her guncellendiginde basamak sayisi degisebilir; oransal
    rakamlarda sutun o anda kayar ve goz surekli yeniden hizalanmak
    zorunda kalir. Canli bir tabloda bu yorucudur.
*/
.pano-sayi {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pano-fark { font-variant-numeric: tabular-nums; }

.pano-fark-deger {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.pano-fark-artis { color: var(--artis); }
.pano-fark-dusus { color: var(--dusus); }
.pano-fark-ayni { color: var(--metin-2); }

/*
    DEGISIMDE YANIP SONME.

    Sayfanin canli oldugunu anlatan sey bu: rakam degistiginde hucre
    kisa bir an renklenir. Kalici degil - kalici olsaydi tablo bir sure
    sonra bastan asagi renkli olurdu ve isaret anlamini yitirirdi.

    `prefers-reduced-motion` acikken betik bu sinifi HIC eklemez.
*/
@keyframes pano-yanip-artis {
    from { background: var(--artis); color: #ffffff; }
    to { background: transparent; }
}

@keyframes pano-yanip-dusus {
    from { background: var(--dusus); color: #ffffff; }
    to { background: transparent; }
}

.pano-yanip-artis { animation: pano-yanip-artis 1.1s ease-out; }
.pano-yanip-dusus { animation: pano-yanip-dusus 1.1s ease-out; }

/* --- Doviz AYRI KUTULARDA - gerekce fiyat-panosu.blade.php icinde. --- */

.pano-kutular {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.pano-kutu {
    padding: 0.9rem 1rem;
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
}

.pano-kutu-ad {
    margin: 0 0 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pano-kutu-fiyat {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pano-etiket {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--metin-2);
}

/* --- Cevirici --- */

.pano-cevirici-kutu {
    padding: 1.1rem;
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
}

.pano-cevirici-kutu h2 {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--metin-2);
}

.pano-alan { display: block; margin-bottom: 0.8rem; }

.pano-alan > span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--metin-2);
}

.pano-alan input,
.pano-alan select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cizgi);
    border-radius: 0;
    background: var(--zemin);
    color: var(--metin);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.pano-alan input:focus-visible,
.pano-alan select:focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 2px;
}

.pano-cevirici-sonuc {
    margin: 1rem 0 0;
    border-top: 1px solid var(--cizgi);
    padding-top: 0.8rem;
}

.pano-cevirici-sonuc > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.pano-cevirici-sonuc dt { font-size: 0.85rem; color: var(--metin-2); }

.pano-cevirici-sonuc dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pano-cevirici-not {
    margin: 0.8rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--metin-2);
}

.pano-bos {
    padding: 2rem;
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
    text-align: center;
    color: var(--metin-2);
}

.pano-not {
    margin: 0 0 3rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--metin-2);
}

/*
    Genis tablo KENDI ICINDE kaydirilir; sayfa govdesi yatay kaydirmaz.
    Medya sorgusuna BAGLI DEGIL: dar bir kolon masaustunde de olusabilir
    (yan yana iki sutun duzeni), ve o durumda da tablo kendi icinde
    kaymali.
*/
.pano-tablo-sar { overflow-x: auto; }
.pano-tablo { min-width: 32rem; }

@media (max-width: 40rem) {
    .pano-tablo th, .pano-tablo td { padding: 0.55rem 0.6rem; font-size: 0.9rem; }

    /* Doviz kutulari telefonda tek sutuna duser. */
    .pano-kutular { grid-template-columns: 1fr; }
}

/*
    =====================================================================
    TELEFONDA DORT SUTUN DA EKRANDA KALIR
    =====================================================================
    Olculdu (375px): tablo 32rem alt sinirla kendi icinde kayiyordu ve
    SATIS sutunu ekran disinda kaliyordu. Fiyat sayfasinda en cok
    bakilan iki rakamdan biri kaydirmadan gorunmuyordu - "canli fiyat
    tablosu" olmanin asgari sarti bu degil.

    Cozum sutun gizlemek degil KUCULTMEK: alt sinir kaldiriliyor,
    dolgu ve punto daraliyor. Olculdu: 375 piksel ekranda tablo 343
    piksele oturuyor ve HIC kaymiyor.

    Gunluk aralik da kaliyor. Once gizlenmesi planlanmisti ama yer
    yetiyor ve satirin en cok ise yarayan ikinci bilgisi o; gizlemek
    icin bir sebep kalmadi.
*/
@media (max-width: 30rem) {
    .pano-tablo { min-width: 0; }

    .pano-tablo th,
    .pano-tablo td { padding: 0.5rem 0.3rem; font-size: 0.82rem; }

    .pano-tablo thead th { font-size: 0.62rem; letter-spacing: 0.04em; }

    .pano-tablo tbody th { font-size: 0.78rem; }

    .pano-fark-deger { font-size: 0.72rem; }
    .pano-aralik { font-size: 0.68rem; }
}

/* --- Doviz kutusunun basi: ad solda, fark rozeti sagda --- */

.pano-kutu-basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.pano-kutu-basi .pano-kutu-ad { margin: 0; }

/* =====================================================================
   SORU - CEVAP
   =====================================================================
   `<details>` KULLANILIYOR, JS ile acilan bir kutu degil: klavye,
   ekran okuyucu ve "sayfada bul" yerlesik olarak calisir ve betik
   yuklenmese bile icerik okunabilir kalir.
   ===================================================================== */

.pano-sss {
    margin: 0 0 4rem;
    padding-top: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid var(--cizgi);
}

.pano-sss h2 { margin: 0 0 1.2rem; }

.pano-soru {
    border-bottom: 1px solid var(--cizgi);
}

.pano-soru summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    /* Dokunma hedefi: 44px'in altina dusmemeli. */
    min-height: 44px;
    padding: 0.9rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.pano-soru summary::-webkit-details-marker { display: none; }

.pano-soru summary::after {
    content: '+';
    flex: none;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ana);
}

.pano-soru[open] summary::after { content: '−'; }

.pano-soru summary:focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 2px;
}

.pano-cevap {
    padding-bottom: 1.1rem;
    max-width: 68ch;
}

.pano-cevap p { margin: 0; line-height: 1.75; color: var(--metin-2); }

/* --- Alt bilgi --- */

.pano-alt {
    border-top: 1px solid var(--cizgi);
    background: var(--zemin-2);
    font-size: 0.85rem;
    color: var(--metin-2);
}

.pano-alt .pano-kap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-block: 1.4rem;
}

.pano-alt p { margin: 0; }

/*
    DOKUNMA HEDEFI 24 PIKSELIN ALTINA DUSMEZ (WCAG 2.2 2.5.8).

    Olculdu: alt bilgideki baglanti 91x16 piksel cikiyordu - genis ama
    ince. Yatay boyutun buyuk olmasi yetmez; parmak dikeyde de kayar.
    Dikey dolgu hem hedefi buyutur hem de bitisik metinden ayirir.
*/
.pano-alt a {
    display: inline-block;
    padding-block: 0.5rem;
}

/* =====================================================================
   VITRINDEKI CANLI FIYAT KARTI
   =====================================================================
   Gerekce partials/fiyat-karti.blade.php icinde. Renkler jetondan.
   ===================================================================== */

.fiyat-karti-bolum { padding-block: clamp(2rem, 5vw, 4rem); }

.fiyat-karti {
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
}

.fiyat-karti-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.fiyat-karti-basi h2 { margin: 0.2rem 0 0; }
.fiyat-karti-basi .ust-etiket { margin: 0; }

.fiyat-karti-zaman {
    font-size: 0.8rem;
    color: var(--metin-2);
    font-variant-numeric: tabular-nums;
}

.fiyat-karti-liste {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.fiyat-karti-liste li {
    padding: 0.9rem 1rem;
    border: 1px solid var(--cizgi);
    background: var(--zemin);
}

.fiyat-karti-ad {
    display: block;
    font-size: 0.8rem;
    color: var(--metin-2);
    margin-bottom: 0.3rem;
}

.fiyat-karti-fiyat {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    /* Rakam sutunlari sabit genislikte; oransal rakamlarda basamak
       degisince kutu genisligi oynar. */
    font-variant-numeric: tabular-nums;
}

.fiyat-karti-birim { font-size: 0.85rem; font-weight: 500; color: var(--metin-2); }

.fiyat-karti-etiket {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--metin-2);
}

.fiyat-karti-eylem { margin: 0; }

/*
    METIN ICINDEKI BAGLANTILARIN DOKUNMA HEDEFI.

    Olculdu (gulkuyumcu.com, 2026-09-07): bos sepet metnindeki
    "Urunlere goz atin" baglantisi 124x19 piksel. WCAG 2.2 2.5.8 en az
    24x24 istiyor; yatay boyutun buyuk olmasi yetmez, parmak dikeyde
    de kayar.

    Satir ici baglantiya dikey dolgu vermek satir yuksekligini bozmaz
    cunku `inline-block` degil `inline` kalir; hedef kutusu buyur,
    metin akisi ayni durur.
*/
.bos-durum a {
    padding-block: 0.4rem;
}

/*
    GUNLUK ARALIK - SATIS FIYATININ ALTINDA IKINCIL SATIR.

    Ayri bir sutun olarak eklenseydi tablo telefonda bir sutun daha
    genisler ve zaten kayan tabloyu daha da kaydirirdi. Ikincil satir
    ayni bilgiyi yer kaplamadan verir; punto ve renk onu asil fiyatin
    ONUNE GECIRMEZ.
*/
.pano-aralik {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: var(--metin-2);
    white-space: nowrap;
}

/* =====================================================================
   CANLI OLDUGUNU GOSTEREN HAREKET
   =====================================================================
   Abdullah'in geri bildirimi: "sayfada hic hareket yok, ilk gelen
   bunun canli oldugunu anlayamaz".

   Yanip sonme yalnizca fiyat DEGISINCE oluyor ve kaynak dakikada bir
   yaziyor; sayfa cogu zaman duruyor gibi gorunuyordu. Buradaki hareket
   fiyata degil BAGLANTIYA bakar - uydurulmus bir oynama degil,
   "sayfa su an calisiyor" bilgisidir.

   Hepsi `prefers-reduced-motion` altinda durur.
   ===================================================================== */

.pano-nabiz {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--metin-2);
}

.pano-nokta {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--artis);
    animation: pano-nabiz-atar 2s ease-in-out infinite;
}

@keyframes pano-nabiz-atar {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* Her basarili yoklamada bir kez parlar. */
.pano-nabiz-yenilendi .pano-nokta { animation: pano-nabiz-parla 0.6s ease-out; }

@keyframes pano-nabiz-parla {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--artis) 70%, transparent); }
    100% { box-shadow: 0 0 0 0.55rem transparent; }
}

/* --- Yoklama cubugu ve sayac --- */

.pano-akis {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.pano-akis-cubuk {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--cizgi);
    overflow: hidden;
}

/*
    Cubuk her yoklama araliginda soldan saga dolar. Sure JS'ten
    degisken olarak gelir: aralik degisirse animasyon da degisir,
    ikisinin ayrisma ihtimali kalmaz.
*/
.pano-akis-cubuk::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ana);
    transform-origin: left center;
    animation: pano-akis-dolar var(--pano-aralik, 10s) linear infinite;
}

@keyframes pano-akis-dolar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.pano-akis-metin {
    flex: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--metin-2);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .pano-nokta,
    .pano-akis-cubuk::after { animation: none; }

    /* Hareket kapaliyken cubuk dolu durur: bos bir cizgi "bozuk"
       gorunurdu. */
    .pano-akis-cubuk::after { transform: scaleX(1); opacity: 0.4; }
}

/* =====================================================================
   RAKAMIN ARKASINDAKI ISIK
   =====================================================================
   Abdullah'in istegi (2026-09-08): haremaltin.com'daki gibi
   rakamlarin arkasinda kirmizi/yesil isik olsun.

   Yanip sonme tek basina yetmiyordu: kaynak dakikada bir yaziyor ve
   ziyaretci o ani yakalayamazsa tablo olu gorunuyordu. Bu isik
   KALICI - her kalemin SON hareketinin yonunu gosterir, yani sayfa
   acildigi anda hangi kalem yukari hangisi asagi gitmis goruluyor.

   Renk tek basina anlam tasimiyor: yon ayrica "Fark" sutununda ok ve
   yuzdeyle yaziyor (WCAG 1.4.1 - bilgi yalnizca renkle verilmez).

   Ton COK ACIK (%10-14): rakamin okunurlugunu bozmamali. Kontrast
   olcumu bu zeminlerle yapildi ve metin esigi korunuyor.
   ===================================================================== */

.pano-tik-artis,
.pano-tik-dusus {
    position: relative;
    /* Isik degistiginde sicrama olmasin. */
    transition: background-color .45s ease;
}

.pano-tik-artis { background-color: color-mix(in srgb, var(--artis) 12%, transparent); }
.pano-tik-dusus { background-color: color-mix(in srgb, var(--dusus) 12%, transparent); }

/*
    SOL KENARDA INCE CIZGI.

    Yalnizca zemin tonu, koyu temada ve yuksek isikta zor secilebilir.
    Ince ve doygun bir kenar cizgisi ise her kosulda gorunur - ve
    dekoratif oldugu icin kontrast orani gerektirmez.
*/
.pano-tik-artis::before,
.pano-tik-dusus::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
}

.pano-tik-artis::before { background: var(--artis); }
.pano-tik-dusus::before { background: var(--dusus); }

/* Doviz kutusunda isik kutucugun kendi icinde durur. */
.pano-kutu-fiyat > .pano-tik-artis,
.pano-kutu-fiyat > .pano-tik-dusus {
    padding: 0.35rem 0.5rem 0.35rem 0.6rem;
}

/*
    YANIP SONME KALICI ISIGIN UZERINE BINER.

    Once kisa ve doygun bir parlama (degisim ANI), sonra acik tonlu
    kalici isik (son yon). Ikisi ayni anda calisir; animasyon bitince
    alttaki ton gorunur kalir.
*/
.pano-yanip-artis,
.pano-yanip-dusus { position: relative; }