/* ═══ rankzupAI tasarım sistemi v6 — "editoryal sıcaklık" (anasayfa kimliği app'e taşındı)
   Palet: sıcak kağıt (#F5F1E8) + kil (#B04628) / çam (#1F5C4D) / amber aksanlar; mor-indigo YOK.
   Tipografi: Hanken Grotesk (tek font — başlık/numeral/gövde/UI). Fontlar
   base.html → /static/fonts/fonts.css. Biçim: keskin köşe (r 4/7/10/8), hairline + amaçlı
   gölge (lift yalnız etkileşimde), cam/blur yok. Degrade yalnız logo/favicon işareti.
   Ayrıntı ve AA doğrulaması: docs/tasarim-v6/APP-PLAN.md. ═══ */

/* Fontlar base.html head'inde /static/fonts/fonts.css ile yüklenir:
   Hanken Grotesk (tek tipografi, başlıklar 700-800). Tasarım v6. */

:root {
  /* ═══ Tasarım v6 — "editoryal sıcaklık" · AÇIK tema (sıcak kağıt paleti) ═══ */
  /* Fontlar */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  /* yüzeyler — sıcak kağıt, cam/degrade yok */
  --bg: #F5F1E8;            /* kağıt (kremsi eggshell) */
  --surface: #EFEADC;      /* sidebar/topbar — bir tık derin krem */
  --card: #FCFAF4;         /* kart yüzeyi (sıcak beyaza yakın) */
  --card-solid: #FCFAF4;
  --card-hover: #FFFFFF;
  --inset: #EDE7D8;        /* gömük alan (kod/inset) */
  --border: rgba(28, 26, 21, .11);        /* sıcak hairline ~#E2DBCA */
  --border-strong: rgba(28, 26, 21, .19); /* ~#D2C9B4 */
  /* mürekkep — sıcak siyah/taupe (AA doğrulandı, bkz. APP-PLAN.md) */
  --text: #1C1A15;         /* ana metin (paper 15.4:1) */
  --text-2: #544E3D;       /* ikincil (paper 7.4:1) */
  --muted: #635D49;        /* üçüncül (inset 5.3:1) */
  --faint: #6E6851;        /* açıklama/placeholder (inset 4.5:1) */
  /* marka — kil/terrakota; degrade yok, düz aksan */
  --accent: #B04628;       /* kil — buton dolgusu(beyaz 5.6:1) + metin(paper 5.0:1) */
  --accent-btn: #B04628;   /* v6 (tasarım #8): primary buton dolgusu — açıkta = accent */
  --accent-hover: #A23F1F; /* kil-deep — hover/press */
  --accent-2: #A23F1F;     /* kil-deep — kicker/etiket metni */
  --cyan: #1F5C4D;         /* çam (eski cyan token'ı — olumlu/ikincil vurgu) */
  --grad: linear-gradient(125deg, #C1502E, #A23F1F 52%, #1F5C4D 150%);  /* yalnız logo/favicon işareti */
  /* durum */
  --ok: #1F5C4D;           /* çam-yeşili (paper 6.9:1) */
  --bad: #A83226;          /* kiremit-kırmızı, kil'den ayrık (paper 5.9:1) */
  --warn: #8A5410;       /* deep amber — paper 5.55:1 (ölçüldü, v6); tonlu uyarı rozetlerinde AA */
  /* seriler (dataviz — editoryal-sıcak kategorik set; UI ≥3:1, sağlayıcı ayrımı korunur) */
  --s-openai: #1F5C4D;     /* çam yeşili */
  --s-gemini: #35688F;     /* soluk mavi (tek soğuk çapa) */
  --s-perplexity: #B26B12; /* amber */
  --s-all: #B04628;        /* kil (toplam/AIO agregası, marka) */
  --s-aio: #7A3B52;        /* şarap/erik — hepsinden ayrık */
  --s-copilot: #2E7D74;    /* v7: Bing Copilot — çam-camgöbeği (setten ayrık) */
  --s-claude: #8A5A2B;     /* v7.6: Claude — sıcak bronz (setten ayrık) */
  --s-grok: #5B4B8A;       /* v7.6: Grok — mürdüm (setten ayrık, indigo DEĞİL koyu mor-kahve dengesi) */
  --s-neutral: #A79E86;    /* sıcak taupe (nötr pay) */
  /* v6 (tasarım #6): rakip grafiği kategorik seti — kilden uzak, CVD-güvenli, sıcak-editoryal */
  --s-comp-1: #35688F;     /* soluk mavi */
  --s-comp-2: #7A3B52;     /* erik */
  --s-comp-3: #B26B12;     /* amber */
  --s-comp-4: #5B7331;     /* zeytin */
  --s-comp-5: #8A5E9E;     /* leylak */
  --s-comp-6: #2E7D74;     /* çam-camgöbeği */
  --s-comp-7: #8B8268;     /* taupe */
  /* geometri — daha keskin: radius 4 / 7 / 10, kart 8 */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-card: 8px;
  --shadow-1: 0 1px 2px rgba(28, 26, 21, .06);
  --shadow-2: 0 1px 2px rgba(28, 26, 21, .05), 0 14px 34px -20px rgba(28, 26, 21, .28);
  --ring: 0 0 0 3px rgba(176, 70, 40, .55);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --scroll-thumb: #CBBFA6;
  --skeleton-1: rgba(28, 26, 21, .05);
  --skeleton-2: rgba(28, 26, 21, .10);
}

/* ═══ KOYU MOD — sıcak-koyu mürekkep (steril slate DEĞİL); token override ═══
   İlke: saf siyah değil, sıcak koyu-kahve/mürekkep taban; 3-4 yüzey basamağı;
   derinlik AÇIKLIK ile; kil/çam aksanları koyuda okunur tonlara açılır; kontrast AA. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1B1811;
    --surface: #211E16;
    --card: #24201A;
    --card-solid: #24201A;
    --card-hover: #2C2820;
    --inset: #1E1B14;
    --border: rgba(245, 241, 232, .10);
    --border-strong: rgba(245, 241, 232, .20);
    --text: #F3EEE1;
    --text-2: #CFC6B0;
    --muted: #A79E86;
    --faint: #968D75;
    --accent: #D66A40;       /* kil (koyuda açıldı) — metin bg 5.1:1 / kart 4.6:1 */
    --accent-btn: #A84C24;   /* v6 (tasarım #8): koyu temada buton dolgusu koyulaştırıldı — beyaz etiket 4.9:1 (AA) */
    --accent-hover: #C2552F;
    --accent-2: #E0895E;
    --cyan: #4F9E88;         /* çam (koyu) */
    --grad: linear-gradient(125deg, #E0784F, #C95E38 52%, #4F9E88 150%);
    --ok: #5BB394;
    --bad: #E9836F;
    --warn: #E0A44A;
    --s-openai: #57B39A;
    --s-gemini: #6FA6D6;
    --s-perplexity: #E0A44A;
    --s-all: #E0784F;
  --s-comp-1: #6FA6D6;
  --s-comp-2: #C87E9C;
  --s-comp-3: #E0A44A;
  --s-comp-4: #9BB86A;
  --s-comp-5: #B591C9;
  --s-comp-6: #58B3A8;
  --s-comp-7: #ABA284;

    --s-aio: #C87E9C;
  --s-copilot: #58B3A8; --s-claude: #C99A66; --s-grok: #9D8AC7;
    --s-comp-1: #6FA6D6;
    --s-comp-2: #C87E9C;
    --s-comp-3: #E0A44A;
    --s-comp-4: #9BB86A;
    --s-comp-5: #B591C9;
    --s-comp-6: #58B3A8;
    --s-comp-7: #ABA284;

    --s-neutral: #8B8268;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -20px rgba(0, 0, 0, .55);
    --ring: 0 0 0 3px rgba(214, 106, 64, .55);
    --scroll-thumb: #453E30;
    --skeleton-1: rgba(255, 255, 255, .05);
    --skeleton-2: rgba(255, 255, 255, .12);
  }
}
/* kullanıcının elle seçtiği tema — OS tercihini HER İKİ yönde de ezer */
:root[data-theme="dark"] {
  --bg: #1B1811;
  --surface: #211E16;
  --card: #24201A;
  --card-solid: #24201A;
  --card-hover: #2C2820;
  --inset: #1E1B14;
  --border: rgba(245, 241, 232, .10);
  --border-strong: rgba(245, 241, 232, .20);
  --text: #F3EEE1;
  --text-2: #CFC6B0;
  --muted: #A79E86;
  --faint: #968D75;
  --accent: #D66A40;
  --accent-btn: #A84C24;
  --accent-hover: #C2552F;
  --accent-2: #E0895E;
  --cyan: #4F9E88;
  --grad: linear-gradient(125deg, #E0784F, #C95E38 52%, #4F9E88 150%);
  --ok: #5BB394;
  --bad: #E9836F;
  --warn: #E0A44A;
  --s-openai: #57B39A;
  --s-gemini: #6FA6D6;
  --s-perplexity: #E0A44A;
  --s-all: #E0784F;
  --s-aio: #C87E9C;
  --s-neutral: #8B8268;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -20px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px rgba(214, 106, 64, .55);
  --scroll-thumb: #453E30;
  --skeleton-1: rgba(255, 255, 255, .05);
  --skeleton-2: rgba(255, 255, 255, .12);
  /* v7.6 denetim: elle-koyu temada eksikti — rakip paleti + tercihli motor renkleri */
  --s-comp-1: #35688F;     /* soluk mavi */
    --s-comp-2: #7A3B52;     /* erik */
    --s-comp-3: #B26B12;     /* amber */
    --s-comp-4: #5B7331;     /* zeytin */
    --s-comp-5: #8A5E9E;     /* leylak */
    --s-comp-6: #2E7D74;     /* çam-camgöbeği */
    --s-comp-7: #8B8268;
  --s-copilot: #58B3A8; --s-claude: #C99A66; --s-grok: #9D8AC7;

}
:root[data-theme="light"] {
  --bg: #F5F1E8;
  --surface: #EFEADC;
  --card: #FCFAF4;
  --card-solid: #FCFAF4;
  --card-hover: #FFFFFF;
  --inset: #EDE7D8;
  --border: rgba(28, 26, 21, .11);
  --border-strong: rgba(28, 26, 21, .19);
  --text: #1C1A15;
  --text-2: #544E3D;
  --muted: #635D49;
  --faint: #6E6851;
  --accent: #B04628;
  --accent-hover: #A23F1F;
  --accent-btn: #B04628;
  --accent-2: #A23F1F;
  --cyan: #1F5C4D;
  --grad: linear-gradient(125deg, #C1502E, #A23F1F 52%, #1F5C4D 150%);
  --ok: #1F5C4D;
  --bad: #A83226;
  --warn: #8A5410;       /* deep amber — tonlu uyarı rozetlerinde AA (amber-tint 5.3:1); seri amber #B26B12 --s-perplexity'de */
  --s-openai: #1F5C4D;
  --s-gemini: #35688F;
  --s-perplexity: #B26B12;
  --s-all: #B04628;
  --s-aio: #7A3B52;
  --s-neutral: #A79E86;
  --shadow-1: 0 1px 2px rgba(28, 26, 21, .06);
  --shadow-2: 0 1px 2px rgba(28, 26, 21, .05), 0 14px 34px -20px rgba(28, 26, 21, .28);
  --ring: 0 0 0 3px rgba(176, 70, 40, .55);
  --scroll-thumb: #CBBFA6;
  --skeleton-1: rgba(28, 26, 21, .05);
  --skeleton-2: rgba(28, 26, 21, .10);
}

/* Yönetici Özeti (.execsum) sol accent şeridi — kural gövdesi overview.html'de satır-içi
   SABİT hex kullanabilir; koyu temada tema-dışı kalmasın diye burada token'a bağlanır
   (':root .execsum::before' özgüllüğü satır-içini ezer): her temada doğru — kil→çam
   (açıkta var(--accent)=#B04628 / var(--cyan)=#1F5C4D, koyuda #D66A40 / #4F9E88). */
:root .execsum::before {
  background: linear-gradient(180deg, var(--accent), var(--cyan));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--scroll-thumb) var(--bg); }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* Responsive denetimi B1: kenar-yakın ".tip::after" tooltip pseudo-elementleri (görünmez
     olsalar bile) sağ kenarda 59-92px'lik gerçek yatay kaydırma alanı açıyordu (masaüstünde
     hissedilen "sayfa kayması"). Kök nedeni ayrıca .tip::after konumlandırmasında da
     hafiflettik (aşağı bakın); bu satır proje genelinde ikinci bir güvenlik katmanı — herhangi
     bir görünmez/pseudo taşma artık sayfa seviyesinde yatay scrollbar üretemez. Dikey scroll,
     sticky sidebar/topbar ve `.tablewrap`'in kendi iç yatay kaydırması etkilenmez (yalnız
     x ekseni kısıtlanıyor).
  */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Tipografi ölçeği: 11 micro / 12.5 meta / 13.5 tablo / 14 gövde / 16 kart başlık / 20 sayfa başlık / 28 hero / 32 gauge */
