/* =============================================================================
   ENERVON BRAND SYSTEM v1.0 — arayüz katmanı
   -----------------------------------------------------------------------------
   Kaynak: Enervon Brandkit v1.0 (mint #4AC395 = enerji / aktif / birincil eylem,
   teal #117099 = güven / bağlantı / odak, ink = soğuk mimari nötrler).

   Tüm uygulama sayfaları (_header.ejs) bu dosyayı yükler ve <html class="brand-v1">
   taşır; renk / tema token'larının tek kaynağı burasıdır. Bileşen kuralları bilerek
   `html.brand-v1` ile başlar: _header.ejs içindeki temel bileşen kurallarını
   özgüllükle ezer, sıraya bağımlı kalmaz. Oturum ekranları sınıfsız yükler ve
   yalnız 1. katmandaki ham token'ları kullanır.

   Katmanlar:
     1. Ham marka token'ları (rampalar, yarıçap, boşluk, font) — :root
     2. Axiforma @font-face
     3. Anlamsal token eşlemesi — koyu (varsayılan) + açık tema
     4. Ortak bileşenler (topbar, menü, buton, kart, form, uyarı)
     5. Yardımcı sınıflar (.num, .mono, .overline, .badge-dot, .seg)
     6. Liste ve özet dili (KPI şeridi, liste tablosu, kod, rozet, ilerleme, filtre çipi,
        katlanabilir kart)
   ============================================================================= */

/* ── 1. Ham marka token'ları ─────────────────────────────────────────────── */
:root {
  /* Mint — enerji · aktif · olumlu · birincil eylem */
  --mint-50:#EEFAF4;  --mint-100:#D4F2E4; --mint-200:#A9E4C9; --mint-300:#7FD5AE; --mint-400:#4AC395;
  --mint-500:#34A67A; --mint-600:#278864; --mint-700:#1E6A4E; --mint-800:#154C38; --mint-900:#0C2E22;
  /* Teal — güven · altyapı · bağlantı · odak */
  --teal-50:#E6F1F6;  --teal-100:#C2DCE8; --teal-200:#8BBCD1; --teal-300:#549CBA; --teal-400:#2D85A7;
  --teal-500:#117099; --teal-600:#0E5C7E; --teal-700:#0B4863; --teal-800:#083448; --teal-900:#04202D;
  /* Ink — yüzey, metin, kenarlık */
  --ink-0:#FFFFFF;   --ink-50:#F2F4F6;  --ink-100:#E4E7EB; --ink-200:#C9CFD5; --ink-300:#A5AEB8;
  --ink-400:#7C8894; --ink-500:#586673; --ink-600:#394654; --ink-700:#26323F; --ink-800:#1A242F;
  --ink-900:#121A24; --ink-1000:#0A1018;
  /* Anlamsal ham renkler — yalnız durum/anlam için */
  --brand-success:#4AC395; --brand-warning:#F2A63A; --brand-alert:#E5484D;
  --brand-info:#117099;    --brand-cool:#3FA9D4;    --brand-heat:#E87A4A;

  /* Yarıçap — "keskin, balon değil" */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;
  /* Boşluk — 4px ızgara */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  /* Tipografi — tek aile. Axiforma dosyaları gelene dek Inter (self-host) devralır. */
  --font-sans:'Axiforma','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}

/* ── 2. Axiforma ─────────────────────────────────────────────────────────────
   Şimdilik yalnız local(): font cihazda kuruluysa kullanılır, değilse bir
   sonraki aileye (Inter) düşülür; ağ isteği / 404 oluşmaz. Web lisanslı woff2
   dosyaları public/assets/fonts/axiforma/ altına konduğunda her kurala
   url('/assets/fonts/axiforma/<Dosya>.woff2') format('woff2') eklenir
   (CSP font-src 'self' → dosyalar kendi sunucumuzdan servis edilmeli). */
@font-face { font-family:'Axiforma'; font-weight:300; font-style:normal; font-display:swap; src:local('Axiforma Light'), local('Axiforma-Light'); }
@font-face { font-family:'Axiforma'; font-weight:400; font-style:normal; font-display:swap; src:local('Axiforma Regular'), local('Axiforma-Regular'), local('Axiforma'); }
@font-face { font-family:'Axiforma'; font-weight:500; font-style:normal; font-display:swap; src:local('Axiforma Medium'), local('Axiforma-Medium'); }
@font-face { font-family:'Axiforma'; font-weight:600; font-style:normal; font-display:swap; src:local('Axiforma SemiBold'), local('Axiforma-SemiBold'); }
@font-face { font-family:'Axiforma'; font-weight:700; font-style:normal; font-display:swap; src:local('Axiforma Bold'), local('Axiforma-Bold'); }
@font-face { font-family:'Axiforma'; font-weight:800; font-style:normal; font-display:swap; src:local('Axiforma ExtraBold'), local('Axiforma-ExtraBold'); }
@font-face { font-family:'Axiforma'; font-weight:850; font-style:normal; font-display:swap; src:local('Axiforma Heavy'), local('Axiforma-Heavy'); }
@font-face { font-family:'Axiforma'; font-weight:900; font-style:normal; font-display:swap; src:local('Axiforma Black'), local('Axiforma-Black'); }

/* ── 3a. Anlamsal token'lar — KOYU tema (uygulamanın varsayılanı) ───────────
   Katman sırası korunur: menü/topbar (ink-1000) < sayfa (ink-900) < kart
   (ink-800) < input. Metin kademesi eski hiyerarşiyle aynı sırada, kontrast
   daha yüksek. */
html.brand-v1 {
  --bg-base:    var(--ink-900);
  --bg-sidebar: var(--ink-1000);
  --bg-surface: var(--ink-800);
  --bg-card:    var(--ink-800);
  --bg-input:   #202A36;
  --bg-subtle:  rgba(255,255,255,0.025);
  --bg-hover:   rgba(255,255,255,0.045);

  --border:        rgba(255,255,255,0.07);
  --border-med:    rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);

  --text-heading:   var(--ink-50);
  --text-primary:   var(--ink-200);
  --text-secondary: var(--ink-400);
  --text-muted:     var(--ink-500);
  --text-faint:     #4E5B68;          /* ink-600 ile 500 arası: ikincil not metni kart üstünde okunur kalsın */
  --text-dim:       var(--ink-700);

  /* Aktif / seçili / birincil = mint */
  --accent:          var(--mint-400);
  --accent-light:    var(--mint-300);
  --accent-glow:     rgba(74,195,149,0.20);
  --accent-fill:     var(--mint-400);   /* birincil dolgu (buton) — iki temada aynı */
  --accent-fill-hover: var(--mint-500);
  --accent-contrast: var(--ink-1000);   /* mint dolgu üstündeki metin */
  --info-fill:          var(--teal-500);   /* ikincil dolgu (teal buton / rozet) — iki temada aynı */
  --info-fill-hover:    var(--teal-600);
  --info-fill-contrast: #FFFFFF;
  --nav-active-bg:   rgba(74,195,149,0.12);

  /* Bağlantı / odak = teal (koyu zeminde okunur ton) */
  --link:         var(--teal-300);
  --link-hover:   var(--teal-200);
  --focus-border: var(--teal-300);
  --focus-ring:   rgba(84,156,186,0.35);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:  0 12px 28px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.30);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-topbar: 0 1px 0 rgba(255,255,255,0.06);

  --toggle-hover:  rgba(255,255,255,0.06);
  --badge-gray-bg: rgba(255,255,255,0.07);

  /* Durum renkleri — yeşil onaylar, amber uyarır, kırmızı durdurur, teal bilgilendirir */
  --ok-text:     var(--mint-400);
  --ok-bg:       rgba(74,195,149,0.12);
  --ok-br:       rgba(74,195,149,0.30);
  --warn-text:   #F2A63A;
  --warn-bg:     rgba(242,166,58,0.12);
  --warn-br:     rgba(242,166,58,0.32);
  --danger-text: #F0676B;
  --danger-bg:   rgba(229,72,77,0.13);
  --danger-br:   rgba(229,72,77,0.34);
  --info-text:   var(--teal-300);
  --info-bg:     rgba(45,133,167,0.16);
  --info-br:     rgba(84,156,186,0.32);

  --alert-err-bg:  var(--danger-bg); --alert-err-br:  var(--danger-br);
  --alert-ok-bg:   var(--ok-bg);     --alert-ok-br:   var(--ok-br);
  --alert-warn-bg: var(--warn-bg);   --alert-warn-br: var(--warn-br);
  --btn-danger-br:  rgba(229,72,77,0.40);
  --btn-danger-hov: rgba(229,72,77,0.10);

  --nav-pending: var(--mint-400);

  /* Ton paleti — mevcut ekranların kategorik renkleri marka rampalarına bağlanır.
     Mor/menekşe markada yok; kategori ayrımı taşıdığı için korunur. */
  --tone-danger-soft: #F4A3A5;
  --tone-ok-soft:     var(--mint-200);
  --tone-warn-soft:   #F7C77E;
  --tone-info-soft:   var(--teal-200);
  --tone-purple-soft: #d8b4fe;
  --tone-muted-soft:  var(--ink-300);
  --tone-blue:        var(--teal-200);   /* --info-text (teal-300) ile ayrışsın */
  --tone-cyan:        var(--brand-cool);
  --tone-violet:      #a78bfa;
  --tone-purple:      #b58cf6;
  --tone-green:       var(--mint-400);
  --tone-emerald:     var(--mint-300);
  --tone-amber:       #F2A63A;
  --tone-yellow:      #F5C15E;
  --tone-red:         #F0676B;
  --tone-slate:       var(--ink-200);
  --tone-heat:        var(--brand-heat);

  /* Grafik paleti — marka rampaları seriyi taşır, nötrler arka planda kalır.
     Chart.js tuvali CSS okuyamaz → sayfalar getComputedStyle ile çözer. */
  --chart-1: var(--mint-400);
  --chart-2: var(--teal-300);
  --chart-3: var(--brand-cool);
  --chart-4: #F2A63A;
  --chart-5: var(--brand-heat);
  --chart-6: var(--mint-200);
  --chart-7: var(--teal-200);
  --chart-8: var(--ink-400);
  --chart-grid: rgba(255,255,255,0.06);
  --chart-axis: var(--ink-400);
}

