/* ============================================================
   visual-upgrade.css — Modelist "Showroom" Görsel Katmanı
   ============================================================
   index-g_JM6Duc.css ve managers-ui.css'ten SONRA yüklenir.
   İçerik:
     1. Tipografi (Inter + Space Grotesk, tabular-nums)
     2. Dark "showroom" tema token override'ları + ambiyans
     3. Renk disiplini: stat kartları, metrik kartları
     4. LED glow kimliği (daire/kat/blok toggle'ları)
     5. Skeleton loader
     6. Pulse / canlılık animasyonları
     7. Donut chart animasyonu
     8. (kaldırıldı)
     9. Sparkline + akordiyon rozetleri
    10. İkon sistemi (.vx-icon) + mikro-etkileşimler
   Tüm yeni sınıflar "vx-" öneklidir (visual experience).
   ============================================================ */

/* ── 1. TİPOGRAFİ ─────────────────────────────────────────── */
/* Self-host değişken fontlar — CSP (font-src 'self') uyumlu,
   showroom'da internet kesilse bile çalışır. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body,
.admin-panel,
.mobile-menu-panel {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

h1, h2, h3, h4,
.admin-title h1,
.section-header h2,
.login-title-anim,
.donut-total {
    font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}

/* Metrik değerleri: sayılar değişirken zıplamasın */
.stat-value,
.metric-value,
.donut-total,
.legend-value,
.legend-percent,
#cpuValue,
#serverUptime,
#serverTime,
.block-summary-stats,
.vx-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── 2. DARK "SHOWROOM" TEMASI ────────────────────────────── */
/* Mevcut dark token'ları saf siyahtan derin laciverte taşır —
   login ekranının atmosferiyle bütünleşir. */

.dark-theme,
[data-theme=dark] {
    --ios-bg-primary: #0B0F1E;
    --ios-bg-secondary: #131A30;
    --ios-bg-tertiary: #1C2440;
    --surface-color: #131A30;
    --primary-color: #5B8CFF;
    --secondary-color: #8B5CF6;
    --success-color: #34C759;
    --warning-color: #FF9F0A;
    --danger-color: #FF453A;
    --border-color: rgba(148, 163, 216, .14);
    --ios-separator: rgba(148, 163, 216, .14);
    --text-secondary: #98A2C3;
    --text-tertiary: #5D688A;
    --glass-bg: rgba(19, 26, 48, .72);
    --glass-border: rgba(148, 163, 216, .16);
    --menu-bg: rgba(11, 15, 30, .92);
    --menu-card-bg: rgba(148, 163, 216, .07);
    --menu-card-hover: rgba(148, 163, 216, .13);
    --menu-card-border: rgba(148, 163, 216, .1);
    --menu-header-bg: rgba(11, 15, 30, .85);
    --menu-section-title: rgba(152, 162, 195, .75);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 34px rgba(0, 0, 0, .5);

    /* vx palet */
    --vx-accent: #5B8CFF;
    --vx-accent-2: #8B5CF6;
    --vx-led: #FFB84D;          /* yanan pencere / LED amber */
    --vx-green: #34C759;        /* satışta / çevrimiçi */
    --vx-red: #FF453A;          /* satılan / çevrimdışı */
    --vx-amber: #FF9F0A;        /* opsiyon / uyarı */
    --vx-dim: #2A3252;          /* kapalı pencere */
}

/* Açık temada da vx paleti tanımlı olsun */
:root {
    --vx-accent: #5B8CFF;
    --vx-accent-2: #8B5CF6;
    --vx-led: #FFB84D;
    --vx-green: #34C759;
    --vx-red: #FF453A;
    --vx-amber: #FF9500;
    --vx-dim: #C7CCDD;
}

