/*
 * MHS Links AI · Panel arayüzü
 * mhslinks.com/ai ile aynı tasarım dili: siyah / beyaz zemin, mor vurgu, 4 px köşe, Mona Sans.
 * Koyu tema varsayılandır; açık tema html[data-theme="light"] ile gelir (assets/js/theme.js).
 * Bu dosya yalnızca görünümü belirler; sayfaların davranışı assets/js altındadır.
 */

/* ---------------------------------------------------------------- Fontlar */
@font-face {
    font-family: "Mona Sans";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/mona-sans-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Mona Sans";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/mona-sans-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/mona-sans-latin-ext-wght-italic.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/mona-sans-latin-wght-italic.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin-ext-400-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Renkler ve ölçüler */
:root {
    color-scheme: dark;
    --bg: #000;
    --bg-2: #070708;
    --card: #0f0f11;
    --card-2: #0b0b0d;
    --elev: #1a1a1d;
    --hover: rgba(255, 255, 255, .045);
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #86868b;
    --accent: #b692dd;
    --accent-2: #c9b3ff;
    --accent-soft: rgba(182, 146, 221, .12);
    --accent-line: rgba(182, 146, 221, .35);
    --ring: 0 0 0 4px rgba(154, 99, 194, .22);
    --brand-ai: linear-gradient(90deg, #f8576b 0%, #c353b4 52%, #9b55ee 100%);
    --spark: #dc46ce;
    --btn-grad: linear-gradient(to bottom, #9a63c2, #53326b);
    --btn-border: #623781;
    --btn-text: #fff;
    --ok: #4ade80;
    --ok-text: #86efac;
    --ok-soft: rgba(74, 222, 128, .1);
    --warn: #fbbf24;
    --warn-text: #fcd34d;
    --warn-soft: rgba(251, 191, 36, .1);
    --bad: #f87171;
    --bad-text: #fca5a5;
    --bad-soft: rgba(239, 68, 68, .1);
    --info: #7dd3fc;
    --neutral: #86868b;
    --overlay: rgba(0, 0, 0, .62);
    --shadow: 0 40px 80px -40px rgba(0, 0, 0, .75);
    --shadow-sm: 0 18px 40px -24px rgba(0, 0, 0, .8);
    --nav-bg: rgba(10, 10, 12, .72);
    --code-bg: #0b0b0d;
    --bubble-in: #1a1a1d;
    --bubble-ai: #24182f;
    --bubble-team: linear-gradient(to bottom, #8a58b0, #5a3675);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --r: 4px;
    --nav-h: 64px;
    --wrap: 1320px;
    --sb-w: 256px;          /* sol menü genişliği (masaüstü) */
    --top-h: 0px;           /* telefonda / tablette üst çubuk */
    --bottom-h: 0px;        /* kiracı paneli: telefonda alt menü */
    --sb-bg: #050506;
    --on-c: #0b0b0d;        /* renkli kutucuk üstündeki simge */
    --grid-line: rgba(255, 255, 255, .042);
    --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Vurgu renkleri: menü ve başlık simgeleri, avatarlar */
    --c-violet: #b692dd;
    --c-blue: #7cacf8;
    --c-green: #4ade80;
    --c-orange: #fb923c;
    --c-pink: #f472b6;
    --c-teal: #2dd4bf;
    --c-amber: #fbbf24;
    --c-red: #f87171;
    --c-sky: #38bdf8;
    --c-indigo: #a5b4fc;
    --c-slate: #a1a1aa;

    /* Bilgi kutusu (hafif mavi) */
    --info-bg: rgba(56, 189, 248, .07);
    --info-line: rgba(56, 189, 248, .26);
    --info-ic: #7dd3fc;

    /* Grafik renkleri (koyu yüzey #0f0f11 üzerinde doğrulandı) */
    --ch-ai: #9085e9;
    --ch-team: #d95926;
    --ch-open: #3987e5;
    --ch-closed: #6b6b73;
    --ch-ok: #3fb96f;
    --ch-warn: #d6a21e;
    --ch-bad: #e5534b;
    --ch-muted: #4a4a52;
    --ch-track: rgba(255, 255, 255, .06);
    --ch-st1: #4b3f7a;
    --ch-st2: #6a58ad;
    --ch-st3: #8d78d8;
    --ch-st4: #b7a5f5;
    --ch-q1: #1f6b62;
    --ch-q2: #26a091;
    --ch-q3: #5ee0cc;
    --ch-whatsapp: #25d366;
    --ch-instagram: #e1306c;
    --ch-messenger: #3b8cff;
    --ch-webchat: #a66cf0;
    --ch-google: #5b9cf6;
    --ch-telegram: #2aabee;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #fff;
    --bg-2: #fafafa;
    --card: #f4f4f5;
    --card-2: #f7f7f8;
    --elev: #e9e9ea;
    --hover: rgba(26, 26, 26, .04);
    --line: rgba(26, 26, 26, .08);
    --line-2: rgba(26, 26, 26, .14);
    --text: #1d1d1e;
    --text-2: #5e5e5f;
    --text-3: #626263;
    --accent: #714e94;
    --accent-2: #685296;
    --accent-soft: rgba(113, 78, 148, .08);
    --accent-line: rgba(113, 78, 148, .32);
    --ring: 0 0 0 4px rgba(113, 78, 148, .16);
    --brand-ai: linear-gradient(90deg, #ba0f3a 0%, #9d2e90 52%, #7e33cc 100%);
    --spark: #a6189b;
    --btn-grad: linear-gradient(to bottom, #9a63c2, #c0afcf);
    --btn-border: #623781;
    --btn-text: #1a1a1a;
    --ok: #16a34a;
    --ok-text: #116a32;
    --ok-soft: rgba(22, 163, 74, .08);
    --warn: #d97706;
    --warn-text: #8a5205;
    --warn-soft: rgba(217, 119, 6, .09);
    --bad: #dc2626;
    --bad-text: #b91c1c;
    --bad-soft: rgba(220, 38, 38, .07);
    --info: #0369a1;
    --neutral: #8e8e93;
    --overlay: rgba(20, 20, 24, .38);
    --shadow: 0 40px 80px -44px rgba(30, 20, 50, .35);
    --shadow-sm: 0 18px 40px -28px rgba(30, 20, 50, .35);
    --nav-bg: rgba(248, 248, 248, .74);
    --code-bg: #f7f7f8;
    --bubble-in: #fff;
    --bubble-ai: #f1eaf8;
    --bubble-team: linear-gradient(to bottom, #8a58b0, #6b4290);
    --sb-bg: #fafafa;
    --on-c: #fff;
    --grid-line: rgba(26, 26, 26, .05);

    --c-violet: #6d48a0;
    --c-blue: #2563eb;
    --c-green: #15803d;
    --c-orange: #c2410c;
    --c-pink: #be185d;
    --c-teal: #0f766e;
    --c-amber: #b45309;
    --c-red: #dc2626;
    --c-sky: #0369a1;
    --c-indigo: #4f46e5;
    --c-slate: #52525b;

    --info-bg: #f2f8fe;
    --info-line: #cfe3f8;
    --info-ic: #0369a1;

    /* Grafik renkleri (açık yüzey #f4f4f5 üzerinde doğrulandı; turuncu ve gri yazılı açıklamayla) */
    --ch-ai: #6250d6;
    --ch-team: #eb6834;
    --ch-open: #2a78d6;
    --ch-closed: #8b8b94;
    --ch-ok: #1f9d55;
    --ch-warn: #d08a0c;
    --ch-bad: #dc2626;
    --ch-muted: #c4c4cc;
    --ch-track: rgba(26, 26, 26, .07);
    --ch-st1: #cdc2f0;
    --ch-st2: #a28ce0;
    --ch-st3: #7a5fcf;
    --ch-st4: #553aae;
    --ch-q1: #a7e3da;
    --ch-q2: #33a596;
    --ch-q3: #0f6158;
    --ch-whatsapp: #1a9e4b;
    --ch-instagram: #c2185b;
    --ch-messenger: #0866ff;
    --ch-webchat: #7e33cc;
    --ch-google: #1a73e8;
    --ch-telegram: #0088cc;
}

/* ---------------------------------------------------------------- Temel */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent; /* zemin html'de: arkadaki ızgara görünsün */
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(182, 146, 221, .35); color: inherit; }

a { color: var(--accent-2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
html[data-theme="light"] a { color: var(--accent); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { margin: 0; color: var(--text); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.06rem; letter-spacing: -.012em; }
h3 { font-size: .95rem; letter-spacing: -.008em; }
p { margin: 0 0 .75rem; }
b, strong { font-weight: 600; }
small { font-size: .8rem; }

code, kbd, pre { font-family: var(--mono); font-size: .86em; }
code {
    padding: .08em .38em;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--code-bg);
    color: var(--text);
    overflow-wrap: anywhere;
}
pre code { padding: 0; border: 0; background: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

[hidden] { display: none !important; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

.ic {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }
.logo { width: 22px; height: 22px; flex: none; object-fit: contain; }
.logo-sm { width: 16px; height: 16px; }
.logo-lg { width: 32px; height: 32px; }

.muted { color: var(--text-2); font-size: .86rem; }
.hint { font-size: .8rem; color: var(--text-3); line-height: 1.5; margin-top: .3rem; }
.hint b, .hint strong { color: var(--text-2); }
.hint code { font-size: .78rem; }
/* Tablo satırlarında kimlikler: çerçevesiz, sakin */
td .hint code { padding: 0; border: 0; background: none; color: var(--text-3); font-size: .76rem; }
.mono { font-family: var(--mono); font-size: .86em; }
.nowrap { white-space: nowrap; }
.t-ok { color: var(--ok-text) !important; }
.t-warn { color: var(--warn-text) !important; }
.t-bad { color: var(--bad-text) !important; }

/* ---------------------------------------------------------------- Marka */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .62em;
    color: var(--text);
    font-family: "Poppins", var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none !important;
}
.brand .brand-mark { display: block; flex: none; width: auto; height: 1.3em; object-fit: contain; }
.brand-word { display: inline-block; color: var(--text); }
.brand-ai {
    padding-inline-end: .02em;
    background: var(--brand-ai);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-spark {
    display: inline-block;
    position: relative;
    top: -.4em;
    width: .74em;
    height: .74em;
    margin-inline-start: .08em;
    color: var(--spark);
    fill: currentColor;
    vertical-align: baseline;
    overflow: visible;
}

/* ---------------------------------------------------------------- Üst menü */
.nav {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--nav-h);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--line);
    animation: navDrop .9s var(--ease) both;
}
.nav::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 179, 255, .45), transparent);
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .6s ease, transform .8s var(--ease);
    pointer-events: none;
}
html[data-theme="light"] .nav::after { background: linear-gradient(90deg, transparent, rgba(113, 78, 148, .3), transparent); }
.nav.is-scrolled { background: var(--nav-bg); }
.nav.is-scrolled::after { opacity: 1; transform: none; }

.nav-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    max-width: calc(var(--wrap) + 48px);
    margin: 0 auto;
    padding: 0 24px;
}
.nav-sep { width: 1px; height: 22px; background: var(--line-2); flex: none; }
.nav-context { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nav-context b {
    font-size: .92rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw;
}
.nav-context small { font-size: .74rem; color: var(--text-3); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 2px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    opacity: .72;
    transition: opacity .25s ease;
    text-decoration: none !important;
}
.nav-link::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after { transform: none; }
.nav-user {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 260px; padding-inline-end: 6px;
    color: var(--text-2); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-user:empty { display: none; }
.nav-user .avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-2);
    font-size: .76rem; font-weight: 600;
}
html[data-theme="light"] .nav-user .avatar { color: var(--accent); }

@keyframes navDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Tema düğmesi: koyu temada güneş, açık temada ay gösterir */
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.icon-btn:hover { background: var(--hover); border-color: var(--accent-line); }
.icon-btn:active { transform: scale(.96); }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
.theme-toggle .ic { transition: transform .5s var(--ease); }
.theme-toggle:hover .ic { transform: rotate(-18deg); }

/* ---------------------------------------------------------------- Arka plan: ızgara ve şeritler */
/* Sitedeki gibi 80 px ızgara; kenarlara doğru silinir. Sol menünün arkasında kalır. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: calc(var(--sb-w) + (100% - var(--sb-w)) / 2 - 40px) 0, 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent var(--sb-w), #000 calc(var(--sb-w) + 9%), #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent var(--sb-w), #000 calc(var(--sb-w) + 9%), #000 91%, transparent 100%);
}

/* Marka şeritleri: sağ üst köşeden ucu görünür, içeriğin arkasında kalır. */
.bg-ribbons {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: -1;
    width: min(100%, 760px);
    height: clamp(240px, 33vw, 480px);
    overflow: hidden;
    pointer-events: none;
    opacity: .62;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 96%);
}
html[data-theme="light"] .bg-ribbons { opacity: .8; }
.bg-ribbons .rb-c {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1200 / 1000;
    transform-origin: 100% 0;
}
.bg-ribbons i { position: absolute; display: block; }
/* İki tema da baştan yüklenir: tema değişince şerit kaybolup gelmez. */
.bg-ribbons i::before, .bg-ribbons i::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.bg-ribbons i::after { opacity: 0; }
html[data-theme="light"] .bg-ribbons i::before { opacity: 0; }
html[data-theme="light"] .bg-ribbons i::after { opacity: 1; }
.bg-ribbons i:nth-child(1) { --k: 0; left: 83.583%; top: 0; width: 16.417%; height: 45.8%; }
.bg-ribbons i:nth-child(2) { --k: 1; left: 70.583%; top: 0; width: 29.417%; height: 79.8%; }
.bg-ribbons i:nth-child(3) { --k: 2; left: 59.083%; top: 0; width: 40.917%; height: 100%; }
.bg-ribbons i:nth-child(4) { --k: 3; left: 49%; top: 0; width: 48.833%; height: 100%; }
.bg-ribbons i:nth-child(1)::before { background-image: url(../img/ribbons/page-dark-1.webp); }
.bg-ribbons i:nth-child(2)::before { background-image: url(../img/ribbons/page-dark-2.webp); }
.bg-ribbons i:nth-child(3)::before { background-image: url(../img/ribbons/page-dark-3.webp); }
.bg-ribbons i:nth-child(4)::before { background-image: url(../img/ribbons/page-dark-4.webp); }
.bg-ribbons i:nth-child(1)::after { background-image: url(../img/ribbons/page-light-1.webp); }
.bg-ribbons i:nth-child(2)::after { background-image: url(../img/ribbons/page-light-2.webp); }
.bg-ribbons i:nth-child(3)::after { background-image: url(../img/ribbons/page-light-3.webp); }
.bg-ribbons i:nth-child(4)::after { background-image: url(../img/ribbons/page-light-4.webp); }
@media (prefers-reduced-motion: no-preference) {
    .bg-ribbons .rb-c { animation: rbScale 2.8s cubic-bezier(.33, 1, .68, 1) both; }
    .bg-ribbons i { animation: rbFade 1.2s ease calc(var(--k, 0) * .2s) both; }
}
@keyframes rbScale { from { transform: scale(1.16); } to { transform: none; } }
@keyframes rbFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Sol menü */
.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    width: var(--sb-w);
    padding: 16px 14px 14px;
    background: var(--sb-bg);
    border-inline-end: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sb-brand { display: flex; align-items: center; min-height: 40px; padding: 2px 8px 14px; }
.sb-brand .brand { font-size: 16.5px; }

/* Bağlam kutusu: "Sistem Yönetimi" ya da kiracı adı */
.sb-context {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    padding: 10px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    min-width: 0;
}
.sb-context > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-context b { font-size: .88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-context small { margin-top: 2px; font-size: .74rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-context .badge { font-size: .74rem; }
.sb-back {
    display: flex; align-items: center; gap: 8px;
    margin: -4px 0 10px; padding: 6px 10px;
    border-radius: var(--r);
    color: var(--text-2) !important; font-size: .84rem; font-weight: 500;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.sb-back:hover { background: var(--hover); color: var(--text) !important; }
.sb-back .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.sb-back:hover .ic { transform: translateX(-2px); }

.sb-title { margin: 6px 10px 6px; font-size: .74rem; font-weight: 500; color: var(--text-3); }
.sb-nav { --c: var(--c-violet); display: flex; flex-direction: column; gap: 2px; }
.sb-nav .tab, .sb-nav .nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 6px 10px 6px 8px;
    border: 0;
    border-radius: var(--r);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.sb-nav .tab:hover, .sb-nav .nav-btn:hover { background: var(--hover); color: var(--text); }
.sb-nav .tab.active, .sb-nav .nav-btn.active {
    background: color-mix(in srgb, var(--c) 11%, transparent);
    color: var(--text);
}
.sb-nav .tab.active::before, .sb-nav .nav-btn.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -14px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--c);
    animation: barIn .35s var(--ease) both;
}
@keyframes barIn { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--c) 15%, transparent);
    color: var(--c);
    transition: background .25s ease, color .25s ease, transform .25s var(--ease);
}
.sb-ic .ic { width: 17px; height: 17px; }
.sb-nav .tab:hover .sb-ic, .sb-nav .nav-btn:hover .sb-ic { transform: scale(1.06); }
.sb-nav .active .sb-ic { background: var(--c); color: var(--on-c); }
.sb-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--r);
    background: var(--hover);
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sb-count:empty { display: none; }

/* Menü öğelerinin renkleri */
.c-violet { --c: var(--c-violet); }
.c-blue { --c: var(--c-blue); }
.c-green { --c: var(--c-green); }
.c-orange { --c: var(--c-orange); }
.c-pink { --c: var(--c-pink); }
.c-teal { --c: var(--c-teal); }
.c-amber { --c: var(--c-amber); }
.c-red { --c: var(--c-red); }
.c-sky { --c: var(--c-sky); }
.c-indigo { --c: var(--c-indigo); }
.c-slate { --c: var(--c-slate); }

.sb-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: 14px;
}
.sb-foot::before { content: ""; display: block; height: 1px; margin: 0 4px 10px; background: var(--line); }
.sb-link {
    display: flex; align-items: center; gap: 11px;
    min-height: 36px; padding: 5px 10px;
    border-radius: var(--r);
    color: var(--text-2) !important; font-size: .85rem; font-weight: 500;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.sb-link:hover { background: var(--hover); color: var(--text) !important; }
.sb-link .ic { width: 17px; height: 17px; color: var(--text-3); }
.sb-link .ext { width: 14px; height: 14px; margin-inline-start: auto; opacity: .55; }
.sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 6px;
    min-width: 0;
}
.sb-user:empty { display: none; }
.sb-user > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user b { font-size: .86rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user small { font-size: .74rem; color: var(--text-3); }
.sb-actions { display: flex; gap: 8px; margin-top: 8px; }
.sb-actions .btn { flex: 1; min-height: 38px; }
.sb-actions .icon-btn { width: 38px; height: 38px; }

/* Üst çubuk ve alt menü (telefon / tablet) */
.topbar { display: none; }
.sb-overlay { display: none; }
.bottombar { display: none; }

/* İçerik alanı */
body { display: flex; flex-direction: column; }
.app-main {
    position: relative;
    isolation: isolate;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline-start: var(--sb-w);
}
.app-main > .page { flex: 1 0 auto; }

/* ---------------------------------------------------------------- Sayfa düzeni */
/* Sayfa iskeleti: içerik, en altta sağda küçük gizlilik bağlantısı (ayrı alt bilgi yok) */
.page { flex: 1 0 auto; width: 100%; max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 30px 32px 36px; }
.page-narrow { max-width: 1128px; }
.tab-panel, .section { display: none; }
.tab-panel.active, .section.active { display: block; animation: panelIn .45s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head, .header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.page-head h1, .header-row h1 { margin: 0; }
.page-head .lead, .header-row .lead { margin: 6px 0 0; color: var(--text-2); font-size: .92rem; max-width: 72ch; }
.head-actions, .header-row .actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Başlık + renkli simge kutusu */
.head-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.head-title > div { min-width: 0; }
.head-title .tile { width: 44px; height: 44px; }
.head-title .tile .ic { width: 22px; height: 22px; }
.section-title {
    display: flex; align-items: center; gap: 10px;
    margin: 32px 0 12px;
    font-size: .95rem; font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
.section-title .tile { width: 28px; height: 28px; }
.section-title .tile .ic { width: 15px; height: 15px; }
.section-title small { margin-inline-start: auto; font-size: .8rem; font-weight: 400; color: var(--text-3); }

/* Renkli simge kutusu (başlıklar, istatistikler) */
.tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--c, var(--c-violet)) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--c-violet)) 22%, transparent);
    color: var(--c, var(--c-violet));
}
.tile .ic { width: 18px; height: 18px; }
html[data-theme="light"] .tile { background: color-mix(in srgb, var(--c, var(--c-violet)) 9%, #fff); border-color: color-mix(in srgb, var(--c, var(--c-violet)) 18%, transparent); }

/* Baş harf kutusu (kiracı, kullanıcı) */
.avatar-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--r);
    background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--c-violet)) 30%, transparent), color-mix(in srgb, var(--c, var(--c-violet)) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--c, var(--c-violet)) 30%, transparent);
    color: var(--c, var(--c-violet));
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
html[data-theme="light"] .avatar-tile { background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--c-violet)) 16%, #fff), color-mix(in srgb, var(--c, var(--c-violet)) 6%, #fff)); }
.avatar-tile.sm { width: 30px; height: 30px; font-size: .72rem; }
.avatar-tile.lg { width: 48px; height: 48px; font-size: .98rem; }

