/* =========================================================================
   Defans Admin — Modern Design System
   Hafif, bağımlılıksız, açık/koyu temalı, responsive.
   Tema CSS custom property'leri ile yönetilir (html.dark).
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    color-scheme: light;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Nötr yüzeyler (light) */
    --bg:            #f4f6fb;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #eef2f7;
    --border:        #e3e8ef;
    --border-strong: #cbd5e1;

    /* Metin */
    --text:      #0f172a;
    --text-soft: #475569;
    --text-mute: #94a3b8;

    /* Marka / vurgu */
    --primary:      #6366f1;
    --primary-600:  #5457e5;
    --primary-700:  #4548c9;
    --primary-soft: #eef0ff;
    --on-primary:   #ffffff;

    /* Durum renkleri */
    --green: #16a34a;  --green-soft: #dcfce7;
    --amber: #d97706;  --amber-soft: #fef3c7;
    --red:   #dc2626;  --red-soft:   #fee2e2;
    --sky:   #0284c7;  --sky-soft:   #e0f2fe;

    --sidebar-w: 260px;
    --topbar-h: 64px;
    --radius:   14px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,.08);
    --shadow-lg: 0 12px 32px rgba(15,23,42,.14);
}

html.dark, .thm-prev.dark {
    color-scheme: dark;

    --bg:            #0b1120;
    --surface:       #131a2b;
    --surface-2:     #172033;
    --surface-3:     #1f2a41;
    --border:        #263349;
    --border-strong: #33425e;

    --text:      #e8edf5;
    --text-soft: #9fb0c9;
    --text-mute: #64748b;

    --primary:      #7c83ff;
    --primary-600:  #6b73ff;
    --primary-700:  #5a63f0;
    --primary-soft: #1e2547;
    --on-primary:   #ffffff;

    --green: #34d399;  --green-soft: #0c2a22;
    --amber: #fbbf24;  --amber-soft: #2a2110;
    --red:   #f87171;  --red-soft:   #2c1616;
    --sky:   #38bdf8;  --sky-soft:   #0c2438;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}

/* ---------- Windows 11 temalari ----------
   Light/Dark taban temalarin yanina, Windows 11'in hazir temalarindan turetilen
   yedi palet. Her temada YALNIZ vurgu degil, ZEMIN ve DURUM RENKLERI de birlikte
   ayarlanir: bolum basliklari, rozetler ve uyarilar o temanin zeminiyle uyumlu
   kalsin diye (`--green/--amber/--red/--sky` ve `-soft` esleri).

   Kullanicinin Profile > Colors'tan sectigi renkler bunlarin UZERINE biner;
   yumusak tonlari `color-mix(..., var(--surface))` ile turetildigi icin secilen
   renk hangi temada olursa olsun o temanin yuzeyine karisir (bkz. ThemePrefs::css).

   Olcu/tipografi token'lari (--font-sans, --radius, --sidebar-w, --topbar-h)
   tema-notrdur, hicbir temada ezilmez. */

/* --- Windows (acik): ilik notr yuzeyler, Windows mavisi --- */
html.win, .thm-prev.win {
    color-scheme: light;
    --bg: #f3f3f3;  --surface: #ffffff;  --surface-2: #fafafa;  --surface-3: #f0f0f0;
    --border: #e5e5e5;  --border-strong: #d1d1d1;
    --text: #1b1b1b;  --text-soft: #4a4a4a;  --text-mute: #767676;
    --primary: #0078d4;  --primary-600: #006cbe;  --primary-700: #005a9e;
    --primary-soft: #eaf4fc;  --on-primary: #ffffff;
    --green: #0f7b0f;  --green-soft: #dff6dd;
    --amber: #9d5d00;  --amber-soft: #fff4ce;
    --red:   #c42b1c;  --red-soft:   #fde7e9;
    --sky:   #0099bc;  --sky-soft:   #e6f7fb;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.16);
}

/* --- Windows Dark: grafit yuzeyler, parlak mavi --- */
html.windark, .thm-prev.windark {
    color-scheme: dark;
    --bg: #202020;  --surface: #2b2b2b;  --surface-2: #323232;  --surface-3: #3b3b3b;
    --border: #3d3d3d;  --border-strong: #4d4d4d;
    --text: #ffffff;  --text-soft: #c8c8c8;  --text-mute: #9a9a9a;
    --primary: #4cc2ff;  --primary-600: #2fb3f5;  --primary-700: #1a9fe0;
    --primary-soft: #17303c;  --on-primary: #00223a;
    --green: #6ccb5f;  --green-soft: #17331a;
    --amber: #fce100;  --amber-soft: #3a3305;
    --red:   #ff99a4;  --red-soft:   #442726;
    --sky:   #60cdff;  --sky-soft:   #123244;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 6px 20px rgba(0,0,0,.50);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.60);
}

/* --- Glow: derin turkuaz gece, su yesili parilti --- */
html.glow, .thm-prev.glow {
    color-scheme: dark;
    --bg: #08141a;  --surface: #0f2028;  --surface-2: #142832;  --surface-3: #1b3640;
    --border: #1e3d48;  --border-strong: #2b5460;
    --text: #e6f6f8;  --text-soft: #a5c9d1;  --text-mute: #6f9aa4;
    --primary: #2ee6d6;  --primary-600: #1ed0c0;  --primary-700: #16b0a3;
    --primary-soft: #0d3b3a;  --on-primary: #04211f;
    --green: #4ade80;  --green-soft: #0e3324;
    --amber: #fbbf24;  --amber-soft: #3a2d10;
    --red:   #fb7185;  --red-soft:   #3c1a22;
    --sky:   #38bdf8;  --sky-soft:   #0c2c40;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 6px 20px rgba(0,0,0,.55);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.65);
}

/* --- Captured Motion: koyu indigo, menekse-mavi vurgu --- */
html.motion, .thm-prev.motion {
    color-scheme: dark;
    --bg: #0e0f1c;  --surface: #171a2e;  --surface-2: #1d2038;  --surface-3: #262a47;
    --border: #2c3154;  --border-strong: #3c4370;
    --text: #e9eaf7;  --text-soft: #aeb2d8;  --text-mute: #7b80ab;
    --primary: #8b8cf0;  --primary-600: #7a7bea;  --primary-700: #6667d8;
    --primary-soft: #232558;  --on-primary: #ffffff;
    --green: #4fd1a5;  --green-soft: #10352c;
    --amber: #f6c453;  --amber-soft: #382d12;
    --red:   #f98aa0;  --red-soft:   #3a1c28;
    --sky:   #62b6ff;  --sky-soft:   #12294a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 6px 20px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}

/* --- Sunrise: ilik acik tema, yanik turuncu --- */
html.sunrise, .thm-prev.sunrise {
    color-scheme: light;
    --bg: #fdf6f1;  --surface: #ffffff;  --surface-2: #fdf1ea;  --surface-3: #f9e6da;
    --border: #f2dccd;  --border-strong: #e2bfa8;
    --text: #2b1a12;  --text-soft: #6b4a38;  --text-mute: #9c7a66;
    --primary: #ca5010;  --primary-600: #b4470e;  --primary-700: #963b0c;
    --primary-soft: #fde9dc;  --on-primary: #ffffff;
    --green: #2f7d32;  --green-soft: #e2f1e2;
    --amber: #a35a00;  --amber-soft: #fdecd0;
    --red:   #c0392b;  --red-soft:   #fbe3e0;
    --sky:   #0b7285;  --sky-soft:   #ddf0f4;
    --shadow-sm: 0 1px 2px rgba(80,40,20,.08);
    --shadow-md: 0 4px 16px rgba(80,40,20,.10);
    --shadow-lg: 0 12px 32px rgba(80,40,20,.16);
}

/* --- Flow: serin acik tema, turkuaz vurgu --- */
html.flow, .thm-prev.flow {
    color-scheme: light;
    --bg: #f0f7f8;  --surface: #ffffff;  --surface-2: #f4fafb;  --surface-3: #e7f2f4;
    --border: #d8e9ec;  --border-strong: #b6d4d9;
    --text: #10262b;  --text-soft: #3d5a60;  --text-mute: #6f8c92;
    --primary: #038387;  --primary-600: #027174;  --primary-700: #015c5e;
    --primary-soft: #def2f3;  --on-primary: #ffffff;
    --green: #157a4a;  --green-soft: #dcf2e7;
    --amber: #96601a;  --amber-soft: #fbeed6;
    --red:   #b3322a;  --red-soft:   #fae1df;
    --sky:   #0369a1;  --sky-soft:   #dcedf9;
    --shadow-sm: 0 1px 2px rgba(10,50,55,.08);
    --shadow-md: 0 4px 16px rgba(10,50,55,.10);
    --shadow-lg: 0 12px 32px rgba(10,50,55,.16);
}

/* --- Spotlight: gece mavisi, yumusak indigo --- */
html.spotlight, .thm-prev.spotlight {
    color-scheme: dark;
    --bg: #0d1225;  --surface: #151c38;  --surface-2: #1b2344;  --surface-3: #242e56;
    --border: #2a3563;  --border-strong: #3a4880;
    --text: #e8ebfa;  --text-soft: #a9b2dc;  --text-mute: #7480ae;
    --primary: #7c8cff;  --primary-600: #6b7cf7;  --primary-700: #5968e6;
    --primary-soft: #21295e;  --on-primary: #ffffff;
    --green: #4ad6a0;  --green-soft: #0f3730;
    --amber: #f4c95a;  --amber-soft: #372e14;
    --red:   #fb8da5;  --red-soft:   #3a1d2c;
    --sky:   #5ab6ff;  --sky-soft:   #102a4c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 6px 20px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background .2s ease, color .2s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
svg { width: 20px; height: 20px; }

/* =========================================================================
   Uygulama iskeleti
   ========================================================================= */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform .25s ease, width .2s ease;
}
.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .2s ease;
}

/* ---------- Sidebar ---------- */
.sidebar-brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}
.brand-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 800;
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
    box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 700; font-size: 15px; }

.sidebar-nav { padding: 16px 12px; overflow-y: auto; flex: 1; }
.nav-section {
    margin: 18px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.nav-section:first-child { margin-top: 4px; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-weight: 550;
    margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}
.nav-link.is-disabled { opacity: .55; cursor: default; }
.nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
.nav-soon {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-mute);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 20px;
}

/* Collapsible menü grupları */
.nav-group { margin-bottom: 2px; }
.nav-group-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--text-soft);
    font: inherit;
    font-weight: 550;
}
.nav-caret { width: 15px; height: 15px; margin-left: auto; color: var(--text-mute); transition: transform .18s ease; flex-shrink: 0; }
.nav-group.is-open > .nav-group-toggle { color: var(--text); }
.nav-group.is-open > .nav-group-toggle .nav-caret { transform: rotate(90deg); }

.nav-sub { list-style: none; margin: 2px 0 6px; padding: 0; display: none; }
.nav-group.is-open .nav-sub { display: block; }
/* Alt menü içi ayraç (ör. VOD → Mass Edit araçları) */
.nav-sep {
    height: 0;
    margin: 6px 12px 6px 46px;
    border-top: 1px solid var(--border);
    list-style: none;
}
.nav-sublink {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 46px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    position: relative;
}
.nav-sublink::before {
    content: "";
    position: absolute;
    left: 24px; top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border-strong);
    transform: translateY(-50%);
}
.nav-sublink:hover { background: var(--surface-3); color: var(--text); }
.nav-sublink.is-active { background: var(--primary-soft); color: var(--primary); }
.nav-sublink.is-active::before { background: var(--primary); }
.nav-sublink.is-disabled { opacity: .6; cursor: default; }
.nav-sublink.is-disabled:hover { background: transparent; color: var(--text-soft); }

/* ---------- Mini (daraltılmış) sidebar — yalnız masaüstü ----------
   html.sidebar-mini (localStorage'da kalıcı) sidebar'ı ikon rayına indirir.
   Etiketler/alt menüler gizlenir; grup ikonuna gelince alt menü sağa flyout açılır. */
@media (min-width: 1025px) {
    html.sidebar-mini { --sidebar-w: 76px; }
    html.sidebar-mini .brand-name,
    html.sidebar-mini .nav-link > span,
    html.sidebar-mini .nav-caret { display: none; }
    html.sidebar-mini .sidebar-brand { justify-content: center; padding: 0; gap: 0; }
    html.sidebar-mini .sidebar-nav { padding: 16px 10px; }
    html.sidebar-mini .nav-link { justify-content: center; gap: 0; padding: 11px 0; }

    /* alt menü satır-içi gizli; hover'da sağa flyout (specificity > .nav-group.is-open .nav-sub) */
    html.sidebar-mini .nav-group .nav-sub { display: none; }
    html.sidebar-mini .nav-group { position: relative; }
    html.sidebar-mini .nav-group:hover > .nav-sub {
        display: block; position: absolute; left: calc(var(--sidebar-w) - 6px); top: 0;
        min-width: 214px; margin: 0; padding: 8px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60;
    }
    html.sidebar-mini .nav-group:hover > .nav-sub::before {
        content: attr(data-label); display: block;
        font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--text-mute); padding: 4px 10px 8px;
    }
    html.sidebar-mini .nav-sub .nav-sublink { padding-left: 12px; }
    html.sidebar-mini .nav-sub .nav-sublink::before { display: none; }

    /* tek başına link (Dashboard) — ikon üzerine gelince etiket balonu */
    html.sidebar-mini .sidebar-nav > .nav-link { position: relative; }
    html.sidebar-mini .sidebar-nav > .nav-link:hover::after {
        content: attr(data-label); position: absolute; left: calc(100% - 6px); top: 50%;
        transform: translateY(-50%); white-space: nowrap; z-index: 60;
        background: var(--text); color: var(--surface);
        font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
        box-shadow: var(--shadow-lg);
    }
}

