.kpop{position:fixed;inset:0;z-index:120;display:none;
  place-items:center;padding:var(--r3);
  background:rgba(2,31,54,.72);
  opacity:0;transition:opacity .28s cubic-bezier(.23,1,.32,1)}
.kpop[data-acik="1"]{display:grid;opacity:1}

/* Kabuk: gorselin tasabilmesi icin kartin ustunde yer birakiyor. */
/* Gorsel kartin ustunden tasiyor.
   DIKKAT: kabugun kendi padding'indeki yuzde, kabugun degil UST
   kapsayicinin (ekranin) genisligine gore hesaplaniyor; ilk denemede
   bu yuzden gorselle kart arasinda bosluk kaldi. Cozum: gorsel akista
   duruyor ve negatif alt boslukla karti kendi uzerine cekiyor. Bir
   cocuk ogenin yuzde boslugu kabugun genisligine gore hesaplandigi
   icin oran her ekranda ayni kaliyor.
   Gorsel %52 genislikte; oranindan (451/420) dolayi %55,8 yukseklikte.
   Alt bosluk -%20, yani gorselin son ucte biri kartin ustune biniyor;
   kartin ust ic boslugu %26 ki metin gorselin altindan bassin. */
.kpop .kpkabuk{position:relative;width:min(560px,100%);
  transform:scale(.96);opacity:0;
  transition:transform .28s cubic-bezier(.23,1,.32,1),
             opacity .28s cubic-bezier(.23,1,.32,1)}
.kpop[data-acik="1"] .kpkabuk{transform:scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){
  .kpop,.kpop .kpkabuk{transition:none}}

/* Gulbin: "slider dan kutuyu alsana cercevesi ve animasyonu ile
   birlikte", "cizimi niye ters koyuyosun", "icinde avize de yok".
   Iki hata vardi, ikisi de bende:
   1) ncer_p3.svg'den yalnizca d yolunu almistim; ogenin kendi
      transform'u (matrix(...,-0.999,...)) dusuyordu, o yuzden cizim Y
      ekseninde ters donuyor ve kutudan kaciyordu. Artik path etiketi
      ozellikleriyle birlikte tasiniyor.
   2) Slider'da kutu UC katman: arka kapak, avize, on kapak. Ben
      yalnizca arkayi almistim, kutu bos gorunuyordu. Ucu de burada.
   Pencere, cizim ve uc katmanin birlikte kapladigi alan:
   gorsel pikselinde (214,126)-(705,774). */
.kpop .kpurun{--pw:491;--ph:648;--px:214;--py:126;--tuval:900;
  position:relative;z-index:2;width:50%;margin:0 auto -20%;
  aspect-ratio:var(--pw) / var(--ph);overflow:hidden;
  pointer-events:none}
/* Gulbin, 23 Eylul: "kutu cerceveyle birlikte surekli donsun
   sliderdaki gibi hareket etsin yani." Slider'daki salinim kabugunun
   (.prod .fl) ayni animasyonu: bob. Cerceve de bu katmanin icinde
   oldugu icin kutuyla birebir ayni hareket ediyor. */
.kpop .kpfl{position:absolute;inset:0;
  animation:bob 7s ease-in-out infinite}
.kpop .kpsahne{position:absolute;
  width:calc(100% * var(--tuval) / var(--pw));
  height:calc(100% * var(--tuval) / var(--ph));
  left:calc(-100% * var(--px) / var(--pw));
  top:calc(-100% * var(--py) / var(--ph))}
.kpop .kpsahne img{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transform:translateY(12px)}
.kpop[data-acik="1"] .kpsahne img{
  animation:kpkutu .8s cubic-bezier(.23,1,.32,1) both}
/* Katmanlar sirayla: once kutu, sonra avize, sonra on kapak. */
.kpop[data-acik="1"] .kpsahne img:nth-of-type(1){animation-delay:.5s}
.kpop[data-acik="1"] .kpsahne img:nth-of-type(2){animation-delay:.68s}
.kpop[data-acik="1"] .kpsahne img:nth-of-type(3){animation-delay:.86s}
@keyframes kpkutu{to{opacity:1;transform:translateY(0)}}
/* Cerceve cizimi: slider'daki olcu, tuvalden yarim birim disarida
   ve bir birim genis (mkhero8'deki 1 pt buyuk cerceve tuvali). */