/* ---------------------------------------------------------------- Kartlar */
.card, .provider-card, .mp-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    margin-bottom: 16px;
}
.card > h2, .card > h3 { margin: 0 0 14px; }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.card-header h2 { margin: 0; }
.card-header .hint { margin: 0; }
.card-sub { margin: -6px 0 16px; color: var(--text-3); font-size: .85rem; }
/* Kart başlığı: renkli simge + başlık + kısa açıklama; sağda araçlar */
.card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    min-width: 0;
}
.card-head > .ch-text { flex: 1; min-width: 0; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.02rem; }
.card-head p { margin: 2px 0 0; color: var(--text-3); font-size: .84rem; line-height: 1.45; }
.card-head .ch-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.card-head .ch-tools select { width: auto; min-width: 200px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: .85rem; }
.card-head + .card-sub { margin-top: -10px; }
.card.flat { background: color-mix(in srgb, var(--card) 70%, transparent); }

/* Bilgi kutuları: hafif mavi zemin, başta "i" simgesi (uyarılar sarı, hatalar kırmızı) */
.note, .secret-note, .inline-note, .mp-note, .mi-warn, .callout, .info {
    --nb: var(--info-bg);
    --nl: var(--info-line);
    --ni: var(--info-ic);
    position: relative;
    display: block;
    margin: 0 0 16px;
    padding: 12px 14px 12px 44px;
    border: 1px solid var(--nl);
    border-radius: var(--r);
    background: linear-gradient(var(--nb), var(--nb)), var(--card); /* arkadaki şerit ve ızgara yazının altına karışmasın */
    color: var(--text-2);
    font-size: .86rem;
    line-height: 1.6;
}
.note::before, .secret-note::before, .inline-note::before, .mp-note::before, .mi-warn::before, .callout::before, .info::before {
    content: "";
    position: absolute;
    inset-inline-start: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    background: var(--ni);
    -webkit-mask: var(--note-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")) center / contain no-repeat;
    mask: var(--note-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")) center / contain no-repeat;
}
.note b, .note strong, .secret-note strong, .secret-note b, .inline-note strong, .mp-note b, .info b, .info strong, .callout b, .callout strong { color: var(--text); }
.note code, .info code { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.inline-note { margin: 10px 0 0; }
.secret-note, .callout-warn, .mi-warn, #setupBanner {
    --nb: var(--warn-soft);
    --nl: color-mix(in srgb, var(--warn) 32%, transparent);
    --ni: var(--warn);
    --note-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.secret-note {
    --note-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.callout-bad {
    --nb: var(--bad-soft);
    --nl: color-mix(in srgb, var(--bad) 32%, transparent);
    --ni: var(--bad);
    --note-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.callout-ok {
    --nb: var(--ok-soft);
    --nl: color-mix(in srgb, var(--ok) 30%, transparent);
    --ni: var(--ok);
    --note-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
#setupBanner a { font-weight: 600; }
.info-sm { padding: 9px 12px 9px 38px; font-size: .82rem; }
.info-sm::before { inset-inline-start: 12px; top: 10px; width: 16px; height: 16px; }
.form-group > .info { margin: 2px 0 0; }

/* ---------------------------------------------------------------- Düğmeler */
.btn, .mi-btn, .mp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .2s var(--ease), box-shadow .3s ease;
}
.btn:hover, .mi-btn:hover, .mp-btn:hover { background: var(--hover); border-color: var(--accent-line); }
.btn:active, .mi-btn:active, .mp-btn:active { transform: translateY(1px); }
.btn:disabled, .mi-btn:disabled, .mp-btn:disabled, .btn[aria-disabled="true"] {
    opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn .ic { width: 16px; height: 16px; }

.btn-primary, .mi-btn-primary, .mp-btn-primary {
    border-color: var(--btn-border);
    background: var(--btn-grad);
    color: var(--btn-text);
    box-shadow: 0 10px 26px -16px rgba(154, 99, 194, .9);
}
.btn-primary:hover, .mi-btn-primary:hover, .mp-btn-primary:hover {
    border-color: var(--btn-border);
    background: var(--btn-grad);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px -14px rgba(154, 99, 194, .95);
}
html[data-theme="light"] .btn-primary, html[data-theme="light"] .mi-btn-primary, html[data-theme="light"] .mp-btn-primary {
    box-shadow: 0 10px 24px -16px rgba(98, 55, 129, .55);
}
/* Bağlantı (<a>) olarak yazılmış düğmeler: açık temadaki genel bağlantı rengi düğmenin yazı rengini ezmesin. */
html[data-theme="light"] a.btn { color: var(--text); }
html[data-theme="light"] a.btn-primary { color: var(--btn-text); }
html[data-theme="light"] a.btn-danger { color: var(--bad-text); }
.btn-secondary, .mi-btn-light, .mp-btn-light { background: color-mix(in srgb, var(--card) 82%, transparent); }
.btn-secondary:hover, .mi-btn-light:hover, .mp-btn-light:hover { background: color-mix(in srgb, var(--elev) 88%, transparent); }
.btn-ghost { border-color: transparent; }
.btn-danger, .mi-btn-danger, .mp-btn-danger { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 38%, transparent); }
.btn-danger:hover, .mi-btn-danger:hover, .mp-btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.mi-btn-warn { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); }
html[data-theme="light"] .mi-btn-warn { color: var(--accent); }
.mi-btn-warn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.btn-sm, .mi-btn, .mp-btn { min-height: 32px; padding: 0 12px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: .95rem; }

.actions, .btn-row { display: flex; align-items: center; gap: 8px; }
.btn-row.end { justify-content: flex-end; }

/* İşlem sürüyorken düğmede küçük dönen gösterge */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-color: var(--btn-text) transparent var(--btn-text) transparent;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Form alanları */
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.form-group > label, .field-label, fieldset legend {
    font-size: .84rem;
    font-weight: 500;
    color: var(--text);
}
.form-group > .hint { margin-top: 0; }
.form-row, .grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
    align-items: start;
}
.form-row > .check { margin-bottom: 12px; }
.form-actions, .modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

input[type=text], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=url], input[type=email], input[type=search], input[type=tel], input:not([type]),
select, textarea, .inline-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--card-2);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    line-height: 1.35;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select {
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
select option { background: var(--card); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); }
input:focus, select:focus, textarea:focus, .inline-input:focus {
    outline: none;
    border-color: var(--accent);
    background-color: var(--card);
    box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--card); color: var(--text-2); }
input[type=date], input[type=time] { min-width: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=search]::-webkit-search-cancel-button { filter: grayscale(1); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }

input[type=checkbox], input[type=radio] {
    width: 17px; height: 17px; margin: 0; flex: none;
    accent-color: #9a63c2; cursor: pointer;
}
.check, label.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    line-height: 1.4;
}
.check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 4px; }