h1 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: 0; letter-spacing: -.02em; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 12px; letter-spacing: -.012em; }
h3 { font-size: 11px; font-weight: 700; color: var(--accent-2); margin: 32px 0 12px; text-transform: uppercase; letter-spacing: .08em; }
h3:first-child { margin-top: 0; }
/* D21: odaklanan öğe sticky topbar (~64px) + sticky tablo başlığı (~36px) altında gizlenmesin */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); scroll-margin-top: 110px; }
.icon { vertical-align: -3.5px; opacity: .9; }
::selection { background: rgba(193, 80, 46, .18); }

/* ═══ Uygulama kabuğu ═══ */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.15rem .8rem .9rem;
  display: flex; flex-direction: column; gap: .35rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.logo {
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); display: flex; align-items: center; gap: .5rem;
  padding: .15rem .6rem 1rem;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 6px; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: .98rem; font-weight: 800; letter-spacing: -.02em;
}
.logo-ai {
  color: var(--accent-2); font-weight: 700;
}

/* proje değiştirici */
.switcher { position: relative; margin: 0 0 .4rem; }
.switcher summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .55rem;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .55rem .7rem; font-weight: 600; font-size: .88rem;
  box-shadow: var(--shadow-1);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.switcher summary .chev { margin-left: auto; color: var(--muted); transition: transform .15s var(--ease); }