/* ── 3b. Anlamsal token'lar — AÇIK tema ──────────────────────────────────── */
html.brand-v1[data-theme="light"] {
  --bg-base:    var(--ink-50);
  --bg-sidebar: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-card:    #FFFFFF;
  --bg-input:   #F9FAFB;
  --bg-subtle:  #F7F8FA;
  --bg-hover:   rgba(18,26,36,0.035);

  --border:        rgba(18,26,36,0.09);
  --border-med:    rgba(18,26,36,0.16);
  --border-strong: rgba(18,26,36,0.26);

  --text-heading:   var(--ink-900);
  --text-primary:   var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-dim:       var(--ink-200);

  /* Beyaz zeminde mint-400 metin olarak okunmaz (2.2:1) → metin/kenarlık için
     koyu mint; dolgular (birincil buton) yine mint-400. */
  --accent:          var(--mint-600);
  --accent-light:    var(--mint-700);
  --accent-glow:     rgba(74,195,149,0.22);
  --accent-contrast: var(--ink-1000);
  --nav-active-bg:   var(--mint-50);

  --link:         var(--teal-500);
  --link-hover:   var(--teal-600);
  --focus-border: var(--teal-500);
  --focus-ring:   rgba(17,112,153,0.18);

  --shadow-xs:  0 1px 2px rgba(18,26,36,0.06);
  --shadow-sm:  0 1px 3px rgba(18,26,36,0.08), 0 1px 2px rgba(18,26,36,0.04);
  --shadow-md:  0 4px 12px rgba(18,26,36,0.08), 0 2px 4px rgba(18,26,36,0.04);
  --shadow-lg:  0 12px 28px rgba(18,26,36,0.10), 0 4px 8px rgba(18,26,36,0.04);
  --shadow-xl:  0 24px 48px rgba(18,26,36,0.14), 0 8px 16px rgba(18,26,36,0.06);
  --shadow-card:   0 1px 2px rgba(18,26,36,0.05), 0 0 0 1px rgba(18,26,36,0.07);
  --shadow-topbar: 0 1px 0 rgba(18,26,36,0.08);

  --toggle-hover:  rgba(18,26,36,0.05);
  --badge-gray-bg: var(--ink-50);

  /* WCAG AA (küçük metin ≥4.5:1) koyulaştırılmış eşdeğerler */
  --ok-text:     var(--mint-700);
  --ok-bg:       var(--mint-50);
  --ok-br:       rgba(74,195,149,0.40);
  --warn-text:   #9A5B0B;
  --warn-bg:     #FEF5E7;
  --warn-br:     rgba(242,166,58,0.42);
  --danger-text: #C62A2F;
  --danger-bg:   #FDEEEE;
  --danger-br:   rgba(229,72,77,0.36);
  --info-text:   var(--teal-600);
  --info-bg:     var(--teal-50);
  --info-br:     rgba(17,112,153,0.28);

  --alert-err-bg:  var(--danger-bg); --alert-err-br:  var(--danger-br);
  --alert-ok-bg:   var(--ok-bg);     --alert-ok-br:   var(--ok-br);
  --alert-warn-bg: var(--warn-bg);   --alert-warn-br: var(--warn-br);
  --btn-danger-br:  rgba(229,72,77,0.40);
  --btn-danger-hov: rgba(229,72,77,0.07);

  --nav-pending: var(--mint-500);

  --tone-danger-soft: #C62A2F;
  --tone-ok-soft:     var(--mint-700);
  --tone-warn-soft:   #9A5B0B;
  --tone-info-soft:   var(--teal-600);
  --tone-purple-soft: #7e22ce;
  --tone-muted-soft:  var(--ink-500);
  --tone-blue:        var(--teal-500);
  --tone-cyan:        #16799F;
  --tone-violet:      #6d28d9;
  --tone-purple:      #7e22ce;
  --tone-green:       var(--mint-700);
  --tone-emerald:     var(--mint-600);
  --tone-amber:       #9A5B0B;
  --tone-yellow:      #8A6400;
  --tone-red:         #C62A2F;
  --tone-slate:       var(--ink-600);
  --tone-heat:        #B4501F;

  --chart-1: var(--mint-400);
  --chart-2: var(--teal-500);
  --chart-3: var(--brand-cool);
  --chart-4: var(--brand-warning);
  --chart-5: var(--brand-heat);
  --chart-6: var(--mint-700);
  --chart-7: var(--teal-200);
  --chart-8: var(--ink-300);
  --chart-grid: rgba(18,26,36,0.07);
  --chart-axis: var(--ink-400);
}

/* ── 4. Ortak bileşenler ─────────────────────────────────────────────────── */

/* Temel tipografi — Axiforma sıkı başlık, rahat gövde. Rakamlar hizalı. */
html.brand-v1 body { font-family:var(--font-sans); }
html.brand-v1 ::selection { background:rgba(74,195,149,0.30); }
html.brand-v1 :focus-visible { outline:2px solid var(--focus-border); outline-offset:2px; }
html.brand-v1 td,
html.brand-v1 .kpi-card__value,
html.brand-v1 .stat-value { font-variant-numeric:tabular-nums; }

/* Topbar: resmi wordmark + "PLATFORM" etiketi (brand kit başlığındaki
   "ENERVON | BRANDKIT" düzeni). Koyu yüzeyde ters (beyaz) logo, açıkta renkli. */
html.brand-v1 .topbar-brand { gap:0.7rem; letter-spacing:0; }
html.brand-v1 .brand-wordmark { display:block; height:17px; width:auto; }
html.brand-v1 .brand-wordmark--color { display:none; }
html.brand-v1[data-theme="light"] .brand-wordmark--color { display:block; }
html.brand-v1[data-theme="light"] .brand-wordmark--white { display:none; }
html.brand-v1 .brand-divider { width:1px; height:16px; background:var(--border-med); flex-shrink:0; }
html.brand-v1 .brand-product {
  font-size:0.64rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap;
}
html.brand-v1 .topbar-btn { border-radius:var(--r-sm); }
html.brand-v1 .topbar-search { border-radius:var(--r-pill); }
html.brand-v1 .btn-logout { border-radius:var(--r-pill); font-weight:600; }
html.brand-v1 .btn-logout:hover { color:var(--danger-text); border-color:var(--danger-br); background:var(--danger-bg); }
html.brand-v1 #notifBadge { background:var(--brand-alert) !important; }
@media (max-width:600px) {
  html.brand-v1 .brand-divider,
  html.brand-v1 .brand-product { display:none; }
  html.brand-v1 .brand-wordmark { height:15px; }
}

