/* CarbHQ - v0.33 marka yenilemesi.
   Kullanicinin sagladigi CarbHQ marka rehberine (renk paleti + Inter
   tipografisi + yumusak/rounded kart-buton dili) gore guncellendi. Onceki
   v0.17 yenilemesinde oldugu gibi ayni prensip korundu: sablonlarda
   kullanilan degisken ADLARI (--accent, --accent-dark, --text, --border,
   --muted, --card, --bg, --warn-bg, --warn-border, vb.) AYNEN ayni kaldi -
   boylece hicbir sablonu/JS dosyasini (bkz. static/charts.js, SVG grafikler
   dogrudan var(--accent) gibi degiskenleri kullaniyor) bozmadan sadece
   burayi degistirerek TUM uygulamanin gorunumu guncellendi.

   Marka renkleri (CarbHQ marka rehberi):
     Zeytin Yesili  #2F5D3D - ana renk (guven, buyume)
     Adacayi        #7CA982 - destek rengi (denge, surdurulebilirlik)
     Acik Adacayi   #DCEAD6 - arka plan/vurgu (sadelik, ferahlik)
     Kum Beyazi     #FAFBF7 - zemin
     Tas Gri        #E7EAE4 - sinirlar
     Komur Siyahi   #1F2937 - metin (netlik, profesyonellik) */
:root {
  --bg: #FAFBF7;
  --card: #ffffff;
  --border: #E7EAE4;
  --text: #1F2937;
  --muted: #6B7280;
  --muted-icon: #A9B4A5;
  --accent: #2F5D3D;
  --accent-dark: #234830;
  --accent-mid: #7CA982;
  --accent-soft: rgba(47, 93, 61, 0.08);
  --accent-soft-strong: #DCEAD6;
  --warn-bg: #fff7e6;
  --warn-border: #e8c47a;
  --danger-text: #C7495A;
  --danger-bg: rgba(254, 111, 123, 0.12);
  --danger-border: rgba(254, 111, 123, 0.35);
  --info-text: #4B5563;
  --info-bg: #F1F3EF;
  --info-border: #E7EAE4;
  --good-bg: #DCEAD6;
  --shadow-card: 0 1px 2px rgba(31, 41, 55, 0.04), 0 1px 10px rgba(31, 41, 55, 0.04);
  --sidebar-w: 236px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* ------------------------------------------------------------ marka amblemi
   v0.36'da duzeltildi: CSS ile yeniden yaratilmaya calisilan conic-gradient
   yaklasimi kullanicinin referans marka gorselindeki gercek sekli (4 lopa
   sahip, ic-ice binen, ic kenarda kucuk bir centik bulunan bir "pinwheel"
   deseni) hicbir zaman birebir yakalayamadi. Bunun yerine ambleme ait
   pikseller kullanicinin kendi marka rehberi gorselinden doğrudan kirpilip
   (arka plan seffaflastirilarak) static/img/logo-mark.png olarak
   disari alindi; asagidaki kural artik bir CSS sekli degil, o gercek PNG
   varligini uygun boyutta gosteren bir <img> kuralidir. */
.brand-mark {
  width: 22px; height: 22px; flex: none; display: inline-block; object-fit: contain;
}

/* ---------------------------------------------------------------- kabuk */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 20px;
}
.sidebar-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-icon);
  padding: 14px 8px 6px;
  font-weight: 700;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
}
.sidebar-nav a .ic { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-icon); flex: none; }
.sidebar-nav a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.sidebar-nav a.active { background: var(--accent-soft-strong); color: var(--accent-dark); font-weight: 600; }
.sidebar-nav a.active .ic { background: var(--accent); }
.sidebar-spacer { flex: 1; }

/* v0.36 - yeni cok sayfali bilgi mimarisinin ana navigasyonu (referans
   gorseldeki 8 ogeli sidebar). nav-ic: her linkin basindaki cizgi ikon
   (renksiz outline, aktifken vurgu rengine boyanir - bkz. .active .nav-ic). */
.sidebar-nav-main { margin-top: 4px; }
.nav-ic { width: 17px; height: 17px; flex: none; color: var(--muted-icon); }
.sidebar-nav a:hover .nav-ic, .sidebar-nav a.active .nav-ic { color: var(--accent-dark); }
.nav-badge {
  margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px;
}
.sidebar-user {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 13px;
}
.sidebar-user .email { color: var(--text); font-weight: 600; word-break: break-all; display:block; margin-bottom: 2px; }
.sidebar-user a { color: var(--muted); font-size: 12px; text-decoration: none; }
.sidebar-user a:hover { color: var(--accent); }

