/* ===== NELER YAPTIK (mkneler.py) ===== */
.ny{position:relative;height:var(--boy,375vh);background:var(--beyaz);color:var(--mavi-koyu)}
.ny-sahne{position:sticky;top:0;height:100vh;overflow:hidden;
  container-type:inline-size;--AW:1724;font-family:var(--yazi)}
/* Baslik, kartlar ve rozetler TEK ekranlik kompozisyon (Gulbin, 6 Ekim:
   "baslik aciklama cok yukarida", "rozetlerin yuksekligini azalt").
   Baslik blogu sitenin bolum sablonuyla ayni: masaustunde baslik solda,
   aciklama sagda (.S2.lite .head); mobilde ortada alt alta. Yan bosluk
   sayfa sablonunun yan dolgusu (83,6 tuval birimi). */
.ny-bas{position:absolute;left:calc(83.6*100vw/1724);right:calc(83.6*100vw/1724);
  top:var(--ny-bt,calc(129.6*100vw/1724 + var(--r3)));z-index:6;display:flex;justify-content:space-between;
  align-items:flex-start;gap:4cqw}
.ny-bas h2{margin:0;font-weight:var(--ag-baslik);line-height:1.1;text-transform:uppercase;
  font-size:var(--m1);color:var(--mavi-koyu)}
.ny-bas p{margin:calc(8*100cqw/var(--AW)) 0 0;font-weight:var(--ag-ince);line-height:1.1;font-size:var(--m3);color:var(--mavi-koyu);
  width:calc(330*100cqw/var(--AW));text-align:right}   /* Gulbin, 6 Ekim: "aciklama iki satir olsun"; genislik yaziyla birlikte olceklenir, her ekranda ayni yerden kirilir */
/* urun, stand, ozel olcu: baslik "Ilginizi cekebilir" ile ayni boy */
.ny.urun .ny-bas h2{font-size:var(--f0)}
/* rozet bandi sahnenin altinda; ayri bolum ve bosluklari yok */
.ny-rozet{position:absolute;left:calc(83.6*100vw/1724);right:calc(83.6*100vw/1724);
  bottom:var(--r4);z-index:6;--mavi:var(--mavi-koyu)}
.ny-rozet .rband{margin:0;justify-content:flex-start}
/* beyaz zeminde yesil yazi yok: rozetler koyu mavi (ana sayfadaki .S2.lite rozetleriyle ayni) */
.ny-rozet .rband span{border-color:var(--mavi-koyu)!important;color:var(--mavi-koyu)}   /* mobil.css'teki yesil !important'i ezer, .S2.lite istisnasi gibi */
.ny-rozet .rband span:hover{background:var(--mavi-koyu);color:var(--beyaz)}
/* arkada akan dev yazi: o anki isin markasi */
/* Gulbin, 6 Ekim: "rainbow yazi kartin tam ortasindan aksin yatay olarak" */
.ny-akis{position:absolute;left:0;top:var(--ny-km,50%);white-space:nowrap;font-weight:var(--ag-ince);
  font-size:18vw;line-height:1;text-transform:uppercase;
  /* Gulbin, 6 Ekim: "arkada akan yazilar rainbow olsun". Ust bandin (.bar .tr)
     gradyaninin aynisi: ayni yedi durak, bir renk dongusu ekran genisligi kadar. */
  background-image:linear-gradient(90deg,#0091a1 0%,#37b382 15%,#89cd4e 30%,#ecd70a 45%,#ee2c31 60%,#ec086a 75%,#ed1f31 88%,#0091a1 100%);
  background-size:100vw 100%;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.3;
  transform:translate3d(var(--ax,0),calc(-50% + var(--ny-tr,0px)),0);will-change:transform;pointer-events:none;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),filter .3s cubic-bezier(.23,1,.32,1)}
