/* =====================================================================
   v63 · GİRİŞ — "Film lideri"
   slate + 3·2·1 sayım süpürmesi + "klak" + letterbox perdesi → hero
   Akış (t = v63-giris.js'in perdeyi kurduğu an):
     0.00  sahne açılır (çizgiler, köşeler, slate, halka)
     0.22  3 → 0.52  2 → 0.82  1   (her sayı .30 sn, süpürme SVG dashoffset)
     1.12  KLAK: klaket kapanır, tek kare flaş, isimde RGB kanal kayması, ● KAYIT
     1.32  letterbox barları açılır (2.39:1'de kısa durak) → 2.12 bitiş
   Sınıflar (<html>):
     .v63-intro  boot.js koyar → ilk karede CSS perdesi (body::before/::after)
     .v63-ij     giris.js devraldı → sahte perde gizlenir, gerçek perde DOM'da, kaydırma kilitli
     .v63-io     perde açılıyor → hero'nun kendi girişi (fade-rise) BAŞTAN oynar, kilit kalkar
   Emniyet: JS hiç gelmezse CSS perdesi 2.55 sn'de kendiliğinden açılır (3.2 sn'de yok).
   ===================================================================== */

/* ---------- 1) CSS-önce perde (JS'ten önceki ilk kare + emniyet) ---------- */
html.v63-intro body::before,
html.v63-intro body::after{
  content:"";position:fixed;left:0;right:0;height:calc(50% + 1px);z-index:9000;
  background:var(--v63-ink);pointer-events:auto;will-change:transform;
  animation:v63g-fs-t .55s var(--v63-cut) 2.55s forwards}
html.v63-intro body::before{top:0}
html.v63-intro body::after{bottom:0;animation-name:v63g-fs-b}
@keyframes v63g-fs-t{to{transform:translateY(-101%);visibility:hidden}}
@keyframes v63g-fs-b{to{transform:translateY(101%);visibility:hidden}}
/* JS devraldı: sahte perdeyi kaldır (aynı karede gerçek perde yerinde) */
html.v63-ij body::before,html.v63-ij body::after{content:none}

/* ---------- 2) hero'nun kendi girişi perdenin ARDINDAN oynasın ---------- */
@media (prefers-reduced-motion:no-preference){
  /* emniyet yolu (JS yok): hero girişini CSS perdesinin açılışına kaydır */
  html.v63-intro:not(.v63-ij) .cinein .idrow{animation-delay:2.6s}
  html.v63-intro:not(.v63-ij) .cinein h1{animation-delay:2.75s,4s}
  html.v63-intro:not(.v63-ij) .cinelead{animation-delay:2.9s}
  html.v63-intro:not(.v63-ij) .cinecta{animation-delay:3.05s}
  html.v63-intro:not(.v63-ij) .glassbar{animation-delay:2.7s}
  /* JS yolu: perde kapalıyken beklet; .v63-io gelince asıl kurallar animasyonu baştan başlatır */
  html.v63-ij:not(.v63-io) :is(.cinein .idrow,.cinein h1,.cinelead,.cinecta,.glassbar){animation:none;opacity:0}
}
/* kaydırma yalnız perde kapalıyken kilitli (gutter sabit → açılınca sayfa kaymaz) */
html.v63-ij:not(.v63-io){scrollbar-gutter:stable}
html.v63-intro:not(.v63-io){background-color:var(--v63-ink)}   /* boş kaydırma oluğu da karanlık kalsın (gündüz modunda açık şerit olmasın) */
html.v63-ij:not(.v63-io) body{overflow:hidden}   /* gövdede: görünüm alanına yayılır, mobil düzen genişliği oynamaz */

