/* ==========================================================================
   Giris animasyonu (Entry_anim1.mp4) ve sayfa gecis yukleyicisi (Loading_anim1.mp4)
   ========================================================================== */

html.intro-active, html.intro-active body { overflow: hidden; }

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #060d1c;
  opacity: 1;
  transition: opacity .7s var(--ease, ease);
}
#intro-overlay.is-hiding { opacity: 0; }
#intro-overlay.is-done { display: none; }

/* Video artik ekrani tamamen kaplamaz: orantili, daha kucuk ve ortalanmis
   gosterilir. Cercevesinin belli olmamasi icin overlay'in arka plani
   intro.js tarafindan videonun kendi arka plan rengiyle esitlenir. */
#intro-overlay video {
  position: absolute;
  z-index: 2;              /* video her zaman logo yer tutucusunun ustunde */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(68vw, 860px);
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
}
@media (max-width: 720px) {
  #intro-overlay video { width: min(88vw, 520px); max-height: 62vh; }
}
#intro-overlay.is-playing video { opacity: 1; }

/* Video ilk kareyi verene kadar gorunen logo yer tutucusu.
   Video oynamaya basladigi anda tamamen kaybolur (ust uste binme olmaz). */
.intro-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease;
}
#intro-overlay.is-playing .intro-fallback { opacity: 0; visibility: hidden; }

.intro-fallback img {
  width: 128px;
  filter: drop-shadow(0 0 34px rgba(79, 127, 209, .45));
  animation: introPulse 2.2s ease-in-out infinite;
}
@keyframes introPulse {
  0%, 100% { opacity: .5;  transform: scale(.97); }
  50%      { opacity: .95; transform: scale(1.03); }
}

.intro-skip {
  position: absolute;
  z-index: 3;
  right: 26px;
  bottom: 26px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 246, .35);
  background: rgba(6, 13, 28, .5);
  color: #e8edf6;
  font: 600 .78rem/1 var(--font-sans, sans-serif);
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s, border-color .2s, opacity .3s;
  opacity: 0;
}
#intro-overlay.is-playing .intro-skip { opacity: 1; }
.intro-skip:hover { background: rgba(30, 51, 87, .85); border-color: rgba(232, 237, 246, .6); }

/* ==========================================================================
   Sayfa gecis yukleyicisi (Loading_anim1.mp4)

   Videonun yapisi olculdu: 1920x1080 SIYAH tuval uzerinde, kadrajin
   x 793-1188 / y 297-697 pikselleri arasinda duran BEYAZ bir kart ve kartin
   icinde lacivert logo animasyonu var. (Kirpma kenarlari 6 ayri karede
   dogrulandi: kenar pikselleri 252-253/255, yani siyah tuval sizmiyor.)

   Bu yuzden iki islem birlikte yapilir:
     1) Kirpma - siyah tuval kadrajdan cikarilir, yalnizca kart gorunur
        (animasyon da bu sayede ekranda cok daha buyuk durur).
     2) Karisim modu - kartin kendi zemini perdeye karisip yok olur:
        . Gunduz modu: filtre yok + "multiply" -> beyaz kart beyaz perdede
          kaybolur, logo lacivert kalir. Arka plan BEYAZ gorunur.
        . Gece modu: "invert(1)" + "screen" -> kart siyaha doner ve koyu
          perdede kaybolur, logo altin tonunda parlar. Arka plan SIYAH gorunur.
   ========================================================================== */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .94);   /* gunduz: beyaz perde */
  backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease, ease);
}
#page-loader.is-active { opacity: 1; pointer-events: auto; }

/* Kirpma penceresi: yalnizca beyaz kart gorunur (395 x 400 piksel) */
.loader-frame {
  position: relative;
  width: min(150px, 45vw);
  aspect-ratio: 395 / 400;   /* kartin gercek en-boy orani */
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;
  transform: scale(.94);
  transition: transform .28s var(--ease, ease);
}
#page-loader.is-active .loader-frame { transform: scale(1); }

/* Video, kart pencereye tam oturacak sekilde buyutulup kaydirilir */
.loader-frame video {
  position: absolute;
  top: -74.3%;      /* 297 / 1080 */
  left: -200.8%;    /* 793 / 1920 */
  width: 486.1%;    /* 1920 / 395 */
  height: auto;
  display: block;
  mix-blend-mode: multiply;              /* beyaz kart zemini kaybolur */
}

/* Not: yukleyicide gorunur metin yoktur; durum yalnizca ekran okuyuculara
   sr-only bir canli bolge (main.js) uzerinden duyurulur. */

/* Gece modu: perde siyah, kart ters cevrilip "screen" ile yok olur */
[data-theme="dark"] #page-loader { background: rgba(4, 8, 18, .94); }
[data-theme="dark"] .loader-frame video { filter: invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #page-loader { background: rgba(4, 8, 18, .94); }
  :root:not([data-theme="light"]) .loader-frame video { filter: invert(1); mix-blend-mode: screen; }
}

/* Ust ilerleme cubugu */
.loader-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 9001;
  background: linear-gradient(90deg, var(--brand-600, #1e3357), var(--accent, #4f7fd1));
  transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none !important; }
  /* Hareket azaltma tercihinde video oynatilmaz; cerceve de artik seffaf
     oldugu icin bos kutu birakmak yerine yalnizca ust ilerleme cubugu kalir. */
  #page-loader { display: none; }
}