@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, 21 Eylul: once "gorsel kareyi tam doldursun" -> %86'dan
   %100'e cikmisti. Ardindan "urun neden bu kadar bu kadar buyuk":
   kucuk kartlarda dogru olan olcu, buyuk galeri cercevesinde urunu
   kenarlara yapistiriyordu. Dosyalarin ici zaten kirpildi (bos beyaz
   kalmadi), o yuzden %72 eskisinden daha buyuk duruyor ama cerceveyle
   arasinda nefes var. */
.ubuyuk img{width:72%;height:72%;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. */
.sykoyu .ukadim::before,.spozet .ukadim::before{border-color:var(--green)}
.sykoyu .ukadim::after,.spozet .ukadim::after{background:var(--green)}
.sykoyu .ukad.tamam .uktik,.spozet .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))}


/* Gulbin, 28 Eylul: "kaldiralim model secimini." Secim kutusu
   kalkinca ozel olcu sayfalarina eklenen cikis satiri. Sayfanin
   kendi olcu ve rengi; yeni renk tanimlanmiyor. */
.urun2 .ozbaska{margin:calc(14*100cqw/var(--AW)) 0 0;font-size:var(--m5);
  line-height:1.45;color:var(--mavi-koyu)}
.urun2 .ozbaska a{color:inherit;text-decoration:underline}
@media(max-width:820px){.urun2 .ozbaska{font-size:var(--f5)}}

/* 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}}
/* 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, 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)}
  /* 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}
}

/* ================= Kategori ================= */
.ktg{--AW:1724}

/* ---- SUZGECIN ALTINDAKI OLCU BULUCU ----
   Gulbin, 15 Eylul: once "[ Hazir urunler ] altindaki maddeler yerine
   daha mantikli bir sey ekleyelim" dedi, bulucu acilisa kondu; sonra
   "olcunu gir kismi ortada ve sacma kaldi, onu filtrelerin altina
   alalim" dedi. Bulucu artik suzgec sutununun altinda: masaustunde sol
   sutunun devami, telefonda yapiskan suzgec seridinin hemen altinda.
   Bilesen menudekiyle ayni (window.FINDHTML), yeniden yazilmadi.
   Zemin artik beyaz, o yuzden butun yazi ve kenarlar koyu mavi; BUL
   dugmesi duz koyu mavi, yazisi beyaz. Beyaz zeminde yesil yazi yok. */
.syolc{padding-top:0}
.syolc .mfind{border:0;padding:0;background:none}
.syolc .fbas h4{margin:0}
/* Gulbin, 15 Eylul: "olcunu gir bulalim'a yaklassin aciklama ve
   altindakiler." Baslikla aciklama arasi 12'den 5'e indi; altindaki
   butun blok onunla birlikte yukari geliyor. */
.syolc .fmetin{margin:calc(5*100cqw/var(--AW)) 0 0;font-size:var(--m5);
  line-height:1.5;color:var(--mavi-koyu)}
/* Gulbin, 15 Eylul: "aralarindaki boslugu biraz ac, cok dipdibeler."
   Mod dugmeleri, olcu kutulari ve BUL arasindaki dikey bosluk 16/12/8
   idi; sirasiyla 26/20/14'e cikti. Yatay bosluk da 8'den 10'a. */
.syolc .fmod{display:flex;gap:calc(10*100cqw/var(--AW));
  margin-top:calc(26*100cqw/var(--AW))}
/* Uc giris, BUL ve iki mod dugmesi ayni yukseklikte: menudeki kural.
   Dar sutunda BUL alt satirda, ama olcu ayni. */
.syolc .fmod button{flex:1 1 0;min-width:0;border:var(--cizgi) solid var(--mavi-koyu);
  background:none;color:var(--mavi-koyu);font:inherit;font-size:var(--m5);
  text-transform:uppercase;border-radius:0;
  height:calc(40*100cqw/var(--AW));padding:0 calc(6*100cqw/var(--AW));
  transition:background .2s,color .2s}
.syolc .fmod button[aria-pressed="true"]{background:var(--mavi-koyu);
  color:var(--beyaz)}
/* Gulbin, 15 Eylul: "urun olcusu ile en/boy/yukseklik arasindaki
   bosluk, en/boy/yuk ile BUL arasindaki boslukla esit olsun."
   Birincisi 20, ikincisi 14'tu; ikisi de 20. */
.syolc .ffm{display:flex;align-items:center;flex-wrap:wrap;
  gap:calc(20*100cqw/var(--AW)) calc(10*100cqw/var(--AW));
  margin-top:calc(20*100cqw/var(--AW))}
.syolc .ffm input{flex:1 1 0;min-width:0;width:auto;
  border:var(--cizgi) solid var(--mavi-koyu);background:none;
  color:var(--mavi-koyu);font:inherit;font-size:var(--m5);text-align:center;
  border-radius:0;height:calc(40*100cqw/var(--AW));padding:0;appearance:none}
.syolc .ffm input::placeholder{color:var(--mavi-koyu);opacity:.5}
.syolc .ffm input:focus{outline:none;border-color:var(--mavi-acik)}
.syolc .ffm em{flex:0 0 auto;font-style:normal;color:var(--mavi-koyu)}
/* Gulbin, 15 Eylul: "yandaki cm'yi kaldir, yanina da (cm) yaz."
   Kutularin yanindaki "cm" etiketi kalkti; birim artik aciklama
   satirinin sonunda, "(cm)" olarak. Bulucunun kendi metnine
   dokunulmuyor (ayni bilesen menude de var), parantez CSS'ten geliyor.
   Kutular bosalan yeri aliyor. */
.syolc .ffm .unit{display:none}
.syolc .fmetin::after{content:" (cm)"}
/* Dar sutunda uc kutu + BUL tek satira sigmiyor; dugme alt satirda
   tam genislikte duruyor. */
.syolc .ffm button{flex:1 0 100%;border:0;background:var(--mavi-koyu);
  color:var(--beyaz);font:inherit;font-size:var(--m5);text-transform:uppercase;
  border-radius:0;height:calc(40*100cqw/var(--AW));padding:0}
/* Bulucunun kendi sonuc kutusu gizli: sonuc sagdaki urun izgarasinda
   gosteriliyor. Kutu DOM'da duruyor, cunku suzgeci ondan okuyoruz. */
