/* ============================================================
 * splash.css — açılış ekranı (index.html #splash)
 * (JS karşılığı: index.html sonundaki satır içi denetleyici +
 *  js/core/splash.js)
 *
 * TEMEL katmandadır (index.html <head>: fonts → tokens → base →
 * splash): ilk kare splash'tir, bu dosya o kareyi boyayan son halka.
 * Uygulama katmanından (components, features/*) HİÇBİR şey okumaz;
 * renk, font, katman sırası tokens.css'ten, sıfırlama base.css'ten.
 *
 * Tasarım (2026-10-06, kullanıcı seçimi — design-tests/
 * splash-designs.html "yz1"): ikon + ad yan yana tek kilit. Boş hâli
 * oldukça sönük; boot ilerledikçe aynı kilit soldan sağa üstüne basılır —
 * önce logo, sonra ad parça parça (denetleyici yalnız data-step yazar,
 * adım → dolum eşlemesi bu dosyada). Altında yalnız bir şey ters gidince
 * durum satırı: yavaşlık, internet, sunucu, hata.
 * ============================================================ */

/* Dolum oranı kayıtlı: kayıtsız değişken ara değer üretmez, dolum bir
   adımdan diğerine yürümek yerine zıplardı. */
@property --splash-fill { syntax: "<number>"; inherits: true; initial-value: 0; }

.splash {
  --splash-size: clamp(40px, 11vw, 84px);   /* kilidin yazı boyu; ikon 1.4em */
  --splash-gap: .32em;                      /* ikon ↔ ad (sönük ve dolu satır AYNI) */
  --splash-dim: color-mix(in srgb, var(--text) 56%, transparent);          /* alt satır, hata kodu */
  --splash-btn-h: 40px;
  --splash-btn-pad: 18px;
  --splash-logo-part: .25;                  /* ilerlemenin LOGOYA düşen payı (aşağıda) */
  --splash-fill: var(--splash-p, 0);
  /* fixed değil absolute — kök kilidi (base.css): tam-ekran katmanlar
     ICB'ye çıpalanır, tarayıcı çubuğundan etkilenmez */
  position: absolute; inset: 0; z-index: var(--z-splash);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
  -webkit-user-select: none; user-select: none;
  transition: --splash-fill .7s cubic-bezier(.3, .7, .2, 1);
}
/* ADIM → DOLUM — tek kaynak burası (denetleyici yalnız data-step yazar).
   Önce LOGO dolar (ilk evre: uygulamanın kodu + dil dosyası), sonra AD
   adım adım: oturum ⅓ · sohbetler ⅔ · bitiş tam. Oturumu olmayan
   ziyaretçide ilk evreden doğrudan bitişe geçilir — ad tek seferde dolar. */
.splash[data-step="net"]   { --splash-p: var(--splash-logo-part); }
.splash[data-step="auth"]  { --splash-p: .5; }
.splash[data-step="data"]  { --splash-p: .75; }
.splash[data-step="ready"] { --splash-p: 1; }
/* Çıkış: önce dolum tamamlanır, sonra katman söner. Splash kabuğun
   KARDEŞİ — kendi opacity'si kabuktaki camlara dokunmaz (K10). */
.splash.is-out {
  opacity: 0; pointer-events: none;
  transition: --splash-fill .7s cubic-bezier(.3, .7, .2, 1), opacity .38s ease .44s;
}

/* Üst üste binme + durum çıpası */
.splash-lock {
  position: relative; font-size: var(--splash-size); font-weight: 700;
  letter-spacing: var(--brand-tracking); line-height: 1.05;
}
/* İki satır AYNI kilit: işaret logo boyasıyla (--logo-paint — her logo
   yuvasının kuralı; renk de olabilir gradyan da), ad normal yazı rengiyle.
   Boş hâli "oldukça sönük": satırın tamamı %16 görünür — boya ne olursa
   olsun aynı oranda söner. Dolu satır aynı kilidi tam görünür basar. */
.splash-ghost {
  display: flex; align-items: center; gap: var(--splash-gap); white-space: nowrap;
  color: var(--text); opacity: .16;
}
.splash-fill {
  position: absolute; inset: 0; display: flex; align-items: center; gap: var(--splash-gap); white-space: nowrap;
  color: var(--text);
}
/* Tek ilerleme (--splash-fill, 0→1), iki pencere: ilk payı logo, kalanını
   ad doldurur. İkisi aynı değeri okuduğu için sıra bozulamaz — adımlar art
   arda gelse bile ad, logo bitmeden dolmaya başlamaz. Ölçüm yok: payı
   ekrandaki genişlik değil ilerleme belirler. */
