/* =========================================================================
   OSINT Dashboard — tasarım sistemi
   Dark zemin · çok-tonlu palet · rol-bazlı tipografi · sade gölgeler
   Tipografi: Space Grotesk (marka/başlık) · Inter (gövde/açıklama) · JetBrains Mono (sayı)
   Bootstrap 5.3'ün üzerine yüklenir (bu dosya en son gelir, override eder).
   ========================================================================= */

:root,
[data-bs-theme="dark"] {
    /* --- Zemin katmanları --- */
    --app-bg: #1c1c1c;        /* soft black (palet zemini) */
    --surface-1: #242321;     /* kartlar — zeminden bir tık sıcak/açık */
    --surface-2: #2d2c29;     /* input/hover/yükseltilmiş */
    --surface-3: #3a3833;
    --border: rgba(245, 232, 216, .09);       /* sıcak bej-alfa → palete bağlı */
    --border-strong: rgba(245, 232, 216, .16);

    /* --- Gölgeler — sade, nötr (renkli glow yok) --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow:    0 1px 3px rgba(0, 0, 0, .22);
    --shadow-md: 0 4px 14px -8px rgba(0, 0, 0, .4);
    --shadow-lg: 0 14px 34px -18px rgba(0, 0, 0, .5);

    /* --- Tipografi aileleri --- */
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;   /* marka, başlık */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* gövde, açıklama */
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* sayı, ID */

    /* === Geniş renk paleti =================================================
       Bootstrap'ın 5 semantik slotuna (primary/success/info/warning/danger)
       bağlı DEĞİL: kendi 12-tonlu paletimiz tasarımı sürer, Bootstrap değişkenleri
       yalnızca ince uyumluluk katmanıdır (aşağıda).
       Her ton üçlü gelir: dolu (--x) · açık metin (--x-text) · yumuşak zemin (--x-soft).
       ====================================================================== */
    --orange:  #ff6f61;  --orange-text:  #ff9183;  --orange-soft:  rgba(255, 111, 97, .14);  /* muted coral = marka aksanı */
    --amber:   #f59e0b;  --amber-text:   #fcd34d;  --amber-soft:   rgba(245, 158, 11, .15);
    --lime:    #84cc16;  --lime-text:    #bef264;  --lime-soft:    rgba(132, 204, 22, .15);
    --emerald: #10b981;  --emerald-text: #6ee7b7;  --emerald-soft: rgba(16, 185, 129, .14);
    --teal:    #14b8a6;  --teal-text:    #5eead4;  --teal-soft:    rgba(20, 184, 166, .14);
    --cyan:    #06b6d4;  --cyan-text:    #67e8f9;  --cyan-soft:    rgba(34, 211, 238, .14);
    --sky:     #38bdf8;  --sky-text:     #7dd3fc;  --sky-soft:     rgba(56, 189, 248, .14);
    --indigo:  #818cf8;  --indigo-text:  #a5b4fc;  --indigo-soft:  rgba(129, 140, 248, .15);
    --violet:  #a78bfa;  --violet-text:  #c4b5fd;  --violet-soft:  rgba(167, 139, 250, .15);
    --fuchsia: #e879f9;  --fuchsia-text: #f0abfc;  --fuchsia-soft: rgba(232, 121, 249, .15);
    --pink:    #f472b6;  --pink-text:    #f9a8d4;  --pink-soft:    rgba(244, 114, 182, .15);
    --rose:    #fb7185;  --rose-text:    #fda4af;  --rose-soft:    rgba(244, 63, 94, .15);
    --slate-text: var(--text-muted);                --slate-soft:   rgba(148, 163, 184, .12);

    /* Marka vurgusu = TURUNCU (orange→coral sunset gradyanı). Yeşil/mavi/kırmızı
       tonlar tasarımda "başarı/çalışıyor/hata" semantiği olarak kalır. */
    --accent: var(--orange);            /* muted coral #ff6f61 */
    --accent-2: #daa520;       /* golden yellow — marka gradyanının ikinci durağı */
    --accent-strong: #ff4500;  /* burnt orange — hover/aktif (paletin "hover" rengi) */
    --accent-text: var(--orange-text);
    --accent-soft: var(--orange-soft);
    --accent-on: #2a0d08;      /* dolu coral/turuncu üstünde koyu metin */

    /* --- Metin --- */
    --text: #f5e8d8;           /* warm beige (palet ana metin) */
    --text-muted: #b3a892;     /* soluk bej */
    --text-faint: #837a6b;     /* en soluk bej */

    /* --- Bootstrap değişkenlerini palete bağla --- */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-bg: var(--surface-1);
    --bs-secondary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-border-radius: .75rem;
    --bs-font-sans-serif: var(--font-sans);

    --bs-primary: #ff6f61;     --bs-primary-rgb: 255, 111, 97;
    --bs-success: #10b981;     --bs-success-rgb: 16, 185, 129;
    --bs-info: #38bdf8;        --bs-info-rgb: 56, 189, 248;
    --bs-warning: #f59e0b;     --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #f43f5e;      --bs-danger-rgb: 244, 63, 94;

    --bs-link-color: var(--accent-text);
    --bs-link-hover-color: #ff7a4d;     /* hover → burnt orange'a kayar */
    --bs-link-color-rgb: 255, 145, 131;
}