/* Sol menü — seçili sayfa mint tonuyla */
html.brand-v1 .nav-top,
html.brand-v1 .nav-link { border-radius:var(--r-sm); }
html.brand-v1 .nav-top.active,
html.brand-v1 .nav-link.active { background:var(--nav-active-bg); color:var(--accent-light); font-weight:600; }
html.brand-v1 .nav-group.open .nav-group-header { color:var(--text-heading); }

/* Sayfa başlığı — sıkı, negatif harf aralığı */
html.brand-v1 .page-title { font-size:1.45rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2; }
html.brand-v1 .page-sub { font-size:0.8rem; color:var(--text-secondary); margin-top:0.3rem; }
@media (max-width:600px) { html.brand-v1 .page-title { font-size:1.2rem; } }
html.brand-v1 .page-status-pill {
  background:var(--warn-bg); border-color:var(--warn-br); color:var(--warn-text);
  border-radius:var(--r-pill);
}
html.brand-v1 .page-status-pill::before { background:var(--brand-warning); box-shadow:none; }

/* Kart — ince kenarlık + yumuşak soğuk gölge, r-lg */
html.brand-v1 .card {
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs);
}
html.brand-v1 .card-title {
  font-size:0.69rem; font-weight:600; letter-spacing:0.14em; color:var(--text-muted);
}
@media (max-width:600px) { html.brand-v1 .card { border-radius:var(--r-md); } }

/* Butonlar — tek birincil (mint), ikincil (teal), çerçeveli, sessiz, tehlike */
html.brand-v1 .btn {
  border-radius:var(--r-pill); font-weight:600; padding:0.52rem 1.1rem;
  font-family:inherit; line-height:1.3;
  transition:background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
html.brand-v1 .btn-primary { background:var(--accent-fill); color:var(--accent-contrast); box-shadow:none; }
html.brand-v1 .btn-primary:hover { background:var(--accent-fill-hover); color:var(--accent-contrast); box-shadow:none; }
html.brand-v1 .btn-secondary { background:var(--info-fill); color:var(--info-fill-contrast); border:none; }
html.brand-v1 .btn-secondary:hover { background:var(--info-fill-hover); }
html.brand-v1 .btn-ghost { background:transparent; color:var(--text-heading); border:1px solid var(--border-strong); }
html.brand-v1 .btn-ghost:hover { background:var(--bg-hover); border-color:var(--text-faint); color:var(--text-heading); }
html.brand-v1 .btn-quiet { background:var(--badge-gray-bg); color:var(--text-heading); border:none; }
html.brand-v1 .btn-quiet:hover { background:var(--bg-hover); }
html.brand-v1 .btn-danger { background:transparent; color:var(--danger-text); border:1px solid var(--btn-danger-br); }
html.brand-v1 .btn-danger:hover { background:var(--btn-danger-hov); }
html.brand-v1 .btn:disabled,
html.brand-v1 .btn[disabled],
html.brand-v1 .btn.disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }
html.brand-v1 .btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
@media (max-width:600px) { html.brand-v1 .btn { padding:0.62rem 1rem; } }

/* Rozetler ve KPI kartları → 6. bölüm (liste ve özet dili). */
html.brand-v1 .stat-card { border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
html.brand-v1 .stat-value { font-weight:800; }
html.brand-v1 .stat-label { letter-spacing:0.12em; font-size:0.66rem; }

/* Formlar — etiket cümle düzeninde, input r-md, odak teal */
html.brand-v1 .field label {
  font-size:0.78rem; font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--text-primary);
}
html.brand-v1 .field label .req { color:var(--danger-text); }
html.brand-v1 .field input,
html.brand-v1 .field select,
html.brand-v1 .field textarea { border-radius:var(--r-md); padding:0.6rem 0.85rem; }
html.brand-v1 .field input:focus,
html.brand-v1 .field select:focus,
html.brand-v1 .field textarea:focus { border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); }
html.brand-v1 .field .hint { color:var(--text-muted); }
html.brand-v1 .sep-label { letter-spacing:0.14em; font-weight:600; color:var(--text-muted); }
html.brand-v1 .mfr-row { border-radius:var(--r-md); }

/* Uyarı kutuları → bölüm 6i "Sayfa bildirimleri" (.page-notices + .notice).
   Eski .alert ailesi 2026-10-03'te kaldırıldı; tek bildirim dili oradadır. */

/* ── 5. Yardımcı sınıflar (yeni ekranlar ve dönüşümler için) ─────────────── */
/* Rakam hizası: tablolarda tutar/adet sütunları */
html.brand-v1 .num  { font-variant-numeric:tabular-nums; }
html.brand-v1 .mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
/* Overline — 11px / 0.14em / 600 / büyük harf */
html.brand-v1 .overline {
  font-size:0.69rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-muted);
}
/* Rozet noktası — "● Çevrimiçi" dili */
html.brand-v1 .badge-dot::before {
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;
}
/* Bağlantı rengi (teal) */
html.brand-v1 .link { color:var(--link); }
html.brand-v1 .link:hover { color:var(--link-hover); text-decoration:underline; }
/* Segment kontrol — Haftalık / Aylık / Yıllık */
html.brand-v1 .seg {
  display:inline-flex; align-self:flex-start; gap:2px; padding:3px; border-radius:var(--r-md);
  background:var(--badge-gray-bg); border:1px solid var(--border);
}
html.brand-v1 .seg > * {
  border:none; background:transparent; color:var(--text-secondary); font:inherit;
  font-size:0.8rem; font-weight:600; padding:0.38rem 0.85rem; border-radius:var(--r-sm); cursor:pointer;
}
/* Seçili parça: .is-active, iki durumlu düğmede aria-pressed="true", sekme rolünde (role="tab") aria-selected="true"
   (ARIA: tab rolünde aria-pressed geçersiz; sepet ve portal ana sayfası sekmeleri aria-selected kullanır). */
html.brand-v1 .seg > .is-active,
html.brand-v1 .seg > [aria-pressed="true"],
html.brand-v1 .seg > [aria-selected="true"] { background:var(--bg-card); color:var(--text-heading); box-shadow:var(--shadow-xs); }

/* ── 6. Liste ve özet dili — TEK KAYNAK ─────────────────────────────────────
   Kanonik rehber: docs/ui_patterns.md. Referans ekran: /crm/projeler.
   Her liste / pano / detay sayfası özet şeridini, tablosunu, kod hücresini,
   durum rozetini ve ilerleme çubuğunu BU bileşenlerle kurar; sayfa kendi
   KPI kartı, tablo, kod ya da rozet stilini yazmaz. Ton (renk) yalnız anlam
   taşır — anlam → ton tablosu docs/ui_patterns.md içinde. */

/* 6a. Özet (KPI) şeridi: ETİKET → DEĞER → alt satır.
   İkon, dekoratif daire, gradyan, renkli üst/sol şerit YOK. Kartın tonu kart
   düzeyinde --kpi-color ile verilir (değer rengi + seçili kenarlık).
   Kolon sayısı --kpi-cols (varsayılan 4); 1300px altı --kpi-cols-md. */
