/* Nabız — arayüz stilleri
   Renk rolleri: mürekkep (lacivert) metin ve para kartları, safran marka vurgusu,
   yeşil/kırmızı yalnızca kâr/zarar anlamında, kategorik seriler yalnızca platform/seri kimliğinde. */

/* Yazı tipleri (kendi sunucumuzdan, SIL Open Font License 1.1 — web/fonts/LICENSE-*.txt):
   Geist: metin ve rakamlar (değişken ağırlık 100–900). Bricolage Grotesque: başlıklar ve büyük rakamlar (200–800). */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2-variations'), url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2-variations'), url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/bricolage-latin-ext.woff2) format('woff2-variations'), url(/fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/bricolage-latin.woff2) format('woff2-variations'), url(/fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eaeef4;
  --rule: #e3e8ef;
  --rule-strong: #ccd4df;
  --ink: #0f1b2d;
  --ink-2: #344256;
  --ink-3: #64748b;
  --ink-4: #98a3b5;
  --saffron: #f5a700;
  --saffron-soft: #fff4d6;
  --saffron-ink: #7a5300;

  /* Anlam renkleri: yeşil = kâr / iyi, kırmızı = zarar / kötü, amber = dikkat */
  --good: #16a34a;
  --good-ink: #15803d;
  --good-bg: #ecfdf3;
  --good-line: #a7e3bd;
  --bad: #dc2626;
  --bad-ink: #b91c1c;
  --bad-bg: #fef2f2;
  --bad-line: #f5b5b5;
  --warn: #f59e0b;
  --warn-ink: #92400e;
  --warn-bg: #fffbeb;
  --warn-line: #f6d58a;
  --info-ink: #1e4f91;
  --info-bg: #eef4fd;

  /* Kenar menü (koyu) */
  --nav-bg: #0f1b2d;
  --nav-ink: #c3cddd;
  --nav-ink-2: #8a97ad;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-active: rgba(255, 255, 255, 0.1);
  --nav-rule: rgba(255, 255, 255, 0.08);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --spark: #8592ab;
  --partner: #1baf7a;
  --owner: #3d4a66;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(15, 27, 45, 0.05), 0 1px 3px rgba(15, 27, 45, 0.04);
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-pop: 0 10px 30px rgba(22, 35, 63, 0.16), 0 2px 6px rgba(22, 35, 63, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
code { font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.block { display: block; }
.strong { font-weight: 600; }
.text-bad { color: var(--bad-ink) !important; }
.text-warn { color: var(--warn-ink); }
.text-good { color: var(--good-ink); }
.pad { padding: 16px 20px; }
.narrow { max-width: 880px; }
.icon { flex: none; }

/* ---------- İskelet ---------- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--nav-bg); color: var(--nav-ink);
  display: flex; flex-direction: column; padding: 18px 14px 12px;
}
.sidebar .brand-name { color: #fff; }
.sidebar .brand-mark { background: rgba(255, 255, 255, 0.08); }
.sidebar .brand-sub { color: var(--nav-ink-2); }
.sidebar .workspace { background: rgba(255, 255, 255, 0.05); border-color: var(--nav-rule); }
.sidebar .ws-btn { color: var(--nav-ink); }
.sidebar .ws-btn:hover { background: var(--nav-hover); }
.sidebar .ws-active, .sidebar .ws-active:hover { background: #fff; color: var(--ink); }
.sidebar .nav-item { color: var(--nav-ink); }
.sidebar .nav-item .icon { color: var(--nav-ink-2); }
.sidebar .nav-item:hover { background: var(--nav-hover); color: #fff; }
.sidebar .nav-active, .sidebar .nav-active:hover { background: var(--nav-active); color: #fff; }
.sidebar .nav-active .icon { color: var(--saffron); }
.sidebar .nav-sep { background: var(--nav-rule); }
.sidebar .nav-group-label { color: var(--nav-ink-2); }
.sidebar .nav-add { color: var(--nav-ink-2); }
.sidebar .avatar { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sidebar .portal-who { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--nav-rule); }
.sidebar .sidebar-foot { border-top-color: var(--nav-rule); }
.sidebar .me-name { color: #fff; }
.sidebar .me-name small { color: var(--nav-ink-2); }
.sidebar .icon-btn { color: var(--nav-ink-2); }
.sidebar .icon-btn:hover { background: var(--nav-hover); color: #fff; }
.sidebar .freshness { color: var(--nav-ink-2); }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--saffron); display: grid; place-items: center; }
.brand-name { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.brand-text { display: grid; line-height: 1.15; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 550; letter-spacing: 0.01em; }
.panel-kind { margin-left: auto; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; }
.freshness { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); padding: 10px 8px 0; }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); flex: none; }
.fresh-dot.is-bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 14px; }
.ws-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 7px; color: var(--ink-2); font-weight: 550; font-size: 13.5px; }
.ws-btn:hover { text-decoration: none; background: var(--surface); }
.ws-active { background: var(--ink); color: #fff; }
.ws-active:hover { background: var(--ink); }
.sidebar-nav { flex: 1; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500;
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav-item .icon { color: var(--ink-3); }
.nav-active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.nav-active::before { content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--saffron); }
.nav-active .icon { color: var(--ink); }
.nav-sep { height: 1px; background: var(--rule); margin: 12px 6px; }
.nav-group-label { font-size: 12px; color: var(--ink-3); padding: 14px 10px 6px; }
.nav-partner span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-dim { opacity: 0.6; }
.nav-add { color: var(--ink-3); }
.nav-badge { background: var(--warn-bg); color: var(--warn-ink); font-size: 11.5px; font-weight: 650; border-radius: 9px; padding: 0 7px; }
.nav-badge-info { background: var(--info-bg); color: var(--info-ink); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 650; flex: none; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; background: var(--ink); color: var(--saffron); }
.portal-who { display: grid; gap: 2px; padding: 12px; margin-bottom: 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.portal-label { font-size: 12px; color: #aab5cc; }
.portal-who strong { font-size: 16px; }
.portal-share { font-size: 12.5px; color: var(--saffron); }
.sidebar-foot { display: flex; align-items: center; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--rule); margin-top: 12px; }
.me { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-name { display: grid; font-weight: 550; font-size: 13px; min-width: 0; }
.me-name small { color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.mobilebar { display: none; }
.menu-backdrop, .sidebar-close { display: none; }
.sidebar-close { margin-left: auto; }
.main { padding: 26px 32px 64px; min-width: 0; max-width: 1560px; }
.boot { display: grid; place-items: center; min-height: 100vh; }

/* ---------- Sayfa başlığı ve filtreler ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.page-title { font-size: 26px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { color: var(--ink-3); margin-top: 4px; }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 13px; margin-bottom: 6px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap .icon { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.select-wrap .icon + select { padding-left: 32px; }
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input:not([type]), textarea {
  height: 36px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 0 10px; min-width: 0;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
select { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366728c' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.18); }
input[type=color] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); }
.daterange { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13.5px; cursor: pointer; padding: 0 4px; }
.toggle input { width: 16px; height: 16px; accent-color: var(--ink); }
.search { width: 220px; }

/* ---------- Düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; font-weight: 550; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #0f1a31; }
.btn-secondary { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--surface); border-color: #e9b4ae; color: var(--bad-ink); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn-block { width: 100%; height: 42px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn .ptag-dot { margin-right: 0; }

/* ---------- Panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 16px 20px 12px; }
.panel-title { font-size: 16px; }
.panel-sub { color: var(--ink-3); font-size: 13px; margin-top: 3px; max-width: 760px; }
.panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel > .note, .panel > .seg, .panel > .steps, .panel > .copyblock, .panel > .details, .panel > .utm-grid, .panel > .pick-list, .panel > .radio-group, .panel > .plain-list, .panel > .inline-form, .panel > .connect-box, .panel > .creative-bar { margin-left: 20px; margin-right: 20px; }
.panel > :last-child:not(.table-wrap) { margin-bottom: 18px; }
.panel > .form-actions { padding: 0 20px; }

/* ---------- Kahraman alanı: net kâr kartı ---------- */
.hero { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 1.6fr); gap: 18px; margin-bottom: 18px; }
.profit-card, .balance-card, .ph-main {
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 22px 24px 18px; display: flex; flex-direction: column;
}
.profit-head { display: flex; align-items: center; justify-content: space-between; }
.profit-label, .balance-label, .ph-label { color: #b9c3d8; font-size: 14px; font-weight: 500; }
.profit-value, .balance-value, .ph-value {
  font-size: 44px; line-height: 1.05; font-weight: 650; letter-spacing: -0.02em; margin: 8px 0 6px; color: #fff;
}
.profit-value.is-loss, .ph-value.is-loss { color: #ff9b91; }
.profit-note { color: #c8d0e0; font-size: 13.5px; }
.profit-note b { color: #fff; }
.strip-title { font-size: 13px; font-weight: 500; color: #b9c3d8; margin: 22px 0 8px; }
.profit-card .delta-good { background: rgba(12, 163, 12, 0.22); color: #9be3a9; }
.profit-card .delta-bad { background: rgba(208, 59, 59, 0.25); color: #ffb3ab; }
.strip-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 2px; }
.strip-seg { min-width: 2px; transition: filter 120ms; }
.strip-seg.is-hover { filter: brightness(1.25); }
.strip-legend { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; font-size: 13px; }
.strip-legend li { display: flex; align-items: center; gap: 7px; color: #c8d0e0; }
.strip-legend li.is-hover { color: #fff; }
.strip-label { flex: 1; }
.strip-share { color: #fff; font-weight: 600; }
.strip-empty { color: #b9c3d8; }
.sync-line { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: #97a3bd; }
.sync-chip { display: inline-flex; align-items: center; gap: 5px; }
.profit-card .tt-main { fill: #fff; }
.sync-live { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 550; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.chart-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.chart-panel .trend { padding: 0 12px 10px 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px; }
.legend-item { border: 1px solid var(--rule); background: var(--surface); border-radius: 7px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.legend-item.is-off { opacity: 0.45; }
.legend-item.is-off .swatch { background: var(--ink-4) !important; }
.single-day { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 20px; }
.single-day div { display: grid; gap: 4px; }
.single-day b { font-size: 24px; }

/* ---------- Grafik ---------- */
.trend { position: relative; }
.trend svg { display: block; touch-action: none; }
.grid { stroke: var(--rule); stroke-width: 1; }
.axis-zero { stroke: var(--rule-strong); stroke-width: 1; }
.axis-label { fill: var(--ink-3); font-size: 11.5px; }
.crosshair { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-pop); padding: 8px 10px; min-width: 170px; font-size: 13px; z-index: 5; }
.tooltip-title { font-weight: 600; margin-bottom: 4px; }
.tooltip-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.tooltip-row span:nth-child(2) { flex: 1; color: var(--ink-2); }
.spark { display: block; width: 100%; overflow: visible; }

/* ---------- Metrik kutucukları ---------- */
/* Özet: kaynak logolu bölümler ve ayrı kart kutucuklar (Triple Whale düzeni) */
.board { margin-bottom: 24px; scroll-margin-top: 16px; }
@media (min-width: 901px) { .board { scroll-margin-top: 170px; } }
.board-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; }
.board-head h2 { font-size: 16.5px; font-weight: 650; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.board-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; }
.pin-icon { background: #fff4d6; color: var(--saffron); }
.pin-icon .icon { fill: var(--saffron); }
.board-src { font-size: 12px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 9px; }
.board-hint { color: var(--ink-3); font-size: 12.5px; }
.board-count { margin-left: auto; color: var(--ink-4); font-size: 12.5px; }
.board-head .board-toggle { margin-left: auto; }
.board-head .board-count ~ .board-toggle { margin-left: 2px; }
.board-toggle { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; flex: none; }
.board-toggle:hover { background: var(--surface-3); color: var(--ink); }
.board-toggle .icon { transition: transform 0.15s; }
.icon.rot90 { transform: rotate(90deg); }
.board-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.section-nav { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; padding: 2px 24px 2px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.section-nav::-webkit-scrollbar { display: none; }
.snav { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 7px; font-size: 13px; font-weight: 550; color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 1px rgba(15, 27, 45, 0.03); }
.snav:hover { border-color: #c5cdd9; color: var(--ink); }
.snav > .icon { color: var(--saffron); fill: var(--saffron); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.tile { position: relative; display: grid; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: box-shadow 0.15s, border-color 0.15s; }
.tile:hover { box-shadow: 0 8px 22px rgba(15, 27, 45, 0.09); border-color: #d3dae5; }
.tile-over { outline: 2px dashed var(--series-1); outline-offset: 3px; }
.tile-main { all: unset; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto auto; gap: 4px; width: 100%; height: 100%; padding: 14px 16px 10px; cursor: pointer; border-radius: var(--radius); }
.tile-main:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.tile-active { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1), var(--shadow-card); }
.tile-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-right: 22px; min-height: 18px; }
.tile-top .blogo { margin-top: 1px; }
.tile-label { color: var(--ink-2); font-size: 13px; font-weight: 550; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-value { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-top: 6px; align-self: end; }
.tile-foot { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.tile-prev { color: var(--ink-4); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .spark { margin-top: 6px; height: 38px; }
.metric-table { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.mt-name { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-weight: 550; color: var(--ink); }
.mt-name:hover { color: var(--series-1); }
.mt-name:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 4px; }
.metric-table .trend-col { width: 130px; }
.metric-table .spark { width: 110px; height: 26px; }
.table tr.row-active td { background: #eef4ff; }
.pin.pin-inline { position: static; opacity: 1; }
/* Logolar */
.blogo { display: inline-block; flex: none; vertical-align: middle; }
.blogo-chip { display: inline-grid; place-items: center; border-radius: 28%; }
.bstack { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.bname { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pin { position: absolute; top: 9px; right: 9px; border: 0; background: transparent; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-4); cursor: pointer; opacity: 0; }
.tile:hover .pin, .pin:focus-visible, .pin-on { opacity: 1; }
.pin:hover { background: var(--surface-2); color: var(--ink-2); }
.pin-on { color: var(--saffron); }
.pin-on svg { fill: var(--saffron); }

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; border-radius: 6px; padding: 1px 6px; font-size: 12.5px; white-space: nowrap; }
.delta-md { font-size: 13px; padding: 2px 8px; }
.delta-good { color: var(--good-ink); background: var(--good-bg); }
.delta-bad { color: var(--bad-ink); background: var(--bad-bg); }
.delta-neutral, .delta-flat { color: var(--ink-2); background: var(--surface-2); }
.delta-none { color: var(--ink-4); }

/* ---------- KPI satırı ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow-card); }
.kpis > .kpi { margin: 0 -1px -1px 0; }
.kpi { background: var(--surface); padding: 12px 16px; display: grid; gap: 2px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kpi > span { color: var(--ink-3); font-size: 12.5px; }
.kpi b { font-size: 21px; font-weight: 650; }
.kpi-wide { grid-column: span 2; }
.kpi small { color: var(--ink-3); font-size: 12px; }
.coverage { display: flex; height: 10px; border-radius: 4px; overflow: hidden; gap: 2px; margin: 6px 0 2px; }
.cov-pixel { background: var(--series-1); }
.cov-journey { background: #86b6ef; }
.cov-none { background: var(--rule-strong); }

/* ---------- Notlar, durum ---------- */
.note { display: flex; gap: 9px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; }
.note .icon { margin-top: 1px; }
.note-info { background: var(--info-bg); color: var(--info-ink); }
.note-error { background: var(--bad-bg); color: var(--bad-ink); }
.note-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); margin-bottom: 14px; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 550; white-space: nowrap; vertical-align: middle; }
.pill-good { background: var(--good-bg); color: var(--good-ink); }
.pill-bad { background: var(--bad-bg); color: var(--bad-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-info { background: var(--info-bg); color: var(--info-ink); }
.pill-muted { background: var(--surface-2); color: var(--ink-3); }
.loading { display: flex; align-items: center; gap: 10px; color: var(--ink-3); padding: 40px 4px; }
.loading-bar { width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--rule) 0%, var(--saffron) 50%, var(--rule) 100%); background-size: 200% 100%; animation: slide 1.1s linear infinite; }
@keyframes slide { to { background-position: -200% 0; } }
.is-refreshing { opacity: 0.72; transition: opacity 150ms; }
.empty { padding: 34px 24px; text-align: center; color: var(--ink-3); display: grid; justify-items: center; gap: 8px; }
.empty h3 { color: var(--ink); font-size: 15px; }
.empty p { max-width: 460px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 9px; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow-pop); z-index: 50; }
.toast .icon { color: var(--saffron); }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--rule); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 550; font-size: 12.5px; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--surface-2); white-space: nowrap; }
.table td:first-child { white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }
.table .num { text-align: right; white-space: nowrap; }
.table tbody tr:hover td { background: #fafbfd; }
.row-link { cursor: pointer; }
.row-link:hover .cell-name > span:first-of-type { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.cell-name { display: flex; align-items: center; gap: 9px; min-width: 200px; }
td.cell-name { display: table-cell; }
td.cell-name > * { vertical-align: middle; }
td.cell-name .avatar, td.cell-name .ptag-dot, td.cell-name .ptag, td.cell-name > .blogo, td.cell-name > .blogo-chip { margin-right: 9px; }
td.cell-name > span { display: inline-block; vertical-align: middle; }
.row-chevron { color: var(--ink-4); margin-left: 6px; vertical-align: middle; }
.cell-bar { min-width: 140px; }
.cell-bar span:first-child { display: block; }
.cellbar { display: block; height: 4px; background: var(--surface-3); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.cellbar span { display: block; height: 100%; border-radius: 2px; }
.sortable button { all: unset; cursor: pointer; }
.sortable button:focus-visible { outline: 2px solid var(--series-1); }
.actions { display: flex; gap: 6px; justify-content: flex-end; }
td.actions { display: table-cell; }
td.actions .btn { margin-left: 6px; }

.cohort td.heat { font-size: 12.5px; padding: 8px 10px; border-bottom: 2px solid var(--surface); border-right: 2px solid var(--surface); }
.heat-empty { background: var(--surface); }
.pnl td:first-child { white-space: nowrap; }
.pnl th:first-child, .pnl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
.pnl th:first-child { background: var(--surface-2); }
.pnl .pnl-sub td:first-child { background: var(--surface-2); }
.pnl .pnl-total td:first-child { background: var(--saffron-soft); }
.pnl-sub td { font-weight: 600; background: var(--surface-2); }
.pnl-total td { font-weight: 700; background: var(--saffron-soft); border-top: 2px solid var(--saffron); }
.pnl-cost td { color: var(--ink-2); }
.pnl-pct td, .pnl-count td, .pnl-ratio td { color: var(--ink-3); font-size: 13px; }
th.pnl-total, td.pnl-total { background: var(--surface-2); font-weight: 600; }

/* ---------- Atribüsyon ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; color: var(--ink-4); flex-wrap: wrap; }
.crumbs button { border: 0; background: none; color: var(--series-1); cursor: pointer; padding: 2px 0; font-weight: 500; }
.crumbs .crumb-active { color: var(--ink); font-weight: 600; cursor: default; }
.ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.ptag-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; margin-right: 2px; vertical-align: middle; }

/* ---------- Kreatifler ---------- */
.creative-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.seg { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: 8px; padding: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button:disabled { opacity: 0.5; cursor: not-allowed; }
.seg .seg-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 35, 63, 0.12); font-weight: 600; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.creatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.creative { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--ink); text-align: center; padding: 14px; }
.thumb-ph span { font-size: 13px; font-weight: 600; opacity: 0.8; }
.thumb-badges { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, 0.92); border-radius: 6px; padding: 2px 7px; }
.creative-body { padding: 12px 14px 12px; display: grid; gap: 6px; }
.creative-body h3 { font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.creative-body p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creative-status { min-height: 22px; }
.creative-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px 10px; margin: 2px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.creative-stats div { display: grid; }
.creative-stats dt { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.creative-stats dd { margin: 0; font-weight: 650; font-size: 15px; }
.creative-spark { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.creative-spark .spark { width: 110px; }

/* ---------- Formlar ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; padding: 4px 20px 20px; }
.modal .form-grid, .connect-box.form-grid { padding: 0; }
.field { display: grid; gap: 5px; align-content: start; }
.field input, .field select, .field textarea { width: 100%; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.field-hint { font-size: 12px; color: var(--ink-3); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.form-actions .note { margin: 0 auto 0 0; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--paper) 30%); padding: 16px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.radio-group { border: 0; padding: 0; margin-top: 16px; display: grid; gap: 10px; }
.radio-group legend { font-weight: 600; margin-bottom: 8px; }
.pick-list { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.pick-list li { background: var(--surface); padding: 10px 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.plain-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.plain-list li { display: flex; align-items: center; gap: 10px; }
.plain-list li .btn { margin-left: auto; }
.cogs-input { width: 110px; text-align: right; height: 32px !important; }
.cogs-input.is-error { border-color: var(--bad); }
.connect-box { display: grid; gap: 12px; margin-top: 14px; padding: 14px 16px !important; background: var(--surface-2); border-radius: 8px; justify-items: start; }
.connect-box p { color: var(--ink-2); max-width: 680px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(22, 35, 63, 0.42); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--shadow-pop); }
.modal-wide { width: min(820px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 18px 20px 20px; }

/* ---------- Kod blokları ---------- */
.copyblock { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 12px; }
.copyblock-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); }
.copyblock pre { margin: 0; padding: 12px; max-height: 260px; overflow: auto; font-size: 12px; line-height: 1.5; background: var(--surface); }
.copyblock code { background: none; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps { padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.details summary { cursor: pointer; color: var(--series-1); margin-top: 12px; }
.utm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 12px; }
.utm-grid .copyblock pre code { white-space: pre-wrap; word-break: break-all; }

/* ---------- Mağazalar ---------- */
.group-title { font-size: 16px; margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 26px; }
.store-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); display: grid; gap: 12px; }
.store-card:hover { text-decoration: none; border-color: var(--rule-strong); box-shadow: 0 2px 8px rgba(22, 35, 63, 0.06); }
.store-card-head { display: flex; gap: 10px; align-items: flex-start; }
.store-card-head > div { flex: 1; min-width: 0; }
.store-card-head h3 { font-size: 15px; }
.store-dot { width: 12px; height: 12px; border-radius: 4px; margin-top: 4px; flex: none; display: inline-block; }
.page-title .store-dot { margin-top: 0; }
.conn-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; font-size: 13px; color: var(--ink-3); }
.conn-list li { display: flex; align-items: center; gap: 7px; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.conn-list .is-on { color: var(--ink); }
.conn-list .is-on .conn-dot { background: var(--good); }
.conn-list .is-err { color: var(--bad-ink); }
.store-card-foot { border-top: 1px solid var(--rule); padding-top: 10px; }
.portal-store { margin-bottom: 24px; }

/* ---------- Ortaklar ---------- */
.portfolio-hero { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr); gap: 18px; margin-bottom: 18px; }
.ph-main .split { margin-top: 14px; }
.ph-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ph-stats div { background: var(--surface); padding: 14px 18px; display: grid; align-content: center; gap: 3px; }
.ph-stats dt { color: var(--ink-3); font-size: 12.5px; }
.ph-stats dd { margin: 0; font-size: 22px; font-weight: 650; }
.split { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: transparent; }
.split-sm { height: 8px; width: 130px; margin-bottom: 4px; }
.split-partner { background: var(--partner); }
.split-owner { background: #8fa0c4; }
.balance-card .split-owner, .ph-main .split-owner, .month-card .split-owner { background: #8fa0c4; }
.split-empty { background: var(--surface-3); color: var(--ink-3); font-size: 11px; align-items: center; padding: 0 6px; height: auto; min-height: 14px; }
.split-sm.split-empty { min-height: 8px; font-size: 0; }
.split-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 13px; }
.ph-main .split-legend { color: #c8d0e0; }
.ph-main .split-legend b { color: #fff; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw-partner { background: var(--partner); }
.sw-owner { background: #8fa0c4; }
.cell-split small { display: block; font-size: 12px; }
.mbars { display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 72px; }
.mbar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mbar span { display: block; width: 100%; background: var(--good); border-radius: 2px 2px 0 0; }
.mbar span.neg { background: var(--bad); }
.partners-table td { white-space: nowrap; }
.partner-head { margin-bottom: 18px; }
.partner-id { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 16px; }
.partner-id > div:nth-child(2) { flex: 1; min-width: 260px; }
.partner-quick { margin: 0; display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.partner-quick div { background: var(--surface); padding: 10px 16px; }
.partner-quick dt { color: var(--ink-3); font-size: 12px; }
.partner-quick dd { margin: 0; font-weight: 650; font-size: 18px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule-strong); overflow-x: auto; }
.tab { padding: 9px 14px; color: var(--ink-3); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab-active { color: var(--ink); border-bottom-color: var(--saffron); }

/* Hesap */
.finance-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.balance-parts { margin: 14px 0 0; display: grid; gap: 1px; background: rgba(255, 255, 255, 0.12); border-radius: 8px; overflow: hidden; }
.balance-parts div { background: var(--ink); padding: 9px 0; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
.balance-parts dt { color: #c8d0e0; }
.balance-parts dd { margin: 0; font-weight: 650; font-size: 16px; }
.balance-parts small { grid-column: 1 / -1; color: #8f9bb5; font-size: 12px; }
.balance-note { margin-top: 12px; font-size: 13px; color: #c8d0e0; }
.balance-note b { color: #fff; }
.month-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 10px; align-content: start; }
.month-card h3 { font-size: 15px; }
.month-net { display: flex; justify-content: space-between; align-items: baseline; }
.month-net b { font-size: 28px; font-weight: 650; }
.mini-stats { margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
.mini-stats dt { color: var(--ink-3); font-size: 12px; }
.mini-stats dd { margin: 0; font-weight: 650; }
.tx { display: inline-flex; align-items: center; gap: 6px; }
.tx-investment .icon { color: var(--good-ink); }
.tx-profit_payout .icon, .tx-capital_return .icon, .tx-ad_reimbursement .icon { color: var(--series-1); }

/* ---------- Asistan ---------- */
.assistant { display: flex; flex-direction: column; min-height: calc(100vh - 100px); }
.chat { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 860px; width: 100%; }
.chat-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; color: var(--ink-3); text-align: center; }
.chat-empty .icon { color: var(--saffron); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 680px; }
.chip { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.chip:hover:not(:disabled) { border-color: var(--ink-3); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }
.msg { border-radius: 12px; padding: 12px 16px; max-width: 92%; }
.msg-user { align-self: flex-end; background: var(--ink); color: #fff; }
.msg-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--rule); }
.md { display: grid; gap: 8px; }
.md ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.md h4 { font-size: 14px; }
.msg-busy { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.25; } }
.chat-input { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: flex-end; max-width: 860px; padding: 14px 0 6px; background: linear-gradient(transparent, var(--paper) 25%); }
.chat-input textarea { flex: 1; min-height: 46px; }
.chat-input .btn { height: 46px; }

.explain { margin: 18px 0 8px; }
.explain ul { margin: 8px 0 4px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }

/* ---------- Veri durumu ---------- */
.status-hero { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 14px; margin: 0 0 20px; border: 1px solid; }
.status-hero h2 { font-size: 19px; margin: 0 0 4px; }
.status-hero p { margin: 0; color: var(--ink-2, #3a4866); }
.status-hero.is-good { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.status-hero.is-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.status-hero.is-bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.status-hero-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.is-good .status-hero-icon { background: var(--good); }
.is-warn .status-hero-icon { background: var(--warn); }
.is-bad .status-hero-icon { background: var(--bad); }
.status-issues { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.status-issues li.is-error b { color: var(--bad-ink); }
.status-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-title .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 550; padding: 2px 8px; border-radius: 999px; background: var(--info-bg, #e8f0fc); color: var(--series-1, #2a78d6); }
.status-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; padding: 4px 20px 20px; }
.status-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3, #56668a); margin: 8px 0 10px; font-weight: 650; }
.check-list, .acc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.check-row { display: grid; grid-template-columns: 22px 130px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.check-row:last-child { border-bottom: 0; }
.check-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ink-4, #9aa6bf); margin-top: 1px; }
.is-good .check-icon { background: var(--good); }
.is-warn .check-icon { background: var(--warn); }
.is-bad .check-icon { background: var(--bad); }
.is-info .check-icon { background: var(--series-1, #2a78d6); }
.check-label { color: var(--ink-3, #56668a); padding-top: 1px; }
.check-value { min-width: 0; overflow-wrap: anywhere; }
.acc-row { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.acc-row:last-child { border-bottom: 0; }
.acc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--ink-3, #56668a); font-size: 12.5px; }
.spin-dark { border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
@media (max-width: 900px) {
  .status-grid { grid-template-columns: 1fr; padding: 4px 14px 14px; }
  .check-row { grid-template-columns: 22px 100px minmax(0, 1fr); }
  .status-hero { padding: 16px; }
}

/* ---------- Kesinleşmemiş veri notu ---------- */
.provisional-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--ink-3, #56668a); }
.prov-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: repeating-linear-gradient(45deg, var(--warn, #fab219) 0 2px, transparent 2px 4px); border: 1px solid var(--warn, #fab219); }

/* ---------- Sağlık bandı ---------- */
.health { border: 1px solid var(--warn-line, #f0d48a); background: var(--warn-bg, #fff8e6); border-radius: 10px; margin: 0 0 16px; }
.health-error { border-color: var(--bad-line, #f1b0ad); background: var(--bad-bg, #fdeeee); }
.health-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.health-toggle { margin-left: auto; font-size: 13px; text-decoration: underline; }
.health-list { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; }
.health-list li { padding-left: 10px; border-left: 3px solid var(--warn-line, #f0d48a); }
.health-list li.is-error { border-left-color: var(--bad-ink, #c0392b); }

/* ---------- Giriş ---------- */
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-side { background: var(--ink); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 650; }
.login-brand .brand-mark { background: rgba(255, 255, 255, 0.08); }
.login-line { font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; max-width: 520px; }
.login-pulse { width: 100%; height: 110px; color: var(--saffron); }
.login-form { align-self: center; justify-self: center; width: min(380px, 100% - 48px); display: grid; gap: 14px; }
.login-form h1 { font-size: 26px; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  .hero, .portfolio-hero, .finance-top { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .mobilebar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--rule); padding: 8px 12px; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 30; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: var(--shadow-pop); }
  .menu-open .sidebar { transform: none; }
  .menu-backdrop { display: block; position: fixed; inset: 0; background: rgba(22, 35, 63, 0.35); z-index: 25; border: 0; padding: 0; cursor: pointer; }
  .menu-open .sidebar-close { display: inline-flex; }
  .menu-open { overflow: hidden; height: 100vh; }
  .main { padding: 18px 16px 48px; }
  .page-title { font-size: 22px; }
  .profit-value, .balance-value, .ph-value { font-size: 36px; }
  .ph-stats { grid-template-columns: repeat(2, 1fr); }
  .kpi-wide { grid-column: span 1; }
  .login { grid-template-columns: 1fr; }
  .login-side { padding: 28px 24px; gap: 20px; }
  .login-line { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Kâr / zarar ve karar renkleri (v2)
   ===================================================================== */
.money-pos { color: var(--good-ink); }
.money-neg { color: var(--bad-ink); }
.money-zero { color: var(--ink-3); }
.money-strong { font-weight: 650; }

/* Karar rozetleri: Ölçekle / Kârlı / İnce kâr / Zarar ediyor / Durdur / Veri az */
.verdict { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 650; white-space: nowrap; line-height: 1.3; }
.verdict .icon { flex: none; }
.v-scale { background: var(--good); color: #fff; }
.v-good { background: var(--good-bg); color: var(--good-ink); box-shadow: inset 0 0 0 1px var(--good-line); }
.v-watch { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.v-bad { background: var(--bad-bg); color: var(--bad-ink); box-shadow: inset 0 0 0 1px var(--bad-line); }
.v-stop { background: var(--bad); color: #fff; }
.v-learning { background: var(--surface-3); color: var(--ink-3); }
/* Satır / kart şeridi */
.stripe-scale, .stripe-good { --stripe: var(--good); }
.stripe-watch { --stripe: var(--warn); }
.stripe-bad, .stripe-stop { --stripe: var(--bad); }
.stripe-learning { --stripe: var(--rule-strong); }
.table tr[class*='stripe-'] td:first-child { box-shadow: inset 4px 0 0 var(--stripe); }
.table tr.stripe-bad td, .table tr.stripe-stop td { background: #fffafa; }
.table tr.stripe-scale td { background: #f8fdf9; }

/* Net kâr kartı: kâr yeşil, zarar kırmızı zemin */
.profit-card.is-profit .profit-value { color: #6ee7a0; }
.profit-card.is-loss-card { background: linear-gradient(150deg, #4a0f12 0%, #7f1d1d 100%); }
.profit-card.is-loss-card .profit-value { color: #fff; }
.profit-card.is-loss-card .profit-label { color: #fecaca; }
.loss-flag { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
.tile-value.money-pos { color: var(--good-ink); }
.ph-value.is-gain { color: #6ee7a0; }
.kpi b.money-pos, .kpi b .money-pos { color: var(--good-ink); }
.kpi b.money-neg, .kpi b .money-neg { color: var(--bad-ink); }
.tile-value.money-neg { color: var(--bad-ink); }

/* Yapılması gerekenler */
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.insights-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.insights-head h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.insights-head .muted { font-size: 13px; }
.insight { min-width: 0; position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px 16px 14px 20px; display: grid; gap: 6px; align-content: start; }
.insight::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius); background: var(--ink-4); }
.insight.lv-bad::before { background: var(--bad); }
.insight.lv-warn::before { background: var(--warn); }
.insight.lv-good::before { background: var(--good); }
.insight.lv-info::before { background: var(--series-1); }
.insight.lv-bad { border-color: var(--bad-line); }
.insight-title { display: flex; align-items: flex-start; gap: 8px; font-weight: 650; font-size: 14.5px; line-height: 1.35; }
.insight-title .icon { margin-top: 2px; flex: none; }
.lv-bad .insight-title .icon { color: var(--bad); }
.lv-warn .insight-title .icon { color: var(--warn); }
.lv-good .insight-title .icon { color: var(--good); }
.lv-info .insight-title .icon { color: var(--series-1); }
.insight-detail { color: var(--ink-2); font-size: 13px; }
.insight-items { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.insight-items li { display: flex; gap: 8px; align-items: baseline; }
.insight-items .ii-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-items small { color: var(--ink-3); white-space: nowrap; }
.insight-action { justify-self: start; margin-top: 4px; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.insights-empty { background: var(--good-bg); border: 1px solid var(--good-line); color: var(--good-ink); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; display: flex; gap: 10px; align-items: center; font-weight: 550; }

/* Kreatif kartı: karar şeridi, tahmini kâr/zarar */
.creative { border-top: 4px solid var(--stripe, var(--rule)); }
.creative-verdict { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.creative-profit { display: grid; gap: 1px; margin: 8px 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.creative-profit > span { font-size: 12px; color: var(--ink-3); }
.creative-profit b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.stripe-bad .creative-profit, .stripe-stop .creative-profit { background: var(--bad-bg); }
.stripe-scale .creative-profit, .stripe-good .creative-profit { background: var(--good-bg); }
.stripe-watch .creative-profit { background: var(--warn-bg); }
.creative-body .creative-reason { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; margin-bottom: 6px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.verdict-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.vchip b { font-weight: 700; }
.vchip .dot { width: 8px; height: 8px; border-radius: 50%; }
.vchip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vchip:hover:not(.is-on) { background: var(--surface-2); }

/* Üst özet şeridi (kreatifler / atribüsyon) */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 12px 14px; display: grid; gap: 2px; }
.stat > span { color: var(--ink-3); font-size: 12.5px; }
.stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.stat small { color: var(--ink-3); font-size: 12px; }
.stat.is-bad { border-color: var(--bad-line); background: var(--bad-bg); }
.stat.is-good { border-color: var(--good-line); background: var(--good-bg); }

/* =====================================================================
   Mobil (v2)
   ===================================================================== */
@media (max-width: 900px) {
  .insights { grid-template-columns: minmax(0, 1fr); }
  .insight-items li { flex-wrap: wrap; row-gap: 0; }
  .insight-items small { flex-basis: 100%; margin-top: -2px; }
  .creatives { grid-template-columns: 1fr; gap: 12px; }
  .thumb { aspect-ratio: 16 / 7; }
  .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 19px; }
  /* Tablolarda ilk sütun yatay kaydırmada sabit kalır */
  .table th:first-child, .table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .table th:first-child { background: var(--surface-2); }
  .table tr.stripe-bad td:first-child, .table tr.stripe-stop td:first-child { background: #fffafa; }
  .table tr.stripe-scale td:first-child { background: #f8fdf9; }
  .cell-name { min-width: 150px; max-width: 220px; white-space: normal; }
  .table td, .table th { padding: 9px 10px; }
  .btn, select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date] { min-height: 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-main { padding: 12px 12px 8px; }
  .tile-top { padding-right: 18px; }
  .tile-value { font-size: 21px; }
  .tile-prev, .board-count, .board-hint { display: none; }
  .board-head .board-count ~ .board-toggle { margin-left: auto; }
  .board-bar { flex-wrap: wrap; gap: 10px; }
  .section-nav { flex-basis: 100%; }
  .board-bar .seg { margin-left: auto; }
  .metric-table .col-prev, .metric-table .trend-col { display: none; }
  .metric-table td:first-child { white-space: normal; min-width: 0; max-width: none; }
  .metric-table .mt-name { gap: 8px; line-height: 1.3; }
  .tile .spark { height: 30px; }
  .board-head h2 { font-size: 15.5px; }
  .page-title { font-size: 22px; }
  .vchip { padding: 7px 12px; }
}
@media (max-width: 420px) {
  .statband { gap: 8px; }
  .stat { padding: 10px 12px; }
}

/* Dokunmatik ekranda sabitleme yıldızı her zaman görünür */
@media (hover: none) { .pin { opacity: 0.6; } .pin-on { opacity: 1; } }

/* Kaynak logoları: kâr-zarar satırları, bağlantı listeleri, kırılım */
.pnl-label { display: inline-flex; align-items: center; gap: 8px; }
.pnl-nologo { display: inline-block; width: 15px; flex: none; }
.conn-list li:not(.is-on):not(.is-err) .blogo { filter: grayscale(1); opacity: 0.45; }
.crumbs button { display: inline-flex; align-items: center; gap: 6px; }
.status-sub { display: flex; align-items: center; gap: 8px; }
.ptag .blogo { flex: none; }

/* Masaüstü: başlık ve filtreler kaydırınca üstte kalır; kenar menü simgelere daraltılabilir */
.nav-collapse { margin-left: auto; }
@media (min-width: 901px) {
  .page-head { position: sticky; top: 0; z-index: 15; margin: 0 -32px 18px; padding: 12px 32px; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color 0.15s, box-shadow 0.15s; }
  .page-head.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 6px 16px -12px rgba(15, 27, 45, 0.25); }
  .shell.nav-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .nav-collapsed .sidebar { padding: 18px 10px 12px; }
  .nav-collapsed .brand { flex-direction: column; padding: 2px 0 14px; gap: 10px; }
  .nav-collapsed .nav-collapse { margin-left: 0; }
  .nav-collapsed .brand-text, .nav-collapsed .nav-group-label, .nav-collapsed .portal-who, .nav-collapsed .me-name, .nav-collapsed .freshness-text { display: none; }
  .nav-collapsed .workspace { grid-template-columns: 1fr; }
  .nav-collapsed .ws-btn > span, .nav-collapsed .nav-item > span:not(.avatar) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nav-collapsed .nav-item { justify-content: center; padding: 9px 0; }
  .nav-collapsed .nav-active::before { left: -10px; }
  .nav-collapsed .nav-sep { margin: 12px 4px; }
  .nav-collapsed .freshness { justify-content: center; padding: 10px 0 0; }
  .nav-collapsed .sidebar-foot { flex-direction: column; padding: 12px 0 0; }
  .nav-collapsed .me { flex: none; }
}
@media (max-width: 900px) { .nav-collapse { display: none; } }

/* =====================================================================
   v4 — Triple Whale düzeni: kart kutucuklar (logo + ad + değişim, büyük değer + trend),
   telefonda yuvarlak üst çubuk ve kaydırınca üstte kalan filtre satırı
   ===================================================================== */
:root { --tile-line: #1d7fd1; --tile-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 4px 14px rgba(15, 27, 45, 0.05); --teal: #0f9d8f; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.tile { border: 0; border-radius: 16px; box-shadow: var(--tile-shadow); }
.tile:hover { box-shadow: 0 10px 28px rgba(15, 27, 45, 0.1); border-color: transparent; }
.tile-active { box-shadow: 0 0 0 2px var(--series-1), var(--tile-shadow); }
.tile-main { grid-template-rows: auto 1fr; gap: 18px; padding: 18px 20px 16px; border-radius: 16px; }
.tile-top { align-items: flex-start; gap: 10px; padding-right: 26px; min-height: 22px; }
.tile-top .blogo, .tile-top .bstack { margin-top: 0; }
.tile-label { display: block; -webkit-line-clamp: unset; color: var(--ink-2); font-size: 14.5px; font-weight: 500; line-height: 22px; }
.tile-label .delta { margin-left: 10px; vertical-align: top; }
.tile-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; align-self: end; min-width: 0; }
.tile-value { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.05; margin: 0; white-space: nowrap; align-self: auto; color: var(--ink); }
.tile .spark { flex: 0 1 46%; min-width: 64px; max-width: 200px; width: auto; height: 46px; margin: 0 0 2px; }
.tile-foot, .tile-prev { display: none; }
.delta-plain { background: transparent; padding: 0; gap: 2px; font-size: 13.5px; font-weight: 600; line-height: 22px; }
.delta-plain.delta-good { color: var(--teal); background: transparent; }
.delta-plain.delta-bad { color: var(--bad); background: transparent; }
.delta-plain.delta-neutral, .delta-plain.delta-flat { color: var(--ink-3); background: transparent; }
.pin { top: 16px; right: 14px; color: var(--ink-4); }
.pin-on { color: var(--tile-line); opacity: 1; }
.pin-on svg { fill: var(--tile-line); }
.board { margin-bottom: 30px; }
.board-head { padding: 0 4px 12px; }
.board-head h2 { font-size: 19px; font-weight: 550; letter-spacing: -0.01em; }
.board-count { font-size: 12.5px; }
/* Bölüm seçici ve görünüm düğmeleri */
.sj-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 11px; border: 1px solid var(--rule-strong, #d5dbe5); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink-3); }
.sj-btn:hover { border-color: #b9c2d0; color: var(--ink); }
.sj-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.sj-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--tile-line); }
.sj-pin svg { fill: var(--tile-line); }
.sj-menu { position: fixed; z-index: 60; width: 260px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 27, 45, 0.18); padding: 6px; display: grid; gap: 2px; }
.sj-item { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.sj-item:hover, .sj-item:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.sj-item.is-active { background: #eef4ff; color: var(--ink); font-weight: 600; }
.seg-icons button { padding: 6px 9px; }
/* Diğer sayfaların özet kutuları da ayrı kartlar */
.kpis { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpis > .kpi { margin: 0; }
.kpi { border: 0; border-radius: 14px; box-shadow: var(--tile-shadow); padding: 14px 16px; }
/* Yenile simgesi tek tur döner */
.spin-once { animation: spin-once 0.8s ease; }
@keyframes spin-once { to { transform: rotate(360deg); } }
.round-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 27, 45, 0.08); flex: none; }
.round-btn:active { transform: scale(0.96); }
.round-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

@media (max-width: 900px) {
  .mobilebar { height: 64px; padding: 0 14px; gap: 10px; background: var(--paper); border-bottom: 0; }
  .mb-title { margin: 0 auto; background: var(--surface); padding: 9px 20px; border-radius: 999px; font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; box-shadow: 0 2px 10px rgba(15, 27, 45, 0.06);
    max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Sayfa adı üst çubukta; başlık satırında yalnızca filtreler kalır ve kaydırınca üstte durur */
  .has-bar-title .page-head:not(.has-back) .page-title-wrap { display: none; }
  .has-bar-title .page-head.no-tools:not(.has-back) { display: none; }
  .page-head { position: sticky; top: 64px; z-index: 14; background: var(--paper); margin: -6px -16px 16px; padding: 4px 16px 12px; border-bottom: 1px solid var(--rule); gap: 10px; }
  .page-tools { width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .page-tools::-webkit-scrollbar { display: none; }
  .page-tools .filters { flex-wrap: nowrap; }
  .page-tools .filters > *, .page-tools > * { flex: none; }
  .page-tools select { height: 44px; border-radius: 12px; font-size: 15px; max-width: 150px; text-overflow: ellipsis; }
  .page-tools .filters { gap: 8px; }
  .page-tools .select-wrap .icon + select { padding-left: 34px; }
  .page-tools select[aria-label="Karşılaştırma"] { max-width: 132px; }
  .page-tools select[aria-label="Tarih aralığı"] { max-width: none; }
  .sj-btn { height: 44px; border-radius: 12px; padding: 0 12px; }
  .board { scroll-margin-top: 140px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile-main { padding: 18px 20px 16px; gap: 22px; }
  .tile-label { font-size: 15px; }
  .tile-value { font-size: 34px; }
  .tile .spark { flex-basis: 48%; max-width: none; height: 50px; }
  .board-head h2 { font-size: 19px; font-weight: 500; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* =====================================================================
   v5 — Tipografi: Inter, okunaklı ölçek, rakamlar net; telefonda daha büyük
   ===================================================================== */
body { font-size: 14px; line-height: 1.5; font-optical-sizing: auto; font-feature-settings: 'cv05' 1; text-rendering: optimizeLegibility; letter-spacing: -0.003em; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.018em; line-height: 1.25; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; }
.page-sub { font-size: 14px; color: var(--ink-3); }
.panel-title, .panel h2, .panel-head h2 { letter-spacing: -0.015em; }
.board-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.insights-head h2 { font-weight: 650; letter-spacing: -0.02em; }
.nav-item, .ws-btn { font-size: 14px; letter-spacing: -0.005em; }
.brand-name { font-weight: 700; letter-spacing: -0.03em; }
/* Büyük rakamlar orantılı (daha dengeli görünür); tablolardaki rakamlar eşit genişlikte kalır (alt alta hizalı) */
.tile-value, .profit-value, .balance-value, .ph-value, .kpi b, .stat b, .creative-profit b, .month-net b, .ph-stats dd, .single-day b {
  font-variant-numeric: proportional-nums lining-nums; letter-spacing: -0.025em;
}
.tile-value { font-size: 26px; font-weight: 650; }
.tile .spark { min-width: 72px; }
.profit-value { font-weight: 700; letter-spacing: -0.035em; }
.kpi b { font-size: 22px; font-weight: 650; }
.kpi > span, .stat > span, .tile-label { letter-spacing: -0.005em; }
.table { font-size: 13.5px; }
.table th { font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.delta { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.status-sub { text-transform: none; letter-spacing: -0.005em; font-size: 13.5px; color: var(--ink-2); font-weight: 650; }
.btn { letter-spacing: -0.005em; }
select, input, textarea, button { font-family: inherit; letter-spacing: inherit; }

@media (max-width: 900px) {
  body { font-size: 15px; }
  .page-title { font-size: 24px; }
  .mb-title { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
  /* 16 px altındaki giriş kutularında iPhone sayfayı yakınlaştırır; bu yüzden en az 16 px */
  select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input:not([type]), textarea { font-size: 16px; }
  .tile-value { font-size: 32px; letter-spacing: -0.03em; }
  .tile-label { font-size: 15px; }
  .delta-plain { font-size: 14px; }
  .kpi b { font-size: 21px; }
  .table { font-size: 14px; }
  .table th { font-size: 12.5px; }
  .insight-detail, .insight-items { font-size: 14px; }
  .nav-item, .ws-btn { font-size: 15px; }
  .pill, .verdict, .vchip, .badge, .ptag { font-size: 12.5px; }
}

/* =====================================================================
   v6 — Örnek ekrandaki (Triple Whale) yazı ağırlıkları: başlık ve etiketler ince, rakamlar yarı kalın,
   harf aralığı doğal; değişim yüzdesi turkuaz, ince uzun okla
   ===================================================================== */
:root { --tile-ink: #1f2933; --tile-label: #4b5563; }
body { letter-spacing: 0; }
.board-head h2 { font-weight: 450; font-size: 20px; letter-spacing: -0.01em; color: var(--tile-ink); }
.tile-label { font-weight: 400; color: var(--tile-label); letter-spacing: 0; }
.tile-value { font-weight: 600; letter-spacing: -0.01em; color: var(--tile-ink); }
.tile-value.money-pos { color: var(--good-ink); }
.tile-value.money-neg { color: var(--bad-ink); }
.delta-plain { font-weight: 600; letter-spacing: 0; gap: 6px; }
.delta-plain .icon { stroke-width: 1.6; width: 20px; height: 20px; margin-top: -2px; }
.tile-label .delta { margin-left: 14px; }
.mb-title { font-weight: 600; letter-spacing: -0.005em; color: var(--tile-ink); }
.page-tools select, .sj-btn { font-weight: 500; color: var(--tile-ink); }
.page-title { font-weight: 650; letter-spacing: -0.02em; }
.kpi b, .stat b { font-weight: 600; letter-spacing: -0.01em; }
.kpi > span, .stat > span { color: var(--tile-label); }
.profit-value { font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 900px) {
  /* Örnekteki ölçü: rakam ~26, etiket ~14,5, bölüm başlığı ~17 px; kartlar daha derli toplu */
  .board-head h2 { font-size: 17.5px; font-weight: 450; }
  .tile-main { padding: 16px 18px 14px; gap: 20px; }
  .tile-label { font-size: 14.5px; }
  .tile-value { font-size: 27px; letter-spacing: -0.005em; }
  .tile .spark { height: 44px; }
  .delta-plain { font-size: 12.5px; }
  .delta-plain .icon { width: 18px; height: 18px; }
  .tile-label .delta { margin-left: 12px; }
  .mb-title { font-size: 16.5px; }
  .page-tools select { font-size: 16px; }
  .page-tools select[aria-label="Karşılaştırma"] { max-width: 124px; }
  .pin { top: 14px; right: 12px; }
}

/* =====================================================================
   v7 — Sade düzen: koyu bloklar açık kartlara döner, logolar küçük, renk yalnızca anlam taşıdığında
   ===================================================================== */
/* Net kâr, hesap bakiyesi ve portföy kartları: beyaz kart, koyu yazı */
.profit-card, .balance-card, .ph-main { background: var(--surface); color: var(--ink); border: 0; border-radius: 16px; box-shadow: var(--tile-shadow); }
.profit-label, .balance-label, .ph-label { color: var(--tile-label); font-weight: 450; }
.profit-value, .balance-value, .ph-value { color: var(--tile-ink); font-weight: 600; }
.profit-card.is-profit .profit-value, .ph-value.is-gain { color: var(--good-ink); }
.profit-value.is-loss, .ph-value.is-loss { color: var(--bad-ink); }
.profit-note { color: var(--ink-3); }
.profit-note b { color: var(--ink); }
.strip-title { color: var(--ink-3); }
.profit-card .delta-good { background: var(--good-bg); color: var(--good-ink); }
.profit-card .delta-bad { background: var(--bad-bg); color: var(--bad-ink); }
.strip-legend li { color: var(--ink-2); }
.strip-legend li.is-hover { color: var(--ink); }
.strip-share { color: var(--ink); }
.strip-empty { color: var(--ink-3); }
.sync-line { color: var(--ink-3); border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 12px; }
.profit-card .tt-main { fill: #fff; }
.sync-live { color: var(--ink); }
.profit-card .spin { border-color: rgba(15, 27, 45, 0.18); border-top-color: var(--ink); }
.profit-card.is-loss-card { background: var(--surface); box-shadow: 0 0 0 1px var(--bad-line), var(--tile-shadow); }
.profit-card.is-loss-card .profit-value { color: var(--bad-ink); }
.profit-card.is-loss-card .profit-label { color: var(--bad-ink); }
.loss-flag { background: var(--bad-bg); color: var(--bad-ink); }
.ph-main .split-legend { color: var(--ink-2); }
.ph-main .split-legend b { color: var(--ink); }
.balance-parts { background: var(--rule); }
.balance-parts div { background: var(--surface); }
.balance-parts dt { color: var(--ink-2); }
.balance-parts small { color: var(--ink-3); }
.balance-note { color: var(--ink-3); }
.balance-note b { color: var(--ink); }
.month-card { border: 0; border-radius: 16px; box-shadow: var(--tile-shadow); }
.ph-stats, .partner-quick { border: 0; box-shadow: var(--tile-shadow); border-radius: 14px; }

/* Öneri kartları: ince renkli şerit, sade başlık */
.insight { border: 0; border-radius: 14px; box-shadow: var(--tile-shadow); padding: 14px 16px 14px 18px; gap: 7px; }
.insight::before { width: 3px; top: 12px; bottom: 12px; border-radius: 3px; left: 7px; }
.insight.lv-bad { border-color: transparent; }
.insight-title { font-weight: 600; font-size: 14px; gap: 7px; }
.insight.lv-bad .insight-title > .icon { color: var(--bad); }
.insight.lv-warn .insight-title > .icon { color: var(--warn-ink); }
.insight.lv-good .insight-title > .icon { color: var(--good); }
.insight.lv-info .insight-title > .icon { color: var(--series-1); }
.insight-detail { color: var(--ink-3); }
.insights-head h2 { font-size: 17px; font-weight: 500; }
.insights-head h2 .icon { color: var(--ink-3); }

/* Kreatif kartları: renkli kutu yerine yalnızca renkli rakam */
.creative-profit { background: transparent !important; padding: 2px 0; margin: 6px 0 4px; }
.creative { border-radius: 14px; }
.thumb-badges { background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08); }

/* Logolar ve küçük simgeler */
.blogo-chip { border-radius: 30%; }
.sync-chip { gap: 5px; }
.bname { gap: 6px; }
.ptag { gap: 5px; }
.statband .stat.is-good, .statband .stat.is-bad { background: var(--surface); border-color: transparent; box-shadow: var(--tile-shadow); }

/* Genel: gölgeler ve kenarlar daha yumuşak */
.panel, .board > .table-wrap, .metric-table { border-color: #e8ecf2; box-shadow: var(--tile-shadow); }
.pin { color: #b8c0cc; }

/* Reklam hesabı → mağaza atama */
.assign-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.assign-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 0; }
.assign-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.assign-list li.is-disabled { opacity: 0.6; }
.assign-acc { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.assign-acc .blogo { margin-top: 2px; }
.assign-acc b { word-break: break-word; }
@media (max-width: 900px) { .assign-list li { grid-template-columns: 1fr; gap: 6px; } }

/* Ayarlar → Entegrasyonlar */
.int-list { display: grid; gap: 10px; margin: 4px 20px 20px; }
@media (max-width: 640px) { .int-list { margin: 4px 12px 14px; } }
.int-card { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.int-card.is-ready { border-color: var(--good-line); }
.int-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.int-head h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; }
.int-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; padding: 16px 18px 18px; align-items: start; }
.int-form { display: grid; gap: 12px; align-content: start; }
.int-form .form-actions { justify-content: flex-start; }
.int-guide { margin: 0; }
.int-guide > summary { font-weight: 600; }
.guide { font-size: 13.5px; color: var(--ink-2); }
.guide .steps { margin: 8px 0 10px; padding-left: 20px; display: grid; gap: 7px; }
.guide code { font-size: 12.5px; }
.guide-sub { font-size: 13.5px; font-weight: 600; margin: 12px 0 2px; color: var(--ink); }
@media (max-width: 900px) { .int-body { grid-template-columns: 1fr; } }

#entegrasyonlar { scroll-margin-top: 140px; }

/* Düğme içeriği: içine konan logo / simge ile yazı arasında boşluk */
.btn > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.btn-sm > span { gap: 6px; }

/* Durum listesi: simge sütunu sabit genişlikte, metin hizalı */
.status-list { list-style: none; margin: 0; display: grid; gap: 9px; }
.status-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
.status-list li > .icon { margin-top: 2px; }
.status-list .is-ok > .icon { color: var(--good); }
.status-list .is-warn > .icon { color: var(--warn-ink); }
.status-list .is-bad > .icon { color: var(--bad); }
.todo-box { width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--ink-4); border-radius: 4px; }

/* Arayüz denetimi düzeltmeleri */
/* Öneri kartı içeriği kart genişliğini aşmaz (uzun satırlar kısalır, açıklama sarılır) */
.insight { grid-template-columns: minmax(0, 1fr); }
.delta { gap: 3px; }
/* Sıralanabilir tablo başlığı: tüm hücre tıklanabilir alan */
.sortable button { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 900px) {
  /* Telefonda parmakla rahat basılabilir alanlar (en az ~32 px) */
  .sortable button { min-height: 34px; padding: 0 2px; }
  .pin { width: 34px; height: 34px; top: 10px; right: 8px; }
  .crumbs button { min-height: 34px; padding: 4px 2px; }
}
.insight-items { grid-template-columns: minmax(0, 1fr); }
.insight-items li { min-width: 0; }
.quick-connect { display: grid; gap: 10px; }
.quick-connect p { margin: 0; }
/* Uzun adresler (kod) satıra sığmazsa bölünür; kutular içeriğe göre genişlemez */
.connect-box { grid-template-columns: minmax(0, 1fr); }
.connect-box code, .guide code, .details code, .note code { overflow-wrap: anywhere; }

/* ---------- Kreatif detayı ve yapay zekâ analizi ---------- */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
button.thumb { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.thumb-kind { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.ai-tag { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 3px 8px; }
.creative-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.creative-top { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: var(--radius); padding: 10px 14px; }
.creative-top.is-good { border-left-color: var(--good); }
.creative-top.is-bad { border-left-color: var(--bad); }
.creative-top h3 { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.creative-top ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.creative-top li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.creative-top li .linklike { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.creative-top li .linklike span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd { display: grid; gap: 18px; }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cd-media { display: grid; gap: 8px; align-content: start; }
.cd-media img, .cd-media video { width: 100%; max-height: 60vh; object-fit: contain; background: var(--surface-2); border-radius: 10px; display: block; }
.cd-noimg { display: grid; place-items: center; gap: 6px; aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: 10px; color: var(--ink-3); }
.cd-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-info { display: grid; gap: 10px; align-content: start; }
.cd-verdict { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-verdict b { font-size: 20px; }
.cd-copy { display: grid; gap: 8px; margin: 0; }
.cd-copy dt { font-size: 11.5px; color: var(--ink-3); }
.cd-copy dd { margin: 0; font-size: 13.5px; }
.cd-body { white-space: pre-wrap; max-height: 180px; overflow: auto; }
.cd-url { word-break: break-all; color: var(--ink-2); }
.cd-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 14px; margin: 0; border-top: 1px solid var(--rule); padding-top: 14px; }
.cd-metrics div { display: grid; }
.cd-metrics dt { font-size: 11.5px; color: var(--ink-3); }
.cd-metrics dd { margin: 0; font-weight: 650; font-size: 15px; }
.cd-metrics small { font-size: 11.5px; }
.cd-ai { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 10px; }
.cd-ai header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-ai h3 { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.cd-ai-actions { display: flex; align-items: center; gap: 10px; }
.cd-ai-result { display: grid; gap: 6px; font-size: 13.5px; }
.cd-ai-result h4 { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.cd-ai-result ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
@media (max-width: 720px) {
  .cd-grid { grid-template-columns: 1fr; }
}

/* ---------- Bağlantılar kartı ---------- */
.conn-list .is-connected { color: var(--ink); }
.conn-list .is-connected .conn-dot { background: var(--good); }
.conn-list .is-error { color: var(--bad-ink); }
.conn-list .is-error .conn-dot { background: var(--bad-ink); }
.conn-list .is-expiring .conn-dot { background: var(--warn, #fab219); }
.conn-progress { width: 120px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.conn-progress span { display: block; height: 100%; background: var(--good); border-radius: inherit; }
.conn-rows { list-style: none; margin: 0; padding: 0 0 6px; }
.conn-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--rule); }
.conn-row > .blogo, .conn-row > .conn-glyph { justify-self: center; }
.conn-glyph { display: inline-flex; align-items: center; justify-content: center; color: #b4561d; flex: none; }
.conn-main { min-width: 0; }
.conn-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conn-sub { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.conn-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.conn-row.is-missing > .blogo { filter: grayscale(1); opacity: 0.5; }
.advanced { margin: 4px 0 20px; }
.advanced > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); font-weight: 600; list-style: none; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced[open] > summary { margin-bottom: 14px; }
.advanced-body > .panel { margin-bottom: 14px; }
@media (max-width: 600px) {
  .conn-row { grid-template-columns: 24px minmax(0, 1fr); padding: 12px 14px; }
  .conn-actions { grid-column: 2; justify-content: flex-start; }
  .conn-progress { width: 80px; }
  .advanced > summary .muted { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   v8 — Anlaşılır tasarım dili (tek yer): tokenlar, okunaklı yazı ölçeği, sabit renk anlamı,
   tutarlı boşluk. Tema: panel yalnızca gece görünümünde (<html data-theme="dark">, web/theme.js).
   Renk anlamı: yeşil = kâr / iyi, kırmızı = zarar / acil, sarı = dikkat, gri-mavi = bilgi.
   Renk hiçbir yerde tek başına anlam taşımaz: yanında ↑/↓, −, ya da "Acil / Dikkat" yazısı vardır.
   ===================================================================== */
:root {
  /* Boşluk ölçeği */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* Yazı ölçeği (temel bir kademe büyük: 15 px; telefonda 16 px) */
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --fs-num: 30px; --fs-num-big: 40px;
  /* Metin: tümü beyaz ve kâğıt zeminde WCAG AA (≥ 4,5:1) */
  --ink-2: #2b3a4f; --ink-3: #4f5d70; --ink-4: #5e6a7e;
  --tile-ink: #0f1b2d; --tile-label: #3b4859;
  --link: #1f66c1; --focus: #1f66c1; --on-ink: #fff;
  --teal: var(--good-ink);
  --highlight: #fff4d6; --profit-col: #f1faf4; --group-bg: #eef2f7;
  --strip-1: #3a4a6b; --strip-2: #56668a; --strip-3: #7383a6; --strip-4: #93a1c0; --strip-5: #b2bdd6; --strip-6: #cdd5e6;
  --radius-lg: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1220; --surface: #131c2b; --surface-2: #182335; --surface-3: #212d42;
  --rule: #263248; --rule-strong: #36445c;
  --ink: #e6ebf2; --ink-2: #c3ccd9; --ink-3: #9fabbd; --ink-4: #8592a6;
  --tile-ink: #e6ebf2; --tile-label: #b4bfce;
  --saffron-soft: #3a2c0a; --saffron-ink: #fcd34d;
  --good: #22c55e; --good-ink: #4ade80; --good-bg: #10291f; --good-line: #1f5a3c;
  --bad: #ef4444; --bad-ink: #fca5a5; --bad-bg: #2f1518; --bad-line: #6b2a2e;
  --warn: #f59e0b; --warn-ink: #fbbf24; --warn-bg: #2d230c; --warn-line: #6b5217;
  --info-ink: #93c5fd; --info-bg: #12243f;
  --nav-bg: #070c16;
  --series-1: #4f93e6; --series-2: #f07a4a; --series-3: #2cc48d; --spark: #7f8ca0; --tile-line: #4f93e6;
  --link: #7cb3f5; --focus: #7cb3f5; --on-ink: #0b1220;
  --highlight: #2e2610; --profit-col: #10231b; --group-bg: #1b2638;
  --strip-1: #9fb0d0; --strip-2: #8495b8; --strip-3: #6b7ca0; --strip-4: #566688; --strip-5: #435272; --strip-6: #34405b;
  --shadow-card: 0 0 0 1px var(--rule); --tile-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--rule);
}
[data-theme="dark"] .btn-primary, [data-theme="dark"] .ws-active, [data-theme="dark"] .vchip.is-on, [data-theme="dark"] .msg-user, [data-theme="dark"] .toast, [data-theme="dark"] .panel-kind { color: var(--on-ink); }
[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #ffffff; }
[data-theme="dark"] .sidebar .ws-active, [data-theme="dark"] .sidebar .ws-active:hover { color: #0f1b2d; }
[data-theme="dark"] .avatar-lg { background: var(--surface-3); }
[data-theme="dark"] .login-side { background: var(--nav-bg); }
[data-theme="dark"] .table tbody tr:hover td { background: var(--surface-2); }
[data-theme="dark"] .table tr.row-active td, [data-theme="dark"] .sj-item.is-active { background: var(--info-bg); }
[data-theme="dark"] .table tr.stripe-bad td, [data-theme="dark"] .table tr.stripe-stop td, [data-theme="dark"] .table tr.stripe-bad td:first-child, [data-theme="dark"] .table tr.stripe-stop td:first-child { background: #1d1417; }
[data-theme="dark"] .table tr.stripe-scale td, [data-theme="dark"] .table tr.stripe-scale td:first-child { background: #0f1d18; }
[data-theme="dark"] .pin-icon { background: var(--saffron-soft); }
[data-theme="dark"] .thumb-badges { background: var(--surface); }
[data-theme="dark"] .seg .seg-on { background: #2b3850; }
[data-theme="dark"] .v-scale, [data-theme="dark"] .v-stop { color: #0b1220; }
[data-theme="dark"] .tile:hover { box-shadow: 0 0 0 1px var(--rule-strong), 0 10px 28px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .modal-backdrop, [data-theme="dark"] .drawer-backdrop, [data-theme="dark"] .menu-backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .panel, [data-theme="dark"] .board > .table-wrap, [data-theme="dark"] .metric-table { border-color: var(--rule); }
[data-theme="dark"] .loading-bar { background: linear-gradient(90deg, var(--rule) 0%, var(--saffron) 50%, var(--rule) 100%); background-size: 200% 100%; }

/* ---------- Temel ---------- */
body { font-size: var(--fs-base); line-height: 1.5; background: var(--paper); color: var(--ink); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.link-btn { border: 0; background: none; padding: 0; color: var(--link); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.panel-title { font-size: var(--fs-lg); }
.panel-sub { font-size: var(--fs-sm); color: var(--ink-3); }
.field-label { font-size: var(--fs-sm); }
.field-hint { font-size: var(--fs-xs); }
.pill, .verdict { font-size: var(--fs-xs); }
.tooltip { font-size: var(--fs-sm); }
.axis-label { font-size: 12.5px; fill: var(--ink-3); }
.delta { font-size: 13.5px; }
.delta-plain.delta-good { color: var(--good-ink); }
.delta-plain.delta-bad { color: var(--bad-ink); }
.kpi > span, .stat > span { font-size: var(--fs-sm); }
.board-count, .board-hint { color: var(--ink-3); font-size: var(--fs-xs); }
.tile-label { font-size: var(--fs-base); color: var(--tile-label); }
.empty { color: var(--ink-2); padding: var(--sp-8) var(--sp-6); }
.empty h3 { font-size: 17px; }
.empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; }
.empty .btn-row { justify-content: center; }
.details summary { color: var(--link); font-weight: 550; }

/* ---------- Sayfa başlığı: başlık + "ne işe yarar" cümlesi; filtreler tek sabit çubuk ---------- */
.page-intro { margin: 0 0 var(--sp-4); }
.page-intro .page-title { font-size: var(--fs-2xl); }
.page-purpose { color: var(--ink-2); font-size: var(--fs-md); margin-top: 6px; max-width: 760px; }
.page-sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.page-head { margin-bottom: var(--sp-5); }
.page-head .page-tools { width: 100%; }
@media (min-width: 901px) {
  .page-head { margin: 0 -32px var(--sp-5); padding: 10px 32px; }
}

/* ---------- Bilgi bantları: tek satır, kapatılabilir ---------- */
.notice { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 10px; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); background: var(--info-bg); color: var(--info-ink); min-height: 40px; }
.notice-warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice-bad { background: var(--bad-bg); color: var(--bad-ink); }
.notice > .icon { flex: none; }
.notice-text { flex: 1; min-width: 0; }
.notice-text b { font-weight: 650; }
.notice-action { flex: none; font-weight: 600; }
.notice-action a { color: inherit; text-decoration: underline; }
.notice-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: 0.8; }
.notice-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.provisional-note { display: none; }
.health { margin: 0 0 var(--sp-3); }
.health-row { display: flex; align-items: center; padding-right: 6px; }
.health-head { flex: 1; min-width: 0; padding: 8px 14px; min-height: 40px; font-size: var(--fs-sm); color: var(--warn-ink); }
.health-error .health-head { color: var(--bad-ink); }
.health-text { flex: 1; min-width: 0; }
.health-toggle { font-weight: 600; white-space: nowrap; }
.health .notice-x { color: var(--ink-2); }

/* ---------- Terim ipucu "?" ---------- */
.hint { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.hint-btn { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-3);
  font-size: 12px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; cursor: help; padding: 0; flex: none; }
.hint-btn:hover, .hint-btn[aria-expanded=true] { border-color: var(--link); color: var(--link); }
.hint-btn::after { content: ''; position: absolute; inset: -10px; } /* dokunma alanı ≥ 40 px, görünüş küçük */
.hint-pop { position: fixed; z-index: 80; width: 288px; max-width: calc(100vw - 16px); background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 12px 14px; display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 400; line-height: 1.45;
  text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; }
.hint-pop.is-up { transform: translateY(-100%); }
.hint-pop b { color: var(--ink); font-size: var(--fs-base); font-weight: 650; }
.hint-ex { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }

/* ---------- Durum kartları: boş / hata / bağlantı çağrısı ---------- */
.state-card { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); padding: 18px 20px; margin: 0 0 var(--sp-5); }
.state-card > .empty { flex: 1; }
.state-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.state-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.state-text h3 { font-size: var(--fs-md); }
.state-text p { color: var(--ink-2); }
.state-error { box-shadow: inset 4px 0 0 var(--bad), var(--tile-shadow); }
.state-error .state-icon { background: var(--bad-bg); color: var(--bad-ink); }
.state-cta { box-shadow: inset 4px 0 0 var(--series-1), var(--tile-shadow); }

/* ---------- Özet: üst şerit (4 büyük sayı) ---------- */
.kpi-top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-6); }
.kpi-top-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-4); }
.kcard { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kcard-label { font-size: var(--fs-base); font-weight: 550; color: var(--ink-2); letter-spacing: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.kcard-value { font-size: var(--fs-num); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--tile-ink); font-variant-numeric: lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard-big .kcard-value { font-size: var(--fs-num-big); }
.kcard.is-pos .kcard-value { color: var(--good-ink); }
.kcard.is-neg { box-shadow: inset 0 0 0 1.5px var(--bad-line), var(--tile-shadow); }
.kcard.is-neg .kcard-value, .kcard.is-neg .kcard-label { color: var(--bad-ink); }
.kcard-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-3); font-size: var(--fs-sm); }
.kcard-delta > span:last-child { white-space: nowrap; }
.kcard-note { color: var(--ink-2); font-size: var(--fs-sm); margin-top: auto; padding-top: 4px; }
.kcard-note b { color: var(--ink); font-weight: 650; }
.kcard-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: var(--fs-sm); min-height: 32px; align-self: flex-start; }
.kcard .loss-flag { margin-left: 8px; }

/* ---------- Özet: "Bugün ne yapmalısın?" ---------- */
.todo { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); margin: 0 0 var(--sp-6); overflow: hidden; }
.todo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 20px 12px; }
.todo-head h2 { font-size: var(--fs-lg); font-weight: 650; }
.todo-meta { color: var(--ink-3); font-size: var(--fs-sm); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.todo-meta b { color: var(--ink); }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { border-top: 1px solid var(--rule); box-shadow: inset 4px 0 0 var(--ink-4); }
.todo-item.lv-bad { box-shadow: inset 4px 0 0 var(--bad); }
.todo-item.lv-warn { box-shadow: inset 4px 0 0 var(--warn); }
.todo-item.lv-good { box-shadow: inset 4px 0 0 var(--good); }
.todo-item.lv-info { box-shadow: inset 4px 0 0 var(--series-1); }
.todo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 16px 12px 20px; }
.todo-level { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.lv-bad .todo-level { background: var(--bad-bg); color: var(--bad-ink); }
.lv-warn .todo-level { background: var(--warn-bg); color: var(--warn-ink); }
.lv-good .todo-level { background: var(--good-bg); color: var(--good-ink); }
.lv-info .todo-level { background: var(--info-bg); color: var(--info-ink); }
.todo-title { display: flex; align-items: center; gap: 8px; font-weight: 550; font-size: var(--fs-base); min-width: 0; }
.todo-title > span { min-width: 0; }
.todo-btns { display: flex; align-items: center; gap: 6px; }
.todo-toggle { color: var(--ink-2); }
.todo-detail { padding: 0 20px 14px 20px; color: var(--ink-2); font-size: var(--fs-sm); display: grid; gap: 8px; max-width: 900px; }
.todo-detail .insight-items { font-size: var(--fs-sm); }
.todo-empty { display: flex; align-items: center; gap: 10px; padding: 0 20px 16px; color: var(--good-ink); font-weight: 550; }
.todo-more { display: block; padding: 12px 20px; border-top: 1px solid var(--rule); width: 100%; text-align: left; min-height: 44px; }

/* ---------- Özet: grafik + "satış nereye gitti" ---------- */
.sum-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--sp-4); margin: 0 0 var(--sp-6); align-items: stretch; }
.sum-grid > .panel { margin-bottom: 0; }
.sum-grid { align-items: start; }
.where-body { padding: 4px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.where-panel { display: flex; flex-direction: column; }
.where-body .strip-legend { grid-template-columns: 1fr; font-size: var(--fs-sm); }
.bar-pos { fill: var(--good); }
.bar-neg { fill: var(--bad); }
.bar.is-dim { opacity: 0.4; }
.axis-zero { stroke: var(--ink-4); stroke-width: 1.25; }
.legend-item { min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.legend-item[aria-pressed=true] { border-color: var(--ink-3); color: var(--ink); }
.legend-item.is-off { opacity: 1; border-style: dashed; }
.legend-label { color: var(--ink-3); font-size: var(--fs-xs); align-self: center; margin-right: 4px; }

/* ---------- Özet: tüm metrikler (katlı) ---------- */
.all-metrics { margin: 0 0 var(--sp-6); }
.all-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: var(--sp-3); }
.all-toggle { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 12px; padding: 0 16px 0 12px; min-height: 48px;
  font-size: var(--fs-md); font-weight: 650; color: var(--ink); cursor: pointer; }
.all-toggle:hover { border-color: var(--ink-4); }
.all-toggle .icon { transition: transform 0.15s; color: var(--ink-3); }
.all-count { font-weight: 450; color: var(--ink-3); font-size: var(--fs-sm); }
.all-tools { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.all-hint { color: var(--ink-3); font-size: var(--fs-sm); }
#all-metrics-body .board:first-child { margin-top: var(--sp-4); }
.board-head h2, .board-head h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--tile-ink); display: flex; align-items: center; gap: 10px; }
.tile-top { padding-right: 64px; }
.tile-aside { position: absolute; top: 14px; right: 12px; display: flex; align-items: center; gap: 2px; }
.tile-aside .pin { position: static; }
.tile-aside .hint { margin-left: 0; }
.tile-aside .hint-btn { margin: 0 4px; }

/* ---------- Tablolar ---------- */
.table { font-size: 14.5px; }
.table th { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.table td { padding: 11px 12px; }
.table .num, .num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.table th .hint { margin-left: 4px; }
/* Kâr-zarar: grup ara başlıkları, ara toplamlar, vurgulu net kâr satırı */
.table.pnl tbody th { text-align: left; font-size: 14.5px; font-weight: 500; color: var(--ink); background: var(--surface); padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--rule); white-space: nowrap; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--rule); }
.table.pnl tr.pnl-group th, .table.pnl tr.pnl-group td { background: var(--group-bg); border-top: 1px solid var(--rule-strong); padding-top: 14px; padding-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.table.pnl tr.pnl-group:first-child th, .table.pnl tr.pnl-group:first-child td { border-top: 0; }
.table.pnl tr.pnl-sub th, .table.pnl tr.pnl-sub td { background: var(--surface-2); font-weight: 650; }
.table.pnl tr.pnl-total th, .table.pnl tr.pnl-total td { background: var(--highlight); font-weight: 700; font-size: var(--fs-md); border-top: 2px solid var(--ink); padding-top: 13px; padding-bottom: 13px; }
.table.pnl tr.pnl-cost td { color: var(--ink-2); }
.table.pnl tr.pnl-pct th, .table.pnl tr.pnl-count th, .table.pnl tr.pnl-ratio th { color: var(--ink-2); }
.table.pnl tr.pnl-pct td, .table.pnl tr.pnl-count td, .table.pnl tr.pnl-ratio td { color: var(--ink-2); font-size: var(--fs-sm); }
.table.pnl td.pnl-total { background: var(--surface-2); font-weight: 650; }
.table.pnl tr.pnl-total td.pnl-total { background: var(--highlight); }
.table.pnl thead th.pnl-total { background: var(--surface-3); }
.table.pnl .money-pos, .table.pnl .money-neg { font-weight: 650; }
/* Ürünler: sütun grupları, kâr sütunları hafif yeşil zeminde */
.col-groups th { background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; text-align: left; border-bottom: 1px solid var(--rule); padding: 6px 12px; }
.col-groups th + th { border-left: 1px solid var(--rule-strong); }
.col-groups th.cg-profit { background: var(--good-bg); color: var(--good-ink); }
.table .col-profit { background: var(--profit-col); }
.table thead th.col-profit { background: color-mix(in srgb, var(--profit-col) 60%, var(--surface-2)); }
.products-table tbody tr:hover td.col-profit { background: color-mix(in srgb, var(--profit-col) 70%, var(--surface-2)); }

/* ---------- Sözlük çekmecesi ---------- */
.nav-glossary { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; margin-top: 8px; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(15, 27, 45, 0.4); display: flex; justify-content: flex-end; }
.drawer { width: min(440px, 100%); height: 100%; background: var(--surface); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--rule); }
.drawer-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.drawer-body { overflow-y: auto; padding: 16px 20px 32px; display: grid; gap: 16px; align-content: start; }
.drawer-search { width: 100%; height: 44px !important; }
.glossary { margin: 0; display: grid; gap: 0; }
.glossary > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.glossary dt { font-weight: 650; font-size: var(--fs-base); }
.glossary dt small { font-weight: 450; color: var(--ink-3); }
.glossary dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------- Kreatif detayı ve Bağlantılar: aynı yazı ölçeği ve karanlık mod ---------- */
.cd-copy dt, .cd-metrics dt, .cd-metrics small, .creative-stats dt { font-size: var(--fs-xs); color: var(--ink-3); }
.cd-copy dd, .cd-ai-result, .creative-top li { font-size: var(--fs-sm); }
.cd-ai-result h4, .creative-top h3, .ai-tag { font-size: var(--fs-xs); }
.cd-metrics dd { font-size: var(--fs-md); }
.conn-sub { font-size: var(--fs-sm); }
.conn-list { font-size: var(--fs-sm); }
[data-theme="dark"] .thumb-kind { background: var(--surface); }
[data-theme="dark"] .conn-glyph { color: #f0915a; }

/* ---------- Telefon ve tablet ---------- */
@media (max-width: 1180px) {
  .kpi-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body { font-size: var(--fs-md); }
  .page-intro { margin-bottom: var(--sp-3); }
  .has-bar-title .page-intro:not(.has-back) .page-title { display: none; }
  .page-purpose { font-size: var(--fs-base); margin-top: 0; }
  .page-head { margin: -6px -16px var(--sp-4); }
  .kpi-top { gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .kpi-top > .kcard-big, .kpi-top > .kcard:last-child:nth-child(even) { grid-column: 1 / -1; }
  .kpi-top-2 > .kcard { grid-column: 1 / -1; }
  .kcard { padding: 14px 16px; }
  .kcard-value { font-size: 24px; }
  .kcard-big .kcard-value { font-size: 34px; }
  .kcard-label { font-size: var(--fs-sm); }
  .kcard-delta { flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-xs); }
  .todo-row { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 12px 18px; }
  .todo-level { justify-self: start; }
  .todo-btns { flex-wrap: wrap; }
  .todo-detail { padding: 0 14px 14px 18px; }
  .todo-head { padding: 14px 14px 10px 18px; }
  .notice { align-items: flex-start; padding-top: 4px; padding-bottom: 4px; }
  .notice > .icon { margin-top: 10px; }
  .notice-text { padding: 8px 0; }
  .notice-action { padding: 8px 0; }
  .state-card { flex-wrap: wrap; }
  .state-card > .btn { width: 100%; }
  .all-tools { margin-left: 0; }
  .where-body .strip-legend { grid-template-columns: 1fr; }
  /* Dokunma alanları en az 44 px */
  .btn, .btn-sm, select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search] { min-height: 44px; }
  .icon-btn, .round-btn, .notice-x, .board-toggle, .pin { width: 44px; height: 44px; }
  .nav-item, .ws-btn, .tab, .chip, .vchip, .legend-item, .health-head, .crumbs button, .sortable button, .seg button, .details summary, .kcard-link { min-height: 44px; }
  .seg button { display: inline-flex; align-items: center; }
  .details summary { display: flex; align-items: center; }
  .hint-btn { width: 24px; height: 24px; }
  .tile-aside { top: 6px; right: 4px; }
  .tile-top { padding-right: 76px; }
  .table.pnl tbody th { padding-left: 14px; white-space: normal; min-width: 150px; max-width: 190px; }
  .table td, .table th { padding: 10px 10px; }
}
@media (max-width: 560px) {
  .kpi-top { grid-template-columns: minmax(0, 1fr); }
  .kcard-value { font-size: 26px; }
}

/* =====================================================================
   v9 — Tema seçimi (Gündüz / Gece / Otomatik) ve grafik dili
   Gündüz: kenar menü dahil bütün panel beyaz. Gece: koyu zemin, ayrı seçilmiş renk adımları.
   Grafik renkleri sabit sırada (--cat-1 … --cat-8) ve renk körlüğüne göre doğrulandı; ızgara silik ve düz.
   ===================================================================== */
:root {
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #6250d6; --cat-8: #e34948;
  --series-1: var(--cat-1); --series-2: var(--cat-2); --series-3: var(--cat-3); --partner: var(--cat-3); --tile-line: var(--cat-1);
  --viz-grid: #e8ecf1; --viz-axis: #c3cad6; --viz-spark: #8a95a8;
  --nav-bg: #ffffff; --nav-ink: #2b3a4f; --nav-ink-2: #5e6a7e; --nav-strong: #0f1b2d;
  --nav-hover: #f1f4f8; --nav-active: #eaf0f8; --nav-rule: #e3e8ef; --nav-pill: #0f1b2d; --nav-pill-ink: #ffffff;
}
:root[data-theme="dark"] {
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767;
  --series-1: var(--cat-1); --series-2: var(--cat-2); --series-3: var(--cat-3); --partner: var(--cat-3); --tile-line: var(--cat-1);
  --viz-grid: #212c3e; --viz-axis: #3a4860; --viz-spark: #7f8ca0;
  --nav-bg: #070c16; --nav-ink: #c3cddd; --nav-ink-2: #8a97ad; --nav-strong: #ffffff;
  --nav-hover: rgba(255, 255, 255, 0.06); --nav-active: rgba(255, 255, 255, 0.1); --nav-rule: rgba(255, 255, 255, 0.08); --nav-pill: #ffffff; --nav-pill-ink: #0f1b2d;
}

/* ---------- Kenar menü: renkler tokenlardan (gündüzde beyaz) ---------- */
.sidebar { background: var(--nav-bg); color: var(--nav-ink); border-right: 1px solid var(--nav-rule); }
.sidebar .brand-name, .sidebar .me-name, .sidebar .nav-item:hover, .sidebar .nav-active, .sidebar .nav-active:hover, .sidebar .icon-btn:hover { color: var(--nav-strong); }
.sidebar .brand-mark { background: var(--nav-active); }
.sidebar .workspace { background: var(--nav-hover); border-color: var(--nav-rule); }
.sidebar .ws-active, .sidebar .ws-active:hover { background: var(--nav-pill); color: var(--nav-pill-ink); }
.sidebar .avatar { background: var(--nav-active); color: var(--nav-strong); }
.sidebar .portal-who { background: var(--nav-hover); color: var(--nav-strong); border-color: var(--nav-rule); }
.sidebar .portal-label { color: var(--nav-ink-2); }
.sidebar .portal-share { color: var(--saffron-ink); }
.sidebar .nav-active .icon { color: var(--saffron-ink); }
[data-theme="dark"] .sidebar .nav-active .icon { color: var(--saffron); }

/* ---------- Tema seçici ---------- */
  color: var(--nav-ink); font-size: 12.5px; font-weight: 550; cursor: pointer; padding: 4px 2px; min-width: 0; line-height: 1.1; }
@media (min-width: 901px) {
}

/* ---------- Grafikler ---------- */
.viz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.viz > *, .chart-body, .where-body { min-width: 0; }
.viz-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 8px; }
.key-line { display: inline-block; width: 16px; height: 3px; border-radius: 2px; flex: none; }
.key-rect { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; margin-right: 8px; vertical-align: -1px; }
.viz-legend .key-rect, .tooltip-row .key-rect { margin-right: 0; }
.trend { position: relative; border-radius: 8px; outline-offset: 4px; }
.trend svg { touch-action: pan-y; display: block; overflow: visible; }
.chart-panel .trend { padding: 0; }
.chart-body { padding: 0 16px 14px 8px; }
.grid { stroke: var(--viz-grid); stroke-width: 1; }
.axis-zero { stroke: var(--viz-axis); stroke-width: 1; }
.axis-label { fill: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.viz-label { fill: var(--ink-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.crosshair { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: none; }
.hover-band { fill: var(--ink); opacity: 0.045; }
.bar { transition: opacity 0.12s; }
.bar.is-dim { opacity: 0.35; }
.tooltip { padding: 10px 12px; border-radius: 10px; min-width: 0; }
.tooltip-title { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.tooltip-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 2px 0; }
.tooltip-row b { font-size: var(--fs-base); color: var(--ink); white-space: nowrap; }
.tooltip-row b.money-pos { color: var(--good-ink); }
.tooltip-row b.money-neg { color: var(--bad-ink); }
.tooltip-row > span:last-child { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; }
.viz-table summary { font-size: var(--fs-xs); margin: 0; color: var(--link); cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; }
.viz-table .table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--rule); border-radius: 10px; margin-top: 6px; }
.viz-table .table th { position: sticky; top: 0; z-index: 2; }
/* "Her ₺100 satış nereye gitti?": bölümlü şerit + tablo */
.where { display: grid; gap: 10px; }
.where-bar { display: flex; gap: 2px; height: 28px; }
.where-seg { border-radius: 4px; min-width: 3px; display: flex; align-items: center; padding-left: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: opacity 0.12s; font-variant-numeric: tabular-nums; }
.where-seg.is-dim { opacity: 0.35; }
.where-hover { min-height: 21px; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.where-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.where-table th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: var(--fs-xs); padding: 0 0 6px; border-bottom: 1px solid var(--rule); }
.where-table td { padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.where-table td:first-child { color: var(--ink); }
.where-table .num { text-align: right; padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.where-table tr.is-net td { font-weight: 700; color: var(--good-ink); border-bottom: 0; }
.where-table tr.is-loss td { font-weight: 700; border-bottom: 0; }
.where-table tr.is-hover td { background: var(--surface-2); }
/* Pay şeridi ve aylık mini çubuklar */
.split { height: 10px; border-radius: 999px; gap: 2px; overflow: visible; }
.split > div { border-radius: 999px; }
.split-sm { height: 6px; }
.split-partner, .sw-partner { background: var(--cat-3); }
.split-owner, .sw-owner, .balance-card .split-owner, .ph-main .split-owner, .month-card .split-owner { background: var(--cat-1); }
.mbars { display: block; width: auto; height: auto; gap: 0; }
.mbars .bar-pos { fill: var(--good); }
.mbars .bar-neg { fill: var(--bad); }

@media (max-width: 900px) {
  .chart-body { padding: 0 10px 12px 2px; }
  .viz-table summary { min-height: 44px; }
  .sidebar { border-right: 0; }
}

/* Sıralanabilir tablo başlığındaki "?" eski `.sortable button { all: unset }` kuralından korunur */
.table th.sortable .hint-btn { all: revert; box-sizing: border-box; position: relative; width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-3); font: 700 12px/1 var(--font); display: inline-grid; place-items: center; cursor: help; vertical-align: middle; }
.table th.sortable .hint-btn:hover, .table th.sortable .hint-btn[aria-expanded="true"] { border-color: var(--link); color: var(--link); }
@media (max-width: 900px) {
  /* Kreatiflerdeki "en iyi / en kötü" bağlantıları ve tüm giriş kutuları parmakla rahat basılır */
  .creative-top li .linklike { min-height: 44px; }
  .creative-body h3 .linklike, .table .linklike { position: relative; }
  .creative-body h3 .linklike::after, .table .linklike::after { content: ''; position: absolute; inset: -13px 0; }
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=hidden]):not([type=file]) { min-height: 44px; }
}

/* =====================================================================
   v10 — Grafik animasyonları ve zarar bölgesi
   Çubuklar sıfır çizgisinden sırayla büyür, çizgiler soldan sağa çizilir, şeritler soldan açılır,
   imleç ve ipucu yumuşakça kayar. "Hareketi azalt" açık cihazlarda (üstteki genel kural) hepsi kapanır,
   işaretler doğrudan son hallerinde görünür.
   ===================================================================== */
@keyframes viz-grow { from { transform: scaleY(0); } }
@keyframes viz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes viz-fade { from { opacity: 0; } }
@keyframes viz-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes viz-rise { from { opacity: 0; transform: translateY(8px); } }
.anim-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: viz-grow 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 16ms); }
.anim-grow.bar-neg { transform-origin: 50% 0%; }
.anim-draw { stroke-dasharray: 1; animation: viz-draw 1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.anim-fade { animation: viz-fade 0.7s ease 0.2s both; }
.anim-fade-late { animation: viz-fade 0.45s ease 0.7s both; }
.anim-wipe { animation: viz-wipe 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.area { opacity: 0.1; }
.hover-layer, .hover-dot, .hover-band { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tooltip { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); animation: viz-fade 0.18s ease-out both; }
.bar { transition: opacity 0.18s ease; }
/* Zarar bölgesi: sıfırın altı hafif kırmızı zemin; sıfır çizgisi belirgin, üstünde "↑ kâr", altında "↓ zarar" */
.loss-zone { fill: var(--bad-bg); opacity: 0.75; }
.axis-zero.is-strong { stroke: var(--ink-3); stroke-width: 1.5; }
.zone-label { font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.zone-label.is-gain { fill: var(--good-ink); }
.zone-label.is-loss { fill: var(--bad-ink); }
/* Özet kartları ve paneller hafifçe yükselerek gelir */
.kpi-top > .kcard, .todo, .sum-grid > .panel { animation: viz-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.kpi-top > .kcard:nth-child(2) { animation-delay: 60ms; }
.kpi-top > .kcard:nth-child(3) { animation-delay: 120ms; }
.kpi-top > .kcard:nth-child(4) { animation-delay: 180ms; }
.todo { animation-delay: 160ms; }
.sum-grid > .panel { animation-delay: 220ms; }
.sum-grid > .panel + .panel { animation-delay: 280ms; }

/* Kenar menü altı: ada dokununca "Adını değiştir" */
button.me { border: 0; background: transparent; padding: 6px; margin: -6px 0 -6px -6px; border-radius: 10px; text-align: left; cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
button.me:hover { background: var(--nav-hover); }

/* =====================================================================
   v11 — Telefonda sade görünüm (yalnız ≤ 900 px; masaüstü aynen kalır)
   Kartlar gölgesiz ince çizgili; özet sayıları tek kartta satır satır; yalnız tarih filtresi görünür,
   diğerleri "Filtre" altında; uzun açıklamalar kısa.
   ===================================================================== */
.filters-more { display: contents; }
.filters-toggle { display: none; }
.todo-action-m { display: none; }
@media (max-width: 900px) {
  .main { padding-top: 10px; }
  /* Başlık: amaç cümlesi kısa ve soluk; tarih tekrarı yok (tarih seçicide yazıyor) */
  .page-purpose { font-size: var(--fs-sm); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .page-intro:has(+ .page-head) .page-sub { display: none; }
  /* Filtreler: tarih + "Filtre" düğmesi; açılınca diğerleri alt satıra dizilir */
  .filters-toggle { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--surface); color: var(--ink-2); font-weight: 550; cursor: pointer; flex: none; }
  .filters-toggle[aria-expanded="true"] { border-color: var(--ink-3); color: var(--ink); }
  .filters-more { display: none; }
  .filters.more-open .filters-more { display: contents; }
  /* Açılınca: filtre grubu ekran genişliğinde, her seçim kendi satırında tam genişlik (yana taşmaz) */
  .page-tools:has(.filters.more-open) { flex-wrap: wrap; overflow: visible; }
  .page-head:has(.filters.more-open) { position: static; }
  .page-tools .filters.more-open { flex: 1 1 100%; width: 100%; min-width: 0; flex-wrap: wrap; }
  .page-tools .filters.more-open .filters-more > * { flex: 1 1 100%; min-width: 0; }
  .page-tools .filters.more-open .filters-more .select-wrap { display: flex; }
  .page-tools .filters.more-open .filters-more select { width: 100%; max-width: none; }
  /* Güvenlik ağı: içerik hiçbir durumda sayfayı ekranın yanına genişletmez (telefon sayfayı uzaklaştırmasın) */
  .main { overflow-x: clip; }
  /* Kartlar: gölgesiz, ince çizgi */
  .kcard, .todo, .panel, .tile, .state-card, .metric-table, .kpis, .statband .stat, .creative, .store-card, .month-card, .balance-card, .ph-main, .ph-stats, .int-card {
    box-shadow: none !important; border: 1px solid var(--rule) !important; }
  .kpi-top > .kcard, .todo, .sum-grid > .panel { animation-name: viz-fade; }
  /* Bilgi bandı: ince, küçük yazı */
  .notice { font-size: var(--fs-xs); min-height: 0; padding: 2px 2px 2px 12px; border-radius: 10px; }
  .notice > .icon { margin-top: 9px; width: 14px; height: 14px; }
  .notice-text { padding: 7px 0; }
  .notice .hint-btn { width: 20px; height: 20px; }
  /* Özet sayıları: net kâr büyük kartta; diğerleri tek kartta satır satır (etiket solda, sayı sağda) */
  .kpi-top:not(.kpi-top-2) { gap: 0; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-4); }
  .kpi-top:not(.kpi-top-2) > .kcard-big { margin-bottom: 10px; }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px;
    padding: 11px 16px; border-radius: 0 !important; border-top-width: 0 !important; grid-column: auto; }
  .kpi-top:not(.kpi-top-2) > .kcard-big + .kcard { border-top-width: 1px !important; border-radius: 14px 14px 0 0 !important; }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big):last-child { border-radius: 0 0 14px 14px !important; }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .kcard-label { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-2); }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .kcard-value { grid-column: 2; grid-row: 1; font-size: 19px; text-align: right; }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .kcard-delta { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .kcard-delta > span:last-child,
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .kcard-note,
  .kpi-top:not(.kpi-top-2) > .kcard:not(.kcard-big) .hint { display: none; }
  .kcard-big .kcard-delta > span:last-child { display: none; }
  .kcard .delta { font-size: 12.5px; }
  /* Ortak portalı: "Senin payın" ve "Bakiye" yan yana iki sade kutu */
  .kpi-top-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
  .kpi-top-2 > .kcard { grid-column: auto !important; padding: 12px 14px; gap: 4px; }
  .kpi-top-2 .kcard-label { font-size: var(--fs-xs); }
  .kpi-top-2 .kcard-label .hint { display: none; }
  .kpi-top-2 .kcard-value { font-size: 22px; }
  .kpi-top-2 .kcard-note { display: none; }
  .kpi-top-2 .kcard-link { font-size: var(--fs-xs); min-height: 32px; }
  /* Diğer sayfaların özet kutuları da tek kartta satır satır */
  .kpis { gap: 0; grid-template-columns: minmax(0, 1fr); background: var(--surface); border-radius: 14px; overflow: hidden; }
  .kpis > .kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 16px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--rule); }
  .kpis > .kpi:last-child { border-bottom: 0; }
  .kpi b { font-size: 18px; }
  .statband { gap: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--surface); }
  .statband .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 16px; border: 0 !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0; }
  .statband .stat:last-child { border-bottom: 0 !important; }
  .statband .stat > span { grid-column: 1; }
  .statband .stat > b { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 18px; }
  .statband .stat > small { grid-column: 1; }
  /* "Bugün ne yapmalısın?": her madde tek satır + ok; eylem düğmesi ayrıntının içinde */
  .todo-head { padding: 14px 16px 8px; }
  .todo-head h2 { font-size: var(--fs-md); }
  .todo-meta { display: none; }
  .todo-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; padding: 10px 6px 10px 16px; }
  .todo-level { grid-column: 1; padding: 1px 8px; font-size: 12px; }
  .todo-title { grid-column: 1; font-size: var(--fs-sm); }
  .todo-btns { grid-column: 2; grid-row: 1 / span 2; }
  .todo-btns > a.btn { display: none; }
  .todo-toggle { width: 44px; padding: 0; justify-content: center; }
  .todo-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .todo-action-m { display: inline-flex; justify-self: start; }
  .todo-detail { padding: 0 16px 14px 16px; }
  .todo-more { padding: 10px 16px; font-size: var(--fs-sm); }
  /* Grafik ve paneller: kısa altyazı, daha az boşluk */
  .sub-long { display: none; }
  .panel-head { padding: 14px 16px 10px; }
  .panel-title { font-size: var(--fs-md); }
  .panel-sub { font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .chart-panel .panel-actions .seg button { min-height: 44px; padding: 0 12px; font-size: var(--fs-sm); }
  .where-body { padding: 0 16px 14px; }
  .where-amt, .where-body .sync-line, .where-hover { display: none; }
  .chart-body { padding-bottom: 0; }
  .sum-grid > .panel > :last-child { margin-bottom: 4px; }
  .where-table td { padding: 6px 0; }
  /* Sabitlenen metrikler: iki sütun, trend çizgisi yok */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-main { padding: 12px 12px 12px; gap: 8px; }
  .tile .spark { display: none; }
  .tile-top { padding-right: 34px; }
  .tile-label { font-size: var(--fs-xs); line-height: 1.35; }
  .tile-label .delta { display: block; margin: 2px 0 0; }
  .tile-value { font-size: 20px; }
  .tile-aside .hint { display: none; }
  .tile-aside { top: 2px; right: 0; }
  .board-head h2, .board-head h3 { font-size: var(--fs-md); }
  .all-hint { display: none; }
  .all-toggle { min-height: 44px; font-size: var(--fs-base); }
  /* Ürünler: tablonun üstündeki grup satırı telefonda yok */
  .col-groups { display: none; }
}

/* =====================================================================
   v12 — Masaüstü: içerik ortada (geniş ekranlarda sola yaslanmaz, iki yanda eşit boşluk)
   ===================================================================== */
@media (min-width: 901px) {
  .main { width: 100%; max-width: 1480px; margin: 0 auto; }
}

/* =====================================================================
   v13 — Metrik bölümleri ve kutuları (örnek: Triple Whale)
   Bölüm başlığı sade (ad + ⓘ); kutular kısa, beyaz, ince çizgili: sol üstte logo + kısa ad, altında büyük sayı.
   Masaüstünde kutular satırı esnek genişliklerle doldurur; "?" ve raptiye yalnız fareyle üzerine gelince görünür.
   ===================================================================== */
.board-info { display: inline-grid; place-items: center; color: var(--ink-4); cursor: help; margin-left: -2px; }
.board-info:hover { color: var(--ink-2); }
.board-head { gap: 8px; }
.board-head h2, .board-head h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--tile-ink); }
.board-head .board-hint { display: none; }
@media (min-width: 901px) {
  .board { margin-bottom: 36px; }
  .board-head { padding: 0 4px 14px; }
  .tiles { display: flex; flex-wrap: wrap; gap: 12px; }
  /* Son satırda tek kalan kutu bütün satırı kaplamasın: görünmez dolgu son satırın boş kalan yerini alır */
  .tiles::after { content: ''; flex: 999 1 250px; height: 0; }
  .tile { flex: 1 1 auto; min-width: 250px; border-radius: 10px; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04); }
  .tile:hover { box-shadow: 0 4px 14px rgba(15, 27, 45, 0.08); border-color: var(--rule-strong); }
  .tile-active { box-shadow: 0 0 0 2px var(--series-1); border-color: transparent; }
  .tile-main { grid-template-rows: auto 1fr; gap: 26px; min-height: 112px; padding: 16px 18px 18px; border-radius: 10px; }
  .tile-top { align-items: center; gap: 8px; min-height: 18px; padding-right: 58px; }
  .tile-label { font-size: 13.5px; line-height: 18px; color: var(--ink-2); font-weight: 450; white-space: nowrap; }
  .tile-label .delta { margin-left: 10px; font-size: 12.5px; vertical-align: 0; }
  .tile-label .delta .icon { width: 14px; height: 14px; }
  .tile-body { align-self: end; }
  .tile-value { font-size: 26px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
  .tile-aside { top: 12px; right: 10px; opacity: 0; transition: opacity 0.12s; }
  .tile:hover .tile-aside, .tile:focus-within .tile-aside { opacity: 1; }
  .tile-aside .pin { width: 28px; height: 28px; }
}
@media (hover: none) and (min-width: 901px) { .tile-aside { opacity: 1; } }
[data-theme="dark"] .tile { box-shadow: none; }

/* =====================================================================
   v14 — Ayrı giriş sayfaları: yönetici (lacivert) ve ortak (yeşil)
   ===================================================================== */
.login { background: var(--paper); }
.login-admin .login-side { background: #0f1b2d; }
.login-partner .login-side { background: linear-gradient(155deg, #0a3a30 0%, #0f5c4a 100%); }
.login-partner .login-pulse { color: #5eead4; }
[data-theme="dark"] .login-admin .login-side { background: #070c16; }
[data-theme="dark"] .login-partner .login-side { background: linear-gradient(155deg, #05241e 0%, #0a3f33 100%); }
.login-brand > span:last-child { display: grid; line-height: 1.1; }
.login-brand small { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.72); letter-spacing: 0; }
.login-copy { display: grid; gap: 24px; }
.login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.86); }
.login-points li { display: flex; align-items: center; gap: 10px; }
.login-points .icon { color: rgba(255, 255, 255, 0.6); }
.login-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }
.login-partner .login-badge { background: var(--good-bg); color: var(--good-ink); }
.login-partner .btn-primary { background: #0f5c4a; color: #fff; }
.login-partner .btn-primary:hover:not(:disabled) { background: #0b4a3c; }
[data-theme="dark"] .login-partner .btn-primary { background: #14866b; color: #fff; }
.login-switch { text-align: center; color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.login-switch a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; min-height: 44px; }
@media (max-width: 900px) {
  .login-side { padding: 22px 20px; gap: 14px; }
  .login-points, .login-pulse { display: none; }
  .login-line { font-size: 18px; }
  .login-form { padding: 24px 0 32px; }
}
.mail-steps { margin-top: 14px; margin-bottom: 12px; }
/* Ortak girişi: kodla / şifreyle seçimi */
.login-mode { display: flex; width: 100%; }
.login-mode button { flex: 1; justify-content: center; padding: 8px 11px; }
.login-code-actions { display: flex; justify-content: space-between; gap: 12px; margin: -4px 0 0; font-size: 13px; }
.login-code-actions .linklike { color: var(--link); font-weight: 500; }
.login-code-actions .linklike:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }
/* Şifre alanı + "Şifre üret" düğmesi */
.pw-gen { display: flex; gap: 8px; align-items: center; }
.pw-gen input { flex: 1; min-width: 0; }
.pw-gen .btn { flex: none; }
/* ---------- Ayarlar: bölüm kartları ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.set-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.set-card:hover { border-color: var(--link); box-shadow: 0 2px 10px rgba(22, 35, 63, 0.07); }
.set-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.set-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); }
.set-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.set-title { font-weight: 650; font-size: 15.5px; color: var(--ink); }
.set-desc { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.set-status { margin-top: 6px; }
.set-chev { flex: none; color: var(--ink-3); margin-top: 10px; }
.set-adv { margin-bottom: 16px; }
.set-adv .copyblock { margin-top: 10px; }
@media (max-width: 640px) {
  .set-grid { grid-template-columns: 1fr; gap: 10px; }
  .set-card { padding: 14px; }
}
/* Entegrasyonlar: açılır-kapanır platform satırları */
.int-toggle { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.int-card:not(.is-open) .int-toggle { border-bottom: 0; }
.int-toggle:hover .int-action { text-decoration: underline; }
.int-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.int-state { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.int-action { color: var(--link); font-weight: 600; font-size: 13.5px; }
.int-chev { color: var(--ink-3); transition: transform .15s; }
.int-card.is-open .int-chev { transform: rotate(90deg); }
.int-card.is-open .int-toggle { border-radius: 14px 14px 0 0; }
@media (max-width: 640px) {
  .int-toggle { flex-wrap: wrap; }
  .int-action { display: none; }
}
.int-card.is-open .int-toggle { border-bottom: 1px solid var(--rule); }
/* ---------- Reklam hesapları (yönetici) ---------- */
.ra-how { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 16px 20px 18px; margin-bottom: 16px; }
.ra-how header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ra-how h2 { font-size: 16px; }
.ra-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ra-how li { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 14px 14px 16px; border-radius: 12px; background: var(--surface-2); }
.ra-how li b { font-size: 14.5px; color: var(--ink); }
.ra-how li > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.ra-how-num { position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 700; color: var(--ink-4); }
.ra-how-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface); color: var(--link); border: 1px solid var(--rule); }
.ra-how-show { margin: -4px 0 12px; }
.ra-how-show .link-btn { display: inline-flex; align-items: center; gap: 6px; }

.ra-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ra-stat { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.ra-stat span { font-size: 13px; color: var(--ink-3); font-weight: 550; }
.ra-stat b { font-size: 26px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.ra-stat small { font-size: 12.5px; color: var(--ink-3); }
.ra-stat.is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.ra-stat.is-warn b, .ra-stat.is-warn span { color: var(--warn-ink); }
.ra-stat.is-good b { color: var(--good-ink); }
.ra-stat.is-bad { border-color: var(--bad-line); background: var(--bad-bg); }
.ra-stat.is-bad b, .ra-stat.is-bad span { color: var(--bad-ink); }

.ra-wait { border-color: var(--warn-line); }
.ra-wait .panel-title { display: flex; align-items: center; gap: 8px; color: var(--warn-ink); }
.ra-list { list-style: none; margin: 0; padding: 0; }
.ra-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.ra-acc { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ra-acc-text { display: grid; min-width: 0; }
.ra-acc-text b { overflow-wrap: anywhere; color: var(--ink); }
.ra-acc-text small { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.ra-assign { display: flex; gap: 8px; align-items: center; flex: 0 1 380px; min-width: 0; }
.ra-assign select { flex: 1; min-width: 0; }
.ra-fetch { display: flex; flex-wrap: wrap; gap: 8px; }

.ra-group { margin-top: 22px; }
.ra-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ra-store { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ra-store header { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.ra-store header > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.ra-store header small { font-size: 12.5px; color: var(--ink-3); }
.ra-store-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); flex: none; }
.ra-count { font-size: 12.5px; color: var(--ink-3); flex: none; }
.ra-store ul { list-style: none; margin: 0; padding: 0; }
.ra-store li { padding: 12px 16px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.ra-store li:first-child { border-top: 0; }
.ra-store-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ra-actions { display: flex; gap: 6px; flex: none; }
.ra-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-left: 31px; }
.ra-meta .icon { vertical-align: -2px; color: var(--good); }
.ra-fund { display: flex; align-items: center; gap: 8px; }
.ra-fund select { padding-top: 4px; padding-bottom: 4px; }
.ra-none { margin: 0 0 18px; }
.ra-move { display: grid; gap: 12px; padding: 4px 0 2px; }
.ra-move .note { margin: 0; }

@media (max-width: 900px) {
  .ra-how ol { grid-template-columns: 1fr; }
  .ra-stores { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ra-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ra-stat { padding: 10px; }
  .ra-stat b { font-size: 22px; }
  .ra-stat small { display: none; }
  .ra-stat span { font-size: 12px; }
  .ra-row { padding: 12px 14px; }
  .ra-assign { flex: 1 1 100%; }
  .ra-store-row { flex-wrap: wrap; }
  .ra-meta { padding-left: 0; }
  .ra-how { padding: 14px; }
  .ra-how ol { gap: 8px; }
  .ra-how li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px; }
  .ra-how-icon { grid-row: span 2; }
  .ra-how-num { display: none; }
}
/* Reklam hesabı seçim ekranı: bağlı / kaldırılacak durumları */
.assign-list li.is-removing { background: var(--bad-bg); }
.assign-acc .pill { margin-left: 8px; vertical-align: 1px; }
.assign-sum { margin-right: auto; }
.conn-head-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 560px) { .conn-head-actions { flex-direction: row-reverse; } }
.conn-fix { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.ra-err { display: grid; gap: 4px; max-width: 100%; }
.ra-err small { font-size: 12.5px; line-height: 1.4; }
/* Telefonda tablolarda yalnız önemli sütunlar (Ortaklar, hak edişler, para hareketleri) */
@media (max-width: 640px) { .table .hide-sm { display: none; } }
.table td.actions { white-space: nowrap; }
.table td.tx-in { color: var(--good-ink); font-weight: 600; }
.table td.tx-out { color: var(--ink-2); }
@media (max-width: 640px) {
  /* Sekmeler yatay kayar: sağda daha fazlası olduğu belli olsun */
  .tabs { mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 24px; }
}
.ra-fund { flex-wrap: wrap; }
.ra-fund-hint { flex-basis: 100%; font-size: 12px; }
/* Veri sorunu bandı: telefonda tek satırlık kısa şerit ("3 veri sorunu · Gör") */
.health-short { display: none; }
@media (max-width: 640px) {
  .health-long { display: none; }
  .health-short { display: inline; }
  .health .health-head { padding-top: 8px; padding-bottom: 8px; }
}
.status-cell { min-width: 150px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.status-actions:empty { display: none; }
@media (max-width: 640px) {
  .partners-table td { white-space: normal; }
  .partners-table .cell-name small { white-space: normal; }
  .partners-table th, .partners-table td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
  .partners-table th { white-space: normal; }
  .partners-table .cell-name b { white-space: normal; }
  .partners-table .cell-name .avatar { display: none; }
}
@media (max-width: 640px) {
  .table.partners-table th, .table.partners-table th.num { white-space: normal; }
}
@media (max-width: 640px) {
  .table.partners-table th, .table.partners-table td { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 640px) {
  .table.months-table th, .table.months-table td { white-space: normal; padding-left: 7px; padding-right: 7px; }
  .table.months-table .status-cell { min-width: 0; }
  .table.months-table .status-cell .pill { white-space: normal; }
}
@media (max-width: 640px) {
  .table.months-table { font-size: 13px; }
  .table.months-table .pill { font-size: 11.5px; }
  .table.months-table .tx { white-space: normal; }
}
/* Hesabım ve hak edişler: kâr payının dört aşaması */
.share-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.share-steps > div { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.share-steps span { font-size: 13px; color: var(--ink-3); font-weight: 550; }
.share-steps b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.share-steps small { font-size: 12.5px; color: var(--ink-3); }
.share-steps .is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.share-steps .is-warn span, .share-steps .is-warn b { color: var(--warn-ink); }
.share-steps .is-good b { color: var(--good-ink); }
.fin-how { margin-bottom: 14px; }
@media (max-width: 900px) { .share-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .share-steps > div { padding: 10px 12px; } .share-steps b { font-size: 18px; } .share-steps small { display: none; } }

/* =====================================================================
   v16 — Modern tasarım dili (ivme ile aynı aile): derin lacivert + mavi vurgu, Geist / Bricolage Grotesque,
   hap düğmeler, ince ızgara ve mavi ışıltı zemini, yumuşak giriş ve üzerine gelme animasyonları.
   Gece: ivme lacivertisi. Gündüz: beyaz zemin, aynı mavi vurgu. Yapı ve renk anlamları (yeşil kâr, kırmızı zarar) aynı.
   ===================================================================== */
:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --brand: #3b63ff; --brand-2: #6e8dff; --brand-ink: #2846c8; --brand-soft: #eaefff;
  --saffron: var(--brand); --saffron-soft: var(--brand-soft); --saffron-ink: var(--brand-ink);
  --paper: #f3f5fb; --surface: #ffffff; --surface-2: #f6f8fd; --surface-3: #eceffa;
  --rule: #e2e7f3; --rule-strong: #cdd5ea;
  --ink: #0b1440; --tile-ink: #0b1440; --ink-2: #2a3557; --ink-3: #4e5a7c; --ink-4: #66729a;
  --link: #2f55e6; --focus: #3b63ff;
  --radius: 18px; --radius-lg: 20px;
  --shadow-card: 0 0 0 1px rgba(11, 20, 64, 0.06), 0 10px 30px -18px rgba(11, 20, 64, 0.18);
  --tile-shadow: 0 0 0 1px rgba(11, 20, 64, 0.06), 0 10px 30px -18px rgba(11, 20, 64, 0.18);
  --lift-shadow: 0 0 0 1px rgba(59, 99, 255, 0.28), 0 18px 40px -18px rgba(59, 99, 255, 0.45);
  --nav-strong: #0b1440; --nav-pill: #0b1440; --nav-pill-ink: #ffffff; --nav-active: #eaefff;
  --grid-line: rgba(11, 20, 64, 0.045);
  --glow-1: rgba(59, 99, 255, 0.12); --glow-2: rgba(110, 141, 255, 0.10);
}
:root[data-theme="dark"] {
  --brand: #6e8dff; --brand-2: #9cb8ff; --brand-ink: #9cb8ff; --brand-soft: rgba(59, 99, 255, 0.18);
  --saffron: var(--brand); --saffron-soft: var(--brand-soft); --saffron-ink: #9cb8ff;
  --paper: #040a26; --surface: #07113a; --surface-2: #0a1748; --surface-3: #10215e;
  --rule: rgba(170, 195, 255, 0.13); --rule-strong: rgba(170, 195, 255, 0.24);
  --ink: #f4f7ff; --tile-ink: #f4f7ff; --ink-2: #cdd7f5; --ink-3: #a9b6da; --ink-4: #8392c4; --tile-label: #a9b6da;
  --link: #9cb8ff; --focus: #9cb8ff; --on-ink: #040a26;
  --info-bg: rgba(59, 99, 255, 0.14); --info-ink: #b7c9ff;
  --group-bg: #0a1748; --highlight: rgba(59, 99, 255, 0.16);
  --viz-grid: rgba(170, 195, 255, 0.1); --viz-axis: rgba(170, 195, 255, 0.24);
  --nav-bg: #030820; --nav-ink: #cdd7f5; --nav-ink-2: #8392c4; --nav-strong: #ffffff;
  --nav-hover: rgba(156, 184, 255, 0.07); --nav-active: rgba(59, 99, 255, 0.2); --nav-rule: rgba(170, 195, 255, 0.1);
  --nav-pill: #ffffff; --nav-pill-ink: #040a26;
  --shadow-card: 0 0 0 1px var(--rule), 0 14px 34px -20px rgba(0, 0, 0, 0.7);
  --tile-shadow: 0 0 0 1px var(--rule), 0 14px 34px -20px rgba(0, 0, 0, 0.7);
  --lift-shadow: 0 0 0 1px rgba(110, 141, 255, 0.4), 0 20px 44px -18px rgba(59, 99, 255, 0.55);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--rule-strong);
  --grid-line: rgba(170, 195, 255, 0.05);
  --glow-1: rgba(59, 99, 255, 0.35); --glow-2: rgba(110, 141, 255, 0.18);
}

/* ---------- Zemin: ince ızgara ve süzülen mavi ışıltılar (sabit, içeriğin arkasında) ---------- */
body { font-family: var(--font); background: var(--paper); }
body::before, body::after { content: ''; position: fixed; pointer-events: none; z-index: -1; }
body::before { inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000 30%, transparent 75%); }
body::after { width: 70vmax; height: 70vmax; top: -38vmax; right: -22vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-1) 0%, var(--glow-2) 35%, transparent 70%); filter: blur(10px);
  animation: nbz-orb 22s var(--ease) infinite alternate; }
@keyframes nbz-orb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.12); } }

/* ---------- Yazı ---------- */
.page-title, .panel-title, .kcard-value, .tile-value, .balance-value, .ra-stat b, .share-steps b, .set-title, .ra-how h2,
.login-form h1, .login-line, .group-title, .modal-head h2, .empty h3, .month-net b, .brand-name, .partner-id h1 {
  font-family: var(--font-display); }
.page-title { font-weight: 700; letter-spacing: -0.035em; }
.panel-title { font-weight: 650; letter-spacing: -0.02em; }
.kcard-value, .tile-value, .balance-value { letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Kartlar ve paneller: yumuşak köşe, üzerine gelince hafif yükselme ve mavi ışıltı ---------- */
.panel, .kcard, .tile, .set-card, .ra-store, .ra-stat, .share-steps > div, .store-card, .balance-card, .month-card, .ra-how {
  border-radius: var(--radius); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
.kcard:hover, .tile:hover, .set-card:hover, .ra-store:hover, .store-card:hover, .share-steps > div:hover, .ra-stat:hover {
  transform: translateY(-3px); box-shadow: var(--lift-shadow); }
[data-theme="dark"] .panel, [data-theme="dark"] .kcard, [data-theme="dark"] .tile, [data-theme="dark"] .set-card, [data-theme="dark"] .store-card,
[data-theme="dark"] .ra-store, [data-theme="dark"] .balance-card, [data-theme="dark"] .month-card {
  background: linear-gradient(180deg, rgba(14, 30, 92, 0.55) 0%, rgba(7, 17, 58, 0.9) 100%), var(--surface); }
[data-theme="dark"] .kcard-big.is-pos { background: radial-gradient(120% 120% at 0% 0%, rgba(59, 99, 255, 0.28), transparent 60%), var(--surface); }

/* ---------- Düğmeler: hap biçimi, ana düğmede parıltı süpürmesi ---------- */
.btn { border-radius: 999px; transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.2s, border-color 0.2s, color 0.2s; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn-primary { position: relative; overflow: hidden; background: linear-gradient(180deg, #4d72ff 0%, #3b63ff 100%); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(59, 99, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #5d7dff 0%, #4467ff 100%); box-shadow: 0 14px 30px -12px rgba(59, 99, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease); }
.btn-primary:hover:not(:disabled)::after { transform: translateX(120%); }
[data-theme="dark"] .btn-primary { background: #ffffff; color: #040a26; box-shadow: 0 10px 28px -12px rgba(140, 170, 255, 0.7); }
[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #ffffff; box-shadow: 0 16px 40px -12px rgba(140, 170, 255, 0.85); }
[data-theme="dark"] .btn-primary::after { background: linear-gradient(110deg, transparent 30%, rgba(59, 99, 255, 0.18) 50%, transparent 70%); }
.btn-secondary { background: var(--surface); border-color: var(--rule-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-ink); }
[data-theme="dark"] .btn-secondary { background: rgba(156, 184, 255, 0.06); border-color: var(--rule-strong); color: var(--ink); }
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-primary:disabled { background: var(--surface-3); color: var(--ink-4); box-shadow: none; }
[data-theme="dark"] .btn-primary:disabled { background: rgba(156, 184, 255, 0.12); color: var(--ink-4); }

/* ---------- Form alanları ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); outline: none; }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(4, 10, 38, 0.6); border-color: var(--rule-strong); }

/* ---------- Kenar menü: marka işareti mavi, seçili sayfa mavi ışıltılı hap ---------- */
.brand-mark, .sidebar .brand-mark { background: linear-gradient(135deg, #6e8dff 0%, #3b63ff 100%); color: #fff; box-shadow: 0 8px 20px -8px rgba(59, 99, 255, 0.8); }
.sidebar .nav-item { border-radius: 12px; transition: background 0.2s, color 0.2s, transform 0.25s var(--ease); }
.sidebar .nav-item:hover { transform: translateX(2px); }
.sidebar .nav-active { background: var(--nav-active); }
.sidebar .nav-active::before { background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.avatar { background: linear-gradient(135deg, #6e8dff, #3b63ff); color: #fff; }

/* ---------- Rozetler: ivme gibi noktalı hap (sayfa başı rozetleri ve giriş rozeti) ---------- */
.login-badge { border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Giriş: lacivert sahne, ızgara, süzülen ışıltılar, degrade başlık ---------- */
.login-side { position: relative; overflow: hidden; background: #040a26; }
.login-side::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(170, 195, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 195, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px; animation: nbz-grid 18s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%); }
.login-side::after { content: ''; position: absolute; width: 80%; aspect-ratio: 1; left: 10%; top: 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 99, 255, 0.55) 0%, rgba(59, 99, 255, 0.15) 40%, transparent 70%); filter: blur(20px);
  animation: nbz-breathe 8s ease-in-out infinite; }
.login-side > * { position: relative; z-index: 1; }
@keyframes nbz-grid { to { background-position: 44px 44px, 44px 44px; } }
@keyframes nbz-breathe { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.login-line { font-weight: 700; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffffff 0%, #dbe5ff 35%, #9cb8ff 75%, #6e8dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-points li { animation: nbz-rise 0.7s var(--ease) both; }
.login-points li:nth-child(2) { animation-delay: 0.08s; } .login-points li:nth-child(3) { animation-delay: 0.16s; }
.login-pulse { color: #6e8dff; filter: drop-shadow(0 0 10px rgba(110, 141, 255, 0.8)); }
.login-pulse path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: nbz-draw 2.4s var(--ease) 0.2s forwards; }
@keyframes nbz-draw { to { stroke-dashoffset: 0; } }
.login-form { animation: nbz-rise 0.7s var(--ease) both; }
.login-form h1 { letter-spacing: -0.035em; }

/* ---------- Giriş animasyonları: sayfa açılınca kartlar sırayla süzülerek gelir ---------- */
@keyframes nbz-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.page-intro, .main .panel, .kpi-top > *, .tiles > *, .set-grid > *, .ra-stores > *, .share-steps > *, .ra-stats > *, .stores-grid > *,
.store-cards > *, .ra-how, .finance-top > * { animation: nbz-rise 0.6s var(--ease) both; }
.kpi-top > :nth-child(2), .tiles > :nth-child(2), .set-grid > :nth-child(2), .ra-stores > :nth-child(2), .share-steps > :nth-child(2), .ra-stats > :nth-child(2), .finance-top > :nth-child(2) { animation-delay: 0.05s; }
.kpi-top > :nth-child(3), .tiles > :nth-child(3), .set-grid > :nth-child(3), .ra-stores > :nth-child(3), .share-steps > :nth-child(3), .ra-stats > :nth-child(3) { animation-delay: 0.1s; }
.kpi-top > :nth-child(4), .tiles > :nth-child(4), .set-grid > :nth-child(4), .ra-stores > :nth-child(4), .share-steps > :nth-child(4) { animation-delay: 0.15s; }
.tiles > :nth-child(n+5), .set-grid > :nth-child(n+5), .ra-stores > :nth-child(n+5) { animation-delay: 0.2s; }
/* Bağlantı satırları ve tablo satırları: hafif soldan */
@keyframes nbz-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.conn-row, .ra-row { animation: nbz-slide 0.5s var(--ease) both; }
.conn-row:nth-child(2), .ra-row:nth-child(2) { animation-delay: 0.04s; } .conn-row:nth-child(3), .ra-row:nth-child(3) { animation-delay: 0.08s; }
.conn-row:nth-child(4), .ra-row:nth-child(4) { animation-delay: 0.12s; } .conn-row:nth-child(n+5), .ra-row:nth-child(n+5) { animation-delay: 0.16s; }
/* Yeşil "Bağlı" ve durum noktaları nefes alır */
@keyframes nbz-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.fresh-dot:not(.is-bad) { animation: nbz-ping 2.4s ease-out infinite; }

/* ---------- Tablolar ---------- */
.table tbody tr { transition: background 0.2s; }
[data-theme="dark"] .table th { background: rgba(10, 23, 72, 0.7); }
[data-theme="dark"] .table tbody tr:hover td { background: rgba(59, 99, 255, 0.07); }

/* ---------- Modal: buzlu cam ---------- */
.modal { border-radius: 22px; animation: nbz-pop 0.35s var(--ease) both; }
@keyframes nbz-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Hareketi azaltmak isteyen kullanıcıda animasyon yok */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  body::after { animation: none; }
}
/* Giriş sayfaları: yönetici ve ortak aynı lacivert sahne; ortak girişi ışıltının tonuyla ayrılır */
.login-admin .login-side, .login-partner .login-side, [data-theme="dark"] .login-admin .login-side, [data-theme="dark"] .login-partner .login-side { background: #040a26; }
.login-partner .login-side::after { background: radial-gradient(circle, rgba(56, 189, 248, 0.42) 0%, rgba(59, 99, 255, 0.16) 40%, transparent 70%); }
.login-partner .login-pulse { color: #7dd3fc; filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.8)); }
.login-partner .login-badge { background: var(--brand-soft); color: var(--brand-ink); }
.login-partner .btn-primary, [data-theme="dark"] .login-partner .btn-primary { background: linear-gradient(180deg, #4d72ff 0%, #3b63ff 100%); color: #fff; }
.login-partner .btn-primary:hover:not(:disabled), [data-theme="dark"] .login-partner .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #5d7dff 0%, #4467ff 100%); }
.login-brand .brand-mark { background: linear-gradient(135deg, #6e8dff 0%, #3b63ff 100%); }

/* =====================================================================
   v17 — Yalnız gece görünümü + okunaklılık ve telefon cilası
   ===================================================================== */
/* Küçük yazılar 12 px'in altına inmez (e-posta, alt başlık, açıklama satırları) */
small, .brand-sub, .me-name small { font-size: max(12px, 0.8em); }
.table.months-table .pill { font-size: 12px; }
/* Sayfa başlığındaki "← Geri" bağlantısı telefonda rahat dokunulur */
@media (max-width: 900px) {
  .back-link { min-height: 40px; }
  .check input[type="checkbox"] { width: 20px; height: 20px; }
}
/* Tutarlar hiçbir tabloda ikiye bölünmez ("+" bir satırda, rakam öbür satırda kalmasın) */
.table.months-table td.num { white-space: nowrap; }
/* Kreatif kartı: içerik sağ kenara taşmaz (ızgara sütunu içeriğe göre genişlemesin) */
.creative-body { grid-template-columns: minmax(0, 1fr); }
/* Telefonda üst araç çubuğu gizli yatay kaydırma yerine alt satıra geçer: "Günlük" gibi seçenekler kesilmez */
@media (max-width: 900px) {
  .page-tools, .page-tools .filters { flex-wrap: wrap; overflow: visible; }
}
/* Yana kaydırılabilen tabloda sağ kenar solar: "devamı var" ipucu (sona gelince kalkar) */
.table-wrap[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
/* Maliyet geçerlilik seçimi: telefonda seçim tam genişlik, açıklama altında */
.inline-form.apply-mode { flex-wrap: wrap; }
@media (max-width: 640px) {
  .inline-form.apply-mode .select-wrap, .inline-form.apply-mode select { width: 100%; }
  .inline-form.apply-mode > .small { flex-basis: 100%; }
}
/* Tablodaki baş harf yuvarlakları: harfler ortada (td.cell-name > span kuralı display'i bozuyordu) */
td.cell-name > span.avatar { display: inline-grid; place-items: center; line-height: 1; }
/* Seçim düğmeleri (Aylık | Günlük, Kartlar | Tablo …): seçili olan marka mavisiyle belirgin */
.seg { background: rgba(156, 184, 255, 0.07); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 12px; }
.seg button { border-radius: 9px; color: var(--ink-3); }
.seg .seg-on, [data-theme="dark"] .seg .seg-on { background: rgba(59, 99, 255, 0.24); color: #fff; box-shadow: inset 0 0 0 1px rgba(110, 141, 255, 0.55); }
@media (max-width: 640px) {
  /* Telefonda seçenekler eşit genişlikte yan yana; uzun yazı düğmenin içinde alt satıra geçer, seçenek aşağı düşmez */
  .seg:not(.seg-icons) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 100%; }
  .seg:not(.seg-icons) button { justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
}
/* Alttaki "Vazgeç / Kaydet" çubuğu içeriğin üstüne binmez: düz, bulanık zemin */
.sticky-actions { background: rgba(4, 10, 38, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--rule); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); margin: 0 -16px; z-index: 5; }
/* Telefon menüsü: kapalıyken sol kenarda gölge çizgisi kalmaz; açıkken arkası belirgin karartılır */
@media (max-width: 900px) {
  .sidebar { box-shadow: none; }
  .menu-open .sidebar { box-shadow: var(--shadow-pop); }
  .menu-backdrop, [data-theme="dark"] .menu-backdrop { background: rgba(2, 6, 23, 0.7); }
}
.chat-input textarea { resize: none; }

/* =====================================================================
   v18 — Telefon açılışı, kompakt kartlar, hizalar, düğme kademeleri
   ===================================================================== */
/* Bilgi bantları telefonda iki satır; dokununca tamamı açılır */
@media (max-width: 640px) {
  .notice { font-size: 13.5px; padding-top: 4px; padding-bottom: 4px; margin-bottom: 8px; }
  .notice:not(.is-open) .notice-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .notice:not(.is-open) .notice-text .hint { display: none; }
}
/* Kreatifler telefonda kompakt: küçük kare görsel solda, ad + kâr + 3 ana rakam sağda */
@media (max-width: 640px) {
  .creatives { gap: 10px; }
  .creative { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .creative .thumb { aspect-ratio: 1 / 1; margin: 12px 0 12px 12px; border-radius: 12px; overflow: hidden; }
  .creative .thumb-kind { display: none; }
  .creative .thumb-badges { top: 4px; left: 4px; padding: 1px 5px; font-size: 11.5px; }
  .creative-body { padding: 10px 12px 12px; gap: 4px; }
  .creative-body .creative-reason { -webkit-line-clamp: 2; margin-bottom: 2px; }
  .creative-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 8px; }
  .creative-stats div:nth-child(n+4), .creative-spark { display: none; }
  /* Sırala / Hedef ROAS / Kartlar-Tablo / Toplu analiz: eşit yükseklikte 2 sütun */
  .creative-bar:has(.inline-field) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
  .creative-bar:has(.inline-field) > .seg[aria-label="Platform"], .creative-bar:has(.inline-field) > .muted { grid-column: 1 / -1; }
  .creative-bar .inline-field { display: grid; gap: 4px; }
  .creative-bar .inline-field select, .creative-bar .inline-field input { width: 100% !important; height: 44px; }
  .creative-bar:has(.inline-field) > .seg, .creative-bar:has(.inline-field) > .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 640px) {
  .notice:not(.is-open) .notice-text { line-height: 1.5; max-height: calc(3em + 3px); padding-bottom: 1px; }
  .notice:not(.is-open) .notice-text * { line-height: inherit; }
  .creative-stats dt { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Rakam kartları: etiket, değer, açıklama hep üstten dizilir; yan yana kartlarda değerler aynı hizada */
.kpi, .stat { align-content: start; }
@media (max-width: 640px) {
  /* Telefonda liste satırı: etiket ve açıklaması solda alt alta, değer sağda */
  .kpis > .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "s v"; align-items: center; column-gap: 12px; }
  .kpis > .kpi > span { grid-area: l; }
  .kpis > .kpi > b { grid-area: v; text-align: right; }
  .kpis > .kpi > small { grid-area: s; }
}
/* Özet: "Günlük net kâr" ile "Her ₺100 nereye gitti?" kartları masaüstünde aynı boyda biter */
@media (min-width: 901px) { .sum-grid { align-items: stretch; } }
/* Reklam hesapları: mağaza kartları komşusunun boyuna uzamaz (altta boşluk kalmaz) */
.ra-stores { align-items: start; }
/* Metrik kartları: masaüstünde 4'lü sıra, tek kart alt satırda yalnız kalmaz */
@media (min-width: 901px) {
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .tiles::after { display: none; }
  .tile { min-width: 0; }
}
@media (max-width: 640px) {
  /* Açıklaması olmayan satırda etiket ve değer aynı hizada */
  .kpis > .kpi:not(:has(> small)) { grid-template-areas: "l v"; }
}
/* Düğme kademeleri: birincil = beyaz hap, ikincil = çerçeveli, üçüncül (yazılı ghost: Taşı, Ayır, Geri al…) = mavi yazı + hafif zemin.
   Yalnız simgeli ghost düğmeler (× sil gibi) sade kalır. */
.btn-ghost:has(> span) { color: var(--link); background: rgba(110, 141, 255, 0.1); }
.btn-ghost:has(> span):hover:not(:disabled) { color: #fff; background: rgba(110, 141, 255, 0.2); }
/* Pasif düğme görünür kalır ama basılamayacağı belli olur */
.btn-primary:disabled, [data-theme="dark"] .btn-primary:disabled { background: rgba(255, 255, 255, 0.16); color: rgba(244, 247, 255, 0.6); box-shadow: none; opacity: 1; }
.btn-secondary:disabled { opacity: 0.55; }
/* Sekmeler: yalnız sağda devamı varken kenar solar (son sekmeye gelince tam görünür) */
.tabs:not([data-more]) { -webkit-mask-image: none; mask-image: none; }
.tabs[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
/* Asistan: telefonda yazma kutusu ekranın altında, ilk açılışta görünür */
@media (max-width: 900px) { .assistant { min-height: calc(100dvh - 150px); } }
/* Telefonda içerik kısaysa üst çubukla sayfa arasında boş şerit kalmaz */
@media (max-width: 900px) { .shell { align-content: start; } }
/* Veri durumu uyarısı telefonda derli toplu: küçük yazı, her konu kendi satırında, açıklama altında */
@media (max-width: 640px) {
  .status-hero { gap: 12px; padding: 16px; }
  .status-hero-icon { width: 36px; height: 36px; }
  .status-hero h2 { font-size: 18px; }
  .status-hero p { font-size: 14px; }
  .status-issues { padding-left: 16px; }
  .status-issues li { font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; }
  .status-issues li .muted { display: block; font-size: 13px; }
}
/* Satış yokken yazılan giderlerin listesi ("Her ₺100 nereye gitti?" kartı) */
.strip-nosales p { margin: 0 0 8px; }
.strip-costs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.strip-costs li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.strip-costs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.strip-costs-net { border-top: 1px solid var(--rule); padding-top: 6px; font-weight: 600; }

/* =====================================================================
   v19 — Kullanıcı testi düzeltmeleri
   ===================================================================== */
/* Telefonda özel tarih aralığı tam genişlikte kendi satırında; Filtre düğmesi ekran dışına itilmez */
@media (max-width: 640px) {
  .page-tools > .filters { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .page-tools .daterange { flex: 1 1 100%; order: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .page-tools .daterange input[type="date"] { width: 100%; min-width: 0; height: 44px; }
}
.link-inline { color: var(--link); text-decoration: underline; font-weight: 600; }
/* Hak ediş dönem dökümü */
.month-detail { display: grid; gap: 8px; }
.month-detail > .pill { justify-self: start; margin-bottom: 4px; }
.md-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.md-line b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-strong { font-weight: 650; color: var(--ink); }
.months-table .row-chevron { margin-left: 4px; opacity: 0.6; }
/* Ortağın son gelişmeleri */
.activity { list-style: none; margin: 0; padding: 4px 20px 16px; display: grid; gap: 2px; }
.activity li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.activity li:last-child { border-bottom: 0; }
.activity-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(110, 141, 255, 0.14); color: var(--link); }
.activity-paid .activity-icon, .activity-approved .activity-icon, .activity-settlement .activity-icon { background: var(--good-bg); color: var(--good-ink); }
.activity-rejected .activity-icon, .activity-disconnect .activity-icon { background: var(--bad-bg); color: var(--bad-ink); }
.activity-text { font-size: 14px; line-height: 1.45; }
.activity-side { text-align: right; white-space: nowrap; display: grid; justify-items: end; gap: 2px; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
/* Uzun ortak / mağaza adları sayfayı yana taşırmaz */
.store-card { min-width: 0; }
.store-card-head > div { flex: 1 1 auto; min-width: 0; }
.store-card-head h3 { overflow-wrap: anywhere; }
.store-card-head .pill { display: inline-block; flex: 0 1 auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card-head .pill .icon { vertical-align: -2px; margin-right: 4px; }
/* Yalnız telefonda görünen satır içi bilgi (ör. ortaklar listesinde kâr payları) */
.only-sm { display: none; }
@media (max-width: 640px) { .only-sm { display: block; } }
.split-mini { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
.split-mini b { color: var(--ink); }
.split-mini .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
/* Ortak mağazası Özet'inde kâr paylaşımı kartı */
.share-split { margin-bottom: 14px; }
.share-split .split { margin-top: 12px; }
/* Ödeme yöntemine göre (kapıda ödeme / kartla) */
.pay-table { table-layout: fixed; }
.pay-table th:first-child, .pay-table td:first-child { width: 40%; color: var(--ink-2); white-space: normal; }
.pay-table td { padding-top: 8px; padding-bottom: 8px; font-variant-numeric: tabular-nums; }
.pay-table tr.pay-strong td { font-weight: 650; color: var(--ink); }
.pay-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pay-dot-cod { background: #f5b942; }
.pay-dot-card { background: var(--link); }
.pay-panel > .pay-source { margin: 10px 20px 16px; }
.pay-source b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pay-panel > .pay-source { margin: 10px 14px 14px; } }
@media (max-width: 640px) {
  .pay-table th:first-child, .pay-table td:first-child { width: 36%; }
  .pay-table th, .pay-table td { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .pay-table th:first-child, .pay-table td:first-child { padding-left: 14px; }
  .pay-table th:last-child, .pay-table td:last-child { padding-right: 14px; }
}

/* Shopify ↔ kargo karşılaştırması */
.ship-check > .kpis, .ship-check > .ship-status { margin-left: 20px; margin-right: 20px; }
.ship-check > .kpis { margin-bottom: 12px; }
@media (max-width: 640px) { .ship-check > .kpis, .ship-check > .ship-status { margin-left: 14px; margin-right: 14px; } }
.ship-check .details { margin-top: 10px; }
.ship-check > .ship-shared { margin: -4px 20px 12px; }
.ship-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ship-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2, var(--surface)); }
.ship-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ship-check .panel-head { flex-wrap: wrap; gap: 8px; } }