/* --- Temel ---------------------------------------------------------------- */
body {
    margin: 0;
    font-family: var(--font-sans);
    background:
        radial-gradient(900px 460px at 100% -8%, rgba(255, 111, 97, .10), transparent 60%),    /* coral */
        radial-gradient(820px 480px at -2% 4%, rgba(218, 165, 32, .06), transparent 55%),        /* gold */
        radial-gradient(820px 540px at 60% 120%, rgba(255, 69, 0, .05), transparent 60%),         /* burnt orange */
        var(--app-bg);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Başlıklar display ailesi · gövde sans (yukarıda) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Sayılar mono + tabular hizalı dursun */
.stat-value, .count-pill, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table td.text-end { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--app-bg); }
::-webkit-scrollbar-thumb:hover { background: #46443e; }

/* --- Layout -------------------------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-height)); }

.content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.75rem 2rem;
}

/* =========================================================================
   Üst navbar (topbar) — tam genişlikte, sticky. Sol köşesi sidebar genişliğiyle
   hizalanır ve sidebar'ın üst kenarıyla "kesişir". Marka (OSINT) buradadır:
   sidebar collapse olsa bile navbar kaybolmadığı için yazı görünür kalır.
   ========================================================================= */
:root { --topbar-height: 68px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--topbar-height);
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent), var(--surface-1);
    border-bottom: 1px solid var(--border);
}
/* Markayı taşıyan sol bölge: sidebar'dan BAĞIMSIZ, sabit genişlik. Sidebar
   collapse olsa bile daralmaz → OSINT yazısı navbar'da olduğu gibi kalır. */
.topbar-brand {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.15rem;
    overflow: hidden;
}
/* Hamburger: yalnızca mobilde görünür (drawer aç/kapa) */
.topbar-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    margin-left: .35rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}
.topbar-burger:hover { color: var(--text); }
@media (max-width: 768px) {
    .topbar-burger { display: inline-flex; }
    .topbar-brand { flex-basis: auto; width: auto; }   /* mobilde marka sabit genişlik tutmasın */
}

/* Sağ blok: kullanıcı adı · rol rozeti · yönetim/çıkış aksiyonları.
   Sağda nefes payı bırakır (butonlar kenara yapışmasın), öğeleri eşit aralıklar. */
.topbar-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: 1rem;
    padding-right: 1.5rem;
}
.topbar-username {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Yönetim/çıkış: palete oturan yumuşak ikon düğmeleri (Bootstrap btn yerine) */
.topbar-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.topbar-action:hover {
    color: var(--text);
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.topbar-action i { font-size: 1rem; }
/* Salt-ikon (yönetim dişlisi) kare dursun */
.topbar-action.icon-only { width: 36px; padding: 0; justify-content: center; }
/* Çıkış hover'da kırmızıya kayar (yıkıcı eylem ipucu) */
.topbar-logout:hover {
    color: var(--rose-text);
    background: var(--rose-soft);
    border-color: var(--rose-soft);
}
@media (max-width: 768px) {
    .topbar-user { padding-right: .9rem; gap: .45rem; }
}

/* =========================================================================
   Sidebar
   ========================================================================= */
:root { --sidebar-width: 252px; --sidebar-width-collapsed: 78px; }

.sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent), var(--surface-1);
    border-right: 1px solid var(--border);
    transition: flex-basis .18s ease, width .18s ease;
    overflow-x: hidden;
    white-space: nowrap;
    position: sticky;
    top: var(--topbar-height);                 /* navbar'ın altına yapışır */
    height: calc(100vh - var(--topbar-height));
    padding-top: .35rem;
}
html.sidebar-collapsed .sidebar {
    flex-basis: var(--sidebar-width-collapsed);
    width: var(--sidebar-width-collapsed);
}

.brand-mark {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    color: var(--accent-on);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: var(--shadow-md);
}
.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .2em;
}
/* Daralt/genişlet düğmesi sidebar'ın sağ kenarına oturur: yarısı dışarıda,
   dikeyde ekran ortasında. `fixed` ile sidebar'ın overflow-x:hidden kırpmasından
   kaçar; `left` sidebar genişliğiyle aynı süreyle animasyonlanır → birlikte kayar. */