.ny-akis.deg{opacity:0;filter:blur(6px)}
.ny-dunya{position:absolute;inset:0;z-index:1}
/* kart ust cubugun altinda kalan alanin ortasinda: cubuk 129,6 tuval birimi */
/* baslik + kart TEK grup: sabitlenince ust cubugun altindan ekran dibine kadar
   olan alanin ortasinda (Gulbin, 6 Ekim: "alani daha iyi kullanmaliyiz").
   --ny-bt / --ny-km / --ny-kh JS'te olculup yaziliyor. */
.nyk{position:absolute;left:50%;top:var(--ny-km,calc(50% + 129.6*100vw/1724/2));width:var(--kw,18vw);margin:0;
  margin-top:calc(var(--ny-kh,calc(var(--kw,18vw)*4/3 + 6.8em))/-2);margin-left:calc(var(--kw,18vw)/-2);
  will-change:transform,opacity;cursor:pointer}
/* ortam isigi: videonun kendi renkleri kartin arkasina vurur */
.nyk .isik{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;pointer-events:none;
  filter:blur(48px) saturate(1.5);opacity:0;transition:opacity 1s cubic-bezier(.23,1,.32,1)}
.nyk.aktif .isik{opacity:.6}
/* kart: urun karti duzeni, cerceveli, ici sitenin cami */
.nyk .kart{position:relative;border:var(--cizgi) solid var(--mavi-koyu);
  background:var(--cam-sepet);-webkit-backdrop-filter:var(--cam-filtre-panel);backdrop-filter:var(--cam-filtre-panel);
  box-shadow:0 50px 90px -40px rgba(var(--mavi-koyu-rgb),.6);will-change:filter}
.nyk .num{display:block;font-size:var(--m5);font-weight:var(--ag-ince);color:var(--mavi-koyu);opacity:1!important;padding:var(--r1) var(--r2)}   /* Gulbin, 6 Ekim: "kart numaralari koyu mavimizden olsun"; mobil.css'teki genel .num soluklugu (.55) ezilir */
.nyk .kz{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(var(--mavi-koyu-rgb),.06);
  border-top:var(--cizgi) solid var(--mavi-koyu);border-bottom:var(--cizgi) solid var(--mavi-koyu)}