.syolc .fres{display:none!important}
.syolc .fnote,.syolc .fres p{font-size:var(--m5);color:var(--mavi-koyu);
  margin:calc(8*100cqw/var(--AW)) 0 0}

/* ---- MASAUSTU: SOL SABIT SUZGEC SUTUNU ----
   Gulbin, 15 Eylul: "mobil ve masaustu ayri ayri kategori sayfasi tasarla",
   "daha gelistirmeliyiz."
   Once iki ekranda da ayni sey vardi: basligin altinda yatay bir suzgec
   seridi ve altinda izgara; masaustu, mobilin genisletilmis haliydi.
   Masaustunde artik magaza duzeni var: solda sayfa kaydikca yerinde duran
   suzgec sutunu, saginda uc sutunlu urun izgarasi. Suzgecler alt alta
   liste; her satirin sagindaki sayi o suzgecin kac urun getirecegini
   soyluyor, bos suzgece basip "urun yok" ekranina dusmek gerekmiyor.
   Mobilde ayni DOM yatay yapiskan seride donuyor (asagida); tek durum,
   tek JS, iki ayri yerlesim. */
/* Gulbin, 15 Eylul: "bu olcegi masaustunde bozmayalim."
   Ana sayfadaki kart satiri olculdu: 1300 px'lik alanda bes sutun,
   kart 224 px, gorsel 222 kare, aradaki bosluk 44,9 px (satirin kendi
   jetonu: 59,5/1724). Kategori sayfasinda solda 215,6 px'lik suzgec
   sutunu var; geriye kalan alanda AYNI kart olcusunu tutturmak icin
   sutun sayisi dorde indirildi ve bosluk ana sayfanin jetonuna
   baglandi. Boylece kart iki sayfada da 223-224 px. */
/* Gulbin, 15 Eylul: "urun kartlarini biraz daha yaklastirip filtre
   alanini genisletip buyutebilirsin."
   Hesap kart olcusunu koruyacak sekilde yapildi: kart 224 px ve
   aradaki bosluk 44,9 px sabit kalacaksa liste alani 1030,6 px olmali,
   yani sutun + aralik = 269,4 px. Onceden sutun 215,6 aralik 58,1 idi;
   aralik 24,1'e indirildi, acilan yer sutuna verildi: sutun 245 px.
   Kartlar filtreye yaklasti, filtre alani genisledi, kart olcegi
   bozulmadi. */
/* Gulbin, 15 Eylul: "filtre alanini eski hale getir, cok buyudu."
   Bir onceki turda sutun 245 px'e cikmis, yazilar --m4'ten --m3'e
   buyumustu. Ikisi de geri alindi: sutun 215,6 px, yazilar --m4.
   Kart olcusu 224 px'te kalsin diye (Gulbin: "bu olcegi bozmayalim")
   sutun + aralik toplaminin 269,4 px olmasi gerekiyor; aralik 53,5'e
   ayarlandi. Kartlar orijinaline gore hala bir tik daha yakin. */
.ktgduzen{display:grid;
  grid-template-columns:calc(286*100cqw/var(--AW)) 1fr;
  gap:calc(71*100cqw/var(--AW));align-items:start;
  margin-top:calc(34*100cqw/var(--AW))}
/* ---- SUTUN YAPISKAN DEGIL ----
   Gulbin, 15 Eylul, sirasiyla: "sticky oldugunda yukari kayiyor,
   kipirdamasin" -> kaldirdim; "filtrelerin stickysi gitti" -> geri
   koydum; "filtre alani kendi icinde kaydirmali olmasin, musteri
   anlamaz, sticky kalksin tamamen" -> tamamen kalkti.
   Sutun ekrandan uzun oldugu icin yapiskan hal ya sonunu (olcu
   bulucuyu) ekran disinda birakiyor ya da sutunun kendi icinde
   ikinci bir kaydirma gerektiriyordu; ikisi de anlasilmiyor.
   Sutun artik basladigi yerde, kartlarla birlikte akiyor.
   Telefondaki suzgec seridi (.ktgcubuk) ayri oge, o yapiskan. */
.ktgyan{position:static;
  display:flex;flex-direction:column;gap:calc(30*100cqw/var(--AW));
  border-right:0;padding-right:0}
.ktgcubuk{display:flex;flex-direction:column;gap:calc(30*100cqw/var(--AW))}
/* Panel masaustunde yalnizca bir sarmal: gruplar dogrudan sutunun
   akisinda kalsin diye display:contents. Boylece aralarindaki bosluk
   yine .ktgcubuk'un araligi, tek deger. */
.ktgpanel{display:contents}
.ktgac,.ktgolc{display:none}
/* Gulbin, 15 Eylul: "urun turu, oluk ve renk arasindaki bosluklar cok;
   sirala ile olcunu gir bulalim arasindaki bosluk kadar olsun."
   Gruplarin arasinda hem .ktgcubuk'un 30'luk araligi hem de ayrica
   26'lik bir ust kenar vardi, toplam 56 ediyordu; Sirala ile bulucu
   arasi ise 30'du. Fazladan kenar kalkti, sutundaki butun dikey
   araliklar tek deger: 30. */
.ktgbas{margin:0 0 calc(12*100cqw/var(--AW));font-size:var(--m4);
  text-transform:uppercase;font-weight:var(--ag-baslik);color:var(--mavi-koyu)}
/* Cizgiler kalkinca satirlar birbirine yapisiyordu; ayirmayi artik
   bosluk yapiyor. */
.ktgsuz{display:flex;flex-direction:column;min-width:0;
  gap:calc(6*100cqw/var(--AW))}
.ktgsuz button{display:flex;align-items:center;
  gap:calc(12*100cqw/var(--AW));width:100%;text-align:left;
  border:0;background:none;color:var(--mavi-koyu);font:inherit;
  /* Gulbin, 15 Eylul: "filtreler urun olcusu boyutunda olsun."
     Bulucudaki mod dugmesi ("URUN OLCUSU") --m5; suzgec satirlari
     --m4'ten --m5'e indi, ikisi artik ayni boyda. Basliklar --m4'te
     kaliyor, onlar ayri kademe. */
  padding:calc(9*100cqw/var(--AW)) 0;font-size:var(--m5);
  text-transform:uppercase;transition:border-color .2s}