.sidebar-toggle {
    position: fixed;
    top: 50%;
    left: var(--sidebar-width);
    transform: translate(-50%, -50%);
    z-index: 30;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: left .18s ease, color .12s ease, background .12s ease;
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-1); }
html.sidebar-collapsed .sidebar-toggle { left: var(--sidebar-width-collapsed); }

/* İki ikon üst üste: hafif ölçek + dönüş ile çapraz geçiş yapar. */
.sidebar-toggle i {
    position: absolute;
    font-size: .95rem;
    line-height: 1;
    transition: opacity .25s ease, transform .25s ease;
}
.sidebar-toggle .ic-collapse { opacity: 1; transform: scale(1) rotate(0); }
.sidebar-toggle .ic-expand   { opacity: 0; transform: scale(.5) rotate(-90deg); }
html.sidebar-collapsed .sidebar-toggle .ic-collapse { opacity: 0; transform: scale(.5) rotate(90deg); }
html.sidebar-collapsed .sidebar-toggle .ic-expand   { opacity: 1; transform: scale(1) rotate(0); }

.sidebar-section {
    padding: .9rem 1.15rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}
html.sidebar-collapsed .sidebar-section { visibility: hidden; }

.sidebar-nav { list-style: none; padding: .35rem .6rem; margin: 0; }
.sidebar-nav .nav-item { margin-bottom: .15rem; }

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .42rem .5rem;
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: .88rem;
    transition: background .12s ease, color .12s ease;
}
.sidebar .nav-link:hover { background: var(--surface-2); color: var(--text); }

/* sabit-genişlik ikon kabı → daralınca ikonun x/y'si oynamaz */
.nav-ic {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 1rem;
    transition: background .12s ease, color .12s ease;
}
.sidebar .nav-link:hover .nav-ic { color: var(--text); }

.sidebar .nav-link.active { color: var(--text); background: var(--accent-soft); }
.sidebar .nav-link.active .nav-ic {
    background: var(--accent);
    color: var(--accent-on);
}

html.sidebar-collapsed .nav-label { display: none; }

/* Daralınca link içeriği yatayda ortalanır: etiket gizli olduğu için ikon
   kabının sağındaki boşluğu (gap + sağ padding) sıfırla → ikon tam ortada. */
html.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

/* =========================================================================
   Mobil: sidebar yer kaplamaz; açıkken body'nin ÜSTÜNE biner (off-canvas drawer).
   `position: fixed` flex akışından çıkarır → içerik tam genişlik olur.
   Aç/kapa topbar'daki hamburger ile `html.sidebar-open` üzerinden yapılır;
   masaüstündeki collapse (daralt) durumu mobilde yok sayılır.
   ========================================================================= */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        z-index: 60;
        height: calc(100vh - var(--topbar-height));
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    html.sidebar-open .sidebar { transform: translateX(0); }

    /* Mobilde drawer her zaman tam genişlik + etiketli (collapse'ı geçersiz kıl) */
    html.sidebar-collapsed .sidebar { width: var(--sidebar-width); flex-basis: var(--sidebar-width); }
    html.sidebar-collapsed .nav-label { display: inline; }
    html.sidebar-collapsed .sidebar-section { visibility: visible; }
    html.sidebar-collapsed .sidebar .nav-link {
        justify-content: flex-start;
        gap: .65rem;
        padding: .42rem .5rem;
    }

    /* Kenardaki daralt düğmesi masaüstüne özgü → mobilde gizle */
    .sidebar-toggle { display: none; }
}

