/* =====================================================================
   MARMARAS AI — MARMARAS NOIR TEMASI
   Tanıtım videosundaki görünüm: kömür zemin, şampanya altın vurgular,
   serif "MARMARAS" marka yazısı, etiketli sol menü, sakin mat kartlar.
   Yalnızca body[data-mode="noir"] iken etkindir.
   ===================================================================== */

.noir-only{ display:none !important; }

body[data-mode="noir"]{
  --n-bg:#0B0A0A;
  --n-frame:#1B1A1D;
  --n-main:#1F1E21;
  --n-card:linear-gradient(155deg,#302F32 0%,#2A292C 55%,#262528 100%);
  --n-card-flat:#2A292C;
  --n-card-hover:linear-gradient(155deg,#343336 0%,#2D2C2F 55%,#29282B 100%);
  --n-sunken:#1A191C;
  --n-line:rgba(255,255,255,.075);
  --n-line-soft:rgba(255,255,255,.05);
  --n-line-gold:rgba(217,189,140,.26);
  --n-gold:linear-gradient(180deg,#E9D6AE 0%,#D2B687 52%,#B39467 100%);
  --n-gold-soft:linear-gradient(90deg,rgba(217,189,140,.20) 0%,rgba(217,189,140,.07) 100%);
  --n-green:#9CCB8F;
  --n-ease:cubic-bezier(.16,1,.3,1);

  --coal:#1B1A1D; --coal-2:#232225; --coal-3:#2A292C;
  --text-primary:#F1EAE0;
  --text-secondary:#A8A29B;
  --text-faint:#77716B;
  --champagne:#D9BD8C; --champagne-bright:#F0DDB8; --champagne-dark:#A9895C;
  --champagne-soft:rgba(217,189,140,.12);
  --on-accent:#1B1710;
  --danger:#E39A87; --success:#9CCB8F;
  --radius-sm:8px; --radius-md:12px; --radius-lg:14px; --radius-xl:18px;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11" 1,"ss01" 1;
  color:var(--text-primary);
  background:var(--n-main);
  min-height:100vh;
}
body[data-mode="noir"] .noir-only{ display:revert !important; }

/* ---------- zemin: kömür yüzey + ince mimari ızgara + sıcak ışık ---------- */
body[data-mode="noir"]::before,
body[data-mode="noir"]::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; }
body[data-mode="noir"]::before{
  background:
    radial-gradient(1100px 620px at 18% -8%,rgba(217,189,140,.075),transparent 62%),
    radial-gradient(900px 700px at 100% 110%,rgba(169,137,92,.06),transparent 60%),
    linear-gradient(180deg,#222124 0%,#1F1E21 38%,#1C1B1E 100%);
}
body[data-mode="noir"]::after{
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 78%);
}
body[data-mode="noir"] #app,
body[data-mode="noir"] #modal-root{ position:relative; z-index:1; }
body[data-mode="noir"] .bg-decor{ display:none; }

/* ---------- tipografi ---------- */
body[data-mode="noir"] .font-display,
body[data-mode="noir"] h1, body[data-mode="noir"] h2, body[data-mode="noir"] h3,
body[data-mode="noir"] .data-card-title,
body[data-mode="noir"] .chat-widget-header{
  font-family:'Inter',sans-serif; letter-spacing:-.012em; color:var(--text-primary);
}
body[data-mode="noir"] h3.font-display{ font-weight:600; }
body[data-mode="noir"] .font-mono,
body[data-mode="noir"] .badge,
body[data-mode="noir"] .progress-row-pct,
 body[data-mode="noir"] .stat-label,
body[data-mode="noir"] .chat-sidebar-section-label,
body[data-mode="noir"] .app-topbar-datetime,
body[data-mode="noir"] .bell-badge{ font-family:'Inter',sans-serif !important; font-variant-numeric:tabular-nums; }
body[data-mode="noir"] .muted{ color:var(--text-secondary); }
body[data-mode="noir"] ::placeholder{ color:#6F6A64; }
body[data-mode="noir"] ::selection{ background:rgba(217,189,140,.32); color:#fff; }
body[data-mode="noir"] ::-webkit-scrollbar{ width:10px; height:10px; }
body[data-mode="noir"] ::-webkit-scrollbar-track{ background:transparent; }
body[data-mode="noir"] ::-webkit-scrollbar-thumb{ background:rgba(217,189,140,.18); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
body[data-mode="noir"] ::-webkit-scrollbar-thumb:hover{ background:rgba(217,189,140,.32); background-clip:padding-box; border:3px solid transparent; }

/* Bölüm etiketi — videodaki "—— 01 — PANEL" başlıkları */
body[data-mode="noir"] .section-label{
  display:flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#BFA274; margin:30px 0 14px;
}
body[data-mode="noir"] .section-label::before{
  content:''; width:26px; height:1px; background:linear-gradient(90deg,rgba(217,189,140,.2),rgba(217,189,140,.7));
}

/* ---------- yüzeyler (mat kömür kartlar) ---------- */
body[data-mode="noir"] .glass{
  background:var(--n-card) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--n-line) !important;
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.16) !important;
}
body[data-mode="noir"] .glass-strong{
  background:linear-gradient(180deg,#262528 0%,#212023 100%) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(217,189,140,.18) !important;
  border-radius:var(--radius-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.5) !important;
}
body[data-mode="noir"] .data-card.project-card{ background:var(--n-card) !important; }
body[data-mode="noir"] .data-card{ transition:border-color .2s ease, transform .2s var(--n-ease), box-shadow .2s ease; }
body[data-mode="noir"] .data-card:hover{
  border-color:rgba(217,189,140,.22) !important; transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.28) !important;
}
body[data-mode="noir"] .modal-overlay{ background:rgba(8,7,7,.66) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body[data-mode="noir"] .empty-state{ color:var(--text-secondary); }
body[data-mode="noir"] .empty-state p{ color:var(--text-secondary); }

/* ---------- butonlar ---------- */
body[data-mode="noir"] .btn{ border-radius:10px; font-weight:600; letter-spacing:-.005em; transition:filter .18s ease, transform .18s var(--n-ease), background .18s ease, border-color .18s ease; }
body[data-mode="noir"] .btn-primary{
  background:var(--n-gold) !important; color:var(--on-accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px rgba(201,168,112,.16), 0 1px 2px rgba(0,0,0,.4) !important;
}
body[data-mode="noir"] .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); opacity:1; }
body[data-mode="noir"] .btn-secondary{
  background:rgba(255,255,255,.045) !important; color:var(--text-primary) !important;
  border:1px solid var(--n-line);
}
body[data-mode="noir"] .btn-secondary:hover{ background:rgba(255,255,255,.075) !important; border-color:rgba(217,189,140,.22); opacity:1; }
body[data-mode="noir"] .btn-filter-active{
  background:var(--n-gold-soft) !important; color:var(--champagne-bright) !important;
  border:1px solid var(--n-line-gold) !important; box-shadow:none !important; transform:none;
}
body[data-mode="noir"] .icon-btn:hover{ background:rgba(255,255,255,.06); }
body[data-mode="noir"] :focus-visible{ outline:2px solid rgba(217,189,140,.8) !important; outline-offset:2px; }

/* ---------- form alanları ---------- */
body[data-mode="noir"] .field label{ color:var(--text-secondary); font-weight:600; letter-spacing:.08em; font-size:10.5px; }
body[data-mode="noir"] .field input, body[data-mode="noir"] .field select, body[data-mode="noir"] .field textarea,
body[data-mode="noir"] .search-wrap input, body[data-mode="noir"] .filter-select,
body[data-mode="noir"] .chat-input-row textarea{
  background:var(--n-sunken) !important; border:1px solid var(--n-line) !important; color:var(--text-primary) !important;
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[data-mode="noir"] .field input:focus, body[data-mode="noir"] .field select:focus, body[data-mode="noir"] .field textarea:focus,
body[data-mode="noir"] .search-wrap input:focus, body[data-mode="noir"] .filter-select:focus,
body[data-mode="noir"] .chat-input-row textarea:focus{
  outline:none !important; border-color:rgba(217,189,140,.55) !important; box-shadow:0 0 0 3px rgba(217,189,140,.12);
}
body[data-mode="noir"] select option{ color:var(--text-primary); background:#232225; }
body[data-mode="noir"] input[type="checkbox"], body[data-mode="noir"] input[type="radio"]{ accent-color:#D2B687; }
body[data-mode="noir"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-mode="noir"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter:invert(.8) sepia(.4); opacity:.7; }

/* ---------- ilerleme çubukları: yeşil yerine şampanya ---------- */
body[data-mode="noir"] .progress-row + .progress-row{ border-top:1px solid var(--n-line-soft); }
body[data-mode="noir"] .progress-row{ transition:background .15s ease; }
body[data-mode="noir"] .progress-row[style*="cursor:pointer"]:hover{ background:rgba(255,255,255,.025); }
body[data-mode="noir"] .progress-row-bar{ background:rgba(255,255,255,.06); height:6px; }
body[data-mode="noir"] .progress-row-fill{ background:linear-gradient(90deg,#8C7352 0%,#D2B687 70%,#EBD8B2 100%); box-shadow:0 0 12px rgba(217,189,140,.25); }
body[data-mode="noir"] .progress-row-pct{ color:var(--champagne-bright); font-weight:600; }
body[data-mode="noir"] .upcoming-type{ color:var(--text-faint); }

/* ---------- ayarlar / sekmeler / tablolar ---------- */
body[data-mode="noir"] .settings-tab{ border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--n-line-soft); color:var(--text-secondary); }
body[data-mode="noir"] .settings-tab:hover{ color:var(--text-primary); background:rgba(255,255,255,.06); }
body[data-mode="noir"] .settings-tab.active{ background:var(--n-gold-soft); color:var(--champagne-bright); border-color:var(--n-line-gold); font-weight:600; }
body[data-mode="noir"] .mode-seg-btn.active{ background:var(--n-gold) !important; color:var(--on-accent) !important; }
body[data-mode="noir"] .report-table th, body[data-mode="noir"] .rapor-cizelge th{ color:var(--text-faint); border-bottom-color:var(--n-line) !important; font-weight:600; letter-spacing:.08em; }
body[data-mode="noir"] .report-table td, body[data-mode="noir"] .rapor-cizelge td{ border-bottom-color:var(--n-line-soft) !important; }
body[data-mode="noir"] .stat-value{ color:var(--text-primary); font-weight:600; letter-spacing:-.02em; }
body[data-mode="noir"] .chart-card h3{ font-size:14.5px; font-weight:600; }
body[data-mode="noir"] .tree-card{ background:var(--n-card) !important; border-color:var(--n-line) !important; }
body[data-mode="noir"] .tree-card:hover{ border-color:rgba(217,189,140,.24) !important; }
body[data-mode="noir"] .notif-panel{ background:#232225 !important; border:1px solid rgba(217,189,140,.16) !important; box-shadow:0 24px 60px rgba(0,0,0,.5) !important; }
body[data-mode="noir"] .ivory-palette-lock{ display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:13px; }

/* =====================================================================
   KABUK — etiketli sol menü + sayfa başlığı
   ===================================================================== */
body[data-mode="noir"] .app-shell{ position:relative; z-index:1; padding:26px 32px 56px 280px; }
body[data-mode="noir"] .main-content{ padding:0; }

/* SOL MENÜ */
body[data-mode="noir"] .noir-sidebar{
  position:fixed; z-index:90; left:0; top:0; bottom:0; width:248px;
  display:flex !important; flex-direction:column;
  padding:22px 14px 16px;
  background:linear-gradient(180deg,#1D1C1F 0%,#1A191C 100%);
  border-right:1px solid var(--n-line-soft);
  animation:nSlideL .8s var(--n-ease) backwards;
}
body[data-mode="noir"] .noir-logo-btn{ display:block; padding:4px 8px 0; text-align:left; }
.noir-brand{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.noir-brand .noir-mark{ width:30px; height:30px; flex-shrink:0; }
.noir-wordmark{
  font-family:'Cormorant Garamond','Cormorant',Georgia,serif; font-weight:600; font-size:20px; line-height:1;
  letter-spacing:.12em; text-transform:uppercase; color:#EFE6D6; padding-top:2px;
}
.noir-ai{
  display:inline-grid; place-items:center; height:18px; padding:0 5px; border-radius:5px;
  font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.02em; color:#1B1710;
  background:linear-gradient(180deg,#EBD8B2 0%,#C8AB7B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.noir-brand.compact .noir-mark{ width:26px; height:26px; }
.noir-brand.compact .noir-wordmark{ font-size:18px; letter-spacing:.12em; }
.noir-brand.compact .noir-ai{ height:16px; font-size:9px; }

body[data-mode="noir"] .noir-nav{ display:flex; flex-direction:column; gap:6px; margin-top:34px; flex:1; }
body[data-mode="noir"] .noir-nav-item{
  position:relative; display:flex; align-items:center; gap:13px; width:100%;
  height:46px; padding:0 14px; border-radius:11px; text-align:left;
  font-size:14.5px; font-weight:500; color:#A8A29B;
  background:transparent; border:1px solid transparent; box-shadow:none;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
  animation:nRise .6s var(--n-ease) backwards;
}
body[data-mode="noir"] .noir-nav-item:nth-child(1){ animation-delay:.10s; }
body[data-mode="noir"] .noir-nav-item:nth-child(2){ animation-delay:.14s; }
body[data-mode="noir"] .noir-nav-item:nth-child(3){ animation-delay:.18s; }
body[data-mode="noir"] .noir-nav-item:nth-child(4){ animation-delay:.22s; }
body[data-mode="noir"] .noir-nav-item:nth-child(5){ animation-delay:.26s; }
body[data-mode="noir"] .noir-nav-item:nth-child(6){ animation-delay:.30s; }
body[data-mode="noir"] .noir-nav-item svg{ width:18px; height:18px; flex-shrink:0; stroke-width:1.7; color:#8F8982; transition:color .18s ease; }
body[data-mode="noir"] .noir-nav-item:hover{ color:var(--text-primary); background:rgba(255,255,255,.035); }
body[data-mode="noir"] .noir-nav-item:hover svg{ color:#CDB892; }
body[data-mode="noir"] .noir-nav-item.active{
  color:#F4ECDD; font-weight:600;
  background:linear-gradient(100deg,rgba(217,189,140,.20) 0%,rgba(217,189,140,.075) 60%,rgba(217,189,140,.05) 100%);
  border-color:rgba(217,189,140,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18);
}
body[data-mode="noir"] .noir-nav-item.active svg{ color:#E9D3A8; }
body[data-mode="noir"] .noir-nav-item.active::before{
  content:''; position:absolute; left:-15px; top:50%; width:3px; height:24px; margin-top:-12px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#F2DFBB,#C9A873); box-shadow:0 0 12px rgba(233,211,168,.6);
}
body[data-mode="noir"] .noir-nav-item .nav-badge{ position:absolute; right:10px; top:50%; margin-top:-8.5px; }

body[data-mode="noir"] .noir-user{
  display:flex; align-items:center; gap:6px; padding:8px 8px 8px 10px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid var(--n-line-soft);
}
body[data-mode="noir"] .noir-user-btn{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left; }
.noir-avatar, .noir-top-avatar{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; flex-shrink:0;
  font-size:11px; font-weight:700; letter-spacing:.02em; color:#1B1710;
  background:radial-gradient(circle at 30% 25%,#EAD5AA 0%,#C2A273 55%,#8E7350 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(217,189,140,.25);
}
body[data-mode="noir"] .noir-user-copy{ display:flex; flex-direction:column; min-width:0; }
body[data-mode="noir"] .noir-user-name{ font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-mode="noir"] .noir-user-role{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-mode="noir"] .noir-logout{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--text-faint); }
body[data-mode="noir"] .noir-logout:hover{ color:var(--danger); background:rgba(227,154,135,.1); }

/* ÜST BAR → sayfa başlığı + sistem düğmeleri */
body[data-mode="noir"] .app-topbar{
  position:relative !important; top:auto !important; z-index:80;
  display:flex !important; align-items:center; gap:18px;
  min-height:0; margin:0 0 26px; padding:0 !important; width:100%;
  background:none !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-radius:0;
}
body[data-mode="noir"] .app-topbar-brand,
body[data-mode="noir"] .top-nav{ display:none !important; }
body[data-mode="noir"] .noir-topbar-brand{ display:none !important; }
body[data-mode="noir"] .noir-head{ display:flex !important; align-items:center; gap:16px; flex:1; min-width:0; }
body[data-mode="noir"] .noir-head-copy{ flex:1; min-width:0; animation:nRise .6s var(--n-ease) .05s backwards; }
body[data-mode="noir"] .noir-title{
  font-family:'Inter',sans-serif; font-size:27px; line-height:1.15; font-weight:600; letter-spacing:-.022em; color:#F4EEE6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-mode="noir"] .noir-sub{ margin-top:5px; font-size:13.5px; color:var(--text-secondary); }
body[data-mode="noir"] .noir-head-btn{ padding:10px 16px; white-space:nowrap; }
body[data-mode="noir"] .app-topbar-actions-wrap{ display:flex; flex-direction:row; align-items:center; gap:14px; flex-shrink:0; }
body[data-mode="noir"] .app-topbar-datetime{ flex-direction:column; align-items:flex-end; gap:4px; padding:0; color:var(--text-faint); font-size:11px; letter-spacing:0; }
body[data-mode="noir"] .app-topbar-date{ opacity:1; color:var(--text-faint); }
body[data-mode="noir"] .app-topbar-time{ color:#E9D3A8; font-size:13px; font-weight:600; }
body[data-mode="noir"] .app-topbar-actions{ gap:8px; padding-left:14px; border-left:1px solid var(--n-line-soft); }
body[data-mode="noir"] .app-topbar .icon-btn-fixed,
body[data-mode="noir"] .app-topbar .bell-btn{
  width:36px; height:36px; color:#B3ACA3; background:rgba(255,255,255,.035); border:1px solid var(--n-line);
}
body[data-mode="noir"] .app-topbar .icon-btn-fixed:hover,
body[data-mode="noir"] .app-topbar .bell-btn:hover,
body[data-mode="noir"] .app-topbar .icon-btn-fixed.active{ color:#F0DDB8; background:rgba(217,189,140,.09); border-color:rgba(217,189,140,.3); }
body[data-mode="noir"] .app-topbar .icon-btn-fixed.chat-fab{ color:#D9BD8C; background:rgba(217,189,140,.07); border-color:rgba(217,189,140,.22); }
body[data-mode="noir"] .bell-badge{ background:#E39A87; color:#1B1710; box-shadow:0 0 0 2px #1F1E21; border:none; }
body[data-mode="noir"] #profile-topbar-btn{ padding:0; background:none !important; border:none !important; }
body[data-mode="noir"] #profile-topbar-btn .aurora-hide-icon{ display:none !important; }
body[data-mode="noir"] .noir-top-avatar{ display:inline-grid !important; width:34px; height:34px; font-size:11.5px; }
body[data-mode="noir"] #profile-topbar-btn.active .noir-top-avatar{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 2px #1F1E21, 0 0 0 3.5px rgba(217,189,140,.7); }
body[data-mode="noir"] .scroll-top-btn{ background:var(--n-gold) !important; color:var(--on-accent) !important; }

/* =====================================================================
   PANEL — GENEL BAKIŞ
   ===================================================================== */
body[data-mode="noir"] .noir-overview{ display:block !important; }
.noir-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.noir-kpi, .noir-card{
  position:relative; background:var(--n-card); border:1px solid var(--n-line); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.14);
}
.noir-kpi{ padding:18px 20px 16px; animation:nRise .7s var(--n-ease) backwards; animation-delay:calc(.12s + var(--i,0) * .06s); }
.noir-kpi-label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); }
.noir-kpi-label svg{ color:#CDB285; stroke-width:1.7; }
.noir-kpi-value{ margin-top:12px; font-size:36px; line-height:1; font-weight:600; letter-spacing:-.03em; color:#F4EEE6; font-variant-numeric:tabular-nums; }
.noir-kpi-delta{ margin-top:10px; font-size:12px; font-weight:500; color:var(--n-green); }

.noir-charts{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:16px; margin-top:16px; }
.noir-card{ padding:20px 22px; animation:nRise .7s var(--n-ease) .32s backwards; }
.noir-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.noir-card-head h3{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; letter-spacing:-.005em; color:#EEE7DC; }
.noir-card-head span{ font-size:12px; color:var(--text-faint); white-space:nowrap; }

/* Aylık ilerleme — sütunlar */
.noir-bars{
  position:relative; display:flex; align-items:stretch; gap:6px; height:236px; padding-top:18px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 25%; background-position:0 18px; background-repeat:repeat-y;
}
.noir-bar-col{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; cursor:default; }
.noir-bar-track{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.noir-bar{
  display:block; width:min(62%,34px); height:var(--h); min-height:3px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#7B6E62 0%,#5A514A 45%,#3E3935 100%);
  opacity:.85; transform-origin:bottom; animation:nGrow 1s var(--n-ease) backwards; animation-delay:calc(.35s + var(--i,0) * .045s);
  transition:opacity .18s ease, filter .18s ease;
}
.noir-bar-col:hover .noir-bar{ opacity:1; filter:brightness(1.15); }
.noir-bar-col.on .noir-bar{
  opacity:1; background:linear-gradient(180deg,#FAEBD0 0%,#E4C999 45%,#B99769 100%);
  box-shadow:0 0 26px rgba(233,205,155,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.noir-bar-lbl{ margin-top:10px; height:16px; font-size:11.5px; color:var(--text-faint); }
.noir-bar-col.on .noir-bar-lbl{ color:#E9D3A8; font-weight:600; }
.noir-bar-val{
  margin-bottom:6px; font-size:11px; font-weight:600; color:var(--text-secondary); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.noir-bar-col:hover .noir-bar-val, .noir-bar-col.on .noir-bar-val{ opacity:1; transform:none; }
.noir-bar-col.on .noir-bar-val{ color:#F0DDB8; }

/* Aşama dağılımı — halka */
.noir-donut-wrap{ display:flex; align-items:center; gap:22px; }
.noir-donut{ width:132px; height:132px; flex-shrink:0; animation:nSpin 1.1s var(--n-ease) .4s backwards; }
.noir-donut svg{ width:100%; height:100%; display:block; }
.noir-donut-center b{ display:block; font-size:34px; line-height:1; font-weight:600; letter-spacing:-.03em; color:#F4EEE6; font-variant-numeric:tabular-nums; }
.noir-donut-center span{ display:block; margin-top:6px; font-size:12.5px; color:var(--text-secondary); }
.noir-legend{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.noir-legend li{ display:flex; align-items:center; gap:10px; font-size:13px; color:#CFC8BE; }
.noir-legend .dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.noir-legend .lbl{ flex:1; min-width:0; }
.noir-legend b{ font-weight:600; color:#EEE7DC; font-variant-numeric:tabular-nums; }

/* Son hareketler */
.noir-activity{ margin-top:16px; animation-delay:.42s; }
.noir-activity .noir-card-head{ margin-bottom:8px; }
.noir-act-list{ list-style:none; }
.noir-act{ display:flex; align-items:center; gap:14px; padding:11px 0; }
.noir-act + .noir-act{ border-top:1px solid var(--n-line-soft); }
.noir-act-ic{
  display:grid; place-items:center; width:32px; height:32px; border-radius:8px; flex-shrink:0;
  color:#CDB285; background:rgba(255,255,255,.04); border:1px solid var(--n-line);
}
.noir-act-ic svg{ stroke-width:1.7; }
.noir-act-text{ flex:1; min-width:0; display:flex; align-items:baseline; gap:12px; font-size:13.5px; overflow:hidden; }
.noir-act-text b{ font-weight:600; color:#F1EAE0; white-space:nowrap; }
.noir-act-text span{ color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noir-act-text span.solo{ color:#D6CFC5; }
.noir-act-time{ font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.noir-empty{ padding:14px 0 6px; font-size:13px; color:var(--text-faint); }

/* Panelin mevcut bölümleri, genel bakışın altında aynı dilde */
body[data-mode="noir"] .dash-side-grid{ margin-top:4px; }

/* =====================================================================
   DUYARLI DÜZEN
   ===================================================================== */
@media (max-width:1280px){
  .noir-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px){
  .noir-charts{ grid-template-columns:1fr; }
  .noir-donut-card{ display:grid; grid-template-columns:auto 1fr; column-gap:28px; align-items:center; }
  .noir-donut-card .noir-card-head{ grid-column:1 / -1; }
  .noir-donut-card .noir-legend{ margin-top:0; }
}

/* Tablet & telefon: sol menü alt sekme çubuğuna dönüşür */
@media (max-width:1023px){
  body[data-mode="noir"] .app-shell{ padding:14px 16px calc(96px + env(safe-area-inset-bottom)); }
  body[data-mode="noir"] .noir-sidebar{
    top:auto; right:0; bottom:0; width:auto; height:auto; flex-direction:row;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-right:none; border-top:1px solid var(--n-line);
    background:rgba(27,26,29,.94); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
    animation:none;
  }
  body[data-mode="noir"] .noir-logo-btn,
  body[data-mode="noir"] .noir-user{ display:none; }
  body[data-mode="noir"] .noir-nav{ flex-direction:row; margin:0; gap:2px; width:100%; }
  body[data-mode="noir"] .noir-nav-item{
    flex:1; min-width:0; height:54px; padding:6px 2px; flex-direction:column; justify-content:center; gap:4px;
    font-size:10.5px; font-weight:500; text-align:center; border-radius:10px; animation:none;
  }
  body[data-mode="noir"] .noir-nav-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body[data-mode="noir"] .noir-nav-item svg{ width:20px; height:20px; }
  body[data-mode="noir"] .noir-nav-item.active{ box-shadow:none; }
  body[data-mode="noir"] .noir-nav-item.active::before{ left:50%; top:-9px; margin:0 0 0 -12px; width:24px; height:2px; border-radius:0 0 2px 2px; }
  body[data-mode="noir"] .noir-nav-item .nav-badge{ right:auto; left:calc(50% + 6px); top:4px; margin:0; }

  body[data-mode="noir"] .app-topbar{ flex-wrap:wrap; row-gap:18px; margin-bottom:20px; }
  body[data-mode="noir"] .noir-topbar-brand{ display:flex !important; align-items:center; order:1; margin-right:auto; }
  body[data-mode="noir"] .app-topbar-actions-wrap{ order:2; }
  body[data-mode="noir"] .noir-head{ order:3; flex-basis:100%; }
  body[data-mode="noir"] .noir-title{ font-size:23px; }
  body[data-mode="noir"] .app-topbar-datetime{ display:none; }
  body[data-mode="noir"] .scroll-top-btn{ bottom:calc(88px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width:640px){
  body[data-mode="noir"] .app-topbar-actions{ gap:6px; padding-left:0; border-left:none; }
  body[data-mode="noir"] #fullscreen-toggle-btn{ display:none; }
  body[data-mode="noir"] .app-topbar .icon-btn-fixed,
  body[data-mode="noir"] .app-topbar .bell-btn{ width:34px; height:34px; }
  body[data-mode="noir"] .noir-head-btn{ padding:9px 12px; font-size:13px; }
  .noir-kpis{ gap:10px; }
  .noir-kpi{ padding:14px 14px 13px; }
  .noir-kpi-label{ font-size:12px; }
  .noir-kpi-value{ font-size:28px; margin-top:10px; }
  .noir-kpi-delta{ font-size:11px; }
  .noir-card{ padding:16px; }
  .noir-bars{ height:190px; gap:3px; }
  .noir-bar-lbl{ font-size:10px; }
  .noir-donut-card{ display:block; }
  .noir-donut-card .noir-legend{ margin-top:18px; }
  .noir-act-text{ flex-direction:column; gap:2px; }
  .noir-act-text span{ white-space:normal; }
}

/* =====================================================================
   HAREKET
   ===================================================================== */
@keyframes nSlideL{ from{ opacity:0; transform:translateX(-16px); } to{ opacity:1; transform:none; } }
@keyframes nRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes nGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes nSpin{ from{ opacity:0; transform:rotate(-40deg) scale(.92); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  body[data-mode="noir"] *, body[data-mode="noir"] *::before{ animation:none !important; transition:none !important; }
}

/* Yazdırma: tema dekorunu gizle */
@media print{
  body[data-mode="noir"]::before, body[data-mode="noir"]::after,
  body[data-mode="noir"] .noir-sidebar, body[data-mode="noir"] .noir-overview{ display:none !important; }
  body[data-mode="noir"] .app-shell{ padding:0 !important; }
}

/* İlerleme halkaları (proje kartları): yeşil yerine şampanya */
body[data-mode="noir"] svg circle[stroke="rgba(143,191,134,0.18)"]{ stroke:rgba(255,255,255,.08); }
body[data-mode="noir"] svg circle[stroke="#3F9468"]{ stroke:#D6BA8A; filter:drop-shadow(0 0 3px rgba(217,189,140,.35)); }
body[data-mode="noir"] svg text[fill="#3F9468"]{ fill:#EBD6AE; font-family:'Inter',sans-serif; }
body[data-mode="noir"] .glass-strong select{ background-color:var(--n-sunken) !important; border:1px solid var(--n-line) !important; color:var(--text-primary) !important; }

/* ---------- giriş ekranı: videonun kapanış kartı ---------- */
body[data-mode="noir"] .login-card{ max-width:400px; padding:40px 36px 34px; }
body[data-mode="noir"] .login-brand-large{ display:none; }
body[data-mode="noir"] .noir-login-brand{ display:flex !important; flex-direction:column; align-items:center; animation:nRise .8s var(--n-ease) backwards; }
body[data-mode="noir"] .noir-login-brand .noir-mark{ width:58px; height:58px; }
body[data-mode="noir"] .noir-login-word{ display:flex; align-items:center; gap:10px; margin-top:20px; }
body[data-mode="noir"] .noir-login-word .noir-wordmark{ font-size:31px; letter-spacing:.16em; }
body[data-mode="noir"] .noir-login-word .noir-ai{ height:21px; font-size:11px; padding:0 6px; }
body[data-mode="noir"] .noir-login-sub{ margin-top:12px; font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:#BFA274; }
body[data-mode="noir"] .remember-row label{ color:var(--text-secondary); }