/* ---------- 3) gerçek perde ---------- */
.v63g{--ink:var(--v63-ink);--pap:var(--v63-paper);--mut:rgba(244,238,224,.52);--hair:rgba(244,238,224,.14);
  --in:clamp(14px,2.6vmin,28px);
  --st:calc(env(safe-area-inset-top,0px) + var(--in));--sb:calc(env(safe-area-inset-bottom,0px) + var(--in));
  --sl:calc(env(safe-area-inset-left,0px) + var(--in));--sr:calc(env(safe-area-inset-right,0px) + var(--in));
  --d:clamp(172px,40vmin,330px);          /* lider halkası çapı */
  --cy:50%;                               /* halkanın dikey merkezi */
  --lb:min(calc(50vw / 2.39),50vh);       /* 2.39:1 letterbox için bar başına açılma */
  position:fixed;inset:0;z-index:9001;pointer-events:auto;touch-action:none;
  color:var(--pap);font-family:var(--v63-mono);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;cursor:default;contain:strict}
.v63g,.v63g *{box-sizing:border-box;margin:0;padding:0}
.v63g span{display:block}

/* barlar */
.v63g-bar{position:absolute;left:0;right:0;height:calc(50% + 1px);background:var(--ink);will-change:transform}
.v63g-bar--t{top:0;animation:v63g-open-t .8s linear 1.32s forwards}
.v63g-bar--b{bottom:0;animation:v63g-open-b .8s linear 1.32s forwards}
/* iç kenarda ince matte çizgisi + oran etiketi (yalnız letterbox durağında okunur) */
.v63g-bar::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--hair);opacity:0;
  animation:v63g-hair .8s linear 1.32s forwards}
@keyframes v63g-hair{8%,100%{opacity:1}}
.v63g.is-skip .v63g-bar::after{animation:none}
.v63g-bar--t::after{bottom:0}.v63g-bar--b::after{top:0}
.v63g-ar::before{content:"2.39 : 1"}
.v63g-ar{position:absolute;right:var(--sr);bottom:10px;font-size:10px;letter-spacing:.2em;color:var(--mut);opacity:0;
  animation:v63g-arv .8s linear 1.32s forwards}
@keyframes v63g-arv{0%,24%{opacity:0}34%,56%{opacity:1}66%,100%{opacity:0}}
@keyframes v63g-open-t{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.2,1)}
  34%{transform:translateY(calc(var(--lb) * -1));animation-timing-function:linear}
  54%{transform:translateY(calc(var(--lb) * -1 - 6px));animation-timing-function:cubic-bezier(.6,0,.25,1)}
  100%{transform:translateY(-101%)}}
@keyframes v63g-open-b{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.2,1)}
  34%{transform:translateY(var(--lb));animation-timing-function:linear}
  54%{transform:translateY(calc(var(--lb) + 6px));animation-timing-function:cubic-bezier(.6,0,.25,1)}
  100%{transform:translateY(101%)}}
@keyframes v63g-fast-t{to{transform:translateY(-101%)}}
@keyframes v63g-fast-b{to{transform:translateY(101%)}}

/* sahne katmanı (barların üstünde; açılmadan hemen önce söner) */
.v63g-stage{position:absolute;inset:0;
  background:
    radial-gradient(62% 56% at 50% var(--cy),rgba(47,91,255,.13),transparent 70%),
    repeating-linear-gradient(0deg,rgba(244,238,224,.022) 0 1px,transparent 1px 3px);
  animation:v63g-out .18s ease-in 1.28s forwards}
@keyframes v63g-out{to{opacity:0;visibility:hidden}}
@keyframes v63g-out2{to{opacity:0;visibility:hidden}}

/* artı çizgileri (lider merkezinden geçer) */
.v63g-hx,.v63g-vx{position:absolute;background:var(--hair)}
.v63g-hx{left:0;right:0;top:var(--cy);height:1px;transform-origin:50% 50%;animation:v63g-sx .5s var(--v63-ease) both}
.v63g-vx{top:0;bottom:0;left:50%;width:1px;transform-origin:50% var(--cy);animation:v63g-sy .5s var(--v63-ease) .04s both}
@keyframes v63g-sx{from{transform:scaleX(0)}}
@keyframes v63g-sy{from{transform:scaleY(0)}}