/* Drawer açıkken arkadaki içeriği karartan örtü (yalnızca mobilde görünür) */
.sidebar-backdrop { display: none; }
@media (max-width: 768px) {
    .sidebar-backdrop {
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        z-index: 55;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    html.sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
}

/* =========================================================================
   Sayfa başlığı
   ========================================================================= */
.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header .header-actions { margin-left: auto; }
.page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.page-subtitle { font-family: var(--font-sans); color: var(--text-muted); font-size: .85rem; margin-top: .2rem; }

/* =========================================================================
   Tonlu yüzeyler — daire içinde ikon + rozet ortak palet
   Her sınıf yalnızca --tone-bg / --tone-fg ikilisini set eder; bileşenler
   bunları okur. Yeni ton eklemek = tek satır.
   ========================================================================= */
.tone-accent,
.tone-orange  { --tone-bg: var(--orange-soft);  --tone-fg: var(--orange-text); }
.tone-amber,
.tone-warning { --tone-bg: var(--amber-soft);   --tone-fg: var(--amber-text); }
.tone-lime    { --tone-bg: var(--lime-soft);    --tone-fg: var(--lime-text); }
.tone-emerald,
.tone-success { --tone-bg: var(--emerald-soft); --tone-fg: var(--emerald-text); }
.tone-teal    { --tone-bg: var(--teal-soft);    --tone-fg: var(--teal-text); }
.tone-cyan    { --tone-bg: var(--cyan-soft);    --tone-fg: var(--cyan-text); }
.tone-sky,
.tone-info    { --tone-bg: var(--sky-soft);     --tone-fg: var(--sky-text); }
.tone-indigo  { --tone-bg: var(--indigo-soft);  --tone-fg: var(--indigo-text); }
.tone-violet  { --tone-bg: var(--violet-soft);  --tone-fg: var(--violet-text); }
.tone-fuchsia { --tone-bg: var(--fuchsia-soft); --tone-fg: var(--fuchsia-text); }
.tone-pink    { --tone-bg: var(--pink-soft);    --tone-fg: var(--pink-text); }
.tone-rose,
.tone-danger  { --tone-bg: var(--rose-soft);    --tone-fg: var(--rose-text); }
.tone-muted   { --tone-bg: var(--slate-soft);   --tone-fg: var(--text-muted); }

/* Daire içinde ikon (başlık + dekoratif) */
.icon-circle {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    font-size: 1.3rem;
    background: var(--tone-bg, var(--accent-soft));
    color: var(--tone-fg, var(--accent-text));
}
/* view'lerin geçtiği variant adları → ton sınıflarına eşle */
.icon-circle--accent,
.icon-circle--orange  { --tone-bg: var(--orange-soft);  --tone-fg: var(--orange-text); }
.icon-circle--amber,
.icon-circle--warning { --tone-bg: var(--amber-soft);   --tone-fg: var(--amber-text); }
.icon-circle--lime    { --tone-bg: var(--lime-soft);    --tone-fg: var(--lime-text); }
.icon-circle--emerald,
.icon-circle--success { --tone-bg: var(--emerald-soft); --tone-fg: var(--emerald-text); }
.icon-circle--teal    { --tone-bg: var(--teal-soft);    --tone-fg: var(--teal-text); }
.icon-circle--cyan    { --tone-bg: var(--cyan-soft);    --tone-fg: var(--cyan-text); }
.icon-circle--sky,
.icon-circle--info    { --tone-bg: var(--sky-soft);     --tone-fg: var(--sky-text); }
.icon-circle--indigo  { --tone-bg: var(--indigo-soft);  --tone-fg: var(--indigo-text); }
.icon-circle--violet  { --tone-bg: var(--violet-soft);  --tone-fg: var(--violet-text); }
.icon-circle--fuchsia { --tone-bg: var(--fuchsia-soft); --tone-fg: var(--fuchsia-text); }
.icon-circle--pink    { --tone-bg: var(--pink-soft);    --tone-fg: var(--pink-text); }
.icon-circle--rose,
.icon-circle--danger  { --tone-bg: var(--rose-soft);    --tone-fg: var(--rose-text); }
.icon-circle--muted   { --tone-bg: var(--slate-soft);   --tone-fg: var(--text-muted); }

/* =========================================================================
   KPI / metrik kartları
   ========================================================================= */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 190px;
    padding: 1.15rem 1.25rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: transform .12s ease, border-color .12s ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1; }
.stat-label { font-family: var(--font-sans); color: var(--text-muted); font-size: .82rem; margin-top: .35rem; }

/* =========================================================================
   Kartlar / filtre çubuğu
   ========================================================================= */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.filter-bar { padding: 1rem 1.1rem; }
.filter-bar .form-label { color: var(--text-muted); font-weight: 600; }

/* Filtre satırı (.filter-bar içindeki .row.g-3): col-md-N sabit yüzde genişlikte ve
   flex-shrink:0 olduğundan, sidebar açıkken (>=768px) satırın gerçek genişliği
   Bootstrap'ın yüzde hesabının varsaydığından dar olabilir. min-width, hesaplanan
   yüzdelik width'i geçersiz kılar (flex çözümlemesinde min her zaman kazanır) →
   sığmayan sütun(lar) zaten flex-wrap:wrap olan .row'un yeni satırına taşar;
   sayfaya/sütun sayısına özel bir ayar gerekmez. */
.filter-row > * {
    min-width: 200px;
}
/* Filtre/Sıfırla buton çifti için ek güvenlik ağı: sütun 200px'e çok yakın anlarda
   iki buton yan yana sığmazsa üst üste yığılsın (taşma yerine). */
.filter-row > .d-flex {
    flex-wrap: wrap;
}