fieldset {
    margin: 4px 0 16px;
    padding: 16px 16px 4px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card-2);
}
fieldset legend { padding: 0 6px; }

/* Parola göster / gizle */
.pw-field { position: relative; }
.pw-field input { padding-inline-end: 46px; }
.pw-toggle {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: var(--r); background: transparent; color: var(--text-3); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: var(--hover); }
.pw-toggle .i-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .i-eye { display: none; }
.pw-toggle[aria-pressed="true"] .i-eye-off { display: block; }

/* details (gelişmiş alanlar, elle bağlama formları) */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.disclosure, details.wa-manual {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card-2);
}
.disclosure > summary, details.wa-manual > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px;
    font-size: .88rem; font-weight: 600; color: var(--text);
}
.disclosure > summary::after, details.wa-manual > summary::after, details.adv > summary::after {
    content: "";
    width: 9px; height: 9px; flex: none;
    border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--ease);
}
.disclosure[open] > summary::after, details.wa-manual[open] > summary::after, details.adv[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}
.disclosure > :not(summary), details.wa-manual > :not(summary) { margin-inline: 16px; }
.disclosure > :last-child, details.wa-manual > :last-child { margin-bottom: 16px; }
details.wa-manual > .hint:first-of-type { margin-top: 0; }
details.adv { margin: 4px 0 14px; }
details.adv > summary {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .82rem; color: var(--text-2); font-weight: 500; padding: 4px 0;
}
details.adv[open] > summary { margin-bottom: 12px; }

/* ---------------------------------------------------------------- Durum yazıları (eski "badge"ler) */
/* Hap rozet yok: küçük bir nokta ve sakin bir metin. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    color: var(--text-2);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none !important;
}
.badge::before {
    content: "";
    width: 7px; height: 7px; flex: none;
    border-radius: 50%;
    background: var(--neutral);
}
.badge-ok, .badge-active, .badge-current, .badge-set { color: var(--ok-text); }
.badge-ok::before, .badge-active::before, .badge-current::before, .badge-set::before { background: var(--ok); }
.badge-bad, .badge-missing, .badge-error, .badge-failed, .badge-unset { color: var(--bad-text); }
.badge-bad::before, .badge-missing::before, .badge-error::before, .badge-failed::before, .badge-unset::before { background: var(--bad); }
.badge-warn, .badge-stale, .badge-incomplete, .badge-pending { color: var(--warn-text); }
.badge-warn::before, .badge-stale::before, .badge-incomplete::before, .badge-pending::before { background: var(--warn); }
.badge-plain, .badge-disabled, .badge-inactive { color: var(--text-2); }
.badge-inactive::before { background: var(--text-3); }
/* Tür etiketleri (Kanal, Yürütücü, demo, plan): noktasız, ince metin */
.badge-demo, .badge-channel, .badge-executor, .badge.tag { color: var(--text-3); font-weight: 500; }
.badge-demo::before, .badge-channel::before, .badge-executor::before, .badge.tag::before { display: none; }
a.badge:hover { text-decoration: underline !important; }

/* Ölçü listesi (sayaçlar): "WhatsApp 12 · Instagram 4" */
.kv { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.kv-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); }
.kv-line:first-child { border-top: 0; padding-top: 0; }
.kv-line > .kv-k { flex: 0 0 120px; color: var(--text-3); font-size: .82rem; }
.metric { display: inline-flex; align-items: baseline; gap: 8px; font-size: .88rem; color: var(--text-2); white-space: nowrap; max-width: 100%; }
.metric b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.metric .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); align-self: center; }
.metric.ok .dot { background: var(--ok); }
.metric.warn .dot { background: var(--warn); }
.metric.bad .dot { background: var(--bad); }

/* ---------------------------------------------------------------- İstatistikler */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.stat {
    position: relative;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    min-width: 0;
    overflow: hidden;
}
.stat::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
    opacity: .7;
}
/* Renkli istatistik: üstte ince renk çizgisi, köşede hafif ışık */
.stat[class*="c-"]::before { background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--c) 70%, transparent), transparent 96%); opacity: .8; }
.stat[class*="c-"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 9%, transparent), transparent 55%);
}
.stat-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-top .tile { width: 32px; height: 32px; }
.stat-top .tile .ic { width: 17px; height: 17px; }
.stat-top .label { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.stat .stat-top + .value { margin-top: 12px; }
.stat .label { font-size: .82rem; color: var(--text-2); font-weight: 500; text-transform: none; letter-spacing: 0; }
.stat .value {
    margin-top: 6px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.stat .value.small, .stat .value[style*="font-size"] { font-size: 1rem !important; line-height: 1.5; letter-spacing: -.01em; font-weight: 500; }
.stat .detail { margin-top: 6px; font-size: .8rem; color: var(--text-3); }
.stats > .empty { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Araç çubuğu */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.toolbar select { width: auto; min-width: 220px; min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
.toolbar .hint { margin: 0 0 0 auto; text-align: end; }

/* ---------------------------------------------------------------- Tablolar */
.table-wrap {
    position: relative; /* gizli başlık metinleri (sr-only) tablo kutusunun dışına taşmasın */
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-x: auto;
    margin-bottom: 16px;
}
.card .table-wrap, .card > table { margin-bottom: 0; }
.card > table { width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td {
    padding: 13px 16px;
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}
th {
    background: transparent;
    color: var(--text-3);
    font-size: .78rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s ease; }
tbody tr:hover td { background: var(--hover); }
table.data tr.click { cursor: pointer; }
td .hint { margin-top: 3px; }
td code { white-space: nowrap; }
td.actions, td:last-child:has(> .btn) { white-space: nowrap; }
td.actions { display: table-cell; }
td.actions > .btn + .btn, td > .btn + .btn { margin-inline-start: 6px; }
.card > table th:first-child, .card > table td:first-child { padding-inline-start: 0; }
.card > table th:last-child, .card > table td:last-child { padding-inline-end: 0; }

/* Satır menüsü (⋯): ikincil işlemler tek bir menüde */
.table-wrap.menu-wrap { overflow: visible; }
.row-menu { position: relative; display: inline-block; vertical-align: middle; }
.row-menu > summary {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--line-2); border-radius: var(--r);
    color: var(--text-2);
    transition: background .2s ease, border-color .2s ease;
}
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--hover); border-color: var(--accent-line); color: var(--text); }
.row-menu > summary .ic { width: 16px; height: 16px; }
.row-menu-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    background: var(--elev);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    animation: menuIn .2s var(--ease) both;
}
html[data-theme="light"] .row-menu-list { background: #fff; }
.row-menu-list button, .row-menu-list a {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px;
    border: 0; border-radius: 3px;
    background: none; color: var(--text);
    font: inherit; font-size: .86rem; text-align: start; white-space: nowrap;
    cursor: pointer; text-decoration: none !important;
}
.row-menu-list button:hover, .row-menu-list a:hover { background: var(--hover); }
.row-menu-list .ic { width: 16px; height: 16px; color: var(--text-3); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Satır işlemleri: tek satırda; sığmazsa yatay kayar, alt alta dökülmez */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn { min-height: 30px; padding: 0 10px; font-size: .8rem; }
.empty, .mi-empty, .mp-empty {
    padding: 28px 16px;
    color: var(--text-3);
    text-align: center;
    font-size: .88rem;
    font-style: normal;
}
td.empty { padding: 28px 16px; }

/* ---------------------------------------------------------------- Pencereler (modal) */
.modal-bg, .modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.modal-bg.open, .modal.open { display: flex; animation: fadeIn .25s ease both; }
.modal-bg > .modal, .modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: none;
    margin: auto;
    padding: 28px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    animation: modalIn .38s var(--ease) both;
}
html[data-theme="light"] .modal-bg > .modal, html[data-theme="light"] .modal-content { background: var(--bg); }
.modal-bg > .modal { display: block; position: relative; inset: auto; max-width: 880px; padding: 28px; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; }
.modal-content.wide { max-width: 820px; }
.modal-content > h2, .modal-bg > .modal h2 { font-size: 1.2rem; margin: 0 0 18px; }
.modal-bg > .modal h3 {
    margin: 24px 0 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
}
.modal-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.modal-head h2 { margin: 0 !important; }
.modal-close { margin-inline-start: auto; }
.modal-sub { font-weight: 400; color: var(--text-3); font-size: .9rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
html.has-modal, html.has-modal body { overflow: hidden; }

/* İki sütunlu anahtar–değer listesi (fırsat ayrıntısı) */
.modal .kv, .kv-grid {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 10px 18px;
    font-size: .88rem;
}
.modal .kv .k, .kv-grid .k { color: var(--text-3); }
.list { margin: 6px 0 0; padding-inline-start: 18px; font-size: .86rem; color: var(--text-2); }
.list li { margin: 3px 0; }
.src { margin-inline-start: 6px; font-size: .74rem; color: var(--text-3); white-space: nowrap; }
.src-inferred { color: var(--warn-text); }

.code-block {
    margin: 0;
    padding: 16px;
    max-height: 60vh;
    overflow: auto;
    background: var(--code-bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------- Bildirimler (toast) */
.toast-stack {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 52px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px 14px 18px;
    background: var(--elev);
    color: var(--text);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.45;
    pointer-events: auto;
    cursor: pointer;
    animation: toastIn .45s var(--ease) both;
}
html[data-theme="light"] .toast { background: #fff; }
.toast::before {
    content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 2px;
    border-radius: 2px; background: var(--info);
}
.toast-success::before, .toast-ok::before { background: var(--ok); }
.toast-error::before { background: var(--bad); }
.toast-info::before { background: var(--info-ic); }
.toast .toast-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--info-ic); }
.toast-success .toast-ic, .toast-ok .toast-ic { color: var(--ok); }
.toast-error .toast-ic { color: var(--bad); }
.toast.leaving { animation: toastOut .3s ease both; }
@keyframes toastIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- Gizlilik bağlantısı (alt sağ, küçük) */
.legal-link {
    flex: none;
    display: block;
    width: max-content;
    margin: 0 max(24px, calc((100% - var(--wrap)) / 2)) 16px auto;
    padding: 4px 0;
    color: var(--text-3) !important;
    font-size: .74rem;
    font-weight: 500;
    transition: color .2s ease;
}
.legal-link:hover { color: var(--text) !important; text-decoration: none; }

/* ---------------------------------------------------------------- Giriş sayfaları */
.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
}
/* Yumuşak marka ışığı: ızgaranın üstünde, şeritlerin altında */
.auth-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% -8%, rgba(154, 99, 194, .22), transparent 70%),
        radial-gradient(40% 35% at 85% 110%, rgba(248, 87, 107, .08), transparent 70%);
}
html[data-theme="light"] .auth-body::after {
    background:
        radial-gradient(60% 50% at 50% -8%, rgba(154, 99, 194, .14), transparent 70%),
        radial-gradient(40% 35% at 85% 110%, rgba(186, 15, 58, .05), transparent 70%);
}
.auth-body > .bg-ribbons { position: fixed; }
.auth-body .nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth-main { flex: 1; display: grid; place-items: center; padding: 24px 16px 48px; }
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 36px 34px 30px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    animation: modalIn .6s var(--ease) both;
}
.auth-card .eyebrow-mark { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-card .eyebrow-mark img { height: 34px; width: auto; }
.auth-card h1 { font-size: 1.5rem; text-align: center; letter-spacing: -.025em; }
.auth-card .subtitle { margin: 8px 0 26px; text-align: center; color: var(--text-2); font-size: .92rem; }
.auth-card .form-group { margin-bottom: 18px; }
.auth-card .btn-primary { width: 100%; min-height: 46px; margin-top: 6px; font-size: .95rem; }
.auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; color: var(--text-3); font-size: .84rem; }
.auth-foot a { font-weight: 500; }
.error, .form-error {
    display: none;
    margin: 0 0 18px;
    padding: 12px 14px;
    color: var(--bad-text);
    background: var(--bad-soft);
    border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
    border-radius: var(--r);
    font-size: .88rem;
    line-height: 1.45;
}
.error.show, .form-error.is-visible { display: block; animation: shake .4s var(--ease) both; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Geçici şifre değiştirme penceresi (panel) */
.gate {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.gate .auth-card { max-width: 440px; }
.gate .auth-card h2 { font-size: 1.3rem; text-align: center; }
.gate .btn-row { margin-top: 8px; }
.gate .btn-row .btn { flex: 1; }

/* ---------------------------------------------------------------- Sağlayıcı (entegrasyon) kartları */
.provider-card { padding: 22px 24px; }
.provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.provider-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.provider-name .pv-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.provider-name .pv-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-name .pv-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-weight: 400; }
.provider-name .badge { font-size: .8rem; }
.pv-logo {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card-2);
}
.pv-logo img { width: 24px; height: 24px; object-fit: contain; }
.pv-logo .ic { width: 22px; height: 22px; color: var(--accent-2); }
html[data-theme="light"] .pv-logo .ic { color: var(--accent); }
.provider-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.provider-desc { margin: 14px 0 0; font-size: .88rem; color: var(--text-2); line-height: 1.55; }
.provider-card > .hint { margin-top: 8px; }
.provider-card > .note { margin: 14px 0 0; }
.provider-card form { margin-top: 18px; }
.provider-card form > .check { margin-bottom: 16px; }
.provider-meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .84rem; color: var(--text-2); }
.provider-meta-row strong { color: var(--text); }
.copy-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: nowrap; }
.copy-line .k { color: var(--text-3); font-size: .82rem; white-space: nowrap; }
.copy-line code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; padding: 6px 9px; }
.status-line { margin-top: 10px; font-size: .84rem; color: var(--text-2); min-height: 0; }
.status-line:empty { display: none; }
.caps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.caps .badge { color: var(--text-3); }
.caps .badge::before { width: 5px; height: 5px; background: var(--line-2); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2); }

/* ---------------------------------------------------------------- Sohbet kutusu (inbox.js) */
.mi-root {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 0;
    height: calc(100vh - var(--top-h) - var(--bottom-h) - 96px - var(--inbox-offset, 0px));
    height: calc(100dvh - var(--top-h) - var(--bottom-h) - 96px - var(--inbox-offset, 0px));
    min-height: 560px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.mi-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--card); }
