/* ═══════════════════════════════════════════════════════════
   SANFLOW DESIGN SYSTEM — SPECTRUM BOLD (BEYAZ)
   16 Mayıs 2026 · 2. tur — eczane/ilaç sektörü için beyaz tema
   ═══════════════════════════════════════════════════════════ */

/* Geist font: base.html'de <link> ile yükleniyor (preconnect destekli, daha hızlı) */

/* ── Workspace Depth (default) — sıcak krem zemin + soğuk mavi aksan ── */
:root,
[data-tema="acik"] {
    /* Yüzeyler */
    --bg-primary:        #fdfcfa;
    --bg-secondary:      #ffffff;
    --bg-elevated:       #f5f2ea;
    --bg-overlay:        rgba(31, 29, 24, 0.40);

    /* Metin */
    --text-primary:      #1f1d18;
    --text-secondary:    #5f5950;
    --text-tertiary:     #807a70;
    --text-faint:        #a8a195;

    /* Kenarlık */
    --border:            #e8e5dc;
    --border-strong:     #d4d0c4;

    /* Aksan + anlamsal — Workspace mavisi */
    --accent:            #2563eb;
    --accent-hover:      #1d4ed8;
    --accent-bg:         #eef2ff;
    --success:           #16a34a;
    --warning:           #d97706;
    --danger:            #b91c1c;
    --info:              #7c3aed;
    --success-bg:        rgba(22, 163, 74, 0.10);
    --warning-bg:        rgba(217, 119, 6, 0.10);
    --danger-bg:         rgba(185, 28, 28, 0.08);
    --info-bg:           rgba(124, 58, 237, 0.08);
    --focus-ring:        0 0 0 3px rgba(37, 99, 235, 0.20);

    /* ── CTA yeşili — giriş ekranındaki "Giriş yap" rengi. Spesifik öğelerde kullanılır. ── */
    --cta-yesil:         #00a86b;
    --cta-yesil-hover:   #008f5a;
    --cta-yesil-bg:      rgba(0, 168, 107, 0.10);

    /* Tipografi */
    --font-sans:         'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-mono:         'Geist Mono', ui-monospace, 'SF Mono', monospace;
    --typo-display:      56px;
    --typo-h1:           40px;
    --typo-h2:           28px;
    --typo-h3:           20px;
    --typo-body:         15px;
    --typo-small:        13px;
    --typo-caption:      11px;
    --typo-mono:         12px;

    /* Spacing 11-tier */
    --space-1:           4px;
    --space-2:           8px;
    --space-3:           12px;
    --space-4:           16px;
    --space-5:           24px;
    --space-6:           32px;
    --space-7:           48px;
    --space-8:           64px;
    --space-9:           96px;
    --space-10:          128px;
    --space-11:          192px;

    /* Yarıçap */
    --r-sm:              4px;
    --r-md:              6px;
    --r-lg:              8px;
    --r-xl:              12px;
    --r-pill:            9999px;

    /* Hareket */
    --ease:              cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:           cubic-bezier(0.4, 0, 1, 1);
    --dur-fast:          150ms;
    --dur-base:          200ms;
    --dur-slow:          400ms;
    --dur-page:          600ms;

    /* Gölgeler — Workspace Depth 4 katman, sıcak ton */
    --shadow-sm:         0 1px 2px rgba(31, 29, 24, 0.04);
    --shadow-md:         0 1px 3px rgba(31, 29, 24, 0.04), 0 4px 12px rgba(31, 29, 24, 0.03);
    --shadow-lg:         0 4px 6px rgba(31, 29, 24, 0.05), 0 12px 24px rgba(31, 29, 24, 0.04);

    --icerik-genislik:   1440px;

    /* ── Rapor paleti (Tailwind slate + marka laciverti) ──
       Rapor/panel sayfalarında yoğun tekrar eden sabit renkler. Değerler
       BİREBİR korunur (görünüm değişmez) — amaç merkezileştirme/tutarlılık.
       Bunlar tema-duyarlı DEĞİL (mevcut davranışla aynı). */
    --sf-slate-50:   #f8fafc;
    --sf-slate-100:  #f1f5f9;
    --sf-slate-200:  #e2e8f0;
    --sf-slate-300:  #cbd5e1;
    --sf-slate-400:  #94a3b8;
    --sf-slate-500:  #64748b;
    --sf-slate-600:  #475569;
    --sf-slate-700:  #334155;
    --sf-slate-800:  #1e293b;
    --sf-slate-900:  #0f172a;
    --sf-navy:       #1e3a5f;

    /* ── Eski (geri uyumluluk) ── */
    --renk-birincil:        var(--text-primary);
    --renk-birincil-acik:   var(--accent);
    --renk-birincil-soluk:  var(--text-secondary);
    --renk-basari:          var(--success);
    --renk-basari-koyu:     var(--success);
    --renk-tehlike:         var(--danger);
    --renk-tehlike-koyu:    var(--danger);
    --renk-uyari:           var(--warning);
    --renk-arkaplan:        var(--bg-primary);
    --renk-yuzey:           var(--bg-secondary);
    --renk-yuzey-soft:      var(--bg-elevated);
    --renk-metin:           var(--text-primary);
    --renk-metin-sessiz:    var(--text-secondary);
    --renk-cizgi:           var(--border-strong);
    --renk-cizgi-soft:      var(--border);
    --yazi-tipi:            var(--font-sans);
    --bosluk-xs:            var(--space-1);
    --bosluk-sm:            var(--space-2);
    --bosluk-md:            var(--space-4);
    --bosluk-lg:            var(--space-5);
    --kose-sm:              var(--r-sm);
    --kose-md:              var(--r-md);
    --kose-lg:              var(--r-lg);
    --golge-sm:             var(--shadow-sm);
    --golge-md:             var(--shadow-md);
    --golge-lg:             var(--shadow-lg);
}