/* ── 2b. EKSİK TOKEN KÖPRÜLERİ ────────────────────────────── */
/* JS bundle'ları (ör. satış durumu onay penceresi) --bg-primary /
   --bg-secondary / --bg-tertiary / --info-color / --ios-text-secondary
   değişkenlerini kullanıyor ama bunlar hiçbir CSS'te tanımlı değildi.
   Fallback'leri hep AÇIK renk (#fff, #f5f5f5) olduğundan koyu modda
   "beyaz zemin + beyaz yazı" oluşuyordu. Burada iki tema için de
   tanımlanarak sorun kökten çözülür. */
:root {
    --bg-primary: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;
    --info-color: #007AFF;
    --ios-text-secondary: #8E8E93;
}

.dark-theme,
[data-theme=dark] {
    --bg-primary: #0B0F1E;
    --bg-secondary: #131A30;
    --bg-tertiary: #1C2440;
    --info-color: #5B8CFF;
    --ios-text-secondary: #98A2C3;
}

/* Ambiyans: login'deki gibi köşelerden yayılan renk sisleri */
.dark-theme body,
[data-theme=dark] body {
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(91, 140, 255, .10), transparent 60%),
        radial-gradient(900px 550px at -10% 108%, rgba(139, 92, 246, .09), transparent 60%),
        var(--ios-bg-primary);
    background-attachment: fixed;
}

.dark-theme .admin-panel,
[data-theme=dark] .admin-panel {
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(91, 140, 255, .08), transparent 60%),
        radial-gradient(900px 550px at -10% 108%, rgba(139, 92, 246, .07), transparent 60%),
        var(--ios-bg-primary);
}

/* Admin header: opak gradient yerine koyu cam + alt çizgi accent */
.dark-theme .admin-header,
[data-theme=dark] .admin-header {
    background: rgba(15, 21, 40, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(91, 140, 255, .25);
    box-shadow: 0 1px 0 rgba(91, 140, 255, .12), 0 8px 28px rgba(0, 0, 0, .35);
}

/* Koyu tema scrollbar */
.dark-theme ::-webkit-scrollbar,
[data-theme=dark] ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark-theme ::-webkit-scrollbar-thumb,
[data-theme=dark] ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 216, .22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.dark-theme ::-webkit-scrollbar-thumb:hover,
[data-theme=dark] ::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 216, .38); }
.dark-theme ::-webkit-scrollbar-track,
[data-theme=dark] ::-webkit-scrollbar-track { background: transparent; }

/* ── 3. RENK DİSİPLİNİ: STAT & METRİK KARTLARI ────────────── */
/* Dashboard'daki 4 farklı gökkuşağı gradient'i tek koyu cam
   yüzeye indirger; renk yalnızca accent şeridi ve değerde. */

.dashboard-stats .stat-card {
    background: var(--glass-bg, rgba(19, 26, 48, .72)) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border, rgba(148, 163, 216, .16)) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25) !important;
    color: var(--text-primary, #fff) !important;
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease;
}

.dashboard-stats .stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--vx-card-accent, var(--vx-accent));
    box-shadow: 0 0 12px var(--vx-card-accent, var(--vx-accent));
}

.dashboard-stats .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
}

/* Anlam taşıyan accent'ler: Proje=accent, Çevrimiçi=yeşil,
   Daire=mor, LED=amber */
.dashboard-stats .stat-card:nth-child(1) { --vx-card-accent: var(--vx-accent); }
.dashboard-stats .stat-card:nth-child(2) { --vx-card-accent: var(--vx-green); }
.dashboard-stats .stat-card:nth-child(3) { --vx-card-accent: var(--vx-accent-2); }
.dashboard-stats .stat-card:nth-child(4) { --vx-card-accent: var(--vx-led); }

.dashboard-stats .stat-card .stat-value {
    color: var(--vx-card-accent, var(--vx-accent)) !important;
    text-shadow: 0 0 22px color-mix(in srgb, var(--vx-card-accent, var(--vx-accent)) 45%, transparent);
}