/* title-safe köşeleri */
.v63g-c{position:absolute;width:18px;height:18px;border:0 solid rgba(244,238,224,.5);animation:v63g-cin .45s var(--v63-ease) .06s both}
.v63g-c:nth-of-type(1){top:var(--st);left:var(--sl);border-top-width:1.5px;border-left-width:1.5px;--cx:8px;--cyy:8px}
.v63g-c:nth-of-type(2){top:var(--st);right:var(--sr);border-top-width:1.5px;border-right-width:1.5px;--cx:-8px;--cyy:8px}
.v63g-c:nth-of-type(3){bottom:var(--sb);left:var(--sl);border-bottom-width:1.5px;border-left-width:1.5px;--cx:8px;--cyy:-8px}
.v63g-c:nth-of-type(4){bottom:var(--sb);right:var(--sr);border-bottom-width:1.5px;border-right-width:1.5px;--cx:-8px;--cyy:-8px}
@keyframes v63g-cin{from{opacity:0;transform:translate(var(--cx),var(--cyy))}}

/* üst satır: durum + gün saati timecode'u */
.v63g-top{position:absolute;top:calc(var(--st) + 3px);left:calc(var(--sl) + 30px);right:calc(var(--sr) + 30px);
  display:flex;justify-content:space-between;align-items:center;font-size:11px;line-height:1;letter-spacing:.16em;
  animation:v63g-fade .4s ease .12s both}
@keyframes v63g-fade{from{opacity:0}}
.v63g-st{display:flex!important;align-items:center;gap:9px}
.v63g-dot{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:v63g-rec .01s linear 1.12s forwards}
@keyframes v63g-rec{to{background:var(--v63-tally);box-shadow:0 0 0 4px rgba(255,59,94,.22),0 0 14px rgba(255,59,94,.7)}}
.v63g-sw{position:relative;height:1em;overflow:hidden}
.v63g-sw>span{height:1em}
.v63g-sw>span:nth-child(2){position:absolute;left:0;top:0;color:var(--pap);opacity:0;animation:v63g-on .01s linear 1.12s forwards}
.v63g-sw>span:nth-child(1){color:var(--mut);animation:v63g-off .01s linear 1.12s forwards}
@keyframes v63g-on{to{opacity:1}}
@keyframes v63g-off{to{opacity:0}}
.v63g-tc{display:flex!important;align-items:center;gap:.9em;color:var(--pap)}
.v63g-tc em{font-style:normal;color:var(--mut)}
.v63g-tcv{display:flex!important;letter-spacing:.08em}
.v63g-ff{height:1em;overflow:hidden}
.v63g-ff>span{line-height:1em;animation:v63g-ff 1s steps(25,end) infinite;animation-delay:var(--ffd,0s)}
@keyframes v63g-ff{to{transform:translateY(-25em)}}

/* akademi lideri */
.v63g-lead{position:absolute;left:50%;top:var(--cy);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  animation:v63g-lin .5s var(--v63-ease) both,v63g-lout .1s ease-in 1.12s forwards}
@keyframes v63g-lin{from{opacity:0;transform:scale(.94)}}
@keyframes v63g-lout{to{opacity:0;transform:scale(1.08)}}
.v63g-lead svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v63g-ring{fill:none;stroke:rgba(244,238,224,.62);stroke-width:1.1;stroke-dasharray:604;stroke-dashoffset:604;
  transform:rotate(-90deg);transform-origin:100px 100px;animation:v63g-draw .34s var(--v63-ease) .02s forwards}
.v63g-ring2{fill:none;stroke:rgba(244,238,224,.2);stroke-width:1;stroke-dasharray:2 4}
@keyframes v63g-draw{to{stroke-dashoffset:0}}
.v63g-sweep{fill:none;stroke:rgba(244,238,224,.1);stroke-width:78;stroke-dasharray:245.05;stroke-dashoffset:245.05;
  transform:rotate(-90deg);transform-origin:100px 100px;animation:v63g-swp .3s linear .22s 3}
