/* =========================================================================
   SCOPO — Premium açılış (CNC ile S amblemi oyma) · template-parts/intro-premium.php
   ========================================================================= */

.si{
  position: fixed; inset: 0; z-index: 5000; overflow: hidden;
  display: grid; place-items: center;
  color: var(--sx-text-strong); font-family: var(--sx-sans);
  /* JS yüklenmezse kendini gizler */
  animation: siKac .6s ease 6s forwards;
}
@keyframes siKac{ to{ opacity: 0; visibility: hidden; } }
.si.is-js{ animation: none; }
html.sx-intro-acik, html.sx-intro-acik body{ overflow: hidden; }

/* Arka plan iki kapı paneli: çıkışta yukarı/aşağı ayrılır */
.si-perde{ position: absolute; left: 0; right: 0; height: 50.5%; background: #03070f; transition: transform 1s cubic-bezier(.7, 0, .2, 1); }
.si-perde--ust{ top: 0; }
.si-perde--alt{ bottom: 0; }
.si-perde::after{ content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 210, 166, .7), transparent); opacity: 0; transition: opacity .3s; }
.si-perde--ust::after{ bottom: 0; } .si-perde--alt::after{ top: 0; }
.si.is-cikis .si-perde::after{ opacity: 1; }
.si.is-cikis .si-perde--ust{ transform: translateY(-101%); }
.si.is-cikis .si-perde--alt{ transform: translateY(101%); }

/* CNC koordinat ızgarası */
.si-izgara{
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background:
    linear-gradient(rgba(232, 210, 166, .045) 1px, transparent 1px) 50% 50% / 40px 40px,
    linear-gradient(90deg, rgba(232, 210, 166, .045) 1px, transparent 1px) 50% 50% / 40px 40px,
    linear-gradient(rgba(232, 210, 166, .14), rgba(232, 210, 166, .14)) 50% 50% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(232, 210, 166, .14), rgba(232, 210, 166, .14)) 50% 50% / 1px 100% no-repeat;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}
.si.is-acik .si-izgara{ opacity: 1; }
/* İz: JS yüklenene kadar gizli (ilk karede tam hat görünüp kaybolmasın) */
.si [data-si-yol]{ stroke-dasharray: 3000; stroke-dashoffset: 3000; opacity: 0; filter: drop-shadow(0 0 3px rgba(240, 200, 120, .8)); }
.si-kivilcim{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Köşe göstergeleri */
.si-kose{
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--sx-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(240, 243, 248, .45);
  opacity: 0; transition: opacity .6s ease .2s;
}
.si.is-acik .si-kose{ opacity: 1; }
.si.is-bitis .si-kose{ opacity: 0; transition-delay: 0s; }
.si-kose b{ font-weight: 500; color: var(--sx-brass-light); font-variant-numeric: tabular-nums; }
.si-kose--sol-ust{ left: clamp(20px, 3vw, 48px); top: clamp(20px, 3vw, 40px); flex-direction: column; align-items: flex-start; gap: 8px; }
.si-kose--sol-ust b{ color: var(--sx-text-strong); letter-spacing: .3em; }
.si-kose--sag-ust{ right: clamp(20px, 3vw, 48px); top: clamp(20px, 3vw, 40px); }
.si-kose--sag-ust b{ min-width: 5ch; text-align: right; }
.si-kose--sol-alt{ left: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 40px); }
.si-kose--sol-alt b{ min-width: 7ch; margin-right: 10px; }
.si-kose--sag-alt{ right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 40px); }
.si-kose--sag-alt i{ display: block; width: 140px; height: 2px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.si-kose--sag-alt em{ display: block; height: 100%; background: linear-gradient(90deg, var(--sx-brass-deep), var(--sx-brass-light)); transform-origin: left; transform: scaleX(0); }

/* Merkez: amblem + yazı */
.si-merkez{ position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; transition: transform 1s cubic-bezier(.7, 0, .2, 1), opacity .7s ease; }
.si.is-cikis .si-merkez{ transform: scale(.86); opacity: 0; }
.si-svg{ display: block; width: min(46vh, 340px, 70vw); height: auto; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); }
.si-yazi{
  display: block; width: min(36vh, 260px, 60vw); height: auto; margin-top: clamp(14px, 3vh, 28px);
  filter: drop-shadow(0 0 18px rgba(232, 190, 120, .25));
  clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1);
}
.si.is-yazi .si-yazi{ clip-path: inset(0 0 0 0); }
.si .si-alt{
  margin: 14px 0 0; font: 500 11px/1 var(--sx-mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(240, 243, 248, .5);
  opacity: 0; transform: translateY(8px); transition: opacity .7s ease .3s, transform .9s ease .3s;
}
.si.is-yazi .si-alt{ opacity: 1; transform: none; }

.si-gec{
  position: absolute; z-index: 4; left: 50%; bottom: clamp(20px, 3vw, 40px); translate: -50% 0;
  padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(240, 243, 248, .55);
  font: 500 10.5px/1 var(--sx-mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  opacity: 0; transition: opacity .4s ease .6s, background .3s;
}
.si.is-acik .si-gec{ opacity: 1; }
.si.is-cikis .si-gec{ opacity: 0; transition-delay: 0s; }
.si-gec:hover{ background: rgba(255, 255, 255, .12); color: var(--sx-text-strong); }

/* Açılış sürerken hero'nun giriş animasyonları bekler */
html.sx-intro-acik .sx-hero *, html.sx-intro-acik .sx-hero *::before, html.sx-intro-acik .sx-hero *::after{ animation-play-state: paused !important; }

@media (max-width: 575.98px){
  /* Dar ekran: Z gizlenir, işlem göstergesi ve Skip koordinatların üstüne çıkar, çakışma olmaz */
  .si-kose--sol-alt b{ min-width: 6ch; margin-right: 4px; }
  .si-kose--sol-alt span:nth-of-type(3), .si-kose--sol-alt b:nth-of-type(3){ display: none; }
  .si-kose--sag-alt{ bottom: calc(clamp(20px, 3vw, 40px) + 28px); }
  .si-kose--sag-alt i{ width: 70px; }
  .si-kose--sol-ust span{ display: none; }
  .si-gec{ left: auto; right: clamp(20px, 3vw, 48px); translate: none; bottom: calc(clamp(20px, 3vw, 40px) - 6px); }
}