/* Gulbin, 15 Eylul: "tikli yapsak secimi?"
   Secili suzgec once yesile donuyordu, sonra yalniz agirlikla
   konusuyordu; ikisi de yeterince acik degildi. Artik her satirin
   basinda kare bir kutu var, secilince koyu maviyle doluyor. Kare,
   sitenin kose dili; yeni bir tik cizimi uretilmedi, ikon setinde
   tik ikonu yok. Secim artik cok secimli: birden fazla tur ayni anda
   isaretlenebiliyor, "Hepsi" isaretleri temizliyor. */
.ktgsuz button::before{content:"";flex:0 0 auto;
  width:calc(15*100cqw/var(--AW));height:calc(15*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);
  box-shadow:inset 0 0 0 calc(15*100cqw/var(--AW)) var(--beyaz);
  transition:box-shadow .18s ease}
.ktgsuz button.acik::before{box-shadow:inset 0 0 0 2px var(--beyaz),
  inset 0 0 0 calc(15*100cqw/var(--AW)) var(--mavi-koyu)}
.ktgsuz button span{flex:1 1 auto;min-width:0}
/* Sayi da tam gucunde koyu mavi: "opakligi dusurup rengi degistirip
   durma ya." Etiketten ayrilmasi punto farkiyla oluyor. */
.ktgsuz button i{font-style:normal;font-size:var(--m5);opacity:1;
  font-variant-numeric:tabular-nums}
/* Gulbin, 15 Eylul: "beyaz zeminde yesil yazi kullanmayalim, filtreler
   yesil oldu." Secili ve uzerine gelinen suzgec yesile donuyordu; beyaz
   zeminde yesil yazi kuralı var. Renk yerine agirlik ve cizgi konusuyor:
   uzerine gelince alt kil tam gucune cikiyor, secili olan --ag-baslik
   agirliginda ve alt cizgisi koyu mavi. Renk her durumda koyu mavi. */
.ktgsuz button.acik{font-weight:var(--ag-baslik)}

/* Gulbin, 15 Eylul: "filtre alaninda tum basliklar parantezli ve
   urun turu boyutunda kalinliginda olacak."
   Sutunda uc baslik var: [ Urun turu ], Sirala ve Olcunu gir, bulalim.
   Ilki dogruydu, digerleri parantezsizdi; "Sirala" ayrica soluk bir
   renkteydi. Ucu de ayni recete: kose parantez, buyuk harf, --m4,
   --ag-baslik, tam gucunde koyu mavi. Parantezler ::before/::after ile
   veriliyor, bulucunun kendi metnine dokunulmuyor (ayni bilesen
   menude de kullaniliyor). */
.ktgsirala{display:flex;flex-direction:column;align-items:stretch;
  gap:calc(10*100cqw/var(--AW));font-size:var(--m4);
  color:var(--mavi-koyu);text-transform:uppercase}
/* "buyutebilirsin": sutun genisleyince 11,3 px kucuk kaliyordu.
   Basliklar ve suzgec satirlari bir kademe yukari (--m4 -> --m3);
   ucu hala birbirine esit. Bulucunun aciklamasi ve olcu kutulari
   --m5'te kaliyor (Gulbin: "metin aciklama yazisi kadar olacak"). */
/* Gulbin, 15 Eylul: "urun turu / sirala / olcunu gir bulalim,
   acilistaki 'Olcusu belli, fiyati belli...' metniyle ayni boyutta
   olsun."
   O metin (.sylead) --m3 kullaniyor ama hero'nun kendi kapsayicisinda:
   hero ekran genisligi kadar (1440), bolum ise 1300 px'lik icerik
   kutusu. Ayni jetonu koysak 16,6 px cikiyordu, hero'da 18,4.
   Bu yuzden olcu kapsayiciya degil EKRANA baglandi: 22*100vw/1724,
   yani hero'nun hesabinin aynisi. Iki yerde birebir ayni punto. */
.ktgbas,.ktgsirala>span,.syolc .fbas h4{font-size:calc(22*100vw/1724);
  font-weight:var(--ag-baslik);text-transform:uppercase;
  color:var(--mavi-koyu);opacity:1}
.ktgsirala>span::before,.syolc .fbas h4::before{content:"[ "}
.ktgsirala>span::after,.syolc .fbas h4::after{content:" ]"}
/* siralama kutusu urun sayfasindaki secim kutusunun aynisi */
/* Gulbin, 15 Eylul: "onerilen yazisi aciklamalarin boyutunda olsun."
   Secim kutusu artik isletim sisteminin degil bizim bilesenimiz
   (.acilir); bicim gorunen dugmeye veriliyor. Punto aciklama
   metniyle ayni: --m5. */
.ktgsirala .acilir-dugme{font-size:var(--m5);
  padding:calc(11*100cqw/var(--AW)) calc(14*100cqw/var(--AW))}
.ktgsirala .acilir-liste li{font-size:var(--m5)}
/* Gulbin, 15 Eylul: "ayrac cizgiler kalksin." Suzgec alanindaki
   butun ayirici kil cizgiler kaldirildi: sutunun sag kenari, her
   suzgec satirinin alti, bulucunun ust cizgisi, bildirim satirinin
   alti ve telefondaki seridin alt cizgisi. Kontrollerin kendi
   cerceveleri (giris kutulari, dugmeler, isaret kutusu) duruyor;
   onlar ayirici degil, kontrol. Ayirma isini bosluk yapiyor. */
.ktgliste{min-width:0}
/* ---- GIZLEME GERCEKTEN GIZLESIN ----
   Gulbin, 15 Eylul: "suzulmuyor bu arada", "calismiyor yani yaptigin."
   Hakliydi ve benim olcumum yaniltiyordu: JS kartlari "c.hidden=true"
   ile kapatiyor, ben de testte o OZELLIGI sayiyordum. Ekranda ise
   hicbir sey degismiyordu, cunku tarayicinin [hidden]{display:none}
   kurali bir ETIKET secicisi; .pcard:not(.blogkart){display:grid} ve
   .ktgolcu{display:flex} gibi SINIF secicileri ondan guclu ve gizlemeyi
   eziyordu. Kart da bildirim de her zaman gorunuyordu.
   Artik gizleme acikca yaziliyor. Bu yuzden tur suzgecleri de ilk
   gunden beri gorsel olarak calismiyordu; ayni duzeltme onlari da
   kapsiyor. */