.mi-col + .mi-col { border-inline-start: 1px solid var(--line); background: var(--bg-2); }
html[data-theme="light"] .mi-col + .mi-col { background: #fbfbfc; }

.mi-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.mi-filters input[type=search] {
    grid-column: 1 / -1;
    padding-inline-start: 38px;
    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='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
}
.mi-filters select, .mi-filters input { min-height: 38px; font-size: .86rem; padding-top: 7px; padding-bottom: 7px; }
.mi-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-2); cursor: pointer; padding: 4px 2px; }
.mi-filters select[data-f="tenant"] { grid-column: 1 / -1; }

.mi-list { flex: 1; overflow-y: auto; max-height: none; overscroll-behavior: contain; }
.mi-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 12px;
    padding: 14px 16px 14px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .15s ease;
}
.mi-item:hover { background: var(--hover); }
.mi-item.active { background: var(--accent-soft); }
.mi-item.active::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: var(--btn-grad);
}
.mi-ch {
    grid-row: 1 / span 3;
    align-self: center; /* kanal logosu satırın (ad, önizleme, etiketler) tam ortasında */
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--card-2);
    border: 1px solid var(--line);
}
.mi-ch img { width: 18px; height: 18px; object-fit: contain; }
.mi-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.mi-name { font-weight: 600; font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-time { font-size: .74rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-row2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mi-preview { flex: 1; min-width: 0; font-size: .84rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.mi-unread {
    display: inline-grid; place-items: center; flex: none;
    min-width: 20px; height: 20px; padding: 2px 6px 0;
    border-radius: var(--r);
    background: var(--btn-grad);
    color: #fff;
    font-size: .7rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mi-tags { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 3px; font-size: .76rem; color: var(--text-3); }
.mi-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mi-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral); }
/* Durum renkleri genel bakıştaki grafikle aynı: yapay zekâ mor, ekip turuncu, açık mavi, kapalı gri */
.mi-tag.s-ai::before { background: var(--ch-ai); }
.mi-tag.s-team::before { background: var(--ch-team); }
.mi-tag.s-closed::before { background: var(--ch-closed); }
.mi-tag.s-open::before { background: var(--ch-open); }
.mi-tag.t-hot { color: var(--bad-text); }
.mi-tag.t-hot::before { background: var(--bad); }
.mi-tag.t-warm { color: var(--warn-text); }
.mi-tag.t-warm::before { background: var(--warn); }
.mi-tag.t-cold::before { background: #7dd3fc; }
.mi-tag.tenant::before { display: none; }
.mi-tag.tenant { color: var(--text-2); }
.mi-more { padding: 14px; text-align: center; }
.mi-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
    color: var(--text-3);
    font-size: .92rem;
    text-align: center;
}
.mi-placeholder .ic { width: 34px; height: 34px; color: var(--accent); opacity: .7; stroke-width: 1.4; }

.mi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}
.mi-head-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mi-head h3 { margin: 0; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-sub { margin-top: 3px; font-size: .8rem; color: var(--text-3); line-height: 1.45; }
.mi-back { display: none; }
.mi-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.mi-actions .mi-btn { min-height: 32px; }
.mi-actions .mi-btn .ic { width: 15px; height: 15px; }

.mi-intel { border-bottom: 1px solid var(--line); background: var(--card); font-size: .84rem; }
.mi-intel > details > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 20px;
    font-weight: 600; font-size: .84rem; color: var(--text);
}
.mi-intel > details > summary::after {
    content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease);
}
.mi-intel > details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.mi-intel > details > :not(summary) { margin-inline: 20px; }
.mi-intel > details[open] { padding-bottom: 14px; max-height: 32vh; overflow-y: auto; }

/* Geniş kutu: müşteri zekâsı sağda ayrı sütun, mesajlar tam yükseklik (sohbet kutusunun genişliğine göre) */
.mi-host { container: inbox / inline-size; }
@container inbox (min-width: 1100px) {
    .mi-col[data-r="detail"]:has(> .mi-intel:not([style*="none"])) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 340px);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "head head" "msgs intel" "reply intel";
    }
    .mi-col[data-r="detail"] > .mi-head { grid-area: head; }
    .mi-col[data-r="detail"] > .mi-msgs { grid-area: msgs; }
    .mi-col[data-r="detail"] > .mi-reply { grid-area: reply; }
    .mi-col[data-r="detail"] > .mi-intel {
        grid-area: intel;
        min-height: 0;
        overflow-y: auto;
        border-bottom: 0;
        border-inline-start: 1px solid var(--line);
    }
    .mi-col[data-r="detail"] > .mi-intel > details[open] { max-height: none; overflow: visible; }
    .mi-col[data-r="detail"] > .mi-intel .mi-intel-grid { grid-template-columns: 1fr; gap: 10px; }
}
@container inbox (max-width: 1000px) {
    .mi-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .mi-actions { flex-wrap: wrap; }
}
@container inbox (min-width: 761px) and (max-width: 880px) {
    .mi-root { grid-template-columns: minmax(250px, 300px) 1fr; }
}
.mi-intel-title { margin: 12px 0 6px; font-size: .74rem; font-weight: 600; color: var(--text-3); }
.mi-intel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; }
.mi-intel-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mi-intel-k { font-size: .74rem; color: var(--text-3); }
.mi-intel-v { color: var(--text); overflow-wrap: anywhere; }
.mi-src { margin-inline-start: 5px; font-size: .7rem; color: var(--text-3); }
.mi-src-inferred { color: var(--warn-text); }

.mi-msgs {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 22px 20px;
    background: transparent;
    overscroll-behavior: contain;
}
.mi-msg { display: flex; flex-direction: column; max-width: 74%; margin-bottom: 12px; animation: msgIn .25s ease both; }
.mi-msg-in { align-items: flex-start; }
.mi-msg-out { align-items: flex-end; margin-inline-start: auto; }
.mi-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.mi-msg-in .mi-bubble { background: var(--bubble-in); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mi-msg-ai .mi-bubble { background: var(--bubble-ai); border: 1px solid var(--accent-line); border-bottom-right-radius: 4px; }
.mi-msg-team .mi-bubble { background: var(--bubble-team); color: #fff; border: 1px solid transparent; border-bottom-right-radius: 4px; }
.mi-meta { margin-top: 4px; font-size: .72rem; color: var(--text-3); }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mi-reply { padding: 14px 20px 16px; border-top: 1px solid var(--line); background: var(--card); }
.mi-reply textarea { min-height: 76px; max-height: 40vh; font-size: .92rem; }
.mi-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.mi-reply-row .mi-btn-primary { min-height: 38px; padding: 0 18px; }
.mi-note { font-size: .8rem; color: var(--text-3); line-height: 1.45; }
label.mi-note { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.mi-reply [data-r="window"] .mi-note { margin-bottom: 8px; }
.mi-warn { margin-bottom: 10px; }

/* ---------------------------------------------------------------- Fiyatlar (pricing.js) */
.mp-card { padding: 22px 24px; }
.mp-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1rem; }
.mp-muted { font-size: .8rem; color: var(--text-3); font-weight: 400; }
.mp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mp-row select, .mp-row input:not([type=checkbox]) {
    width: auto; min-width: 0; min-height: 38px;
    padding-top: 7px; padding-bottom: 7px; font-size: .86rem;
}
.mp-row select { flex: 0 0 152px; padding-inline-end: 32px; background-position: right 10px center; }
.mp-row input.mp-num { flex: 0 0 112px; }
.mp-row input.mp-cur { flex: 0 0 76px; text-transform: uppercase; }
.mp-row input.mp-noteinp { flex: 1 1 170px; }
.mp-row label.mp-muted { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; padding: 0 4px; }
.mp-row .mp-btn-icon { flex: none; }
.mp-label { flex: 0 0 110px; font-size: .84rem; font-weight: 500; color: var(--text); min-width: 0; }
.mp-regional { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mp-regional > .mp-muted { margin-bottom: 10px !important; }
.mp-row[data-r="regional"] {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card-2);
}
.mp-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.mp-display { font-size: .82rem; color: var(--ok-text); white-space: nowrap; }
.mp-btn-icon { width: 32px; padding: 0; }

/* ---------------------------------------------------------------- Yönetim (sistem) sayfaları */
.hours-row {
    display: grid;
    grid-template-columns: 120px 90px 140px 140px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .lbl { font-size: .9rem; font-weight: 500; }
.hours-row input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }

.tenant-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.tenant-head h1 { font-size: 1.7rem; }
.tenant-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: var(--text-3); font-size: .84rem; }
.tenant-meta code { font-size: .8rem; }
.tenant-meta .badge { font-size: .82rem; }
#hdrBadges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.list-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.list-actions select { width: auto; min-width: 210px; min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: .84rem; }

.pool-empty td { color: var(--text-3); font-size: .84rem; }

/* Kiracı düzenleme: sohbet kutusunun üstünde kiracı başlığı var; kutu ekrana sığsın */
#tenantInbox { --inbox-offset: 82px; }

/* Kart dışında duran listelerin başlığı: başlık + kısa açıklama solda, işlem sağda */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 36px 0 12px; }
.list-head:first-child { margin-top: 0; }
.list-head h2 { margin: 0; }
.list-head p { margin: 5px 0 0; max-width: 78ch; color: var(--text-3); font-size: .85rem; line-height: 1.5; }
.list-head > .btn { flex: none; }

.card-header select { width: auto; min-width: 230px; min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: .86rem; }

/* Girdi + düğme (kopyala) */
.input-group { display: flex; align-items: stretch; gap: 8px; }
.input-group > input, .input-group > textarea { flex: 1; min-width: 0; }
.input-group > .btn { flex: none; min-height: 42px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.label-row > label { font-size: .84rem; font-weight: 500; color: var(--text); }
textarea.snippet { min-height: 132px; font-size: .8rem; line-height: 1.55; white-space: pre; overflow-x: auto; }
input.mono, textarea.mono { font-family: var(--mono); letter-spacing: 0; }

/* Anahtar yenileme satırı */
.key-rotate { flex-wrap: wrap; }
.key-rotate label { font-size: .84rem; color: var(--text-2); }
.key-rotate input[type=number] { width: 96px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; text-align: center; }

/* ---------------------------------------------------------------- Demo sayfası */
.demo-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.demo-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}
.demo-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-avatar {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--btn-grad); color: #fff; font-weight: 600;
}
.demo-who h1 { font-size: .98rem; letter-spacing: -.01em; }
.demo-who p { margin: 2px 0 0; font-size: .78rem; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.demo-who p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.demo-tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.demo-tools label.sel { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-3); white-space: nowrap; }
.demo-tools select { width: auto; min-width: 210px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: .85rem; }

#chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px clamp(16px, 5vw, 64px);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.row {
    position: relative;
    max-width: min(76%, 680px);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .93rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    animation: messageIn .2s ease both;
}
@keyframes messageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.row.in { align-self: flex-end; background: var(--bubble-team); color: #fff; border-bottom-right-radius: 4px; }
.row.out { align-self: flex-start; background: var(--bubble-in); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.row .meta { display: block; margin-top: 5px; font-size: .7rem; text-align: end; opacity: .7; }
.typing {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 12px 15px;
    background: var(--bubble-in);
    border: 1px solid var(--line);
    border-radius: 14px; border-bottom-left-radius: 4px;
    min-width: 54px;
}
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: typingBounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.pill {
    align-self: center;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 2px;
    color: var(--text-3);
    font-size: .76rem; font-weight: 500;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.demo-db { margin: 0 clamp(16px, 5vw, 64px) 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); max-height: 42vh; overflow: auto; }
.demo-db > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: .86rem; font-weight: 600; }
.demo-db > summary .ic { width: 16px; height: 16px; color: var(--text-3); }
.demo-db > summary #dbCount { color: var(--text-3); font-weight: 400; font-size: .8rem; }
#dbContent { padding: 0 14px 14px; font-size: .82rem; }
#dbContent select { width: auto; min-width: 240px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: .84rem; }
#dbContent button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
#dbContent button:hover { background: var(--hover); }
.db-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.db-info { color: var(--text-3); }
.db-row { margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2); }
.db-row > summary { padding: 9px 12px; font-family: var(--mono); font-size: .78rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-row pre { margin: 0; padding: 0 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .76rem; color: var(--text); }

.composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px clamp(16px, 5vw, 64px) 18px;
    border-top: 1px solid var(--line);
    background: var(--card);
}
.composer input { flex: 1; min-width: 0; min-height: 48px; font-size: .95rem; }
.composer .send-btn { width: 48px; min-height: 48px; padding: 0; flex: none; }
.composer .send-btn .ic { width: 19px; height: 19px; }

.demo-bar .brand { flex: none; }
.demo-bar .demo-sep { height: 26px; }
.demo-tools .btn .ic { width: 15px; height: 15px; }