/* Arama alanı: search-icon input'un İÇİNDE görünür ama yazının üstüne binmez —
   ikon soldan absolute konumlanır, input'a sol padding vererek metne yer açılır. */
.search-field { position: relative; }
.search-field__icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .85rem;
    pointer-events: none;
}
.search-field .form-control { padding-left: 1.9rem; }

/* Müvekkil formu — geniş (x), bölümlü, tipografik varyasyonlu */
.client-form { max-width: 1080px; padding: 1.4rem 1.6rem; }
.client-form .form-label {
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-faint);
    display: inline-flex;
    align-items: center;
}
.form-section-title {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.35rem 0 .2rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border);
}
.form-section-title:first-of-type { margin-top: .1rem; }
.form-section-title i { color: var(--accent-text); font-size: .95rem; }

/* =========================================================================
   Form elemanları
   ========================================================================= */
.form-control, .form-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(255, 111, 97, .18);
}
.form-control::placeholder { color: var(--text-faint); }
.form-text { color: var(--text-muted); }

/* =========================================================================
   Butonlar
   ========================================================================= */
.btn { border-radius: 10px; font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-on);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-hover-color: var(--accent-on);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-active-color: var(--accent-on);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent-text);
    --bs-btn-border-color: var(--accent-border, rgba(255, 111, 97, .42));
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #ffd5cb;
    --bs-btn-active-bg: var(--accent-soft);
    --bs-btn-active-color: #ffd5cb;
}
.btn-outline-secondary {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--surface-2);
    --bs-btn-active-color: var(--text);
}

/* =========================================================================
   Tablolar
   ========================================================================= */
.table-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow-x: auto;   /* dar ekranda tablo yatay kayar (taşmaz/kırpılmaz) */
}
.table-card .table { margin: 0; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    color: var(--text);
    border-color: var(--border);
}
.table > thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    padding: .8rem 1rem;
    white-space: nowrap;
}
.table > tbody td {
    border-bottom: 1px solid var(--border);
    padding: .85rem 1rem;
    vertical-align: middle;
}
.table > tbody tr:last-child td { border-bottom: 0; }
.table > tbody tr { transition: background .1s ease; }
.table > tbody tr:hover { background: var(--surface-2); }

/* Kısa sütunlar sarmasın (isim/etiket/tarih alt alta dökülmesin). Uzun metin taşıyan
   hücrelerdeki ``.clamp`` kendi ``white-space: normal``ını taşıdığı için sarmaya devam
   eder; dar ekranda tablo ``.table-card`` içinde yatay kayar. */
.table--nowrap > tbody > tr > td { white-space: nowrap; }

/* Tıklanabilir satır (bkz. dashboard.js): satırın herhangi bir yerine tıklayınca
   ``data-href``e gidilir. İmleç bunu haber verir; hover'ı ``.table``ın kendi kuralı verir. */
.table > tbody tr.row-link { cursor: pointer; }

.sort-link { color: var(--text-muted); text-decoration: none; white-space: nowrap; font-weight: 700; }
.sort-link:hover { color: var(--accent-text); }
.sort-link.is-active { color: var(--accent-text); }

/* Seçim kutucuğu sütunu (gönderi tablosu): içerik kadar dar kalsın, metin sütunlarını
   sıkıştırmasın. Kutucuk marka aksanıyla işaretlenir (Bootstrap'ın mavisi değil). */
.table .col-select { width: 1px; padding-right: .35rem; }
.table .col-select .form-check-input {
    margin: 0;
    cursor: pointer;
    background-color: var(--surface-2);
    border-color: var(--border-strong);
}
.table .col-select .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.table .col-select .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.table .col-select .form-check-input:disabled { opacity: .55; }

/* =========================================================================
   Rozetler (soft pill) — ton paletini kullanır
   ========================================================================= */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35em .7em;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1;
    background: var(--tone-bg, var(--slate-soft));
    color: var(--tone-fg, var(--text-muted));
}
.badge-soft::before {
    content: "";
    width: .5em; height: .5em;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}