.ktg .ktgizgara .kkart[hidden],
.ktg .ktgbos[hidden]{display:none!important}
/* ---- BASLIK VE ACIKLAMA: EN FAZLA IKI SATIR ----
   Gulbin, 15 Eylul: "sagdakilerin kart formu bozulmus, hepsi ayni
   formda olsun; basliklar max 2 satir, aciklamalar max 2 satir."
   Uzun adli kartta baslik uc satira cikiyor, gorsel ve fiyat
   kayiyordu. Metinler derleme sirasinda zaten kisaltiliyor; bu kural
   emniyet kemeri: ne olursa olsun iki satirdan fazlasi gosterilmiyor.
   Sabit yukseklik yok, satir sayisi sinirli; telefonda da tasma yok. */
/* NOT: "-webkit-line-clamp" burada calismiyor. Kart display:grid;
   izgara ogelerinin display'i blok'a cevriliyor, "-webkit-box"
   ayakta kalmiyor (tarayici "flow-root" hesapliyor) ve kirpma
   devreye girmiyor. Onun yerine satir yuksekligi sabitlenip
   tam iki satirlik bir tavan veriliyor. */
/* DIKKAT: sayfada box-sizing:border-box var, yani max-height ic
   dolguyu da kapsiyor. Basligin 12,8 px ust + 6 px alt dolgusu
   dusunce iki satirlik tavandan geriye tek satir kaliyordu ve metin
   ortadan kesiliyordu (Gulbin: "aciklamalar boyle kesiliyor").
   Bu iki oge content-box'a alindi: tavan yalniz metni olcuyor,
   dolgu ustune ekleniyor. */
.ktg .ktgizgara .kkart>h3{box-sizing:content-box!important;
  line-height:1.18!important;max-height:2.36em!important;
  height:auto!important;overflow:hidden!important}
.ktg .ktgizgara .kkart>p{box-sizing:content-box!important;
  line-height:1.5!important;max-height:3em!important;
  height:auto!important;overflow:hidden!important}
/* Gulbin, 22 Eylul: "butun kartlarda kayma var, fiyat kismi asla
   kaymayacak, tum kartlarda cizgisini yukariya atiyor" ve ardindan
   "baslik baslangic yeri ve fiyat alani sabit, degisken olacak tek
   sey baslik iki satir degilse aciklamasi yukariya cikabilir".
   Olculdu (kendi-olcunu-tasarla, 1440 px): fiyat seridinin ustu yedi
   kartta da 371 px, ama ayirici cizgi iki kartta 362, digerlerinde
   371 idi. Cizgi aciklamanin ALT kenariydi ve aciklama tek satir
   olunca yukari kayiyordu.
   Cozum kart kalibinda (mkkartlar.py + mobil.css): cizgi artik fiyat
   seridinin UST kenari, baslik ile aciklama ustten hizali, bos alan
   aciklama satirinda. Burada yalnizca satirlari paylastiran subgrid
   kurali kalkiyor; o kural baslik satirini butun kartlarda en uzun
   basliga esitliyor ve aciklamanin yukari cikmasini engelliyordu. */

/* ---- KARTLARIN IC SATIRLARI HIZALI ----
   Gulbin, 15 Eylul: "esit olmali."
   Yan yana duran kartlarin ic satirlari (rozet, gorsel, baslik,
   aciklama, fiyat) birbirini tutmuyordu: aciklamasi olmayan kartta
   "ac" satiri kapaniyor, gorsel ve fiyat kayiyordu.
   Kart artik kendi satirlarini kendi uretmiyor, SATIRLARI IZGARADAN
   aliyor (subgrid); ayni siradaki kartlar bes satiri da paylasiyor.
   Kartin kendi alan isimleri (no rz / ph / ad / ac / fi bi ok) aynen
   duruyor. Subgrid desteklenmeyen tarayicida kural dusuyor, kart eski
   davranisina donuyor; kirilma olmuyor. */
/* Subgrid DURUYOR: kartlar satirlarini izgaradan paylasiyor, boylece
   gorselin alti, basligin ust kenari ve fiyat seridi butun kartlarda
   ayni cizgide. (22 Eylul'de bir ara kaldirildi, o zaman rozet seridi
   kimi kartta iki satira kirilinca gorsel 11 px, fiyat seridi 8 px
   kaydi; olculdu, geri alindi.) */
@supports (grid-template-rows: subgrid){
  .ktg .ktgizgara .kkart{grid-row:span 5!important;
    grid-template-rows:subgrid!important}
}
/* Gulbin, 15 Eylul: "urun kartlarinin hizasi urun turu yazisinin
   oradan baslasin."
   Izgaranin ust boslugu ana sayfanin ".row{margin-top:78/1724}"
   kuralindan geliyordu (58,8 px) ve kartlar suzgec basliginin epey
   altindan basliyordu. Ust bosluk sifirlandi; kartin ust kenari ile
   [ Urun turu ] basliginin ust kenari ayni cizgide. */
.ktgizgara{grid-template-columns:repeat(4,1fr);
  margin-top:0!important;
  gap:calc(59.5*100cqw/var(--AW))}
/* Kart duzeni burada acikca kuruluyor: ana sayfadaki satirlarin kendi
   izgara kurallari bu sayfaya sizip gorsel alanini eziyordu. */
.ktgizgara .kkart{display:flex;flex-direction:column;align-items:stretch;
  gap:calc(10*100cqw/var(--AW));padding:calc(16*100cqw/var(--AW));
  position:relative;min-width:0}
.ktgizgara .kkart .num{order:0;font-size:var(--m4);opacity:.5}
.ktgizgara .kkart .ph{order:1;display:block;width:100%;height:auto;aspect-ratio:1;
  position:relative;inset:auto;background:var(--beyaz);overflow:hidden}
.ktgizgara .kkart .ph img{width:100%;height:100%;object-fit:contain;padding:6%;
  display:block}
.ktgizgara .kkart h3{order:2;margin:0;font-size:var(--m4);
  line-height:1.18;text-transform:uppercase;font-weight:var(--ag-baslik)}
.ktgizgara .kkart .pr{order:4;font-size:var(--m3);line-height:1.1;
  font-variant-numeric:tabular-nums}
