/* ============================================================
   ZEO RADAR - Zeo Design System temalı arayüz
   Kaynak token'lar: design-system/zeo-tokens.css
   Font: Gilroy (başlık) + Akagi Pro (gövde) + mono rakamlar.
   ============================================================ */

@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Akagi Pro"; src: url("fonts/AkagiPro-Book.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Akagi Pro"; src: url("fonts/AkagiPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Akagi Pro"; src: url("fonts/AkagiPro-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-side: #fff7f8;          /* Zeo pink-50 */
  --panel: #ffffff;
  --border: #e8ecf2;           /* Zeo hairline */
  --border-soft: #eef1f6;
  --ink: #012535;              /* Zeo koyu / başlık */
  --ink-2: #273041;            /* gövde metni */
  --ink-3: #5a6678;            /* ikincil */
  --ink-4: #afb8ca;            /* çok ikincil */
  --accent: #cc0a4d;           /* Zeo marka kırmızısı */
  --accent-dark: #a30046;
  --fav-radius: 6px;           /* I-37: kare favicon/avatar köşesi (tek kaynak) */
  --fav-radius-round: 999px;   /* I-37: daire favicon/avatar */
  --on-accent: #fff;           /* I-28: accent/ink zemininde metin (tek kaynak) */
  --ring-track: #ffcfdf;       /* I-26: ilerleme halkası arka izi */
  --pink-100: #fde7ee;
  --pink-200: #ffcfdf;
  --green: #1a8f5a;
  --red: #cc0a4d;
  --chip-bg: #f5f8fc;
  --radius: 12px;
  --font: "Akagi Pro", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-head: "Gilroy", "Akagi Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-pop: 0 8px 30px rgba(1, 37, 53, .13), 0 2px 8px rgba(1, 37, 53, .06);
}

h1, h2, h3, .sec-head h2, .modal h2 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Sayfa yüksek olduğunda kaydırma çubuğu çıkıyor, kısa olduğunda çıkmıyordu;
   bu da görünür genişliği ~15px değiştirip ÜST ÇUBUKTAKİ düğmeleri (Şimdi ölç /
   Zeo AI) sekmeden sekmeye kaydırıyordu. Aynı sebeple bir modal açıldığında
   (body.modal-open -> overflow:hidden) arka plandaki tüm sayfa yana zıplıyordu.
   Yeri her zaman ayırınca ikisi de biter. */
html { scrollbar-gutter: stable; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input { font-family: inherit; }
.mono { font-family: var(--mono); }

/* ---------- Uygulama iskeleti ---------- */
/* M-07: geniş bir öge (tablo/matris) tüm sayfayı yatayda kaydırmasın. En dış
   sarmalayıcıda `overflow-x: clip`; yalnız X eksenini kırpar, Y `visible` kalır
   (scroll-container oluşturmaz) - sticky başlıklar ve aşağı açılan popover'lar
   etkilenmez. `hidden` yerine `clip` bilerek: diğer ekseni scroll'a zorlamaz. */
#app { display: flex; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }

.sidebar {
  width: 218px; min-width: 218px;
  background: var(--bg-side);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  padding: 14px 10px 12px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto;
}
.side-asset {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--ink);
  margin-bottom: 14px; position: relative;
}
.side-asset:hover { background: var(--side-hover); }
.side-asset .chev { margin-left: 2px; color: var(--ink-4); display: flex; flex-direction: column; line-height: 6px; font-size: 9px; }
.side-asset img.mark { width: 20px; height: 20px; object-fit: contain; }   /* I-42: kare 20x20 kutu, diğer sidebar ögeleriyle hizalı */

.side-label {
  font-size: 11.5px; color: var(--ink-4); font-weight: 500;
  padding: 12px 9px 5px; display: flex; align-items: center; gap: 4px;
}
.side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6.5px 9px; border-radius: 8px; cursor: pointer;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  margin: 1px 0;
}
.side-item svg { width: 15px; height: 15px; opacity: .75; }
.side-item:hover { background: var(--side-hover); }
.side-item.active { background: var(--pink-100); color: var(--ink); font-weight: 600; }
.side-item.active svg { opacity: 1; color: var(--accent); }
.side-foot { margin-top: auto; display: flex; gap: 14px; padding: 10px 9px 2px; color: var(--ink-3); }
.side-foot svg { width: 15px; height: 15px; }

/* Varlık değiştirici açılır menü */
.asset-pop {
  position: absolute; top: 42px; left: 0; z-index: 60;
  width: 198px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden;
}
.asset-pop .search {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft); color: var(--ink-4);
}
.asset-pop .search input { border: none; outline: none; font-size: 14.5px; width: 100%; }
.asset-pop .group { padding: 8px 0; }
.asset-pop .group-label { font-size: 11.5px; color: var(--ink-4); padding: 6px 14px; }
.asset-pop .row {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  cursor: pointer; font-weight: 500; font-size: 14px;
}
.asset-pop .row:hover { background: var(--hover); }
.asset-pop .row img { width: 20px; height: 20px; border-radius: 5px; }
.asset-pop .row .check { margin-left: auto; color: var(--accent); }
.asset-pop .all {
  border-top: 1px solid var(--border-soft); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer;
}
.asset-pop .all:hover { background: var(--hover); }

/* ---------- İçerik ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* M-95: klavyeyle gezerken odak her zaman görünür olsun. :focus-visible olduğu
   için yalnız klavye/tab'da çıkar, fareyle tıklamada çıkmaz - butonlar,
   bağlantılar ve tabindex'li ögelerde net marka halkası. */
/* `[tabindex="-1"]` HARİÇ: bunlar klavyeyle gezilen ögeler değil, açılınca
   odağı almaları için programatik olarak odaklanan kapsayıcılar (modal gövdesi
   gibi). Onlara da halka çizilince, bir prompt'a tıklayıp modal açıldığında
   pencerenin çevresinde kırmızı bir şerit beliriyordu. Klavye kullanıcısının
   gördüğü halka olduğu gibi duruyor. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible:not([tabindex="-1"]) {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 26px 0;
}
.acct-banner {
  display: flex; align-items: center; gap: 10px; margin: 14px 26px 0;
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
  background: var(--pink-100, #fff7f8); border: 1px solid var(--accent); color: var(--ink);
}
.acct-banner span { flex: 1; }
.acct-banner svg { color: var(--accent); flex: none; }
.topbar .brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; }
.topbar .brand img { width: 22px; height: 22px; border-radius: 5px; }
.topbar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--panel);
  border-radius: 9px; padding: 7px 13px; font-weight: 600; font-size: 13px;
  color: var(--ink); white-space: nowrap;
}
.btn:hover { background: var(--hover); border-color: var(--pink-200); }
.btn.black { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.black:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn svg { width: 14px; height: 14px; }
/* İkon + metin hizası (tek kaynak). Akagi'de harflerin görsel merkezi satır
   kutusunun merkezinden ~1px yukarıdadır; flex kutularda (düğme, çip, menü)
   ikon bu yüzden hafif aşağıda görünüyordu. Satır içi kullanımda (rozet, not,
   bağlantı) ise taban çizgisi ikonu yukarı iter; vertical-align bunu dengeler.
   Tek başına ortalanan ikonlar (ikon düğmesi, onay kutusu, renk kutusu) hariç. */
svg.ic { flex: none; position: relative; top: -1px; vertical-align: middle; }
.icon-btn svg.ic, .legend .sw svg.ic, .fpop .opt .cb svg.ic, .tc-icon svg.ic, .side-asset .chev svg.ic { top: 0; vertical-align: middle; }
.btn:disabled { opacity: .45; cursor: default; }

.tabs {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 26px 0; border-bottom: 1px solid var(--border-soft);
}
.tab {
  padding: 6px 1px 11px; font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .spacer { flex: 1; }
.tabs .side-links { display: flex; gap: 16px; align-items: center; padding-bottom: 8px; }
/* The row never wraps and never cuts anything off: narrower than its tabs it
   scrolls sideways, the three buttons at the end stay pinned, and when the
   room is short they shrink to their icons (the name is the tooltip). */
.tabs { position: relative; container-type: inline-size; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > * { flex: none; }
.tabs .side-links { position: sticky; right: 0; margin-left: auto; padding-left: 16px; background: linear-gradient(90deg, transparent, var(--bg) 16px); }
@container (max-width: 1240px) {
  .tabs .side-links .lbl { display: none; }
  .tabs .side-links .btn { padding: 7px; min-width: 34px; justify-content: center; gap: 0; }
  .tabs .side-links .btn svg { width: 15px; height: 15px; }
}

/* Filtre çubuğu */
.filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 26px;
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel); padding: 6px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; position: relative; white-space: nowrap;
}
.fchip:hover { background: var(--hover); }
.fchip.dashed { border-style: dashed; }
/* A filter chip that is actually filtering something. */
.fchip.on { border-color: var(--accent); color: var(--ink); }
.fchip svg { width: 13px; height: 13px; opacity: .7; }
.fchip .cnt { background: var(--accent); color: var(--on-accent); border-radius: 99px; font-size: 10.5px; padding: 1px 6px; font-family: var(--mono); }
.fchip .x { color: var(--ink-4); font-size: 13px; padding-left: 2px; }
.fchip .x:hover { color: var(--ink); }
.freset { color: var(--ink-2); font-weight: 600; font-size: 12.5px; padding: 6px 8px; cursor: pointer; border-radius: 8px; }
.freset { color: var(--accent); }
.freset:hover { background: var(--pink-100); }
.filterbar .divider { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.filterbar .spacer { flex: 1; }
.icon-btn {
  border: 1px solid var(--border); background: var(--panel); border-radius: 8px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn.disabled { opacity: .4; cursor: not-allowed; }
.icon-btn.disabled:hover { background: var(--panel); }
.icon-btn svg { width: 14px; height: 14px; }

/* Filtre açılır menüsü */
.fpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 55;
  min-width: 225px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-pop); overflow: hidden;
  font-weight: 500; cursor: default;
}
.fpop .search { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); color: var(--ink-4); }
.fpop .search input { border: none; outline: none; width: 100%; font-size: 13.5px; }
.fpop .opts { max-height: 260px; overflow-y: auto; padding: 5px; }
.fpop .opt {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink);
}
.fpop .opt:hover { background: var(--hover); }
/* I-12: onay kutusu geometrisi tek tanım (.auth-check .box ile paylaşılıyor).
   Eskiden 15px/r4/1.4px ve 16px/r5/1px diye kaymışlardı; fark gözle ayırt
   edilmiyordu ama iki ayrı bakım noktasıydı. İŞARETLİ RENGİ bilinçli olarak
   varyant kalıyor: filtrelerde marka rengi, giriş ekranında o ekranın koyu
   paleti (birincil düğmesi de koyu). */
.fpop .opt .cb, .auth-check .box {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; background: var(--panel);
}
.fpop .opt .cb { border-color: var(--pink-200); }
.fpop .opt.on .cb { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fpop .opt .cb svg { width: 9px; height: 9px; }
.fpop .foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border-soft); padding: 9px 13px; font-size: 12.5px; color: var(--ink-3);
}
.fpop .foot .clear { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.fpop .foot .clear:hover { color: var(--ink); }

/* ---------- Sayfa gövdesi ---------- */
.page { padding: 6px 26px 60px; }
.section { margin-top: 26px; }
.sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sec-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.sec-head .spacer { flex: 1; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo > .half { padding: 18px 20px 16px; min-width: 0; }
.duo > .half + .half { border-left: 1px solid var(--border-soft); }

.metric-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; border-bottom: 1px dashed var(--pink-200); display: inline-block; padding-bottom: 1px; }
.big-num { font-family: var(--font-head); font-size: 27px; font-weight: 800; color: var(--ink); margin-top: 8px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.big-num .delta { font-size: 13px; color: var(--ink-4); font-weight: 500; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }

/* Grafikler */
.chart-wrap { margin-top: 6px; position: relative; }
.chart-dl { position: absolute; right: 0; top: -34px; }
svg.chart text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-4); }
.axis-icons { display: flex; justify-content: space-around; margin-top: 6px; }
.axis-icons img, .axis-icons .avatar, .axis-icons svg { width: 18px; height: 18px; border-radius: var(--fav-radius); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.legend .li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); }
.legend .sw svg { width: 9px; height: 9px; }
.legend .li.off .sw { background: var(--panel) !important; border: 1.4px solid var(--pink-200); }
.legend .li.off { color: var(--ink-4); }

/* Sıralama listeleri */
.rank-title { font-size: 12.5px; color: var(--ink-3); font-weight: 500; border-bottom: 1px dashed var(--pink-200); display: inline-block; padding-bottom: 1px; }
.rank-big { font-family: var(--font-head); font-size: 27px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.rank-cols { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; margin: 14px 0 4px; }
.rank-list .rrow {
  display: flex; align-items: center; gap: 10px;
  padding: 9.5px 0; border-bottom: 1px solid var(--border-soft);
}
.rank-list .rrow:last-child { border-bottom: none; }
.rank-list .num { font-family: var(--mono); color: var(--ink-4); width: 22px; font-size: 12.5px; }
.rank-list img.fav, .avatar { width: 20px; height: 20px; border-radius: var(--fav-radius); object-fit: contain; }
.rank-list .nm { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.rank-list .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  background: var(--chip-bg); color: var(--ink-2); font-size: 11px; font-weight: 600;
  border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.rank-list .val { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.rank-list .val .delta { font-size: 12px; font-weight: 500; color: var(--ink-4); }
.expand-row { display: flex; justify-content: flex-end; margin-top: 10px; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--on-accent); text-transform: uppercase;
  font-family: var(--mono);
}

/* Tablolar */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; color: var(--ink-3); font-weight: 500; font-size: 12.5px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: var(--hover);
  white-space: nowrap;
}
.tbl th:first-child { border-top-left-radius: var(--radius); }
.tbl th:last-child { border-top-right-radius: var(--radius); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.num, .tbl th.num { font-family: var(--mono); }
.tbl .rankcell { color: var(--ink-4); font-family: var(--mono); font-size: 12.5px; width: 40px; }
.tbl .domain { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.tbl .domain > .fav, .tbl .domain > .avatar { flex: none; }
/* A page address is shown whole and wraps where it must (pages.js pageRowHTML). */
.pg-url { min-width: 0; overflow-wrap: anywhere; }
.pg-host { color: var(--ink-3); font-weight: 500; }
.pages-table td:nth-child(2) { min-width: 380px; }
.tbl .delta { font-family: var(--mono); font-size: 12.5px; }
.tbl-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--ink-3); font-size: 12.5px; }
.tbl-foot b { color: var(--ink); font-weight: 600; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--hover); }

