/* ============================================================
   Döviz·Altın — arayüz sistemi
   Koyu varsayılan; [data-theme="light"] ve prefers-color-scheme
   ============================================================ */

:root {
  /* açık palet (temel) */
  --bg: #f4f3ef;
  --bg-grid: #e8e5dc;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-inset: #f1efe9;
  --ink: #1b1b1a;
  --ink-soft: #55524c;
  --ink-faint: #8a857b;
  --line: #e4e0d6;
  --line-strong: #d3cec1;
  --accent: #a9781f;
  --accent-ink: #ffffff;
  --accent-soft: #f2e6cf;

  /* piyasa alanı (domain) renkleri — altın=sarı(accent), hisse=mavi, fon=mor */
  --domain-gold: var(--accent);
  --domain-gold-soft: var(--accent-soft);
  --domain-stock: #2f6fed;
  --domain-stock-soft: #e5edfd;
  --domain-fund: #7c4dcf;
  --domain-fund-soft: #efe8fb;
  --domain-ipo: var(--ink-soft);
  --domain-ipo-soft: var(--surface-inset);

  --up: #157f3b;
  --up-bg: rgba(21, 127, 59, 0.12);
  --down: #c23616;
  --down-bg: rgba(194, 54, 22, 0.12);
  --shadow-sm: 0 1px 2px rgba(30, 25, 15, 0.06);
  --shadow-md: 0 1px 2px rgba(30, 25, 15, 0.06), 0 12px 28px -14px rgba(30, 25, 15, 0.18);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 7px;

  --step--1: 0.78rem;
  --step-0: 0.875rem;
  --step-1: 1rem;
  --step-2: 1.32rem;
  --step-3: 1.75rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 36px;

  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --topbar-h: 56px;
  --bottomnav-h: 60px;

  /* kategorik grafik paleti (dataviz skill referansı — validate edildi) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --series-other: #898781;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --bg: #0a0d13;
  --bg-grid: #10141d;
  --surface: #141924;
  --surface-2: #10151f;
  --surface-inset: #0c1017;
  --ink: #e8e9ec;
  --ink-soft: #9aa1ad;
  --ink-faint: #626a78;
  --line: #232a38;
  --line-strong: #313b4d;
  --accent: #e0a94b;
  --accent-ink: #1a1205;
  --accent-soft: #2a2416;

  --domain-gold: var(--accent);
  --domain-gold-soft: var(--accent-soft);
  --domain-stock: #5a9bff;
  --domain-stock-soft: #16233b;
  --domain-fund: #a78be0;
  --domain-fund-soft: #241a38;
  --domain-ipo: var(--ink-soft);
  --domain-ipo-soft: var(--surface-inset);

  --up: #3fb950;
  --up-bg: rgba(63, 185, 80, 0.14);
  --down: #f85149;
  --down-bg: rgba(248, 81, 73, 0.14);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.02), 0 22px 44px -22px rgba(0, 0, 0, 0.65);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
}

/* light'ı elle seçince prefers-dark'ı ez */
:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }

/* touch-action: manipulation — çift-tık/çift-dokunma yakınlaştırmasını kapatır (pinch-zoom
   erişilebilirlik için hâlâ açık kalır), gecikmeli "tap" olayını da kaldırır. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 100% 44px,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: none; }

h1, h2, h3 { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform .15s;
}
.skip-link:focus { transform: none; }

/* ---------- Üst bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  /* Ana ekrandan açılan PWA'da (viewport-fit=cover + apple-mobile-web-app-status-bar-style=
     black-translucent) web görünümü ekranın en tepesinden başlar — header iPhone çentik /
     Dynamic Island'ın ARKASINA düşüyor, Giriş vb. butonlar tıklanamıyordu. Üst güvenli alanı
     padding olarak ekle; tarayıcıda / standalone olmayan bağlamda env(...) = 0, fark yok. */
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top)
           max(clamp(var(--sp-4), 3vw, var(--sp-6)), env(safe-area-inset-right))
           0
           max(clamp(var(--sp-4), 3vw, var(--sp-6)), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Impersonation şeridi varsa güvenli alanı O taşır — topbar sade kalsın (çift boşluk olmasın). */
.impersonation-bar ~ .topbar {
  height: var(--topbar-h);
  padding-top: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  flex: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f2cd8a, var(--accent) 62%, #9c6a1e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.brand-word { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; }
.brand-word span { color: var(--accent); margin: 0 1px; }

.nav--top {
  display: flex;
  gap: var(--sp-1);
}
.nav--top .nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--step-0);
  white-space: nowrap;
}
.nav--top .nav-item:hover { color: var(--ink); background: var(--surface-2); }
.nav--top .nav-item.is-active { color: var(--accent); background: var(--accent-soft); }
.nav-ic { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* Orta genişlik: rol menüleriyle (Emanet/Yönetim) 6'ya çıkan üst menü taşmasın —
   etiketleri gizle, ikon-only'ye geç (her item'da title="" var). >1200px'de tam etiket. */
@media (max-width: 1200px) and (min-width: 721px) {
  .nav--top { gap: 2px; }
  .nav--top .nav-item { padding: 8px 11px; }
  .nav--top .nav-item .nav-label { display: none; }
}

.topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.live-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.live-status.is-live .live-dot {
  background: var(--up);
  box-shadow: 0 0 0 0 var(--up-bg);
  animation: pulse 2.4s infinite;
}
.live-status.is-down .live-dot { background: var(--down); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--up-bg); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.pf-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.15;
}
.pf-chip small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}
.pf-chip strong {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 1080px) {
  .live-status #liveStatusText { display: none; }
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn[aria-pressed="true"],
.icon-btn.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft, var(--surface-2));
}
.icon-btn-ic { width: 17px; height: 17px; fill: currentColor; }

/* ---------- "Görünüm" menüsü (topbar) ---------- */
.view-menu { position: relative; display: flex; }
.view-pop[hidden] { display: none; }   /* hidden özniteliği display:flex'i yenemez — açıkça kapat */
.view-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 240px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 70;
}
.view-row { display: flex; flex-direction: column; gap: 6px; }
.view-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.seg button {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 8px 6px;
  min-height: 38px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--accent); color: var(--accent-ink); }
/* "Tablo düzeni" yalnız mobilde etkili (kart CSS'i ≤620px) — geniş ekranda gizle */
@media (min-width: 621px) { .view-row--mobile { display: none; } }

/* ---------- Sayfa gövdesi ---------- */
.page {
  max-width: 1440px;   /* eskiden 1180px — kullanıcı isteği: masaüstünde daha çok kullanım alanı,
                           özellikle Pano'da (Gridstack 12 sütun) widget boyutlandırma daha rahat olsun */
  margin: 0 auto;
  padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6)) var(--sp-6);
}

