/* App View Container */
#app-view {
    flex-grow: 1;
    overflow-y: auto;
    padding: 32px;
    height: calc(100vh - 70px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
}

/* Devre dışı buton görünümü (2026-07-19): merkezi kural. Eskiden bazı butonlar
   inline `disabled style="opacity:0.5..."` kullanıyordu; buton ZATEN bir `style`
   taşıyorsa ikinci `style` HTML'de yok sayılıyor → disabled buton tıklanamaz ama
   soluk görünmüyordu (kullanıcı kafası karışıyordu). Global kural bunu kökten
   çözer + hover'ı bastırır. !important: inline style'ı da geçersiz kılsın diye. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--primary);
    color: var(--vurgu-ustu-yazi);
    box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--vurgu-ustu-yazi);
    box-shadow: 0 4px 15px var(--secondary-glow);
}

.btn-secondary:hover {
    background: var(--secondary-hover);
}

.btn-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background: rgba(var(--ust-katman-rgb), 0.03);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--danger-hover);
}

.btn-excel {
    background: rgba(var(--secondary-rgb), 0.12);
    border: 1px solid rgba(var(--secondary-rgb), 0.35);
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(var(--secondary-rgb), 0.08);
}

.btn-excel:hover {
    background: rgba(var(--secondary-rgb), 0.22);
    border-color: var(--secondary);
    color: var(--yesil-vurgu);
    box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.15);
}

.btn-excel svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.btn-full {
    width: 100%;
}

/* Loading & Empty States */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--ust-katman-rgb), 0.05);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(10px);
    max-width: 500px;
    margin: 40px auto;
}

.empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.empty-state h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

/* Premium Card Styles (Glassmorphism) */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
    border-color: rgba(var(--ust-katman-rgb), 0.15);
    box-shadow: 0 10px 30px rgba(var(--golge-rgb), 0.3);
}

/* Form Fields */
.form-group {
    margin-bottom: 20px;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
/* ⚠️ 2026-08-17: `search` LİSTEDE YOKTU — tür tür yazılan bu seçici listesine
   girmeyen her input tarayıcı varsayılanına düşer, yani KOYU temada BEYAZ
   kutu olarak çıkar (Geri Bildirim arama kutusunda gerçekten oldu).
   Yeni bir input türü kullanırken bu listeye eklemeyi unutma. */
input[type="search"],
/* ⚠️ 2026-10-25: `tel` de YOKTU — Profilim'deki telefon kutusu canlıda beyaz kutu çıkıyordu (§2.128).
   Test (`test_profilim_denetimi.py`) JS'te kullanılan her input türünün bu listede olduğunu kilitler. */
input[type="tel"],
select,
textarea {
    width: 100%;
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
    /* Koyu tema: native tarih/saat seçicisinin takvim ikonunu (::-webkit-calendar-
       picker-indicator) beyaza çevirir + açılan takvim penceresini koyu render eder;
       select açılır listesi de koyu olur. Eskiden ikon siyah kalıp arka planla
       kaynaşıyordu (kullanıcı bildirdi). Temaya göre (TEMA_PLANI.md): koyu temada dark, açıkta light. */
    color-scheme: var(--renk-semasi);
}

/* Native takvim/saat açma ikonu — tıklama alanı belirgin olsun */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--transition-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* WebKit `search` alanını normalize et: kendi iç görünümü padding/border'ı
   ezebiliyor; temizleme (×) düğmesi de koyu glif olduğu için karanlık zeminde
   görünmez kalıyor — beyaza çeviriyoruz. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    cursor: pointer;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
    background: rgba(var(--yuzey-rgb), 0.8);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* Auth & Setup View Screen */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 40px;
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: rgba(var(--yuzey-rgb), 0.6);
    padding: 4px;
    border-radius: var(--border-radius-md);
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.auth-tab {
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.auth-tab.active {
    background: var(--primary);
    color: var(--vurgu-ustu-yazi);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}

.auth-separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.auth-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-color);
    z-index: 1;
}

.auth-separator span {
    position: relative;
    background: var(--modal-zemin);
    padding: 0 16px;
    font-size: 12px;
    color: var(--text-muted);
    z-index: 2;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 10px rgba(var(--golge-rgb), 0.15);
}

