@font-face{font-family:Clash;src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/a47c0bf033a1.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Clash;src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/f98be4842650.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Clash;src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/f49f8bb2db96.woff2) format("woff2");font-weight:500;font-display:swap}
*{box-sizing:border-box}
/* ============================================================
   KOLİLAZIM TASARIM SİSTEMİ - TEK KAYNAK
   Bütün ölçü, renk, aile, kalınlık ve boşluk burada tanımlanır.
   Hiçbir üretici ham değer yazmaz. Bekçi (bekci.py) build'de denetler.

   DEĞERLERİN KAYNAĞI (hiçbiri seçilmedi, hepsi ölçüldü):
     Artboard 2.svg      mobil ürün sayfası, tuval 1006,38
     hero7_bas.svg       masaüstü başlık, tuval 1724
     Artboard 17/18/8    stand, kurumsal ve tasarım bölümleri
   ============================================================ */
:root{

  /* ---- TUVAL ----
     Masaüstü 1724 (Illustrator tasarım dosyası)
     Mobil    1006,38 (Artboard 2) */
  --AW:1724;
  --AW-mobil:1006.38;

  /* ---- YAZI AİLESİ ----
     Tek aile, tek yedek zinciri. Önceden dört ayrı zincir vardı. */
  --yazi:Clash,"Helvetica Neue",Arial,sans-serif;
  /* İki ağırlık: 300 etiket ve teşhir, 400 gövde ve başlık.
     Artboard 2'de ClashDisplay-Light 300 kullanılmış. */
  /* ---- AĞIRLIK: İKİ DEĞER ----
     Gülbin, 11 Eylül: "iki: 300 ince + 500 başlık."
     Ölçüldü: kodda üç ham ağırlık vardı — 400 (52 kez), 500 (46), 300 (8) —
     ve jetonlar tanımlıydı ama hiçbir yerde kullanılmıyordu. Gövdedeki 400'ler
     300'e indi (Artboard 2'de her şey ClashDisplay-Light 300), başlıklar 500'de
     kaldı. .ft h4 hiç kural almadığı için tarayıcı varsayılanı 700 çıkıyordu,
     o da bu geçişte kapandı. */
  --ag-ince:300;
  --ag-baslik:500;

  /* ---- PUNTO ----
     Artboard 2'den okunan değerler (tuval birimi -> 390 px ekran):
       70,67 -> 27,4   ürün başlığı        (cls-9)
       58,48 -> 22,7   büyük sayı          (cls-10)
       26,80 -> 10,4   etiket ve buton     (cls-5, cls-6)
       15,79 ->  6,1   kart başlığı        (cls-8)
        7,07 ->  2,7   kart gövdesi        (cls-11, yer tutucu)
     Son iki değer şablonda yer tutucu olarak küçük çizilmiş,
     okunur tabana çekildi. Alt sınır 11 px. */
  --f0:34px;   /* sayfa başlığı (alt sayfa açılışı) */
  --f1:26px;   /* ürün ve bölüm başlığı */
  --f2:20px;   /* büyük teşhir sayısı: 12 / 3 / 3.000 */
  --f3:17px;   /* kart başlığı, fiyat, form girişi */
  --f4:13px;   /* gövde metni */
  --f5:11px;   /* etiket, rozet, kırıntı, akordeon başlığı */

  /* ---- MASAÜSTÜ PUNTO MERDİVENİ ----
     Gülbin, 11 Eylül: "masaüstünde ve mobilde ayrı ayrı olsun ama nereye
     koyarsak koyalım aynı olsun."
     Ölçüldü: masaüstünde 216 punto kullanımı vardı ve 44 AYRI değer
     (11'den 153,52 birime). Merdiven diye bir şey yoktu; bekçi yalnızca ham
     px yakaladığı için tuval birimi (calc(N*100cqw)) gözünden kaçmıştı.
     Basamaklar uydurulmadı, kodun kendi baskın değerlerinden (mod) alındı:
       15 birim 29 kez · 17 birim 25 · 16 birim 19 · 13 birim 15 · 22 birim 7
     Gülbin 6 basamak seçti, mobildeki --f0..--f5 ile birebir eşleşsin diye.
     --AW kullanan her bağlamda çözülür (footer 1724, kart 1724 vb). */
  --m0:calc(96*100cqw/var(--AW));    /* sayfa başlığı      1440'ta 80,2px */
  --m1:calc(67.3*100cqw/var(--AW));  /* bölüm başlığı      56,2px */
  --m2:calc(40*100cqw/var(--AW));    /* alt başlık, footer 33,4px */
  --m3:calc(22*100cqw/var(--AW));    /* kart başlığı, fiyat 18,4px */
  --m4:calc(15*100cqw/var(--AW));    /* gövde metni        12,5px */
  --m5:calc(13*100cqw/var(--AW));    /* etiket, rozet      10,9px */

  /* ---- SATIR YÜKSEKLİĞİ ---- */
  --sy-baslik:1.1;
  --sy-kart:1.25;
  --sy-govde:1.5;

  /* ---- RENK ----
     Artboard 2'nin beş rengi + markanın kendi renkleri.
     Şablonda hiçbir yazıda opaklık yok. */
  /* Gülbin, 16 Eylül: "bizim koyu mavi olsun."
     Artboard 2'den ölçülen iki koyu ton (#16222a yazı, #030e1a dolgu)
     marka laciverdinden ayrı duruyordu: sayfada iki koyu yan yanaydı.
     İkisi de marka laciverdine bağlandı, sitede tek koyu kaldı.
     Jeton adları duruyor ki rol bilgisi (yazı / dolgu) kaybolmasın. */
  --ab-yazi:#021f36;    /* bütün yazılar ve çizgiler */
  --ab-koyu:#021f36;    /* koyu dolgu: birincil buton, footer */
  --ab-yesil:#87be7d;   /* yeşil dolgu: yıldız, kargo çubuğu */
  --ab-yesil2:#87b772;  /* yeşil kontur */
  --beyaz:#ffffff;

  --green:#61ce70;      /* marka yeşili */
  --mavi-koyu:#021f36;  /* marka lacivert */
  --mavi-acik:#0d597c;  /* ikincil mavi */
  /* Acik yuzeydeki guclu renk. Dokuz yerde kullaniliyordu ama hicbir
     yerde tanimli degildi; var() cozulemeyince "background:var(...)"
     dusuyor, "color:var(...)" ise miras aliyordu. Sonuc: acik
     bolumlerdeki "Daha fazlasini gor" butonu uzerine gelince beyaz
     zeminde beyaz yaziya donup kayboluyordu (Gulbin, 22 Eylul).
     Deger marka lacivertinin kendisi, yeni renk uretilmedi. */
  --vurgu-uzeri:var(--mavi-koyu);
  --yzy-panel:#071e29;  /* üste binen koyu yüzey: çekmece, mega menü */
  --yzy-serit:#031c27;  /* kampanya şeridi (canlıdan ölçüldü) */
  --siyah:#000000;      /* video ve hero zemini */
  --zemin-acik:#f4f4f2;  /* açık gri yüzey */
  /* koyu yüzey üzerindeki yazı kademeleri */
  --mtn-1:#e8f1ec;      /* koyu zeminde başlık */
  --mtn-2:#cfe6dc;      /* koyu zeminde gövde */
  --mtn-3:#93a89f;      /* koyu zeminde ikincil */
  --uyari:#c0392b;      /* açık zeminde yıkıcı eylem */
  --uyari-acik:#ff8b8b; /* koyu zeminde yıkıcı eylem */

  /* kanal değerleri: rgba() için, düz yazım yerine */
  --green-rgb:97,206,112;
  --mavi-koyu-rgb:2,31,54;
  --ab-yazi-rgb:2,31,54;

  /* ---- BOŞLUK: 8'lik ızgara ---- */
  --r0:4px;    /* atom altı: rozet iç dolgusu */
  --r1:8px;    /* bağlı ögeler */
  --r2:16px;   /* kart iç dolgusu, bileşen içi grup */
  --r12:12px;  /* ara adım: form ızgarası, sıkı gruplar */
  --r3:24px;   /* bileşenler arası */
  --r32:32px;  /* ara adım: bant içi büyük boşluk */
  --r4:48px;   /* bant iç dolgusu */
  --r5:64px;   /* sayfa uçları */
  --yan:20px;  /* ekran kenarı yan boşluğu */

  /* ---- BİLEŞEN ÖLÇÜLERİ (ızgara boşluğu değil) ---- */
  --baslik-yuk:56px;  /* mobil üst çubuk yüksekliği */

  /* ---- ÇİZGİ ----
     Clash Regular'ın gövde kalınlığından ölçüldü:
     gövde çizgisi / yazı boyu = 0,0714. 1724 tuvalinde 19,9 x 0,0714 = 1,42 px. */
  --cizgi:max(1px, calc(1.42 * 100vw / 1724));

  /* ---- İKON ----
     hero7_bas.svg: ikonların hepsi ~25 birim yükseklikte, logo 108,6 x 55,2.
     Artboard 2: hamburger 45, sepet 47 birim, yani aynı genişlikte;
     logo ikonun tam 3 katı. */
  --ik:24px;        /* standart ikon kutusu */
  --ik-bas:28px;    /* başlık çubuğu ikonu: menü ve sepet */
  --ik-s:16px;      /* satır içi ok işareti */
  --ik-cizgi:1.5px; /* TEK kontur kalınlığı */
  /* Ürün çizimleri (stand rafları ve ölçü çizimleri). Bunlar ikon değil
     teknik çizim; çok sayıda çizgi yan yana geliyor. Çerçeve kalınlığı
     (1 px) blok gibi duruyordu, dosyaların doğal hali (~0,45) ise fazla
     silikti. Gülbin, 17 Eylül: "şimdi biraz kalınlık ekleyelim standa ve
     raflara." Çerçevenin %70'i. */
  --cizim-cizgi:calc(var(--cizgi) * .7);
  --ik-dokunma:44px;/* dokunma kutusu */
  --logo-mobil:66px;/* ikon genişliğinin 3 katı */
  /* Footer marka çerçevesi. Artboard 2'de 139,32 birim = 375 px ekranda
     51,9 px; Gülbin 11 Eylül'de önce 97,5'e "biraz küçült", sonra 51,9'a
     "çok küçülmüş, biraz büyüt" dedi. Başlık logosunun genişliğine
     eşitlendi: üstteki "koli lazım" ile alttaki marka işareti aynı
     genişlikte duruyor. Gerekirse buradan ayrı ayarlanır. */
  --ft-marka:var(--logo-mobil);
  /* Footer sosyal butonu. Artboard 2'de kare 50,66 birim = 375 px ekranda
     18,9 px, ama Gülbin 11 Eylül'de önce 44'e "çok büyük", sonra 24'e
     "çok küçük" dedi. Footerin kendi satır yüksekliğine bağlandı: buton
     tam bir bağlantı satırı kadar, yani sosyal satır listenin ritmine
     oturuyor. 44 dokunma kutusunun altında ama WCAG 2.5.8 AA tabanının
     (24x24) çok üstünde. İçindeki marka işareti kutunun %52'si
     (tasarımda %52,1, masaüstü kuralında da 52%). */
  --sos-kutu:var(--ft-satir);
  /* Footer bağlantı satırı ve ondan türeyen dikey ritim.
     --ft-satir: bağlantının dokunma kutusu.
     --ft-bosluk: iki satırın mürekkebi arasında görünen boşluk
       = satır kutusu - (punto x satır yüksekliği) = 36 - 13x1,6 = 15,2 px.
     --ft-yarim: bu boşluğun yarısı; son bağlantının kutusu metnin altında
       zaten bu kadar pay bırakıyor, sosyal satır onun üstüne bunu ekliyor. */
  --ft-satir:36px;
  /* satır yüksekliği: şablondaki .ft li a kuralı 1,35 veriyor ve
     ozgullugu (0,1,2) .ft a'nin 1,6'sini (0,1,1) yeniyor. Olculdu:
     hesaplanan line-height 17,55 px = 13 x 1,35. Ikisi ayrismasin diye
     mobil.css'te .ft ul a da bu jetona baglandi. */
  --ft-lh:1.35;
  --ft-bosluk:calc(var(--ft-satir) - var(--f4)*var(--ft-lh));
  --ft-yarim:calc(var(--ft-bosluk)/2);

  /* ---- BİLEŞEN REÇETELERİ ----
     Ölçüldü: rozet 3 ayrı yükseklikte (56/23/14), buton 2 yükseklik ve
     2 punto (44-48 / 11-13), açılır menü 2 yükseklik ve kimi çerçevesiz.
     Her aile kendi içinde tek reçeteye indi. */

  /* rozet: kart üstü tek satır çip */
  --rozet-yuk:24px;
  --rozet-punto:var(--f5);
  --rozet-dolgu:var(--r0) var(--r1);

  /* rozet: görsel üstü kutulu, iki satıra kadar.
     Gülbin, 16 Eylül: "ürün üstündeki rozetler maşallah at kadar."
     48 px'lik sabit yükseklik iki satırlık yazıyı 14 px boşlukla
     şişiriyordu; rozet tıklanmıyor, dokunma tabanı gerekmiyor.
     Yükseklik artık yazının kendisi kadar. */
  --rozetb-yuk:auto;
  --rozetb-punto:var(--f5);
  --rozetb-dolgu:var(--r1) var(--r12);

  /* buton: birincil ve ikincil aynı ölçüde */
  --buton-yuk:48px;
  --buton-punto:var(--f4);
  --buton-dolgu:0 var(--r3);

  /* açılır menü ve metin girişi */
  --acilir-yuk:48px;
  --acilir-punto:var(--f3);
  --acilir-dolgu:0 var(--r2);

  /* ---- KÖŞE ve GÖLGE ----
     Marka kare köşeli. İstisnalar açıkça yazılı: avatar, rozet,
     orta aksiyon dairesi. */
  --kose:0;
  --kose-daire:50%;
  --golge:0 30px 70px -46px rgba(var(--mavi-koyu-rgb),.55);
  --golge-ust:0 -10px 24px -18px rgba(var(--mavi-koyu-rgb),.5);

  /* ---- HAREKET ---- */
  --sure-hizli:.2s;
  --sure-normal:.35s;
  --sure-yavas:.7s;
  --egri:cubic-bezier(.16,1,.3,1);
}

/* ---- KAYDIRMA CUBUGU GIZLI ----
   Gulbin, 14 Eylul: "kaydirma cubugu olmasin." Serit kapsayicilarinda
   zaten gizliydi; sayfanin kendi cubugu da kalkti. Kaydirma calisiyor,
   yalnizca cubuk gorunmuyor. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}

/* ---- IMLEC: SITENIN KENDI OKU ----
   Gulbin: "masaustunde imlecimiz ok seklimizde olsun", 15 Eylul:
   "imlecte bizim yukariya bakan oktan olsun ... capraz yukari."
   Ikon setinden ok-sol-yukari; veri adresi derleme sirasinda
   jetonlardan uretiliyor (url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%22.55%22%20stdDeviation%3D%22.55%22%20flood-color%3D%22%23021f36%22%20flood-opacity%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cg%20fill%3D%22%23021f36%22%20stroke%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%3E%3Cg%20transform%3D%22translate%28-119.510%20-13.845%29%20scale%280.83438%29%22%3E%3Cpath%20d%3D%22M164.9%2C42.96c.16%2C0%2C.32-.04.46-.14.39-.26.5-.79.25-1.18l-13.11-20.12%2C12.18%2C4.42c.44.16.93-.07%2C1.09-.51.16-.44-.07-.93-.51-1.09l-14.58-5.29-.14-.04c-.09-.02-.19-.02-.31%2C0-.11.02-.2.06-.25.09l-.08.03-.02.03c-.06.05-.12.11-.19.21-.06.09-.1.18-.12.32%2C0%2C.04-.01.08-.02.13l-.25%2C15.51c0%2C.23.08.44.24.61.16.16.37.26.6.26.17%2C0%2C.34-.04.48-.14.24-.16.38-.42.39-.7l.2-12.73%2C12.98%2C19.92c.16.25.44.39.72.39Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")). Sicak nokta 6 3: okun ucu
   28'lik kutuda oraya dusuyor.
   Gulbin, 15 Eylul: "slidera gecince ok degisiyor, duzgun yap su isi."
   Once iki ayri imlec sistemi vardi ve bolume gore biri digerini
   eziyordu; ikisi tek kurala indirildi.
   "vurgu olacagi yerde yesile donsun, ok asla kalinlik verme":
   ok dogal halinde, tek renk dolgu, kontur yok. Duran hali koyu mavi;
   el isaretinin cikacagi yerlerde (baglanti, dugme, .phit) yesile
   donuyor. Ikisi de ayni cizim, yalniz dolgu rengi degisiyor.
   Iki seciciyi de !important yapip ozgulluk farkina birakiyoruz:
   "a *" (0,0,2) "*" (0,0,0) kuralini yeniyor, yoksa baglantinin
   icindeki yazi koyu maviye donuyordu.
   Yalniz fareyle gezilen cihazlarda; dokunmatikte imlec yok. */
@media(hover:hover) and (pointer:fine){
  *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%22.55%22%20stdDeviation%3D%22.55%22%20flood-color%3D%22%23021f36%22%20flood-opacity%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cg%20fill%3D%22%23021f36%22%20stroke%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%3E%3Cg%20transform%3D%22translate%28-119.510%20-13.845%29%20scale%280.83438%29%22%3E%3Cpath%20d%3D%22M164.9%2C42.96c.16%2C0%2C.32-.04.46-.14.39-.26.5-.79.25-1.18l-13.11-20.12%2C12.18%2C4.42c.44.16.93-.07%2C1.09-.51.16-.44-.07-.93-.51-1.09l-14.58-5.29-.14-.04c-.09-.02-.19-.02-.31%2C0-.11.02-.2.06-.25.09l-.08.03-.02.03c-.06.05-.12.11-.19.21-.06.09-.1.18-.12.32%2C0%2C.04-.01.08-.02.13l-.25%2C15.51c0%2C.23.08.44.24.61.16.16.37.26.6.26.17%2C0%2C.34-.04.48-.14.24-.16.38-.42.39-.7l.2-12.73%2C12.98%2C19.92c.16.25.44.39.72.39Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 5 2, auto!important}
  a,a *,button,button *,summary,summary *,label,label *,select,
  [role="button"],[role="button"] *,.phit,.phit *,
  input[type="submit"],input[type="button"],
  input[type="checkbox"],input[type="radio"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%22.55%22%20stdDeviation%3D%22.55%22%20flood-color%3D%22%23021f36%22%20flood-opacity%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cg%20fill%3D%22%2361ce70%22%20stroke%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%3E%3Cg%20transform%3D%22translate%28-119.510%20-13.845%29%20scale%280.83438%29%22%3E%3Cpath%20d%3D%22M164.9%2C42.96c.16%2C0%2C.32-.04.46-.14.39-.26.5-.79.25-1.18l-13.11-20.12%2C12.18%2C4.42c.44.16.93-.07%2C1.09-.51.16-.44-.07-.93-.51-1.09l-14.58-5.29-.14-.04c-.09-.02-.19-.02-.31%2C0-.11.02-.2.06-.25.09l-.08.03-.02.03c-.06.05-.12.11-.19.21-.06.09-.1.18-.12.32%2C0%2C.04-.01.08-.02.13l-.25%2C15.51c0%2C.23.08.44.24.61.16.16.37.26.6.26.17%2C0%2C.34-.04.48-.14.24-.16.38-.42.39-.7l.2-12.73%2C12.98%2C19.92c.16.25.44.39.72.39Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 5 2, auto!important}
  /* Gulbin, 15 Eylul: "koyu alanda yesil olacak." Koyu mavi ok koyu
     zeminde kayboluyordu. Koyu bolumlerin listesi uydurulmadi: yukarida
     "koyu bolumlerde secim ve odak tersine doner" kuralinin kullandigi
     liste (.S2.dark .tbant .krc .ft .S.hero) aynen alindi, uzerine
     renkli bolumler (.sstand), mobil giris (.mhero) ve heronun uzerinde
     dururken saydam kalan baslik (.hd, beyaza donmemisken) eklendi. */
  .S.hero,.S.hero *,.sstand,.sstand *,.S2.dark,.S2.dark *,
  .tbant,.tbant *,.krc,.krc *,.ft,.ft *,.mhero,.mhero *,
  .hd:not(.beyaz),.hd:not(.beyaz) *,
  /* Listeyi tahminle degil olcerek tamamladim: sayfadaki butun ogelerin
     zemin parlakligi tarandi, koyu olup hala koyu mavi ok alan yalniz iki
     yer kaldi. .bar duyuru seridi (zemin 3,28,39), #cartv sepetin arkasina
     inen koyu perde. Sepet paneli (.cartp) perdenin COCUGU DEGIL, beyaz
     kaliyor; o yuzden #cartv'ye alt ogeler dahil edilmedi. */
  .bar,.bar *,#cartv,
  /* Alt sayfalar ayni sistem.css'i kullaniyor; onlarin koyu bloklari da
     ayni sekilde olculdu: .syhero sayfa basligi (urun, kategori, sepet,
     odeme, editor), .sykoyu koyu ozet kutusu, .edgorunum editorun 3B
     goruntuleme alani. */
  .syhero,.syhero *,.sykoyu,.sykoyu *,
  .edgorunum,.edgorunum *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%22.55%22%20stdDeviation%3D%22.55%22%20flood-color%3D%22%23021f36%22%20flood-opacity%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cg%20fill%3D%22%2361ce70%22%20stroke%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%3E%3Cg%20transform%3D%22translate%28-119.510%20-13.845%29%20scale%280.83438%29%22%3E%3Cpath%20d%3D%22M164.9%2C42.96c.16%2C0%2C.32-.04.46-.14.39-.26.5-.79.25-1.18l-13.11-20.12%2C12.18%2C4.42c.44.16.93-.07%2C1.09-.51.16-.44-.07-.93-.51-1.09l-14.58-5.29-.14-.04c-.09-.02-.19-.02-.31%2C0-.11.02-.2.06-.25.09l-.08.03-.02.03c-.06.05-.12.11-.19.21-.06.09-.1.18-.12.32%2C0%2C.04-.01.08-.02.13l-.25%2C15.51c0%2C.23.08.44.24.61.16.16.37.26.6.26.17%2C0%2C.34-.04.48-.14.24-.16.38-.42.39-.7l.2-12.73%2C12.98%2C19.92c.16.25.44.39.72.39Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 5 2, auto!important}
}

/* ---- IKINCIL METINLER SOLDURULMUYOR ----
   Gulbin, 15 Eylul: "butun yazilar koyu mavi olmali, opakligi dusurup
   rengi degistirip durma ya."
   Acik zeminde ikincil metinler soluk geliyordu; olculdu:
     urun kartinin aciklamasi      .78
     "adet fiyati"                 .70
     "Olcuye gore aninda hesaplanir" .62
     blog kartinin sira numarasi   .55
     is seridinin altyazilari      .72
     arama ipucu                   .60
     adres satiri                  .72
   Hepsi tam gucune cekiliyor. Hiyerarsi punto ve agirlikla kuruluyor,
   soldurmayla degil. Renk zorlanmiyor: koyu bolumlerdeki ayni ogeler
   kendi rengini (yesil/beyaz) korusun diye yalniz opaklik sabitleniyor. */
.pcard p,.pcard .pr,.pcard .birim,.pcard .num,.pcard .krz,
figcaption span,.tool .sub,.tool .sinfo,.tool .hint{opacity:1!important}

/* ---- GIRIS GORSELI SECIMI EN BASTA ----
   Gulbin: "sayfayi ilk actigimda masaustu slider bir saniye gozukuyor."
   Sebep: mobil.css belgenin govdesinde (930. satir) enjekte ediliyor,
   tarayici ona ulasana kadar masaustu slider'i bir kare cizip siliyordu.
   Secim artik ilk stil blogunda, ilk boyamadan once. */
@media(max-width:820px){
  .S.hero{display:none!important}
  .mhero{display:block!important}
}
/* ---- STILLER TAMAMLANMADAN BOYAMA YOK ----
   Gulbin telefonda yarim yuklenmis sayfanin ekran goruntusunu gonderdi:
   masaustu yerlesimi, cipler, gizli h1 kocaman gorunuyordu. Sebep mobil
   CSS'in belgenin sonunda (945. satir) olmasi; 8,7 MB'lik sayfada telefon
   oraya ulasana kadar masaustu duzenini ciziyor. Sayfa son stil blogu
   okunana kadar gizli; hemen ardindan aciliyor. Sirayi degistirmedim,
   cunku mobil kurallarin bolum stillerinden SONRA gelmesi gerekiyor. */
html{visibility:hidden}
:root{
  /* Sisteme ait olmayan tek deger: Gulbin'in Illustrator gradienti. */
  /* Gulbin'in Illustrator gradienti (Desktop/SVG/Artboard 8.svg) CSS'e
     cevrildi. Gorsel olarak kullaninca koyu tonlarda bantlasiyordu.
     Parametreler goz karariyla degil, gradientin 54 noktali izgarasina
     sayisal olarak uyduruldu (fitgrad.py, ortalama kanal hatasi 9,8).
     Renkler Gulbin'in tarifi: orta siyah, ustteki isik acik mavi,
     alttaki isik koyu mavi. */
  --bgrad:
    radial-gradient(62.7% 69.8% at 113.8% 6%,
      rgb(13,89,124) 0%, rgba(13,89,124,.92) 35%,
      rgba(13,89,124,.32) 70%, rgba(13,89,124,0) 100%),
    radial-gradient(72.5% 151.5% at 10% 112%,
      rgb(2,31,54) 0%, rgba(2,31,54,1) 35%,
      rgba(2,31,54,.47) 70%, rgba(2,31,54,0) 100%);
}
/* koyu tema acikken tarayici zemini griye cekiyordu */
.mhd,.mhero{display:none}
/* Tarayicinin kendi yuzeyleri: secim, imlec, odak halkasi, kaydirma
   cubugu. Hicbir tasarim sistemine ait olmayan varsayilanlarla geliyorlar;
   paletten boyanmazlarsa sayfa "kurulmus" degil "birlestirilmis" gorunuyor. */
::selection{background:var(--green);color:var(--mavi-koyu)}
::-moz-selection{background:var(--green);color:var(--mavi-koyu)}
:root{accent-color:var(--green);caret-color:var(--green);
  scrollbar-color:rgba(97,206,112,.55) rgba(2,31,54,.06)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--cizgi) solid var(--green);outline-offset:3px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){
  outline:none}
/* koyu bolumlerde secim ve odak tersine doner */
.S2.dark ::selection,.tbant ::selection,.krc ::selection,.ft ::selection,
.S.hero ::selection{background:var(--green);color:var(--mavi-koyu)}
/* rakamlar tabloda ve fiyatlarda kaymasin */
.pr,.hno,.ustat b,.gpuan b,.freeb b{font-variant-numeric:tabular-nums}
html,body{background:var(--beyaz)}
html{color-scheme:light}
/* sayfa baska bir zeminin (duzenleyici tuvali, onizleme penceresi) ustunde
   aciliyorsa body zemini gorunmeyebiliyor; en alta sabit beyaz bir katman */
.zeminbeyaz{position:fixed;inset:0;background:var(--beyaz);z-index:-1;pointer-events:none}
body{margin:0;background:var(--beyaz);color:var(--mavi-koyu);
     font-family:Clash,Montserrat,system-ui,sans-serif;
  /* ---- TABAN PUNTO VE AGIRLIK ----
     Gulbin, 11 Eylul: iki agirlik (300 ince + 500 baslik).
     Olculdu: gocten sonra bile sayfada 3 agirlik cikiyordu, cunku 432 oge
     hic font-weight kurali almiyor ve tarayici varsayilani 400'de kaliyordu.
     Ayni sekilde 177 oge 16 px tarayici varsayilanindaydi. Taban buraya
     baglandi: kural yazilmayan her sey artik merdivenden geliyor. */
  font-weight:var(--ag-ince)}
p,h1,h2,h3{margin:0}
img{display:block}

/* ---- canlıdaki üst şerit ---- */
/* canlidan olculdu: zemin var(--yzy-serit), Jersey 20 / 30 px, renk var(--green),
   satir yuksekligi 48 px, 20 px bosluk, 26 s dogrusal dongu */
/* Gulbin, 21 Eylul: "topbar yazi fontu bu olsun" (minecraft.zip).
   Dosyada Turkce harf yoktu; eksikler fontun kendi piksel
   izgarasiyla uretildi, bkz. mkfont_tr.py. */
@font-face{font-family:"MC";src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/faecaad754c4.ttf) format("truetype");
  font-weight:400;font-display:swap}
@font-face{font-family:"Jersey 20";src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/109748cd9f47.woff2) format("woff2");
  font-weight:400;font-display:swap;
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jersey 20";src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/45087ba86e91.woff2) format("woff2");
  font-weight:400;font-display:swap;
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,
    U+A720-A7FF}
.bar{background:var(--yzy-serit);overflow:hidden;height:81px;display:flex;align-items:center}
/* canlida toplam 81 px, kayan yazi bandi 48 px: ustte ve altta 16,5 px */
/* Gulbin, 21 Eylul: "topbar yazi fontu bu olsun, yazilar da rainbow
   olsun." Renkler uydurulmadi: sitenin kendi spektrumu (hero CTA
   gradyaninin durak renkleri) yaziya maske olarak veriliyor. Serit
   kaydikca gradyan da onunla gidiyor, harflerin rengi sabit kaliyor. */
.bar .tr{display:flex;gap:var(--yan);white-space:nowrap;animation:mq 26s linear infinite;
         font-family:"MC","Jersey 20",sans-serif;font-weight:var(--ag-ince);font-size:26px;line-height:48px; /* bekci-muaf: canlidan olculen serit */
         padding-left:var(--yan);
         /* Gulbin, 22 Eylul: "sadece bu renkler arasinda kaysa top bar."
            Spektrumun kirmizi ve pembe duraklari (#ee2c31, #ec086a,
            #ed1f31) cikti; geriye ayni setin turkuaz-yesil-sari ucu
            kaldi. Yeni renk uretilmedi, var olanlardan secildi. */
         background-image:linear-gradient(90deg,
           #0091a1 0%, #37b382 25%, #89cd4e 50%, #ecd70a 75%,
           #0091a1 100%);
         background-size:50% 100%;background-repeat:repeat;
         -webkit-background-clip:text;background-clip:text;
         color:transparent}
.bar .tr span{color:inherit}
@keyframes mq{to{transform:translate3d(calc(-50% - 10px),0,0)}}
@media(prefers-reduced-motion:reduce){.bar .tr{animation:none}}

/* ---- artboard koordinat sistemi ---- */
.S{position:relative;width:100%;aspect-ratio:1724/var(--H);container-type:inline-size;overflow:hidden}
.A{position:absolute;left:calc(var(--x)*100%/var(--AW));top:calc(var(--y)*100%/var(--H));
   width:calc(var(--w)*100%/var(--AW))}
.A.hh{height:calc(var(--h)*100%/var(--H))}
.A.hh img{width:100%;height:100%}
.A img{width:100%;height:auto}
.fs{font-size:calc(var(--f)*100cqw/var(--AW))}

/* ---- hero ---- */
.hero{--H:918;
  /* arka plan: koke tanimli --bgrad, gercek gradient (bantlasma yok)
     Gulbin, 22 Eylul: "top bar altindaki cizgi kalksin." Ortada
     cerceve yoktu; serit #031c27, girisin tepesi ise siyaha yakin
     oldugu icin iki yuzey arasinda keskin bir renk siniri
     goruluyordu. Girisin ust 70 pikseli seridin tonundan siyaha
     yumusakca geciyor, sinir kayboluyor. */
  background:var(--siyah);
  background-image:linear-gradient(to bottom,
      var(--yzy-serit) 0, rgba(3,28,39,0) 70px),
    var(--bgrad)}
/* ---- GIRISIN ARKASINDAKI URETIM VIDEOSU ----
   Gulbin, 22 Eylul: "giris slider arkasina uretim videosu koysak
   nasil olur? ustunde gradient olacak tabi, fon olarak opakligi
   dusurup karmasikligi onlemek adina." Klip ve opaklik denendikten
   sonra: "plotter baski 22 olarak koyalim."
   Klip: plotter kafasi (0,15-1,80 sn, %50 yavas) + 0,7 sn caprazlama
   + baski makinesinden cikan formalar (14,40-17,90 sn). Basi ve sonu
   siyahtan aciliyor, dongu sessizce basa donuyor. Renk dosyaya
   islendi: gri + kontrast 1,45 + iki uclu egri, siyah ucu markanin
   laciverti (#021f36).
   Video gradyanin hemen ustunde, urun gorsellerinin ve yazilarin
   altinda; icerik degil doku. */
.hero .hvid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;pointer-events:none;opacity:.22}
/* Hareketi kapali kullanicida video durur, poster kalir. */
@media(prefers-reduced-motion:reduce){.hero .hvid{display:none}}
/* Mobilde yuklenmez: veri yuku ve iOS otomatik oynatma guvenilmez. */
@media(max-width:820px){.hero .hvid{display:none}}
svg.artbg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  /* buyuk cizgisel logo: gradyanin hemen ustu, urun gorsellerinin alti */
  opacity:.9}
svg.art{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;
  shape-rendering:geometricPrecision}
svg.art .mi,.artbas .mi{display:none}   /* menu yazisi canli metin olarak
                                            ciziliyor; vektor kopyasi gizli */
svg.art .ar{transition:transform .34s cubic-bezier(.2,.8,.25,1)}
svg.art .mi.hot .ar{transform:rotate(-135deg)}
svg.art #ctaB path{fill:url(#ctaG);fill-opacity:0;stroke:url(#ctaG);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;
  transition:fill-opacity .3s}
svg.art #ctaB.cta-hot path{fill-opacity:1}

svg.art .ico-hot{filter:drop-shadow(0 0 5px rgba(97,206,112,.55))}
.hit{position:absolute;z-index:8;background:transparent;border:0;padding:0;cursor:pointer;
  left:calc(var(--x)*100%/var(--AW));top:calc((var(--y)) * 100% / var(--H));
  width:calc(var(--w)*100%/var(--AW));height:calc(var(--h)*100%/var(--H));display:block}
.hit.ic{border-radius:50%}
.nav{position:absolute;z-index:20;inset:0;pointer-events:none}
/* not: .nav kendi yigin baglami kuruyor. Panelin z-index:30 degeri sadece
   .nav icinde gecerli, bu yuzden .nav'in kendisi .lbl (7) ve .hit (8)
   uzerinde olmali, yoksa hero yazilari panelin ustune biniyor. */
.item{position:absolute;pointer-events:auto;white-space:nowrap;
  left:calc(var(--x)*100%/var(--AW));top:calc(var(--t)*100%/var(--H))}
.nb{display:flex;align-items:center;background:none;border:0;cursor:pointer;padding:0;
    gap:calc(var(--g)*100cqw/var(--AW));white-space:nowrap;
    font-family:Clash,sans-serif;font-weight:var(--ag-ince);line-height:1;
    font-size:calc(var(--mfs)*100cqw/var(--AW));color:var(--green);text-transform:uppercase}
.nb .arw{flex:none;width:.5em;height:auto;fill:currentColor;stroke:currentColor;stroke-width:var(--cizgi);
    vector-effect:non-scaling-stroke;stroke-linejoin:round;
    transform-box:fill-box;transform-origin:50% 50%;
    transition:transform .34s cubic-bezier(.2,.8,.25,1)}