.page-head {
  margin-bottom: var(--sp-5);
}
.page-head h1 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-head p {
  margin: var(--sp-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--step-0);
  max-width: 60ch;
}
.crumbs {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.crumbs span { margin: 0 4px; }

/* ---------- Kart ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card + .card { margin-top: var(--sp-4); }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.card-head h2 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-note {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.card-actions { margin-left: auto; display: flex; gap: var(--sp-3); }
.card-fineprint {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* ---------- Chip sekmeler / segment ---------- */
.chip-tabs {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.chip-tabs::-webkit-scrollbar { display: none; }
.chip-tab {
  flex: none;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip-tab:hover { color: var(--ink); }
.chip-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

.seg-control {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
}
.seg-control button {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  font-size: var(--step--1);
  cursor: pointer;
}
.seg-control button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- Veri tablosu ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table thead th:first-child { text-align: left; }
.data-table thead th.num { text-align: right; }
/* ad/etiket sütunu boşluğu yutar → sayısal sütunlar sağda sıkı kümelenir */
.data-table th:first-child,
.data-table td:first-child { width: 100%; }
.data-table tbody td {
  padding: 11px var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table tbody td:first-child { text-align: left; font-family: var(--sans); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--surface-2); }

.table-empty {
  padding: var(--sp-6) var(--sp-4) !important;
  text-align: center !important;
  color: var(--ink-faint);
  font-family: var(--sans) !important;
}
.table-empty.is-loading { font-style: italic; }

/* sıralanabilir başlık */
.data-table th[data-sort] { cursor: pointer; user-select: none; }
.data-table th[data-sort]:hover { color: var(--ink-soft); }
.data-table th[data-sort]::after {
  content: " ↕";
  font-size: 10px;
  opacity: 0.3;
}
.data-table th[data-sort]:hover::after { opacity: 0.6; }
.data-table th[data-sort].is-sorted { color: var(--accent); }
.data-table th[data-sort].is-sorted::after { content: " ↑"; opacity: 1; }
.data-table th[data-sort].is-sorted[data-dir="desc"]::after { content: " ↓"; opacity: 1; }

/* fiyat tablosu hücreleri */
/* .asset-name artık çoğu tabloda gerçek bir <a> (SEO/crawl için) — global a{color:accent}'a
   boyanmasın, satır zaten tıklanabilir/altı çizili olmasına gerek yok. */
.cell-asset .asset-name { font-weight: 600; color: var(--ink); text-decoration: none; }
/* İzleme listesi yıldızı (Piyasalar → Altın & Döviz tablosu) */
.price-table td.cell-asset { position: relative; }
.wl-star {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-faint);
  transition: color 0.12s;
}
.wl-star:hover { color: var(--accent); }
.wl-star.is-on { color: #e8b923; }
@media (max-width: 700px) {
  .wl-star { position: static; transform: none; float: right; }
}
.cell-asset .asset-code {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  font-family: var(--mono);
}
.delta { font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.delta.is-up { color: var(--up); }
.delta.is-down { color: var(--down); }
.delta.is-flat { color: var(--ink-faint); }
.delta.is-up::before { content: "▲ "; font-size: 8px; }
.delta.is-down::before { content: "▼ "; font-size: 8px; }

/* Fiyat artış/azalış tick'i — yalnız <td>'de değil, herhangi bir hücrede (widget, tek-fiyat, hisse) */
.tick.up { animation: flashUp .9s ease-out; border-radius: var(--radius-xs); }
.tick.down { animation: flashDown .9s ease-out; border-radius: var(--radius-xs); }
@keyframes flashUp { 0% { background: var(--up-bg); color: var(--up); } 100% {} }
@keyframes flashDown { 0% { background: var(--down-bg); color: var(--down); } 100% {} }

/* Altın/döviz canlı fiyat tablosu (stock-table hariç) */
.price-table:not(.stock-table) th:nth-child(2), .price-table:not(.stock-table) td:nth-child(2),
.price-table:not(.stock-table) th:nth-child(3), .price-table:not(.stock-table) td:nth-child(3),
.price-table:not(.stock-table) th:nth-child(4), .price-table:not(.stock-table) td:nth-child(4) {
  width: 1%; min-width: 88px; white-space: nowrap;
}
/* 5-6: widget hücreleri (gün aralığı çubuğu / trend) — sabit */
.price-table:not(.stock-table) th:nth-child(5), .price-table:not(.stock-table) td:nth-child(5) { width: 128px; }
.price-table:not(.stock-table) th:nth-child(6), .price-table:not(.stock-table) td:nth-child(6) { width: 82px; }

.cell-range { width: auto; }

.price-table:not(.stock-table) tbody tr { cursor: pointer; }
.range-track {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
.range-fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 3px;
}
.range-mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 9px;
  background: var(--accent);
  border-radius: 1px;
}

/* NOT: td'ye display:flex VERME — hücre tablo satır yüksekliğinden kopar,
   alt kenarı komşu hücrelerden yukarıda kalır. inline-block + vertical-align kullan. */
.cell-spark { text-align: right; white-space: nowrap; }
.spark {
  width: 64px;
  height: 30px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.spark path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- Sık (compact) tablo görünümü — topbar düğmesi ---------- */
:root[data-density="compact"] .data-table { font-size: var(--step--1); }
:root[data-density="compact"] .data-table thead th { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .data-table tbody td { padding-top: 5px; padding-bottom: 5px; }
/* ikinci satırı (kod · sektör) gizle → tek satırlık sıkı satırlar */
:root[data-density="compact"] .data-table .asset-code,
:root[data-density="compact"] .pf-table .asset-code { display: none; }
:root[data-density="compact"] .spark { height: 20px; }
:root[data-density="compact"] .cell-range { display: none; }
:root[data-density="compact"] .price-table:not(.stock-table) th:nth-child(5),
:root[data-density="compact"] .price-table:not(.stock-table) td:nth-child(5) { display: none; }
:root[data-density="compact"] .pf-table .w-bar { display: none; }
:root[data-density="compact"] .pf-table .col-pl .pl-pct { display: none; }
:root[data-density="compact"] .stock-b30 { font-size: 8px; padding: 0 3px; }
/* mobil kart modunda compact satır boşluğunu daraltır */
@media (max-width: 620px) {
  :root[data-density="compact"][data-table-view="card"] .data-table tr { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
}

.mini-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  font-size: var(--step--1);
  font-family: var(--sans);
  cursor: pointer;
}
.mini-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- Banka kurları tablosu ---------- */
/* not: .cell-inst bir <td>; flex kullanmıyoruz ki komşu sayısal hücrelerle
   dikey hizası (vertical-align) bozulmasın. */
.data-table td,
.data-table th { vertical-align: middle; }

.cell-inst { white-space: nowrap; }
.cell-inst .rank {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  min-width: 1.6em;
  text-align: right;
  margin-right: var(--sp-2);
  vertical-align: middle;
}
.cell-inst img,
.cell-inst .logo-fallback {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--surface-inset);
  object-fit: contain;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.inst-name { font-weight: 600; vertical-align: middle; }
.spread-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.spread-badge.is-tight { background: var(--up-bg); color: var(--up); }
.spread-badge.is-wide { background: var(--down-bg); color: var(--down); }

/* ---------- Portföy ---------- */
.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.stat {
  background: var(--surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.stat-value {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: var(--step--1); font-family: var(--mono); }
.stat-sub.is-up { color: var(--up); }
.stat-sub.is-down { color: var(--down); }
.stat-sub.is-flat { color: var(--ink-faint); }

/* içe/dışa aktar (sayfa başlığında) */
.pf-io { display: flex; gap: var(--sp-2); flex: none; }
.pf-io .btn { padding: 8px 14px; min-height: 38px; font-size: var(--step--1); }

/* KPI şeridi */
.pf-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi--hero { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.kpi-value {
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.kpi--hero .kpi-value { font-size: var(--step-3); color: var(--accent); }
.kpi-value.is-up { color: var(--up); }
.kpi-value.is-down { color: var(--down); }
.kpi-sub { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kpi-sub.is-up { color: var(--up); }
.kpi-sub.is-down { color: var(--down); }

/* Dağılım kartı */
.seg-control--sm { margin-left: auto; padding: 0; }
.seg-control--sm button { padding: 4px 10px; font-size: 11px; }

.alloc-body {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4);
  align-items: center;
}
.alloc-chart {
  position: relative;
  width: 220px;
  flex: none;
}
.alloc-chart canvas { display: block; }
.alloc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.alloc-center-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}
.alloc-center-value {
  font-weight: 700;
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.alloc-legend {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.alloc-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
}
.alloc-legend li:last-child { border-bottom: 0; }
.alloc-legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; }
.alloc-legend .lg-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-legend .lg-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.alloc-legend .lg-pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  min-width: 3.4em;
  text-align: right;
}

/* Varlıklar tablosu */
.pf-table th:not(:first-child),
.pf-table td:not(:first-child) { width: 1%; white-space: nowrap; }
.pf-table th:not(:first-child) { min-width: 80px; }
.pf-table .cell-asset .asset-name { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.pf-table .cell-asset .asset-name .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.pf-table .unit { color: var(--ink-faint); font-size: 0.85em; }
.pf-table .muted { color: var(--ink-faint); }
.pf-table .col-value { font-weight: 600; }
.pf-table .col-pl { line-height: 1.25; }
.pf-table .col-pl .delta { display: block; }
.pf-table .col-pl .pl-pct { font-size: var(--step--1); color: var(--ink-faint); }
.pf-table .col-weight { white-space: nowrap; }
.pf-table .w-num { display: block; text-align: right; font-weight: 600; }
.pf-table .w-bar {
  display: block;
  width: 72px;
  height: 6px;
  margin: 5px 0 0 auto;
  background: var(--surface-inset);
  border-radius: 999px;
  overflow: hidden;
}
.pf-table .w-bar span { display: block; height: 100%; border-radius: 999px; }
.pf-table .col-actions { white-space: nowrap; text-align: right; }
.pf-table .col-actions .mini-btn { margin-left: var(--sp-2); }
.pf-table .col-actions .link-btn { margin-left: var(--sp-3); }

.pf-add .pf-form { max-width: 640px; }

.link-btn {
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-size: var(--step--1);
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { color: var(--down); }
.link-btn.is-edit:hover { color: var(--accent); }

/* ---------- Form ---------- */
.pf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.field input,
.field select {
  font: inherit;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-height: 44px;
}
.field-with-suffix { position: relative; display: flex; align-items: center; }
.field-with-suffix .suffix {
  position: absolute;
  right: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-faint);
  pointer-events: none;
}
.form-actions { flex-direction: row; gap: var(--sp-2); }

.btn {
  font: inherit;
  font-weight: 600;
  padding: 11px var(--sp-4);
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn.is-ghost { background: none; color: var(--ink-soft); border-color: var(--line-strong); }

/* ---------- Araç kartları ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.tool-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.tool-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.tool-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.tool-icon svg { width: 22px; height: 22px; fill: var(--accent); }
.tool-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tool-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tool-summary { font-size: var(--step--1); color: var(--ink-soft); }
.tool-arrow { margin-left: auto; color: var(--ink-faint); flex: none; }
.tag-live {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--up-bg);
  color: var(--up);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(6, 8, 12, 0.6);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.modal-card .card-head h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--step-1); }
.chart-note {
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  font-size: 10.5px;
  color: var(--ink-faint);
}
#chartRanges { flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 150;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Alt navigasyon (mobil) ---------- */
.nav--bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.nav--bottom .nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 600;
}
.nav--bottom .nav-item span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav--bottom .nav-item .nav-ic { width: 21px; height: 21px; flex: none; }
.nav--bottom .nav-item.is-active { color: var(--accent); }

/* ---------- "Ana ekrana ekle" (A2HS) — install-prompt.js ---------- */
.a2hs {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-3));
  width: min(440px, calc(100vw - var(--sp-4) * 2));
  z-index: 120;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.a2hs.is-in { transform: translateX(-50%) translateY(0); opacity: 1; }
.a2hs-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.a2hs-head > div { min-width: 0; }
.a2hs-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--line) inset;
}
.a2hs-head strong { display: block; font-size: var(--step-0); margin-bottom: 3px; }
.a2hs-text { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; }
.a2hs-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.a2hs-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.a2hs-step svg { width: 16px; height: 16px; fill: var(--accent); flex: none; }
.a2hs-arrow { color: var(--ink-faint); font-weight: 700; }
.a2hs-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.a2hs-actions .btn { flex: 1; min-height: 40px; padding: 8px 14px; }
.a2hs-actions .btn.is-ghost { flex: 0 1 auto; }
.a2hs-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--ink-faint);
  cursor: pointer;
}
.a2hs-close:hover { background: var(--surface-2); color: var(--ink); }
.a2hs-close svg { width: 15px; height: 15px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .a2hs { transition: opacity .2s; transform: translateX(-50%); }
}

/* ============================================================
   Duyarlı
   ============================================================ */
@media (max-width: 1000px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .alloc-body { flex-direction: column; align-items: stretch; }
  .alloc-chart { width: 200px; align-self: center; }
}

@media (max-width: 720px) {
  .nav--top { display: none; }
  .nav--bottom { display: flex; }
  .page { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-5)); }
  .live-status #liveStatusText { display: none; }
  .pf-chip { display: none; }
  .page-head h1 { font-size: var(--step-2); }
}

@media (max-width: 620px) {
  /* Yazı tipleri bir tık küçülsün — bir bakışta bütünlük için. --step-* (rem tabanlı) her yerde
     kullanıldığından kök font-size'ı küçültmek tüm tipografiyi orantılı küçültür; --sp-* (px)
     dokunulmaz, yerleşim/dolgu geometrisi bozulmaz. */
  html { font-size: 15px; }

  /* iOS Safari, font-size'ı 16px'in altındaki bir input/select'e focus olununca sayfayı
     otomatik yakınlaştırır ("focus zoom") — kök font-size'ı küçülttüğümüz için --step-*
     tabanlı form elemanları artık 16px'in epey altına düşüyordu. Tüm form kontrolleri
     mobilde en az 16px kalsın (görünüşte fark az, davranış farkı büyük). */
  input, select, textarea { font-size: 16px !important; }

  /* ---- Tablo görünümü ----
     VARSAYILAN (satır/sütun): tablo gerçek tablo kalır, .table-scroll / .widget-scroll içinde
     yatay kayar — web'e benzer, kompakt. "Kart" modu (etiket solda / değer sağda) view-menu.js
     düğmesiyle opt-in: :root[data-table-view="card"]. */
  .data-table { font-size: var(--step--1); }
  .data-table thead th { padding: 8px 10px; font-size: 9.5px; }
  .data-table tbody td { padding: 9px 10px; white-space: nowrap; }
  .data-table .asset-code { white-space: nowrap; }
  .cell-range { max-width: 130px; }

  /* KART modu (opt-in): tabloları satır-kart'a çevir */
  :root[data-table-view="card"] .data-table thead { display: none; }
  :root[data-table-view="card"] .data-table,
  :root[data-table-view="card"] .data-table tbody,
  :root[data-table-view="card"] .data-table tr,
  :root[data-table-view="card"] .data-table td { display: block; width: 100%; }
  :root[data-table-view="card"] .data-table tr {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  :root[data-table-view="card"] .data-table tbody tr:hover td { background: transparent; }
  :root[data-table-view="card"] .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    padding: 3px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  :root[data-table-view="card"] .data-table td::before {
    content: attr(data-label);
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    text-align: left;
  }
  :root[data-table-view="card"] .data-table td:first-child { text-align: right; }
  :root[data-table-view="card"] .data-table td.cell-asset,
  :root[data-table-view="card"] .data-table td.cell-inst {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: var(--sp-2);
  }
  :root[data-table-view="card"] .data-table td.cell-asset::before,
  :root[data-table-view="card"] .data-table td.cell-inst::before { display: none; }
  :root[data-table-view="card"] .data-table td.cell-spark { justify-content: flex-end; }
  :root[data-table-view="card"] .cell-range { width: auto; flex: 1; max-width: 160px; }
  .table-empty { text-align: center !important; }
  :root[data-table-view="card"] .table-empty::before { display: none; }

  .stat-row { grid-template-columns: 1fr; }
  .pf-form { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }

  .pf-kpis { grid-template-columns: 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .kpi { padding: var(--sp-3); }
  .pf-io { width: 100%; }
  .pf-io .btn { flex: 1; }
  .alloc-legend li { grid-template-columns: 12px 1fr auto; }
  .alloc-legend .lg-val { display: none; }
}

@media (max-width: 380px) {
  .brand-word { font-size: 11px; }
}

/* ============================================================
   Pano (Gridstack) + Widget'lar + Paneller
   ============================================================ */
.page-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}
.dash-toolbar .btn { padding: 8px 12px; min-height: 38px; font-size: var(--step--1); }

.grid-stack { background: transparent; }
.grid-stack-item-content {
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.grid-stack.is-editing .grid-stack-item-content { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.grid-stack .grid-stack-placeholder > .placeholder-content {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
}
.grid-stack-item > .ui-resizable-handle { display: none; }
.grid-stack.is-editing .grid-stack-item > .ui-resizable-se { display: block; }

.widget-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.widget-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  flex: none;
}
.grid-stack:not(.is-editing) .widget-card-head { cursor: default; }
.widget-card-title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.widget-card:hover .widget-card-actions,
.grid-stack.is-editing .widget-card-actions { opacity: 1; }
.widget-card-actions .mini-btn { padding: 3px 7px; }
.widget-card-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.widget { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.widget-scroll { overflow: auto; flex: 1; min-height: 0; }
.widget-empty { padding: var(--sp-4); text-align: center; color: var(--ink-faint); font-size: var(--step--1); }
.widget-link {
  display: block;
  padding: 8px var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
  flex: none;
}
.widget-link:hover { color: var(--accent); }

/* kompakt tablo (widget içi) */
.widget-table { font-size: var(--step--1); }
.widget-table thead th { padding: 7px var(--sp-3); font-size: 9px; }
.widget-table tbody td { padding: 7px var(--sp-3); }
.widget-table .asset-name { display: block; font-weight: 600; }
.widget-table .asset-code { display: block; font-size: 9.5px; color: var(--ink-faint); font-family: var(--mono); }
.widget-table .cell-inst img { width: 18px; height: 18px; border-radius: 4px; }
.widget-table .inst-name { font-weight: 500; }

/* tekli fiyat */
.widget--single { padding: var(--sp-4); gap: var(--sp-2); }
.single-head { display: flex; flex-direction: column; }
.single-name { font-weight: 700; }
.single-code { font-size: 10px; color: var(--ink-faint); font-family: var(--mono); }
.single-price {
  font-family: var(--mono);
  font-size: var(--step-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.single-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-family: var(--mono);
}
.single-spark { width: 100%; height: 34px; margin-top: auto; }
.single-spark path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* hareket edenler */
.movers-cols { display: flex; flex: 1; min-height: 0; }
.movers-col { flex: 1; min-width: 0; padding: var(--sp-3); overflow: auto; }
.movers-col + .movers-col { border-left: 1px solid var(--line); }
.movers-title {
  margin: 0 0 var(--sp-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.movers-title.is-up { color: var(--up); }
.movers-title.is-down { color: var(--down); }
.widget--movers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.widget--movers li { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--step--1); }
.widget--movers li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget--movers li b { font-family: var(--mono); flex: none; }
.movers-note {
  margin: 0;
  padding: 6px var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--ink-faint);
  flex: none;
}
.delta.is-session { border-bottom: 1px dotted currentColor; }

/* portföy özeti */
.widget--pfsnap { padding: var(--sp-4); gap: var(--sp-3); }
.pfsnap-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfsnap-main .stat-value {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfsnap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.pfsnap-grid > div { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: var(--step--1); min-width: 0; }
.pfsnap-grid > div span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfsnap-grid .is-up { color: var(--up); }
.pfsnap-grid .is-down { color: var(--down); }
.pfsnap-grid .is-flat { color: var(--ink-faint); }

/* çevirici */
.widget--converter { padding: var(--sp-4); gap: var(--sp-2); }
.conv-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.conv-row { display: flex; gap: var(--sp-2); }
.conv-row input,
.conv-row select,
.conv-row output {
  font: inherit;
  padding: 9px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  min-height: 40px;
}
.conv-row input { flex: 1; min-width: 0; font-family: var(--mono); }
.conv-row output {
  flex: 1;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  background: var(--surface-inset);
}
.conv-row select { flex: 1.2; min-width: 0; }
.conv-swap { display: flex; justify-content: center; }
.conv-swap button {
  width: 32px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.conv-swap button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.conv-note { margin: 0; font-size: 10.5px; color: var(--ink-faint); }

/* kart seçici */
.picker-list { padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; }
.picker-cat {
  margin: var(--sp-3) 0 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.picker-cat:first-child { margin-top: 0; }
.picker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
}
.picker-item:hover { border-color: var(--line-strong); }
.picker-name { font-weight: 600; }
.picker-desc { font-size: var(--step--1); color: var(--ink-soft); }

/* kart ayarları formu */
.ws-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.ws-form .field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.ws-form .field input,
.ws-form .field select {
  font: inherit;
  padding: 10px var(--sp-3);
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.ws-actions {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-4);
}
.ws-actions .btn { flex: 1; }

/* paneller (WinBox) — bundle CSS'i JS ile sonradan enjekte ediyor, !important gerekli */
.winbox.dt-winbox { background: var(--surface-2) !important; border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); border-radius: 10px; }
.winbox.dt-winbox .wb-header { background: var(--surface-2) !important; color: var(--ink) !important; }
.winbox.dt-winbox .wb-title { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.winbox.dt-winbox .wb-body { background: var(--surface) !important; color: var(--ink); }
.winbox.dt-winbox .wb-control * { filter: invert(0.5); }
:root:not([data-theme="light"]) .winbox.dt-winbox .wb-control * { filter: invert(0.85); }
.panel-body { padding: 0; height: 100%; }
.panel-body .widget { height: 100%; }
.panel-loading { padding: var(--sp-5); text-align: center; color: var(--ink-faint); font-size: var(--step--1); }

/* araç sayfasına gömülü widget */
.tool-embed { padding: 0; }
.tool-embed .widget { min-height: 220px; }
.tool-embed .widget--converter,
.tool-embed .widget--movers { min-height: 0; }
.tool-embed .widget--movers { padding: var(--sp-2); }
.tool-embed--narrow { max-width: 520px; }

@media (max-width: 760px) {
  .dash-toolbar { width: 100%; }
  .dash-toolbar .btn { flex: 1; }
  .dash-toolbar #dashLock { display: none; } /* mobilde sürükle-boyutlandır kapalı */

  /* Mobilde Gridstack yerine düz DOM-sıralı akış */
  .grid-stack {
    display: flex !important;
    flex-direction: column;
    gap: var(--sp-3);
    height: auto !important;
  }
  .grid-stack > .grid-stack-item {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
  .grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: static !important;
    inset: auto !important;
  }
  .grid-stack .widget-card { height: auto; }
  .grid-stack .widget-scroll,
  .grid-stack .widget-card-body { max-height: 360px; }
}

/* ============================================================
   Fiyat grafiği modalı — Lightweight Charts (chart-modal.js)
   ============================================================ */
.modal--chart { padding: var(--sp-3); }
.chart-card {
  width: min(1240px, 96vw);
  max-width: 96vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;    /* .modal-card'ın overflow:hidden'ı taşan içeriği (küçük ekranda
                           toolbar satırları + grafik) kırpıyordu, ulaşmanın yolu yoktu. */
  overflow-x: hidden;
}

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
}
.chart-head-main { min-width: 0; }
.chart-head h2 {
  margin: 0;
  font-size: var(--step-1);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.chart-quote {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  margin-top: 3px;
}
.cq-price {
  font-size: var(--step-3);
  font-weight: 650;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cq-change {
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.cq-change.is-up { color: var(--up); }
.cq-change.is-down { color: var(--down); }

.chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
}
.chart-toolbar[hidden] { display: none; }
.chart-toolbar .seg-control { margin: 0; padding: 0; }
.chart-toolbar #chartTypes { margin-left: auto; }
.seg-control button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ikinci araç çubuğu satırı: göstergeler/çizim + karşılaştır — .sd-chip/.sd-field/.sd-select
   hisse detay modalıyla (stock-detail.js) birebir aynı, tek bir stil sistemi. */
.cm-toolbar-row {
  margin: var(--sp-2) var(--sp-4) 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.cm-toolbar-row[hidden] { display: none; }
.chart-wrap.is-drawing { cursor: crosshair; }

.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  height: min(64vh, 620px);
  padding: var(--sp-3) var(--sp-4) 0;
}
/* touch-action: pan-y — parmakla dikey sürükleme tarayıcının kendi sayfa kaydırmasına
   bırakılır (grafik onu yakalamaz, handleScroll.vertTouchDrag:false ile eşleşir); yatay
   sürükleme grafiğin kendi pan hattına gider. Bu olmadan iki jest çakışıp "stabil değil"
   hissi veriyordu. */
.lwc-host { width: 100%; height: 100%; min-height: 0; touch-action: pan-y; }
.lwc-host[hidden] { display: none; }
.chart-wrap .lwc-host canvas { display: block; }
.chart-wrap .lwc-host a#tv-attr-logo { display: none !important; }

.chart-empty {
  position: absolute;
  inset: var(--sp-3) var(--sp-4) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-size: var(--step--1);
  line-height: 1.5;
}
.chart-empty[hidden] { display: none; }

/* Üst-sol OHLC / fiyat okuması (crosshair ile güncellenir) */
.chart-legend {
  position: absolute;
  top: calc(var(--sp-3) + 6px);
  left: calc(var(--sp-4) + 8px);
  right: calc(var(--sp-4) + 8px);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  pointer-events: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  text-shadow: 0 1px 3px var(--surface), 0 0 2px var(--surface);
}
.chart-legend[hidden] { display: none; }
.chart-legend .cl-time { color: var(--ink-faint); }
.chart-legend .cl-ohlc b,
.chart-legend .cl-bid b { color: var(--ink-faint); font-weight: 600; margin-right: 1px; }
.chart-legend .cl-ohlc { color: var(--ink); }
.chart-legend .cl-ohlc.is-up { color: var(--up); }
.chart-legend .cl-ohlc.is-down { color: var(--down); }
.chart-legend .cl-bid { color: var(--up); }
.chart-legend .cl-spread {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--ink-faint);
  font-size: 10px;
}

@media (max-width: 620px) {
  .modal--chart { padding: 0; }
  .chart-card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .chart-head { padding-top: var(--sp-3); }
  .cq-price { font-size: var(--step-2); }
  .chart-toolbar #chartTypes { margin-left: 0; }
  .chart-wrap { height: auto; }   /* .chart-card (tam yükseklik, flex:1 1 auto ile dolduran) — sadece modal bağlamı */
  /* Enstrüman detay SAYFASI (.hd-card) modal değil — .chart-card'ın tam-yükseklik/flex bağlamı
     yok, yukarıdaki height:auto burada grafiği neredeyse 0 yüksekliğe çöktürüyordu (mumlar hiç
     görünmüyordu, sadece üstteki mutlak-konumlu legend kalıyordu). Sayfa için sabit/viewport-göreli
     yükseklik geri veriyoruz — .sd-chartwrap'ın (hisse detay sayfası) mobil davranışıyla aynı. */
  .hd-card .chart-wrap { height: 42vh; min-height: 260px; }
  .chart-legend {
    gap: 2px 8px;
    font-size: 10px;
  }
  .chart-legend .cl-spread { display: none; }
}

/* ============================================================
   Piyasalar hub — segment şeridi + Halka Arz
   ============================================================ */
.seg-strip {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg-strip::-webkit-scrollbar { display: none; }
.seg {
  flex: none;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) - 2px);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-faint);
  font-size: var(--step-0);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.seg:hover { color: var(--ink-soft); }
.seg.is-active { color: var(--ink); }
.seg-strip[data-domain="gold"]  .seg.is-active { border-bottom-color: var(--domain-gold); }
.seg-strip[data-domain="stock"] .seg.is-active { border-bottom-color: var(--domain-stock); color: var(--domain-stock); }
.seg-strip[data-domain="fund"]  .seg.is-active { border-bottom-color: var(--domain-fund); color: var(--domain-fund); }
.seg-strip[data-domain="ipo"]   .seg.is-active { border-bottom-color: var(--domain-ipo); }

.seg-soon {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.seg-soon h2 { font-size: var(--step-1); color: var(--ink); }
.seg-soon p { margin: var(--sp-2) auto 0; max-width: 44ch; color: var(--ink-soft); font-size: var(--step-0); }

/* ---- Halka arz ---- */
.ipo-list { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.ipo-empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--step-0);
}
.ipo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
}
.ipo-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.ipo-logo {
  width: 34px; height: 34px;
  border-radius: var(--radius-xs);
  object-fit: contain;
  background: #fff;
  flex: none;
}
.ipo-logo--fallback {
  display: grid;
  place-items: center;
  background: var(--surface-inset);
  color: var(--ink-faint);
  font-weight: 700;
}
.ipo-card-title { min-width: 0; flex: 1; }
.ipo-card-title h3 { font-size: var(--step-0); font-weight: 650; line-height: 1.3; }
.ipo-card-title h3 a { color: var(--ink); }
.ipo-card-title h3 a:hover { color: var(--domain-ipo); }
.ipo-card-sub {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.ipo-code {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--surface-inset);
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ipo-badge {
  flex: none;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-inset);
  color: var(--ink-soft);
}
.ipo-badge.is-live { background: var(--up-bg); color: var(--up); }
.ipo-badge.is-done { background: var(--domain-stock-soft); color: var(--domain-stock); }
.ipo-badge.is-ert { background: var(--down-bg); color: var(--down); }

.ipo-specs {
  margin: var(--sp-3) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;   /* satırdaki hücreler eşit yükseklik → alt çizgiler hizalı */
  gap: var(--sp-3) var(--sp-4);
}
.ipo-specs div {
  display: grid;
  grid-template-columns: minmax(88px, 40%) 1fr;
  align-content: start;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.ipo-specs dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.ipo-specs dd {
  font-size: var(--step--1);
  color: var(--ink);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ipo-drafts {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.ipo-drafts summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.ipo-draft-grid {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2);
}
.ipo-draft {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.ipo-draft:hover { color: var(--ink); border-color: var(--line-strong); }
.ipo-draft .ipo-logo { width: 20px; height: 20px; }
.ipo-draft-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipo-draft.is-ert .ipo-draft-name { text-decoration: line-through; opacity: 0.7; }

@media (max-width: 900px) {
  .ipo-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ipo-specs { grid-template-columns: 1fr; }
  .ipo-specs div { grid-template-columns: 44% 1fr; }
}

.tool-group-title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--sp-5) 0 var(--sp-3);
}
.tool-group-title:first-of-type { margin-top: 0; }

/* Halka arz widget'ı */
.widget--ipos .ipo-widget-list { list-style: none; margin: 0; padding: 0; }
.widget--ipos .ipo-widget-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.widget--ipos .ipo-widget-list li:last-child { border-bottom: 0; }
.widget--ipos img, .widget--ipos .logo-fallback {
  width: 22px; height: 22px; flex: none;
  border-radius: 5px; object-fit: contain; background: #fff;
}
.ipo-widget-name { flex: 1; min-width: 0; font-size: var(--step--1); font-weight: 550; line-height: 1.25; }
.ipo-widget-name small {
  display: block;
  color: var(--ink-faint);
  font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ipo-widget-price {
  flex: none;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Halka arz — özet bilgiler + sonuç tablosu */
.ipo-card.is-draft { background: var(--surface); }
.ipo-card.is-draft.is-ert .ipo-card-title h3 { text-decoration: line-through; opacity: 0.7; }

.ipo-sub { margin-top: var(--sp-3); }
.ipo-sub h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint); margin-bottom: var(--sp-2);
}
.ipo-alloc {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--step--1);
}
.ipo-alloc col.c-grp { width: 38%; }
.ipo-alloc col.c-num { width: calc(62% / 3); }
.ipo-alloc th, .ipo-alloc td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipo-alloc th { color: var(--ink-faint); font-weight: 600; text-align: left; }
.ipo-alloc td { text-align: left; }
.ipo-alloc th.num, .ipo-alloc td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ipo-alloc tbody tr:last-child td { border-bottom: 0; font-weight: 650; color: var(--ink); }

.ipo-ozet {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
  font-size: var(--step--1);
}
.ipo-ozet > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 650;
  list-style-position: inside;
}
.ipo-ozet dl {
  margin: var(--sp-2) 0 0;
  display: grid;
  gap: var(--sp-2);
}
.ipo-ozet dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.ipo-ozet dd { margin: 1px 0 0; color: var(--ink); line-height: 1.45; }
.ipo-note-src {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 10px;
}
.ipo-updated {
  margin: var(--sp-2) 0 0;
  font-size: 10px;
  color: var(--ink-faint);
}

/* Hisseler tablosu */
.stock-table th[data-sort].is-sorted { color: var(--domain-stock); }
.stock-b30 {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--domain-stock-soft);
  color: var(--domain-stock);
  font-size: 9px;
  font-weight: 700;
  vertical-align: 1px;
}
.seg-strip[data-domain="stock"] ~ .seg-panel .chip-tab.is-active {
  background: var(--domain-stock-soft);
  color: var(--domain-stock);
  border-color: color-mix(in srgb, var(--domain-stock) 34%, transparent);
}

/* Hisse arama + sektör filtresi */
.stock-filters {
  display: flex;
  gap: var(--sp-2);
  /* üstteki .chip-tabs'ın kendi border-bottom'u var — üst dolgu olmadan arama kutusu ona
     yapışık duruyor, iki çizgi üst üste binmiş gibi görünüyordu. */
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.stock-filters input,
.stock-filters select {
  height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
}
.stock-filters input { flex: 1; min-width: 0; }
.stock-filters input:focus,
.stock-filters select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--domain-stock) 50%, var(--line));
}
.stock-filters select { flex: none; max-width: 46%; cursor: pointer; }
@media (max-width: 560px) {
  .stock-filters { flex-wrap: wrap; }
  .stock-filters select { max-width: none; flex: 1; }
}

/* Hisse tablosu — satır tıklanabilir (detay) */
.stock-table tbody tr { cursor: pointer; }
.stock-table tbody tr:hover td { background: var(--surface-2); }
.stock-table th:not(:first-child),
.stock-table td:not(:first-child) { width: 1%; white-space: nowrap; }
.stock-table th:not(:first-child) { min-width: 74px; }
/* .asset-name artık gerçek bir <a> (SEO/crawl için) — link rengine boyanmasın, satır zaten tıklanabilir. */
.stock-table .cell-asset .asset-name { display: flex; align-items: center; color: var(--ink); }
.stock-table .cell-asset .asset-code {
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobilde: kart moduna girme — kompakt 3 sütun (Hisse · Son · Günlük %) */
@media (max-width: 620px) {
  .stock-table { display: table; width: 100%; }
  .stock-table thead { display: table-header-group; }
  .stock-table tbody { display: table-row-group; }
  .stock-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .stock-table th,
  .stock-table td { display: table-cell; width: auto; }
  .stock-table td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); text-align: right; }
  .stock-table td:first-child { text-align: left; }
  .stock-table td::before { display: none; }
  .stock-table th:nth-child(n+4),
  .stock-table td:nth-child(n+4) { display: none; }
  .stock-table .cell-asset .asset-code { max-width: 26ch; }
}
.stock-b30 { min-width: 20px; text-align: center; }