/* Boş sohbet: kimlik, kısa açıklama ve öneri düğmeleri */
.demo-empty { margin: auto; max-width: 460px; padding: 28px 8px; text-align: center; animation: panelIn .55s var(--ease) both; }
.demo-empty .demo-avatar { width: 56px; height: 56px; margin: 0 auto 16px; font-size: 1.25rem; }
.demo-empty h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.demo-empty p { margin: 8px 0 20px; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.demo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
    display: inline-flex; align-items: center;
    min-height: 38px; padding: 0 15px;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: var(--card); color: var(--text);
    font: inherit; font-size: .86rem;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.chip:hover { background: var(--hover); border-color: var(--accent-line); }
.chip:active { transform: translateY(1px); }

/* Sistem bildirimi (bağlantı / sunucu hatası) */
.row.err {
    align-self: center;
    max-width: min(92%, 560px);
    background: var(--bad-soft);
    color: var(--bad-text);
    border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    border-radius: var(--r);
    font-size: .86rem;
    text-align: center;
}

/* Yazma alanı + altında küçük gizlilik bağlantısı (ayrı bir alt bilgi yok) */
.composer-area { border-top: 1px solid var(--line); background: var(--card); padding-bottom: env(safe-area-inset-bottom, 0px); }
.composer-area .composer { border-top: 0; background: transparent; padding-bottom: 6px; }
.legal-link.legal-inline {
    position: static; display: block; width: max-content;
    margin: 0 clamp(16px, 5vw, 64px) 8px auto; padding: 2px 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: .72rem;
}
#dbContent .db-info { margin: 0; padding: 4px 0 8px; color: var(--text-3); }
#dbContent button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- Tablet ve telefon */
@media (max-width: 1100px) {
    .nav-user { display: none; }
    .nav-context b { max-width: 40vw; }
    .demo-bar .brand-word { display: none; }
    .demo-tools label.sel span { display: none; }
}
.demo-who > div { min-width: 0; }
.demo-who h1, .demo-who p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    .hours-row { grid-template-columns: 1fr 90px; }
    .hours-row .h-from, .hours-row .h-to { grid-column: auto; }
    .hours-row .h-note { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    body { font-size: 15px; }
    :root { --nav-h: 58px; }
    .nav-inner { padding: 0 16px; }
    .nav-inner { gap: 12px; }
    .brand { font-size: 15px; }
    .nav .brand-word { display: none; }
    .nav-sep { display: none; }
    .nav-context b { max-width: 46vw; font-size: .88rem; }
    .nav-actions { gap: 6px; }
    .nav-actions .btn-label { display: none; }
    .nav-actions .btn { width: 36px; min-height: 36px; padding: 0; }
    .page { padding: 20px 16px 28px; }
    h1 { font-size: 1.35rem; }
    .page-head, .header-row, .tenant-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .head-actions, .header-row .actions, .header-row > .toolbar { width: 100%; }
    .head-actions > .btn, .header-row .actions > .btn { flex: 1; }
    .card, .provider-card, .mp-card { padding: 18px 16px; }
    .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric { white-space: normal; }
    .metric b { white-space: nowrap; }
    .kv-line > .kv-k { flex-basis: 100%; }
    .stat { padding: 14px 15px; }
    .stat .value { font-size: 1.4rem; }
    .toolbar { flex-wrap: wrap; }
    .toolbar select { flex: 1; min-width: 0; }
    .toolbar .hint { width: 100%; margin: 0; text-align: start; }
    .form-row, .grid2 { grid-template-columns: 1fr; }
    input, select, textarea { font-size: 16px !important; } /* iOS: odakta yakınlaştırma olmasın */
    .form-actions, .modal-actions { position: sticky; bottom: 0; margin-inline: -16px; margin-bottom: -16px; padding: 14px 16px; background: var(--bg-2); }
    .form-actions .btn, .modal-actions .btn { flex: 1; }
    .provider-head { flex-direction: column; align-items: stretch; }
    .provider-actions { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .provider-actions::-webkit-scrollbar { display: none; }
    .copy-line { flex-wrap: wrap; }
    .copy-line code { flex-basis: 100%; }
    .legal-link { margin: 0 16px 18px auto; }
    .toast-stack { inset-inline: 16px; bottom: 16px; width: auto; align-items: stretch; }

    /* Pencereler alttan açılan sayfa gibi */
    .modal-bg, .modal { padding: 0; align-items: flex-end; }
    .modal-bg > .modal, .modal-content {
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        margin: 0;
        padding: 22px 16px 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 12px 12px 0 0;
        border-bottom: 0;
        animation: sheetIn .4s var(--ease) both;
    }
    /* Pencere düğmeleri alt kenara yapışık; altında içerik görünmez */
    .modal-content .modal-actions, .modal-bg > .modal .modal-actions {
        margin-bottom: 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .modal .kv, .kv-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .modal .kv .k { margin-top: 8px; }

    /* Sohbet kutusu: liste sayfanın akışında; açılan sohbet tam ekran (aşağıda .mi-thread) */
    .mi-host { container-type: normal; }
    .mi-root {
        display: block;
        height: auto;
        min-height: 0;
        margin-inline: -16px;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .mi-root > .mi-col:first-child { background: transparent; }
    .mi-root > .mi-col[data-r="detail"] { display: none; }
    .mi-list { flex: none; overflow: visible; }

    .mp-row select, .mp-row input.mp-num, .mp-row input.mp-cur { flex: 1 1 calc(50% - 4px); }
    .mp-row .mp-label, .mp-row input.mp-noteinp, .mp-row .mp-display { flex: 1 1 100%; }
    .mp-row label.mp-muted { margin-inline-end: auto; }

    .hours-row { grid-template-columns: 1fr auto; }
    .hours-row .h-from, .hours-row .h-to { grid-column: span 1; }

    .list-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 30px; }
    .list-head > .list-actions { width: 100%; }
    .list-actions select { flex: 1; min-width: 0; }
    .card-header { flex-wrap: wrap; }
    .card-header select { flex: 1 1 100%; width: 100%; min-width: 0; }

    .demo-bar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
    .demo-tools { width: 100%; margin: 0; }
    .demo-tools label.sel { flex: 1; }
    .demo-tools label.sel span { display: none; }
    .demo-tools select { flex: 1; min-width: 0; }
    #chat { padding: 18px 14px; }
    .row { max-width: 88%; }
    .composer { padding: 10px 12px 12px; }
    .composer-area .composer { padding-bottom: 4px; }
    .legal-link.legal-inline { margin: 0 14px 6px auto; }
    .demo-db { margin: 0 12px 8px; }
    .demo-bar .brand, .demo-bar .demo-sep { display: none; }
    .demo-tools .btn-label { display: none; }
    .demo-tools .btn { width: 36px; min-height: 36px; padding: 0; }
    .demo-empty { padding: 18px 4px; }
}

/* Tablet ve telefon: tablolar satır başına bir kart */
@media (max-width: 900px) {
    .table-wrap { background: transparent; border: 0; overflow: visible; }
    .table-wrap table, .card > table { display: block; }
    .table-wrap thead, .card > table thead { display: none; }
    .table-wrap tbody, .card > table tbody { display: grid; gap: 10px; }
    .table-wrap tr, .card > table tr {
        display: grid;
        grid-template-columns: 1fr;
        padding: 14px 16px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r);
    }
    .card > table tr { background: var(--card-2); }
    /* Hücre: solda sütun adı, sağda değer(ler); birden çok öğe sağda yan yana durur */
    .table-wrap td, .card > table td {
        display: flow-root;
        padding: 6px 0 !important;
        border: 0;
        text-align: end;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .table-wrap td[data-label]::before, .card > table td[data-label]::before {
        content: attr(data-label);
        float: left;
        max-width: 45%;
        margin-inline-end: 14px;
        color: var(--text-3);
        font-size: .8rem;
        text-align: start;
        line-height: 1.7;
    }
    .table-wrap td .badge + .badge, .card > table td .badge + .badge { margin-inline-start: 10px; }
    .table-wrap td:first-child, .card > table td:first-child {
        display: block;
        text-align: start;
        font-weight: 600;
        font-size: .95rem;
        padding-bottom: 8px !important;
    }
    .table-wrap td:first-child::before, .card > table td:first-child::before { display: none; }
    .table-wrap td.actions, .card > table td:last-child:has(> .btn), .table-wrap td:last-child:has(> .btn) {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
        padding-top: 12px !important;
        margin-top: 6px;
        border-top: 1px solid var(--line);
    }
    .table-wrap td.actions::before, .card > table td:last-child:has(> .btn)::before, .table-wrap td:last-child:has(> .btn)::before { display: none; }
    .table-wrap td.empty, .card > table td.empty { display: block; text-align: center; font-weight: 400; }
    .table-wrap td:empty, .card > table td:empty { display: none; }
    tbody tr:hover td { background: transparent; }
    td input, td select { max-width: 62%; }
}
/* Tablette kartlar iki sütun */
@media (min-width: 640px) and (max-width: 900px) {
    .table-wrap tbody, .card > table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .table-wrap tr:has(> td.empty), .card > table tr:has(> td.empty) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .stat { padding: 13px 13px; }
    .stat .value { font-size: 1.3rem; }
    .auth-card { padding: 28px 20px 22px; }
}

/* ================================================================ Yeni parçalar (sol menü sürümü) */

/* ---------------------------------------------------------------- Yükleniyor göstergesi (marka renkleri) */
:root { --spin: conic-gradient(from 90deg, rgba(155, 85, 238, 0) 0deg, #f8576b 110deg, #c353b4 220deg, #9b55ee 340deg, #9b55ee 360deg); }
html[data-theme="light"] { --spin: conic-gradient(from 90deg, rgba(126, 51, 204, 0) 0deg, #ba0f3a 110deg, #9d2e90 220deg, #7e33cc 340deg, #7e33cc 360deg); }
.spinner {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--spin);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.6px));
    animation: spin .85s linear infinite;
    vertical-align: middle;
}
.empty .spinner, .mi-empty .spinner, .mp-empty .spinner, .db-info .spinner, .code-block .spinner { display: block; margin: 0 auto 10px; }
.empty.is-loading, .mi-empty.is-loading, .mp-empty.is-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.empty.is-loading .spinner, .mi-empty.is-loading .spinner, .mp-empty.is-loading .spinner { margin-bottom: 10px; }
td.empty .spinner { display: block; margin: 0 auto 10px; }
.code-block .spinner { margin: 6px 0 10px; }
.hint .spinner, .card-sub .spinner, .status-line .spinner, p .spinner { width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -3px; display: inline-block; }
.db-info .spinner { display: inline-block; width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -3px; }
.code-block:has(> .spinner) { color: var(--text-3); font-family: var(--font); }

/* ---------------------------------------------------------------- Grafikler */
.chart-split { display: flex; align-items: center; gap: 30px; }
.chart-split > .legend { flex: 1; min-width: 0; }
.donut { position: relative; flex: none; width: 176px; aspect-ratio: 1; }
.donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dn-track { fill: none; stroke: var(--ch-track); stroke-width: 12; }
.dn-seg { fill: none; stroke-width: 12; transition: stroke-width .2s var(--ease), opacity .2s ease; }
.dn-seg:hover { stroke-width: 14.5; }
.donut:has(.dn-seg:hover) .dn-seg:not(:hover) { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
    .dn-seg { animation: dnIn 1s var(--ease) calc(var(--i, 0) * .07s) both; }
}
@keyframes dnIn { from { stroke-dasharray: 0 252; } }
.dn-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dn-center b { font-size: 1.75rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.dn-center span { margin-top: 2px; font-size: .76rem; color: var(--text-3); }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.legend li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.legend li:last-child { border-bottom: 0; }
.legend .sw { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.lg-label { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-val { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-val b { color: var(--text); font-weight: 600; }
.lg-val small { min-width: 38px; text-align: end; color: var(--text-3); font-size: .78rem; }
.legend-inline { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.legend-inline li { padding: 0; border: 0; gap: 7px; font-size: .82rem; }
.legend-inline .lg-label { flex: none; }
.legend-inline .lg-val small { min-width: 0; }

.bars { display: flex; flex-direction: column; gap: 16px; }
.bar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "lead label val" "lead track track";
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
}
.bar-row:not(:has(> .bar-lead)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; }
.bar-lead { grid-area: lead; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2); }
.bar-lead .logo { width: 21px; height: 21px; }
.bar-lead .ic { width: 18px; height: 18px; color: var(--c, var(--text-2)); }
.bar-label { grid-area: label; min-width: 0; font-size: .92rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label small { margin-inline-start: 8px; font-size: .78rem; font-weight: 400; color: var(--text-3); }
.bar-val { grid-area: val; display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val b { font-size: .95rem; font-weight: 600; color: var(--text); }
.bar-val small { min-width: 38px; text-align: end; font-size: .78rem; color: var(--text-3); }
.bar-track { grid-area: track; height: 8px; border-radius: 4px; background: var(--ch-track); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
    .bar-track i { animation: barGrow .85s var(--ease) calc(var(--i, 0) * .06s) both; }
}
@keyframes barGrow { from { transform: scaleX(0); } }
.bars-compact { gap: 12px; }
.bars-compact .bar-row { row-gap: 5px; }
.bars-compact .bar-label { font-size: .86rem; }
.bars-compact .bar-track { height: 6px; }

.stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; }
.stack i { display: block; min-width: 3px; height: 100%; }
.stack-thin { height: 8px; }
.stack-empty { background: var(--ch-track); }
@media (prefers-reduced-motion: no-preference) {
    .stack { animation: stackIn .8s var(--ease) both; }
}
@keyframes stackIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.chart-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4000;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--elev);
    color: var(--text);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
html[data-theme="light"] .chart-tip { background: #fff; }
.chart-tip.show { opacity: 1; }
.chart-empty { padding: 26px 0 18px; text-align: center; color: var(--text-3); font-size: .88rem; }
.chart-note { margin-top: 14px; font-size: .8rem; color: var(--text-3); }

/* İki eşit sütun: genel bakış, satış */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-2 > .card { margin-bottom: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-3 > .card { margin-bottom: 0; }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- Sekmeli seçici */
.seg {
    --c: var(--c-violet);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-x: auto;
    scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg [role="tab"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: .86rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.seg [role="tab"]:hover { color: var(--text); background: var(--hover); }
.seg [role="tab"][aria-selected="true"] { background: var(--elev); color: var(--text); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .8); }
html[data-theme="light"] .seg [role="tab"][aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 30, .1); }
.seg [role="tab"] .ic { width: 16px; height: 16px; color: var(--c); }
.seg-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--hover);
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
[aria-selected="true"] > .seg-count { background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--text); }
.seg-wide { display: flex; width: 100%; margin-bottom: 20px; }
.seg-wide [role="tab"] { flex: 1 0 auto; justify-content: center; min-height: 40px; }
.seg-in { animation: panelIn .35s var(--ease) both; }
[role="tabpanel"][hidden] { display: none !important; }

/* ---------------------------------------------------------------- Akordeon (tek kart açık) */
.acc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
details.acc {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .2s ease, box-shadow .3s ease;
    scroll-margin-top: calc(var(--top-h) + 12px);
}
details.acc[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
details.acc > summary.acc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px 16px 14px 18px;
    border-radius: var(--r);
    cursor: pointer;
    list-style: none;
    transition: background .2s ease;
}
details.acc > summary.acc-head::-webkit-details-marker { display: none; }
details.acc > summary.acc-head:hover { background: var(--hover); }
details.acc[open] > summary.acc-head { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.acc-title { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.acc-title > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.acc-title > small { font-size: .82rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 14px; }
.acc-side { display: flex; align-items: center; gap: 12px; flex: none; color: var(--text-3); font-size: .84rem; }
.acc-chevron {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-2);
    transition: transform .3s var(--ease), background .2s ease, border-color .2s ease;
}
.acc-chevron .ic { width: 16px; height: 16px; }
details.acc > summary.acc-head:hover .acc-chevron { border-color: var(--accent-line); }
details.acc[open] .acc-chevron { transform: rotate(180deg); }
.acc-body { padding: 18px 18px 20px; }
@media (prefers-reduced-motion: no-preference) {
    details.acc[open] > .acc-body { animation: accIn .35s var(--ease) both; }
}
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.acc-body > .provider-desc:first-child, .acc-body > :first-child { margin-top: 0; }
.acc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.acc-actions .hint { margin: 0 auto 0 0; }
details.acc .pv-logo { width: 44px; height: 44px; }
details.acc .acc-head > .tile { width: 40px; height: 40px; }
details.acc .acc-head > .tile .ic { width: 20px; height: 20px; }
.acc-body > .card-sub { margin: 0 0 16px; }
.acc-body > .form-actions { margin-top: 4px; }

/* ---------------------------------------------------------------- Liste araçları: arama + sayı */
.list-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 320px; max-width: 520px; }
.search > .ic { position: absolute; inset-inline-start: 13px; top: 50%; width: 17px; height: 17px; color: var(--text-3); transform: translateY(-50%); pointer-events: none; }
.search input { padding-inline-start: 40px; }
.list-count { color: var(--text-3); font-size: .84rem; white-space: nowrap; }

/* ---------------------------------------------------------------- Kiracı kartları */
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.t-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .2s ease, box-shadow .3s ease;
    animation: panelIn .45s var(--ease) both;
}
.t-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.t-card:has(.row-menu[open]) { z-index: 5; }
.t-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t-card-top .avatar-tile { width: 44px; height: 44px; font-size: .9rem; }
.t-id { flex: 1; min-width: 0; }
.t-name { margin: 1px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-name a { color: var(--text) !important; }
.t-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; font-size: .8rem; color: var(--text-3); }
.t-card-top .row-menu { flex: none; margin-inline-start: auto; }
.t-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.id-chip, .chip-soft {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--card-2);
    color: var(--text-2);
    font: inherit;
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
}
.id-chip { font-family: var(--mono); font-size: .76rem; cursor: copy; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.id-chip:hover { border-color: var(--accent-line); background: var(--hover); color: var(--text); }
.id-chip .ic, .chip-soft .ic { width: 14px; height: 14px; flex: none; }
.id-chip .ic { color: var(--c-violet); }
.chip-soft { border-color: var(--line); color: var(--text-3); }
.chip-soft span { overflow: hidden; text-overflow: ellipsis; }
.t-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card-2);
}
.t-facts > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; font-size: .74rem; color: var(--text-3); }
.t-facts > span + span { border-inline-start: 1px solid var(--line); }
.t-facts b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .88rem; font-weight: 600; }
.t-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: var(--r);
    background: var(--warn-soft);
    color: var(--warn-text) !important;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none !important;
}
.t-warn .ic { width: 16px; height: 16px; }
.t-warn:hover { border-color: var(--warn); }
.t-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.t-actions .btn { width: 100%; min-height: 38px; }
.grid-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--text-3); }
.grid-empty .tile { margin-bottom: 12px; }
.grid-empty p { margin: 0 0 14px; }