.item.hot .arw{transform:rotate(-135deg)}
.mega{position:fixed;left:0;right:0;top:var(--mtop,0);z-index:30;pointer-events:auto;
  /* panel .item'in cocugu; oradaki nowrap mirasi metinleri sardirmiyordu */
  white-space:normal;
  background:var(--yzy-panel);
  border-top:var(--cizgi) solid rgba(97,206,112,.28);border-bottom:var(--cizgi) solid rgba(97,206,112,.18);
  padding:calc(13*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW)) calc(14*100cqw/var(--AW));display:none;
  font-size:var(--m3);box-shadow:0 40px 90px -40px var(--siyah);text-align:left;
  max-height:calc(100vh - var(--mtop,0px) - 18px);overflow-y:auto;overscroll-behavior:contain}
.mega.on{display:block}

.mega h4{margin:0 0 .3em;font-size:.6em;font-weight:var(--ag-baslik);text-transform:uppercase;opacity:.55;color:var(--mtn-2)}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1em}
.mega li a{display:flex;align-items:center;gap:.7em;padding:.32em .5em;margin-left:-.5em;
  font-size:.78em;color:var(--mtn-2);text-decoration:none;transition:color .22s,background .22s,padding-left .22s}
.mega li a:hover{color:var(--green);background:rgba(97,206,112,.07);padding-left:.85em}
.mega li a .rt{margin-left:auto;font-size:.78em;color:var(--green);opacity:.6;white-space:nowrap}
/* Urun seridi olmayan satir tek sutun. */
.mrow.mtek{grid-template-columns:1fr}
/* iki sutun: solda kategori, sagda urunler.
   Sutun genisligi daha once cqw ile verilmisti ve .mega konteyner olmadigi icin
   cozulmuyordu, metin sag sutuna tasiyordu. Artik clamp ile piksel tabanli. */
.mrow{display:grid;grid-template-columns:clamp(148px,21%,250px) 1fr;
  gap:calc(24*100cqw/var(--AW));padding:calc(14*100cqw/var(--AW)) 0;align-items:start}
.mrow>*{min-width:0}
.mleft{display:flex;flex-direction:column;align-items:flex-start;gap:.3em;min-width:0}
.mleft h4{margin:0;font-size:.92em;font-weight:var(--ag-baslik);color:var(--mtn-1);
  text-transform:uppercase;opacity:1;width:100%;overflow-wrap:anywhere}
.mleft p{margin:0;font-size:.64em;line-height:1.45;color:var(--mtn-3);
  /* .mleft flex-start hizali; genislik verilmezse metin sarmayip yana tasiyor */
  width:100%;align-self:stretch;overflow-wrap:anywhere}
.mleft a.all{font-size:.64em;color:var(--green);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;transition:gap .25s}
.mleft a.all:hover{gap:.9em}
@media(max-width:820px){
  .mrow{grid-template-columns:1fr;gap:.6em}
}
.mstrip{display:flex;gap:calc(11*100cqw/var(--AW));overflow-x:auto;scrollbar-width:none;
  padding-bottom:.4em;scroll-snap-type:x proximity}
.mstrip::-webkit-scrollbar{display:none}
.mcard{flex:0 0 clamp(78px,7.2vw,104px);width:clamp(78px,7.2vw,104px);text-decoration:none;color:inherit;scroll-snap-align:start;
  display:flex;flex-direction:column}
.mcard .ph{height:clamp(78px,7.2vw,104px);flex:none;background:var(--zemin-acik);display:grid;place-items:center;overflow:hidden;
  border:var(--cizgi) solid rgba(97,206,112,.12);transition:border-color .25s}
.mcard:hover .ph{border-color:rgba(97,206,112,.5)}
.mcard img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.mcard b{margin-top:.42em;font-size:.58em;font-weight:var(--ag-ince);line-height:1.3;color:var(--mtn-2);
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcard span{display:block;margin-top:.1em;font-size:.58em;color:var(--green);opacity:.85}
.mload{font-size:.7em;color:var(--mtn-3);padding:.6em 0}
.mfind{display:block;padding:calc(16*100cqw/var(--AW)) 0 calc(4*100cqw/var(--AW));
  border-top:var(--cizgi) solid rgba(97,206,112,.16);margin-top:calc(10*100cqw/var(--AW))}
.mfind .fbas{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55em .9em;
  margin-bottom:.55em}
.mfind .fbas p{flex:1 1 16em;min-width:0}
.mfind h4{margin:0 0 .3em;font-size:.92em;font-weight:var(--ag-baslik);color:var(--mtn-1)}
.mfind p{margin:0;font-size:.62em;color:var(--mtn-3);line-height:1.4}
.ffm{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.ffm input{width:3.9em;background:transparent;border:var(--cizgi) solid rgba(97,206,112,.4);
  color:var(--mtn-1);font:inherit;font-size:.78em;padding:.42em .5em;text-align:center;
  border-radius:2px;transition:border-color .2s}
.ffm input:focus{outline:none;border-color:var(--green)}
.ffm em{font-style:normal;color:var(--mtn-3);font-size:.75em}
.ffm .unit{color:var(--mtn-3);font-size:.7em;margin-left:.2em}
.ffm button{background:var(--green);border:0;color:var(--mavi-koyu);font:inherit;font-size:.72em;
  text-transform:uppercase;padding:.6em 1.3em;cursor:pointer;
  border-radius:2px;transition:filter .2s}
.ffm button:hover{filter:brightness(1.12)}
.fres{margin-top:.9em}
.fnote{font-size:.66em;color:var(--mtn-3);margin-top:.5em}
.mbadges{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.6em}
.mfoot{display:flex;flex-wrap:wrap;gap:.45em;padding-top:calc(9*100cqw/var(--AW));
  border-top:var(--cizgi) solid rgba(97,206,112,.16)}
.mrow>div{min-width:0}
.mlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(calc(240*100cqw/var(--AW)),1fr));
  gap:.1em calc(24*100cqw/var(--AW));max-width:calc(760*100cqw/var(--AW))}
.mlist li{display:flex;align-items:baseline;gap:.7em;padding:.3em .5em;margin-left:-.5em;
  font-size:.7em;color:var(--mtn-2)}
.mlist .rt{margin-left:auto;font-size:.82em;color:var(--green);opacity:.75;white-space:nowrap}
.mnote{display:grid;grid-template-columns:calc(228*100cqw/var(--AW)) 1fr;
  gap:calc(26*100cqw/var(--AW));padding:calc(10*100cqw/var(--AW)) 0;
  border-bottom:var(--cizgi) solid rgba(201,139,107,.28)}
.mnote b{font-size:.6em;font-weight:var(--ag-ince);text-transform:uppercase;
  color:#c98b6b /* bekci-muaf: terracotta, Gulbin karar verecek */;align-self:start}
.mnote p{margin:0;font-size:.66em;line-height:1.5;color:var(--mtn-3)}
.mnote a{color:#c98b6b /* bekci-muaf: terracotta, Gulbin karar verecek */;text-decoration:none;white-space:nowrap;border-bottom:var(--cizgi) solid rgba(201,139,107,.4)}
.mnote a:hover{color:#e0a888 /* bekci-muaf: terracotta */;border-bottom-color:#e0a888 /* bekci-muaf: terracotta */}
.mbadge{font-size:.56em;text-transform:uppercase;color:var(--green);
  border:var(--cizgi) solid rgba(97,206,112,.4);padding:.28em .6em;border-radius:2px}
.mcard .st{display:block;margin-top:.05em;font-size:.54em;color:#c98b6b /* bekci-muaf: terracotta, Gulbin karar verecek */}
.minfo{display:grid;grid-template-columns:calc(228*100cqw/var(--AW)) repeat(auto-fit,minmax(0,1fr));
  gap:calc(26*100cqw/var(--AW));padding:calc(8*100cqw/var(--AW)) 0 calc(10*100cqw/var(--AW));
  border-top:var(--cizgi) solid rgba(97,206,112,.16)}
.minfo::before{content:"Seçenekler";font-size:.6em;text-transform:uppercase;color:var(--mtn-3);padding-top:.2em}
.minfo.solo{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
.minfo.solo::before{display:none}
.icol h4{margin:0 0 .3em;font-size:.62em;font-weight:var(--ag-baslik);text-transform:uppercase;color:var(--mtn-3)}
.icol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15em}
.icol li a,.icol li .pl{display:flex;align-items:center;gap:.7em;padding:.34em .5em;margin-left:-.5em;
  font-size:.76em;color:var(--mtn-2);text-decoration:none}
.icol li a{transition:color .22s,background .22s,padding-left .22s}
.icol li a:hover{color:var(--green);background:rgba(97,206,112,.07);padding-left:.85em}
.icol .rt{margin-left:auto;font-size:.8em;color:var(--green);opacity:.75;white-space:nowrap}
.mega .col{opacity:0;transform:translateY(8px)}
.mega.on .col{animation:colIn .45s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes colIn{to{opacity:1;transform:none}}
.mf{margin-top:1.1em;padding-top:.9em;border-top:var(--cizgi) solid rgba(97,206,112,.22);
  display:flex;flex-wrap:wrap;gap:.5em 1.1em;align-items:center;font-size:.68em;
  color:var(--mtn-2);opacity:.8}
.mtag{display:inline-block;font-size:.9em;text-transform:uppercase;
  color:var(--green);border:var(--cizgi) solid rgba(97,206,112,.45);padding:.3em .7em}

/* ---- menu paneli beyaz: yazi ve cizgiler NET koyu mavi (Gulbin, 6 Eylul) ----
   Solukluk yok: butun metinler ve butun cizgiler tam var(--mavi-koyu).
   Butun cerceve ve ayrac cizgileri 1,5 px. Tek istisna yesil BUL dugmesi. */
.mega{background:var(--beyaz);color:var(--mavi-koyu);
  border-top:var(--cizgi) solid var(--mavi-koyu);border-bottom:var(--cizgi) solid var(--mavi-koyu);
  box-shadow:0 30px 70px -46px rgba(3,28,39,.55)}
.mega h4{color:var(--mavi-koyu);opacity:1}
.mega li a{color:var(--mavi-koyu)}
.mega li a:hover{color:var(--mavi-koyu);background:rgba(2,31,54,.07)}
.mega li a .rt{color:var(--mavi-koyu);opacity:1}
.mleft h4{color:var(--mavi-koyu)}
.mleft p{color:var(--mavi-koyu)}
.mleft a.all{color:var(--mavi-koyu)}
.mcard .ph{background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu)}
.mcard:hover .ph{border-color:var(--mavi-koyu)}
.mcard b{color:var(--mavi-koyu)}
.mcard span{color:var(--mavi-koyu);opacity:1}
.mcard .st{color:var(--mavi-koyu)}
.mload{color:var(--mavi-koyu)}
.mfind{border-top:var(--cizgi) solid var(--mavi-koyu)}
.mfind h4{color:var(--mavi-koyu)}
.mfind p{color:var(--mavi-koyu)}
.ffm input{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.ffm input:focus{border-color:var(--mavi-koyu)}
.ffm input::placeholder{color:var(--mavi-koyu);opacity:.55}
.ffm em{color:var(--mavi-koyu)}
.ffm .unit{color:var(--mavi-koyu)}
.fnote{color:var(--mavi-koyu)}
.mfoot{border-top:var(--cizgi) solid var(--mavi-koyu)}
.mlist li{color:var(--mavi-koyu)}
.mlist .rt{color:var(--mavi-koyu);opacity:1}
.mbadge{color:var(--mavi-koyu);border:var(--cizgi) solid var(--mavi-koyu)}
.minfo{border-top:var(--cizgi) solid var(--mavi-koyu)}
.minfo::before{color:var(--mavi-koyu)}
.icol h4{color:var(--mavi-koyu)}
.icol li a,.icol li .pl{color:var(--mavi-koyu)}
.icol li a:hover{color:var(--mavi-koyu);background:rgba(2,31,54,.07)}
.icol .rt{color:var(--mavi-koyu);opacity:1}
.mf{border-top:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu);opacity:1}
.mtag{color:var(--mavi-koyu);border:var(--cizgi) solid var(--mavi-koyu)}
.mnote{border-bottom:var(--cizgi) solid var(--mavi-koyu)}
.mnote b{color:var(--mavi-koyu)}
.mnote p{color:var(--mavi-koyu)}
.mnote a{color:var(--mavi-koyu);border-bottom:var(--cizgi) solid var(--mavi-koyu)}
.mnote a:hover{color:var(--mavi-koyu);border-bottom-color:var(--mavi-koyu)}

.lbl{z-index:7;color:var(--green);text-transform:uppercase;white-space:pre;line-height:1.105;
     font-size:var(--m4);
     opacity:0;transform:translateY(14px);
     transition:opacity .7s cubic-bezier(.2,.8,.25,1) var(--ld,0s),
                transform .7s cubic-bezier(.2,.8,.25,1) var(--ld,0s),
                color .35s,text-shadow .35s}
/* Gulbin, 22 Eylul: "100 olsun hepsi, yesil olsun." Etiketler
   basliktan biraz solgundu (.92); ucu de tam opaklikta. */
.lbl.in{opacity:1;transform:none;
  /* kutular gibi suzulsun: ayni sure ve ayni gecikme, transform ile
     cakismasin diye translate ozelligi kullaniliyor */
  animation:lblSuz 7s ease-in-out var(--bd,0s) infinite;
  /* girisi bittikten sonra kacis gecisi beklemesin */
  transition:opacity .7s cubic-bezier(.2,.8,.25,1) var(--ld,0s),
             transform .45s cubic-bezier(.2,.8,.25,1),
             color .35s,text-shadow .35s}
/* sol alttaki aciklama metinleri sabit durur */
.lbl.sabit,.lbl.sabit.in{animation:none}
/* urunun uzerine gelince kutu buyuyup yaziya yaklasiyor; etiket kadarini
   kacar, kopmayacak kadar */
.lbl.parla{transform:translate(calc(var(--kx,0)*100cqw/var(--AW)),
                               calc(var(--ky,0)*100cqw/var(--AW)))}
/* Gulbin vazgecti: yazilarin altinda aydinlatma yok */
@keyframes lblSuz{0%,100%{translate:0 0}50%{translate:0 -15px}}
@media(prefers-reduced-motion:reduce){.lbl.in{animation:none}}
/* Gulbin: etiketlerin yanindaki kucuk oklar kalksin (8 Eylul) */
svg.art #lblok{display:none}
/* tasarimdaki akan yesil cizgi ve urun cercevesi: Artboard 2'den alindi,
   cizilmedi. Arka plan cizgilerinin ustunde, urunlerin altinda durur. */
svg.artsus{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;overflow:visible}
svg.artsus path{fill:none;stroke:var(--green);
  stroke-width:var(--cizgi);vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
svg.artsus .akan{opacity:.85}
svg.artsus .ucer{opacity:.85}
/* etiket numaralari: [01] [02] [03] */
.lbl.num{font-size:var(--m3);line-height:1;opacity:0}
.lbl.num.in{opacity:1}
.lbl.sag{text-align:right;width:calc(var(--w)*100%/var(--AW));
  left:calc((var(--x))*100%/var(--AW))}
/* menu acikken hero yazilari panelle yarismasin */
.S.hero.menu-acik .lbl{opacity:0;pointer-events:none;transition:opacity .25s}

@media(prefers-reduced-motion:reduce){
  .lbl{transition:color .35s;opacity:1;transform:none}
}
.ly{z-index:3}
.ly.mid{z-index:4;transition:transform .65s cubic-bezier(.22,.75,.2,1)}
.ly.front{z-index:5}
.mk{-webkit-mask-image:var(--m);mask-image:var(--m);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.prod{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(44px);
  /* .prod ve .fl uzerindeki transform kendi yigin baglamini kuruyor;
     ictei .ly z-index'i disarida gecersiz kaliyor, cizgiler one geciyordu */
  z-index:3}
.prod.in{opacity:1;transform:none;
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.2,.8,.25,1)}
.prod.in.hot{transform:translateY(-18px) scale(1.045)}
/* salinim: cerceve de bu katmanin icinde, kutuyla birebir ayni hareket eder */
.prod .fl{position:absolute;inset:0;animation:bob var(--d,7s) ease-in-out infinite;
          animation-delay:var(--bd,0s)}
.prod.hot .fl{animation-play-state:paused}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-15px) rotate(.5deg)}}
/* cerceve, urunun kendi katmaninda; ayni viewBox oldugu icin hizasi bozulmaz */
/* cerceve urun gorsellerinin ARKASINDA: .ly katmanlari 3/4/5, cerceve 2 */
.prod svg.ucer{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:2}
.prod svg.ucer path{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  opacity:.85;transition:opacity .45s ease}
.prod.hot svg.ucer path{opacity:1}
/* yeni cerceveler kendi kutusunda: her parca ayni tuvalden ciktigi icin
   .A kutusunu katmanlarla ayni verince birebir oturuyor */
.prod svg.ucerk{position:absolute;pointer-events:none;overflow:visible;z-index:2}
.prod svg.ucerk path{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  opacity:.85;transition:opacity .45s ease}
.prod.hot svg.ucerk path{opacity:1}
/* Isik: gorunur bir koni yok. Referanslardaki gibi urunun ARKASINDA
   yumusak genis bir hale, altinda da yatik bir isik havuzu var; geri kalan
   urunler karanlikta kaliyor (Gulbin, 8 Eylul). */
.hale{position:absolute;z-index:1;pointer-events:none;opacity:0;border-radius:50%;
  transition:opacity .8s ease;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.52) 0%, rgba(228,242,255,.26) 24%,
    rgba(151,205,168,.08) 48%, rgba(97,206,112,0) 74%);
  filter:blur(calc(40*100cqw/var(--AW)))}
.prod.hot .hale{opacity:1}
.zemin{position:absolute;z-index:1;pointer-events:none;opacity:0;border-radius:50%;
  transition:opacity .8s ease;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.38) 0%, rgba(255,255,255,.15) 46%, rgba(255,255,255,0) 100%);
  filter:blur(calc(24*100cqw/var(--AW)))}
.prod.hot .zemin{opacity:1}
/* Golge: elips degil, urunun kendi silueti. Saydam png'nin alfasindan
   uretiliyor, o yuzden kutunun sekline birebir oturuyor ve yukaridan gelen
   isiga gore asagi dusuyor. */
.prod .ly.front{transition:filter .6s ease}
.prod.hot .ly.front{
  filter:drop-shadow(0 calc(30*100cqw/var(--AW)) calc(26*100cqw/var(--AW)) rgba(0,0,0,.62))
         drop-shadow(0 calc(8*100cqw/var(--AW)) calc(9*100cqw/var(--AW)) rgba(0,0,0,.45))
         /* kenar isigi: sifir kaydirmali beyaz golge siluete yapisiyor */
         drop-shadow(0 0 calc(7*100cqw/var(--AW)) rgba(228,242,255,.5))}
/* Ustten dusen isik: yine urunun alfasiyla maskeleniyor, boylece kutunun
   ust yuzeyi yaniyor, alt tarafi karanlikta kaliyor. */
.isik{z-index:6;pointer-events:none;opacity:0;transition:opacity .7s ease;
  -webkit-mask:var(--m) center/100% 100% no-repeat;
          mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(180deg,
    rgba(255,255,255,.58) 0%, rgba(255,255,255,.30) 20%,
    rgba(255,255,255,.10) 40%, rgba(255,255,255,0) 66%);
  mix-blend-mode:screen}
.prod.hot .isik{opacity:1}
/* Vinyet: sahne moduna gecince kenarlar kararir, goz ortadaki urune gider */
.S.hero::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:0;transition:opacity .9s ease;
  background:radial-gradient(115% 88% at 50% 46%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.60) 100%)}
.S.hero.sahne::after{opacity:1}
/* Puslu hava: urunun arkasindan yukselen ince sis. Referanslardaki
   zeminden yukselen bulanik parlamanin karsiligi. */
.pus{position:absolute;z-index:1;pointer-events:none;opacity:0;border-radius:50%;
  transition:opacity 1s ease;
  background:radial-gradient(closest-side,
    rgba(214,232,240,.20) 0%, rgba(190,214,226,.10) 42%,
    rgba(160,190,205,0) 78%);
  filter:blur(calc(56*100cqw/var(--AW)))}
.prod.hot .pus{opacity:1}

/* isik dusen urunun etiketi ful yanar ve canlanir */
/* Gulbin: yazida yesil parlama da olmasin, duz yesil kalsin */
.lbl.parla{opacity:1;color:var(--green);text-shadow:none}
.lbl.num.parla{opacity:1;color:var(--green)}
/* isik dusen urun disindakiler karanlikta kalir */
.S.hero .prod{transition:opacity .85s ease,transform 1.05s cubic-bezier(.2,.8,.25,1),
  filter .75s ease}
/* sahne: isik dusen urun parlar, digerleri neredeyse karanlik */
/* Gulbin: bulaniklik olmasin, sadece kararsinlar */
.S.hero.sahne .prod:not(.hot){filter:brightness(.14) saturate(.45)}
.S.hero.sahne .prod.hot{filter:brightness(1.16) contrast(1.04)}
.S.hero.sahne .lbl:not(.num):not(.parla){opacity:.22}
.S.hero.sahne .lbl.num:not(.parla){opacity:.3}
/* Gulbin: isik sadece [01] ve yanindaki aciklamaya dussun; sol alttaki
   iki metin kendi urunune ait olsa bile karanlikta kalir */
.S.hero.sahne .lbl.sabit,
.S.hero.sahne .lbl.sabit.parla{opacity:.22;color:var(--green);
  text-shadow:none;animation:none}
.S.hero.sahne svg.artsus{opacity:.22}
.phit{position:absolute;z-index:8;background:transparent;border:0;padding:0;cursor:pointer}
.glow{position:absolute;z-index:2;border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .55s ease;
  background:radial-gradient(circle closest-side,
    rgba(97,206,112,.30) 0%, rgba(97,206,112,.17) 38%,
    rgba(97,206,112,.06) 68%, rgba(97,206,112,0) 100%);
  filter:blur(26px)}
.prod.hot .glow{opacity:1}

.cta{z-index:8;display:flex;align-items:center;justify-content:center;text-decoration:none;
     left:calc(var(--x)*100%/var(--AW));top:calc(var(--y)*100%/var(--H));
     width:calc(var(--w)*100%/var(--AW));height:calc(var(--h)*100%/var(--H))}
.cta i{font-style:normal;white-space:nowrap;color:var(--green);font-weight:var(--ag-ince);
       text-transform:uppercase;font-size:var(--m4);
       transition:color .3s}
.cta:hover i,.cta.hot i{color:var(--mavi-koyu)}



/* ---- ikon acilir menuleri + mini sepet ---- */
.cartdot[hidden]{display:none}
/* Gulbin, 22 Eylul: "kare olsun yuvarlak degil, altinda degil ust
   kosesinde olsun." Kose yuvarlagi sifir; konum ikonun sag ust
   kosesi (dugmenin icinde, mutlak). */
/* Gulbin, 22 Eylul: "sayi cok kapatmis, biraz daha ustte olsun ve
   daha kucuk." Punto 11'den 9'a, kutu 19x14'ten 15x11'e indi,
   ikonun ustune dogru 4 px daha kaydi. */
.cartdot{position:absolute;z-index:9;pointer-events:none;
  /* Gulbin, 22 Eylul: "ustten hizala." Rozetin ust kenari ikonun
     ust kenariyla ayni cizgide; yukari tasmiyor. */
  top:0;right:-9px;left:auto;
  min-width:1.3em;height:1.3em;padding:0 .25em;border-radius:0;
  background:var(--green);color:var(--mavi-koyu);font-family:Clash,sans-serif;font-weight:var(--ag-ince);
  font-size:9px;display:grid;place-items:center;line-height:1}  /* bekci-muaf: rozet olcusu */
.tool{position:fixed;z-index:40;display:none;
  background:var(--yzy-panel);
  border:var(--cizgi) solid rgba(97,206,112,.28);box-shadow:0 40px 90px -40px var(--siyah);
  font-family:Clash,Montserrat,sans-serif;color:var(--mtn-1);
  min-width:270px;max-width:min(440px,92vw);
  padding:calc(20*100cqw/var(--AW));font-size:var(--m3)}
.tool.on{display:block}
.tool h4{margin:0 0 .3em;font-size:.72em;font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mtn-3)}
.tool h4.ikinci{margin-top:1.1em;padding-top:.9em;
  border-top:var(--cizgi) solid rgba(97,206,112,.18)}
.tool a{color:inherit;text-decoration:none}
.tool ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.12em}
.tool li a{display:flex;align-items:center;gap:.6em;padding:.42em .55em;margin-left:-.55em;
  font-size:.8em;font-weight:var(--ag-ince);transition:background .2s,color .2s,padding-left .2s}
.tool li a:hover{color:var(--green);background:rgba(97,206,112,.08);padding-left:.85em}
.tool li a .rt{margin-left:auto;font-size:.82em;color:var(--green);opacity:.65}
.tool .big{display:block;font-size:1.02em;font-weight:var(--ag-ince);color:var(--green);
  padding:.15em 0 .5em}
.tool .sub{margin:0;font-size:.7em;font-weight:var(--ag-ince);line-height:1.45;opacity:.72}


/* iletisim paneli: butun araliklar tek bir ritimden turer */
.tool.tel{min-width:300px;--g:14px}
.tool.tel h4{margin:0 0 calc(var(--g)/4)}
.tool.tel h4.ikinci{margin-top:var(--g);padding-top:var(--g);
  border-top:var(--cizgi) solid rgba(97,206,112,.18)}
.khat{margin:0 0 var(--g)}
.kust{display:block;font-size:.62em;color:var(--mtn-3);text-transform:uppercase;
  margin:0 0 calc(var(--g)/3)}
.knum{display:block;font-size:1.02em;font-weight:var(--ag-ince);color:var(--green);
  text-decoration:none;margin:0 0 calc(var(--g)/2)}
.knum:hover{color:var(--green)}
.knum.kmail{overflow-wrap:anywhere}
.kbtn{display:flex;gap:calc(var(--g)/2)}
.kbtn a{flex:1;text-align:center;text-decoration:none;font-size:.66em;
  text-transform:uppercase;padding:.55em .4em;border:var(--cizgi) solid rgba(97,206,112,.45);
  color:var(--green);transition:background .22s,color .22s}
.kbtn a:hover{background:var(--green);color:var(--mavi-koyu)}
.tool.tel .sub{margin:0;line-height:1.5}
.kadres{line-height:1.5}

/* arama */
.tool.ara{width:min(430px,86vw)}
.sform{display:flex;gap:.5em;margin-bottom:.9em}
.sform input{flex:1;min-width:0;background:transparent;border:0;border-bottom:var(--cizgi) solid rgba(97,206,112,.5);
  color:var(--mtn-1);font:inherit;font-size:.82em;padding:.42em .1em}
.sform input:focus{outline:none;border-bottom-color:var(--green)}
.sform button{flex:none;background:none;border:var(--cizgi) solid rgba(97,206,112,.5);color:var(--green);
  font:inherit;font-size:.72em;text-transform:uppercase;padding:.42em 1em;cursor:pointer;
  transition:background .25s,color .25s}
.sform button:hover{background:var(--green);color:var(--mavi-koyu)}
.sres{max-height:min(52vh,380px);overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:.15em}
.sres a{display:flex;align-items:center;gap:.7em;padding:.4em .5em;margin-left:-.5em;
  transition:background .2s}
.sres a:hover{background:rgba(97,206,112,.08)}
.sres .th{flex:none;width:2.6em;height:2.6em;background:var(--beyaz);display:grid;place-items:center;
  overflow:hidden}
.sres .th img{width:88%;height:88%;object-fit:contain}
.sres b{font-weight:var(--ag-ince);font-size:.74em;line-height:1.25}
.sres .pz{margin-left:auto;flex:none;font-size:.72em;color:var(--green)}
.sinfo{font-size:.72em;font-weight:var(--ag-ince);opacity:.6;padding:.5em .1em}

/* mini sepet: sagdan acilan panel */
.cartp{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:60;
  background:var(--yzy-panel);border-left:var(--cizgi) solid rgba(97,206,112,.3);
  transform:translateX(102%);transition:transform .4s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;
  font-family:Clash,Montserrat,sans-serif;color:var(--mtn-1)}
.cartp.on{transform:none}
.cartv{position:fixed;inset:0;z-index:59;background:rgba(3,12,17,.55);
  opacity:0;pointer-events:none;transition:opacity .4s}
.cartv.on{opacity:1;pointer-events:auto}
.carth{display:flex;align-items:center;justify-content:space-between;
  padding:var(--r3) var(--r3);border-bottom:var(--cizgi) solid rgba(97,206,112,.22)}
.carth b{font-weight:var(--ag-baslik);font-size:var(--f4);text-transform:uppercase;color:var(--green)}
.carth button{background:none;border:0;color:var(--mtn-2);font:inherit;font-size:var(--f5);
  cursor:pointer;text-transform:uppercase}
.carth button:hover{color:var(--green)}
.cartb{flex:1;overflow:auto;overscroll-behavior:contain;padding:var(--r2) var(--r3)}
.cartrow{display:flex;gap:var(--r2);padding:var(--r2) 0;border-bottom:var(--cizgi) solid rgba(97,206,112,.14)}
.cartrow .th{flex:none;width:64px;height:64px;background:var(--beyaz);display:grid;place-items:center;overflow:hidden}
.cartrow .th img{width:88%;height:88%;object-fit:contain}
.cartrow b{display:block;font-weight:var(--ag-ince);font-size:var(--f5);line-height:1.3}
.cartrow span{font-size:var(--f5);opacity:.7}
.cartrow .pz{margin-left:auto;font-size:var(--f5);color:var(--green);white-space:nowrap}
.cartf{padding:var(--yan) var(--r3);border-top:var(--cizgi) solid rgba(97,206,112,.22);display:grid;gap:var(--r12)}
.cartf .tot{display:flex;justify-content:space-between;font-size:var(--f4)}
.cartf .tot b{font-weight:var(--ag-ince);color:var(--green)}
.cartf a{display:block;text-align:center;text-decoration:none;padding:.85em 1em;
  font-size:var(--f5);text-transform:uppercase;transition:background .25s,color .25s}
.cartf .go{background:var(--green);color:var(--mavi-koyu);font-weight:var(--ag-ince)}
.cartf .go:hover{background:var(--green)}
.cartf .alt{border:var(--cizgi) solid rgba(97,206,112,.5);color:var(--green)}
.cartf .alt:hover{background:rgba(97,206,112,.12)}
.cartempty{text-align:center;padding:var(--baslik-yuk) var(--r1);display:grid;gap:var(--r2);justify-items:center}
.cartempty p{margin:0;font-size:var(--f5);font-weight:var(--ag-ince);opacity:.75}
@media(max-width:820px){
  .tool{font-size:var(--f5);padding:var(--r2)}
  .tool.ara{width:92vw}
}




/* mini sepet ic bolumleri */
.cartp{width:min(452px,94vw)}
.freeb{padding:var(--r2) var(--r3) var(--r2);border-bottom:var(--cizgi) solid rgba(97,206,112,.16);
  background:rgba(97,206,112,.05)}
.freeb p{margin:0 0 var(--r1);font-size:var(--f5);font-weight:var(--ag-ince);line-height:1.4;color:var(--mtn-2)}
.freeb b{font-weight:var(--ag-ince);color:var(--green)}
.freeb .trk{height:5px;background:rgba(97,206,112,.16);overflow:hidden}
.freeb .fil{height:100%;background:var(--green);width:0;transition:width .5s cubic-bezier(.2,.8,.25,1)}
.freeb.done p{color:var(--green)}
.cartrow{position:relative;align-items:flex-start}
.cartrow .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--r1)}
.cartrow .rz{display:flex;flex-wrap:wrap;gap:var(--r0)}
.cartrow .rz i{font-style:normal;border:var(--cizgi) solid rgba(97,206,112,.42);color:var(--green);
  font-size:var(--f5);padding:.14em .5em;text-transform:uppercase;line-height:1.5}
.qty{display:inline-flex;align-items:center;border:var(--cizgi) solid rgba(97,206,112,.32);
  align-self:flex-start}
.qty button{width:26px;height:26px;background:none;border:0;color:var(--mtn-2);cursor:pointer;
  font:inherit;font-size:var(--f5);line-height:1;transition:color .2s,background .2s}
.qty button:hover{color:var(--mavi-koyu);background:var(--green)}
.qty span{min-width:30px;text-align:center;font-size:var(--f5)}
.cartrow .rm{position:absolute;top:12px;right:0;background:none;border:0;color:var(--mtn-3);
  cursor:pointer;font-size:var(--f5);line-height:1;padding:2px var(--r0);transition:color .2s}
.cartrow .rm:hover{color:var(--uyari-acik)}
.cartrow .pz{margin-right:var(--r3)}
.cartrow .eski{display:block;font-size:var(--f5);text-decoration:line-through;opacity:.45;color:var(--mtn-2)}

/* capraz satis */
.xs{border-top:var(--cizgi) solid rgba(97,206,112,.2);padding:var(--r2) 0 var(--r0);margin-top:var(--r1)}
.xs h5{margin:0 0 3px;font-size:var(--f5);font-weight:var(--ag-baslik);text-transform:uppercase;color:var(--green)}
.xs .hint{margin:0 0 var(--r12);font-size:var(--f5);font-weight:var(--ag-ince);opacity:.6}
.xrail{display:flex;gap:var(--r1);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:var(--r1)}
.xcard{flex:0 0 116px;scroll-snap-align:start;border:var(--cizgi) solid rgba(97,206,112,.22);
  padding:var(--r1);display:flex;flex-direction:column;gap:var(--r1);transition:border-color .25s}
.xcard:hover{border-color:rgba(97,206,112,.55)}
.xcard .th{height:74px;background:var(--beyaz);display:grid;place-items:center;overflow:hidden}
.xcard .th img{width:88%;height:88%;object-fit:contain}
.xcard b{font-weight:var(--ag-ince);font-size:var(--f5);line-height:1.25;min-height:2.5em}
.xcard span{font-size:var(--f5);color:var(--green)}
.xcard button{margin-top:auto;background:none;border:var(--cizgi) solid rgba(97,206,112,.45);
  color:var(--green);font:inherit;font-size:var(--f5);text-transform:uppercase;
  padding:.42em .2em;cursor:pointer;transition:background .25s,color .25s}
.xcard button:hover{background:var(--green);color:var(--mavi-koyu)}
.xcard button.ok{background:var(--green);color:var(--mavi-koyu)}


/* capraz satis rayi: kaydirilabildigi belli olsun */
.xwrap{position:relative}
.xnav{position:absolute;top:calc(50% - 32px);width:30px;height:30px;z-index:3;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(7,30,41,.92);border:var(--cizgi) solid rgba(97,206,112,.5);color:var(--green);
  font:inherit;font-size:var(--f5);line-height:1;padding:0;
  transition:background .25s,color .25s,opacity .25s}
.xnav:hover{background:var(--green);color:var(--mavi-koyu)}
.xnav.sol{left:-6px}
.xnav.sag{right:-6px}
.xnav[disabled]{opacity:.25;cursor:default}
.xnav[disabled]:hover{background:rgba(7,30,41,.92);color:var(--green)}
.xrail{scrollbar-width:thin;scrollbar-color:rgba(97,206,112,.45) transparent}
.xrail::-webkit-scrollbar{height:4px}
.xrail::-webkit-scrollbar-thumb{background:rgba(97,206,112,.45)}
.xfade{position:absolute;top:0;bottom:10px;width:34px;pointer-events:none;z-index:2;
  transition:opacity .25s}
.xfade.l{left:0;background:linear-gradient(90deg,var(--yzy-panel),rgba(7,30,41,0))}
.xfade.r{right:0;background:linear-gradient(270deg,var(--yzy-panel),rgba(7,30,41,0))}
.xfade.yok{opacity:0}

