/* =====================================================================
   Anaokulu Kayıt — "Minimal Lüks" Tasarım Sistemi
   Bol beyaz · çok yumuşak gölge · tek vurgu (violet-indigo) · şık tipografi
   Tailwind (CDN) üstüne yüklenir; token'lar + bileşenler + global iyileştirme.
   ===================================================================== */

:root {
    --ink:        #0e1020;
    --ink-soft:   #3a3f55;
    --muted:      #6b7280;
    --faint:      #9aa1b1;
    --card:       #ffffff;
    --bg:         #f7f7fb;
    --hairline:   #ecedf3;
    --hairline-2: #f1f2f7;

    --accent:     #6d49ee;
    --accent-2:   #7c5cf6;
    --accent-ink: #5b37d6;
    --accent-50:  #f4f2ff;
    --accent-100: #ebe7ff;

    --radius:     22px;
    --radius-lg:  28px;
    --radius-sm:  14px;

    --shadow-soft: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 28px -10px rgb(16 24 40 / 0.10);
    --shadow-lux:  0 1px 2px rgb(16 24 40 / 0.04), 0 24px 56px -20px rgb(76 44 174 / 0.20);
    --shadow-glow: 0 10px 26px -8px rgb(124 92 246 / 0.45);

    --ease: cubic-bezier(.21,.6,.35,1);
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    /* Mobilde yatay kaydırmayı engelle. 'clip' sticky konumu BOZMAZ; eski
       tarayıcılar 'hidden'a düşer. */
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
    /* Çok hafif, lüks zemin: üstte iki yumuşak vurgu halesi */
    background-image:
        radial-gradient(60rem 30rem at 12% -8%, rgba(124,92,246,.10), transparent 60%),
        radial-gradient(50rem 28rem at 100% 0%, rgba(109,73,238,.07), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv01";
    letter-spacing: -0.005em;
}

h1,h2,h3,h4 { letter-spacing: -0.022em; color: var(--ink); font-weight: 700; }
h1 { font-weight: 800; }

::selection { background: var(--accent-100); color: var(--accent-ink); }

a { transition: color .2s var(--ease); }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,92,246,.28);
    border-radius: 8px;
}

/* İnce, sade kaydırma çubuğu */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #d7dae3; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #c3c7d4; background-clip: content-box; }

/* iOS zoom engeli + dokunmatik hedef */
input, select, textarea { font-size: 16px; }
.touch-target { min-height: 44px; min-width: 44px; }
[x-cloak] { display: none !important; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Adım geçiş animasyonu (form adımları) — yalnız opaklık, konum kaymaz */
.step-enter { animation: fadeIn .3s var(--ease) both; }

/* Sayfa girişi: SAF OPAKLIK (konum kaymaz → "yerleşme" hissi olmaz) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade { animation: fadeIn .28s ease both; }

/* ---------------------------------------------------------------
   Yan menü (off-canvas) — DETERMİNİSTİK. Tailwind transform sınıf
   çakışmasını ve ilk yükleme "kayma" animasyonunu önler.
   --------------------------------------------------------------- */
.lx-drawer { transform: translateX(-100%); }          /* mobil: kapalı */
.lx-drawer.is-open { transform: translateX(0); }       /* mobil: açık */
@media (min-width: 1024px) {
    .lx-drawer { transform: none !important; }          /* masaüstü: her zaman yerinde */
}
/* Geçiş YALNIZCA uygulama hazır olduğunda (ilk yüklemede animasyon yok) */
body.ui-ready .lx-drawer { transition: transform .3s var(--ease); }

/* =====================================================================
   Bileşenler (.lx-*) — Tier-1 görünümlerde kullanılır
   ===================================================================== */

.lx-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.lx-card-lg { border-radius: var(--radius-lg); }

.lx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.35rem; border-radius: var(--radius-sm);
    font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), opacity .2s;
    border: 1px solid transparent; user-select: none;
}
.lx-btn:active { transform: translateY(1px) scale(.995); }
.lx-btn:disabled { opacity: .55; cursor: not-allowed; }

