/* ============================================================
   CepSanayi Yönetim Kontrol Merkezi — Admin Design System
   ============================================================ */

/* ============================================================
   Barlow — KENDİ SUNUCUMUZDAN (FAZ 5, Dilim 5.1 · 2026-09-22)
   ============================================================

   Google Fonts `<link>` BİLİNÇLİ kullanılmadı. Admin paneli iç bir araçtır:
   her sayfa açılışında üçüncü bir sunucuya istek atmak, yönetim ekranının
   kullanımını dışarıya sızdırır ve panel o sunucuya bağımlı hale gelir.
   Depoda aynı kural QR (bacon-qr-code) ve harita (self-hosted Leaflet) için
   de geçerli.

   Dosyalar müşteri sitesinin kullandığı SETİN AYNISI (`next/font` çıktısı),
   `cmap`'lerine bakılarak alt kümelerine ayrıldı — tahminle değil kapsamla:
   `latin-ext` dosyaları U+011F (ğ) içerir, Türkçe için ŞART.

   `font-display: swap`: yazı tipi gelene kadar metin GÖRÜNÜR. Admin'de
   boş ekran beklemek, bir saniyelik yanlış yazı tipinden daha kötüdür. */

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/barlow-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/barlow-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/barlow-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/barlow-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-condensed-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy-900: #0B1220;
    --navy-800: #0F172A;
    --navy-700: #1E293B;
    --bg: #F1F5F9;
    --surface: #FFFFFF;
    --border: #E2E8F0;
    --text: #0F172A;
    --muted: #64748B;
    --accent: #F97316;
    --accent-2: #2563EB;

    --success: #16A34A;
    --success-soft: #DCFCE7;
    --danger: #DC2626;
    --danger-soft: #FEE2E2;
    --warn: #D97706;
    --warn-soft: #FEF3C7;
    --info: #2563EB;
    --info-soft: #DBEAFE;
    --neutral: #475569;
    --neutral-soft: #F1F5F9;

    --radius-card: 10px;
    --radius-input: 8px;
    --radius-pill: 999px;

    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --ring: 0 0 0 3px rgba(37, 99, 235, .25);

    /* Barlow kendi sunucumuzdan (yukarıdaki @font-face bloğu); yüklenemezse
       sistem yazı tipine düşer — panel hiçbir durumda okunmaz kalmaz. */
    --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Başlıklar ve plaka: müşteri sitesiyle aynı sıkışık varyant. */
    --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* --- Semantik tokenlar (Tema T6) — mobil ile aynı isimler.
       Eski isimler (--bg, --accent, --muted...) alias olarak korunur. --- */
    --brand-primary: var(--accent);
    --brand-primary-text: #C2410C;
    --brand-deep: var(--navy-800);
    --background: var(--bg);
    --surface-raised: #FFFFFF;
    --surface-muted: #F1F5F9;
    --border-strong: #CBD5E1;
    --text-primary: var(--text);
    --text-secondary: #334155;
    --text-tertiary: var(--muted);
    --success-bg: var(--success-soft);
    --success-fg: #15803D;
    --warning-bg: var(--warn-soft);
    --warning-fg: #B45309;
    --danger-bg: var(--danger-soft);
    --danger-fg: #B91C1C;
    --info-bg: var(--info-soft);
    --info-fg: #1D4ED8;
    --neutral-bg: var(--neutral-soft);
    --neutral-fg: var(--neutral);
    --brand-bg: #FFF7ED;
    --brand-fg: #C2410C;
    --focus-ring: var(--ring);
    --radius-sm: var(--radius-input);
    --radius-md: var(--radius-card);
    --radius-lg: 14px;
    --shadow-soft: var(--shadow);

    /* Koyu temada da değişmesi gereken yardımcı tonlar */
    --table-head-bg: #FCFCFD;
    --row-hover: #F8FAFC;
    --row-zebra: #FAFBFD;
    --mono-bg: #F1F5F9;
    --chip-gray-bg: #E8EDF3;
    --bar-track: #EEF2F7;
    --kv-border: #F1F5F9;
    --input-border: #CBD5E1;
    --placeholder: #94A3B8;
}