html.brand-v1 .kpi-bar {
  display:grid; grid-template-columns:repeat(var(--kpi-cols, 4), minmax(0, 1fr));
  gap:0.6rem; margin:0 0 1.25rem;
}
@media (max-width:1300px) {
  html.brand-v1 .kpi-bar { grid-template-columns:repeat(var(--kpi-cols-md, var(--kpi-cols, 4)), minmax(0, 1fr)); }
}
@media (max-width:900px) {
  html.brand-v1 .kpi-bar { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
html.brand-v1 .kpi-card {
  position:relative; display:block; min-width:0; height:100%; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md);
  padding:0.85rem 1rem; box-shadow:none; color:inherit; text-decoration:none;
  transition:border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
}
html.brand-v1 .kpi-card--alert { border-left:1px solid var(--border); }
/* Eylem kartı <button> olabilir (ör. listeyi süzen kalite kartı): tarayıcı düğme stilini sıfırla. */
html.brand-v1 button.kpi-card { width:100%; font:inherit; text-align:left; color:inherit; appearance:none; }
/* Tıklanabilir kart (filtre ya da bağlantı): hover NÖTR — renkli kenarlık yalnız seçili karta ait. */
html.brand-v1 a.kpi-card,
html.brand-v1 .kpi-card.is-clickable { cursor:pointer; }
html.brand-v1 a.kpi-card:not(.is-active):hover,
html.brand-v1 .kpi-card.is-clickable:not(.is-active):hover {
  border-color:var(--border-med); background:var(--bg-hover); transform:translateY(-1px); box-shadow:none;
}
/* Seçili (filtre uygulanmış) kart: kendi tonunda kenarlık + ince halka + köşe noktası. */
html.brand-v1 .kpi-card.is-active {
  border-color:var(--kpi-color, var(--accent));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--kpi-color, var(--accent)) 33%, transparent);
  background:var(--bg-hover);
}
html.brand-v1 .kpi-card.is-active::after {
  content:""; position:absolute; top:0.55rem; right:0.6rem; width:7px; height:7px;
  border-radius:50%; background:var(--kpi-color, var(--accent));
}
html.brand-v1 .kpi-card__top { display:block; margin:0; }
html.brand-v1 .kpi-card__icon { display:none; }
html.brand-v1 .kpi-card__label {
  display:block; font-size:0.7rem; font-weight:600; line-height:1.3; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.35rem;
}
html.brand-v1 .kpi-card__value {
  font-size:1.6rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin:0;
  color:var(--kpi-color, var(--text-heading)); font-variant-numeric:tabular-nums;
}
/* Değer bir sayı değil kısa bir durum metniyse (KRİTİK, AÇIK, "Süreklilik normal"). */
html.brand-v1 .kpi-card__value--text { font-size:1.05rem; line-height:1.3; letter-spacing:0; }
/* Değere eşlik eden ikinci rakam (tutar) — kartın tonunda. */
html.brand-v1 .kpi-card__amount {
  font-size:0.95rem; font-weight:700; line-height:1.2; margin-top:0.25rem;
  color:var(--kpi-color, var(--text-primary)); font-variant-numeric:tabular-nums;
}
html.brand-v1 .kpi-card__sub { font-size:0.75rem; line-height:1.35; color:var(--text-secondary); margin-top:0.25rem; }
html.brand-v1 .kpi-card__sub .delta-up   { color:var(--ok-text); }
html.brand-v1 .kpi-card__sub .delta-down { color:var(--danger-text); }
html.brand-v1 .kpi-card .delta-warn { color:var(--warn-text); }
/* Seçili kartta "× temizle" ipucu (tekrar tıklamak filtreyi kaldırır). */
html.brand-v1 .kpi-card__clear {
  position:absolute; bottom:0.5rem; right:0.7rem; font-size:0.6rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--text-secondary);
}

/* 6b. Liste kartı + tablo. Başlık (isteğe bağlı) → araç çubuğu (isteğe bağlı) →
   tablo → alt satır (sayfalama / toplam). */
html.brand-v1 .table-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs); overflow:hidden; margin-bottom:1.25rem; padding:0;
}
html.brand-v1 .table-card__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem 1rem; flex-wrap:wrap;
  padding:0.9rem 1.25rem; border-bottom:1px solid var(--border);
}
html.brand-v1 .table-card__title {
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-heading);
}
html.brand-v1 .table-card__desc { font-size:0.75rem; line-height:1.45; color:var(--text-muted); margin-top:0.2rem; }
html.brand-v1 .table-card__meta { font-size:0.74rem; color:var(--text-muted); white-space:nowrap; }
/* Başlıktaki "Tümü →" gibi bağlantı. */
html.brand-v1 .table-card__link {
  font-size:0.75rem; font-weight:600; color:var(--link); white-space:nowrap; text-decoration:none;
  text-transform:none; letter-spacing:0;
}
html.brand-v1 .table-card__link:hover { color:var(--link-hover); text-decoration:underline; }
html.brand-v1 .table-card__toolbar {
  display:flex; align-items:center; gap:0.5rem 0.75rem; flex-wrap:wrap;
  padding:0.75rem 1.25rem; border-bottom:1px solid var(--border);
}
html.brand-v1 .table-card__foot {
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap;
  padding:0.75rem 1.25rem; border-top:1px solid var(--border); font-size:0.78rem; color:var(--text-muted);
}
html.brand-v1 .table-scroll { overflow-x:auto; }

html.brand-v1 .list-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
html.brand-v1 .list-table th {
  padding:0.65rem 0.75rem; text-align:left; vertical-align:middle; white-space:nowrap;
  font-size:0.7rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-muted); background:transparent; border-bottom:1px solid var(--border);
}
html.brand-v1 .list-table td {
  padding:0.7rem 0.75rem; vertical-align:middle; color:var(--text-primary);
  border-bottom:1px solid var(--border);
}
html.brand-v1 .list-table tbody tr:last-child td { border-bottom:0; }
html.brand-v1 .list-table th:first-child,
html.brand-v1 .list-table td:first-child { padding-left:1.25rem; }
html.brand-v1 .list-table th:last-child,
html.brand-v1 .list-table td:last-child { padding-right:1.25rem; }
html.brand-v1 .list-table tbody tr { transition:background 0.12s; }
html.brand-v1 .list-table tbody tr:hover { background:var(--bg-hover); }
html.brand-v1 .list-table tr[data-href],
html.brand-v1 .list-table tr.is-link { cursor:pointer; }
html.brand-v1 .list-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.brand-v1 .list-table .ctr { text-align:center; }
html.brand-v1 .list-table .nowrap { white-space:nowrap; }
html.brand-v1 .list-table .cell-title { color:var(--text-heading); font-weight:500; }
html.brand-v1 .list-table .cell-sub { display:block; font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; }
html.brand-v1 .list-table .muted { color:var(--text-muted); }
html.brand-v1 .list-table tfoot td { font-weight:700; color:var(--text-heading); border-top:1px solid var(--border-med); border-bottom:0; }
/* Yoğun tablo (detay sayfalarında kalem listeleri). */
html.brand-v1 .list-table--compact td,
html.brand-v1 .list-table--compact th { padding-top:0.5rem; padding-bottom:0.5rem; }
/* Kart gövdesi parçaları — gövde birkaç bloktan oluşuyorsa (ör. kalem adetleri → ölçek →
   karar) her blok .table-card__part: bloklar kalın çizgiyle ayrılır, ilk bloğun üstünde çizgi
   yok (başlık satırının alt çizgisi yeter). Bloklar tek bir <form> içinde de olabilir. İç boşluk
   gerekiyorsa --pad; tablo bloğu .table-scroll ile boşluksuz. İç içe ikinci <details> AÇILMAZ. */
html.brand-v1 .table-card__part { border-top:1px solid var(--border-med); }
html.brand-v1 .table-card__part:first-child,
html.brand-v1 :is(.table-card__head, .table-card__toolbar) + .table-card__part,
html.brand-v1 :is(.table-card__head, .table-card__toolbar) + form > .table-card__part:first-child { border-top:0; }
html.brand-v1 .table-card__part--pad { padding:0.9rem 1.25rem; }
/* Tablo hücresinde adet kutusu (talep / onay / aktarım adedi): dar, sağa dayalı, kalın rakam.
   Sayfa kendi kutu stilini yazmaz. */
html.brand-v1 .list-table .cell-qty {
  width:4.75rem; padding:0.38rem 0.55rem; box-sizing:border-box; text-align:right;
  font:inherit; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-heading);
  background:var(--bg-input); border:1px solid var(--border-med); border-radius:var(--r-md);
}
html.brand-v1 .list-table .cell-qty:focus { outline:none; border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); }
/* Boş liste */
html.brand-v1 .list-empty { padding:3rem 1rem; text-align:center; font-size:0.82rem; color:var(--text-muted); }
html.brand-v1 .list-empty a { color:var(--link); }

/* 6c. Kod hücresi — belge ve kalem kodlarının TÜMÜ (SO, SAT, PR, UE, DZE, PRJ,
   fatura no, HM/YM/mamul kodu, seri no …): tek renk teal, monospace, 700. */
html.brand-v1 .ref-code {
  font-family:var(--font-mono); font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
  color:var(--info-text); font-variant-numeric:tabular-nums; text-decoration:none;
}
html.brand-v1 a.ref-code:hover { color:var(--link-hover); text-decoration:underline; }
html.brand-v1 .ref-code--sm { font-size:0.74rem; }

/* 6d. Durum rozeti — hap; zemin = ton %13, metin = ton. Anlam → ton: docs/ui_patterns.md.
   Kategori rozetleri (aşama, tip, kanal) .badge-tone + --badge-tone ile.
   Yazı BÜYÜK HARF gösterilir (referans /finans/sevk-onayi); kaynak metin "Sevk Edildi"
   biçiminde kalır — Excel, PDF ve ipuçları onu kullanır. lang="tr" → i → İ doğru. */