/* Küçük etiket (plan, demo, mod): 4 px köşe, hap değil */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--c, var(--c-slate)) 32%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--c, var(--c-slate)) 9%, transparent);
    color: var(--c, var(--c-slate));
    font-size: .74rem;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}
.tag .ic { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- Entegrasyon durumu: logolu kutucuklar */
.int-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.int-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .2s ease;
}
.int-tile:hover { border-color: var(--line-2); }
.int-tile .pv-logo { width: 40px; height: 40px; }
.int-tile .pv-logo img { width: 22px; height: 22px; }
.int-tile-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.int-tile-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.int-tile-text small { font-size: .78rem; line-height: 1.4; color: var(--text-3); }
.state-ring {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--line-2);
    border-radius: 50%;
    color: var(--text-3);
}
.state-ring .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.state-ring.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 8%, transparent); }
.state-ring.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.state-ring.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 60%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.state-ring.off { border-style: dashed; }
.tab-empty { padding: 26px 16px; text-align: center; color: var(--text-3); font-size: .88rem; border: 1px dashed var(--line-2); border-radius: var(--r); }

/* ---------------------------------------------------------------- Entegrasyonlar: kiracıya göre kutular */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; margin-bottom: 16px; }
.int-card { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); animation: panelIn .45s var(--ease) both; }
.int-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; min-width: 0; }
.int-card-head .ch-text { flex: 1; min-width: 0; }
.int-card-head h3 { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-card-head p { margin: 2px 0 0; font-size: .8rem; color: var(--text-3); }
.int-health { padding: 0 18px 14px; }
.int-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.int-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.int-row:last-child { border-bottom: 0; }
.int-row .pv-logo { width: 36px; height: 36px; }
.int-row .pv-logo img { width: 20px; height: 20px; }
.int-row-main { min-width: 0; }
.int-row-main b { display: block; font-size: .9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-row-main small { display: block; font-size: .76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-row .miss { grid-column: 2 / -1; font-size: .78rem; color: var(--warn-text); line-height: 1.45; }
.int-card-foot { margin-top: auto; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.int-card-foot .btn { width: 100%; }

/* Meta / WhatsApp hesapları */
.acct-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.acct { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); }
.acct .pv-logo { width: 38px; height: 38px; }
.acct .pv-logo img { width: 21px; height: 21px; }
.acct-text { flex: 1; min-width: 0; }
.acct-text b { display: block; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-text small { display: block; font-size: .76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Son başarısız olaylar */
.fail-list { display: flex; flex-direction: column; gap: 10px; }
.fail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-inline-start: 2px solid var(--bad);
    border-radius: var(--r);
}
.fail > .tile { grid-row: span 2; align-self: center; }
.fail-title { min-width: 0; font-size: .92rem; font-weight: 600; color: var(--text); }
.fail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; min-width: 0; font-size: .78rem; color: var(--text-3); }
.fail-err {
    grid-column: 2 / -1;
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: var(--r);
    background: var(--bad-soft);
    color: var(--bad-text);
    font-family: var(--mono);
    font-size: .76rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.fail > .btn { grid-column: 3; grid-row: 1 / span 2; }
.ok-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent); border-radius: var(--r); background: var(--ok-soft); color: var(--text-2); font-size: .88rem; }

/* ---------------------------------------------------------------- Satış zekâsı */
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; margin-bottom: 16px; }
.s-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.s-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s-card-head .ch-text { flex: 1; min-width: 0; }
.s-card-head h3 { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-card-head p { margin: 2px 0 0; font-size: .8rem; color: var(--text-3); }
.s-block-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .8rem; color: var(--text-3); }
.s-block-title b { color: var(--text); font-weight: 600; font-size: .86rem; }
.kv-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--text-2); }
.kv-mini b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- Aç / kapat düğmesi (onay kutusu görünümü) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--text); }
.switch input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: var(--elev);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.switch input[type=checkbox]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .25s var(--ease);
}
.switch input[type=checkbox]:checked { background: #9a63c2; border-color: #9a63c2; }
.switch.switch-ok input[type=checkbox]:checked { background: var(--ok); border-color: var(--ok); }
.switch input[type=checkbox]:checked::after { transform: translateX(16px); }
.switch input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- Çalışma saatleri */
.hours-row { grid-template-columns: 150px 118px 140px 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.hours-row .lbl { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.hours-row .lbl::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 15%, transparent); }
.hours-row.is-closed .lbl::before { background: var(--text-3); box-shadow: none; opacity: .6; }
.hours-row.is-closed .lbl { color: var(--text-2); }
.hours-row .h-sep { display: none; }

/* ---------------------------------------------------------------- Kiracı başlığı (kiracı düzenleme) */
.tenant-head { align-items: center; }
.tenant-head .head-title .avatar-tile { width: 52px; height: 52px; font-size: 1.05rem; }
.tenant-meta .id-chip, .tenant-meta .chip-soft { min-height: 26px; }

/* ---------------------------------------------------------------- Ayar listesi: etiket + açıklama solda, alan sağda */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; padding-top: 0; }
.set-row > .set-text b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.set-row > .set-text p { margin: 4px 0 0; font-size: .82rem; color: var(--text-3); line-height: 1.5; }

/* ---------------------------------------------------------------- Küçük yardımcılar */
.head-actions select { width: auto; min-width: 210px; min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: .88rem; }
.big-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; }
.big-num b { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.big-num span { color: var(--text-3); font-size: .86rem; }
.stat .value code.model-code, code.model-code { font-size: .86rem; padding: 2px 7px; overflow-wrap: anywhere; white-space: normal; }
.cell-id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cell-id > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cell-id .hint { margin: 1px 0 0; }
.int-card-empty { padding: 16px 18px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .86rem; }
.s-block-title > span { display: inline-flex; align-items: center; gap: 7px; }
.s-block-title .ic-sm { width: 15px; height: 15px; color: var(--text-3); }
.ok-empty.sm { padding: 10px 12px; font-size: .84rem; }
.ok-empty.sm .ic { width: 17px; height: 17px; }
.fail-meta .id-chip { min-height: 24px; padding: 0 8px; font-size: .72rem; }
.fail-meta .ic-sm { width: 14px; height: 14px; vertical-align: -2px; }
.fail-meta code { padding: 0; border: 0; background: none; color: var(--text-3); font-size: .76rem; }

/* ---------------------------------------------------------------- Akordeon içindeki parçalar */
details.acc.mp-card { padding: 0; margin: 0; }
details.acc.mp-card .acc-actions { margin-top: 16px; }
.mp-price { color: var(--ok-text); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.acc-meta .mp-muted { font-size: .8rem; }
.acc-actions.acc-actions-top { justify-content: flex-start; margin: 14px 0 4px; padding-top: 0; border-top: 0; }
.acc-body .provider-desc { margin-top: 0; }
.acc-body .toggle-row:first-child { margin-top: 0; }
.acc-body > .table-wrap { margin-bottom: 0; }
.acc-body > .key-rotate { margin-top: 4px; }
.btn .logo-sm, .btn .logo { width: 16px; height: 16px; }
.seg-count:empty { display: none; }
.list-head .head-title .tile { width: 36px; height: 36px; }
.list-head .head-title .tile .ic { width: 18px; height: 18px; }
.list-head .head-title h2 { font-size: 1.06rem; }
.hours-row .switch { font-size: .84rem; color: var(--text-2); }
.hours-row .h-state { min-width: 44px; }
.hours-row.is-closed .h-from, .hours-row.is-closed .h-to { opacity: .45; }
#tab-general > [data-tabs] > [role="tabpanel"] > .list-head:first-child { margin-top: 4px; }

.pv-acc .acc-body form { margin-top: 16px; }
.pv-acc .acc-body form > .switch { margin-bottom: 16px; }
.pv-acc .acc-body > .hint { margin-top: 8px; }
.pv-acc .acc-body .note { margin-top: 12px; }

.acc-group-title { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; }
.acc-group-title:first-child { margin-top: 0; }
.acc-group-title .tile { width: 32px; height: 32px; }
.acc-group-title .tile .ic { width: 16px; height: 16px; }
/* Yalnız yazı bloğu sütun olur; simge kutusu (.tile) kendi ortalamasını korur. */
.acc-group-title > span:not(.tile) { display: flex; flex-direction: column; min-width: 0; }
.acc-group-title b { font-size: .95rem; font-weight: 600; color: var(--text); }
.acc-group-title small { font-size: .8rem; color: var(--text-3); }
.stat .value.chart-value { margin-top: 14px; }
.stat .value.chart-value .legend-inline { margin-top: 10px; gap: 4px 12px; }
.stat .value.chart-value .legend-inline li { font-size: .78rem; }

/* Bilgi kutusunda "devamı" (uzun açıklamalar katlanır) */
details.more { margin-top: 6px; }
details.more > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--info-ic); font-weight: 600; font-size: .84rem; }
details.more > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform .25s var(--ease); }
details.more[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
details.more > ol { margin: 8px 0 2px; padding-inline-start: 20px; }
details.more > ol li { margin: 3px 0; }

.chart-empty.is-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chart-empty .spinner { margin: 0; }
.tenant-meta .muted .spinner { width: 14px; height: 14px; margin: 0 7px 0 0; vertical-align: -2px; }

.link-btn { padding: 0; border: 0; background: none; color: var(--accent-2); font: inherit; font-weight: 600; cursor: pointer; text-align: start; }
html[data-theme="light"] .link-btn { color: var(--accent); }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Açık temada renkli etiket yazıları biraz koyulaşır (okunurluk, WCAG AA) */
html[data-theme="light"] .tag { color: color-mix(in srgb, var(--c, var(--c-slate)) 76%, #000); }
/* Seçili sohbet satırında küçük etiketler soluk kalmasın */
.mi-item.active .mi-tags { color: var(--text-2); }

/* ---------------------------------------------------------------- Sol menüsüz sayfalar (giriş, demo) */
.auth-body, .demo-body { --sb-w: 0px; }

/* ---------------------------------------------------------------- Küçük dizüstü / yatay tablet: yalnız simgeli dar menü */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    :root { --sb-w: 78px; }
    .sidebar { padding: 14px 12px; }
    .sb-brand { justify-content: center; padding: 2px 0 14px; }
    .sb-brand .brand-word, .sb-context > div, .sb-label, .sb-count, .sb-back > span, .sb-link > span, .sb-link .ext,
    .sb-user > span:last-child, .sb-actions .btn > span { display: none; }
    .sb-context { justify-content: center; padding: 8px 0; }
    .sb-back { justify-content: center; padding: 8px 0; }
    .sb-nav .tab, .sb-nav .nav-btn { justify-content: center; padding: 6px 0; }
    .sb-nav .tab.active::before, .sb-nav .nav-btn.active::before { inset-inline-start: -12px; }
    .sb-ic { width: 34px; height: 34px; }
    .sb-link { justify-content: center; padding: 8px 0; }
    .sb-user { justify-content: center; padding: 6px 0; }
    .sb-actions { flex-direction: column; align-items: center; }
    .sb-actions .btn { width: 38px; min-height: 38px; padding: 0; flex: none; }
    .page { padding-inline: 24px; }
}

/* ---------------------------------------------------------------- Tablet ve telefon: üst çubuk + çekmece menü */
@media (max-width: 1023.98px) {
    :root { --sb-w: 0px; --top-h: 58px; }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 10px;
        height: var(--top-h);
        padding: 0 12px 0 10px;
        background: color-mix(in srgb, var(--bg) 84%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--line);
    }
    .topbar .brand { flex: none; }
    .topbar .brand .brand-word { display: none; }
    .topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .topbar-title b { font-size: .95rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-title small { font-size: .72rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
    .menu-btn .ic { width: 20px; height: 20px; }
    /* Uygulama gibi sade üst çubuk: simge düğmeleri çerçevesiz */
    .topbar .icon-btn { width: 40px; height: 40px; border-color: transparent; }
    .topbar .icon-btn .ic { width: 20px; height: 20px; }
    .topbar .top-back { margin-inline-start: -4px; color: var(--text) !important; }
    .topbar .top-back .ic { width: 22px; height: 22px; }

    /* Menü: alttaki çubuktan ("Menü" / "Hesap") alttan açılan sayfa olarak gelir */
    .sidebar {
        inset: auto 0 0 0;
        width: auto;
        max-height: min(86vh, 700px);
        max-height: min(86dvh, 700px);
        padding: 24px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-2);
        border: 0;
        border-top: 1px solid var(--line-2);
        border-radius: 12px 12px 0 0;
        transform: translateY(102%);
        visibility: hidden;
        transition: transform .34s var(--ease), visibility 0s linear .34s, box-shadow .34s ease;
    }
    html[data-theme="light"] .sidebar { background: var(--bg); }
    .sidebar::before {
        content: ""; position: absolute; top: 9px; left: 50%;
        width: 38px; height: 4px; margin-left: -19px;
        border-radius: 2px; background: var(--line-2);
    }
    html.sb-open .sidebar { transform: none; visibility: visible; box-shadow: 0 -18px 60px -24px rgba(0, 0, 0, .6); transition: transform .34s var(--ease), box-shadow .34s ease; }
    .sidebar.is-dragging { transition: none; }
    .sb-brand { padding: 0 0 12px; }
    .sb-back { display: none; } /* üst çubukta geri oku var */
    .sb-nav .in-bb { display: none; } /* alt çubukta zaten olan bölümler */
    .sb-nav .tab.active::before, .sb-nav .nav-btn.active::before { inset-inline-start: -16px; }
    .sb-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 940;
        background: var(--overlay);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }
    html.sb-open .sb-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease; }
    html.sb-open, html.sb-open body { overflow: hidden; }
    .sb-nav .tab, .sb-nav .nav-btn { min-height: 48px; }

    /* Alt menü: altta sabit çubuk (sık kullanılan bölümler + Menü) */
    body.app { --bottom-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .bottombar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 920;
        display: flex;
        align-items: stretch;
        height: var(--bottom-h);
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--line);
    }
    .bb-item {
        --c: var(--accent);
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 6px 2px 5px;
        border: 0;
        background: none;
        color: var(--text-3);
        font: inherit;
        font-size: .69rem;
        font-weight: 500;
        line-height: 1.1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease;
    }
    .bb-ic {
        display: grid;
        place-items: center;
        width: 46px;
        height: 28px;
        border-radius: var(--r);
        color: var(--text-2);
        transition: background .2s ease, color .2s ease, transform .2s var(--ease);
    }
    .bb-ic .ic { width: 22px; height: 22px; }
    .bb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bb-item:active .bb-ic { transform: scale(.92); }
    .bb-item.active { color: var(--text); font-weight: 600; }
    .bb-item.active .bb-ic { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
    html[data-theme="light"] .bb-item.active .bb-ic { background: color-mix(in srgb, var(--c) 14%, transparent); }
    .bb-item:focus-visible { outline: none; }
    .bb-item:focus-visible .bb-ic { outline: 2px solid var(--accent); outline-offset: 2px; }
    .app-main { padding-bottom: var(--bottom-h); }
    body.app .toast-stack { bottom: calc(var(--bottom-h) + 12px); }
    /* Sayfaya yapışık kaydet çubukları alt menünün üstünde durur */
    body.app .app-main .form-actions { bottom: var(--bottom-h); }

    .stats.stats-3, .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .bg-ribbons { width: 100%; height: clamp(220px, 46vw, 380px); opacity: .7; }
}
@media (min-width: 1024px) { .tab .tab-short { display: none; } }