/* ============================================================
   Koyu tema (Tema T6) — [data-theme="dark"]
   Derinlik gölgeyle değil yüzey ve border farkıyla verilir.
   ============================================================ */

[data-theme="dark"] {
    --bg: #0B1220;
    --surface: #111A2E;
    --border: #1E2A44;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --accent: #FB923C;
    --accent-2: #60A5FA;

    --success: #4ADE80;
    --success-soft: #123524;
    --danger: #F87171;
    --danger-soft: #3B1218;
    --warn: #FBBF24;
    --warn-soft: #3A2A05;
    --info: #60A5FA;
    --info-soft: #102A4A;
    --neutral: #CBD5E1;
    --neutral-soft: #182235;

    --shadow: none;
    --ring: 0 0 0 3px rgba(147, 197, 253, .35);

    --brand-primary-text: #FDBA74;
    --surface-raised: #162138;
    --surface-muted: #182235;
    --border-strong: #64748B;
    --text-secondary: #CBD5E1;
    --success-fg: #86EFAC;
    --warning-fg: #FDE68A;
    --danger-fg: #FCA5A5;
    --info-fg: #93C5FD;
    --neutral-fg: #CBD5E1;
    --brand-bg: #3A1C0A;
    --brand-fg: #FDBA74;

    --table-head-bg: #0E1728;
    --row-hover: #162138;
    --row-zebra: #0F1929;
    --mono-bg: #182235;
    --chip-gray-bg: #182235;
    --bar-track: #1E2A44;
    --kv-border: #1E2A44;
    --input-border: #64748B;
    --placeholder: #64748B;
}

[data-theme="dark"] ::selection { background: rgba(251, 146, 60, .35); }
[data-theme="dark"] * { scrollbar-color: #334155 transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

::selection { background: rgba(249, 115, 22, .25); }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Thin slate scrollbars */
* { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94A3B8; }

/* ============================================================
   App shell
   ============================================================ */

.app { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */

.sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: #CBD5E1;
}

.sidebar .brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Plaka kimliği (FAZ 5.1): marka bloğu artık mobil/site ile aynı motifi
   taşır — mavi TR bandı + beyaz plaka. Plaka FİZİKSEL bir nesnedir: koyu
   temada da BEYAZ kalır, token kullanılmaz (panel `PlateBadge`'de aynı
   tuzağa düşülmüştü, orada da beyaz sabitlendi). */
.sidebar .brand-plate {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    height: 34px;
    border: 2px solid #12161F;
    border-radius: 6px;
    background: #FFFFFF;
}

.sidebar .brand-plate .tr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    background: #002D91;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
}

.sidebar .brand-name {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #12161F;
    line-height: 1;
}

.sidebar .brand-name span { color: #C2410C; }

.sidebar .brand-sub {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748B;
}

.sidebar nav { flex: 1; padding: 14px 12px; overflow-y: auto; }

.sidebar .nav-label {
    padding: 0 10px;
    margin: 18px 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #526079;
}

.sidebar .nav-group:first-child .nav-label { margin-top: 2px; }

.sidebar nav a,
.sidebar-foot button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #CBD5E1;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.sidebar nav a svg,
.sidebar-foot button svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; }

.sidebar nav a:hover,
.sidebar-foot button:hover {
    background: rgba(255, 255, 255, .05);
    color: #FFFFFF;
    text-decoration: none;
}

.sidebar nav a:hover svg,
.sidebar-foot button:hover svg { opacity: 1; }

.sidebar nav a.active {
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
}

.sidebar nav a.active svg { opacity: 1; color: var(--accent); }

.sidebar nav a.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar-foot {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* ---------------- Main / topbar ---------------- */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar .panel-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}

.topbar .user { display: flex; align-items: center; gap: 12px; color: var(--neutral); font-size: 13px; }
.topbar .user-name { font-weight: 600; color: var(--text); }
.topbar form { display: inline; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #EA580C 100%);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--shadow);
}