html.brand-v1 .badge {
  display:inline-flex; align-items:center; gap:0.35rem; border:0; border-radius:var(--r-pill);
  padding:0.18rem 0.6rem; font-size:0.68rem; font-weight:700; letter-spacing:0.03em;
  line-height:1.35; white-space:nowrap; vertical-align:middle; text-transform:uppercase;
}
html.brand-v1 .badge-blue,
html.brand-v1 .badge-info   { background:var(--info-bg);   color:var(--info-text); }
html.brand-v1 .badge-green,
html.brand-v1 .badge-ok     { background:var(--ok-bg);     color:var(--ok-text); }
html.brand-v1 .badge-warn   { background:var(--warn-bg);   color:var(--warn-text); }
html.brand-v1 .badge-danger { background:var(--danger-bg); color:var(--danger-text); }
html.brand-v1 .badge-gray   { background:var(--badge-gray-bg); color:var(--text-secondary); }
html.brand-v1 .badge-tone {
  background:color-mix(in srgb, var(--badge-tone, var(--text-secondary)) 13%, transparent);
  color:var(--badge-tone, var(--text-secondary));
}
/* Dolu çip — yüzde / aşama değeri (ör. CRM ilerleme %10). */
html.brand-v1 .badge-solid { background:var(--info-fill); color:var(--info-fill-contrast); border-radius:5px; }

/* 6e. İlerleme çubuğu — "yapılan / hedef" + yüzde. Çubuğun tonu satırın durum
   tonunu izler (--meter-color): tamam = ok, kısmi = warn, süreçte = info. */
html.brand-v1 .meter { display:grid; gap:0.3rem; min-width:7rem; }
html.brand-v1 .meter__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;
  font-size:0.74rem; font-variant-numeric:tabular-nums; white-space:nowrap;
}
html.brand-v1 .meter__value { font-weight:700; color:var(--text-heading); }
html.brand-v1 .meter__total { color:var(--text-muted); font-weight:500; }
html.brand-v1 .meter__pct { font-weight:600; color:var(--text-secondary); }
html.brand-v1 .meter__track { height:4px; border-radius:var(--r-pill); background:var(--badge-gray-bg); overflow:hidden; }
html.brand-v1 .meter__fill {
  display:block; height:100%; max-width:100%; border-radius:inherit;
  background:var(--meter-color, var(--info-text));
}
html.brand-v1 .meter__foot {
  display:flex; justify-content:space-between; gap:0.5rem; font-size:0.7rem; color:var(--text-muted); white-space:nowrap;
}

/* 6f. Hızlı filtre çipleri — durum / kaynak / dönem. Seçili = mint. */
html.brand-v1 .filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem 0.5rem; }
html.brand-v1 .filter-bar__label {
  font-size:0.66rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  margin-right:0.15rem;
}
html.brand-v1 .filter-bar__sep { width:1px; align-self:stretch; min-height:20px; margin:0 0.35rem; background:var(--border); }
html.brand-v1 .filter-chip {
  display:inline-flex; align-items:center; gap:0.35rem; border:1px solid var(--border-med);
  border-radius:var(--r-pill); padding:0.3rem 0.75rem; background:transparent; color:var(--text-secondary);
  font:inherit; font-size:0.75rem; font-weight:600; line-height:1.2; white-space:nowrap;
  text-decoration:none; cursor:pointer; transition:border-color 0.12s, background 0.12s, color 0.12s;
}
html.brand-v1 .filter-chip:hover { border-color:var(--border-strong); color:var(--text-primary); }
html.brand-v1 .filter-chip.is-active,
html.brand-v1 .filter-chip[aria-pressed="true"] {
  background:var(--nav-active-bg); border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent-light);
}
html.brand-v1 .filter-chip__count { font-size:0.68rem; font-weight:600; color:var(--text-muted); }
html.brand-v1 .filter-chip.is-active .filter-chip__count { color:inherit; opacity:0.8; }

/* 6g. hidden niteliği bileşenin display değerine yenilmesin (JS ile gizle/göster). */
html.brand-v1 :is(.kpi-card, .badge, .filter-chip, .filter-bar, .table-card, .meter, .list-empty, .ref-code, .notice, .page-notices)[hidden] { display:none; }

/* 6h. Katlanabilir kart — <details class="table-card table-card--collapsible" open>
   + <summary class="table-card__head">. Başlık satırı (title + desc + meta) tıklanınca
   gövde kapanır/açılır; sağda küçük ok ([open]'da aşağı döner). Başlığın görünümü
   olduğu gibi kalır (table-card__head). summary içinde form / düğme OLMAZ (tıklama
   çakışır): başlık satırının aksiyonları gövdeye iner. Gövde yalnız [open]'da görünür
   (details'in kendi davranışı). Açık/kapalı tercihi sayfanın nonce'lu betiğiyle
   hatırlanır (data-section + localStorage) — docs/ui_patterns.md "Collapsible card". */
html.brand-v1 details.table-card--collapsible > summary {
  list-style:none; cursor:pointer; position:relative; padding-right:2.75rem; user-select:none;
}
html.brand-v1 details.table-card--collapsible > summary::-webkit-details-marker { display:none; }
html.brand-v1 details.table-card--collapsible > summary::after {
  content:""; position:absolute; right:1.3rem; top:1.2rem; width:0.45rem; height:0.45rem;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:rotate(-45deg); transition:transform 0.15s;
}
html.brand-v1 details.table-card--collapsible[open] > summary::after { transform:translateY(-0.15rem) rotate(45deg); }
html.brand-v1 details.table-card--collapsible > summary:hover { background:var(--bg-hover); }
html.brand-v1 details.table-card--collapsible > summary:hover::after { border-color:var(--text-heading); }
html.brand-v1 details.table-card--collapsible > summary:focus-visible { outline:2px solid var(--focus-border); outline-offset:-2px; }
/* Kapalı kartta başlığın alt çizgisi kalkar (gövde yok). */
html.brand-v1 details.table-card--collapsible:not([open]) > summary { border-bottom:0; }

/* 6i. Sayfa bildirimleri — TEK BÖLGE, TEK TON SÖZLÜĞÜ.
   Sayfanın tamamına dair HER mesaj (işlem sonucu, kural açıklaması, yetki notu,
   eksik/eski veri uyarısı) aynı yerde durur: özet şeridinin hemen ALTINDA, ilk
   içerik kartından önce; özet şeridi olmayan sayfada sayfa başlığının altında.
   Kanonik kural ve yazım: docs/ui_patterns.md → "Sayfa bildirimleri".
   Bölgeyi ortak parça kurar: views/_partials/sayfa_bildirimleri.ejs.
   Anlam → ton (rozetlerle aynı sözlük, docs/ui_patterns.md):
     notice-info    bilgi, açıklama, yönlendirme                     (teal)
     notice-ok      olumlu sonuç — iş tamamlandı                     (yeşil)
     notice-warn    uyarı — iş yapılır ama bir koşul/eksik var       (sarı)
     notice-danger  alarm — hata, engel, başarısız işlem             (kırmızı)
   Boşluğu BÖLGE verir; bildirimin kendisi margin ya da renk yazmaz. İkon/emoji yok.
   Tek istisna .notice--inline: bir forma / panele ait anlık geri bildirim, o öğenin
   yanında durur (sayfa bildirimi değildir). */