.main-col { flex: 1; min-width: 0; }
/* v0.36 - kullanicinin acik geri bildirimi uzerine: eskiden 1040px olan
   max-width, referans gorseldeki dolu/genis yerlesime gore 1400px'e
   cikarildi - eski deger, genis ekranlarda sayfanin sag/solunda gereksiz
   bosluk birakiyordu. */
.content-wrap { max-width: 1400px; margin: 0 auto; padding: 22px 28px 80px; }

/* v0.36 - yeni sayfalarin (Ana Sayfa/Urunler/Analizler vb.) ust cubugu:
   tesis secici + yardim + bildirim zili + kullanici rozeti (referans
   gorseldeki ust bar). Tarih araligi secici BILEREK eklenmedi - uygulama
   gercekte tarih araligina gore filtreleme yapmiyor, uydurma/isliv olmayan
   bir kontrol koymamak icin (bkz. proje genelindeki durustluk ilkesi). */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 14px 28px;
  border-bottom: 1px solid var(--border); background: var(--card);
}
.topbar-facility select {
  width: auto; min-width: 180px; font-weight: 600; padding: 8px 10px;
}
.topbar-spacer { flex: 1; }
.topbar-help {
  display: flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.topbar-help:hover { color: var(--accent-dark); }
.topbar-bell { position: relative; color: var(--muted); display: flex; align-items: center; padding: 4px; }
.topbar-bell:hover { color: var(--accent-dark); }
.topbar-bell-badge {
  position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger-text); border: 2px solid var(--card);
}
.topbar-user { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid var(--border); }
.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft-strong); color: var(--accent-dark);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none;
}
.topbar-user-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-user-name { font-size: 13px; font-weight: 700; color: var(--text); }
.topbar-user-role { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .topbar-help span, .topbar-user-text { display: none; } .topbar { padding: 12px 16px; } }

/* girisim/giris-kayit gibi oturum acilmamis sayfalar icin sade, ortalanmis kabuk */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-shell .auth-brand {
  display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 18px;
  font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none;
}
.auth-shell .card { width: 100%; }
.auth-shell .row { grid-template-columns: 1fr; }

.mobile-topbar { display: none; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; padding: 12px 16px; }
  .sidebar-brand { padding: 4px 8px; }
  .sidebar-section-label { display: none; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-spacer { display: none; }
  .sidebar-user { border-top: none; border-left: 1px solid var(--border); padding: 0 0 0 12px; margin-left: auto; }
  .sidebar-user .email { display: none; }
  .content-wrap { padding: 20px 16px 60px; }
}

