/* Erfa Atelier — global styles. Kaynak: Claude Design prototipindeki <style> bloğu. */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;color-scheme:dark}
/* 'Barlow Yedek' ARADA duruyor: Barlow inene kadar Arial onun ölçülerine
   bükülmüş halde çizilir, takas anında satır kutusu değişmez. fonts.css'e bak. */
body{background:#1a1612;color:#fff;font-family:'Barlow','Barlow Yedek',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#fff;color:#1a1c20}
input:focus{outline:none;border-color:rgba(255,255,255,.58) !important;background:rgba(255,255,255,.07) !important}
input::placeholder{color:rgba(255,255,255,.62)}
img,video{max-width:100%}
button{font:inherit;color:inherit}button,a{touch-action:manipulation}
button:disabled{opacity:.52}

body.is-locked{overflow:hidden}
.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.skip-link{position:fixed;top:8px;left:16px;z-index:120;transform:translateY(-160%);background:#fff;color:#111;min-height:44px;display:inline-flex;align-items:center;padding:12px 16px;border-radius:6px;font-weight:600;text-decoration:none}.skip-link:focus{transform:translateY(0)}

/* ---- scroll reveal (JS toggles .is-shown via IntersectionObserver) ---- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
[data-reveal].is-shown{opacity:1;transform:none}

/* ILK EKRANDAKI OGELER JS'E BAGLI OLMASIN — LCP kapisi buydu.
   [data-reveal] varsayilan olarak opacity:0 ile basliyor ve gorunurlugu
   main.js initReveal() veriyor. Ancak LCP spesifikasyonuna gore opacity:0
   olan bir oge LCP ADAYI SAYILMAZ: kahraman H1 (index.php:69) ekranda
   olmasina ragmen JS gelene kadar hic "boyanmis" kabul edilmiyordu.
   Olculdu: mobil / sayfasi LCP 6000 ms. Video ve fontlar elendi — hero.mp4
   diskten tamamen kaldirilip olculdugunde LCP 6024 ms, yani fark yok.

   Cozum: kahraman blogunda OPACITY HIC 0 OLMAZ. Giris hareketi yalnizca
   transform ile yapilir; transform LCP uygunlugunu etkilemez, yani oge ilk
   boyamada zaten LCP adayidir. Kaydirmayla acilma sistemi ilk ekranin
   ALTINDA aynen calismaya devam eder — orada JS gecikmesinin bir bedeli
   yok, cunku oge zaten gorunur alanda degil. */
[data-hero] [data-reveal],
[data-hero][data-reveal]{opacity:1;animation:eaHeroGiris .8s cubic-bezier(.16,1,.3,1) both}
@keyframes eaHeroGiris{from{transform:translateY(22px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  [data-hero] [data-reveal],
  [data-hero][data-reveal]{animation:none;transform:none}
}

@media(max-width:820px){[data-checkout-grid]{grid-template-columns:1fr !important}}
.checkout-header{position:fixed;z-index:70;top:0;left:0;right:0;min-height:76px;padding:14px clamp(16px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:rgba(28,24,19,.94);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px)}
.checkout-header img{display:block;width:auto;height:34px}
/* Baslikta 34px'lik dokunulabilir bir ikon vardi; logo GORSELI 34px kalir
   ama onu saran baglanti/buton 44px hedef alir. */
.checkout-header a,.checkout-header button{min-height:44px;display:inline-flex;align-items:center}.checkout-header>div{display:flex;align-items:center;gap:10px}.checkout-header button,.checkout-header>div>a{min-height:46px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:transparent;color:#fff;padding:10px 16px;font-size:13px;text-decoration:none;cursor:pointer}
.checkout-page input:not([type=checkbox]):not([type=radio]),.checkout-page textarea,.checkout-page select{width:100%;padding:14px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#17140f;color:#fff;font-family:'Barlow',sans-serif;font-size:14px}
.checkout-page [data-delivery-grid]>div>label,.checkout-invoice>label{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.78);margin-bottom:8px}.checkout-page textarea{resize:vertical;line-height:1.5}
.checkout-section{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0}
.checkout-invoice{border-top:1px solid rgba(255,255,255,.1);padding-top:14px}.checkout-invoice>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13px;color:rgba(255,255,255,.8)}.checkout-invoice>label{margin-top:12px}.checkout-invoice>label span,.checkout-invoice p{color:rgba(255,255,255,.6);font-size:12px}.checkout-invoice p{margin-top:7px;line-height:1.5}
.checkout-pay-option{cursor:pointer;display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:transparent;transition:background .25s,border-color .25s}.checkout-pay-option.is-selected{background:rgba(217,192,143,.06) !important;border-color:rgba(217,192,143,.55)}
.checkout-summary{border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:clamp(22px,3vw,30px);background:#211d18;position:sticky;top:96px}.checkout-edit-cart{cursor:pointer;border:0;background:transparent;color:rgba(255,255,255,.72);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.checkout-mobile-summary{display:none;width:100%;min-height:52px;margin:-16px 0 30px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#211d18;color:#fff;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.checkout-mobile-summary span{font-size:13px;color:rgba(255,255,255,.75)}.checkout-mobile-summary strong{font-size:14px;font-weight:600}
.checkout-footer{min-height:80px;padding:22px clamp(16px,4vw,64px);display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;background:#14110e;color:rgba(255,255,255,.62);font-size:12px}/* Odeme footer'indaki uc baglanti 14px yuksekliginde ve dolgusuzdu (hedef
   ~15px). Bunlar cumle ICI degil, bagimsiz baglantilar — WCAG 2.5.5
   istisnasi kapsaminda degiller. Odeme sayfasinda yasal metne erisim
   ozellikle onemli. */
.checkout-footer a{color:rgba(255,255,255,.78);text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
@media(max-width:820px){.checkout-mobile-summary{display:flex}}
/* sticky KALDIRMA 820px'e tasindi. Izgara 820px'te tek kolona duşuyor
   (@media(max-width:820px) [data-checkout-grid]) ama sticky kaldirma yalniz
   520px'te devreye giriyordu: 521-820px arasinda tek kolonda tek basina
   duran uzun bir aside sticky kaliyor ve tablet/katlanabilir cihazlarda
   tahmin edilemez kayma uretiyordu. */
@media(max-width:820px){.checkout-summary{position:static}}
@media(max-width:520px){.checkout-header>div>a{display:none}.checkout-header button{padding:10px 14px}.checkout-page main{padding-top:104px !important}}
@media(max-width:900px),(pointer:coarse){[data-tilt-hint]{display:none !important}}
@media(max-width:900px){
  [data-hero]{min-height:100svh !important;height:auto !important}
  /* padding-bottom 44 -> 16: masaustunde hero-inner'in alt dolgusu 16 px ve
     serit gap'i de 16 px, yani "Hepsi Alanya'daki atolyemizde" hapi kartlar
     ile kategori satirinin TAM ORTASINDA duruyor. Mobilde 44 kaliyordu ve
     ayni hap 44/16 ile yukari kayik goruntuyordu (olculdu 390x844).
     justify-content:center burada KALIYOR: mobilde hero icerige gore
     buyuyor (yukaridaki height:auto), tasma riski yok. */
  [data-hero-inner]{padding-top:118px !important;padding-bottom:16px !important;justify-content:center !important;gap:0}
  [data-hero-title]{font-size:clamp(42px,12vw,64px) !important;margin-bottom:16px !important;max-width:100% !important}
  [data-hero-strip]{padding-bottom:28px !important}
  [data-hero-stats]{gap:10px !important;width:100%;max-width:420px}
  [data-hero-stats] > div{width:calc(50% - 5px) !important;min-width:0 !important;padding:16px !important}
}
@media(max-width:520px){
  [data-hero-title]{font-size:clamp(38px,13vw,52px) !important}
  [data-hero-badge]{flex-wrap:wrap;justify-content:center;text-align:center}
}
/* Kısa ekranlarda 3. stat kartını gizle; alt şerit ("Yüzük Kolye…") kırpılmasın */
/* Esik 740 -> 900px. Hero artik icerige gore buyudugu icin kirpma yok, ama
   1280x800 ve 1440x900 dizustulerinde ilk ekrana sigmasi icin ucuncu stat
   kartinin dusmesi gerekiyor: olculen gerekli ic yukseklik 1058px. */
@media(max-height:900px){[data-hero-stats] > div:nth-child(3){display:none}}

/* Hero arka plan videosu JS opacity'yi 1 yapınca ani sıçrama yerine yumuşak fade */
[data-bg-video]{transition:opacity .6s ease}

.lg,.lgs{position:relative;overflow:hidden}
/* ===== CAM ROZETLERIN KENDI ZEMINI OLMALI ================================
   .lg / .lgs sinifi tek basina HICBIR zemin tanimlamiyordu; kutu yalnizca
   ::before ile bir kenar cizgisi ciziyor. Inline zemini olan kullanimlar
   (nav, cerez bandi, ozet karti...) sorunsuz; ama zemini OLMAYANLAR
   dogrudan fotografin/videonun uzerine dusuyor.
   OLCULDU (gercek piksel):
     /koleksiyon  "925 Ayar · Nikelsiz · Kararmaz"  arka rgb(98,94,92) -> 3,49
     /koleksiyon  "Kucuk Parti · Tek Tek"           arka rgb(78,73,67) -> 4,41
     /anasayfa    "925 Ayar Gumus"                  arka rgb(120,107,102) -> 4,52
   Hepsi ayni sebep: parlak bir taki fotografinin uzerinde duran seffaf rozet.
   :not([style*="background"]) SART — inline zemini olanlara dokunmaz, yani
   tasarlanmis cam yuzeylerin gorunumu degismez, yalnizca "zemini unutulmus"
   olanlar kapatilir. brightness() arkayi koyulastirir, blur cam hissini
   korur. Yeni deger: en parlak fotograf uzerinde bile ~rgb(48,44,42),
   yani rgba(255,255,255,.6) metin 5,9:1. */
.lg:not([style*="background"]),
.lgs:not([style*="background"]){
  background:rgba(16,13,10,.42);
  backdrop-filter:blur(12px) saturate(1.15) brightness(.5);
  -webkit-backdrop-filter:blur(12px) saturate(1.15) brightness(.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg:not([style*="background"]),
  .lgs:not([style*="background"]){background:rgba(16,13,10,.82)}
}
/* ----- Ayni sorunun ikinci hali: zemin VAR ama beyazin sifira yakin bir
   tonu (rgba(255,255,255,.01) ... .08). Bu "zemin" degil, yalnizca camin
   parlakligi; okunabilirlik yine tamamen backdrop-filter:blur()'a bagli.
   Blur YAPIYI bulaniklastirir ama PARLAKLIGI korur.
   OLCULDU: /koleksiyon guven karti (koleksiyon.php:32,
   background:rgba(255,255,255,.06)) parlak taki fotografi uzerinde
   arka plan rgb(98,94,92) -> "925 Ayar · Nikelsiz" satiri 3,49:1.
   Oznitelik secicisi TAM OLARAK bu deseni yakalar: beyazin .0X tonu.
   Gercek bir zemini olanlar (cerez bandi rgba(28,24,19,.96), ozet karti
   #211d18 ...) etkilenmez.
   !important sart cunku hedef deger inline (PHP bizim bolgemiz degil);
   yalniz backdrop-filter eziliyor, beyaz tonu ve kenar cizgisi duruyor —
   yani camin GORUNUMU ayni, altindaki dunya koyuluyor.
   Yeni deger: ayni fotograf uzerinde arka plan ~rgb(61,58,57) -> 5,0:1. */
.lg[style*="background:rgba(255,255,255,.0"],
.lgs[style*="background:rgba(255,255,255,.0"],
.lg[style*="background:rgba(255, 255, 255, 0.0"],
.lgs[style*="background:rgba(255, 255, 255, 0.0"]{
  backdrop-filter:blur(14px) saturate(1.15) brightness(.5) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15) brightness(.5) !important;
}
/* LIQUID GLASS — kanonik tanım. Eskiden personalized.css içindeydi ve o dosya
   yalnız kişiye özel sayfalarında yükleniyordu; ana sayfa sınıfı kullanamıyordu.
   styles.css her sayfada yükleniyor, kopya çıkarmadan tek kaynak burası. */
/* background rgba(255,255,255,.01) = pratikte SEFFAF; blur(4px) ise
   parlakligi hic dusurmez. OLCULDU (/kisiye-ozel 390px, gercek piksel):
   .personalized-scene-kicker.liquid-glass rozeti video karesinin uzerinde
   duruyor, arka plan rgb(97,91,88) -> "01" sayaci 2,99:1 (esik 4,5).
   Beyaz ton ve kenar parlakligi aynen korunur; yalniz backdrop
   koyulastirilir. Yeni deger ayni karede ~rgb(48,45,44) -> 5,4:1.
   .liquid-glass-strong zaten blur(50px) tasiyor; brightness ona da eklenir
   ki kolyenin parlak gumusu uzerinde de ayni garanti gecerli olsun. */
.liquid-glass,.liquid-glass-strong{position:relative;overflow:hidden;background:rgba(255,255,255,.05);background-blend-mode:luminosity;backdrop-filter:blur(10px) brightness(.5);-webkit-backdrop-filter:blur(10px) brightness(.5);box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .liquid-glass,.liquid-glass-strong{background:rgba(16,13,10,.8)}
}
.liquid-glass::before,.liquid-glass-strong::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.liquid-glass-strong{backdrop-filter:blur(50px) brightness(.5);-webkit-backdrop-filter:blur(50px) brightness(.5);box-shadow:4px 4px 4px rgba(0,0,0,.05),inset 0 1px 1px rgba(255,255,255,.15)}
.liquid-glass-strong::before{background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.2) 80%,rgba(255,255,255,.5) 100%)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lgs::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.2) 80%,rgba(255,255,255,.5) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes addPop{from{transform:scale(.92);opacity:.5}to{transform:scale(1);opacity:1}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes auroraDrift{0%{transform:translate3d(-4%,-3%,0) scale(1.12)}50%{transform:translate3d(4%,3%,0) scale(1.28)}100%{transform:translate3d(-4%,-3%,0) scale(1.12)}}

[data-desknav]{display:none}
[data-mobnav]{display:flex}
@media(min-width:900px){[data-desknav]{display:flex !important}[data-mobnav]{display:none !important}}
@media(max-width:380px){.mobile-fav-btn{display:none !important}[data-mobnav]{gap:6px !important}}

/* ===== UST GEZINME: CAM PANEL KENDI OKUNABILIRLIGINI TASIMALI ===========
   OLCUM (tools/qa-kontrast.mjs, gercek piksel): /magaza 1500px kaydirilinca
   cubuk parlak urun fotograflarinin ustune geliyor ve .nav-link kontrasti
   1,38:1'e dusuyor (esik 4,5). Ayni kok sebep 5 sayfada 38 ornek uretti.
   Kanit: .qa/ss/uiux/_dogrula/nav-magaza-once.png — link metinleri ve beyaz
   konturlu ikonlar GOZLE GORULUR sekilde kayboluyor.

   Sebep: partials/nav.php:16-45 satirlarindaki inline zemin
   rgba(255,255,255,.06), yani pratikte yok; tum okunabilirlik
   backdrop-filter:blur(10px)'e yaslanmis. Blur YAPIYI bulaniklastirir ama
   PARLAKLIGI korur: parlak bir gumus fotografinin uzerinde arka plan lumasi
   ~196 kalir, .6 alfali beyaz link onun icinde erir.

   Cozum, cam hissini bozmadan: backdrop-filter'a brightness() eklenir —
   arkadaki her sey once koyulastirilir, sonra bulaniklastirilir. Ustune
   gercek (seffaf olmayan) bir zemin gelir. Hesap (beyaz .6 metin):
     bembeyaz foto 255 -> brightness(.42)=107 -> zemin .55 karisimla 58
     -> kontrast 5,2:1     (onceden 1,38)
     koyu hero 30        -> zemin 16 -> kontrast 7,3:1
   Yani ARKADA NE OLURSA OLSUN esigin ustunde.
   !important sart: hedef degerler inline style'da (PHP bizim bolgemiz degil).
   Kalici cozum bu kurallari nav.php'den CSS'e tasimak — rapora yazildi. */
nav > .lg,
nav > [data-desknav],
nav > [data-mobnav] > .lg{
  background:rgba(18,15,12,.55) !important;
  backdrop-filter:blur(18px) saturate(1.25) brightness(.42) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25) brightness(.42) !important;
}
/* backdrop-filter yoksa (eski Firefox, bazi gomulu tarayicilar) bulaniklik da
   koyulastirma da olmaz: o zaman zemin TEK BASINA yetmeli. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav > .lg,
  nav > [data-desknav],
  nav > [data-mobnav] > .lg{background:rgba(18,15,12,.88) !important}
}

/* hover states (prototype used style-hover=; here plain :hover) */
.nav-link:hover{color:#fff !important}
.nav-icon-btn:hover{background:rgba(255,255,255,.10) !important}
.img-hover-zoom{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.img-hover-zoom:hover{transform:scale(1.05)}
.cart-remove:hover{color:rgba(255,255,255,.9) !important}
/* "SEPETE EKLENDI" DURUMU. Eskiden butun buton parlak yesile (#8fbf9f)
   boyaniyordu. Iki sorun: (1) parlak yesil bu espresso+sampanya palette
   YABANCI, luks algisini kiriyor; (2) dolu bir yesil buton hala "birincil
   eylem" gibi bagiriyor, oysa eylem BITTI — dogru sinyal geri cekilmek.
   Yeni hal: sampanya konturlu, ici hafif dolu, onaylanmis bir cip.
   Yesil hala var ama yalnizca isaret olarak (::after ile ✓ degil, JS metni
   zaten "Eklendi" yaziyor). Kontrast: #ecdcb4 uzerine rgba(217,192,143,.16)
   ile koyu zemin -> 8,1:1. */
.is-added{background:rgba(217,192,143,.16) !important;color:#ecdcb4 !important;
  box-shadow:inset 0 0 0 1px rgba(217,192,143,.55) !important}
.is-selected{background:#fff !important;color:#000 !important}
.shop-category-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;margin-bottom:18px;scroll-snap-type:x proximity}
.shop-category-link{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(255,255,255,.14);border-radius:9999px;font-size:13px;text-decoration:none;color:rgba(255,255,255,.82);scroll-snap-align:start}
.shop-category-link:hover{border-color:rgba(255,255,255,.42);color:#fff}
.shop-category-link.is-active{background:#fff;color:#16120e;border-color:#fff;font-weight:600}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:30px;position:relative}
/* Filtre paneli acilinca satir 200px'e cikiyor ve align-items:center yuzunden
   "0 parca" + siralama ciplerinin tamami panelin DIKEY ORTASINA kayiyordu:
   1280px'te solda 640px bosluk, sayac hicbir seye hizali degil.
   Panel acikken ust hizaya don. */
.shop-toolbar:has(.shop-filters[open]){align-items:flex-start}
/* SIRALAMA CIPLERI. Dokunma hedefi 44px; secili olan beyaz zeminle
   isaretlenir ki hangi siralamanin uygulandigi panel acmadan gorunsun.
   Mobilde yatay kaydirilabilir tek satir: sarmalayip araç cubugunu iki
   satira cikarmasin. */
.shop-sort-chips{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shop-sort-chips::-webkit-scrollbar{display:none}
.shop-sort-chip{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:11px 15px;border:1px solid rgba(255,255,255,.14);border-radius:9999px;background:transparent;color:rgba(255,255,255,.72);font-size:12px;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.shop-sort-chip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* ===== IKI FILTRE EKSENI AYNI GORUNUYORDU ================================
   Magaza sayfasinda ust uste iki cip satiri var ve IKISININ DE secili hali
   ayni dolu beyaz haptı: ".shop-category-link.is-active" (Tumu / Kadin /
   Erkek — KATALOGU DARALTIR) ve ".shop-sort-chip.is-active" (One Cikanlar /
   Ucuzdan pahaliya — SIRAYI DEGISTIRIR, kataloga dokunmaz).
   Ayni gorsel dil iki farkli anlam tasiyinca kullanici hangi satirin ne
   yaptigini deneyerek ogrenmek zorunda kaliyor.
   Ayrim niyete gore: KATEGORI birincil eksen, dolu beyaz kalir. SIRALAMA
   bir degistirici — sampanya konturlu, dolgusuz "secili" hali alir.
   Kontrast: #ecdcb4 metin koyu zeminde 9,8:1. */
.shop-sort-chip.is-active{background:rgba(217,192,143,.12);color:#ecdcb4;
  border-color:rgba(217,192,143,.55);font-weight:600}
.shop-sort-chip:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.shop-count{padding-top:0;flex:0 0 auto;font-size:13px;color:rgba(255,255,255,.72)}
.shop-filters{width:min(100%,640px)}
.shop-filters>summary{cursor:pointer;list-style:none;margin-left:auto;width:max-content;min-height:44px;display:flex;align-items:center;padding:10px 16px;border:1px solid rgba(255,255,255,.16);border-radius:9999px;font-size:13px;color:#fff;background:#2a251e}
.shop-filters>summary::-webkit-details-marker{display:none}
/* "Filtrele & Sirala" cipi, YANINDAKI siralama cipleriyle birebir ayni
   goruntuye sahipti ama farkli davraniyor: bir panel aciyor. Ac/kapa
   isareti (chevron) bu farki gorsel olarak kuruyor — kullanici tiklamadan
   once ne olacagini bilir. Sadece bu ipucu icin ::after; ok yonu durumu
   soyler, animasyon sitenin kanonik egrisiyle. */
.shop-filters>summary::after{content:"";width:7px;height:7px;margin-left:9px;
  border-right:1.5px solid rgba(255,255,255,.62);border-bottom:1.5px solid rgba(255,255,255,.62);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--ea-dur-hizli,.25s) var(--ea-ease,cubic-bezier(.22,1,.36,1))}
.shop-filters[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
@media (prefers-reduced-motion:reduce){.shop-filters>summary::after{transition:none}}

/* CEREZ BANDI BAGLANTISI. partials/cookie-banner.php:5 satirinda inline
   `color:#ffb066` var; band 9 sayfanin hepsinde gorunuyor, yani turuncu
   sitenin EN COK gorulen aksaniydi. Inline oldugu icin !important sart;
   kalici cozum literali PHP'den kaldirmak (rapora yazildi). */
[data-cookie-banner] a{color:var(--ea-accent,#d9c08f) !important}
.shop-filter-form{margin-top:12px;padding:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#211d18}
.shop-filter-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:rgba(255,255,255,.72)}
.shop-filter-form input,.shop-filter-form select{min-width:0;min-height:46px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:#181510;color:#fff;padding:10px 12px;font:inherit}
.shop-filter-form .shop-stock-check{flex-direction:row;align-items:center;min-height:46px;font-size:13px}.shop-stock-check input{width:20px;min-height:20px;accent-color:#d9c08f}
.shop-filter-form button{cursor:pointer;min-height:46px;border:0;border-radius:6px;background:#fff;color:#15120e;font-weight:600;padding:10px 16px}
.shop-filter-form>a{min-height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-size:13px;text-underline-offset:3px}
/* ===== URUN IZGARASI — TEK KANONIK TANIM =================================
   Ana sayfa iki komsu urun izgarasini INLINE auto-fit ile cizerken magaza
   repeat(4,...) kullaniyordu. Sonuc: AYNI kart bilesenі ayni viewport'ta
   farkli boyutta. Olculdu (1280px): 3 urunlu 'Yeni gelenler' 375,5px kart,
   hemen altindaki 4 urunlu 'Cok tercih edilenler' 275,2px -> %36 fark ve
   125px yukseklik farki. 1920px'te magaza 4 sutun/421px, ana sayfa 6
   sutun/273px. auto-fit bos track'leri COKERTTIGI icin oge sayisi kart
   genisligini belirliyordu — yani duzen icerige gore oynuyordu.
   Sabit sutun sayisi: kart boyutu her yerde ayni, oge sayisindan bagimsiz.
   2->3 gecisi 640'tan 760'a tasindi: 640/641'de kart %36 kuculuyordu
   (288,4 -> 185,9px), katlanabilir telefon ve tablet donusunde goze
   carpan bir sicramaydi. */
.product-grid,.shop-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media(max-width:1100px){.product-grid,.shop-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.product-grid,.shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:340px){.product-grid,.shop-product-grid{grid-template-columns:1fr}}
.product-grid>article,.shop-product-grid>article{min-width:0}
/* min-height 2 satir: urun adina yuksek sinir yoktu, 1 satirlik ve 2
   satirlik adlar ayni sirada taban hizasini bozuyordu — o kartin
   '925 ayar' satiri ve FIYATI komsularindan ~23px asagi kayiyordu.
   Tohum verideki 16 urunun en uzunu 15 karakter oldugu icin sorun gizli;
   admin panelinden girilen 20+ karakterli bir ad mobilde iki satira cikar.
   2lh desteklenmeyen tarayicilar icin px yedegi. */
.product-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty;min-height:46px;min-height:2lh}
@media(max-width:900px){.shop-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.shop-toolbar{align-items:center}.shop-count{padding-top:0}.shop-filters{width:auto}.shop-filter-form{position:absolute;right:0;left:0;z-index:10;grid-template-columns:1fr;margin-top:10px;box-shadow:0 24px 60px rgba(0,0,0,.45)}.shop-filters>summary{white-space:nowrap}.product-card-info{flex-direction:column;gap:8px}.product-card-info>div:last-child{margin-left:0 !important;text-align:left !important}}
.gallery-thumb{border:1px solid rgba(255,255,255,.14);opacity:.55}
.gallery-thumb.is-active{border-color:rgba(255,255,255,.85);opacity:1}
.variant-option:hover:not(:disabled){border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.06) !important}
.variant-option:disabled{text-decoration:line-through;color:rgba(255,255,255,.56) !important;background:rgba(255,255,255,.025) !important}
/* ===== VARYANT KAPISI ====================================================
   Beden/uzunluk secmeden CTA `disabled` kaliyordu. Iki ayri sorun vardi:
   1) <button disabled> TARAYICIDA HIC CLICK OLAYI URETMEZ — belgeye takilmis
      yakalama fazindaki dinleyici bile gormez (olculdu: tiklamaOlayi=0).
      Yani main.js'teki "ilk secenege odaklan" kurtarma dali ulasilamaz olu
      koddu: musteri gri hapa basiyor, HICBIR SEY olmuyordu. 16 urunun
      14'unde birincil satin alma dugmesi bu durumda aciliyor.
   2) Gri hap "tukendi / bozuk" diye okunuyordu; oysa kastedilen "once secim".
   Cozum: pointer-events'i dugmeden alip sarmalayan span'e dusuruyoruz (o da
   tiklamayi ürün sayfasındaki betige veriyor), rengi de altin "sonraki adim"
   diline ceviriyoruz. Varyant secilince disabled kalkar, kural kendiliginden
   devreden cikar ve inline beyaz zemin geri gelir. */
[data-add-to-cart]:disabled{pointer-events:none}
.cta-gate-wrap{display:flex;flex:1;min-width:200px;cursor:pointer;border-radius:9999px}
.cta-gate-wrap.is-sticky{flex:0 0 auto;min-width:0}
.cta-gate:disabled{background:rgba(217,192,143,.14) !important;color:#ecdcb4 !important;
  box-shadow:inset 0 0 0 1px rgba(217,192,143,.5)}
.cta-gate-wrap:hover .cta-gate:disabled{background:rgba(217,192,143,.22) !important}
[data-variant-select]{border-radius:12px}
[data-variant-select].is-asking{animation:variantAsk .85s ease 2}
@keyframes variantAsk{0%,100%{box-shadow:0 0 0 0 rgba(217,192,143,0)}
  50%{box-shadow:0 0 0 5px rgba(217,192,143,.3)}}
@media (prefers-reduced-motion:reduce){[data-variant-select].is-asking{animation:none;
  box-shadow:0 0 0 3px rgba(217,192,143,.4)}}
[data-review-stars] label:has(input:focus-visible){outline:2px solid rgba(217,192,143,.85);outline-offset:3px;border-radius:4px}
/* Mobil sabit Sepete Ekle çubuğu */
[data-sticky-buy]{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));background:rgba(20,16,9,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 30px -12px rgba(0,0,0,.7);transform:translateY(110%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
[data-sticky-buy].is-visible{transform:translateY(0)}
@media (max-width:768px){[data-sticky-buy]{display:flex}}
/* STICKY SATIN ALMA CUBUGU FOOTER'I ORTUYORDU.
   Cubuk yuksekligi 11+44+11 = 66px + safe-area, ama body'ye hicbir alt
   dolgu telafisi verilmiyordu (yalniz WhatsApp butonu gizleniyordu).
   Footer alt dolgusu clamp(48px,8vh,90px): 844px ekranda 67,5px ile kil
   payi geciyor ama 667px ekranda 53,4px -> telif satiri 12,6px ORTULU
   kaliyordu. Simdi telafi ediliyor. */
body.has-sticky-buy{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
@media (max-width:768px){body.has-sticky-buy [data-whatsapp-float]{opacity:0;pointer-events:none;transform:translateY(12px)}}
[data-whatsapp-float]{transition:opacity .2s ease,transform .2s ease}
@media (prefers-reduced-motion:reduce){[data-sticky-buy]{transition:none}}
/* Siteyle uyumlu ince yatay kaydırma barı (upsell/son baktıklarınız/sekmeler) */
.slim-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.slim-scroll::-webkit-scrollbar{height:6px;width:6px}
.slim-scroll::-webkit-scrollbar-track{background:transparent}
.slim-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9999px}
.slim-scroll:hover::-webkit-scrollbar-thumb{background:rgba(217,192,143,.5)}
/* --- UI cila: buton hover-lift, klavye focus, azaltılmış hareket --- */
.lgs{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,background .3s ease !important}
.lgs:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
.lgs:active{transform:translateY(0)}
.lg{transition:background .3s ease,transform .25s cubic-bezier(.22,1,.36,1)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible,[data-add-to-cart]:focus-visible,[data-fav-toggle]:focus-visible,[data-variant-opt]:focus-visible,.lg:focus-visible,.lgs:focus-visible{outline:2px solid rgba(217,192,143,.85);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  [data-bg-video],[data-hover-video-card] video{display:none !important}
  .img-hover-zoom{transition:none}
  .img-hover-zoom:hover{transform:none}
  .lgs:hover,.lg:hover{transform:none}
  html{scroll-behavior:auto}
}
@media(max-width:640px){[data-product-layout]{grid-template-columns:minmax(0,1fr) !important}}
/* Ödeme yöntemi seçimi (kart/havale) */
[data-pay-option].is-selected{background:rgba(255,255,255,.1) !important;box-shadow:inset 0 0 0 1px rgba(217,192,143,.55),inset 0 1px 1px rgba(255,255,255,.12)}
@media(max-width:640px){[data-delivery-grid]{grid-template-columns:1fr !important}}

/* ANA SAYFA — KİŞİYE ÖZEL KART IZGARASI ------------------------------------
   Mobilde SABİT iki sütun. auto-fit+minmax(210px) 390px ekranda tek sütuna
   düşüyordu (2x210+boşluk = 432 > 358 kullanılabilir genişlik); dört araç alt
   alta dizilip dört ekran boyu yer kaplıyordu. Sabit iki sütunda her kart
   ~168px: kare medya + iki satır metin rahat sığıyor.
   >=760px: dört sütun tek sırada. */
.pz-kartlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2.4vw,18px)}
@media(min-width:760px){.pz-kartlar{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pz-kart{display:flex;flex-direction:column;border-radius:18px;text-decoration:none;color:#fff;background:rgba(255,255,255,.028);transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease}
@media(hover:hover){.pz-kart:hover{transform:translateY(-4px);background:rgba(255,255,255,.055)}}
/* Medya KARE (1/1): iki sütunda kartlar kısa kalıyor, dört kart tek ekrana
   sığıyor. 4/5 dikey oranda ızgara yüksekliği %25 artıp ikinci sırayı
   katlanmanın altına itiyordu. */
.pz-kart-medya{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#14100d;border-radius:18px 18px 0 0}
.pz-kart-medya>img,.pz-kart-medya>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pz-kart-medya>img{opacity:.94;transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* Video posterin ÜSTÜNE biner ve yalnız oynarken görünür olur. Böylece indirme
   başlamadan önce kart boş kalmıyor, poster duruyor. */
.pz-kart-medya>video{opacity:0;transition:opacity .45s ease;z-index:1}
.pz-kart.is-playing .pz-kart-medya>video{opacity:1}
@media(hover:hover){.pz-kart:hover .pz-kart-medya>img{transform:scale(1.05)}}
/* Medyanın altına doğru koyulaşan perde: alttaki metnin kontrastı videonun o
   anki karesine bağlı kalmasın (WCAG kontrastı videoyla dalgalanamaz). */
.pz-kart-medya::after{content:"";position:absolute;inset:auto 0 0;height:52%;z-index:2;background:linear-gradient(180deg,rgba(20,16,13,0) 0%,rgba(20,16,13,.55) 100%);pointer-events:none}
.pz-kart-govde{display:flex;flex-direction:column;gap:5px;padding:12px 13px 15px}
.pz-kart-govde>b{font-size:12px;font-weight:600;letter-spacing:.01em;color:#fff}
.pz-kart-metin{font-size:12px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.6)}
.pz-kart-eylem{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;font-weight:500;letter-spacing:.03em;color:var(--ea-accent,#d9c08f)}
.pz-kart-eylem>svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.pz-kart:hover .pz-kart-eylem>svg{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.pz-kart,.pz-kart-medya>img,.pz-kart-medya>video,.pz-kart-eylem>svg{transition:none}}

/* ===== iOS ZOOM TUZAGI ==================================================
   iOS Safari, 16px'ten KUCUK yazi tipine sahip bir alana odaklaninca sayfayi
   ~1,14x zoomlar ve GERI CIKMAZ. Odemede 5 zorunlu alan var: musteri her
   alanda bir zoom yiyor, yatay kaydirma basliyor, toplam tutar ekrandan
   cikiyor. maximum-scale=1 ile engellemek erisilebilirlik ihlali (kullanici
   yaklastirma hakkini kaybeder), dogru cozum yazi tipini buyutmek.
   Etkilenen yerler: .checkout-page (14px), giris-yap / uye-ol /
   sifremi-unuttum / sifre-sifirla (inline 14px), hesabim (inline 13,5px).
   Inline style'a medya sorgusu yazilamadigi icin tek merkezi kural + 
   !important; masaustunde tasarlanan 14px aynen kaliyor. */
@media(max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}
}

/* MOBILDE URUN GALERISI KARE.
   390x844'te 4/5 oran ana gorseli 358x447,5px yapiyordu = ekran yuksekliginin
   %53'u; ust dolguyla birlikte %67. Ustune 92px'lik kucuk gorsel seridi
   binince sag kolon 685px'te basliyor ve fiyat/varyant/CTA katlanmanin cok
   altina itiliyordu. 1/1 oran 89px kazandiriyor ve gorsel hala ekranin
   %42'si — luks algisi korunuyor, urun net gorunuyor.
   Masaustunde 4/5 aynen kaliyor: orada dikey alan sorun degil ve dikey oran
   taki fotografi icin daha uygun. */
/* Oran INLINE'dan buraya alindi: inline style CSS kurallarini eziyor,
   yani medya sorgusu hic devreye girmiyordu (olctum: mobilde oran hala
   0,80 cikiyordu). !important eklemek yerine tek kaynak yapmak dogru. */
[data-product-gallery]{aspect-ratio:4/5}
@media(max-width:760px){
  [data-product-gallery]{aspect-ratio:1/1}
}

/* ===== FOOTER BAGLANTI KOLONLARI ========================================
   Footer un 21 baglantisi 390px te 16,8px yuksekliginde ve 11px araliktaydi:
   hedefler arasi merkez mesafesi 27,8px, WCAG 2.5.5 esigi 44px. Sitenin en
   yogun tiklama alani parmakla kullanilamiyordu (yanlis baglantiya basmak
   neredeyse kacinilmaz).
   Cozum: gap kaldirilip her baglantiya 44px taban yukseklik verildi — kolon
   yuksekligi 5 baglanti icin 84px yerine 220px oluyor, ama ayni gorsel
   yogunluk korunuyor cunku bosluk artik baglantinin ICINDE.
   Masaustunde de ayni: fare kullanicisi da daha rahat isabet eder. */
.footer-link-col{display:flex;flex-direction:column;font-size:14px;font-weight:300}
.footer-link-col>a{min-height:44px;display:flex;align-items:center}
@media(max-width:760px){
  /* Mobilde 5 kolon 2 ye iner: 130px lik kolonda 'Tum Urunler' sariyordu. */
  .footer-links-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* ===== DIKEY RITIM TOKENLARI ============================================
   Bolum bosluklari vh tabanliydi ve HICBIRI monoton degildi: olctum,
   clamp(64px,10vh,110px) -> 390px:84,4  768px:102,4  1280px:80,0  1920px:108
   yani 1280px dizustu 768px tabletten DAHA SIKI goruniyordu. Sebep basit:
   vh viewport YUKSEKLIGINE bagli ve masaustu ekranlar genis ama basik.
   Ustelik mobil tarayicida URL cubugu gizlenip acilirken vh degistigi icin
   kaydirma sirasinda dolgu oynuyordu.
   Yatay bosluklar zaten vw tabanliydi; dikey/yatay orani 390px te 5,28,
   1920px te 1,41 idi (3,7 kat kayma). Artik ikisi ayni ekseni okuyor.
   Uc kademe: tam bolum, yarim (baslik alti), ceyrek (ic bosluk).
   Olculen degerler (390/768/1280/1920): 56/56/89,6/112 · 28/28/44,8/56 ·
   20/20/32/40 — hepsi monoton artan. */
:root{
  --sec-y:clamp(56px,7vw,112px);
  --sec-y-sm:clamp(28px,3.5vw,56px);
  --sec-y-xs:clamp(20px,2.5vw,40px);
  /* ===== TEK HAREKET EGRISI =============================================
     Sayimda 13 farkli easing bulundu. Ikisi 42 kullanimin tamamini paylasip
     birbirinden AYIRT EDILEMIYORDU: cubic-bezier(.22,1,.36,1) (23 kez) ve
     cubic-bezier(.16,1,.3,1) (19 kez) — ikisi de expo-out ailesinden.
     Ayni hareketin iki adi olmasi, birini ayarlayip digerini unutmaya
     davetiye. Kanonik olan .22,1,.36,1 (biraz daha az agresif, arayuz icin
     dogru olan). Uzerine iki sure kademesi: hizli (dokunma geri bildirimi)
     ve sakin (gorunume giris). */
  --ea-ease:cubic-bezier(.22,1,.36,1);
  --ea-dur-hizli:.25s;
  --ea-dur-sakin:.6s;
}


/* ===== iOS YAKINLASTIRMA TUZAGI =========================================
   Safari/iOS, 16 px'ten kucuk yazi tipine sahip bir girdiye odaklaninca
   sayfayi ZORLA yakinlastirir ve geri cikmaz — kullanici formun ortasinda
   kadraji bozulmus halde kalir. Olculdu (gercek getComputedStyle, 11 sayfa
   x 8 genislik): 44 ihlal, 5 farkli girdi.
     bulten e-posta girdisi        14 px
     harita arama girdisi          14 px
     magaza filtresi <select>      12 px
     magaza filtresi sayi girdisi  12 px
     magaza stok onay kutusu       13 px
   Tek kural hepsini kapatiyor ve ILERIDE eklenecek girdileri de korur.
   Masaustunde tipografi degismesin diye yalniz dokunmatik genislikte.
   checkbox/radio/range metin girisi almaz, yakinlastirma tetiklemez. */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea { font-size: 16px }
}

/* ===== DOKUNMA HEDEFI (WCAG 2.5.8, en az 24x24) ==========================
   Olculdu: dugme gibi davranan ama satir yuksekligi kadar yer kaplayan
   metin baglantilari 17-20 px kaliyordu. Satir ici baglanti istisnasi
   bunlara UYGULANMAZ — kendi satirlarinda, tek baslarina duruyorlar. */
.nav-link{ display:inline-flex; align-items:center; min-height:24px }
@media (pointer: coarse){
  .nav-link{ min-height:44px }
}
/* Onay kutusu 20 px olculdu; kendi kutusu buyutuluyor (etiketin
   min-height:46px olmasi kutuyu buyutmuyor, yalniz satiri buyutuyor). */
.shop-stock-check input{ width:24px; height:24px; min-height:24px }