.content { padding: 28px; max-width: 1440px; width: 100%; }

h1.page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 18px;
}

.page-lead { color: var(--muted); font-size: 13px; margin: -12px 0 18px; }

h2.section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 24px 0 12px;
}

.muted { color: #94A3B8; font-size: 12.5px; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--accent-2); color: #fff; }
.btn-primary:hover { background: #1D4ED8; }

.btn-orange { background: var(--accent); color: #fff; }
.btn-orange:hover { background: #EA580C; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803D; }

.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-bg); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn-outline { background: var(--surface); color: var(--neutral); border-color: var(--input-border); }
.btn-outline:hover { background: var(--row-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--neutral); border-color: transparent; }
.btn-ghost:hover { background: var(--neutral-soft); color: var(--text); }

.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

/* ============================================================
   Cards & metrics
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.card > .section-title:first-child { margin-top: 0; }

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.metric {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 16px;
}

.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.metric .label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding-top: 3px;
}

.metric .value {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.15;
    word-break: break-word;
}

.metric .value.value-sm { font-size: 15px; font-weight: 600; }

.metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--info-soft);
    color: var(--info);
}

.metric-icon svg { width: 16px; height: 16px; }

/* Clickable metric cards */
a.metric.metric-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.metric.metric-link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    border-color: var(--accent);
}

/* Small trend badge under a metric value (finance) */
.metric-sub {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 1px 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.metric-sub.up { background: var(--success-soft); color: var(--success); }
.metric-sub.down { background: var(--danger-soft); color: var(--danger); }
.metric-sub.flat { background: var(--neutral-soft); color: var(--neutral); }

.cards-grid .metric:nth-child(4n+2) .metric-icon { background: #FFEDD5; color: #EA580C; }
.cards-grid .metric:nth-child(4n+3) .metric-icon { background: var(--success-soft); color: var(--success); }
.cards-grid .metric:nth-child(4n+4) .metric-icon { background: var(--neutral-soft); color: var(--neutral); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-col > .card { margin-bottom: 20px; }

/* ============================================================
   Tables — the star
   ============================================================ */

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.table-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.table-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--neutral-soft);
    border: 1px solid var(--border);
    color: var(--neutral);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.table-card-note { margin-left: auto; color: #94A3B8; font-size: 12px; }

.table-scroll { overflow: auto; max-height: 72vh; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }

table.data th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--table-head-bg);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    padding: 10px 16px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

table.data td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-secondary);
    vertical-align: top;
}

table.data tbody tr:last-child td { border-bottom: 0; }
/* Hafif zebra (Tema T7) — hover ve focus-within zebra'yı ezer. */
table.data tbody tr:nth-child(even) td { background: var(--row-zebra); }
table.data tbody tr:hover td,
table.data tbody tr:focus-within td { background: var(--row-hover); }

table.data td:first-child { font-weight: 500; color: var(--text); }

table.data a { color: var(--accent-2); font-weight: 500; }
table.data a:hover { text-decoration: underline; }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }

/* Monospace pill — plates, referral codes, paths, actions */
.mono, code.meta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    background: var(--mono-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--text-secondary);
    word-break: break-all;
}

.mono { white-space: nowrap; word-break: normal; letter-spacing: .02em; font-weight: 500; }

/* ============================================================
   Chips
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.chip-green { background: var(--success-bg); color: var(--success-fg); }
.chip-red { background: var(--danger-bg); color: var(--danger-fg); }
.chip-amber { background: var(--warning-bg); color: var(--warning-fg); }
.chip-gray { background: var(--chip-gray-bg); color: var(--neutral-fg); }
.chip-blue { background: var(--info-bg); color: var(--info-fg); }
.chip-orange { background: var(--brand-bg); color: var(--brand-fg); }

/* NOT (S1 2026-09-08): kullanılmayan .status-* alias'ları kaldırıldı —
   tüm çipler admin.partials.chip üzerinden chip-* sınıflarını kullanır. */

/* ============================================================
   Filters & form controls
   ============================================================ */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 16px;
}

.filters label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 5px;
}