.switcher[open] summary .chev { transform: rotate(180deg); }
.switcher-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: .35rem; max-height: 300px; overflow-y: auto;
  animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.switcher-menu a {
  display: block; padding: .5rem .65rem; border-radius: var(--r-sm);
  color: var(--text-2); font-size: .88rem; font-weight: 500;
}
.switcher-menu a:hover { background: rgba(28, 26, 21, .045); color: var(--text); text-decoration: none; }
.switcher-menu a.sel { color: var(--accent); background: rgba(193, 80, 46, .08); }
.switcher-menu .new { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .45rem; color: var(--accent); }

.side-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); padding: .75rem .6rem .3rem; font-weight: 750;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: .65rem;
  color: var(--text-2); padding: .54rem .65rem; border-radius: var(--r-sm);
  font-weight: 550; font-size: .9rem; position: relative;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.sidebar nav a:hover { background: rgba(28, 26, 21, .045); color: var(--text); text-decoration: none; }
.sidebar nav a.active {
  background: rgba(193, 80, 46, .08); color: var(--accent); font-weight: 650;
}
.sidebar nav a.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: var(--accent);
}
.sidebar nav a.active .icon { opacity: 1; }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: .7rem; padding-top: 1rem; }
.usage { background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .8rem; box-shadow: var(--shadow-1); }
.usage-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: .45rem; font-weight: 550; }
.bar { height: 6px; background: rgba(28, 26, 21, .08); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s var(--ease); }
.bar-fill.bar-warn { background: var(--warn); }
/* Yenileme/ödeme günü göstergesi (sidebar kredi bloğu altı) */
.renew-hint { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: 12px; font-weight: 550; color: var(--text-2); line-height: 1.35; }
.renew-hint .icon { flex: none; opacity: .65; }
.renew-hint--warn { color: var(--warn); }
.renew-hint--warn .icon { opacity: 1; }
/* Hesap sayfası ödeme/bitiş bandı — ikon + metin solda, yenile CTA sağda */
.renew-banner { display: flex; align-items: center; justify-content: space-between; gap: .9rem 1rem; flex-wrap: wrap; }
.renew-banner > div { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.renew-banner .icon { flex: none; }
.renew-banner a { flex: none; }
.renew-line { display: inline-flex; align-items: center; gap: .35rem; }
.renew-line .icon { flex: none; opacity: .7; }
.user-row { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-name { flex: 1; font-size: .86rem; font-weight: 550; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row a { color: var(--faint); display: inline-flex; padding: .3rem; border-radius: var(--r-sm); }
.user-row a:hover { color: var(--bad); background: rgba(168, 50, 38, .08); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.8rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
}
.topbar-title { flex: 1; min-width: 0; }  /* uzun başlık/proje adı diğer öğeleri itmesin */
.topbar-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb { color: var(--muted); font-size: 12.5px; font-weight: 550; margin-bottom: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb a { color: var(--muted); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; row-gap: .3rem; }
.top-actions > form, .top-actions > .bell, .top-actions > .theme-toggle { flex-shrink: 0; }
.nav-toggle { flex-shrink: 0; }
.content { flex: 1; padding: 24px 28px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page-sub { color: var(--muted); font-size: 13.5px; margin: -14px 0 16px; }
/* form/ayar sayfaları: dar, ortalanmış tek kolon */
.page-narrow { max-width: 720px; margin-inline: auto; }
/* içerik-hafif sayfalar (rakipler/briefler/raporlar): orta genişlikte ortalanmış kolon —
   1280px'lik boş yüzey hissini azaltır, içeriği kasıtlı hissettirir */
.page-mid { max-width: 960px; margin-inline: auto; }
/* tek-kart tek-görev ekranı: dikeyde de ortala (üstte yapışmasın) */
.page-center { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 190px); }
@media (max-width: 880px) { .page-center { min-height: 0; } }

/* hamburger — yalnız mobil (880px altı) görünür */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); color: var(--text-2); cursor: pointer;
}
.nav-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(28, 26, 21, .45);
  border: 0; padding: 0; margin: 0;
}
.nav-backdrop[hidden] { display: none; }

/* ═══ Kartlar ═══ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cardgrid .card { margin-bottom: 0; }
.kpigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpigrid .card { margin-bottom: 0; position: relative; }
.stat-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero-num { font-family: var(--font-display); font-size: 29px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: .2rem 0 .1rem; font-variant-numeric: lining-nums tabular-nums; }
.hero-num.small-hero { font-size: 20px; }
.hero-num.muted { color: var(--muted); font-weight: 600; }
.hero-num .unit { font-size: .95rem; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.stat-foot { display: flex; align-items: center; gap: .5rem; font-size: 12.5px; color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: .76rem; font-weight: 750; padding: .08rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok); background: rgba(31, 92, 77, .1); }
.delta.down { color: var(--bad); background: rgba(168, 50, 38, .09); }
.delta.flat { color: var(--muted); background: rgba(28, 26, 21, .06); }
.spark { display: block; margin-top: .4rem; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .sparkfill { fill: url(#sparkfillgrad); stroke: none; }
.spark-32 { height: 32px; }

a.projcard { display: block; color: inherit; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
a.projcard:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-2); }
/* Responsive denetimi B2: home.html proje kartlarındaki sparkline sabit 260px genişlikte
   render edilip dar kartlarda (küçük ekran) sarmalayıcının overflow:hidden'ı ile sessizce
   kırpılıyordu — trendin en güncel (sağ uç) kısmı hep görünmezdi. `spark()` makrosu zaten
   viewBox="0 0 260 44" yayınlıyor (preserveAspectRatio varsayılanı xMidYMid meet); burada
   yalnız o SVG'yi konteynerine göre ölçekleyip aspect-ratio'yu koruyoruz, veri kaybı olmadan. */
.projcard-spark svg.spark { display: block; width: 100%; height: auto; max-width: 260px; }
.projcard-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.projcard-head h2 { margin: 0; }
.provchips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.provchip {
  display: inline-flex; align-items: center; gap: .15rem;
  font-size: .78rem; color: var(--muted); font-weight: 550;
  background: var(--inset); border: 1px solid var(--border);
  border-radius: 999px; padding: .18rem .65rem;
}
.provchip b { color: var(--text); font-weight: 750; margin-left: .25rem; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 3.2rem 1.5rem; color: var(--muted); }
.empty .empty-art { margin: 0 auto 1rem; width: 84px; height: 84px; border-radius: 12px; background: rgba(193, 80, 46, .08); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.empty h2 { margin: .4rem 0; color: var(--text); }
.empty p { max-width: 400px; margin: .4rem auto 1.2rem; }
.empty-mini { color: var(--muted); padding: .7rem 0; display: flex; gap: .5rem; align-items: center; font-size: .88rem; }

/* D21: eski #f7f7fe/#fefaf3 opak beyazımsı zeminler koyu modda açık leke yapıyordu — token-tabanlı alfa karışıma çevrildi (karta göre bindirilir, her iki temada da doğru) */
.notice { border-color: rgba(193, 80, 46, .3); background: rgba(193, 80, 46, .06); display: flex; gap: .7rem; align-items: flex-start; }
.notice.warn { border-color: rgba(178, 107, 18, .35); background: rgba(178, 107, 18, .08); }
.danger { border-color: rgba(168, 50, 38, .25); }

/* ═══ Gösterge (gauge) ═══ */
.gauge-wrap { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.gauge { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge .track { stroke: rgba(28, 26, 21, .07); }
.gauge .value { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-center .gnum { font-family: var(--font-display); font-size: 33px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.gauge-center .glabel { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; max-width: 104px; text-align: center; line-height: 1.35; }
.gauge-side { flex: 1; min-width: 220px; }
.gauge-side .row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.gauge-side .row:last-child { border-bottom: none; }

/* ═══ Form ═══ */
label { display: block; margin-bottom: .95rem; font-size: .84rem; color: var(--text-2); font-weight: 600; }
input, textarea, select {
  display: block; width: 100%; margin-top: .4rem; padding: .62rem .85rem;
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--card-solid); color: var(--text); font-size: .93rem; font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin-top: 0; accent-color: var(--accent); }
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.narrow-form { max-width: 580px; }
.inline-form { display: flex; gap: .4rem; align-items: center; }
.inline-form select { width: auto; margin: 0; padding: .32rem .5rem; font-size: .8rem; }
/* v6 (tasarım #1): tablo araç çubuğu — başlık solda, arama+eylemler sağda, TEK satır.
   Eski .filterbox{max-width:280px} kuralı Sorgular/Kaynaklar başlığını 280px kolona
   sıkıştırıyordu (regresyon); .filterbox artık yalnız ARAMA input'unu sınırlar. */
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.toolbar .spacer { margin-left: auto; }
.filterbox { margin: 0 0 .8rem; }
.filterbox input { margin-top: 0; padding: .45rem .75rem; font-size: .86rem; max-width: 280px; }
.toolbar .filterbox, .toolbar input[type="search"] { margin: 0; }

button {
  padding: .55rem 1.15rem; border: none; border-radius: var(--r-md);
  font-weight: 650; font-size: .9rem; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: filter .12s var(--ease), background .12s var(--ease), transform .1s var(--ease);
}
button:active { transform: translateY(1px); }
.btn-primary, button[type="submit"]:not(.btn-ghost):not(.btn-danger) {
  background: var(--accent-btn); color: #fff;  /* v6 #8: koyu temada AA (4.9:1) */
  padding: .55rem 1.15rem; border: none; border-radius: var(--r-md);
  font-weight: 650; font-size: .9rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
a.btn-primary { text-decoration: none; }
.btn-primary:hover, button[type="submit"]:not(.btn-ghost):not(.btn-danger):hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost { background: rgba(28, 26, 21, .05); color: var(--text-2); border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(28, 26, 21, .09); color: var(--text); }
.btn-danger { background: rgba(168, 50, 38, .07); color: var(--bad); border: 1px solid rgba(168, 50, 38, .25); }
.btn-danger:hover { background: rgba(168, 50, 38, .13); }
.btn-outline { background: var(--card-solid); color: var(--accent); border: 1px solid rgba(193, 80, 46, .35); }
.btn-outline:hover { background: rgba(193, 80, 46, .06); border-color: var(--accent); color: var(--accent); }
button.small { padding: .3rem .7rem; font-size: .78rem; border-radius: var(--r-sm); }
.wide { width: 100%; justify-content: center; }
button:disabled { opacity: .45; cursor: default; }

/* ═══ Tablolar — standart: 40px satır, 11px uppercase başlık, 13.5px gövde ═══ */
.tablewrap { overflow-x: auto; margin: 0 -.35rem; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--muted); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .55rem .65rem; border-bottom: 1px solid var(--border-strong);
  white-space: nowrap; position: sticky; top: 0;
  background: var(--card);
}
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text-2); }
th[data-sort]::after { content: "↕"; opacity: .35; margin-left: .3rem; font-size: .8em; }
th[data-sort].asc::after { content: "↑"; opacity: 1; color: var(--accent); }
th[data-sort].desc::after { content: "↓"; opacity: 1; color: var(--accent); }
td { padding: 9px .65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { height: 40px; transition: background .1s var(--ease); }
tbody tr:hover { background: rgba(28, 26, 21, .025); }
tbody tr:last-child td { border-bottom: none; }
table.mini td { border: none; padding: .32rem .4rem; }
table.mini tr { height: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 700; }
tr.highlight td:first-child { box-shadow: inset 2px 0 0 var(--accent); font-weight: 700; }
.listrow { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.listrow:last-child { border-bottom: none; }

/* satır eylemleri: hover/focus'ta görünür, dokunmatikte hep açık */
.row-actions { display: inline-flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .12s var(--ease); }
tr:hover .row-actions, tr:focus-within .row-actions,
.listrow:hover .row-actions, .listrow:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* tablo üstü açılır ekleme paneli */
.add-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-1);
}
.add-panel[hidden] { display: none; }

/* ═══ Küçük parçalar ═══ */
.pill { display: inline-block; background: rgba(28, 26, 21, .06); border-radius: 999px; padding: .12rem .6rem; font-size: .74rem; font-weight: 650; color: var(--text-2); white-space: nowrap; }
/* pill anlam disiplini: kırmızı=yalnız gerileme/hata, amber=uyarı, yeşil=iyileşme, gri=nötr bilgi, mor=marka/seçim */
.pill-bad { background: rgba(168, 50, 38, .09); color: var(--bad); }
.pill-warn { background: rgba(178, 107, 18, .11); color: var(--warn); }
.pill-good { background: rgba(31, 92, 77, .1); color: var(--ok); }
.pill-neutral { background: rgba(28, 26, 21, .06); color: var(--text-2); }
.pill-brand { background: rgba(193, 80, 46, .1); color: var(--accent); }
/* eski eşanlamlılar — geriye dönük uyum */
.pill-accent { background: rgba(193, 80, 46, .1); color: var(--accent); }
.pill-ok { background: rgba(31, 92, 77, .1); color: var(--ok); }
.ok { color: var(--ok); font-weight: 650; }
.bad { color: var(--bad); font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.error { color: var(--bad); background: rgba(168, 50, 38, .06); border: 1px solid rgba(168, 50, 38, .22); border-radius: var(--r-md); padding: .6rem .9rem; font-size: .88rem; }
/* durum noktaları: nokta + düz metin (pill duvarı yerine) */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.dot-ok { background: var(--ok); }
.dot-bad { background: var(--bad); }
.dot-warn { background: var(--warn); }
.dot-muted { background: var(--faint); }
.dot-openai { background: var(--s-openai); }
.dot-gemini { background: var(--s-gemini); }
.dot-perplexity { background: var(--s-perplexity); }
.dot-all { background: var(--s-all); }
.dot-aio { background: var(--s-aio); }
.dot-copilot { background: var(--s-copilot); }
.dot-claude { background: var(--s-claude); }
.dot-grok { background: var(--s-grok); }
blockquote.snippet { border-left: 3px solid var(--border-strong); margin: .65rem 0; padding: .4rem 1rem; color: var(--text-2); font-size: .92rem; }
blockquote.frame-positive { border-color: var(--ok); }
blockquote.frame-negative { border-color: var(--bad); }
.chartbox { position: relative; height: 320px; }
.footnote { text-align: center; color: var(--faint); font-size: .76rem; padding: 1.1rem; }
code { background: var(--inset); border: 1px solid var(--border); padding: .14rem .5rem; border-radius: var(--r-sm); font-size: .86em; }
/* kod blokları: mobilde yatay taşmayı garanti et (curl örnekleri vb.) */
pre { background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .9rem; overflow-x: auto; margin: .4rem 0; -webkit-overflow-scrolling: touch; }
pre code { background: none; border: none; padding: 0; white-space: pre; }

/* ═══ Paket kartları ═══ */
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 16px; }
.plancard { text-align: center; margin-bottom: 0; padding-top: 1.6rem; position: relative; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.plancard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.plancard.current { border-color: rgba(193, 80, 46, .5); box-shadow: 0 0 0 1px rgba(193, 80, 46, .2), var(--shadow-1); }
.plancard.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(193, 80, 46, .25), var(--shadow-2); }
.plan-band {
  position: absolute; top: 0; left: 0; right: 0; padding: .28rem 0;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(28, 26, 21, .05); color: var(--text-2);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.plan-band-rec { background: rgba(193, 80, 46, .1); color: var(--accent); }
.plancard .hero-num { font-size: 28px; }
.plancard ul { list-style: none; padding: 0; margin: .8rem 0 1.1rem; color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.plancard li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* ═══ Yığılmış bar (algı çerçevesi) ═══ */
.stackbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin: .8rem 0 1rem; background: transparent; }
.stackbar span { display: block; height: 100%; border-radius: 2px; min-width: 2px; }
.sb-pos { background: var(--ok); }
.sb-neu { background: var(--s-neutral); }
.sb-neg { background: var(--bad); }
.legendrow { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; font-size: .88rem; border-bottom: 1px solid var(--border); }
.legendrow:last-child { border-bottom: none; }
.legendrow .lg { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); }
.legendrow .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ağırlıklı sıfat bulutu */
.tagcloud { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.tagcloud .pill { padding: .18rem .7rem; }
.pill.w2 { font-size: .86rem; background: rgba(193, 80, 46, .08); color: var(--text-2); }
.pill.w3 { font-size: .98rem; background: rgba(193, 80, 46, .12); color: var(--text); font-weight: 700; }

/* tier rozetleri */
.pill-p1 { background: rgba(193, 80, 46, .11); color: var(--accent); }
.pill-p2 { background: rgba(28, 26, 21, .06); color: var(--text-2); }
.pill-p3 { background: rgba(28, 26, 21, .04); color: var(--muted); }

/* snippet üst bilgisi */
.snippet-meta { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--muted); margin-bottom: .2rem; font-weight: 600; }

/* sistem kontrolleri */
.controlgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.control-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem 1rem;
  background: var(--card-solid); box-shadow: var(--shadow-1);
}
.control-item.control-off { border-color: rgba(168, 50, 38, .3); background: rgba(168, 50, 38, .02); }
.control-label { font-weight: 650; display: flex; align-items: center; gap: .5rem; margin-bottom: .15rem; }

/* ═══ D13: anahtar (toggle switch) — ikili durum kontrolleri için; POST form/action aynı kalır, yalnız görsel ═══ */
.switch {
  --sw-w: 42px; --sw-h: 24px;
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
  width: var(--sw-w); height: var(--sw-h); padding: 0; border-radius: 999px;
  background: var(--border-strong); border: none; cursor: pointer;
  transition: background .18s var(--ease), filter .12s var(--ease);
}
.switch:hover { filter: brightness(.94); }
.switch.on { background: var(--accent); }
.switch.on:hover { background: var(--accent-hover); filter: none; }
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: calc(var(--sw-h) - 4px); height: calc(var(--sw-h) - 4px);
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease);
}
.switch.on .switch-thumb { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.switch:disabled { opacity: .5; cursor: default; }

/* fırsat listesi */
.opp-item {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md);
  padding: .9rem 1.1rem; margin-bottom: .8rem; background: var(--card-solid);
  display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--shadow-1);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.opp-item:hover { box-shadow: var(--shadow-2); }