/* alt kisim */
.cartf .satir{display:flex;justify-content:space-between;font-size:var(--f5);opacity:.8}
.cartf .satir.ind{color:var(--green);opacity:1}
/* ---- ikon pencereleri ve mini sepet beyaz tema (Gulbin, 7 Eylul) ----
   Ustteki koyu kurallar duruyor; burasi yalnizca rengi geciyor. */
.tool{background:var(--beyaz);color:var(--mavi-koyu);
  border:var(--cizgi) solid var(--mavi-koyu);box-shadow:0 30px 70px -44px rgba(3,28,39,.5)}
.tool h4{color:var(--mavi-koyu)}
.tool h4.ikinci{border-top:var(--cizgi) solid var(--mavi-koyu)}
.tool li a{color:var(--mavi-koyu)}
.tool li a:hover{color:var(--mavi-acik);background:rgba(2,31,54,.06)}
.tool li a .rt{color:var(--mavi-acik);opacity:1}
.tool .big{color:var(--mavi-koyu)}
.tool .sub{color:var(--mavi-koyu);opacity:.72}
.sform input{border-bottom:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.sform input::placeholder{color:var(--mavi-koyu);opacity:.5}
.sform input:focus{border-bottom-color:var(--mavi-acik)}
.sform button{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.sform button:hover{background:var(--mavi-koyu);color:var(--beyaz)}
.sres a{color:var(--mavi-koyu)}
.sres a:hover{background:rgba(2,31,54,.06)}
.sres .th{border:var(--cizgi) solid var(--mavi-koyu)}
.sres .pz{color:var(--mavi-acik)}

.cartp{background:var(--beyaz);color:var(--mavi-koyu);border-left:var(--cizgi) solid var(--mavi-koyu)}
.carth{border-bottom:var(--cizgi) solid var(--mavi-koyu)}
.carth b{color:var(--mavi-koyu)}
.carth button{color:var(--mavi-koyu);opacity:.7}
.carth button:hover{color:var(--mavi-acik);opacity:1}
.cartrow{border-bottom:var(--cizgi) solid rgba(2,31,54,.16)}
.cartrow .th{border:var(--cizgi) solid rgba(2,31,54,.18)}
.cartrow .pz{color:var(--mavi-koyu)}
.cartf{border-top:var(--cizgi) solid var(--mavi-koyu)}
.cartf .tot b{color:var(--mavi-koyu)}
.cartf .alt{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.cartf .alt:hover{background:rgba(2,31,54,.07)}
.cartf .satir{color:var(--mavi-koyu);opacity:.75}
.cartf .satir.ind{color:var(--mavi-acik);opacity:1}
.cartf .devam{color:var(--mavi-koyu);opacity:.6}
/* Gulbin, 14 Eylul: "beyaz ustune acik yesil gelmis okunmuyor."
   Olculdu: sepet paneli beyaz (#ffffff) ama bos sepet blogundaki iki
   baglanti ("Magazaya don", "Editorde olcunu gir") --green ile,
   yani acik yesil kaliyordu. Acik yuzeyde yazi rengi --mavi-koyu. */
.cartempty a,.cartempty .alt{color:var(--mavi-koyu)}
.cartempty .alt{border-color:var(--mavi-koyu)}
.cartempty .go{background:var(--mavi-koyu);color:var(--beyaz)}
.cartbadge i{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.freeb{border-bottom:var(--cizgi) solid rgba(2,31,54,.16);color:var(--mavi-koyu)}
.freeb b{color:var(--mavi-acik)}
.xs h5{color:var(--mavi-koyu)}
.xcard{border:var(--cizgi) solid var(--mavi-koyu)}
.xcard:hover{border-color:var(--mavi-acik)}
.xcard .th{border-bottom:var(--cizgi) solid rgba(2,31,54,.14)}
.xcard b{color:var(--mavi-koyu)}
.xcard span{color:var(--mavi-acik)}
.xcard button{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.xcard button:hover,.xcard button.ok{background:var(--mavi-koyu);color:var(--beyaz)}
.xnav{background:rgba(255,255,255,.94);border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)}
.xnav:hover{background:var(--mavi-koyu);color:var(--beyaz)}
.xnav[disabled]:hover{background:rgba(255,255,255,.94);color:var(--mavi-koyu)}
.xfade.l{background:linear-gradient(90deg,var(--beyaz),rgba(255,255,255,0))}
.xfade.r{background:linear-gradient(270deg,var(--beyaz),rgba(255,255,255,0))}
.xrail{scrollbar-color:rgba(2,31,54,.4) transparent}
.xrail::-webkit-scrollbar-thumb{background:rgba(2,31,54,.4)}
.cartbadge{display:flex;flex-wrap:wrap;gap:var(--r1);margin-bottom:2px}
.cartbadge i{font-style:normal;border:var(--cizgi) solid rgba(97,206,112,.4);color:var(--green);
  font-size:var(--f5);padding:.28em .65em;text-transform:uppercase;line-height:1.5}
.cartf .devam{background:none;border:0;color:var(--mtn-3);font:inherit;font-size:var(--f5);
  text-decoration:underline;cursor:pointer;padding:2px 0}
.cartf .devam:hover{color:var(--green)}
.cartnote{font-size:var(--f5);font-weight:var(--ag-ince);opacity:.6;line-height:1.45;margin:0}
.cartf .cartnote a{display:inline;padding:0;text-transform:none;font-size:inherit;
  text-decoration:underline;color:var(--green)}







/* ---- ana baslik: giriste seffaf, kaydirinca beyaz ve yapisik ---- */
.hd{position:fixed;left:0;right:0;top:81px;z-index:50;
  container-type:inline-size;--AW:1724;--H:129.6;
  color:var(--green);background:transparent;
  transition:background .3s ease,color .3s ease,top .3s ease,box-shadow .3s ease}
.hd.on{top:0}
/* beyaz gorunum: hem kaydirinca hem de menu acikken. Menu acikken yer
   degismiyor, yalnizca renk doner; yoksa panel 81 px zipliyordu. */
.hd.on, .hd.beyaz{background:var(--beyaz);color:var(--mavi-koyu);
  box-shadow:0 10px 26px -20px rgba(3,28,39,.45)}
.hd .artbas{display:block;width:100%;height:auto;pointer-events:none}
.hd .hit{position:absolute;z-index:3;background:transparent;border:0;padding:0;cursor:pointer;
  left:calc(var(--x)*100%/var(--AW));top:calc(var(--y)*100%/var(--H));
  width:calc(var(--w)*100%/var(--AW));height:calc(var(--h)*100%/var(--H))}
.hd .hit.ic{border-radius:50%;position:absolute}
/* Gulbin, 22 Eylul: "iconlarin ustune gelince animasyon olsun." */
.hd .hit.ic svg{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.hd .hit.ic:hover svg{transform:translateY(-2px) scale(1.12)}
.hd .hit.ic:active svg{transform:translateY(0) scale(.94)}
/* Gulbin, 22 Eylul: "sepete bir sey eklenince kisi sepeti kapatip
   gezinmeye devam ediyorsa sepet animasyonlu sekilde titremeye
   baslasin." Titreme surekli degil: her 3,2 saniyede kisa bir
   sarsinti, cekmece acilinca sinif kalkiyor. */
@keyframes sepsars{
  0%,62%,100%{transform:translateX(0) rotate(0)}
  65%{transform:translateX(-2px) rotate(-7deg)}
  69%{transform:translateX(2px) rotate(7deg)}
  73%{transform:translateX(-2px) rotate(-5deg)}
  77%{transform:translateX(2px) rotate(5deg)}
  81%{transform:translateX(-1px) rotate(-2deg)}
  85%{transform:translateX(0) rotate(0)}}
/* Gulbin, 22 Eylul: "ustundeki sayiyla birlikte oynayacak."
   Rozet de ayni egriyle sarsiliyor, ikonla birlikte gidiyor. */
.sars svg,.sars .mtbi,.sars .cartdot,.sars .mtbn{
  animation:sepsars 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .hd .hit.ic svg{transition:none}
  .sars svg,.sars .mtbi,.sars .cartdot,.sars .mtbn{animation:none}}
.hd .nav{position:absolute;inset:0;z-index:20;pointer-events:none}
.hd .nb{color:currentColor}
/* Rozet artik sepet dugmesinin cocugu; eski tuval koordinatlari
   (baslik icinde serbest konum) gecersiz, konum dugmenin sag ust
   kosesi. */
.hd .cartdot{left:auto;right:-9px;top:0}
/* Gulbin, 22 Eylul: "beyaz headera gecince yesil degil mavi olsun
   adet zemini, ici de beyaz olsun." Koyu baslikta yesil zemin
   okunuyor; beyaz baslikta beyaz uzerinde yesil kaliyordu.
   Baslik dort ayri durumda beyaza donuyor: kaydirinca (.on),
   alt sayfalarda (.beyaz / .daima) ve cekmece ya da menu acikken
   (body.sepet-acik / body.menu-acik). Dordu de kapsaniyor. */
.hd.on .cartdot,.hd.beyaz .cartdot,
body.sepet-acik .hd .cartdot,body.menu-acik .hd .cartdot{
  background:var(--mavi-koyu);color:var(--beyaz)}
@media(max-width:820px){ .hd{position:absolute} }


/* Butun cizgisel ogeler 1 px (Gulbin, 6 Eylul).
   Ikonlar ve kose ayraclari dolgu olarak cizilmis: kendi kalinliklari
   1724'luk tuvalde ~1,17 birim, yani masaustu genisliginde zaten ~1 px.
   Onlara ek kontur verilmiyor, yoksa iki katina cikiyor. */
.artbas [id^="ico-"] path,
svg.art #lblok path{
  stroke-linejoin:round;stroke-linecap:round}
/* Ikonlar kontur degil dolgu olarak cizilmis ve her biri farkli kalinlikta.
   Tuvalde olculdu (canvas ile, 40 kat buyutup piksel sayarak):
     ico-tel 1,00 · ico-kul 0,775 · ico-ara 0,725 · ico-sep 0,70 birim
   Hedef, Clash Regular govde kalinligi olan 1,42 birim. Fark kadar kontur
   ekleniyor. Kontur olcekten muaf DEGIL: yazi gibi ekranla olceklensin diye. */
.artbas [id^="ico-"] path{stroke:currentColor;paint-order:stroke fill}
.artbas #ico-tel path{stroke-width:.24 /* bekci-muaf: hero cizimi dolgu telafisi */}
.artbas #ico-kul path{stroke-width:.56 /* bekci-muaf: hero cizimi dolgu telafisi */}
.artbas #ico-ara path{stroke-width:.59 /* bekci-muaf: hero cizimi dolgu telafisi */}
.artbas #ico-sep path{stroke-width:.69 /* bekci-muaf: hero cizimi dolgu telafisi */}
/* Eski menu oku artboardin kendi cizimiydi ve cok inceydi (6,42 birimlik
   tuvalde ~0,11 birim); 1 px kontur ile tamamlaniyordu. Ok artik Gulbin'in
   ikon setinden ve DOLU form; o kontur kalinlik ekliyordu, kalkti.
   Gulbin, 15 Eylul: "oklara kalinlik verilmis, kararlastirdigimiz oklar
   boyle degildi." */
.hd .nb .arw path{fill:currentColor;stroke:none}
.hd .nb .arw{stroke:none}

/* vector-effect MIRAS ALINMAZ: <svg>'ye verince path'e ulasmiyor, cizgi
   yine olcekle inceliyordu. Her cizgi ogesine tek tek veriliyor.
   Bunlar gercek kontur olan ogeler; ekranda tam 1 px cizerler. */
svg.artbg #bg, svg.artbg #bg path,
svg.art #lblok, svg.art #lblok path,
svg.art #ctaB path,
.nb .arw path,
.nav-arw svg path,
/* Ok artik dolu form (Gulbin'in ikon seti); kontur kurali kalkti. */
.arw2 path{fill:currentColor;stroke:none}

/* ---- bölümler ---- */
.lite{background:var(--beyaz)}
.darkS{background:var(--yzy-panel) center/100% 100% no-repeat}
.bg3{background-image:url(/wp-content/plugins/koli-lazim-onizleme/varlik/e2216a7e9b73.gif)}
.bg5{background-image:url(/wp-content/plugins/koli-lazim-onizleme/varlik/e2216a7e9b73.gif)}
.h2{font-weight:var(--ag-baslik);line-height:1.10;white-space:pre;text-transform:uppercase}
.par{font-weight:var(--ag-ince)}
.fs.ctr,.card+.A{font-weight:var(--ag-ince)}
.par{line-height:1.10}
.card{border:var(--cizgi) solid rgba(5,28,38,.55);z-index:2}
.scard{border:var(--cizgi) solid rgba(97,206,112,.75);z-index:2}
.ctr{text-align:center}
.rail{z-index:3}
.nav-arw{z-index:4;color:var(--mavi-koyu)}
.nav-arw svg{width:100%;height:auto;stroke:currentColor;fill:none;stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke}
@media(max-width:820px){
  .bar{height:62px}.bar .tr{font-size:22px;line-height:34px; /* bekci-muaf: canlidan olculen serit */gap:var(--r2)}
}



/* ============ URUN SAYFASI ============
   Kompozisyon Artboard 14'ten (iki sutun, kutu oranlari, sira).
   Olcek ana sayfadan: bolum basligi ~60, lead ~21, kart basligi ~19,
   kart metni ~12, rozet ~16, buton ~14 birim (1724 tuvalinde olculdu).
   Tasarimdaki 26,8 birimlik tek punto her yerde kullanilmisti, sayfada
   her sey buyuk duruyordu; rollere gore ayrildi.                        */
.urun2{--AW:1724;container-type:inline-size;
  background:var(--beyaz);color:var(--mavi-koyu);
  margin-top:calc(129.6*100vw/1724);
  padding:calc(46*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW))
          calc(90*100cqw/var(--AW))}
.urun2 a{color:inherit}
.ukirinti{display:flex;gap:.5em;text-transform:uppercase;opacity:.7;
  font-size:var(--m4);margin-bottom:calc(26*100cqw/var(--AW))}
.ukirinti a{text-decoration:none}
.ukirinti a:hover{color:var(--mavi-acik)}

/* --- ust: iki sutun, tasarimdaki oran (806,6 / 689,6) --- */
.ust{display:grid;grid-template-columns:1.17fr 1fr;
  gap:calc(62*100cqw/var(--AW));align-items:start}
/* grid ogesinin asgari genisligi varsayilan olarak icerigin kendi boyutu;
   900 px'lik urun gorseli sol sutunu sisiriyordu */
.ust>*,.alt>*{min-width:0}

.ugorsel{position:relative}
.ubuyuk{position:relative;aspect-ratio:1;display:grid;place-items:center;
  overflow:hidden;background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu)}
/* Gulbin, 29 Eylul: "gorselleri de kirpmissin sacma sapan, urun
   gorseli neyse o koyulsun. disindaki cercevenin icini kaplasin
   tamamen, tum gorsellerden bahsediyorum."
   Gorsel cercevenin bir kismini (%72) kaplayacak sekilde
   kuculuyordu. Artik cerceveyi tam kapliyor; object-fit:contain
   durdugu icin gorselin kendisi hic kirpilmiyor. */
.ubuyuk img{width:100%;height:100%;object-fit:contain}
/* Rozet sarmali yalniz mobilde kutu; masaustunde display:contents ile
   yok sayiliyor, iki rozet eskisi gibi .ubuyuk'e gore konumlaniyor.
   Boylece masaustu yerlesimine hic dokunulmadi. */
/* Rozet satiri: solda durum isigi, sagda indirim yuzdesi. Ikisi ayni
   satirda ve ayni eksende; hizayi flex veriyor, elle ust degeri
   hesaplanmiyor (Gulbin: "fotografin sag kenarinda da olsun, soldaki
   metine hizali"). */
.urozetler{position:absolute;z-index:2;
  left:calc(30*100cqw/var(--AW));right:calc(30*100cqw/var(--AW));
  top:calc(30*100cqw/var(--AW));
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(12*100cqw/var(--AW));pointer-events:none}
/* Kutulu rozet kalkti (bkz. GOVDE'deki not). Durum rozeti urun
   kartlarindakiyle ayni: cercevesiz, yaninda yanip sonen kare. */
.urozet{position:static;border:0;background:none;text-transform:uppercase;
  font-size:var(--m4);line-height:1.25}
.uok{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:0;color:var(--mavi-koyu);cursor:pointer;font:inherit;
  font-size:var(--m3);line-height:1;padding:.3em .5em;
  transition:opacity .2s}
.uok:hover{opacity:.5}
.uok.sol{left:calc(8*100cqw/var(--AW))}
.uok.sag{right:calc(8*100cqw/var(--AW))}
.ukucukler{display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(20*100cqw/var(--AW));margin-top:calc(20*100cqw/var(--AW))}
.ukucuk{aspect-ratio:1;border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  display:grid;place-items:center;cursor:pointer;
  padding:calc(12*100cqw/var(--AW));transition:border-color .25s}
.ukucuk[aria-current="true"]{border-color:var(--mavi-acik)}
.ukucuk img{width:100%;height:100%;object-fit:contain}
/* Bos yuva: gorsel gelince dolacak kutu. Uydurma gorsel konmuyor,
   ayni foto kopyalanmiyor; kutu bos ve soluk cerceveyle duruyor. */
.ukucuk.bos{cursor:default;border-color:rgba(2,31,54,.3)}

/* --- sag sutun --- */
.ubaslik{margin:0;font-weight:var(--ag-baslik);line-height:1.08;text-transform:uppercase;
  font-size:var(--m2)}
/* Puan satiri: basligin hemen altinda yildiz, puan ve degerlendirme
   sayisi. Yildizlar yorum kartlarindakiyle ayni .yy sinifi, boylece iki
   yerde ayni gorunuyor. */
.upuan{display:flex;align-items:baseline;gap:calc(10*100cqw/var(--AW));
  margin:calc(12*100cqw/var(--AW)) 0 0;flex-wrap:wrap}
/* Gulbin, 16 Eylul: "buradaki yesiller bizim yesilimiz mi? degilse
   degistir." Yildizlar Artboard 2'nin #87be7d'siydi, sayfadaki tek
   yabanci yesildi; marka yesiline (#61ce70) alindi.
   Animasyonda uc deneme oldu: soldan saga dolan gecis, sirayla
   belirme, sonra sirayla buyuyen dalga. Gulbin: "urun yorum
   kartlarinda kaydirmada animasyon olmasin" + "yildizlar 3 gunde
   teslim karesi gibi yanip sonsun."
   Artik kartlardaki durum isiginin BIREBIR aynisi: krzyan, 2,4 sn,
   yumusak opaklik gidis gelisi. Yildizlar hep birlikte nefes aliyor,
   sirali gecikme yok, kaydirirken hicbir sey tetiklenmiyor.
   Kare surekli donuyor, bu da oyle: goruse girme sarti kalkti. */
.urun2 .yy{color:var(--green);
  animation:krzyan 2.4s ease-in-out infinite}
.urun2 .yy i{font-style:normal}
@media(prefers-reduced-motion:reduce){
  .urun2 .yy{animation:none}}
.upuan .yy{letter-spacing:.1em;font-size:var(--m4)}
.upuan b{font-weight:var(--ag-ince);font-size:var(--m4)}
.upuan .usay{font-size:var(--m5);opacity:.7;text-transform:uppercase}

/* Fiyat kutusu, "Sepete ekle" satirinin hemen ustunde.
   Duzen Gulbin'in gonderdigi stand sayfasindan: buyuk birim fiyat ve
   "/ adet", altinda secilen adedin toplami, en altta KDV notu.
   Cerceve sitenin sac teli cizgisi, kose yok. */
/* Gulbin, 16 Eylul: "cerceve olmasin" + "22 adet toplami, kdv
   dahildir kismi sag tarafa hizali olsun, 8 tl ye ortalanmis sekilde."
   Kutu kalkti; solda buyuk birim fiyat, sagda iki kucuk satir sagda
   hizali ve fiyatin dikey ortasinda. */
/* Gulbin, 17 Eylul: "f5 olsun." Secenek sayfasindaki F5 duzeni:
   ustte buyuk fiyat + "/ adet", saginda rozet; altta adet toplami ve
   KDV notu yan yana. Onceki hal ikisini YAN YANA koyuyordu, fiyat ve
   toplam ayni satirda yarisiyordu. */
.ufiyat{display:block;margin:calc(24*100cqw/var(--AW)) 0 0}
.ufbas{align-items:baseline}
.uind{margin-left:auto}
.ufsag{flex-direction:row!important;align-items:baseline!important;
  justify-content:space-between!important;text-align:left!important;
  gap:calc(16*100cqw/var(--AW));margin-top:calc(10*100cqw/var(--AW))}
.ufsag .ufkdv{text-align:right}
.ufiyat p{margin:0}
.ufbas{display:flex;align-items:baseline;gap:calc(10*100cqw/var(--AW));
  flex:0 0 auto}
/* Gulbin, 16 Eylul: "fiyat bold olsun." */
.ufbas b{font-weight:var(--ag-baslik);font-size:var(--m1);line-height:1}
/* ---- INDIRIM ----
   Eski fiyat ustu cizili, yaninda yuzde rozeti. Rozet sitenin mevcut
   rozet recetesi: yesil dolgu, koyu mavi yazi (beyaz zeminde yesil
   YAZI yok). Solukluk kullanilmiyor, ayrim cizgide ve puntoda. */
.ufbas s{font-size:var(--m4);text-decoration-thickness:var(--cizgi)}
/* Gulbin, 16 Eylul: "ustune gelsin dedigim yer 5,60 TL'nin TL ust
   kosesi" + "ustune gelsin TL yazisinin". Rozet fiyatin YANINDA degil,
   TL isaretinin ust kosesine BINIYOR. Bu yuzden fiyatin icinde ve
   mutlak konumlu: satirin genisligine hic eklenmiyor, sagdaki toplam
   sutunu daralmiyor. Olculer em cinsinden, punto degisirse rozet de
   ayni yerde kaliyor. */
.ufbas b{position:relative}
/* Gulbin, 16 Eylul: "once / adet olsun sonra %30 olsun, %30 da adete
   hizalansin, ustte degil altta olsun yani." Sira: fiyat, birim,
   rozet. Rozet artik ust hizada degil; .ufbas zaten align-items:
   baseline oldugu icin ayri kural vermeye gerek yok, "adet" ile ayni
   satir cizgisine oturuyor. */
/* Gulbin, 16 Eylul: "%30 bold olmasin eski haline cevir." Rozet
   fiyatin <b> etiketinin icine girince agirligini miras aliyordu. */
.uind{font-style:normal;background:var(--green);color:var(--mavi-koyu);
  font-size:var(--m5);font-weight:var(--ag-ince);line-height:1;
  padding:.32em .6em;text-transform:uppercase;white-space:nowrap}
.ucubuk s{font-size:var(--f5);font-weight:var(--ag-ince);
  text-decoration-thickness:var(--cizgi);margin-right:.4em}
/* "/ adet" once fiyatla ayni kalinliga alinmisti, Gulbin geri istedi:
   ince ve hafif soluk. */
.ufbas span{font-size:var(--m4);opacity:.7}
.ufsag{display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;gap:calc(6*100cqw/var(--AW));min-width:0}
/* Gulbin, 16 Eylul: "22 adet toplami 176 kdv dahildir butun metinler
   ayni kalinlik ve boyutta olsun." Sag bloktaki iki satir tek punto,
   tek agirlik, tek renk: rakamlarin kalinligi ve KDV satirindaki
   solukluk kalkti. */
.uftop,.ufkdv{font-size:var(--m5);font-weight:var(--ag-ince);
  line-height:1.3;opacity:1}
.uftop b,.uftop i{font-style:normal;font-weight:inherit;font-size:inherit;
  font-variant-numeric:tabular-nums}
.uozet{margin:calc(16*100cqw/var(--AW)) 0 calc(30*100cqw/var(--AW));
  line-height:1.55;opacity:.8;font-size:var(--m4)}
.usec{display:block;margin-bottom:calc(16*100cqw/var(--AW))}
.usec>span{display:block;text-transform:uppercase;opacity:.75;
  font-size:var(--m4);margin-bottom:calc(7*100cqw/var(--AW))}
.usec select{width:100%;font:inherit;font-size:var(--m4);
  color:var(--mavi-koyu);background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(14*100cqw/var(--AW)) calc(18*100cqw/var(--AW));
  border-radius:0;appearance:none;cursor:pointer}
.usec select:focus{outline:none;border-color:var(--mavi-acik)}
.usepet{display:flex;gap:calc(14*100cqw/var(--AW));margin-top:calc(24*100cqw/var(--AW))}
.usayac{display:flex;align-items:center;border:var(--cizgi) solid var(--mavi-koyu);
  flex:0 0 calc(140*100cqw/var(--AW))}
.usayac button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;
  font-size:var(--m3);padding:0 calc(12*100cqw/var(--AW));
  line-height:calc(52*100cqw/var(--AW))}
.usayac input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;
  font-size:var(--m4);text-align:center;-moz-appearance:textfield}
.usayac input::-webkit-outer-spin-button,.usayac input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.usayac input:focus{outline:none}
/* TEK BIRINCIL BUTON RECETESI
   Onceden .uekle lacivert, .sptozet .uekle ve .odmozet .uekle yesildi:
   ayni aksiyon ("Odemeye gec") ayni ekranda iki renkte gorunuyordu.
   Birincil aksiyon her yerde yesil dolgu + koyu yazi. Ikincil aksiyon
   .uekle.ince: sac teli yesil cerceve, seffaf zemin. */
/* Artboard 2 (Gulbin, 10 Eylul 14:49): birincil buton KOYU dolgu,
   beyaz yazi. Yesile cevirmistim, tasarim koyu diyor, geri alindi.
   Tekillik su kuralla saglaniyor: birincil her yerde ayni koyu buton,
   ikincil .uekle.ince (sac teli cerceve, seffaf zemin). */
/* Gulbin, 16 Eylul: "sepete ekle butonlari koyu mavi ve acik mavimizin
   gradientinden animasyonlu olsun." Iki marka mavisi arasinda yavas
   gidip gelen bir gecis; sayfada surekli goruldugu icin sakin tutuldu
   (9 sn, tek yonlu kayma degil gidis gelis). Hareket kapaliysa duruyor. */
/* Gulbin, 16 Eylul: "sepete ekle butonundaki dis cerceve olmayacak
   sadece fill." Cerceve kalkti; gradient dolgu tek basina. */
/* Gulbin, 16 Eylul: "sepete ekle butonlarinin yazilari yesil olsun."
   Kontrast uyarisini soyledim (gradientin acik ucunda 3,87:1, 13 px
   yazi icin taban 4,5), karari bu yonde verdi. */
.uekle{flex:1;color:var(--green);font:inherit;border:0;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate;
  font-size:var(--m4);text-transform:uppercase;cursor:pointer;
  transition:border-color .25s}
@keyframes uekleakis{to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.uekle{animation:none}}
.uekle:hover{filter:brightness(1.08)}
/* Ikincil buton yine cerceveli: birincil dolgu, ikincil kontur.
   Cerceve tabanda sifirlandigi icin burada yeniden veriliyor. */
.uekle.ince{background:transparent;color:var(--mavi-koyu);animation:none;
  border:var(--cizgi) solid var(--mavi-koyu)}
.uekle.ince:hover{background:rgba(2,31,54,.07)}
.ukargo{border:var(--cizgi) solid var(--mavi-koyu);text-align:center;
  margin-top:calc(18*100cqw/var(--AW));
  padding:calc(16*100cqw/var(--AW)) calc(20*100cqw/var(--AW))}
/* ---- KARGO RAYI (G1) ----
   Gulbin, 17 Eylul: "g1'i gelistirelim." Ikonlar rayin iki ucunda,
   ayni satirda; aciklama altta tek satir. Kupon kutusu hep dolu,
   kargo kutusu esige varinca doluyor. */
.uksatir{display:flex;align-items:center;gap:calc(12*100cqw/var(--AW))}
.ukkutu{flex:0 0 38px;width:38px;height:38px;box-sizing:border-box;
  display:grid;place-items:center;
  border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  color:var(--mavi-koyu);transition:background .3s,border-color .3s}
.ukkutu svg{width:19px;height:19px;stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke}
.ukkutu i{display:contents}
.ukkutu.tamam{background:var(--green);border-color:var(--green)}
.ukray{position:relative;flex:1;height:14px;box-sizing:border-box;
  border:var(--cizgi) solid var(--mavi-koyu);overflow:hidden}
.ukdolu{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate;
  transition:width .5s cubic-bezier(.2,.8,.25,1)}
@media(prefers-reduced-motion:reduce){
  .ukdolu{animation:none;transition:none}}
/* Kutunun kendi text-align:center'i miras kaliyordu, satir ortalanip
   uc satira boluniyordu. */
/* Gulbin, 22 Eylul: ornekte cubugun altindaki cumle sagda, buyuk
   harf ve koseli parantez icinde. */
/* (alt yazinin stili ILERLEME blogunun icine tasindi) */
/* Eski tasarimda kutunun icindeki <b> blok yapilmisti; cumle her
   kalin parcada satir atliyordu. */
.ukyazi b,.ukyazi em{display:inline!important}
.ukyazi b{font-weight:var(--ag-baslik)}
.ukyazi em{font-style:normal;font-weight:var(--ag-baslik);
  font-variant-numeric:tabular-nums}



/* Ic <b>: tutar ve "kaldi!" (Gulbin, 16 Eylul). Dis <b> blok ve ince;
   ic olan satir ici ve kalin olmali, yoksa kutuyu ikiye boluyor.
   mobil.css'teki tek etiket kurali ".ukargo b" ic <b>'yi de yakalayip
   !important ile inceye cekiyordu; bu yuzden burasi da !important. */
.ukargo b b{display:inline!important;font-weight:var(--ag-baslik)!important}
.ukargo b{display:block;font-weight:var(--ag-ince);text-transform:uppercase;
  font-size:var(--m4);margin-bottom:calc(10*100cqw/var(--AW))}
/* Kargo cubugu: koyu mavi dikdortgen ve icinde elle cekilmis gibi
   cizgi. Cizgi sepet doldukca CIZILIYOR (giristeki cerceve
   animasyonuyla ayni recete: pathLength="1", dasharray 1, dashoffset
   1'den 0'a). Genislik degil uzunluk degistigi icin yerlesim her
   karede yeniden hesaplanmiyor. */
/* Gulbin, 16 Eylul: "alttaki koyu mavi sepete ekle butonu gibi
   gradientli olsun." Zemin artik SVG dikdortgeni degil, cubugun kendi
   arka plani: butonla BIREBIR ayni gecis ve ayni akis. Boylece iki
   yerde tek recete var.
   "Altindaki koyu maviden cikabilir": cizgi zeminin disina tasiyor,
   o yuzden kirpma yok. */
.ubar{display:block;overflow:visible;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.ubar{animation:none}}
/* Gulbin, 17 Eylul: "kargo cizgisi bozulmus" > "bozuk".
   Once yukseklik sabitlenip genislik serbest birakilmisti
   (preserveAspectRatio="none"); olcek yatay ve dikeyde farkli olunca
   non-scaling-stroke ile kesik deseni (stroke-dasharray) bozuluyor ve
   cizgi parcalara ayriliyordu. Olcek yeniden ESIT: cizim orantisini
   koruyor, kutu da cizimin kendi yuksekligine (18) iniyor, kalan pay
   kirpiliyor. Boylece hem desen dogru hem cizgi kabalasmiyor. */
.ubar{height:18px;overflow:hidden}
.ubar svg{display:block;width:100%;height:auto;overflow:visible}
/* Gulbin, 16 Eylul: "bu ilerleme cizgisinin kalinligi cerceve
   kalinliginda olacak." Once ikon konturuydu (1,5 px), simdi sayfadaki
   butun cerceveler gibi --cizgi.
   Renk: once yesil, sonra acik mavi denendi, Gulbin "cizgi yine yesil
   olsun" dedi; zemin gradient oldugu icin yesil uzerinde duruyor. */
.uyol{fill:none;stroke:var(--green);stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-width:var(--cizgi);
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.25,1)}
@media(prefers-reduced-motion:reduce){.uyol{transition:none}}
/* ---- GUVEN LISTESI ----
   Gulbin'in kendi stand sayfasindaki ss-guven listesinin duzeni:
   ikili izgara, solda ikon, sagda kalin baslik ve altinda tek satir
   aciklama. Cerceve sitenin sac teli cizgisi.
   Aciklama satiri GRI DEGIL: Gulbin'in kurali "butun yazilar koyu mavi
   olmali, opakligi dusurup rengi degistirip durma". Ayrim puntoda. */