html.brand-v1 .page-notices { display:grid; gap:0.6rem; margin:0 0 1.25rem; }
/* Bölge boşsa (içi JS ile dolacak kap boş, ya da kutular gizliyse) hiç yer kaplamaz. */
html.brand-v1 .page-notices > *:empty { display:none; }
html.brand-v1 .page-notices:not(:has(> *:not([hidden]):not(:empty))) { display:none; }
html.brand-v1 .notice {
  margin:0; border:1px solid var(--border); border-radius:var(--r-md);
  padding:0.8rem 1rem; font-size:0.82rem; line-height:1.55;
  background:var(--bg-card); color:var(--text-secondary);
}
html.brand-v1 .notice-info { background:var(--info-bg);   border-color:var(--info-br); }
html.brand-v1 .notice-ok { background:var(--ok-bg);     border-color:var(--ok-br); }
html.brand-v1 .notice-warn { background:var(--warn-bg);   border-color:var(--warn-br); }
html.brand-v1 .notice-danger { background:var(--danger-bg); border-color:var(--danger-br); }
/* Vurgu ve bağlantı: kutunun tonunda. */
html.brand-v1 .notice :is(strong, b) { color:var(--text-heading); font-weight:600; }
html.brand-v1 .notice-info :is(strong, b, a) { color:var(--info-text); }
html.brand-v1 .notice-ok :is(strong, b, a) { color:var(--ok-text); }
html.brand-v1 .notice-warn :is(strong, b, a) { color:var(--warn-text); }
html.brand-v1 .notice-danger :is(strong, b, a) { color:var(--danger-text); }
html.brand-v1 .notice a { text-decoration:underline; }
/* Bildirimin sağına düşen eylem (bağlantı / düğme): aynı satırda, sağa yaslı. */
html.brand-v1 .notice--row {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
/* Satır içi geri bildirim — form / panel yanında. Bölge dışındaki TEK kullanım. */
html.brand-v1 .notice--inline { font-size:0.8rem; padding:0.65rem 0.85rem; }

/* ── 7. Portal bileşenleri (2026-10-03, bayi firma sepeti) — TEK KAYNAK ───────
   Kanonik rehber: docs/ui_patterns.md → "Portal components". Adet seçici, bırakma
   alanı, geçici bildirim (toast) ve başlık sepet düğmesi; sayfa kendi stilini yazmaz.
   Renk yalnız token'la; açık/koyu tema token'lardan gelir. */

/* 7a. Adet seçici — [−] [ 12 ] [+]. Giriş kutusu klavyeyle de kullanılır; düğmeler
   adımlar. Odak halkası teal (focus-within). .is-busy: sunucuya yazılıyor. */
html.brand-v1 .qty-stepper {
  display:inline-flex; align-items:stretch; height:2.15rem; vertical-align:middle;
  border:1px solid var(--border-med); border-radius:var(--r-md); background:var(--bg-input); overflow:hidden;
}
html.brand-v1 .qty-stepper > button {
  width:2rem; border:0; background:transparent; color:var(--text-secondary);
  font:inherit; font-size:1rem; line-height:1; cursor:pointer; padding:0;
}
html.brand-v1 .qty-stepper > button:hover { background:var(--bg-hover); color:var(--text-heading); }
html.brand-v1 .qty-stepper > button:disabled { opacity:0.4; cursor:not-allowed; background:transparent; }
html.brand-v1 .qty-stepper > input {
  width:4.5rem; min-width:0; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border);
  background:transparent; color:var(--text-heading); font:inherit; font-weight:700;
  font-variant-numeric:tabular-nums; text-align:center; -moz-appearance:textfield; appearance:textfield;
}
html.brand-v1 .qty-stepper > input::-webkit-outer-spin-button,
html.brand-v1 .qty-stepper > input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
html.brand-v1 .qty-stepper > input:focus { outline:none; }
html.brand-v1 .qty-stepper:focus-within { border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); }
html.brand-v1 .qty-stepper.is-busy { opacity:0.6; }
html.brand-v1 .qty-stepper.is-error { border-color:var(--danger-br); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger-text) 20%, transparent); }
html.brand-v1 .qty-stepper--sm { height:1.9rem; }
html.brand-v1 .qty-stepper--sm > button { width:1.75rem; font-size:0.9rem; }
html.brand-v1 .qty-stepper--sm > input { width:3.75rem; font-size:0.82rem; }

/* 7b. Bırakma alanı — dosya sürükle-bırak ya da tıkla. Durumlar: boş (varsayılan),
   durumlar .is-over (üzerinde), .is-busy (yükleniyor), .is-error (hata). Dosya girişi alanı kaplar. */
html.brand-v1 .dropzone {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem;
  min-height:9rem; padding:1.25rem; text-align:center; cursor:pointer;
  border:1.5px dashed var(--border-strong); border-radius:var(--r-lg);
  background:var(--bg-subtle); color:var(--text-secondary);
  transition:border-color 0.15s, background 0.15s, color 0.15s;
}
html.brand-v1 .dropzone:hover,
html.brand-v1 .dropzone:focus-within { border-color:var(--text-faint); background:var(--bg-hover); }
html.brand-v1 .dropzone:focus-within { box-shadow:0 0 0 3px var(--focus-ring); border-color:var(--focus-border); }
html.brand-v1 .dropzone.is-over { border-color:var(--accent); background:var(--nav-active-bg); color:var(--accent-light); }
html.brand-v1 .dropzone.is-busy { opacity:0.6; pointer-events:none; }
html.brand-v1 .dropzone.is-error { border-color:var(--danger-br); background:var(--danger-bg); color:var(--danger-text); }
html.brand-v1 .dropzone__title { font-weight:600; color:var(--text-heading); }
html.brand-v1 .dropzone.is-over .dropzone__title,
html.brand-v1 .dropzone.is-error .dropzone__title { color:inherit; }
html.brand-v1 .dropzone__hint { font-size:0.75rem; color:var(--text-muted); }
html.brand-v1 .dropzone__hint a { color:var(--link); text-decoration:underline; position:relative; z-index:1; }
html.brand-v1 .dropzone > input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

/* 7c. Geçici bildirim (toast) — EŞZAMANSIZ bir eylemin geçici onayı ("3 ürün sepete
   eklendi"); 4 sn sonra kendiliğinden kapanır, × ile kapatılır, aria-live="polite".
   Engelleyici hata ve kalıcı açıklama BURADA DEĞİL: .page-notices'te ya da satır içi
   (.notice--inline) durur (docs/ui_patterns.md → "Sayfa bildirimleri"). Tonlar bildirim
   sözlüğüyle aynı: ok (yeşil), info (teal), danger (kırmızı). Yığın sağ altta. */
html.brand-v1 .toast-stack {
  position:fixed; right:1rem; bottom:1rem; z-index:1200; display:grid; gap:0.5rem;
  width:min(22rem, calc(100vw - 2rem)); pointer-events:none;
}
html.brand-v1 .toast {
  pointer-events:auto; display:flex; align-items:flex-start; gap:0.75rem;
  padding:0.75rem 0.9rem; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-lg);
  font-size:0.82rem; line-height:1.45; animation:toast-in 0.18s ease-out;
}
html.brand-v1 .toast-ok { background:var(--ok-bg); border-color:var(--ok-br); }
html.brand-v1 .toast-info { background:var(--info-bg); border-color:var(--info-br); }
html.brand-v1 .toast-danger { background:var(--danger-bg); border-color:var(--danger-br); }
html.brand-v1 .toast__body { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
html.brand-v1 .toast__link { color:var(--link); font-weight:600; text-decoration:underline; margin-left:0.35rem; white-space:nowrap; }
html.brand-v1 .toast__close {
  flex:0 0 auto; border:0; background:transparent; color:var(--text-muted);
  font:inherit; font-size:1.05rem; line-height:1; cursor:pointer; padding:0 0.1rem;
}
html.brand-v1 .toast__close:hover { color:var(--text-heading); }
html.brand-v1 .toast.is-leaving { opacity:0; transform:translateY(0.25rem); transition:opacity 0.18s, transform 0.18s; }
@keyframes toast-in { from { opacity:0; transform:translateY(0.5rem); } to { opacity:1; transform:none; } }

/* 7d. Başlık sepet düğmesi — bildirim ziline komşu; sayaç mint (sayı, alarm değil).
   sınıf .is-bump: sepet yanıtından sonra kısa zıplama (betik sınıfı ekler/kaldırır). */
html.brand-v1 .cart-btn { position:relative; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
html.brand-v1 .cart-btn__count {
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border-radius:var(--r-pill); background:var(--accent-fill); color:var(--accent-contrast);
  font-size:0.62rem; font-weight:700; line-height:16px; text-align:center; font-variant-numeric:tabular-nums;
}
html.brand-v1 .cart-btn__count[hidden] { display:none; }
html.brand-v1 .cart-btn.is-bump .cart-btn__count { animation:cart-bump 0.35s ease-out; }
@keyframes cart-bump { 0% { transform:scale(1); } 40% { transform:scale(1.4); } 100% { transform:scale(1); } }
/* 7e. Hızlı giriş — kod + adet satırları (sepet "Kod ile"; portal ana sayfası hızlı siparişi
   de bunu kullanır). Betik: EnervonSepet.mountQuickEntry(rootEl, { rows }). Yapı:
   quick-entry > quick-entry__row > [quick-entry__code (quick-entry__input + ac-drop +
   quick-entry__sub)] + qty-stepper + quick-entry__remove. Metin kutusu quick-entry__input tek
   kaynaktır; yapıştırma alanı (textarea) da aynı sınıfı taşır. */
html.brand-v1 .quick-entry { display:grid; gap:0.5rem; }
html.brand-v1 .quick-entry__row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:0.5rem; align-items:start; }
html.brand-v1 .quick-entry__code { position:relative; min-width:0; }
html.brand-v1 .quick-entry__input {
  width:100%; box-sizing:border-box; background:var(--bg-input); border:1px solid var(--border-med);
  border-radius:var(--r-md); color:var(--text-primary); font:inherit; font-size:0.85rem; padding:0.5rem 0.7rem; outline:none;
}
html.brand-v1 .quick-entry__input:focus { border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); }
html.brand-v1 .quick-entry__input.is-error { border-color:var(--danger-br); }
html.brand-v1 textarea.quick-entry__input { min-height:9rem; font-size:0.82rem; resize:vertical; }
html.brand-v1 .quick-entry__sub { font-size:0.72rem; color:var(--text-muted); min-height:1rem; margin-top:0.2rem; overflow-wrap:anywhere; }
html.brand-v1 .quick-entry__sub.is-set { color:var(--text-secondary); }
html.brand-v1 .quick-entry__label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-primary); margin-bottom:0.4rem; }
html.brand-v1 .quick-entry__actions { display:flex; gap:0.5rem; margin-top:0.75rem; flex-wrap:wrap; align-items:center; }
html.brand-v1 .quick-entry__remove,
html.brand-v1 .line-remove {
  border:0; background:transparent; color:var(--text-muted); cursor:pointer;
  font:inherit; font-size:1.05rem; line-height:1; padding:0.5rem 0.35rem;
}
html.brand-v1 .line-remove { padding:0.15rem 0.3rem; }
html.brand-v1 .quick-entry__remove:hover,
html.brand-v1 .line-remove:hover { color:var(--danger-text); }
@media (max-width:600px) {
  html.brand-v1 .quick-entry__row { gap:0.35rem; }
}