/* Altın/döviz canlı tablo — KART modu (opt-in): ikili sütun ızgara.
   Satır 1: enstrüman · Satır 2: Alış | Satış · Satır 3: % Değişim | Gün aralığı · Satır 4: Trend */
@media (max-width: 620px) {
  :root[data-table-view="card"] .price-table:not(.stock-table) tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
    row-gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-3) var(--sp-4);
  }
  :root[data-table-view="card"] .price-table:not(.stock-table) td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
    font-size: var(--step-0);
    white-space: normal;
  }
  :root[data-table-view="card"] .price-table:not(.stock-table) td::before {
    display: block;
    content: attr(data-label);
    margin-bottom: 2px;
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  :root[data-table-view="card"] .price-table:not(.stock-table) td.cell-asset {
    grid-column: 1 / -1;
    margin: 0 0 var(--sp-1);
  }
  :root[data-table-view="card"] .price-table:not(.stock-table) td.cell-asset::before { display: none; }
  :root[data-table-view="card"] .price-table:not(.stock-table) td.cell-spark {
    grid-column: 1 / -1;
    text-align: left;
  }
  :root[data-table-view="card"] .price-table:not(.stock-table) .spark { width: 100%; height: 40px; }
  :root[data-table-view="card"] .price-table:not(.stock-table) .cell-range { align-self: stretch; max-width: none; }
  :root[data-table-view="card"] .price-table:not(.stock-table) .range-track { margin-top: 6px; width: 100%; }
  /* compact mobil kart: gün aralığı gizli → trend'i % değişim ile eşle, satır boşluğu daralt */
  :root[data-density="compact"][data-table-view="card"] .price-table:not(.stock-table) tbody tr { row-gap: var(--sp-2); }
  :root[data-density="compact"][data-table-view="card"] .price-table:not(.stock-table) td.cell-spark { grid-column: auto; }
  :root[data-density="compact"][data-table-view="card"] .price-table:not(.stock-table) .spark { height: 26px; }
}