.kpop .kpciz{position:absolute;overflow:visible;
  left:calc(-100% * .5 / 597.73);top:calc(-100% * .5 / 597.73);
  width:calc(100% * 598.73 / 597.73);
  height:calc(100% * 598.73 / 597.73);z-index:2}
.kpop .kpciz path{fill:none;stroke:var(--green);
  stroke-width:var(--cizim-cizgi);vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1}
.kpop[data-acik="1"] .kpciz path{
  animation:kpcizil 1.6s .15s cubic-bezier(.4,0,.2,1) both}
@keyframes kpcizil{to{stroke-dashoffset:0}}
/* Gulbin: "indirim kodunu kazana basinca ya da ustune gelince avize
   cikma animasyonu olsun." Slider'da avize kutudan yukari cikiyor
   (#ch, translateY); burada da ayni: butonun uzerine gelince ya da
   odaklaninca avize kutudan disari suzuluyor. */
.kpop .kpavize{transition:transform .55s cubic-bezier(.23,1,.32,1)}
.kpop.cikik .kpavize{transform:translateY(-11%)}
@media(prefers-reduced-motion:reduce){
  .kpop .kpsahne img{opacity:1;transform:none;animation:none!important}
  .kpop .kpciz path{stroke-dashoffset:0;animation:none!important}
  .kpop .kpfl{animation:none}
  .kpop .kpavize,.kpop.cikik .kpavize{transition:none;transform:none}
}

/* Gulbin: "popup cevresinde cerceve olmasin." */
.kpop .kpkart{position:relative;z-index:1;background:var(--beyaz);
  color:var(--mavi-koyu);
  padding:26% var(--r4) var(--r3);
  text-align:center;
  max-height:calc(100dvh - var(--r4) * 3);overflow:auto}
.kpop .kpgovde{display:grid;gap:var(--r12)}

.kpop .kpetiket{margin:0;font-size:var(--f5);text-transform:uppercase;
  font-weight:var(--ag-baslik)}
.kpop .kpetiket::before{content:"[ "}
.kpop .kpetiket::after{content:" ]"}
/* Gulbin, 23 Eylul: once gradyan istedi, sonra "animasyonu kaldir",
   sonra "%10 koyu mavi olacak". Duz koyu mavi. */
.kpop .kpbuyuk{margin:0;font-size:calc(var(--f0) * 2.6);line-height:.92;
  font-weight:var(--ag-baslik);letter-spacing:normal;
  color:var(--mavi-koyu)}
.kpop h3{margin:0;font-size:var(--f1);line-height:1.15;
  font-weight:var(--ag-baslik);text-transform:uppercase}
.kpop p{margin:0 auto;font-size:var(--f4);line-height:1.6;
  font-weight:var(--ag-ince);max-width:38ch}

/* Tek satir: alan ve buton bitisik, referanstaki gibi. */
.kpop form{margin-top:var(--r1)}
/* Gulbin: "butonlar da ayrik ortalanmis olsun." Alan ve buton bitisik
   degil; ikisi de ortali, aralarinda normal bosluk. */
.kpop .kpsatir{display:grid;justify-items:center;gap:var(--r12)}
.kpop .kpsatir input{width:min(320px,100%);box-sizing:border-box;
  font:inherit;font-size:var(--f4);color:var(--mavi-koyu);
  background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  border-radius:0;min-height:var(--buton-yuk);
  padding:0 var(--r2);text-align:center}
.kpop .kpsatir input::placeholder{color:var(--mavi-koyu);opacity:.45}
.kpop .kpsatir input:focus{outline:none}
/* Gulbin: "indirim kodu kazan e posta giriniz kadar olsun."
   Buton alanla ayni genislikte. */
.kpop .kpgonder{background:var(--mavi-koyu);color:var(--beyaz);
  border:0;font:inherit;font-size:var(--f5);text-transform:uppercase;
  font-weight:var(--ag-baslik);padding:0 var(--r3);cursor:pointer;
  min-height:var(--buton-yuk);white-space:nowrap;
  width:min(320px,100%);
  transition:transform .16s cubic-bezier(.23,1,.32,1)}