/* ---------- Topbar ---------- */
.app-topbar {
    height: var(--topbar-h);
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.page-title { font-size: 17px; font-weight: 650; }

.sidebar-toggle { display: inline-grid; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-soft);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm svg { width: 17px; height: 17px; }
.icon-btn.is-danger:hover { background: var(--red-soft); color: var(--red); }

/* Tema toggle: aktif temaya göre ikon göster */
.theme-toggle .icon-moon { display: none; }
/* Dugme gunduz/gece anlaminda: ikon TEMANIN koyu olup olmamasina bakar.
   Dokuz temanin besi koyu zeminli. */
html.dark .theme-toggle .icon-sun,
html.windark .theme-toggle .icon-sun,
html.glow .theme-toggle .icon-sun,
html.motion .theme-toggle .icon-sun,
html.spotlight .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon,
html.windark .theme-toggle .icon-moon,
html.glow .theme-toggle .icon-moon,
html.motion .theme-toggle .icon-moon,
html.spotlight .theme-toggle .icon-moon { display: block; }

/* ---------- User menu ---------- */
.user-menu { position: relative; }
.user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
}
.user-trigger:hover { background: var(--surface-3); }
.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-name { font-weight: 600; font-size: 13.5px; }
.user-role { font-size: 11.5px; color: var(--text-mute); }
.chevron { width: 16px; height: 16px; color: var(--text-mute); }

.dropdown-menu {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 60;
}
.dropdown-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.dropdown-header small { color: var(--text-mute); }
/* Baslik artik profil sayfasina giden bir <a>; baglanti gorunumunu degil
   menu ogesi gorunumunu tasimali. */