/* Portföy varlıklar tablosu — mobil kart: aynı ikili sütun ızgara deseni (yukarıdaki
   price-table ile aynı mantık — genel .data-table tek-sütun-yığın modu her satırda
   etiket+değer'i ayrı satıra düşürüp gereksiz uzun/dağınık görünüyordu). */
@media (max-width: 620px) {
  /* Portföy varlıklar tablosu — KART modu (opt-in). Varsayılan artık satır/sütun (genel
     .data-table mobil kuralları). */
  :root[data-table-view="card"] .pf-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
    row-gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-3) var(--sp-4);
  }
  :root[data-table-view="card"] .pf-table td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
    font-size: var(--step-0);
    white-space: normal;
  }
  :root[data-table-view="card"] .pf-table td::before {
    display: block;
    content: attr(data-label);
    margin-bottom: 2px;
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  :root[data-table-view="card"] .pf-table td.cell-asset {
    grid-column: 1 / -1;
    margin: 0 0 var(--sp-1);
  }
  :root[data-table-view="card"] .pf-table td.cell-asset::before { display: none; }
  :root[data-table-view="card"] .pf-table td.col-pl .pl-pct { display: block; margin-top: 1px; }
  :root[data-table-view="card"] .pf-table td.col-weight .w-bar { margin-top: 5px; }
  /* aksiyon düğmeleri — tek satır, üç eşit genişlikli, tutarlı buton görünümü */
  :root[data-table-view="card"] .pf-table td.col-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
  }
  :root[data-table-view="card"] .pf-table td.col-actions::before { display: none; }
  :root[data-table-view="card"] .pf-table td.col-actions .mini-btn,
  :root[data-table-view="card"] .pf-table td.col-actions .link-btn {
    flex: 1;
    margin-left: 0;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--step--1);
  }
  :root[data-table-view="card"] .pf-table td.col-actions .link-btn.is-edit:active,
  :root[data-table-view="card"] .pf-table td.col-actions .link-btn.is-edit:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  :root[data-table-view="card"] .pf-table td.col-actions .link-btn:not(.is-edit):active,
  :root[data-table-view="card"] .pf-table td.col-actions .link-btn:not(.is-edit):hover {
    color: var(--down);
    border-color: color-mix(in srgb, var(--down) 35%, transparent);
  }
}