.btn-google:hover {
    background: #f3f4f6;
    box-shadow: 0 6px 15px rgba(var(--golge-rgb), 0.2);
}

.google-icon {
    width: 18px;
    height: 18px;
}

.btn-demo {
    margin-top: 16px;
}

/* Modals styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--ortu-zemin);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast) ease-in-out;
}

.modal-overlay.hidden {
    display: none;
}

.modal-card {
    background: var(--modal-zemin);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 650px;
    box-shadow: 0 25px 50px -12px rgba(var(--golge-rgb), 0.5);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex-grow: 1;
}


/* ── Giriş / Kayıt ekranı görsel yenileme (2026-07-30) ────────────────────────
   ⚠️ İLKE: bu ekran uygulamanın TEK kapısı ve Render soğuk açılışında en çok
   beklenen yer. Bu yüzden: JS kütüphanesi YOK, canvas YOK, yalnız `transform`
   ve `opacity` animasyonu (GPU'da çalışır, layout/paint tetiklemez).
   Renkler mevcut paletten: --primary (#6366f1) ve --secondary. */
.auth-page { position: relative; overflow: hidden; }

/* Arka plan küreleri — yumuşak, YAVAŞ, dikkat dağıtmayan hareket */
.auth-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;      /* tıklamayı yutmasın (toast dersi) */
    z-index: 0;
    /* ⚠️ Katmanın kendisi kenarlara doğru sönüyor. Bu olmadan kürelerin ışıması
       .auth-page kutusunun sınırında kesiliyor ve ekranda SİLİK BİR DİKDÖRTGEN
       görünüyordu (tarayıcı ekran görüntüsünde yakalandı — küreleri kutu içine
       almak tek başına yetmedi). Maske desteklenmezse görünüm eski hâline döner,
       kırılma olmaz. */
    -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
}
.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.3;
    will-change: transform;
}
/* ⚠️ Küreler kutunun İÇİNDE durmalı. İlk denemede negatif offset'le dışarı
   taşırılmışlardı; .auth-page'in overflow:hidden'ı onları kesince ekranda
   KESKİN DİKDÖRTGEN kenar görünüyordu (tarayıcı ekran görüntüsünde yakalandı).
   Blur yarıçapı kadar (~90px) kenardan içeride kalırlar; yumuşak geçiş kutu
   sınırına varmadan söner, kesim izi oluşmaz. */
.auth-orb--1 {
    width: 380px; height: 380px;
    background: var(--primary);
    top: 6%; left: 4%;
    animation: authOrbDrift 22s ease-in-out infinite alternate;
}
.auth-orb--2 {
    width: 320px; height: 320px;
    background: var(--secondary);
    bottom: 8%; right: 6%;
    animation: authOrbDrift 26s ease-in-out infinite alternate-reverse;
}
/* Hareket küçük tutuldu: kürelerin kutu kenarına dayanmaması için */
@keyframes authOrbDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(36px, 26px, 0) scale(1.08); }
}

/* Kart: arka planın ÜSTÜNDE + tek seferlik giriş animasyonu (döngü yok) */
.auth-card {
    position: relative;
    z-index: 1;
    animation: authCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes authCardIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.auth-wordmark {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}
.auth-tagline {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto 24px auto;
}

.auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}
.auth-field { margin-bottom: 16px; }
.auth-field--last { margin-bottom: 24px; }
.auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Odaklanınca ince parıltı — sadece box-shadow, layout kaymaz */
.auth-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.auth-submit {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.auth-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.35);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }

/* Sekme göstergesi: aktif sekme yumuşak geçişle kayar gibi görünsün */
.auth-tab { transition: background var(--transition-smooth), color var(--transition-smooth); }

/* ⚠️ Erişilebilirlik + eski/zayıf cihazlar: hareket kapatılabilir olmalı.
   Kullanıcı sistem ayarında "hareketi azalt" derse tüm animasyon durur. */