/* ------------------------------------------------------------- yerlesim */
.flash { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px; color: #6b5218; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
h1 { font-size: 23px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 16px; font-weight: 700; }
.subtitle { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.page-eyebrow { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--text); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.toggle-group { display: flex; gap: 8px; margin-bottom: 6px; }
.toggle-btn { flex: 1; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; text-align: center; }
.toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary, a.button {
  background: var(--accent); color: #fff !important; border: none; border-radius: 10px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block;
}
button.primary:hover, a.button:hover { background: var(--accent-dark); }
button.secondary, a.secondary {
  background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; cursor: pointer; margin: 10px 6px 0 0; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; line-height: 1.3;
}
button.secondary:hover, a.secondary:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }

/* Ince, "dusuk oncelikli" metin baglantilari - satir ici "Veri sayfasi ->",
   "degistir", "Detay ->" gibi kucuk eylemler icin. Tarayicinin varsayilan
   mavi+alti-cizili link gorunumunu ("cok cirkin" geri bildirimi) buradan
   duzeltiyoruz: alt cizgi yok, marka rengiyle uyumlu ama daha yumusak,
   sadece uzerine gelince alt cizgi cikiyor. */
a.small-link {
  font-size: 13px; color: var(--accent-dark); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color .1s;
}
a.small-link:hover { border-bottom-color: var(--accent-dark); }

/* Metin gibi gorunen ama aslinda bir <button type=submit> olan eylemler
   (ör. "kendi degerimi temizle") icin - cerceve/arka plan yok, sadece
   small-link ile ayni renk/altizgi davranisi. */
button.link-action {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; font-family: inherit;
}
button.link-action:hover { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }

table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
td, th { padding: 9px 6px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: rgba(54, 54, 54, 0.02); }
td a { color: var(--accent-dark); text-decoration: none; }
td a:hover { text-decoration: underline; }

/* -------------------------------------------------------- hap etiketler */
.badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--info-bg); color: var(--info-text);
  border: 1px solid var(--info-border); margin-left: 6px; line-height: 1.6;
}
.badge-good { background: var(--good-bg); color: var(--accent-dark); border-color: var(--accent-soft-strong); }
.badge-warn { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

/* v0.32 - mevzuat verisi yari-otomatik ice aktarma onizlemesindeki fark
   (diff) etiketleri: eklenen/degisen/kaldirilan satirlari ayni renk
   dilinde (badge ile ayni degiskenler) ama tablo ici kucuk etiket olarak
   gosterir. */
.difftag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; line-height: 1.6; }
.difftag-added { background: var(--good-bg); color: var(--accent-dark); border: 1px solid var(--accent-soft-strong); }
.difftag-changed { background: var(--warn-bg); color: #8a5a00; border: 1px solid var(--warn-border); }
.difftag-removed { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 620px) { .result-grid { grid-template-columns: 1fr; } }
.result-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.result-tile .num { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.result-tile .label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------ kpi/stat kartlari (panel ustu) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.stat-card .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stat-card .stat-value { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.stat-card .stat-value small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }

/* ------------------------------------------------------- onboarding (v0.27) */
.onboarding-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
@media (max-width: 820px) { .onboarding-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .onboarding-steps { grid-template-columns: 1fr; } }
.onboarding-step {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: var(--text); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.onboarding-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.onboarding-step.done { border-color: var(--accent-soft-strong); background: var(--good-bg); }
.onboarding-step-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.onboarding-step.done .onboarding-step-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.onboarding-step-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.onboarding-step-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }

.onboarding-modal-backdrop {
  position: fixed; inset: 0; background: rgba(54, 54, 54, 0.45); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.onboarding-modal {
  background: var(--card); border-radius: 16px; max-width: 460px; width: 100%; padding: 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.onboarding-slide { display: none; min-height: 120px; }
.onboarding-slide.active { display: block; }
.onboarding-slide-eyebrow {
  color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 8px;
}
.onboarding-modal-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0; }
.onboarding-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all .15s; }
.onboarding-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }
.onboarding-modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------- beyan sahibi kaydi rehberi (v0.29) */
.declarant-checklist { display: flex; flex-direction: column; gap: 10px; }
.declarant-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg);
}
.declarant-item.done { border-color: var(--accent-soft-strong); background: var(--good-bg); }
.declarant-item-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--border); margin-top: 2px;
}
.declarant-item.done .declarant-item-check { background: var(--accent); border-color: var(--accent); }
.declarant-item-body { flex: 1; }

.disclaimer { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px;
  padding: 14px 16px; font-size: 13px; color: #6b5218; margin: 0 0 20px; }
.disclaimer.tone-good { background: var(--good-bg); border-color: var(--accent-soft-strong); color: var(--accent-dark); }
.deadline-banner { background: var(--good-bg); border: 1px solid var(--accent-soft-strong); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 20px; font-size: 14px; }
.deadline-banner.tone-alert { background: var(--danger-bg); border-color: var(--danger-border); }
footer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 40px; }
.facility-block { margin-bottom: 18px; }
.product-block { margin-left: 0; margin-top: 10px; padding: 14px; background: var(--bg);
  border-radius: 10px; border: 1px solid var(--border); }
.small-link { font-size: 13px; }

.meter-track { background: var(--border); border-radius: 999px; height: 8px; width: 100%;
  overflow: hidden; }