/* ============================================================
   Hisse detay — Views/Piyasa/Hisse.cshtml + pages/hisse-detay.js (gerçek sayfa, modal değil;
   .sd-card burada kullanılmıyor ama alttaki .sd-* iç sınıfları sayfa da paylaşıyor)
   ============================================================ */
.sd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.sd-head-main { min-width: 0; }
.sd-head-actions { display: flex; gap: var(--sp-2); flex: none; }
.sd-head h2 {
  font-size: var(--step-1);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.sd-head h2 small { color: var(--ink-faint); font-weight: 400; font-size: var(--step-0); }
.sd-quote {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-2);
}
.sd-price { font-size: var(--step-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.sd-chg { font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-chg.is-up { color: var(--up); }
.sd-chg.is-down { color: var(--down); }
.sd-idx {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--domain-stock-soft);
  color: var(--domain-stock);
  font-size: 10px;
  font-weight: 700;
}

/* ---- araç çubuğu: 2 satır (zaman/çözünürlük, gösterge/çizim/karşılaştırma) + sabit legend satırı ---- */
.sd-toolbar {
  margin: var(--sp-3) var(--sp-4) 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sd-toolbar[hidden] { display: none; }
.sd-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  min-height: 32px;
}
.sd-toolbar-row + .sd-toolbar-row { margin-top: var(--sp-2); }

/* .seg-control'ün genel kullanım için tasarlanmış üst/kenar dolgusu (padding: var(--sp-3)
   var(--sp-4) 0) burada gereksiz — .sd-toolbar-row zaten kendi boşluğunu veriyor; sıfırlamazsak
   satır içeriği (aralık düğmeleri) diğer satırlara göre sağa kaymış görünüyordu. */
.sd-ranges { flex-wrap: wrap; margin: 0; padding: 0; }

.sd-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-width: 0;
  max-width: 100%;
}
.sd-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
  flex: none;
}
.sd-select {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-xs);
  padding: 5px 10px;
  font-size: var(--step--1);
  line-height: 1.3;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-select:hover { border-color: var(--line-strong); color: var(--ink); }