/* ── Koyu tema (manuel toggle: data-tema="koyu") ── */
[data-tema="koyu"] {
    --bg-primary:        #0a0a0a;
    --bg-secondary:      #111111;
    --bg-elevated:       #1a1a1a;
    --bg-overlay:        rgba(0, 0, 0, 0.6);

    --text-primary:      #fafafa;
    --text-secondary:    #a1a1aa;
    --text-tertiary:     #71717a;
    --text-faint:        #52525b;

    --border:            #1f1f1f;
    --border-strong:     #2a2a2a;

    --accent:            #00d97e;
    --accent-hover:      #00b86a;
    --accent-bg:         rgba(0, 217, 126, 0.10);
    --success:           #00d97e;
    --warning:           #f59e0b;
    --danger:            #ff6b3d;
    --info:              #a78bfa;
    --success-bg:        rgba(0, 217, 126, 0.12);
    --warning-bg:        rgba(245, 158, 11, 0.12);
    --danger-bg:         rgba(255, 107, 61, 0.12);
    --info-bg:           rgba(167, 139, 250, 0.12);
    --focus-ring:        0 0 0 3px rgba(0, 217, 126, 0.25);

    --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   AKSAN RENG SEÇİCİ — kullanıcı Profilim'den seçer
   Sadece accent + accent-hover + accent-bg + focus-ring + cta-yesil değişir
   ═══════════════════════════════════════════════════════════ */

/* Mavi (default — değişiklik yok, :root zaten mavi) */

/* Yeşil */
[data-aksan="yesil"] {
    --accent:       #00a86b;
    --accent-hover: #008f5a;
    --accent-bg:    rgba(0, 168, 107, 0.10);
    --focus-ring:   0 0 0 3px rgba(0, 168, 107, 0.20);
    --cta-yesil:    #00a86b;
    --cta-yesil-hover: #008f5a;
    --cta-yesil-bg: rgba(0, 168, 107, 0.10);
}
[data-aksan="yesil"][data-tema="koyu"] {
    --accent: #00d97e; --accent-hover: #00b86a;
    --accent-bg: rgba(0, 217, 126, 0.12);
    --focus-ring: 0 0 0 3px rgba(0, 217, 126, 0.25);
    --cta-yesil: #00d97e; --cta-yesil-hover: #00b86a;
    --cta-yesil-bg: rgba(0, 217, 126, 0.12);
}

/* Mor / Indigo */
[data-aksan="mor"] {
    --accent:       #7c3aed;
    --accent-hover: #6d28d9;
    --accent-bg:    rgba(124, 58, 237, 0.10);
    --focus-ring:   0 0 0 3px rgba(124, 58, 237, 0.22);
    --cta-yesil:    #7c3aed;
    --cta-yesil-hover: #6d28d9;
    --cta-yesil-bg: rgba(124, 58, 237, 0.10);
}
[data-aksan="mor"][data-tema="koyu"] {
    --accent: #a78bfa; --accent-hover: #8b5cf6;
    --accent-bg: rgba(167, 139, 250, 0.14);
    --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.25);
    --cta-yesil: #a78bfa; --cta-yesil-hover: #8b5cf6;
    --cta-yesil-bg: rgba(167, 139, 250, 0.14);
}