.filters input,
.filters select {
    width: 100%;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-input);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.filters select,
.inline-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px;
}

.filters input:hover, .filters select:hover { border-color: #94A3B8; }

.filters input:focus-visible,
.filters select:focus-visible,
.inline-form input:focus-visible,
.inline-form select:focus-visible {
    outline: none;
    border-color: var(--accent-2);
    box-shadow: var(--ring);
}

.filters input::placeholder { color: var(--placeholder); }

/* Inline action forms (subscription / referral actions) */
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 2px 6px 2px 0; }

.inline-form input,
.inline-form select {
    padding: 5px 8px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    max-width: 110px;
    background: var(--surface);
}

.actions-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.actions-stack .inline-form { margin: 0; }

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

.pagination-info { font-variant-numeric: tabular-nums; }

.pagination-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.pagination .pg {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--accent-2);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background .12s ease, border-color .12s ease;
}

.pagination a.pg:hover { background: #F8FAFC; border-color: #94A3B8; text-decoration: none; }

.pagination .pg.current { color: var(--neutral); font-weight: 500; }

.pagination .pg.disabled {
    color: #94A3B8;
    background: #F8FAFC;
    border-color: var(--border);
    box-shadow: none;
    cursor: default;
}

/* ============================================================
   Empty states
   ============================================================ */

.empty-state { padding: 40px 24px; text-align: center; color: #94A3B8; }
.empty-state svg { width: 40px; height: 40px; color: #CBD5E1; margin-bottom: 10px; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--muted); }
.empty-state .empty-hint { font-size: 12.5px; color: #94A3B8; margin-top: 3px; }

table.data tbody tr:hover td:has(.empty-state) { background: var(--surface); }

/* ============================================================
   CSS bar charts
   ============================================================ */

.bar-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }

.bar-row .bar-label { width: 160px; flex-shrink: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bar-row .bar-track {
    flex: 1;
    height: 20px;
    background: var(--bar-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.bar-row .bar-fill {
    height: 100%;
    min-width: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #1D4ED8 0%, #3B82F6 100%);
    transform-origin: left center;
    animation: barGrow .8s cubic-bezier(.22, 1, .36, 1) both;
}

.bar-row .bar-fill.orange { background: linear-gradient(90deg, #EA580C 0%, #FB923C 100%); }
.bar-row .bar-fill.red { background: linear-gradient(90deg, #B91C1C 0%, #EF4444 100%); }
.bar-row .bar-fill.zero { background: transparent; min-width: 0; animation: none; }

@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bar-row .bar-value {
    width: 52px;
    flex-shrink: 0;
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* ============================================================
   Detail pages — definition lists
   ============================================================ */

.kv { display: grid; grid-template-columns: 210px 1fr; gap: 0 16px; font-size: 13.5px; }

.kv .k {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid var(--kv-border);
}

.kv .v {
    color: var(--text);
    padding: 7px 0;
    border-bottom: 1px solid var(--kv-border);
    min-width: 0;
    overflow-wrap: break-word;
}

.kv .k:nth-last-child(2), .kv .v:last-child { border-bottom: 0; }

/* Yönetim İşlemleri — grouped action forms */
.admin-actions {
    margin-top: 20px;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.admin-actions-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFBEB;
    border-bottom: 1px solid #FDE68A;
    color: #92400E;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-actions-head svg { width: 15px; height: 15px; flex-shrink: 0; }

.admin-actions-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.admin-actions-body .inline-form { margin: 0; }

/* ============================================================
   Alerts / flash messages
   ============================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-input);
    border-left: 3px solid transparent;
    margin-bottom: 16px;
    font-size: 13px;
    box-shadow: var(--shadow);
}

.alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.alert-success { background: var(--success-soft); border-left-color: var(--success); color: #15803D; }
.alert-error { background: var(--danger-soft); border-left-color: var(--danger); color: #B91C1C; }

/* ============================================================
   Login page
   ============================================================ */

body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(600px 420px at 78% 18%, rgba(249, 115, 22, .16), transparent 65%),
        radial-gradient(500px 380px at 15% 85%, rgba(37, 99, 235, .12), transparent 65%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 14px;
    padding: 36px 32px 30px;
    box-shadow: 0 4px 6px rgba(2, 6, 23, .25), 0 24px 48px rgba(2, 6, 23, .45);
}

.login-card .logo { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.login-card .logo span { color: var(--accent); }

/* Plaka motifi (Tema T8 / B6): dekoratif marka imzası; gerçek plaka değil. */
.login-plate {
    display: flex;
    width: 108px;
    margin: 0 auto 14px;
    border: 2px solid #0F172A;
    border-radius: 7px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(2, 6, 23, .25);
}
.login-plate .tr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    background: #2563EB;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
}
.login-plate .num {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #0F172A;
}

/* Hata girişte bir kez 2-3 px yatay sallanır; reduced motion'da kapalı. */
@keyframes loginShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    55% { transform: translateX(3px); }
    80% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.login-card .error { animation: loginShake 180ms ease-out 1; }
@media (prefers-reduced-motion: reduce) {
    .login-card .error { animation: none; }
}

.login-card .subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 4px 0 26px;
}

.login-card label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral);
    margin: 14px 0 5px;
}

.login-field { position: relative; }

.login-field svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #94A3B8;
    pointer-events: none;
}

.login-field input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.login-field input:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: var(--ring); }

.login-card button[type="submit"] {
    width: 100%;
    margin-top: 22px;
    padding: 11px;
    background: var(--accent);
    /* Beyaz/orange kontrastı AA geçmez: CTA metni navy (plan B6). */
    color: #0F172A;
    border: 0;
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, box-shadow .12s ease;
}

.login-card button[type="submit"]:hover { background: #EA580C; }
.login-card button[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 115, 22, .35); }

.login-card .error {
    background: var(--danger-soft);
    border-left: 3px solid var(--danger);
    color: #B91C1C;
    border-radius: var(--radius-input);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.login-card .note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    text-align: center;
    color: #94A3B8;
    font-size: 12px;
}

.login-card .note svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
    .app { flex-direction: column; }

    .sidebar { width: 100%; }
    .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px; }
    .sidebar .nav-group { display: contents; }
    .sidebar .nav-label { display: none; }
    .sidebar nav a { width: auto; }
    .sidebar nav a.active::before { display: none; }
    .sidebar-foot { border-top: 0; padding-top: 0; }
    .sidebar-foot button { width: auto; }

    .topbar { position: static; padding: 12px 16px; }
    .content { padding: 16px; }

    .two-col { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; }
    .kv .k { padding-bottom: 0; border-bottom: 0; }
    .kv .v { padding-top: 2px; }
}

/* ============================================================
   Kabuk eklentileri (Tema T6): details nav grupları, sidebar
   daraltma, topbar ikon butonları, komut paleti
   ============================================================ */

/* --- details tabanlı nav grupları --- */
details.nav-group summary.nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
details.nav-group summary.nav-label::-webkit-details-marker { display: none; }
details.nav-group summary.nav-label::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-right: 1.6px solid #526079;
    border-bottom: 1.6px solid #526079;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
details.nav-group[open] summary.nav-label::after { transform: rotate(45deg); }

/* --- Topbar ikon butonları --- */
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-left .crumb {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--neutral);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover { background: var(--row-hover); color: var(--text); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn svg { width: 16px; height: 16px; }

.sidebar-toggle { display: none; }
@media (max-width: 900px) { .sidebar-toggle { display: inline-flex; } }

/* --- Sidebar daraltma (yalnız geniş ekran) --- */
@media (min-width: 901px) {
    html[data-sidebar="collapsed"] .sidebar { width: 64px; }
    html[data-sidebar="collapsed"] .sidebar .brand-sub,
    html[data-sidebar="collapsed"] .sidebar summary.nav-label { display: none; }
    /* Metinler markup değişmeden gizlenir; tooltip (title) JS ile eklenir. */
    html[data-sidebar="collapsed"] .sidebar nav a,
    html[data-sidebar="collapsed"] .sidebar-foot button {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding: 10px;
    }
    html[data-sidebar="collapsed"] .sidebar nav a svg,
    html[data-sidebar="collapsed"] .sidebar-foot button svg {
        width: 18px;
        height: 18px;
    }
    html[data-sidebar="collapsed"] .sidebar nav a.active::before { left: -8px; }
    html[data-sidebar="collapsed"] .sidebar .brand { padding: 16px 6px; }
    html[data-sidebar="collapsed"] .sidebar .brand-name { font-size: 15px; text-align: center; }
}

/* Mobil: sidebar varsayılan gizli, toggle ile açılır */
@media (max-width: 900px) {
    .sidebar nav, .sidebar-foot { display: none; }
    .app.sidebar-open .sidebar nav { display: flex; }
    .app.sidebar-open .sidebar-foot { display: block; }
}

/* --- Komut paleti (Ctrl/Cmd+K) --- */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(2, 6, 23, .55);
}
.cmdk-overlay.open { display: flex; }

.cmdk {
    width: 100%;
    max-width: 560px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(2, 6, 23, .45);
    overflow: hidden;
}

.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.cmdk-input-wrap svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.cmdk input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
}
.cmdk input::placeholder { color: var(--placeholder); }
.cmdk-hint {
    font-size: 10.5px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
}

.cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmdk-section {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.cmdk-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: 13.5px;
}
.cmdk-option svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.cmdk-option .cmdk-group { margin-left: auto; font-size: 11px; color: var(--muted); }
.cmdk-option[aria-selected="true"] {
    background: var(--neutral-bg);
    color: var(--text);
}
.cmdk-option[aria-selected="true"] svg { color: var(--brand-primary); }
.cmdk-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ============================================================
   HAREKET (FAZ 5, Dilim 5.2 · 2026-09-22)
   ============================================================

   İşletme panelinin hareket paketinin admin karşılığı. Emil Kowalski'nin
   karar çerçevesi: bir şey günde 100+ kez görülüyorsa animasyon ALMAZ;
   onlarca kez görülüyorsa azaltılır; ara sıra görülen standart animasyon
   alır. Her geçişin bir amacı var — "havalı dursun" geçerli gerekçe değil.

   Yerleşik CSS easing'leri BİLİNÇLİ kullanılmıyor: zayıflar. Giriş/çıkışta
   güçlü ease-out. UI'da `ease-in` ASLA: yavaş başlar ve kullanıcının en
   dikkatli baktığı ilk anı geciktirir.

   `transition: all` da kullanılmıyor — yalnız sayılan özellikler; `all`
   yarın eklenen bir özelliği de sessizce animasyonlu yapar. */

:root {
    --a-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --a-press: 160ms;
    --a-hover: 150ms;
    --a-enter: 200ms;
}

/* ---- 1) Basılabilir her şey: basınca küçülür ---------------------------
   Tek kural tüm paneli kapsar. Ölçek 0.97: fark edilir ama sıçramaz. */
.app :is(button, a.btn, .btn, .icon-btn, [role="button"]):not(:disabled) {
    transition: transform var(--a-press) var(--a-ease-out),
                background-color var(--a-hover) ease,
                border-color var(--a-hover) ease,
                color var(--a-hover) ease;
}

.app :is(button, a.btn, .btn, .icon-btn, [role="button"]):not(:disabled):active {
    transform: scale(0.97);
}

/* ---- 2) Açılır bölümler (<details>) ------------------------------------
   Menü grupları ve filtre panelleri. Ara sıra açılır → standart giriş.
   `@starting-style` ile: JS yok, sınıf yok, `useEffect` yok. */
.app details > *:not(summary) {
    opacity: 1;
    transition: opacity var(--a-enter) var(--a-ease-out);

    @starting-style {
        opacity: 0;
    }
}

/* Özet satırı bir düğmedir: imleç ve basınç geri bildirimi alır. */
.app details > summary {
    cursor: pointer;
}

/* ---- 3) Tablo satırı: animasyon YOK ------------------------------------
   Liste sayfasında göz günde yüzlerce satırın üstünden geçiyor. 120 ms'lik
   bir geçiş bile, hızlı tarama sırasında ekranı "yağlı" gösterir. Renk
   ANINDA değişir. */
.app tbody tr {
    transition: none;
}

/* ---- 4) Bildirim şeridi: girişi görünür olmalı -------------------------
   Nadir görülür ve bir ŞEYİN OLDUĞUNU söyler; sessizce belirmesi, olayın
   kaçırılması demektir. Yukarıdan kayma DEĞİL, yalnız solma + hafif ölçek:
   şerit sayfanın üstünde duruyor, kaydırırsa içeriği iter. */
.app .flash,
.app .alert,
.app .notice {
    animation: adminNoticeIn var(--a-enter) var(--a-ease-out) both;
}

@keyframes adminNoticeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- 5) Hareket tercihi ------------------------------------------------
   Sistem "hareketi azalt" diyorsa hareket kalkar ama RENK VE SOLMA KALIR.
   "Azaltılmış hareket" = hiç animasyon değil; eski kural (`* {
   transition-duration: .01ms }`) renk geçişlerini de öldürüyordu ve panel
   ölü hissettiriyordu — işletme panelinde aynı hata düzeltilmişti.

   `data-motion="full"`: kullanıcı sistem tercihini panelde BİLEREK ezer.
   Windows'ta bu anahtar çoğu kullanıcıda açık geliyor ve kimse açtığını
   hatırlamıyor; ürünün sunduğu çıkış yolu budur. */
@media (prefers-reduced-motion: reduce) {
    html:not([data-motion="full"]) .app :is(button, a.btn, .btn, .icon-btn, [role="button"]):active {
        transform: none;
    }

    html:not([data-motion="full"]) .app .bar-row .bar-fill {
        animation: none;
    }

    html:not([data-motion="full"]) .app .flash,
    html:not([data-motion="full"]) .app .alert,
    html:not([data-motion="full"]) .app .notice {
        animation-name: adminNoticeFade;
    }

    html:not([data-motion="full"]) .app details > *:not(summary) {
        transition-property: opacity;
        transition-duration: 120ms;
    }

    html:not([data-motion="full"]) .login-card .error {
        animation: none;
    }
}

@keyframes adminNoticeFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   TABLO VE PANO CİLASI (FAZ 5, Dilim 5.3 · 2026-09-22)
   ============================================================ */

/* ---- Sayı kartının eğrisi ---------------------------------------------
   Kartın altına yaslanır; kart yüksekliğini değiştirmez (eğrisi olmayan ve
   olan kartlar aynı ızgarada yan yana durur). */
.metric-spark {
    margin-top: 10px;
    line-height: 0;
}

/* ---- Yapışkan ilk sütun ------------------------------------------------
   Geniş tablolarda yatay kaydırırken satırın KİMLİĞİ kaybolur: kullanıcı
   hangi işletmenin satırına baktığını bilemez. İlk sütun sabit kalır.

   `z-index` sırası: başlık (3) > ilk sütun (2) > gövde (1). Başlık ile ilk
   sütunun kesiştiği hücre ikisinin de üstünde olmalı, yoksa kaydırırken
   başlığın altından geçer. */
table.data.sticky-first th:first-child,
table.data.sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
}

table.data.sticky-first th:first-child {
    z-index: 3;
    background: var(--table-head-bg);
}

/* ---- Satır yoğunluğu ---------------------------------------------------
   "Sıkı" modda bir ekrana ~%40 daha fazla satır girer. Uzun listelerde
   çalışan biri için bu, sayfa başına bir kaydırma daha az demek.
   Yalnız DOLGU değişir; yazı boyutu sabit kalır — küçülen yazı, yoğunluk
   değil okunaksızlık üretir. */
html[data-density="dense"] table.data th { padding-top: 7px; padding-bottom: 7px; }
html[data-density="dense"] table.data td { padding-top: 7px; padding-bottom: 7px; }
html[data-density="dense"] .card { padding: 14px 16px; }
html[data-density="dense"] .metric { padding: 14px 16px; }