.kpop .kpgonder:hover{filter:brightness(1.35)}
.kpop .kpgonder:active{transform:scale(.97)}

.kpop .kphayir{background:none;border:0;padding:0;font:inherit;
  font-size:var(--f5);text-transform:uppercase;color:var(--mavi-koyu);
  opacity:.6;cursor:pointer;justify-self:center;
  border-bottom:var(--cizgi) solid transparent;transition:opacity .2s}
.kpop .kphayir:hover{opacity:1;border-bottom-color:currentColor}

/* Gulbin: "x disarida kaliyor bu arada." Kart cercevesi kalkinca
   yarisi disarida duran dugme bosta asili kaliyordu; tamamen kartin
   icine, sag ust kosesine alindi. Zemin ve cerceve yok, yalniz cizim. */
.kpop .kpkapat{position:absolute;z-index:4;top:var(--r1);right:var(--r1);
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;
  padding:0;cursor:pointer;color:var(--mavi-koyu)}
.kpop .kpkapat svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:var(--ik-cizgi);transform:rotate(45deg);
  transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.kpop .kpkapat:hover svg{transform:rotate(135deg)}

@media(max-width:820px){
  .kpop{padding:var(--r2)}
  .kpop .kpurun{width:62%;margin-bottom:-22%}
  .kpop .kpkart{padding:29% var(--yan) var(--r3)}
  .kpop .kpbuyuk{font-size:calc(var(--f0) * 1.9)}
  .kpop h3{font-size:var(--f2)}
  .kpop .kpsatir input,.kpop .kpgonder{width:100%}
  .kpop .kpkapat{top:0;right:0}
}

/* ---- CEREZ BILDIRIMI ----
   Gulbin, 2 Ekim: "bir de cerez kabul etme yapmamiz lazim."
   Eski sayfalarda bu serit bir eklentiden geliyordu; bizim
   sayfalarimizda WordPress'in kafa ciktisi basilmadigi icin hic
   gorunmuyordu. Metin eski siteden birebir. Karar tarayicida
   saklaniyor, kabul eden bir daha gormuyor. Cerceve gorunumunde
   (3D izle) ve gizli onizleme sayfalarinda cikmiyor. */
/* Gulbin, 2 Ekim: "hesabimda bu var" (giris ekrani eski tasarimda).
   Giris eklentisinin gorunum kurallari giris sayfasina bagliydi
   (.asf), o yuzden /hesabim/ adresinde hic uygulanmiyordu. Kurallar
   artik kabukta ve sayfaya bagli degil: bilesen nerede gorunurse
   orada ayni gorunuyor. */
/* ---- SITEDEKI GIRIS EKLENTISININ KENDI EKRANI ----
   Gulbin, 2 Ekim: "eski tasarimi eklemissin bir de."
   Sayfada iki giris ekrani ust uste duruyordu. Sitede kurulu giris
   eklentisi yalniz formu degil, kendi basligini ("Oturum acin ya da
   kaydolun"), kendi spot yazisini, kendi Google dugmesini, kendi
   "YA DA" ayracini, altindaki "Hesabiniz yok mu? Kaydolun / Sifremi
   unuttum" satirini ve "Uyelik Sozlesmesi" baglantisini da basiyor.
   Bunlarin hepsi bizim sayfamizda zaten var.
   Eklentinin FORMUNA dokunmuyoruz: guvenlik anahtari, Cloudflare
   dogrulamasi ve kayit akisi onun icinde geliyor. Yalnizca cevresine
   bastigi tekrarlar gizleniyor, alanlar da sayfanin kendi diline
   geciyor: keskin koseler, sac teli cerceve, koyu mavi yazi. */
/* Gulbin, 2 Ekim: "eski sistemle ayni, sadece popup acilacak, tam
   sayfa degil, oradan kopyalayabilirsin."
   Kutu icinde (html.klokutu) eklentinin KENDI ekrani oldugu gibi
   duruyor: kendi basligi, Google dugmesi, ayraci ve alt baglantilari.
   Tam sayfa /giris/ adresinde ise sayfanin kendi dili gecerli, orada
   eklentinin tekrarlari gizleniyor. Uyelik sozlesmesi her iki
   durumda da yok (Gulbin: "bunlar kalkacak"). */