.dashboard-stats .stat-card .stat-label {
    color: var(--text-secondary, #98A2C3) !important;
    opacity: 1 !important;
}

.dashboard-stats .stat-card .vx-icon {
    color: var(--vx-card-accent, var(--vx-accent));
    opacity: .85;
}

/* Kullanıcı paneli finansal metrik kartları */
.metric-card {
    border: 1px solid var(--glass-border, rgba(148, 163, 216, .16));
    border-radius: 14px;
}
.metric-card .metric-value { font-weight: 700; }
.metric-sales    .metric-value { color: var(--vx-green); }
.metric-option   .metric-value { color: var(--vx-amber); }
.metric-available .metric-value { color: var(--vx-accent); }

.metric-bar-fill {
    background: linear-gradient(90deg, var(--vx-green), color-mix(in srgb, var(--vx-green) 60%, #fff)) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--vx-green) 55%, transparent);
    position: relative;
    overflow: hidden;
}
.metric-bar-fill.option-fill {
    background: linear-gradient(90deg, var(--vx-amber), color-mix(in srgb, var(--vx-amber) 60%, #fff)) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--vx-amber) 55%, transparent);
}
.metric-bar-fill.available-fill {
    background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent-2)) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--vx-accent) 55%, transparent);
}

/* Bar üzerinde süpürme parıltısı */
.metric-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: vx-sweep 2.8s ease-in-out 1s infinite;
}