.uliste{display:grid;grid-template-columns:repeat(2,1fr);
  gap:calc(24*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(26*100cqw/var(--AW));
  margin-top:calc(16*100cqw/var(--AW))}
/* Ikon, yanindaki iki satirin dikey ortasinda. */
.uliste>div{display:flex;align-items:center;
  gap:calc(14*100cqw/var(--AW))}
.uliste i{flex:0 0 auto;display:block;
  width:calc(24*100cqw/var(--AW));height:calc(24*100cqw/var(--AW));
  color:var(--mavi-koyu)}
/* Gulbin, 16 Eylul: "iconlu liste iconlari cerceve kalinliginda ve
   renginde olsun." Kontur artik sayfadaki butun cerceveler gibi
   --cizgi; vector-effect sayesinde ikon kucultulse de kalinlik
   degismiyor (onceki 0,9 birimlik deger 20 px'lik kutuda 0,75 px'e
   dusuyordu). Renk zaten .uliste i uzerinden --mavi-koyu. */
.uliste svg{width:100%;height:100%;display:block;
  vector-effect:non-scaling-stroke;stroke-width:var(--cizgi)}
.uliste svg *{vector-effect:non-scaling-stroke}
/* Kendi setimizden gelen ikon dolu form: kontur receteside ona
   uygulanmiyor (bkz. ikonlar.py). */
.uliste .dolu svg{fill:currentColor;stroke:none}
.uliste b{display:block;font-weight:var(--ag-baslik);line-height:1.25;
  font-size:var(--m4);text-transform:uppercase}
.uliste span{display:block;line-height:1.35;font-size:var(--m5);
  margin-top:calc(4*100cqw/var(--AW))}

.ustat{display:grid;grid-template-columns:repeat(3,1fr);
  border:var(--cizgi) solid var(--mavi-koyu);margin-top:calc(16*100cqw/var(--AW))}
.ustat div{text-align:center;padding:calc(18*100cqw/var(--AW)) calc(8*100cqw/var(--AW))}
.ustat div+div{border-left:var(--cizgi) solid var(--mavi-koyu)}
.ustat b{display:block;font-weight:var(--ag-ince);line-height:1;
  font-size:var(--m2)}
.ustat span{display:block;text-transform:uppercase;line-height:1.2;opacity:.75;
  font-size:var(--m5);margin-top:calc(7*100cqw/var(--AW))}

/* --- alt: yorumlar + video, benzer urunler --- */
.alt{display:grid;grid-template-columns:1.17fr 1fr;
  gap:calc(62*100cqw/var(--AW));margin-top:calc(66*100cqw/var(--AW));
  align-items:start}
.urun2 h2{margin:0 0 calc(18*100cqw/var(--AW));font-weight:var(--ag-baslik);
  text-transform:uppercase;font-size:var(--m3)}
.urun2 h2.ikinci{margin-top:calc(44*100cqw/var(--AW))}
.ukartlar{display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(20*100cqw/var(--AW))}
.ukart{margin:0;border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  padding:calc(14*100cqw/var(--AW));display:flex;flex-direction:column;
  gap:calc(8*100cqw/var(--AW));text-decoration:none;color:inherit;
  transition:border-color .3s,transform .3s}
.ukart:hover{border-color:var(--mavi-acik);transform:translateY(-6px)}
.ukart .ph{display:block;aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.ukart img,.ukart video{width:100%;height:100%;object-fit:cover;display:block}
/* Gulbin, 21 Eylul: gorsel kareyi tam doldursun. */
.ukart.urun img{width:100%;height:100%;object-fit:contain}
.ukart .uno{font-size:var(--m5);opacity:.55}
.ukart .yy{font-size:var(--m5);letter-spacing:.1em}
.ukart b{font-weight:var(--ag-baslik);text-transform:uppercase;line-height:1.2;
  font-size:var(--m4)}
.ukart p{margin:0;line-height:1.45;opacity:.72;font-size:var(--m5)}
.ukart .pr{font-size:var(--m4)}
/* Gulbin, 17 Eylul: "buradaki gibi olsun kartlar." Ana sayfada kart
   fiyati --m5; urun sayfasinda --m4 kaliyordu, 13,4 yerine 19,7
   cikiyordu. */
.pcard .pr{font-size:var(--m5)}
/* Ok dolu form (Gulbin'in ikon seti), kontur eklenmiyor. */
.ukart .arw2{margin-top:auto;width:calc(16*100cqw/var(--AW));height:auto;
  fill:currentColor;stroke:none}

.uvideo{position:relative;display:block;border:var(--cizgi) solid var(--mavi-koyu);
  background:var(--beyaz);padding:calc(14*100cqw/var(--AW));text-decoration:none}
.uvideo .ph{display:block;aspect-ratio:16/9;overflow:hidden}
.uvideo img,.uvideo video{width:100%;height:100%;object-fit:cover;display:block}
.uoynat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(62*100cqw/var(--AW));height:calc(62*100cqw/var(--AW));
  border:var(--cizgi) solid var(--beyaz);border-radius:50%;display:grid;place-items:center;
  color:var(--beyaz);font-size:var(--m3);background:rgba(2,31,54,.45);
  transition:background .25s}
.uvideo:hover .uoynat{background:var(--green);color:var(--mavi-koyu);border-color:var(--green)}

/* ---- ONERILEN URUN KARTLARI ----
   Gulbin, 16 Eylul: "ilginizi cekebilir yesil olmus ne alaka? basliklar
   aciklamalar buradaki gibi olsun mobil anasayfa."
   .pcard'in kendi rengi ana sayfadaki KOYU bant icin yazilmis: orada
   baslik ve cerceve yesil. Urun sayfasinin zemini beyaz; beyaz zeminde
   yesil yazi olmayacak (Gulbin'in kurali). Kategori sayfasindaki .S2.lite
   kapsayicisi burada yok, o yuzden ayni donusum acikca yaziliyor. */
.urun2 .pcard{border-color:var(--mavi-koyu)}
.urun2 .pcard h3,.urun2 .pcard p,.urun2 .pcard .pr,
.urun2 .pcard .num,.urun2 .pcard .birim,.urun2 .pcard .krz{color:var(--mavi-koyu)}
.urun2 .pcard .arw2{fill:var(--mavi-koyu)}
.urun2 .pcard:hover{border-color:var(--mavi-acik)}

/* ---- DURUM ISIGI ----
   Urun kartlarindaki yesil kare. Gulbin: "urun kartlarindaki yanip sonen
   isigi getir." Iki yerde kullaniliyor: urun fotografinin ustundeki
   "3 gunde teslim" rozeti ve "3 gunde kargoda" satiri. Kare, sitenin
   kose diliyle ayni; 2,4 sn'lik yumusak nefes, sert yanip sonme degil. */
.usisik{display:inline-flex;align-items:center;gap:var(--r1)}
.usisik::before{content:"";flex:0 0 7px;width:7px;height:7px;
  background:var(--green);animation:krzyan 2.4s ease-in-out infinite}
@keyframes krzyan{0%,100%{opacity:1}50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){.usisik::before{animation:none}}

/* ---- SOLUK YAZI YOK ----
   Gulbin'in kurali: "butun yazilar koyu mavi olmali, opakligi dusurup
   rengi degistirip durma." 16 Eylul: "aciklamalar da koyu mavimiz
   olacak." Olculdu, dort yerde opaklik kalmisti:
     .uozet .80 · "/ adet" .70 · akordeon metni .85 · yorum metni .72
   Ayrim artik puntoda, renkte degil. */
.urun2 .uozet,.urun2 .uicerik p,.urun2 .ukart p,
.urun2 .ufbas span,.urun2 .utaksitnot{opacity:1}

/* --- akordeon --- */
.uakor{margin-top:calc(60*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu)}
.uakor details+details{border-top:var(--cizgi) solid var(--mavi-koyu)}
.uakor summary{list-style:none;cursor:pointer;text-transform:uppercase;
  font-size:var(--m3);
  padding:calc(20*100cqw/var(--AW)) calc(26*100cqw/var(--AW));
  display:flex;align-items:center;justify-content:space-between}
.uakor summary::-webkit-details-marker{display:none}
.uakor summary::after{content:"+";line-height:1}
.uakor details[open] summary::after{content:"–"}
.uicerik{padding:0 calc(26*100cqw/var(--AW)) calc(22*100cqw/var(--AW))}
.uicerik p{margin:0;line-height:1.6;opacity:.85;font-size:var(--m4)}
/* ---- TAKSIT TABLOSU ----
   POS entegratorunun dolduracagi alan. Satirlar sitenin sac teli
   cizgisiyle ayriliyor, ayri bir kutu dili kurulmuyor. */
.utaksit{width:100%;border-collapse:collapse;
  margin-bottom:calc(14*100cqw/var(--AW))}
.utaksit tr+tr{border-top:var(--cizgi) solid var(--mavi-koyu)}
.utaksit th,.utaksit td{padding:calc(12*100cqw/var(--AW)) 0;
  font-weight:var(--ag-ince);font-size:var(--m4);text-align:left;
  font-variant-numeric:tabular-nums}
.utaksit th{white-space:nowrap}
.utaksit td b{font-weight:var(--ag-baslik)}
.utaksit .utop{text-align:right;white-space:nowrap}
.utaksitnot{opacity:1!important;font-size:var(--m5)!important;
  line-height:1.4!important}

/* mobilde ekranin altinda sabit satin alma cubugu: sayfa uzun,
   fiyat ve buton her an elde olsun */
.ucubuk{display:none}
@media(max-width:820px){
  .ukkutu{flex:0 0 34px;width:34px;height:34px}
  .ukkutu svg{width:17px;height:17px}
  .uksatir{gap:var(--r1)}
  .ukyazi{font-size:var(--f5);margin-top:var(--r12)}
  .urun2{margin-top:22vw;padding:6vw 6vw 26vw}
  .usayac input{min-height:44px}
  .ucubuk[hidden]{display:none}
  .ucubuk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:var(--r2);
    padding:var(--r1) var(--yan) calc(var(--r1) + env(safe-area-inset-bottom));
    background:var(--beyaz);border-top:var(--cizgi) solid var(--mavi-koyu);
    /* Gulbin, 16 Eylul: "alttaki sticky golgesi ustteki header
       golgesiyle ayni olsun." Basligin golgesi (sayfa.py, .hd):
       0 10px 26px -20px rgba(3,28,39,.45). Ayni deger, yonu ters. */
    box-shadow:0 -10px 26px -20px rgba(3,28,39,.45)}
  /* Ustte birim fiyat, altinda adet ve toplam (Gulbin'in ornegi).
     Gulbin, 16 Eylul: "niye paragraf yaptin, yanyana yapsana, gereksiz
     uzatmissin." Metin blogu 65 px'e sikisip "22 adet . 176 TL" iki
     satira kiriliyordu; blok esneyebilir oldu, satirlar kirilmiyor. */
  /* DOGRUDAN COCUK: ".ucubuk span" yazinca satirin ICINDEKI
     <span id="ucubukadet"> de bu kurala giriyor, dikey flex kutuya
     donuyor ve "22 adet . 176 TL" alt alta kiriliyordu. Gulbin:
     "22 adet 176 tl yan yana yazsin entersiz." */
  .ucubuk>span{display:flex;flex-direction:column;gap:var(--r0);
    flex:1 1 auto;min-width:0;line-height:1.15;color:var(--mavi-koyu)}
  .ucubuk>span>b,.ucubuk>span>i{white-space:nowrap}
  .ucubuk>span>b{font-weight:var(--ag-baslik);font-size:var(--f3);
    font-variant-numeric:tabular-nums}
  .ucubuk>span>b em{font-style:normal;font-size:var(--f4)}
  .ucubuk>span>i{font-style:normal;font-size:var(--f5);opacity:1;
    font-variant-numeric:tabular-nums}
  .ucubuk .uekle{flex:0 0 auto;min-height:44px;padding:0 var(--r2)}
  .ust,.alt{grid-template-columns:1fr;gap:7vw}
  .ubaslik{font-size:8.4vw}.uozet{font-size:4vw}
  /* Gulbin, 16 Eylul: "aciklama biraz daha asagiya kaysin, yildiz ve
     baslik arasindaki bosluk kadar bosluk olsun." Iki bosluk da
     var(--r1): baslik -> yildiz ve yildiz -> aciklama. */
  .upuan{margin-top:var(--r1);gap:var(--r1)}
  .uozet{margin-top:var(--r1)!important}
  /* Gulbin, 16 Eylul: "4,9 81 degerlendirme, 4,9 boyutunda ve
     renginde olsun." Degerlendirme sayisi puanla ayni punto ve renk;
     solukluk kalkti. */
  .upuan .yy{font-size:var(--f5)}
  .upuan b,.upuan .usay{font-size:var(--f4);opacity:1;
    color:var(--mavi-koyu)}
  .ufiyat{margin-top:var(--r3);gap:var(--r2)}
  .ufbas{gap:var(--r1)}
  .ufbas b{font-size:var(--f0)}.ufbas span{font-size:var(--f4)}
  .ufbas s{font-size:var(--f4)}
  .uind{font-size:var(--f5)}

  .ufsag{gap:var(--r0)}
  .uftop,.ufkdv{font-size:var(--f5)}
  /* Gulbin, 16 Eylul: "drop basliklari da biraz yukarida olsun cok
     dipdibe." Etiketin alt boslugu tuval birimiyle yaziliydi (7 birim),
     mobilde 1,4 px'e dusuyordu: yazi kutunun tepesine yapisiyordu.
     Bosluk merdivene baglandi. */
  /* Gulbin, 16 Eylul: "drop basliklari daha buyuk olmali, filtrelerin
     basliklari gibi olabilir mesela." Kategori sayfasindaki .ktgbas
     olculdu: 17 px / 500 / buyuk harf. Ayni degerler.
     mobil.css'teki TEK ETIKET STILI bu etiketleri 11 px / 300'e
     sabitliyor ve urun2.css'ten sonra yukleniyor; bu yuzden .urun2 ile
     ozellesti. */
  /* Gulbin, 16 Eylul: "ve koyu mavi." Renk zaten --mavi-koyu idi ama
     taban kuraldaki .75 opaklik soluk gosteriyordu; opaklik kalkti. */
  /* Gulbin, 16 Eylul: "hazir urunler e ticaret urunleri koyu mavi
     olsun, altindaki bosluk biraz artsin." Kirinti yolu .7 opaklikla
     soluk duruyordu; alt boslugu da tuval birimiyle yazili oldugu icin
     mobilde 5 px'e dusuyordu. */
  .urun2 .ukirinti{opacity:1;margin-bottom:var(--r2)}
  .urun2 .ukirinti a{color:var(--mavi-koyu)}

  .urun2 .usec>span{font-size:var(--f3)!important;
    font-weight:var(--ag-baslik)!important;margin-bottom:var(--r1);
    opacity:1;color:var(--mavi-koyu)}
  .usec select{font-size:4vw;padding:3.4vw}
  /* Gulbin, 16 Eylul: "drop metinleri aciklama ile ayni olsun boyut
     olarak." Acilir listeler 16 px idi (--acilir-punto), urun aciklamasi
     13 px (--f4). Ikisi esitlendi; kutu yuksekligi degismiyor. */
  /* Gulbin, 16 Eylul: "olcu adet renk droplarina genel bir drop alani
     olarak bak, ustteki boslukla alttaki bosluk esit degil, alttaki
     bosluk uste de uygulansin." Olculdu: ustte 16, altta 24. Uc drop
     tek blok sayiliyor; blogun ust boslugu alttakiyle esitlendi.
     Droplarin kendi aralarindaki 16 px degismedi. */
  .urun2 .usec:first-of-type{margin-top:var(--r3)!important}

  .urun2 .usec .acilir-dugme,
  .urun2 .usec .acilir-dugme .ad,
  .urun2 .usec .acilir-liste li{font-size:var(--f4)!important}
  /* Gulbin, 16 Eylul: "drop metinleri cok sola kaymis biraz saga
     kaysin." Mobil kural dugmeye 8 px yan dolgu veriyordu, jetonun
     kendi degeri 16 (--acilir-dolgu). Dugme ve liste ayni hizaya
     geldi. */
  .urun2 .usec .acilir-dugme{padding:0 var(--r2)!important}
  .urun2 .usec .acilir-liste li{padding-left:var(--r2);padding-right:var(--r2)}
  /* Sayac: 32vw = 120 px'te iki dokunma dugmesi (44+44) sayiya 32 px
     birakiyordu, rakam kutuya sikisiyordu. Genislik artik icerige bagli.
     Gulbin, 16 Eylul: "quantity daha kisa olabilir bence." Sayi kutusu
     dokunma tabaniyla ayni olcuye indi: 44+44+44 = 132 px, "Sepete ekle"
     dugmesine 195 px kaliyor. */
  .usayac{flex:0 0 auto}
  .usayac input{min-width:44px}
  .usayac button{font-size:4.6vw;line-height:12vw}
  /* Gulbin, 16 Eylul: "sepete ekle yazinin boyutu quantity 22 boyutu
     kadar olsun." Sayac rakami 17 px (--f3); buton 13 px idi. */
  .usayac input{font-size:4vw}
  .urun2 .uekle{font-size:var(--f3)!important}
  /* ---- GUVEN LISTESI (mobil) ----
     Ikili izgara dar ekranda tek sutuna iniyor: 375 px'te iki sutun
     kalsa her hucreye 150 px kaliyor, "Olcusu belli, fiyati belli"
     dort satira kiriliyordu. */
  /* Taban aralik cqw ile yazili; mobilde 24 birim 4,6 px'e dusuyor,
     satirlar birbirine yapisiyordu. Gulbin: "araliklari acik olsun
     biraz." Aralik --r merdivenine baglandi. */
  /* Ust bosluk da cqw ile yaziliydi, mobilde 3 px'e dusup kargo
     kutusuyla dip dibe kaliyordu. Gulbin: "alani biraz asagiya kaysin,
     ucretsiz kargoyla dipdibe." Ayni sayfadaki .ukargo ile ayni deger. */
  /* Gulbin, 16 Eylul: "urun detayi ve taksit ustundeki bosluk cok,
     diger bosluklara gore hizala." mobil.css akordeona 48 px ust
     bosluk veriyordu; sayfadaki diger bloklar arasi 24 (--r3). */
  .urun2 .uakor{margin-top:var(--r3)!important}

  /* Gulbin, 16 Eylul: once "yataydan ortalansin" dedim diye blogu
     kutunun ortasina almistim; "dikey ortalamissin, sola hizala yine"
     dedi. Maddeler sola yasli; ortalanan sey IKON: iki satirlik
     metnin dikey ortasina geliyor (asagida align-items:center). */
  .uliste{grid-template-columns:1fr;padding:var(--r2);gap:var(--r2);
    margin-top:var(--r3)}
  .uliste>div{gap:var(--r12)}
  .uliste i{width:20px;height:20px}
  .uliste b{font-size:var(--f4)}
  .uliste span{font-size:var(--f5)}
  /* Durum isigi kartlardakiyle ayni: yesil kare, nefes alir gibi yanip
     soner. Kural tabanda (asagida), burada yalniz konum. */
  /* Gulbin, 16 Eylul: "renk olcu adet basliklarinin kalinligi boyutunu
     urun yorumlari, ilginizi cekebilir ve neler yaptika uygula, onlar da
     parantezli olsun." Etiketlerle ayni recete: 17 px / 500 / buyuk harf.
     mobil.css bu basliklari 11 px / 300'e sabitliyor ve urun2.css'ten
     sonra yukleniyor, o yuzden .urun2 ile ozellesti. */
  .urun2 .alt h2,.urun2 .alt h2.ikinci,.urun2 h2{
    font-size:var(--f3)!important;font-weight:var(--ag-baslik)!important;
    color:var(--mavi-koyu)}
  /* Gulbin, 16 Eylul: once "uste daha yakin" dedim diye ust boslugu
     sifirlamistim, "basliklar yukariya kaymis asagiya kaymali,
     bosluklari hizala" dedi. Her basligin ustundeki ve altindaki
     bosluk ayni: 24 / 24. Seritlerin kendi negatif ust-alt kenarlari
     (kart kalkinca kirpilmasin diye) bu hesaba katildi. */
  /* Gulbin, 16 Eylul: "basliklar alttaki devamina yaklassin biraz
     daha, altindaki bosluk cok." Alt bosluk 16 -> 0; seritlerin kendi
     ust dolgusu (24) zaten nefes birakiyor. Ust bosluk 24'te kaldi. */
  .urun2 .alt h2,.urun2 .alt h2.ikinci{
    margin-top:var(--r3)!important;margin-bottom:0!important}
  .urun2 .alt{gap:var(--r2)!important}
  /* Serit kartlari egik; kutunun ust kenari kartin gorunur ucundan
     once basliyor. Diger iki basligin alt boslugu 16 px goruunurken
     burada 9 kaliyordu, dolgu 24'e cikti. */
  .urun2 .wsr{margin-top:0;padding-top:var(--r3)}
  /* Kart araligi tuval birimiyle yazili; .urun2 kendi kapsayicisi
     oldugu icin burada 6 px'e dusuyor ve egik kartlar birbirine
     giriyordu. Ana sayfada olculen deger 21 px, en yakin jeton --r3. */
  .urun2 .wak{gap:var(--r3);
    /* Olculen mesafeyle kayan kendi donusu; -%50 bosluklari
       saymadigi icin her turda geri tepiyordu (bkz. urun2.js). */
    animation-name:uwakay}
  @keyframes uwakay{from{transform:translateX(0)}
    to{transform:translateX(calc(-1 * var(--kay,50%)))}}
  /* .ukartlar ve bolum basliklarinin mobil sahibi mobil.css */
  /* Gulbin, 16 Eylul: "urun ustundeki rozetler masallah at kadar."
     Olculdu: iki rozet 120x56, 335 px'lik urun fotografinin ustunde
     yan yana 112 px yer kapliyordu. Sabit kutu kalkti; rozet artik
     yazisi kadar. Ikisi tek sutun, aralarindaki bosluk sabit; elle
     ust degeri hesaplanmiyor. */
  /* Sarmal masaustunde oldugu gibi display:contents kaliyor; rozetin
     kendisi konumlaniyor. (Once sarmala position:absolute vermistim:
     display:contents kutuyu yok ettigi icin konum hic islemiyor,
     rozet gorselin ortasina dusuyordu.)
     mobil.css rozete cerceve ve 48 px kutu veriyor; kart rozetinde
     ikisi de yok. */
  /* Rozet satiri cerceveden 8 px iceride (Gulbin: "daha disarida
     olsun").
     Sag taraf ayri: Gulbin "indirim rozeti cok saga kaydi, yanip sonen
     kare ile cerceve arasindaki bosluk kadar olsun" dedi. Iki kutu da
     9 px iceride olmasina ragmen oyle gorunmuyordu, cunku soldaki
     7 px'lik kucuk bir kare, sagdaki 36 px'lik dolu bir blok; ayni
     bosluk blokta daha dar okunuyor. Olcut yaziya cevrildi: soldaki
     yazi cerceveden 24 px iceride basliyor (9 + 7 kare + 8 bosluk),
     sagdaki yazi da 24 px iceride bitsin diye kutunun kendi ic
     dolgusu (.6em) dusuldu. */
  .urozetler{left:var(--r1);right:var(--r2);top:var(--r1);gap:var(--r1)}
  .urozet{width:auto;height:auto;line-height:1.2;
    border:0!important;background:none!important;padding:0!important;
    min-height:0!important}
  /* Gulbin, 16 Eylul: "urun detaylari ve taksit secenekleri koyu mavi
     ve parantezli olsun, iconlu liste baslik boyutunda olsun,
     aciklamalari da iconlu liste aciklamasi boyutunda olsun."
     Liste basligi 13 px / 500 / buyuk harf, aciklamasi 11 px.
     mobil.css akordeon basligini 17 px / 300'e sabitliyor ve
     urun2.css'ten sonra yukleniyor, o yuzden .urun2 ile ozellesti. */
  /* Gulbin, 16 Eylul: "urun detaylari ve taksit seceneklerin artisi ve
     eksisi cerceve kalinliginda olsun." Isaret yazi karakteriydi,
     kalinligi yazi tipinden geliyordu. Artik iki cizgi: her biri
     --cizgi, yani sayfadaki butun cerceveler kadar. Acikken dikey
     cizgi kalkiyor, eksi kaliyor. */
  /* Gulbin, 16 Eylul: "boyutu quantity eksi ve artisindan olsun."
     Olculdu: sayacin "+" glifi 17,25 px puntoda 7,7 x 6,4 px yer
     kapliyor. Isaret 12'den 8'e indi, iki yerdeki artilar ayni
     buyuklukte duruyor. */
  .urun2 .uakor summary::after{content:"";display:block;
    width:8px;height:8px;line-height:0;
    background:
      linear-gradient(var(--mavi-koyu),var(--mavi-koyu)) center/100% var(--cizgi) no-repeat,
      linear-gradient(var(--mavi-koyu),var(--mavi-koyu)) center/var(--cizgi) 100% no-repeat}
  .urun2 .uakor details[open] summary::after{content:"";
    background:linear-gradient(var(--mavi-koyu),var(--mavi-koyu))
      center/100% var(--cizgi) no-repeat}

  .urun2 .uakor summary{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)!important;color:var(--mavi-koyu);
    padding:var(--r2)}
  .uicerik{padding:0 var(--r2) var(--r2)}
  .urun2 .uicerik p,.urun2 .uicerik{font-size:var(--f5)!important}
  .urun2 .utaksit th,.urun2 .utaksit td{padding:var(--r12) 0;
    font-size:var(--f5)!important}
  .utaksit{margin-bottom:var(--r2)}
  .utaksitnot{font-size:var(--f5)!important}

  /* Gulbin, 16 Eylul: "ucretsiz kargoya bla bla kaldi metini biraz
     yukariya ciksin." Kutunun ust dolgusu 16 -> 8; yazi ile cubuk
     arasindaki 2 px de acildi, yazi cubuga yapisik durmuyor.
     (Yazinin alt boslugu tuval birimiyle yazildigi icin mobilde 1,9 px
     oluyordu.) */
  /* Gulbin, 16 Eylul: "ucretsiz kargoya bla bla kaldi metini iconlu
     liste basligi boyutunda kalsin, ona gore tekrar alt ust bosluk
     ver, dipdibe durmasin."
     Metin 11/300 idi, liste basligiyla ayni oldu: 13/500/buyuk harf.
     Buyuyen yaziya gore bosluklar da acildi: ustunde ve altinda 16,
     cubugun altinda da 16 (kutu dolgusu). Uc bosluk esit. */
  .urun2 .ukargo{padding:var(--r2)!important}
  .urun2 .ukargo b{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)!important;margin-bottom:var(--r2)}

  /* ---- GALERI SERIDI ----
     cqw dolgular mobilde cokuyor (bkz. mobil.css'teki ayni not):
     kutular arasi bosluk 4 px'e iniyordu. --r merdivenine baglandi. */
  .ukucukler{gap:var(--r1);margin-top:var(--r1)}
  .ukucuk{padding:var(--r0)}

  /* NELER YAPTIK seridi: ana sayfadaki .wsr/.wak/.wk bileseninin
     aynisi. Ayri kural yazilmiyor, iki sayfa tek yerden yonetiliyor. */

  /* ---- YORUM KLIPLERI ----
     Gulbin, 16 Eylul: "urun yorumlari kartlari biraz daha dikey olsun
     ve video tam sigsin cerceveye." Klipler 300x400, yani 3/4.
     Kutu kare oldugu surece cover kirpiyordu; oran klibin kendi
     oranina esitlendi, goruntu tam oturuyor ve kart dikeylesti. */
  .uyorumlar .ukart .ph{aspect-ratio:3/4}
  /* Gulbin, 16 Eylul: "cerceveye sigacak, bosluk olmayacak." Kartin
     8 px'lik ic dolgusu goruntunun etrafinda bosluk birakiyordu.
     Dolgu kalkti, klip cerceveye yapisti; yazilar kendi dolgusunu
     aldi. Ayni kural "Neler yaptik" kartlarinda da; ana sayfadaki
     .wk'ye dokunulmadi, kurallar .urun2 ile sinirli. */
  .urun2 .uyorumlar .ukart{padding:0!important;gap:0}
  /* Gulbin, 16 Eylul: "kartlarin metinleri hizali degil, dip dibe,
     gerekli bosluklar yok" + "urun kartlari bosluklarini baz
     alabilirsin." Olculdu, .pcard'in ic olculeri:
       yanlar 16 · ust 16 · baslik ile metin arasi 8 · alt 16
     Ayni degerler yorum ve "Neler yaptik" kartlarina uygulandi. */
  .urun2 .uyorumlar .ukart .yy{display:block;
    padding:var(--r2) var(--r2) var(--r1);margin:0}
  .urun2 .uyorumlar .ukart b{display:block;
    padding:0 var(--r2) var(--r1);margin:0}
  .urun2 .uyorumlar .ukart p{display:block;
    padding:0 var(--r2) var(--r2);margin:0}
  .urun2 .wk{padding:0;gap:0}
  /* figcaption'in kendi 16 px ust kenar boslugunu sifirlamistim,
     Gulbin "geri al son yaptigini" dedi; kenar boslugu geri geldi. */
  .urun2 .wk figcaption{display:block;padding:var(--r2)}
  /* Gulbin, 16 Eylul: "ikisinde de baslik altinda olacak aciklamalari
     yaninda degil." figcaption'i blok yapinca ic ogeler satir ici
     kaldi, marka ile aciklama yan yana akiyordu. Ikisi de blok. */
  .urun2 .wk figcaption b,.urun2 .wk figcaption span{display:block}
  /* Marka ile aciklama arasi .pcard'daki baslik-metin araligiyla ayni
     (8). Once 4 idi ve satir kutulari cakisip -4'e dusuyordu. */
  .urun2 .wk figcaption b{margin:0 0 var(--r1)}
  .urun2 .wk figcaption span{margin:0}
  /* Gulbin, 16 Eylul: "kartlarda basliklar ayni yerden baslayacak,
     aciklama da tek satir olacak, sekil bozulmasin yani."
     Olculdu: aciklama kiminde 1 kiminde 2 satirdi; serit flex oldugu
     icin kartlar en uzuna gore uzuyor, fazladan satir gorseli
     sikistirip marka adini 16 px asagi kaydiriyordu (325 / 341).
     Aciklama tek satira kirpildi: butun kartlarin yazi blogu ayni
     yukseklikte, gorsel orani bozulmuyor, basliklar ayni hizada.
     Gulbin: "urun yorumlari icin yaptigin son degisikligi geri al" —
     kirpma yalniz "Neler yaptik" seridinde, yorum kartlarinin metni
     eskisi gibi tam duruyor. */
  .urun2 .wk figcaption span{display:-webkit-box;-webkit-line-clamp:1;
    -webkit-box-orient:vertical;overflow:hidden}
  /* "Neler yaptik baslik ve aciklama boyutunu uygula yorumlara":
     marka 17/500, aciklama 11/300. Yorum kartinin basligi 11 idi.
     mobil.css yorum kartina 11 px dayatiyor, o yuzden !important. */
  .urun2 .uyorumlar .ukart b{font-size:var(--f3)!important;
    font-weight:var(--ag-baslik)!important;line-height:1.25}
  .urun2 .uyorumlar .ukart p{font-size:var(--f5)!important;
    line-height:1.4}
  /* "Aciklama alanlarini biraz uzat" deyince dort satirlik sabit yer
     ayirmistim; metinler bir-iki satir oldugu icin altta kocaman
     bosluk kaldi ("gereksiz bosluk koydun simdi de"). Sabit yukseklik
     kalkti, alan metin kadar. */
  .uyorumlar .ukart video{width:100%;height:100%;object-fit:cover;display:block}

  /* Gulbin, 16 Eylul: "urun yorumlari da kartlar gibi kaydirmali olsun."
     Serit olculeri urun karti seridiyle birebir: kart %76, ilk kart sayfa
     hizasindan basliyor, serit ekran kenarina kadar uzuyor. Uc kartin
     tam sigdigi dar duzen kalkti. */
  .urun2 .uyorumlar{gap:var(--r2)!important;
    margin:calc(var(--r2) - var(--r3)) calc(-1*var(--yan)) calc(-1*var(--r3))!important;
    padding:var(--r3) var(--yan) var(--r3)!important;
    scroll-padding-left:var(--yan)}
  .urun2 .uyorumlar>*{flex:0 0 76%!important}
}

/* ---- MASAUSTU OLCEGI ----
   Gulbin, 17 Eylul: "olcekler sacmaliyor, mobilde gordugum gibi
   gelmeli buraya da."
   Sistemin punto merdiveni 1724 px'lik SAYFA tuvaline gore, yani
   ekran genisledikce buyuyup daraldikca kuculuyor; urun sayfalarinin
   bilesenleri ise mobilde sabit punto merdiveni (34/26/20/17/13/11)
   uzerine kuruldu ve oradaki hali onaylandi. Masaustunde ayni tasarim
   tuvale bolununce etiketler 9,6 px'e dusuyordu.
   Bu blok urun sayfalarinin ICINDE merdiveni mobildekine baglar:
   masaustunde de ayni puntolar cikar. Header, footer ve ana sayfa
   kendi kapsayicilari, onlara dokunulmuyor. */
@media(min-width:821px){
  main.urun2{
    --m0:var(--f0);   /* 34 */
    --m1:var(--f0);   /* 34: fiyat */
    /* Gulbin, 17 Eylul: "baslik biraz kucuk geldi gozume."
       Merdivende bir ust basamak: 26 > 34. Ara deger uydurulmadi,
       jeton merdiveninin kendi basamagi kullanildi. */
    --m2:var(--f0);   /* 34: urun basligi */
    --m3:var(--f3);   /* 17: kart basligi, buton */
    --m4:var(--f4);   /* 13: govde */
    --m5:var(--f5);   /* 11: etiket, rozet */
  }
}

/* Merdiven esitlendikten sonra kalan tekil farklar: asagidaki
   ogelerin masaustu ve mobil kurallari ayri yazilmisti, degerleri
   tutmuyordu. Hepsi mobilde onaylanan degere cekildi. Olculdu:
   sayfa (1315) ve telefon (375) genisliginde ayni punto. */