.badge-soft.is-success { --tone-bg: var(--emerald-soft); --tone-fg: var(--emerald-text); }
.badge-soft.is-info    { --tone-bg: var(--sky-soft);     --tone-fg: var(--sky-text); }
.badge-soft.is-warning { --tone-bg: var(--amber-soft);   --tone-fg: var(--amber-text); }
.badge-soft.is-danger  { --tone-bg: var(--rose-soft);    --tone-fg: var(--rose-text); }
.badge-soft.is-accent  { --tone-bg: var(--orange-soft);  --tone-fg: var(--orange-text); }
.badge-soft.is-violet  { --tone-bg: var(--violet-soft);  --tone-fg: var(--violet-text); }
.badge-soft.is-cyan    { --tone-bg: var(--cyan-soft);    --tone-fg: var(--cyan-text); }
.badge-soft.is-pink    { --tone-bg: var(--pink-soft);    --tone-fg: var(--pink-text); }
.badge-soft.is-muted   { --tone-bg: var(--slate-soft);   --tone-fg: var(--text-muted); }
.badge-soft.no-dot::before { display: none; }
/* Çalışıyor: nabız gibi atan nokta (canlı/loading hissi) */
.badge-soft.is-loading::before { animation: badge-pulse 1s ease-in-out infinite; }
@keyframes badge-pulse {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Sayısal vurgu rozeti (tablo hücreleri) */
.count-pill {
    display: inline-block;
    min-width: 1.9rem;
    padding: .2rem .55rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    background: var(--surface-2);
    color: var(--text-muted);
}
.count-pill.is-warning { background: var(--amber-soft); color: var(--amber-text); }
.count-pill.is-danger  { background: var(--rose-soft);  color: var(--rose-text); }

/* =========================================================================
   Çeşitli
   ========================================================================= */
.alert { border-radius: 14px; border: 1px solid var(--border); }
.text-secondary { color: var(--text-muted) !important; }
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: var(--accent-text); }

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}
.empty-state .bi { font-size: 2rem; opacity: .5; display: block; margin-bottom: .5rem; }

.cell-sub { color: var(--text-muted); font-size: .8rem; }
.truncate { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Çok satırlı kısaltma (liste hücrelerinde uzun metin: yorum, AI gerekçesi). Küçük
   punto ile ~3 satır gösterir, taşanı "…" ile keser. Satır sayısı --clamp ile ayarlanır. */
.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp, 3);
    line-clamp: var(--clamp, 3);
    overflow: hidden;
    white-space: normal;
    font-size: .8rem;
    line-height: 1.35;
}

/* Kısaltılmış metnin tamamını fare üstündeyken gösteren yüzen kart (bkz. dashboard.js).
   Tek örnek <body>'ye eklenir — tablo ``overflow``u kırpmasın diye ``position: fixed``.
   Kapalıyken tıklama geçirmez (``pointer-events: none``), açıkken fare üstüne gelebilir:
   çok uzun yorumlar kartın içinde kaydırılarak okunur. */
.hover-preview {
    position: fixed;
    z-index: 1080;               /* modal (1055) üstü değil ama tablo/sticky başlık üstü */
    max-width: min(34rem, calc(100vw - 1.5rem));
    max-height: 60vh;
    overflow: hidden;
    padding: .7rem .85rem;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-.25rem);
    transition: opacity .12s ease, transform .12s ease;
}
.hover-preview.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Üstte ince aksan çizgisi: kartın "yorumun tamamı" olduğunu sezdirir */
.hover-preview::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: .8;
}
.hover-preview__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .35rem;
}
.hover-preview__body {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;       /* yorumdaki satır sonları korunsun */
    overflow-wrap: anywhere;     /* uzun link/kelime kartı taşırmasın */
    max-height: calc(60vh - 3rem);
    overflow-y: auto;
}

/* Pagination */
.pagination { --bs-pagination-bg: var(--surface-1); --bs-pagination-border-color: var(--border);
    --bs-pagination-color: var(--text-muted); --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-color: var(--text); --bs-pagination-disabled-bg: var(--surface-1);
    --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: var(--accent-on); --bs-pagination-hover-border-color: var(--border-strong); }

/* =========================================================================
   Dava detayı — bulgu listesi (madde madde) + ekran görüntüsü kartları
   ========================================================================= */
.findings-list { display: flex; flex-direction: column; gap: .5rem; }
.finding-row { display: flex; align-items: center; gap: .5rem; }
.finding-row__num {
    flex: 0 0 1.75rem; text-align: right;
    font-family: var(--font-mono); font-size: .85rem; color: var(--text-faint);
}
.finding-row .form-control { flex: 1 1 auto; }

/* Hariç tutulan yazar URL'leri (müvekkil formu): bulgu listesinin numarasız hali —
   sıra anlam taşımadığı için taşıma/numara yok, yalnız ekle/sil. */
.url-list { display: flex; flex-direction: column; gap: .5rem; }
.url-row { display: flex; align-items: center; gap: .5rem; }
.url-row .form-control { flex: 1 1 auto; }

/* Dilekçe açıklama maddeleri (müvekkil formu): uzun paragraflar → textarea satırları.
   .finding-row tek satırlık input içindi; bu satırlar üstten hizalanır (aksi hâlde
   4 satırlık textarea'nın yanındaki numara/butonlar ortada asılı kalır). */