.splash-fill .splash-mark {
  clip-path: inset(-10% calc((1 - min(1, var(--splash-fill) / var(--splash-logo-part))) * 100%) -10% 0);
}
/* Ad kutusu büyük harf yüksekliğine kırpılı (text-box) — "y"nin kuyruğu
   kutunun altına taşar, dikey pay bu yüzden geniş. */
.splash-fill .splash-name {
  clip-path: inset(-50% calc((1 - max(0, (var(--splash-fill) - var(--splash-logo-part)) / (1 - var(--splash-logo-part)))) * 100%) -50% 0);
}
/* İkon yazıdan iri ve yazının GÖVDESİNE ortalı: ad kutusu büyük harf
   tepesi ↔ taban çizgisine kırpılır, flex ortalaması harflere oturur.
   Yol bu dosyaya göre (css/ içinden ../img/). */
.splash-mark {
  display: block; flex: none; width: 1.4em; height: 1.4em; background: var(--logo-paint);
  -webkit-mask: url("../img/logo-full.svg") center / contain no-repeat;
          mask: url("../img/logo-full.svg") center / contain no-repeat;
}
.splash-name { text-box: trim-both cap alphabetic; }

/* Durum kilidin ALTINDA, akış dışında: metin boyu değişince kilit kaymaz */
.splash-status {
  position: absolute; left: 50%; top: calc(100% + 26px); width: min(340px, 86vw);
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  text-align: center; font-size: 14px; font-weight: 400; letter-spacing: normal; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
/* Yalnız söyleyecek bir şey varken (yavaşlık, internet, sunucu, hata) —
   sıradan adımların yazısı yok, denetleyici .is-shown'u buna göre basar. */
.splash.is-shown .splash-status { opacity: 1; pointer-events: auto; }
.splash-ic { display: none; width: 34px; height: 34px; margin-bottom: 10px; color: var(--warn); }
.splash-ic svg { display: block; width: 100%; height: 100%; }
.splash:is(.is-alert, [data-state="back"]) .splash-ic { display: block; }
.splash[data-state="error"] .splash-ic { color: var(--danger); }
.splash[data-state="back"] .splash-ic { color: var(--ok); }
/* Durum değiştikçe (yavaş → internet yok → geri geldi …) satır aşağıdan
   yeniden girer: denetleyici başlık değişince data-flip'i çevirir, iki eş
   animasyon adı arasında gidip gelmek animasyonu yeniden başlatır. */
.splash-title { font-size: 16px; font-weight: 600; line-height: 1.35; animation: splash-t1 .38s cubic-bezier(.2, .8, .2, 1) both; }
.splash[data-flip] .splash-title { animation-name: splash-t2; }
.splash-title:empty { display: none; }
.splash-sub { margin-top: 4px; color: var(--splash-dim); }
.splash-sub:empty { display: none; }
.splash-code {
  margin-top: 8px; font-size: 12px; color: var(--splash-dim); font-variant-numeric: tabular-nums;
  -webkit-user-select: text; user-select: text;
}
.splash-code:empty { display: none; }
.splash-acts { display: none; gap: 10px; margin-top: 16px; }
.splash.has-acts .splash-acts { display: flex; }
/* Düğme sıfırlaması (zemin/çizgi/imleç/font) base.css'ten gelir;
   birincil = kontrast pill (tokens.css --contrast-*), ikincil = yüzey. */
.splash-retry {
  height: var(--splash-btn-h); padding: 0 var(--splash-btn-pad); border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; background: var(--contrast-bg); color: var(--contrast-text);
}
.splash-reload {
  height: var(--splash-btn-h); padding: 0 var(--splash-btn-pad); border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; background: var(--surface-2); color: var(--text);
}
.splash[data-state="error"] .splash-reload { background: var(--contrast-bg); color: var(--contrast-text); }

@keyframes splash-t1 { from { opacity: 0; transform: translateY(7px); } }
@keyframes splash-t2 { from { opacity: 0; transform: translateY(7px); } }

@media (min-width: 861px) {
  .splash-status { top: calc(100% + 34px); width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-title { animation: none; }
}