@media(min-width:821px){
  .urun2 .ukirinti a{font-size:var(--f5)}
  .urun2 .upuan .usay{font-size:var(--f4)}
  .urun2 .usec>span{font-size:var(--f3);
    font-weight:var(--ag-baslik);margin-bottom:var(--r1);
    opacity:1;color:var(--mavi-koyu)}
  .urun2 .usec select{font-size:var(--f3)}
  .urun2 .usec .acilir-dugme,
  .urun2 .usec .acilir-dugme .ad,
  .urun2 .usec .acilir-liste li{font-size:var(--f4)}
  .urun2 .uekle{font-size:var(--f3)}
  /* Gulbin, 17 Eylul: "droplar boldtu." Mobil recetede akordeon
     basligi --ag-baslik (500); masaustu kuralinda yalniz punto
     yazilmisti, agirlik 300'e dusuyordu. */
  .urun2 .uakor summary{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)}
  .urun2 .uicerik p{font-size:var(--f5)}

  /* Gulbin, 17 Eylul: "butonlar droplar dogru olcude mi sence."
     Degildi: yazilar mobil merdivenine cekilmisti ama kutu
     yukseklikleri hala tuval hesabindan geliyordu (buton 23, drop 33).
     17 px yazi 23 px kutuya sigmiyordu. Butun denetimler mobildeki
     parmak olcusune baglandi: 48 px yukseklik, 16 px yan dolgu. */
  .urun2 .uekle{min-height:var(--buton-yuk)}
  .urun2 .usec .acilir-dugme{min-height:var(--buton-yuk);
    padding:0 var(--r2)}
  .urun2 .usec .acilir-liste li{min-height:var(--buton-yuk);
    padding:var(--r12) var(--r2);display:flex;align-items:center}
  .urun2 .usec select{min-height:var(--buton-yuk);padding:0 var(--r2)}
  .urun2 .uakor summary{min-height:var(--buton-yuk);
    padding:var(--r12) var(--r2)}
  .urun2 .uicerik{padding:0 var(--r2) var(--r2)}
  /* Oluk seceneklerindeki kesit resmi: mobildeki olcunun aynisi. */
  .urun2 .acilir-gorsel{width:var(--r4);height:var(--r4)}
  .urun2 .acilir-liste li.acilir-resimli{gap:var(--r1)}

  /* Gulbin, 17 Eylul: "masaustunde galeri sola siralansin."
     Kutucuklar buyuk gorselin ALTINDAN soluna gecti: dar bir dikey
     serit, yaninda gorsel. Sira HTML'de degismiyor, yalniz izgarada
     yer degistiriyorlar; mobilde eski hali (altta yatay serit)
     duruyor. */
  /* Gulbin, 17 Eylul: "onceki gibi 4 gorsel buyuk gorselin alani
     kadar olsun." Serit buyuk gorselle AYNI yukseklikte: dort kutucuk
     ve aralarindaki uc bosluk, gorselin boyunu tam dolduruyor.
     Sutun orani bunun icin cozuldu: gorsel kare oldugundan
     4r + 3*8 = m ve r + 16 + m = alan; sonuc 19,273 / 80,727.
     Boylece kutucuklar da kare cikiyor (127 px). */
  /* Gulbin, 17 Eylul: "bosluklar esit olsun." Kutucuklar arasi ve
     kutucuk-gorsel arasi ayni: --r2. Oran buna gore yeniden cozuldu:
     4r + 3g = m ve r + g + m = alan; g=16 icin 18,545 / 81,455. */
  .urun2 .ugorsel{display:grid;
    grid-template-columns:18.545fr 81.455fr;
    gap:var(--r2);align-items:stretch}
  .urun2 .ugorsel>.ubuyuk{grid-column:2;grid-row:1}
  /* Gulbin, 17 Eylul: "son fotografin alti hizali degil, bosluk
     kaliyor, tam denk gelsin demistim." Serit her zaman gorselin
     boyunu dolduruyor: kutucuklar satirlari esit boluyor. Dort
     kutucukta bu zaten kare veriyor (4r + 3*16 = m); tek gorseli olan
     urunde tek kutucuk uzuyor, ama alt kenarlar birebir hizali
     kaliyor. */
  .urun2 .ukucukler{grid-column:1;grid-row:1;
    grid-template-columns:1fr;grid-auto-rows:1fr;
    gap:var(--r2);height:100%;margin:0}
  .urun2 .ukucuk{aspect-ratio:auto}

  /* Gulbin, 17 Eylul: "urun detaylari kismi urun gorselinin altinda
     olsun." Akordeon artik .ubilgi'nin icinde degil, .ust'un dogrudan
     cocugu: masaustunde gorselin altina, sag sutunun bosalan yerine
     degil SOL sutuna oturuyor. Mobilde DOM sirasi ayni oldugu icin
     gorunum degismiyor (gorsel > bilgi > akordeon). */
  /* Iki satirin ilki KENDI boyunda, ikincisi artani aliyor. Boyle
     olmazsa sag sutun iki satira yayildigi icin ilk satir onun yarisi
     kadar uzuyor ve akordeon gorselden 200 px asagi kaciyordu
     (Gulbin: "cok uzakta kaldi, hizali olsun"). */
  .urun2 .ust{align-items:start;grid-template-rows:auto auto 1fr;
    /* Gulbin, 17 Eylul: "urun detaylari daha yukariya cikmali."
       Satir araligi sutun araligindan bagimsiz: akordeon gorselin
       hemen altina geliyor. */
    /* 69 px cok uzakti, 18 px cok yakin kaldi; ortasi. */
    row-gap:calc(40*100cqw/var(--AW))}
  .urun2 .ust>.ugorsel{grid-column:1;grid-row:1}
  .urun2 .ust>.ubilgi{grid-column:2;grid-row:1/span 2}
  /* Ekstra ust bosluk yok: izgaranin kendi satir araligi yeterli,
     akordeon gorselin hemen altinda duruyor. */
  .urun2 .ust>.uakor{grid-column:1;grid-row:2;margin-top:0}
  /* Gulbin, 17 Eylul: "urun yorumlari da urun detaylari altina
     gelsin." Sol sutunun ucuncu satiri. */
  .urun2 .ust>.uyorumbol{grid-column:1;grid-row:3}
  .urun2 .ust>.ubilgi{grid-row:1/span 3}
  /* .alt'ta tek bolum kaldi, iki sutuna bolunmesin. */
  .urun2 .alt{grid-template-columns:1fr}
  /* Gulbin, 17 Eylul: "neler yaptik ful sayfa olacak, anasayfadaki
     gibi." Serit main'in yan boslugunu asip sayfanin iki kenarina
     yapisiyor; baslik yerinde kaliyor. Deger main'in kendi yan
     dolgusunun (83,6 birim) negatifi, yani ekran genisligi degisse de
     tam kenara oturuyor. */
  /* main'in yan dolgusu kendi TAM genisligine gore hesaplaniyor
     (83,6/1724), serit ise main'in IC genisligini olcuyor; ikisi
     dogrudan esitlenemez. Ic genislige dusen pay cozuldu:
     p = 0,0485*(ic + 2p) -> p = %5,3701 * ic. */
  .urun2 .alt .wsr{margin-left:-5.3701cqw;margin-right:-5.3701cqw;
    width:auto;max-width:none}

  /* Gulbin, 17 Eylul: "tasarim editoru metininin online tasarla
     butonuna uzakligiyla, nakliye metninin sepete ekleye uzakligi
     ayni olsun." Olculdu: 6 ve 12 idi, ikisi de 12'ye cekildi. */
  .ozel .oznot{margin-top:calc(16*100cqw/var(--AW))}

  /* Gulbin, 17 Eylul: "fiyatin ust bosluguyla alt boslugu ayni degil,
     esit olsun, ferah olsun biraz." Olculdu: 18 ve 9 idi. Ikisi de
     32 birime (24 px) cekildi; fiyat blogu iki yandan esit nefes
     aliyor. */
  .urun2 .ufiyat{margin-top:calc(32*100cqw/var(--AW))}
  /* Gulbin, 17 Eylul: "ikonlu liste ust boslugunu ac biraz, hizala."
     12 px'ti; fiyat blogunun araligiyla ayni ritme cekildi. */
  .urun2 .uliste{margin-top:calc(32*100cqw/var(--AW))}
  /* Gulbin, 17 Eylul: "urun yorumlari ve neler yaptik basligi urun
     basligi boyutu ile ayni olsun." Urun basligi masaustunde --f0
     (34 px); bolum basliklari da ayni basamaga cekildi. */
  .urun2 h2,.urun2 .alt h2,.urun2 .alt h2.ikinci{font-size:var(--f0)}
  /* Gulbin, 17 Eylul: "bir sirada 5 tane olacak ilginizi cekebilir."
     + "kaydi": kartlar sutuna sigmayip 70 px sagina tasiyor ve
     komsusunun uzerine biniyordu. Sebep izgara ogelerinin varsayilan
     min-width:auto degeri: icerideki gorselin dogal genisligi kartin
     kuculmesini engelliyordu. Ana sayfada sutun genis oldugu icin
     gorulmuyor; burada bes sutunda ortaya cikti. */
  .urun2 .upgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .urun2 .upgrid>*,
  .urun2 .upgrid .pcard>*{min-width:0}
  .urun2 .upgrid .pcard .ph img{width:100%;height:auto}
  /* Gulbin, 17 Eylul: "buradaki gibi olsun kartlar" (ana sayfadaki
     kendi olcunu tasarla kartlari). Yapi zaten ayniydi, punto
     tutmuyordu: urun sayfasinin merdiveni mobile baglandigi icin
     kartin basligi 19,7 yerine 17, fiyati 13,4 yerine 17 cikiyordu.
     Kartin ICINDE merdiven sistemin kendi degerlerine donuyor;
     boylece ana sayfadaki kartla birebir ayni. */
  /* Gulbin, 17 Eylul: "cerceve mavi oldu, koyu mavi olacak."
     Secili kutucugun cercevesi acik maviye donuyordu; urun
     sayfalarinda cerceve hic degismiyor. */
  .urun2 .ukucuk[aria-current="true"]{border-color:var(--mavi-koyu)}
  /* Gulbin, 17 Eylul: "uzadi yine" > "fotograf yoksa alani olmasin
     ama orasi bos kalsin, olan fotografi uzatma."
     Kutucuklar her zaman kare; eksik yuva icin kutu cizilmiyor,
     serit kisa kaliyor ve altindaki yer bos duruyor. */
  .urun2 .ukucukler{grid-auto-rows:auto;align-content:start;
    height:auto}
  .urun2 .ukucuk{aspect-ratio:1}
  /* Kart fiyati ana sayfadakiyle ayni basamakta; mobil recetesi
     masaustunde de max(17px,--m3) dayattigi icin !important. */
  /* Ana sayfada kart fiyati 13,4 px cikiyor: orada bolumun
     kapsayicisi daha genis oldugu icin ayni jeton daha buyuk
     hesaplaniyor. Urun sayfasinda sutun dar; jeton 9,4'e dusuyordu.
     Taban 13 px ile ana sayfadaki olcuye oturuyor. */
  .urun2 .pcard .pr{font-size:max(13px,var(--m5))!important}
  .urun2 .pcard{
    --m2:calc(40*100cqw/var(--AW));
    --m3:calc(22*100cqw/var(--AW));
    --m4:calc(15*100cqw/var(--AW));
    --m5:calc(13*100cqw/var(--AW))}
  .ozel .oztasarla,.stand .sttasarla{
    margin-top:calc(32*100cqw/var(--AW))}
}

/* ---- NELER YAPTIK SERIDI: DONGU ----
   Gulbin, 17 Eylul: "bos ve bastan basliyor."
   Olculen mesafeyle kayan donus mobil blogunun icinde kalmisti;
   masaustunde ana sayfanin -%50'lik dongusu calisiyordu ve kartlarin
   ARASINDAKI bosluklar sayilmadigi icin her turda geri tepiyordu.
   Kural artik her genislikte gecerli: serit, ilk kopyanin olculen
   uzakligi kadar kayiyor, ek yeri gorunmuyor. */
.urun2 .wak{animation-name:uwakay}
@keyframes uwakay{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--kay,50%)))}}

/* ---- KARGO CUBUGU: ADIMLI (G2) ----
   Gulbin, 21 Eylul: ornek gonderip "kargo bedava barimiz boyle olacak,
   yuvarlak yerine kare tik yaparsin" dedi; ilk denemem tutmadi cunku
   baglanti cizgisi 1 px'ti ve dikey konumu yanlisti (etiketin uzerine
   denk gelip kayboluyordu, iki kare bagimsiz duruyordu).
   Bu hali ornekteki gibi: asagida kesintisiz bir iz var, kareler izin
   UZERINDE oturuyor, tamamlanan bolum koyu mavi, kalani soluk.
   Etiketler izin ustunde, her adim kendi isaretinin hizasinda.
   Cizgi konumu etiketin yuksekligine bagli degil: isaret satirin en
   altinda oldugu icin iz de alttan hizalaniyor (bottom). */
/* ==ILERLEME-BASLA==
   ---- ILERLEME CUBUGU (sitenin her yerinde ayni) ----
   Kaynak: Gulbin'in artboardi, Desktop/WEBSITE/SVG/Artboard 9.svg.
   Olculer oradan birebir alindi, tahmin edilmedi:

     sayi [ 01 ]        26,8 px, Clash Light
     etiket             genis kutuda 12, dar kutuda 9 px
     durum isigi        4,76 x 4,76 kare, etikete 10,88 px mesafe
     sayi -> etiket     taban cizgileri arasi 26,33
     etiket -> cubuk    23,31
     cubuk              11,69 yuksek, ic dolum 3,31 ve her yandan
                        4,19 iceri (solda 4,39)
     cubuk -> alt yazi  31,64

   Artboardda iki boy var (979 ve 484 px kutu); ikisinde de adimlar
   YAN YANA, sayi ve cubuk ayni olcude, yalnizca etiket puntosu
   degisiyor. Genislik sayfaya degil kutuya bagli oldugu icin kap
   sorgusu kullaniliyor; bunun sarti blogun tuval birimi (100cqw)
   tasimamasi, o yuzden butun olculer sabit.
   Renkler artboardda #16222a ve #87be7d; sitenin kendi tokenlari
   kullanildi (--mavi-koyu, --green), yeni renk uretilmedi.
   Dolum orani --dolu ile geliyor (0 ile 1 arasi), JS yaziyor.
   HTML degismedi: .ukno display:contents ile cozuluyor. */
.ukargo{container-type:inline-size}
/* Alt dolgu = cubuk yuksekligi (11,7) + etiketin altindan cubugun
   ustune kalan bosluk (19,6). Olculdu: 17 px iken etiket tabani ile
   iz ustu arasi 9 px cikiyordu, artboardda 23,31 ("hala kayik"). */
/* Gulbin, 28 Eylul: "kargo cubuklari buradaki tasarim gibi olsun. her
   yerde farkli bir tasarim var." + "beyaz alanda da koyu mavi olacak."
   Hedef, acilis bandindaki adim seridi (.syadim): CERCEVELI iz, ortasinda
   ince dolum. Onceki hali dolu bir bloktu. Olculer .syadimlar ile ayni.
   Renk: beyaz zeminde cubugun tamami koyu mavi; yesil yalnizca koyu
   zeminde (hero seridiyle ayni). */
.ukadim{position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;column-gap:var(--r3);
  margin:0;padding:0 0 calc(18px + 8.2px);list-style:none}  /* bekci-muaf: .syadimlar olcusu */
/* cubuk: iz + dolum, listenin altinda tek parca */
.ukadim::before,.ukadim::after{content:'';position:absolute;
  pointer-events:none}
.ukadim::before{left:0;right:0;bottom:0;background:none;
  height:18px;box-sizing:border-box;        /* bekci-muaf: .syadimlar olcusu */
  border:var(--cizgi) solid var(--mavi-koyu)}
.ukadim::after{--ukg:calc((18px - 3.3px) / 2);  /* bekci-muaf: .syadimlar olcusu */
  left:var(--ukg);bottom:var(--ukg);height:3.3px;
  width:calc((100% - var(--ukg) * 2) * var(--dolu,0));
  background:var(--mavi-koyu);
  transition:width .45s cubic-bezier(.2,.8,.25,1)}
/* Koyu zeminde hero seridiyle ayni: cerceve, dolum ve tik yesil.
   Gulbin, 29 Eylul: "burada yesil olmus cizgi mavi calisacaktik."
   Sepet ozeti (.spozet) da bu listeye girmisti ama o beyaz zeminli
   bir kutu; cubuk, dolum ve tik yesil cikiyordu. Beyaz zeminde
   yesil yok, yalnizca koyu zeminde (.sykoyu) kaliyor. Sepette
   sayfanin geri kalani gibi koyu mavi. */
.sykoyu .ukadim::before{border-color:var(--green)}
.sykoyu .ukadim::after{background:var(--green)}
.sykoyu .ukad.tamam .uktik{background:var(--green)}
@media(prefers-reduced-motion:reduce){.ukadim::after{transition:none}}

.ukad{position:relative;min-width:0;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"no no" "ik et";
  align-items:center;
  /* Adimlar ayni satirda esitlenirken uzun olan kisa olani geriyordu;
     artan bosluk satirlara dagilip numarayi yukari itiyor, sayfadan
     sayfaya 3 px oynuyordu. Icerik yukaridan baslar, artan bosluk
     altta kalir. */
  align-content:start;
  column-gap:7.7px;row-gap:8.7px}             /* bekci-muaf: artboard olcusu */
.ukad .ukno{display:contents}
/* Gulbin, 22 Eylul: "01 02'yi sepet kalinliginda ve boyutunda yapar
   misin mini sepette? diger kullanilan yerlere de aynisini uygula."
   Artboardda 26,8 ve ince idi; mini sepetteki [ SEPET ] basligiyla
   ayni olcuye alindi: 17 px ve baslik agirligi. Cubuk uc yerde de
   ayni dosyadan beslendigi icin degisiklik ucune birden gidiyor. */
.ukad .ukno b{grid-area:no;justify-self:start;
  font-size:var(--f3);font-weight:var(--ag-baslik);line-height:1;
  color:var(--mavi-koyu);font-variant-numeric:tabular-nums}
.ukad .ukno b::before{content:"[ "}
.ukad .ukno b::after{content:" ]"}
/* Gulbin, 22 Eylul: "ilk siparis ve ucretsiz kargo metnini de
   'Kutunun icini dolduran ve kapatan malzemeler. Ayni kargoda
   gelir.' gibi yapar misin?" O cumle mini sepetteki .xs .hint:
   11 px, ince, buyuk harf degil, satir araligi 1,4. Etiketler de
   ayni oldu; koseli parantezler kalkti, o cumlede de yok.
   Opaklik tam kaliyor. */
.ukad .ukno span{grid-area:et;justify-self:start;min-width:0;
  font-size:var(--f5);line-height:1.4;text-transform:none;
  font-weight:var(--ag-ince);
  color:var(--mavi-koyu);overflow-wrap:anywhere}
/* Durum isigi: artboarddaki 4,76'lik kare. */
/* Artboardda isigin merkezi etiketin taban cizgisinden 3,86 yukarida;
   satirin tam ortasi 2,06 kaliyordu, 1,8 px yukari aliniyor. */
.ukad .uktik{grid-area:ik;justify-self:start;align-self:center;
  width:4.8px;height:4.8px;margin-bottom:3.6px;  /* bekci-muaf: artboard olcusu */
  border:0;border-radius:0;background:var(--mavi-koyu);
  transition:background .3s}
.ukad.tamam .uktik{background:var(--mavi-koyu);
  animation:ilryan 2.4s ease-in-out infinite}
@keyframes ilryan{0%,100%{opacity:1}50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){
  .ukad.tamam .uktik{animation:none}}
/* Son adim sagdan hizali: isik etiketin sagina geciyor. */
.ukad:last-child{text-align:right;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"no no" "et ik"}
.ukad:last-child .ukno b,.ukad:last-child .ukno span,
.ukad:last-child .uktik{justify-self:end}
/* Gulbin, 22 Eylul: "yazinin opakligi tam olabilir sag tarafta."
   Tamamlanmamis adimin yazisi artik solmuyor; durumu isigin rengi
   ve cubugun dolumu anlatiyor. */
.ukad .ukno b,.ukad .ukno span{opacity:1}

/* Alt yazi. Artboardda cubugun alti ile taban cizgisi arasi 31,64;
   sagda, buyuk harf, koseli parantez icinde.
   Secici "p.ukyazi": mini sepette bu oge .freeb'in icindeki bir <p>
   ve ".cartp .freeb p{margin:0 0 8px;font-size:var(--f5)}" kurali
   daha guclu geliyordu; ust bosluk 31 yerine 10, punto 12 yerine 11
   kaliyordu (Gulbin, 22 Eylul: "sepette kayik hala"). */
.ukargo p.ukyazi{margin:5.2px 0 0;            /* bekci-muaf: cizgiye yakinlik */
  font-size:12px;                             /* bekci-muaf: artboard olcusu */
  line-height:1.4;color:var(--mavi-koyu);text-align:right;
  text-transform:uppercase}
.ukargo p.ukyazi::before{content:"[ "}
.ukargo p.ukyazi::after{content:" ]"}


/* DAR KUTU: artboarddaki ikinci boy. Tek degisen etiket puntosu. */
@container (min-width:560.01px){
  .ukad{column-gap:10.9px}                    /* bekci-muaf: artboard olcusu */
}
@container (max-width:560px){
  /* Etiket puntosu artik her boyda ayni (.xs .hint ile ayni);
     dar kutuda yalnizca sutun araligi kisiliyor. */
  .ukargo p.ukyazi{font-size:9px}             /* bekci-muaf: artboard olcusu */
  .ukadim{column-gap:var(--r12)}
}
/* ==ILERLEME-BITTI== */
/* Mobil icin ayri kural yok: olcuyu kap sorgusu belirliyor,
   cubuk mobilde de artboarddaki dar boya dusuyor. */

/* Varyasyon uyarisi ve kapali sepet dugmesi. Gulbin, 24 Eylul:
   "tamam stokta yok etiketi koyarsin". Yazi rengi koyu mavi, yeni
   renk eklenmedi. */
.uvaruyari{margin:var(--r1) 0 0;font-size:var(--f4);line-height:1.4;
  color:var(--mavi-koyu);opacity:.72}
.uekle[disabled]{opacity:.42;cursor:not-allowed}

/* Renk kutulari. Gulbin, 24 Eylul: "renk varyasyonlarini acikta renk
   kutulari seklinde yapabilir miyiz". Acilir liste sayfada duruyor
   ama gizli; kutular onu suruyor. Cerceve ve secili hali sitenin
   mevcut hairline dilini kullaniyor, yeni renk eklenmedi. */
.usec select.gizli{display:none}
.urenkler{display:flex;flex-wrap:wrap;gap:calc(12*100cqw/var(--AW))}
.urenkk{display:flex;flex-direction:column;align-items:center;
  gap:calc(6*100cqw/var(--AW));padding:0;background:none;border:0;
  font:inherit;color:var(--mavi-koyu);cursor:pointer;
  max-width:calc(86*100cqw/var(--AW))}
.urenkk i{display:block;width:calc(38*100cqw/var(--AW));
  height:calc(38*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);
  box-shadow:inset 0 0 0 calc(3*100cqw/var(--AW)) var(--beyaz);
  transition:box-shadow .18s ease-out,transform .18s ease-out}
.urenkk span{font-size:var(--m5);line-height:1.25;text-align:center;
  opacity:.75}
.urenkk:hover i{transform:scale(1.06)}
.urenkk[aria-pressed="true"] i{
  box-shadow:inset 0 0 0 calc(3*100cqw/var(--AW)) var(--beyaz),
             0 0 0 calc(2*100cqw/var(--AW)) var(--mavi-koyu)}
.urenkk[aria-pressed="true"] span{opacity:1}
.urenkk.yok{cursor:not-allowed}
.urenkk.yok i{opacity:.35}
.urenkk.yok span{opacity:.45;text-decoration:line-through}
@media(max-width:820px){
  .urenkler{gap:var(--r12)}
  .urenkk{max-width:22vw}
  .urenkk i{width:11vw;height:11vw;
    box-shadow:inset 0 0 0 3px var(--beyaz)}
  .urenkk[aria-pressed="true"] i{
    box-shadow:inset 0 0 0 3px var(--beyaz),0 0 0 2px var(--mavi-koyu)}
  .urenkk span{font-size:var(--f5)}
}

/* Gulbin, 25 Eylul: "sayfa kaydi." Serit artik urunun kendi
   galerisinden geliyor; kutucuk sayisi 1'den 5'e cikinca sol sutun
   uzadi, satirin boyunu o belirledi ve kare olan buyuk cerceve o
   boya gore genisleyip sag sutunun uzerine bindi. Serit artik satir
   boyunu hic belirlemiyor: height:0 ile olcuye katilmiyor,
   min-height:100% ile buyuk gorselin boyunu dolduruyor, sigmayan
   kutucuklar kendi icinde kayiyor. */
@media(min-width:821px){
  .urun2 .ukucukler{height:0;min-height:100%;overflow-y:auto;
    scrollbar-width:none}
  .urun2 .ukucukler::-webkit-scrollbar{width:0;height:0}
}

/* Dortten fazla kutucuk seride sigmiyor. Kesilmis kutu bozuk
   duruyordu; artik alt kenarda yumusak bir bitis var ve kaydirma
   kutucugun tam basina oturuyor. Maske renk degil, saydamlik. */
@media(min-width:821px){
  .urun2 .ukucukler{scroll-snap-type:y proximity;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); /* bekci-muaf: maske saydamligi */
    mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)} /* bekci-muaf: maske saydamligi */
  .urun2 .ukucuk{scroll-snap-align:start}
}

/* Talepli urun alanlari. Gulbin, 25 Eylul: "palet ustu koliyi talepli
   urune cevirelim" ve sticker icin "kendi secsin seklini". Fiyatin
   yerinde secim ozeti duruyor; olcu kutulari sekil secimine gore
   gorunuyor. Yeni renk yok, mevcut hairline dili. */
.utalepler{display:block}
.utalepsatir{display:flex;gap:calc(12*100cqw/var(--AW));flex-wrap:wrap}
.utalepalan{flex:1 1 calc(120*100cqw/var(--AW));min-width:0;display:block}
.utalepalan>span{display:block;text-transform:uppercase;opacity:.75;
  font-size:var(--m5);margin-bottom:calc(5*100cqw/var(--AW))}
.utalepalan input{width:100%;font:inherit;font-size:var(--m4);
  color:var(--mavi-koyu);background:var(--beyaz);
  border:var(--cizgi) solid var(--mavi-koyu);border-radius:0;
  padding:calc(14*100cqw/var(--AW)) calc(18*100cqw/var(--AW))}
.utalepalan input:focus{outline:none;border-color:var(--mavi-acik)}
.ufiyat.ozteklif .uftop{font-size:var(--m4);line-height:1.5}
@media(max-width:820px){
  .utalepsatir{gap:var(--r12)}
  .utalepalan{flex:1 1 40vw}
  .utalepalan>span{font-size:var(--f5)}
  .utalepalan input{font-size:4vw;padding:3.4vw}
}

/* Teklif dugmesi <a> olarak basiliyor; sayfadaki genel baglanti
   rengi .uekle'nin yesilini eziyordu ve yazi koyu mavi zeminde koyu
   mavi kaliyordu, yani gorunmuyordu. Gulbin, 25 Eylul: "palet ustu
   talep ala dondu butonlarini duzenle". Recete sepete ekle
   dugmesiyle ayni: koyu mavi akan zemin, marka yesili yazi. */
a.uekle, a.uekle:link, a.uekle:visited, a.uekle:hover{
  color:var(--green);text-decoration:none}
.usepet a.uekle{display:flex;align-items:center;justify-content:center;
  min-height:var(--buton-yuk)}

/* ---- ONERI KARTLARINDA BASLIK YUKSEKLIGI ----
   Gulbin, 28 Eylul: "urun sayfasinda ilginizi cekebilir kartlari bozuk
   mobilde de masaustunde de."
   Sebep: kart izgarasinda aciklama satiri 1fr. Kartlar ayni satirda
   ayni boya cekildigi icin, basligi TEK satir olan kartta artan yer
   aciklamanin altinda buyuk bir boslukta topluyordu; basligi IKI satir
   olan kartta bosluk yoktu. Yan yana durunca kartlar bozuk gorunuyor.
   Baslik iki satira sabitleniyor, boylece bosluk her kartta esit.
   Ayni yontem blog kartlarinda zaten kullaniliyor (build_yazi.py). */
.urun2 .pcard:not(.blogkart)>h3{
  line-height:1.2;
  min-height:calc(2*1.2em);
  align-content:start}

/* ---- URUN YORUMLARI BASLIGININ KONUMU ----
   Gulbin, 28 Eylul: "urun yorumlari basligi ilginizi cekebilir
   boyutunda ve kalinliginda olacak. ayrica konumsal olarak altina ve
   ustune gelen bosluklar da ayni olsun."
   Punto ve kalinlik zaten aynidir (.urun2 h2), alt bosluk da ayni
   (18 birim). Fark UST bosluktaydi: "Ilginizi cekebilir" .alt'in
   icinde ve .alt'in margin-top'u 66 birim; yorumlar bolumu ise
   akordeonun hemen altinda, 36 px ile geliyordu. Yorum bolumune ayni
   66 birimlik ust bosluk veriliyor, iki baslik da ayni nefesle
   basliyor.
   .ust izgarasinin kendi satir araligi zaten 40 birim veriyor;
   ustune 66 eklenince bosluk 96 px'e cikiyordu. Fark kadar, yani
   26 birim ekleniyor: 40 + 26 = 66, "Ilginizi cekebilir" ile ayni. */
.urun2 .uyorumbol{margin-top:calc(26*100cqw/var(--AW))}


/* Alt sayfa basligi masaustunde beyaz ve yapisik. Mobilde bu kural
   YOK: orada ana sayfayla ayni davransin diye mobil.css'in .hd{top:38px}
   kurali gecerli, kaydirinca .hd.on ile beyazlasiyor. Onceden bu kural
   media query disindaydi, dort alt sayfa mobilde ana sayfadan farkli
   goruniyordu. (.hd .duyuru kurali oluydu: sayfalarda .duyuru yok,
   serit .bar sinifinda.) */
@media(min-width:821px){
  .hd{top:0 !important;background:var(--beyaz);color:var(--mavi-koyu);
    box-shadow:0 10px 26px -20px rgba(3,28,39,.45)}
}
.ustpay{height:var(--hdpay,64px)}
/* alt sayfada baslik ustte durdugu icin ilk bolumun tepe payi kisiliyor */
/* .S2'nin overflow:hidden'i yapiskan ozeti kirmiyor gibi gorunuyor ama
   kiriyor: kapsayici kaydirma baglamina donuyor, sticky tutunamiyor.
   Alt sayfalarda tasan sus yok, gorunur birakiyoruz. */
/* sirasi: .ustpay -> .syhero -> bolum. Onceki kardes hero. */
.syhero + section{padding-top:calc(34*100cqw/var(--AW))}
/* .S2'nin overflow:hidden'i yapiskan ozeti kiriyordu */
.syhero + section.S2{overflow:visible}
/* ---- alt sayfalarda ortak parcalar ---- */
.kirinti{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;
  margin:0 0 calc(26*100cqw/var(--AW));
  font-size:var(--m4);color:rgba(2,31,54,.6)}
.kirinti a{color:inherit;text-decoration:none;
  border-bottom:var(--cizgi) solid transparent}
.kirinti a:hover{border-bottom-color:currentColor}
.kirinti b{font-weight:var(--ag-ince);color:var(--mavi-koyu)}
.sptguven{list-style:none;margin:calc(22*100cqw/var(--AW)) 0 0;padding:0;
  display:grid;gap:calc(8*100cqw/var(--AW));
  font-size:var(--m4);color:rgba(2,31,54,.7);text-transform:uppercase}
/* ekranin altinda sabit toplam: eylem her an bir dokunus uzakta */
.sptcubuk{display:none}
@media(max-width:820px){
  .kirinti{font-size:var(--f4);margin-bottom:var(--r2)}
  .sptguven{font-size:var(--f5)}
  .sptcubuk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:var(--r2);
    padding:var(--r1) var(--yan) calc(var(--r1) + env(safe-area-inset-bottom));
    background:var(--beyaz);border-top:var(--cizgi) solid rgba(2,31,54,.25);
    box-shadow:0 -10px 24px -18px rgba(2,31,54,.5)}
  .sptcubuk span{display:flex;flex-direction:column;line-height:1.15}
  .sptcubuk i{font-style:normal;font-size:var(--f5);opacity:.6;text-transform:uppercase}
  .sptcubuk b{font-weight:var(--ag-baslik);font-size:var(--f3);font-variant-numeric:tabular-nums}
  .sptcubuk .cta{padding:.7em 1.1em;font-size:var(--f4);border:0;font:inherit;
    cursor:pointer}
}


/* ---- SIPARIS ADIMLARI ----
   Gulbin, 22 Eylul: "kargo ilerleme cubugundan baz alabilirsin."
   Ayni kalip: ustte koseli parantezli numara ve etiket, altta tek
   parca cubuk. Fark, koyu zemin uzerinde olmasi: iz yesilin %16'si,
   dolum tam yesil. Tamamlanan adimin isigi yesil, icinde bulunulan
   adim ayrica nefes aliyor. Dolum orani --dolu ile geliyor. */
.syadim{margin-top:calc(46*100cqw/var(--AW));position:relative}
/* --syyuk: seridin yuksekligi. Etiketlerle serit arasindaki 8,2'lik
   bosluk sabit kalsin diye alt ic bosluk buna bagli. */
.syadimlar{--syyuk:18px;
  position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;column-gap:var(--r3);
  margin:0;padding:0 0 calc(var(--syyuk) + 8.2px);list-style:none}
.syadimlar::before,.syadimlar::after{content:"";position:absolute;
  pointer-events:none}
/* Gulbin, 22 Eylul: once "cizgisi yesil ilerlemesi koyu mavimiz",
   ardindan "ya da ilerleme cubugu yesil cerceve yesil ilerleme olsun".
   Son karar bu: bos serit yesil cerceve (zemin yok), dolum yesil. */
/* Gulbin, 22 Eylul: "cerceve daha kalin olsun... kalinligi degil ya
   genislik buyukluk olarak." Cizgi kalinligi sac teline dondu, kutu
   11,7'den 18'e buyudu. Dolum Artboard 9'daki 3,3, dikey ortali. */
.syadimlar::before{left:0;right:0;bottom:0;height:var(--syyuk);
  box-sizing:border-box;background:none;
  border:var(--cizgi) solid var(--green)}
/* Gulbin, 22 Eylul: "ilerleme cizgisini sagdan soldan alt ust boslugu
   kalacak sekilde kucult." Dolum artik dort yandan esit boslukla
   iceride: bosluk = (kutu yuksekligi - cizgi) / 2. */
.syadimlar::after{--syg:calc((var(--syyuk) - 3.3px) / 2);
  left:var(--syg);bottom:var(--syg);height:3.3px;
  width:calc((100% - var(--syg) * 2) * var(--dolu,0));
  background:var(--green);
  transition:width .45s cubic-bezier(.2,.8,.25,1);
  /* Gulbin, 22 Eylul: "ilerleme cubugu animasyonlu olsun." Sayfa
     acilirken dolum sifirdan bulundugu adima kadar buyuyor. */
  animation:syakis .9s .15s cubic-bezier(.2,.8,.25,1) both}
@keyframes syakis{from{width:0}}
@media(prefers-reduced-motion:reduce){
  .syadimlar::after{transition:none;animation:none}}
.syad{position:relative;min-width:0;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"no no" "ik et";
  align-items:center;align-content:start;
  column-gap:7.7px;row-gap:8.7px} /* bekci-muaf: Artboard 9 olculeri */
.syad .syno{display:contents}
.syad .syno b{grid-area:no;justify-self:start;font-size:var(--f3);
  font-weight:var(--ag-baslik);line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums}
.syad .syno b::before{content:"[ "}
.syad .syno b::after{content:" ]"}
/* Gulbin, 22 Eylul: once aciklama satiri boyutu denendi, sonra
   "vazgectim, Anasayfa / Sepet / Odeme gibi olsun ilerleme metinleri"
   -> kirinti yoluyla (.sykirinti) ayni: --m4, buyuk harf, ince. */
.syad .syno span{grid-area:et;justify-self:start;min-width:0;
  font-size:var(--m4);line-height:1.4;text-transform:uppercase;
  font-weight:var(--ag-ince);color:var(--green)}
/* Gulbin, 22 Eylul: "yandaki kareler dikdortgen olmus ve yanip
   sonmuyor." Iki ayri hata vardi:
   1) 4,8 px kesirli oldugu icin tarayici kimi satirda 5x4 basiyor,
      kare dikdortgen goruniyordu -> tam piksel 5x5.
   2) ".syad.tamam:last-of-type" kurali son adimin isigini soluga
      ceviyordu; siparis alindi sayfasinda butun adimlar tamam oldugu
      icin yanip sonen isik solugun ustunde kaliyor, gorunmuyordu.
      O kural ve yanindaki gereksiz kardes kurali kalkti; taban kural
      zaten tamamlanmamis adimi soluk birakiyor. */
.syad .sytik{grid-area:ik;justify-self:start;align-self:center;
  width:5px;height:5px;margin-bottom:3.6px; /* bekci-muaf: Artboard 9 */
  background:rgba(97,206,112,.35);transition:background .3s}
.syad.tamam .sytik{background:var(--green)}
/* Icinde bulunulan adim: son "tamam" olan. Isigi nefes aliyor. */
.syadimlar .syad.tamam:has(+ .syad:not(.tamam)) .sytik,
.syadimlar .syad.tamam:last-child .sytik{
  animation:syyan 2.4s ease-in-out infinite}
@keyframes syyan{0%,100%{opacity:1}50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){
  .syadimlar .syad .sytik{animation:none}}
/* Geriye donulebilen adim. Gorunum ayni kalsin diye alti cizili
   degil; yalnizca imlec ve ustune gelince hafif bir vurgu var. */
.syad .sygit{display:contents;color:inherit;text-decoration:none}
.syad .sygit b,.syad .sygit span{cursor:pointer;transition:opacity .2s}
.syad .sygit:hover b,.syad .sygit:hover span,
.syad .sygit:focus-visible b,.syad .sygit:focus-visible span{opacity:.6}
.syad .sygit:focus-visible span{outline:var(--cizgi) solid currentColor;
  outline-offset:3px}
/* Henuz gelinmemis adim soluk. */
.syad:not(.tamam) .syno b,.syad:not(.tamam) .syno span{opacity:.45}
/* Son adim seridin sag ucunda: kargo cubugundaki gibi ici disa
   donuyor, yoksa "Tamamlandi" etiketi sayfanin disina tasiyor. */
.syad:last-child{text-align:right;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"no no" "et ik"}
.syad:last-child .syno b,.syad:last-child .syno span,
.syad:last-child .sytik{justify-self:end}
/* Gulbin, 22 Eylul: "masaustunde 123 siparis ozeti kadar olsun" ->
   adim numaralari alt sayfa bolum basligiyla (.agovde h2, 34) ayni
   punto. Mobil --f3'te kaliyor. */
@media(min-width:821px){
  .syad .syno b{font-size:var(--f0)}
}
@media(max-width:820px){
  /* Gulbin, 22 Eylul: "mobilde gereksiz bosluklar var onlari kaldir."
     Serit bandin ortasinda asili kaliyordu; ozet metnine yaklasti. */
  .syadim{margin-top:var(--r3)}
  .syadimlar{column-gap:var(--r12)}
  /* Kirinti yolu mobilde --f5'e iniyor; etiket de onu izliyor
     ("mobilde de mobil haline gore kucult"). */
  .syad .syno span{font-size:var(--f5);line-height:1.4}
}