@keyframes v63g-swp{from{stroke-dashoffset:245.05}to{stroke-dashoffset:0}}
.v63g-hand{stroke:var(--v63-y);stroke-width:1.6;stroke-linecap:round;opacity:0;transform-origin:100px 100px;
  animation:v63g-hand .3s linear .22s 3}
@keyframes v63g-hand{from{opacity:1;transform:rotate(0)}to{opacity:1;transform:rotate(360deg)}}
.v63g-n{position:absolute;inset:0;display:grid!important;place-items:center;opacity:0;
  font-family:var(--v63-sans);font-weight:800;font-stretch:112%;font-variation-settings:'wdth' 112;
  font-size:calc(var(--d) * .5);line-height:1;letter-spacing:-.04em;color:var(--pap);
  animation:v63g-num .3s linear both;animation-fill-mode:none}
.v63g-n:nth-of-type(1){animation-delay:.22s}
.v63g-n:nth-of-type(2){animation-delay:.52s}
.v63g-n:nth-of-type(3){animation-delay:.82s}
@keyframes v63g-num{
  0%{opacity:1;transform:scale(1.07);text-shadow:-.05em 0 rgba(217,44,80,.85),.05em 0 rgba(47,91,255,.85)}
  16%{opacity:1;transform:scale(1.01);text-shadow:0 0 rgba(217,44,80,0),0 0 rgba(47,91,255,0)}
  100%{opacity:1;transform:scale(1)}}

/* slate (klaket) */
.v63g-slate{position:absolute;left:var(--sl);bottom:var(--sb);margin:0 0 0 30px;width:clamp(320px,36vw,520px);
  animation:v63g-rise .55s var(--v63-ease) .08s both}
@keyframes v63g-rise{from{opacity:0;transform:translateY(18px)}}
.v63g-clap{position:relative;height:calc(var(--sh) * 2 + 4px);--sh:clamp(16px,1.9vw,24px)}
.v63g-stk{position:absolute;left:0;right:0;height:var(--sh);border:1px solid rgba(244,238,224,.75);border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(118deg,var(--pap) 0 14px,var(--ink) 14px 28px)}
.v63g-stk--lo{bottom:0;border-radius:0}
.v63g-stk--hi{bottom:calc(var(--sh) + 2px);transform-origin:1px 100%;
  background:repeating-linear-gradient(62deg,var(--v63-y) 0 14px,var(--ink) 14px 28px);border-color:var(--v63-y);
  animation:v63g-lift .32s var(--v63-ease) .22s both,v63g-shut .085s cubic-bezier(.7,0,1,1) 1.035s forwards}
@keyframes v63g-lift{from{transform:rotate(0)}to{transform:rotate(var(--open,-9deg))}}
@keyframes v63g-shut{from{transform:rotate(var(--open,-9deg))}to{transform:rotate(0)}}
.v63g-hinge{position:absolute;left:-3px;bottom:calc(var(--sh) - 3px);width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--v63-y);z-index:1}
.v63g-board{position:relative;border:1px solid rgba(244,238,224,.2);border-top:0;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,rgba(244,238,224,.05),rgba(244,238,224,.02)) var(--ink);overflow:hidden;
  padding:clamp(14px,1.5vw,22px) clamp(16px,1.7vw,24px) calc(clamp(12px,1.3vw,18px) + 4px);
  animation:v63g-thud .16s ease-out 1.12s}
@keyframes v63g-thud{35%{transform:translateY(2px)}}
.v63g-name{font-family:var(--v63-sans);font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125;
  font-size:clamp(27px,3.4vw,50px);line-height:.98;letter-spacing:-.012em;text-transform:none;white-space:nowrap;
  display:flex!important;gap:.26em;animation:v63g-rgb .34s linear 1.12s}