.sd-select:disabled { opacity: 0.4; cursor: not-allowed; }

.sd-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sd-chip {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-xs);
  padding: 5px 12px;         /* .seg-control button ile birebir aynı kutu — tek satırda hizalı görünsün */
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sd-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.sd-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.sd-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.sd-chip--ghost { background: none; border-style: dashed; }
.sd-divider {
  width: 1px;
  height: 24px;
  align-self: center;
  background: var(--line);
  margin: 0 2px;
}

.sd-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-3);
  min-height: 16px;
  margin-top: var(--sp-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-lg-ohlc b { color: var(--ink-faint); font-weight: 600; margin: 0 2px 0 6px; }
.sd-lg-ohlc.is-up { color: var(--up); }
.sd-lg-ohlc.is-down { color: var(--down); }
.sd-lg-cmp { color: var(--domain-fund, #7c4dcf); }
.sd-lg-cmp b { font-weight: 600; margin-right: 4px; }

.sd-chartwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  height: min(50vh, 440px);
  margin: var(--sp-2) var(--sp-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sd-chartwrap.is-drawing { cursor: crosshair; }
.sd-lwc { width: 100%; height: 100%; touch-action: pan-y; }
.sd-chart-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

.sd-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-4);
}
.sd-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.sd-stats div {
  display: grid;
  grid-template-columns: minmax(96px, 45%) 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sd-stats dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.sd-stats dd { font-size: var(--step--1); font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-loading { color: var(--ink-faint); font-size: var(--step--1); padding: var(--sp-2) 0; }

.sd-perf h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint); margin-bottom: var(--sp-2);
}
.sd-perf-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sd-perf-chip {
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: var(--surface-inset);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.sd-perf-chip b { color: var(--ink-faint); font-weight: 600; margin-right: 4px; }
.sd-perf-chip.is-up { color: var(--up); background: var(--up-bg); }
.sd-perf-chip.is-down { color: var(--down); background: var(--down-bg); }

.sd-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: 10.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

@media (max-width: 800px) {
  .sd-body { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sd-stats { grid-template-columns: 1fr; }
  .sd-toolbar-row { justify-content: flex-start; }
  .sd-field { width: 100%; }
  #sdRes { flex: 1 1 auto; width: 0; max-width: none; }
}
@media (max-width: 620px) {
  .sd-chartwrap { height: 42vh; min-height: 260px; }
  .sd-chart-legend { font-size: 10px; }

  /* Araç çubuğu — dar ekranda daha sık: küçük dolgu, sabit-genişlik yerine gerçek daralma. */
  .sd-toolbar { margin: var(--sp-2) var(--sp-3) 0; }
  .sd-toolbar-row { gap: var(--sp-2) 6px; }
  .sd-ranges.seg-control { gap: 5px; }
  .sd-ranges button { padding: 4px 8px; font-size: 11px; }
  .sd-chip { padding: 4px 9px; font-size: 11px; }
  .sd-field { gap: 5px; }
  .sd-field-label { font-size: 9px; }
  .sd-select { padding: 4px 7px; font-size: 11px; }
}


/* ============================================================
   Araç: Hisse Karşılaştır (pages/hisse-karsilastir.js)
   ============================================================ */
/* .card'ın genel overflow:hidden'ı (köşe kırpma) arama sonuçları popup'ını (.hc-results,
   kartın altına taşan absolute konumlu) kesiyordu — bu kart için özel olarak açıyoruz,
   içeriğinde köşeye yaslanan bir şey yok (tablo/görsel), kırpmaya ihtiyaç da yok. */
.hc-card { overflow: visible; }
.hc-picker { padding: var(--sp-4); position: relative; }
.hc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  min-height: 30px;
}
.hc-chips-empty { color: var(--ink-faint); font-size: var(--step--1); align-self: center; }
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hc-c, var(--accent));
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}
.hc-chip-chg { font-size: 10px; font-variant-numeric: tabular-nums; }
.hc-chip-chg.is-up { color: var(--up); }
.hc-chip-chg.is-down { color: var(--down); }
.hc-chip button {
  border: 0;
  background: var(--surface-inset);
  color: var(--ink-faint);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.hc-chip button:hover { color: var(--ink); background: var(--line); }

.hc-search { position: relative; max-width: 420px; }
.hc-search input {
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
}
.hc-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hc-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.hc-result {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 8px var(--sp-3);
  cursor: pointer;
}
.hc-result:hover { background: var(--surface-2); }
.hc-result-sym { font-weight: 700; font-size: var(--step--1); flex: none; }
.hc-result-name {
  color: var(--ink-faint);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-results-empty { padding: var(--sp-3); color: var(--ink-faint); font-size: var(--step--1); }

.hc-hint {
  margin: 0 var(--sp-4) var(--sp-4);
  color: var(--ink-faint);
  font-size: var(--step--1);
}

.hc-table th:first-child, .hc-table td:first-child { width: 1%; white-space: nowrap; }
.hc-th { border-top: 3px solid var(--hc-c, var(--accent)); }
.hc-th-name {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  font-size: 10px;
  max-width: 16ch;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-metric { text-align: left; color: var(--ink-soft); font-weight: 600; }

.hc-ranges { margin: 0; padding: 0; }
.hc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  min-height: 20px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hc-lg-item { display: inline-flex; align-items: center; gap: 5px; }
.hc-lg-item::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--hc-c, var(--accent));
  flex: none;
}
.hc-lg-item b { color: var(--ink-faint); font-weight: 600; }

.hc-chartwrap {
  position: relative;
  height: min(46vh, 420px);
  min-height: 280px;
  margin: var(--sp-2) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hc-lwc { width: 100%; height: 100%; touch-action: pan-y; }
.hc-chart-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

@media (max-width: 620px) {
  .hc-search { max-width: none; }
  .hc-chartwrap { height: 38vh; min-height: 240px; }
  .hc-th-name { max-width: 10ch; }
}

/* ============================================================
   Sağ-tık bağlam menüsü (contextmenu.js)
   ============================================================ */
.ctx-menu {
  position: fixed;
  z-index: 500;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.ctx-menu[hidden] { display: none; }
.ctx-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--ink);
  font-size: var(--step--1);
  text-align: left;
  cursor: pointer;
}
.ctx-item:hover { background: var(--surface-2); }

/* ============================================================
   Hisse/Enstrüman detay SAYFALARI (Views/Piyasa/Hisse.cshtml, Enstruman.cshtml)
   Modal değil — gerçek/SEO'lu sayfa. İçerideki .sd-* sınıfları hisse detay modalıyla
   (artık kaldırıldı) aynı — tek stil sistemi, tek fark: .sd-card yerine düz .card,
   viewport-göreli yükseklik/overflow sınırı yok (sayfa doğal akışında).
   ============================================================ */
.hd-code { color: var(--ink-faint); font-weight: 400; font-size: var(--step-1); margin-left: 6px; }
.hd-card:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 0;
  padding: var(--sp-4);
}

/* ============================================================
   Kimlik: giriş sayfası + topbar kullanıcı menüsü
   ============================================================ */
.auth-wrap {
  min-height: calc(100dvh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.auth-head { text-align: center; margin-bottom: var(--sp-5); }
.auth-head .brand-mark {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-3);
}
.auth-head h1 { font-size: var(--step-3); margin: 0 0 var(--sp-2); }
.auth-head p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

.auth-providers { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-providers form { display: block; }
.auth-provider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 10px var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.auth-provider:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.auth-provider-ic { display: inline-flex; }
.auth-provider--apple { background: #000; border-color: #000; color: #fff; }
.auth-provider--apple:hover { background: #1a1a1a; border-color: #1a1a1a; }
:root[data-theme="light"] .auth-provider--apple { background: #000; color: #fff; }

.auth-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--ink-faint);
  font-size: var(--step--2, 11px);
}
.auth-sep::before,
.auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-form .field input { min-height: 44px; }
.auth-remember {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.auth-remember input { width: 16px; height: 16px; }
.auth-submit { width: 100%; }
/* MVC validation-summary boşken div yine de <ul><li> ile render olur — yalnız
   gerçek hata varken (.validation-summary-errors) kutuyu göster. */
.auth-errors { display: none; }
.auth-errors.validation-summary-errors {
  display: block;
  background: color-mix(in srgb, var(--down, #c0392b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--down, #c0392b) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1);
}
.auth-errors.validation-summary-errors ul { margin: 0; padding-left: var(--sp-4); }
.auth-errors.validation-summary-errors ul:empty,
.auth-errors.validation-summary-errors li[style*="display:none"] { display: none; }
.auth-foot {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--2, 11px);
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}

/* topbar kullanıcı çipi + menü */
.user-menu { position: relative; }
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font: inherit;
  max-width: 180px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.user-chip:hover { border-color: var(--line-strong); }
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: var(--step--1);
  flex-shrink: 0;
}
.user-name {
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
  padding: var(--sp-2);
  z-index: 60;
}
.user-pop-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-2);
}
.user-pop-head small { color: var(--ink-faint); font-size: var(--step--2, 11px); }
.user-pop a,
.user-pop-signout {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--step--1);
  padding: 9px var(--sp-3);
  border-radius: var(--radius-xs);
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.user-pop a:hover,
.user-pop-signout:hover { background: var(--surface-2); }
.user-pop-signout { color: var(--down, #c0392b); }

@media (max-width: 640px) {
  .user-name { display: none; }
  .user-chip { padding: 5px; }
  .auth-login-link { padding: 8px 12px; min-height: 38px; }
}

/* ============================================================
   Yönetim + Emanet: alt-menü, formlar, tablolar, rozetler
   (mevcut tasarım diliyle — .card / .field / .btn / .data-table)
   ============================================================ */

/* ---- alt sekme menüsü ---- */
.subnav {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-item {
  flex: none;
  padding: 10px 14px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav-item:hover { color: var(--ink); }
.subnav-item.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- bildirim şeridi ---- */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.flash--ok {
  background: color-mix(in srgb, var(--up) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--up) 40%, transparent);
  color: color-mix(in srgb, var(--up) 75%, var(--ink));
}
.flash--err {
  background: color-mix(in srgb, var(--down) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--down) 40%, transparent);
  color: color-mix(in srgb, var(--down) 78%, var(--ink));
}

/* ---- istatistik kartları (KPI ile aynı dil) ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stat-card .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.stat-card .v {
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-card .s { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- rozet ---- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--surface-inset);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge--ok {
  background: color-mix(in srgb, var(--up) 14%, transparent);
  color: color-mix(in srgb, var(--up) 78%, var(--ink));
  border-color: color-mix(in srgb, var(--up) 38%, transparent);
}
.badge--err {
  background: color-mix(in srgb, var(--down) 14%, transparent);
  color: color-mix(in srgb, var(--down) 80%, var(--ink));
  border-color: color-mix(in srgb, var(--down) 38%, transparent);
}
.badge--muted { opacity: 0.75; }

/* ---- anahtar/değer listesi (tablo yerine) ---- */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 10px var(--sp-5);
  padding: var(--sp-4);
  margin: 0;
  font-size: var(--step-0);
}
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; color: var(--ink); min-width: 0; word-break: break-word; }
.kv dd .badge { vertical-align: middle; }

/* ---- metin ağırlıklı tablo (kullanıcı/fiş/hareket listeleri) ---- */
.list-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.list-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.list-table td {
  padding: 13px var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.list-table tbody tr:last-child td { border-bottom: 0; }
.list-table tbody tr:hover td { background: var(--surface-2); }
.list-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-table .shrink { width: 1%; white-space: nowrap; }
.list-table .t2 { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.list-table td > form { display: inline-block; }
.list-table td > form + form { margin-left: var(--sp-3); }
.list-table .empty { text-align: center; color: var(--ink-faint); padding: var(--sp-6) var(--sp-4); }
.list-table a { color: var(--ink); font-weight: 600; text-decoration: none; }
.list-table a:hover { color: var(--accent); }
.list-table a.plain { font-weight: 400; }

/* ---- STANDART: her .list-table bir .table-scroll içinde olmalı ----
   Dar ekranda hücreler sıkışıp satırlar uzamaz; tablo yatay KAYAR, tüm bilgi görünür kalır.
   İstisna: uzun serbest metin için hücreye .wrap ver (Kayıtlar "Detay" gibi). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-scroll > .list-table { min-width: 100%; }
.table-scroll > .list-table th,
.table-scroll > .list-table td { white-space: nowrap; }
.table-scroll > .list-table th.wrap,
.table-scroll > .list-table td.wrap { white-space: normal; min-width: 14ch; }
.list-table .t2 { white-space: nowrap; }

@media (max-width: 620px) {
  .list-table { font-size: var(--step--1); }
  .list-table th { padding: 8px 10px; font-size: 9.5px; letter-spacing: 0.05em; }
  .list-table td { padding: 9px 10px; }
  .list-table .t2 { font-size: 10.5px; margin-top: 1px; }
  .list-table .badge { padding: 1px 6px; font-size: 9.5px; }
  .list-table td > form + form { margin-left: var(--sp-2); }
}

/* ---- form ızgarası (tek dil: .card > .card-head + form.form-grid) ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  max-width: 880px;   /* geniş ekranda alanlar okunası genişlikte kalsın */
}
.form-grid .form-grid { max-width: none; }
.form-grid > .full { grid-column: 1 / -1; }
.form-grid .field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.form-grid .field > label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.form-grid textarea { min-height: 76px; resize: vertical; }
.form-grid .hint { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-faint); margin: 0; }
.form-grid hr { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--line); margin: var(--sp-1) 0; }
/* [hidden] display:flex/grid'i yener → koşullu alanlar için açıkça gizle */
.form-grid [hidden],
.form-grid .field[hidden],
.parca [hidden] { display: none !important; }

/* satır içi buton grubu (form içi ve dışı) */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.form-grid .btn-row { grid-column: 1 / -1; }
.card > .btn-row { padding: var(--sp-4); }
.card > .kv + .btn-row { padding-top: 0; }
.btn-danger { background: var(--down); border-color: var(--down); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.link-danger { color: var(--down); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.link-danger:hover { text-decoration: underline; }

/* checkbox / radio grupları */
.choice-set {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.choice-set > legend,
.choice-set > .legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  padding: 0;
  margin-bottom: var(--sp-1);
  width: 100%;
}
.choice-set.bare { border: 0; padding: 0; gap: var(--sp-3) var(--sp-5); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink);
  cursor: pointer;
}
.choice input { width: 16px; height: 16px; min-height: 0; flex: none; }

/* iç içe form ızgarası (detay bölümü) — dış boşluğu tekrarlama */
.form-grid .form-grid { padding: var(--sp-3) 0 0; }
.form-grid details.full > summary { cursor: pointer; }
.parca-tpl .section-head .parca-sil { flex: none; align-self: center; }

/* nested içerik için gölgesiz bölüm (card iç içe koyma) */
.section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.section + .section { margin-top: var(--sp-3); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.section-head strong { font-size: var(--step-0); }

/* arama kutusu */
.searchbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.searchbar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  min-height: 42px;
  padding: 9px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

/* sayfalama */
.pager { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-4); }
.pager a {
  min-width: 36px;
  text-align: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
}
.pager a:hover { border-color: var(--line-strong); color: var(--ink); }
.pager a.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- giriş sayfası hata kutusu (form-grid ile de kullanılır) ---- */
.form-grid .auth-errors { grid-column: 1 / -1; }

/* ---- Emanet: fotoğraf ---- */
.photos { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.photos.is-drop { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.photo { position: relative; }
.photo img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); display: block;
}
.photo-del {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--surface); background: var(--down); color: #fff;
  font: 700 12px/1 var(--sans); cursor: pointer;
}
.photo-add {
  width: 76px; height: 76px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; color: var(--ink-soft); cursor: pointer;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Emanet: parça satırı (fiş detayında) ---- */
.parca {
  border-top: 1px solid var(--line);
}
.parca:first-child { border-top: 0; }
.parca.is-delivered { opacity: 0.55; }
.parca-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-1);
}
.parca-head .t { font-weight: 600; }
.parca-head .s { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.parca-body { padding: 0 var(--sp-4) var(--sp-3); display: grid; grid-template-columns: 1fr minmax(0, auto); gap: var(--sp-4); align-items: start; }
.parca-body .kv { padding: var(--sp-1) 0; grid-template-columns: minmax(96px, max-content) 1fr; gap: 5px var(--sp-4); }
.parca-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4); border-top: 1px dashed var(--line);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .parca-body { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
  .kv dt { margin-top: var(--sp-2); }
  .kv dt:first-child { margin-top: 0; }
}

/* ============================================================
   Faz 5: filtre çubuğu · toplu işlem · sayfalama · impersonation · token
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  align-items: center;
}
.filter-bar input,
.filter-bar select {
  font: inherit;
  font-size: var(--step--1);
  min-height: 34px;
  padding: 6px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
/* iOS'un şişik <input type=search> / <input type=date> yüksekliğini kes */
.filter-bar input[type="search"]::-webkit-search-decoration,
.filter-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.filter-bar input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.filter-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}
.filter-bar input[type="search"] { flex: 1 1 200px; min-width: 0; }
.filter-bar .btn { min-height: 34px; padding: 6px 12px; font-size: var(--step--1); }