/* ---- alt sayfa acilisi ---- */
.syhero{--AW:1724;container-type:inline-size;position:relative;overflow:hidden;
  background:var(--siyah);background-image:var(--bgrad);color:var(--green);
  font-family:Clash,Montserrat,system-ui,sans-serif}
/* Gulbin, 15 Eylul: "'Olcusu belli, fiyati belli...' altindaki bosluk
   'Anasayfa / Hazir urunler' satirinin ustundeki bosluk kadar olsun."
   Olculdu: ust 61,8 px, alt 48,4 px. Alt dolgu ustle ayni jetona
   cekildi (74), iki bosluk esitlendi. */
.syic{padding:calc(74*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW))}
/* Gulbin, 15 Eylul: "Anasayfa / Hazir urunler / [ Hazir urunler ] /
   aciklama: hepsi yesil olacak."
   Kirinti solmus nane (151,222,163 %72), giris %90'di; baslik zaten
   --green. Ucu de tam gucunde marka yesiline alindi, ara ton kalmadi. */
.sykirinti{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;
  font-size:var(--m4);color:var(--green);
  text-transform:uppercase;margin-bottom:calc(26*100cqw/var(--AW))}
.sykirinti a{color:inherit;text-decoration:none;
  border-bottom:var(--cizgi) solid transparent}
.sykirinti a:hover{border-bottom-color:currentColor}
.sykirinti b{font-weight:var(--ag-ince);color:var(--green)}
.sybas{margin:0;font-weight:var(--ag-baslik);line-height:1.04;text-transform:uppercase;
  font-size:var(--m0);max-width:calc(1100*100cqw/var(--AW))}
/* Gulbin, 15 Eylul: "hazir urunler basligi altindaki aciklama biraz
   yukariya kaysin." Baslikla arasi 22'den 11'e indi. */
/* Gulbin, 21 Eylul: "aciklamayi da duzgun hizala sayfaya, alti ustu
   boslugu esit olsun. yazilar da cok kucuk geldi."
   Baslikla arasi 7 px, alt bosluk 45 px idi; ikisi esitlendi ve punto
   tabani verildi (tuval hesabiyla 13,5'e dusuyordu). */
/* Aciklamanin yeri eskisi gibi: Gulbin "aciklamanin onceki yeri
   dogruydu" dedi, esitlenecek olan altindaki METIN blogunun bosluguydu. */
.sylead{margin:calc(18*100cqw/var(--AW)) 0 0;
  max-width:calc(620*100cqw/var(--AW));
  font-weight:var(--ag-ince);line-height:1.55;
  font-size:max(16px,var(--m3));color:var(--green)}
/* Gulbin, 21 Eylul: "su t seklindeki ayar olmasin, cizgiler olmasin
   bu sliderlarda." Bandin ustundeki yatay cizgi ile sayilar arasindaki
   dikey ayirici birlesip T cikartiyordu. Ikisi de kalkti, sayilari
   bosluk ayiriyor. */
.symeta{display:flex;flex-wrap:wrap;margin-top:calc(46*100cqw/var(--AW))}
.symeta div{flex:1 1 0;min-width:calc(180*100cqw/var(--AW));
  padding:calc(20*100cqw/var(--AW)) calc(24*100cqw/var(--AW))
          calc(4*100cqw/var(--AW)) 0}
.symeta div+div{padding-left:calc(24*100cqw/var(--AW))}
.symeta b{display:block;font-weight:var(--ag-ince);line-height:1;
  font-size:var(--m2);font-variant-numeric:tabular-nums}
.symeta span{display:block;margin-top:calc(9*100cqw/var(--AW));
  font-size:var(--m5);text-transform:uppercase;
  color:rgba(151,222,163,.75);line-height:1.3}
/* koyu panel: sepet/odeme ozetleri ve editor fiyat serisi bunu kullanir */
.sykoyu{background:var(--siyah);background-image:var(--bgrad);color:var(--green);
  border:0}
.sykoyu b,.sykoyu dt,.sykoyu dd,.sykoyu span,.sykoyu h3{color:inherit}
/* goruse girince belirme: ana sayfadaki hareketin aynisi */
html.js .sygir{opacity:0;translate:0 18px}
html.js .sygir.gor{opacity:1;translate:0 0;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--sg,0s),
             translate .7s cubic-bezier(.16,1,.3,1) var(--sg,0s)}
@media(prefers-reduced-motion:reduce){html.js .sygir{opacity:1;translate:none}}
@media(max-width:820px){
  .syhero{--AW:820}
  /* Gulbin, 16 Eylul: "renkli alanlardaki yazilar da ortalanmis
     olacak." Telefonda acilisin tamami ortali: kirinti yolu, baslik
     ve giris metni. Masaustunde sola yasli duzen aynen kaliyor. */
  .syic{padding:var(--r4) var(--yan) var(--r4);text-align:center}
  .sykirinti{justify-content:center}
  .sybas,.sylead{text-align:center}
  .sykirinti{font-size:var(--f5);margin-bottom:var(--r2)}
  .sybas{font-size:var(--f0);max-width:none}
  .sylead{font-size:var(--f4);margin-top:var(--r12);max-width:none}
  .symeta{margin-top:var(--r3)}
  .symeta div{min-width:0;flex:1 1 33%;padding:var(--r2) var(--r1) 2px 0}
  .symeta div+div{padding-left:var(--r12)}
  .symeta b{font-size:var(--f3)}
  .symeta span{font-size:var(--f5);margin-top:var(--r0)}
}
/* ---- mobil dokunma ve okunurluk tabani (alt sayfalar) ----
   Parmakla kullanilan her sey en az 44 px; 11 px alti yazi yok;
   sabit alt cubuklarin altinda kalan icerik icin pay biraktik. */
@media(max-width:820px){
  .syhero + section button,
  .syhero + section select,
  .syhero + section .usayac,
  .syhero + section input:not([type=radio]):not([type=checkbox]){min-height:44px}
  .syhero + section .ustat span{font-size:var(--f5)}
  /* Buradaki eski kural (a{min-height:24px}) ozgullugu (0,3,2) ile
     butun buton yuksekliklerini eziyordu: .sptcubuk .uekle 44 yaziyordu
     ama tarayicida 24 cikiyordu. Kalkti; dokunma tabani mobil.css'te
     bilesen bilesen tanimli. */
  .sptcubuk .uekle{min-height:44px;display:flex;align-items:center}
  /* koyu band zaten nefes payini veriyor; icerik hemen altinda baslasin */
  .syhero + section{padding-top:var(--r4)}
}

/* ---- ACILIR LISTE: ISLETIM SISTEMININ DEGIL, BIZIM ----
   Gulbin, 15 Eylul: "sitedeki butun droplar bilgisayar varsayilaninda
   aciliyor, bizim tasarimimiz olmali."
   <select> acilinca listeyi isletim sistemi ciziyor; CSS ile
   bicimlendirilemiyor. Bu yuzden her select kendi kontrolumuzle
   sariliyor: gorunen kisim bizim dugmemiz ve listemiz, ALTTAKI select
   DOM'da kaliyor. Boylece mevcut kodlar (id ile erisim, .value okuma,
   "change" dinleme) hic degismeden calismaya devam ediyor.
   Bicim sitenin kendi dili: kare kose, kil cerceve, koyu mavi yazi,
   secili satir dolu koyu mavi. Ok ikon setinden (ok-asagi). */
.acilir{position:relative;display:block;width:100%}
.acilir>select{position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;pointer-events:none;margin:0}
.acilir-dugme{display:flex;align-items:center;justify-content:space-between;
  gap:.6em;width:100%;border:var(--cizgi) solid var(--mavi-koyu);
  background:var(--beyaz);color:var(--mavi-koyu);font:inherit;
  text-align:left;border-radius:0;padding:calc(10*100cqw/var(--AW,1724))
  calc(14*100cqw/var(--AW,1724));cursor:pointer;line-height:1.2}
.acilir-dugme .ad{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acilir-dugme svg{flex:0 0 auto;width:1em;height:1em;fill:currentColor;
  stroke:none;transition:transform .2s ease}
/* Gulbin, 29 Eylul: "daha acik daha duzenli yapamaz misin?
   ... araliklari esit olsun."
   Form icindeki acilir dugmesi 39 px ve 16 px yaziyla ciziliyordu,
   yanindaki yazi alanlari ise 48 px ve 13 px. Ayni satirda iki ayri
   yukseklik ve iki ayri punto oluyordu: odeme sayfasinda Il, Ilce,
   Ay, Yil hepsi boyle duruyordu. Form icinde acilir artik yazi
   alaninin tam olcusunde. Form disindaki listeler (urun sayfasindaki
   adet ve renk) degismiyor. */
.aform .acilir-dugme{min-height:var(--buton-yuk);
  height:var(--buton-yuk);padding:0 calc(16*100cqw/var(--AW,1724));
  font-size:var(--m4)}
/* Gulbin, 15 Eylul: "ust cizgi acik mavi kalmis." Liste acikken dugme
   cercevesi acik maviye donuyordu; her durumda koyu mavi. */
.acilir.acik .acilir-dugme{border-color:var(--mavi-koyu)}
.acilir.acik .acilir-dugme svg{transform:rotate(180deg)}
/* Gulbin, 16 Eylul: "drop onerilen kutucugunun hemen altindan
   baslamasin, biraz altindan baslasin ve golgesi olmasin."
   Liste dugmenin kenarina yapisiktı (top: %100 eksi bir kil) ve
   golgesi vardi; artik 8 px asagidan basliyor ve golge yok.
   Sayfadan ayrilmasini kendi kil cercevesi sagliyor. */
.acilir-liste{position:absolute;z-index:60;left:0;right:0;
  top:calc(100% + var(--r1));margin:0;padding:0;list-style:none;
  background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  box-shadow:none;
  max-height:min(52vh,320px);overflow:auto;display:none}
.acilir.acik .acilir-liste{display:block}
/* Liste ogeleri dugmeyle ayni harf duzeninde: bolumun text-transform'u
   listeye sizip secenekleri buyuk harfe ceviriyordu, dugmede ise metin
   oldugu gibi duruyordu. */
.acilir-dugme,.acilir-liste li{text-transform:none}
/* Rozetli secenek: solda etiket, sagda rozet. Rozet sitenin mevcut
   recetesi (yesil dolgu, koyu mavi yazi). Ayni rozet kapali dugmede
   de gorunuyor: yazi ile ok arasinda. */
.acilir-dugme:has(.acilir-rozet) .ad{flex:1 1 auto;min-width:0}
.acilir-dugme .acilir-rozet{margin-left:calc(8*100cqw/var(--AW,1724))}
.acilir-liste li:has(.acilir-rozet){display:flex;align-items:center;
  gap:calc(8*100cqw/var(--AW,1724))}
.acilir-liste li .ad{flex:1 1 auto;min-width:0}
.acilir-rozet{flex:0 0 auto;font-style:normal;background:var(--green);
  color:var(--mavi-koyu);font-size:var(--m5);line-height:1;
  padding:.32em .6em;text-transform:uppercase;white-space:nowrap}
.acilir-liste li{padding:calc(10*100cqw/var(--AW,1724))
  calc(14*100cqw/var(--AW,1724));color:var(--mavi-koyu);cursor:pointer;
  line-height:1.25}
.acilir-liste li:hover{background:rgba(2,31,54,.06)}
.acilir-liste li[aria-selected="true"]{background:var(--mavi-koyu);
  color:var(--beyaz)}
.acilir-liste li[aria-disabled="true"]{opacity:.4;cursor:default}
/* Gulbin, 17 Eylul: "oluklara gorsel ekleyelim" > "oluk dropu patladi."
   Resmin olcu kurali yalnizca mobil blogunda kalmisti; masaustunde
   700 px'lik dosya kendi boyunda aciliyor ve listeyi patlatiyordu.
   Olcu artik her genislikte sabit: kare kutu, satira gore ortali. */
.acilir-liste li.acilir-resimli{display:flex;align-items:center;
  gap:calc(10*100cqw/var(--AW,1724))}
.acilir-gorsel{flex:0 0 auto;width:calc(48*100cqw/var(--AW,1724));
  height:calc(48*100cqw/var(--AW,1724));object-fit:contain}
@media(max-width:820px){
  .acilir-dugme{padding:0 var(--r1);min-height:var(--buton-yuk)}
  .aform .acilir-dugme{font-size:var(--f4)}
  /* Gulbin, 17 Eylul: "oluklara gorsel ekleyelim." Resimli satir
     iki parcali: solda kare resim, saginda ad. Resim cerceveye tam
     oturuyor, kendi cercevesi yok (gorselin kendi kosesi var). */
  .acilir-liste li.acilir-resimli{align-items:center}
  .acilir-rozet{font-size:var(--f5)}
  .acilir-liste li:has(.acilir-rozet){gap:var(--r1)}
  .acilir-liste li.acilir-resimli{gap:var(--r1)}
  .acilir-gorsel{width:var(--r4);height:var(--r4)}
  .acilir-liste li{padding:var(--r12) var(--r1);min-height:var(--buton-yuk);
    display:flex;align-items:center}
}
/* ============ URUN SAYFASI ============
   Kompozisyon Artboard 14'ten (iki sutun, kutu oranlari, sira).
   Olcek ana sayfadan: bolum basligi ~60, lead ~21, kart basligi ~19,
   kart metni ~12, rozet ~16, buton ~14 birim (1724 tuvalinde olculdu).
   Tasarimdaki 26,8 birimlik tek punto her yerde kullanilmisti, sayfada
   her sey buyuk duruyordu; rollere gore ayrildi.                        */
.urun2{--AW:1724;container-type:inline-size;
  background:var(--beyaz);color:var(--mavi-koyu);
  margin-top:calc(129.6*100vw/1724);
  padding:calc(46*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW))
          calc(90*100cqw/var(--AW))}
.urun2 a{color:inherit}
.ukirinti{display:flex;gap:.5em;text-transform:uppercase;opacity:.7;
  font-size:var(--m4);margin-bottom:calc(26*100cqw/var(--AW))}
.ukirinti a{text-decoration:none}
.ukirinti a:hover{color:var(--mavi-acik)}

/* --- ust: iki sutun, tasarimdaki oran (806,6 / 689,6) --- */
.ust{display:grid;grid-template-columns:1.17fr 1fr;
  gap:calc(62*100cqw/var(--AW));align-items:start}
/* grid ogesinin asgari genisligi varsayilan olarak icerigin kendi boyutu;
   900 px'lik urun gorseli sol sutunu sisiriyordu */
.ust>*,.alt>*{min-width:0}

.ugorsel{position:relative}
.ubuyuk{position:relative;aspect-ratio:1;display:grid;place-items:center;
  overflow:hidden;background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu)}
/* Gulbin, 29 Eylul: "gorselleri de kirpmissin sacma sapan, urun
   gorseli neyse o koyulsun. disindaki cercevenin icini kaplasin
   tamamen, tum gorsellerden bahsediyorum."
   Gorsel cercevenin bir kismini (%72) kaplayacak sekilde
   kuculuyordu. Artik cerceveyi tam kapliyor; object-fit:contain
   durdugu icin gorselin kendisi hic kirpilmiyor. */
.ubuyuk img{width:100%;height:100%;object-fit:contain}
/* Rozet sarmali yalniz mobilde kutu; masaustunde display:contents ile
   yok sayiliyor, iki rozet eskisi gibi .ubuyuk'e gore konumlaniyor.
   Boylece masaustu yerlesimine hic dokunulmadi. */
/* Rozet satiri: solda durum isigi, sagda indirim yuzdesi. Ikisi ayni
   satirda ve ayni eksende; hizayi flex veriyor, elle ust degeri
   hesaplanmiyor (Gulbin: "fotografin sag kenarinda da olsun, soldaki
   metine hizali"). */
.urozetler{position:absolute;z-index:2;
  left:calc(30*100cqw/var(--AW));right:calc(30*100cqw/var(--AW));
  top:calc(30*100cqw/var(--AW));
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(12*100cqw/var(--AW));pointer-events:none}
/* Kutulu rozet kalkti (bkz. GOVDE'deki not). Durum rozeti urun
   kartlarindakiyle ayni: cercevesiz, yaninda yanip sonen kare. */
.urozet{position:static;border:0;background:none;text-transform:uppercase;
  font-size:var(--m4);line-height:1.25}
.uok{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:0;color:var(--mavi-koyu);cursor:pointer;font:inherit;
  font-size:var(--m3);line-height:1;padding:.3em .5em;
  transition:opacity .2s}
.uok:hover{opacity:.5}
.uok.sol{left:calc(8*100cqw/var(--AW))}
.uok.sag{right:calc(8*100cqw/var(--AW))}
.ukucukler{display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(20*100cqw/var(--AW));margin-top:calc(20*100cqw/var(--AW))}
.ukucuk{aspect-ratio:1;border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  display:grid;place-items:center;cursor:pointer;
  padding:calc(12*100cqw/var(--AW));transition:border-color .25s}
.ukucuk[aria-current="true"]{border-color:var(--mavi-acik)}
.ukucuk img{width:100%;height:100%;object-fit:contain}
/* Bos yuva: gorsel gelince dolacak kutu. Uydurma gorsel konmuyor,
   ayni foto kopyalanmiyor; kutu bos ve soluk cerceveyle duruyor. */
.ukucuk.bos{cursor:default;border-color:rgba(2,31,54,.3)}

/* --- sag sutun --- */
.ubaslik{margin:0;font-weight:var(--ag-baslik);line-height:1.08;text-transform:uppercase;
  font-size:var(--m2)}
/* Puan satiri: basligin hemen altinda yildiz, puan ve degerlendirme
   sayisi. Yildizlar yorum kartlarindakiyle ayni .yy sinifi, boylece iki
   yerde ayni gorunuyor. */
.upuan{display:flex;align-items:baseline;gap:calc(10*100cqw/var(--AW));
  margin:calc(12*100cqw/var(--AW)) 0 0;flex-wrap:wrap}
/* Gulbin, 16 Eylul: "buradaki yesiller bizim yesilimiz mi? degilse
   degistir." Yildizlar Artboard 2'nin #87be7d'siydi, sayfadaki tek
   yabanci yesildi; marka yesiline (#61ce70) alindi.
   Animasyonda uc deneme oldu: soldan saga dolan gecis, sirayla
   belirme, sonra sirayla buyuyen dalga. Gulbin: "urun yorum
   kartlarinda kaydirmada animasyon olmasin" + "yildizlar 3 gunde
   teslim karesi gibi yanip sonsun."
   Artik kartlardaki durum isiginin BIREBIR aynisi: krzyan, 2,4 sn,
   yumusak opaklik gidis gelisi. Yildizlar hep birlikte nefes aliyor,
   sirali gecikme yok, kaydirirken hicbir sey tetiklenmiyor.
   Kare surekli donuyor, bu da oyle: goruse girme sarti kalkti. */
.urun2 .yy{color:var(--green);
  animation:krzyan 2.4s ease-in-out infinite}
.urun2 .yy i{font-style:normal}
@media(prefers-reduced-motion:reduce){
  .urun2 .yy{animation:none}}
.upuan .yy{letter-spacing:.1em;font-size:var(--m4)}
.upuan b{font-weight:var(--ag-ince);font-size:var(--m4)}
.upuan .usay{font-size:var(--m5);opacity:.7;text-transform:uppercase}

/* Fiyat kutusu, "Sepete ekle" satirinin hemen ustunde.
   Duzen Gulbin'in gonderdigi stand sayfasindan: buyuk birim fiyat ve
   "/ adet", altinda secilen adedin toplami, en altta KDV notu.
   Cerceve sitenin sac teli cizgisi, kose yok. */
/* Gulbin, 16 Eylul: "cerceve olmasin" + "22 adet toplami, kdv
   dahildir kismi sag tarafa hizali olsun, 8 tl ye ortalanmis sekilde."
   Kutu kalkti; solda buyuk birim fiyat, sagda iki kucuk satir sagda
   hizali ve fiyatin dikey ortasinda. */
/* Gulbin, 17 Eylul: "f5 olsun." Secenek sayfasindaki F5 duzeni:
   ustte buyuk fiyat + "/ adet", saginda rozet; altta adet toplami ve
   KDV notu yan yana. Onceki hal ikisini YAN YANA koyuyordu, fiyat ve
   toplam ayni satirda yarisiyordu. */
.ufiyat{display:block;margin:calc(24*100cqw/var(--AW)) 0 0}
.ufbas{align-items:baseline}
.uind{margin-left:auto}
.ufsag{flex-direction:row!important;align-items:baseline!important;
  justify-content:space-between!important;text-align:left!important;
  gap:calc(16*100cqw/var(--AW));margin-top:calc(10*100cqw/var(--AW))}
.ufsag .ufkdv{text-align:right}
.ufiyat p{margin:0}
.ufbas{display:flex;align-items:baseline;gap:calc(10*100cqw/var(--AW));
  flex:0 0 auto}
/* Gulbin, 16 Eylul: "fiyat bold olsun." */
.ufbas b{font-weight:var(--ag-baslik);font-size:var(--m1);line-height:1}
/* ---- INDIRIM ----
   Eski fiyat ustu cizili, yaninda yuzde rozeti. Rozet sitenin mevcut
   rozet recetesi: yesil dolgu, koyu mavi yazi (beyaz zeminde yesil
   YAZI yok). Solukluk kullanilmiyor, ayrim cizgide ve puntoda. */
.ufbas s{font-size:var(--m4);text-decoration-thickness:var(--cizgi)}
/* Gulbin, 16 Eylul: "ustune gelsin dedigim yer 5,60 TL'nin TL ust
   kosesi" + "ustune gelsin TL yazisinin". Rozet fiyatin YANINDA degil,
   TL isaretinin ust kosesine BINIYOR. Bu yuzden fiyatin icinde ve
   mutlak konumlu: satirin genisligine hic eklenmiyor, sagdaki toplam
   sutunu daralmiyor. Olculer em cinsinden, punto degisirse rozet de
   ayni yerde kaliyor. */
.ufbas b{position:relative}
/* Gulbin, 16 Eylul: "once / adet olsun sonra %30 olsun, %30 da adete
   hizalansin, ustte degil altta olsun yani." Sira: fiyat, birim,
   rozet. Rozet artik ust hizada degil; .ufbas zaten align-items:
   baseline oldugu icin ayri kural vermeye gerek yok, "adet" ile ayni
   satir cizgisine oturuyor. */
/* Gulbin, 16 Eylul: "%30 bold olmasin eski haline cevir." Rozet
   fiyatin <b> etiketinin icine girince agirligini miras aliyordu. */
.uind{font-style:normal;background:var(--green);color:var(--mavi-koyu);
  font-size:var(--m5);font-weight:var(--ag-ince);line-height:1;
  padding:.32em .6em;text-transform:uppercase;white-space:nowrap}
.ucubuk s{font-size:var(--f5);font-weight:var(--ag-ince);
  text-decoration-thickness:var(--cizgi);margin-right:.4em}
/* "/ adet" once fiyatla ayni kalinliga alinmisti, Gulbin geri istedi:
   ince ve hafif soluk. */
.ufbas span{font-size:var(--m4);opacity:.7}
.ufsag{display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;gap:calc(6*100cqw/var(--AW));min-width:0}
/* Gulbin, 16 Eylul: "22 adet toplami 176 kdv dahildir butun metinler
   ayni kalinlik ve boyutta olsun." Sag bloktaki iki satir tek punto,
   tek agirlik, tek renk: rakamlarin kalinligi ve KDV satirindaki
   solukluk kalkti. */
.uftop,.ufkdv{font-size:var(--m5);font-weight:var(--ag-ince);
  line-height:1.3;opacity:1}
.uftop b,.uftop i{font-style:normal;font-weight:inherit;font-size:inherit;
  font-variant-numeric:tabular-nums}
.uozet{margin:calc(16*100cqw/var(--AW)) 0 calc(30*100cqw/var(--AW));
  line-height:1.55;opacity:.8;font-size:var(--m4)}
.usec{display:block;margin-bottom:calc(16*100cqw/var(--AW))}
.usec>span{display:block;text-transform:uppercase;opacity:.75;
  font-size:var(--m4);margin-bottom:calc(7*100cqw/var(--AW))}
.usec select{width:100%;font:inherit;font-size:var(--m4);
  color:var(--mavi-koyu);background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(14*100cqw/var(--AW)) calc(18*100cqw/var(--AW));
  border-radius:0;appearance:none;cursor:pointer}
.usec select:focus{outline:none;border-color:var(--mavi-acik)}
.usepet{display:flex;gap:calc(14*100cqw/var(--AW));margin-top:calc(24*100cqw/var(--AW))}
.usayac{display:flex;align-items:center;border:var(--cizgi) solid var(--mavi-koyu);
  flex:0 0 calc(140*100cqw/var(--AW))}
.usayac button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;
  font-size:var(--m3);padding:0 calc(12*100cqw/var(--AW));
  line-height:calc(52*100cqw/var(--AW))}
.usayac input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;
  font-size:var(--m4);text-align:center;-moz-appearance:textfield}
.usayac input::-webkit-outer-spin-button,.usayac input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.usayac input:focus{outline:none}
/* TEK BIRINCIL BUTON RECETESI
   Onceden .uekle lacivert, .sptozet .uekle ve .odmozet .uekle yesildi:
   ayni aksiyon ("Odemeye gec") ayni ekranda iki renkte gorunuyordu.
   Birincil aksiyon her yerde yesil dolgu + koyu yazi. Ikincil aksiyon
   .uekle.ince: sac teli yesil cerceve, seffaf zemin. */
/* Artboard 2 (Gulbin, 10 Eylul 14:49): birincil buton KOYU dolgu,
   beyaz yazi. Yesile cevirmistim, tasarim koyu diyor, geri alindi.
   Tekillik su kuralla saglaniyor: birincil her yerde ayni koyu buton,
   ikincil .uekle.ince (sac teli cerceve, seffaf zemin). */
/* Gulbin, 16 Eylul: "sepete ekle butonlari koyu mavi ve acik mavimizin
   gradientinden animasyonlu olsun." Iki marka mavisi arasinda yavas
   gidip gelen bir gecis; sayfada surekli goruldugu icin sakin tutuldu
   (9 sn, tek yonlu kayma degil gidis gelis). Hareket kapaliysa duruyor. */
/* Gulbin, 16 Eylul: "sepete ekle butonundaki dis cerceve olmayacak
   sadece fill." Cerceve kalkti; gradient dolgu tek basina. */
/* Gulbin, 16 Eylul: "sepete ekle butonlarinin yazilari yesil olsun."
   Kontrast uyarisini soyledim (gradientin acik ucunda 3,87:1, 13 px
   yazi icin taban 4,5), karari bu yonde verdi. */
.uekle{flex:1;color:var(--green);font:inherit;border:0;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate;
  font-size:var(--m4);text-transform:uppercase;cursor:pointer;
  transition:border-color .25s}
@keyframes uekleakis{to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.uekle{animation:none}}
.uekle:hover{filter:brightness(1.08)}
/* Ikincil buton yine cerceveli: birincil dolgu, ikincil kontur.
   Cerceve tabanda sifirlandigi icin burada yeniden veriliyor. */
.uekle.ince{background:transparent;color:var(--mavi-koyu);animation:none;
  border:var(--cizgi) solid var(--mavi-koyu)}
.uekle.ince:hover{background:rgba(2,31,54,.07)}
.ukargo{border:var(--cizgi) solid var(--mavi-koyu);text-align:center;
  margin-top:calc(18*100cqw/var(--AW));
  padding:calc(16*100cqw/var(--AW)) calc(20*100cqw/var(--AW))}
/* ---- KARGO RAYI (G1) ----
   Gulbin, 17 Eylul: "g1'i gelistirelim." Ikonlar rayin iki ucunda,
   ayni satirda; aciklama altta tek satir. Kupon kutusu hep dolu,
   kargo kutusu esige varinca doluyor. */
.uksatir{display:flex;align-items:center;gap:calc(12*100cqw/var(--AW))}
.ukkutu{flex:0 0 38px;width:38px;height:38px;box-sizing:border-box;
  display:grid;place-items:center;
  border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  color:var(--mavi-koyu);transition:background .3s,border-color .3s}
.ukkutu svg{width:19px;height:19px;stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke}
.ukkutu i{display:contents}
.ukkutu.tamam{background:var(--green);border-color:var(--green)}
.ukray{position:relative;flex:1;height:14px;box-sizing:border-box;
  border:var(--cizgi) solid var(--mavi-koyu);overflow:hidden}
.ukdolu{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate;
  transition:width .5s cubic-bezier(.2,.8,.25,1)}
@media(prefers-reduced-motion:reduce){
  .ukdolu{animation:none;transition:none}}
/* Kutunun kendi text-align:center'i miras kaliyordu, satir ortalanip
   uc satira boluniyordu. */
/* Gulbin, 22 Eylul: ornekte cubugun altindaki cumle sagda, buyuk
   harf ve koseli parantez icinde. */
/* (alt yazinin stili ILERLEME blogunun icine tasindi) */
/* Eski tasarimda kutunun icindeki <b> blok yapilmisti; cumle her
   kalin parcada satir atliyordu. */
.ukyazi b,.ukyazi em{display:inline!important}
.ukyazi b{font-weight:var(--ag-baslik)}
.ukyazi em{font-style:normal;font-weight:var(--ag-baslik);
  font-variant-numeric:tabular-nums}



/* Ic <b>: tutar ve "kaldi!" (Gulbin, 16 Eylul). Dis <b> blok ve ince;
   ic olan satir ici ve kalin olmali, yoksa kutuyu ikiye boluyor.
   mobil.css'teki tek etiket kurali ".ukargo b" ic <b>'yi de yakalayip
   !important ile inceye cekiyordu; bu yuzden burasi da !important. */
.ukargo b b{display:inline!important;font-weight:var(--ag-baslik)!important}
.ukargo b{display:block;font-weight:var(--ag-ince);text-transform:uppercase;
  font-size:var(--m4);margin-bottom:calc(10*100cqw/var(--AW))}
/* Kargo cubugu: koyu mavi dikdortgen ve icinde elle cekilmis gibi
   cizgi. Cizgi sepet doldukca CIZILIYOR (giristeki cerceve
   animasyonuyla ayni recete: pathLength="1", dasharray 1, dashoffset
   1'den 0'a). Genislik degil uzunluk degistigi icin yerlesim her
   karede yeniden hesaplanmiyor. */
/* Gulbin, 16 Eylul: "alttaki koyu mavi sepete ekle butonu gibi
   gradientli olsun." Zemin artik SVG dikdortgeni degil, cubugun kendi
   arka plani: butonla BIREBIR ayni gecis ve ayni akis. Boylece iki
   yerde tek recete var.
   "Altindaki koyu maviden cikabilir": cizgi zeminin disina tasiyor,
   o yuzden kirpma yok. */
.ubar{display:block;overflow:visible;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,var(--mavi-acik) 50%,
             var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.ubar{animation:none}}
/* Gulbin, 17 Eylul: "kargo cizgisi bozulmus" > "bozuk".
   Once yukseklik sabitlenip genislik serbest birakilmisti
   (preserveAspectRatio="none"); olcek yatay ve dikeyde farkli olunca
   non-scaling-stroke ile kesik deseni (stroke-dasharray) bozuluyor ve
   cizgi parcalara ayriliyordu. Olcek yeniden ESIT: cizim orantisini
   koruyor, kutu da cizimin kendi yuksekligine (18) iniyor, kalan pay
   kirpiliyor. Boylece hem desen dogru hem cizgi kabalasmiyor. */
.ubar{height:18px;overflow:hidden}
.ubar svg{display:block;width:100%;height:auto;overflow:visible}
/* Gulbin, 16 Eylul: "bu ilerleme cizgisinin kalinligi cerceve
   kalinliginda olacak." Once ikon konturuydu (1,5 px), simdi sayfadaki
   butun cerceveler gibi --cizgi.
   Renk: once yesil, sonra acik mavi denendi, Gulbin "cizgi yine yesil
   olsun" dedi; zemin gradient oldugu icin yesil uzerinde duruyor. */
.uyol{fill:none;stroke:var(--green);stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-width:var(--cizgi);
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.25,1)}
@media(prefers-reduced-motion:reduce){.uyol{transition:none}}
/* ---- GUVEN LISTESI ----
   Gulbin'in kendi stand sayfasindaki ss-guven listesinin duzeni:
   ikili izgara, solda ikon, sagda kalin baslik ve altinda tek satir
   aciklama. Cerceve sitenin sac teli cizgisi.
   Aciklama satiri GRI DEGIL: Gulbin'in kurali "butun yazilar koyu mavi
   olmali, opakligi dusurup rengi degistirip durma". Ayrim puntoda. */
