.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}
}