/* Lacivert (eski marka rengi) */
[data-aksan="lacivert"] {
    --accent:       #1e3a5f;
    --accent-hover: #143656;
    --accent-bg:    rgba(30, 58, 95, 0.10);
    --focus-ring:   0 0 0 3px rgba(30, 58, 95, 0.22);
    --cta-yesil:    #1e3a5f;
    --cta-yesil-hover: #143656;
    --cta-yesil-bg: rgba(30, 58, 95, 0.10);
}
[data-aksan="lacivert"][data-tema="koyu"] {
    --accent: #93c5fd; --accent-hover: #60a5fa;
    --accent-bg: rgba(147, 197, 253, 0.14);
    --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.25);
    --cta-yesil: #93c5fd; --cta-yesil-hover: #60a5fa;
    --cta-yesil-bg: rgba(147, 197, 253, 0.14);
}

/* Turuncu */
[data-aksan="turuncu"] {
    --accent:       #ea580c;
    --accent-hover: #c2410c;
    --accent-bg:    rgba(234, 88, 12, 0.10);
    --focus-ring:   0 0 0 3px rgba(234, 88, 12, 0.22);
    --cta-yesil:    #ea580c;
    --cta-yesil-hover: #c2410c;
    --cta-yesil-bg: rgba(234, 88, 12, 0.10);
}
[data-aksan="turuncu"][data-tema="koyu"] {
    --accent: #fb923c; --accent-hover: #ea580c;
    --accent-bg: rgba(251, 146, 60, 0.14);
    --focus-ring: 0 0 0 3px rgba(251, 146, 60, 0.25);
    --cta-yesil: #fb923c; --cta-yesil-hover: #ea580c;
    --cta-yesil-bg: rgba(251, 146, 60, 0.14);
}

/* Kırmızı */
[data-aksan="kirmizi"] {
    --accent:       #dc2626;
    --accent-hover: #b91c1c;
    --accent-bg:    rgba(220, 38, 38, 0.10);
    --focus-ring:   0 0 0 3px rgba(220, 38, 38, 0.22);
    --cta-yesil:    #dc2626;
    --cta-yesil-hover: #b91c1c;
    --cta-yesil-bg: rgba(220, 38, 38, 0.10);
}
[data-aksan="kirmizi"][data-tema="koyu"] {
    --accent: #f87171; --accent-hover: #ef4444;
    --accent-bg: rgba(248, 113, 113, 0.14);
    --focus-ring: 0 0 0 3px rgba(248, 113, 113, 0.25);
    --cta-yesil: #f87171; --cta-yesil-hover: #ef4444;
    --cta-yesil-bg: rgba(248, 113, 113, 0.14);
}

/* Pembe */
[data-aksan="pembe"] {
    --accent:       #db2777;
    --accent-hover: #be185d;
    --accent-bg:    rgba(219, 39, 119, 0.10);
    --focus-ring:   0 0 0 3px rgba(219, 39, 119, 0.22);
    --cta-yesil:    #db2777;
    --cta-yesil-hover: #be185d;
    --cta-yesil-bg: rgba(219, 39, 119, 0.10);
}
[data-aksan="pembe"][data-tema="koyu"] {
    --accent: #f472b6; --accent-hover: #ec4899;
    --accent-bg: rgba(244, 114, 182, 0.14);
    --focus-ring: 0 0 0 3px rgba(244, 114, 182, 0.25);
    --cta-yesil: #f472b6; --cta-yesil-hover: #ec4899;
    --cta-yesil-bg: rgba(244, 114, 182, 0.14);
}