/* 7f. Otomatik tamamlama açılırı — metin kutusunun altında (combobox + listbox; betik
   aria-expanded ve aria-activedescendant yönetir). Klavyeyle seçili satır is-active. */
html.brand-v1 .ac-drop {
  position:absolute; left:0; right:0; top:100%; z-index:60; margin-top:3px; max-height:16rem; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--border-med); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
}
html.brand-v1 .ac-drop[hidden] { display:none; }
html.brand-v1 .ac-drop__item { padding:0.55rem 0.85rem; cursor:pointer; border-bottom:1px solid var(--border); }
html.brand-v1 .ac-drop__item:last-child { border-bottom:0; }
html.brand-v1 .ac-drop__item:hover,
html.brand-v1 .ac-drop__item.is-active { background:var(--bg-hover); }
html.brand-v1 .ac-drop__desc { display:block; font-size:0.78rem; color:var(--text-primary); margin-top:0.15rem; }
html.brand-v1 .ac-drop__hint { display:block; font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; }
html.brand-v1 .ac-drop__empty { padding:0.7rem 0.9rem; font-size:0.78rem; color:var(--text-muted); }

/* 7g. Düzenlenebilir liste: kaldırılan satır solarak çıkar; dar ekranda eylem kolonu
   yapışkan (list-table--sticky-action: son kolon sağa yapışır, × kaydırmadan erişilir). */
html.brand-v1 .list-table tr.is-leaving { opacity:0; transition:opacity 0.25s; }
html.brand-v1 .list-table--sticky-action th:last-child,
html.brand-v1 .list-table--sticky-action td:last-child { position:sticky; right:0; background:var(--bg-card); border-left:1px solid var(--border); }
html.brand-v1 .list-table--sticky-action tbody tr:hover td:last-child { background:var(--bg-hover); }
/* Dar ekran (≤600px): düzenlenebilir listede yalnız temel kolonlar kalır — cell-mobile-hide taşıyan
   th/td gizlenir (sepet: liste fiyatı, iskonto, birim fiyat; ürün, adet, tutar ve × kalır) ve hücre
   dolgusu daralır. Böylece hiçbir para hücresi yapışkan eylem kolonunun altında kesilmez (390 px'te
   "€1.000,00" → "€1.00" okunuyordu). Gizlenen bilgi özet kartında ve sipariş formunda durur. */
@media (max-width:600px) {
  html.brand-v1 .list-table .cell-mobile-hide { display:none; }
  html.brand-v1 .list-table--sticky-action th,
  html.brand-v1 .list-table--sticky-action td { padding-left:0.45rem; padding-right:0.45rem; }
  /* 390 px bütçesi (ürün + adet + tutar + ×): küçük adet seçici daralır; satır rozeti ("Satıştan
     Kalktı") hap içinde iki satıra kırılabilir — etiket aynı, tablo yatay kaydırmaz. */
  html.brand-v1 .list-table--sticky-action .qty-stepper--sm > button { width:1.5rem; }
  html.brand-v1 .list-table--sticky-action .qty-stepper--sm > input { width:3rem; }
  html.brand-v1 .list-table--sticky-action td .badge { white-space:normal; text-align:center; line-height:1.15; max-width:5rem; padding:0.25rem 0.45rem; font-size:0.64rem; }
}

/* 7h. Özet kartı tanım listesi (sepet özeti; alt etiket cart-summary__sub ikinci satırda) ve
   satır içi bildirim yuvası (inline-slot: betik .notice--inline basar, boşken yer kaplamaz). */
html.brand-v1 .cart-summary dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.5rem 0.75rem; margin:0; font-size:0.85rem; }
html.brand-v1 .cart-summary dt { color:var(--text-secondary); }
html.brand-v1 .cart-summary dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; color:var(--text-primary); white-space:nowrap; }
html.brand-v1 .cart-summary .is-total { display:contents; }
html.brand-v1 .cart-summary .is-total dt,
html.brand-v1 .cart-summary .is-total dd { font-weight:700; color:var(--text-heading); font-size:1.05rem; padding-top:0.35rem; border-top:1px solid var(--border-med); }
html.brand-v1 .cart-summary__sub { display:block; font-size:0.72rem; font-weight:400; color:var(--text-muted); margin-top:0.1rem; }
html.brand-v1 .cart-summary__note { font-size:0.72rem; color:var(--text-muted); margin-top:0.75rem; }
html.brand-v1 .inline-slot { margin-top:0.75rem; }
html.brand-v1 .inline-slot:empty { display:none; }
html.brand-v1 .table-card__part.inline-slot { margin-top:0; }

/* 7i. Portal ana sayfası karşılama bandı (.portal-hero) — bayi portalı v1 S3 (2026-10-04).
   docs/ui_patterns.md → Exceptions ("portal ana sayfası bandı"): ana panonun komuta kartları gibi
   tek istisna; sayfa bandı kendi yazmaz, bu sınıfları kullanır. Görsel dil = giriş ekranı sahnesi
   (mürekkep zemin + nane / turkuaz yumuşak ışık + ince ızgara + enervon-signal filigranı); açık
   temada aynı kurallar açık token'larla çözülür. Yalnız token (hex / rgba yok, color-mix). Hareket
   yok → prefers-reduced-motion'a doğal olarak uyar. Kompakt: masaüstünde ~160–200 px. */
html.brand-v1 .portal-hero {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap;
  min-height:10rem; padding:1.6rem 1.75rem; margin:0 0 1.25rem;
  border:1px solid var(--border); border-radius:var(--r-xl); color:var(--text-primary);
  background:
    radial-gradient(42rem 24rem at 4% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(40rem 26rem at 100% 100%, color-mix(in srgb, var(--info-fill) 26%, transparent), transparent 64%),
    var(--bg-sidebar);
}
html.brand-v1 .portal-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-heading) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-heading) 5%, transparent) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 40%, black 20%, transparent 85%);
          mask-image:radial-gradient(ellipse 80% 75% at 50% 40%, black 20%, transparent 85%);
}
html.brand-v1 .portal-hero::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:min(26rem, 90vw); aspect-ratio:1; right:-6rem; bottom:-11rem;
  background:url('/assets/brand/enervon-signal.svg') center / contain no-repeat; opacity:0.08;
}
html.brand-v1[data-theme="light"] .portal-hero::after { opacity:0.06; }
html.brand-v1 .portal-hero__text { min-width:0; flex:1 1 20rem; }
html.brand-v1 .portal-hero__eyebrow {
  font-size:0.69rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-light); margin-bottom:0.45rem;
}
html.brand-v1 .portal-hero__title {
  margin:0; font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2;
  color:var(--text-heading); overflow-wrap:anywhere;
}
html.brand-v1 .portal-hero__sub { margin:0.45rem 0 0; font-size:0.9rem; line-height:1.5; color:var(--text-secondary); }
html.brand-v1 .portal-hero__actions { display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; flex:0 0 auto; }
@media (max-width:600px) {
  html.brand-v1 .portal-hero { padding:1.25rem 1.1rem; min-height:0; border-radius:var(--r-lg); }
  html.brand-v1 .portal-hero__title { font-size:1.25rem; }
  html.brand-v1 .portal-hero__actions { width:100%; }
  html.brand-v1 .portal-hero__actions .btn { flex:1 1 auto; justify-content:center; }
  /* Ana sayfa sipariş paneli (sipariş · durum · tutar kalır — tarih / sevk kolonları cell-mobile-hide):
     kova rozeti ("Enervon Onayı Bekliyor") hap içinde iki satıra kırılabilir — etiket aynı, tablo
     390 px kart genişliğine sığar (sepet tablosundaki 7g kuralıyla aynı yaklaşım). */
  html.brand-v1 .portal-panel .list-table th,
  html.brand-v1 .portal-panel .list-table td { padding-left:0.5rem; padding-right:0.5rem; }
  html.brand-v1 .portal-panel .list-table td .badge { white-space:normal; text-align:center; line-height:1.15; max-width:7.5rem; padding:0.25rem 0.5rem; font-size:0.64rem; }
}