.opp-item.sev-high { border-left-color: var(--bad); }
.opp-item.sev-medium { border-left-color: var(--warn); }
.opp-item.sev-low { border-left-color: var(--faint); }
.opp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.opp-head a { color: var(--text); font-weight: 650; font-size: .95rem; }
.opp-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.opp-rivals { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
/* B3 (responsive denetimi): uzun marka adlı rakip/pill'ler flexbox min-width:auto yüzünden
   kendi içeriğinin altına küçülmeyip konteyneri/sayfayı taşırabiliyordu — 360/390px'de gerçek
   yatay sayfa taşması. max-width + ellipsis ile pill'i kırp, tam ad title'da kalır. */
.opp-rivals .pill,
.opp-rivals .pill-neutral { max-width: min(220px, 60vw); overflow: hidden; text-overflow: ellipsis; }
.opp-hint { color: var(--muted); font-size: .82rem; }
.sev-pill-high { background: rgba(168, 50, 38, .09); color: var(--bad); }
.sev-pill-medium { background: rgba(178, 107, 18, .1); color: var(--warn); }
.sev-pill-low { background: rgba(28, 26, 21, .05); color: var(--muted); }

/* yatay mini bar (kıyas) */
.minibar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 48px; align-items: center; gap: .8rem; padding: .38rem 0; font-size: .88rem; }
.minibar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.minibar-row.me .name { color: var(--accent); font-weight: 700; }
.minibar { height: 8px; background: rgba(28, 26, 21, .13); border-radius: 999px; overflow: hidden; }
.minibar > span { display: block; height: 100%; border-radius: 999px; background: var(--s-neutral); }
.minibar-row.me .minibar > span { background: var(--accent); }
.minibar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* platform bazlı küçük stackbar */
.pstack { margin-bottom: .9rem; }
.pstack .pstack-head { display: flex; justify-content: space-between; font-size: .84rem; color: var(--text-2); margin-bottom: .35rem; font-weight: 550; }
.pstack .stackbar { height: 8px; margin: 0; }