.dropdown-header-link { color: inherit; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.dropdown-header-link:hover { background: var(--surface-3); }
.dropdown-header-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dropdown-form { margin: 0; }
.dropdown-item {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: transparent; border: 0;
    color: var(--text); font-weight: 550; font-size: 13.5px;
}
.dropdown-item:hover { background: var(--surface-3); }
.dropdown-item.is-danger { color: var(--red); }
.dropdown-item.is-danger:hover { background: var(--red-soft); }
.dropdown-item svg { width: 17px; height: 17px; }

/* ---------- Content ---------- */
.app-content { padding: 26px 28px 40px; flex: 1; max-width: none; width: 100%; min-width: 0; }
.app-backdrop {
    position: fixed; inset: 0;
    background: rgba(2,6,23,.5);
    z-index: 45;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.app-footer {
    display: flex; justify-content: space-between;
    padding: 16px 26px;
    color: var(--text-mute);
    font-size: 12.5px;
    border-top: 1px solid var(--border);
}

/* ---------- Page head ---------- */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-heading { font-size: 22px; }
.page-sub { margin: 4px 0 0; color: var(--text-mute); font-size: 13.5px; }

/* =========================================================================
   Bileşenler
   ========================================================================= */

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 600; font-size: 13.5px;
    transition: all .15s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn svg { width: 17px; height: 17px; }
.btn-primary {
    background: var(--primary); border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-600); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: var(--red, #b32c23); border-color: var(--red, #b32c23); color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: color-mix(in srgb, var(--red, #b32c23) 85%, #000); }
.btn-danger[disabled] { opacity: .5; cursor: not-allowed; }
/* Kilitli düğme her varyantta aynı okunsun (ör. şifreyle açılan test araçları). */
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; justify-content: center; padding: 11px; }

/* Stream Tools — kart ızgarası (2 sütun, dar ekranda tek) */
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 860px) { .tools-grid { grid-template-columns: 1fr; } }

.btn-sm { padding: 5px 12px; font-size: 12.5px; }

/* Fingerprint Stream — dikey yerleşim + seçili satır + boşta parametre paneli */
.fp-layout { display: grid; gap: 16px; }
.table tbody tr.is-selected { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.fp-params.is-idle { opacity: .55; }
.fp-params.is-idle .form-grid,
.fp-params.is-idle .form-actions { pointer-events: none; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
    overflow: hidden;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 15px; }
.link { color: var(--primary); font-weight: 600; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* ---------- Stat cards ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.stat-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--tone-soft, var(--primary-soft));
    color: var(--tone, var(--primary));
}
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-value { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.stat-label { font-size: 12.5px; color: var(--text-mute); }

.tone-indigo { --tone: #6366f1; --tone-soft: color-mix(in srgb, #6366f1 14%, transparent); }
.tone-green  { --tone: #16a34a; --tone-soft: color-mix(in srgb, #16a34a 14%, transparent); }
.tone-amber  { --tone: #d97706; --tone-soft: color-mix(in srgb, #d97706 16%, transparent); }
.tone-sky    { --tone: #0284c7; --tone-soft: color-mix(in srgb, #0284c7 14%, transparent); }
.tone-violet { --tone: #7c3aed; --tone-soft: color-mix(in srgb, #7c3aed 14%, transparent); }
.tone-rose   { --tone: #e11d48; --tone-soft: color-mix(in srgb, #e11d48 14%, transparent); }
.tone-slate  { --tone: #475569; --tone-soft: color-mix(in srgb, #475569 16%, transparent); }
.tone-teal   { --tone: #0d9488; --tone-soft: color-mix(in srgb, #0d9488 14%, transparent); }
html.dark .stat-icon { background: color-mix(in srgb, var(--tone) 22%, transparent); }

/* ---------- Tables ---------- */
/* Yatay kaydirma: mobilde parmakla HER YERDEN (bos alanlar dahil) kaydirilir —
   overflow-x:auto native dokunmatik kaydirmayi verir. overscroll-behavior-x:contain
   yatay swipe'in sayfa geri-navigasyonunu tetiklemesini onler; iOS momentum icin
   -webkit-overflow-scrolling. Masaustu fare icin bos alani tutup surukleme app.js'te
   (.table-wrap [data-grab-scroll]) — dokunmatik native kalir. */
.table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.table-wrap.is-grabbable { cursor: grab; }
.table-wrap.is-grabbing { cursor: grabbing; user-select: none; }
/* "Stream" (son baglanti) hucresi (2026-09-20, kullanici karari): uzun yayin adi
   tek satirda tabloyu genisletmesin — hucre SARAR, metin en fazla IKI satir olur,
   fazlasi "…" ile kesilir ve tamami `title`da kalir. Kirpma `-webkit-box` ister;
   o yuzden metin ayri bir <span> icinde (td'nin `display`ine dokunmak hucreyi
   tablo duzeninden cikarirdi). */
.table td.rt-stream { white-space: normal; max-width: 240px; }
.rt-stream-txt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3;
}
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 13px 16px; text-align: left; white-space: nowrap; }
.table thead th {
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s ease; }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .muted { color: var(--text-mute); }
.table-empty { text-align: center; color: var(--text-mute); padding: 34px 16px; }
.text-right { text-align: right; }

.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.row-actions form { margin: 0; display: inline; }

/* ---------- Badges & pills ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px; font-weight: 600;
    color: var(--badge, #64748b);
    background: color-mix(in srgb, var(--badge, #64748b) 14%, transparent);
}
.pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}
.pill-green { color: var(--green); background: var(--green-soft); }
.pill-slate { color: var(--text-soft); background: var(--surface-3); }
.pill-red   { color: var(--red); background: var(--red-soft); }
.pill-sky   { color: var(--sky); background: var(--sky-soft); }
.pill-rose  { color: var(--red); background: var(--red-soft); }
.pill-amber { color: #b45309; background: #fef3c7; }
@media (prefers-color-scheme: dark) { .pill-amber { color: #f5c65a; background: #3a2d10; } }
:root[data-theme="dark"] .pill-amber, :root[data-theme="windark"] .pill-amber, :root[data-theme="glow"] .pill-amber, :root[data-theme="motion"] .pill-amber, :root[data-theme="spotlight"] .pill-amber { color: #f5c65a; background: #3a2d10; }
:root[data-theme="light"] .pill-amber { color: #b45309; background: #fef3c7; }

/* Provider Checker — link hücresi (uzun linkler tek satır, taşarsa …) + hafif tehlike butonu */
.pc-url { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-soft); }
/* Manage Registered Users - Reseller DNS sutunu: uzun alan adi satiri
   dikeyde buyutmesin, tablo saga kaysin (tam deger title'da). */
.ru-dns { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.btn-danger-ghost { color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-soft); }

/* ---------- Forms ---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 22px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.field-hint { font-size: 12px; color: var(--text-mute); }
.field-error { font-size: 12.5px; color: var(--red); font-weight: 550; }
.input {
    width: 100%;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--text-mute); }
.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    background: var(--surface);
}
.input.has-error { border-color: var(--red); }
select.input { appearance: none; 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='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }

.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { flex: 1; }
.input-addon {
    display: grid; place-items: center;
    position: absolute; right: 4px; top: 4px; bottom: 4px;
    width: 38px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--text-mute);
}
.input-addon:hover { color: var(--text); background: var(--surface-3); }
.input-addon-left { left: 4px; right: auto; }
.input-group:has(.input-addon-left) .input { padding-left: 44px; }
.input-addon svg { width: 17px; height: 17px; }

.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 4px; }

/* Çoklu seçim (bouquet/checkbox ızgarası) */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.check-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 13.5px; font-weight: 550;
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.check-item:hover { border-color: var(--primary); }
.check-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.check-item input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.check-grid-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Sıralanabilir liste (paket buket sırası: sürükle-bırak + ↑/↓) */
.sort-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Tablo satırı sürükleme tutamağı (ör. Categories → Order) */
.drag-grip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    color: var(--text-mute); cursor: grab; touch-action: none;
    transition: background .15s ease, color .15s ease;
}
.drag-grip:hover { background: var(--surface-3, var(--border)); color: var(--text); }
.drag-grip:active { cursor: grabbing; }
.drag-grip svg { width: 16px; height: 16px; }
tr.is-dragging { opacity: .45; background: var(--primary-soft); }

.sort-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 13.5px; font-weight: 550;
    transition: border-color .15s ease, background .15s ease;
}
.sort-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.sort-item.is-dragging { opacity: .45; }
.sort-handle { cursor: grab; color: var(--text-soft); font-size: 15px; line-height: 1; user-select: none; }
.sort-check { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.sort-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-check input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.sort-meta {
    display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
    text-align: right; font-size: 11px; font-weight: 600; line-height: 1.35;
    color: var(--text-soft); min-width: 82px;
}
.sort-meta b { font-weight: 700; color: var(--text); }
.sort-item:has(input:checked) .sort-meta { color: var(--primary); }
.sort-item:has(input:checked) .sort-meta b { color: var(--primary); }
.sort-move { display: flex; gap: 4px; flex-shrink: 0; }
.sort-btn {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: var(--surface-3); color: var(--text-soft);
    cursor: pointer; font-size: 12px; line-height: 1;
    transition: border-color .15s ease, color .15s ease;
}
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Form içi bölüm başlığı (paket formu vb. gruplandırma) */
.form-section-head {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 22px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-mute);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* Switch */
/* Genislik icerige sabitlenir (adminui ile ayni duzeltme): `.field` kolon yonlu
   bir flex kutusu oldugu icin etiket sutunun tamamina yayiliyor ve anahtarin
   SAGINDAKI BOS ALAN da anahtari ceviriyordu. */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content; max-width: 100%; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    width: 44px; height: 25px;
    border-radius: 20px;
    background: var(--border-strong);
    position: relative; transition: background .2s ease;
}
.switch-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(19px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.switch-text { font-size: 13.5px; font-weight: 550; }

/* ---------- Search / pagination ---------- */
.search-form { display: flex; gap: 10px; width: 100%; max-width: 560px; flex-wrap: wrap; }
.search-form .input-group { flex: 1; min-width: 200px; }
.pagination {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 16px; border-top: 1px solid var(--border);
}
.page-btn {
    padding: 7px 14px; border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface); font-weight: 600; font-size: 13px;
}
.page-btn:hover { background: var(--surface-3); }
.page-btn.is-disabled, .page-btn:disabled { opacity: .45; pointer-events: none; }
button.page-btn { cursor: pointer; }
.page-info { font-size: 13px; color: var(--text-mute); }

/* ---------- Alerts / flash ---------- */
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.alert {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 550; font-size: 13.5px;
}
.alert-success { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.alert-error   { background: var(--red-soft);   color: var(--red);   border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.alert-info    { background: var(--sky-soft);   color: var(--sky);   border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
/* Uyarı (deneme hattı uzatılırsa resmi olur; hatta silinmiş buket var) — aynı
   iskelet, amber jetonları (her iki temada tanımlı). */
.alert-warning { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.alert-close { background: transparent; border: 0; font-size: 20px; line-height: 1; color: inherit; opacity: .7; }
.alert-close:hover { opacity: 1; }

/* ---------- Auth ---------- */
.auth-body {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 24px;
    background:
        radial-gradient(1000px 500px at 15% -10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent),
        radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, #7c3aed 18%, transparent), transparent),
        var(--bg);
}
.auth-wrap { width: 100%; max-width: 410px; }
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 30px 28px;
}
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.auth-brand h1 { font-size: 19px; }
.auth-brand p { margin: 2px 0 0; color: var(--text-mute); font-size: 13px; }
.auth-brand .brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-foot { text-align: center; margin: 20px 0 0; color: var(--text-mute); font-size: 12px; }

/* ---------- Error pages ---------- */
.error-page { text-align: center; padding: 70px 20px; }
.error-code {
    font-size: 72px; font-weight: 800; letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page h2 { margin: 8px 0; font-size: 22px; }
.error-page p { color: var(--text-mute); margin-bottom: 22px; }

/* =========================================================================
   Dashboard — realtime metrikler + server kartları
   ========================================================================= */
.live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); margin: 0 2px; vertical-align: middle;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
    animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.metric-tile {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* köşede tone renkli yumuşak parıltı */
.metric-tile::after {
    content: "";
    position: absolute; top: -30px; right: -30px;
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--tone, var(--primary));
    opacity: .10;
    transition: transform .35s ease;
}
.metric-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tone, var(--primary)) 35%, var(--border)); }
.metric-tile:hover::after { transform: scale(1.4); }
.metric-icon {
    position: relative; z-index: 1;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--tone-soft, var(--primary-soft));
    color: var(--tone, var(--primary));
}
.metric-icon svg { width: 21px; height: 21px; }
.metric-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; min-width: 0; }
.metric-value { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.02; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metric-label { position: relative; z-index: 1; font-size: 11px; font-weight: 650; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Server cards ---- */
.srv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
    gap: 18px;
}
.srv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.srv-head {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 12px 120px 12px 18px;
    background: var(--srv, var(--primary));
    color: #fff;
    min-height: 80px;
}
.srv-head.is-down { background: linear-gradient(180deg, #232c3a 0%, #191f29 100%); }
.srv-title { font-size: 15.5px; font-weight: 680; color: #fff; letter-spacing: -.01em; line-height: 1.3; }
/* Subline satiri her zaman rezerve edilir; sunucu up olsa da (down bilgisi yokken)
   kart header'i down'daki ile ayni 2-satirli tasarimi korur. */
.srv-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; min-height: 19px; }
.srv-ip { font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.srv-down-tag {
    background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px;
    letter-spacing: .06em;
}
.srv-downtime {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.72);
    font-variant-numeric: tabular-nums;
}
.srv-actions { position: absolute; top: 13px; right: 14px; display: flex; align-items: center; gap: 4px; }
.srv-actions a {
    display: inline-grid; place-items: center;
    width: 29px; height: 29px; border-radius: 8px;
    color: #fff; opacity: .85; transition: background .15s ease, opacity .15s ease;
}
.srv-actions a:hover { background: rgba(255,255,255,.22); opacity: 1; }
.srv-actions a svg { width: 15px; height: 15px; }
/* Actions'in tam altinda, sag kenara dayali; dikeyde srv-subline satiriyla hizali. */
.srv-uptime {
    position: absolute; top: 42px; right: 14px;
    font-size: 11.5px; font-weight: 650;
    background: rgba(255,255,255,.18); padding: 5px 9px; border-radius: 8px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.srv-uptime:empty { display: none; }

.srv-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--border);
    border-bottom: 1px solid var(--border);
}
.srv-stat {
    background: var(--surface);
    padding: 10px 6px; text-align: center;
    display: flex; flex-direction: column; gap: 2px;
}
.srv-k { font-size: 10.5px; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.srv-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.srv-v small { font-size: 10px; color: var(--text-mute); font-weight: 600; }

/* Input / Output tek satır band (dikeyde yer kazandırır) */
.srv-band {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 18px; border-bottom: 1px solid var(--border);
}
.srv-band-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; }
.srv-arrow { color: var(--text-mute); font-size: 12px; }
.srv-band-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.srv-band-v small { font-size: 10px; color: var(--text-mute); font-weight: 600; margin-left: 2px; }

/* Yatay kullanım çubukları (CPU / Mem) */
.srv-usages { display: flex; flex-direction: column; gap: 15px; padding: 17px 18px 19px; }
.usage { display: flex; flex-direction: column; gap: 8px; }
.usage-top { display: flex; align-items: baseline; justify-content: space-between; }
.usage-label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.usage-pct { font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.usage-track {
    height: 9px; border-radius: 20px;
    background: color-mix(in srgb, var(--srv, var(--primary)) 12%, var(--surface-3));
    overflow: hidden;
}
.usage-bar {
    height: 100%; border-radius: 20px; min-width: 9px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--srv, var(--primary)) 55%, #fff), var(--srv, var(--primary)));
    box-shadow: 0 0 8px color-mix(in srgb, var(--srv, var(--primary)) 45%, transparent);
    transition: width .6s cubic-bezier(.34, 1.1, .4, 1);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    .app-main { margin-left: 0; }
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-shell.sidebar-open .app-backdrop { opacity: 1; pointer-events: auto; }
    .sidebar-toggle { display: inline-grid; }
}
@media (max-width: 640px) {
    .app-content { padding: 18px 15px 32px; }
    .page-heading { font-size: 19px; }
    .form-grid { grid-template-columns: 1fr; padding: 18px; }
    .user-meta { display: none; }
    .page-title { display: none; }
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .stat-value { font-size: 20px; }
}

/* --- Servers: Actions sütunu --- */
.srv-table td { vertical-align: middle; }
/* Aksiyon butonlari HER ZAMAN tek satirda kalir (mobilde dikeyde buyumez);
   dar ekranda .table-wrap overflow-x ile kullanici saga cekerek erisir
   (phpinceleme.md: "dikeyde genisleme olmadan ayni boyutta saga kaydirmaliyiz"). */
.srv-acts { display: inline-flex; flex-wrap: nowrap; gap: 5px; justify-content: flex-end; align-items: center; }
.srv-acts form { display: inline; margin: 0; }
.srv-acts-nowrap { flex-wrap: nowrap; }
/* Aksiyon hucresi butonlari sarmasin; satir genisler, tablo yatay kayar. */
.srv-table td:last-child { white-space: nowrap; }
.nowrap-cell { white-space: nowrap; }
/* Transcode options ozeti: tek satir, tasan kismi ... ile kirp (mobilde
   dikeyde buyumesin); tam metin title ile gorunur, tablo yatay kayar. */
.tp-opts {
    display: block; max-width: 460px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srv-act {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2, var(--surface)); color: var(--text);
    font-size: 14px; line-height: 1; cursor: pointer;
    text-decoration: none; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.srv-act:hover { background: var(--surface-3, var(--border)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.srv-act[disabled] { opacity: .4; cursor: not-allowed; }
/* Ülke kilidiyle kilitli düğme (plan §56): soluk ama TIKLANIR — tıklama sebebi söyler. */
.srv-act-locked { opacity: .4; cursor: not-allowed; }
.srv-act-warn:hover   { color: var(--amber, #b8860b); border-color: var(--amber, #b8860b); }
.srv-act-danger:hover { color: var(--red, #b32c23); border-color: var(--red, #b32c23); }
/* >>> DISABLE / ENABLE: RENK TASIMAZ (2026-09-16) <<<
   Simgeler adminui > Domain Manager'daki ikilinin AYNISI (power = kapat,
   check = ac) ve `currentColor` tasiyan SVG: emoji olsaydi renkli font ile
   cizilir ve bu kurallarin hicbirini dinlemezdi.
   Kabuk komsulariyla ayni (`.srv-act`). Ileride renk istenirse JS'e degil
   BURAYA eklenir, ornegin:
       .srv-act-toggle          { color: var(--amber, #b8860b); }
       .srv-act-toggle:hover    { border-color: var(--amber, #b8860b); } */
.srv-act-toggle { color: inherit; }
/* Genel `svg { width: 20px }` kurali 30px'lik dugmede taşiyor; satir
   eylemlerinde metin sembolleriyle ayni optik boyut 15px. */
.srv-act svg { width: 15px; height: 15px; }
.srv-act-play { color: var(--sky, #2f7bd6); border-color: color-mix(in srgb, var(--sky, #2f7bd6) 40%, var(--border)); }
.srv-act-play:hover { color: #fff; background: var(--sky, #2f7bd6); border-color: var(--sky, #2f7bd6); }

/* Manage Streams — aksiyon grubu (mobilde dikey büyümesin, yatay kaydır) */
.srv-act-group { display: inline-flex; flex-wrap: nowrap; gap: 4px; justify-content: center; align-items: center; }
.sm-rec { color: var(--red, #b32c23); font-size: 11px; }
.sm-badge { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 1.5; }
.sm-badge-ts { color: #fff; background: var(--red, #b32c23); }
.sm-badge-lb { color: #fff; background: var(--amber, #b8860b); }
.sm-info { margin: 0; font-size: 11px; border-collapse: collapse; white-space: nowrap; }
.sm-info td { padding: 1px 5px 1px 0; text-align: left; }
.sm-info-h { color: var(--green, #1f9d55); }
/* "Icon" sutunundaki kucuk gorsel — IKI FARKLI SEY.
     Manage Streams         : kanal LOGOSU, kare kutu 35x35.
     Movies/Episodes/Series : AFIS, dikey kutu 35x50.
   `object-fit: contain` kirpmaz, SIGDIRIR: orani ~2:3 olan bir afis kare
   kutuda 23x35'e duser ve taninmaz hale gelir. Dikey kutuda 33x50 olur —
   sutun genisligi ayni kalir (35 + 16+16 = 67 px), yalniz afis tablolarinda
   satir 55 -> 70 px'e cikar. `.table-wrap` yatayda kaydigi icin dar ekranda
   da tasma olmaz.
   Ayrim tablo KOKUNDEN yapiliyor, JS'e dokunmadan: `data-movie-table` hem
   Movies hem Episodes'a hizmet eder, `data-series-table` Series'e. Boylece
   olcu tek kaynakta (bu dosyada) kalir. */
.sm-icon { width: 35px; height: 35px; object-fit: contain; border-radius: 6px; vertical-align: middle; background: var(--surface-3, var(--border)); }
/* AFIS (2:3) — Movies + Series. Episodes bu kuraldan `:not()` ile disarida:
   Movies ile AYNI tablo kokunu paylasiyor, o yuzden ayirt edici nitelik
   gorunume elle eklendi. `:not()` kullanmak siraya guvenmekten iyi —
   iki kural esit ozgullukte olsaydi dosyada bir satir yer degistirince
   sessizce bozulurdu. */
[data-movie-table]:not([data-icon-wide]) .sm-icon,
[data-series-table] .sm-icon { height: 50px; }
/* YATAY (16:9) — Episodes. Kaynak gorseller TMDb "still": 780x439 gibi.
   62 = 35 x 16/9, yani kutu gorselin oraninda; `contain` ile bosluk
   kalmadan doluyor. Boyu uzatmak (35x50) bunu BUYUTMUYORDU: genislik
   bagliyici kenardi, gorsel yine 35x20 ciziliyordu. */
[data-icon-wide] .sm-icon { width: 62px; height: 35px; }

/* Manage Streams — Notes butonu hover balonu (field-tip balon stiliyle aynı) */
.sm-note { position: relative; cursor: help; }
.sm-note[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
    width: max-content; max-width: 320px; padding: 9px 11px;
    border-radius: 9px; background: #111827; color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 60;
}
.sm-note[data-tip]::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #111827;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 60;
}
.sm-note[data-tip]:hover::after, .sm-note[data-tip]:focus::after,
.sm-note[data-tip]:hover::before, .sm-note[data-tip]:focus::before { opacity: 1; visibility: visible; }
.srv-ipc { position: relative; display: inline-block; }
.srv-ipc > summary { list-style: none; }
.srv-ipc > summary::-webkit-details-marker { display: none; }
.srv-ipc[open] > summary { background: var(--surface-3, var(--border)); }
.srv-ipc-form {
    position: absolute; right: 0; z-index: 20; margin-top: 6px;
    display: flex; gap: 6px; align-items: center; width: 260px;
    padding: 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow-md);
}

/* --- Sekmeler (Settings) --- */
.tabbar {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 6px 10px 0; border-bottom: 1px solid var(--border);
}
.tabbtn {
    appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
    padding: 11px 16px; font-size: 13.5px; font-weight: 600;
    color: var(--text-mute); border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0; transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.icon-btn.is-disabled { opacity: .35; pointer-events: none; }
.tabbtn:hover { color: var(--text); background: var(--surface-2, var(--surface)); }
.tabbtn.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tabpane { display: none; }
.tabpane.is-active { display: block; }

/* Ayar alanı bilgi ikonu + görünür CSS tooltip balonu */
.card[data-tabs] { overflow: visible; }   /* balon kart sınırından taşabilsin */
.field-tip {
    position: relative;
    display: inline-grid; place-items: center;
    width: 16px; height: 16px; margin-left: 5px;
    border-radius: 50%; background: var(--surface-3, var(--border));
    color: var(--text-mute); font-size: 10px; font-weight: 800; font-style: normal;
    line-height: 1; cursor: help; vertical-align: middle; user-select: none;
    transition: background .14s ease, color .14s ease;
}
.field-tip:hover, .field-tip:focus { background: var(--primary); color: #fff; outline: none; }
.field-tip::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
    width: max-content; max-width: 270px; padding: 9px 11px;
    border-radius: 9px; background: #111827; color: #fff;
    font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.45;
    letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease; z-index: 200;
}
.field-tip::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #111827;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 200;
}
.field-tip:hover::after, .field-tip:focus::after,
.field-tip:hover::before, .field-tip:focus::before { opacity: 1; visibility: visible; }

/* --- Reco: CPU/RAM kademesine göre öneri tablosu (firewall alanları) --------
   field-tip ile aynı görsel dil; ama içeride HTML tablo taşıdığı için gerçek bir
   popover elemanı (::after değil). Konum JS ile ekran kenarına göre flip edilir
   ([data-reco] → .reco-x sağa, .reco-y yukarı). Tümü CSP-safe (inline handler yok). */
.reco { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.reco-trigger {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px 2px; border-radius: 999px;
    background: var(--surface-3, var(--border)); color: var(--text-mute);
    font-size: 10px; font-weight: 800; font-style: normal; line-height: 1.5;
    letter-spacing: .03em; text-transform: uppercase; cursor: help; user-select: none;
    transition: background .14s ease, color .14s ease;
}
.reco:hover .reco-trigger, .reco:focus-within .reco-trigger { background: var(--primary); color: #fff; }
.reco-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 210;
    width: 372px; max-width: min(372px, 80vw); padding: 12px 13px 11px;
    border-radius: 11px; background: #111827; color: #e7ecf4;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
    transition: opacity .13s ease, transform .13s ease; text-align: left;
}
.reco.reco-x .reco-pop { left: auto; right: 0; }
.reco.reco-y .reco-pop { top: auto; bottom: calc(100% + 8px); }
.reco:hover .reco-pop, .reco:focus-within .reco-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.reco-why { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; margin: 0 0 9px; color: #cdd6e4; }
.reco-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.reco-table th, .reco-table td { padding: 4px 7px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .09); white-space: nowrap; }
.reco-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #93a3bd; font-weight: 700; }
.reco-table td { font-weight: 600; color: #eef2f8; }
.reco-table td:first-child { color: #aeb9cd; font-weight: 500; }
.reco-table tr:last-child td { border-bottom: 0; }
.reco-note { display: block; margin-top: 9px; font-size: 11px; line-height: 1.5; color: #9fb4d8; }

/* Geniş varyant: balon içinde BİRDEN FAZLA tablo taşındığında (advprofiles
   "stats"). 372px'te dört sütunlu iki tablo sıkışıyor; sütunlar nowrap olduğu
   için taşma yerine genişletmek doğru çözüm. */
.reco.reco-wide .reco-pop { width: 520px; max-width: min(520px, 90vw); }
.reco-sub {
    display: block; margin: 11px 0 5px; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #93a3bd;
}
.reco-sub:first-of-type { margin-top: 2px; }
/* Ürünle GELEN satır: tabloda hangi ölçümün şablona dönüştüğü görünsün. */
.reco-pick td { color: #fff; background: rgba(99, 179, 237, .13); }
.reco-pick td:first-child { color: #cfe6ff; font-weight: 700; }
/* KULLANILAMAZ satır (kodlayıcısı olmayan kart). Ayrım yalnız renge
   bırakılmaz — satır ✗ ile de işaretlidir, renk körlüğünde de okunur. */
.reco-no td { color: #f3b6b6; background: rgba(248, 113, 113, .10); }
.reco-no td:first-child { color: #ffc9c9; font-weight: 700; }
/* Altı sütunlu tablo 520px'e sığmıyor (sütunlar nowrap). */
.reco.reco-xwide .reco-pop { width: 660px; max-width: min(660px, 92vw); }

/* Kart altı açıklama bloğu (GPU Matrix sayfası). Tablonun ALTINDA durur,
   `.card-head` ile aynı yatay hizada; tablo kenarlığıyla ayrılır. */
.card-foot {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border);
}
.card-foot .page-sub { margin: 0 0 8px; }
.card-foot .page-sub:last-child { margin-bottom: 0; }
.card-foot code, .page-sub code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}
/* GPU Matrix tabloları referans niteliğinde ve uzun → satırlar biraz daha sık. */
.card .table-wrap .table td { padding-top: 10px; padding-bottom: 10px; }

/* ---------------------------------------------------------------------------
   Movie Stream (/moviestream) — toplu kodlama ilerlemesi
   --------------------------------------------------------------------------- */

/* İlerleme çubuğu. Dolgu genişliği JS'ten yüzde olarak gelir; renk tek başına
   anlam taşımaz — yanında her zaman "x / y encoded" metni durur. */
.ms-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.ms-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--sky);
    transition: width .35s ease;
}

/* Başarısız iş sayısı sıfırdan büyükken dikkat çeker; sıfırken .muted kalır. */
.ms-bad { color: var(--red); font-weight: 600; }

/* Kapasite tablosundaki sunucu satırının donanım özeti (Device Driver'daki
   GPUS / LOAD kolonlarının karşılığı). Rozetler dar alana sığsın diye küçük. */
.ms-hw { margin-top: 2px; }
.ms-hw .pill { font-size: 11px; padding: 1px 7px; }

/* Kodlama kipi seçici (Local / Remote / No transcode) — kart biçimli radyo.
   Seçili olan kenarlıkla belli olur; renk tek başına anlam taşımaz, her
   seçeneğin altında ne yapacağı yazılıdır. */
.ms-modes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ms-mode {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2);
    transition: border-color .15s, background .15s;
}
.ms-mode:hover { border-color: var(--sky); }
.ms-mode:has(input:checked) { border-color: var(--sky); background: var(--sky-soft); }
.ms-mode input { margin-top: 3px; flex: none; }
.ms-mode-body { display: flex; flex-direction: column; gap: 3px; }
.ms-mode-body strong { font-size: 13.5px; }
.ms-mode-body .muted { font-size: 12px; line-height: 1.45; }
/* Henüz kurulmamış kip: tıklanamaz olduğu görünürlükten de anlaşılsın. */
.ms-mode.is-off { opacity: .55; cursor: not-allowed; }
.ms-mode.is-off:hover { border-color: var(--border); }

/* field-tip / reco balonları `.card { overflow:hidden }` ile kırpılmasın.
   Yalnız hover/focus anında o kartı overflow:visible yap — kırpma sadece
   balon görünürken kalkar, layout değişmez (z-index tek başına kırpmayı yenemez). */
.card:has(.field-tip:hover), .card:has(.field-tip:focus),
.card:has(.reco:hover), .card:has(.reco:focus-within) { overflow: visible; }

/* --- Firewall: rol-bazlı config alt-blokları (Main / Balancer ayrı) --- */
.role-block { border-top: 1px solid var(--border); }
.role-block:first-of-type { border-top: 0; }
.role-head { display: flex; align-items: center; gap: 10px; padding: 12px 22px 0; }
.role-tag {
    display: inline-flex; align-items: center; padding: 2px 10px;
    border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.role-tag-main { background: var(--primary-soft); color: var(--primary); }
.role-tag-balancer { background: var(--surface-3, var(--border)); color: var(--text-soft); }

/* --- Groups --- */
.grp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.perm-cat { padding: 8px 22px 14px; border-top: 1px solid var(--border); }
.perm-cat:first-child { border-top: 0; }
.perm-cat-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); margin: 8px 0 10px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.perm-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.perm-item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.perm-item:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.perm-item input { margin-top: 2px; flex-shrink: 0; }
.perm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-name { font-weight: 600; font-size: 13px; color: var(--text); }
.perm-desc { font-size: 11.5px; color: var(--text-mute); line-height: 1.42; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ==========================================================================
   Server module: modal dialogs, key/value info, failover IP chips
   (native <dialog>, CSP-safe — bkz. servers/index.php & servers/form.php)
   ========================================================================== */
.card-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.mono-hint {
    display: inline-block; margin-top: 6px; font-size: 11px;
    color: var(--text-mute); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Native <dialog> modal ---------- */
dialog.modal {
    width: min(460px, calc(100vw - 32px));
    padding: 0; border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
}
dialog.modal::backdrop { background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px); }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 680; }
.modal-x {
    background: transparent; border: 0; font-size: 22px; line-height: 1;
    color: var(--text-mute); cursor: pointer; padding: 0 2px;
}
.modal-x:hover { color: var(--text); }
.modal-body { padding: 18px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-grid .btn { width: 100%; justify-content: center; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 18px; border-top: 1px solid var(--border);
}

/* ---------- Server Info key/value table ---------- */
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table td { padding: 7px 4px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
.kv-table tr:last-child td { border-bottom: 0; }
.kv-table td:first-child { color: var(--text-mute); white-space: nowrap; width: 40%; }
.kv-table td:last-child { color: var(--text); font-weight: 600; }

/* ---------- Failover IP repeater ---------- */
.ip-adder { display: flex; gap: 8px; align-items: center; }
.ip-adder .input { flex: 1; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ip-chips:empty { margin-top: 0; }
.ip-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px;
}
.ip-chip-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ip-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--border-strong); color: var(--surface); font-size: 13px; line-height: 1;
}
.ip-chip-x:hover { background: var(--red); color: #fff; }

/* [hidden] her zaman gizli kalsın (.field{display:flex} gibi kurallar ezmesin). */
[hidden] { display: none !important; }

/* Add/Edit User: çoklu değer listesi (izinli IP / User-Agent) */
.multi-list { display: flex; flex-direction: column; gap: 10px; }
.multi-list .input-group { max-width: 420px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list:empty { display: none; }
.chip-list .ip-chip { max-width: 100%; }
.chip-list .ip-chip > :first-child,
.chip-list .ip-chip { word-break: break-all; }

/* Not: Add/Edit User formu artık standart .field-tip bileşenini kullanır (özel .tip kaldırıldı). */

/* ==========================================================================
   User Quick Tools — tool rows + contenteditable rich-text editor (RTE)
   ========================================================================== */
.tool-list { display: flex; flex-direction: column; }
.tool-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 20px; border-bottom: 1px solid var(--border); margin: 0;
}
.tool-row:last-child { border-bottom: 0; }
.tool-label { font-size: 13.5px; font-weight: 560; display: flex; align-items: center; gap: 4px; }
.tool-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tool-ctl .muted { font-size: 12px; }

/* ---- RTE ---- */
.rte { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.rte-toolbar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 7px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.rte-btn {
    min-width: 30px; height: 28px; padding: 0 7px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); color: var(--text);
    font-size: 13px; cursor: pointer; line-height: 1;
}
.rte-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.rte-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.rte-swatch {
    width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0,0,0,.15);
    border-radius: 50%; cursor: pointer; background: var(--sw, #000);
}
.rte-swatch:hover { transform: scale(1.12); }
.rte-color {
    width: 26px; height: 26px; padding: 0; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); cursor: pointer;
}
.rte-area {
    min-height: 130px; max-height: 360px; overflow-y: auto;
    padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text);
    outline: none;
}
.rte-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--text-mute); }
.rte-area p { margin: 0 0 8px; }

/* ==========================================================================
   Live Connections — sortable headers + expanded fast pager
   ========================================================================== */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--primary); }
.th-sort.is-sorted { color: var(--primary); }
.sort-ind { font-size: 10px; margin-left: 2px; opacity: .85; }
.lc-pager { flex-wrap: wrap; gap: 4px; }
.lc-pager .page-btn { min-width: 34px; padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.lc-goto {
    width: 60px; padding: 4px 6px; text-align: center; height: 30px;
    font-variant-numeric: tabular-nums; display: inline-block; margin: 0 2px;
}
.lc-pager .page-info { display: inline-flex; align-items: center; gap: 2px; color: var(--text-soft); }

/* Live Connections status divergence dot */
.lc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.lc-dot-ok   { background: var(--green); }
.lc-dot-warn { background: var(--amber); }
.lc-dot-bad  { background: var(--red); }
.lc-dot-off  { background: var(--text-mute); opacity: .55; }
/* Live Connections: User Agent tek satırda kesilir (tam metin `title`da) —
   hücre dikeyde büyümez, tablo sağa kayar (phpinceleme.md mobil kuralı). */
.lc-agent { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Content: ikon / kapak (vekilden, en fazla 64 px) sabit kutuda — dikey
   afiş satırı büyütmesin; teknik bilgi tek satır. */
.ct-icon { width: 40px; height: 32px; object-fit: contain; vertical-align: middle; }
.ct-info { white-space: nowrap; font-size: 12px; }
.ct-pill { margin-left: 6px; }
/* Manage Users: süresi geçmiş bitiş tarihi kırmızı */
.lc-exp { color: var(--red); font-weight: 600; }

/* Hover tooltip'i body'e eklenir (overflow'lu tablodan kaçar) — tip box görünümü. */
.float-tip {
    position: fixed; z-index: 200; display: none; max-width: 320px;
    background: var(--text); color: var(--surface);
    font-size: 12px; font-weight: 500; line-height: 1.45;
    padding: 8px 11px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32); pointer-events: none;
}

/* Credit Logs — kredi tutarı işaret rengi (+ yeşil / - kırmızı). */
.cl-amt-pos { color: #16a34a; }
.cl-amt-neg { color: #dc2626; }

/* Kullanıcı seçici combobox (Link MAG/Enigma paired_user, select2 yerine CSP-safe). */
.combo { position: relative; }
.combo-results {
    position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.combo-results[hidden] { display: none; }
.combo-item {
    padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item:hover { background: var(--surface-2, rgba(127, 127, 127, .12)); }

/* Aktif URL yönlendirme filtreleri (Manage User/Stream → Live Connections). */
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.lc-chips[hidden] { display: none; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 999px;
    background: var(--primary-soft, rgba(99, 102, 241, .12));
    border: 1px solid var(--border); font-size: 12.5px; color: var(--text);
}
.filter-chip-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mute); }
.filter-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
    background: transparent; color: var(--text-mute); font-size: 11px; line-height: 1; padding: 0;
}
.filter-chip-x:hover { background: var(--red); color: #fff; }

/* ==========================================================================
   Reseller Messages — Messenger/chat (tickets + tickets_replies)
   Sol: konuşma listesi. Sağ: baloncuklar + compose. CSP-safe, bağımlılıksız.
   ========================================================================== */
.chat {
    display: flex; gap: 0; overflow: hidden;
    height: calc(100vh - 190px); min-height: 460px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.btn-icon { padding: 7px 9px; line-height: 1; }

/* ---------- Sol: konuşma listesi ---------- */
.chat-list {
    width: 330px; flex-shrink: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--border); min-height: 0;
}
.chat-list-tools { padding: 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.chat-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chat-filters .input { flex: 1 1 auto; min-width: 0; height: 34px; font-size: 12.5px; }
.chat-filters [data-chat-dir] { flex: 0 0 auto; }
.chat-list-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.chat-empty { padding: 28px 16px; text-align: center; color: var(--text-mute); font-size: 13px; }

.chat-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; color: var(--text);
    border-left: 3px solid transparent;
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.is-active { background: var(--primary-soft); border-left-color: var(--primary); }
.chat-item-top { display: flex; align-items: center; gap: 8px; }
.chat-item-name { font-weight: 650; font-size: 13.5px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-date { font-size: 11px; color: var(--text-mute); flex-shrink: 0; }
.chat-item-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-preview { font-size: 12px; color: var(--text-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-preview .me { color: var(--text-soft); font-weight: 600; }
.chat-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* >>> SILME DUGMESI SATIRIN ICINDE DEGIL, YANINDA <<<
   `.chat-item` bir <button>; icine ikinci bir <button> koymak gecersiz HTML ve
   tiklamalar ic ice gecerdi. Satir bir sarmalayiciya alinip silme dugmesi
   KARDES olarak konumlandiriliyor. Hover'da beklemiyor: dokunmatik ekranda
   hover yoktur ve gizli bir dugme "silme yok" diye okunur. */
.chat-item-wrap { position: relative; }
.chat-item-del {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; line-height: 1;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-mute);
    font-size: 11px; cursor: pointer; opacity: .55;
}
.chat-item-wrap:hover .chat-item-del { opacity: 1; }
.chat-item-del:hover { background: var(--red); border-color: var(--red); color: #fff; opacity: 1; }
.chat-item-del:focus-visible { opacity: 1; }

/* >>> "LITE" SERIT <<< Tablo seridi 9 dugmeli; bu sutun ~300 px ve o serit
   tasiyordu. Dugme sayisi 4'e indi, kalanlar da kucultuldu. */
.chat-pager { border-top: 1px solid var(--border); padding: 7px 6px; justify-content: center; gap: 4px; }
.chat-pager .page-btn { padding: 3px 7px; font-size: 11px; min-width: 0; }
.chat-pager .page-info { font-size: 11px; gap: 4px; }
.chat-pager .lc-goto { width: 46px; padding: 3px 4px; font-size: 11px; }
/* Dar sutunda "1-25 of 140" yazisi kendi satirina dussun. */
.chat-pager-range { flex-basis: 100%; text-align: center; font-size: 11px; margin-top: 2px; }

/* ---------- Sağ: konuşma penceresi ---------- */
.chat-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-mute); }
.chat-placeholder-icon { font-size: 40px; text-align: center; margin-bottom: 10px; opacity: .7; }
.chat-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-conv-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.chat-conv-who { min-width: 0; }
.chat-conv-who strong { font-size: 14.5px; }
.chat-conv-owner { font-size: 12px; margin-left: 6px; }
.chat-conv-subject { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.chat-thread {
    flex: 1 1 auto; overflow-y: auto; min-height: 0;
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--surface-2);
}
.chat-bubble {
    max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5;
    word-break: break-word; white-space: pre-wrap; position: relative;
}
.chat-bubble .chat-bubble-time { display: block; margin-top: 4px; font-size: 10.5px; opacity: .7; }
.chat-bubble.from-user { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bubble.from-admin { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-del {
    position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-mute);
    font-size: 11px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0;
}
.chat-bubble:hover .chat-bubble-del { display: inline-flex; }
.chat-bubble-del:hover { background: var(--red); color: #fff; border-color: var(--red); }

.chat-compose {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 12px 16px; border-top: 1px solid var(--border);
}
.chat-compose textarea {
    flex: 1 1 auto; resize: none; max-height: 140px; min-height: 38px;
    line-height: 1.4; overflow-y: auto;
}
.chat-compose .btn { flex-shrink: 0; }
.chat-form-error { color: var(--red); font-size: 12.5px; margin-top: 4px; }
.chat-compose-error { margin: 0; padding: 8px 16px 0; }

/* Baloncugun ustundeki yazar satiri. Management kanalinda "sagdaki baloncuk =
   ben" varsayimi YANLISTIR: ayni kanala birden cok yonetici cevap yazar. */
.chat-bubble-from { display: block; font-size: 10.5px; font-weight: 700; opacity: .85; margin-bottom: 3px; }

/* Konusmanin rolu (Administrators / Registered Users / ...) ve Management
   kanali rozeti. `.badge` temel sinifi `--badge` degiskenini okur. */
.chat-role-badge { --badge: var(--text-mute); font-size: 10.5px; }
.chat-role-badge.is-mgmt { --badge: var(--primary); }

/* ---------- Ust cubuk: okunmamis mesaj rozeti ----------
   `.icon-btn` zaten 40x40 kutu + hover davranisini veriyor; buraya yalnizca
   baloncugun konumlanacagi eksen ve baloncugun kendisi ekleniyor. */
/* >>> ZARF, AY/GUNES SIMGESIYLE AYNI OLCUDE <<< Yan yana duruyorlar; 19px'e
   sabitlemek onu digerlerinden bir tik kucuk gosteriyordu. Boyut global
   `svg { width: 20px; height: 20px }` kuralindan gelir; cizgi kalinligi ve uc
   bicimi de ayni (`stroke-width="2"`, `round`).

   >>> SAYI BALONCUGU YOK <<< Ikonun VARLIGI zaten haberdir: okunmamis yoksa
   `[hidden]` ile hic cizilmez. Bu yuzden renk notr degil, dikkat cekici —
   yanindaki tema dugmesiyle karismasin. */
.topbar-msg { text-decoration: none; color: var(--primary); }
.topbar-msg:hover { color: var(--primary); }

/* ---------- New Message penceresi + aranabilir hedef secici ----------
   >>> GENISLIK YALNIZ BU PENCEREYE <<< `dialog.modal` 460px ve panelin BUTUN
   modallari onu paylasiyor; genelini buyutmek ilgisiz ekranlari bozardi.
   Sinif `.chat-modal` yalnizca bu diyalogda var. */
dialog.modal.chat-modal { width: min(760px, calc(100vw - 32px)); }

/* >>> SOLDA SECIM, SAGDA METIN <<<
   `.field` kuralinda DIS bosluk yok (yalniz kendi icinde `gap: 7px`), yani alt
   alta dizilen alanlar bitisik duruyordu ve hedef listesinin ALT KENARI ile
   "Subject" etiketi ayirt edilemiyordu. Iki sutun bunu kokunden cozuyor;
   sagdaki sutun ayrica kendi alanlari arasina bosluk koyuyor. */
.chat-new-grid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.chat-new-form { display: flex; flex-direction: column; gap: 16px; }
.chat-new-form textarea { min-height: 160px; resize: vertical; }
/* Liste sag sutunla boy olarak dengelensin; kendi cercevesi bittigi yeri
   zaten gosteriyor. */
.chat-new-grid .picker-list { max-height: 292px; }

@media (max-width: 680px) {
    .chat-new-grid { grid-template-columns: 1fr; gap: 18px; }
    .chat-new-grid .picker-list { max-height: 190px; }
    .chat-new-form textarea { min-height: 110px; }
}

.picker { position: relative; }
.picker-list {
    margin-top: 6px; max-height: 240px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2);
}
.picker-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; color: var(--text);
}
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover, .picker-item.is-cursor { background: var(--primary-soft); }
.picker-item.is-chosen { background: var(--primary); color: #fff; }
.picker-name { font-weight: 640; font-size: 13.5px; }
.picker-meta { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 1px; }
.picker-item.is-chosen .picker-meta { color: rgba(255, 255, 255, .82); }
.picker-empty { padding: 20px 10px; text-align: center; color: var(--text-mute); font-size: 12.5px; }
/* "N tane daha var" satiri: 500 hesapta hepsini cizmek listeyi de tarayiciyi da
   yorar; ekran araniyor, sonsuz kaydirilmiyor. */
.picker-more {
    padding: 7px 10px; text-align: center; font-size: 11.5px;
    color: var(--text-mute); border-top: 1px solid var(--border);
}

/* Dar ekran: liste üstte, konuşma altta (dikey yığ) */
@media (max-width: 860px) {
    .chat { flex-direction: column; height: auto; }
    .chat-list { width: 100%; max-height: 320px; border-right: 0; border-bottom: 1px solid var(--border); }
    .chat-main { min-height: 420px; }
}

/* ==========================================================================
   Mass Edit Users — seçim grid'i + tik'li toplu düzenleme
   ========================================================================== */
.mass-table td.mono, .mass-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.mass-table tr.is-selected { background: var(--primary-soft); }
.mass-table tr.is-selected:hover { background: var(--primary-soft); }
.mass-expired { color: var(--red); font-weight: 600; }
.badge.mass-st-active   { background: var(--green-soft); color: var(--green); }
.badge.mass-st-disabled { background: var(--surface-3); color: var(--text-mute); }
.badge.mass-st-banned   { background: var(--red-soft); color: var(--red); }
.badge.mass-st-expired  { background: #fef3c7; color: #b45309; }
:root[data-theme="dark"] .badge.mass-st-expired,
.badge.mass-st-expired { }
@media (prefers-color-scheme: dark) { .badge.mass-st-expired { background: #3a2d10; color: #f5c65a; } }

.mass-hint { padding: 16px 22px 4px; color: var(--text-soft); font-size: 13px; }
.mass-fields { padding: 8px 22px 20px; display: flex; flex-direction: column; gap: 4px; }
.mass-field {
    display: grid; grid-template-columns: 40px 180px 1fr; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mass-field:last-child { border-bottom: 0; }
.mass-flabel { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.mass-tick { display: inline-flex; align-items: center; cursor: pointer; }
.mass-tick input { width: 17px; height: 17px; cursor: pointer; }
.mass-input .input { width: 100%; max-width: 420px; }
.mass-input input[type="number"] { max-width: 140px; }
.mass-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); }
.mass-input :disabled { opacity: .5; }
.mass-result { font-size: 13px; font-weight: 600; }
.mass-result.is-ok { color: var(--green); }
.mass-result.is-err { color: var(--red); }
@media (max-width: 720px) {
    .mass-field { grid-template-columns: 34px 1fr; }
    .mass-field .mass-input { grid-column: 1 / -1; }
}

/* ==========================================================================
   Add Stream (stream.php) — URL listesi + sunucu ağacı
   ========================================================================== */
.stream-url-row { display: flex; gap: 6px; align-items: center; margin-bottom: 7px; }
.stream-url-row [data-url-input] { flex: 1 1 auto; min-width: 0; }
.stream-tree { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.stream-tree-src {
    padding: 9px 14px; background: var(--primary-soft); color: var(--primary);
    font-weight: 650; font-size: 13px; border-bottom: 1px solid var(--border);
}
.stream-srv-row { padding: 9px 14px 9px 26px; border-bottom: 1px solid var(--border); }
.stream-srv-row:last-child { border-bottom: 0; }
.stream-srv-row.is-on { background: var(--surface-2); }
.stream-srv-opts { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-left: 22px; margin-top: 7px; }
.stream-srv-opts .input { height: 32px; font-size: 12.5px; }
/* Toggle kutuları — Access Output (check-grid) stili; her kutu 2 satır (ilk kelime / kalan) + i tip */
.stream-toggles { margin-bottom: 18px; }
.stream-toggles .check-item { padding: 13px 14px; align-items: center; }
.stgl-txt { display: flex; flex-direction: column; line-height: 1.25; }
.stgl-l1 { display: inline-flex; align-items: center; gap: 6px; }
.stgl-l2 { }
.stream-toggles .field-tip { width: 15px; height: 15px; margin-left: 2px; font-size: 9.5px; }

/* Stream durum tablosu (edit) */
.btn-xs { padding: 3px 8px; font-size: 12px; line-height: 1; }
.badge.ss-st-1 { background: var(--green-soft); color: var(--green); }
.badge.ss-st-0, .badge.ss-st-5 { background: var(--surface-3); color: var(--text-mute); }
.badge.ss-st-2, .badge.ss-st-6 { background: var(--primary-soft); color: var(--primary); }
.badge.ss-st-3 { background: var(--red-soft); color: var(--red); }
.badge.ss-st-4 { background: #fef3c7; color: #b45309; }
@media (prefers-color-scheme: dark) { .badge.ss-st-4 { background: #3a2d10; color: #f5c65a; } }

/* ---------- Add/Edit Movie (movie.php) ---------- */
.movie-poster-wrap { display: flex; justify-content: flex-start; }
.movie-poster { width: 190px; max-width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; border: 1px solid var(--border);
    object-fit: cover; background: var(--surface-2); box-shadow: var(--shadow-sm); }
/* Episodes formu: kaynak 16:9 bir "still". 2:3 kutuda `object-fit: cover`
   onu KIRPAR (saginda ve solunda ~%62 kaybolur) — "eksik gosteriyor"
   sikayetinin sebebi buydu. Kutu kaynakla ayni orana getirilince cover
   artik hicbir seyi kirpmiyor. Movies/Series 190 px 2:3 olarak KALIR. */
.movie-poster-wide { width: 320px; aspect-ratio: 16 / 9; }
@media (max-width: 720px) { .movie-poster-wrap { justify-content: center; } .movie-poster { width: 160px; } .movie-poster-wide { width: 260px; } }

/* Reorder Episodes (series_order.php) satırları */
.reorder-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface-2); margin-bottom: 6px; }
.reorder-pos { min-width: 30px; text-align: center; font-weight: 600; color: var(--text-mute); }
.reorder-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reorder-btns { display: flex; gap: 4px; flex-shrink: 0; }

/* Plot çeviri araçları + bildirim kutusu (yalnız kullanılınca görünür) */
.plot-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.plot-notice { font-size: 12.5px; padding: 4px 10px; border-radius: 6px;
    background: var(--primary-soft); color: var(--primary); border: 1px solid var(--border); }

/* Dosya tarayıcı modalı */
.fb-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); padding: 20px; }
.fb-modal { width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4)); }
.fb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.fb-body { padding: 14px 16px; overflow-y: auto; background: var(--surface); }
.fb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fb-col-head { font-size: 12px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.fb-list { border: 1px solid var(--border); border-radius: 8px; height: 260px; overflow-y: auto; background: var(--surface-2); }
.fb-item { padding: 7px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-item:last-child { border-bottom: 0; }
.fb-item:hover { background: var(--primary-soft); color: var(--primary); }
.fb-item.is-muted { color: var(--text-mute); cursor: default; }
.fb-item.is-muted:hover { background: transparent; color: var(--text-mute); }
.fb-foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.fb-list .muted { padding: 7px 10px; font-size: 12.5px; }
.cc-sortlist { padding: 4px; font-size: 13px; }
.cc-sortlist option { padding: 5px 8px; border-radius: 4px; }
@media (max-width: 640px) { .fb-cols { grid-template-columns: 1fr; } }

/* ── Advanced T. Profiles · Quick start grupları ─────────────────────────── */
/* Şablonlar donanım hattına göre gruplanır: her grup kendi başlığı + i balonu
   ile kart içinde bir bölüm olur. Sütun sayısı genişliğe göre kendiliğinden
   ayarlanır; ayraç yerine boşluk kullanılır (grid'de "+" görsel sırayı değil
   DOM sırasını izlediği için kenarlık çok sütunlu düzende yanlış yere düşer). */
.qs-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 26px;
    padding: 16px 18px 18px;
    /* Gruplar satır yüksekliğine ESNEMESİN: içerikleri çok farklı sayıda
       (1-4 şablon), esneyince kısa grubun kutusu uzun komşusu kadar uzayıp
       başlık hizası kayıyormuş gibi görünüyordu. */
    align-items: start;
}
.qs-group { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.qs-group-head { display: flex; align-items: center; gap: 7px; }
.qs-group-head .field-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11.5px;
    color: var(--text-mute);
}
.qs-group-items { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
/* .btn genelde `white-space: nowrap`tır. Burada SARMASINA izin verilir:
   sütun `1fr` olduğu için genişleyemez, sarmayan uzun bir şablon adı sütunu
   taşar ve komşu grubun üstüne biner (grupların kaymış görünmesinin sebebi
   buydu). Sarma, hangi etiket yazılırsa yazılsın taşmayı imkânsız kılar. */
.qs-group-items .btn {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

/* Ülke bayrağı — GÖRSEL, emoji değil.
   Windows'un emoji yazı tipinde ülke bayrağı glifi yoktur; Chrome/Edge o yüzden
   "TR" gibi iki harf yazar, Firefox ise kendi Twemoji yazı tipini getirdiği için
   bayrağı çizer. Aynı sayfanın iki tarayıcıda farklı görünmesinin sebebi budur.
   Bayrakları public/assets/flags/<iso>.svg olarak servis edip <img> ile basıyoruz.
   Kaynak seti Twemoji: Firefox'un zaten çizdiği görselin aynısı → iki tarayıcı eşit.
   >>> 18px GÖRSEL = 16px EMOJİ. SAYILAR EŞİT DEĞİL, GÖRÜNEN BOYUT EŞİT <<<
   Twemoji 36x36'lık kare bir kutu çizer ve bayrak o kutunun y=5..31 aralığında,
   yani %72'sinde durur → 18px kutuda bayrak 18x13 px olur.
   AYNI SÜTUNDAKİ özel GeoIP simgeleri (globe/uydu/ok) hâlâ emoji ve `font-size:16px`
   ile çiziliyor. Buradaki tuzak şu: bir emoji glifi em kutusuna SIĞMAZ, ondan
   yaklaşık 1.125 kat büyük çizilir. Yani 16px'lik emoji ekranda ~18px'lik bir
   görsele denk düşer.
   Bu, teoriden değil ÖLÇÜMDEN geliyor: 14/16/18/20/22 px görseller Firefox'ta
   eski 16px emojinin yanına konup karşılaştırıldı (2026-08-05) ve eşleşen 18 çıktı.
   Bu yüzden `.flag: 18px` iken app.js'teki `fontSize = '16px'` OLDUĞU GİBİ KALMALI —
   ikisini "tutarlı olsun" diye eşit sayıya çekmek bayrakları yeniden büyütür.
   flag_t.js bu 18/16 çiftini sınar. */
.flag {
    width: 18px; height: 18px;
    vertical-align: -4px;
    display: inline-block;
    flex: none;
}

/* ==========================================================================
   Provider Checker › Categories (.pcc)
   --------------------------------------------------------------------------
   Sağlayıcı playlist'inin grup (kategori) seçicisi. Kart, satırdaki
   "Categories" düğmesiyle açılır ve Provider Links ile Add Provider Links
   arasında durur.

   Izgara sabit yükseklikte ve KENDİ İÇİNDE kayar: bir sağlayıcıda 2000
   kategori olabiliyor ve liste sayfayı metrelerce uzatıp alttaki formu
   erişilemez kılıyordu. Mobilde tek sütuna düşer; kutular dikeyde büyümez.
   ========================================================================== */
.pcc .pcc-note {
    margin: 0; padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-soft); background: var(--surface-2);
}
.pcc .pcc-note.is-error { color: var(--red); background: var(--red-soft); }
.pcc .pcc-note.is-ok    { color: var(--text-soft); }
.pcc .pcc-note.is-info  { color: var(--sky); background: var(--sky-soft); }

/* Sekme başlığındaki adet rozeti. */
.pcc-tabcount {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; background: var(--surface-3); color: var(--text-mute);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tabbtn.is-active .pcc-tabcount { background: var(--primary-soft); color: var(--primary); }

.pcc-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 14px 20px 0;
}

.pcc-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
    padding: 14px 20px 0;
}
.pcc-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2);
}
.pcc-stat b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pcc-stat span { font-size: 11.5px; color: var(--text-mute); }

.pcc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
    margin: 14px 20px 0; padding: 4px;
    max-height: 420px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.pcc-item {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; font-size: 13px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pcc-item:hover { border-color: var(--border-strong); }
.pcc-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.pcc-item input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.pcc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-count {
    flex-shrink: 0; padding: 1px 7px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-mute);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pcc-item:has(input:checked) .pcc-count { background: var(--surface); color: var(--primary); }

.pcc-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 20px 18px;
}

@media (max-width: 720px) {
    .pcc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pcc-grid  { grid-template-columns: 1fr; max-height: 320px; }
    .pcc-toolbar .btn { flex: 1 1 auto; justify-content: center; }
}


/* ---------- License (license/index.php) ----------
   Modul kartlari satir basina UC durur; dar ekranda ikiye, telefonda teke
   duser. Izgara secildi cunku istenen sey "tablo gibi hizali" bir goruntuydu:
   kartlarin nokta / ad / durum sutunlari her satirda ayni yerde baslar. */
.lic-mods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lic-mod {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color .15s ease, background .15s ease;
}

.lic-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-mute);
    opacity: .45;
}

/* Uzun modul adi kartı buyutmesin: tasan ad kirpilir, izgara bozulmaz. */
.lic-mod-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lic-state {
    flex: none;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--surface-3);
    color: var(--text-mute);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.lic-mod.is-on {
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
    background: var(--green-soft);
}
.lic-mod.is-on .lic-mod-name { color: var(--text); }
.lic-mod.is-on .lic-dot {
    background: var(--green);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}
.lic-mod.is-on .lic-state {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 16%, transparent);
}

.lic-count { font-size: 12px; font-weight: 600; color: var(--text-mute); }

@media (max-width: 980px) { .lic-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lic-mods { grid-template-columns: 1fr; } }

/* =========================================================================
   Servers > Install — ilerleme çubuğu ve ön kontrol listesi
   -------------------------------------------------------------------------
   Renkler tema değişkenlerinden gelir; sabit renk YOK, aksi hâlde koyu temada
   çubuk zeminden ayrışmazdı.
   ========================================================================= */

.ins-bar {
    width: 100%;
    max-width: 130px;
    height: 5px;
    margin: 5px auto 0;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.ins-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sky);
    transition: width .35s ease;
}
.ins-bar-fill.is-stalled { background: var(--amber); }
.ins-bar-fill.is-bad     { background: var(--red); }

/* `.ins-step` KALDIRILDI: adım metni Status hücresinden çıkarıldı (aşağıya bak),
   başka kullananı da yoktu. Ölü kural bırakmak, ileride "bu neden çalışmıyor"
   diye aranan bir gürültü olurdu. */

/* -------------------------------------------------------------------------
   Manage Servers > Status + Progress hücreleri
   -------------------------------------------------------------------------
   >>> ÇUBUK ARTIK STATUS HÜCRESİNİN İÇİNDE DEĞİL <<<
   Çubuk + yüzde, rozetin ALTINDA duruyordu: satır iki kat yükseliyor ve rozet
   tek başına kaldığında ("Online") hücre boşluğu asimetrik görünüyordu. İkisi
   artık KENDİ sütununda (`Progress`) tek satır hâlinde yaşıyor; Status yalnız
   rozeti taşıyor ve satır yüksekliği artık hiç değişmiyor.
   Kurulum ilerlemesi de yayın işi ilerlemesi de AYNI sütunu kullanır.
   -------------------------------------------------------------------------
   >>> ÇÖZDÜĞÜ SOMUT ARIZA: TABLO HER 5 SANİYEDE KAYIYORDU <<<
   `.table th, .table td` NOWRAP'tır. Kurulum ADIM METNİ hücrenin içinde düz
   metin olarak duruyordu ve `word-break` NOWRAP'ı kıramaz — yani metin
   sarılmıyor, hücreyi kendi uzunluğuna kadar geriyordu. Adım her yenilemede
   değiştiği için ("installing system libraries" ≈ 200px → "fetching the sub
   package from the license server" ≈ 330px) Status sütunu sürekli yeniden
   ölçülüyor, sağındaki BÜTÜN sütunlar sağa-sola kayıyordu.

   Çözüm (kullanıcı kararı): adım metni hücreden TAMAMEN kaldırıldı. Durum
   rozeti + çubuk + yüzde yeterli, taşacak bir şey de kalmadı. Geriye kalan tek
   değişken genişlik kaynağı yüzdenin kendisiydi (9% → 100%); o da sabit
   genişlikli rakamlarla kapatıldı.
   ------------------------------------------------------------------------- */

/* Sütunlar sabitlenir: gösterge belirip kaybolurken (kurulum/iş bitince) sütun
   genişliği değişmesin, sağındaki hiçbir şey kaymasın. Status'te artık yalnız
   rozet var — en geniş hâli "Offline 120 min" — bu yüzden daralabildi. */
.srv-table th.col-status,
.srv-table td.col-status { width: 130px; }

.srv-table th.col-progress,
.srv-table td.col-progress { width: 200px; }

/* Rozet + çubuk + yüzde TEK satırda; sabit genişlik, içerikten bağımsız.
   Dikey marj YOK: hücrede tek satır olduğu için satır yüksekliğini büyütmemeli. */
.ins-prog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 auto;
}
/* Rozet yaninda kalan yer daralir; cubuk okunamayacak kadar kisalmasin. */
.ins-prog .ins-bar { flex: 1; min-width: 46px; max-width: none; margin: 0; }

.ins-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    /* Rakamlar eşit genişlikte + alan rezerve: 9% → 100% geçişinde çubuğun
       sağ kenarı oynamaz. */
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
}

/* Kurulan satır listede göze çarpsın — uzun bir filoda hangi düğümün
   kurulduğunu aramak gerekmesin. Sadece bir tık zemin; okunabilirliği bozmaz. */
.srv-table tr[data-srv-busy] { background: color-mix(in srgb, var(--sky-soft) 45%, transparent); }
.srv-table tr[data-srv-busy]:hover { background: color-mix(in srgb, var(--sky-soft) 70%, transparent); }

/* --- Ön kontrol listesi (Install sayfası) --- */

.pf-list { display: flex; flex-direction: column; gap: 8px; }

.pf-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}
.pf-item.is-ok   { border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.pf-item.is-warn { border-color: color-mix(in srgb, #d97706 42%, transparent); }
.pf-item.is-fail { border-color: color-mix(in srgb, var(--red) 42%, transparent); }

.pf-mark {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-soft);
    background: var(--surface-3);
}
.pf-item.is-ok   .pf-mark { color: var(--green); background: var(--green-soft); }
.pf-item.is-warn .pf-mark { color: #b45309; background: #fef3c7; }
.pf-item.is-fail .pf-mark { color: var(--red); background: var(--red-soft); }
@media (prefers-color-scheme: dark) { .pf-item.is-warn .pf-mark { color: #f5c65a; background: #3a2d10; } }
:root[data-theme="dark"] .pf-item.is-warn .pf-mark, :root[data-theme="windark"] .pf-item.is-warn .pf-mark, :root[data-theme="glow"] .pf-item.is-warn .pf-mark, :root[data-theme="motion"] .pf-item.is-warn .pf-mark, :root[data-theme="spotlight"] .pf-item.is-warn .pf-mark { color: #f5c65a; background: #3a2d10; }
:root[data-theme="light"] .pf-item.is-warn .pf-mark { color: #b45309; background: #fef3c7; }

.pf-label  { font-size: 13px; font-weight: 600; color: var(--text); }
.pf-detail { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-mute); }

.pf-empty {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--text-mute);
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-align: center;
}

.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Ön kontrol durum satırı — düğmelerin yanındaki tek satırlık özet. */
.field-hint.ok  { color: var(--green); font-weight: 600; }
.field-hint.bad { color: var(--red);   font-weight: 600; }

/* Edit Server > Network Interface — "Check" ile bulunan arayüzler.
   Satırlar <button>: tıklanınca metin kutusunu doldurur, HİÇBİR ŞEY kaydetmez. */
.nic-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.nic-item {
    display: flex; flex-direction: column; gap: 3px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 9px 12px;
    border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--surface-2);
}
.nic-item:hover { background: var(--surface-3); }
.nic-item.is-current { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.nic-top  { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nic-name { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nic-meta { font-size: 12px; line-height: 1.45; color: var(--text-mute); word-break: break-word; }
.nic-tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-mute); border: 1px solid var(--border);
}
.nic-tag.is-ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
/* Edit Server > Failover IPs — adres tablosu ve ekleme satiri.
   Satirlar sunucuda uretilir (`servers/_failover_rows.php`); buradaki stiller
   yalniz duzen icindir. */
.fo-adder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fo-adder .input { flex: 1 1 200px; min-width: 160px; }
.fo-adder select.input { flex: 0 0 170px; }
.fo-table td, .fo-table th { font-size: 12.5px; padding: 10px 14px; }
.fo-table tr.fo-child td:first-child { padding-left: 22px; }
.fo-branch { color: var(--text-mute); margin-right: 6px; }
.fo-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.btn-xs { padding: 3px 9px; font-size: 11.5px; border-radius: 8px; }
.fo-table td.ok   { color: var(--green); font-weight: 650; }
.fo-table td.bad  { color: var(--red);   font-weight: 650; }
.fo-table td.warn { color: #b45309;      font-weight: 650; }
@media (prefers-color-scheme: dark) { .fo-table td.warn { color: #f5c65a; } }
:root[data-theme="dark"] .fo-table td.warn, :root[data-theme="windark"] .fo-table td.warn, :root[data-theme="glow"] .fo-table td.warn, :root[data-theme="motion"] .fo-table td.warn, :root[data-theme="spotlight"] .fo-table td.warn { color: #f5c65a; }
:root[data-theme="light"] .fo-table td.warn { color: #b45309; }

/* ---------- Failover tablosu: adres sütunu ve açma düğmesi ----------
   Adresler tek boyutlu rakam dizileridir: eş genişlikli rakam (tabular-nums)
   olmadan "51.38.120.198" ile "51.38.120.98" alt alta hizalanmaz ve göz
   farkı yakalayamaz. */
.fo-cidr { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fo-addr { display: inline-flex; align-items: center; gap: 8px; }
.fo-col-addr { width: 1%; }
.fo-col-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Sayı sütunları SAĞA yaslanır ve eş genişlikli rakam kullanır: büyüklük
   farkı basamak sayısından okunsun, operatör rakam saymasın. */
.fo-col-num { font-variant-numeric: tabular-nums; }
.fo-table .fo-col-first { border-left: 1px solid var(--border); }

/* Açma düğmesi: kare, sabit genişlikte. Açılmayan satırlarda AYNI genişlikte
   boşluk bırakılır (`fo-toggle-gap`), yoksa adresler satırdan satıra kayardı. */
.fo-toggle, .fo-toggle-gap { flex: 0 0 20px; width: 20px; height: 20px; }
.fo-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: 6px;
    background: var(--surface-2); color: var(--text-soft);
    font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
    padding: 0; transition: background .12s ease, color .12s ease;
}
.fo-toggle:hover { background: var(--surface-3); color: var(--text); }
.fo-toggle[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.fo-count-chip {
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-mute);
}

/* ---------- Bloğun içi (açılan alt satır) ----------
   Ayrı bir kart gibi durur: operatörün "bu satırlar ana listeye ait değil,
   bu bloğun içi" diye okuması için girintili ve farklı zeminde. */
.fo-table tr.fo-subrow:hover { background: transparent; }
.fo-table tr.fo-subrow > td { padding: 0 14px 12px 34px; background: var(--surface-2); }
.fo-inner { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.fo-inner-head {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    background: var(--surface-2); font-size: 12px;
}
.fo-inner-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fo-inner-table th {
    text-align: left; padding: 7px 12px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-mute); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.fo-inner-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fo-inner-table tbody tr:last-child td { border-bottom: 0; }
.fo-inner-table tbody tr:hover { background: var(--surface-2); }
.fo-inner-table tr.is-exception { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.fo-inner-table td.ok  { color: var(--green); font-weight: 650; }
.fo-inner-table td.bad { color: var(--red);   font-weight: 650; }
.fo-sub-addr { font-variant-numeric: tabular-nums; font-weight: 600; }
.fo-tag {
    margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-mute);
}
.fo-inner-table .pill { padding: 1px 8px; font-size: 11px; }

/* Pay çubuğu: bloğun EN YÜKLÜ adresine göre oranlanır. Mutlak bir eşik
   (ör. 100 Mbps) 10 Mbps'lik bir hatta hiçbir şey, 10 Gbps'lik bir hatta her
   şeyi dolu gösterirdi; aranan şey "hangisi diğerlerinden ayrışıyor". */
.fo-col-share { width: 150px; }
.fo-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.fo-bar-fill { display: block; height: 100%; border-radius: 999px; }
.fo-bar-fill.is-in  { background: var(--red); }
.fo-bar-fill.is-out { background: var(--sky); }
.fo-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mute); }
.fo-inline select.input { width: auto; padding: 6px 10px; }
.fo-reason { max-width: 240px; padding: 6px 10px; }
.fo-measure { padding: 8px 22px 0; font-size: 12px; }
.fo-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fo-filters .input[type="text"] { flex: 1 1 220px; min-width: 160px; padding: 6px 10px; }
.fo-filters select.input { width: auto; padding: 6px 10px; }
.fo-count { padding: 10px 22px 0; font-size: 12px; }
.fo-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Katlanan degisiklik kaydi. Acikken tablodan ayri bir kutu gibi durur ki
   operator "bunlar tablo satiri mi?" diye bakmasin. */
.fo-loglist {
    margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.fo-loglist-head { font-size: 12px; margin-bottom: 6px; }
.btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.fo-log { display: flex; flex-direction: column; gap: 4px; padding: 4px 22px 18px; }
.fo-log-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; line-height: 1.5; }
.fo-log-when { flex: 0 0 88px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* >>> BU PARTIAL KARTIN AYAGINDA DEGIL, KARTIN ICINDE <<<
   `servers/_failover_rows.php` zaten 22px yan dolgulu bir `.form-grid`in
   icinde render ediliyor. Icerideki bloklar kendi 18-22px yan dolgusunu da
   uygulayinca sayac, kayit listesi ve sayfalayici tablodan 22px iceri
   kayiyordu; `.card-head`in alt cizgisi ile `.pagination`in ust cizgisi de
   kartin tam genisligini kesmedigi icin havada duran birer cizgi gibi
   gorunuyordu. Yan dolgu burada SIFIR. */
[data-fo-rows] .fo-measure,
[data-fo-rows] .fo-count   { padding-left: 0; padding-right: 0; }
[data-fo-rows] .fo-log     { padding: 4px 0; }
[data-fo-rows] .fo-loglist { margin-bottom: 4px; }
[data-fo-rows] .card-head  { padding: 14px 0 8px; }
[data-fo-rows] .pagination { justify-content: flex-start; padding: 12px 0 0; border-top: 0; }
.fo-log-what { flex: 0 0 auto; }
.fo-log-who  { flex: 1 1 auto; }

.nic-item.is-current .nic-name::after {
    content: 'saved';
    margin-left: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--green);
}

/* ===== Advanced Functions > Full Reinstall =============================
   Hizli dugmelerden AYRI bir bolum: kendi formu, kendi onayi. Ust cizgi
   ikisini gorsel olarak ayirir, yoksa tehlikeli dugme sirada duran bir
   secenek gibi gorunur. */
.ri-box { border-top: 1px solid var(--border); }
.ri-box .card-head { margin-bottom: 10px; }
.ri-list { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted, #667); }
.ri-list li { margin-bottom: 5px; }
.ri-list code { font-size: 12px; }
.ri-box .field { margin-bottom: 12px; }

/* =========================================================================
   RESELLER PANEL EKİ
   -------------------------------------------------------------------------
   Bu blok adminui'nin app.css'ine EKLENMİŞTİR; üstteki hiçbir kural
   değiştirilmedi, böylece iki panel aynı görünür ve adminui'den gelen bir
   güncelleme buraya kadar kopyalanabilir.

   Neden gerekti: adminui'nin görünümleri `class="text-center"` yazıyor ama
   app.css'te BÖYLE BİR KURAL YOK — hücreler sola yaslı kalıyor. Aynı şeyi
   tekrarlamak yerine kuralı burada tanımlıyoruz. Rozet varyantları da öyle:
   `.badge` temel sınıfı `--badge` değişkenini okuyor ama adı geçen varyantlar
   (success/danger/…) hiçbir yerde tanımlı değildi.
   ========================================================================= */

.text-center { text-align: center; }
.table th.text-center, .table td.text-center { text-align: center; }
.table th.text-right,  .table td.text-right  { text-align: right; }

/* Durum rozetleri — ev standardındaki `--badge` değişkeni üzerinden. */
.badge-success { --badge: var(--green); }
.badge-warning { --badge: var(--amber); }
.badge-danger  { --badge: var(--red); }
.badge-info    { --badge: var(--primary); }
.badge-muted   { --badge: var(--text-mute); }

/* Sıralanabilir sütun başlığı — tıklanabilir olduğu görünsün. */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--text); }
.th-sort.is-sorted { color: var(--primary); }
.sort-ind { font-size: 9px; margin-left: 4px; opacity: .8; }

/* Sayfa no girişi — ok tuşları dar alanda yer kaplamasın. */
.lc-goto { width: 62px; padding: 4px 6px; text-align: center; }

/* Hover balonu (`[data-tip]`). `body`ye eklenir; tablo overflow'undan kaçar. */
.float-tip {
    position: absolute; z-index: 1200; display: none;
    max-width: 320px; padding: 7px 10px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-md);
    pointer-events: none; white-space: normal;
}

/* Kredi hareketi tutarı. */
.cl-amt-pos { color: var(--green); font-weight: 650; }
.cl-amt-neg { color: var(--red);   font-weight: 650; }

/* Aynı hücrede birden çok rozet (Packages > Type: Official + Trial) bitişmesin. */
.table td .pill + .pill { margin-left: 4px; }

/* >>> MOBİLDE SATIR DİKEYDE BÜYÜMEZ <<<
   phpinceleme.md: "row larda mobile boyuta geldiğinde dikeyde genişleme
   olmadan aynı boyutta sağa kaydırmalıyız". `.table th/td` zaten `nowrap`;
   eksik olan, eylem sütunundaki düğme dizisinin sarmamasıydı. */
@media (max-width: 1024px) {
    .table .row-actions { flex-wrap: nowrap; }
    .table td .badge { white-space: nowrap; }
}

/* >>> BALONCUK TARAFI: `from-admin` DEGIL `from-me` <<<
   Ortak blokta siniflar `from-admin` (sagda, bizim) ve `from-user` (solda)
   diye adlandirilmis; orada "admin = biz" sabitti. Bayi panelinde taraf
   DEGISKENDIR: ayni bayi bir konusmada ust, digerinde alt taraftir. Ortak
   bloga dokunmamak icin (adminui guncellemesi buraya kopyalanabilsin) anlamli
   adlar burada tanimlaniyor; gorunum birebir ayni. */
.chat-bubble.from-me {
    align-self: flex-end; background: var(--primary); color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble.from-them {
    align-self: flex-start; background: var(--surface);
    border: 1px solid var(--border); border-bottom-left-radius: 4px;
}

/* Kapali konusmada yazma alani: devre disi oldugu gorunsun. */
.chat-compose textarea:disabled { opacity: .6; cursor: not-allowed; }


/* =========================================================================
   Aylık kredi özeti  ([data-cc-sum])  — Billing › Credit Logs
   =========================================================================
   >>> GRAFİK KÜTÜPHANESİ YOK <<< 12 ay = 12 sütun, her sütunda iki ince
   çubuk. Yükseklikler sunucudan yüzde olarak geliyor, burada yalnız
   yerleşim ve renk var. Tek bir şerit için kütüphane eklemek hem CSP'yi
   hem sayfa ağırlığını bir görsel ayrıntı uğruna değiştirirdi.
   ------------------------------------------------------------------------- */
.cc-sum { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cc-sum.is-busy { opacity: .55; }

.cc-sum-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.cc-year { display: inline-flex; align-items: center; gap: 8px; }
.cc-year strong { font-size: 15px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }

.cc-tot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.cc-tot-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mute); }
.cc-tot-item strong { font-variant-numeric: tabular-nums; }
.cc-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cc-dot-in  { background: var(--green, #2e9e5b); }
.cc-dot-out { background: var(--red, #b32c23); }
/* Yıl karşılaştırması ayrı bir öbek: sayılardan çizgiyle ayrılıyor. */
.cc-vs { padding-left: 16px; border-left: 1px solid var(--border); }

.cc-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 6px; align-items: end;
}
.cc-m {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 2px 4px; border-radius: 8px; cursor: default;
    transition: background .14s ease;
}
/* Ay adinin ALTINDA iki sayi: SOLDA gelen (yesil), SAGDA giden (kirmizi).
   Sutun dar oldugu icin KISA bicim (`1.2k`), tam degerler balonda. */
.cc-nums {
    /* >>> ORTADA, KENARLARDA DEGIL (kullanici karari) <<< `space-between` iki
       sayiyi sutunun iki ucuna itiyordu; komsu sutunlarin sayilari yan yana
       geldigi icin hangi ayin oldugu anlasilmiyordu. Ikisi birlikte ay adinin
       ALTINDA ortalaniyor, aralarinda ince bir bosluk var. */
    display: flex; align-items: baseline; justify-content: center;
    width: 100%; gap: 5px;
    /* Tam sayilar (`1240`) kisaltmadan uzun; 9.5px + dar harf araligi 12
       sutunda da tasirmadan siga bilmesini sagliyor. */
    font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.2px; line-height: 1.2; white-space: nowrap;
}
/* Bos taraf yer TUTMAZ: tek tarafli bir ay da ortali gorunsun. */
.cc-in:empty, .cc-out:empty { display: none; }
/* Iki sayi bitisik okunmasin diye ayirici. */
.cc-nums .cc-out::before { content: ''; }
.cc-m.is-empty .cc-nums { opacity: .35; }
.cc-m:hover, .cc-m:focus-visible { background: var(--surface-2, var(--border)); outline: none; }
/* Boş ay soluk: "veri yok" ile "sıfıra yakın" karışmasın. */
.cc-m.is-empty .cc-m-label { opacity: .45; }

/* Çubuk alanı SABİT yükseklikli: aylar arasında zemin kaymasın. */
.cc-bars {
    display: flex; align-items: flex-end; justify-content: center; gap: 4px;
    height: 72px; width: 100%;
}
.cc-bar {
    /* Kullanıcı kararı: çubuklar DAHA KALIN (8px → 14px). */
    width: 14px; border-radius: 4px 4px 0 0;
    /* min-height: 0 olan ay hiç çizilmesin diye yükseklik satır içinde
       veriliyor; 2px'lik taban, 1 kredilik ayın görünmesi için. */
    min-height: 0;
}
.cc-bar[style*="height:0%"] { min-height: 0; }
.cc-bar-in  { background: var(--green, #2e9e5b); }
.cc-bar-out { background: var(--red, #b32c23); }
.cc-m-label { font-size: 11px; color: var(--text-mute); font-weight: 600; }

/* -------------------------------------------------------------------------
   Credit Subreseller seridi: AYRI TON
   -------------------------------------------------------------------------
   >>> BURADA YESIL/KIRMIZI YANLIS OKUNUR <<< O renkler "kazanc / kayip"
   demek; alt bayi defterinde ise para yalnizca YON degistiriyor: pozitif
   tutar ona GONDERDIGIM, negatif tutar GERI ALDIGIM kredi. Ikisi de ne iyi ne
   kotu. Bu yuzden kart kendi tonunu kullaniyor (gonderilen = sky, geri gelen
   = amber) ve etiketler `Sent` / `Returned`.
   Ton YALNIZ bu kartin icinde gecerli; ustteki Credits karti degismiyor. */
.cc-sum-subs .cc-dot-in,
.cc-sum-subs .cc-bar-in  { background: var(--sky, #0284c7); }
.cc-sum-subs .cc-dot-out,
.cc-sum-subs .cc-bar-out { background: var(--amber, #d97706); }
/* Sayilar da ayni tonu alsin: serit icinde yesil/kirmizi kalirsa cubuklarla
   celisirdi. Ozgulluk `.cl-amt-*` kurallarini yenecek kadar yuksek. */
.cc-sum-subs .cl-amt-pos { color: var(--sky, #0284c7); }
.cc-sum-subs .cl-amt-neg { color: var(--amber, #d97706); }

@media (max-width: 980px) {
    /* Kalın çubuk + iki sayı satırı dar ekranda 12 sütuna sığmıyor: önce
       6+6, sonra 4+4+4. */
    .cc-grid { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
    .cc-bars { height: 60px; }
}
@media (max-width: 560px) {
    .cc-grid { grid-template-columns: repeat(4, 1fr); }
    .cc-bar  { width: 12px; }
}

/* ===== Manage MAG / Enigma — MAC hucresi ==============================
   MAC tek parca okunur: dar ekranda sarmak yerine tablo saga kayar
   (`.table-wrap`), bu yuzden `nowrap`. Tek aralikli yazi tipi, benzer
   gorunen karakterleri (0/O, 8/B) ayirt ettirir. */
.dev-mac {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}

/* =========================================================================
   Bayi Dashboard (§53) — orijinal `reseller.php` içeriği, yeni düzen:
   4 metrik kutusu + hat şeridi · News | Recently Added (poster rafları)
   · Recent Activity (zaman çizelgesi) | Expiring Soon. Önek `db-`.
   ========================================================================= */
.db-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.db-actions .btn svg { width: 15px; height: 15px; }

.db-metrics { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 14px; }
.db-tile { gap: 10px; color: inherit; }
.db-tile .metric-value { font-weight: 650; }
.db-tile-sub {
    position: relative; z-index: 1; margin-top: -6px;
    font-size: 12px; color: var(--text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Connections kutusunun "Live" rozeti — açık bağlantı varsa yeşil ve nabızlı. */
.db-live {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute); background: var(--surface-2); border: 1px solid var(--border);
}
.db-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); }
.db-live.is-on { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.db-live.is-on .db-live-dot { background: var(--green); animation: live-pulse 1.6s infinite; }

/* Hat durum şeridi — Manage Users süzgeçlerine gider. `--tone` BURADA
   tanımlanmaz: `.tone-*` sınıfları daha önce tanımlı, aynı özgüllükte
   sonraki kural onları ezerdi. */
.db-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.db-strip-title {
    margin-right: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute);
}
.db-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-soft);
    transition: border-color .15s ease, background .15s ease;
}
.db-chip b { font-weight: 700; color: var(--tone, var(--text)); font-variant-numeric: tabular-nums; }
.db-chip:hover {
    border-color: color-mix(in srgb, var(--tone, var(--primary)) 45%, var(--border));
    background: color-mix(in srgb, var(--tone, var(--primary)) 6%, var(--surface));
}

/* İki sütunlu satırlar: sol dar (5), sağ geniş (7); dar ekranda alt alta. */
.db-grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 18px; margin-bottom: 18px; align-items: stretch;
}
.db-card { display: flex; flex-direction: column; min-width: 0; margin-bottom: 0; }
.db-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.db-card-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--tone-soft, var(--primary-soft)); color: var(--tone, var(--primary));
}
.db-card-icon svg { width: 18px; height: 18px; }
html.dark .db-card-icon { background: color-mix(in srgb, var(--tone) 22%, transparent); }
.db-count { margin-left: auto; }
.db-scroll {
    flex: 1 1 auto; max-height: 390px; overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 18px; scrollbar-width: thin;
}
.db-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 170px; color: var(--text-mute); font-size: 13px; text-align: center;
}
.db-empty svg { width: 28px; height: 28px; opacity: .6; }
.db-foot { padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-mute); }

/* News — `SafeHtml` çıktısı. Renk `--ann-c` ile gelir; koyu temada açılır
   (yönetici renkleri açık zemin için seçilmişti: siyah yazı koyu zeminde
   kaybolurdu). */
.db-news { font-size: 14px; line-height: 1.6; }
.ann p, .ann div, .ann blockquote, .ann ul, .ann ol { margin: 0 0 .5em; }
.ann h4, .ann h5, .ann h6 { margin: .6em 0 .35em; font-size: 15px; }
.ann ul, .ann ol { padding-left: 1.3em; }
.ann blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--text-soft); }
.ann a { color: var(--primary); text-decoration: underline; }
.ann hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.ann-center { text-align: center; }
.ann-right { text-align: right; }
.ann-c { color: var(--ann-c); }
html.dark .ann-c { color: color-mix(in srgb, var(--ann-c) 50%, #fff); }
.db-note {
    margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
    background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.db-note-title { margin-bottom: 6px; font-weight: 700; color: var(--primary); }

/* Recently Added — 7 sütunluk poster rafı; dar ekranda yatay kayar
   (sütun en az 92 px). Az öğede kartlar büyümesin diye sütun sayısı sabit. */
.db-rails { display: flex; flex-direction: column; gap: 10px; padding: 6px 18px 16px; }
.db-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 10px; }
.db-rail-head h4 {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute);
}
.db-rail {
    display: grid; grid-auto-flow: column; grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 2px 2px 8px; scrollbar-width: thin;
}
.db-rail-empty { padding: 18px 0; color: var(--text-mute); font-size: 13px; }
.db-poster { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; scroll-snap-align: start; }
.db-poster-img {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden;
    border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 28%, var(--surface-3)), var(--surface-2));
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Resim yer tutucunun ÜSTÜNDE: vekil başarısız olursa 1×1 saydam piksel
   döner ve altındaki baş harfler görünür kalır. */
.db-poster-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-poster-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--text-mute); font-size: 17px; font-weight: 700; letter-spacing: .04em;
}
.db-poster-ph svg { width: 22px; height: 22px; opacity: .7; }
a.db-poster:hover .db-poster-img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.db-poster:hover .db-poster-title { color: var(--primary); }
.db-rating {
    position: absolute; top: 6px; left: 6px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 6px;
    font-size: 11px; font-weight: 700; color: #fff;
    background: rgba(15, 23, 42, .74);
}
.db-rating svg { width: 11px; height: 11px; color: #fbbf24; fill: currentColor; }
.db-poster-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-poster-meta { min-height: 1.3em; margin-top: -4px; font-size: 11.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Recent Activity — zaman çizelgesi; renk günlük türünden (`Dashboard::tone`). */
.db-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.db-tl {
    --tl: var(--text-mute); --tl-soft: var(--surface-2);
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px;
    padding: 0 0 16px;
}
.db-tl-new    { --tl: var(--green); --tl-soft: var(--green-soft); }
.db-tl-extend { --tl: var(--sky);   --tl-soft: var(--sky-soft); }
.db-tl-delete { --tl: var(--red);   --tl-soft: var(--red-soft); }
.db-tl-trial  { --tl: var(--amber); --tl-soft: var(--amber-soft); }
.db-tl-bonus,
.db-tl-credit { --tl: var(--primary); --tl-soft: var(--primary-soft); }
.db-tl:not(:last-child)::before {
    content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px;
    width: 2px; border-radius: 2px; background: var(--border);
}
.db-tl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tl-soft); color: var(--tl); }
.db-tl-icon svg { width: 15px; height: 15px; }
.db-tl-text { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.db-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--text-mute); }
.db-who { font-weight: 600; color: var(--text-soft); }
.db-code {
    padding: 1px 6px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
    color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border);
}
.db-tl-time { padding-top: 2px; font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }

/* Expiring Soon — satır bütünüyle düzenleme sayfasına gider. */
.db-exp-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.db-exp {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px; color: inherit;
    border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.db-exp:hover { background: var(--surface-2); border-color: var(--border); }
.db-kind { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.db-kind svg { width: 17px; height: 17px; }
.db-kind-line { background: var(--primary-soft); color: var(--primary); }
.db-kind-mag  { background: var(--sky-soft);     color: var(--sky); }
.db-kind-e2   { background: var(--amber-soft);   color: var(--amber); }
.db-exp-main { display: flex; flex-direction: column; min-width: 0; }
.db-exp-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.db-exp-sub { font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-trial { color: var(--amber); font-weight: 600; }
.db-exp-when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.db-exp-date { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }

@media (max-width: 1100px) {
    .db-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .db-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .db-tile { padding: 14px; }
    .db-tile .metric-value { font-size: 22px; }
    .db-live { top: 10px; right: 10px; padding: 2px 7px; }
    .db-scroll { max-height: 340px; padding: 12px 14px; }
    .db-rails { padding: 4px 14px 12px; }
    .db-rail { grid-template-columns: repeat(7, 96px); gap: 10px; }
}

/* ---------- Profile Settings: renk satirlari ---------- */
.prof-colors { display: flex; flex-direction: column; gap: 10px; }
.prof-color {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2);
}
.prof-color-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }
.prof-color-meta .muted { font-size: 12.5px; }
.prof-swatch {
    width: 46px; height: 30px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: none; cursor: pointer;
}
.prof-swatch:disabled { opacity: .4; cursor: default; }
.prof-hex { font-size: 12.5px; color: var(--text-mute); min-width: 76px; text-align: right; }
/* Mobilde ad/aciklama uste, anahtar ve renk altta yan yana kalsin. */
@media (max-width: 640px) {
    .prof-color { flex-wrap: wrap; }
    .prof-color-meta { flex-basis: 100%; order: -1; }
}

/* ---------- Tema karti onizlemesi ----------
   Kucuk bir kutu: temanin zemini + vurgu/basari/hata/bilgi renkleri.
   Degiskenler temanin KENDI blogundan gelir (yukarida secicilere
   `.thm-prev.<tema>` eklendi); burada yalnizca `light` icin kisa bir kopya
   var, cunku acik tema sinifsizdir. */
.thm-prev.light {
    --bg: #f4f6fb; --surface: #ffffff; --border: #e3e8ef;
    --primary: #6366f1; --green: #16a34a; --red: #dc2626; --sky: #0284c7;
}
.thm-prev {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 5px 6px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border);
    flex-shrink: 0;
}
.thm-prev i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.thm-prev .p { background: var(--primary); }
.thm-prev .g { background: var(--green); }
.thm-prev .r { background: var(--red); }
.thm-prev .s { background: var(--sky); }
/* Tema karti: onizleme sagda, metin solda. */
.thm-item { align-items: flex-start; }
.thm-item .thm-text { flex: 1; min-width: 0; }

/* ===== Iki adimli dogrulama (2FA) + giris kutusu ===== */
/* QR sabit siyah/beyazdir (Qr::svg): koyu temada tema renkleriyle cizilse
   kontrast tarayici esiginin altina duserdi. Beyaz cerceve, koyu temada
   kodun etrafinda sessiz alan birakir. */
.tfa-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}
.tfa-qr svg {
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.tfa-secret {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
    margin: 0 0 4px;
}
.tfa-secret code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    user-select: all;
    word-break: break-all;
}
/* Kod alani: rakamlar arali, sayi tus takimi telefonu aciyor. */
.tfa-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 6px;
    text-align: center;
}
.auth-note { margin: 0 0 4px; color: var(--text-mute); font-size: 13px; text-align: center; }
/* reCAPTCHA kutusu 304 px sabit genislikte gelir; dar ekranda ortalanir ve
   kartin disina tasmasin diye olceklenir. */
.auth-captcha { display: flex; justify-content: center; }
@media (max-width: 380px) {
    .auth-captcha { transform: scale(.88); transform-origin: center; }
}

/* Uzun sozcukler (ornegin Almanca "Sonnenaufgang") tema kartinin disina
   tasmasin: `min-width:0` tek basina yetmiyor, sozcugun BOLUNEBILMESI gerek. */
.thm-item .thm-text strong { overflow-wrap: anywhere; }

/* ---------- Gateway (dış uygulamaya gönderim) ----------
   Üç kart: uygulama kutucukları · hat seçimi · istek/yanıt. Renkler tema
   değişkenlerinden gelir, sabit renk yok — dokuz temanın hepsinde çalışsın. */
.gw-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px; padding: 18px;
}
.gw-app {
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    padding: 14px; text-align: left; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: 12px;
    background: var(--surface-2); color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gw-app:hover { border-color: var(--primary); }
/* Seçili kutucuk: yalnız kenarlık değil halka da var — renk körlüğünde de
   hangisinin seçili olduğu görünsün. */
.gw-app.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent);
}
.gw-app-name { font-weight: 650; font-size: 14px; }
.gw-app-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }

.gw-body { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.gw-note { margin: 0; font-size: 13px; }

.gw-picked {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2);
}
.gw-picked[hidden] { display: none; }
.gw-k { font-size: 12.5px; color: var(--text-mute); margin-right: 6px; }

.gw-req[hidden], .gw-out[hidden] { display: none; }
.gw-req-head, .gw-out-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.gw-kv { width: 100%; }
.gw-kv th, .gw-kv td { padding: 8px 10px; }
.gw-v {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; word-break: break-all;
}
.gw-repl { margin-left: 8px; font-size: 11px; }

/* Yanıt gövdesi dışarıdan gelir: sarmalanır ve yüksekliği sınırlıdır —
   birkaç yüz satırlık bir HTML sayfası dönerse sayfayı boyuna uzatmasın. */
.gw-body-out {
    margin: 0; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2);
    max-height: 320px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
    font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 640px) {
    .gw-apps { grid-template-columns: 1fr; }
}