/* sıralanabilir başlık linkleri */
.list-table th a {
  color: var(--ink-faint);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.list-table th a:hover { color: var(--ink); }

/* toplu işlem çubuğu */
.bulk-bar[hidden] { display: none; }
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}
.bulk-bar select {
  font: inherit;
  min-height: 34px;
  padding: 5px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink);
}
.bulk-bar .btn { min-height: 34px; padding: 5px 12px; font-size: var(--step--1); }

/* sayfalama satırı */
.pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.pager-count { font-size: var(--step--1); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* kopyalanabilir link kutusu */
.token-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-4) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.token-box code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink-soft);
}
.token-box .btn { flex: none; min-height: 32px; padding: 4px 12px; }

/* kayıt detayı açılır */
.list-table details summary { cursor: pointer; color: var(--ink); }
.list-table details pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* impersonation şeridi */
.impersonation-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top)) var(--sp-4) 8px;
  background: #b45309;
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
}
.impersonation-bar form { display: inline; }
.impersonation-bar button {
  font: inherit;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}
.impersonation-bar button:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 640px) {
  /* dikey yığın yerine 2'li ızgara — daha yoğun, daha az dikey yer */
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .filter-bar input, .filter-bar select { width: 100%; min-width: 0; }
  .filter-bar input[type="search"] { grid-column: 1 / -1; }
  .filter-bar .btn { grid-column: span 1; }
}

/* fiyat modu toggle (Alış | Orta) — sayfa başlığında */
.price-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}
.price-mode-toggle button {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 7px 12px;
  min-height: 38px;
  border: 0;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.price-mode-toggle button + button { border-left: 1px solid var(--line); }
.price-mode-toggle button.is-active { background: var(--accent-soft); color: var(--accent); }

/* Emanet: telefondan çekim QR modalı */
.qr-card { width: min(400px, 100%); position: relative; padding: var(--sp-5); text-align: center; }
.qr-card h3 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.qr-card p { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--sp-4); }
.qr-card #qrCanvas { display: inline-block; padding: 12px; background: #fff; border-radius: var(--radius-sm); }
.qr-card #qrCanvas img, .qr-card #qrCanvas canvas { display: block; }
.qr-card .token-box { margin: var(--sp-4) 0 0; }
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  font: 700 18px/1 var(--sans); cursor: pointer;
}
.modal-close:hover { color: var(--ink); border-color: var(--line-strong); }