/* Monokrom (siyah) */
[data-aksan="siyah"] {
    --accent:       #1f1d18;
    --accent-hover: #0a0a0a;
    --accent-bg:    rgba(31, 29, 24, 0.08);
    --focus-ring:   0 0 0 3px rgba(31, 29, 24, 0.18);
    --cta-yesil:    #1f1d18;
    --cta-yesil-hover: #0a0a0a;
    --cta-yesil-bg: rgba(31, 29, 24, 0.08);
}
[data-aksan="siyah"][data-tema="koyu"] {
    --accent: #fafafa; --accent-hover: #e7e5e4;
    --accent-bg: rgba(250, 250, 250, 0.12);
    --focus-ring: 0 0 0 3px rgba(250, 250, 250, 0.22);
    --cta-yesil: #fafafa; --cta-yesil-hover: #e7e5e4;
    --cta-yesil-bg: rgba(250, 250, 250, 0.12);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── RESPONSIVE FONT BASE ──────────────────────────────────
   Tüm font-size'lar rem birimi ile yazılır → bu :root font-size'a
   bağlı olarak ekrana orantılı büyür/küçülür. Breakpoint'ler:
   - varsayılan (≤1919px): 16px (1rem = 16px)
   - 1920-2559px (büyük masaüstü/QHD): 18px → +%12.5
   - 2560-3199px (4K, 32"+): 21px → +%31
   - 3200px+ (TV/sunum): 24px → +%50
*/
html { font-size: 16px; }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2560px) { html { font-size: 21px; } }
@media (min-width: 3200px) { html { font-size: 24px; } }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--yazi-tipi);
    background: var(--renk-arkaplan);
    color: var(--renk-metin);
    min-height: 100vh;
}

/* ── NAVBAR ── */
.navbar {
    background: var(--bg-secondary);
    border-bottom: 0.5px solid var(--border);
    padding: 14px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bosluk-sm);
}

.navbar-logo {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.navbar-sag {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.navbar-kullanici {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Navbar canlı tarih/saat */
.navbar-tarih {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 0.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}
.navbar-tarih i { font-size: 0.875rem; color: var(--text-tertiary); }
.navbar-tarih .gun { color: var(--text-secondary); }
.navbar-tarih .saat { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }

.navbar-btn {
    color: var(--text-primary);
    text-decoration: none;
    background: transparent;
    border: 0.5px solid var(--border-strong);
    padding: 6px 14px;
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    transition: background var(--dur-base), border-color var(--dur-base);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.navbar-btn:hover {
    background: var(--bg-elevated);
}

.navbar-btn.cikis {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

.navbar-btn.cikis:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* ── İÇERİK ──
   max-width: dar ekranda %95, geniş ekranda 2200px üst sınır.
   Böylece 4K/TV'de boş kenar oranı azalır, mobilde ferah kalır.
*/
.icerik {
    max-width: min(95vw, 2200px);
    margin: 30px auto;
    padding: 0 20px;
}

/* ── BİLDİRİM ── */
.bildirim {
    padding: 12px 18px;
    border-radius: var(--kose-md);
    margin-bottom: 20px;
    font-size: 0.9375rem;
}

.bildirim.hata {
    background: var(--danger-bg);
    color: var(--danger);
    border-left: 4px solid var(--danger);
}

.bildirim.basari {
    background: var(--success-bg);
    color: var(--success);
    border-left: 4px solid var(--success);
}

/* ── GİRİŞ EKRANI ── */
.giris-kutu {
    max-width: 440px;
    margin: 60px auto;
    background: var(--renk-yuzey);
    border-radius: 14px;
    box-shadow: var(--golge-md);
    overflow: hidden;
}

.giris-baslik {
    background: var(--renk-birincil);
    color: white;
    padding: 35px;
    text-align: center;
}

.giris-baslik h1 { font-size: 1.625rem; margin-bottom: 6px; }
.giris-baslik p  { color: var(--renk-birincil-soluk); font-size: 1rem; }

.giris-form { padding: 30px; }

.form-grup { margin-bottom: 18px; }

.form-grup label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: var(--renk-birincil);
    margin-bottom: 6px;
}

.form-grup input,
.form-grup select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-md);
    font-size: 0.9375rem;
    background: var(--renk-yuzey-soft);
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
}

.form-grup select { padding: 14px; font-size: 16.5px; }

.form-grup input:focus,
.form-grup select:focus {
    border-color: var(--renk-birincil);
    background: var(--renk-yuzey);
}

.giris-btn {
    width: 100%;
    padding: 13px;
    background: var(--renk-birincil);
    color: white;
    border: none;
    border-radius: var(--kose-md);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 6px;
}

.giris-btn:hover { background: var(--renk-birincil-acik); }

/* ── PANEL ── */
.panel-baslik { margin-bottom: 25px; }
.panel-baslik h2 { font-size: 1.5rem; color: var(--renk-birincil); }
.panel-baslik p  { color: var(--renk-metin-sessiz); margin-top: 4px; }

.proje-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.proje-kart {
    background: var(--renk-yuzey);
    border-radius: var(--kose-lg);
    padding: 28px;
    box-shadow: var(--golge-sm);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.proje-kart:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-lg);
}

.proje-ikon { font-size: 2.5rem; margin-bottom: 14px; }

.proje-kart h3 {
    font-size: 1.125rem;
    color: var(--renk-birincil);
    margin-bottom: 8px;
}

.proje-kart p {
    color: var(--renk-metin-sessiz);
    font-size: 1rem;
    margin-bottom: 18px;
    line-height: 1.5;
}

.proje-btn {
    display: inline-block;
    background: var(--cta-yesil);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: var(--r-md);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--dur-base);
    letter-spacing: -0.01em;
}