@media (max-width: 860px) {
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .page { padding: 20px 16px 28px; }
    .head-title { gap: 12px; }
    .head-title .tile { width: 38px; height: 38px; }
    .head-title .tile .ic { width: 19px; height: 19px; }
    .card-head { flex-wrap: wrap; }
    .card-head .ch-tools { width: 100%; margin: 4px 0 0; }
    .card-head .ch-tools select { flex: 1; min-width: 0; }
    .chart-split { flex-direction: column; align-items: stretch; gap: 18px; }
    .donut { align-self: center; width: 168px; }
    .t-grid, .int-grid, .s-grid { grid-template-columns: minmax(0, 1fr); }
    .list-tools .search { max-width: none; }
    .acc-body { padding: 16px 14px 18px; }
    details.acc > summary.acc-head { padding: 12px 12px 12px 14px; gap: 12px; }
    .acc-actions { justify-content: stretch; }
    .acc-actions .btn { flex: 1 1 auto; }
    /* Telefonda alt sekmeler tek satır: yana kaydırılır, sağ kenardaki solma devamı olduğunu gösterir */
    .seg-wide { flex-wrap: nowrap; overflow-x: auto; padding-inline-end: 28px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
    .seg-wide.at-end { -webkit-mask-image: none; mask-image: none; }
    .seg-wide [role="tab"] { flex: 0 0 auto; padding: 0 12px; }
    .hours-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hours-row .h-from, .hours-row .h-to { grid-column: span 1; }
    .hours-row .h-note { grid-column: 1 / -1; }
    .set-row { grid-template-columns: 1fr; gap: 10px; }
    .fail { grid-template-columns: auto minmax(0, 1fr); }
    .fail > .btn { order: 10; grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 8px; }
    .fail-err { grid-column: 1 / -1; }
    .stat-top .tile { width: 28px; height: 28px; }
    .stat-top .tile .ic { width: 15px; height: 15px; }
    .stats .stat-wide { grid-column: 1 / -1; }
}

/* ================================================================ Müşteri gözüyle inceleme sonrası düzeltmeler */

/* Başlıktaki düğmeler sağ üstteki şeritlerin üstüne denk gelir: zemin renginde ince bir hale kenarı belirginleştirir. */
:root { --halo: rgba(0, 0, 0, .62); }
html[data-theme="light"] { --halo: rgba(255, 255, 255, .85); }
.page-head .head-actions .btn, .list-head > .btn { box-shadow: 0 0 0 3px var(--halo); }
.page-head .head-actions .btn-primary, .list-head > .btn-primary { box-shadow: 0 0 0 3px var(--halo), 0 10px 26px -16px rgba(154, 99, 194, .9); }

/* Açık temada okunmamış sayısı ve demo avatarı düz vurgu renginde (degradenin açık ucu beyaz yazıyı soldurmasın). */
html[data-theme="light"] .mi-unread, html[data-theme="light"] .demo-avatar { background: var(--accent); }

/* Silme düğmeleri sakin; kırmızı yalnız üzerine gelince. */
.btn-del { color: var(--text-3); }
.btn-del:hover { color: var(--bad-text); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 38%, transparent); }
/* Kart altındaki düğmeler: bağlantıyı kesen / kaldıran düğme solda, Kaydet sağda. */
.acc-actions > .btn-danger { margin-inline-end: auto; }