.meter-fill { background: var(--accent); height: 100%; border-radius: 999px; }
.meter-labels { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--muted); margin-top: 5px; }
.meter-labels .end-value { color: var(--text); font-weight: 600; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; flex: none; }
.status-dot.good { background: var(--accent); }
.status-dot.warn { background: #E0A73E; }
.watch-item { display: inline-flex; align-items: center; margin-right: 14px; }

/* ---------------------------------------------------------- oz-tamamlama / dropdown alanlari
   ("CN kodu ara" gibi alanlarin GERCEK, tiklanabilir bir acilir liste gibi
   gorunmesi icin - v0.17'de kullanici bunun sade bir metin kutusu gibi
   goründügünü belirtti). Bir asagi ok ikonu + odaklaninca vurgulanan kenarlik
   + sonuc listesinde net hover/kenarlik ile "burasi bir secim listesi" hissi
   veriyoruz. */
.search-field { position: relative; }
.search-field input[type=text] { padding-right: 30px; cursor: text; }
.search-field::after {
  content: "";
  position: absolute; right: 11px; top: 34px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted-icon); border-bottom: 2px solid var(--muted-icon);
  transform: rotate(45deg);
  pointer-events: none;
}
.search-field .hint { position: relative; }
.dropdown-panel {
  position: absolute; z-index: 20; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; width: 100%; max-height: 300px; overflow: auto; display: none;
  box-shadow: 0 8px 24px rgba(54, 54, 54, 0.12); margin-top: 4px;
}
.dropdown-item {
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.active { background: var(--accent-soft); }
.dropdown-item strong { color: var(--text); }
.dropdown-empty { padding: 12px; font-size: 13px; color: var(--muted); }
.dropdown-fallback-note { padding: 7px 12px; font-size: 11px; background: var(--warn-bg); color: #6b5218; }
.dropdown-group-head { padding: 7px 12px; background: var(--bg); font-size: 12px; font-weight: 700; }
.dropdown-sub { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.dropdown-sub:hover { background: var(--accent-soft); }

/* ------------------------------------------------------------------ grafikler */
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.chart-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 4px; }
@media (max-width: 900px) { .chart-grid-2 { grid-template-columns: 1fr; } }
.chart-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.chart-subtitle { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.chart-empty { font-size: 13px; color: var(--muted); padding: 30px 0; text-align: center; }

.trend-svg { display: block; }
.trend-labels { position: relative; height: 16px; margin-top: 4px; }
.trend-labels span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* v0.34 - dikey cubuk grafik (bkz. renderColumnChart) */
.column-svg { display: block; }
.column-svg .column-axis-label { font-size: 10px; fill: var(--muted); font-family: inherit; }
.column-svg .column-value-label { font-size: 11px; font-weight: 700; fill: var(--text); font-family: inherit; }

.chart-tooltip {
  position: absolute; z-index: 30; background: var(--text); color: #fff; font-size: 12px;
  padding: 6px 10px; border-radius: 8px; pointer-events: none; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: nowrap;
}

.ranking-bars { display: flex; flex-direction: column; gap: 10px; }
.ranking-row { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 10px; }
.ranking-label { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-track { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; height: 12px; overflow: hidden; }
.ranking-fill { background: var(--accent); height: 100%; border-radius: 999px; }
.ranking-value { font-size: 12px; font-weight: 700; text-align: right; color: var(--text); }

.progress-ring { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.progress-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.progress-ring-num { font-size: 22px; font-weight: 700; color: var(--text); }
.progress-ring-sub { font-size: 11px; color: var(--muted); margin-top: 2px; max-width: 92px; }
.forecast-card-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.forecast-figures { width: 100%; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.forecast-figures strong { display: block; font-size: 13px; color: var(--text); font-weight: 700; }

/* ---------------------------------------------------- panel karsilama basligi (v0.34) */
.panel-header { margin-bottom: 18px; }
.panel-header-title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.panel-header-sub { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------------------------------------------------------------- kpi kartlari (v0.34) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-card); }
.kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.kpi-value small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.kpi-hint { font-size: 11px; color: var(--muted-icon); margin-top: 6px; line-height: 1.4; }
/* v0.35 - "gecen ceyrege gore" degisim rozeti. Renk yargisi (iyi/kotu)
   BILEREK yok - sadece yon (▲/▼) + miktar (bkz. app.py _fmt_delta yorumu). */
.kpi-delta { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 700;
  color: var(--text); background: var(--info-bg); border: 1px solid var(--info-border);
  border-radius: 999px; padding: 2px 9px; margin-top: 6px; }
.kpi-delta small { font-size: 10px; font-weight: 600; color: var(--muted); }

/* ----------------------------------------------- alt panel uclusu: acik veri talepleri /
   denetim hazirligi / audit trail (v0.34) */
.bottom-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; align-items: start; }
@media (max-width: 700px) { .bottom-grid-3 { grid-template-columns: 1fr; } }
.panel-subcard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.panel-subcard-header h3 { margin: 0; }
.year-select-mini { width: auto; padding: 5px 8px; font-size: 12px; font-weight: 600; border-radius: 7px; }
.panel-subcard-link { font-size: 12px; font-weight: 700; color: var(--accent-dark); text-decoration: none; white-space: nowrap; }
.panel-subcard-link:hover { text-decoration: underline; }
.mini-activity-list { display: flex; flex-direction: column; gap: 12px; }
.mini-activity-row { display: flex; gap: 10px; align-items: flex-start; }
.mini-activity-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--accent-dark); font-size: 13px; font-weight: 700; }
.mini-activity-body { min-width: 0; }
.mini-activity-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mini-activity-when { font-size: 11px; color: var(--muted); margin-top: 1px; }
.panel-subcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-card); }
.panel-subcard h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }

/* v0.35 - "Beyan Durumu" adim listesi (bkz. declaration_status.py) */
.declaration-steps { display: flex; flex-direction: column; gap: 4px; }
.declaration-step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.declaration-step:last-child { border-bottom: none; }
.declaration-step-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; background: var(--info-bg); color: var(--muted);
  border: 1px solid var(--info-border); margin-top: 1px; }
.declaration-step-icon.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.declaration-step-icon.partial { background: var(--warn-bg); border-color: var(--warn-border); color: #8a5a00; }
.declaration-step-label { font-size: 13px; font-weight: 600; color: var(--text); }
.declaration-step-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.open-request-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); }
.open-request-row:last-child { border-bottom: none; }
.open-request-main { font-size: 13px; color: var(--text); font-weight: 600; }
.open-request-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.open-request-days { font-size: 11px; font-weight: 700; color: var(--danger-text); background: var(--danger-bg);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

.audit-readiness-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.audit-readiness-score { font-size: 30px; font-weight: 700; color: var(--accent-dark); }
.audit-checklist-item { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.audit-checklist-item:last-child { border-bottom: none; }
.audit-checklist-state { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.audit-checklist-state.done { background: var(--good-bg); color: var(--accent-dark); }
.audit-checklist-state.partial { background: var(--warn-bg); color: #8a5a00; }
.audit-checklist-state.todo { background: var(--danger-bg); color: var(--danger-text); }
.audit-checklist-state.no-data { background: var(--info-bg); color: var(--muted); }

.audit-trail-list { display: flex; flex-direction: column; }
.audit-trail-entry { padding: 9px 0; border-bottom: 1px solid var(--border); }
.audit-trail-entry:last-child { border-bottom: none; }
.audit-trail-entry-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.audit-trail-entry .at-when { color: var(--muted-icon); white-space: nowrap; }
.audit-trail-entry .at-actor { font-weight: 700; color: var(--accent-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-trail-entry .at-action { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 2px; }
.audit-trail-empty, .open-requests-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }

/* --------------------------------------------------------- sidebar tanitim kutusu (v0.36)
   Kullanicinin referans gorselindeki kutuyla birebir eslesecek sekilde
   yeniden kuruldu: yaprak ikonu -> el yazisi stilinde iki satirlik slogan
   (+ saga hizali ok ikonu) -> ince ayirici cizgi -> kalin "CarbHQ" +
   aciklama metni. El yazisi hissi icin Google Fonts'tan "Caveat" eklendi
   (bkz. templates/base.html <head>). */
.sidebar-promo { background: var(--border); border-radius: 14px;
  padding: 16px 12px 16px; margin-top: 14px; }
.sidebar-promo .promo-leaf { color: var(--accent); margin-bottom: 10px; display: block; }
.sidebar-promo .promo-script-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; }
.sidebar-promo .promo-script { font-family: 'Caveat', cursive; font-weight: 600; font-size: 19px;
  line-height: 1.18; color: var(--accent-mid); white-space: nowrap; }
.sidebar-promo .promo-arrow { color: var(--text); flex: none; margin-bottom: 2px; }
.sidebar-promo .promo-divider { border: none; border-top: 1px solid rgba(31, 41, 55, 0.12); margin: 12px 0 10px; }
.sidebar-promo .promo-brand { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.sidebar-promo .promo-body { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 860px) { .sidebar-promo { display: none; } }