/* sihirbaz adımları */
.step { display: flex; gap: .9rem; margin-bottom: 1.3rem; }
.step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
}
.step-body { flex: 1; }
.step-body > label:last-of-type { margin-bottom: 0; }
.step-title { font-weight: 650; margin-bottom: .5rem; }

/* ═══ Toast ═══ */
.toast-wrap { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: var(--card-solid); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: .7rem 1rem; box-shadow: var(--shadow-2);
  font-size: .88rem; animation: slidein .25s var(--ease);
}
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } }

/* ═══ Auth sayfaları — sıcak kil/çam ışıması (v6: mor-cyan aurora kaldırıldı) ═══ */
/* overflow-x: hidden (overflow değil) — bodyclass olarak body'ye uygulanıyor; `overflow:hidden`
   dikey scroll'u da kapatıp uzun signup formunu (KVKK onayı) kırpıyordu. Dekoratif ::before
   position:fixed olduğundan yatay kırpma yeterli, dikey scroll geri geldi (denetim v5). */
.auth-body { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; overflow-x: hidden; }
.auth-body::before {
  content: ""; position: fixed; top: -25%; left: 50%; transform: translateX(-50%);
  width: 980px; height: 640px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(193, 80, 46, .14), rgba(31, 92, 77, .08), transparent);
  pointer-events: none; filter: blur(50px);
  animation: drift-a 24s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translateX(-50%) translate(-40px, 40px) scale(1.08); } }