html:not(.klokutu) .dk-auth-title,
html:not(.klokutu) .dk-auth-subtitle,
html:not(.klokutu) .dk-social-login,
html:not(.klokutu) .dk-divider,
html:not(.klokutu) .dk-footer-links{display:none}
.dk-terms{display:none}
/* Kutuda bizim tekrarlarimiz kalkiyor: sekmeler, kendi Google
   dugmemiz, "ya da" etiketi, giris metni ve Sifremi unuttum. */
html.klokutu .gsekme,
html.klokutu .ggbuton,
html.klokutu .galt,
html.klokutu .gkutu>p{display:none}
html.klokutu .dk-auth-container form.woocommerce-form-login.hidden{
  display:none!important}

/* ---- KUTUDAKI EKRANIN GORUNUMU ----
   Gulbin, 2 Ekim: "google giris yap bozuk, buton cerceveler
   yuvarlatilmis, metinler kucuk harf, bize gore duzenle."
   Sebebi su: sayfalarimiz WordPress'in kendi kafa ciktisini
   basmadigi icin Google dugmesinin eklentisi kendi stil dosyasini
   yukleyemiyor; dugme ciplak kaliyor ve uzerindeki satir ici gri
   zemin gorunuyordu. Gorunumu bastan biz veriyoruz: sitenin ikincil
   dugmesiyle ayni recete, keskin kose, sac teli cerceve, koyu mavi
   yazi, buyuk harf. */
/* Gulbin, 2 Ekim: "oturum acin ya da kaydolun daha buyuk olsun." */
html.klokutu .dk-auth-title{margin:0 0 var(--r12);
  font-size:var(--m1);font-weight:var(--ag-baslik);
  text-transform:uppercase;letter-spacing:normal;color:var(--mavi-koyu)}
html.klokutu .dk-auth-subtitle{margin:0 0 var(--r2);
  font-size:var(--m4);line-height:1.5;color:var(--mavi-koyu)}
html.klokutu .dk-social-login{margin:0 0 var(--r2)}
html.klokutu .nsl-container,
html.klokutu .nsl-container-buttons{display:block;width:100%}
html.klokutu .nsl-container a{display:block;text-decoration:none}
html.klokutu .nsl-button{display:flex!important;align-items:center;
  justify-content:center;gap:var(--r12);width:100%;
  min-height:var(--buton-yuk);border-radius:0!important;
  background-color:var(--beyaz)!important;box-shadow:none!important;
  border:var(--cizgi) solid var(--mavi-koyu)!important;
  padding:0 var(--r2)}
html.klokutu .nsl-button:hover{background-color:var(--mavi-koyu)!important}
html.klokutu .nsl-button:hover .nsl-button-label-container{
  color:var(--beyaz)}
html.klokutu .nsl-button-svg-container{display:flex;align-items:center;
  width:auto;margin:0;padding:0;background:none}
html.klokutu .nsl-button-svg-container svg{width:18px;height:18px}
html.klokutu .nsl-button-label-container{font:inherit;
  font-size:var(--m4);text-transform:uppercase;letter-spacing:normal;
  color:var(--mavi-koyu);margin:0;padding:0;text-shadow:none}
/* Gulbin, 2 Ekim: "ya da etrafindaki cizgiler kalksin." Eklenti
   yazinin iki yanina cizgi ceken bir ayrac basiyordu; yalniz yazi
   kaliyor. */
html.klokutu .dk-divider{margin:var(--r2) 0;text-align:center;
  font-size:var(--m5);text-transform:uppercase;letter-spacing:normal;
  color:var(--mavi-koyu);border:0;background:none;overflow:visible}
html.klokutu .dk-divider::before,
html.klokutu .dk-divider::after{display:none!important}
html.klokutu .dk-divider>span,
html.klokutu .dk-divider>i{background:none;padding:0}
/* Gulbin, 2 Ekim: "asagidaki hesabiniz yok mu ve sifremi unuttum
   'ya da' gibi olsun, kalinlik boyut; ust uste olabilirler, yan yana
   olmak zorunda degil." Ayracla ayni punto ve renk, alt alta. */