/* Kategori rozetleri */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  border-radius: 99px; padding: 3px 9px; white-space: nowrap;
}
.cat-social { background: #f5f0ff; color: #7c3aed; }
.cat-owned { background: #f1f6f4; color: #1a8f5a; }
.cat-earned { background: #eff4ff; color: #2563eb; }
.cat-institution { background: #ecfeff; color: #0e7490; }
.cat-prwire { background: #fff7ed; color: #d97706; }
.cat-competition { background: var(--pink-100); color: var(--accent); }
.cat-other { background: #f5f8fc; color: #5a6678; }

/* Yığılmış kategori çubuğu */
.stackbar { display: flex; height: 30px; border-radius: 7px; overflow: hidden; gap: 3px; }
.stackbar .seg {
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent); font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  min-width: 4px; border-radius: 4px; transition: flex-basis .2s;
}

/* Anılma rozetleri */
.mention { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.mention .dot { width: 15px; height: 15px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); }
.mention .dot svg { width: 8px; height: 8px; }
.mention.yes .dot { background: var(--green); }
.mention.no .dot { background: var(--accent); }
.mention.unk { color: var(--ink-3); font-weight: 500; }
.mention.unk .dot { background: #d5dbe6; color: #5a6678; }

/* Isı haritası */
.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; width: 100%; }
.matrix th {
  font-size: 12.5px; color: var(--ink-2); font-weight: 600; padding: 11px 12px;
  background: var(--hover); border-bottom: 1px solid var(--border-soft); text-align: center; white-space: nowrap;
}
.matrix th:first-child { text-align: left; }
/* M-26: yatay kaydırırken ilk sütun (marka/konu adı) sabit kalsın. */
.matrix th:first-child, .matrix td.brandcell { position: sticky; left: 0; z-index: 2; }
.matrix th:first-child { z-index: 3; }
.matrix th .ph { display: inline-flex; align-items: center; gap: 7px; }
.matrix td { padding: 0; border: 1px solid var(--panel); }
.matrix td.brandcell { padding: 10px 12px; background: var(--panel); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.matrix td.brandcell .bwrap { display: flex; align-items: center; gap: 9px; }
.matrix .cell {
  display: flex; align-items: center; justify-content: center;
  height: 43px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; min-width: 120px;
}

/* Dağılım (scatter) */
.scatter-legend { display: flex; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.scatter-legend .li { display: flex; gap: 7px; align-items: center; }
.scatter-legend .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--c); }
.scatter-legend .n { color: var(--ink-4); font-family: var(--mono); font-weight: 500; }
.scatter-wrap { padding: 10px 16px 16px; }
svg.scatter .qlabel { font-size: 11.5px; fill: #9ca3af; font-family: var(--font); }
svg.scatter .axis-label { font-size: 11.5px; fill: #6b7280; font-family: var(--font); }
.pt-chip { font-size: 11.5px; font-weight: 600; }
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg-toggle button { padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; background: var(--panel); }
.seg-toggle button.on { background: var(--pink-100); color: var(--accent); }
.seg-toggle button svg { width: 13px; height: 13px; }

/* Konu satırları (logo ızgaralı) */
/* M-20/M-21: konu + prompt ızgaraları min ~760px (240 + 10×52); dar ekranda
   kart'ı yatay kaydır (masaüstünde 1fr sütunlar sığdığından kaydırma çıkmaz). */
.topic-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.topic-table .trow { border-bottom: 1px solid var(--border-soft); }
.topic-table .trow:last-child { border-bottom: none; }
.topic-head {
  display: grid; grid-template-columns: minmax(240px, 1.1fr) repeat(10, minmax(52px, 1fr));
  align-items: center; padding: 9px 14px; cursor: pointer;
}
.topic-head:hover { background: var(--hover); }
.topic-head .tname { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; }
.topic-head .tname .chev { color: var(--ink-4); transition: transform .15s; }
.topic-head.open .tname .chev { transform: rotate(90deg); }
.topic-head .cell-logo { display: flex; justify-content: center; }
.topic-head .cell-logo img, .topic-head .cell-logo .avatar { width: 26px; height: 26px; font-size: 12px; border-radius: var(--fav-radius-round); border: 1px solid var(--border-soft); background: var(--panel); }
.topic-sub { padding: 2px 14px 10px 34px; }
.prompt-line {
  display: grid; grid-template-columns: minmax(240px, 1.1fr) repeat(10, minmax(52px, 1fr));
  align-items: center; padding: 7px 0; cursor: pointer; border-radius: 8px;
}
.prompt-line:hover { background: var(--hover); }
.prompt-line .ptext { font-size: 13px; color: var(--ink-2); padding-right: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-line .cell-logo { display: flex; justify-content: center; }
.prompt-line .cell-logo img, .prompt-line .cell-logo .avatar { width: 22px; height: 22px; border-radius: var(--fav-radius-round); border: 1px solid var(--border-soft); background: var(--panel); }
.hdr-line {
  display: grid; grid-template-columns: minmax(240px, 1.1fr) repeat(10, minmax(52px, 1fr));
  padding: 10px 14px; background: var(--hover); color: var(--ink-3); font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.hdr-line .c { text-align: center; font-family: var(--mono); }
.tag-leader { color: #1a8f5a; background: #f1f6f4; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.tag-needs { color: var(--accent); background: var(--pink-100); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }

/* Prompt analiz tablosu */
/* M-22/M-24: Prompt Analizi ızgarası min ~830px (280 + 5×110); dar ekranda
   kart'ı yatay kaydır. Masaüstünde 1fr sütunlar sığdığından kaydırma çıkmaz. */
.pa-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* M-22: geniş .tbl/.pf-table tabloları (Kaynaklar, Sayfalar, KB, Portföy vb.)
   dar ekranda yatay kaydırılsın. Ortak sarmalayıcı + tablo içeren kartlar. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A card holding a table scrolls it sideways whenever the table is wider than the
   card (it used to do so only below 900 px, so at 1100 px with the menu open the
   right-hand columns were simply cut off). */
.card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pa-row-group > .pa-topic {
  display: grid; grid-template-columns: minmax(280px, 2fr) repeat(5, minmax(110px, 1fr));
  align-items: center; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
}
.pa-topic:hover { background: var(--hover); }
.pa-topic .tname { font-weight: 600; display: flex; gap: 9px; align-items: center; }
.pa-topic .tname .chev { color: var(--ink-4); transition: transform .15s; }
.pa-topic.open .tname .chev { transform: rotate(90deg); }
.pa-topic .tname .sub { display: block; font-weight: 400; color: var(--ink-4); font-size: 11.5px; margin-top: 2px; }
.pa-cell { font-family: var(--mono); font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.pa-cell .d { color: var(--ink-4); font-size: 11.5px; }
.pa-prompt {
  display: grid; grid-template-columns: minmax(280px, 2fr) repeat(5, minmax(110px, 1fr));
  align-items: center; padding: 9px 14px 9px 36px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
  font-size: 13px; color: var(--ink-2);
}
.pa-prompt:hover { background: var(--hover); }
.pa-prompt .ptext { padding-right: 12px; }
.pa-hdr {
  display: grid; grid-template-columns: minmax(280px, 2fr) repeat(5, minmax(110px, 1fr));
  padding: 10px 14px; background: var(--hover); color: var(--ink-3); font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.count-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); font-family: var(--mono); }
.ring { width: 16px; height: 16px; transform: rotate(-90deg); }
/* I-26: halka arka izi tema token'ıyla (CSS kuralı, inline stroke presentation
   attribute'unu ezer; JS'e dokunmadan karanlık temaya uyum). */
.ring circle:first-child { stroke: var(--ring-track); }
.seg-tabs { display: inline-flex; background: var(--pink-100); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-tabs button { border-radius: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.seg-tabs button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(1,37,53,.1); }
.search-input {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 11px; background: var(--panel); color: var(--ink-4);
}
.search-input input { border: none; outline: none; font-size: 13px; width: 170px; color: var(--ink); }
/* Tek satırlık metin kutusu (Designer'da yeni prompt / konu adı). .search-input
   ile aynı çerçeve, köşe ve odak halkası; tarayıcı varsayılanı görünmesin. */
.bs-input {
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px;
  background: var(--panel); color: var(--ink); font-family: var(--font); font-size: 13px;
  outline: none; min-width: 0; box-sizing: border-box; min-height: 34px;
}
.bs-input::placeholder { color: var(--ink-4); }
.bs-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pink-100); }

/* Fanout */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--hover); border: 1px solid var(--pink-200); border-radius: var(--radius);
  padding: 13px 16px; color: var(--ink-2); font-size: 13px;
}
.banner b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.banner .x { margin-left: auto; color: var(--ink-4); cursor: pointer; }
.fan-row { border-bottom: 1px solid var(--border-soft); }
.fan-row:last-child { border-bottom: none; }
.fan-head { display: grid; grid-template-columns: 1fr 160px 200px; align-items: center; padding: 11px 16px; cursor: pointer; }
.fan-head:hover { background: var(--hover); }
.fan-head .q { font-weight: 500; font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start; }
.fan-head .q .chev { color: var(--ink-4); margin-top: 2px; transition: transform .15s; }
.fan-head.open .q .chev { transform: rotate(90deg); }
.fan-head .q .sub { display: block; color: var(--ink-4); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.fan-head .n { font-family: var(--mono); font-size: 13px; }
/* Prompts toolbar: the controls wrap onto a second line instead of running off the right edge. */
.pa-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pa-tools .search-input { min-width: 0; flex: 0 1 auto; }
@media (max-width: 768px) { .pa-tools .search-input { flex: 1 1 100%; } }
/* Query fanouts: three columns do not fit a phone, so the card scrolls (the
   prompt column keeps a readable width instead of squeezing to one word a line). */
.fan-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .fan-table > .fan-head, .fan-table > .fan-row { min-width: 520px; }
}
.fan-subrows { padding: 0 16px 10px 36px; }
.fan-sub { display: grid; grid-template-columns: 1fr 160px 200px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 9px; margin-bottom: 6px; font-size: 13px; }
.fan-sub .n { font-family: var(--mono); }
.fan-sub .plus { color: var(--green); font-family: var(--mono); margin-left: 8px; font-size: 12px; }

/* Sentiment önizleme kartları */
.quote-rail { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.quote-rail > * { scroll-snap-align: start; }   /* M-32: kaydırırken kartlar hizaya otursun */
.quote-card {
  min-width: 250px; max-width: 250px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 13px; padding: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.04);
  display: flex; flex-direction: column; gap: 14px;
}
.quote-card .qt { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.quote-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.quote-card .plat { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.slabel { font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 3px 8px; }
.slabel.positive { color: #1a8f5a; background: #f1f6f4; }
.slabel.neutral { color: #5a6678; background: #f5f8fc; }
.slabel.negative { color: var(--accent); background: var(--pink-100); }

/* Bölgeler */
.regions-grid { display: grid; grid-template-columns: 1.6fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.map-pane { background: #eef1f6; position: relative; min-height: 480px; }
.map-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ink-3); }
.map-pane svg { width: 100%; height: 100%; display: block; }
.map-pane svg path { fill: #ffffff; stroke: #d5dbe6; stroke-width: .4; }
.map-pane svg path.tracked { fill: #cc0a4d; stroke: #a30046; }
.map-pane svg path.neighbor { fill: #ffcfdf; stroke: #f5b3c9; }
.map-zoom { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button { width: 30px; height: 30px; background: var(--panel); border-radius: 8px; border: 1px solid var(--border); font-size: 16px; font-weight: 600; }
.region-pane { border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.region-pane .seg-tabs { margin: 14px 14px 4px; }
.region-row { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); font-weight: 600; font-size: 13.5px; }
.region-row .flag { width: 20px; height: 20px; border-radius: 99px; }
.region-row .val { margin-left: auto; font-family: var(--mono); font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.region-pane .cta { margin: auto 14px 14px; }
.region-cols { display: flex; justify-content: space-between; padding: 10px 16px; color: var(--ink-3); font-size: 12.5px; border-bottom: 1px solid var(--border-soft); }

/* Modallar */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 21, 26, .45); z-index: 90;
  display: flex; align-items: flex-start; justify-content: center; padding: 34px 20px;
  overflow-y: auto; overscroll-behavior: contain;   /* M-97: kaydırma arka sayfaya taşmasın */
}
/* M-97: modal açıkken (modalHolder dolu) arka sayfa kaymasın. */
body.modal-open { overflow: hidden; }
.modal {
  background: var(--panel); border-radius: 16px; width: 100%; max-width: 1280px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28); position: relative;
  padding: 26px 30px 30px; margin-bottom: 40px;
}
.modal .close { position: absolute; top: 16px; right: 18px; color: var(--ink-4); font-size: 17px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.modal .close:hover { background: var(--pink-100); color: var(--accent); }
.modal .m-kicker { color: var(--ink-3); font-size: 12.5px; }
.modal h2 { font-size: 21px; letter-spacing: -.01em; margin-top: 5px; }
.modal .m-sub { color: var(--ink-3); font-size: 13px; margin-top: 5px; }
.m-tabs { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--border-soft); margin-top: 18px; }   /* M-42: dar modalda sekmeler sarsın */
.m-tabs .tab { padding-bottom: 9px; }
.exec-row { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.exec-head { display: flex; align-items: center; gap: 11px; padding: 12px 15px; cursor: pointer; }
.exec-head:hover { background: var(--hover); }
.exec-head .pname { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.exec-head .model { color: var(--ink-4); font-size: 12px; font-family: var(--mono); }
.exec-head .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.exec-head .chev { color: var(--ink-4); transition: transform .15s; }
.exec-row.open .exec-head .chev { transform: rotate(90deg); }
.exec-body { border-top: 1px solid var(--border-soft); padding: 16px 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); background: #fffbfc; }
.exec-body h1, .exec-body h2, .exec-body h3 { font-size: 14px; margin: 12px 0 6px; color: var(--ink); }
.exec-body ul, .exec-body ol { padding-left: 20px; margin: 8px 0; }
.exec-body li { margin: 3px 0; }
.exec-body a { color: var(--accent); }
.exec-body p { margin: 8px 0; }
.exec-body strong { color: var(--ink); }
.mini-favs { display: flex; align-items: center; }
.mini-favs img, .mini-favs .avatar { width: 20px; height: 20px; border-radius: var(--fav-radius-round); border: 1.6px solid #fff; margin-left: -6px; }
.mini-favs img:first-child, .mini-favs .avatar:first-child { margin-left: 0; }
.mini-favs .more { font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-left: 5px; }

/* Prompt Designer */
.designer-grid { display: grid; grid-template-columns: 218px 1fr; min-height: 60vh; }
.dg-side { border-right: 1px solid var(--border-soft); padding: 14px 10px; display: flex; flex-direction: column; }
.dg-side .t-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.dg-side .t-row:hover { background: var(--side-hover); }
.dg-side .t-row.on { background: var(--pink-100); color: var(--ink); font-weight: 600; }
.dg-side .t-row .n { color: var(--ink-4); font-family: var(--mono); font-size: 12px; }
.dg-side .addt { margin-top: auto; }
.dg-main { padding: 14px 20px; min-width: 0; }
.dg-toolbar { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; }
.dg-toolbar .spacer { flex: 1; }
/* Prompts screen: the controls that became real.
   A native checkbox in brand colour instead of the decorative square that
   used to sit here, and the inline rows for adding a prompt or a topic. */
.dg-main input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.dg-add-row { display: flex; gap: 8px; align-items: center; }
.dg-add-row .bs-input { flex: 1; }
.dg-side .dg-add-topic { margin-top: auto; display: flex; gap: 6px; padding-top: 8px; }
.dg-side .dg-add-topic .bs-input { flex: 1; min-width: 0; }
.btn .soon-tag { margin-left: 6px; }
.prompt-type-chips { display: flex; gap: 5px; }

/* All Assets ana sayfa */
/* width:100% so a wide table inside scrolls in its own box instead of stretching the page (a block with auto margins sizes to its content). */
.home { width: 100%; max-width: 1130px; margin: 0 auto; padding: 46px 30px 80px; }
.onb-unfetched { color: var(--accent); }
.onb-home { margin-top: 18px; text-align: center; font-size: 13px; }
.onb-home span { color: var(--ink-3); cursor: pointer; text-decoration: underline; }
.onb-home span:hover { color: var(--ink); }
.home-empty {
  grid-column: 1 / -1; padding: 34px 18px; text-align: center;
  color: var(--ink-3); font-size: 14px; border: 1px dashed var(--border); border-radius: 12px;
}
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.asset-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 15px;
  padding: 20px; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 14px;
}
.asset-card:hover { border-color: var(--accent); background: var(--hover); }
.asset-card.pending { cursor: default; border-style: dashed; }
.asset-card.pending:hover { border-color: var(--border); background: var(--panel); }
.pc-status { font-size: 13px; color: var(--ink-2); padding: 4px 0; flex: 1; }
.pc-status.bad { color: var(--accent); }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asset-card .top { display: flex; align-items: center; gap: 11px; }
.asset-card .top img, .asset-card .top .avatar { width: 34px; height: 34px; font-size: 15px; border-radius: var(--fav-radius); }
.asset-card .nm { font-weight: 700; font-size: 15.5px; }
.asset-card .dm { color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.asset-card .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.asset-card .stat .k { color: var(--ink-3); font-size: 11px; font-weight: 500; }
.asset-card .stat .v { font-family: var(--mono); font-weight: 700; font-size: 15px; margin-top: 3px; }
.asset-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink-3); font-size: 11.5px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.home-note { margin-top: 34px; color: var(--ink-3); font-size: 12px; text-align: center; }

/* Yardımcılar */
.hidden { display: none !important; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; }
.dim { color: var(--ink-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: #d5dbe6; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1180px) {
  .duo { grid-template-columns: 1fr; }
  .duo > .half + .half { border-left: none; border-top: 1px solid var(--border-soft); }
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .regions-grid { grid-template-columns: 1fr; }
}
/* M-11/M-12/M-14: araç çubukları ≤768px'te sarılsın (sıkışma/taşma yerine alt
   satıra insin). M-62: iOS'ta form alanına dokununca sayfa zoom yapmasın diye
   yazı boyutu 16px. Yalnız ≤768px; masaüstü değişmez. */
@media (max-width: 768px) {
  .topbar, .sec-head, .dg-toolbar, .chat-bar { flex-wrap: wrap; row-gap: 8px; }
  input, select, textarea { font-size: 16px; }
  /* M-10: 8 sekme + ayar/export dar ekranda tek satırda yatay kaydırılsın
     (sarmak yerine); flex:none ile sekmeler sıkışmadan kayar, spacer gizli. */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 18px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }
  .tabs .spacer { display: none; }
  /* M-53: sohbet balonu telefonda daha geniş, tablolar balondan taşmasın (yatay kaydır). */
  .msg.user .bubble { max-width: 92%; }
  .ai-text .chat-table { display: block; overflow-x: auto; }
}
/* M-04 / M-08: dar telefon - kart gridi tek sütun, dolguları küçült. Yalnız
   ≤640px; masaüstünü etkilemez. (Kapsamlı mobil geçiş M-* kümesinde devam.) */
@media (max-width: 640px) {
  .home-grid { grid-template-columns: 1fr; }
  .home { padding: 24px 14px 60px; }
  .page { padding: 6px 14px 50px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .tabs { padding-left: 14px; padding-right: 14px; gap: 16px; }
  .viz-filter-row { grid-template-columns: 1fr; }   /* M-45: etiket + kontrol alt alta */
  .convo-switch { max-width: 55%; }                 /* M-52: sohbet seçici topbar'ı taşırmasın */
  .ad-text { max-height: none; overflow-y: visible; }  /* M-46: sayfa içinde iç içe kaydırma tuzağı olmasın */
  .price-grid { gap: 28px; }                        /* M-82: tek sütunda "en çok tercih edilen" rozeti üst kartla çakışmasın */
  /* M-40: telefonda modal tam ekran (260px içeriğe sıkışmasın). M-41: kapat
     düğmesi 44px ve kaydırırken görünür kalsın. */
  .overlay { padding: 0; }
  .modal { border-radius: 0; max-width: none; margin-bottom: 0; min-height: 100vh; min-height: 100dvh; padding: 20px 16px 34px; }
  .modal .close { position: fixed; top: 8px; right: 8px; width: 44px; height: 44px; background: var(--panel); box-shadow: 0 1px 6px rgba(0,0,0,.12); z-index: 6; }
  .map-pane { min-height: 52vw; }   /* M-28: sabit 480px yerine ekranla oranlı yükseklik */
}
/* M-23: Prompt Designer ve KB'de 218/210px sabit sol sütun ≤900px'te tek sütun. */
@media (max-width: 900px) {
  .designer-grid, .kb-body { grid-template-columns: 1fr; }
}
/* M-29: Prompt Designer KPI kutuları çok dar modalda taşmasın. */
/* M-60: 6 kod kutusu (6×48 + gaplar = 338px) 360px telefonda taşıyor - esnek yap. */
@media (max-width: 400px) {
  .auth-codes { gap: 6px; }
  .auth-code { flex: 1; min-width: 0; width: auto; }
}
/* M-91: dokunmatik cihazda hover olmadığından, yalnız hover'da beliren
   düzenle/sil/aksiyon düğmeleri hiç görünmüyordu. Fare imleci olmayan
   cihazlarda kalıcı görünür yap. */
@media (hover: none) {
  .ai-tools,
  .persona-card .pc-actions,
  .dash-row .icon-btn,
  .viz-head .viz-actions,
  .sc-foot .icon-btn,
  .cp-del, .cp-ren,
  .kb-card .kbc-top .icon-btn,
  .kb-tbl td:last-child .icon-btn { opacity: 1; }
}
/* M-92/M-93: dokunmatik (kaba işaretçi) cihazlarda dokunma hedefleri en az
   ~40px olsun; ikon düğmeleri ve sidebar öğeleri parmakla rahat basılsın.
   Yalnız pointer:coarse - fare/masaüstünde boyutlar değişmez. */
@media (pointer: coarse) {
  .icon-btn, .map-zoom button { width: 40px; height: 40px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .side-foot .foot-btn { min-width: 40px; min-height: 40px; }
  .side-item { padding-top: 10px; padding-bottom: 10px; }
}
/* M-98: hareketi azalt tercihini tüm animasyonlara uygula (önce yalnız
   onboarding'deydi). Erişilebilirlik + vestibüler rahatsızlık. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Alt buton çubuğu / bilgi kutusu / menü kapatma ---------- */
.side-foot .foot-btn {
  cursor: pointer; border-radius: 7px; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.side-foot .foot-btn:hover { background: var(--side-hover); color: var(--ink); }
.info-pop {
  position: fixed; bottom: 52px; left: 10px; z-index: 80;
  width: 198px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-pop);
  padding: 13px 15px; text-align: left; cursor: default;
}
.info-pop .t { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.info-pop .t img { width: 17px; height: 16px; }
.info-pop .line { font-size: 12px; color: var(--ink-3); margin-top: 7px; line-height: 1.5; }
.info-pop .kv { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.info-pop .kv .k { color: var(--ink-3); }
.info-pop .kv .v { font-family: var(--mono); font-weight: 600; color: var(--ink); }
/* Hesap Kimliği: UUID uzun, tek satıra sığmaz. Etiketi üstte, id'yi altta tam
   göster; tıklanınca kopyalanır. */
/* H-35: hesap yönetiminde açıklama satırı ve geri alınamaz eylem vurgusu */
.acc-note { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 6px 0 2px; }
.acc-cta.danger { color: var(--accent); }
.auth-btn.danger { background: var(--accent); border-color: var(--accent); }
.auth-btn.danger:disabled { opacity: .5; }
.info-pop .acct-id-row { flex-direction: column; align-items: stretch; gap: 3px; }
.info-pop .acct-id { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11.5px; word-break: break-all; padding: 4px 7px; border-radius: 6px;
  background: var(--hover); border: 1px solid var(--border-soft); color: var(--ink-2); }
.info-pop .acct-id:hover { background: var(--pink-100); color: var(--ink); }
.info-pop .acct-id svg { flex: none; opacity: .7; }
.info-pop .foot-link { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--accent); font-weight: 600; }

body.side-collapsed .sidebar { display: none; }
/* M-01: dar ekranda (≤1024px) menü açıkken içeriği itmesin - içeriğin üstüne
   kayan off-canvas panel + dokununca kapatan perde. Menü kapalıyken (varsayılan
   mobilde, M-03) gizli ve sol alttaki aç düğmesi görünür. */
.side-backdrop { display: none; }
@media (max-width: 1024px) {
  body:not(.side-collapsed) .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 95;
    box-shadow: 4px 0 28px rgba(2, 10, 16, .28);
  }
  body:not(.side-collapsed) .side-backdrop {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(2, 10, 16, .45);
  }
}
.side-reopen {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45;   /* M-06 */
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-pop);
}
.side-reopen:hover { background: var(--hover); color: var(--ink); }

input { color: var(--ink); background: transparent; }
input::placeholder { color: var(--ink-4); }

/* ---------- KOYU TEMA (Zeo ink zemin + soft red vurgu) ---------- */
body.dark {
  --bg: #06131c;
  --bg-side: #0a1b26;
  --panel: #0d2130;
  --border: #1d3849;
  --border-soft: #17303f;
  --ring-track: #3a2431;       /* I-26: karanlık temada halka izi (soluk) */
  --ink: #eef4f8;
  --ink-2: #c9d6de;
  --ink-3: #8aa2b0;
  --ink-4: #546c7d;
  --accent: #cc0a4d;
  --accent-dark: #e2135c;
  --pink-100: rgba(204, 10, 77, .18);
  --pink-200: #4a2438;
  --chip-bg: #14293a;
  --hover: #102331;
  --side-hover: #13293a;
  --shadow-pop: 0 10px 34px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
}
body.dark .freset { color: #ff8aae; }
body.dark .seg-tabs button.on { color: #ff8aae; }
body.dark .asset-pop .row .check { color: #ff8aae; }
body.dark .info-pop .foot-link { color: #ff8aae; }
body.dark .btn.black { background: #cc0a4d; border-color: #cc0a4d; color: var(--on-accent); }
body.dark .btn.black:hover { background: #e2135c; border-color: #e2135c; }
body.dark .exec-body { background: #0b1c29; }
body.dark .map-pane { background: #081722; }
body.dark .map-pane svg path { fill: #14283a; stroke: #1f3a4d; }
body.dark .map-pane svg path.tracked { fill: #cc0a4d; stroke: #ff8aae; }
body.dark .mention.unk .dot { background: #33495a; color: #9db3c0; }
body.dark .mini-favs img, body.dark .mini-favs .avatar { border-color: var(--panel); }
body.dark .cat-social { background: rgba(139, 92, 246, .2); color: #c4b5fd; }
body.dark .cat-owned { background: rgba(26, 143, 90, .2); color: #6ee7b7; }
body.dark .cat-earned { background: rgba(59, 130, 246, .2); color: #93c5fd; }
body.dark .cat-institution { background: rgba(6, 182, 212, .18); color: #67e8f9; }
body.dark .cat-prwire { background: rgba(245, 158, 11, .18); color: #fcd34d; }
body.dark .cat-competition { background: rgba(204, 10, 77, .26); color: #ff8aae; }
body.dark .cat-other { background: #17303f; color: #9db3c0; }
body.dark .tag-leader { background: rgba(26, 143, 90, .2); color: #6ee7b7; }
body.dark .tag-needs { background: rgba(204, 10, 77, .26); color: #ff8aae; }
body.dark .slabel.positive { background: rgba(26, 143, 90, .2); color: #6ee7b7; }
body.dark .slabel.neutral { background: #17303f; color: #9db3c0; }
body.dark .slabel.negative { background: rgba(204, 10, 77, .26); color: #ff8aae; }
body.dark .seg-tabs { background: #14293a; }
body.dark .seg-tabs button.on { background: #0d2130; }
body.dark .overlay { background: rgba(2, 10, 16, .66); }
body.dark ::-webkit-scrollbar-thumb { background: #29455a; }
body.dark .topic-head .cell-logo img, body.dark .prompt-line .cell-logo img { border-color: var(--border-soft); }

/* ---------- Toast (pasif özellik bildirimi) ---------- */
.toast {
  position: fixed; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);   /* M-06: çentikli telefonda alt çubuğun altında kalmasın */
  background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; z-index: 120; box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .18s; pointer-events: none;
  /* Wrap instead of running off the edge: the error and status messages can be
     a full sentence, and on a phone nowrap pushed them past the screen. */
  max-width: min(92vw, 420px); text-align: center; line-height: 1.35;
  overflow-wrap: anywhere;
}
.toast.show { opacity: 1; }
.pop-empty { padding: 10px 12px; color: var(--ink-2); font-size: 12.5px; text-align: center; }
.toast-action {
  margin-left: 12px; background: none; border: none; cursor: pointer;
  color: var(--soft-red, #ff8aae); font: inherit; font-weight: 700;
  text-decoration: underline; padding: 0;
}
.chat-retry {
  margin-left: 8px; background: none; border: none; cursor: pointer;
  color: var(--brand, #cc0a4d); font: inherit; font-weight: 700;
  text-decoration: underline; padding: 0;
}
.ai-tools { margin-top: 6px; opacity: 0; transition: opacity .12s; display: flex; align-items: center; gap: 4px; }
.msg.ai:hover .ai-tools { opacity: 1; }
.ai-time { color: var(--ink-4); font-size: 11px; margin-left: 2px; }
.chat-copy {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--ink-2); font-size: 11.5px; font-weight: 600; border-radius: 5px;
}
.chat-copy:hover { color: var(--brand, #cc0a4d); background: var(--hover); }

/* ---------- Dil düğmesi ---------- */
.foot-btn.lang-btn { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; min-width: 26px; }

/* ---------- Metrik açıklama kutusu (kesik çizgili başlıklarda hover) ---------- */
.metric-label, .rank-title { cursor: help; }
.tipbox {
  position: fixed; z-index: 140; max-width: 290px;
  background: var(--ink); color: var(--bg);
  border-radius: 10px; padding: 10px 13px;
  font-size: 12px; line-height: 1.55; font-weight: 500;
  box-shadow: var(--shadow-pop); pointer-events: none;
  opacity: 0; transition: opacity .12s;
}
.tipbox.show { opacity: 1; }
.tipbox .tb-title { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; display: block; }
.tipbox::after {
  content: ""; position: absolute; top: 100%; left: 18px;
  border: 6px solid transparent; border-top-color: var(--ink);
}

/* ---------- Duygu (sentiment) sekmesi ---------- */
/* M-25: duygu tema satırı ızgarası min ~606px (5 sütun); dar ekranda kart'ı
   yatay kaydır (masaüstünde sütunlar sığdığından kaydırma çıkmaz). */
.sent-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sent-table .sent-theme {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(90px, 1fr) 66px 110px 92px;
  align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.sent-table .sent-theme:hover { background: var(--hover); }
.sent-theme .tname { font-weight: 600; display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.sent-theme .tname .chev { color: var(--ink-4); transition: transform .15s; }
.sent-theme.open .tname .chev { transform: rotate(90deg); }
.sbar { display: block; height: 7px; border-radius: 99px; background: var(--pink-100); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 99px; }
.sbar.wide { display: flex; height: 8px; background: transparent; gap: 2px; }
.sbar.wide i { border-radius: 99px 0 0 99px; }
.sbar.wide u { display: block; height: 100%; background: var(--pink-200); border-radius: 0 99px 99px 0; }
.sent-theme .sval { font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: right; }
.sent-theme .scnt { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sent-theme .spn { display: flex; gap: 8px; font-family: var(--mono); font-size: 12px; justify-content: flex-end; }
.sent-theme .spn .pos { color: var(--green); }
.sent-theme .spn .neg { color: var(--accent); }
.sent-attrs { padding: 4px 16px 14px 38px; border-bottom: 1px solid var(--border-soft); }
.attr-row {
  display: grid; grid-template-columns: 22px 1fr 110px 20px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.attr-row:hover { background: var(--hover); }
.attr-row .apol {
  width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; font-family: var(--mono);
}
.attr-row .apol.positive { background: #f1f6f4; color: var(--green); }
.attr-row .apol.negative { background: var(--pink-100); color: var(--accent); }
.attr-row .aname { font-weight: 600; color: var(--ink-2); }
.attr-row .acnt { font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-align: right; }
.attr-row .achev { color: var(--ink-4); transition: transform .15s; }
.attr-row.open .achev { transform: rotate(90deg); }
.attr-ex { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 12px 32px; }
.ex-card { background: var(--hover); border: 1px solid var(--border-soft); border-radius: 11px; padding: 12px 14px; }
.ex-card .ex-q { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ex-card .ex-meta { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.ex-card .ex-meta .plat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ex-card .ex-src { display: flex; gap: 10px; margin-left: auto; }
.ex-card .ex-src a { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); font-weight: 600; }
body.dark .attr-row .apol.positive { background: rgba(26, 143, 90, .2); color: #6ee7b7; }
body.dark .attr-row .apol.negative { background: rgba(204, 10, 77, .26); color: #ff8aae; }
body.dark .sbar { background: #17303f; }
body.dark .sbar.wide u { background: #17303f; }

/* ---------- Personalar ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.persona-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
}
.persona-card.add {
  align-items: center; justify-content: center; text-align: center; cursor: pointer;
  border-style: dashed; color: var(--ink-3); font-weight: 600; font-size: 13px; min-height: 150px;
}
.persona-card.add:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.persona-card .pc-top { display: flex; align-items: center; gap: 11px; }
.p-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  color: var(--on-accent); font-weight: 700; font-family: var(--mono); font-size: 12px; flex: none;
}
.persona-card .pc-id { min-width: 0; }
.persona-card .pc-name { font-weight: 700; font-size: 14.5px; font-family: var(--font-head); }
.persona-card .pc-role { color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.persona-card .pc-actions { margin-left: auto; display: flex; gap: 5px; opacity: 0; transition: opacity .15s; }
.persona-card:hover .pc-actions { opacity: 1; }
.persona-card .pc-actions .icon-btn { width: 26px; height: 26px; }
.persona-card .pc-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.persona-card .pc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.persona-card .pc-chips .badge { display: inline-flex; align-items: center; gap: 4px; }
.persona-card .pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 11px; margin-top: auto; }
.persona-card .pc-stats .k { color: var(--ink-3); font-size: 10.5px; }
.persona-card .pc-stats .v { font-family: var(--mono); font-weight: 700; font-size: 14px; margin-top: 2px; }
.persona-card .pc-empty { border-top: 1px solid var(--border-soft); padding-top: 11px; margin-top: auto; color: var(--ink-4); font-size: 12px; }

/* Persona editörü */
.persona-modal { max-width: 760px; }
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* M-44: eskiden inline style ile 1fr 150px veriliyordu ve medya kuralını
   eziyordu. Sınıfa alındı; .pe-grid'in 900px kuralı bunu da tek sütuna indirir. */
.pe-grid-split { grid-template-columns: 1fr 150px; }
.pe-field label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.pe-field label .hint { font-weight: 400; color: var(--ink-4); font-size: 11.5px; }
.pe-input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  font-size: 13.5px; background: var(--panel); color: var(--ink); outline: none; resize: vertical;
}
.pe-input:focus { border-color: var(--accent); }
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; background: var(--panel); color: var(--ink-2);
}
.pchip:hover { background: var(--hover); }
.pchip.on { border-color: var(--accent); background: var(--pink-100); color: var(--accent); }
.cchip { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; }
.cchip.on { border-color: var(--ink); }
.pe-levels { display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; padding-right: 4px; }
.lvl-row { display: flex; align-items: center; gap: 10px; }
.lvl-name { font-size: 13px; color: var(--ink-2); flex: 1; }
.lvl-btns { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lvl { padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--panel); }
.lvl + .lvl { border-left: 1px solid var(--border); }
.lvl:hover { background: var(--hover); }
.lvl.on { background: var(--accent); color: var(--on-accent); }
.pe-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }

/* Çalıştırma ekranı */
.run-modal { max-width: 460px; padding: 24px 26px 26px; }
.run-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.run-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-4); }
.run-step .dotw { width: 9px; height: 9px; border-radius: 99px; background: var(--pink-200); flex: none; }
.run-step.active { color: var(--ink); font-weight: 600; }
.run-step.active .dotw { background: var(--accent); box-shadow: 0 0 0 4px var(--pink-100); }
.run-step.done { color: var(--ink-3); }
.run-step.done .dotw { background: var(--green); }
.run-modal .progress { height: 5px; background: var(--pink-200); border-radius: 99px; overflow: hidden; }
.run-modal .progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .25s; }
body.dark .pchip.on { background: rgba(204,10,77,.22); color: #ff8aae; }
body.dark .cchip.on { border-color: #ff8aae; }
@media (max-width: 900px) { .pe-grid { grid-template-columns: 1fr; } }

/* ---------- Asistan (sohbet) ---------- */
.chat-page { display: flex; flex-direction: column; min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); padding: 0 26px 30px; }
.chat-page.empty { justify-content: center; align-items: center; }
.chat-hero { width: 100%; max-width: 720px; text-align: center; padding: 20px 0 60px; }
.chat-hero .ch-mark { width: 42px; height: 39px; margin-bottom: 16px; }
.chat-hero h1 { font-size: 27px; letter-spacing: -.02em; }
.chat-hero p { color: var(--ink-3); font-size: 13.5px; margin-top: 8px; line-height: 1.55; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; }
.chat-top .brandline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

.chat-thread { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 0 6px; display: flex; flex-direction: column; gap: 20px; }
.chat-datesep { display: flex; align-items: center; text-align: center; gap: 10px; margin: 2px 0; color: var(--ink-3); font-size: 11.5px; }
.chat-datesep::before, .chat-datesep::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.chat-datesep span { white-space: nowrap; }
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: var(--pink-100); color: var(--ink); border-radius: 16px 16px 4px 16px;
  padding: 11px 15px; font-size: 14px; line-height: 1.55; max-width: 78%; white-space: pre-wrap;
}
.msg.ai { gap: 11px; align-items: flex-start; }
.ai-avatar {
  width: 28px; height: 28px; border-radius: 9px; background: var(--pink-100);
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 2px;
}
.ai-avatar img { width: 15px; height: 14px; }
.ai-body { min-width: 0; flex: 1; }
.ai-text { font-size: 14px; line-height: 1.68; color: var(--ink-2); }
.ai-text h2, .ai-text h3 { font-family: var(--font-head); font-size: 15px; color: var(--ink); margin: 14px 0 6px; }
.ai-text p { margin: 9px 0; }
.ai-text ul, .ai-text ol { padding-left: 20px; margin: 9px 0; }
.ai-text li { margin: 4px 0; }
.ai-text strong { color: var(--ink); font-weight: 700; }
.ai-text a { color: var(--accent); font-weight: 600; }
.ai-err { margin-top: 8px; font-size: 12.5px; color: var(--accent); background: var(--pink-100); border-radius: 9px; padding: 9px 12px; }
.caret {
  display: inline-block; width: 7px; height: 15px; background: var(--accent);
  margin-left: 2px; border-radius: 1px; vertical-align: -2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-4); animation: tdot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Takip soruları */
.chat-follow { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 2px; }
.chat-follow .fu-label { width: 100%; font-size: 11.5px; color: var(--ink-4); font-weight: 600; margin-bottom: 2px; }
.fu-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--panel); text-align: left;
}
.fu-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--hover); }
.fu-chip svg { opacity: .6; }

/* Yazma alanı */
/* M-51: `--kb` = iOS/Android klavye örtme yüksekliği (visualViewport ile JS
   ayarlar; masaüstünde 0). Yazma kutusu klavyenin üstünde kalsın. */
.chat-composer { width: 100%; max-width: 760px; margin: 14px auto 0; position: sticky; bottom: calc(14px + var(--kb, 0px)); }
.cc-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 12px 14px 10px; box-shadow: 0 8px 26px rgba(1,37,53,.09);
}
.cc-box:focus-within { border-color: var(--accent); }
.cc-box textarea {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: var(--font); font-size: 14.5px; line-height: 1.55; color: var(--ink); max-height: 190px;
}
.cc-box textarea::placeholder { color: var(--ink-4); }
.cc-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cc-model { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cc-send {
  margin-left: auto; width: 32px; height: 32px; border-radius: 99px; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.cc-send:hover { background: var(--accent-dark); }
.cc-send.stop { background: var(--ink); }
.cc-send .sq { width: 10px; height: 10px; border-radius: 2px; background: #fff; display: block; }
.cc-note { text-align: center; font-size: 11px; color: var(--ink-4); margin-top: 8px; }
.chat-warn { margin-top: 14px; font-size: 12.5px; color: var(--accent); }

/* Hazır şablonlar */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; text-align: left; }
.preset-card {
  display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--border);
  border-radius: 13px; padding: 13px 15px; cursor: pointer; background: var(--panel);
}
.preset-card:hover { border-color: var(--accent); background: var(--hover); }
.preset-card .pi {
  width: 28px; height: 28px; border-radius: 8px; background: var(--pink-100); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.preset-card .pt { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.preset-card .ps { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
body.dark .msg.user .bubble { background: #14293a; }
body.dark .ai-avatar { background: #14293a; }
body.dark .cc-box { box-shadow: 0 8px 26px rgba(0,0,0,.4); }
@media (max-width: 760px) { .preset-grid { grid-template-columns: 1fr; } }
.ai-text .chat-table {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.ai-text .chat-tbl-stream {
  margin: 12px 0; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.5; white-space: pre; overflow-x: auto; color: var(--ink-2);
  background: var(--hover); border: 1px solid var(--border-soft); border-radius: 10px;
}
.ai-text .chat-table th {
  background: var(--hover); color: var(--ink-3); font-weight: 600; font-size: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.ai-text .chat-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); font-size: 12.5px; }
.ai-text .chat-table td:first-child { font-family: var(--font); font-weight: 600; color: var(--ink); }
.ai-text .chat-table tr:last-child td { border-bottom: none; }
.ai-text code { background: var(--hover); border-radius: 5px; padding: 1px 5px; font-family: var(--mono); font-size: 12.5px; }
pre.md-code { background: var(--hover); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin: 10px 0; overflow-x: auto; }
pre.md-code code { display: block; background: none; padding: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; color: var(--ink); }
.fnote { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); padding: 6px 4px; }
.fnote b { color: var(--accent); cursor: pointer; font-weight: 600; }
.fnote b:hover { text-decoration: underline; }

/* ---------- Sayfalar (Pages) ---------- */
.pages-wrap { padding-top: 0; }
.view-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border-soft); margin: 4px 0 14px; }
.view-tabs .vtab {
  padding: 8px 1px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.view-tabs .vtab:hover { color: var(--ink); }
.view-tabs .vtab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.view-tabs .vtab .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: var(--chip-bg); border-radius: 99px; padding: 1px 7px; }
.pages-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.pages-table th.sortable:hover { color: var(--ink); }
/* I-04: tek sortTh() çıktısı - genel sıralanabilir başlık göstergesi. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
.sort-ind { display: inline-flex; vertical-align: middle; color: var(--ink-4); margin-left: 1px; }
th.sortable.on .sort-ind { color: var(--accent); }
.pages-table th.sortable.on { color: var(--accent); }
.pages-table td { font-size: 13px; }
.pages-table .cbx { display: inline-block; width: 14px; height: 14px; border: 1.4px solid var(--pink-200); border-radius: 4px; }
.pages-table .plat-mini { display: inline-flex; gap: 4px; }
.pages-table tr.grouprow td { background: var(--hover); font-weight: 600; }

/* Sayfa detayı */
.pd-factors { display: flex; flex-direction: column; gap: 9px; }
.pf { display: grid; grid-template-columns: minmax(120px, 1fr) 130px 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.pf .pfn { color: var(--ink-2); font-weight: 600; cursor: help; }
.pf .pfv { font-family: var(--mono); text-align: right; color: var(--ink-3); }
.pd-recos { display: flex; flex-direction: column; gap: 9px; }
.pd-recos .reco {
  display: flex; gap: 9px; align-items: flex-start; background: var(--hover);
  border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 13px; font-size: 13px; line-height: 1.5;
}
.pd-recos .reco svg { color: var(--accent); flex: none; margin-top: 2px; }

/* ---------- Panolar (Dashboards) ---------- */
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.tmpl-card {
  border: 1px solid var(--border); border-radius: 15px; overflow: hidden; background: var(--panel);
  display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.tmpl-card:hover { border-color: var(--accent); background: var(--hover); }
.tc-preview {
  height: 132px; background: var(--hover); border-bottom: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; overflow: hidden;
}
.tp-cell { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; }
/* 8,5 px tipografi ölçeğinde yok (standart §4: 11 en küçük boy) ve --ink-4
   beyaz üstünde 1,99:1 veriyordu; bu etiket pano şablonunu SEÇMEK için
   okunması gereken bir metin, süs değil. 11 px + --ink-3 (5,82:1).
   tools/audit_contrast.mjs ile ölçülerek bulundu. */
.tp-label { font-size: 11px; color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.tp-bars i { flex: 1; background: var(--tc, var(--accent)); border-radius: 2px 2px 0 0; }
.tp-rows { display: flex; flex-direction: column; gap: 4px; }
.tp-rows i { height: 5px; border-radius: 3px; background: var(--pink-200); }
.tp-rows i:nth-child(2) { width: 78%; }
.tp-rows i:nth-child(3) { width: 55%; }
.tc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tc-top { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 14.5px; }
.tc-icon { width: 26px; height: 26px; border-radius: 8px; color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; }
.tc-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; flex: 1; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }

.dash-list { display: flex; flex-direction: column; gap: 8px; }
.dash-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.dash-row:hover { background: var(--hover); border-color: var(--pink-200); }
.dash-row .dr-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--pink-100); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.dash-row .dr-name { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 13.5px; }
.dash-row .icon-btn { opacity: 0; }
.dash-row:hover .icon-btn { opacity: 1; }

.dash-title { margin: 10px 0 18px; }
.dt-name, .dt-desc {
  display: block; width: 100%; border: 1px solid transparent; border-radius: 9px;
  padding: 6px 10px; background: transparent; outline: none; color: var(--ink);
}
.dt-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.dt-desc { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.dt-name:hover, .dt-desc:hover { background: var(--hover); }
.dt-name:focus, .dt-desc:focus { border-color: var(--accent); background: var(--panel); }
.dt-meta { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; font-size: 12.5px; }

.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.viz-card { border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 16px 18px 18px; min-width: 0; }
.viz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.viz-head .viz-filters { font-size: 11px; color: var(--ink-4); display: inline-flex; align-items: center; gap: 4px; }
.viz-head .viz-actions { margin-left: auto; display: flex; gap: 5px; opacity: 0; transition: opacity .15s; }
.viz-card:hover .viz-actions { opacity: 1; }
.viz-head .viz-actions .icon-btn { width: 25px; height: 25px; font-size: 12px; }
.viz-card .tbl { font-size: 12.5px; }
.viz-card .tbl th { padding: 7px 10px; }
.viz-card .tbl td { padding: 7px 10px; }
.viz-card .big-num { font-size: 24px; }
.viz-card .legend { font-size: 11.5px; gap: 10px; }

.viz-modal { max-width: 780px; }
.viz-filter-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: start; padding: 7px 0; }
.viz-filter-row .vfl { font-size: 12px; color: var(--ink-3); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding-top: 6px; }
.viz-preview { margin-top: 18px; padding: 16px 18px 18px; }
.seg-toggle button.off { opacity: .4; cursor: default; }
select.pe-input { appearance: none; background-image: none; cursor: pointer; }

@media (max-width: 1000px) { .viz-grid { grid-template-columns: 1fr; } }

/* PDF çıktısı */
/* Only ever shown when printing (see @media print below). */
.print-header, .print-footer { display: none; }

@media print {
  @page { size: A4; margin: 12mm; }
  .print-header {
    display: flex !important; align-items: center; gap: 8px; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 2px solid var(--brand, #cc0a4d);
    font-weight: 700; color: var(--ink, #012535);
  }
  .print-header img { width: 22px; height: 22px; }
  .print-footer {
    display: block !important; margin-top: 14px; padding-top: 8px;
    border-top: 1px solid #e8ecf2; font-size: 10px; color: #5a6b78; text-align: center;
  }
  /* Print the colours as designed (category badges, bar fills, tinted cards);
     without this the browser drops backgrounds when "print backgrounds" is off. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Force the light palette, or a dark-mode dashboard prints light text on white
     and dark cards no reader can see. */
  body.dark {
    --bg: #fff; --bg-side: #fff; --panel: #fff; --panel-2: #fff;
    --border: #e8ecf2; --border-soft: #eef2f6; --hover: #f6f8fa;
    --ink: #012535; --ink-2: #273041; --ink-3: #5a6b78; --ink-4: #8aa2b0;
  }
  .sidebar, .topbar, .side-reopen, .toast, #modalHolder,
  .viz-actions, .fpop, .overlay, .cc-actions, .side-foot, .tabs, .filterbar { display: none !important; }
  body { background: #fff; }
  .viz-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .viz-card { break-inside: avoid; border-color: #ddd; box-shadow: none; }
  /* Keep a table, a ranking row or a card from being sliced across a page. */
  tr, .rank-list > div, .opp-q, .opp-card, .chg-card, .acc-card { break-inside: avoid; }
  .dt-name, .dt-desc { border: none; }
  .page { padding: 0 !important; }
}

/* ---------- Yetenekler (Skills) ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.skill-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
  cursor: pointer; overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.skill-card:hover { border-color: var(--accent); background: var(--hover); }
.skill-card.on { border-color: var(--accent); }
.sc-preview {
  padding: 16px 18px 0; height: 118px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; gap: 7px;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.sc-preview b { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.sc-preview span { font-size: 11.5px; line-height: 1.6; color: var(--ink-4); }
.sc-foot { display: flex; align-items: center; gap: 8px; padding: 4px 16px 6px; font-family: var(--font-head); font-size: 14px; }
.sc-foot .sk-icon { color: var(--accent); display: inline-flex; }
.sc-foot .icon-btn { opacity: 0; width: 26px; height: 26px; }
.skill-card:hover .sc-foot .icon-btn { opacity: 1; }
.sc-author { display: flex; align-items: center; gap: 6px; padding: 0 16px 14px; font-size: 12px; color: var(--ink-3); }
.badge.sk-on { background: var(--pink-100); color: var(--accent); }

.skills-list { display: flex; flex-direction: column; gap: 8px; }
.skill-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.skill-row:hover { background: var(--hover); border-color: var(--pink-200); }
.skill-row .sk-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--pink-100); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.skill-row .sk-name { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 13.5px; min-width: 0; }
.skill-row .sk-author { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }

.skill-detail .sd-top { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; border-bottom: 1px solid var(--border-soft); }
.skill-detail .sd-top b { font-family: var(--font-head); font-size: 14.5px; }
.sd-body { max-width: 760px; margin: 26px auto 60px; }
.sd-body h1 { font-family: var(--font-head); font-size: 27px; letter-spacing: -.02em; }
.sd-desc { color: var(--ink-3); font-size: 13.5px; line-height: 1.7; margin-top: 14px; }
.sd-rule { height: 1px; background: var(--border-soft); margin: 26px 0; }
.sd-content { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.sd-content h3 { font-family: var(--font-head); font-size: 17px; color: var(--ink); margin: 26px 0 10px; }
.sd-content p { margin: 12px 0; }
.sd-content b { color: var(--ink); }
.sd-content ul { padding-left: 20px; margin: 10px 0; }
.sd-content li { margin: 5px 0; }

.skill-modal { max-width: 720px; }
.skill-body-input { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.cc-skill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--pink-100); color: var(--accent);
  border-radius: 99px; padding: 3px 9px; font-size: 11.5px; font-weight: 700;
}
.cc-skill b { cursor: pointer; opacity: .7; }
.cc-skill b:hover { opacity: 1; }
body.dark .cc-skill { background: rgba(204,10,77,.2); color: #ff8aae; }
.sd-content ul.sd-cells {
  list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 7px;
}
.sd-content ul.sd-cells li {
  background: var(--hover); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 5px 11px; font-size: 12.5px; margin: 0; color: var(--ink-2);
}

/* ---------- Asistan: sohbet geçmişi çubuğu ---------- */
.chat-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 6px; width: 100%; max-width: none; margin: 0;
}
.convo-switch {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px;
  background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink);
  max-width: 320px;
}
.convo-switch:hover { background: var(--hover); border-color: var(--pink-200); }
.convo-switch .cs-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-switch svg { opacity: .6; flex: none; }
.convo-pop { min-width: 300px; max-width: 340px; }
.convo-pop .opts { max-height: 340px; }
.cp-label { font-size: 11px; color: var(--ink-4); font-weight: 600; padding: 8px 12px 4px; }
.cp-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; color: var(--ink-2);
}
.cp-row:hover { background: var(--hover); }
.cp-row.on { background: var(--pink-100); color: var(--ink); font-weight: 600; }
.cp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-del { color: var(--ink-4); font-size: 12px; opacity: 0; padding: 0 3px; }
.cp-row:hover .cp-del { opacity: 1; }
.cp-del:hover { color: var(--accent); }
.cp-ren { color: var(--ink-4); display: inline-flex; align-items: center; opacity: 0; padding: 0 2px; }
.cp-row:hover .cp-ren { opacity: 1; }
.cp-ren:hover { color: var(--ink); }
.cp-empty { padding: 16px 12px; font-size: 12.5px; color: var(--ink-4); text-align: center; }
.chat-page.empty { position: relative; }
.chat-bar .spacer { flex: 1; }

/* Boş sohbet ekranı: üst çubuk aynı yerde, karşılama ortada */
.chat-page.empty { justify-content: flex-start; align-items: stretch; }
.chat-page.empty .chat-hero { margin: auto; }

/* ---------- Sohbet: artı menüsü ve ekler ---------- */
.cc-plus {
  width: 30px; height: 30px; border-radius: 99px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink-2); background: var(--panel); flex: none;
}
.cc-plus:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.plus-pop {
  position: absolute; bottom: calc(100% + 10px); left: 0; min-width: 262px;
  top: auto;
}
.plus-pop .opt { gap: 10px; padding: 9px 11px; font-weight: 500; }
.plus-pop .opt svg { color: var(--ink-3); flex: none; }
.plus-pop .opt .cnt-dim { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.plus-pop .opt.has-sub { position: relative; }
.plus-pop .skill-sub {
  /* "Yetenekler" satırının hizasına ortalanır, uzun listede kendi içinde kayar */
  position: absolute; left: calc(100% + 8px); top: 50%; bottom: auto;
  transform: translateY(-50%);
  min-width: 300px; max-height: min(56vh, 400px);
  display: flex; flex-direction: column; cursor: default;
  background: var(--panel); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow-pop); padding: 6px; overflow: hidden;
}
/* M-50: telefonda yana açılan alt menü (262 + 300 = ~570px) ekran dışına
   taşıyordu. ≤768px'te akordeon gibi satırın altında, plus-pop içinde açılsın. */
@media (max-width: 768px) {
  .plus-pop .skill-sub {
    position: static; left: auto; top: auto; transform: none;
    min-width: 0; width: auto; max-height: 44vh; margin-top: 6px;
    box-shadow: none; border-radius: 10px;
  }
}
.plus-pop .sk-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.plus-pop .sk-list::-webkit-scrollbar { width: 8px; }
.plus-pop .sk-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.plus-pop .sk-list::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
.plus-pop .sk-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; }
.plus-pop .sk-opt.on { background: var(--pink-100); }
.plus-pop .so-name { font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.plus-pop .so-desc { font-size: 11.5px; color: var(--ink-4); }
.plus-pop .sk-add { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 11px; font-weight: 600; color: var(--ink-2); flex: none; }
.plus-pop .sk-add .spacer { flex: 1; }

.cc-attach { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--hover);
  border: 1px solid var(--border-soft); border-radius: 9px; padding: 5px 9px;
  font-size: 12px; color: var(--ink-2); max-width: min(220px, 100%);   /* M-54: dar ekranda satırı aşmasın */
}
.att-chip img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.att-chip .att-ic { color: var(--accent); display: inline-flex; }
.att-chip b { cursor: pointer; color: var(--ink-4); font-size: 11px; margin-left: 2px; }
.att-chip b:hover { color: var(--accent); }
.att-chip.small { padding: 3px 8px; font-size: 11.5px; gap: 5px; }
.bub-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bub-imgs img { max-width: 180px; max-height: 150px; border-radius: 10px; display: block; }
.bub-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.plus-pop { overflow: visible; }

/* ============================================================
   Bilgi Tabanları (Knowledge Bases)
   ============================================================ */
.kb-bar { display: flex; align-items: center; gap: 10px; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.kb-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  padding: 15px 16px; cursor: pointer; transition: box-shadow .13s, transform .13s, border-color .13s;
}
.kb-card:hover { border-color: var(--accent); background: var(--hover); }
.kb-card.on { border-color: var(--accent); }
.kb-card.edit { cursor: default; }
.kb-card.edit:hover { box-shadow: none; border-color: var(--border); transform: none; }
.kbc-top { display: flex; align-items: center; gap: 8px; }
.kbc-top b { font-size: 14.5px; color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.kbc-icon { display: inline-flex; color: var(--accent); }
.kbc-desc { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; min-height: 34px; }
.kbc-meta { margin-top: 12px; display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ink-4); }
.kbc-meta .btn { margin-left: auto; }

.kb-sync {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-side); padding: 10px 14px;
}
.kb-sync b { font-size: 13px; color: var(--ink); }
/* M-96: kaydırılabilir alanın kenarında "devamı var" ipucu. Maske kullanıyoruz,
   üstüne gradyan boyamıyoruz: maske içeriği soldurur, bu yüzden açık/koyu temada
   ve her kart renginde doğru görünür. Sınıflar JS'ten (markScrollables) gelir:
   .can-scroll-x yalnız gerçekten taşan alana, .at-start/.at-end ise gidilecek yer
   kalmayan kenarın solmasını kapatmak için. Telefonda daha belirgin, masaüstünde
   daha hafif. */
.can-scroll-x {
  --fade: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
    #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
    #000 calc(100% - var(--fade)), transparent 100%);
}
.can-scroll-x.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.can-scroll-x.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}
/* İki uçtayken (içerik tam sığıyor gibi) hiç solma olmasın */
.can-scroll-x.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 720px) { .can-scroll-x { --fade: 26px; } }
/* Hareket azaltma tercihi maskeyi etkilemez ama dokunmatikte fade daha gerekli;
   fare kullanıcısında hafif tutuyoruz. */
@media (hover: hover) { .can-scroll-x { --fade: 16px; } }

/* I-12: anahtar (switch) tek tanım. Aynı ölçüler iki ayrı yerde (.kb-switch ve
   .ct-switch) tekrarlanıyordu; biri değişirse öteki sessizce ayrışırdı. Değerler
   zaten birebir aynıydı, bu yüzden görünüm değişmiyor - yalnız tek kaynak oldu.
   Markup farkı korunuyor: .kb-switch gerçek bir <input> sarar (form/erişilebilirlik),
   .ct-switch salt görsel bir göstergedir. */
.kb-switch { position: relative; width: 34px; height: 19px; flex: none; }
.kb-switch input { opacity: 0; width: 0; height: 0; }
.kb-switch span { position: absolute; inset: 0; cursor: pointer; }
.kb-switch span, .ct-switch {
  background: var(--ink-4); border-radius: 20px; transition: background .15s;
}
.kb-switch span::after, .ct-switch i {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.kb-switch input:checked + span, .ct-switch.on { background: var(--accent); }
.kb-switch input:checked + span::after, .ct-switch.on i { transform: translateX(15px); }
.kb-sel {
  font-family: var(--font); font-size: 12.5px; color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; margin-left: auto;
}
.fnote-inline { font-size: 11.5px; color: var(--ink-4); }

.kb-body { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: start; }
.kb-side { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 8px; }
.kb-side-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); padding: 6px 8px 8px;
}
.kb-fold {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.kb-fold:hover { background: var(--chip-bg); }
.kb-fold.on { background: var(--pink-100); color: var(--accent); font-weight: 600; }
.kb-fold svg { color: var(--ink-4); flex: none; }
.kb-fold.on svg { color: var(--accent); }
.kb-fold span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-fold b { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.kb-tbl tbody tr { cursor: pointer; }
.kb-fname { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
.kb-fname svg { color: var(--ink-4); }
.kb-tag {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px;
  background: var(--chip-bg); color: var(--ink-3); margin-right: 4px;
}
.kb-tag.on { background: var(--pink-100); color: var(--accent); }
.kb-tag b { margin-left: 5px; cursor: pointer; font-weight: 600; }

.kbadd-pop { min-width: 320px; padding: 6px; overflow: visible; }
.kbadd-pop .pp-item { align-items: flex-start; }
.kbadd-pop .pp-item span span { display: block; }

.kb-modal { width: 100%; max-width: 680px; }
.kb-drop {
  margin-top: 18px; border: 1.5px dashed var(--border); border-radius: var(--radius);
  background: var(--bg-side); padding: 34px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: var(--ink-3);
}
.kb-drop.over { border-color: var(--accent); background: var(--pink-100); }
.kb-drop svg { color: var(--accent); }
.kb-drop b { font-family: var(--font-head); color: var(--ink); }
.kb-opt-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 15px; margin-top: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.kb-opt-row.on { border-color: var(--accent); background: var(--bg-side); }
.kb-opt-row b { display: block; font-size: 13.5px; color: var(--ink); }
.kb-opt-row .dim { display: block; margin-top: 2px; }
.kb-opt-row .badge, .kb-opt-row .btn { margin-left: auto; flex: none; }

.kb-viewer { width: 100%; max-width: 860px; }
.kb-tagbar { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.kb-taginput {
  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px;
  font-family: var(--font); font-size: 11.5px; width: 150px; background: var(--panel); color: var(--ink-2);
}
.kb-doc {
  margin-top: 14px; max-height: 52vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--ink-2);
  background: var(--bg-side); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}

.kb-fact { width: 100%; max-width: 900px; }
.kb-fact-meta { display: flex; gap: 22px; font-size: 13px; color: var(--ink-3); }
.kb-fact-meta b { font-family: var(--mono); font-size: 17px; color: var(--ink); margin-right: 4px; }
.kb-fact-meta .v-dogru b { color: var(--green); }
.kb-fact-meta .v-yanlis b { color: var(--accent); }
.kb-fact-busy { display: flex; align-items: center; gap: 12px; padding: 40px 6px; color: var(--ink-3); font-size: 13.5px; }
.spin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--pink-200); border-top-color: var(--accent); animation: kbspin .8s linear infinite;
}
@keyframes kbspin { to { transform: rotate(360deg); } }
@keyframes bootbar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.vbadge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.vbadge.v-dogru { background: rgba(26, 143, 90, .12); color: var(--green); }
.vbadge.v-yanlis { background: var(--pink-100); color: var(--accent); }
.vbadge.v-eksik { background: var(--chip-bg); color: var(--ink-3); }
.block { display: block; }

.bk-body { max-width: 820px; }
.bk-group { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.bk-group h3 { font-family: var(--font-head); font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.bk-group .pe-field { margin-bottom: 14px; }
.bk-group label .dim { display: block; font-weight: 400; margin-top: 2px; }
.cc-skill.kbctx { background: var(--chip-bg); color: var(--ink-2); }

body.dark .kb-card, body.dark .kb-side, body.dark .kb-opt-row { background: var(--panel); }
body.dark .kb-doc, body.dark .kb-drop, body.dark .kb-sync { background: rgba(255, 255, 255, .03); }
.kb-card .kbc-top .icon-btn { opacity: 0; transition: opacity .12s; }
.kb-card:hover .kbc-top .icon-btn { opacity: 1; }
.kb-card.edit .kbc-top .icon-btn { opacity: 1; }
.kb-tbl td:last-child { white-space: nowrap; }
.kb-tbl td:last-child .icon-btn { display: inline-flex; margin-left: 4px; opacity: 0; transition: opacity .12s; }
.kb-tbl tbody tr:hover td:last-child .icon-btn { opacity: 1; }
.kb-tbl th:last-child { width: 78px; }
.kb-page .sd-top { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.kb-page .sd-top b { font-family: var(--font-head); font-size: 14.5px; }
.plus-pop, .plus-pop .opts, .plus-pop .opt.has-sub { overflow: visible; }
.plus-pop .skill-sub { z-index: 5; }
.plus-pop .opts + .opts { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; }
.plus-pop .sk-empty { padding: 12px 11px; font-size: 12.5px; color: var(--ink-4); }
/* Açıklaması olan bölüm başlıkları */
.tip-h { border-bottom: 1px dashed var(--ink-4); cursor: help; display: inline-block; padding-bottom: 1px; }

/* ============================================================
   Grafik ayarı ve alternatif grafik türleri
   ============================================================ */
.chart-cfg { min-width: 320px; padding: 0; overflow: hidden; left: auto; right: 0; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.ct-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 8px; background: none; border: none; border-right: 1px solid var(--border-soft);
  cursor: pointer; font-family: var(--font); font-size: 12.5px; color: var(--ink-4);
}
.ct-tile:last-child { border-right: none; }
.ct-tile svg { color: var(--ink-4); }
.ct-tile:hover { background: var(--chip-bg); color: var(--ink-2); }
.ct-tile.on { color: var(--ink); font-weight: 600; background: var(--bg-side); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 10px; }
.ct-tile.on svg { color: var(--accent); }
.ct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-top: 1px solid var(--border-soft); cursor: pointer;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.ct-row:hover { background: var(--chip-bg); }
/* I-12: ölçüler ve renkler yukarıdaki ortak tanımda (.kb-switch ile paylaşılıyor);
   burada yalnız bu varyantın kendine ait yerleşimi kalıyor. */
.ct-switch { width: 34px; height: 19px; position: relative; flex: none; }

.hbar-chart { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.hb-row { display: grid; grid-template-columns: 132px 1fr 58px; align-items: center; gap: 10px; }
/* M-30: çok dar ekranda sabit etiket/değer sütunlarını daralt. */
@media (max-width: 480px) { .hb-row { grid-template-columns: 96px 1fr 44px; gap: 7px; } }
.hb-lab { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); overflow: hidden; }
.hb-lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 16px; background: var(--chip-bg); border-radius: 4px; overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 4px; }
.hb-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; }

.stack-chart { margin-top: 18px; }
.st-bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; }
.st-seg { display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-family: var(--mono); font-size: 11.5px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.st-legend .li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.st-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.chart .rd-lab { font-size: 9.5px; fill: var(--ink-4); font-family: var(--font); }
.chart-tbl td, .chart-tbl th { font-size: 12.5px; }
body.dark .hb-track { background: rgba(255, 255, 255, .07); }
/* Bölüm başlığının sağındaki denetim grubu: kendi içinde dikeyde ortalı */
.sec-head .sec-tools { display: flex; align-items: center; gap: 12px; flex: none; }

/* ============================================================
   Fiyatlandırma sayfası
   ============================================================ */
.price-grid { display: grid; gap: 16px; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 15px; background: var(--panel); padding: 22px 20px 20px;
}
.price-card.popular { border-color: var(--accent); box-shadow: 0 10px 30px rgba(204, 10, 77, .08); }
.pp-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 4px 12px; white-space: nowrap;
}
.price-card h3 { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.pp-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.pp-price { margin-top: 16px; display: flex; align-items: baseline; gap: 2px; }
.pp-price .cur { font-size: 17px; font-weight: 700; color: var(--ink-3); }
.pp-price .amount { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pp-per { font-size: 12px; color: var(--ink-4); margin-top: 2px; min-height: 15px; }
.pp-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin-top: 12px; }
.pp-list { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pp-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.pp-list svg { color: var(--accent); flex: none; margin-top: 2px; }
.pp-cta { justify-content: center; text-decoration: none; }
.pp-cur-flag { background: var(--ink); }
.price-card.is-current { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pp-current { background: var(--hover); color: var(--ink-3); border: 1px solid var(--border); cursor: default; pointer-events: none; }

.pr-sec h3 { font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.pr-sec .sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.mt30 { margin-top: 34px; }

.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.credit-card {
  border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 18px;
  text-align: center;
}
.credit-card.popular { border-color: var(--accent); }
.cc-name { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.cc-amount { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.cc-amount .dim { font-size: 12.5px; font-weight: 400; color: var(--ink-4); }
.credit-card .cc-price { font-size: 18px; color: var(--accent); margin-top: 8px; font-weight: 600; }
.credit-card .cc-price .dim { font-size: 12px; color: var(--ink-4); }
.cc-unit { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; }

/* M-80: overflow:hidden dar ekranda plan sütunlarını (Enterprise) kırpıyordu -
   yatay kaydırmaya çevrildi, özellik adı sütunu sticky kalıyor. */
.price-tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); }
.price-tbl { width: 100%; }
.price-tbl th:first-child { width: 34%; }
.price-tbl th:first-child, .price-tbl td:first-child { position: sticky; left: 0; z-index: 1; }
.price-tbl th:first-child { background: var(--hover); }
.price-tbl td:first-child { background: var(--panel); }
.price-tbl .pt-group td {
  background: var(--bg-side); font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 13px; padding-bottom: 9px;
}
.pv-yes { color: var(--green); display: inline-flex; }
.pv-no { color: var(--ink-4); }
.pv-txt { font-size: 12.5px; color: var(--ink-2); }

.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.faq-item { border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 16px 18px; }
.faq-item b { font-size: 13.5px; color: var(--ink); }
.faq-item p { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin-top: 6px; }

.pa-top { margin-bottom: 4px; }

/* Sol alt ayarlar menüsü: yukarı doğru açılır, kenar çubuğunun içine sığar */
.set-pop {
  position: absolute; bottom: calc(100% + 10px); left: 0; top: auto;
  width: 196px; min-width: 0; padding: 5px; overflow: visible;
}
.sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 9px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--ink);
  white-space: nowrap;
}
.sp-row:hover { background: var(--chip-bg); }
.sp-row > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.sp-row svg { color: var(--ink-3); }

body.dark .price-card, body.dark .credit-card, body.dark .faq-item, body.dark .price-tbl-wrap { background: var(--panel); }
.page-link { color: inherit; text-decoration: none; cursor: pointer; }
.page-link:hover { color: var(--accent); text-decoration: underline; }

/* S-04: uygulama içi Kullanım Koşulları / Gizlilik Politikası sayfaları */
.legal-note { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-4); }

/* Custom plan kartı */
.custom-card { border-style: dashed; }
.cust-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.cust-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; row-gap: 6px; }   /* M-83: dar ekranda etiket + kontrol sarsın (select yazısı M-62 ile 16px) */
.cust-row label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cust-row .kb-sel { margin-left: 0; min-width: 92px; }
.cust-row .seg-toggle button { padding: 5px 10px; font-size: 12px; }
.custom-card .pp-price { margin-top: 14px; }
.cust-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; font-family: var(--mono); }
.cust-hint {
  margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--accent);
  background: var(--pink-100); border-radius: 9px; padding: 8px 10px;
  display: flex; align-items: flex-start; gap: 6px;
}
.cust-hint svg { flex: none; margin-top: 1px; }
.cust-hint.dim { color: var(--ink-3); background: var(--chip-bg); }
body.dark .cust-hint { background: rgba(204, 10, 77, .16); color: #ff8aae; }
body.dark .cust-hint.dim { background: rgba(255, 255, 255, .05); color: var(--ink-3); }

/* İkon ve avatarlar satır içinde metnin ortasına hizalanır; taban çizgisine
   oturup metnin altına sarkmasınlar */
img.fav, .avatar, .plat-ico, svg.plat-ico { vertical-align: middle; }
/* A logo is drawn in a square box, and not every site's icon is square:
   superfresh.com.tr serves a 204x85 wordmark. Without this it was stretched
   to fill the box; only the ranking list had the rule. Contain keeps its
   proportions everywhere a logo appears. */
img.fav { object-fit: contain; }
.avatar { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Interstitial shown while data loads (works with data-loader.js) ---- */
.data-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 60vh; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink);
}
.data-splash img { width: 40px; height: 40px; object-fit: contain; opacity: .9; animation: splashPulse 1.2s ease-in-out infinite; }
.ds-label { font-family: var(--font-head); }
.ds-bar { width: 140px; height: 3px; border-radius: 99px; background: var(--border-soft); overflow: hidden; }
.ds-bar > div { width: 38%; height: 100%; border-radius: 99px; background: var(--accent); animation: bootbar 1.1s ease-in-out infinite; }
.ds-slow { font-family: var(--font); font-weight: 400; font-size: 12.5px; color: var(--ink-4); min-height: 16px; }
.tab-skeleton { padding: 20px 0; }
@media (prefers-reduced-motion: reduce) {
  .data-splash img { animation: none; }
  .ds-bar > div { animation: none; width: 100%; opacity: .5; }
}
.data-splash .sub { font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--ink-3); max-width: 420px; }
.data-splash .btn {
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel); color: var(--ink);
}
.data-splash .btn:hover { border-color: var(--accent); color: var(--accent); }
@keyframes splashPulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* ============================================================
   Authentication screens (auth-ui.js)
   Two columns: form on the left, a quiet branded panel on the right.
   ============================================================ */
body.auth-mode { background: var(--bg); }
.auth-wrap {
  display: grid; grid-template-columns: minmax(420px, 46%) 1fr;
  min-height: 100vh; min-height: 100dvh; width: 100%; flex: 1;
}
.auth-left { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-logo { height: 26px; margin-bottom: 38px; }
.auth-form h1 {
  font-family: var(--font-head); font-weight: 800; font-size: 28px;
  color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em;
}
.auth-sub { font-size: 14px; color: var(--ink-3); margin: 0 0 26px; }
.auth-label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); margin: 16px 0 6px;
}
.auth-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-family: var(--font);
  font-size: 14px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); outline: none;
}
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pink-100); }
.auth-input:disabled { background: var(--chip-bg); color: var(--ink-3); }
.auth-hint { font-size: 12px; color: var(--ink-4); margin-top: 6px; }
.auth-hint.bad { color: var(--red); font-weight: 600; }
.auth-input.bad, .auth-input.bad:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--pink-100); }
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.shake { animation: auth-shake .38s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pw-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--border-soft); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .18s, background .18s; background: var(--ink-4); }
.pw-bar.s0 i, .pw-bar.s1 i { background: #e0563f; }
.pw-bar.s2 i { background: #e0a53f; }
.pw-bar.s3 i { background: #7bb661; }
.pw-bar.s4 i { background: #3f9e57; }
.pw-count { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }

/* G3: two-step verification on the account screen. The QR is capped rather
   than shown at whatever size Supabase drew it, which is large enough to fill
   the card on its own. Tokens only (docs/tasarim-standardi.md). */
.acc-mfa-setup .v { display: block; }
.mfa-qr { display: block; width: 168px; height: 168px; margin: 10px 0;
          border: 1px solid var(--border); border-radius: var(--fav-radius);
          background: var(--panel); padding: 6px; }
.mfa-secret code { font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
                   word-break: break-all; background: var(--chip-bg);
                   padding: 2px 6px; border-radius: var(--fav-radius); }
.mfa-codes { margin: 10px 0; }
.mfa-on { font-weight: 600; color: var(--green); margin-right: 8px; }

/* G4: the Turnstile box. Only ever in the document when a site key is set. */
.zeo-captcha { margin: 14px 0 4px; min-height: 0; }
.zeo-captcha:empty { margin: 0; }

/* G5: the activity log.

   Full width, not half. In the two-column card grid the middle column was left
   with about a hundred pixels, so "Marka silindi Demo Marka 2" broke across
   four lines and the card read as damaged. This is a table, and a table needs
   the room. */
.acc-card.audit-card { grid-column: 1 / -1; }
.audit-list { margin-top: 10px; border-top: 1px solid var(--border); }
.audit-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 220px);
             gap: 14px;
             padding: 9px 0; border-bottom: 1px solid var(--border-soft);
             font-size: 13px; align-items: baseline; }
.audit-when { color: var(--ink-3); white-space: nowrap; }
.audit-what { color: var(--ink-2); }
.audit-about { color: var(--ink-3); }
.audit-who { color: var(--ink-3); text-align: right; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .audit-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .audit-who { text-align: left; }
}
.auth-legal { color: var(--accent); text-decoration: underline; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-chip {
  font-size: 12.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-2);
}
.auth-chip:hover { border-color: var(--accent); color: var(--accent); }
.auth-chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.auth-check {
  display: flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.auth-check .box { color: transparent; }   /* I-12: ölçüler ortak tanımda */
.auth-check.on .box { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.auth-btn {
  width: 100%; margin-top: 24px; padding: 12px 16px; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--on-accent); background: var(--ink); border: 0; border-radius: var(--radius);
}
.auth-btn:hover:not(:disabled) { background: var(--accent); }
.auth-btn:disabled { opacity: .4; cursor: not-allowed; }
.auth-btn-wrap .auth-btn:disabled { pointer-events: none; }   /* the click goes to the wrapper, which says why */
.auth-btn-wrap:has(.auth-btn:disabled) { cursor: not-allowed; }
.auth-back {
  margin-top: 18px; font-size: 13px; color: var(--ink-3); cursor: pointer;
  display: inline-block;
}
.auth-back:hover { color: var(--accent); }
.auth-error {
  margin-top: 16px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--pink-100); border: 1px solid var(--pink-200);
  font-size: 13px; color: var(--accent-dark);
}
.auth-dots { display: flex; gap: 6px; margin-top: 34px; }
.auth-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--border); }
.auth-dots span.on { width: 18px; background: var(--ink); }
.auth-codes { display: flex; gap: 10px; margin-top: 10px; }
.auth-code {
  width: 48px; height: 56px; text-align: center; font-family: var(--mono);
  font-size: 22px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); outline: none;
}
.auth-code:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pink-100); }
.auth-resend { margin-top: 14px; font-size: 12.5px; color: var(--ink-4); }
.auth-resend span { color: var(--accent); cursor: pointer; font-weight: 600; }
.auth-right {
  background: var(--bg-side); border-left: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; padding: 48px;
}
.auth-quote { max-width: 460px; }
.auth-quote p {
  font-family: var(--font-head); font-weight: 700; font-size: 21px;
  line-height: 1.45; color: var(--ink); margin: 0 0 24px;
}
.auth-quote .who { display: flex; flex-direction: column; gap: 4px; }
.auth-quote .who strong { font-size: 14px; color: var(--ink); }
.auth-quote .who span { font-size: 12.5px; color: var(--ink-3); }
.auth-tagline { display: none; }
@media (max-width: 1024px) {   /* M-61: tablette (901-1024px) 420px form sütunu sıkışıyordu; tek sütuna daha erken geç. */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-right { display: none; }
  /* H-65: sağ marka paneli mobilde gizli; markalama kaybolmasın diye formun
     üstünde kısa bir slogan göster. */
  .auth-tagline { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin: -22px 0 26px; }
}

/* ---- Account screen ---- */
.acc-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
/* H-35: profil ad/soyad düzenleme (başlık + inline input + eylemler). */
.acc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 22px; }
.acc-card-head h2 { margin: 0; }
.acc-input { width: 190px; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 13px; color: var(--ink); background: var(--panel); outline: none; }
.acc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pink-100); }
.acc-edit-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.acc-card h2 { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; min-height: 40px; box-sizing: border-box; border-bottom: 1px solid var(--border-soft); }
.acc-row:last-child { border-bottom: 0; }
.acc-row .k { font-size: 13px; color: var(--ink-3); }
.acc-row .v { font-size: 13px; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.soon-tag { font-size: 10.5px; font-weight: 700; color: var(--ink-4); background: var(--hover); border: 1px solid var(--border-soft); border-radius: 99px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .03em; }
.acc-plan { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--chip-bg); border: 1px solid var(--border-soft); }
.acc-plan.trial { background: var(--pink-100); border-color: var(--pink-200); }
.acc-plan .k { font-size: 12px; color: var(--ink-3); }
.acc-plan .v { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink); margin-top: 2px; }
.acc-trial { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.acc-trial strong { font-family: var(--font-head); font-size: 17px; color: var(--accent); }
.acc-plan-meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.acc-error { max-width: 420px; margin: 60px auto; text-align: center; }
.acc-error h2 { font-family: var(--font-head); color: var(--ink); }
.acc-error p { color: var(--ink-3); font-size: 13.5px; margin: 8px 0 18px; }
.acc-cta { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
/* Inside a row or a card head the action sits on the line of its label; the
   12 px is only for an action that stands alone under a block. */
.acc-row .acc-cta, .acc-card-head .acc-cta { margin-top: 0; }
.acc-cta:hover { text-decoration: underline; }
.auth-alt { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.auth-link { color: var(--accent); cursor: pointer; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-forgot { margin-top: 12px; font-size: 12.5px; color: var(--accent); cursor: pointer; display: inline-block; }
.auth-forgot:hover { text-decoration: underline; }

/* ============================================================
   Onboarding wizard (onboarding.js)
   ============================================================ */
.onb-inner { width: 100%; max-width: 460px; }
.onb-inner h1 {
  font-family: var(--font-head); font-weight: 800; font-size: 27px;
  color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em;
}
.onb-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; font-size: 13px; }
.onb-brand strong { font-family: var(--font-head); font-size: 15px; color: var(--ink); }
.onb-brand span { color: var(--ink-4); }
.onb-dots { justify-content: flex-start; }
.onb-dots span.done { background: var(--ink-4); }
/* The scanning screen stands alone, so it takes the whole viewport and
   centres itself in it. The "done" variant sits inside the wizard shell,
   which already centres its content. */
.onb-splash {
  position: fixed; inset: 0; z-index: 1; padding: 24px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
}
.onb-splash img { width: 42px; height: 42px; object-fit: contain; animation: splashPulse 1.2s ease-in-out infinite; }
.onb-splash .line { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }
.onb-splash.done { position: static; padding: 0; }
.onb-splash.done img { animation: none; }

/* Wizard background: the app's dotted grid, with the dots under the pointer
   lit in the brand colour. Two identical grids; the red one is masked to a
   circle that follows the mouse. (Not `.onb-dots`: that is the step
   indicator at the foot of each screen.) */
.onb-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--ink-4) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .45;
}
.onb-bg .glow {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--accent) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0; transition: opacity .35s ease;
  --mx: 50vw; --my: -40vh;
  -webkit-mask-image: radial-gradient(circle 150px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 55%, transparent 78%);
  mask-image: radial-gradient(circle 150px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 55%, transparent 78%);
}
body.dark .onb-bg { background-image: radial-gradient(rgba(255, 138, 174, .3) 1px, transparent 1px); opacity: 1; }
body.dark .onb-bg .glow { background-image: radial-gradient(#ff8aae 1.6px, transparent 1.6px); }
@media (prefers-reduced-motion: reduce) {
  .onb-bg .glow { display: none; }
}
/* M-74: fare-takipli ışık dokunmatikte hareket etmez ama boyanır - hover'sız
   (dokunmatik) cihazlarda gizle. */
@media (hover: none) {
  .onb-bg .glow { display: none; }
}

.onb-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.onb-row, .onb-prow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
/* M-71: dar ekranda satır sarsın, metin alanı tam genişlik olsun (210px dim
   sütun zaten ≤700px'te gizli; bu, kalan sabit ögeler için güvence). */
@media (max-width: 600px) {
  .onb-row, .onb-prow { flex-wrap: wrap; row-gap: 6px; }
  .onb-row .onb-cell:not(.dim), .onb-prow .onb-cell { min-width: 100%; }
}
.onb-cell {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font); font-size: 13.5px; color: var(--ink);
}
.onb-cell.dim { flex: 0 0 210px; color: var(--ink-3); font-size: 12.5px; }
.onb-del {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-4); transform: rotate(45deg);
}
.onb-del:hover { background: var(--pink-100); color: var(--accent); }
.onb-add { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.onb-add:hover { text-decoration: underline; }
.onb-topics { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.onb-topic { margin-top: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.onb-topic.on { border-color: var(--ink); }
.onb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
@media (max-width: 640px) { .onb-modes { grid-template-columns: 1fr; } }
.onb-mode { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.onb-mode.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.onb-mode .nm { font-weight: 700; font-size: 14px; }
.onb-mode .sb { margin-top: 4px; font-size: 12.5px; color: var(--muted, #667); line-height: 1.4; }
.onb-bulk { width: 100%; min-height: 220px; resize: vertical; line-height: 1.5; font-family: inherit; }
.onb-padd { margin-top: 8px; }
.onb-addrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.onb-addrow .auth-input { flex: 1; }
.onb-addrow .onb-add { margin-top: 0; white-space: nowrap; }
.onb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 10px; align-items: start; }
.onb-plan { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.onb-plan:hover { border-color: var(--accent); }
.onb-plan.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.onb-plan .nm { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); }
.onb-plan .pr { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--ink); margin-top: 6px; }
.onb-plan .pr span { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.onb-plan .sb { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.onb-plan { position: relative; padding: 22px; }
.onb-plan .onb-pop {
  position: absolute; top: 20px; right: 20px; font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
}
.onb-plan.on { background: var(--pink-100); }
/* The ten lines: a hairline above them, then one row each, name on the left and
   the value on the right in ink so the eye can run down the numbers. */
.onb-feats { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--border); }
.onb-ft {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.onb-ft:last-child { border-bottom: 0; }
.onb-ft .k { color: var(--ink-3); }
.onb-ft .v { color: var(--ink); font-weight: 600; text-align: right; }
.onb-ft .v .pv-yes { color: var(--accent); }
.onb-ft .v .pv-no { color: var(--ink-4); font-weight: 400; }
.onb-groups { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
/* M-70: telefonda klavye açılınca 52vh iç kaydırıcı ~150px'e düşüp kullanılmaz
   oluyordu; dar ekranda iç kaydırmayı kaldır, sayfa doğal kaysın. */
@media (max-width: 768px) { .onb-groups { max-height: none; overflow-y: visible; } }
.onb-group .gh {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  color: var(--ink); margin-bottom: 8px;
}
.onb-group .gh span { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--ink-4); }
.onb-prow { margin-bottom: 6px; }
.onb-prow .tag {
  flex: none; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--ink-3);
}
.onb-prow .tag.brand { background: var(--pink-100); color: var(--accent-dark); }
/* M-72: 3 plan kartı doğrudan 3→1'e düşmesin; tablette 2 sütun ara adımı. */
@media (max-width: 700px) { .onb-plans { grid-template-columns: 1fr; } .onb-cell.dim { display: none; } }

/* ---- Measurement history (history.js) ---- */
.trend-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.trend-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.trend-head span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--ink-4); }

/* ---- What changed panel (changes.js) ---- */
.chg-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 26px;
}
.chg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.chg-card { background: var(--chip-bg); border-radius: var(--radius); padding: 14px 16px; }

/* ---- Answer comparison (changes.js) ---- */
.ad-modal { max-width: 1080px; }
.ad-modal .close { transform: rotate(45deg); }
.ad-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.ad-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.ad-head h2 { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--ink); margin: 0 0 5px; line-height: 1.3; }   /* modal başlığı standardı: .modal h2 ile aynı */
.ad-sub { font-size: 12.5px; color: var(--ink-4); }
.ad-engine { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.ad-eh {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink);
}
.ad-eh span {
  margin-left: 6px; font-family: var(--font); font-weight: 600; font-size: 11px;
  padding: 3px 8px; border-radius: 999px;
}
.ad-eh .loss { background: var(--pink-100); color: var(--accent-dark); }
.ad-eh .gain { background: rgba(26, 143, 90, .12); color: var(--green); }
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ad-col { background: var(--chip-bg); border-radius: var(--radius); padding: 14px 16px; }
.ad-ch {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.ad-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ad-trail .bt {
  font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); color: var(--ink-2);
}
.ad-trail .bt.me { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ad-trail .none { font-size: 11.5px; color: var(--ink-4); font-style: italic; }
.ad-text { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-height: 340px; overflow-y: auto; }
.ad-text mark.bm { background: var(--border-soft); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.ad-text mark.bm.me { background: var(--pink-200); color: var(--accent-dark); font-weight: 600; }
.ad-empty { font-size: 13px; color: var(--ink-3); padding: 20px 0; }
@media (max-width: 820px) { .ad-cols { grid-template-columns: 1fr; } }

/* ---- Opportunities (opportunities.js) ---- */
/* Sayfa genişliği standardı: diğer 11 sekmenin hepsi tam genişlik kullanıyor.
   Fırsatlar tek başına 1180px'de duruyordu, geniş ekranda ötekilerden dar
   görünüyordu. Kaldırıldı - içerik kartları zaten kendi ızgarasında hizalı. */
.opp-lines { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.opp-lines li {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  padding-left: 18px; position: relative;
}
.opp-lines li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.opp-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 18px;
}
.opp-card .oh {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink);
}
.opp-card .oh span { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--ink-4); }
/* Grid items default to min-width:auto, so a long URL pushes the card wider
   than its column and the numbers spill past the border. */
.opp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.opp-two > * { min-width: 0; }
.opp-card { overflow: hidden; }
.opp-two .opp-card { margin-bottom: 18px; }
.opp-q { padding: 10px 12px; border-left: 2px solid var(--accent); margin-bottom: 7px; cursor: pointer; }
.opp-q:hover { background: var(--chip-bg); }
.opp-q .qh { display: flex; align-items: baseline; gap: 10px; }
.opp-q .q { font-size: 13.5px; color: var(--ink); flex: 1; }
.opp-q .eng { font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.opp-q .qm { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }
.opp-src {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 12.5px;
}
.opp-src:last-child { border-bottom: 0; }
.opp-src .dm { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-src .cat { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.opp-src .n { font-family: var(--mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.opp-src .q { font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.opp-src .go { color: var(--ink-4); display: flex; }
.opp-src .go:hover { color: var(--accent); }
.opp-gap {
  display: grid; grid-template-columns: 190px 1fr 52px 190px;
  align-items: center; gap: 12px; padding: 7px 0; font-size: 12.5px;
}
.opp-gap .nm { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-gap .bar { position: relative; height: 7px; border-radius: 999px; background: var(--chip-bg); }
.opp-gap .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.opp-gap .bar b {
  position: absolute; top: -3px; width: 2px; height: 13px; background: var(--ink-3);
  transform: translateX(-1px);
}
.opp-gap .v { font-family: var(--mono); font-size: 11.5px; color: var(--ink); text-align: right; }
.opp-gap .lead { font-size: 11px; text-align: right; }
.opp-gap .lead.behind { color: var(--red); }
.opp-gap .lead.ahead { color: var(--ink-4); }
@media (max-width: 900px) { .opp-two { grid-template-columns: 1fr; } .opp-gap { grid-template-columns: 1fr auto; } }
.onb-vol {
  flex: none; min-width: 62px; text-align: right; font-family: var(--mono);
  font-size: 11px; color: var(--ink-2);
}
.onb-vol i { display: block; font-style: normal; font-size: 10px; color: var(--accent); }
.onb-vol.loading { color: var(--ink-4); }

/* ---- Portfolio (portfolio.js) ---- */
.pf-wrap { margin-bottom: 30px; }
.pf-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-head h1 { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--ink); margin: 0; }
.pf-totals { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.pf-totals b { font-family: var(--font-head); font-size: 14px; color: var(--ink); margin-right: 4px; }
.pf-attention {
  background: var(--pink-100); border: 1px solid var(--pink-200);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.pf-attention .ah {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 9px;
}
.pf-attention .ai { font-size: 13px; color: var(--ink-2); padding: 4px 0 4px 16px; position: relative; cursor: pointer; }
.pf-attention .ai::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.pf-attention .ai:hover { color: var(--accent-dark); }
.pf-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.pf-empty svg { color: var(--ink-4); }
.pf-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pf-table th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 14px; cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid var(--border); background: var(--chip-bg);
}
.pf-table th.left { text-align: left; }
.pf-table th.num { text-align: right; }
.pf-table th.on { color: var(--accent); }
.pf-table th i { font-style: normal; margin-left: 4px; font-size: 9px; }
.pf-table td { padding: 12px 14px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border-soft); }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-table tbody tr { cursor: pointer; }
.pf-table tbody tr:hover td { background: var(--chip-bg); }
.pf-table td.num { text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.pf-table td.dim { color: var(--ink-4); }
.pf-brand { display: flex; align-items: center; gap: 10px; }
.pf-brand span { display: flex; flex-direction: column; min-width: 0; }
.pf-brand strong { font-weight: 600; font-size: 13.5px; }
.pf-brand em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pf-date { white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.pf-date span { display: block; font-size: 11px; color: var(--ink-3); }
.pf-d { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
.pf-d.up { color: #136b43; }
.pf-d.down { color: var(--red); }


/* "Measure now", and what it says while a measurement is running. */
.measure-note {
  font-size: 12px;
  color: var(--muted, #667);
  margin-right: 10px;
  white-space: nowrap;
}
.measure-note.bad { color: #cc0a4d; }
/* Ölçüm beklenenden uzun sürünce gösterilen ikincil, soluk uyarı. */
.measure-note.slow { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-4); font-weight: 500; }

/* ---------------- Brand settings ----------------
   Built from the shared page pieces (.page/.section/.sec-head/.card/.tbl/
   .seg-tabs/.kb-switch/.auth-input); only the few glue rules live here. */
.bs-body { padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bs-note {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 13px; border-radius: 9px; font-size: 13px;
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--ink-2);
}
.bs-note.ok { color: var(--green); border-color: var(--green); background: transparent; }
.bs-note.bad { color: var(--accent); border-color: var(--accent); background: var(--pink-100); }
.bs-note svg { width: 13px; height: 13px; flex: none; }
.seg-tabs button.off { opacity: .45; cursor: not-allowed; }
.seg-tabs button svg { width: 11px; height: 11px; }
.bs-right { text-align: right; }
.bs-body .page-link { color: var(--accent); font-weight: 600; }
.tbl tr.off td { color: var(--ink-4); }
.tbl tr.off .badge { opacity: .5; }
.bs-add { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.bs-add .auth-input { width: auto; flex: 1; padding: 7px 11px; font-size: 13px; border-radius: 9px; }
.bs-add .auth-input.wide { flex: 3; }
.bs-add .btn { flex: none; }
.measure-note.slow { display: block; }
/* Hesap ekranı (auth-ui.js) hâlâ bu sınıfı kullanıyor. */
.bs-error { color: var(--accent); font-size: 13px; margin: 8px 0; }
body.dark .bs-error { color: #ff8aae; }   /* L-65: koyu zeminde soft-red (AA) */

/* The first measurement, stage by stage. */
.onb-stages { list-style: none; padding: 0; margin: 18px auto 8px; max-width: 320px; text-align: left; }
.onb-stages li {
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 14px;
  color: var(--muted, #667);
}
.onb-stages li::before {
  content: "";
  position: absolute; left: 6px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line, #e8ecf2);
}
.onb-stages li.past { color: var(--muted, #667); }
.onb-stages li.past::before { background: #0a7d4d; }
.onb-stages li.now { color: inherit; font-weight: 600; }
.onb-stages li.now::before { background: #cc0a4d; }
.auth-sub.bad { color: #cc0a4d; }

/* Who is signed in, at the top of the settings menu. */
.sp-who {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px 7px;
  font-size: 12px;
  color: var(--muted, #667);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-sep { height: 1px; background: var(--line, #e8ecf2); margin: 4px 0; }

/* ---------------- Content: the work list (assets/content.js) ----------------
   The cards reuse .opp-card so a job here looks like the recommendations on
   the Opportunities screen; only what a job needs on top is added. */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 18px; }
.opp-grid > * { min-width: 0; }
.opp-grid .opp-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-card.opp-closed { opacity: .55; }
.opp-head { display: flex; align-items: center; gap: 9px; }
.kind-badge {
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.opp-topic { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); flex: 1; min-width: 0; }
.opp-score { font-family: var(--mono); font-weight: 700; font-size: 15px; white-space: nowrap; }
.opp-score .dim { font-size: 10px; font-weight: 400; }
.opp-page { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; min-width: 0; }
.opp-page a { color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-page a:hover { color: var(--accent); text-decoration: underline; }
.opp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fchip .kdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.chip-impact {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--ink-3); white-space: nowrap; margin-left: 6px;
}
.chip-impact.chip-high { background: #fdeaf0; color: var(--accent); }
body.dark .chip-impact.chip-high { background: rgba(204, 10, 77, .22); color: #ff8aae; }
@media (max-width: 720px) {
  .opp-grid { grid-template-columns: 1fr; }
}

/* Drafts on a work item (assets/content.js) */
.opp-jobs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.opp-drafts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.draft-line { cursor: pointer; padding: 5px 8px; border-radius: 8px; background: var(--chip-bg); }
.draft-line:hover { background: var(--pink-100); }
.modal.wide { max-width: 940px; }
.modal.narrow { max-width: 560px; }
.draft-body { line-height: 1.6; font-size: 14px; }
.draft-body h1 { font-size: 20px; margin: 4px 0 12px; }
.draft-body h2 { font-size: 17px; margin: 20px 0 8px; }
.draft-body h3 { font-size: 15px; margin: 16px 0 6px; }
.draft-body ul, .draft-body ol { padding-left: 20px; }
.draft-body p { margin: 0 0 12px; }
.banner.warn { border-color: var(--accent); background: var(--pink-100); }
.banner.ok { border-color: #1a8f5a33; }
/* Sayfalar ekranı geçmiş bir ölçüme sarıldığında en üstte duran şerit. Eski
   veriyi güncel sanmak pahalı bir yanlış olduğu için tabloların üstünde ve
   dönüş düğmesiyle birlikte durur. */
.banner.past-view { margin: 4px 0 12px; align-items: center; }
.banner.past-view .btn { margin-left: auto; flex: none; white-space: nowrap; }
pre.jsonld { font-size: 11.5px; line-height: 1.45; overflow: auto; max-height: 260px; margin: 0; }

/* A browser that refuses to keep the session (assets/auth-ui.js). Amber rather
   than red: nothing has gone wrong yet, but the next refresh will ask again. */
.auth-note {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: #fff8ec; border: 1px solid #f2d9a8; color: #7a5b16;
  font-size: 12.5px; line-height: 1.5;
}

/* Setting a log shipper up (assets/bots.js). Numbered because the order is the
   whole point: a step done out of turn on Cloudflare fails at "create". */
.guide-list { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.guide-list li { margin-bottom: 10px; }
.guide-list li pre.jsonld { margin-top: 6px; white-space: pre-wrap; word-break: break-all; }

/* Experiments (assets/content.js) */
.exp-card .exp-numbers {
  display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 14px; align-items: end;
  margin: 10px 0 6px;
}
.exp-numbers .kk { font-size: 11px; color: var(--ink-3); }
.exp-numbers .kv { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.exp-spark-wrap { justify-self: end; }
.exp-spark { display: block; }
.opp-rival-link {
  margin-top: 8px; font-size: 12px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.opp-rival-link:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 720px) {
  .exp-card .exp-numbers { grid-template-columns: repeat(3, 1fr); }
  .exp-spark-wrap { grid-column: 1 / -1; justify-self: start; }
}

/* Crawler traffic (assets/bots.js) */
.bot-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 18px 0 6px;
  padding: 0 2px; border-bottom: 1px solid var(--border);
}
.bd-bar { flex: 1; min-width: 3px; display: flex; flex-direction: column-reverse; height: 100%; }
.bd-bar i { display: block; width: 100%; border-radius: 1px; }
.bd-bar:hover i { opacity: .75; }
label.btn input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; }
label.btn[disabled] { opacity: .55; pointer-events: none; }

/* A keyboard user has to be able to see where they are. The app's controls are
   mostly spans and divs carrying data-action, so the focus ring is drawn on
   them explicitly rather than left to each browser's default for a div. */
[data-action][tabindex]:focus-visible,
.btn:focus-visible, .fchip:focus-visible, .vtab:focus-visible,
.opt:focus-visible, .draft-line:focus-visible, .opp-rival-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* A mouse click should not leave a ring behind it, which is what :focus-visible
   is for; this only matters where a browser still shows the older outline. */
[data-action][tabindex]:focus:not(:focus-visible) { outline: none; }

/* =====================================================================
   Ortak sayfa bileşenleri (tasarım standardı, 25 Ağu 2026)

   Her ekran aynı iskeleti kullanır:
     topbar (marka + Zeo AI)
     .page-head   sayfa başlığı: h1 + .sub + sağda .actions
     .subtabs     sayfa içi sekmeler (alt çizgili, ölçüm sekmeleriyle aynı dil)
     .filterbar   filtre çipleri
     .section     içerik; her bölüm .sec-head ile başlar

   Boş, yükleniyor, kilitli ve yapım aşamasındaki durumlar tek bileşen:
   .state-card. KPI kutuları tek bileşen: .kpi-row > .kpi.
   Eski .designer-head / .opp-head / .home-head / .bs-head / .chg-head /
   .pages-top / .dash-top bu sınıflara taşındı; yenisini ekleme.
   ===================================================================== */
.page-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 26px 0; margin-bottom: 6px;
}
.page-head > div:first-child { min-width: 0; flex: 1; }
.page-head h1 {
  font-family: var(--font-head); font-weight: 800; font-size: 21px;
  letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 1.2;
}
.page-head .sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.page-head .meta { color: var(--ink-4); font-size: 12.5px; margin-top: 4px; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 2px; }
.page + .page-head, .section + .page-head { margin-top: 10px; }
/* On a phone the actions go under the title. Side by side, a header with an
   export button, a measurement note and "Try again" left the title a column
   one word wide (found on Tasks, 2 October 2026; every screen with the note
   had it). */
@media (max-width: 720px) {
  .page-head { flex-wrap: wrap; }
  .page-head > div:first-child { flex-basis: 100%; }
  .page-head .actions { flex: 1 1 100%; flex-wrap: wrap; }
}

/* Sayfa içi sekmeler: ölçüm sekmeleriyle aynı görünüm, sayfa başlığının altında. */
.subtabs {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 4px 26px 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px;
}
.subtabs .tab { padding: 8px 1px 10px; }
.subtabs .tab .cnt {
  margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: var(--chip-bg); border-radius: 99px; padding: 1px 7px;
}
.subtabs .spacer { flex: 1; }
.page .subtabs { padding-left: 0; padding-right: 0; }

/* Durum kartı: boş, yükleniyor, kilitli, yapım aşamasında, hata. */
.state-card {
  border-radius: var(--radius); border: 1px solid var(--border);
  background-color: var(--panel); padding: 52px 30px; text-align: center;
}
.state-card.dots {
  background-color: var(--hover, #fbfcfd);
  background-image: radial-gradient(#ffcfdf 1px, transparent 1px); background-size: 14px 14px;
}
.state-card .state-icon {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 14px;
  background: var(--pink-100); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.state-card .state-icon svg { width: 22px; height: 22px; }
.state-card.loading .state-icon { background: transparent; }
.state-card .badge-soon {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: 99px; padding: 4px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px;
}
.state-card h2 { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.state-card p { color: var(--ink-3); max-width: 460px; margin: 8px auto 0; font-size: 13.5px; line-height: 1.55; }
.state-card .actions { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.state-card .foot { color: var(--ink-4); font-size: 12px; margin-top: 12px; }
.state-card.compact { padding: 28px 22px; }
.state-card.compact h2 { font-size: 15px; }
.state-spin {
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto;
  border: 2.5px solid var(--pink-200); border-top-color: var(--accent);
  animation: state-spin .8s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }
body.dark .state-card .state-icon { background: rgba(204, 10, 77, .2); color: #ff8aae; }

/* KPI kutuları: etiket üstte, değer Gilroy ile, isteğe bağlı alt satır. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.kpi { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; background: var(--panel); min-width: 0; }
.kpi .kpi-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.kpi .kpi-value {
  font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  color: var(--ink); margin-top: 4px; line-height: 1.15; display: flex; align-items: baseline; gap: 6px;
}
.kpi .kpi-value .of { font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--ink-4); }
.kpi .kpi-sub { font-size: 12px; color: var(--ink-4); margin-top: 3px; }
.kpi.warn .kpi-value { color: #b45309; }
.kpi.bad .kpi-value { color: var(--accent); }

/* Fırsatlar: sayfa kabı ile içindeki bağlantı satırı aynı .opp-page sınıfını
   paylaşıyordu; kap da tek satırlık flex oluyor ve bütün sayfa yana sıkışıyordu.
   Kap artık .opp-screen. */
.opp-screen { display: block; }

/* radar.js ekranları (agent A) ------------------------------------------
   Ana sayfa, Prompt Designer ve Prompt Volumes ekranları ortak
   pageHeadHTML() / subtabsHTML() / stateCardHTML() iskeletine geçti.
   Buradaki kurallar yalnız o geçişin gerektirdiği farkları kapatır. */

/* Ana sayfa kendi kabında zaten 30 px yatay boşluk veriyor; sayfa başlığı
   bir kez daha girintilenmesin. Zeo işareti eskiden .home-head içinde bir
   <img> idi; başlık işaretlemesi standart kaldığı için CSS'e taşındı. */
.home > .page-head { padding: 0; margin-bottom: 8px; align-items: center; }
.home > .page-head::before {
  content: ""; width: 34px; height: 31px; flex: none;
  background: url("zeo-mark.svg") center / contain no-repeat;
}
.home > .page-head h1 { font-size: 24px; letter-spacing: -.02em; }

/* Sayfa başlığındaki meta satırı bir kilit ikonu taşıyabiliyor (örnek marka
   uyarısı); ikon yazıyla aynı hizada dursun. */
.page-head .meta svg { vertical-align: -2px; margin-right: 2px; }

/* Prompt Designer tablosu: konu adı hücrede üç satıra sarıyor ve bütün satırı
   uzatıyordu. Sütun tek satır kalır, sığmayan ad kısaltılır (tamamı title'da). */
.dg-main .tbl td.dg-topic { min-width: 130px; }
.dg-main .tbl td.dg-topic > span {
  display: block; max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1180px) {
  .dg-main .tbl td.dg-topic { min-width: 0; }
  .dg-main .tbl td.dg-topic > span { max-width: 140px; }
}

/* ikincil ekranlar (agent C) =========================================
   Fırsatlar, Ne değişti, Panolar, Yetenekler, Marka Bağlamı, Marka
   Ayarları, Personalar ve Zeo AI ekranları ortak iskelete geçirildi
   (docs/tasarim-standardi.md). Burada yalnız o geçişin gerektirdiği
   düzeltmeler var; eski kurallar silinmedi, raporda listelendi.
   ==================================================================== */

/* Sayfa başlığının eylem alanı: arama kutusu ve görünüm seçici düğmelerle
   aynı satırda, sıkışmadan dursun. */
.page-head .actions .search-input,
.page-head .actions .seg-toggle { flex: none; }

/* Kart köşesi standardı 12 px: pano şablon kartı tek başına 15 px'ti. */
.tmpl-card { border-radius: var(--radius); }

/* Pano detayının araç çubuğu, Yetenek ve Marka Bağlamı detaylarıyla aynı
   .sd-top kalıbını kullanır. */
.dash-view .sd-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 6px; border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 768px) { .dash-view .sd-top { flex-wrap: wrap; row-gap: 8px; } }
@media print { .dash-view .sd-top { display: none !important; } }

/* Persona koşu penceresindeki durum kartı: modalın içinde ayrıca çerçeve
   ve zemin istemiyoruz, yalnız simge, başlık ve alt satır kalsın. */
.run-modal .state-card {
  border: 0; background: transparent; padding: 2px 0 4px; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start;
}
.run-modal .state-card .state-icon {
  grid-row: 1 / span 2; width: 26px; height: 26px; margin: 2px 0 0; border-radius: 9px;
}
.run-modal .state-card h2 { font-size: 17px; color: var(--accent); }
.run-modal .state-card p { margin: 3px 0 0; max-width: none; font-size: 12.5px; }

/* Zeo AI karşılama ekranı: başlık ölçeği sayfa başlığıyla aynı (21 px). */
.chat-hero h1 { font-size: 21px; }
.chat-hero .ch-skill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: var(--pink-100); color: var(--accent); border-radius: 99px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700;
}
body.dark .chat-hero .ch-skill { background: rgba(204, 10, 77, .2); color: #ff8aae; }

/* pages/bots/content (agent B) ---------------------------------------
   Pages, AI Traffic ve Content ekranları tasarım standardına geçti:
   başlık pageHeadHTML, sekmeler subtabsHTML, durumlar stateCardHTML,
   sayılar kpiHTML. Buradaki üç kural yalnız o geçişin gerektirdikleri.

   (Pages başlığı .page-head oldu) ile .opp-meta (yalnız content.js
   kullanıyordu, eş aralıklı yazı tipi oradan kaldırıldı). .view-tabs hâlâ
   başka ekranlarda, .hero ise opportunities/personas/radar içinde kullanılıyor;
   ikisi de duruyor.
   ------------------------------------------------------------------- */

/* Bu üç ekran zaten .page içine çiziliyor ve .page 26 px yatay boşluk veriyor.
   .page-head kendi 26 px'ini de eklerse başlık gövdeden içeri kayıyor. */
.page .page-head { padding-left: 0; padding-right: 0; }

/* İş kartındaki "görünürlük 45% · Lindt %80" satırı: sayı tablosu değil,
   bir cümle parçası. Gövde yazı tipiyle, küçük ve gri. */
.opp-meta-line { font-family: var(--font); color: var(--ink-4); }

/* Durum kartı bir bölümün tek içeriğiyse üstünde ekstra boşluk istemiyor. */
.section > .state-card:first-child { margin-top: 4px; }

/* =====================================================================
   halka açık sayfalar ve giriş (agent D)

   Fiyat, hukuk, giriş/kayıt, onboarding ve Hesap ekranları tek bir görsel
   dile alındı (docs/tasarim-standardi.md):
     - Fiyat ve hukuk sayfaları ortak bir üst çubuk kullanıyor; ayarlar
       dişlisi sayfanın sol alt köşesinde havada duran `.home-foot`
       kutusundan bu çubuğun sağ ucuna taşındı.
     - "Çok yakında" rozetleri artık her yerde `.badge-soon`.
     - Onboarding, giriş akışının iki panelli düzenini kullanıyor.
     - Hesap başlığı `pageHeadHTML()` ile çiziliyor.

   Artık kimse kullanmıyor, silinebilir (bu geçişle boşta kaldılar):
     .pv-soon, .cs-soon  -> ikisi de .badge-soon oldu
     .acc-head, .acc-head h1  -> Hesap başlığı .page-head kullanıyor
     .onb-wrap, .onb-wrap.wide .onb-inner, .onb-logo, .onb-bg (+ .glow ve
       koyu tema/hareket varyantları)  -> sihirbaz .auth-wrap düzenine geçti
   Var olan kural silinmedi; yalnız burada raporlanıyor.
   ===================================================================== */

/* ---- Ortak "çok yakında" rozeti ----
   Ölçüsü .state-card içindeki rozetle aynı; oradaki kural (daha yüksek
   özgüllükte) kendi alt boşluğunu korumaya devam eder. */
.badge-soon {
  display: inline-block; white-space: nowrap; vertical-align: middle;
  background: var(--accent); color: var(--on-accent);
  border-radius: 99px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pr-sec h3 .badge-soon { margin-left: 6px; }
/* Karşılaştırma tablosunda rozet hücrenin ortasında ve satırı şişirmeden dursun. */
.price-tbl td.num .badge-soon { font-size: 10.5px; padding: 2px 9px; }

/* ---- Fiyat ve hukuk sayfalarının ortak üst çubuğu ---- */
.pa-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; min-height: 32px;
}
.pa-top .pa-spacer { flex: 1; }
.pa-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.pa-back:hover { color: var(--accent); }
.pa-back svg { width: 13px; height: 13px; }
.pa-tools .side-foot { margin: 0; padding: 0; gap: 8px; }
/* Ayarlar menüsü kenar çubuğunda yukarı açılıyordu; üst çubukta aşağı açılır. */
.pa-top .set-pop { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; }

/* ---- Giriş, kayıt ve onboarding: tek düzen ----
   İki sütun: solda form, sağda pembe panel. Sihirbazın geniş adımları (rakip
   listesi, planlar, prompt listesi) sol sütunu genişletir; ayrı bir sayfa
   düzeni açmaz. */
.auth-wrap.wide { grid-template-columns: minmax(560px, 58%) 1fr; }
.auth-wrap.wide .auth-form { max-width: 720px; }
@media (max-width: 1200px) {
  .auth-wrap.wide { grid-template-columns: 1fr; }
  .auth-wrap.wide .auth-right { display: none; }
}
/* Uzun adımlar dikey ortalanınca logoyu ekran dışına itiyordu. */
.auth-left { align-items: safe center; }
@media (max-width: 768px) { .auth-left { align-items: flex-start; } }

/* Başlık ölçüsü ikisinde de aynı: 24 px Gilroy 800. */
.auth-form h1, .onb-inner h1 { font-size: 24px; }
.onb-inner { width: 100%; max-width: none; }
/* Marka satırı, logonun durduğu yerde ve onunla aynı alt boşlukta. */
.auth-form > .onb-brand { margin-bottom: 30px; }

/* Hata kutusu: uygulamadaki .banner ile aynı ölçü. */
.banner.auth-error {
  display: block; margin-top: 16px; padding: 13px 16px;
  font-size: 13px; border-radius: var(--radius);
}

/* Sihirbazın "kuruluyor" ekranı iki sütunun içinde, formla aynı hizada. */
.auth-form .onb-splash.done { align-items: flex-start; text-align: left; gap: 12px; }
.auth-form .onb-splash.done h1 { margin: 0; }
.auth-form .onb-splash.done .auth-sub { margin-bottom: 0; }

/* ---- Hesap ekranı başlığı ---- */
.acc-page .page-head .actions { align-self: center; }

/* Tarama adımı da iki panelli düzenin içinde kalsın: tam ekran kaplayan
   .onb-splash yerine sol sütuna yerleşen "inline" varyantı (işaretin nabız
   animasyonu korunur; .done varyantı onu bilerek durduruyor). */
.auth-form .onb-splash.inline {
  position: static; padding: 0; align-items: flex-start; text-align: left; gap: 26px;
}
/* The loader: the mark on a soft pink disc, a red arc turning round it on a
   hairline track. The mark breathes; it no longer blinks on and off. */
.onb-loader {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, var(--pink-100) 0%, rgba(253, 231, 238, 0) 72%);
}
.onb-loader::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: kbspin 1.1s cubic-bezier(.5, .15, .5, .85) infinite;
}
.onb-splash.inline .onb-loader img {
  width: 34px; height: 34px; animation: onbBreathe 2.2s ease-in-out infinite;
}
@keyframes onbBreathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.04); } }
/* The stages of the scan. */
.onb-steps { display: flex; flex-direction: column; gap: 14px; }
.onb-st {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink-4);
  transition: color .25s;
}
.onb-st .mk {
  width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); color: transparent; transition: background .25s, border-color .25s;
}
.onb-st.on { color: var(--ink); font-size: 18px; }
.onb-st.on .mk { border-color: var(--border); border-top-color: var(--accent); animation: kbspin .8s linear infinite; }
.onb-st.done { color: var(--ink-3); }
.onb-st.done .mk { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  .onb-loader::before, .onb-st.on .mk, .onb-splash.inline .onb-loader img { animation: none; }
  .onb-st.on .mk { border-color: var(--accent); }
}

/* Prompt Designer: tablo sağdan taşıyordu (Platforms sütunu kesiliyordu).
   Sütunları sıkıştırmak yerine tablo kendi içinde yatay kaydırılır. */
.dg-main { overflow-x: auto; }
/* Prompt Designer tablosu 1440 px'te bile kaba sığsın: konu sütunu 140 px'te
   kesilir (tam ad title'da), hücre iç boşluğu bir kademe azalır. */
.dg-main .tbl { width: 100%; }
.dg-main .tbl th, .dg-main .tbl td { padding-left: 8px; padding-right: 8px; }
.dg-main .tbl td.dg-topic > span { max-width: 140px; }
.dg-main .tbl td.dg-topic { min-width: 0; }
.dg-main .tbl td.dg-topic > span { max-width: 128px; }
/* AI Traffic: "Trafik ekleyin" kartı durum kartının kenarına yapışıyordu ve
   .card tek başına iç boşluk taşımıyor. */
.bots-upload { padding: 18px 20px; margin-top: 14px; }

/* =====================================================================
   fiyat ve hukuk (agent D2)

   "Plan sayfası neden full page?" Fiyat sayfası 1150 px'lik kendi kabında,
   ortalanmış bir hero başlıkla duruyordu; hukuk sayfası 780 px'lik beyaz bir
   kartla. Üst çubuk ikisinde de aynıydı ama kaplar farklı olduğu için geri
   bağlantısı fiyatta 176 px'ten, hukukta 330 px'ten başlıyordu.

   Artık iki sayfa da tek bir kap kullanıyor: .pa-wrap (1080 px, ortalanmış,
   26 px iç boşluk). Üst çubuk bu kabın içinde, dolayısıyla geri bağlantısı ve
   ayarlar dişlisi iki sayfada aynı x'te. Başlıklar pageHeadHTML(), sayfa içi
   geçişler subtabsHTML() ile: uygulamanın geri kalanıyla aynı dil
   (docs/tasarim-standardi.md §1).
   ===================================================================== */

/* ---- Halka açık sayfaların ortak kabı ---- */
.pa-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 26px 60px; }
/* Üst çubuk kabın ilk satırı; başlığın kendi 14 px üst boşluğu yeterli. */
.pa-wrap .pa-top { margin-bottom: 0; }
/* Kabın 26 px'i zaten var; .page / .page-head / .subtabs kendi yatay iç
   boşluklarını buraya eklemesin, yoksa içerik iki kez içeri kayar. */
.pa-wrap > .page { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.pa-wrap .page-head { padding-left: 0; padding-right: 0; }
.pa-wrap .subtabs { padding-left: 0; padding-right: 0; }

/* ---- Fiyat sayfası ---- */
/* Başlık sola yaslı, faturalama seçici sağda ve iki satırlık alt metne göre
   dikeyde ortalı. */
.pricing-page .page-head .actions { align-self: center; }
/* Aylık / Yıllık: standart .seg-tabs; "~%11 indirim" rozeti düğmenin içinde. */
.seg-tabs .save {
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: var(--panel); border-radius: 99px; padding: 2px 7px;
}
.pr-bill button { display: inline-flex; align-items: center; gap: 7px; }
.pr-bill button.on .save { background: var(--pink-100); }
body.dark .seg-tabs .save { background: #0d2130; color: #ff8aae; }

/* Dört plan 1080'lik kaba sığar: 1028 px içerikte 4 × 245 px + 3 × 16 px.
   Otomatik sığdırma (auto-fit) geniş ekranda kartları gereksizce şişiriyordu. */
.price-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }

/* Tek eş aralıklı yazı tipi yalnız custom plandaki hesap satırında
   (".cust-meta": "≈2.150 yanıt/ay · $0,085 yanıt başına"). Kredi kartındaki
   fiyat, standardın büyük sayı kuralına uyup Gilroy'a döndü. */
.credit-card .cc-price { font-family: var(--font-head); font-weight: 800; }

/* ---- Hukuk sayfası ---- */
/* Beyaz kart yerine kabın içinde sola yaslı bir metin sütunu; fiyat sayfasıyla
   aynı başlık ve sekme dili. Ölçüler eski .legal-card ile aynı. */
.legal-body { max-width: 780px; margin-top: 18px; }
.legal-body h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.legal-body p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 4px; }
.legal-body .legal-list { margin: 4px 0 4px 18px; padding: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.legal-body .legal-list li { margin-bottom: 4px; }

/* what changed (agent A2) =============================================
   Görünürlük sekmesinin "Ne değişti" bölümü ürünün geri kalanıyla aynı dile
   alındı: tek bir kutu yerine .sec-head + .card blokları, üçgen işaretler
   yerine yuvarlak simgeli iki sütunlu cümle listesi, eş aralıklı rakamlar
   yerine Gilroy, satır sonlarında tek genişlikte .badge delta rozetleri.

   Aşağıdaki üç kural eski kuralı ezer (aynı sınıf, daha sonra geldiği için):
     .chg-panel  -> artık kart değil, bölüm kabı
     .chg-card   -> artık .card ile birlikte kullanılıyor (beyaz zemin)
     .chg-grid   -> yalnız üst boşluk ekleniyor
   ===================================================================== */

/* Bölüm kabı: kendi çerçevesi yok, içindeki kartlar zaten çerçeveli. */
.chg-panel {
  background: transparent; border: 0; border-radius: 0;
  padding: 0; margin: 4px 0 30px;
}

/* ---- Öne çıkanlar: iki sütun, yuvarlak simge + cümle ---- */
.chg-insights {
  padding: 18px 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px; row-gap: 12px;
}
.chg-ins { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.chg-ins .ins-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg); color: var(--ink-4);
}
.chg-ins.up .ins-mark { background: rgba(26, 143, 90, .12); color: var(--green); }
.chg-ins.down .ins-mark { background: var(--pink-100); color: var(--accent); }
.chg-ins .ins-t { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); min-width: 0; }
@media (max-width: 900px) { .chg-insights { grid-template-columns: 1fr; } }

/* ---- Üç hareket kartı: motor, rakip, konu ---- */
.chg-grid { margin-top: 16px; }
.chg-card { background: var(--panel); padding: 18px 20px; }
/* Kart başlığı bir ipucu taşımıyor: kesik pembe alt çizgi ve yardım imleci yok. */
.chg-card .chg-ch, .chg-qcard .chg-ch {
  display: block; border-bottom: 0; padding-bottom: 0; cursor: default;
  color: var(--ink-3); font-size: 12.5px; font-weight: 600; margin-bottom: 6px;
}

.chg-mv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px; min-height: 38px;
  border-top: 1px solid var(--border-soft);
}
.chg-mv.cite { grid-template-columns: minmax(0, 1fr) auto; }
.chg-rows > .chg-mv:first-child { border-top: 0; }
.chg-mv .mv-nm {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); min-width: 0;
}
.chg-mv .mv-nm img, .chg-mv .mv-nm svg, .chg-mv .mv-nm .avatar { flex: none; }
/* M-31: uzun marka/konu adı taşmasın, üç noktayla kesilsin. */
.chg-mv .mv-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chg-mv .mv-ba {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
}
.chg-mv .mv-was { color: var(--ink-4); }
.chg-mv .mv-now { color: var(--ink); }
.chg-mv .mv-arw { color: var(--ink-4); display: flex; }
/* Delta rozetleri aynı genişlikte: göz tek sütunda aşağı iner. */
.chg-mv .badge.mv-d {
  min-width: 56px; text-align: center; padding: 3px 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
}
.badge.mv-d.up { background: rgba(26, 143, 90, .12); color: var(--green); }
.badge.mv-d.down { background: var(--pink-100); color: var(--accent); }
.badge.mv-d.flat { background: var(--chip-bg); color: var(--ink-4); }

/* ---- Yan yana iki liste: sorular ve kaynaklar ---- */
.chg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.chg-qcard { padding: 18px 20px; }
.chg-qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.chg-qhead .chg-ch { margin-bottom: 0; flex: 1; min-width: 0; }
.chg-qhead .badge.chg-cnt {
  flex: none; min-width: 24px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; padding: 3px 7px;
}
.chg-qcard.lost .badge.chg-cnt { background: var(--pink-100); color: var(--accent); }
.chg-qcard.won .badge.chg-cnt { background: rgba(26, 143, 90, .12); color: var(--green); }

/* Soru satırı: sol kenar çizgisi yok, satırlar arasında ince ayırıcı var. */
.chg-q {
  display: block; cursor: pointer; border-radius: 8px;
  margin: 0 -10px; padding: 9px 10px;
}
.chg-q + .chg-q { border-top: 1px solid var(--border-soft); }
.chg-q:hover { background: var(--hover, #fbfcfd); }
.chg-q .q { display: block; font-size: 13px; line-height: 1.45; color: var(--ink); }
.chg-q .m { display: block; font-size: 12px; color: var(--ink-4); margin-top: 3px; }

/* Kart içindeki boş durum: kartın kendi çerçevesi yeter. */
.chg-card .state-card, .chg-qcard .state-card, .chg-panel > .state-card {
  border: 0; background: transparent; padding: 18px 0;
}
.chg-panel > .state-card { padding: 26px 0; }

@media (max-width: 900px) { .chg-duo { grid-template-columns: 1fr; } }

body.dark .chg-ins.up .ins-mark,
body.dark .badge.mv-d.up,
body.dark .chg-qcard.won .badge.chg-cnt { background: rgba(26, 143, 90, .22); color: #4ec98d; }
body.dark .chg-ins.down .ins-mark,
body.dark .badge.mv-d.down,
body.dark .chg-qcard.lost .badge.chg-cnt { color: #ff8aae; }
/* M-84'ün karşılığı: çok dar ekranda "indirim" rozeti seçiciyi kenara dayıyor.
   Eski kural .bill-toggle'a bakıyordu, seçici .seg-tabs olunca boşta kaldı. */
@media (max-width: 400px) { .pr-bill .save { display: none; } }

/* hiza ve genişlik (agent B2) =========================================

   Üç şikayet, tek kök: sayfa başlığı ekranlar arasında aynı yerde
   başlamıyordu ve form ağırlıklı ekranlar ana sütunun yarısında kalıyordu.

   1. Marka satırı (favicon + "Godiva") başlığın üstünden kaldırıldı; artık
      pageHeadHTML'e {brand: ...} verilmiyor (pages.js, bots.js,
      brand-settings.js). Üst çubuk markayı zaten gösteriyor.
   2. Brand Settings ve Hesap kendi max-width'lerini taşıyordu; ikisi de
      tam genişliğe açıldı ve Hesap kartları üç sütuna dizildi.
   3. Başlık eylemleri (düğme + arama kutusu) tek yükseklikte (34 px).
   ===================================================================== */

/* Hiçbir ekran kendi genişliğini kısmaz: içerik ana sütunun tamamını kullanır
   (docs/tasarim-standardi.md §1). */
.bs-page, .acc-page { max-width: none; }

/* Hesap: üç kart yan yana, etkinlik kaydı (.audit-card) tam satır (o kural
   yukarıda zaten var). 1180 px altında iki, 820 px altında tek sütun. */
.acc-cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;   /* the cards are as tall as the tallest, so their edges line up */
}
@media (max-width: 1180px) { .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .acc-cards { grid-template-columns: minmax(0, 1fr); } }

/* Hesap ekranı üst çubuksuz çiziliyor (marka bağlamı yok, kenar çubuğunda
   "Zeo Radar" yazıyor). Başlık, üst çubuklu ekranlardakiyle aynı yükseklikte
   başlasın diye çubuğun kapladığı yer kadar üst boşluk bırakılır:
   16 px üst iç boşluk + ~32 px düğme yüksekliği + 6 px sayfa boşluğu. */
/* Hesap ekranında marka üst çubuğu yok. Başlık yine de diğer ekranlarla aynı
   y'de başlasın diye üst boşluğu başlığın kabı taşıyor; .acc-page artık başlığı
   içermiyor, o yüzden boşluk oradan alındı. */
.acc-solo > .page-head { padding-top: 62px; }
/* Başlık altındaki boşluk da standarda döner: .page-head'in 6 px'i + kartların
   20 px'i = diğer ekranlardaki .section ile aynı 26 px. */
.acc-page .page-head { margin-bottom: 6px; }
.acc-page .acc-cards { margin-top: 20px; }

/* ana sayfa, sohbet, düğmeler (agent C2) =============================
   Ana sayfanın "Kartlar / Portföy" geçişi ve ayarlar dişlisi sayfa
   başlığının eylem alanına taşındı, Zeo AI'ın ikinci "Yeni sohbet"
   düğmesi kaldırıldı, başlık düğmeleri tek boya (34 px) getirildi.
   ==================================================================== */

/* ---- Başlık eylemleri tek boy ----
   Standart 34 px: düğme, arama kutusu, görünüm seçici ve segment seçici
   aynı yükseklikte dursun. Ölçüm sekmelerinin sağ ucundaki üç eylem de
   (Ayarlar, Yazdır, Dışa aktar) artık aynı ölçüyü kullanıyor. */
.page-head .actions .btn,
.page-head .actions .search-input,
.page-head .actions .seg-toggle,
.page-head .actions .seg-tabs,
.tabs .side-links .btn,
.kb-bar .search-input { min-height: 34px; box-sizing: border-box; }
.page-head .actions .seg-tabs { flex: none; }
/* Üç düğme arasındaki boşluk da başlık eylemleriyle aynı (8 px); eskiden
   aradaki "Ayarlar" çıplak bir bağlantı olduğu için 16 px'ti. */
.tabs .side-links { gap: 8px; }

/* Yalnız ikon taşıyan düğme: `.btn` görünümünde ama kare. */
.btn.btn-icon { padding: 7px; min-width: 34px; justify-content: center; gap: 0; }
.btn.btn-icon svg { width: 15px; height: 15px; }

/* ---- Ana sayfa başlığı ----
   Ayarlar menüsü kenar çubuğunda ve eski `.home-foot` kutusunda yukarı
   açılıyordu; sayfanın sağ üstünde aşağı ve sağa hizalı açılır. */
.page-head .actions .set-pop { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; }
/* Yazdırırken ekran denetimleri kâğıda çıkmasın (eski `.home-foot` gibi). */
@media print { .page-head .actions .home-gear { display: none !important; } }

/* Marka kartındaki üç sayı eş aralıklı yazı tipiyle yazılıyordu; tasarım
   standardına göre kart içindeki büyük sayı da Gilroy (`.big-num` zaten
   öyle). */
.asset-card .stat .v { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; }

/* Portföy görünümü artık ortak sayfa başlığının altında duruyor;
   portfolio.js'in kendi başlığı ikinci bir sayfa başlığı gibi değil, bölüm
   başlığı gibi okunsun. */
.home .pf-head h1 { font-size: 17px; font-weight: 700; }

/* ---- Zeo AI sohbet menüsü ----
   Sohbet geçmişi ve "yeni sohbet" tek menüde toplandı; satır listenin
   üstünde, arama kutusundan ince bir çizgiyle ayrılır. */
.cp-new {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 2px; padding: 9px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
}
.cp-new:hover { background: var(--pink-100); }
.cp-new svg { flex: none; }
body.dark .cp-new { color: #ff8aae; }
body.dark .cp-new:hover { background: rgba(204, 10, 77, .2); }

/* what changed (agent A2) - öne çıkanların okuma sırası
   İki sütunlu ızgara varsayılan olarak satır satır dolar; sol sütun 1-3-5,
   sağ sütun 2-4 olur ve göz zikzak çizer. Sütun sütun dolunca sol sütun
   1-2-3, sağ sütun 4-5 olur: yukarıdan aşağı okunur. */
.chg-insights { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
@media (max-width: 900px) { .chg-insights { grid-auto-flow: row; grid-template-rows: none; } }

/* what changed (agent A2) - yan yana kartlar içeriğine göre boylansın.
   Izgara ögeleri varsayılan olarak en uzun kartın boyuna geriliyor; bir
   listede tek soru varsa kartın üçte ikisi boş kalıyordu. */
.chg-duo { align-items: start; }

/* Bölüm başlığındaki araçlar tek boy. Platforms'ta indirme ikonu 30 px, iki
   açılır düğme 27 px'ti ve satır tırtıklı görünüyordu. Sayfa başlığındaki
   eylemler 34 px, bölüm başlığındakiler 30 px: ikisi de kendi içinde tek boy. */
.sec-head .sec-tools .btn,
.sec-head .sec-tools .icon-btn { height: 30px; }
.sec-head .sec-tools .btn { padding-top: 0; padding-bottom: 0; }

/* I: bos durum eylemleri
   Her boş durum kartı artık bir sonraki adımı taşıyor. Kart içinde duran
   (compact) durumlarda 20 px'lik üst boşluk kartı gereksiz büyütüyordu;
   değişim panelindeki üç küçük kartta daha da sıkı duruyor. */
.state-card.compact .actions { margin-top: 14px; }
.chg-card .state-card .actions,
.chg-qcard .state-card .actions { margin-top: 12px; }

/* C: komut paleti
   Mevcut modal dili: gri perde, beyaz yüzey, --shadow-pop, 12 px köşe.
   Yeni renk, yeni yazı tipi, yeni başlık sınıfı yok; grup başlıkları
   .metric-label, arama alanı .auth-input, seçili satır --chip-bg zemininde.
   Kendi katmanında durur (#zeoPaletteHolder), .overlay/.modal ile karışmaz:
   modal odak tuzağı ve body.modal-open gözlemcisi paletten etkilenmesin. */
body.cmdk-open { overflow: hidden; }

.cmdk-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(20, 21, 26, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 96px 20px 40px;
  overflow-y: auto; overscroll-behavior: contain;
}

.cmdk {
  width: 100%; max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.cmdk-top { padding: 10px; border-bottom: 1px solid var(--border-soft); }
/* .auth-input ölçüsü, tek satır olduğu için 40 px sabit yükseklikte. */
.cmdk-input { height: 40px; padding: 0 12px; }

.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px 6px 8px; }

.cmdk-group { padding: 9px 8px 3px; }
/* .metric-label normalde bir ipucu taşıdığını söyleyen kesik alt çizgiyle
   gelir; burada taşımıyor, o yüzden imleç ve çizgi sadeleşiyor. */
.cmdk-group .metric-label { border-bottom: 0; cursor: default; }

.cmdk-row {
  height: 36px; display: flex; align-items: center; gap: 10px;
  padding: 0 8px; border-radius: 8px; cursor: pointer;
}
.cmdk-row.sel { background: var(--chip-bg); }
.cmdk-label {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-sub {
  flex: 0 1 auto; max-width: 44%; font-size: 12px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cmdk-none { padding: 22px 10px; text-align: center; font-size: 13px; color: var(--ink-3); }

.cmdk-hint {
  padding: 8px 12px; border-top: 1px solid var(--border-soft);
  text-align: right; font-size: 11px; color: var(--ink-4);
}

@media (max-width: 640px) {
  .cmdk-overlay { padding: 56px 12px 24px; }
  .cmdk-list { max-height: 60vh; }
}

/* A: kayıtlı görünümler ve menüler */
/* Görünüm kaydetme kutusu: mevcut .fpop dili, tek satır ad + kaydet düğmesi. */
.fpop .vw-form { display: flex; gap: 8px; align-items: center; padding: 10px; }
.fpop .vw-name {
  flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; outline: none;
}
.fpop .vw-name:focus { border-color: var(--accent); }
/* Kayıtlı görünüm çipindeki silme yolu; .fchip .x zaten tanımlı, burada yalnız
   simgeyi tıklanabilir boyuta getiriyoruz. */
.fchip .x { display: inline-flex; align-items: center; cursor: pointer; }
.fchip .x svg { width: 10px; height: 10px; opacity: .8; }
/* Prompt Analizi tablosu: sütunlar gizlenebildiği için ızgara sütun sayısı
   .pa-table[data-cols] ile birlikte değişir (varsayılan beş sütun). */
.pa-table[data-cols="0"] .pa-hdr,
.pa-table[data-cols="0"] .pa-row-group > .pa-topic,
.pa-table[data-cols="0"] .pa-prompt { grid-template-columns: minmax(280px, 1fr); }
.pa-table[data-cols="1"] .pa-hdr,
.pa-table[data-cols="1"] .pa-row-group > .pa-topic,
.pa-table[data-cols="1"] .pa-prompt { grid-template-columns: minmax(280px, 2fr) repeat(1, minmax(110px, 1fr)); }
.pa-table[data-cols="2"] .pa-hdr,
.pa-table[data-cols="2"] .pa-row-group > .pa-topic,
.pa-table[data-cols="2"] .pa-prompt { grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(110px, 1fr)); }
.pa-table[data-cols="3"] .pa-hdr,
.pa-table[data-cols="3"] .pa-row-group > .pa-topic,
.pa-table[data-cols="3"] .pa-prompt { grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(110px, 1fr)); }
.pa-table[data-cols="4"] .pa-hdr,
.pa-table[data-cols="4"] .pa-row-group > .pa-topic,
.pa-table[data-cols="4"] .pa-prompt { grid-template-columns: minmax(280px, 2fr) repeat(4, minmax(110px, 1fr)); }

/* G: toplu islem ve yogunluk */
/* Satir yuksekligi bir kademe duser (rahat ~40 px, sikisik ~32 px). Yazi
   boyutu degismez: okunabilirlik yogunluk icin feda edilmez. Sinif ya
   tablonun kendisinde (Sayfalar) ya da kok ogede (radar.js'in cizdigi
   tablolar, ornegin Promptlar) durur; ikisi de ayni olcuye bakar. */
.tbl.compact th, html.tbl-compact .tbl th { padding-top: 6px; padding-bottom: 6px; }
.tbl.compact td, html.tbl-compact .tbl td { padding-top: 7px; padding-bottom: 7px; }

/* Secim kutusu: bos, kismi ve dolu. Yeni renk yok, mevcut vurgu rengi. */
.pages-table .cbx { cursor: pointer; }
.pages-table .cbx.on { background: var(--accent); border-color: var(--accent); }
.pages-table .cbx.some { background: var(--pink-200); border-color: var(--accent); }
.pages-table tr.sel td { background: var(--pink-100); }

/* Eylem cubugu .filterbar'in kendisidir; burada yalnizca ic hizalama ve
   dugmelerin cip yuksekligine (31 px) oturmasi var. */
.selbar .selcount { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.selbar .btn.small { padding: 6px 11px; }

/* D: Zeo AI bağlam paneli */
/* Sağdan açılan panel: tam yükseklik, 380 px, `.card` yüzeyi ve --shadow-pop.
   Yeni renk, yeni yazı tipi ve yeni başlık sınıfı yok; başlık `.sec-head`. */
.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 80;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
.ai-panel .aip-head {
  margin-bottom: 0; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.ai-panel .aip-head h2 { font-size: 17px; }
.ai-panel .aip-ctx { margin-top: 2px; }
.ai-panel .sec-tools .btn { padding-left: 9px; padding-right: 9px; }
.ai-panel-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 4px;
}
.ai-panel-foot { padding: 0 16px 14px; }
.ai-panel .aip-note { color: var(--ink-3); font-size: 13px; margin-bottom: 12px; }
.ai-panel .chat-thread { max-width: none; margin: 0; padding: 0 0 6px; gap: 16px; }
.ai-panel .chat-composer { max-width: none; margin: 10px 0 0; position: static; }
.ai-panel .chat-follow { margin-top: 4px; }
/* Panel açıkken üst çubuktaki düğme açık görünsün (mevcut vurgular). */
.topbar .btn.on { background: var(--pink-100); color: var(--accent); border-color: var(--accent); }
/* Ana içerik daralır, böylece panel hiçbir sayıyı örtmez. */
body.ai-panel-open .main { padding-right: 380px; }

/* 1180 px altında panel tam ekran modala düşer: dar ekranda 380 px'lik bir
   sütun ana içeriğe okunmaz bir şerit bırakıyordu. */
@media (max-width: 1180px) {
  body.ai-panel-open .main { padding-right: 0; }
  .ai-panel { left: 0; width: auto; border-left: 0; z-index: 95; }
}

/* E: Bugun ekrani
   Uc blok, hepsi mevcut yuzeyleri kullanir: .card govde, .sec-head baslik,
   .opp-q soru satiri, .chg-ins icgoru satiri. Yeni renk, yeni yazi tipi ve
   yeni baslik sinifi yok; burada yalnizca is satirinin ritmi tanimlanir. */
.today-page .section { margin-bottom: 26px; }
.today-page .section:last-child { margin-bottom: 8px; }

/* Öne çıkan üç cümle: "Ne değişti" panelindeki satırın tek sütunlu hâli. */
.today-ins { padding: 18px 20px; display: grid; row-gap: 12px; }

/* Üç iş: tek satır, solda tür rozeti, sağda skor. Skor Gilroy ile yazılır;
   tasarım standardı §3, eş aralıklı yazı tipi yalnız tablo hücresi içindir. */
.today-jobs { padding: 6px 8px; }
.today-job {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.today-job + .today-job { border-top: 1px solid var(--border-soft); border-radius: 0; }
.today-job:hover { background: var(--chip-bg); }
.today-job .tj-t { font-size: 13.5px; color: var(--ink); }
.today-job .tj-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-job .tj-s { font-family: var(--font-head); font-weight: 700; font-size: 15px; white-space: nowrap; }
.today-job .tj-s .dim { font-size: 10px; font-weight: 400; }
.today-job .tj-s.dim { font-size: 12px; font-weight: 400; }

/* Kazanılabilecek sorular: Fırsatlar ekranındaki satırın aynısı. */
.today-win { padding: 12px 12px 6px; }
.today-win .opp-q:last-child { margin-bottom: 6px; }

/* "Hepsini gör": kartın altında, sola yaslı tek düğme. */
.today-more { margin-top: 10px; }

@media (max-width: 700px) {
  .today-job { flex-wrap: wrap; }
  .today-job .tj-m { flex-basis: 100%; }
}

/* F: karsilastirma modu
   "Ne degisti" panelinin satiri (.chg-mv + .badge.mv-d) burada "siz -> rakip"
   okunur, bu yuzden yeni bir gorsel dil tanimlanmaz: yalniz buyuk sayinin
   altindaki ikili satirin yerlesimi ve cipteki kapatma yolu. */
.cmp-under { margin-top: 8px; }
.cmp-under .chg-mv { border-top: 0; min-height: 30px; gap: 10px; }
.cmp-under .chg-mv .mv-t { font-weight: 600; color: var(--ink-3); }
/* Cipteki carpi, kayitli gorunum cipindekiyle ayni yol. */
.fchip.cmp-chip.on .x { color: var(--accent); }
.cmp-grid { margin-top: 0; }

/* H: son ziyaretten beri
   Ust cubuktaki rozet mevcut .btn olcusunu (34 px) kullanir; burada yalniz
   acilir listenin kendi ritmi var. Liste .fpop, satirlar .chg-ins ve .chg-mv:
   ikisi de "Ne degisti" panelinden gelir. */
.topbar .nr-btn { position: relative; }
.nr-pop .nr-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.nr-run { padding: 10px 10px 12px; border-radius: 8px; }
.nr-run + .nr-run { border-top: 1px solid var(--border-soft); border-radius: 0; }
.nr-when { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.nr-when .nr-date { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.nr-ins { display: grid; row-gap: 8px; }
.nr-run .chg-rows .chg-mv { min-height: 30px; }
.nr-pop .foot { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   İçerik ekranı: sıralı iş listesi (26 Ağu 2026 yeniden tasarımı)

   Eskisi 340 px'lik kartlardan iki sütunlu bir ızgaraydı ve üç şeyi birden
   yanlış yapıyordu. Ölçüldü: iş listesine varmadan önce yedi sayı kutusu ve
   dokuz filtre çipi vardı, yani ilk ekran baştan sona muhasebeydi. Kartlar iki
   sütuna dizildiği için göz soldan sağa okuyor ve sıra bozuluyordu; oysa liste
   `priority` ile sıralı geliyor ve sayfanın kendi alt başlığı "sıralanır"
   diyor. Üstüncüsü: o öncelik ekranda hiç görünmüyordu. Godiva'da değerler
   7,36 ile 0,99 arasında, yani yedi kat fark, ve altı iş de aynı ağırlıkta
   duruyordu.

   Yenisi tek sütun, sıra numarası ve genişliği önceliğe oranlı bir etki
   çubuğu taşır. Satır tıklanınca açılır: ayrıntı ve ikincil eylemler orada.
   Böylece ekranda aynı anda altı değil bir birincil eylem olur.
   ============================================================ */

.wl { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }

.wl-row {
  display: grid;
  grid-template-columns: 34px 92px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: #fff;
  cursor: pointer;
}
.wl-row:first-child { border-radius: 12px 12px 0 0; }
.wl-row.last { border-bottom: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.wl-row:only-child { border-radius: 12px; border-bottom: 1px solid var(--border); }
.wl-row:hover { background: var(--chip-bg); }
.wl-row.open { background: var(--chip-bg); }
.wl-row.closed { opacity: .5; }

/* Sıra numarası. Listenin sıralı olduğunu söyleyen tek şey bu, o yüzden
   soluk değil: okunur ama başlıkla yarışmaz. */
.wl-rank {
  font-family: var(--font-head); font-weight: 800; font-size: 15px;
  color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums;
}

/* Etki çubuğu. Genişlik listenin en yükseğine oranlı, yani "birinci ikinciden
   ne kadar önemli" sorusunun cevabı burada. Renk işin türünden gelir. */
.wl-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.wl-bar > i { display: block; height: 100%; border-radius: 3px; }
.wl-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 5px; display: block; }

.wl-main { min-width: 0; }
.wl-topic {
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-why { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.wl-why b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wl-why .sep { color: var(--ink-4); margin: 0 7px; }

.wl-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wl-score { font-family: var(--font-head); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.wl-score i { font-style: normal; font-size: 10px; font-weight: 400; color: var(--ink-4); }
.wl-caret { color: var(--ink-4); display: flex; transition: transform .12s ease; }
.wl-row.open .wl-caret { transform: rotate(180deg); }

/* Açılan ayrıntı. İkincil eylemlerin tamamı burada durur, çünkü kapalıyken
   ekranda satır başına bir tane bile düğme olmaması gerekiyor. */
.wl-detail {
  border: 1px solid var(--border); border-top: 0; border-bottom: 0;
  background: var(--pink); padding: 16px 14px 18px 62px;
}
.wl-detail.last { border-bottom: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.wl-detail .lbl { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.wl-detail .row { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.wl-detail .row a { color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-detail .row a:hover { color: var(--accent); text-decoration: underline; }
.wl-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Üstteki tek karar satırı. Yedi sayı kutusunun yerine geçer: ne yapılacağını
   söyler, saymaz. */
.wl-focus {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 16px 18px; margin-bottom: 16px;
}
.wl-focus .big { font-family: var(--font-head); font-weight: 800; font-size: 27px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.wl-focus .txt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.wl-focus .txt b { font-weight: 700; color: var(--ink); }
.wl-focus .sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }

/* Kredi satırı. Bütçedir, manşet değil: ekranın en sessiz satırı. */
.wl-budget { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-4); margin: 0 0 14px; }
.wl-budget b { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wl-budget .warn { color: var(--bad); }

@media (max-width: 720px) {
  .wl-row { grid-template-columns: 26px 1fr auto; gap: 10px; }
  .wl-row > .wl-barwrap { display: none; }
  .wl-detail { padding-left: 18px; }
}

/* ============================================================
   Görevler (assets/tasks.js)

   İş listesinin satırını (.wl-row) olduğu gibi kullanır. Buradakiler yalnız
   Görevler ekranının getirdiği parçalar: üç etiket, sıralamaya girmeyen erişim
   kartı, açılan ayrıntının iki sütunu ve sonucun aralıkla çizimi.
   Referans çizim: docs/mockups/gorevler-ekrani.html
   ============================================================ */

/* Tür etiketi iki kelime ("SİTE DIŞI · PAZARYERİ"), o yüzden sütun iş
   listesindekinden geniş. Ayrıntı da aynı hizadan başlar. */
.wl-row.tk-row { grid-template-columns: 34px 150px 1fr auto; background: var(--panel); }
.wl-row.tk-row:hover, .wl-row.tk-row.open { background: var(--chip-bg); }
.tk-detail-wrap { padding-left: 212px; }
/* Bugün ekranındaki görev satırında etiketler sağa yaslanır. */
.today-job .spacer { flex: 1; }
/* Standart 11 px'in altına inmez (docs/tasarim-standardi.md §4). İş listesinin
   tür etiketi ve rozet 10,5 px; burada ikisi de 11. */
.tk-row .wl-kind { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-job .kind-badge { font-size: 11px; }
/* Ortak bileşenlerin en soluk metin rengi (--ink-4) beyaz zeminde 2:1 kontrast
   veriyor ve okunması için 4,5:1 gerekiyor. O karar bekliyor; bu ekranda
   beklemiyoruz, çünkü sıra numarası ve payda burada süs değil bilgidir. */
.tk-page .kpi .of, .tk-page .kpi .kpi-sub, .tk-row .wl-rank, .tk-row .wl-why .sep,
.tk-row .wl-caret, .tk-gate .wl-caret { color: var(--ink-3); }

/* Özet satırı */
.tk-sum { grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: 16px; }
.tk-prog { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 8px; }
.tk-prog > i { display: block; height: 100%; background: var(--green); border-radius: 3px; }

/* Üç etiket: etki, emek, kanıt */
.tk-tags { display: flex; gap: 6px; align-items: center; }
.tk-tag {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--chip-bg); color: var(--ink-3); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.tk-tag .k { color: var(--ink-3); font-weight: 500; }
.tk-tag.warn { background: rgba(245, 158, 11, .14); color: #92400e; }
body.dark .tk-tag.warn { color: #fbbf24; }
.tk-tag.hi { background: var(--pink-100); color: var(--accent); }
.tk-tag.ok { background: rgba(26, 143, 90, .12); color: var(--green); }
.tk-dots { display: inline-flex; gap: 2px; }
.tk-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; }
.tk-dots i.on { opacity: 1; }

/* Önündeki erişim sorunu çözülmeden başlanmayan görev */
.wl-row.blocked .wl-topic, .wl-row.blocked .wl-why { opacity: .6; }
.tk-wait {
  font-size: 11px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  color: #b45309; background: rgba(245, 158, 11, .14);
}
.tk-blocked, .tk-unchanged { margin: 0 0 14px; }
.tk-unchanged { margin: 10px 0 0; }

/* Erişim kartı: sıra numarası ve etki çubuğu taşımaz */
.tk-gate { border: 1px solid var(--pink-200); background: var(--bg-side); border-radius: 12px; }
.tk-gate + .tk-gate { margin-top: 8px; }
.tk-gate-head { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.tk-gate .gi {
  width: 32px; height: 32px; border-radius: 9px; background: var(--pink-100); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tk-gate .gm { flex: 1; min-width: 0; }
.tk-gate .gt { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.tk-gate .gw { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.tk-gate .gb { display: flex; gap: 10px; flex: none; align-items: center; }
.tk-gate.open .wl-caret { transform: rotate(180deg); }
.tk-gate-body { padding: 2px 16px 16px 62px; }

/* Açılan ayrıntı */
.tk-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.tk-detail .col { min-width: 0; }
.tk-detail .lbl { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.tk-detail .col > .lbl + * { margin-top: 8px; }
.tk-detail .col > .lbl:not(:first-child) { margin-top: 18px; }
.tk-why { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.tk-ev { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.tk-ev.mt10 { margin-top: 10px; }
.tk-ev .er { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.tk-ev .er + .er { border-top: 1px solid var(--border-soft); }
.tk-ev .er.link { cursor: pointer; }
.tk-ev .er.link:hover { background: var(--chip-bg); }
.tk-ev .er .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); text-decoration: none; }
.tk-ev .er .q.wrap { white-space: normal; line-height: 1.45; }
.tk-ev .er a.q:hover { color: var(--accent); text-decoration: underline; }
.tk-ev .er .m { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.tk-ev .er svg { flex: none; color: var(--ink-3); }
.tk-hist {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.tk-hist b { color: var(--ink-2); }
.tk-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.tk-steps li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); padding: 5px 0; line-height: 1.45; }
.tk-steps li[data-action] { cursor: pointer; }
.tk-steps .cb {
  width: 15px; height: 15px; border: 1.5px solid var(--ink-4); border-radius: 4px; flex: none; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; color: var(--on-accent);
}
.tk-steps li.on .cb { background: var(--green); border-color: var(--green); }
.tk-steps li.on > span:last-child { color: var(--ink-3); text-decoration: line-through; }
.tk-detail-wrap .wl-acts .spacer, .tk-gate-body .wl-acts .spacer { flex: 1; }
.tk-dismiss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tk-dismiss-note { flex-basis: 100%; }
.tk-more { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); }

/* Sonuçlar: aralıkla gösterim */
.tk-results { padding: 0; }
.tk-res { display: grid; grid-template-columns: 1fr 250px 150px; gap: 18px; align-items: center; padding: 14px 16px; }
.tk-res + .tk-res { border-top: 1px solid var(--border-soft); }
.tk-res .rt { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.tk-res .rm { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.tk-range { position: relative; height: 26px; margin-top: 8px; }
.tk-range .ax { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--border); }
.tk-range .zero { position: absolute; left: 50%; top: 5px; width: 1px; height: 16px; background: var(--ink-4); }
.tk-range .band { position: absolute; top: 9px; height: 8px; border-radius: 4px; opacity: .35; }
.tk-range .pt { position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--panel); }
.tk-range .lab { position: absolute; top: -11px; font-size: 11px; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
.tk-range.plain { height: auto; display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-3); }
.tk-range.plain b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tk-verdict { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-align: center; white-space: nowrap; justify-self: end; }
.tk-verdict.up { background: rgba(26, 143, 90, .12); color: var(--green); }
.tk-verdict.down { background: var(--pink-100); color: var(--accent); }
.tk-verdict.flat, .tk-verdict.wait { background: var(--chip-bg); color: var(--ink-3); }
.tk-learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tk-learn .card { padding: 14px 16px; }
.tk-learn .lt { font-size: 12px; color: var(--ink-3); }
.tk-learn .lv { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--ink); margin-top: 4px; }
.tk-learn .ls { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

@media (max-width: 980px) {
  .tk-sum { grid-template-columns: 1fr 1fr; }
  .tk-detail { grid-template-columns: 1fr; gap: 0; }
  .tk-detail .col + .col { margin-top: 18px; }
  .tk-detail-wrap { padding-left: 14px; }
  .tk-gate-body { padding-left: 16px; }
  .tk-gate-head { flex-wrap: wrap; }
  .tk-gate .gm { flex-basis: calc(100% - 46px); }
  .tk-gate .gb { margin-left: 46px; }
  .tk-res { grid-template-columns: 1fr; gap: 6px; }
  .tk-verdict { justify-self: start; }
  .tk-learn { grid-template-columns: 1fr; }
  .wl-row.tk-row { grid-template-columns: 26px 1fr; }
  .wl-row.tk-row .wl-barwrap, .wl-row.tk-row .wl-right { grid-column: 2; }
  .wl-row.tk-row .wl-right { flex-wrap: wrap; }
}

/* ============================================================
   Görev panosu (assets/tasks-board.js)

   Beş sütun, sürüklenebilir kartlar ve sağdan açılan ayrıntı paneli.
   Referans çizim: docs/mockups/tasks-board.html. Renkler ve yazı ölçüleri
   standarttan (docs/tasarim-standardi.md); 11 px'in altına inilmez ve en
   soluk metin --ink-3'tür, çünkü kartın her satırı bilgi taşır.
   ============================================================ */

.tkb-page { padding-left: 0; padding-right: 0; }
.tkb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 26px 0; }
.tk-page:not(.tkb-page) .tkb-tools { padding: 10px 0 0; }
.tkb-tools .spacer { flex: 1; }
.tkb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); }
.tkb-seg button {
  border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center;
}
.tkb-seg button + button { border-left: 1px solid var(--border-soft); }
.tkb-seg button.on { background: var(--chip-bg); color: var(--ink); font-weight: 600; }
.tkb-seg button svg { width: 13px; height: 13px; }
.tkb-seg .kdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tkb-seg .n { color: var(--ink-3); font-weight: 500; }
.tkb-search {
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13px;
  width: 230px; background: var(--panel); color: var(--ink);
}

.tkb-board {
  display: grid; grid-template-columns: minmax(300px, 1.25fr) repeat(4, minmax(240px, 1fr));
  gap: 12px; padding: 14px 26px 18px; align-items: start; overflow-x: auto;
}
.tkb-col {
  background: var(--chip-bg); border: 1px solid var(--border-soft); border-radius: 12px; min-height: 360px;
  display: flex; flex-direction: column; transition: background .12s ease, border-color .12s ease;
}
.tkb-col.drop { background: var(--bg-side); border-color: var(--pink-200); }
.tkb-col-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px 6px; }
.tkb-col-head h3 { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; }
.tkb-col-head .spacer { flex: 1; }
.tkb-n {
  font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--panel);
  border: 1px solid var(--border); border-radius: 99px; padding: 0 7px;
}
.tkb-wip { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tkb-wip.over { color: #92400e; background: rgba(245, 158, 11, .16); border-radius: 99px; padding: 1px 8px; }
body.dark .tkb-wip.over { color: #fbbf24; }
.tkb-col-sub { font-size: 12px; color: var(--ink-3); padding: 0 12px 8px; line-height: 1.45; }
.tkb-col-body { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.tkb-grp { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 4px 4px 0; }
.tkb-empty {
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 18px 12px; text-align: center;
  color: var(--ink-3); font-size: 12.5px;
}
.tkb-more, .tkb-link {
  border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 4px; cursor: pointer; text-align: left;
}
.tkb-more:hover, .tkb-link:hover { color: var(--accent); }
.tkb-link { padding: 0; text-decoration: underline; }
.tkb-archive { padding: 0 26px 40px; font-size: 12.5px; color: var(--ink-3); }

.tkb-card {
  --fam: var(--ink-3);
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 11px 10px 14px; cursor: pointer; text-align: left;
}
.tkb-card[draggable] { cursor: grab; }
.tkb-card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--fam);
}
.tkb-card:hover { border-color: var(--pink-200); }
.tkb-card.sel { border-color: var(--accent); }
.tkb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tkb-card.dragging { opacity: .45; }
.tkb-card.gate { background: var(--bg-side); border-color: var(--pink-200); }
.tkb-kind {
  display: flex; align-items: center; gap: 6px; color: var(--fam);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tkb-kind > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkb-menu-btn {
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 2px; border-radius: 6px;
  display: inline-flex; flex: none;
}
.tkb-menu-btn:hover, .tkb-menu-btn:focus-visible { background: var(--chip-bg); color: var(--ink); }
.tkb-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 5px; line-height: 1.3; }
.tkb-why { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.tkb-why b { color: var(--ink-2); }
.tkb-why .sep { margin: 0 5px; }
.tkb-foot { margin-top: 9px; }
.tkb-foot .tk-tags { flex-wrap: wrap; gap: 5px; }
/* On a card the time and the dots say what they are; the words "Effort" and
   "Evidence" stay in the panel and in the tooltip. Impact keeps its word,
   because "High" alone could be read as anything. */
.tkb-foot .tk-tag:not(.tk-tag-impact) .k { display: none; }
.tkb-prog { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-top: 9px; }
.tkb-prog > i { display: block; height: 100%; background: var(--green); }
.tkb-note { font-size: 12px; color: var(--ink-3); margin-top: 7px; }
.tkb-range .tk-range { margin-top: 12px; }

.tkb-menu {
  position: absolute; z-index: 30; right: 8px; top: 32px; min-width: 200px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 6px; cursor: default;
}
.tkb-panel-foot .tkb-menu { top: auto; bottom: 52px; right: auto; left: 22px; }
.tkb-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2);
}
.tkb-menu button:hover, .tkb-menu button:focus-visible { background: var(--chip-bg); outline: none; color: var(--ink); }
.tkb-menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 4px 0; }

.tkb-scrim { position: fixed; inset: 0; background: rgba(1, 37, 53, .18); z-index: 80; }
.tkb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100vw); z-index: 81;
  background: var(--panel); box-shadow: var(--shadow-pop); display: flex; flex-direction: column;
}
.tkb-panel-head { padding: 16px 22px 12px; border-bottom: 1px solid var(--border-soft); }
.tkb-panel-row { display: flex; align-items: center; gap: 10px; }
.tkb-panel-row .spacer { flex: 1; }
.tkb-panel-row .tkb-kind { flex: 1; min-width: 0; }
.tkb-stage { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--chip-bg); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.tkb-panel-head h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--ink);
  margin: 8px 0 0; line-height: 1.3; outline: none;
}
.tkb-panel-body { padding: 16px 22px 24px; overflow-y: auto; flex: 1; }
.tkb-panel-body .lbl {
  display: block; font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px;
}
.tkb-panel-body .tk-ev + .tk-ev { margin-top: 10px; }
.tkb-panel-body .tk-res { padding: 0; grid-template-columns: 1fr; gap: 8px; }
.tkb-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tkb-meta .m { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.tkb-meta .k { font-size: 12px; color: var(--ink-3); }
.tkb-meta .v { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.tkb-panel-foot {
  position: relative; padding: 12px 22px; border-top: 1px solid var(--border-soft);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.tkb-panel-foot .spacer { flex: 1; }
.tkb-panel-foot .tk-dismiss { margin-top: 0; }

@media (max-width: 1180px) { .tkb-board { grid-template-columns: repeat(5, 270px); } }
@media (max-width: 720px) {
  .tkb-tools { padding-left: 16px; padding-right: 16px; }
  .tkb-search { width: 100%; }
  .tkb-board { padding-left: 16px; padding-right: 16px; grid-template-columns: repeat(5, 84vw); scroll-snap-type: x mandatory; }
  .tkb-col { scroll-snap-align: start; }
  .tkb-archive { padding-left: 16px; padding-right: 16px; }
}

/* Onboarding: the Zeo logo stays pinned to the top left, and the form is kept
   clear of it. */
.auth-left { position: relative; }
.auth-corner { position: absolute; top: 30px; left: 40px; height: 26px; }
.auth-wrap.has-corner .auth-left { padding-top: 84px; }
@media (max-width: 768px) { .auth-corner { left: 24px; top: 24px; } .auth-wrap.has-corner .auth-left { padding-top: 76px; } }
/* "There is no need to wait here": the notice on the setup screen. */
.onb-notice {
  margin: 4px 0 18px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--pink-100); border: 1px solid var(--pink-200); text-align: left;
}
.onb-notice strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.onb-notice p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.onb-notice p:last-child { margin-bottom: 0; }
/* The finished setup screen: the button fills the column like every other step. */
.auth-form .onb-splash.done .auth-btn { align-self: stretch; margin-top: 14px; }
/* The setup screens already carry the logo in the corner, so the big mark above
   the title goes, and the stage list lines up with everything else. */
.auth-form .onb-splash.done > img { display: none; }
.auth-form .onb-splash.done .onb-stages { margin-left: 0; margin-right: 0; max-width: none; }

/* Account page: the two language choices sit on the row, not under it. */
.acc-lang { margin: 0; gap: 8px; }

/* ---- Team (assets/team.js) ---- */
.tm-wrap { display: flex; flex-direction: column; gap: 18px; }   /* full width, like every other screen */
.tm-card { padding: 4px 0 8px; }
.tm-card .acc-card-head { padding: 18px 22px 8px; }
.tm-row {
  display: grid; grid-template-columns: minmax(200px, 2fr) 150px 130px 100px minmax(140px, 1fr); gap: 14px;
  align-items: center; padding: 12px 22px; border-top: 1px solid var(--border-soft);
}
.tm-headrow { font-size: 11.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; border-top: 0; padding-top: 4px; padding-bottom: 6px; }
.tm-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-who .avatar { flex: none; border-radius: 9px; }
.tm-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-mail { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-joined { font-size: 13px; color: var(--ink-3); }
.tm-actions { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.tm-act { margin-top: 0; }
.tm-role { padding: 7px 10px; font-size: 13px; width: 100%; }
.tm-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--ink-2); }
.tm-chip.admin { background: var(--pink-100); color: var(--accent-dark); }
.tm-chip.owner { background: var(--ink); color: var(--on-accent); }
.tm-empty, .tm-foot { padding: 14px 22px; font-size: 13px; color: var(--ink-3); }
.tm-notice { margin: 0; }
.tm-emails { min-height: 84px; resize: vertical; font-family: var(--font); }
.tm-roleopts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tm-roleopt {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.tm-roleopt span { font-size: 12.5px; color: var(--ink-3); }
.tm-roleopt:hover { border-color: var(--accent); }
.tm-roleopt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--pink-100); }
.tm-results { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tm-res { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tm-res.ok svg { color: #3f9e57; }
.tm-res.bad { color: var(--accent-dark); }
.plus-tile { width: 20px; height: 20px; border-radius: 5px; background: var(--chip-bg); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .tm-row { grid-template-columns: 1fr; gap: 6px; }
  .tm-headrow { display: none; }
  .tm-actions { justify-content: flex-start; }
}

/* Team: which projects (phase 3) */
.tm-chip.scope { background: var(--ink); color: var(--on-accent); }
.tm-access { font-size: 13px; }
.tm-scopeopts { display: flex; gap: 8px; margin-top: 6px; }
.tm-brands { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.tm-brand {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); font-size: 13.5px;
}
.tm-brand i { font-style: normal; color: var(--ink-4); font-size: 12px; }
.tm-brand .avatar { border-radius: 6px; flex: none; }
.tm-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.tm-brand.on { border-color: var(--ink); background: var(--pink-100); }
.tm-brand.on .tm-check { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }

/* Team: the line shown to somebody who can look but not change */
.role-banner { display: flex; align-items: center; gap: 8px; margin: 12px 24px 0; font-size: 13px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--ink-2); }
.role-banner svg { flex: none; color: var(--ink-3); }
.onb-trial-note { margin-top: 12px; }

/* ---- Topic prioritization matrix ----
   Built from the product's own parts: the 1 px hairline card, the .tbl table with
   its mono numbers, .badge, the brand red, the green and the navy ink, dashed
   chart grid, no shadows (docs/tasarim-standardi.md, sections 3 to 5). The sizes
   are the ones on the type scale. */
/* --c colours text and legend; --cd is the fill behind a white number, dark enough for 4.5:1 */
.pm-c-needs { --c: var(--accent); --cd: var(--accent); }
.pm-c-cite { --c: #a46907; --cd: #a46907; }          /* the amber of the avatar palette */
.pm-c-vis { --c: var(--ink); --cd: var(--ink); }
.pm-c-strong { --c: var(--green); --cd: #167a4d; }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; padding: 18px 20px 20px; align-items: start; }
.pm-svg { width: 100%; height: auto; display: block; }
.pm-q-needs { fill: var(--pink-100); opacity: .55; }
.pm-q-strong { fill: var(--green); opacity: .07; }
.pm-grid-l { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.pm-split { stroke: var(--border); stroke-width: 1.25; }
svg.pm-svg .pm-tick { font-size: 11px; fill: var(--ink-4); }   /* mono, like every other chart's ticks */
svg.pm-svg .pm-axis-t { font-size: 12px; font-weight: 500; fill: var(--ink-3); font-family: var(--font); }
svg.pm-svg .pm-qname { font-size: 12px; font-weight: 600; fill: var(--c); font-family: var(--font); opacity: .9; }
.pm-dot { fill: var(--cd); stroke: var(--panel); stroke-width: 2; }
svg.pm-svg .pm-num-t { font-size: 11px; font-weight: 800; fill: var(--on-accent); pointer-events: none; font-family: var(--font-head); }
.pm-real { fill: var(--c); opacity: .75; }
.pm-lead { stroke: var(--ink-4); stroke-width: 1; opacity: .6; }
.pm-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
.pm-tbl { font-size: 13.5px; }
.pm-tbl th { padding: 9px 10px; }
.pm-tbl td { padding: 10px; }
.pm-numcell { width: 36px; padding-right: 0; }
.pm-num { width: 22px; height: 22px; border-radius: 50%; background: var(--cd); color: var(--on-accent); font-family: var(--font-head); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.pm-topic { font-weight: 600; color: var(--ink); line-height: 1.35; }
.pm-topic .badge { margin-left: 6px; font-weight: 600; vertical-align: 1px; }
.pm-b-needs { background: var(--pink-100); color: var(--accent); }
.pm-b-cite { background: rgba(164, 105, 7, .12); color: #7f5205; }
.pm-b-vis { background: var(--chip-bg); color: var(--ink-2); }
.pm-b-strong { background: rgba(26, 143, 90, .12); color: #136b43; }
body.dark .pm-c-needs { --c: #ff8aae; }
body.dark .pm-c-cite { --c: #e0a73a; }
body.dark .pm-c-vis { --c: var(--ink-2); --cd: #3a5a73; }
body.dark .pm-c-strong { --c: #4cc58a; }
body.dark .pm-b-needs { color: #ff8aae; }
body.dark .pm-b-cite { color: #e0a73a; }
body.dark .pm-b-strong { color: #4cc58a; }
body.dark .pm-q-strong { opacity: .12; }
.pm-grid.pm-hover .pm-item:not(.hl), .pm-grid.pm-hover .pm-pt:not(.hl) { opacity: .35; }
.pm-item.hl td { background: var(--chip-bg); }
.pm-pt.hl .pm-dot { stroke: var(--ink); stroke-width: 2.5; }
@media (max-width: 1180px) { .pm-grid { grid-template-columns: 1fr; } }

/* ---- Prompt Volumes ---- */
.vol-kpis { margin: 0 0 22px; }
.vol-kpis .kpi-value { font-family: var(--font-head); font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.vol-kpis .kpi-sub { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vol-miss { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.vol-track { flex: 1; min-width: 80px; height: 8px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.vol-bar { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.vol-miss .num { min-width: 44px; text-align: right; }
.vol-ideas { padding: 16px 20px; }
.vol-ideas .tbl-scroll { margin: 0 -20px; }
.vol-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vol-chips { padding: 0; }
.vol-note { font-size: 13px; color: var(--ink-2); }
.vol-note.bad { color: var(--accent); }
.vol-asked { align-self: center; }

/* Home: brands that are being set up sit above the portfolio table. */
.home-pending { margin: 22px 0 26px; }
.home-pending-h { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.home-pending .home-grid { margin-top: 10px; }
body.dark .pf-d.up { color: var(--green); }

/* ---- AI access card (pages.js accessCardHTML) ----
   The card has no padding of its own in this product; its content sets it. The
   status is a badge and a sentence, the table runs edge to edge inside the card,
   and the button sits at the right end of the section head like every other. */
.axs-card { padding: 0; overflow: hidden; }
.axs-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px 0; }
.axs-status-t { font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.badge.axs-b { font-size: 12px; padding: 3px 8px; }
.badge.axs-b.bad { background: var(--pink-100); color: var(--accent); }
.badge.axs-b.ok { background: rgba(26, 143, 90, .12); color: #136b43; }
body.dark .badge.axs-b.ok { color: var(--green); }
.axs-verdict { padding: 12px 20px 14px; border-bottom: 1px solid var(--border-soft); }
.axs-tbl { margin: 0; }
.axs-tbl th:first-child, .axs-tbl td:first-child { padding-left: 20px; }
.axs-paths { max-width: 460px; overflow-wrap: anywhere; line-height: 1.5; }
.axs-foot { padding: 4px 20px 16px; }
.axs-foot .mt14 { margin-top: 10px; }

/* ---- Page detail of a page nobody cited yet (pages.js renderInventoryDetail) ---- */
.pd-card { padding: 4px 20px; margin-top: 16px; }
.pd-row { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.pd-row:last-child { border-bottom: 0; }
.pd-label { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 5px; }
.pd-value { font-size: 13.5px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.pd-note svg { flex: none; }
.m-sub.pd-url { overflow-wrap: anywhere; }

/* ---- Add traffic card (bots.js botsUploadHTML) ---- */
.bu-title { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--ink); }
.bu-text { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin-top: 6px; max-width: 720px; }
.bu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Brand Settings: the line that says where the questions are. */
.bs-qnote { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 14px 18px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }

/* The upgrade window (radar.js openUpgradeModal) and the controls that open it. */
.modal.upg { max-width: 460px; }
.modal.upg h2 { font-size: 19px; padding-right: 28px; }
.upg-text { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.upg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn.locked { color: var(--ink-3); }
.seg-tabs button.off { cursor: pointer; }

/* One sentence under the Tasks tabs: what the tab is. */
.tk-help { margin: 0; padding-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ---- The draft window (content.js draftModalHTML) ----
   A reading width, a padded text card with the unsourced figures marked where
   they stand, the schema folded away (it is for whoever edits the page), and
   one row of buttons of one height with the destructive one set apart. */
.modal.draftm { max-width: 860px; }
.modal.draftm h2 { font-size: 21px; margin-top: 8px; padding-right: 30px; }
.modal.draftm .m-kicker { display: flex; align-items: center; gap: 8px; }
.draft-body { padding: 22px 28px; max-width: none; }
.draft-body > :first-child { margin-top: 0; }
.draft-body > :last-child { margin-bottom: 0; }
.draft-body h1, .draft-body h2, .draft-body h3 { font-family: var(--font-head); font-weight: 800; color: var(--ink); line-height: 1.3; }
.draft-body h2 { padding-top: 16px; border-top: 1px solid var(--border-soft); }
.draft-body h2:first-of-type { border-top: 0; padding-top: 0; }
.modal.draftm .card > .opp-page { padding: 10px 18px; background: none; }
.modal.draftm .card > .opp-page + .opp-page { border-top: 1px solid var(--border-soft); }
mark.need-src { background: var(--pink-100); color: var(--accent); border-radius: 5px; padding: 1px 6px; font-weight: 600; font-size: .92em; }
.draft-schema { margin-top: 18px; padding: 0; }
.draft-schema summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; }
.draft-schema summary::-webkit-details-marker { display: none; }
.draft-schema summary .ds-t { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--ink); }
.draft-schema summary .ds-t::after { content: "  +"; color: var(--ink-4); font-weight: 600; }
.draft-schema[open] summary .ds-t::after { content: "  -"; }
.draft-schema summary .ds-s { font-size: 12.5px; color: var(--ink-3); }
.draft-schema .ds-body { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.draft-schema pre.jsonld { width: 100%; box-sizing: border-box; background: var(--chip-bg); border-radius: 10px; padding: 12px 14px; max-height: 240px; }
.draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.draft-actions .spacer { flex: 1; }
.btn.danger { color: var(--accent); }
.btn.danger:hover { background: var(--pink-100); border-color: var(--pink-200); }

/* Wizard in an empty space: the way out to the spaces that have projects. */
.onb-spaces { margin-top: 22px; text-align: left; }
.onb-spaces-l { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; line-height: 1.5; }
.onb-spaces .auth-chips { flex-wrap: wrap; }
.onb-home.onb-spaces span.auth-chip { text-decoration: none; color: var(--ink-2); }
.onb-home.onb-spaces span.auth-chip:hover { color: var(--ink); }