.auth-wrap { width: 100%; max-width: 420px; position: relative; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand .logo { font-size: 1.5rem; padding: 0; justify-content: center; }
.auth-card { padding: 1.7rem 1.8rem; background: var(--card-solid); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.auth-card h1 { margin-bottom: .5rem; }
.auth-card form { margin-top: 1.1rem; }

/* ═══ Yardımcılar ═══ */
.fade-in { animation: fadein .35s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
/* kart stagger — yalnız ilk yüklemede çalışır */
.kpigrid .card, .cardgrid .card { animation: fadein .4s var(--ease) backwards; }
.kpigrid .card:nth-child(2), .cardgrid .card:nth-child(2) { animation-delay: .05s; }
.kpigrid .card:nth-child(3), .cardgrid .card:nth-child(3) { animation-delay: .1s; }
.kpigrid .card:nth-child(4), .cardgrid .card:nth-child(4) { animation-delay: .15s; }
.kpigrid .card:nth-child(5), .cardgrid .card:nth-child(5) { animation-delay: .2s; }
.kpigrid .card:nth-child(6), .cardgrid .card:nth-child(6) { animation-delay: .25s; }
/* D10: token'a bağlandı — sabit rgba(15,23,42,..) koyu modda karta karşı görünmezdi (karanlık-üstü-karanlık) */
.skeleton { background: linear-gradient(90deg, var(--skeleton-1), var(--skeleton-2), var(--skeleton-1)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }
/* İşlem sürüyor spinner'ı — data-busy butonlarında (app.js) metnin önüne eklenir */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spin { display:inline-block; width:15px; height:15px; margin-right:.55rem; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation: spin .6s linear infinite; }
.btn-busy-text { transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 1.5s; } }
/* D10 yardımcıları: metin/blok satırı iskeleti — uzun yüklemede içerik yerine geçici gösterge (ör. grafik yüklenene kadar .chartbox'a eklenir, veri gelince kaldırılır) */
.skeleton-line { height: 13px; margin: .35rem 0; width: 100%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.chartbox.skeleton { height: 100%; }

/* ═══ v2 Faz A: değişim akışı, alarmlar, etiketler, kendi-domain ═══ */
.cardgrid-21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .cardgrid-21 { grid-template-columns: 1fr; } }

.feed { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.feed-item { display: flex; gap: .65rem; padding: .55rem .35rem; border-radius: var(--r-sm); transition: background .15s var(--ease); }
.feed-item:hover { background: rgba(28, 26, 21, .03); }
.feed-item + .feed-item { border-top: 1px solid var(--border); }
.feed-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: .42rem; }
.feed-good { background: var(--ok); }
.feed-bad { background: var(--bad); }
.feed-info { background: var(--cyan); }
.feed-title { font-size: .87rem; font-weight: 650; color: var(--text); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.feed-body { min-width: 0; }

.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); color: var(--muted); border: 1px solid var(--border); background: var(--card); transition: color .18s var(--ease), border-color .18s var(--ease); }
.bell:hover { color: var(--accent); border-color: rgba(193, 80, 46, .35); }
.bell-hot { color: var(--accent); }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 750; display: flex; align-items: center; justify-content: center; }

/* ═══ Tema değiştirici (topbar) — .bell/.nav-toggle ile aynı ikon-buton kalıbı ═══ */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border-radius: var(--r-md); color: var(--muted);
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: rgba(193, 80, 46, .35); }
.theme-toggle svg { width: 18px; height: 18px; }
/* ikon durumu salt CSS ile çözülür (JS'i beklemez, FOUC/gecikme yok):
   varsayılan (data-theme yok) = OS tercihine bak; data-theme elle seçilmişse o kazanır */