.lx-btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    box-shadow: var(--shadow-glow);
}
.lx-btn-primary:hover { box-shadow: 0 14px 32px -8px rgb(124 92 246 / .55); transform: translateY(-1px); }

.lx-btn-ghost {
    color: var(--ink-soft); background: #fff; border-color: var(--hairline);
    box-shadow: 0 1px 2px rgb(16 24 40 / .04);
}
.lx-btn-ghost:hover { background: #fafafe; border-color: #e2e3ec; }

.lx-btn-soft { color: var(--accent-ink); background: var(--accent-50); }
.lx-btn-soft:hover { background: var(--accent-100); }

.lx-label { display:block; font-size:.85rem; font-weight:600; color: var(--ink-soft); margin-bottom:.4rem; }

.lx-input {
    width: 100%; min-height: 50px; padding: .75rem 1rem;
    border: 1px solid #e3e5ee; border-radius: var(--radius-sm);
    background: #fff; color: var(--ink); outline: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.lx-input::placeholder { color: var(--faint); }
.lx-input:hover { border-color: #d6d9e4; }
.lx-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,92,246,.16); background: #fff; }

.lx-badge {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.3rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; line-height:1;
}

.lx-chip { display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:999px; background:#f3f4f8; color:var(--ink-soft); font-size:.78rem; }

.lx-divider { height:1px; background: linear-gradient(90deg, transparent, var(--hairline), transparent); }

/* Sticky footer: iPhone alt çubuğu (home indicator) için güvenli alan bırakır */
.lx-stickyfoot { padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px)); }

/* Seçilebilir kart radyo/checkbox (form).
   Native input GÖRÜNÜR tutulur → seçim her tarayıcıda (eski mobil dahil) net görünür.
   :has() destekleyen tarayıcılarda ayrıca kart arka planı vurgulanır (gelişmiş efekt). */
.lx-pick {
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    min-height:50px; padding:.5rem .75rem;
    border:1px solid #e3e5ee; border-radius: var(--radius-sm);
    background:#fff; cursor:pointer; font-weight:600; color:var(--ink-soft);
    transition: all .18s var(--ease);
    -webkit-user-select:none; user-select:none;
}
.lx-pick > span { min-width:0; }
.lx-pick > input[type="radio"], .lx-pick > input[type="checkbox"] {
    width:18px; height:18px; flex:none; accent-color: var(--accent); margin:0;
}
.lx-pick:hover { border-color:#d6d9e4; }
.lx-pick:has(:checked) { border-color: var(--accent); background: var(--accent-50); color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(124,92,246,.12); }

/* Stepper pip'leri */
.lx-pip { height:.5rem; width:.5rem; border-radius:999px; background:#e1e3ec; transition: all .3s var(--ease); }
.lx-pip.is-done { background: var(--accent); }
.lx-pip.is-active { width:1.4rem; background: linear-gradient(90deg,var(--accent-2),var(--accent)); }

/* Marka rozeti */
.lx-logo {
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 16px; color:#fff;
    background: linear-gradient(140deg, var(--accent-2), var(--accent));
    box-shadow: var(--shadow-glow);
}

/* =====================================================================
   Global iyileştirme — utility tabanlı (admin) görünümleri lüks hisse taşır
   ===================================================================== */

/* Beyaz kartlara yumuşak gölge + ince hairline (shadow class'ı olmasa bile) */
.bg-white.rounded-2xl,
.bg-white.rounded-3xl { box-shadow: var(--shadow-soft); border-color: var(--hairline) !important; }

/* Form alanlarına rafine odak halkası */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(124,92,246,.16) !important; }

/* Butonlara yumuşak etkileşim */
button { transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
button:active { transform: translateY(1px); }

/* Birincil (accent) butonlara hafif glow + hover yükselme */
.bg-indigo-600 { box-shadow: 0 8px 22px -10px rgb(124 92 246 / .55); }
a.bg-indigo-600:hover, button.bg-indigo-600:hover { transform: translateY(-1px); }

/* Tablo başlıkları daha rafine */
thead th { letter-spacing: .03em; }

/* Bağlantı vurgu rengi */
.text-indigo-600, .text-indigo-700 { color: var(--accent-ink) !important; }