.nyk .kz video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06)}
.nyk.aktif .kz video{animation:nyitme 12s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes nyitme{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.nyk h3{margin:0;font-weight:var(--ag-baslik);line-height:1.15;text-transform:uppercase;
  font-size:var(--m3);padding:var(--r2) var(--r2) var(--r0)}
.nyk p{margin:0;font-weight:var(--ag-ince);line-height:1.4;font-size:var(--m4);padding:0 var(--r2) var(--r2);
  min-height:calc(2.8em + var(--r2));box-sizing:border-box}   /* Gulbin, 6 Ekim: "her aciklama iki satir olsun": kisa aciklama da iki satirlik yer tutar, kartlar ayni boyda */
/* odak disi kartin ustundeki beyaz cam tonu */
.nyk .ton{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,rgba(var(--beyaz-rgb),.55) 0%,rgba(var(--beyaz-rgb),.3) 50%,rgba(var(--beyaz-rgb),.2) 100%)}
/* kutu render'i: kartin yaninda, yalniz ortadaki kartta */
.nyk .rn{position:absolute;right:-48%;bottom:12%;width:90%;height:auto;pointer-events:none;
  transform:translate3d(60px,24px,0) rotate(5deg) scale(.9);opacity:0;
  filter:drop-shadow(0 34px 30px rgba(var(--mavi-koyu-rgb),.45));
  transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .9s cubic-bezier(.23,1,.32,1)}
/* uzun render (stand): kart yuksekligine gore, kartin yaninda ayakta */
.nyk .rn.uzun{width:auto;height:80%;bottom:12%;right:-34%}   /* alt hizasi kutularla ayni (Gulbin: "standin renderini asagiya hizala digerleri gibi") */
.nyk.aktif .rn{opacity:1;transform:translate3d(0,0,0) rotate(-2deg) scale(1.08);
  animation:nysuz 5s ease-in-out .9s infinite}
@keyframes nysuz{0%,100%{translate:0 0}50%{translate:0 -12px}}
/* MOBIL: yatay kaydirmali serit, ekranda 1,5 kart (Gulbin, 6 Ekim: "mobilde
   kaydirmali yapalim, alani da uzatmamis oluruz. 1,5 kart olsun"). Sabitlenen
   3D sahne mobilde yok; baslik sablondaki gibi ustte, kartlar parmakla kayar.
   Kutu/stand kartin yaninda degil videonun sag alt kosesinde: yanda dursa
   siradaki kartin ustune binerdi. */
@media(max-width:820px){
  .ny{height:auto!important;padding:var(--r4) 0}
  .ny-sahne{position:relative;height:auto;overflow:visible}
  .ny-bas{position:static;transform:none!important;padding:0 var(--yan);
    flex-direction:column;align-items:center;gap:var(--r1);text-align:center}
  .ny-bas h2{font-size:var(--f1)}.ny-bas p{font-size:var(--f4);line-height:1.6;width:auto;text-align:center;margin:0}
  .ny.urun .ny-bas{align-items:flex-start;text-align:left}.ny.urun .ny-bas h2{font-size:var(--f3)}   /* "Ilginizi cekebilir" 17 px / 500 */
  .ny-rozet{position:static;padding:0 var(--yan)}
  .ny-rozet .rband{justify-content:center}
  .ny-akis{display:none}   /* "mobilde arkada yazi olmasin" */
  /* Gulbin, 6 Ekim: "bu kadar yan yana olmayabilir, render biraz sagda olsun": aralik 16 -> 48 */
  .ny-dunya{position:relative;inset:auto;transform:none!important;display:flex;gap:var(--r4);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--yan);
    padding:var(--r3) var(--yan) var(--r4);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ny-dunya::-webkit-scrollbar{display:none}
  .ny-dunya::after{content:"";flex:0 0 1px}   /* son kartin sagindaki pay kaybolmasin */
  /* 1,5 kart: sol pay + kart + aralik + yarim kart = ekran genisligi */
  .nyk{position:relative;left:auto;top:auto;margin:0;width:auto;
    flex:0 0 calc((100vw - var(--yan) - var(--r4))/1.5);scroll-snap-align:start;
    transform:none!important;opacity:1!important;visibility:visible!important;z-index:auto!important}
  .nyk .kart{filter:none!important;box-shadow:0 18px 30px -22px rgba(var(--mavi-koyu-rgb),.35)}
  .nyk .ton{opacity:0!important}
  .nyk .isik{display:none}
  .nyk .kz{aspect-ratio:2/3}
  .nyk .kz video,.nyk.aktif .kz video{transform:none;animation:none}
  /* Gulbin, 6 Ekim: "neler yaptikta mobilde render olmasin" */
  .nyk .rn,.nyk.aktif .rn{display:none;width:66%;right:-16%;bottom:22%;opacity:1;transform:rotate(-3deg);animation:none;
    filter:drop-shadow(0 12px 10px rgba(var(--mavi-koyu-rgb),.3))}
  .nyk .rn.uzun,.nyk.aktif .rn.uzun{width:auto;height:62%;right:-12%;bottom:22%}   /* kartlar arasindaki bosluga tasar, yandaki karta degmez */
}
/* hareket istemeyene: duz, yana kayan serit */
@media(prefers-reduced-motion:reduce){
  .ny{height:auto}.ny-sahne{position:relative;height:auto;overflow-x:auto}
  .ny-bas,.ny-rozet{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:var(--r4) calc(83.6*100vw/1724) 0}
  .ny-dunya{position:relative;display:flex;gap:var(--r2);padding:var(--r4) 4vw}
  .nyk{position:relative;left:auto;top:auto;margin:0;flex:0 0 var(--kw,18vw);transform:none!important;opacity:1!important}
  .nyk .kart{filter:none!important}.nyk .ton{opacity:0!important}
  .nyk .rn,.nyk .isik{display:none}.ny-akis{display:none}
}