.theme-toggle .ti-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ti-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .ti-moon { display: inline-flex; }
}
:root[data-theme="dark"] .theme-toggle .ti-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-moon { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .ti-sun { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .ti-moon { display: none; }

/* tema değişiminde yumuşak geçiş — yalnız theme.js'in geçici eklediği sınıfla,
   ve sadece hareket azaltma tercihi KAPALIYSA (prefers-reduced-motion'a saygı) */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim, html.theme-anim body, html.theme-anim .sidebar, html.theme-anim .topbar,
  html.theme-anim .card, html.theme-anim .switcher-menu, html.theme-anim input,
  html.theme-anim textarea, html.theme-anim select, html.theme-anim .bell, html.theme-anim .theme-toggle {
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease) !important;
  }
}

/* ═══ Tooltip (ⓘ) — hover VE focus (mobil: dokun) ile açılır, native title yerine ═══ */
.tip { position: relative; cursor: help; border-bottom: 1px dotted currentColor; outline: none; }
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  /* Responsive denetimi B1 kök nedeni: sabit max-width (240px) + merkezi transform, sağ
     kenara yakın .tip'lerde (ör. .hero-side, .kpigrid) görünür ALANI viewport dışına taşırıyordu
     — opacity:0/visibility:hidden olsa da absolute-konumlu pseudo-element layout'a dahil olduğu
     için document.scrollWidth'i şişiriyordu. min(240px, viewport genişliği - kenar payı) ile
     tooltip artık hiçbir genişlikte kendi viewport'undan daha geniş olamıyor; body'deki
     overflow-x:hidden de ikinci bir güvenlik katmanı olarak kalıyor. */
  width: max-content; max-width: min(240px, calc(100vw - 24px)); white-space: normal; text-align: left;
  background: #24201A; color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.45;
  padding: .5rem .65rem; border-radius: var(--r-md); box-shadow: 0 8px 24px -8px rgba(28,26,21,.4);
  opacity: 0; visibility: hidden; transition: opacity .15s var(--ease); z-index: 80; pointer-events: none;
}
.tip::before {  /* küçük ok */
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #24201A;
  opacity: 0; visibility: hidden; transition: opacity .15s var(--ease); z-index: 80; pointer-events: none;
}
.tip:hover::after, .tip:focus::after, .tip:hover::before, .tip:focus::before { opacity: 1; visibility: visible; }
.tip .tip-i { font-style: normal; color: var(--muted); font-weight: 700; margin-left: .15rem; }
/* Bilinen sağ-kenar bağlamları (proje-özeti hero yan sütunu + KPI kart ızgarası, audit B1'de
   /p/8'de ölçülen 59-92px taşmanın doğrudan kaynağı) — tetikleyici genelde sağ kenara yakın
   olduğundan merkezi hizalama yerine sağa-hizalı konumlandırma kullan; tooltip artık tetikleyicinin
   solunda büyür, viewport'un sağından taşma ihtimali pratikte ortadan kalkar. */
.hero-side .tip::after, .kpigrid .tip::after { left: auto; right: -6px; transform: none; }
.hero-side .tip::before, .kpigrid .tip::before { left: auto; right: 10px; transform: none; }
/* Mobil (≤880px): ⓘ ipuçları dokunmayla açılıyor ama tetikleyici sağlayıcı kartı /
   hero yan sütunu gibi kenara yakınsa, tetikleyiciye göre konumlanan absolute tooltip
   viewport'un dışına (çoğunlukla soluna) kayıp okunamıyordu — body overflow-x:hidden onu
   kırpıyordu. Mobilde tooltip'i tetikleyiciden koparıp ekran altına sabitlenen, ortalanmış,
   tam-genişliğe yakın okunur bir şerit yapıyoruz: position:fixed + sol/sağ 12px kenar payı
   her genişlikte viewport içinde kalmayı garanti eder. Sağ-kenar bağlam ezmeleri (hero/kpi)
   ve tetikleyiciye işaret eden ok bu düzende anlamsız olduğundan sıfırlanır/gizlenir.
   Masaüstü (>880px) davranışı hiç değişmez. */
@media (max-width: 880px) {
  .tip::after,
  .hero-side .tip::after, .kpigrid .tip::after {
    position: fixed; left: 12px; right: 12px; bottom: 16px; top: auto;
    transform: none; margin-inline: auto;
    width: auto; max-width: 460px;
    font-size: .85rem; padding: .7rem .85rem;
    box-shadow: 0 12px 32px -8px rgba(28, 26, 21, .5); z-index: 200;
  }
  .tip::before,
  .hero-side .tip::before, .kpigrid .tip::before { display: none; }
}

.tagfilter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.filterbox:has(.tagfilter) { max-width: none; }
.filterbox:has(.tagfilter) input { max-width: 280px; }
.tagchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--inset); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
a.tagchip:hover { color: var(--accent); border-color: rgba(193, 80, 46, .35); }
.tagchip.sel { background: var(--accent); color: #fff; border-color: transparent; }
.tagchip.mini { font-size: .7rem; padding: .08rem .55rem; }
.tagrow { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.rowactions { display: flex; gap: .4rem; align-items: center; }
.tagedit { position: relative; }
.tagedit summary { list-style: none; cursor: pointer; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--muted); border: 1px solid var(--border); }
.tagedit summary::-webkit-details-marker { display: none; }
.tagedit summary:hover, .tagedit[open] summary { color: var(--accent); border-color: rgba(193, 80, 46, .4); }
.tagform { position: absolute; right: 0; top: 34px; z-index: 30; background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: .7rem; display: flex; gap: .5rem; width: 280px; animation: pop .18s var(--ease); }
.tagform input { margin: 0; font-size: .84rem; }

.rulerow { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.rulerow:last-of-type { border-bottom: 0; margin-bottom: .6rem; }
.rulecheck { display: flex !important; flex-direction: row !important; align-items: center; gap: .55rem; margin: 0 !important; font-weight: 550; cursor: pointer; flex: 1; }
.rulecheck input { width: 17px !important; height: 17px; margin: 0 !important; accent-color: var(--accent); }
.rulenum { width: 70px !important; margin: 0 !important; padding: .3rem .5rem !important; font-size: .85rem !important; }

.owncite { display: flex; flex-direction: column; gap: .9rem; }
.owncite-ok { border-color: rgba(31, 92, 77, .3); background: rgba(31, 92, 77, .06); }
.owncite-none { border-color: rgba(178, 107, 18, .3); background: rgba(178, 107, 18, .08); }
.owncite-head { display: flex; gap: .7rem; align-items: center; color: var(--accent); }
.owncite-head h2 { color: var(--text); }
.owncite-stats { display: flex; gap: 2rem; align-items: flex-end; flex-wrap: wrap; }
.owncite-provs { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; padding-bottom: .3rem; }
.row-own td { background: rgba(31, 92, 77, .05); }

.v2signals { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 .2rem; padding: .7rem .8rem; background: var(--inset); border-radius: var(--r-md); border: 1px solid var(--border); }

.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-state h2 { color: var(--text); margin: .8rem 0 .4rem; }
.empty-state p { max-width: 460px; margin: 0 auto; }

/* ═══ B39: kullanım-anında sorumluluk uyarısı (_liability.html) — .notice'ın küçük,
   düşük-vurgulu varyantı; ana içeriği bastırmasın diye dolgu/aralık daraltıldı ═══ */
.liability-notice { padding: .65rem .9rem; font-size: 12.5px; }
.liability-notice strong { color: var(--text); }

/* ═══ D15: kaynak tablosu/kart listesi "ilk 20 → tümünü göster" daraltması ═══ */
.src-pager { text-align: center; padding: .7rem 0 .1rem; }

/* ═══ D17: mobil yapışkan mini-özet — uzun mobil sayfada skoru üstte tutar,
   masaüstünde gizli; gerçek offset overview.html'deki küçük client-JS ile ölçülüp
   --topbar-h değişkenine yazılır (topbar yüksekliği cihaza göre değişir) ═══ */
.sticky-mini { display: none; }

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

/* ═══ Erişilebilirlik: "İçeriğe geç" bağlantısı (skip-link) — yalnız klavye odağında görünür.
   layout_app/layout_admin kabuğunun başında; metodoloji.html'deki .m-skip-link deseniyle aynı. ═══ */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: .75rem; width: auto; height: auto; z-index: 300;
  background: #24201A; color: #fff; padding: .6rem 1.1rem; border-radius: var(--r-md);
  font-weight: 650; font-size: .9rem; text-decoration: none; box-shadow: var(--shadow-2);
}
.skip-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(193, 80, 46, .45); }