/* 7j. Ürün kataloğu (bayi portalı B1, 2026-10-04) — TEK KAYNAK. Kanonik rehber: docs/ui_patterns.md →
   "Portal components" → Product card. Sayfa: views/crm/katalog.ejs; betik: public/js/bayi-katalog.js.
   Yapı: catalog-toolbar (arama kutusu catalog-search__input + kategori filter-bar) →
   product-grid > product-card [__media · __name · __code · __price (__net + __vat, __list | __noprice) ·
   stock-light · __buy (qty-stepper + btn) · inline-slot]. Izgara görünüm genişliğine göre:
   1440 px 4 · 1024 px 3 · 768 px 2 · 390 px 1 kolon; kartın içi KART genişliğine göre (kapsayıcı sorgusu):
   dar kartta adet seçici ve düğme alt alta. Stok ışığı: nokta + metin; renk tek başına bilgi taşımaz — nokta
   biçimi de değişir (dolu = Stokta, yarım = Sınırlı stok, boş halka = Stokta yok). Yalnız token. */
html.brand-v1 .catalog-toolbar { display:grid; gap:0.75rem; margin:0 0 1.1rem; }
html.brand-v1 .catalog-search__input {
  width:100%; max-width:28rem; box-sizing:border-box; background:var(--bg-input); border:1px solid var(--border-med);
  border-radius:var(--r-md); color:var(--text-primary); font:inherit; font-size:0.85rem; padding:0.55rem 0.8rem; outline:none;
}
html.brand-v1 .catalog-search__input:focus { border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); }
html.brand-v1 .product-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
@media (max-width:1279.98px) { html.brand-v1 .product-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:899.98px) { html.brand-v1 .product-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { html.brand-v1 .product-grid { grid-template-columns:minmax(0, 1fr); } }
html.brand-v1 .product-card {
  container-type:inline-size; display:flex; flex-direction:column; gap:0.55rem; min-width:0;
  padding:0.9rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
}
html.brand-v1 .product-card[hidden] { display:none; }
html.brand-v1 .product-card:hover { border-color:var(--border-strong); }
html.brand-v1 .product-card__media {
  display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; border-radius:var(--r-md);
  border:1px solid var(--border); color:var(--text-muted); font-size:1.6rem; font-weight:700; letter-spacing:0.08em;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-subtle)), color-mix(in srgb, var(--info-fill) 10%, var(--bg-subtle)));
}
html.brand-v1 .product-card__name {
  margin:0; min-height:2.7em; font-size:0.9rem; font-weight:600; line-height:1.35; color:var(--text-heading);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere;
}
html.brand-v1 .product-card__code { font-size:0.75rem; color:var(--text-muted); }
html.brand-v1 .product-card__price { min-height:3.1rem; }
html.brand-v1 .product-card__net {
  font-size:1.3rem; font-weight:700; letter-spacing:-0.01em; line-height:1.25; color:var(--text-heading); font-variant-numeric:tabular-nums;
}
html.brand-v1 .product-card__vat { margin-left:0.4rem; font-size:0.72rem; font-weight:500; letter-spacing:0; color:var(--text-muted); white-space:nowrap; }
html.brand-v1 .product-card__list { margin-top:0.15rem; font-size:0.75rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
html.brand-v1 .product-card__noprice { font-size:0.85rem; font-weight:600; line-height:1.4; color:var(--text-secondary); }
html.brand-v1 .stock-light {
  display:inline-flex; align-items:center; gap:0.45rem; align-self:flex-start;
  font-size:0.78rem; font-weight:600; line-height:1.2; color:var(--text-secondary);
}
html.brand-v1 .stock-light__dot {
  flex:0 0 auto; box-sizing:border-box; width:0.62rem; height:0.62rem; border-radius:50%;
  border:1.5px solid currentColor; background:currentColor;
}
html.brand-v1 .stock-light--ok { color:var(--ok-text); }
html.brand-v1 .stock-light--warn { color:var(--warn-text); }
html.brand-v1 .stock-light--warn .stock-light__dot { background:linear-gradient(90deg, currentColor 50%, transparent 50%); }
html.brand-v1 .stock-light--danger { color:var(--danger-text); }
html.brand-v1 .stock-light--danger .stock-light__dot { background:transparent; }
html.brand-v1 .product-card__buy { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.5rem; margin-top:auto; padding-top:0.15rem; }
html.brand-v1 .product-card__buy .qty-stepper { display:flex; width:100%; }
html.brand-v1 .product-card__buy .qty-stepper > input { flex:1 1 auto; width:auto; }
html.brand-v1 .product-card__buy .btn { justify-content:center; }
html.brand-v1 .product-card .inline-slot { margin-top:0; }
@container (min-width:16.5rem) {
  html.brand-v1 .product-card__buy { grid-template-columns:auto minmax(0, 1fr); align-items:center; }
  html.brand-v1 .product-card__buy .qty-stepper { width:auto; }
  html.brand-v1 .product-card__buy .qty-stepper > input { flex:0 0 auto; width:3.5rem; }
}

/* Menü sayacı (.nav-count) — bayi menüsündeki Sepet bağlantısının rozeti: başlıktaki sepet
   sayacıyla aynı sayı ve aynı mint hap; 0'da gizli (hidden). Kapalı ikon rayında etiketle birlikte gizlenir. */
html.brand-v1 .nav-count {
  display:inline-block; margin-left:auto; min-width:1.15rem; height:1.15rem; padding:0 0.4rem; border-radius:var(--r-pill);
  background:var(--accent-fill); color:var(--accent-contrast);
  font-size:0.66rem; font-weight:700; line-height:1.15rem; text-align:center; font-variant-numeric:tabular-nums;
}
html.brand-v1 .nav-count[hidden],
html.brand-v1 .sidebar.collapsed .nav-count { display:none; }
/* Çekmece (≤900px) kapalı rayı bilmez: etiketle birlikte sayaç da görünür. */
@media (max-width:900px) { html.brand-v1 .sidebar.collapsed .nav-count:not([hidden]) { display:inline-block; } }

/* Dar telefon (≤480px): sepet düğmesi başlığın sağ kümesine beşinci düğme olarak girer; 42px'lik
   düğmeler 390px'te taşardı. Yalnız sepet düğmesi olan kullanıcıda (:has) küme sıkılaştırılır:
   düğmeler 36px, boşluk yok, çıkış düğmesi daha dar. Diğer kullanıcıların başlığı değişmez. */
@media (max-width:480px) {
  html.brand-v1 .topbar-right:has(.cart-btn) { gap:0; }
  html.brand-v1 .topbar-right:has(.cart-btn) .topbar-btn { width:36px; height:36px; }
  html.brand-v1 .topbar-right:has(.cart-btn) .topbar-btn svg { width:19px; height:19px; }
  html.brand-v1 .topbar-right:has(.cart-btn) .btn-logout { padding:0.3rem 0.45rem; font-size:0.64rem; }
  html.brand-v1 .topbar-right:has(.cart-btn) .cart-btn__count { top:0; right:0; }
}

/* Hareket azaltma: zıplama ve toast animasyonu kapanır. */
@media (prefers-reduced-motion: reduce) {
  html.brand-v1 .toast { animation:none; }
  html.brand-v1 .toast.is-leaving { transition:none; }
  html.brand-v1 .cart-btn.is-bump .cart-btn__count { animation:none; }
}