@media (prefers-reduced-motion: reduce) {
    .auth-orb { animation: none; }
    .auth-card { animation: none; }
    .auth-submit:hover:not(:disabled) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ÇOKLU SEÇİM (initCokluSecim) — aranabilir onay kutulu panel
   2026-08-18: tek tek seçtiren açılır menülerin yerini aldı.
   ⚠️ Panel INLINE açılır; yüzen olsaydı modalın `overflow`u kırpardı.
   ═══════════════════════════════════════════════════════════════════ */
.cs { position: relative; }

.cs-alan {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 42px; padding: 7px 30px 7px 10px;
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    color: var(--text-primary); cursor: pointer;
    /* ⚠️ min-width:0 — grid çocuğu varsayılan auto alır ve dar ekranda taşar (§2.10) */
    min-width: 0; max-width: 100%;
}
.cs-alan:hover { border-color: var(--border-focus); }
.cs-alan:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cs--kapali .cs-alan { opacity: .55; cursor: not-allowed; }

.cs-bos-etiket { color: var(--text-muted); font-size: 13px; }
.cs-ok { position: absolute; right: 10px; top: 12px; color: var(--text-muted); font-size: 11px; pointer-events: none; }

.cs-cip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(var(--warning-rgb), 0.16); color: var(--warning);
    border: 1px solid rgba(var(--warning-rgb), 0.35); border-radius: 12px;
    padding: 2px 8px; font-size: 11.5px; font-weight: 600;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-sil { cursor: pointer; font-weight: 700; opacity: .8; }
.cs-sil:hover { opacity: 1; }

/* ⚠️ MALZEME UYUMU (2026-08-18, Musa bildirdi): panel `--bg-card` (#121318,
   NÖTR kömür) ile tam opaktı; oysa modal #0f172a, form alanları
   rgba(var(--yuzey-rgb), .6) — hepsi MAVİ ARDUVAZ ve yarı saydam, üstelik uygulamada
   `backdrop-filter` 10 yerde kullanılıyor. Panel bu yüzden "forma yapıştırılmış
   siyah kutu" gibi okunuyordu. Artık kendi dilimizle aynı malzeme.
   ⚠️ Panel SATIR İÇİ açıldığı için arkasında içerik yok; bulanıklık derinlik
   göstermez, kazanç RENK/MALZEME uyumudur. */
.cs-panel {
    margin-top: 6px;
    background: rgba(var(--yuzey-rgb), 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 12px 28px rgba(var(--golge-rgb), 0.45);
    overflow: hidden;
}
.cs-ust { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.07); }
.cs-ust--arama-yok .cs-ara { display: none; }
.cs-ara {
    flex: 1 1 auto; min-width: 0;
    background: var(--arama-zemin); border: 1px solid rgba(var(--ust-katman-rgb), 0.10);
    border-radius: var(--border-radius-sm); color: var(--text-primary);
    padding: 7px 10px; font-size: 13px;
}
.cs-kapat {
    flex-shrink: 0; width: 30px; height: 30px; line-height: 1;
    background: rgba(var(--ust-katman-rgb), 0.06); border: 1px solid rgba(var(--ust-katman-rgb), 0.10);
    border-radius: var(--border-radius-sm); color: var(--text-secondary);
    font-size: 18px; cursor: pointer;
}
.cs-kapat:hover { background: rgba(var(--ust-katman-rgb), 0.12); color: var(--text-primary); }

.cs-liste { max-height: 260px; overflow-y: auto; padding: 4px 0; }
/* ⚠️ Grup başlığı OPAK KALIR. Panel zemini saydam olabilir (arkasında düz modal
   var) ama başlık KAYAN SATIRLARIN üstünde durur — saydam olursa altındaki
   mahalle adları geçip yazıyı bozar (bir kez oldu). İki farklı katman, ikisi de
   kendi doğrusunu izler. Renk mavi arduvaz ailesine alındı (panelle uyum). */
.cs-grup-blok { position: relative; }
.cs-grup {
    position: sticky; top: 0; z-index: 2;
    background: var(--grup-baslik-zemin);                     /* opak — saydam OLMAZ */
    color: var(--text-soft);
    border-left: 3px solid var(--warning);          /* seçim rengiyle bağ, taranabilirlik */
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.06);
    padding: 6px 12px 6px 9px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
}
.cs-satir {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary);
}
.cs-satir:hover { background: rgba(var(--primary-rgb), 0.12); }   /* --primary ailesi */
.cs-satir--secili { color: var(--warning); font-weight: 600; }
.cs-satir input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--warning); flex-shrink: 0; cursor: pointer; }
.cs-yok { padding: 14px 12px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

.cs-alt {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-top: 1px solid var(--border-color);
}
.cs-sayac { color: var(--text-muted); font-size: 11px; }
.cs-temizle {
    background: none; border: none; color: var(--text-secondary);
    font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.cs-temizle:hover { color: var(--warning); }

/* Dar ekran: dokunma hedefleri büyür, liste biraz kısalır */
@media (max-width: 768px) {
    .cs-satir { padding: 11px 12px; font-size: 14px; }
    .cs-satir input[type="checkbox"] { width: 18px; height: 18px; }
    .cs-liste { max-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DRAWER (initDrawer) — sağdan kayan yan panel
   Desen `calculations.js`'te satır içi stillerle vardı; ortak bileşene
   çıkarılınca stiller de buraya taşındı (§2.2 tek kaynak).
   ⚠️ Eski kopya `var(--bg-secondary)` kullanıyordu — o değişken base.css'te
   TANIMLI DEĞİL, yani renk hep yedekten geliyordu. Burada tanımlı jetonlar.
   ═══════════════════════════════════════════════════════════════════ */
.drw-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(var(--golge-rgb), 0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .2s ease;
}
.drw-backdrop.acik { opacity: 1; }

.drw-panel {
    position: fixed; top: 0; right: 0; height: 100%;
    /* ⚠️ max-width:100% → dar ekranda kendiliğinden tam ekran; ayrı mobil dal yok */
    max-width: 100%;
    z-index: 9999;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 32px rgba(var(--golge-rgb), 0.45);
    transform: translateX(100%); transition: transform .25s ease;
    /* ⚠️ min-width:0 — içindeki grid/flex çocukları taşmasın (§2.10) */
    min-width: 0;
}
.drw-panel.acik { transform: translateX(0); }

.drw-ust {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.drw-baslik-kutu { min-width: 0; }
.drw-baslik {
    font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 700;
    margin: 0; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.drw-alt { font-size: 12px; color: var(--text-secondary); margin: 4px 0 0; overflow-wrap: anywhere; }
.drw-kapat {
    flex-shrink: 0; width: 34px; height: 34px; line-height: 1;
    background: rgba(var(--ust-katman-rgb), 0.06); border: 1px solid rgba(var(--ust-katman-rgb), 0.10);
    border-radius: var(--border-radius-sm); color: var(--text-secondary);
    font-size: 22px; cursor: pointer;
}
.drw-kapat:hover { background: rgba(var(--ust-katman-rgb), 0.12); color: var(--text-primary); }

/* Gövde tek kaydırma alanı — başlık sabit kalır */
.drw-govde { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 28px; min-width: 0; }

@media (max-width: 768px) {
    .drw-ust { padding: 14px 16px 12px; }
    .drw-govde { padding: 14px 16px 24px; }
    .drw-kapat { width: 40px; height: 40px; }   /* dokunma hedefi */
}


/* ══════════════════════════════════════════════════════════════════════════
   GİRİŞ EKRANI BİLGİ PANELİ (2026-09-04, kayıt onayı — §2.32)
   Kayıt alındı ama yönetici onayı bekliyor: bu bir HATA DEĞİL, bir DURUM.
   Bu yüzden kırmızı değil YEŞİL/nötr; kırmızı "yanlış bir şey yaptın" der.
   ⚠️ Stiller CSS'te: `auth.js` inline stil sayısı teste kilitli
      (`test_sifre_sifirlama.py` — giriş ekranı sadeleştirmesi sözleşmesi).
   ══════════════════════════════════════════════════════════════════════════ */
.auth-bilgi {
    display: none;
    margin-bottom: 20px;
    padding: 18px;
    border-radius: var(--border-radius-md);
    background: rgba(var(--secondary-rgb), 0.08);
    border: 1px solid rgba(var(--secondary-rgb), 0.3);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}
.auth-bilgi-baslik {
    font-weight: 700;
    margin-bottom: 6px;
}