/* Ekran-okuyucu-yalnız yardımcı (görsel gizli, AT'ye açık) — boş <th>, gizli etiketler için. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ Dokunma hedefi ≥44px (WCAG 2.5.8/2.5.5) — görsel boyut korunur; bağımsız duran ikon-butonların
   etkin tıklama alanı ::before overlay ile 44×44'e genişletilir (komşu öğeyle çakışmaz). ═══ */
.switch, .tagedit summary, .user-row a, .theme-toggle, .nav-toggle { position: relative; }
.switch::before, .tagedit summary::before, .user-row a::before,
.bell::before, .theme-toggle::before, .nav-toggle::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
}
/* Metin butonları / menü linkleri satırda komşuludur → overlay yerine yükseklikle, yalnız dokunmatikte. */
@media (pointer: coarse) {
  button.small { min-height: 44px; }
  .switcher-menu a { min-height: 44px; }
  .sidebar nav a { min-height: 44px; }
}

/* ═══ Mobil kart listesi — tablo yerine (≥880px gizli) ═══ */
.mcards { display: none; }

/* ═══ Mobil (880px altı): hamburger + slide-in drawer ═══ */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 280px; max-width: 85vw; height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s var(--ease);
    border-right: 1px solid var(--border);
    box-shadow: none;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 24px 64px -16px rgba(28, 26, 21, .35); }
  body.nav-open { overflow: hidden; }
  .content { padding: 16px; }
  .topbar { padding: .6rem 12px; gap: .5rem; }
  .topbar-title h1 { font-size: 16px; }         /* mobilde başlık küçülür, tek satır truncate */
  .topbar .crumb { font-size: 11px; }
  .top-actions { gap: .4rem; }
  /* topbar aksiyon butonları (Şimdi Tara vb.) mobilde küçülsün, taşmayı önle */
  .topbar .top-actions .btn-primary,
  .topbar .top-actions .btn-ghost,
  .topbar .top-actions .btn-outline { padding: .45rem .7rem; font-size: .82rem; white-space: nowrap; }
  .bell, .nav-toggle, .theme-toggle { width: 36px; height: 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .gauge-wrap { justify-content: center; }
  /* tabloyu gizle (yerine .mcards kullan) */
  .m-hide { display: none !important; }
  .mcards { display: flex; flex-direction: column; gap: 12px; }
  .mcard {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 14px 16px; box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: .45rem;
  }
  /* kendi-marka satırı: masaüstü tablodaki sol-accent vurgusunu mobil kartta da koru */
  .mcard.mcard-me { border-left: 3px solid var(--accent); }
  /* Yeniden-kullanılabilir kart-içi öğeler — tabloları .mcards'a bağlayan ajanlar için hazır sözlük:
     .mcard-title (üst başlık), .mcard-row (anahtar/değer satırı), .mcard-k (etiket), .mcard-v (değer). */
  .mcard-title { font-weight: 650; color: var(--text); font-size: .95rem; }
  .mcard-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: .86rem; }
  .mcard-row .mcard-k { color: var(--muted); font-weight: 550; flex-shrink: 0; }
  .mcard-row .mcard-v { color: var(--text); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* D17: mobil yapışkan mini-özet — topbar'ın hemen altına yapışır (--topbar-h ölçülür),
     içerik 16px kenar boşluğunu tam-genişlik şerit için negatif margin ile iptal eder */
  .sticky-mini {
    display: flex; align-items: center; gap: .5rem;
    position: sticky; top: var(--topbar-h, 60px); z-index: 15;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: .5rem 16px; margin: 0 -16px 12px;
    box-shadow: var(--shadow-1);
  }
  .sticky-mini .sticky-mini-num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
  .sticky-mini .sticky-mini-label { font-size: .72rem; margin-right: auto; }
  .sticky-mini .delta { padding: .04rem .5rem; font-size: .72rem; }
}

/* v7.6 (denetim P3): kaydırılabilir tablo ipucu — sağ kenarda solma gradyanı
   (yalnız taşma varsa görünür etki yaratır; JS gerektirmez) */
.tablewrap { position: relative; }
.tablewrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
  background: linear-gradient(to left, var(--card-solid), transparent);
  pointer-events: none; opacity: .9; }
@media (min-width: 900px) { .tablewrap::after { display: none; } }

/* v7.6 (denetim P3): koyu temada koyu-üstü-koyu hover görünmüyordu — açık katman */
:root[data-theme="dark"] .sidebar nav a:hover,
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .feed-item:hover { background: rgba(245, 241, 232, .06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar nav a:hover,
  :root:not([data-theme="light"]) tbody tr:hover,
  :root:not([data-theme="light"]) .btn-ghost:hover,
  :root:not([data-theme="light"]) .feed-item:hover { background: rgba(245, 241, 232, .06); }
}