/* Nitelik: özet çubuğundaki camgöbeği tonlar; öncelik: renk yerine simge (kırmızı yalnız hatalar için). */
.badge.q-high::before { background: var(--ch-q3); }
.badge.q-medium::before { background: var(--ch-q2); }
.badge.q-low::before { background: var(--ch-q1); }
.badge.q-unknown::before { background: var(--ch-closed); }
.badge.q-high, .badge.q-medium { color: var(--text); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.prio .ic { width: 14px; height: 14px; flex: none; }
.prio-high { color: var(--text); font-weight: 600; }
.prio-high .ic { color: var(--ch-team); }
.prio-low { color: var(--text-3); }
td.cell-name, .cell-name b { white-space: nowrap; }
/* Fırsat tablosu: sığması için sıkı hücreler; kaynak etiketi aşamanın altına iner */
#salesRows td, table:has(#salesRows) th { padding-inline: 12px; }
#salesRows td.cell-next { min-width: 170px; }
#salesRows .src { display: block; margin: 2px 0 0; }

/* Entegrasyon sorun özeti (adına dokununca kart açılır) */
.int-alerts:empty { display: none; }
.int-alerts { display: grid; gap: 10px; margin-bottom: 14px; }
.int-alerts > .note { margin: 0; }
.int-alert .link-btn { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.int-alert .muted { font-size: inherit; color: var(--text-3); }
.int-issues { margin: 0 0 14px; }
.int-row .miss-bad { color: var(--bad-text); }
.secret-note details.more { margin-top: 8px; }
details.more > ul { margin: 8px 0 2px; padding-inline-start: 20px; }
details.more > ul li { margin: 4px 0; }
.mi-note > .ic-sm { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; color: var(--text-3); }
.acct-text small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Satış fırsatı ayrıntısı: başlık ve düğmeler sabit, içerik kendi içinde kayar; ayrıntılar katlanır. */
.modal-bg > .modal.sd {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    max-width: 860px; padding: 0; overflow: hidden;
    max-height: min(920px, calc(100vh - 64px));
    max-height: min(920px, calc(100dvh - 64px));
}
.sd .sd-head { flex: none; align-items: center; margin: 0; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.sd-title { min-width: 0; }
.sd-title h2 { font-size: 1.15rem; }
.sd-title .hint { margin-top: 4px; }
.sd-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 22px; }
.modal-bg > .modal.sd .sd-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); background: inherit; }
.sd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sd-fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); }
.sd-fact .k { font-size: .74rem; color: var(--text-3); }
.sd-fact .v { font-size: .9rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sd-fact .v .src { display: block; margin: 2px 0 0; font-weight: 400; }
.sd-note { margin: 12px 0 0; }
.sd-next { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: var(--r); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
.sd-next > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sd-next .k { font-size: .76rem; color: var(--text-3); }
.sd-next b { font-size: .95rem; color: var(--text); }
.sd-next .hint { margin: 2px 0 0; }
.sd-sec { margin-top: 10px; }
.sd-sec > summary { font-size: .88rem; }
.sd-count { margin-inline-start: 6px; padding: 1px 7px; border-radius: 3px; background: var(--hover); color: var(--text-2); font-size: .74rem; font-weight: 600; }
.sd-sec-body { padding-top: 2px; }
.sd-reasons { margin-top: 14px; gap: 10px 18px; }
.sd-reasons b { font-size: .84rem; }
.sd-convs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sd-convs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.sd-convs .pv-logo { width: 34px; height: 34px; }
.sd-convs .pv-logo img { width: 18px; height: 18px; }
.sd-conv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-conv-text b { font-size: .88rem; }
.sd-conv-text small { font-size: .76rem; color: var(--text-3); }
.sd-history li { margin: 6px 0; }
.sd-when { color: var(--text-3); font-variant-numeric: tabular-nums; margin-inline-end: 4px; }
.modal-bg > .modal.sd h3.sd-h { margin: 22px 0 10px; }

/* Yan yana kartlar kendi yüksekliğinde (kısa kartta boş alan kalmasın) */
.grid-2.grid-top { align-items: start; }

/* Telefon menüsünde kapatma düğmesi */
.sb-close { display: none; }

@media (max-width: 1023.98px) {
    .sb-close { display: inline-grid; margin-inline-start: auto; }
    .sb-brand { gap: 10px; }
    /* Sayfa başlığı görünürken üst çubukta aynı başlık tekrar yazılmaz; aşağı kaydırınca belirir. */
    .topbar-title { transition: opacity .2s ease, transform .2s ease; }
    html.head-visible .topbar-title { opacity: 0; transform: translateY(4px); pointer-events: none; }
}

/* Tablet ve küçük dizüstü: tablolar sığsın (satır düğmeleri yalnız simge, isteğe bağlı sütun gizli) */
@media (min-width: 761px) and (max-width: 1279.98px) {
    .row-actions .btn-text { display: none; }
    .row-actions .btn { width: 32px; padding: 0; }
    .col-opt { display: none; }
}

@media (max-width: 760px) {
    .sd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-bg > .modal.sd { max-height: 92vh; max-height: 92dvh; padding: 0; overflow: hidden; }
    .sd .sd-head { padding: 16px 16px 12px; align-items: flex-start; }
    .sd-head-actions .btn { padding: 0 10px; }
    .sd-body { padding: 14px 16px 18px; }
    .modal-bg > .modal.sd .sd-foot { position: static; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Sohbet başlığı: özet en fazla iki satır; dar kutuda ikincil düğmeler yalnız simge */
.mi-head .mi-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@container inbox (max-width: 560px) {
    .mi-actions .mi-btn-compact .mi-btn-label { display: none; }
    .mi-actions .mi-btn-compact { width: 36px; padding: 0; justify-content: center; }
}

/* ================================================================ Telefon düzeni: dengeli başlıklar ve kartlar */

/* Tablette alt menü ortada toplu; menü sayfası geniş ekranda ortalanır */
@media (max-width: 359.98px) {
    .bb-item { font-size: .63rem; }
    .bb-ic { width: 40px; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
    .bottombar { justify-content: center; }
    .bb-item { flex: 0 1 128px; }
    .sidebar { inset-inline: calc(50% - 290px); }
}

/* Tablo kartlarında yazı alanı / seçim: etiket üstte, alan tam genişlikte */
@media (max-width: 900px) {
    .table-wrap td:has(> .inline-input), .card > table td:has(> .inline-input) {
        display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: start;
    }
    .table-wrap td:has(> .inline-input)::before, .card > table td:has(> .inline-input)::before { float: none; max-width: none; margin: 0; line-height: 1.4; }
    td > .inline-input { width: 100%; max-width: none; }
}

@media (max-width: 760px) {
    /* Sayfa başlığı: simge, başlık ve işlem düğmeleri tek satırda (uygulama başlığı gibi); açıklama altta */
    .page-head:has(> .head-actions) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
    }
    .page-head:has(> .head-actions) > .head-title, .page-head:has(> .head-actions) > .head-title > div { display: contents; }
    .page-head:has(> .head-actions) > .head-title > .tile { grid-column: 1; grid-row: 1; }
    .page-head:has(> .head-actions) h1 { grid-column: 2; grid-row: 1; min-width: 0; }
    .page-head:has(> .head-actions) .lead { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; }
    .page-head > .head-actions { grid-column: 3; grid-row: 1; width: auto; gap: 8px; }
    .page-head > .head-actions > .btn { flex: none; width: 40px; min-height: 40px; padding: 0; justify-content: center; }
    .page-head > .head-actions .btn-text {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    /* Başlıkta filtre seçimi varsa: işlemler açıklamanın altında tam genişlikte */
    .page-head > .head-actions:has(select) { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
    .page-head > .head-actions:has(select) > select { flex: 1; min-width: 0; }

    /* Kiracı başlığı daha derli toplu */
    .tenant-head { margin-bottom: 14px; }
    .tenant-head .head-title { align-items: flex-start; }
    .tenant-head .head-title .avatar-tile { width: 44px; height: 44px; font-size: .95rem; }
    .tenant-head h1 { font-size: 1.3rem; line-height: 1.25; }
    .tenant-meta { gap: 6px 8px; margin-top: 6px; font-size: .8rem; }

    /* Fırsat kartı: açık itiraz ayrıntıda (kart kısa kalsın) */
    #salesRows td.col-opt { display: none; }
}

/* ================================================================ Sohbetler: büyük kanal logoları + telefonda tam ekran sohbet */

/* Kanal logosu: çerçevesiz, zeminsiz, net (tüm genişliklerde) */
.mi-item { grid-template-columns: 34px minmax(0, 1fr); }
.mi-ch { width: 34px; height: 34px; background: none; border: 0; border-radius: 0; }
.mi-ch img { width: 32px; height: 32px; }
.mi-head-logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.mi-head-logo img { width: 30px; height: 30px; object-fit: contain; }
.mi-head-text { min-width: 0; }
.mi-head-main { align-items: center; }
.mi-head-main:has(.mi-sub + .mi-sub) { align-items: flex-start; }

/* Filtre satırı: genişte eski ızgara düzeni (öğeler doğrudan ızgarada) */
.mi-frow { display: contents; }

/* Yalnız telefonda görünen parçalar */
.mi-handler, .mi-scrim, .mi-info, .mi-only-phone, .mi-short, .mi-sub-m { display: none; }

@media (max-width: 760px) {
    /* Liste: arama, yana kayan filtre çipleri, sayfa ile birlikte kayan sohbetler */
    .mi-filters { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
    .mi-frow {
        display: flex; gap: 8px;
        margin-inline: -16px; padding-inline: 16px 22px;
        overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    }
    .mi-frow > .mi-chip { order: -1; } /* hızlı filtre önde */
    .mi-frow::-webkit-scrollbar { display: none; }
    .mi-frow select { flex: none; width: auto; max-width: 64vw; min-height: 40px; padding-block: 6px; }
    .mi-filters .mi-chip {
        flex: none; gap: 8px;
        min-height: 40px; padding: 0 14px 0 12px;
        border: 1px solid var(--line-2); border-radius: var(--r);
        background: var(--card); color: var(--text-2); white-space: nowrap;
    }
    .mi-filters .mi-chip:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
    .mi-item { padding: 13px 16px; gap: 2px 12px; }
    .mi-item:active { background: var(--hover); }

    /* Açık sohbet: tüm ekranı kaplar (üst çubuk ve alt menü dahil), sağdan kayarak gelir */
    .mi-thread {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: var(--bg);
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        overscroll-behavior: contain;
    }
    .mi-thread.has-vv { inset: auto 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); }
    .mi-thread.is-in { transform: none; box-shadow: -18px 0 50px -30px rgba(0, 0, 0, .7); }
    html.mi-open, html.mi-open body { overflow: hidden; }
    html.mi-open .toast-stack { top: calc(env(safe-area-inset-top, 0px) + 66px); bottom: auto; }

    .mi-thread .mi-head {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 6px 8px 4px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
    }
    .mi-thread .mi-head-main { flex: 1; align-items: center; gap: 8px; }
    .mi-thread .mi-head-text { flex: 1; cursor: pointer; } /* ada dokununca sohbet bilgileri açılır */
    .mi-thread .mi-back { display: inline-grid; width: 40px; height: 40px; border-color: transparent; }
    .mi-thread .mi-back .ic { width: 22px; height: 22px; }
    .mi-thread .mi-head-logo { width: 32px; height: 32px; }
    .mi-thread .mi-head h3 { font-size: 1rem; line-height: 1.25; }
    .mi-thread .mi-head .mi-sub { display: none; } /* durum şeritte, ayrıntılar bilgi sayfasında */
    .mi-thread .mi-sub-m { display: block; margin-top: 1px; font-size: .76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mi-thread .mi-actions { flex-wrap: nowrap; gap: 0; overflow: visible; padding: 0; }
    .mi-thread .mi-actions > .mi-btn { display: none; }
    .mi-thread .mi-actions > .mi-only-phone { display: inline-grid; }
    .mi-thread .mi-actions > details.mi-only-phone { display: inline-block; }
    .mi-thread .mi-actions .icon-btn, .mi-thread .mi-menu > summary { width: 40px; height: 40px; border-color: transparent; background: none; }
    .mi-thread .mi-actions .icon-btn .ic, .mi-thread .mi-menu > summary .ic { width: 20px; height: 20px; }
    .mi-thread .mi-menu .row-menu-list { min-width: 200px; }

    /* Şerit: sohbeti kim cevaplıyor + tek dokunuşla devral / devret */
    .mi-thread .mi-handler {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 6px 12px 6px 16px;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        font-size: .82rem;
        color: var(--text-2);
    }
    .mi-handler-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
    .mi-handler-dot.s-ai { background: var(--ch-ai); }
    .mi-handler-dot.s-team { background: var(--ch-team); }
    .mi-handler-dot.s-open { background: var(--ch-open); }
    .mi-handler-dot.s-closed { background: var(--ch-closed); }
    .mi-handler-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mi-thread .mi-handler .mi-btn { flex: none; min-height: 34px; padding: 0 12px; gap: 6px; font-size: .82rem; }
    .mi-thread .mi-handler .mi-btn .ic { width: 15px; height: 15px; }

    .mi-thread .mi-intel { display: none !important; } /* telefonda bilgi sayfasında (ⓘ) */
    .mi-thread .mi-msgs { flex: 1 1 auto; min-height: 0; padding: 14px 12px 8px; }
    .mi-thread .mi-msg { max-width: 84%; margin-bottom: 10px; }
    .mi-thread .mi-bubble { font-size: .94rem; }

    /* Yazma alanı: tek satırdan başlar, yazdıkça büyür; gönder düğmesi yanında */
    .mi-thread .mi-reply {
        flex: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 6px 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--bg);
        border-top: 1px solid var(--line);
    }
    .mi-thread .mi-reply > [data-r="window"] { grid-column: 1 / -1; }
    .mi-thread .mi-reply > [data-r="window"]:empty { display: none; }
    .mi-thread .mi-reply [data-r="window"] .mi-note { margin: 0 2px; font-size: .74rem; }
    .mi-thread .mi-reply [data-r="window"] .mi-warn { margin: 0; padding: 9px 11px 9px 36px; font-size: .78rem; line-height: 1.5; }
    .mi-thread .mi-reply [data-r="window"] .mi-warn::before { inset-inline-start: 11px; top: 10px; width: 16px; height: 16px; }
    .mi-thread .mi-reply textarea {
        grid-column: 1; grid-row: 2;
        min-height: 44px; height: 44px; max-height: 140px;
        padding: 10px 12px;
        line-height: 1.4;
        resize: none;
    }
    .mi-thread .mi-reply-row { display: contents; }
    .mi-thread .mi-reply .mi-takeover { grid-column: 1 / -1; grid-row: 3; gap: 8px; padding: 0 2px; font-size: .76rem; }
    .mi-thread .mi-reply .mi-takeover input { width: 16px; height: 16px; }
    .mi-thread .mi-long { display: none; }
    .mi-thread .mi-short { display: inline; }
    .mi-thread[data-status="team"] .mi-reply .mi-takeover { display: none; }
    .mi-thread .mi-reply [data-r="send"] {
        grid-column: 2; grid-row: 2;
        width: 44px; height: 44px; min-height: 44px;
        padding: 0;
        justify-content: center;
    }
    .mi-thread .mi-reply [data-r="send"] .mi-btn-label { display: none; }
    .mi-thread .mi-reply [data-r="send"] .ic { width: 19px; height: 19px; margin: 0; }

    /* Sohbet bilgileri (ⓘ): alttan açılan sayfa */
    .mi-thread .mi-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 30;
        background: var(--overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }
    .mi-thread.info-open .mi-scrim { opacity: 1; visibility: visible; transition: opacity .25s ease; }
    .mi-thread .mi-info {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: auto 0 0 0;
        z-index: 31;
        max-height: 82%;
        background: var(--bg-2);
        border-top: 1px solid var(--line-2);
        border-radius: 12px 12px 0 0;
        transform: translateY(102%);
        visibility: hidden;
        transition: transform .3s var(--ease), visibility 0s linear .3s;
    }
    html[data-theme="light"] .mi-thread .mi-info { background: var(--bg); }
    .mi-thread.info-open .mi-info { transform: none; visibility: visible; transition: transform .3s var(--ease); box-shadow: 0 -18px 60px -24px rgba(0, 0, 0, .6); }
    .mi-info-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); }
    .mi-info-head b { font-size: .98rem; font-weight: 600; color: var(--text); }
    .mi-info-head .icon-btn { width: 40px; height: 40px; border-color: transparent; }
    .mi-info-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: .86rem; }
    .mi-info-body .mi-intel-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .mi-info-body .mi-intel-title { margin: 16px 0 8px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .mi-thread, .mi-thread .mi-info { transition: none; }
}

/* Tema değişirken renk geçişleri kapalı (tek karede değişir) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Randevu talebi (süresi tanımlı olmayan hizmet): kesin randevu değil, ekip teyit eder. */
.mi-request { border: 1px solid var(--ch-team, var(--border)); border-inline-start-width: 3px; border-radius: 8px;
    padding: 10px 12px; margin: 0 0 12px; background: var(--bg-2); }
.mi-request-title { font-weight: 600; margin-bottom: 6px; }
.mi-request .mi-note { margin-top: 8px; }
.mi-tag.req { background: var(--bg-2); border: 1px solid var(--ch-team, var(--border)); }

/* ---------------------------------------------------------------- Bildirim zili + Randevu talepleri (panel-ops.js) */
.nb-btn { position: relative; }
.nb-count {
    position: absolute; top: -4px; inset-inline-end: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--bad); color: #fff;
    font-size: .68rem; font-weight: 600; line-height: 18px; text-align: center;
}
.nb-count[hidden] { display: none; }
.np {
    display: none; position: fixed; z-index: 1600;
    top: 16px; inset-inline-start: calc(var(--sb-w, 260px) + 16px);
    width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px);
    flex-direction: column;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.np.open { display: flex; }
.np-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.np-head b { margin-inline-end: auto; }
.np-list { overflow-y: auto; padding: 6px; }
.np-item {
    display: flex; flex-direction: column; gap: 3px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: calc(var(--r) - 4px);
    background: transparent; color: var(--text-2); text-align: start; cursor: pointer; font: inherit;
}
.np-item:hover { background: var(--hover); }
.np-item.unread { color: var(--text); font-weight: 600; }
.np-item.unread .np-text::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px;
    border-radius: 50%; background: var(--accent); vertical-align: middle;
}
.np-item small { color: var(--text-3); font-weight: 400; }
.rq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rq-list > .empty { grid-column: 1 / -1; }
.rq-card {
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    padding: 16px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--card); color: var(--text); text-align: start; cursor: pointer; font: inherit;
}
.rq-card:hover { border-color: var(--accent-line); background: var(--hover); }
.rq-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rq-top b { overflow-wrap: anywhere; }
.rq-when { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.rq-meta { color: var(--text-3); font-size: .85rem; overflow-wrap: anywhere; }
.rq-modal { max-width: 720px; }
.rq-kv { margin-bottom: 18px; font-size: .9rem; }
.rq-kv .kv-line > .kv-k { flex-basis: 150px; }
.rq-actions { flex-wrap: wrap; justify-content: flex-start; margin-bottom: 12px; }
#reqForm { margin-bottom: 8px; }
#reqForm .switch { margin: 4px 0 10px; }
.rq-delivery, .rq-history { margin: 0 0 8px; padding-inline-start: 18px; color: var(--text-2); font-size: .88rem; }
.rq-delivery li, .rq-history li { margin: 4px 0; }
@media (max-width: 1023.98px) {
    .np { top: calc(var(--top-h, 58px) + 8px); inset-inline-start: auto; inset-inline-end: 12px; }
}
@media (max-width: 900px) {
    .np {
        top: auto; bottom: 0; inset-inline: 0; width: 100%; max-height: 80vh;
        border-radius: var(--r) var(--r) 0 0; padding-bottom: env(safe-area-inset-bottom);
    }
    .rq-list { grid-template-columns: 1fr; }
    .modal-bg > .modal.rq-modal { padding: 20px 16px; }
}