.uliste{display:grid;grid-template-columns:repeat(2,1fr);
  gap:calc(24*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(26*100cqw/var(--AW));
  margin-top:calc(16*100cqw/var(--AW))}
/* Ikon, yanindaki iki satirin dikey ortasinda. */
.uliste>div{display:flex;align-items:center;
  gap:calc(14*100cqw/var(--AW))}
.uliste i{flex:0 0 auto;display:block;
  width:calc(24*100cqw/var(--AW));height:calc(24*100cqw/var(--AW));
  color:var(--mavi-koyu)}
/* Gulbin, 16 Eylul: "iconlu liste iconlari cerceve kalinliginda ve
   renginde olsun." Kontur artik sayfadaki butun cerceveler gibi
   --cizgi; vector-effect sayesinde ikon kucultulse de kalinlik
   degismiyor (onceki 0,9 birimlik deger 20 px'lik kutuda 0,75 px'e
   dusuyordu). Renk zaten .uliste i uzerinden --mavi-koyu. */
.uliste svg{width:100%;height:100%;display:block;
  vector-effect:non-scaling-stroke;stroke-width:var(--cizgi)}
.uliste svg *{vector-effect:non-scaling-stroke}
/* Kendi setimizden gelen ikon dolu form: kontur receteside ona
   uygulanmiyor (bkz. ikonlar.py). */
.uliste .dolu svg{fill:currentColor;stroke:none}
.uliste b{display:block;font-weight:var(--ag-baslik);line-height:1.25;
  font-size:var(--m4);text-transform:uppercase}
.uliste span{display:block;line-height:1.35;font-size:var(--m5);
  margin-top:calc(4*100cqw/var(--AW))}

.ustat{display:grid;grid-template-columns:repeat(3,1fr);
  border:var(--cizgi) solid var(--mavi-koyu);margin-top:calc(16*100cqw/var(--AW))}
.ustat div{text-align:center;padding:calc(18*100cqw/var(--AW)) calc(8*100cqw/var(--AW))}
.ustat div+div{border-left:var(--cizgi) solid var(--mavi-koyu)}
.ustat b{display:block;font-weight:var(--ag-ince);line-height:1;
  font-size:var(--m2)}
.ustat span{display:block;text-transform:uppercase;line-height:1.2;opacity:.75;
  font-size:var(--m5);margin-top:calc(7*100cqw/var(--AW))}

/* --- alt: yorumlar + video, benzer urunler --- */
.alt{display:grid;grid-template-columns:1.17fr 1fr;
  gap:calc(62*100cqw/var(--AW));margin-top:calc(66*100cqw/var(--AW));
  align-items:start}
.urun2 h2{margin:0 0 calc(18*100cqw/var(--AW));font-weight:var(--ag-baslik);
  text-transform:uppercase;font-size:var(--m3)}
.urun2 h2.ikinci{margin-top:calc(44*100cqw/var(--AW))}
.ukartlar{display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(20*100cqw/var(--AW))}
.ukart{margin:0;border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  padding:calc(14*100cqw/var(--AW));display:flex;flex-direction:column;
  gap:calc(8*100cqw/var(--AW));text-decoration:none;color:inherit;
  transition:border-color .3s,transform .3s}
.ukart:hover{border-color:var(--mavi-acik);transform:translateY(-6px)}
.ukart .ph{display:block;aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.ukart img,.ukart video{width:100%;height:100%;object-fit:cover;display:block}
/* Gulbin, 21 Eylul: gorsel kareyi tam doldursun. */
.ukart.urun img{width:100%;height:100%;object-fit:contain}
.ukart .uno{font-size:var(--m5);opacity:.55}
.ukart .yy{font-size:var(--m5);letter-spacing:.1em}
.ukart b{font-weight:var(--ag-baslik);text-transform:uppercase;line-height:1.2;
  font-size:var(--m4)}
.ukart p{margin:0;line-height:1.45;opacity:.72;font-size:var(--m5)}
.ukart .pr{font-size:var(--m4)}
/* Gulbin, 17 Eylul: "buradaki gibi olsun kartlar." Ana sayfada kart
   fiyati --m5; urun sayfasinda --m4 kaliyordu, 13,4 yerine 19,7
   cikiyordu. */
.pcard .pr{font-size:var(--m5)}
/* Ok dolu form (Gulbin'in ikon seti), kontur eklenmiyor. */
.ukart .arw2{margin-top:auto;width:calc(16*100cqw/var(--AW));height:auto;
  fill:currentColor;stroke:none}

.uvideo{position:relative;display:block;border:var(--cizgi) solid var(--mavi-koyu);
  background:var(--beyaz);padding:calc(14*100cqw/var(--AW));text-decoration:none}
.uvideo .ph{display:block;aspect-ratio:16/9;overflow:hidden}
.uvideo img,.uvideo video{width:100%;height:100%;object-fit:cover;display:block}
.uoynat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(62*100cqw/var(--AW));height:calc(62*100cqw/var(--AW));
  border:var(--cizgi) solid var(--beyaz);border-radius:50%;display:grid;place-items:center;
  color:var(--beyaz);font-size:var(--m3);background:rgba(2,31,54,.45);
  transition:background .25s}
.uvideo:hover .uoynat{background:var(--green);color:var(--mavi-koyu);border-color:var(--green)}

/* ---- ONERILEN URUN KARTLARI ----
   Gulbin, 16 Eylul: "ilginizi cekebilir yesil olmus ne alaka? basliklar
   aciklamalar buradaki gibi olsun mobil anasayfa."
   .pcard'in kendi rengi ana sayfadaki KOYU bant icin yazilmis: orada
   baslik ve cerceve yesil. Urun sayfasinin zemini beyaz; beyaz zeminde
   yesil yazi olmayacak (Gulbin'in kurali). Kategori sayfasindaki .S2.lite
   kapsayicisi burada yok, o yuzden ayni donusum acikca yaziliyor. */
.urun2 .pcard{border-color:var(--mavi-koyu)}
.urun2 .pcard h3,.urun2 .pcard p,.urun2 .pcard .pr,
.urun2 .pcard .num,.urun2 .pcard .birim,.urun2 .pcard .krz{color:var(--mavi-koyu)}
.urun2 .pcard .arw2{fill:var(--mavi-koyu)}
.urun2 .pcard:hover{border-color:var(--mavi-acik)}

/* ---- DURUM ISIGI ----
   Urun kartlarindaki yesil kare. Gulbin: "urun kartlarindaki yanip sonen
   isigi getir." Iki yerde kullaniliyor: urun fotografinin ustundeki
   "3 gunde teslim" rozeti ve "3 gunde kargoda" satiri. Kare, sitenin
   kose diliyle ayni; 2,4 sn'lik yumusak nefes, sert yanip sonme degil. */
.usisik{display:inline-flex;align-items:center;gap:var(--r1)}
.usisik::before{content:"";flex:0 0 7px;width:7px;height:7px;
  background:var(--green);animation:krzyan 2.4s ease-in-out infinite}
@keyframes krzyan{0%,100%{opacity:1}50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){.usisik::before{animation:none}}

/* ---- SOLUK YAZI YOK ----
   Gulbin'in kurali: "butun yazilar koyu mavi olmali, opakligi dusurup
   rengi degistirip durma." 16 Eylul: "aciklamalar da koyu mavimiz
   olacak." Olculdu, dort yerde opaklik kalmisti:
     .uozet .80 · "/ adet" .70 · akordeon metni .85 · yorum metni .72
   Ayrim artik puntoda, renkte degil. */
.urun2 .uozet,.urun2 .uicerik p,.urun2 .ukart p,
.urun2 .ufbas span,.urun2 .utaksitnot{opacity:1}

/* --- akordeon --- */
.uakor{margin-top:calc(60*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu)}
.uakor details+details{border-top:var(--cizgi) solid var(--mavi-koyu)}
.uakor summary{list-style:none;cursor:pointer;text-transform:uppercase;
  font-size:var(--m3);
  padding:calc(20*100cqw/var(--AW)) calc(26*100cqw/var(--AW));
  display:flex;align-items:center;justify-content:space-between}
.uakor summary::-webkit-details-marker{display:none}
.uakor summary::after{content:"+";line-height:1}
.uakor details[open] summary::after{content:"–"}
.uicerik{padding:0 calc(26*100cqw/var(--AW)) calc(22*100cqw/var(--AW))}
.uicerik p{margin:0;line-height:1.6;opacity:.85;font-size:var(--m4)}
/* ---- TAKSIT TABLOSU ----
   POS entegratorunun dolduracagi alan. Satirlar sitenin sac teli
   cizgisiyle ayriliyor, ayri bir kutu dili kurulmuyor. */
.utaksit{width:100%;border-collapse:collapse;
  margin-bottom:calc(14*100cqw/var(--AW))}
.utaksit tr+tr{border-top:var(--cizgi) solid var(--mavi-koyu)}
.utaksit th,.utaksit td{padding:calc(12*100cqw/var(--AW)) 0;
  font-weight:var(--ag-ince);font-size:var(--m4);text-align:left;
  font-variant-numeric:tabular-nums}
.utaksit th{white-space:nowrap}
.utaksit td b{font-weight:var(--ag-baslik)}
.utaksit .utop{text-align:right;white-space:nowrap}
.utaksitnot{opacity:1!important;font-size:var(--m5)!important;
  line-height:1.4!important}

/* mobilde ekranin altinda sabit satin alma cubugu: sayfa uzun,
   fiyat ve buton her an elde olsun */
.ucubuk{display:none}
@media(max-width:820px){
  .ukkutu{flex:0 0 34px;width:34px;height:34px}
  .ukkutu svg{width:17px;height:17px}
  .uksatir{gap:var(--r1)}
  .ukyazi{font-size:var(--f5);margin-top:var(--r12)}
  .urun2{margin-top:22vw;padding:6vw 6vw 26vw}
  .usayac input{min-height:44px}
  .ucubuk[hidden]{display:none}
  .ucubuk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:var(--r2);
    padding:var(--r1) var(--yan) calc(var(--r1) + env(safe-area-inset-bottom));
    background:var(--beyaz);border-top:var(--cizgi) solid var(--mavi-koyu);
    /* Gulbin, 16 Eylul: "alttaki sticky golgesi ustteki header
       golgesiyle ayni olsun." Basligin golgesi (sayfa.py, .hd):
       0 10px 26px -20px rgba(3,28,39,.45). Ayni deger, yonu ters. */
    box-shadow:0 -10px 26px -20px rgba(3,28,39,.45)}
  /* Ustte birim fiyat, altinda adet ve toplam (Gulbin'in ornegi).
     Gulbin, 16 Eylul: "niye paragraf yaptin, yanyana yapsana, gereksiz
     uzatmissin." Metin blogu 65 px'e sikisip "22 adet . 176 TL" iki
     satira kiriliyordu; blok esneyebilir oldu, satirlar kirilmiyor. */
  /* DOGRUDAN COCUK: ".ucubuk span" yazinca satirin ICINDEKI
     <span id="ucubukadet"> de bu kurala giriyor, dikey flex kutuya
     donuyor ve "22 adet . 176 TL" alt alta kiriliyordu. Gulbin:
     "22 adet 176 tl yan yana yazsin entersiz." */
  .ucubuk>span{display:flex;flex-direction:column;gap:var(--r0);
    flex:1 1 auto;min-width:0;line-height:1.15;color:var(--mavi-koyu)}
  .ucubuk>span>b,.ucubuk>span>i{white-space:nowrap}
  .ucubuk>span>b{font-weight:var(--ag-baslik);font-size:var(--f3);
    font-variant-numeric:tabular-nums}
  .ucubuk>span>b em{font-style:normal;font-size:var(--f4)}
  .ucubuk>span>i{font-style:normal;font-size:var(--f5);opacity:1;
    font-variant-numeric:tabular-nums}
  .ucubuk .uekle{flex:0 0 auto;min-height:44px;padding:0 var(--r2)}
  .ust,.alt{grid-template-columns:1fr;gap:7vw}
  .ubaslik{font-size:8.4vw}.uozet{font-size:4vw}
  /* Gulbin, 16 Eylul: "aciklama biraz daha asagiya kaysin, yildiz ve
     baslik arasindaki bosluk kadar bosluk olsun." Iki bosluk da
     var(--r1): baslik -> yildiz ve yildiz -> aciklama. */
  .upuan{margin-top:var(--r1);gap:var(--r1)}
  .uozet{margin-top:var(--r1)!important}
  /* Gulbin, 16 Eylul: "4,9 81 degerlendirme, 4,9 boyutunda ve
     renginde olsun." Degerlendirme sayisi puanla ayni punto ve renk;
     solukluk kalkti. */
  .upuan .yy{font-size:var(--f5)}
  .upuan b,.upuan .usay{font-size:var(--f4);opacity:1;
    color:var(--mavi-koyu)}
  .ufiyat{margin-top:var(--r3);gap:var(--r2)}
  .ufbas{gap:var(--r1)}
  .ufbas b{font-size:var(--f0)}.ufbas span{font-size:var(--f4)}
  .ufbas s{font-size:var(--f4)}
  .uind{font-size:var(--f5)}

  .ufsag{gap:var(--r0)}
  .uftop,.ufkdv{font-size:var(--f5)}
  /* Gulbin, 16 Eylul: "drop basliklari da biraz yukarida olsun cok
     dipdibe." Etiketin alt boslugu tuval birimiyle yaziliydi (7 birim),
     mobilde 1,4 px'e dusuyordu: yazi kutunun tepesine yapisiyordu.
     Bosluk merdivene baglandi. */
  /* Gulbin, 16 Eylul: "drop basliklari daha buyuk olmali, filtrelerin
     basliklari gibi olabilir mesela." Kategori sayfasindaki .ktgbas
     olculdu: 17 px / 500 / buyuk harf. Ayni degerler.
     mobil.css'teki TEK ETIKET STILI bu etiketleri 11 px / 300'e
     sabitliyor ve urun2.css'ten sonra yukleniyor; bu yuzden .urun2 ile
     ozellesti. */
  /* Gulbin, 16 Eylul: "ve koyu mavi." Renk zaten --mavi-koyu idi ama
     taban kuraldaki .75 opaklik soluk gosteriyordu; opaklik kalkti. */
  /* Gulbin, 16 Eylul: "hazir urunler e ticaret urunleri koyu mavi
     olsun, altindaki bosluk biraz artsin." Kirinti yolu .7 opaklikla
     soluk duruyordu; alt boslugu da tuval birimiyle yazili oldugu icin
     mobilde 5 px'e dusuyordu. */
  .urun2 .ukirinti{opacity:1;margin-bottom:var(--r2)}
  .urun2 .ukirinti a{color:var(--mavi-koyu)}

  .urun2 .usec>span{font-size:var(--f3)!important;
    font-weight:var(--ag-baslik)!important;margin-bottom:var(--r1);
    opacity:1;color:var(--mavi-koyu)}
  .usec select{font-size:4vw;padding:3.4vw}
  /* Gulbin, 16 Eylul: "drop metinleri aciklama ile ayni olsun boyut
     olarak." Acilir listeler 16 px idi (--acilir-punto), urun aciklamasi
     13 px (--f4). Ikisi esitlendi; kutu yuksekligi degismiyor. */
  /* Gulbin, 16 Eylul: "olcu adet renk droplarina genel bir drop alani
     olarak bak, ustteki boslukla alttaki bosluk esit degil, alttaki
     bosluk uste de uygulansin." Olculdu: ustte 16, altta 24. Uc drop
     tek blok sayiliyor; blogun ust boslugu alttakiyle esitlendi.
     Droplarin kendi aralarindaki 16 px degismedi. */
  .urun2 .usec:first-of-type{margin-top:var(--r3)!important}

  .urun2 .usec .acilir-dugme,
  .urun2 .usec .acilir-dugme .ad,
  .urun2 .usec .acilir-liste li{font-size:var(--f4)!important}
  /* Gulbin, 16 Eylul: "drop metinleri cok sola kaymis biraz saga
     kaysin." Mobil kural dugmeye 8 px yan dolgu veriyordu, jetonun
     kendi degeri 16 (--acilir-dolgu). Dugme ve liste ayni hizaya
     geldi. */
  .urun2 .usec .acilir-dugme{padding:0 var(--r2)!important}
  .urun2 .usec .acilir-liste li{padding-left:var(--r2);padding-right:var(--r2)}
  /* Sayac: 32vw = 120 px'te iki dokunma dugmesi (44+44) sayiya 32 px
     birakiyordu, rakam kutuya sikisiyordu. Genislik artik icerige bagli.
     Gulbin, 16 Eylul: "quantity daha kisa olabilir bence." Sayi kutusu
     dokunma tabaniyla ayni olcuye indi: 44+44+44 = 132 px, "Sepete ekle"
     dugmesine 195 px kaliyor. */
  .usayac{flex:0 0 auto}
  .usayac input{min-width:44px}
  .usayac button{font-size:4.6vw;line-height:12vw}
  /* Gulbin, 16 Eylul: "sepete ekle yazinin boyutu quantity 22 boyutu
     kadar olsun." Sayac rakami 17 px (--f3); buton 13 px idi. */
  .usayac input{font-size:4vw}
  .urun2 .uekle{font-size:var(--f3)!important}
  /* ---- GUVEN LISTESI (mobil) ----
     Ikili izgara dar ekranda tek sutuna iniyor: 375 px'te iki sutun
     kalsa her hucreye 150 px kaliyor, "Olcusu belli, fiyati belli"
     dort satira kiriliyordu. */
  /* Taban aralik cqw ile yazili; mobilde 24 birim 4,6 px'e dusuyor,
     satirlar birbirine yapisiyordu. Gulbin: "araliklari acik olsun
     biraz." Aralik --r merdivenine baglandi. */
  /* Ust bosluk da cqw ile yaziliydi, mobilde 3 px'e dusup kargo
     kutusuyla dip dibe kaliyordu. Gulbin: "alani biraz asagiya kaysin,
     ucretsiz kargoyla dipdibe." Ayni sayfadaki .ukargo ile ayni deger. */
  /* Gulbin, 16 Eylul: "urun detayi ve taksit ustundeki bosluk cok,
     diger bosluklara gore hizala." mobil.css akordeona 48 px ust
     bosluk veriyordu; sayfadaki diger bloklar arasi 24 (--r3). */
  .urun2 .uakor{margin-top:var(--r3)!important}

  /* Gulbin, 16 Eylul: once "yataydan ortalansin" dedim diye blogu
     kutunun ortasina almistim; "dikey ortalamissin, sola hizala yine"
     dedi. Maddeler sola yasli; ortalanan sey IKON: iki satirlik
     metnin dikey ortasina geliyor (asagida align-items:center). */
  .uliste{grid-template-columns:1fr;padding:var(--r2);gap:var(--r2);
    margin-top:var(--r3)}
  .uliste>div{gap:var(--r12)}
  .uliste i{width:20px;height:20px}
  .uliste b{font-size:var(--f4)}
  .uliste span{font-size:var(--f5)}
  /* Durum isigi kartlardakiyle ayni: yesil kare, nefes alir gibi yanip
     soner. Kural tabanda (asagida), burada yalniz konum. */
  /* Gulbin, 16 Eylul: "renk olcu adet basliklarinin kalinligi boyutunu
     urun yorumlari, ilginizi cekebilir ve neler yaptika uygula, onlar da
     parantezli olsun." Etiketlerle ayni recete: 17 px / 500 / buyuk harf.
     mobil.css bu basliklari 11 px / 300'e sabitliyor ve urun2.css'ten
     sonra yukleniyor, o yuzden .urun2 ile ozellesti. */
  .urun2 .alt h2,.urun2 .alt h2.ikinci,.urun2 h2{
    font-size:var(--f3)!important;font-weight:var(--ag-baslik)!important;
    color:var(--mavi-koyu)}
  /* Gulbin, 16 Eylul: once "uste daha yakin" dedim diye ust boslugu
     sifirlamistim, "basliklar yukariya kaymis asagiya kaymali,
     bosluklari hizala" dedi. Her basligin ustundeki ve altindaki
     bosluk ayni: 24 / 24. Seritlerin kendi negatif ust-alt kenarlari
     (kart kalkinca kirpilmasin diye) bu hesaba katildi. */
  /* Gulbin, 16 Eylul: "basliklar alttaki devamina yaklassin biraz
     daha, altindaki bosluk cok." Alt bosluk 16 -> 0; seritlerin kendi
     ust dolgusu (24) zaten nefes birakiyor. Ust bosluk 24'te kaldi. */
  .urun2 .alt h2,.urun2 .alt h2.ikinci{
    margin-top:var(--r3)!important;margin-bottom:0!important}
  .urun2 .alt{gap:var(--r2)!important}
  /* Serit kartlari egik; kutunun ust kenari kartin gorunur ucundan
     once basliyor. Diger iki basligin alt boslugu 16 px goruunurken
     burada 9 kaliyordu, dolgu 24'e cikti. */
  .urun2 .wsr{margin-top:0;padding-top:var(--r3)}
  /* Kart araligi tuval birimiyle yazili; .urun2 kendi kapsayicisi
     oldugu icin burada 6 px'e dusuyor ve egik kartlar birbirine
     giriyordu. Ana sayfada olculen deger 21 px, en yakin jeton --r3. */
  .urun2 .wak{gap:var(--r3);
    /* Olculen mesafeyle kayan kendi donusu; -%50 bosluklari
       saymadigi icin her turda geri tepiyordu (bkz. urun2.js). */
    animation-name:uwakay}
  @keyframes uwakay{from{transform:translateX(0)}
    to{transform:translateX(calc(-1 * var(--kay,50%)))}}
  /* .ukartlar ve bolum basliklarinin mobil sahibi mobil.css */
  /* Gulbin, 16 Eylul: "urun ustundeki rozetler masallah at kadar."
     Olculdu: iki rozet 120x56, 335 px'lik urun fotografinin ustunde
     yan yana 112 px yer kapliyordu. Sabit kutu kalkti; rozet artik
     yazisi kadar. Ikisi tek sutun, aralarindaki bosluk sabit; elle
     ust degeri hesaplanmiyor. */
  /* Sarmal masaustunde oldugu gibi display:contents kaliyor; rozetin
     kendisi konumlaniyor. (Once sarmala position:absolute vermistim:
     display:contents kutuyu yok ettigi icin konum hic islemiyor,
     rozet gorselin ortasina dusuyordu.)
     mobil.css rozete cerceve ve 48 px kutu veriyor; kart rozetinde
     ikisi de yok. */
  /* Rozet satiri cerceveden 8 px iceride (Gulbin: "daha disarida
     olsun").
     Sag taraf ayri: Gulbin "indirim rozeti cok saga kaydi, yanip sonen
     kare ile cerceve arasindaki bosluk kadar olsun" dedi. Iki kutu da
     9 px iceride olmasina ragmen oyle gorunmuyordu, cunku soldaki
     7 px'lik kucuk bir kare, sagdaki 36 px'lik dolu bir blok; ayni
     bosluk blokta daha dar okunuyor. Olcut yaziya cevrildi: soldaki
     yazi cerceveden 24 px iceride basliyor (9 + 7 kare + 8 bosluk),
     sagdaki yazi da 24 px iceride bitsin diye kutunun kendi ic
     dolgusu (.6em) dusuldu. */
  .urozetler{left:var(--r1);right:var(--r2);top:var(--r1);gap:var(--r1)}
  .urozet{width:auto;height:auto;line-height:1.2;
    border:0!important;background:none!important;padding:0!important;
    min-height:0!important}
  /* Gulbin, 16 Eylul: "urun detaylari ve taksit secenekleri koyu mavi
     ve parantezli olsun, iconlu liste baslik boyutunda olsun,
     aciklamalari da iconlu liste aciklamasi boyutunda olsun."
     Liste basligi 13 px / 500 / buyuk harf, aciklamasi 11 px.
     mobil.css akordeon basligini 17 px / 300'e sabitliyor ve
     urun2.css'ten sonra yukleniyor, o yuzden .urun2 ile ozellesti. */
  /* Gulbin, 16 Eylul: "urun detaylari ve taksit seceneklerin artisi ve
     eksisi cerceve kalinliginda olsun." Isaret yazi karakteriydi,
     kalinligi yazi tipinden geliyordu. Artik iki cizgi: her biri
     --cizgi, yani sayfadaki butun cerceveler kadar. Acikken dikey
     cizgi kalkiyor, eksi kaliyor. */
  /* Gulbin, 16 Eylul: "boyutu quantity eksi ve artisindan olsun."
     Olculdu: sayacin "+" glifi 17,25 px puntoda 7,7 x 6,4 px yer
     kapliyor. Isaret 12'den 8'e indi, iki yerdeki artilar ayni
     buyuklukte duruyor. */
  .urun2 .uakor summary::after{content:"";display:block;
    width:8px;height:8px;line-height:0;
    background:
      linear-gradient(var(--mavi-koyu),var(--mavi-koyu)) center/100% var(--cizgi) no-repeat,
      linear-gradient(var(--mavi-koyu),var(--mavi-koyu)) center/var(--cizgi) 100% no-repeat}
  .urun2 .uakor details[open] summary::after{content:"";
    background:linear-gradient(var(--mavi-koyu),var(--mavi-koyu))
      center/100% var(--cizgi) no-repeat}

  .urun2 .uakor summary{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)!important;color:var(--mavi-koyu);
    padding:var(--r2)}
  .uicerik{padding:0 var(--r2) var(--r2)}
  .urun2 .uicerik p,.urun2 .uicerik{font-size:var(--f5)!important}
  .urun2 .utaksit th,.urun2 .utaksit td{padding:var(--r12) 0;
    font-size:var(--f5)!important}
  .utaksit{margin-bottom:var(--r2)}
  .utaksitnot{font-size:var(--f5)!important}

  /* Gulbin, 16 Eylul: "ucretsiz kargoya bla bla kaldi metini biraz
     yukariya ciksin." Kutunun ust dolgusu 16 -> 8; yazi ile cubuk
     arasindaki 2 px de acildi, yazi cubuga yapisik durmuyor.
     (Yazinin alt boslugu tuval birimiyle yazildigi icin mobilde 1,9 px
     oluyordu.) */
  /* Gulbin, 16 Eylul: "ucretsiz kargoya bla bla kaldi metini iconlu
     liste basligi boyutunda kalsin, ona gore tekrar alt ust bosluk
     ver, dipdibe durmasin."
     Metin 11/300 idi, liste basligiyla ayni oldu: 13/500/buyuk harf.
     Buyuyen yaziya gore bosluklar da acildi: ustunde ve altinda 16,
     cubugun altinda da 16 (kutu dolgusu). Uc bosluk esit. */
  .urun2 .ukargo{padding:var(--r2)!important}
  .urun2 .ukargo b{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)!important;margin-bottom:var(--r2)}

  /* ---- GALERI SERIDI ----
     cqw dolgular mobilde cokuyor (bkz. mobil.css'teki ayni not):
     kutular arasi bosluk 4 px'e iniyordu. --r merdivenine baglandi. */
  .ukucukler{gap:var(--r1);margin-top:var(--r1)}
  .ukucuk{padding:var(--r0)}

  /* NELER YAPTIK seridi: ana sayfadaki .wsr/.wak/.wk bileseninin
     aynisi. Ayri kural yazilmiyor, iki sayfa tek yerden yonetiliyor. */

  /* ---- YORUM KLIPLERI ----
     Gulbin, 16 Eylul: "urun yorumlari kartlari biraz daha dikey olsun
     ve video tam sigsin cerceveye." Klipler 300x400, yani 3/4.
     Kutu kare oldugu surece cover kirpiyordu; oran klibin kendi
     oranina esitlendi, goruntu tam oturuyor ve kart dikeylesti. */
  .uyorumlar .ukart .ph{aspect-ratio:3/4}
  /* Gulbin, 16 Eylul: "cerceveye sigacak, bosluk olmayacak." Kartin
     8 px'lik ic dolgusu goruntunun etrafinda bosluk birakiyordu.
     Dolgu kalkti, klip cerceveye yapisti; yazilar kendi dolgusunu
     aldi. Ayni kural "Neler yaptik" kartlarinda da; ana sayfadaki
     .wk'ye dokunulmadi, kurallar .urun2 ile sinirli. */
  .urun2 .uyorumlar .ukart{padding:0!important;gap:0}
  /* Gulbin, 16 Eylul: "kartlarin metinleri hizali degil, dip dibe,
     gerekli bosluklar yok" + "urun kartlari bosluklarini baz
     alabilirsin." Olculdu, .pcard'in ic olculeri:
       yanlar 16 · ust 16 · baslik ile metin arasi 8 · alt 16
     Ayni degerler yorum ve "Neler yaptik" kartlarina uygulandi. */
  .urun2 .uyorumlar .ukart .yy{display:block;
    padding:var(--r2) var(--r2) var(--r1);margin:0}
  .urun2 .uyorumlar .ukart b{display:block;
    padding:0 var(--r2) var(--r1);margin:0}
  .urun2 .uyorumlar .ukart p{display:block;
    padding:0 var(--r2) var(--r2);margin:0}
  .urun2 .wk{padding:0;gap:0}
  /* figcaption'in kendi 16 px ust kenar boslugunu sifirlamistim,
     Gulbin "geri al son yaptigini" dedi; kenar boslugu geri geldi. */
  .urun2 .wk figcaption{display:block;padding:var(--r2)}
  /* Gulbin, 16 Eylul: "ikisinde de baslik altinda olacak aciklamalari
     yaninda degil." figcaption'i blok yapinca ic ogeler satir ici
     kaldi, marka ile aciklama yan yana akiyordu. Ikisi de blok. */
  .urun2 .wk figcaption b,.urun2 .wk figcaption span{display:block}
  /* Marka ile aciklama arasi .pcard'daki baslik-metin araligiyla ayni
     (8). Once 4 idi ve satir kutulari cakisip -4'e dusuyordu. */
  .urun2 .wk figcaption b{margin:0 0 var(--r1)}
  .urun2 .wk figcaption span{margin:0}
  /* Gulbin, 16 Eylul: "kartlarda basliklar ayni yerden baslayacak,
     aciklama da tek satir olacak, sekil bozulmasin yani."
     Olculdu: aciklama kiminde 1 kiminde 2 satirdi; serit flex oldugu
     icin kartlar en uzuna gore uzuyor, fazladan satir gorseli
     sikistirip marka adini 16 px asagi kaydiriyordu (325 / 341).
     Aciklama tek satira kirpildi: butun kartlarin yazi blogu ayni
     yukseklikte, gorsel orani bozulmuyor, basliklar ayni hizada.
     Gulbin: "urun yorumlari icin yaptigin son degisikligi geri al" —
     kirpma yalniz "Neler yaptik" seridinde, yorum kartlarinin metni
     eskisi gibi tam duruyor. */
  .urun2 .wk figcaption span{display:-webkit-box;-webkit-line-clamp:1;
    -webkit-box-orient:vertical;overflow:hidden}
  /* "Neler yaptik baslik ve aciklama boyutunu uygula yorumlara":
     marka 17/500, aciklama 11/300. Yorum kartinin basligi 11 idi.
     mobil.css yorum kartina 11 px dayatiyor, o yuzden !important. */
  .urun2 .uyorumlar .ukart b{font-size:var(--f3)!important;
    font-weight:var(--ag-baslik)!important;line-height:1.25}
  .urun2 .uyorumlar .ukart p{font-size:var(--f5)!important;
    line-height:1.4}
  /* "Aciklama alanlarini biraz uzat" deyince dort satirlik sabit yer
     ayirmistim; metinler bir-iki satir oldugu icin altta kocaman
     bosluk kaldi ("gereksiz bosluk koydun simdi de"). Sabit yukseklik
     kalkti, alan metin kadar. */
  .uyorumlar .ukart video{width:100%;height:100%;object-fit:cover;display:block}

  /* Gulbin, 16 Eylul: "urun yorumlari da kartlar gibi kaydirmali olsun."
     Serit olculeri urun karti seridiyle birebir: kart %76, ilk kart sayfa
     hizasindan basliyor, serit ekran kenarina kadar uzuyor. Uc kartin
     tam sigdigi dar duzen kalkti. */
  .urun2 .uyorumlar{gap:var(--r2)!important;
    margin:calc(var(--r2) - var(--r3)) calc(-1*var(--yan)) calc(-1*var(--r3))!important;
    padding:var(--r3) var(--yan) var(--r3)!important;
    scroll-padding-left:var(--yan)}
  .urun2 .uyorumlar>*{flex:0 0 76%!important}
}

/* ---- MASAUSTU OLCEGI ----
   Gulbin, 17 Eylul: "olcekler sacmaliyor, mobilde gordugum gibi
   gelmeli buraya da."
   Sistemin punto merdiveni 1724 px'lik SAYFA tuvaline gore, yani
   ekran genisledikce buyuyup daraldikca kuculuyor; urun sayfalarinin
   bilesenleri ise mobilde sabit punto merdiveni (34/26/20/17/13/11)
   uzerine kuruldu ve oradaki hali onaylandi. Masaustunde ayni tasarim
   tuvale bolununce etiketler 9,6 px'e dusuyordu.
   Bu blok urun sayfalarinin ICINDE merdiveni mobildekine baglar:
   masaustunde de ayni puntolar cikar. Header, footer ve ana sayfa
   kendi kapsayicilari, onlara dokunulmuyor. */
@media(min-width:821px){
  main.urun2{
    --m0:var(--f0);   /* 34 */
    --m1:var(--f0);   /* 34: fiyat */
    /* Gulbin, 17 Eylul: "baslik biraz kucuk geldi gozume."
       Merdivende bir ust basamak: 26 > 34. Ara deger uydurulmadi,
       jeton merdiveninin kendi basamagi kullanildi. */
    --m2:var(--f0);   /* 34: urun basligi */
    --m3:var(--f3);   /* 17: kart basligi, buton */
    --m4:var(--f4);   /* 13: govde */
    --m5:var(--f5);   /* 11: etiket, rozet */
  }
}

/* Merdiven esitlendikten sonra kalan tekil farklar: asagidaki
   ogelerin masaustu ve mobil kurallari ayri yazilmisti, degerleri
   tutmuyordu. Hepsi mobilde onaylanan degere cekildi. Olculdu:
   sayfa (1315) ve telefon (375) genisliginde ayni punto. */
