/* ===== GIRISTE DORT STANT, ARKA PLANIYLA (mkstantgiris.py) ===== */
/* uc urun, etiketleri ve gorunmez tiklama alanlari (.phit) gizli; baslik/aciklama (.hsoz) ve ISO (.hiso) kaliyor */
.S.hero .prod,.S.hero .phit,.S.hero .lbl:not(.hsoz):not(.hiso){display:none!important}
.sg-pano{position:absolute;z-index:6;overflow:hidden;aspect-ratio:2060/1260;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);opacity:0;scale:.97;
  transition:opacity .9s ease .1s,scale 1.1s cubic-bezier(.23,1,.32,1) .1s}
.sg-pano.in{opacity:1;scale:1}
.S.hero .sg-pano{left:calc(var(--x)*100%/var(--AW));top:calc(var(--y)*100%/var(--H));width:calc(var(--w)*100%/var(--AW))}
/* Gulbin: "tam ekran olacak ya, video yerine": masaustunde video gizli; gokyuzu ve
   duvar girisin tamamini kaplar (ust ve alt paylar dahil), stantlar icinde duser.
   Tuval (3200 x 2300) ekrani kaplayacak buyuklukte; duvar cizgisi ekranin %88'inde. */
@media(min-width:821px){
  .S.hero .hvid{display:none!important}
  /* stant grubu kucuk ve saga kayik (sol alttaki baslik/aciklamaya binmesin); tuval genisligi
     ekranin %82'si, duvar cizgisi panonun %90'inda. Gokyuzu yatayda duz oldugu icin kenarlar
     ayni satirlardan alinan seritle (zemin-serit) doluyor, ust kisim gokyuzunun en ust rengi. */
  .S.hero .sg-pano.tam{left:0;width:100%;top:calc(-1 * var(--giris-ust,0px));height:calc(100% + var(--giris-ust,0px) + var(--giris-alt,0px));
    aspect-ratio:auto;z-index:1;box-shadow:none;scale:1;
    --kw:calc(100vh * 1.75);--kt:calc(71% - var(--kw) * .53719);
    background:rgb(2,49,113)}
  /* Gulbin: "standlarin arkasinda kalacak sekilde speedy stand yazalim buyuk harfler ile".
     Gokyuzunde, stantlarin arkasinda; alt kenari duvar cizgisinde kirpili, harfler duvarin
     arkasindan tek tek yukselir, asagi dogru hafif erir. */
  /* KAYDIRMA SAHNESI. Gulbin 8 Ekim: "ayni sahneyi scrolda degisecek sekilde buna da yapalim:
     scroll basladiginda standlar saga sola cekilecek ve koliler gelecek, arkadaki yazi da
     parlak baski ile degisecek". Giris kaydirma boyunca ekranda sabit kalir (.sg-pin, ekran
     boyunun 1.2 kati kaydirma payi); sahne kaydirmaya bagli ilerler, geri kaydirinca geri doner. */
  /* kaydirma payi ic kutuda olmali (sticky dolgu payinda calismaz): bos bir ::after */
  .sg-pin::after{content:"";display:block;height:var(--pin,0px)}
  /* (header'in ikon panelleri artik govdede, v5-src; girise katman onceligi verilmiyor) */
  .sg-pin>.S.hero{position:sticky;top:var(--giris-alt)}
  /* koliler stantlarla ayni yapida: dusus .d'de (kaydirmaya bagli), etiket ve uzerine gelme ayni.
     Gulbin: "ayni okla uzerine gelme vs standta ne varsa digerlerine de uygulanacak". Yalniz
     kendi asamasinda ekrandayken tiklanir/uzerine gelinir (.faz1 / .faz2). */
  .sg-ko{position:absolute;z-index:2;left:var(--sl);top:var(--st);width:var(--sw);pointer-events:none;cursor:pointer}
  .sg-ko .d{display:block;translate:0 -175%;scale:.72;opacity:0;transform-origin:50% 100%}
  .S.hero.koli .sg-st{pointer-events:none}
  .S.hero.faz1 .sg-ko.f1,.S.hero.faz2 .sg-ko.f2{pointer-events:auto}
  /* GEZEN CAM. Gulbin 8 Ekim: ornek pin'deki kustaki bolgesel, yumusak gecisli bulanik cam;
     "animasyonlu olacak, etrafta dolanacak, sayfanin icinde smooth carparak gezsin, yazilar onde",
     "2 tane olsun, daha blurlu olsun, standlar da onde kalsin", "beyaz platformun ustunde dolansin,
     asagiya inemesin". Iki yuvarlak cam: dev yazinin ustunde, urunlerin arkasinda (z 1, urun
     kaplari z 2); kenari radyal maskeyle yumusak. Buzlu dolgu ve isik halkasi denendi, Gulbin
     istemedi. Hareket betikte (kenarlara ve birbirine esnek carpar, duvar cizgisini gecmez). */
  .sg-cam{position:absolute;inset:0;z-index:1;pointer-events:none}
  .sg-cam i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform;opacity:0;transition:opacity 1.2s ease;
    /* Gulbin: "glaslarin rengini acma": beyaz ton yok, cam yalniz bulandirir. (8 Ekim'de mini sepet
       camina baglandi, beyaz tonlu oldu; Gulbin "giristeki glaslar degisti, bir onceki oldu" -> geri.) */
    -webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);
    -webkit-mask-image:radial-gradient(circle,black 30%,rgba(0,0,0,.6) 48%,transparent 70%);
    mask-image:radial-gradient(circle,black 30%,rgba(0,0,0,.6) 48%,transparent 70%)}
  .sg-pano.indi .sg-cam i{opacity:1}
  .sg-dev{position:absolute;z-index:1;left:0;right:0;top:0;height:71%;overflow:hidden;pointer-events:none}
  .sg-dev p{position:absolute;left:0;right:0;bottom:-.085em;margin:0;text-align:center;white-space:nowrap;
    font-weight:var(--ag-baslik);line-height:.8;letter-spacing:-.01em;
    font-size:11.6vw /* bekci-muaf: dev giris yazisi, ekran genisligine oranli */}
  .sg-dev span{display:inline-block;translate:0 110%;
    background:linear-gradient(180deg,rgba(255,255,255,.96) 15%,rgba(255,255,255,.85) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
    transition:translate 1.1s cubic-bezier(.23,1,.32,1) calc(.2s + var(--i)*60ms)}
  .sg-pano.in .sg-dev .k1 span{translate:0 0}
  /* Gulbin 8 Ekim: "okla speedy stand yazisina geldigimde rozetlerdeki gibi animasyonlu olsun".
     Rozet fizigi gibi: fare harflerin ustunden hizla gecince harf itilip havalanir, doner,
     sonra yercekimiyle beyaz zemine duser, hafif seker ve yerine oturur. Harf kutusu zeminin
     altina inemez (alt kenar kirpik). Giris bittikten sonra devreye girer (.oyna). */
  .sg-dev.oyna span{transition:none;will-change:transform}
  .sg-serit{position:absolute;left:0;right:0;top:var(--kt);height:calc(var(--kw) * .71875);
    background:url(/wp-content/plugins/koli-lazim-onizleme/varlik/f1649ffa8cad.webp) 0 0/100% 100% no-repeat;pointer-events:none}
  .sg-kap{position:absolute;left:50%;width:var(--kw);aspect-ratio:3200/2300;translate:-50% 0;top:var(--kt)}
  /* iki kap ayni geometride: arka (gokyuzu/duvar) en altta, dev yazi ortada, stantlar en onde */
  .sg-kap.arka{z-index:0}.sg-kap.on{z-index:2}
  /* kaplar tuval boyunda ust uste: fareyi kendileri tutmasin, yalniz stant ve koliler tutsun */
  .sg-kap{pointer-events:none}.sg-kap .sg-st{pointer-events:auto}
  /* Gulbin: "yazi vs ayni yerde kalsin, standlar ortada olacak sekilde kurgula; yazilar beyaz
     alanda kalacak o yuzden koyu mavi olsun, header ise beyaz". Duvar cizgisi ekranin %71'inde:
     alttaki baslik/aciklama ve ISO'lar beyaz duvarin ustunde; stantlar ortada, duvarin ustunde,
     ekran yuksekliginin yarisi boyunda (tuval genisligi ekran yuksekligine bagli). */
  /* alttaki yazilar beyaz duvarda: koyu mavi; ust baslik gokyuzunde: beyaz */
  .S.hero .lbl.hsoz,.S.hero .lbl.hsoz *,.S.hero .lbl.hiso{color:var(--mavi-koyu)!important}
  /* Gulbin 8 Ekim: "uzerine geldigimde alttakiler kaybolmasin". Stantin uzerine gelince
     alttaki baslik, aciklama ve ISO tam gorunur kalir; duvar da kararmaz. */
  .S.hero.sahne .lbl.hsoz,.S.hero.sahne .lbl.hiso{opacity:1!important}
  .S.hero.sahne::after{opacity:0}
  /* Gulbin 8 Ekim: "alttaki yazilar biraz daha asagiya kaysin" */
  .S.hero .lbl.hsoz,.S.hero .lbl.hiso{translate:0 2vh} /* sonra: "cok asagida kaldi biraz yukariya" */
  .hd:not(.on):not(.beyaz){color:var(--beyaz)}
}
.sg-kat{position:absolute;left:var(--kl);top:var(--kt);width:var(--kw);height:auto;max-width:none;pointer-events:none;user-select:none}
.sg-kat.golge{opacity:0;transition:opacity 1.4s ease}
.sg-pano.indi .sg-kat.golge{opacity:1}
.sg-st{position:absolute;z-index:2;left:var(--sl);top:var(--st);width:var(--sw);cursor:pointer}
.sg-st .d{display:block;translate:0 -175%;scale:.72;rotate:var(--a);opacity:0;transform-origin:50% 100%}
/* Gulbin 8 Ekim: "ekstra asagiya inmesin, beyaz alanin ustunde durdugu yere gelsin, biraz daha derinlik".
   Asiri gecis yok (egri 1'i asmiyor). Uzaktan gelir gibi: kucuk, bulanik, yukarida; yaklasip yerine oturur.
   Sonra: "sayfanin disindan insin standlar" -> ekranin ustunden (-175%) baslar.
   Derinlikten one ucus da denendi; Gulbin: "sevmedim, yukaridan gelirken daha guzeldi". */