.v63g-name>span:nth-child(2){color:var(--v63-y)}
@keyframes v63g-rgb{
  0%{text-shadow:-.1em 0 rgba(217,44,80,.95),.1em 0 rgba(47,91,255,.95),0 0 rgba(10,133,119,0);transform:translateX(.03em)}
  40%{text-shadow:-.06em .02em rgba(217,44,80,.9),.07em -.02em rgba(47,91,255,.9),.02em 0 rgba(25,211,197,.6);transform:translateX(-.02em)}
  72%{text-shadow:-.02em 0 rgba(217,44,80,.6),.02em 0 rgba(47,91,255,.6),0 0 rgba(25,211,197,0);transform:none}
  100%{text-shadow:0 0 rgba(217,44,80,0),0 0 rgba(47,91,255,0),0 0 rgba(25,211,197,0);transform:none}}
.v63g-role{margin-top:clamp(8px,.9vw,12px)!important;font-size:clamp(10px,.8vw,11.5px);letter-spacing:.2em;color:var(--mut)}
.v63g-role b{font-weight:500;color:var(--v63-r)}
.v63g-cells{display:grid!important;grid-template-columns:repeat(4,auto);justify-content:space-between;
  margin-top:clamp(14px,1.5vw,20px)!important;padding-top:clamp(10px,1.1vw,14px)!important;border-top:1px solid var(--hair)}
.v63g-cell>span:first-child{font-size:9.5px;letter-spacing:.2em;color:var(--mut);margin-bottom:6px!important}
.v63g-cell>span:last-child{font-size:clamp(12.5px,1vw,15px);letter-spacing:.06em;color:var(--pap)}
/* renk barı şeridi (R G B + damga sarısı) */
.v63g-cb{position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--v63-r) 0 25%,var(--v63-g-hi) 25% 50%,var(--v63-b) 50% 75%,var(--v63-y) 75%)}

/* sağ alt imza */
.v63g-sig{position:absolute;right:calc(var(--sr) + 30px);bottom:calc(var(--sb) + 3px);text-align:right;
  font-size:10px;line-height:1.7;letter-spacing:.2em;color:var(--mut);animation:v63g-fade .4s ease .2s both}
.v63g-sig span:first-child{color:var(--pap)}

/* tek kare flaş */
.v63g-flash{position:absolute;inset:0;background:var(--pap);opacity:0;pointer-events:none;
  animation:v63g-flash .15s linear 1.12s;animation-fill-mode:none}
@keyframes v63g-flash{0%,26%{opacity:.86}58%{opacity:.14}100%{opacity:0}}

/* ---------- atla: ≈250 ms'de açık-perde son durumuna ---------- */
.v63g.is-skip .v63g-stage{animation:v63g-out2 .15s ease-out forwards}
.v63g.is-skip .v63g-bar--t{animation:v63g-fast-t .24s cubic-bezier(.6,0,.25,1) forwards}
.v63g.is-skip .v63g-bar--b{animation:v63g-fast-b .24s cubic-bezier(.6,0,.25,1) forwards}
.v63g.is-skip .v63g-ar{animation:none;opacity:0}

/* ---------- dar ekran (telefon) ---------- */
@media (max-width:700px){
  .v63g{--d:clamp(176px,52vw,260px);--cy:41%}
  .v63g-slate{left:var(--sl);right:var(--sr);width:auto;margin:0}
  .v63g-sig{display:none}
  .v63g-top{left:calc(var(--sl) + 26px);right:calc(var(--sr) + 26px);font-size:10px;letter-spacing:.13em}
  .v63g-cells{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:34px;row-gap:12px}
}
@media (max-width:700px) and (max-aspect-ratio:3/4){
  .v63g{--lb:calc(50vw / 1.85)}   /* dik telefonda 1.85:1 — biraz daha geniş yarık */
  .v63g-ar::before{content:"1.85 : 1"}
}
@media (max-height:520px) and (orientation:landscape){
  .v63g{--d:clamp(120px,42vmin,220px)}
  .v63g-slate{width:clamp(280px,40vw,420px)}
  .v63g-cells{margin-top:8px!important;padding-top:8px!important}
}
/* güvenlik: hareket azaltma istenirse perde asla görünmesin (boot zaten oynatmaz) */
@media (prefers-reduced-motion:reduce){
  html.v63-intro body::before,html.v63-intro body::after,.v63g{display:none!important}
}