/* Gulbin, 2 Ekim: "altta cizgi duruyor" ve "'ya da' kadar olacakti,
   kalinliklari da ayni olacakti." Eklentinin ustteki ayirma cizgisi
   ve 14 px / 500 agirligindaki yazisi kalkti; ayracin birebir ayni
   punto ve kalinligi geldi. */
html.klokutu .dk-footer-links{display:grid;justify-items:center;
  gap:var(--r12);margin-top:var(--r2);font-size:var(--m5);
  text-transform:uppercase;letter-spacing:normal;color:var(--mavi-koyu);
  border-top:0!important;padding-top:0!important;text-align:center}
html.klokutu .dk-footer-links a{font-size:var(--m5)!important;
  font-weight:var(--ag-ince)!important;color:var(--mavi-koyu)!important;
  text-decoration:none}
html.klokutu .dk-footer-links .separator{display:none}
/* Gulbin, 2 Ekim: "alttaki cizgiler kalksin." */
html.klokutu .dk-auth-container a{color:var(--mavi-koyu);
  text-decoration:none;border-bottom:0}
html.klokutu .dk-auth-container a:hover{text-decoration:underline}
html.klokutu .dk-turnstile-container{margin:0}
@media(max-width:820px){
  html.klokutu .dk-auth-title{font-size:var(--f2)}
  html.klokutu .dk-auth-subtitle{font-size:var(--f4)}
  html.klokutu .nsl-button-label-container{font-size:var(--f4)}
  html.klokutu .dk-divider,
  html.klokutu .dk-footer-links{font-size:var(--f5)}
}
.dk-auth-container{display:grid;gap:var(--r2);max-width:none;
  padding:0;border:0;background:none;box-shadow:none}
.dk-auth-container form{display:grid;gap:var(--r2);margin:0}
.dk-form-group{margin:0}
/* Gulbin, 2 Ekim: "hala koseler yuvarlatilmis." Eklenti kendi
   kuralinda border-radius:8px'i !important ile yaziyor; keskin kose
   icin bizim de ayni agirlikta yazmamiz gerekiyor. */
.dk-input{width:100%;box-sizing:border-box;border-radius:0!important;
  border:var(--cizgi) solid var(--mavi-koyu)!important;
  background:var(--beyaz);box-shadow:none!important;
  color:var(--mavi-koyu);font:inherit;font-size:var(--m4);
  padding:calc(13*100cqw/var(--AW)) calc(15*100cqw/var(--AW))}
.dk-input:focus{outline:none;box-shadow:none!important;
  border-color:var(--mavi-acik)!important}
/* Gulbin, 2 Ekim: "e posta adresi ve sifre 'ya da' gibi olacakti,
   ayni boyut ve kalinlik ve renk." Ayracla birebir ayni. */
.dk-input::placeholder{color:var(--mavi-koyu);opacity:1;
  font-size:var(--m5);font-weight:var(--ag-ince)}
/* Sayfadaki diger dolu dugmelerle ayni recete. */
.dk-submit-btn{width:100%;min-height:var(--buton-yuk);border:0;
  border-radius:0!important;color:var(--beyaz);font:inherit;font-size:var(--m4);
  text-transform:uppercase;cursor:pointer;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,
             var(--mavi-acik) 50%,var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%}
.dk-submit-btn:hover{filter:brightness(.88)}
.dk-turnstile-container{display:flex;justify-content:center}
.dk-auth-container .woocommerce-privacy-policy-text{
  font-size:var(--m5);color:var(--mavi-koyu)}
.dk-auth-container .woocommerce-privacy-policy-text a{
  color:var(--mavi-koyu)}
@media(max-width:820px){
  .dk-input,.dk-submit-btn{font-size:var(--f4)}
}