.item-editor + .item-editor { margin-top: 0; }
.item-list { display: flex; flex-direction: column; gap: .5rem; }
.item-row { display: flex; align-items: flex-start; gap: .5rem; }
.item-row__num {
    flex: 0 0 1.75rem; padding-top: .45rem; text-align: right;
    font-family: var(--font-mono); font-size: .85rem; color: var(--text-faint);
}
.item-row textarea.form-control { flex: 1 1 auto; min-height: 5.5rem; line-height: 1.5; }
.item-row__actions { display: flex; flex-direction: column; gap: .25rem; }
.item-row__actions .btn { padding: .15rem .4rem; line-height: 1.2; }

/* Görselin listeler arasındaki yerini gösteren ayraç — sırayı gözle doğrulatır */
.petition-divider {
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 0; padding: .4rem .75rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
}

/* Kullanılabilir <<degisken>> listesi — katlanır, forma yer kaybettirmez */
.placeholder-legend {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); padding: .6rem .9rem;
}
.placeholder-legend > summary { cursor: pointer; font-size: .9rem; color: var(--text-muted); }
.placeholder-legend__body { margin-top: .6rem; }
.placeholder-legend__list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .3rem .9rem; margin: 0; padding: 0; list-style: none;
}
.placeholder-legend__list li { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; }
.placeholder-legend__list code { flex: 0 0 auto; color: var(--accent); }
.placeholder-legend__list span { color: var(--text-faint); }

/* AI gerekçesi — salt-okunur okunabilir metin bloğu (input değil) */
.ai-reason {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: .75rem .9rem;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.shot-card {
    display: flex; flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    height: 100%;
}
.shot-card__label { font-weight: 600; color: var(--text-muted); font-size: .85rem; margin-bottom: .5rem; }
.shot-card__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.shot-card__frame img { width: 100%; height: 100%; object-fit: contain; }
.shot-card__empty {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    color: var(--text-faint); font-size: .85rem;
}
.shot-card__empty i { font-size: 1.6rem; }
.shot-card__spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
}
.shot-card__actions { display: flex; gap: .4rem; margin-top: .6rem; }
.shot-card__actions .js-shot-pick { flex: 1 1 auto; }

/* "Seçilen Gönderiler" kanıt galerisi (profil.pdf): büyük önizleme + sıra butonları/sürükle + yükle/sil */
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
    align-items: start;
}
.evidence-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: grab;
}
/* Görsel kırpılmadan (contain) ve büyük gösterilir → plaka/telefon vb. okunur */
.evidence-card img {
    width: 100%; height: 300px;
    object-fit: contain;
    background: var(--surface-2);
    display: block;
}
.evidence-card.dragging { opacity: .4; cursor: grabbing; }
.evidence-card__bar {
    display: flex; align-items: center; gap: .3rem;
    padding: .4rem;
    border-top: 1px solid var(--border);
}
.evidence-card__bar .btn { padding: .15rem .45rem; line-height: 1.2; }
.evidence-add__btn {
    width: 100%; min-height: 345px;   /* görsel 300 + alt bar ~45 → kartla aynı yükseklik */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted); font-size: .9rem;
    cursor: pointer;
}
.evidence-add__btn:hover { color: var(--text); border-color: var(--accent); }
.evidence-add__btn:disabled { cursor: default; opacity: .6; }
.evidence-add__btn i { font-size: 1.6rem; }

/* =========================================================================
   Kod editörü (hakaret listesi) — sol satır-numarası şeridi + textarea.
   HİZALAMA SÖZLEŞMESİ: gutter ile textarea aynı font/boyut/satır-yüksekliği ve aynı
   üst dolguyu paylaşır (aşağıdaki üç değişken); biri değişirse numaralar satırlardan
   kayar. Textarea SARMAZ (white-space: pre + wrap="off") → bir mantıksal satır hep
   bir görsel satırdır, dolayısıyla numaralar dikeyde hep tutar. Dikey kaydırma JS ile
   senkronlanır (dashboard.js), yatay kaydırma yalnız textarea'ya aittir.
   ========================================================================= */
/* Sayfa başlığı altındaki rozet şeridi ("kim · ne zaman · kaç satır").
   .page-subtitle düz metin içindi; buradaki rozetler sarılabilen bir satır oluşturur. */
.meta-badges {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-top: .35rem;
}
.meta-badges__user {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--text); font-weight: 500;
}

