/* ================================================================
   MOBİL SİTE KABUĞU — yalnızca herkese açık sayfalar (form + gizlilik)
   style.css'ten SONRA ve YALNIZCA index.html ile gizlilik.html'de yüklenir.
   admin.html bu dosyayı YÜKLEMEZ — yönetim paneli masaüstü düzeninde kalır.

   Davranış:
   - ≤620px (gerçek telefon): style.css'in kendi mobil kuralları geçerli,
     .phone normal tam-genişlik sayfa gibi davranır.
   - ≥621px (PC/tablet): içerik ortada 9:16 telefon çerçevesinde gösterilir
     ve style.css'in 620px mobil kuralları burada yinelenerek çerçeve içinin
     gerçek telefonla aynı görünmesi sağlanır.
   ================================================================ */

.phone {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  background: var(--white);
  position: relative; /* .splash bunun içine konumlanır */
}

/* ============ Açılış (splash) ekranı ============
   Sayfa açılırken logo (yoksa marka yazısı) beyaz zeminde belirir ve
   kaybolur; toplam ~3 sn. Tamamen CSS ile çalışır, JS gerekmez:
   animasyon sonunda visibility:hidden kalır (forwards) ve tıklamayı engellemez. */
.splash {
  /* fixed: gerçek telefonda görünür ekrana (viewport) göre ortalar.
     absolute olsaydı .phone'a göre ortalanırdı ve form yüklenip sayfa
     uzadıkça logo ekranın altına kayardı (geniş ekran çerçevesi için
     aşağıdaki 621px bloğunda absolute'a geri döner). */
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashOut 3s ease forwards;
}
@keyframes splashOut {
  0%, 73% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
.splash-logo,
.splash-brand {
  animation: splashIn 0.5s ease both;
}
.splash-logo {
  max-width: 74%;
  max-height: 150px;
  object-fit: contain;
}
.splash-brand {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--red);
}
@keyframes splashIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
/* Form sayfası (.splash-hold): splash, form yüklenene kadar ekranda kalır;
   app.js hazır olunca .splash-done ekleyip kapatır (en az 3 sn gösterilir).
   Buradaki 12 sn'lik animasyon yalnızca JS hiç çalışmazsa devreye giren emniyettir. */
.splash-hold { animation: splashOut 12s ease forwards; }
.splash-hold.splash-done { animation: splashFade 0.5s ease forwards; }
@keyframes splashFade {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
/* hareket azaltma tercihi olan kullanıcılarda splash hiç gösterilmez */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

@media (min-width: 621px) {
  /* telefon çerçevesi içinde splash tekrar çerçeveye göre konumlanır */
  .splash { position: absolute; }
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: radial-gradient(1100px 700px at 50% 15%,
      color-mix(in srgb, var(--red) 16%, #1e2026), #121317);
  }
  .phone {
    flex: none;
    width: auto; /* taban kuralındaki %100'ü iptal et; genişliği aspect-ratio belirlesin */
    height: min(100%, 800px);
    aspect-ratio: 9 / 16;
    max-width: 100%;
    border: 10px solid #16171b;
    border-radius: 44px;
    outline: 2px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ---- çerçeve içi mobil görünüm ----
     style.css'teki @media (max-width: 620px) bloğunun kopyasıdır; geniş
     ekranda o blok çalışmadığı için çerçeve içinde burada uygulanır. */
  .card { padding: 28px 20px; border-radius: 16px; }
  .card.legal { padding: 26px 20px; }
  .p-label { display: none; }
  .container { padding: 18px 12px 40px; }
  .btn { padding: 12px 24px; font-size: 0.88rem; }
  .btn-header:not(.btn-back) { display: none; }
  .btn-back { padding: 9px 18px; font-size: 0.78rem; }
  .topbar-inner { padding: 16px 20px; }
  .brand { font-size: 1.5rem; }
  .brand-logo { height: 52px; max-height: 52px; max-width: 260px; }
  .util-links span:not(.util-lang) { display: none; }
  input, select, textarea { font-size: 16px; }
}

/* ============ TEMA 3 (turkuaz) — form sayfası arka plan görseli ============
   Sadece form sayfasında (.phone-form) ve turkuaz tema aktifken uygulanır.
   Her temaya kendi görselini eklemek için aynı deseni tekrarla:
   :root[data-theme="TEMA"] .phone-form { background: ... url("/bg/TEMA.png") ... } */
:root[data-theme="teal"] .phone-form {
  background:
    linear-gradient(to bottom, rgba(2, 34, 66, 0.12), rgba(2, 34, 66, 0.30)),
    url("/bg/teal.jpg") top center / cover no-repeat var(--gray-100);
}
/* header ve footer'ı şeffaflaştır ki görsel arkadan görünsün */
:root[data-theme="teal"] .phone-form .util-strip,
:root[data-theme="teal"] .phone-form .topbar,
:root[data-theme="teal"] .phone-form .site-footer {
  background: transparent;
  border-color: transparent;
}
/* görsel üstündeki metinleri okunur yap (beyaz + gölge) */
:root[data-theme="teal"] .phone-form .util-tab,
:root[data-theme="teal"] .phone-form .util-lang,
:root[data-theme="teal"] .phone-form .brand,
:root[data-theme="teal"] .phone-form .site-footer p {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
:root[data-theme="teal"] .phone-form .util-tab.active {
  background: transparent;
  color: #fff;
  border-bottom-color: #fff;
}
:root[data-theme="teal"] .phone-form .site-footer a {
  color: #fff;
  text-decoration: underline;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* form kartı: görselin üstünde buzlu cam etkisiyle yüzsün */
:root[data-theme="teal"] .phone-form .card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.6);
}