.cz{position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:none;align-items:center;gap:var(--r2);
  padding:var(--r2) var(--yan);
  /* Gulbin, 5 Ekim: "beyaz olsun cerez arkaplani" ve "sac teli
     cizgi olmayacak." Beyaz zemin, koyu mavi yazi, cizgi yok;
     serit sayfadan yalnizca golgeyle ayriliyor. Dugme sitenin
     ortak gradient dugmesi, beyaz yazi. */
  background:var(--beyaz);color:var(--mavi-koyu);
  /* Gulbin, 5 Ekim: "altinda da header kadar golgeli olsun."
     Basliktaki golgenin birebir ayni recetesi; serit altta durdugu
     icin golge yukari dogru, yani sayfanin uzerine dusuyor. */
  box-shadow:0 -10px 26px -20px rgba(3,28,39,.45);
  font-size:var(--m5);line-height:1.5}
.cz[data-acik="1"]{display:flex}
.cz p{margin:0;flex:1;min-width:0}
.cz a{color:var(--mavi-koyu);text-decoration:underline}
.cz button{flex:0 0 auto;border:0;border-radius:0;cursor:pointer;
  font:inherit;font-size:var(--m5);text-transform:uppercase;
  color:var(--beyaz);
  padding:calc(11*100cqw/var(--AW)) calc(22*100cqw/var(--AW));
  background:linear-gradient(100deg,var(--mavi-acik) 0%,
             var(--mavi-koyu) 50%,var(--mavi-acik) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate}
.cz button:hover{filter:brightness(.88)}
@media(prefers-reduced-motion:reduce){.cz button{animation:none}}
@media(max-width:820px){
  .cz{flex-direction:column;align-items:stretch;gap:var(--r12);
    padding:var(--r2);font-size:var(--f5)}
  .cz button{width:100%;font-size:var(--f5)}
}

/* ---- DUGMELER: TEK RECETE ----
   Gulbin, 2 Ekim: "sitede bazi butonlar yesil yazili kaldi, butun
   butonlar gradient animasyon ustune beyaz yazi olacak."
   Olctum: sepet sayfasindaki "Odemeye gec" yesil yaziliydi. Sebep,
   .uekle'nin beyaz yazi kuralinin urun sayfasinin stil dosyasinda
   durmasi; o dosya her sayfada yuklenmiyor. Recete artik kabukta,
   yani sitenin her sayfasinda ayni. */
.uekle{color:var(--beyaz)!important;border:0;text-decoration:none;
  background:linear-gradient(100deg,var(--mavi-koyu) 0%,
             var(--mavi-acik) 50%,var(--mavi-koyu) 100%);
  background-size:220% 100%;background-position:0% 50%;
  animation:uekleakis 9s ease-in-out infinite alternate}
@keyframes uekleakis{to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.uekle{animation:none}}
.uekle:hover{filter:brightness(.88)}

/* ---- WOOCOMMERCE BILDIRIMLERI ----
   Gulbin, 2 Ekim: "metinler dip dibe, yesil cerceveler var, aralarda
   bosluk yok. yesil cerceve yerine koyu mavi ustune beyaz yap.
   hesabim sayfalari, parola sifirlama, bu tarz sayfalarin hepsi
   dahil." Tek recete, hepsinde ayni. */
.woocommerce-notices-wrapper{display:grid;gap:var(--r12)}
.woocommerce-error,.woocommerce-message,.woocommerce-info,
.wc-block-components-notice-banner{
  display:grid;gap:var(--r12);list-style:none;
  margin:0 0 var(--r2);padding:var(--r2);
  background:var(--mavi-koyu);color:var(--beyaz);
  border:0;border-radius:0;box-shadow:none;
  font-size:var(--m4);line-height:1.5}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{
  margin:0;padding:0;list-style:none}
.woocommerce-error li::marker,.woocommerce-message li::marker,
.woocommerce-info li::marker{content:""}
.woocommerce-error::before,.woocommerce-message::before,
.woocommerce-info::before,.woocommerce-error li::before,
.woocommerce-message li::before,.woocommerce-info li::before{
  display:none!important;content:none!important}
.woocommerce-error a,.woocommerce-message a,.woocommerce-info a{
  color:var(--beyaz);text-decoration:underline}
.woocommerce-message .button,.woocommerce-info .button,
.woocommerce-error .button{justify-self:start;
  background:none!important;color:var(--beyaz)!important;
  border:var(--cizgi) solid var(--beyaz);border-radius:0;
  padding:calc(8*100cqw/var(--AW)) calc(16*100cqw/var(--AW));
  font:inherit;font-size:var(--m5);text-transform:uppercase;
  text-decoration:none;animation:none}
.woocommerce-message .button:hover{background:var(--beyaz)!important;
  color:var(--mavi-koyu)!important;filter:none}
@media(max-width:820px){
  .woocommerce-error,.woocommerce-message,.woocommerce-info,
  .wc-block-components-notice-banner{font-size:var(--f4)}
  .woocommerce-message .button{font-size:var(--f5)}
}

/* ---- GIRIS KUTUSU ----
   Gulbin, 2 Ekim: "giris yapmak icin popup olsun arkaplani kararsin,
   yeni sayfa isi uzatiyor, girince devam etsin popup kapanip."
   Arka plan indirim popup'iyla ayni koyulukta; kart beyaz, keskin
   koseli, sac teli cerceveli. Formun kendisi cerceve icinde /giris/
   sayfasindan geliyor, yani guvenlik anahtari ve Cloudflare
   dogrulamasi hic degismiyor. */
.gkut{position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  padding:var(--r3)}
.gkut .gkutarka{position:absolute;inset:0;background:rgba(2,31,54,.72)}
.gkut .gkutkart{position:relative;width:min(520px,100%);
  max-height:min(86vh,720px);background:var(--beyaz);
  border:var(--cizgi) solid var(--mavi-koyu);
  display:grid;grid-template-rows:1fr;
  animation:gkutgir .28s cubic-bezier(.23,1,.32,1) both}
@keyframes gkutgir{from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .gkut .gkutkart{animation:none}}
.gkut .gkutcer{width:100%;height:min(86vh,720px);border:0;display:block}
/* Gulbin, 2 Ekim: "kapat yazisi degil, sepetteki x carpimiz olsun,
   popup icinde." Mini sepetteki carpinin birebir recetesi: 24'luk
   kutuda bir yatay bir dikey cizgi, 45 derece cevrilince carpi;
   uzerine gelince bir ceyrek tur daha atiyor. */
.gkut .gkutkapa{position:absolute;top:0;right:0;z-index:2;
  width:44px;height:44px;background:none;border:0;padding:0;
  cursor:pointer;display:grid;place-items:center;color:var(--mavi-koyu)}
.gkut .gkutkapa .kxs{width:18px;height:18px;display:block;  /* bekci-muaf: mini sepetteki ikon olcusu */
  fill:none;stroke:currentColor;stroke-width:1.6;            /* bekci-muaf: mini sepetteki kontur kalinligi */
  stroke-linecap:butt;transform:rotate(45deg);
  transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.gkut .gkutkapa:hover .kxs{transform:rotate(135deg)}
@media(prefers-reduced-motion:reduce){
  .gkut .gkutkapa .kxs{transition:none}}
/* Onay ekrani: kutu kapanmadan once tik. */
.gkut .gkutonay{display:grid;justify-items:center;gap:var(--r12);
  padding:var(--r4) var(--r3);text-align:center;color:var(--mavi-koyu)}
.gkut .gkuttik{width:46px;height:46px;position:relative;
  border:var(--cizgi) solid var(--mavi-koyu);border-radius:50%}
.gkut .gkuttik::after{content:"";position:absolute;left:28%;top:48%;
  width:42%;height:22%;
  border-left:var(--cizgi) solid var(--mavi-koyu);
  border-bottom:var(--cizgi) solid var(--mavi-koyu);
  transform:translateY(-55%) rotate(-45deg)}
.gkut .gkutbas{margin:0;font-size:var(--m3);
  font-weight:var(--ag-baslik);text-transform:uppercase}
.gkut .gkutad{margin:0;font-size:var(--m4)}
/* Gulbin'in kurali: mobil ayri calisiyoruz. Telefonda ortada kucuk
   kart + klavye en kotu birlesim; kutu tam ekran aciliyor. */
@media(max-width:820px){
  .gkut{padding:0}
  .gkut .gkutkart{width:100%;max-height:none;height:100%;border:0}
  .gkut .gkutcer{height:100%}
  .gkut .gkutkapa{position:fixed;top:var(--r12);right:var(--r12)}
  .gkut .gkutonay{padding:var(--r4) var(--r2)}
}