.ktgizgara .kkart .birim{order:5;font-size:var(--m5);opacity:.6}
.ktgizgara .kkart .arw2{order:6;margin-top:auto;align-self:flex-end;
  width:calc(18*100cqw/var(--AW));height:auto}
.ktgizgara .kkart .krz{position:absolute;z-index:3;top:calc(14*100cqw/var(--AW));
  right:calc(14*100cqw/var(--AW))}
/* Bu satirda bir fazladan '}' vardi; stil sayfasini erken kapatiyor ve
   ardindan gelen butun kategori kurallarini (mobil blok dahil) dusuruyordu.
   Telefonda kart dolgusu 0, sira numarasi acik geliyordu. */
@media(max-width:820px){.ktgizgara .kkart .krz{font-size:var(--f5);top:9px;right:9px}}
.ktgbos{margin:calc(50*100cqw/var(--AW)) 0;text-align:center;
  font-size:var(--m4);color:rgba(2,31,54,.6)}
@media(max-width:820px){
  /* Telefonda bulucu seridin hemen altinda, tam genislikte. Kutular ve
     BUL tek satirda esit paylasiyor; dokunma yuksekligi 44 px. */
  /* Gulbin, 16 Eylul: "olcunu gir bulalim yukariya ciksin biraz."
     Bulucu sutunun altindayken ustunde ayirici bir bosluk vardi
     (24 margin + 16 dolgu); simdi en uste geldigi icin ikisi de
     gereksiz, koyu alanla arasinda yalniz bolumun kendi dolgusu
     kaliyor. */
  .syolc{margin-top:0;padding-top:0}
  .syolc .fbas h4{font-size:var(--f4)!important}
  .syolc .fmetin{font-size:var(--f5);margin-top:2px}
  /* Gulbin, 15 Eylul: "farkli farkli kutucuklarin boyutu."
     Olculdu: girisler 60x48, mod dugmeleri 164x44, BUL 53x44. Uc ayri
     yukseklik, BUL da girislerden dar. Menudeki kural neyse o geri
     getirildi: "kutucuklar ve bul butonu ayni boyutta olacak", dorduncu
     de dahil hepsi --buton-yuk (48 px) yuksekliginde ve esit genislikte;
     mod dugmeleri de ayni yukseklikte. */
  /* Gulbin, 16 Eylul: "urun olcusu kutulari ve altindaki en boy yuk
     yukariya kaysin." Aciklama ile mod dugmeleri arasi 24, dugmelerle
     olcu kutulari arasi 16 idi; ikisi de 12'ye indi, blok 16 px yukari
     geldi. */
  .syolc .fmod{gap:var(--r1);margin-top:var(--r12)}
  .syolc .fmod button{flex:1 1 0;min-width:0;
    height:var(--buton-yuk);min-height:var(--buton-yuk);
    font-size:var(--f5);padding:0 var(--r12)}
  /* Esnek kutu ile "flex:1 1 0" dordunu esitlemiyordu: olculdu, uc giris
     67 px cikarken BUL 33 px kaliyordu (girislerin ic genisligi tabana
     etki ediyor). Satir izgaraya cevrildi; uc giris ve BUL birer 1fr,
     aralarindaki carpi ve "cm" kendi genisliginde. Dordu birebir esit.
     Sira DOM'daki gibi: giris x giris x giris cm BUL. */
  /* "cm" gizlendigi icin satirda alti oge kaldi: giris x giris x
     giris BUL. Sutun sablonu da altiya indi, yoksa BUL dar "auto"
     sutununa dusuyordu. */
  .syolc .ffm{display:grid!important;
    grid-template-columns:1fr auto 1fr auto 1fr 1fr;
    align-items:center;gap:var(--r1);margin-top:var(--r12)}
  .syolc .ffm input,
  .syolc .ffm button{width:auto!important;min-width:0!important;
    height:var(--buton-yuk)!important;min-height:var(--buton-yuk)!important;
    font-size:var(--f5)!important;padding:0!important}
  .syolc .ffm em,.syolc .ffm .unit{font-size:var(--f5)}
    .ktg{--AW:820}
  /* ---- MOBIL: UYGULAMA GIBI ----
     Masaustunun sol sutunu telefonda ise yaramiyor; ayni DOM burada
     basligin altina yapisan tek satirlik seride donuyor. Suzgecler
     yatay kayan cipler, saginda sirala. Altinda iki sutunlu izgara.
     Olculer ana sayfayla ayni --r/--f sisteminden geliyor. */
  .ktgduzen{display:block}
  /* Yapiskan olan artik sutunun tamami degil, yalniz suzgec seridi.
     Bulucu onun altinda akista duruyor (Gulbin: "filtrelerin altina"). */
  /* Gulbin, 16 Eylul: "filtreler yukariya gelsin, biraz cok bosluk var."
     Olculdu: koyu acilisin altiyla serit arasi 73 px idi; bolumun ust
     dolgusu 48, izgaranin ust kenari 24. Ikisi de kisildi, arada
     tek bir --r3 (24 px) kaldi. */
  /* Iki sinifla: bolumun 48 px'lik ust dolgusu mobil.css'te ".S2" ile
     yaziliyor, tek sinifla ezilmiyordu. */
  .S2.ktg{padding-top:var(--r2)}
  .ktgduzen{margin-top:0}
  /* Gulbin, 16 Eylul: "olcunu gir bulalim ustte olsun, filtreler altina
     gelsin." Sira DOM'da degil, order ile degistiriliyor; masaustunde
     sutun dizilisi aynen kaliyor. */
  /* Gulbin, 16 Eylul: "onerilen dropu urun kartlariyla karisiyor."
     Sebep: .ktgyan bir .sygir ogesi ve uzerinde translate var; translate
     kendi yigin baglamini kuruyor. Serit icindeki z-index:20 o baglamin
     ICINDE kaliyor, .ktgyan'in kendisi ise z:auto oldugu icin DOM
     sirasina gore kartlarin ALTINDA cizilliyordu; acilan liste beyaz ve
     opak olmasina ragmen kartlarin cizgileri ustune biniyordu.
     Sutuna kendi z-index'i veriliyor, serit ve listesi kartlarin
     uzerinde kaliyor. */
  .ktgyan{display:flex;flex-direction:column;position:relative;z-index:30;
    border-right:0;padding:0;margin:0}
  .ktgcubuk{order:1}
  /* Bulucu artik seridin altinda ve kapali basliyor; Olcu bul
     dugmesiyle aciliyor. Cerceve yok, panel dogrudan akisin icinde. */
  /* Gulbin, 16 Eylul: "olcunu gir bulalim urun turu boyutunda olsun ve
     alani urun turu kismindan baslasin hiza olarak."
     Panel ust boslugu filtre paneliyle ayni (--r2), baslik da ayni
     jeton (--f3). Iki panel ayni yerden basliyor. */
  /* Gulbin, 16 Eylul: "olcunu gir bulalim urun turu baslangic
     hizasindan baslasin." Olculdu: dugmenin altiyla [ URUN TURU ]
     basligi arasi 24 px, bulucunun basligi arasi 53 px idi. Bulucu
     paneli .ktgcubuk'un DISINDA oldugu icin seridin alt dolgusu (8)
     ustune biniyordu; panelin kendi ust dolgusu ve baslik kenarlari
     sifirlanip fark kapandi. */
  .syolc{order:2;display:none;border:0;padding:0;
    margin-top:calc(-1*var(--r12) - 1px)}
  .syolc .fbas{padding-top:0;margin-top:0}
  .syolc .fbas h4{font-size:var(--f3)!important;margin-top:0!important}
  .ktgyan.olcuacik .syolc{display:block}
  /* Gulbin, 16 Eylul: "en boy yuk altina verdigin bosluk, olcunu gir
     bulalim ustundeki boslukla ayni olsun."
     Gorunen bosluklar: Olcu bul dugmesinin alt kenariyla baslik arasi
     24 px, olcu kutularinin altiyla ilk kart arasi 16 px idi. Panel
     acikken alta 8 px ekleniyor, ikisi de 24. Panel kapaliyken
     seritle kartlar arasi 16 olarak kaliyor. */
  .ktgyan.olcuacik .syolc{margin-bottom:var(--r1)}
  .ktgolc{display:flex;align-items:center;justify-content:center;
    gap:var(--r12);min-width:0;
    border:var(--cizgi) solid var(--mavi-koyu);background:none;
    color:var(--mavi-koyu);font:inherit;font-size:var(--f5);
    text-transform:none;border-radius:0;
    min-height:var(--buton-yuk);height:var(--buton-yuk);padding:0 var(--r12)}
  .ktgolc[aria-expanded="true"]{background:var(--mavi-koyu);color:var(--beyaz)}
  /* Uc dugme tek satirda: Olcu bul, Filtrele, Onerilen. */
  .ktgsirala{min-width:0;padding-left:0}
  /* Gulbin: "mobilde yazilar ortalanmis olsun." Bulucunun basligi ve
     aciklamasi ile seritteki iki dugmenin yazisi ortaya aliniyor;
     panelde isaret kutulu satirlar solda kaliyor, kutu ile yazi
     birbirinden kopmasin. */
  /* Baslik kendi genisligi kadar bir kutu (152 px); text-align onu
     kipirdatmiyordu. Hiza kapsayiciya veriliyor. */
  /* Baslik kendi genisligi kadar bir kutuydu (152 px), text-align onu
     kipirdatmiyordu; tam genislige alinip ortalaniyor. */
  .syolc .fbas{text-align:center}
  .syolc .fbas h4{display:block;width:100%;text-align:center}
  .syolc .fmetin{text-align:center}
  /* Seritte iki sey var: [ Filtrele ] ve sirala. Gruplar panelde. */
  /* Gulbin, 16 Eylul: "filtrele, onerilen yazisi gibi olsun metin
     duzeninde" -> buyuk harf kalkti, cumle duzeni.
     "yanindaki onerilen alani da filtrele alani gibi olsun alanin
     yuksekligi" -> ikisi de --buton-yuk (44'ten 48'e, sitenin dokunma
     olcusu). Olculmustu: Filtrele 209x44, Onerilen 110x36. */
  .ktgac{display:flex;align-items:center;gap:var(--r0);min-width:0;border:var(--cizgi) solid var(--mavi-koyu);background:none;
    color:var(--mavi-koyu);font:inherit;font-size:var(--f5);
    text-transform:none;border-radius:0;
    min-height:var(--buton-yuk);height:var(--buton-yuk);
    padding:0 var(--r12);justify-content:center;gap:var(--r12)}
  .ktgac i{font-style:normal;font-variant-numeric:tabular-nums}
  .ktgac[aria-expanded="true"]{background:var(--mavi-koyu);color:var(--beyaz)}
  .ktgpanel{display:none;flex-direction:column;gap:var(--r3);
    grid-column:1/-1;order:9;padding:var(--r2) 0 0}
  .ktgcubuk.acik .ktgpanel{display:flex}
  /* Panel acilinca serit sarabilsin. */
  /* Panelde gruplar alt alta, basliklar gorunur, kutucuklu satirlar. */
  /* Gulbin, 16 Eylul: "filtre basliklari da kucucuk kaldi."
     Masaustunde baslik olcusu ekrana bagli (22*100vw/1724); 375 px'lik
     telefonda 4,8 px'e dusuyordu. Telefonda kendi jetonu: --f3. */
  /* Gulbin, 16 Eylul: once "ortalanmis olsun", ardindan "filtrede
     basliklar da sola yaslansin" dedi. Grup baslıklari da altindaki
     maddeler gibi sola yasli. */
  .ktgpanel .ktgbas{display:block;margin:0 0 var(--r12);
    font-size:var(--f3)!important;text-align:left}
  .ktgpanel .ktgsuz{flex-direction:column;overflow:visible;
    -webkit-mask-image:none;mask-image:none;gap:var(--r0)}
  /* Gulbin, 16 Eylul: "basliklar ortalanmis olsun ama altindaki
     maddeler tik ve baslik sola yaslansin, sayilar da saga."
     Satir uc parca: isaret kutusu ve etiket solda, sayi sagda. */
  .ktgpanel .ktgsuz button{width:100%;justify-content:space-between;
    border:0;background:none;color:var(--mavi-koyu);min-height:40px;
    padding:0;gap:var(--r1);white-space:normal}
  .ktgpanel .ktgsuz button::before{display:block;flex:0 0 auto;
    width:15px;height:15px;border:var(--cizgi) solid var(--mavi-koyu);
    box-shadow:inset 0 0 0 15px var(--beyaz)}
  .ktgpanel .ktgsuz button.acik::before{box-shadow:inset 0 0 0 2px var(--beyaz),
    inset 0 0 0 15px var(--mavi-koyu)}
  .ktgpanel .ktgsuz button.acik{background:none;color:var(--mavi-koyu);
    font-weight:var(--ag-baslik)}
  .ktgpanel .ktgsuz button span{flex:1 1 auto;text-align:left}
  .ktgpanel .ktgsuz button i{flex:0 0 auto;margin-left:auto}
  .ktgpanel .ktgsuz button i{display:inline;opacity:1}
  /* Gulbin, 16 Eylul: "olcu bul, filtrele ve onerilen esit butonlar
     olsun, araliklari da esit olsun." Esnek kutuda genislikler icerige
     gore degisiyordu (77 / 124 / 118). Serit izgaraya cevrildi: uc esit
     sutun, aralarinda tek bir --r1. Panel alt satirda tam genislik. */
  /* Gulbin, 16 Eylul: "onerilen kismi da ortaya gelsin, filtrele basa,
     olcu bul sona." Sira DOM'da degil, order ile; masaustunde uc oge
     de gizli ya da akista oldugu gibi kaliyor. */
  .ktgac{order:1}
  .ktgsirala{order:2}
  .ktgolc{order:3}
  .ktgcubuk{display:grid;grid-template-columns:repeat(3,1fr);
    align-items:center;position:sticky;
    gap:var(--r1);margin:0 calc(-1*var(--yan));padding:var(--r1) var(--yan);
    top:var(--hdpay,56px);z-index:20;
    /* Gulbin, 16 Eylul: "onerilen dropu alti seffaf, karisiyor acilinca."
       Serit yariseffaf beyazdi ve uzerinde backdrop-filter vardi;
       filtre kendi katmanini kurdugu icin acilan liste altindaki
       kartlarla karisiyordu. Filtre kalkti, zemin tam opak beyaz. */
    background:var(--beyaz);
    border-bottom:0}
  /* Sutun basligi yalniz masaustunde; seritte yer kaplardi. */
  .ktgbas{display:none}
  /* suzgecler yatay kayar; sag kenardaki solma "devami var" der */
  .ktgsuz{flex:0 0 auto;min-width:0;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
    gap:var(--r1);margin:0;padding:0;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,var(--siyah) calc(100% - 20px),transparent);
    mask-image:linear-gradient(90deg,var(--siyah) calc(100% - 20px),transparent)}
  .ktgsuz::-webkit-scrollbar{display:none}
  /* Cip formu geri geliyor: cerceveli, tek satir, secili olan dolu. */
  .ktgsuz button{flex:0 0 auto;width:auto;justify-content:center;
    border:var(--cizgi) solid var(--mavi-koyu);border-bottom-width:var(--cizgi);
    font-size:var(--f5);padding:0 var(--r12);gap:var(--r0);
    min-height:36px;white-space:nowrap}
  .ktgsuz button.acik{background:var(--mavi-koyu);color:var(--beyaz);
    border-color:var(--mavi-koyu)}
  .ktgsuz button.acik i{color:var(--beyaz)}
  /* Seritte isaret kutusu yok: cipin kendisi doluyor, kutu yer kaplardi. */
  .ktgsuz button::before{display:none}
  /* Sayilar seritte satiri uzatiyordu; telefonda yalniz secili olanda. */
  .ktgsuz button i{display:none}
  .ktgsuz button.acik i{display:inline}
  /* Sirala kutusu [ Filtrele ] dugmesi tarafindan eziliyordu (27 px'e
     dusmustu); kendi asgari genisligi var. */
  .ktgsirala{min-width:0;flex-direction:row;align-items:center;
    gap:var(--r1);font-size:var(--f5);padding-left:0;border-left:0}
  /* Gulbin, 15 Eylul: "mobilde filtreler kaymis."
     Olculdu: 375 px'lik seritte "SIRALA" etiketi + secim kutusu 150 px
     aliyordu, suzgec ciplerine 177 px kaliyordu; dort cip 635 px tuttugu
     icin ilk cipten sonrasi kesiliyor, serit tikanmis goruniyordu.
     Etiket yazisi telefonda kalkti (secim kutusunun kendi aria-label'i
     var), kutu daralti; suzgece 240+ px kaliyor ve kaydirma rahatladi. */
  /* Yalniz "SIRALA" etiketi gizleniyor. Once ".ktgsirala span" yazmistim;
     o secici acilir listenin icindeki .ad span'ini da gizliyor ve kutuda
     yalniz ok kaliyordu. Artik dogrudan cocuk etiket hedefleniyor. */
  .ktgsirala>span{display:none}
  .ktgsirala .acilir{width:100%;min-width:0}
  .ktgsirala .acilir-dugme{font-size:var(--f5);padding:0 var(--r12);
    min-height:var(--buton-yuk);height:var(--buton-yuk);
    max-width:none;width:100%;justify-content:center;gap:var(--r12);
    border:var(--cizgi) solid var(--mavi-koyu);background:none}
  .ktgsirala .acilir-dugme .ad{flex:0 1 auto}
  /* Gulbin, 16 Eylul: "onerilen dropu da ortalanmis olsun onerilene."
     Liste sag kenara yasliydi (left:auto;right:0); artik dugmenin
     merkezine gore ortalaniyor. */
  .ktgsirala .acilir-liste{left:50%;right:auto;min-width:180px;
    transform:translateX(-50%)}
  .ktgsirala .acilir-liste li{font-size:var(--f5);text-transform:none}
    /* Gulbin, 15 Eylul: "mobilde bir sirada 2 kart olsun."
     Kart tasarimi degismiyor, masaustundekinin aynisi kaliyor. Tek
     istisna sira numarasi: 375 px ekranda iki sutunda karta 158 px
     kaliyor, ust seritte rozet ("[ 3 GUNDE TESLIM ]") tek basina 143 px,
     numara ("[ 01 ]") 46 px istiyor; ikisi 189 px ediyor ve rozet uc
     satira boluniyordu. Numara telefonda gizleniyor, rozet satirin
     tamamini aliyor ve tek satirda duruyor. Kartin geri kalani
     (gorsel, baslik, aciklama, fiyat, ok) birebir ayni.
     Ozgulluk notu: mobil.css'te ".r3,.r4,.r5,.r6{grid-template-columns:
     repeat(2,1fr)!important}" var; sutun sayisi zaten oradan geliyor,
     burada yalniz bosluklar ayarlaniyor. */
  /* Gulbin, 16 Eylul: "filtre alaninin ustundeki boslukla altindaki
     alan ayni olsun." Olculdu: ust 16, alt 24 idi. Izgaranin ust
     kenari 16'ya cekildi, ikisi esit. */
  .ktg .ktgizgara{grid-template-columns:repeat(2,1fr)!important;
    row-gap:var(--r3);column-gap:var(--r2);margin-top:var(--r2)!important}
  .ktg .ktgizgara .kkart>.num{display:none}
  /* Gulbin, 15 Eylul: "bu ne 😃" (baslik gorselin ve aciklamanin uzerine
     biniyordu).
     Sebep: kart basligi ile aciklamasi mobil.css'te SABIT yukseklikli
     (h3 63 px, p 55 px) ve overflow:hidden. O olculer 255 px'lik serit
     kartina gore ayarlanmis; iki sutunda kart 160 px'e dusunce
     "60x40x40 Nakliye Kolisi - Standart" gibi basliklar uc satira
     cikiyor, kutuya sigmiyor ve tasiyordu.
     Punto, agirlik, bosluk, hicbiri degismedi; yalnizca bu iki kutunun
     sabit yuksekligi kalkti, metin kac satirsa o kadar yer kapliyor.
     Ayni satirdaki kartlar zaten birbirine esitleniyor. */

  .ktg .ktgizgara .kkart>.krz{grid-column:1/-1;justify-content:flex-start;
    white-space:nowrap}
  .ktgizgara .kkart{padding:var(--r2);gap:var(--r1)}
  .ktgizgara .kkart .krz{position:static;align-self:start;margin:0;
    max-width:100%}
  /* Gulbin, 16 Eylul: "png gorsellerin arkasi da beyaz olmali."
     Gorsel kutusuna hafif gri bir zemin verilmisti; saydam PNG'lerin
     arkasinda o gri goruniyordu. Zemin beyaza alindi. */
  .ktg .ktgizgara .kkart .ph{background:var(--beyaz)!important}
  /* Gulbin, 16 Eylul: "her sey birbirine gecti duzeltelim, yazilari
     biraz kucultebiliriz sigmiyorsa, yazi kesilmesin tasmasin;
     resimlerin arkasinda grilik var, oraya sigsin resimler."
     Olculdu: iki sutunda kart 160 px, kartin ic genisligi 144 px.
     Baslik 17 px buyuk harfle uc satir istiyordu, iki satirlik kutuya
     sigmayip kesiliyordu. Baslik 13 px'e, aciklama 11 px'e indi; ikisi
     de iki satira rahat siginca kesme de tasma da kalmiyor.
     Gorsel kutusunun gri zemini duruyor ama resmin %6'lik ic dolgusu
     kalkti: resim artik o gri alani birebir dolduruyor. */
  /* Iki satirlik tavan telefonda hala kesiyordu (2 baslik, 9 aciklama).
     "yazi kesilmesin tasmasin" dedigi icin tavan kaldirildi: metin kac
     satirsa o kadar yer kapliyor. Kartlar birbirine subgrid ile
     hizalandigi icin ayni siradaki iki kart yine ayni boyda kaliyor. */
  /* Gulbin, 16 Eylul: "fiyatin ustundeki cizgi ne olursa olsun ayni
     yerde olacak, aciklama 2 satir olacak."
     Baslik ve aciklama tam iki satirlik kutulara sabitlendi (min ve max
     ayni): metin bir satir da olsa iki satirlik yer kapliyor, uc satira
     da cikmiyor. Boylece fiyat satiri her kartta ayni yukseklikte
     basliyor. Metinler derlemede zaten iki satira sigacak sekilde
     kisaltiliyor. */
  .ktg .ktgizgara .kkart>h3{font-size:var(--f4)!important;
    line-height:1.25!important;
    min-height:2.5em!important;max-height:2.5em!important}
  .ktg .ktgizgara .kkart>p{font-size:var(--f5)!important;
    line-height:1.4!important;
    min-height:2.8em!important;max-height:2.8em!important}
  .ktg .ktgizgara .kkart .ph img{padding:0!important;width:100%!important;
    height:100%!important;object-fit:contain!important}
  /* Gulbin, 16 Eylul: "urun kartlarinda fiyat alani orantisiz ve cok
     buyuk." Olculdu: baslik 13 px iken fiyat 20 px ve satir 72 px
     yuksekligindeydi. Fiyat --f3'e (17), satirin ic dolgusu 16'dan
     12'ye indi; satir 72'den ~43'e dusuyor ve baslikla orani
     duzeliyor. */
  /* Satirin 72 px'te takili kalmasinin sebebi punto degil, mobil.css'in
     dokunma olcusu icin verdigi min-height:72px idi. Satir --buton-yuk
     (48) yuksekligine cekildi; dokunma olcusu hala yeterli. */
  /* Gulbin, 16 Eylul: "fiyatta karismis metinler ve ok."
     Uzun fiyat ("2.673,75 TL") 17 px'te satira sigmiyor, "adet fiyati"
     ve ok ustune biniyordu. Satirdaki uc oge de daraltilabilir yapildi:
     fiyat 13 px, birim tasarsa uc noktayla kesiliyor, ok kendi
     genisliginde sabit. */
  .ktg .ktgizgara .kkart>.pr{font-size:var(--f4)!important;
    min-height:var(--buton-yuk)!important;min-width:0!important;
    white-space:nowrap;
    padding:var(--r12) 0 var(--r12) var(--r2)!important}
  .ktg .ktgizgara .kkart>.birim{font-size:var(--f5)!important;
    min-height:var(--buton-yuk)!important;min-width:0!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:var(--r12) 0 var(--r12) var(--r1)!important}
  .ktg .ktgizgara .kkart>.arw2{flex:0 0 auto;margin-right:var(--r12)}
  .ktgizgara .kkart .pr{font-size:var(--f3)}
  .ktgizgara .kkart .birim{font-size:var(--f5)}
  .ktgizgara .kkart .arw2{width:16px}
      }