.sg-pano.in .sg-st .d{animation:sgbirak 1.5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.55s + var(--i)*150ms)}
@keyframes sgbirak{0%{translate:0 -175%;scale:.72;rotate:var(--a);opacity:0;filter:blur(10px)}
  35%{opacity:1}100%{translate:0 0;scale:1;rotate:0deg;opacity:1;filter:blur(0)}}
:is(.sg-st,.sg-ko) img{display:block;width:100%;height:auto;pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(0,30,70,.25));transition:filter .5s ease}
.sg-pano:has(:is(.sg-st,.sg-ko):hover) :is(.sg-st,.sg-ko):not(:hover) img{filter:drop-shadow(0 12px 16px rgba(0,30,70,.25)) brightness(.45) saturate(.6)}
/* etiket: Gulbin 8 Ekim "uzerine geldigimizde cikan yazilar eskisi gibi olsun", sonra "beyaz olsun".
   Eski giris etiketleriyle ayni: ustte [0n] numara (--m3), altinda koseli parantezli
   buyuk harf metin (--m4, satir arasi 1.105), giris rengi, uzerine gelince solarak belirir. */
:is(.sg-st,.sg-ko) .sg-et{position:absolute;left:0;bottom:calc(100% + 1.2cqw);pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5cqw;text-align:left;
  color:var(--beyaz);text-transform:uppercase;opacity:0;transition:opacity .35s cubic-bezier(.23,1,.32,1)}