@media(min-width:821px){
  .urun2 .ukirinti a{font-size:var(--f5)}
  .urun2 .upuan .usay{font-size:var(--f4)}
  .urun2 .usec>span{font-size:var(--f3);
    font-weight:var(--ag-baslik);margin-bottom:var(--r1);
    opacity:1;color:var(--mavi-koyu)}
  .urun2 .usec select{font-size:var(--f3)}
  .urun2 .usec .acilir-dugme,
  .urun2 .usec .acilir-dugme .ad,
  .urun2 .usec .acilir-liste li{font-size:var(--f4)}
  .urun2 .uekle{font-size:var(--f3)}
  /* Gulbin, 17 Eylul: "droplar boldtu." Mobil recetede akordeon
     basligi --ag-baslik (500); masaustu kuralinda yalniz punto
     yazilmisti, agirlik 300'e dusuyordu. */
  .urun2 .uakor summary{font-size:var(--f4)!important;
    font-weight:var(--ag-baslik)}
  .urun2 .uicerik p{font-size:var(--f5)}

  /* Gulbin, 17 Eylul: "butonlar droplar dogru olcude mi sence."
     Degildi: yazilar mobil merdivenine cekilmisti ama kutu
     yukseklikleri hala tuval hesabindan geliyordu (buton 23, drop 33).
     17 px yazi 23 px kutuya sigmiyordu. Butun denetimler mobildeki
     parmak olcusune baglandi: 48 px yukseklik, 16 px yan dolgu. */
  .urun2 .uekle{min-height:var(--buton-yuk)}
  .urun2 .usec .acilir-dugme{min-height:var(--buton-yuk);
    padding:0 var(--r2)}
  .urun2 .usec .acilir-liste li{min-height:var(--buton-yuk);
    padding:var(--r12) var(--r2);display:flex;align-items:center}
  .urun2 .usec select{min-height:var(--buton-yuk);padding:0 var(--r2)}
  .urun2 .uakor summary{min-height:var(--buton-yuk);
    padding:var(--r12) var(--r2)}
  .urun2 .uicerik{padding:0 var(--r2) var(--r2)}
  /* Oluk seceneklerindeki kesit resmi: mobildeki olcunun aynisi. */
  .urun2 .acilir-gorsel{width:var(--r4);height:var(--r4)}
  .urun2 .acilir-liste li.acilir-resimli{gap:var(--r1)}

  /* Gulbin, 17 Eylul: "masaustunde galeri sola siralansin."
     Kutucuklar buyuk gorselin ALTINDAN soluna gecti: dar bir dikey
     serit, yaninda gorsel. Sira HTML'de degismiyor, yalniz izgarada
     yer degistiriyorlar; mobilde eski hali (altta yatay serit)
     duruyor. */
  /* Gulbin, 17 Eylul: "onceki gibi 4 gorsel buyuk gorselin alani
     kadar olsun." Serit buyuk gorselle AYNI yukseklikte: dort kutucuk
     ve aralarindaki uc bosluk, gorselin boyunu tam dolduruyor.
     Sutun orani bunun icin cozuldu: gorsel kare oldugundan
     4r + 3*8 = m ve r + 16 + m = alan; sonuc 19,273 / 80,727.
     Boylece kutucuklar da kare cikiyor (127 px). */
  /* Gulbin, 17 Eylul: "bosluklar esit olsun." Kutucuklar arasi ve
     kutucuk-gorsel arasi ayni: --r2. Oran buna gore yeniden cozuldu:
     4r + 3g = m ve r + g + m = alan; g=16 icin 18,545 / 81,455. */
  .urun2 .ugorsel{display:grid;
    grid-template-columns:18.545fr 81.455fr;
    gap:var(--r2);align-items:stretch}
  .urun2 .ugorsel>.ubuyuk{grid-column:2;grid-row:1}
  /* Gulbin, 17 Eylul: "son fotografin alti hizali degil, bosluk
     kaliyor, tam denk gelsin demistim." Serit her zaman gorselin
     boyunu dolduruyor: kutucuklar satirlari esit boluyor. Dort
     kutucukta bu zaten kare veriyor (4r + 3*16 = m); tek gorseli olan
     urunde tek kutucuk uzuyor, ama alt kenarlar birebir hizali
     kaliyor. */
  .urun2 .ukucukler{grid-column:1;grid-row:1;
    grid-template-columns:1fr;grid-auto-rows:1fr;
    gap:var(--r2);height:100%;margin:0}
  .urun2 .ukucuk{aspect-ratio:auto}

  /* Gulbin, 17 Eylul: "urun detaylari kismi urun gorselinin altinda
     olsun." Akordeon artik .ubilgi'nin icinde degil, .ust'un dogrudan
     cocugu: masaustunde gorselin altina, sag sutunun bosalan yerine
     degil SOL sutuna oturuyor. Mobilde DOM sirasi ayni oldugu icin
     gorunum degismiyor (gorsel > bilgi > akordeon). */
  /* Iki satirin ilki KENDI boyunda, ikincisi artani aliyor. Boyle
     olmazsa sag sutun iki satira yayildigi icin ilk satir onun yarisi
     kadar uzuyor ve akordeon gorselden 200 px asagi kaciyordu
     (Gulbin: "cok uzakta kaldi, hizali olsun"). */
  .urun2 .ust{align-items:start;grid-template-rows:auto auto 1fr;
    /* Gulbin, 17 Eylul: "urun detaylari daha yukariya cikmali."
       Satir araligi sutun araligindan bagimsiz: akordeon gorselin
       hemen altina geliyor. */
    /* 69 px cok uzakti, 18 px cok yakin kaldi; ortasi. */
    row-gap:calc(40*100cqw/var(--AW))}
  .urun2 .ust>.ugorsel{grid-column:1;grid-row:1}
  .urun2 .ust>.ubilgi{grid-column:2;grid-row:1/span 2}
  /* Ekstra ust bosluk yok: izgaranin kendi satir araligi yeterli,
     akordeon gorselin hemen altinda duruyor. */
  .urun2 .ust>.uakor{grid-column:1;grid-row:2;margin-top:0}
  /* Gulbin, 17 Eylul: "urun yorumlari da urun detaylari altina
     gelsin." Sol sutunun ucuncu satiri. */
  .urun2 .ust>.uyorumbol{grid-column:1;grid-row:3}
  .urun2 .ust>.ubilgi{grid-row:1/span 3}
  /* .alt'ta tek bolum kaldi, iki sutuna bolunmesin. */
  .urun2 .alt{grid-template-columns:1fr}
  /* Gulbin, 17 Eylul: "neler yaptik ful sayfa olacak, anasayfadaki
     gibi." Serit main'in yan boslugunu asip sayfanin iki kenarina
     yapisiyor; baslik yerinde kaliyor. Deger main'in kendi yan
     dolgusunun (83,6 birim) negatifi, yani ekran genisligi degisse de
     tam kenara oturuyor. */
  /* main'in yan dolgusu kendi TAM genisligine gore hesaplaniyor
     (83,6/1724), serit ise main'in IC genisligini olcuyor; ikisi
     dogrudan esitlenemez. Ic genislige dusen pay cozuldu:
     p = 0,0485*(ic + 2p) -> p = %5,3701 * ic. */
  .urun2 .alt .wsr{margin-left:-5.3701cqw;margin-right:-5.3701cqw;
    width:auto;max-width:none}

  /* Gulbin, 17 Eylul: "tasarim editoru metininin online tasarla
     butonuna uzakligiyla, nakliye metninin sepete ekleye uzakligi
     ayni olsun." Olculdu: 6 ve 12 idi, ikisi de 12'ye cekildi. */
  .ozel .oznot{margin-top:calc(16*100cqw/var(--AW))}

  /* Gulbin, 17 Eylul: "fiyatin ust bosluguyla alt boslugu ayni degil,
     esit olsun, ferah olsun biraz." Olculdu: 18 ve 9 idi. Ikisi de
     32 birime (24 px) cekildi; fiyat blogu iki yandan esit nefes
     aliyor. */
  .urun2 .ufiyat{margin-top:calc(32*100cqw/var(--AW))}
  /* Gulbin, 17 Eylul: "ikonlu liste ust boslugunu ac biraz, hizala."
     12 px'ti; fiyat blogunun araligiyla ayni ritme cekildi. */
  .urun2 .uliste{margin-top:calc(32*100cqw/var(--AW))}
  /* Gulbin, 17 Eylul: "urun yorumlari ve neler yaptik basligi urun
     basligi boyutu ile ayni olsun." Urun basligi masaustunde --f0
     (34 px); bolum basliklari da ayni basamaga cekildi. */
  .urun2 h2,.urun2 .alt h2,.urun2 .alt h2.ikinci{font-size:var(--f0)}
  /* Gulbin, 17 Eylul: "bir sirada 5 tane olacak ilginizi cekebilir."
     + "kaydi": kartlar sutuna sigmayip 70 px sagina tasiyor ve
     komsusunun uzerine biniyordu. Sebep izgara ogelerinin varsayilan
     min-width:auto degeri: icerideki gorselin dogal genisligi kartin
     kuculmesini engelliyordu. Ana sayfada sutun genis oldugu icin
     gorulmuyor; burada bes sutunda ortaya cikti. */
  .urun2 .upgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .urun2 .upgrid>*,
  .urun2 .upgrid .pcard>*{min-width:0}
  .urun2 .upgrid .pcard .ph img{width:100%;height:auto}
  /* Gulbin, 17 Eylul: "buradaki gibi olsun kartlar" (ana sayfadaki
     kendi olcunu tasarla kartlari). Yapi zaten ayniydi, punto
     tutmuyordu: urun sayfasinin merdiveni mobile baglandigi icin
     kartin basligi 19,7 yerine 17, fiyati 13,4 yerine 17 cikiyordu.
     Kartin ICINDE merdiven sistemin kendi degerlerine donuyor;
     boylece ana sayfadaki kartla birebir ayni. */
  /* Gulbin, 17 Eylul: "cerceve mavi oldu, koyu mavi olacak."
     Secili kutucugun cercevesi acik maviye donuyordu; urun
     sayfalarinda cerceve hic degismiyor. */
  .urun2 .ukucuk[aria-current="true"]{border-color:var(--mavi-koyu)}
  /* Gulbin, 17 Eylul: "uzadi yine" > "fotograf yoksa alani olmasin
     ama orasi bos kalsin, olan fotografi uzatma."
     Kutucuklar her zaman kare; eksik yuva icin kutu cizilmiyor,
     serit kisa kaliyor ve altindaki yer bos duruyor. */
  .urun2 .ukucukler{grid-auto-rows:auto;align-content:start;
    height:auto}
  .urun2 .ukucuk{aspect-ratio:1}
  /* Kart fiyati ana sayfadakiyle ayni basamakta; mobil recetesi
     masaustunde de max(17px,--m3) dayattigi icin !important. */
  /* Ana sayfada kart fiyati 13,4 px cikiyor: orada bolumun
     kapsayicisi daha genis oldugu icin ayni jeton daha buyuk
     hesaplaniyor. Urun sayfasinda sutun dar; jeton 9,4'e dusuyordu.
     Taban 13 px ile ana sayfadaki olcuye oturuyor. */
  .urun2 .pcard .pr{font-size:max(13px,var(--m5))!important}
  .urun2 .pcard{
    --m2:calc(40*100cqw/var(--AW));
    --m3:calc(22*100cqw/var(--AW));
    --m4:calc(15*100cqw/var(--AW));
    --m5:calc(13*100cqw/var(--AW))}
  .ozel .oztasarla,.stand .sttasarla{
    margin-top:calc(32*100cqw/var(--AW))}
}

/* ---- NELER YAPTIK SERIDI: DONGU ----
   Gulbin, 17 Eylul: "bos ve bastan basliyor."
   Olculen mesafeyle kayan donus mobil blogunun icinde kalmisti;
   masaustunde ana sayfanin -%50'lik dongusu calisiyordu ve kartlarin
   ARASINDAKI bosluklar sayilmadigi icin her turda geri tepiyordu.
   Kural artik her genislikte gecerli: serit, ilk kopyanin olculen
   uzakligi kadar kayiyor, ek yeri gorunmuyor. */
.urun2 .wak{animation-name:uwakay}
@keyframes uwakay{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--kay,50%)))}}

/* ---- KARGO CUBUGU: ADIMLI (G2) ----
   Gulbin, 21 Eylul: ornek gonderip "kargo bedava barimiz boyle olacak,
   yuvarlak yerine kare tik yaparsin" dedi; ilk denemem tutmadi cunku
   baglanti cizgisi 1 px'ti ve dikey konumu yanlisti (etiketin uzerine
   denk gelip kayboluyordu, iki kare bagimsiz duruyordu).
   Bu hali ornekteki gibi: asagida kesintisiz bir iz var, kareler izin
   UZERINDE oturuyor, tamamlanan bolum koyu mavi, kalani soluk.
   Etiketler izin ustunde, her adim kendi isaretinin hizasinda.
   Cizgi konumu etiketin yuksekligine bagli degil: isaret satirin en
   altinda oldugu icin iz de alttan hizalaniyor (bottom). */
/* ==ILERLEME-BASLA==
   ---- ILERLEME CUBUGU (sitenin her yerinde ayni) ----
   Kaynak: Gulbin'in artboardi, Desktop/WEBSITE/SVG/Artboard 9.svg.
   Olculer oradan birebir alindi, tahmin edilmedi:

     sayi [ 01 ]        26,8 px, Clash Light
     etiket             genis kutuda 12, dar kutuda 9 px
     durum isigi        4,76 x 4,76 kare, etikete 10,88 px mesafe
     sayi -> etiket     taban cizgileri arasi 26,33
     etiket -> cubuk    23,31
     cubuk              11,69 yuksek, ic dolum 3,31 ve her yandan
                        4,19 iceri (solda 4,39)
     cubuk -> alt yazi  31,64

   Artboardda iki boy var (979 ve 484 px kutu); ikisinde de adimlar
   YAN YANA, sayi ve cubuk ayni olcude, yalnizca etiket puntosu
   degisiyor. Genislik sayfaya degil kutuya bagli oldugu icin kap
   sorgusu kullaniliyor; bunun sarti blogun tuval birimi (100cqw)
   tasimamasi, o yuzden butun olculer sabit.
   Renkler artboardda #16222a ve #87be7d; sitenin kendi tokenlari
   kullanildi (--mavi-koyu, --green), yeni renk uretilmedi.
   Dolum orani --dolu ile geliyor (0 ile 1 arasi), JS yaziyor.
   HTML degismedi: .ukno display:contents ile cozuluyor. */
.ukargo{container-type:inline-size}
/* Alt dolgu = cubuk yuksekligi (11,7) + etiketin altindan cubugun
   ustune kalan bosluk (19,6). Olculdu: 17 px iken etiket tabani ile
   iz ustu arasi 9 px cikiyordu, artboardda 23,31 ("hala kayik"). */
/* Gulbin, 28 Eylul: "kargo cubuklari buradaki tasarim gibi olsun. her
   yerde farkli bir tasarim var." + "beyaz alanda da koyu mavi olacak."
   Hedef, acilis bandindaki adim seridi (.syadim): CERCEVELI iz, ortasinda
   ince dolum. Onceki hali dolu bir bloktu. Olculer .syadimlar ile ayni.
   Renk: beyaz zeminde cubugun tamami koyu mavi; yesil yalnizca koyu
   zeminde (hero seridiyle ayni). */
.ukadim{position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;column-gap:var(--r3);
  margin:0;padding:0 0 calc(18px + 8.2px);list-style:none}  /* bekci-muaf: .syadimlar olcusu */
/* cubuk: iz + dolum, listenin altinda tek parca */
.ukadim::before,.ukadim::after{content:'';position:absolute;
  pointer-events:none}
.ukadim::before{left:0;right:0;bottom:0;background:none;
  height:18px;box-sizing:border-box;        /* bekci-muaf: .syadimlar olcusu */
  border:var(--cizgi) solid var(--mavi-koyu)}
.ukadim::after{--ukg:calc((18px - 3.3px) / 2);  /* bekci-muaf: .syadimlar olcusu */
  left:var(--ukg);bottom:var(--ukg);height:3.3px;
  width:calc((100% - var(--ukg) * 2) * var(--dolu,0));
  background:var(--mavi-koyu);
  transition:width .45s cubic-bezier(.2,.8,.25,1)}
/* Koyu zeminde hero seridiyle ayni: cerceve, dolum ve tik yesil.
   Gulbin, 29 Eylul: "burada yesil olmus cizgi mavi calisacaktik."
   Sepet ozeti (.spozet) da bu listeye girmisti ama o beyaz zeminli
   bir kutu; cubuk, dolum ve tik yesil cikiyordu. Beyaz zeminde
   yesil yok, yalnizca koyu zeminde (.sykoyu) kaliyor. Sepette
   sayfanin geri kalani gibi koyu mavi. */
.sykoyu .ukadim::before{border-color:var(--green)}
.sykoyu .ukadim::after{background:var(--green)}
.sykoyu .ukad.tamam .uktik{background:var(--green)}
@media(prefers-reduced-motion:reduce){.ukadim::after{transition:none}}

.ukad{position:relative;min-width:0;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"no no" "ik et";
  align-items:center;
  /* Adimlar ayni satirda esitlenirken uzun olan kisa olani geriyordu;
     artan bosluk satirlara dagilip numarayi yukari itiyor, sayfadan
     sayfaya 3 px oynuyordu. Icerik yukaridan baslar, artan bosluk
     altta kalir. */
  align-content:start;
  column-gap:7.7px;row-gap:8.7px}             /* bekci-muaf: artboard olcusu */
.ukad .ukno{display:contents}
/* Gulbin, 22 Eylul: "01 02'yi sepet kalinliginda ve boyutunda yapar
   misin mini sepette? diger kullanilan yerlere de aynisini uygula."
   Artboardda 26,8 ve ince idi; mini sepetteki [ SEPET ] basligiyla
   ayni olcuye alindi: 17 px ve baslik agirligi. Cubuk uc yerde de
   ayni dosyadan beslendigi icin degisiklik ucune birden gidiyor. */
.ukad .ukno b{grid-area:no;justify-self:start;
  font-size:var(--f3);font-weight:var(--ag-baslik);line-height:1;
  color:var(--mavi-koyu);font-variant-numeric:tabular-nums}
.ukad .ukno b::before{content:"[ "}
.ukad .ukno b::after{content:" ]"}
/* Gulbin, 22 Eylul: "ilk siparis ve ucretsiz kargo metnini de
   'Kutunun icini dolduran ve kapatan malzemeler. Ayni kargoda
   gelir.' gibi yapar misin?" O cumle mini sepetteki .xs .hint:
   11 px, ince, buyuk harf degil, satir araligi 1,4. Etiketler de
   ayni oldu; koseli parantezler kalkti, o cumlede de yok.
   Opaklik tam kaliyor. */
.ukad .ukno span{grid-area:et;justify-self:start;min-width:0;
  font-size:var(--f5);line-height:1.4;text-transform:none;
  font-weight:var(--ag-ince);
  color:var(--mavi-koyu);overflow-wrap:anywhere}
/* Durum isigi: artboarddaki 4,76'lik kare. */
/* Artboardda isigin merkezi etiketin taban cizgisinden 3,86 yukarida;
   satirin tam ortasi 2,06 kaliyordu, 1,8 px yukari aliniyor. */
.ukad .uktik{grid-area:ik;justify-self:start;align-self:center;
  width:4.8px;height:4.8px;margin-bottom:3.6px;  /* bekci-muaf: artboard olcusu */
  border:0;border-radius:0;background:var(--mavi-koyu);
  transition:background .3s}
.ukad.tamam .uktik{background:var(--mavi-koyu);
  animation:ilryan 2.4s ease-in-out infinite}
@keyframes ilryan{0%,100%{opacity:1}50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){
  .ukad.tamam .uktik{animation:none}}
/* Son adim sagdan hizali: isik etiketin sagina geciyor. */
.ukad:last-child{text-align:right;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"no no" "et ik"}
.ukad:last-child .ukno b,.ukad:last-child .ukno span,
.ukad:last-child .uktik{justify-self:end}
/* Gulbin, 22 Eylul: "yazinin opakligi tam olabilir sag tarafta."
   Tamamlanmamis adimin yazisi artik solmuyor; durumu isigin rengi
   ve cubugun dolumu anlatiyor. */
.ukad .ukno b,.ukad .ukno span{opacity:1}

/* Alt yazi. Artboardda cubugun alti ile taban cizgisi arasi 31,64;
   sagda, buyuk harf, koseli parantez icinde.
   Secici "p.ukyazi": mini sepette bu oge .freeb'in icindeki bir <p>
   ve ".cartp .freeb p{margin:0 0 8px;font-size:var(--f5)}" kurali
   daha guclu geliyordu; ust bosluk 31 yerine 10, punto 12 yerine 11
   kaliyordu (Gulbin, 22 Eylul: "sepette kayik hala"). */
.ukargo p.ukyazi{margin:5.2px 0 0;            /* bekci-muaf: cizgiye yakinlik */
  font-size:12px;                             /* bekci-muaf: artboard olcusu */
  line-height:1.4;color:var(--mavi-koyu);text-align:right;
  text-transform:uppercase}
.ukargo p.ukyazi::before{content:"[ "}
.ukargo p.ukyazi::after{content:" ]"}


/* DAR KUTU: artboarddaki ikinci boy. Tek degisen etiket puntosu. */
@container (min-width:560.01px){
  .ukad{column-gap:10.9px}                    /* bekci-muaf: artboard olcusu */
}
@container (max-width:560px){
  /* Etiket puntosu artik her boyda ayni (.xs .hint ile ayni);
     dar kutuda yalnizca sutun araligi kisiliyor. */
  .ukargo p.ukyazi{font-size:9px}             /* bekci-muaf: artboard olcusu */
  .ukadim{column-gap:var(--r12)}
}
/* ==ILERLEME-BITTI== */
/* Mobil icin ayri kural yok: olcuyu kap sorgusu belirliyor,
   cubuk mobilde de artboarddaki dar boya dusuyor. */

/* Varyasyon uyarisi ve kapali sepet dugmesi. Gulbin, 24 Eylul:
   "tamam stokta yok etiketi koyarsin". Yazi rengi koyu mavi, yeni
   renk eklenmedi. */
.uvaruyari{margin:var(--r1) 0 0;font-size:var(--f4);line-height:1.4;
  color:var(--mavi-koyu);opacity:.72}
.uekle[disabled]{opacity:.42;cursor:not-allowed}

/* Renk kutulari. Gulbin, 24 Eylul: "renk varyasyonlarini acikta renk
   kutulari seklinde yapabilir miyiz". Acilir liste sayfada duruyor
   ama gizli; kutular onu suruyor. Cerceve ve secili hali sitenin
   mevcut hairline dilini kullaniyor, yeni renk eklenmedi. */
.usec select.gizli{display:none}
.urenkler{display:flex;flex-wrap:wrap;gap:calc(12*100cqw/var(--AW))}
.urenkk{display:flex;flex-direction:column;align-items:center;
  gap:calc(6*100cqw/var(--AW));padding:0;background:none;border:0;
  font:inherit;color:var(--mavi-koyu);cursor:pointer;
  max-width:calc(86*100cqw/var(--AW))}
.urenkk i{display:block;width:calc(38*100cqw/var(--AW));
  height:calc(38*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);
  box-shadow:inset 0 0 0 calc(3*100cqw/var(--AW)) var(--beyaz);
  transition:box-shadow .18s ease-out,transform .18s ease-out}
.urenkk span{font-size:var(--m5);line-height:1.25;text-align:center;
  opacity:.75}
.urenkk:hover i{transform:scale(1.06)}
.urenkk[aria-pressed="true"] i{
  box-shadow:inset 0 0 0 calc(3*100cqw/var(--AW)) var(--beyaz),
             0 0 0 calc(2*100cqw/var(--AW)) var(--mavi-koyu)}
.urenkk[aria-pressed="true"] span{opacity:1}
.urenkk.yok{cursor:not-allowed}
.urenkk.yok i{opacity:.35}
.urenkk.yok span{opacity:.45;text-decoration:line-through}
@media(max-width:820px){
  .urenkler{gap:var(--r12)}
  .urenkk{max-width:22vw}
  .urenkk i{width:11vw;height:11vw;
    box-shadow:inset 0 0 0 3px var(--beyaz)}
  .urenkk[aria-pressed="true"] i{
    box-shadow:inset 0 0 0 3px var(--beyaz),0 0 0 2px var(--mavi-koyu)}
  .urenkk span{font-size:var(--f5)}
}

/* Gulbin, 25 Eylul: "sayfa kaydi." Serit artik urunun kendi
   galerisinden geliyor; kutucuk sayisi 1'den 5'e cikinca sol sutun
   uzadi, satirin boyunu o belirledi ve kare olan buyuk cerceve o
   boya gore genisleyip sag sutunun uzerine bindi. Serit artik satir
   boyunu hic belirlemiyor: height:0 ile olcuye katilmiyor,
   min-height:100% ile buyuk gorselin boyunu dolduruyor, sigmayan
   kutucuklar kendi icinde kayiyor. */
@media(min-width:821px){
  .urun2 .ukucukler{height:0;min-height:100%;overflow-y:auto;
    scrollbar-width:none}
  .urun2 .ukucukler::-webkit-scrollbar{width:0;height:0}
}

/* Dortten fazla kutucuk seride sigmiyor. Kesilmis kutu bozuk
   duruyordu; artik alt kenarda yumusak bir bitis var ve kaydirma
   kutucugun tam basina oturuyor. Maske renk degil, saydamlik. */
@media(min-width:821px){
  .urun2 .ukucukler{scroll-snap-type:y proximity;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); /* bekci-muaf: maske saydamligi */
    mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)} /* bekci-muaf: maske saydamligi */
  .urun2 .ukucuk{scroll-snap-align:start}
}

/* Talepli urun alanlari. Gulbin, 25 Eylul: "palet ustu koliyi talepli
   urune cevirelim" ve sticker icin "kendi secsin seklini". Fiyatin
   yerinde secim ozeti duruyor; olcu kutulari sekil secimine gore
   gorunuyor. Yeni renk yok, mevcut hairline dili. */
.utalepler{display:block}
.utalepsatir{display:flex;gap:calc(12*100cqw/var(--AW));flex-wrap:wrap}
.utalepalan{flex:1 1 calc(120*100cqw/var(--AW));min-width:0;display:block}
.utalepalan>span{display:block;text-transform:uppercase;opacity:.75;
  font-size:var(--m5);margin-bottom:calc(5*100cqw/var(--AW))}
.utalepalan input{width:100%;font:inherit;font-size:var(--m4);
  color:var(--mavi-koyu);background:var(--beyaz);
  border:var(--cizgi) solid var(--mavi-koyu);border-radius:0;
  padding:calc(14*100cqw/var(--AW)) calc(18*100cqw/var(--AW))}
.utalepalan input:focus{outline:none;border-color:var(--mavi-acik)}
.ufiyat.ozteklif .uftop{font-size:var(--m4);line-height:1.5}
@media(max-width:820px){
  .utalepsatir{gap:var(--r12)}
  .utalepalan{flex:1 1 40vw}
  .utalepalan>span{font-size:var(--f5)}
  .utalepalan input{font-size:4vw;padding:3.4vw}
}

/* Teklif dugmesi <a> olarak basiliyor; sayfadaki genel baglanti
   rengi .uekle'nin yesilini eziyordu ve yazi koyu mavi zeminde koyu
   mavi kaliyordu, yani gorunmuyordu. Gulbin, 25 Eylul: "palet ustu
   talep ala dondu butonlarini duzenle". Recete sepete ekle
   dugmesiyle ayni: koyu mavi akan zemin, marka yesili yazi. */
a.uekle, a.uekle:link, a.uekle:visited, a.uekle:hover{
  color:var(--green);text-decoration:none}
.usepet a.uekle{display:flex;align-items:center;justify-content:center;
  min-height:var(--buton-yuk)}

/* ---- ONERI KARTLARINDA BASLIK YUKSEKLIGI ----
   Gulbin, 28 Eylul: "urun sayfasinda ilginizi cekebilir kartlari bozuk
   mobilde de masaustunde de."
   Sebep: kart izgarasinda aciklama satiri 1fr. Kartlar ayni satirda
   ayni boya cekildigi icin, basligi TEK satir olan kartta artan yer
   aciklamanin altinda buyuk bir boslukta topluyordu; basligi IKI satir
   olan kartta bosluk yoktu. Yan yana durunca kartlar bozuk gorunuyor.
   Baslik iki satira sabitleniyor, boylece bosluk her kartta esit.
   Ayni yontem blog kartlarinda zaten kullaniliyor (build_yazi.py). */
.urun2 .pcard:not(.blogkart)>h3{
  line-height:1.2;
  min-height:calc(2*1.2em);
  align-content:start}

/* ---- URUN YORUMLARI BASLIGININ KONUMU ----
   Gulbin, 28 Eylul: "urun yorumlari basligi ilginizi cekebilir
   boyutunda ve kalinliginda olacak. ayrica konumsal olarak altina ve
   ustune gelen bosluklar da ayni olsun."
   Punto ve kalinlik zaten aynidir (.urun2 h2), alt bosluk da ayni
   (18 birim). Fark UST bosluktaydi: "Ilginizi cekebilir" .alt'in
   icinde ve .alt'in margin-top'u 66 birim; yorumlar bolumu ise
   akordeonun hemen altinda, 36 px ile geliyordu. Yorum bolumune ayni
   66 birimlik ust bosluk veriliyor, iki baslik da ayni nefesle
   basliyor.
   .ust izgarasinin kendi satir araligi zaten 40 birim veriyor;
   ustune 66 eklenince bosluk 96 px'e cikiyordu. Fark kadar, yani
   26 birim ekleniyor: 40 + 26 = 66, "Ilginizi cekebilir" ile ayni. */
.urun2 .uyorumbol{margin-top:calc(26*100cqw/var(--AW))}


/* ---- ALT SAYFA GOVDESI ----
   Acilis bandi sitenin kendi bileseni (.syhero). Govde kategori
   sayfasinin bolum kalibini kullaniyor (.S2 lite), icerik tek sutun ve
   okuma genisligi sinirli. Butun kurallar .asf altinda. */
/* Gulbin, 21 Eylul: "aciklamayi da duzgun hizala sayfaya, alti ustu
   boslugu esit olsun" -> bandin altindaki METIN blogu. Ust bosluk 21,
   alt 68 px idi; ikisi de 70 birim. */
.asf{padding:calc(70*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW))}
.asf .agovde{max-width:78ch}
.asf .agovde h2{margin:calc(40*100cqw/var(--AW)) 0
  calc(12*100cqw/var(--AW));font-size:var(--m2);
  font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mavi-koyu)}
/* Ilk baslik bolumun kendi ust bosluguyla ust uste binmesin. */
.asf .agovde>h2:first-child,.asf .agovde>h3:first-child{margin-top:0}
/* Akordeon da (SSS) bolumun ilk ogesiyse ust boslugunu tasimasin. */
.asf .agovde>.uakor:first-child{margin-top:0}
.asf .agovde h3{margin:calc(28*100cqw/var(--AW)) 0
  calc(8*100cqw/var(--AW));font-size:var(--m3);
  font-weight:var(--ag-baslik);color:var(--mavi-koyu)}
/* Gulbin, 21 Eylul: "yazilar da cok kucuk geldi... bu tarz sayfalarin
   metin boyutu" (anasayfadaki bolum ozetini ornek gosterdi, 14 px).
   Uzun metin sayfalarinda govde 15 px ve satir araligi 1,7: tuval
   hesabiyla 13 px'e dusuyordu. */
.asf .agovde p{margin:0 0 calc(16*100cqw/var(--AW));
  font-size:max(15px,var(--m4));line-height:1.7;color:var(--mavi-koyu)}
.asf .agovde ul{margin:0 0 calc(18*100cqw/var(--AW));padding:0;
  list-style:none;display:grid;gap:calc(8*100cqw/var(--AW))}
.asf .agovde li{position:relative;padding-left:calc(18*100cqw/var(--AW));
  font-size:max(15px,var(--m4));line-height:1.7;color:var(--mavi-koyu)}
.asf .agovde li::before{content:"";position:absolute;left:0;
  top:calc(9*100cqw/var(--AW));width:7px;height:7px;
  background:var(--green)}

/* Kutulu bilgi satiri */
.asf .abilgi{display:grid;gap:calc(16*100cqw/var(--AW));
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:calc(30*100cqw/var(--AW)) 0}
.asf .akut{border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(20*100cqw/var(--AW))}
.asf .akut b{display:block;font-size:var(--m5);
  font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mavi-koyu);margin-bottom:calc(6*100cqw/var(--AW))}
.asf .akut span,.asf .akut a{display:block;font-size:var(--m4);
  line-height:1.45;color:var(--mavi-koyu);text-decoration:none}
.asf .akut .buyuk{font-size:var(--m2);font-weight:var(--ag-baslik);
  line-height:1.1}

/* Form */
.asf .aform{display:grid;gap:calc(16*100cqw/var(--AW));
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:calc(760*100cqw/var(--AW));
  margin:calc(24*100cqw/var(--AW)) 0 0}
.asf .aform .genis{grid-column:1/-1}
.asf .aalan{display:block;min-width:0}
.asf .aalan>span{display:block;font-size:var(--m5);
  text-transform:uppercase;font-weight:var(--ag-baslik);
  color:var(--mavi-koyu);margin-bottom:calc(6*100cqw/var(--AW))}
/* Adet sayacinin ic girisi bu kuralin disinda: .usayac kendi
   cercevesini ciziyor, giris de cerceve alinca kutu icinde kutu
   cikiyor ve 48 px'lik ic yukseklik sayaci sisiriyordu. */
.asf .usayac input{border:0;min-height:0;padding:0;background:none;
  text-align:center;width:auto;flex:1;font-size:var(--m4)}
.asf input,.asf textarea,.asf select{width:100%;box-sizing:border-box;
  font:inherit;font-size:var(--m4);color:var(--mavi-koyu);
  background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  min-height:var(--buton-yuk);padding:0 calc(16*100cqw/var(--AW));
  border-radius:0}
.asf textarea{min-height:calc(140*100cqw/var(--AW));
  padding:calc(12*100cqw/var(--AW)) calc(16*100cqw/var(--AW));
  line-height:1.5;resize:vertical}
.asf input:focus,.asf textarea:focus,.asf select:focus{outline:none;
  border-color:var(--mavi-acik)}
.asf .agonder{grid-column:1/-1;min-height:var(--buton-yuk);
  justify-self:start;padding:0 calc(28*100cqw/var(--AW))}

/* ---- BIRINCIL BUTON ----
   Gulbin, 21 Eylul: "butonlari duzenle."
   Taban .uekle kurali yalnizca rengi ve gradyani veriyor; yukseklik ve
   punto urun sayfasina ozel bir blokta (.urun2 .uekle) tanimliydi, o
   yuzden alt sayfalarda buton 22 px'lik bir seride donusuyordu. Ayni
   olcu burada da: 48 px yukseklik, 17 px yazi, icerik ortali. */
.asf .uekle{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--buton-yuk);padding:0 calc(26*100cqw/var(--AW));
  font-size:var(--m3);text-decoration:none;flex:0 0 auto;
  box-sizing:border-box}

/* ---- OLCEK ----
   Gulbin, 18 Eylul: "metinler hep kullandigimiz sekilde mi?"
   Degildi: urun sayfalarinda merdiveni mobildeki sabit degerlere
   baglamistik ama o blok main.urun2 ile sinirliydi; alt sayfalar
   tuval hesabiyla kuculen eski merdiveni kullaniyor, govde 10,8 px
   cikiyordu. Ayni merdiven burada da gecerli: govde 13, bolum
   basligi 34, etiket 11. Acilis bandi (.syhero) kendi olceginde
   kaliyor, kategori ve sepet ile ayni. */
@media(min-width:821px){
  .asf{
    --m0:var(--f0);   /* 34 */
    --m1:var(--f0);   /* 34 */
    --m2:var(--f1);   /* 26 */
    --m3:var(--f3);   /* 17 */
    --m4:var(--f4);   /* 13 */
    --m5:var(--f5)}   /* 11 */
  /* Bolum basligi urun sayfalarindaki gibi 34. */
  .asf .agovde h2{font-size:var(--f0)}
}
@media(max-width:820px){
  .asf{padding:var(--r4) 6vw calc(var(--r4)*1.5)}
  .asf .agovde p,.asf .agovde li,.asf .akut span,.asf .akut a,
  .asf input,.asf textarea,.asf select{font-size:var(--f4)}
  .asf .akut b,.asf .aalan>span{font-size:var(--f5)}
  /* Mobilde bolum kalibi basliklari ortaliyor; okunan metnin
     basligi govdeyle ayni hizada kalmali. */
  .asf .agovde>h2:first-child{margin-top:0}
  .asf .agovde h2{font-size:var(--f1);margin-top:var(--r4);
    text-align:left !important}
  .asf .agovde h3{font-size:var(--f3);text-align:left !important}
  .asf .akut .buyuk{font-size:var(--f1)}
  .asf .akut{padding:var(--r2)}
  .asf .abilgi{gap:var(--r2);margin:var(--r3) 0}
  .asf .aform{gap:var(--r2);grid-template-columns:1fr}
  .asf textarea{min-height:140px}
  .asf .uekle{font-size:var(--f3);padding:0 var(--r3)}
}

.yz .yzgovde{max-width:78ch}
.yz .yzkapak{margin:0 0 calc(30*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);overflow:hidden;
  aspect-ratio:16/9;display:grid;place-items:center}
.yz .yzkapak img{width:100%;height:100%;object-fit:cover}
.yz .yzgovde p{margin:0 0 calc(16*100cqw/var(--AW));font-size:var(--m4);
  line-height:1.65;color:var(--mavi-koyu)}
.yz .yzgovde h2{margin:calc(38*100cqw/var(--AW)) 0
  calc(12*100cqw/var(--AW));font-size:var(--m1);
  font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mavi-koyu)}
.yz .yzgovde h3,.yz .yzgovde h4{margin:calc(26*100cqw/var(--AW)) 0
  calc(8*100cqw/var(--AW));font-size:var(--m3);
  font-weight:var(--ag-baslik);color:var(--mavi-koyu)}
.yz .yzgovde ul,.yz .yzgovde ol{margin:0 0 calc(18*100cqw/var(--AW));
  padding:0;list-style:none;display:grid;gap:calc(8*100cqw/var(--AW))}
.yz .yzgovde li{position:relative;padding-left:calc(18*100cqw/var(--AW));
  font-size:var(--m4);line-height:1.6;color:var(--mavi-koyu)}
.yz .yzgovde li::before{content:"";position:absolute;left:0;
  top:calc(9*100cqw/var(--AW));width:7px;height:7px;background:var(--green)}
.yz .yzres{margin:calc(26*100cqw/var(--AW)) 0;
  border:var(--cizgi) solid var(--mavi-koyu);overflow:hidden}
.yz .yzres img{display:block;width:100%;height:auto}
.yz .yzilgili{margin-top:calc(70*100cqw/var(--AW))}
.yz .yzilgili h2{margin:0 0 calc(22*100cqw/var(--AW));font-size:var(--m0);
  font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mavi-koyu)}
.yz .abloglar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(20*100cqw/var(--AW))}
.yz .abloglar .pcard.blogkart>h3{height:calc(3*1.15em + var(--ks)
  + var(--ks1))}
@media(max-width:820px){
  .yz .yzgovde h2{font-size:var(--f0)}
  .yz .yzgovde h3,.yz .yzgovde h4{font-size:var(--f3)}
  .yz .yzgovde p,.yz .yzgovde li{font-size:var(--f4)}
  .yz .yzilgili{margin-top:var(--r4)}
  .yz .yzilgili h2{font-size:var(--f0)}
  .yz .abloglar{grid-template-columns:1fr;gap:var(--r3)}
}