@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)}
}