.proje-btn:hover { background: var(--cta-yesil-hover); }
.proje-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.25); }

.bos-durum {
    background: var(--renk-yuzey);
    border-radius: var(--kose-lg);
    padding: 50px;
    text-align: center;
    color: var(--renk-metin-sessiz);
    line-height: 2;
}

/* ── ADMİN ── */
.kart {
    background: var(--renk-yuzey);
    border-radius: var(--kose-lg);
    padding: 25px;
    margin-bottom: 28px;
    box-shadow: var(--golge-sm);
}

.kart h3 {
    color: var(--renk-birincil);
    margin-bottom: 18px;
    font-size: 1.0625rem;
}

.yatay-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.yatay-form input,
.yatay-form select {
    padding: 10px 14px;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-md);
    font-size: 1rem;
    flex: 1;
    min-width: 180px;
    outline: none;
}

.yatay-form input:focus,
.yatay-form select:focus { border-color: var(--renk-birincil); }

.ekle-btn {
    padding: 10px 22px;
    background: var(--renk-basari);
    color: white;
    border: none;
    border-radius: var(--kose-md);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.ekle-btn:hover { background: var(--renk-basari-koyu); }

.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.tablo th {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    padding: 10px 14px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 0.5px solid var(--border-strong);
}

.tablo td {
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--border);
    color: var(--text-primary);
}

.tablo tr:hover td { background: var(--bg-elevated); }

.merkez { text-align: center; }

.erisim-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.1s;
}

.erisim-btn:hover { transform: scale(1.2); }

.sil-btn {
    color: var(--danger);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--r-md);
    background: var(--danger-bg);
    transition: background var(--dur-base), color var(--dur-base);
}

.sil-btn:hover {
    background: var(--danger);
    color: #ffffff;
}

/* ── RESPONSIVE: iPad ve daha küçük ekranlar ─────────────── */

/* iPad yatay (1024px ve altı) — tablolar yatay scroll'a düşsün */
@media (max-width: 1024px) {
    .icerik {
        margin: 20px auto;
        padding: 0 16px;
    }
    .navbar { padding: 12px 20px; }

    /* Genel tabloları wrap edip yatay scroll ekle */
    .kart .tablo {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Risk Analiz: bölünmüş ekran tek sütuna düşsün */
    #bolunmus {
        flex-direction: column !important;
    }
    #ustPanel, #altPanel {
        width: 100% !important;
        height: auto !important;
        min-height: 50vh;
    }
}