.code-editor {
    --code-line-height: 1.6rem;
    --code-font-size: .875rem;
    --code-pad-y: .75rem;

    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.code-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.code-editor__toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: .55rem .75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.code-editor__spacer { flex: 1 1 auto; }

.code-editor__search { position: relative; display: flex; align-items: center; }
.code-editor__search-icon {
    position: absolute; left: .6rem;
    color: var(--text-faint); font-size: .8rem; pointer-events: none;
}
.code-editor__search input {
    width: 14rem; max-width: 45vw;
    padding: .25rem .6rem .25rem 1.9rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-mono); font-size: .8rem;
}
.code-editor__search input:focus { outline: none; border-color: var(--accent); }
/* Safari'nin type=search temizleme düğmesi paletle çakışıyor */
.code-editor__search input::-webkit-search-decoration,
.code-editor__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.code-editor__match,
.code-editor__stat {
    font-family: var(--font-mono); font-size: .78rem; color: var(--text-faint);
    white-space: nowrap;
}
.code-editor__match { margin-left: .5rem; }

.code-editor__dirty,
.code-editor__saved {
    font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
}
.code-editor__dirty { background: var(--amber-soft); color: var(--amber-text); }
.code-editor__dirty::before { content: "\25CF"; margin-right: .3rem; font-size: .7em; }
.code-editor__saved { background: var(--emerald-soft); color: var(--emerald-text); }

/* Yinelenen satır / çakışma / ağ hatası uyarısı — bu sayfada alert() yerine inline
   panel: kullanıcı 700+ satırlık metni kaybetme riskiyle modal'a hapsolmasın. */
.code-editor__notice {
    padding: .55rem .9rem;
    font-size: .85rem; line-height: 1.45;
    background: var(--amber-soft); color: var(--amber-text);
    border-bottom: 1px solid var(--border);
}
.code-editor__notice.is-error { background: var(--rose-soft); color: var(--rose-text); }

.code-editor__body {
    display: flex; align-items: stretch;
    height: min(68vh, 700px);
    overflow: hidden;
    resize: vertical;   /* uzun listede editörü büyütebilmek için */
}

/* Paylaşılan tipografi — bkz. yukarıdaki hizalama sözleşmesi */
.code-editor__gutter,
.code-editor__highlight,
.code-editor__area {
    font-family: var(--font-mono);
    font-size: var(--code-font-size);
    line-height: var(--code-line-height);
    padding-top: var(--code-pad-y);
    border: 0;
    white-space: pre;
}
.code-editor__gutter {
    flex: 0 0 auto;
    min-width: 3.75rem;
    padding-left: .7rem; padding-right: .7rem;
    /* Alt dolgu textarea'nın yatay kaydırma çubuğu kadar fazladır: aksi hâlde en altta
       gutter erken sınırlanır ve son satırların numarası kayardı. */
    padding-bottom: calc(var(--code-pad-y) + 20px);
    text-align: right;
    color: var(--text-faint);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow: hidden;          /* kaydırma JS'te textarea'dan kopyalanır */
    user-select: none;
    font-variant-numeric: tabular-nums;
}
/* Textarea + arkasındaki vurgu katmanı aynı kutuyu paylaşır (üst üste binerler) */
.code-editor__wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }

.code-editor__highlight {
    position: absolute; inset: 0;
    z-index: 0;
    padding-left: .9rem; padding-right: .9rem;
    /* Gutter'daki ile aynı gerekçe: textarea'nın yatay kaydırma çubuğu onun client
       yüksekliğini kısaltır; katman da aynı payı almazsa en altta vurgular kayar. */
    padding-bottom: calc(var(--code-pad-y) + 20px);
    overflow: hidden;          /* kaydırma JS'te textarea'dan kopyalanır (dikey + yatay) */
    pointer-events: none;
    color: transparent;        /* metni textarea çizer; burada yalnız zeminler görünür */
    user-select: none;
}
.code-editor__highlight mark {
    background: var(--accent-soft);
    color: transparent;
    border-radius: 3px;
}
/* Sıradaki eşleşme (Enter ile gezinilen) ayrışsın */
.code-editor__highlight mark.is-current {
    background: var(--amber-soft);
    box-shadow: 0 0 0 1px var(--amber-text);
}

.code-editor__area {
    position: relative; z-index: 1;   /* vurgu katmanının ÜSTÜNDE */
    flex: 1 1 auto;
    padding-left: .9rem; padding-right: .9rem;
    padding-bottom: var(--code-pad-y);
    background: transparent;          /* arkadaki <mark> zeminleri görünsün */
    color: var(--text);
    overflow: auto;
    resize: none;
    outline: none;
    tab-size: 4;
}
.code-editor__area::selection { background: var(--accent-soft); }

@media (max-width: 575.98px) {
    .code-editor__search input { width: 100%; max-width: none; }
    .code-editor__search { flex: 1 1 100%; }
}