/*
 * PAKET CD132 / GÖREV 4 — ERKEN REZERVASYON FORMU v21 STİLİ.
 *
 * Kaynak: docs/mockups/admin/erken_rezervasyon_form_v21.html <style> bloğu
 * BİREBİR (aşağıda «TASARIM» bölümü) + tasarımın tailwind.config renk
 * anahtarları (page · yumusak · line · card · navy-*) ve shadow-soft'un
 * `.erk-v21` kapsamındaki tanımı. Tanımlar CSS DEĞİŞKENİ üzerinden gider:
 *
 *   · erken.skytrip.nl : değişkenler tasarımın değerlerini taşır (birebir)
 *   · admin kabuğu     : `html.dark .erk-v21` bloğu değişkenleri ve sık
 *                        kullanılan Tailwind yardımcılarını ezer — koyu
 *                        mod TEK YERDE (CA5 dersi: bileşende dark: yok)
 *
 * Yerleşim, boşluk ve bileşen yapısı DOKUNULMADI; yalnız renk değerleri.
 */

/* ═══════════════ TOKENLAR (tasarım tailwind.config) ═══════════════ */
.erk-v21 {
    --erk-page: #f6ebe1;
    --erk-yumusak: #f1f5f9;
    --erk-line: #e6dfd7;
    --erk-card: #ffffff;
    --erk-white: #ffffff;
    --erk-navy-950: #10142b;
    --erk-navy-700: #303d6d;
    --erk-navy-400: #7d89d4;
    --erk-navy-100: #dee2f5;
    --erk-navy-50: #eef0fb;
    --erk-metin: #1e293b;          /* text-slate-800 (body) */
    --erk-golge-soft: 0 1px 2px rgba(15,36,64,.06), 0 4px 12px rgba(15,36,64,.05);
    font-family: Inter, system-ui, sans-serif;
    color: var(--erk-metin);
    background: var(--erk-page);
    font-feature-settings: 'cv11', 'ss03', 'cv02';
    -webkit-text-size-adjust: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════
   PAKET CD137-G8 (issue #81 §d) — ADMİN YÜZEYİ AÇIK MODDA DA ADMİN PALETİ.
   ═══════════════════════════════════════════════════════════════════════
   ÖLÇÜLEN KUSUR (Beyhan UAT 18.09): /admin-v2/erken-rezervasyon vitrin
   renklerini alıyor (krem `#f6ebe1` zemin, krem çizgi) ve admin kabuğunun
   `#f4f7f9` zeminine yamalı oturuyordu.
   KÖK NEDEN: CD132'de yalnız KOYU MOD ezmesi yazılmıştı (`html.dark .erk-v21`);
   AÇIK modda admin yüzeyi tasarımın vitrin tokenlarını olduğu gibi kullanıyordu.
   ÇÖZÜM: yüzey ayrımı zaten kökte var (`data-yuzey="admin"`) — ikinci bayrak
   ya da ikinci CSS dosyası AÇILMADI; yalnız iki token ezildi.
   ⚠️ YERLEŞİM DEĞİŞMEDİ: sadece renk değerleri (CD132 kuralının aynısı).
   ⚠️ Koyu mod ezmesi daha özgül (`html.dark .erk-v21` = 2 sınıf + 1 etiket)
      olduğu için bu blok koyu modu BOZMAZ. */
.erk-v21[data-yuzey="admin"] {
    --erk-page: #f4f7f9;   /* admin-shell body zemini (admin-shell.blade.php:201) */
    --erk-line: #e2e8f0;   /* admin kabuğunun çizgi rengi (slate-200) */
}

.erk-v21 .bg-page { background-color: var(--erk-page); }
.erk-v21 .bg-yumusak, .erk-v21 .hover\:bg-yumusak:hover { background-color: var(--erk-yumusak); }
.erk-v21 .border-line { border-color: var(--erk-line); }
.erk-v21 .bg-card { background-color: var(--erk-card); }
.erk-v21 .shadow-soft { box-shadow: var(--erk-golge-soft); }
.erk-v21 .bg-navy-50, .erk-v21 .hover\:bg-navy-50:hover { background-color: var(--erk-navy-50); }
.erk-v21 .border-navy-400, .erk-v21 .focus\:border-navy-400:focus { border-color: var(--erk-navy-400); }
.erk-v21 .focus\:ring-navy-100:focus { --tw-ring-color: var(--erk-navy-100); box-shadow: 0 0 0 2px var(--erk-navy-100); }
.erk-v21 .bg-navy-950\/50 { background-color: rgba(16, 20, 43, .5); }

/* ═══════════════ TASARIM <style> BLOĞU (birebir) ═══════════════ */
/* Sayilar ve tarihler: Inter + tabular-nums (sifirda nokta yok, hizalanir).
   JetBrains Mono yalniz gercek kodlarda (havalimani kodu, talep numarasi). */
.erk-v21 .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: -0.01em; }
.erk-v21 .kod { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
       font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* Alt serit artik position:fixed DEGIL — tam yukseklikli bir flex sutununun
   son ogesi. Boylece ust kaplardaki overflow/transform/backdrop-filter
   davranislarindan etkilenmiyor; mobilde de her zaman ekranin altinda kaliyor. */
.erk-v21.ekran { height: 100dvh; }
@supports not (height: 100dvh) { .erk-v21.ekran { height: 100vh; } }
.erk-v21 .alt-serit { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Yuzen etiket: alan bosken icerde, yazinca kuculup ust kenara cikar.
   Yer tutucudan farki, yazdiktan sonra da gorunur kalmasi. */
.erk-v21 .secim-aktif { border-color: var(--vurgu); background: var(--vurgu-acik); color: var(--marka-metin); }
.erk-v21 .yuzen { position: relative; }
.erk-v21 .yuzen > input { padding-top: 1.3rem; padding-bottom: .3rem; }
.erk-v21 .yuzen > label {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: #94a3b8; pointer-events: none; transition: all .15s ease;
}
.erk-v21 .yuzen > input:focus + label,
.erk-v21 .yuzen > input:not(:placeholder-shown) + label {
    top: .32rem; transform: none; font-size: 10px; font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase; color: #64748b;
}
.erk-v21 .custom-scroll::-webkit-scrollbar { height:6px; width:6px; }
.erk-v21 .custom-scroll::-webkit-scrollbar-thumb { background:#c3d0dd; border-radius:8px; }
.erk-v21 .custom-scroll::-webkit-scrollbar-track { background:transparent; }
.erk-v21 input, .erk-v21 select, .erk-v21 textarea { font-size: 16px; }
.erk-v21 .surukleniyor { opacity:.45; }
.erk-v21 .tag-tut { touch-action: none; }
.erk-v21 .aralik { -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; width:100%; height:44px; }
.erk-v21 .aralik:focus { outline:none; }
.erk-v21 .aralik::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; height:28px; width:28px; border-radius:9999px;
    background:#fff; border:3px solid var(--marka); box-shadow:0 1px 3px rgba(15,36,64,.25); cursor:grab; }
.erk-v21 .aralik::-moz-range-thumb { pointer-events:auto; height:28px; width:28px; border-radius:9999px;
    background:#fff; border:3px solid var(--marka); box-shadow:0 1px 3px rgba(15,36,64,.25); cursor:grab; }
@media (prefers-reduced-motion: reduce){ .erk-v21 *{animation:none !important; transition:none !important;} }

/* ═══════════════ ADMİN KABUĞU: yükseklik ═══════════════
   Kabukta topbar + sidebar var; 100dvh burada taşma yaratır. Tasarımın
   «tam yükseklikli flex sütun + altta sabit şerit» yapısı KORUNUR, yalnız
   yükseklik kabuk içeriğine göre ölçülür. */
.erk-v21[data-yuzey="admin"].ekran { height: calc(100dvh - 5.5rem); min-height: 520px; }
@supports not (height: 100dvh) { .erk-v21[data-yuzey="admin"].ekran { height: calc(100vh - 5.5rem); } }

/* ═══════════════ KOYU MOD (yalnız admin kabuğu: html.dark) ═══════════════
   SKILL §5.1: koyu zeminde TÜM yazı, alan, buton ve tablo açık renk;
   beyaz ada kalmaz. Ezmeler tasarımın kullandığı yardımcı sınıfların
   TAMAMINI kapsar (envanter: grep ile alındı) — bileşende dark: yok. */
html.dark .erk-v21 {
    --erk-page: #0b1220;
    --erk-yumusak: #1e293b;
    --erk-line: #334155;
    --erk-card: #0f172a;
    --erk-white: #0f172a;
    --erk-navy-50: #1e293b;
    --erk-navy-100: #1d4ed8;
    --erk-navy-400: #60a5fa;
    --erk-metin: #e2e8f0;
    --erk-golge-soft: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    /* metin için marka rengi: lacivert koyu zeminde okunmaz → kabuğun dark bağlantı rengi (sky-300) */
    --marka-metin: #7dd3fc;
    --vurgu-acik: #1e293b;
}
html.dark .erk-v21 .bg-white, html.dark .erk-v21 .hover\:bg-white:hover { background-color: var(--erk-white); }
html.dark .erk-v21 .bg-slate-100, html.dark .erk-v21 .hover\:bg-slate-100:hover,
html.dark .erk-v21 .hover\:bg-slate-50:hover { background-color: #1e293b; }
html.dark .erk-v21 .bg-slate-200 { background-color: #334155; }
html.dark .erk-v21 .text-slate-800, html.dark .erk-v21 .text-slate-700 { color: #e2e8f0; }
html.dark .erk-v21 .text-slate-600 { color: #cbd5e1; }
html.dark .erk-v21 .text-slate-500 { color: #94a3b8; }
html.dark .erk-v21 .text-slate-400 { color: #94a3b8; }
html.dark .erk-v21 .text-slate-300 { color: #64748b; }
html.dark .erk-v21 .border-slate-400 { border-color: #64748b; }
html.dark .erk-v21 .bg-amber-50 { background-color: rgba(120, 53, 15, .35); }
html.dark .erk-v21 .text-amber-900, html.dark .erk-v21 .text-amber-800, html.dark .erk-v21 .text-amber-700 { color: #fcd34d; }
html.dark .erk-v21 .text-amber-600, html.dark .erk-v21 .text-amber-600\/80 { color: #fbbf24; }
html.dark .erk-v21 .bg-rose-50, html.dark .erk-v21 .hover\:bg-rose-100:hover, html.dark .erk-v21 .bg-rose-100 { background-color: rgba(136, 19, 55, .4); }
html.dark .erk-v21 .text-rose-700, html.dark .erk-v21 .text-rose-600, html.dark .erk-v21 .hover\:text-rose-600:hover { color: #fda4af; }
html.dark .erk-v21 .border-rose-200, html.dark .erk-v21 .border-rose-300 { border-color: #9f1239; }
html.dark .erk-v21 .bg-emerald-100 { background-color: rgba(6, 78, 59, .5); }
html.dark .erk-v21 .text-emerald-700, html.dark .erk-v21 .text-emerald-600 { color: #6ee7b7; }
html.dark .erk-v21 .bg-sky-100 { background-color: rgba(12, 74, 110, .5); }
html.dark .erk-v21 .text-sky-700 { color: #7dd3fc; }
html.dark .erk-v21 .bg-orange-100 { background-color: rgba(124, 45, 18, .45); }
html.dark .erk-v21 .text-orange-700 { color: #fdba74; }
html.dark .erk-v21 .bg-violet-50, html.dark .erk-v21 .bg-violet-100, html.dark .erk-v21 .bg-violet-200 { background-color: rgba(76, 29, 149, .45); }
html.dark .erk-v21 .text-violet-900, html.dark .erk-v21 .text-violet-800, html.dark .erk-v21 .text-violet-700, html.dark .erk-v21 .text-violet-500 { color: #c4b5fd; }
html.dark .erk-v21 .border-violet-300 { border-color: #6d28d9; }
html.dark .erk-v21 input, html.dark .erk-v21 select, html.dark .erk-v21 textarea { color: #e2e8f0; background-color: var(--erk-white); color-scheme: dark; }
html.dark .erk-v21 select option { background-color: #0f172a; color: #e2e8f0; }
html.dark .erk-v21 .yuzen > label { color: #94a3b8; }
html.dark .erk-v21 .yuzen > input:focus + label,
html.dark .erk-v21 .yuzen > input:not(:placeholder-shown) + label { color: #94a3b8; }
html.dark .erk-v21 .custom-scroll::-webkit-scrollbar-thumb { background:#475569; }
html.dark .erk-v21 .aralik::-webkit-slider-thumb { background:#0f172a; }
html.dark .erk-v21 .aralik::-moz-range-thumb { background:#0f172a; }