@keyframes vx-sweep {
    0%       { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

/* ── 4. DURUM RENKLERİ: TEK KAYNAK + LED GLOW ─────────────── */
/* Tek gerçek kaynak: projenin LED renk senaryoları
   (data.ledColorScenarios → getLEDColor ile fiziksel makete giden
   renkler). visual-upgrade.js proje yüklenince bu token'ları
   günceller; buton, donut, legend, rozet ve bina silueti hepsi
   buradan okur. Varsayılanlar LED varsayılanlarıyla eş:
   satışta=sıcak beyaz, satılan=kırmızı, opsiyon=yeşil. */

:root {
    --st-normal: #FFE9C2;        /* satışta (LED: beyaz)   */
    --st-normal-text: #4A3410;
    --st-normal-ink: #E8A33D;    /* metin/rozet için okunur ton */
    --st-sold: #FF453A;          /* satılan (LED: kırmızı) */
    --st-sold-text: #FFFFFF;
    --st-sold-ink: #FF453A;
    --st-optional: #30D158;      /* opsiyon (LED: yeşil)   */
    --st-optional-text: #06331A;
    --st-optional-ink: #2AAE4C;
    --st-off: #8E93A8;           /* kapalı: her zaman nötr gri */
    --st-off-text: #FFFFFF;
    --st-off-ink: #8E93A8;
}

.dark-theme,
[data-theme=dark] {
    --st-normal-ink: #FFD9A0;
    --st-optional-ink: #34D95E;
}

/* Daire butonları: arka plan + metin tek kaynaktan */
.apartment-btn.apartment-normal,
[data-apartment-id].apartment-normal {
    --st-cur: var(--st-normal);
    background: var(--st-normal) !important;
    color: var(--st-normal-text) !important;
}
.apartment-btn.apartment-sold,
[data-apartment-id].apartment-sold {
    --st-cur: var(--st-sold);
    background: var(--st-sold) !important;
    color: var(--st-sold-text) !important;
}
.apartment-btn.apartment-optional,
[data-apartment-id].apartment-optional {
    --st-cur: var(--st-optional);
    background: var(--st-optional) !important;
    color: var(--st-optional-text) !important;
}
.apartment-btn.apartment-off,
[data-apartment-id].apartment-off {
    --st-cur: var(--st-off);
    background: var(--st-off) !important;
    color: var(--st-off-text) !important;
}

/* Donut chart + legend + rozetler aynı kaynaktan */
.donut-segment.donut-normal   { stroke: var(--st-normal) !important; }
.donut-segment.donut-sold     { stroke: var(--st-sold) !important; }
.donut-segment.donut-optional { stroke: var(--st-optional) !important; }
.donut-segment.donut-off      { stroke: var(--st-off) !important; }

.legend-item.legend-normal .legend-color   { background: var(--st-normal) !important; }
.legend-item.legend-sold .legend-color     { background: var(--st-sold) !important; }
.legend-item.legend-optional .legend-color { background: var(--st-optional) !important; }
.legend-item.legend-off .legend-color      { background: var(--st-off) !important; }

.status-apartment-badge.badge-normal {
    background: color-mix(in srgb, var(--st-normal) 18%, transparent) !important;
    color: var(--st-normal-ink) !important;
}
.status-apartment-badge.badge-sold {
    background: color-mix(in srgb, var(--st-sold) 16%, transparent) !important;
    color: var(--st-sold-ink) !important;
}
.status-apartment-badge.badge-optional {
    background: color-mix(in srgb, var(--st-optional) 16%, transparent) !important;
    color: var(--st-optional-ink) !important;
}
.status-apartment-badge.badge-off {
    background: color-mix(in srgb, var(--st-off) 16%, transparent) !important;
    color: var(--st-off-ink) !important;
}

/* Blok özeti (inline renkli span'lar) ve onay penceresi önizlemesi:
   eski hard-coded renkleri attribute üzerinden token'a yönlendir */
.blocks-summary [style*="34C759"],
.status-confirm-content [style*="f39c12"] { color: var(--st-normal-ink) !important; }
.blocks-summary [style*="FF3B30"],
.status-confirm-content [style*="e74c3c"] { color: var(--st-sold-ink) !important; }
.blocks-summary [style*="FF9500"],
.status-confirm-content [style*="2ecc71"] { color: var(--st-optional-ink) !important; }
.status-confirm-content [style*="95a5a6"] { color: var(--st-off-ink) !important; }

/* ── 4a. LED GLOW (sadeleştirilmiş) ───────────────────────── */
/* Eski durum: yanan her butonda 6-7 katman, 250-350px'e yayılan
   box-shadow + sonsuz pulse + drop-shadow filtresi. Yoğun katlarda
   halolar birbirine karışıyor ve tablette GPU'yu yoruyordu.
   Yeni: 2 katman, ≤28px, animasyon yalnızca yakma anında (ignite)
   ve durum değişiminde (.status-changed — mevcut kod basıyor). */

[data-apartment-id] {
    transition: background .3s ease, box-shadow .35s ease,
                color .3s ease, border-color .3s ease,
                transform .15s ease;
}

[data-apartment-id]:active { transform: scale(.94); }

/* Not: eski CSS'te ".dark-theme .apartment-normal.light-on" gibi
   yüksek specificity'li !important kurallar var; onları yenmek için
   selector'lar bilinçli olarak güçlendirildi. */
[data-apartment-id].apartment-btn.light-on.light-on,
.apartment-btn.light-on.light-on,
[data-apartment-id].light-on {
    box-shadow:
        0 0 10px color-mix(in srgb, var(--st-cur, var(--vx-led)) 65%, transparent),
        0 0 28px color-mix(in srgb, var(--st-cur, var(--vx-led)) 30%, transparent),
        inset 0 1px rgba(255, 255, 255, .28) !important;
    filter: brightness(1.1) saturate(1.1) !important;
    animation: vx-ignite .45s ease-out !important;
}

[data-apartment-id].apartment-btn.light-on.light-on:hover,
.apartment-btn.light-on.light-on:hover,
[data-apartment-id].light-on:hover {
    box-shadow:
        0 0 14px color-mix(in srgb, var(--st-cur, var(--vx-led)) 75%, transparent),
        0 0 36px color-mix(in srgb, var(--st-cur, var(--vx-led)) 38%, transparent),
        inset 0 1px rgba(255, 255, 255, .32) !important;
    filter: brightness(1.16) saturate(1.15) !important;
}

[data-apartment-id].apartment-btn.light-off.light-off,
.apartment-btn.light-off.light-off,
[data-apartment-id].light-off {
    box-shadow: none !important;
    filter: saturate(.5) brightness(.72) !important;
    animation: none !important;
}

/* Durum değişince kısa vurgu (mevcut kod 500ms .status-changed basar) */
[data-apartment-id].status-changed {
    animation: vx-status-flash .5s ease-out !important;
}

@keyframes vx-ignite {
    0%   { filter: brightness(1); }
    35%  { filter: brightness(1.5) saturate(1.2); }
    100% { filter: brightness(1.1) saturate(1.1); }
}

@keyframes vx-status-flash {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Hızlı kontrol / grup / daire tipi butonları basılınca kısa parlar */
.quick-controls-grid button:active {
    transform: scale(.95);
    transition: transform .12s ease;
}

/* ── 4b. SATIŞ DURUMU ONAY PENCERESİ ──────────────────────── */
/* Inline stiller kullandığı için koyu temada !important ile
   netleştirilir; onay butonu accent gradient'e hizalanır. */

.dark-theme .status-confirm-content,
[data-theme=dark] .status-confirm-content {
    background: var(--ios-bg-secondary) !important;
    border: 1px solid var(--glass-border, rgba(148, 163, 216, .16));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important;
}

.dark-theme .status-confirm-content h3,
[data-theme=dark] .status-confirm-content h3 {
    color: var(--text-primary) !important;
}

.dark-theme .status-cancel-btn,
[data-theme=dark] .status-cancel-btn {
    background: var(--ios-bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-theme .status-cancel-btn:hover,
[data-theme=dark] .status-cancel-btn:hover {
    background: rgba(148, 163, 216, .18) !important;
}

.status-confirm-btn {
    background: linear-gradient(135deg, var(--vx-accent), var(--vx-accent-2)) !important;
    box-shadow: 0 4px 15px rgba(91, 140, 255, .4) !important;
}

.status-confirm-btn:hover {
    box-shadow: 0 6px 20px rgba(91, 140, 255, .5) !important;
}

/* ── 5. SKELETON LOADER ───────────────────────────────────── */
/* JS, "Yükleniyor..." metinli öğelere .vx-skeleton basar. */

.vx-skeleton {
    position: relative;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    border-radius: 8px;
    overflow: hidden;
    min-height: 14px;
    background: rgba(148, 163, 216, .10) !important;
}

.vx-skeleton * { visibility: hidden; }

.vx-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(148, 163, 216, .16) 50%,
        transparent 80%);
    transform: translateX(-100%);
    animation: vx-shimmer 1.4s ease-in-out infinite;
}

@keyframes vx-shimmer {
    to { transform: translateX(100%); }
}

/* ── 6. PULSE / CANLILIK ──────────────────────────────────── */

.status-dot.online,
.online-indicator,
.vx-dot--green {
    animation: vx-pulse 2.2s ease-in-out infinite;
}

@keyframes vx-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
}

/* Renkli durum noktaları (emoji 🟢🔴🟡⚪⚫ yerine) */
.vx-dot {
    display: inline-block;
    width: .62em;
    height: .62em;
    border-radius: 50%;
    vertical-align: baseline;
    margin: 0 .1em;
}
.vx-dot--green { background: var(--vx-green); }
.vx-dot--red   { background: var(--vx-red); box-shadow: 0 0 8px color-mix(in srgb, var(--vx-red) 50%, transparent); }
.vx-dot--amber { background: var(--vx-amber); }
.vx-dot--gray  { background: var(--text-tertiary, #8E8E93); }

/* ── 7. DONUT CHART ANİMASYONU ────────────────────────────── */

.donut-segment {
    transition: stroke-dasharray .9s cubic-bezier(.4, 0, .2, 1),
                stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1);
}

.donut-svg { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); }

.donut-total {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ── 9. SPARKLINE ─────────────────────────────────────────── */

.vx-sparkline {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 6px;
    opacity: .9;
}
.vx-sparkline polyline {
    fill: none;
    stroke: var(--vx-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vx-sparkline .vx-spark-fill {
    fill: url(#vxSparkGrad);
    stroke: none;
    opacity: .35;
}

/* ── 9b. AKORDİYON + KAT BAŞLIĞI ROZETLERİ ────────────────── */
/* Aç/kapa animasyonu visual-upgrade.js'te (WAAPI, 220ms).
   Rozetler: kapalı kat da durumunu anlatsın — yanan/toplam ve
   durum bazında sayılar. */

.floor-header .floor-name { flex: 1 1 auto; min-width: 0; }

.vx-floor-badges {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-right: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #98A2C3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}

.vx-floor-badges .vx-fb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vx-floor-badges .vx-fb i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px currentColor;
}

.vx-floor-badges .vx-fb-lit .vx-icon {
    width: 1em;
    height: 1em;
    color: var(--vx-led);
}

/* Dar ekranda (dik telefon) durum sayıları da görünür kalsın —
   kompaktlaşır, sığmazsa başlık içinde alt satıra sarar. */
@media (max-width: 480px) {
    .vx-floor-badges {
        gap: 6px;
        row-gap: 2px;
        font-size: 10px;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        flex-shrink: 1;
    }
    .vx-floor-badges .vx-fb { white-space: nowrap; }
    .vx-floor-badges .vx-fb i { width: 7px; height: 7px; }
}

/* ── 10. İKON SİSTEMİ + MİKRO-ETKİLEŞİMLER ────────────────── */

.vx-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

.vx-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* İkon taşıyan bilinen konteynerlerde hizalama */
.nav-icon .vx-icon,
.menu-card-icon .vx-icon,
.admin-nav-btn .vx-icon,
.section-icon .vx-icon,
.metric-icon .vx-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
}

/* Sayı count-up sırasında hafif vurgu */
.vx-counting {
    transition: none;
}

/* Buton ve odak cilası */
.dark-theme .form-input:focus,
[data-theme=dark] .form-input:focus,
.dark-theme .form-select:focus,
[data-theme=dark] .form-select:focus {
    border-color: var(--vx-accent) !important;
    box-shadow: 0 0 0 3px rgba(91, 140, 255, .22) !important;
    outline: none;
}

.admin-nav-btn {
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dark-theme .admin-nav-btn.active,
[data-theme=dark] .admin-nav-btn.active {
    box-shadow: inset 0 -2px 0 var(--vx-accent), 0 0 18px rgba(91, 140, 255, .12);
}

/* Kartlara yumuşak giriş */
@keyframes vx-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.admin-section.active .stat-card,
.admin-section.active .settings-group,
.admin-section.active .project-card {
    animation: vx-rise .35s ease-out both;
}
.admin-section.active .stat-card:nth-child(2) { animation-delay: .05s; }
.admin-section.active .stat-card:nth-child(3) { animation-delay: .1s; }
.admin-section.active .stat-card:nth-child(4) { animation-delay: .15s; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .vx-skeleton::after,
    .metric-bar-fill::after,
    .status-dot.online,
    .online-indicator,
    .vx-dot--green,
    [data-apartment-id].light-on,
    .admin-section.active .stat-card,
    .admin-section.active .settings-group,
    .admin-section.active .project-card {
        animation: none !important;
    }
    .donut-segment,
    [data-apartment-id] {
        transition: none !important;
    }
}

/* ── 11. HIZLI KONTROL GRUP BUTONU — MOBİL SAYI GÖRÜNÜRLÜĞÜ ──── */
/* Grup butonlarında açık/toplam sayısı .toggle-label içinde <small>
   olarak duruyor. Mobilde label 'white-space:nowrap + ellipsis'
   olduğu için grup adı uzun olunca sayı kırpılıp görünmez oluyordu
   (PC/tablette yeterli genişlik olduğu için görünüyordu).
   Çözüm: dar ekranda sayıyı kendi satırına al → grup adı gerekiyorsa
   '…' ile kısalır ama sayı her zaman tam görünür. */
@media (max-width: 600px) {
    /* Grup adı yine tek satırda '…' ile kısalır (parent nowrap/ellipsis
       korunur); sadece sayıyı blok yapıp alt satıra taşıyoruz. */
    .btn-quick-toggle.group-toggle-btn .toggle-label small {
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        opacity: .85 !important;
        font-size: .62rem !important;
        line-height: 1.3 !important;
        margin-top: 1px !important;
    }
}