:is(.sg-st,.sg-ko) .sg-et b{font-weight:inherit;font-size:var(--m3);line-height:1}
:is(.sg-st,.sg-ko) .sg-et small{font-size:var(--m4);line-height:1.105;white-space:pre}
:is(.sg-st,.sg-ko):hover .sg-et{opacity:1}
@media(prefers-reduced-motion:reduce){
  .sg-dev .k1 span{transition:none;translate:0 0}
  .sg-pano{transition:none;opacity:1;scale:1}
  .sg-st .d{animation:none!important;translate:0 0;scale:1;rotate:0deg;opacity:1}
}
@media(max-width:820px){
  .S.hero .sg-pano{display:none}
  /* ===== MOBIL GIRIS. Gulbin 8 Ekim: "mobile bakalim", uc yol denendi, secim "1 olsun"
     (masaustunun aynisi, kaydirma sahnesi), "arkadaki yazilari yukariya cikarmamiz lazim, iki
     satir", "yazi alani cok asagida kaldi, daha yukariya cikmali, hepsi koyu mavi olmali",
     "giriste ustte koyu bi gradient var o ne" (eski video icin konmus ust katman kalkti).
     Gokyuzu ve duvar sahnesi ekranin %60'i, duvar cizgisi sahnenin %88'inde; dev yazi iki
     satir, stantlarin ustundeki gokyuzunde; baslik, aciklama, ISO ve marka logolari duvar
     renginde lacivert. Sahne ve yazilar kaydirma boyunca sabit (.ms-pin), masaustu gibi
     stantlar -> kuse koliler -> kraft koliler. */
  /* duvar rengi: Gulbin "girisin alt kismi kremsi, beyaz tonlarina cek": gorsel notrlestirildi, renk ona esit */
  .mhero{--giris-renk:var(--mavi-koyu);background:rgb(239,240,242)!important;padding-top:0!important}
  .mhero::before,.mhero .mhvid,.mhero .mhfiligran,.mhero .mhtuval{display:none!important}
  body:has(.mhero) .hd:not(.on):not(.beyaz){--giris-renk:var(--beyaz)}
  .mhero .mhsoz p{color:var(--mavi-koyu)}
  .ms-pin::after{content:"";display:block;height:var(--pin,0px)}
  .ms-pin>.ms-ic{position:sticky;top:0}
  .ms{position:relative;height:60svh;min-height:440px;overflow:hidden;background:rgb(2,49,113)}
  .ms-kap{position:absolute;left:50%;width:185vw;aspect-ratio:3200/2300;translate:-50% 0;top:calc(88% - 185vw * .53719);pointer-events:none}
  .ms-kap.arka{z-index:0}.ms-kap.on{z-index:2}
  .ms-kap img.zem{position:absolute;inset:0;width:100%;height:auto}
  .ms-dev{position:absolute;inset:0;z-index:1;pointer-events:none}
  /* Gulbin: "yazilar da 2. satirin yarisina kutunun ya da standin arkasinda kalsin". Her kelime
     kendi asamasindaki urunlerin tepesine gore yerlesir: ikinci satirin ortasi en yuksek urunun
     tepesinde. Tuval 185vw genisliginde, ust kenari %88 - 99,38vw; tepe y (tuval px) icin ekranda
     88% + (y * .057813 - 99,38)vw. Blok iki satir (33,6vw); ust kenari tepe + 8,4vw - 33,6vw.
     Her kelime kendi kutusunda kirpilir, harfler kutunun altina saklanir. */
  /* Gulbin: "karisti": saklanan kelimenin ust satiri gorunen kelimenin alt satirina biniyordu.
     Her harf kendi satiri kadar asagida saklanir (--s: ust satir 2, alt satir 1); alt satir tam gorunur. */
  .ms-dev .k{position:absolute;left:0;right:0;top:calc(88% + var(--kt));height:33.6vw;overflow:hidden;text-align:center;font-weight:var(--ag-baslik);
    line-height:.8;letter-spacing:-.01em;font-size:21vw /* bekci-muaf: dev giris yazisi, ekran genisligine oranli */}
  .ms-dev .k>span{display:block;height:50%}
  .ms-dev .k1{--kt:-77vw}   /* stantlar, en yuksek tepe y 823 */
  .ms-dev .k2{--kt:-67.87vw} /* kuse koliler, tepe y 981 */
  .ms-dev .k3{--kt:-71.05vw} /* kraft koliler, tepe y 926 */
  .ms-dev .k i{display:inline-block;font-style:normal;translate:0 calc(var(--s) * 125%);transition:translate 1s cubic-bezier(.23,1,.32,1) calc(.1s + var(--i)*50ms);
    background:linear-gradient(180deg,rgba(255,255,255,.96) 15%,rgba(255,255,255,.85));-webkit-background-clip:text;background-clip:text;color:transparent}
  .ms-dev.ac .k1 i{translate:0 0}
  .ms-dev.oyna .k i{transition:none}
  .ms-o{position:absolute;left:var(--sl);top:var(--st);width:var(--sw)}
  /* Gulbin: "kutulari ve standi mobilde ortaya ortala, grup olarak": her grubun yatay ortasi ekranin ortasinda.
     Ortalar betikte degil burada, json'dan hesaplanip yaziliyor (mobil()). */
  .ms-o{translate:var(--gx,0) 0}
  .ms-o .d{display:block;transform-origin:50% 100%;translate:0 -175%;scale:.72;opacity:0}
  .ms-o img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,30,70,.25))}
  .ms.dus .ms-o.st .d{animation:msdus 1.4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.25s + var(--i)*130ms)}
  @keyframes msdus{0%{translate:0 -175%;scale:.72;opacity:0;filter:blur(8px)}35%{opacity:1}100%{translate:0 0;scale:1;opacity:1;filter:blur(0)}}
  .ms::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8%;z-index:3;pointer-events:none;
    background:linear-gradient(180deg,rgba(239,240,242,0),rgb(239,240,242))}
  .mhero .mhsoz{padding-top:var(--r2)}
  /* marka logolari tek renk gorsel (yesil); "hepsi koyu mavi olmali": filtreyle lacivert (--mavi-koyu) */
  .mhero .mrkl{filter:brightness(0) saturate(100%) invert(9%) sepia(37%) saturate(3070%) hue-rotate(181deg) brightness(94%) contrast(99%)}
  .mhero .mrkbas{color:var(--mavi-koyu)}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .ms-o.st .d{animation:none!important;translate:0 0;scale:1;opacity:1}
  .ms-dev .k1 i{transition:none;translate:0 0}
}
@media(min-width:821px){.ms-pin>.ms-ic>.ms{display:none}}