/* iPad dikey ve daha küçük (768px ve altı) */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 14px;
        font-size: 0.9375rem;
    }
    .navbar-logo { font-size: 1.0625rem; }
    .navbar-btn { padding: 5px 10px; font-size: 0.9375rem; }

    .panel-baslik h2 { font-size: 1.25rem; }

    .proje-grid {
        grid-template-columns: 1fr;
    }

    .kart { padding: 18px; }
    .kart h3 { font-size: 1rem; }

    /* Sekme barı kaydırılabilir */
    .sekme-bar {
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }
    .sekme-btn {
        white-space: nowrap;
        padding: 8px 14px !important;
        font-size: 0.9375rem !important;
    }

    /* Form alanları tam genişlik */
    .yatay-form input,
    .yatay-form select,
    .yatay-form button {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tablo th, .tablo td {
        padding: 8px 10px;
        font-size: 0.9375rem;
    }

    /* Risk Analiz filtre çubuğu yığınlanır */
    .ra-filtre-bar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .ra-filtre-sol, .ra-filtre-sag {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Dokunmatik cihazlarda hover'lar problemli — kaldır */
@media (hover: none) {
    .proje-kart:hover {
        transform: none;
        box-shadow: var(--golge-sm);
    }
}

/* ═══════════════════════════════════════════════════════════
   SF TL KOMPOZİT İKON — fa-file-invoice + ₺ rozet, vb.
   templates/_proje_ikon.html macro'su ile birlikte çalışır
   ═══════════════════════════════════════════════════════════ */
.sf-tl-ikon {
    position: relative;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
.sf-tl-ikon > i {
    display: inline-block;
}
.sf-tl-rozet {
    position: absolute;
    right: -0.32em;
    bottom: -0.18em;
    background: currentColor;
    color: var(--bg-secondary, #ffffff);
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.52em;
    line-height: 1;
    padding: 0.28em 0.42em 0.22em;
    border-radius: 999px;
    box-shadow: 0 0 0 0.18em var(--bg-secondary, #ffffff);
    pointer-events: none;
}
/* Boyut varyantları — istenirse uzantı için */
.sf-tl-md > i { font-size: 1em; }
.sf-tl-lg > i { font-size: 1.5em; }
.sf-tl-sm > i { font-size: 0.85em; }

/* Koyu temada rozet halkası uyumu */
[data-tema="koyu"] .sf-tl-rozet {
    box-shadow: 0 0 0 0.18em var(--bg-primary, #0a0a0a);
    color: var(--bg-primary, #0a0a0a);
}

/* ═══════════════════════════════════════════════════════════
   PAYLAŞILAN BİLEŞEN KATMANI (sf-*) — Apple HIG hizalı
   Yeniden yazım 2026-06: sayfalar arası tekrarı azaltmak için ortak,
   token-tabanlı bileşenler. Mevcut .ynt-/.an-/.ims- sınıflarını ETKİLEMEZ
   (yeni ad alanı). Sayfalar kademeli olarak bunları benimser.
   ═══════════════════════════════════════════════════════════ */

/* ── Global cila (güvenli, kırılmayan) ── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Klavye erişimi: yalnız klavyeyle gezenlere net odak halkası (fare tıklamasında değil) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-sm);
}

/* Ekran-okuyucu yardımcı: görsel gizli ama erişilebilir */
.sf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Bölüm başlığı ── */
.sf-baslik { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.sf-baslik h1, .sf-baslik h2 { font-size: var(--typo-h2); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.sf-baslik p { color: var(--text-secondary); font-size: var(--typo-small); }

/* ── Kart ── */
.sf-kart {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.sf-kart-hover { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.sf-kart-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (hover: none) { .sf-kart-hover:hover { transform: none; box-shadow: var(--shadow-sm); } }

/* ── Buton sistemi ── */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 40px; padding: 0 18px;
    font-family: var(--font-sans); font-size: var(--typo-body); font-weight: 500;
    letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
    border: 0.5px solid transparent; border-radius: var(--r-md);
    cursor: pointer; text-decoration: none;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
                transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.sf-btn:active { transform: scale(0.985); }
.sf-btn--primary { background: var(--accent); color: #fff; }
.sf-btn--primary:hover { background: var(--accent-hover); }
.sf-btn--cta { background: var(--cta-yesil); color: #fff; }
.sf-btn--cta:hover { background: var(--cta-yesil-hover); }
.sf-btn--ikinci { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-strong); }
.sf-btn--ikinci:hover { background: var(--bg-elevated); }
.sf-btn--hayalet { background: transparent; color: var(--text-secondary); }
.sf-btn--hayalet:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sf-btn--tehlike { background: var(--danger-bg); color: var(--danger); }
.sf-btn--tehlike:hover { background: var(--danger); color: #fff; }
.sf-btn--kucuk { height: 32px; padding: 0 12px; font-size: var(--typo-small); }
.sf-btn--blok { width: 100%; }
.sf-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Form alanı ── */
.sf-alan { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-etiket { font-size: var(--typo-caption); font-weight: 600; text-transform: uppercase;
             letter-spacing: 0.06em; color: var(--text-secondary); }
.sf-input, .sf-select, .sf-textarea {
    width: 100%; min-height: 42px; padding: 10px 14px;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: var(--typo-body); outline: none;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.sf-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--text-faint); }
.sf-input:hover, .sf-select:hover, .sf-textarea:hover { border-color: var(--text-tertiary); }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ── Rozet / etiket ── */
.sf-rozet {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: var(--typo-caption); font-weight: 600; letter-spacing: 0.02em;
    background: var(--bg-elevated); color: var(--text-secondary);
}
.sf-rozet--basari { background: var(--success-bg); color: var(--success); }
.sf-rozet--uyari  { background: var(--warning-bg); color: var(--warning); }
.sf-rozet--tehlike{ background: var(--danger-bg);  color: var(--danger); }
.sf-rozet--info   { background: var(--info-bg);    color: var(--info); }
.sf-rozet--aksan  { background: var(--accent-bg);  color: var(--accent); }

/* ── Veri tablosu (küçült & sığdır, sarma yok — kullanıcı standardı) ── */
.sf-tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.sf-tablo { width: 100%; border-collapse: collapse; font-size: var(--typo-small); }
.sf-tablo th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg-elevated); color: var(--text-tertiary);
    padding: 9px 12px; text-align: left; white-space: nowrap;
    font-size: var(--typo-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 0.5px solid var(--border-strong);
}
.sf-tablo td { padding: 9px 12px; white-space: nowrap; border-bottom: 0.5px solid var(--border); color: var(--text-primary); }
.sf-tablo tbody tr:hover td { background: var(--bg-elevated); }

/* ── Boş durum ── */
.sf-bos { text-align: center; padding: var(--space-7) var(--space-5); color: var(--text-tertiary); }
.sf-bos i { font-size: 2rem; color: var(--text-faint); margin-bottom: var(--space-3); display: block; }

/* ═══════════════════════════════════════════════════════════
   KONSOLİDE KURALLAR — şablonlar arası birebir aynı gövdeli kurallar
   (css_konsolide aracıyla taşındı; görünüm birebir korunur)
   ═══════════════════════════════════════════════════════════ */

/* admin.html + bm_fotolari.html + ims_rapor.html + proje_detay.html */
.ynt-aktivite-av.basvuru,
.pf-rozet[data-rol="Bölge Müdürü"],
.pp-orta,
.pd-rol-rozet.super,
.pd-yetki-sayim.bos {
    background: #fef3c7;
    color: #92400e;
}

/* admin.html + ims_rapor.html */
.hrk-sayfa-btn:disabled,
.mc-nav-tek-satir .pp-ok-btn:disabled,
.pp-ok-btn-c:disabled,
.pp-ok-btn-c-round:disabled,
.pp-ok-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* admin.html + yetkiler.html */
.ynt-chip-listesi,
.ynt-eslenmemis-listesi,
.ynt-drw-erisimler,
.sf-toplu-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* admin.html + anlasma_rapor.html */
.tkv-tablo,
.rgt-tablo,
.blg-tablo,
.hc-esik-pnl table {
    width:100%;
    border-collapse:collapse;
    font-size:0.85rem;
}

/* admin.html + anlasma_rapor.html + bm_fotolari.html */
.dg2-cips,
.ct-band .pills,
.birim-serit,
.pf-eksik-liste {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* admin.html + anlasma_rapor.html */
.vy-cir-blk small,
.ec-inp input::placeholder,
.ct-band-l span {
    font-weight:400;
    color:var(--sf-slate-400);
}

/* admin.html + anlasma_rapor.html */
.vy-rozet.panel,
#sekme-performans .pf-toplam.ok,
.chip.cs-cek {
    background:#dcfce7;
    color:#166534;
}

/* admin.html + anlasma_rapor.html */
.vy-rozet.yok,
#sekme-performans .pf-toplam.err,
.dur.bit {
    background:#fee2e2;
    color:#991b1b;
}

/* bm_fotolari.html + proje_detay.html + projeler.html */
.fv-ymatch .bil,
.pdf-koz-baslik,
.ph-koz-baslik {
    flex:1;
    min-width:0;
}

/* admin.html + yetkiler.html */
.ynt-kullanici-ust-sag,
.ytk-baslik-aksiyon {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* admin.html + projeler.html */
.ynt-aksiyon-tx,
.ph-kart-baslik {
    flex: 1;
    min-width: 0;
}

/* admin.html + proje_detay.html */
.ynt-placeholder p,
.pd-bos p {
    font-size: 0.875rem;
    margin: 0;
}

/* admin.html + anlasma_rapor.html */
.cp-not .ikon.amber,
#ag-panel .ag-cip.normal {
    background:#FAEEDA;
    color:#854F0B;
}

/* admin.html + proje_detay.html */
.es-chip .sil:hover,
.pd-audit-durum.kapali {
    background:#fee2e2;
    color:#b91c1c;
}

/* admin.html + projeler.html */
.hrk-ikon.kirmizi,
.ph-kart-durum.pasif {
    background: #fee2e2;
    color: #b91c1c;
}

/* admin.html + proje_detay.html */
.hrk-icerik .kim,
.pd-matriks td.yetki-hucre .ad {
    font-weight: 600;
    color: var(--sf-slate-900);
}

/* admin.html + anlasma_rapor.html */
.vy-cir-yilbas,
.fil-rng-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

/* admin.html + anlasma_rapor.html */
.vy-arac-bar .vy-sayfa button:disabled,
.ec-ok:disabled {
    opacity:.4;
    cursor:default;
}

/* admin.html + anlasma_rapor.html */
.rgt-ust,
#ag-panel .ag-ust {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

/* admin.html + proje_detay.html */
.rgt-secici,
.pd-ayar-renk {
    display:flex;
    gap:8px;
    align-items:center;
}

/* admin.html + anlasma_rapor.html */
.br-yseg button.akt,
.hct-durum.yuksek_alim {
    background:#2563eb;
    color:#fff;
}

/* admin.html + proje_detay.html */
.br-tbl,
.er-tbl {
    width:100%;
    border-collapse:collapse;
}

/* admin.html + anlasma_rapor.html */
.br-arac button.kaydet,
#prim-panel .pr-band .pill.akt {
    background:var(--sf-navy);
    color:#fff;
    border-color:var(--sf-navy);
}

/* admin.html + anlasma_rapor.html */
.br-kopya,
.pnl-dis {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
}

/* admin.html + anlasma_rapor.html */
#sekme-performans .pf-btn,
#perf-mail-modal .pm-btn {
    border:none;
    border-radius:10px;
    padding:11px 22px;
    font-weight:700;
    font-size:.9rem;
    cursor:pointer;
}

/* admin.html + anlasma_rapor.html */
#sekme-performans .pf-btn.primary,
#perf-mail-modal .pm-btn.primary {
    background:#16a34a;
    color:#fff;
}

/* admin.html + profil.html */
.ynt-tema-opt.aktif,
.prf-tema-opt.aktif {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

/* anlasma_rapor.html + bm_fotolari.html */
.bar i,
.fv-gbar i {
    display:block;
    height:100%;
    border-radius:4px;
}

/* anlasma_rapor.html + bm_fotolari.html */
.an-sayfa .syf-orta,
.pf-gorunum-sec {
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* anlasma_rapor.html + bm_fotolari.html */
.oran-chip .ks-dot,
.fv-gdot {
    width:9px;
    height:9px;
    border-radius:50%;
}

/* anlasma_rapor.html + kullanici_toplu.html */
#hct-panel .ag-alt-serit,
.kt-yukle-form {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* anlasma_rapor.html + proje_detay.html */
.hct-durum.yok,
.pd-audit-durum.bos {
    background:var(--sf-slate-100);
    color:var(--sf-slate-400);
}

/* anlasma_rapor.html + proje_detay.html */
#perf-panel .pf-birim-row button.geri,
.er-kaynak.rol {
    background:var(--sf-slate-100);
    color:var(--sf-slate-500);
}

/* anlasma_rapor.html + bm_fotolari.html */
#perf-panel .pfb .br i,
.fv-trk i {
    display:block;
    height:100%;
    border-radius:5px;
}

/* giris.html + profil.html */
.gx-input:focus,
.prf-form-grup input:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* giris.html + profil.html */
.gx-btn:focus-visible,
.prf-form-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* proje_detay.html + projeler.html */
.pd-breadcrumb a,
.ph-breadcrumb a {
    color: var(--sf-slate-500);
    text-decoration: none;
    transition: color 0.2s;
}

/* proje_detay.html + projeler.html */
.pd-breadcrumb i.fa-chevron-right,
.ph-breadcrumb i.fa-chevron-right {
    font-size: 0.7em;
    opacity: 0.5;
}

/* proje_detay.html + projeler.html */
#pdf-kart-onizleme::before,
#ph-kart-onizleme::before {
    content: '';
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    width: 4px;
    background: var(--proje-renk);
}

/* proje_detay.html + projeler.html */
.pdf-koz-url,
.ph-koz-url {
    font-size:0.6875rem;
    color:var(--sf-slate-400);
    font-family:ui-monospace, monospace;
}

/* proje_detay.html + projeler.html */
.pdf-koz-chip,
.ph-koz-chip {
    font-size:0.625rem;
    padding:2px 8px;
    border-radius:8px;
    background: var(--proje-renk-acik);
    color: var(--proje-renk);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.3px;
    flex-shrink:0;
}

/* ── data-post-url aksiyon linkleri (CSRF'li POST; href yok ama link gibi davranır) ── */
[data-post-url] { cursor: pointer; }