:root {
  --bg: #0a0c10;
  --panel: #161a22;
  --panel-2: #1c212b;
  --border: #2c313d;
  --text: #f3f5f7;
  --muted: #a3aabb;
  --accent: #4a5fe0;
  --accent-2: #7c8cf0;
  --gold: #d9a94e;
  --up: #26a69a;
  --down: #ef5350;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p {
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}

/* Hiçbir yerde genel bir <a> rengi tanımlı DEĞİLDİ — düz linkler (ör. Piyasa
   Haberleri başlıkları) tarayıcının varsayılan rengine düşüyordu; özellikle
   "ziyaret edilmiş" linkler için varsayılan koyu mor, bu koyu temada neredeyse
   hiç okunmuyordu (kullanıcı geri bildirimi: "haber başlıkları renk olarak
   okunmayacak şekilde"). Daha spesifik seçiciler (nav a, .chip vb.) zaten
   kendi rengini tanımladığı için bu genel kural onları etkilemiyor. */
a {
  color: var(--accent-2);
}

a:visited {
  color: var(--accent-2);
}

a:hover {
  color: var(--accent);
}

.mono-data {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

header h1 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
  line-height: 0;
}

.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

header a {
  color: inherit;
  text-decoration: none;
}

main {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Analizler — geniş tablolar (özellikle "En Ucuz Hisseler" 11 sütun, "Sinyaller"
   sütunu min-width:340px) standart 1100px'e sığmayıp yatay kaydırma çubuğu
   çıkarıyordu. Bkz. static/analizler.html <main class="wide-page">. */
main.wide-page {
  max-width: 1560px;
}

.breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb > span {
  margin: 0 2px;
}

main.dashboard-layout {
  max-width: 1400px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.dashboard-content {
  flex: 1;
  min-width: 0;
}

.dashboard-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}

.render-count {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 14px 0;
}

@media (max-width: 960px) {
  main.dashboard-layout {
    flex-direction: column;
  }
  .dashboard-sidebar {
    width: 100%;
    position: static;
    /* Masaüstünde sağ kenarda duruyor; mobilde en altta, uzun ve sonsuz
       kaydırmalı hisse tablosunun ardında kaybolmasın diye tablodan önce,
       en üste alıyoruz. */
    order: -1;
  }
}

.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

@media (max-width: 640px) {
  header {
    padding: 12px 14px;
  }

  header h1 {
    font-size: 16px;
  }

  .brand-logo {
    height: 22px;
  }

  nav {
    gap: 6px 12px !important;
    font-size: 13px;
  }

  main {
    padding: 14px;
  }

  #stocks-table,
  #calendar-table,
  #users-table {
    min-width: 620px;
  }

  .col-company,
  .col-sector {
    display: none;
  }

  #stocks-table {
    min-width: 340px;
  }
}

.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Tarama tablosunda "Sektör"/"Pazar" gibi değişken uzunlukta metinler satır
   sarmasına (2. satıra taşmaya) neden olup satır yüksekliklerinin
   birbirinden farklı görünmesine yol açıyordu — tek satıra sabitlenip
   taşan kısım "..." ile kesiliyor, tam metin `title` ile üstüne gelince
   (native tarayıcı tooltip'i) gösteriliyor. */
.col-sector, .col-company {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input, select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

input[type="text"] {
  flex: 1;
  min-width: 200px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

th {
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: #1d212b;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }

.status {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.detail-header h2 {
  margin: 0 0 4px 0;
}

.price-block {
  text-align: right;
  position: relative;
}

.price-block .price {
  font-size: 28px;
  font-weight: 700;
}

.price-currency {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
}

.last-update {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.ratios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.ratio-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.ratio-card .label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.ratio-card .value {
  font-size: 18px;
  font-weight: 600;
}

/* Dolaşımdaki Pay gibi yavaş (canlı çağrıya bağlı) alanlar için "yükleniyor"
   göstergesi — çıplak boşluk/"-" yerine veri gelene kadar nokta nokta
   hareket eden bir animasyon (kullanıcı geri bildirimi: "yavaş gelmek
   zorundaysa nokta nokta yükleniyor gibi hareket etsin"). */
.skeleton-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.skeleton-dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
  font-style: normal;
  animation: skeleton-dots-bounce 1s ease-in-out infinite;
}

.skeleton-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.skeleton-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes skeleton-dots-bounce {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.market-status-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.market-status-badge.open {
  background: rgba(38, 166, 154, 0.15);
  color: var(--up);
}

.market-status-badge.closed {
  background: rgba(139, 144, 156, 0.15);
  color: var(--muted);
}

.key-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.key-stats-row .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.key-stats-row .stat .label {
  color: var(--muted);
  font-size: 11px;
}

.key-stats-row .stat .value {
  font-weight: 600;
}

.page-tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.tab-page {
  display: none;
}

.tab-page.active {
  display: block;
}

.signal-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  flex-wrap: wrap;
}

.signal-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 6px solid var(--border);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
}

.signal-gauge.buy {
  border-color: var(--up);
  color: var(--up);
}

.signal-gauge.sell {
  border-color: var(--down);
  color: var(--down);
}

.signal-gauge.neutral {
  border-color: #f0b429;
  color: #f0b429;
}

.signal-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  min-width: 200px;
}

.signal-breakdown .signal-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.signal-breakdown .signal-row strong {
  color: var(--text);
}

.signal-breakdown .signal-buy {
  color: var(--up);
}

.signal-breakdown .signal-sell {
  color: var(--down);
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.profile-info-grid .stat .label {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 2px;
}

.profile-info-grid .stat .value {
  font-weight: 600;
  font-size: 14px;
}

.chart-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

/* Hisse detay sayfası: geniş ekranlarda içerik 1100px'de kilitli kalıp
   kenarlarda boş yer bırakmasın diye daha geniş bir sınır + iki sütunlu
   (grafik/açıklama solda, anahtar istatistikler/benzer hisseler sağda)
   düzen kullanıyoruz — TW'nin sembol sayfasındaki gibi. */
body.stock-page main {
  max-width: 1600px;
}

.overview-columns {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

.overview-main,
.overview-sidebar {
  min-width: 0;
}

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

.mini-chart-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 8px 0;
  margin-bottom: 20px;
}

#mini-chart-container {
  width: 100%;
}

/* Ayrı "Tam Grafik" sayfası (chart.html) — TW'nin /chart/ sayfası gibi,
   grafik dışındaki bölümleri gizleyip grafiğe tüm genişliği veriyoruz. */
body.chart-page main {
  max-width: none;
  padding: 20px 24px;
}

body.chart-page #breadcrumb,
body.chart-page #page-tabs,
body.chart-page .mini-chart-panel,
body.chart-page #key-stats-section,
body.chart-page #valuation-history-section,
body.chart-page #health-scores-section,
body.chart-page #valuation-section,
body.chart-page #profile-section,
body.chart-page #compare-section,
body.chart-page #fullscreen-btn,
body.chart-page .tab-page[data-page="technicals"],
body.chart-page .tab-page[data-page="financials"],
body.chart-page .tab-page[data-page="news"] {
  display: none !important;
}

/* Üst şerit TW'deki gibi ince bir uygulama çubuğuna dönüşüyor: sadece
   logo, sembol arama ve kullanıcı — Tarama/Sektörler/Takvim/Akademi
   linkleri bu sayfada gereksiz, kaldırılıyor. */
body.chart-page header {
  padding: 8px 14px;
  gap: 6px 10px;
}

body.chart-page .brand-logo {
  height: 22px;
  border-radius: 5px;
}

body.chart-page nav a:not(.back-link) {
  display: none;
}

body.chart-page .header-search {
  max-width: 280px;
}

/* Sembol/fiyat bilgisi TW'deki gibi tek satıra sıkıştırılmış ince bir
   şerit — büyük başlık yerine kompakt bir "sembol pili". */
body.chart-page .detail-header {
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

body.chart-page .stock-logo-lg {
  width: 26px;
  height: 26px;
}

body.chart-page .detail-header h2 {
  font-size: 14px;
}

body.chart-page #stock-sector {
  display: none;
}

body.chart-page .price-block {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

body.chart-page .star-btn-lg {
  order: -1;
}

body.chart-page .price-block .price {
  font-size: 16px;
}

body.chart-page #stock-change {
  font-size: 13px;
}

body.chart-page .market-status-badge,
body.chart-page .last-update {
  margin-top: 0;
}

/* Grafik paneli artık bir "kart" değil, tüm genişliği kaplayan bir
   uygulama tuvali. */
body.chart-page .chart-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

body.chart-page .chart-toolbar {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* Çizim araçları artık TW'deki gibi grafiğin solunda dikey, ikon
   tabanlı bir şerit. */
body.chart-page .chart-body-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

body.chart-page .drawing-toolbar {
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-right: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: 0;
}

body.chart-page .drawing-toolbar button {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.chart-page .drawing-toolbar-sep {
  width: 20px;
  height: 1px;
  margin: 2px 0;
}

body.chart-page .drawing-color-swatches {
  flex-direction: column;
  gap: 5px;
}

body.chart-page .drawing-color-swatches button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

body.chart-page #drawing-clear-btn {
  margin-left: 0;
}

body.chart-page .chart-main-col {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* OHLCV bilgisi artık grafiğin üzerinde, TW'deki gibi yarı saydam bir
   köşe etiketi. */
body.chart-page .chart-legend {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: rgba(15, 17, 21, 0.72);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0;
  pointer-events: none;
}

/* Dönem getirisi butonları TW'nin alt zaman şeridi gibi grafiğin
   altında. */
body.chart-page .return-periods-group {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  body.chart-page .drawing-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  body.chart-page .drawing-color-swatches {
    flex-direction: row;
  }

  body.chart-page .chart-body-row {
    flex-direction: column;
  }
}

#chart-container {
  position: relative;
}

.drawing-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 6px 8px 6px;
}

.drawing-toolbar button[data-tool] {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}

.drawing-toolbar button[data-tool].active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(79, 140, 255, 0.12);
}

.drawing-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.drawing-color-swatches {
  display: flex;
  gap: 5px;
}

.drawing-color-swatches button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.drawing-color-swatches button.active {
  border-color: var(--text);
}

.return-periods-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 6px 10px 6px;
}

.return-periods-group button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  min-width: 60px;
}

.return-periods-group button.active {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--text);
}

.return-periods-group .return-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.return-periods-group .return-value.up {
  color: var(--up);
}

.return-periods-group .return-value.down {
  color: var(--down);
}

.chart-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 6px 12px 6px;
  font-size: 13px;
}

.btn-group {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}

#timeframe-group {
  flex-wrap: wrap;
}

.btn-group button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-group button.active {
  background: var(--panel);
  color: var(--text);
}

.chk {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.chk input {
  accent-color: var(--accent);
}

.ghost-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
}

.ghost-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 6px 8px 6px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chart-legend strong {
  color: var(--text);
}

.ma-quick-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 0 6px;
  flex-wrap: wrap;
  font-size: 13px;
}

.ma-quick-add select,
.ma-quick-add input[type="number"] {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.ma-quick-add input[type="number"] {
  width: 170px;
}

.ma-quick-add button {
  background: var(--accent);
  border: none;
  color: white;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.custom-indicator-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 4px 6px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  flex-wrap: wrap;
}

.custom-indicator-bar input[type="text"] {
  flex: 1;
  min-width: 260px;
}

.custom-indicator-bar button {
  background: var(--accent);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.formula-error {
  color: var(--down);
  font-size: 13px;
  padding: 6px 6px 0 6px;
  min-height: 18px;
}

.formula-help {
  color: var(--muted);
  font-size: 12px;
  padding: 6px 6px 0 6px;
}

.formula-help code {
  color: var(--text);
  font-family: var(--font-mono);
}

.formula-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 6px 6px 6px;
}

.formula-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 12px;
}

.formula-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.formula-chip button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}

.formula-chip button:hover {
  color: var(--down);
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
  width: 100%;
  max-width: 380px;
}

.auth-card h1 {
  margin: 0 0 4px 0;
  font-size: 22px;
}

.auth-card h1 a {
  color: var(--text);
  text-decoration: none;
}

.auth-card > p.muted {
  margin: 0 0 24px 0;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.auth-card input {
  width: 100%;
}

.auth-card button[type="submit"] {
  background: var(--accent);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.auth-card p.muted {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 12px;
}

.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  color: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.google-btn:hover {
  background: #f5f5f5;
}

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

#nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  flex-wrap: wrap;
  max-width: 100%;
}

#nav-user .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

@media (max-width: 640px) {
  #nav-user .muted {
    max-width: 140px;
  }
}

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

nav a.cta-link {
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

/* nav a:hover'ın rengi (var(--accent)) burada arka planla aynı olduğu için
   yazı görünmez oluyordu — üzerine gelince beyaz kalması için ayrıca
   belirtiyoruz. */
nav a.cta-link:hover {
  color: white;
  opacity: 0.9;
}

.landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.hero {
  position: relative;
  text-align: center;
  padding: 40px 20px 40px 20px;
}

.hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  max-width: 140%;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(74, 95, 224, 0.16) 0%, rgba(74, 95, 224, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h2 {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.hero .lead {
  color: var(--muted);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 32px auto;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.hero-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.hero-reassure .chip {
  font-size: 12.5px;
  padding: 6px 14px;
}

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 40px 0 80px 0;
}

.feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(74, 95, 224, 0.14);
  color: var(--accent-2);
  margin-bottom: 14px;
}

.feature-icon svg {
  width: 21px;
  height: 21px;
}

.feature-card h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Ana sayfa — giriş yapmadan görülen canlı piyasa önizlemesi (TW'nin ana
   sayfasındaki gibi, ama sadece BIST'e odaklı ve bize ait verilerle). */
.landing-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 0 0 16px 0;
  text-align: center;
}

.landing-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
}

.landing-stat span {
  color: var(--muted);
  font-size: 13px;
}

.landing-section {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

.landing-section h2 {
  font-size: 26px;
  margin: 0 0 20px 0;
}

.landing-index-chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 8px;
  margin-bottom: 16px;
}

.landing-index-chart-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.landing-index-chart-name {
  font-weight: 600;
  font-size: 15px;
}

.landing-index-chart-price {
  font-size: 15px;
  color: var(--muted);
}

#landing-index-chart {
  width: 100%;
}

.landing-market-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.landing-market-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 140px;
  flex: 1 1 140px;
}

.landing-market-item .label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.landing-market-item .value {
  font-size: 17px;
  font-weight: 600;
}

.landing-movers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.mover-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.mover-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 14px 0;
  font-weight: 600;
}

.mover-col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
}

.mover-col-icon.up { background: rgba(38, 166, 154, 0.15); color: var(--up); }
.mover-col-icon.down { background: rgba(239, 83, 80, 0.15); color: var(--down); }
.mover-col-icon.active { background: rgba(255, 184, 0, 0.15); color: #ffb800; }

/* 15 hisseye kadar gösterilebilsin diye her sütun kendi içinde bağımsız
   dikey kaydırma çubuğuna sahip — sütunlar birbirini etkilemeden ayrı ayrı
   kaydırılabiliyor. */
.mover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.mover-list::-webkit-scrollbar {
  width: 6px;
}

.mover-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.mover-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.mover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 8px 0;
  border-bottom: 1px solid var(--border);
}

.mover-row:last-child {
  border-bottom: none;
}

.mover-logo-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.mover-row .stock-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid transparent;
}

.mover-logo-wrap.up .stock-logo { border-color: var(--up); }
.mover-logo-wrap.down .stock-logo { border-color: var(--down); }

.mover-dir-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: white;
  border: 1.5px solid var(--panel);
}

.mover-dir-badge.up { background: var(--up); }
.mover-dir-badge.down { background: var(--down); }

.mover-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mover-info strong {
  font-size: 13px;
}

.mover-info span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mover-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  flex-shrink: 0;
}

.mover-price span:first-child {
  font-weight: 600;
  font-size: 13px;
}

.mover-volume {
  color: var(--muted);
  font-size: 10.5px;
}

/* Sinyaller tablosundaki "Sinyaller" sütunu — uzun gösterge
   isimleri dar bir sütuna sıkışınca çok satıra bölünüp satır yüksekliğini
   gereksiz artırıyordu, geniş bir min-width vererek daha az satıra sarmasını
   sağlıyoruz. */
#buy_signals-container .col-signals {
  min-width: 340px;
}

/* Sinyaller mobil görünümü — kullanıcı isteği: "biraz kısıtlama
   yapalım ki görünürlük artsın" — Şirket/Sektör sütunları tamamen
   kaldırıldığı için (AL/SAT döngüsü tasarımına geçişte) burada sadece bu
   tabloya özel logo küçültmesi kalıyor. */
@media (max-width: 640px) {
  .buy-signals-logo-cell {
    width: 30px;
  }

  .buy-signals-logo-cell .stock-logo {
    width: 24px;
    height: 24px;
  }
}

/* "Sinyaller" tablosundaki AL(açık)/SAT(kapandı) durum rozeti — kullanıcı
   isteği: her satır bir AL-SAT döngüsü, durumu bir bakışta ayırt edebilmek
   için. */
.signal-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.signal-status-active {
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
}

.signal-status-closed {
  background: rgba(148, 148, 148, 0.15);
  color: var(--muted);
}

/* "Sinyaller" tablosunun başlık satırı sabit kalsın (kullanıcı isteği).
   İLK deneme (sayfaya göre sticky + --header-height) ÇALIŞMADI — kök neden:
   `.table-scroll-wrap`'in yatay kaydırma için gerekli `overflow-x: auto`'su,
   CSS Overflow Module kuralı gereği (bir eksen visible değilse diğeri de
   OTOMATIK "auto" sayılır) `overflow-y`'yi de "auto"ya çeviriyordu — ama
   wrapper'ın YÜKSEKLİĞİ sınırsız olduğu için bu "auto" hiçbir zaman GERÇEK
   bir dikey scroll alanı oluşturmuyordu, dolayısıyla sticky hiç tetiklenmiyor,
   başlık normal akışta yukarı kayıp gidiyordu (canlı test edilip doğrulandı).
   ÇÖZÜM: wrapper'a GERÇEK bir yükseklik sınırı + kendi dikey scroll'u
   verildi — böylece tablo kendi İÇİNDE kayan bir kutu oluyor, başlık bu
   kutunun tepesinde (top:0) sabit kalıyor. Yatay kaydırma (dar ekranlarda
   gerekli) korunuyor. */
/* İkinci deneme (70vh'lik iç kaydırma kutusu) da kullanıcıya göre olmadı:
   sayfa kaydırılırken başlık kutuyla birlikte yukarı gidiyordu. Artık
   Sinyaller sayfası (static/sinyaller.html) iç kaydırma kullanmıyor; başlığın
   bir kopyası JS ile site menüsünün altına sabitleniyor (bkz.
   sinyaller.js::attachFloatingHeader). */
.buy-signals-table thead th {
  background: var(--bg);
}

.floating-thead {
  position: fixed;
  z-index: 40;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.floating-thead table {
  margin: 0;
  table-layout: fixed;
}

.signal-exit-note {
  display: inline-block;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
}

/* Bildirim Ayarları (static/bildirimler.html) */
.nt-section { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.nt-section h3 { margin: 0; font-size: 16px; }
.nt-help { margin: 0; font-size: 13.5px; }
.nt-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.nt-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); }
.nt-row + .nt-row { border-top: 1px solid var(--border); }
.nt-row.is-locked { opacity: 0.75; }
.nt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nt-text .muted { font-size: 13px; }
.nt-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.nt-badge.own { background: rgba(38, 166, 154, 0.15); color: var(--up); }
.nt-badge.lock { background: rgba(163, 170, 187, 0.15); color: var(--muted); }
.nt-badge.off { background: rgba(239, 83, 80, 0.12); color: var(--down); }
.nt-sub { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 4px; }
.nt-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.nt-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.nt-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.15s; }
.nt-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.nt-switch input:checked + span { background: var(--up); }
.nt-switch input:checked + span::after { transform: translateX(20px); }
.nt-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.nt-switch input:disabled { cursor: not-allowed; }
.nt-switch input:disabled + span { opacity: 0.5; }
.nt-ok { color: var(--up); font-weight: 700; margin-right: 4px; }
.nt-push { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.nt-push p { margin: 0; }
.nt-save { min-height: 18px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .nt-switch span, .nt-switch span::after { transition: none; } }

/* Sinyal Portföyleri (static/sinyal-portfoyleri.html) */
.rp-intro { max-width: 80ch; margin-top: -6px; }
.rp-cards { display: flex; flex-direction: column; gap: 18px; margin: 16px 0; }
.rp-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.rp-head h3 { margin: 0; font-size: 18px; }
.rp-own { background: rgba(38, 166, 154, 0.18) !important; color: var(--up) !important; }
.rp-card:has(.rp-own) { border-color: var(--up); }
.rp-tier { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(74, 95, 224, 0.15); color: var(--accent); }
.rp-rules { display: grid; gap: 6px; }
.rp-rules > div { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.rp-rules p { margin: 0; font-size: 14px; }
.rp-tag { font-size: 11.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 6px; }
.rp-tag.buy { background: rgba(38, 166, 154, 0.15); color: var(--up); }
.rp-tag.sell { background: rgba(239, 83, 80, 0.15); color: var(--down); }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.rp-stats div { display: flex; flex-direction: column; gap: 2px; }
.rp-stats .k { font-size: 11.5px; color: var(--muted); }
.rp-stats .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-chart { width: 100%; height: auto; display: block; }
.rp-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.rp-area { fill: var(--accent); opacity: 0.12; }
.rp-grid { stroke: var(--border); stroke-dasharray: 3 3; }
.rp-axis { fill: var(--muted); font-size: 11px; }
.rp-launch-line { stroke: var(--up); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rp-note { font-size: 12.5px; margin: 0; }
.rp-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; font-size: 14px; }
.rp-card.is-locked .rp-rules { filter: blur(0); }
.rp-open { align-self: flex-start; }
.rp-detail { display: flex; flex-direction: column; gap: 10px; }
.rp-detail h4 { margin: 8px 0 0; font-size: 15px; }
.rp-today { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(74, 95, 224, 0.08); font-size: 14px; }
.rp-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.rp-chip.buy { background: rgba(38, 166, 154, 0.15); color: var(--up); }
.rp-chip.sell { background: rgba(239, 83, 80, 0.15); color: var(--down); }
.rp-small { font-size: 11.5px; }
.rp-live, .rp-sim { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.rp-live { background: rgba(38, 166, 154, 0.15); color: var(--up); }
.rp-sim { background: rgba(163, 170, 187, 0.15); color: var(--muted); }
.rp-trades { max-height: 60vh; overflow-y: auto; }
.rp-disclaimer { font-size: 12.5px; max-width: 80ch; }

/* Sinyal Test Merkezi (static/sinyaller.html) */
.research-report-link {
  display: inline-block;
  margin: 0 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.research-report-link:hover {
  background: rgba(74, 95, 224, 0.12);
}

#lab-intro {
  margin-top: 0;
}
.signal-lab-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
  font-size: 13px;
}

.signal-lab-toolbar .setting-input {
  width: 70px;
}

.signal-stats {
  gap: 14px 24px;
}

.signal-lab-settings {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.signal-lab-settings summary {
  cursor: pointer;
  font-weight: 600;
}

.signal-lab-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
  font-size: 13px;
}

.signal-lab-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signal-lab-form .wide {
  grid-column: 1 / -1;
}

.signal-lab-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.signal-lab-form fieldset label {
  min-width: 120px;
}

.signal-lab-form legend label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.signal-lab-form .setting-input {
  width: 100%;
  box-sizing: border-box;
}

.signal-lab-form [hidden] {
  display: none !important;
}

.signal-lab-form fieldset .wide-field {
  flex: 1 1 260px;
}

.hunt-progress {
  height: 6px;
  margin: 12px 0;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.hunt-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}

.hunt-portfolio {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.hunt-portfolio-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.equity-chart {
  width: 100%;
  height: 180px;
  display: block;
}

.equity-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.equity-area {
  fill: var(--accent);
  opacity: 0.12;
}

.equity-grid {
  stroke: var(--border);
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.equity-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hunt-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
}

.hunt-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

.hunt-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.hunt-chip.active .muted {
  color: rgba(255, 255, 255, 0.8);
}

.hunt-table .hunt-group {
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.hunt-table td.hunt-rule {
  min-width: 280px;
  max-width: 420px;
  white-space: normal;
  font-size: 12.5px;
  line-height: 1.45;
}

.hunt-rule-buy {
  font-weight: 600;
  color: #2ea043;
}

.hunt-rule-sell {
  font-weight: 600;
  color: #e5534b;
}

.hunt-ref-row td {
  background: rgba(88, 166, 255, 0.07);
}

.hunt-ref-badge {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  margin-left: 0;
}

.hunt-save {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hunt-save .setting-input {
  width: auto;
  padding: 4px 6px;
  font-size: 12px;
}

.hunt-table tbody tr {
  cursor: default;
}

.compare-best-row td {
  background: rgba(46, 160, 67, 0.08);
}

.compare-best-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
}

/* Son Bilançolar mobil görünümü — kullanıcı isteği: "bilgileri biraz
   sıkıştırıp ekrana sığdırsak". Şirket zaten global .col-company kuralıyla
   mobilde gizleniyor (yukarıda), burada logo küçültülüyor — geriye Kod/
   Dönem/Net Kâr/Yıllık Değişim kalıyor, hepsi kısa/dar değerler. */
@media (max-width: 640px) {
  .earnings-logo-cell {
    width: 30px;
  }

  .earnings-logo-cell .stock-logo {
    width: 24px;
    height: 24px;
  }

  /* Kod/Yıl/Net Kâr sütunları hâlâ Yıllık Değişim'i ekran dışına itiyordu —
     hücre iç boşluğu ve yazı boyutu daraltılıp son sütuna yer açılıyor. */
  #earnings-table th,
  #earnings-table td {
    padding: 8px 5px;
    font-size: 13px;
  }
}

.landing-sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.sector-teaser-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sector-teaser-card strong {
  font-size: 14px;
}

.sector-teaser-card .muted {
  font-size: 12px;
}

.landing-cta {
  text-align: center;
  padding: 50px 20px;
}

.landing-cta h2 {
  font-size: 24px;
  margin: 0 0 20px 0;
}

footer {
  text-align: center;
  padding: 24px;
  font-size: 13px;
}

.logo-cell {
  width: 48px;
}

.stock-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stock-logo-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.market-summary {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  background: var(--panel);
}

.market-item strong {
  font-variant-numeric: tabular-nums;
}

.important-events {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
  color: var(--text);
}

.pwa-install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  max-width: 480px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pwa-install-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.pwa-install-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
}

.pwa-install-dismiss:hover {
  color: var(--text);
}

.desktop-mode-banner {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-mode-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.desktop-mode-banner-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.desktop-mode-banner-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.desktop-mode-banner-dismiss:hover {
  color: var(--text);
}

@media (max-width: 600px) {
  .pwa-install-banner {
    flex-wrap: wrap;
  }
}

.gold-widget {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  margin-bottom: 16px;
}

.gold-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
}

.gold-widget-title {
  color: var(--muted);
  font-weight: 600;
}

#gold-widget-price strong {
  font-size: 15px;
}

#gold-widget-chart {
  width: 100%;
}

.macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.macro-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.macro-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
}

.macro-card-header span:first-child {
  color: var(--muted);
  font-weight: 600;
}

.macro-card-header span:last-child {
  font-size: 18px;
  font-weight: 700;
}

.macro-card-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.important-events-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.important-events-title {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.important-events-toggle {
  background: none;
  border: 1px solid rgba(79, 140, 255, 0.4);
  color: var(--accent);
  border-radius: 5px;
  width: 22px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
}

.important-events-toggle:hover {
  background: rgba(79, 140, 255, 0.15);
}

.important-events-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.25s ease;
  margin-top: 10px;
}

.important-events-list:empty {
  margin-top: 0;
}

.important-events-item {
  color: var(--muted);
  white-space: normal;
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ie-info-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ie-info-btn:hover,
.ie-info-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

.ie-explain {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.important-events-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.important-events-item strong {
  color: var(--accent);
}

.important-events-item.imp-severity-mid strong {
  color: #8fa3c9;
}

.important-events-controls {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.important-events-more-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}

.important-events-more-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  padding: 0;
  line-height: 1;
}

.star-btn.active {
  color: #f0b429;
}

.star-btn-lg {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted);
  padding: 8px 12px;
}

.star-btn-lg.active {
  color: #f0b429;
  border-color: #f0b429;
}

.color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

.star-btn-lg .color-dot {
  width: 16px;
  height: 16px;
}

.color-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 50;
}

.color-popover-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
}

.color-popover-swatch:hover {
  transform: scale(1.15);
}

.color-popover.align-right {
  left: auto;
  right: 0;
}

.color-popover-list-select {
  font-size: 12px;
  padding: 3px 6px;
  max-width: 110px;
  margin-right: 4px;
}

.color-popover-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.color-filter-row:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.watchlist-list-row:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12.5px;
}

/* .btn-primary/.btn-secondary'nin unconditional "display: inline-block" kuralı
   [hidden] özniteliğini ezip görünür bırakıyor (bkz. .color-filter-row'daki
   aynı sorun) — bu düğmeye özel, ID özgüllüğüyle kesin kazanan bir düzeltme.
   Sitedeki diğer .btn-primary/.btn-secondary + hidden kombinasyonları da aynı
   sorunu taşıyabilir, ayrı bir temizlik gerektirir. */
#delete-list-btn[hidden],
#delete-preset-btn[hidden] {
  display: none;
}

.preset-row {
  align-items: center;
}

.color-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}

.color-chip.active {
  border-color: var(--accent);
  color: var(--text);
}

.importance-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.importance-high {
  background: #ef535033;
  color: #ef5350;
}

.importance-mid {
  background: #f0b42933;
  color: #f0b429;
}

.importance-low {
  background: #8b909c33;
  color: var(--muted);
}

.valuation-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}

.narrow-page {
  max-width: 640px;
}

.page-head {
  margin-bottom: 28px;
}

.page-head h2 {
  margin: 0 0 8px;
}

.page-head .ghost-btn {
  display: inline-block;
  margin-top: 12px;
}

.chip {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-right: 6px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.portfolio-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s;
}

.portfolio-card:hover {
  border-color: var(--accent);
}

.portfolio-card-header {
  margin-bottom: 10px;
}

.portfolio-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.portfolio-card p {
  font-size: 13.5px;
  margin: 0 0 12px;
}

.portfolio-card-foot {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

.ai-portfolio-section {
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.06), transparent 60%);
}

.ai-portfolio-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ai-portfolio-heading h2 {
  margin: 0;
}

.chip-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.setting-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.setting-row .setting-input {
  width: 110px;
}

textarea.setting-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.setting-row .save-status {
  font-size: 12px;
  color: var(--muted);
  min-width: 70px;
}

.job-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.job-badge-success { color: var(--up); background: rgba(46, 204, 113, 0.12); }
.job-badge-failed { color: var(--down); background: rgba(239, 83, 80, 0.12); }
.job-badge-running { color: #d9a441; background: rgba(217, 164, 65, 0.12); }
.job-badge-none { color: var(--muted); background: transparent; }

/* Sistem Rehberi'ndeki her bölüm (İstatistikler, Sistem Sağlığı, Abonelik
   Paketleri, Ayarlar, Geçmiş, Video Taslakları) ayrı, net sınırlarla ayrılmış
   bir "kutu" olarak görünsün diye ortak kutu stili — bölümler birbirine
   karışmasın. */
.section-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 24px;
}

main > .section-box:first-child {
  margin-top: 0;
}

.section-box > h2:first-child {
  margin-top: 0;
}

.collapsible-section {
  padding: 0 20px;
}

.collapsible-section > *:not(summary) {
  margin-top: 16px;
}

.collapsible-section[open] {
  padding-bottom: 20px;
}

.collapsible-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

details[open] > .collapsible-summary::before {
  transform: rotate(90deg);
}

.collapsible-summary h2 {
  margin: 0;
  display: inline;
}

.jobs-summary-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.buy-signals-day {
  margin-bottom: 24px;
}

.buy-signals-day h4 {
  margin: 0 0 8px;
}

.buy-signals-day:last-child {
  margin-bottom: 0;
}

.ai-portfolio-lead {
  max-width: 720px;
  margin: 0 0 24px 0;
}

.ai-portfolio-cta {
  margin-top: 28px;
  text-align: center;
}

.ai-portfolio-cta .btn-primary,
.ai-portfolio-cta .btn-secondary {
  margin: 0 8px 12px;
}

.ai-portfolio-note {
  max-width: 560px;
  margin: 12px auto 0;
  font-size: 13px;
}

.packages-hero {
  padding-top: 40px;
  padding-bottom: 20px;
}

.packages-hero .lead {
  margin-bottom: 0;
  min-height: 48px;
}

/* Dönüşümlü gösterilen metinler için genel geçiş sınıfları (Paketler
   sayfasının tanıtım cümlesi + anasayfanın başlık/açıklaması aynı deseni
   paylaşıyor) — solup yeni metinle vurgu renginde belirip normale süzülüyor. */
.fade-rotate {
  transition: opacity 0.3s ease, color 1s ease;
}

.fade-rotate.fade-rotate-hidden {
  opacity: 0;
}

.fade-rotate.fade-rotate-highlight {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .fade-rotate {
    transition: none;
  }
}

/* Paketler sayfasında dikey ritmi sıklaştırıyor — .landing-wide'a özel,
   diğer landing sayfalarını (anasayfa vb.) etkilemez. */
.landing-wide .landing-section {
  padding: 22px 0;
}

.landing-wide .landing-section:first-of-type {
  padding-top: 8px;
}

.check-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-list li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-card h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 4px;
}

.price-amount {
  font-size: 28px;
  font-weight: 700;
}

.price-yearly-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.discount-badge {
  display: inline-block;
  background: rgba(38, 166, 154, 0.15);
  color: var(--up);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.payment-method-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.payment-method-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}

.payment-method-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tier-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Aylık / Yıllık / 2 Yıllık ödeme dönemi seçici — Hostinger vb. sitelerdeki
   gibi, seçime göre kart başlıklarındaki "TL/ay" rakamı ve indirim rozeti
   değişir (bkz. paketler.js renderBillingToggle/renderTierCards). */
.billing-cycle-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 24px;
  flex-wrap: wrap;
}

.billing-toggle-btn {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.billing-toggle-btn:hover {
  border-color: var(--accent);
}

.billing-toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.billing-toggle-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 7px;
  vertical-align: middle;
  background: var(--up) !important;
  border-color: var(--up) !important;
  color: white !important;
}

/* Paketler sayfası — 5 paket kartının tek satırda yan yana sığması için
   standart .landing genişliğinden (1100px) daha geniş bir konteyner. */
.landing-wide {
  max-width: 1360px;
}

.model-showcase-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.model-showcase-grid .portfolio-card h3 {
  font-size: 15.5px;
}

.model-showcase-footnote {
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
}

.tier-pricing-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.tier-pricing-card.featured {
  border-color: var(--accent);
}

.tier-pricing-card h3 {
  margin: 8px 0 4px;
  font-size: 17px;
}

.tier-pricing-card .price-amount {
  font-size: 22px;
}

.tier-pricing-card .check-list {
  flex: 1;
}

.tier-pricing-card .btn-primary,
.tier-pricing-card .btn-secondary {
  margin-top: 16px;
  text-align: center;
}

.survey-question {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.survey-question-text {
  font-weight: 600;
  margin-bottom: 12px;
}

.survey-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

/* Risk Anketi — soru soru sihirbaz (bkz. static/js/risk-anketi.js). Kullanıcı
   isteği: "5 soru birden gözükmesin, sırayla animasyonlu geçişler olsun,
   sıkıcı olmasın." */
.survey-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.survey-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}

.survey-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.survey-progress-label {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.survey-step {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 28px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.survey-step.survey-step-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.survey-step-question {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 22px;
}

.survey-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 14.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.survey-option-btn:hover {
  border-color: var(--accent-2);
}

.survey-option-btn.selected {
  border-color: var(--accent);
  background: rgba(74, 95, 224, 0.16);
}

.survey-option-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--muted);
}

.survey-option-btn.selected .survey-option-index {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.survey-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.primary-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.primary-btn:hover {
  opacity: 0.9;
}

.callout-card {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  margin-top: 20px;
}

/* Analizler'de Sinyaller / En Ucuz Hisseler — kademeye göre kısmi
   görünürlük uyarısı (bkz. app_settings.py analizler_tier_visibility_pct). */
.upsell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(79, 140, 255, 0.08);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.upsell-banner-text strong {
  color: var(--accent);
}

/* En Ucuz Hisseler — kilitli/bulanık satırlar (bkz. market_analysis.py
   cheapest_stocks, _scramble). Gerçek ticker/isim API yanıtında hiç yok —
   burada sadece görsel "bulanık" efekti veriliyor, salt CSS blur'un aksine
   sayfa kaynağından okunarak aşılamaz. */
.cheapest-locked-row {
  cursor: pointer;
  opacity: 0.75;
}

.cheapest-locked-row:hover {
  opacity: 1;
  background: rgba(79, 140, 255, 0.06);
}

.blurred-text {
  filter: blur(4.5px);
  user-select: none;
  -webkit-user-select: none;
}

.cheapest-lock-icon {
  display: block;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

/* En Ucuz Hisseler mobil görünümü — kullanıcı isteği: "görünürlüğü
   artıralım, kaydırmayalım". Şirket/Sektör zaten global .col-company/
   .col-sector kuralıyla mobilde gizleniyor; burada sadece bu tabloya özel
   ikincil karşılaştırma sütunları (sektör ortalamaları, Graham adil değeri,
   temel skor) da gizlenip sadece Kod/Son Kapanış/İskonto (asıl amaç) kalıyor
   — 11 sütunluk tablo mobilde yatay kaydırma gerektirmeden sığıyor. */
@media (max-width: 640px) {
  #cheapest-table .col-pe,
  #cheapest-table .col-pe-avg,
  #cheapest-table .col-pb,
  #cheapest-table .col-pb-avg,
  #cheapest-table .col-graham,
  #cheapest-table .col-score {
    display: none;
  }

  .cheapest-logo-cell {
    width: 30px;
  }

  .cheapest-logo-cell .stock-logo {
    width: 24px;
    height: 24px;
  }
}

.code-entry-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 16px 0 6px;
}

.code-entry-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 180px;
}

.result-badge {
  display: inline-block;
  background: rgba(79, 140, 255, 0.14);
  color: var(--accent);
  font-weight: 700;
  font-size: 20px;
  padding: 8px 20px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.result-badge[hidden] {
  display: none;
}

.financial-summary-text {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.ai-earnings-commentary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid #8e5cf7;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.ai-earnings-commentary h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #8e5cf7;
}

.ai-earnings-commentary p {
  margin: 0;
}

.statement-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.statement-chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.statement-chart-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

#revenue-chart,
#net-income-chart {
  width: 100%;
}

.valuation-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.valuation-history-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.valuation-history-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
}

.valuation-history-header span:first-child {
  color: var(--muted);
  font-weight: 600;
}

.valuation-history-header span:last-child {
  font-size: 18px;
  font-weight: 700;
}

#pe-history-chart,
#pb-history-chart {
  width: 100%;
}

.valuation-history-avg {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.health-scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.health-score-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.health-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.health-score-header span:first-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.health-score-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  background: var(--border);
  color: var(--text);
}

.health-score-badge.score-good {
  background: rgba(38, 166, 154, 0.16);
  color: #26a69a;
}

.health-score-badge.score-mid {
  background: rgba(240, 180, 41, 0.16);
  color: #f0b429;
}

.health-score-badge.score-bad {
  background: rgba(239, 83, 80, 0.16);
  color: #ef5350;
}

.health-score-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.health-score-criteria {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fscore-criterion {
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--muted);
}

.fscore-criterion .mark {
  flex-shrink: 0;
  font-weight: 700;
}

.fscore-criterion.pass .mark {
  color: #26a69a;
}

.fscore-criterion.fail .mark {
  color: #ef5350;
}

#dividend-usd-chart {
  width: 100%;
}

.profile-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.profile-main p {
  line-height: 1.6;
}

.profile-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-holders {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
}

.profile-holder-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--muted);
}

.profile-holder-row strong {
  color: var(--text);
}

.holders-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.holders-donut {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
}

.holders-legend {
  flex: 1;
  min-width: 0;
}

.holders-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 8px 14px;
  white-space: nowrap;
}

.compare-table thead th a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.compare-name {
  font-size: 11px;
  font-weight: 400;
  white-space: normal;
  max-width: 140px;
}

.compare-self {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.analyst-summary-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin: 16px 0;
}

.analyst-summary-segment {
  height: 100%;
}

#ai-widget-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#ai-widget-panel[hidden] {
  display: none;
}

#ai-widget-panel {
  position: fixed;
  bottom: 76px;
  right: 20px;
  z-index: 500;
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.ai-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
}

.ai-widget-header button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}

.ai-widget-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-widget-body textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
}

#ai-widget-answer {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

.ai-widget-error {
  color: #ef5350;
}

.ai-widget-note {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.compare-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  display: block;
}

.compare-card:hover {
  border-color: var(--accent);
}

.compare-card .ticker {
  font-weight: 700;
  font-size: 14px;
}

.compare-card .name {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-card .price {
  font-size: 13px;
}

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

.valuation-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.valuation-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.valuation-note code {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.valuation-note a {
  color: var(--accent);
}

.academy-layout {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
  gap: 32px;
}

.academy-toc {
  width: 220px;
  flex-shrink: 0;
  padding: 32px 0 32px 24px;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.academy-toc-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.academy-toc-inner strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.academy-toc-inner a {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.academy-toc-inner a:hover {
  background: var(--panel);
  color: var(--accent);
}

.academy-course {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.academy-course-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 18px;
}

.academy-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s;
}

.academy-lesson-row:hover {
  border-color: var(--accent);
}

.academy-lesson-row.locked {
  color: var(--muted);
}

.lesson-title {
  flex: 1;
}

.lesson-check {
  color: var(--good, #178f76);
  font-weight: 700;
}

.survey-consent {
  align-items: flex-start !important;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.5;
}

.survey-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .academy-layout {
    flex-direction: column;
  }
  .academy-toc {
    width: 100%;
    position: static;
    padding: 16px 24px 0 24px;
  }
  .academy-toc-inner {
    flex-direction: column;
  }
}

.guide {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 80px 24px;
}

.section-intro {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: -8px 0 20px 0;
}

.guide-subhead {
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 24px 0 14px 0;
}

.guide-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.guide-grid-4 .guide-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin: 0;
}

.guide-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.guide-list code {
  color: var(--text);
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.svg-illustration {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.pattern-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.pattern-svg {
  width: 100%;
  height: 70px;
  display: block;
  margin-bottom: 8px;
}

.pattern-card h5 {
  margin: 0 0 6px 0;
  font-size: 13px;
}

.pattern-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.guide h2 {
  margin: 0 0 8px 0;
}

.guide .lead {
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.6;
}

.guide-section {
  margin-bottom: 40px;
}

.guide-section > h3 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.guide-item {
  margin-bottom: 22px;
}

.guide-item h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
}

.guide-item p {
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.guide-item code {
  color: var(--text);
  font-family: var(--font-mono);
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
}

.guide-disclaimer {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.back-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}

nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

nav a.active {
  color: var(--text);
  background: rgba(79, 140, 255, 0.14);
  font-weight: 700;
}

.header-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}

.header-search input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
}

.header-search input:focus {
  outline: none;
  border-color: var(--accent);
}

.header-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.header-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

.header-search-item:hover,
.header-search-item.active {
  background: var(--border);
}

.header-search-ticker {
  font-weight: 600;
  min-width: 62px;
}

.header-search-name {
  color: var(--muted);
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-price {
  font-size: 13px;
  min-width: 56px;
  text-align: right;
}

.header-search-change {
  font-size: 13px;
  min-width: 56px;
  text-align: right;
}

.header-search-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 700px) {
  /* Sadece header.js'in enjekte ettiği ASIL genel arama kutusu (#header-search)
     — .toolbar içindeki hisse-alım/satım arama kutusu gibi AYNI ".header-search"
     sınıfını paylaşan ama header İÇİNDE OLMAYAN başka kutular bundan etkilenmesin
     diye id ile sınırlandı (aksi halde order:2 onları da kendi bölümlerinin
     dışına, yanlış bir sıraya itiyordu — Sanal Portföyüm'de yakalandı). */
  #header-search {
    order: 2;
    flex-basis: 100%;
    max-width: none;
  }
}

.section {
  margin-top: 28px;
}

.section h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.notification-log-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.notification-log-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.notification-log-item-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-log-item-body {
  font-size: 13px;
}

.notification-log-item-status {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gold, #d9a94e);
}

.list-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.list-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item a {
  color: var(--text);
  text-decoration: none;
}

.list-item a:hover {
  color: var(--accent);
}

.list-item .date {
  color: var(--muted);
  white-space: nowrap;
  font-size: 12px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  /* Analizler'in 7, Takvim'in 5 sekmesi gibi uzun Türkçe etiketler mobilde
     tek satıra sığmayınca (flex-wrap YOKTU) sekme çubuğu sayfayı kendi
     genişliğine zorlayıp yatay kaydırma çubuğu çıkarıyordu (kullanıcı
     geri bildirimi: "sekmeler verilerden daha geniş"). Artık taşma sayfada
     DEĞİL, sekme çubuğunun KENDİ İÇİNDE yatay kaydırmayla karşılanıyor —
     tablo/veri bölümlerinde zaten kullanılan .table-scroll-wrap deseniyle
     aynı mantık. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs .tab {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tabs .tab.active {
  color: var(--text);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  /* Sekme çubuğu artık kendi içinde kaydırılabiliyor (yukarı bkz.) ama
     kullanıcı geri bildirimi: "biraz sıkılaştırsak daha çok veri görsek" —
     dolgu/yazı boyutu küçültülünce ekrana aynı anda daha fazla sekme sığıyor,
     kaydırma ihtiyacı azalıyor. (Önceki "min ~40px dokunma hedefi" kuralı
     buraya taşındı/gevşetildi — sekmeler birincil eylem butonu değil, hafif
     bir sıkılaştırma dokunma konforunu ciddi etkilemiyor.) */
  .tabs .tab {
    padding: 6px 11px;
    min-height: 34px;
    font-size: 12px;
  }
}

.table-scroll {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 480px;
  overflow-y: auto;
}

.table-scroll table {
  border: none;
  border-radius: 0;
}

.table-scroll th, .table-scroll td {
  white-space: nowrap;
}

.table-scroll th:first-child, .table-scroll td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  min-width: 220px;
  white-space: normal;
}

#advanced-filters[hidden] {
  display: none;
}

.filter-grid {
  align-items: center;
}

.filter-group-label {
  flex-basis: 100%;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.filter-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.filter-grid input[type="number"] {
  width: 70px;
}

.filter-grid button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.filter-grid button:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* =========================================================================
   UX / erişilebilirlik iyileştirmeleri — 2026-09-09
   Sadece görsel katman: route/API/DB mantığına dokunulmadı.
   ========================================================================= */

/* --- 1) Klavye ile gezinirken görünür odak (WCAG 2.4.7) ---------------- */
/* Öncesinde site genelinde HİÇBİR :focus-visible kuralı yoktu — Tab ile
   gezinen bir kullanıcı neredeyse hiçbir yerde nerede olduğunu göremiyordu
   (header-search input'u hariç). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- 2) Buton geri bildirimi (hover/active/transition) ------------------ */
/* .btn-primary/.btn-secondary önceden hover/active durumu olmayan, statik
   butonlardı — tıklanabilir olduğu belli olsun diye eklendi. */
.btn-primary,
.btn-secondary {
  cursor: pointer;
  border: none;
  transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

.btn-secondary {
  border: 1px solid var(--border);
}

.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(1.12);
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.98);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-loading {
  cursor: not-allowed;
  opacity: 0.6;
  filter: none;
  transform: none;
}

/* Form gönderiminde çift tıklamayı önlemek için buton "yükleniyor" durumu
   (bkz. static/js/nav-active.js — genel submit dinleyicisi). */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: white;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-secondary.btn-loading::after {
  border: 2px solid rgba(139, 144, 156, 0.35);
  border-top-color: var(--text);
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- 3) Mobilde dokunma hedefi büyüklüğü (min ~40px) -------------------- */
/* NOT: üst nav'ın (header nav a) kendi dokunma hedefi BİLEREK büyütülmüyor —
   12 link flex-wrap ile alt alta dizildiğinden padding artışı sticky header'ı
   ekranın yarısını kaplayacak kadar uzatıyordu (canlı mobil ekran görüntüsüyle
   yakalandı). Bunun yerine en sık kullanılan 5 hedef zaten alt navigasyon
   çubuğunda (.mobile-bottom-nav, 44px dokunma hedefi) — üst nav ikincil/nadir
   kullanılan sayfalar için "taşma menüsü" gibi kalıyor, mevcut boyutu yeterli. */
@media (max-width: 640px) {
  .btn-small {
    padding: 10px 14px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
  }
}

/* --- 4) Liste/satır hover geri bildirimi (tutarlılık) ------------------- */
.setting-row {
  transition: border-color 0.15s ease;
}

.setting-row:hover {
  border-color: var(--accent);
}

/* --- 5) Boş durum (empty state) — düz metin yerine ikon + metin --------- */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
}

.empty-state-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* --- 6) Durum/kategori bilgisini kenar şeridiyle taranabilir hale getir - */
/* Model portföy kartları risk seviyesine göre (muhafazakâr/dengeli/agresif),
   Sistem Rehberi'ndeki iş satırları son çalıştırma durumuna göre renkli sol
   şerit alıyor — mevcut chip/badge renklerinin (var(--up)/var(--down)/vb.)
   aynısı, sadece satırın/kartın kendisine de yayılıyor. */
.portfolio-card {
  border-left: 3px solid var(--border);
}

.portfolio-card[data-risk="conservative"] {
  border-left-color: var(--up);
}

.portfolio-card[data-risk="balanced"] {
  border-left-color: var(--accent);
}

.portfolio-card[data-risk="aggressive"] {
  border-left-color: var(--down);
}

#jobs-table tbody tr {
  border-left: 3px solid transparent;
}

#jobs-table tbody tr[data-status="success"] {
  border-left-color: var(--up);
}

#jobs-table tbody tr[data-status="failed"] {
  border-left-color: var(--down);
}

#jobs-table tbody tr[data-status="running"] {
  border-left-color: #d9a441;
}

/* --- 7) Sayfa geçişinde hafif fade-in ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: page-fade-in 0.25s ease;
  }

  @keyframes page-fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* --- 8) Mobil alt navigasyon çubuğu -------------------------------------- */
/* static/js/nav-active.js tarafından enjekte edilir — üst nav'a dokunmadan,
   en sık kullanılan 5 hedefe mobilde tek dokunuşla erişim sağlar. */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  body:has(.mobile-bottom-nav) {
    padding-bottom: 64px;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    /* Bazı mobil tarayıcılar, sayfa ağır bir DOM güncellemesi (ör. sonsuz
       kaydırmalı tablo yeniden çizimi) yaparken fixed öğeleri kısa süreliğine
       "kayboluyor" gibi gösterebiliyor (compositing/repaint kısayolu) —
       kendi katmanına almak bunu büyük ölçüde önlüyor. */
    transform: translateZ(0);
    will-change: transform;
  }

  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
  }

  .mobile-bottom-nav a .mobile-bottom-nav-icon {
    font-size: 18px;
  }

  /* Alt nav çubuğu enjekte edildiğinde, aynı köşede duran yüzen öğeler
     (AI Asistan butonu/paneli, PWA kurulum bildirimi) üzerine binmesin diye
     çubuğun yüksekliği kadar (64px) yukarı kaydırılıyor. Bar'ın olmadığı
     sayfalarda (ör. Sistem Rehberi, admin.html) bu kural hiç devreye girmez. */
  body:has(.mobile-bottom-nav) #ai-widget-btn {
    bottom: 84px;
  }

  body:has(.mobile-bottom-nav) #ai-widget-panel {
    bottom: 140px;
    max-height: calc(100vh - 160px);
  }

  body:has(.mobile-bottom-nav) .pwa-install-banner {
    bottom: 80px;
  }

  .mobile-bottom-nav a.active {
    color: var(--accent);
  }
}

/* --- 9) Mobilde üst menü — hamburger ile açılır panel ------------------- */
/* Üst menü (12 link + yönetici linkleri + çıkış butonu) mobilde alt alta
   dizilince sticky header ekranın yarısını kaplıyordu — artık varsayılan
   GİZLİ, ".mobile-nav-toggle" butonuyla açılır bir panel olarak gösteriliyor.
   Buton static/js/nav-active.js tarafından enjekte edilir. */
.mobile-nav-toggle {
  display: none;
}

@media (max-width: 640px) {
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    order: 2;
  }

  header nav {
    display: none;
    order: 3;
    flex-basis: 100%;
  }

  header nav.mobile-nav-open {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 8px 14px 16px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    /* .mobile-bottom-nav z-index:300'ün üzerinde olmalı — aksi halde açık
       menü ekranın alt kısmında sabit alt navigasyon çubuğunun ALTINDA kalıp
       kullanıcı Çıkış Yap'a kadar kaydırdığında buton çubuğun arkasında
       görünmez oluyordu (kullanıcı: "mobilde oturum kapatamıyorum"). */
    z-index: 310;
  }

  header nav.mobile-nav-open a {
    padding: 12px 4px;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* Çıkış Yap butonu 12 linkin EN ALTINDA kalıyordu — menüyü açan kullanıcı
     onu görmek için tüm listeyi kaydırmak zorundaydı ve bulamıyordu. order:-1
     ile hesap/çıkış bloğu menü açılır açılmaz EN ÜSTTE, hemen görünür olsun. */
  header nav.mobile-nav-open #nav-user {
    order: -1;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
}

/* --- 10) Yükseltme Hesaplayıcı (paketler.html) --------------------------- */
.upgrade-info-callout {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.upgrade-info-callout strong:first-child {
  display: block;
  color: var(--accent-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.upgrade-info-callout p {
  margin: 0;
}

/* --- 11) Temettü Takvimi — ay görünümü (masa takvimi) -------------------- */
/* calendar.html "Temettü Takvimi" sekmesi, liste görünümüne EK olarak (kullanıcı
   isteği: "ay ay günlerin gösterildiği bir masa takvimi") gerçek bir ay
   grid'i — her günün hücresinde o gün temettü ödeyen hisselerin logoları,
   üzerine gelince (hover) detay balonu. Bkz. static/js/calendar.js. */
.div-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.div-cal-header h3 {
  margin: 0;
  font-size: 17px;
  text-transform: capitalize;
}

.div-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.div-cal-weekdays span {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.div-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.div-cal-day {
  min-height: 84px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.div-cal-day.div-cal-outside {
  background: transparent;
  border-color: transparent;
}

.div-cal-day.div-cal-today {
  border-color: var(--accent);
}

.div-cal-daynum {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.div-cal-day.div-cal-outside .div-cal-daynum {
  color: var(--border);
}

.div-cal-day.div-cal-today .div-cal-daynum {
  color: var(--accent-2);
}

.div-cal-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.div-cal-logo-wrap {
  position: relative;
  cursor: pointer;
}

.div-cal-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}

.div-cal-more {
  font-size: 11px;
  color: var(--muted);
  align-self: center;
}

.div-cal-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--panel-2, var(--panel));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}

.div-cal-logo-wrap:hover .div-cal-tooltip,
.div-cal-logo-wrap:focus-within .div-cal-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.div-cal-tooltip strong {
  display: block;
  margin-bottom: 3px;
}

@media (max-width: 640px) {
  .div-cal-day {
    min-height: 56px;
    padding: 4px;
  }

  .div-cal-logo {
    width: 18px;
    height: 18px;
  }

  .div-cal-tooltip {
    white-space: normal;
    width: 160px;
  }
}


/* ==========================================================================
   Portföylerim (sanal-portfoyum.html + js/portfoylerim.js)
   ========================================================================== */
.mp-intro { max-width: 80ch; }
.mp-small { font-size: 12.5px; }
.mp-help { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; line-height: 1.45; }
.mp-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.mp-tabs { margin: 4px 0 18px; }
.mp-tab { display: flex; flex-direction: column; gap: 14px; }
.mp-tab[hidden] { display: none; }

.mp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mp-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text); cursor: pointer;
  font: inherit; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.mp-card:hover { border-color: var(--accent-2); }
.mp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mp-card.is-active { border-color: var(--accent); background: var(--panel-2); }
.mp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.mp-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-card-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-card-sub { font-size: 13px; font-variant-numeric: tabular-nums; }
.mp-add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); min-height: 112px; }
.mp-add:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-plus { font-size: 26px; line-height: 1; color: var(--accent-2); }

.mp-chip { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.mp-chip.paper { background: rgba(124, 140, 240, 0.16); color: var(--accent-2); }
.mp-chip.real { background: rgba(217, 169, 78, 0.16); color: var(--gold); }

.mp-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px; }
.mp-panel h3 { margin: 0; font-size: 17px; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.mp-grid label, .mp-inline label, .mp-trade label, .mp-inline-label { display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.mp-grid label[hidden] { display: none; }
.mp-grid input, .mp-grid select, .mp-inline input, .mp-inline select, .mp-trade input, .mp-inline-label select {
  width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; }
.mp-grid input:focus, .mp-grid select:focus, .mp-inline input:focus, .mp-trade input:focus { outline: none; border-color: var(--accent); }
.mp-check { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
.mp-check input { width: auto !important; }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-danger { color: var(--down) !important; border-color: rgba(239, 83, 80, 0.4) !important; }
.mp-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.mp-inline > label { flex: 1 1 160px; }
.mp-full { flex-basis: 100%; margin: 0; }
.mp-ticker { flex: 1 1 200px; max-width: 280px; position: relative; }
.mp-ticker input { text-transform: uppercase; }

.mp-kind { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mp-kind legend { margin-bottom: 8px; }
.mp-kind-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.mp-kind-opt:has(input:checked) { border-color: var(--accent); background: rgba(74, 95, 224, 0.08); }
.mp-kind-opt input { margin-top: 3px; accent-color: var(--accent); }

.mp-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mp-detail-head h3 { margin: 0 0 4px; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-detail-head p { margin: 0; }
#mp-detail { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
#mp-detail[hidden] { display: none; }
.mp-stats .v small { font-size: 12px; font-weight: 500; margin-left: 4px; }
.mp-block { display: flex; flex-direction: column; gap: 10px; }
.mp-block h4 { margin: 0; font-size: 15px; }
.mp-block h5 { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }

.mp-trade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; }
.mp-trade > label { flex: 1 1 120px; }
.mp-trade .mp-note-field { flex: 2 1 200px; }
.mp-side { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; align-self: flex-end; }
.mp-side-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 9px 18px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; }
.mp-side-btn.buy.active { background: rgba(38, 166, 154, 0.18); color: var(--up); }
.mp-side-btn.sell.active { background: rgba(239, 83, 80, 0.18); color: var(--down); }
.mp-side-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#tr-submit.is-sell { background: var(--down); }

.mp-table td, .mp-table th { vertical-align: top; }
.mp-table td.mp-small { min-width: 180px; max-width: 360px; }
.mp-icon-btn { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 13px; }
.mp-icon-btn:hover { color: var(--down); border-color: var(--border); }
.mp-mine td { background: rgba(74, 95, 224, 0.08); }

.mp-line { fill: none; stroke-width: 1.6; }
.mp-line.bench { stroke: var(--muted); stroke-dasharray: 5 4; }
.mp-line.invested { stroke: var(--gold); stroke-dasharray: 2 3; }
.mp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.mp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mp-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); }
.mp-key.bench { border-top: 2px dashed var(--muted); }
.mp-key.invested { border-top: 2px dotted var(--gold); }

.mp-health { display: flex; gap: 18px; align-items: flex-start; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; }
.mp-health ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; flex: 1; min-width: 0; }
.mp-grade { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 800; background: var(--panel-2); border: 2px solid var(--border); }
.mp-grade span { font-size: 30px; line-height: 1; font-family: var(--font-display); }
.mp-grade small { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.mp-grade.grade-A, .mp-grade.grade-B { border-color: var(--up); color: var(--up); }
.mp-grade.grade-C { border-color: var(--gold); color: var(--gold); }
.mp-grade.grade-D, .mp-grade.grade-E { border-color: var(--down); color: var(--down); }
.mp-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mp-bar { display: grid; grid-template-columns: minmax(80px, 160px) 1fr 44px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mp-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-bar i { display: block; height: 6px; border-radius: 3px; background: var(--accent-2); }
.mp-bar b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.mp-follow { padding: 14px 16px; border: 1px solid rgba(217, 169, 78, 0.45); border-radius: 12px; background: rgba(217, 169, 78, 0.05); }
.mp-follow p { margin: 0; }
.mp-todo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; font-size: 14px; }
.mp-todo.sell { background: rgba(239, 83, 80, 0.1); border: 1px solid rgba(239, 83, 80, 0.35); }
.mp-level { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.mp-level.good { background: rgba(38, 166, 154, 0.16); color: var(--up); }
.mp-level.ok { background: rgba(217, 169, 78, 0.16); color: var(--gold); }
.mp-level.late, .mp-level.broken { background: rgba(239, 83, 80, 0.14); color: var(--down); }

.mp-templates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-chip-btn { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; }
.mp-chip-btn:hover { border-color: var(--accent-2); }
.mp-rule-preview { padding: 10px 12px; background: var(--panel-2); border-radius: 10px; }
.rp-card.is-paused { opacity: 0.7; }

@media (max-width: 640px) {
  .mp-health { flex-direction: column; }
  .mp-ticker { max-width: none; }
  .mp-todo { flex-direction: column; align-items: flex-start; }
  .mp-list { grid-template-columns: 1fr 1fr; }
  .mp-card-value { font-size: 17px; }
}

/* hidden özniteliği, display:flex/grid veren sınıflar tarafından ezilmesin */
[hidden] { display: none !important; }
.mp-grid { align-items: start; }

/* Portföylerim — "aldın mı / sattın mı?" soruları */
.mp-questions { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--gold); background: rgba(217, 169, 78, 0.07); }
.mp-questions h3 { margin: 0; font-size: 16px; }
.mp-questions > p { margin: 0; }
.mp-q { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.mp-q-text { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.mp-q-text .rp-tag { flex: 0 0 40px; margin-top: 2px; }
.mp-q-text > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-q-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mp-q-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.mp-q-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); flex: 1 1 140px; }
.mp-q-form input { font: inherit; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; }
@media (max-width: 640px) {
  .mp-q { grid-template-columns: 1fr; }
  .mp-q-actions { justify-content: flex-start; }
}

/* --- Gruplu uygulama menüsü (static/js/nav-active.js buildNav) ---------- */
nav.app-nav { gap: 4px; }
nav.app-nav #nav-user { margin-left: 12px; gap: 10px; }
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted); background: transparent; border: 0; padding: 7px 12px; border-radius: 7px; cursor: pointer;
  transition: background 0.15s, color 0.15s; }
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-group-btn:focus-visible, nav.app-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-group.has-active .nav-group-btn { color: var(--text); background: rgba(79, 140, 255, 0.14); font-weight: 700; }
.nav-caret { font-size: 10px; opacity: 0.7; transition: transform 0.15s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 320; min-width: 230px;
  padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); flex-direction: column; gap: 2px; }
.nav-group.open .nav-menu { display: flex; }
nav.app-nav .nav-menu a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; white-space: nowrap; }
nav.app-nav .nav-menu a small { font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: normal; }
#nav-admin-group .nav-group-btn { color: var(--gold); }
.nav-bell { display: inline-flex; align-items: center; gap: 6px; }
.nav-bell-label { display: none; }
@media (hover: hover) and (min-width: 641px) {
  .nav-group:hover .nav-menu { display: flex; }
  .nav-group:hover .nav-caret { transform: rotate(180deg); }
  /* menüye inerken boşlukta kapanmasın */
  .nav-group:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}
@media (max-width: 640px) {
  header nav.app-nav.mobile-nav-open { gap: 0 !important; }
  header nav.app-nav.mobile-nav-open > a,
  header nav.app-nav.mobile-nav-open .nav-group-btn { width: 100%; justify-content: space-between; padding: 12px 4px;
    min-height: 44px; font-size: 15px; border-radius: 0; background: transparent; }
  header nav.app-nav.mobile-nav-open .nav-group.has-active .nav-group-btn { color: var(--accent-2); }
  .nav-menu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--border); border-radius: 0;
    margin: 0 0 6px 6px; padding: 0 0 0 8px; min-width: 0; background: transparent; }
  header nav.app-nav.mobile-nav-open .nav-menu a { padding: 10px 6px; min-height: 40px; white-space: normal; }
  .nav-bell-label { display: inline; }
  nav.app-nav #nav-user { margin-left: 0; }
}

/* telefonda alt menü bağlantıları sola hizalı */
@media (max-width: 640px) {
  header nav.app-nav.mobile-nav-open .nav-menu a { align-items: flex-start; justify-content: center; text-align: left; }
  header nav.app-nav.mobile-nav-open #nav-user { flex-direction: row; flex-wrap: wrap; align-items: center; }
  header nav.app-nav.mobile-nav-open #nav-user .ghost-btn { margin-left: auto; }
}

/* telefonda yana kaymayı önle: başlık ışığı ve uzun seçenekli kutular */
.hero { overflow-x: clip; }
select { max-width: 100%; }

/* hisse sayfası analist kartları + grafik sayfası fiyat satırı telefonda sığsın */
.analyst-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .analyst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.chart-page .price-block { flex-wrap: wrap; }
  .ratio-card { min-width: 0; }
}

/* Portföylerim — paket portföyü takibiyle açılan yeni portföy notu */
.mp-follow-note { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  background: rgba(217, 169, 78, 0.08); border: 1px solid rgba(217, 169, 78, 0.4); }

/* Panel — kişisel özet şeridi (js/panel-ozet.js) */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ov-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; min-width: 0;
  transition: border-color 0.15s; }
a.ov-card:hover { border-color: var(--accent-2); color: var(--text); }
.ov-k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ov-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-v-sm { font-size: 17px; }
.ov-s { font-size: 12.5px; }
.ov-list { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; font-weight: 600; min-height: 26px; }
.ov-list .rp-tag { display: inline-block; padding: 1px 6px; font-size: 10.5px; margin-right: 2px; }
.ov-alert { border-color: var(--gold); background: rgba(217, 169, 78, 0.07); }
.ov-cta { border-style: dashed; }
.ov-movers { grid-column: span 1; }
.ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.ov-cols > div { display: flex; flex-direction: column; gap: 2px; }
.ov-mover { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--text); text-decoration: none;
  padding: 2px 0; font-variant-numeric: tabular-nums; }
.ov-mover:hover b { color: var(--accent-2); }

/* paket portföyleri tanıtımı: 4 kart */
.model-showcase-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .model-showcase-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .model-showcase-grid.four { grid-template-columns: 1fr; } }

/* Yönetici Paneli — Genel Bakış, kullanıcı tablosu, paket penceresi (js/admin.js) */
.adm-small { font-size: 12px; }
.adm-overview { display: flex; flex-direction: column; gap: 16px; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.adm-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; }
.adm-tile .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.adm-tile .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-tile .s { font-size: 12px; color: var(--muted); }
.adm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.adm-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.adm-box h3 { margin: 0; font-size: 15px; }
.adm-box h4 { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.adm-box p { margin: 0; line-height: 1.6; }
.adm-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.adm-user-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 4px 0 8px; }
.adm-user-tools input { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; min-width: 240px; }
.adm-users td { vertical-align: top; }
.adm-grant { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.adm-edit { font: inherit; font-size: 12px; background: transparent; color: var(--accent-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.adm-edit:hover { border-color: var(--accent-2); }
.adm-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; width: min(420px, calc(100vw - 32px)); }
.adm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.adm-grant-form { display: flex; flex-direction: column; gap: 10px; }
.adm-grant-form h3 { margin: 0; font-size: 16px; word-break: break-all; }
.adm-grant-form p { margin: 0; }
.adm-grant-form > label:not(.chk) { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.adm-grant-form select, .adm-grant-form input[type=number] { font: inherit; font-weight: 400; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.adm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* açılır bölüm başlıkları sola yaslı (ok işareti ayrı flex öğesi olduğu için ortaya/sağa kayıyordu) */
.collapsible-summary > h2, .collapsible-summary > h3 { flex: 1 1 auto; text-align: left; }
.collapsible-summary::before { margin-right: 0; }

/* Portföylerim — sanal portföyde piyasa kapalı uyarısı */
.mp-closed { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: rgba(239, 83, 80, 0.08); border: 1px solid rgba(239, 83, 80, 0.35); }
.mp-trade.is-closed { opacity: 0.6; }

/* Portföylerim — Örnek Portföy kartı */
.mp-chip.sample { background: rgba(38, 166, 154, 0.16); color: var(--up); }
.mp-sample { border-color: rgba(38, 166, 154, 0.45); background: linear-gradient(180deg, rgba(38, 166, 154, 0.06), var(--panel)); }
.mp-sample.is-active { border-color: var(--up); }
a.mp-card { text-decoration: none; }
.mp-sample.is-locked { opacity: 0.85; }
#mp-detail > .rp-rules, #mp-detail > .rp-today { margin: 0; }

/* Paketini yükselt düğmesi — canlı, altın vurgulu (kullanıcı: "pasif gibi duruyor, hiç canlı değil") */
.btn-upgrade { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: #1c1405 !important; background: linear-gradient(135deg, #f3cd7a 0%, #d9a94e 55%, #c48f34 100%);
  box-shadow: 0 0 0 1px rgba(243, 205, 122, 0.55), 0 6px 20px rgba(217, 169, 78, 0.28);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; }
.btn-upgrade::before { content: "⬆"; font-size: 12px; }
.btn-upgrade::after { content: "→"; transition: transform 0.15s; }
.btn-upgrade:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(243, 205, 122, 0.8), 0 10px 26px rgba(217, 169, 78, 0.4); }
.btn-upgrade:hover::after { transform: translateX(3px); }
.btn-upgrade:focus-visible { outline: 2px solid #f3cd7a; outline-offset: 3px; }
.btn-upgrade-sm { padding: 5px 12px; font-size: 12.5px; align-self: flex-start; }
.rp-locked { border: 1px solid rgba(217, 169, 78, 0.4); border-style: solid; background: rgba(217, 169, 78, 0.07); }
@media (prefers-reduced-motion: reduce) {
  .btn-upgrade, .btn-upgrade::after { transition: none; }
  .btn-upgrade:hover { transform: none; }
}

/* Paketler — kullanıcının kendi paketi ve satın alınamayan paketler */
.tier-pricing-card.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(217, 169, 78, 0.45), 0 10px 30px rgba(217, 169, 78, 0.12); }
.tier-pricing-card.is-current .chip { background: rgba(217, 169, 78, 0.18); color: var(--gold); border-color: rgba(217, 169, 78, 0.45); }
.tier-state { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); text-align: center; }
.tier-state.is-current { color: var(--gold); border-color: rgba(217, 169, 78, 0.45); background: rgba(217, 169, 78, 0.08); }
.tier-state small { font-size: 12px; font-weight: 500; color: var(--muted); }
.tier-pricing-card .btn-upgrade { justify-content: center; }

/* Paketler — alt pakete geç düğmesi */
.tier-down { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.tier-down small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Paket Portföyleri — kısa giriş + küçük dipnot */
.rp-lead { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0 0 4px; max-width: 70ch; }
.rp-footnote { font-size: 12px; margin: 0 0 14px; max-width: 80ch; }

/* Yatırım Hesabı Aç sayfası (hesap-ac.html) */
.ha-page .page-head { margin-bottom: 18px; }
.ha-lead { font-size: 16px; line-height: 1.55; max-width: 70ch; margin: 0; }
.ha-small { font-size: 12.5px; }
.ha-section { margin: 26px 0; display: flex; flex-direction: column; gap: 10px; }
.ha-section h3 { margin: 0; font-size: 17px; }
.ha-steps { margin: 0; padding: 0; list-style: none; counter-reset: ha; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ha-steps li { counter-increment: ha; position: relative; padding: 14px 16px 14px 52px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; font-size: 14px; line-height: 1.5; }
.ha-steps li::before { content: counter(ha); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(74, 95, 224, 0.18); color: var(--accent-2); }
.ha-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; max-width: 80ch; }
.ha-group { margin: 12px 0 4px; font-size: 14.5px; }
.ha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ha-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.ha-card:hover { border-color: var(--accent-2); color: var(--text); transform: translateY(-1px); }
.ha-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ha-name { font-weight: 700; font-size: 15px; }
.ha-go { font-size: 12.5px; color: var(--accent-2); font-weight: 600; margin-top: 4px; }
.ha-official { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ha-off-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: rgba(38, 166, 154, 0.06); border: 1px solid rgba(38, 166, 154, 0.35); }
.ha-off-card:hover { border-color: var(--up); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ha-card { transition: none; } .ha-card:hover { transform: none; } }

/* Piyasa Özeti sayfası (piyasa-ozeti.html) */
.pb-current { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; }
.pb-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; }
.pb-kind { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pb-kind.daily { background: rgba(74, 95, 224, 0.16); color: var(--accent-2); }
.pb-kind.weekly { background: rgba(217, 169, 78, 0.16); color: var(--gold); }
.pb-title { margin: 0; font-size: 20px; }
.pb-idx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pb-idx { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px;
  font-variant-numeric: tabular-nums; }
.pb-idx .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.pb-idx .v { font-size: 17px; font-weight: 700; }
.pb-idx span:last-child { font-size: 13px; font-weight: 600; }
.pb-breadth { margin: 0; font-size: 14px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.pb-box { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.pb-box h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.pb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pb-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pb-list li > span:last-child:not(.pb-fc) { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.pb-list a { color: var(--text); text-decoration: none; }
.pb-list a:hover b { color: var(--accent-2); }
.pb-events .pb-list li { flex-direction: column; align-items: flex-start; gap: 1px; }
.pb-fc { font-size: 12px; }
.pb-hi { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(239, 83, 80, 0.14); color: var(--down); }
.pb-note { margin: 0; font-size: 12px; }
.pb-archive { margin-top: 24px; }
.pb-archive h3 { font-size: 15px; margin: 0 0 10px; }
.pb-archive-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pb-arch-item { display: grid; grid-template-columns: 80px 90px 1fr; gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--panel); color: var(--text); text-decoration: none; font-size: 14px; }
.pb-arch-item + .pb-arch-item { border-top: 1px solid var(--border); }
.pb-arch-item:hover { background: var(--panel-2); color: var(--text); }
.pb-arch-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .pb-arch-item { grid-template-columns: 70px 1fr; } .pb-arch-title { grid-column: 1 / -1; } }

/* --- Paket kartları: VIP'e ayrı renk + sadece sonuç gösteren performans kutusu (2026-09-27) --- */
.portfolio-card[data-risk="vip"] {
  border-left-color: #c9a227;
}

.portfolio-card[data-risk="vip"] .chip {
  background: rgba(201, 162, 39, 0.15);
  color: #a8841a;
}

.pkg-perf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.pkg-perf-return {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.pkg-perf-return.pos { color: var(--up); }
.pkg-perf-return.neg { color: var(--down); }

.pkg-perf-line { font-size: 14px; }

.pkg-perf-meta { font-size: 12px; }

/* --- İkincil butonlar canlı görünsün (2026-09-27: "bazı butonlar pasif gibi duruyor") --- */
.btn-secondary {
  background: rgba(74, 95, 224, 0.12);
  color: #c3cbff;
  border: 1px solid rgba(124, 140, 240, 0.55);
}

.btn-secondary:hover {
  background: rgba(74, 95, 224, 0.24);
  border-color: var(--accent-2);
  color: #fff;
  filter: none;
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.btn-secondary:disabled {
  background: var(--panel);
  color: var(--muted);
  border-color: var(--border);
}

.nav-group-btn {
  color: #c9cedb;
}

/* --- Seçili grafik/periyot butonları belirgin olsun (2026-09-27) --- */
.btn-group button.active,
.return-periods-group button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- Sayfa içindeki sade (ghost) butonlar da tıklanabilir görünsün (2026-09-27) --- */
main .ghost-btn {
  background: rgba(74, 95, 224, 0.08);
  border-color: rgba(124, 140, 240, 0.45);
  color: #c3cbff;
  font-weight: 600;
}

main .ghost-btn:hover {
  background: rgba(74, 95, 224, 0.2);
  border-color: var(--accent-2);
  color: #fff;
}

main .ghost-btn:disabled {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

/* --- Telefonda işlem tabloları kart görünümü (2026-09-27: satış tarihleri görünmüyordu) --- */
@media (max-width: 640px) {
  table.stack-mobile thead { display: none; }
  table.stack-mobile, table.stack-mobile tbody { display: block; width: 100%; }
  table.stack-mobile tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
  }
  table.stack-mobile td {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    text-align: left !important;
    font-size: 14px;
  }
  table.stack-mobile td::before {
    content: attr(data-label);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }
  /* Hisse adı satırın tamamını kaplasın, etiketi olmasın */
  table.stack-mobile td:first-child { grid-column: 1 / -1; font-size: 16px; }
  table.stack-mobile td:first-child::before { content: none; }
  .table-scroll-wrap:has(> table.stack-mobile) { overflow-x: visible; }
  .rp-trades:has(> table.stack-mobile) { max-height: 70vh; }
}

/* --- Alım planı kutusu (Portföylerim, gerçek portföy + takip; 2026-09-27) --- */
.mp-plan { border: 1px solid rgba(217, 169, 78, 0.45); border-radius: 12px; padding: 16px; background: rgba(217, 169, 78, 0.05); }
.mp-plan h5 { margin: 14px 0 6px; }
.mp-plan-row {
  display: grid;
  grid-template-columns: auto 90px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--panel);
  font-variant-numeric: tabular-nums;
}
.mp-plan-row strong { font-size: 16px; }
.mp-plan-act { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 6px; }
.mp-plan-row.buy .mp-plan-act { background: rgba(38, 166, 91, 0.18); color: var(--up); }
.mp-plan-row.sell .mp-plan-act { background: rgba(239, 83, 80, 0.18); color: var(--down); }
.mp-plan-empty { padding: 10px 12px; border-radius: 10px; background: var(--panel); margin: 10px 0; }
.mp-cash-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 8px 0; }
.mp-plan-cash { margin-top: 10px; }
.mp-plan-cash summary { cursor: pointer; color: var(--accent-2); font-size: 13px; }
@media (max-width: 640px) {
  .mp-plan-row { grid-template-columns: auto 1fr; }
  .mp-plan-row > span:nth-of-type(2) { grid-column: 1 / -1; }
  .mp-plan-row .btn-small { grid-column: 1 / -1; }
}

/* --- Paket kartlarının üzerine gelince her paket kendi renginde (2026-09-29) --- */
.portfolio-card[data-risk], .tier-pricing-card[data-level] {
  --pkg: var(--accent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.portfolio-card[data-risk="conservative"] { --pkg: var(--up); }
.portfolio-card[data-risk="balanced"] { --pkg: var(--accent); }
.portfolio-card[data-risk="aggressive"] { --pkg: var(--down); }
.portfolio-card[data-risk="vip"] { --pkg: #c9a227; }
.tier-pricing-card[data-level="1"] { --pkg: #8b90a0; }
.tier-pricing-card[data-level="2"] { --pkg: var(--up); }
.tier-pricing-card[data-level="3"] { --pkg: var(--accent); }
.tier-pricing-card[data-level="4"] { --pkg: var(--down); }
.tier-pricing-card[data-level="5"] { --pkg: #c9a227; }

.portfolio-card[data-risk]:hover,
.tier-pricing-card[data-level]:hover {
  border-color: var(--pkg);
  box-shadow: 0 0 0 1px var(--pkg), 0 10px 28px rgba(0, 0, 0, 0.35);
}
/* Sol şerit (paket rengi) hover'da kaybolmasın */
.portfolio-card[data-risk]:hover { border-left-color: var(--pkg); }

/* --- Buton görünümlü bağlantılar genel a:visited / a:hover rengini almasın (2026-09-29: "Ücretsiz Başla yazısı silik, üstüne gelince kayboluyor") --- */
a.btn-primary, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
a.primary-btn, a.primary-btn:visited, a.primary-btn:hover, a.primary-btn:focus, a.primary-btn:active {
  color: #fff;
}
a.btn-secondary, a.btn-secondary:visited { color: #c3cbff; }
a.btn-secondary:hover, a.btn-secondary:focus { color: #fff; }
main a.ghost-btn:visited { color: #c3cbff; }
main a.ghost-btn:hover { color: #fff; }

/* --- Panel: Takip ettiklerim kartları + sağ sütun (2026-09-29: "pc den girince ekranın çoğu boş") --- */
@media (min-width: 1500px) {
  main.dashboard-layout { max-width: 1680px; }
  .dashboard-sidebar { width: 340px; }
}
.wc { margin-bottom: 20px; }
.wc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.wc-top h3 { margin: 0; font-size: 18px; }
.wc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-tab { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--muted); border: 1px solid var(--border); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.wc-tab span { margin-left: 4px; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.wc-tab:hover { color: var(--text); border-color: var(--accent-2); }
.wc-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.wc-tab.active span { background: rgba(255, 255, 255, 0.22); }
.wc-sum { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-sum b { color: var(--text); }
.wc-sum b.up { color: var(--up); }
.wc-sum b.down { color: var(--down); }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wc-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s; }
a.wc-card:hover, a.wc-card:visited:hover { border-color: var(--accent-2); color: var(--text); transform: translateY(-1px); }
a.wc-card:visited { color: var(--text); }
.wc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wc-head img { width: 28px; height: 28px; border-radius: 50%; background: #fff; object-fit: contain; flex-shrink: 0; }
.wc-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wc-id b { font-size: 15px; letter-spacing: 0.02em; }
.wc-id small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-chg { font-size: 12.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); }
.wc-chg.up { color: var(--up); background: rgba(38, 166, 154, 0.14); }
.wc-chg.down { color: var(--down); background: rgba(239, 83, 80, 0.14); }
.wc-price { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-price small { font-size: 12px; color: var(--muted); font-weight: 500; }
.wc-spark { width: 100%; height: 40px; display: block; overflow: visible; }
.wc-spark .wc-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.wc-spark.up .wc-line { stroke: var(--up); }
.wc-spark.down .wc-line { stroke: var(--down); }
.wc-spark .wc-area { stroke: none; opacity: 0.12; }
.wc-spark.up .wc-area, .wc-spark.up circle { fill: var(--up); }
.wc-spark.down .wc-area, .wc-spark.down circle { fill: var(--down); }
.wc-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-foot .up { color: var(--up); font-weight: 700; }
.wc-foot .down { color: var(--down); font-weight: 700; }
.wc-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 12px; }
.wc-note { font-size: 11.5px; margin: 8px 0 0; }

.side-box { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font-variant-numeric: tabular-nums; }
.side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.side-head a { font-size: 12px; }
.side-head .up { color: var(--up); font-weight: 700; }
.side-head .down { color: var(--down); font-weight: 700; }
.side-big { font-size: 22px; font-weight: 700; margin: 4px 0 6px; }
.side-spark { height: 70px; }
.side-note { font-size: 11px; margin: 6px 0 0; }
.side-sec { display: grid; grid-template-columns: 1fr 70px 52px; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.side-sec:last-of-type { border-bottom: 0; }
.side-sec > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sec b { text-align: right; }
.side-sec b.up { color: var(--up); }
.side-sec b.down { color: var(--down); }
.side-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.side-bar i { display: block; height: 100%; border-radius: 3px; }
.side-bar i.up { background: var(--up); }
.side-bar i.down { background: var(--down); }
@media (max-width: 640px) {
  .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wc-card { padding: 10px; }
  .wc-price { font-size: 17px; }
  .wc-head img { width: 22px; height: 22px; }
  .wc-id small { display: none; }
  .wc-sum { margin-left: 0; width: 100%; }
}

/* --- Piyasa haberleri kategorileri (Takvim sekmesi, 2026-09-29) --- */
.news-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.news-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--muted); border: 1px solid var(--border); }
.news-chip span { margin-left: 3px; font-size: 11px; opacity: 0.8; }
.news-chip:hover { color: var(--text); border-color: var(--accent-2); }
.news-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-cat { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.news-cat-merkez { background: rgba(124, 140, 240, 0.16); color: #aab5ff; }
.news-cat-makro { background: rgba(217, 169, 78, 0.16); color: var(--gold); }
.news-cat-borsa { background: rgba(38, 166, 154, 0.16); color: var(--up); }
.news-cat-doviz { background: rgba(240, 180, 41, 0.14); color: #f0b429; }
.news-cat-emtia { background: rgba(255, 138, 76, 0.14); color: #ff8a4c; }
.news-cat-dunya { background: rgba(239, 83, 80, 0.14); color: var(--down); }
.news-cat-hukumet { background: rgba(160, 120, 240, 0.16); color: #c2a6ff; }

/* --- İzleme listem: renge göre süzme + kart renk şeridi (2026-09-29) --- */
.wc-colors { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.wc-color { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; background: var(--panel); color: var(--muted); border: 1px solid var(--border); }
.wc-color i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wc-color span { font-size: 11px; opacity: 0.8; }
.wc-color:hover { color: var(--text); border-color: var(--accent-2); }
.wc-color.active { color: var(--text); border-color: var(--text); background: var(--panel-2); }
.wc-card.wc-colored { border-left: 3px solid var(--wc-color); }

/* --- Yıldız ve renk seçimi %50 büyük (2026-09-29: "yıldız ve renklerin ebatını %50 arttıralım") --- */
.star-btn { font-size: 24px; padding: 4px; }
.star-btn .color-dot { width: 21px; height: 21px; }
.color-popover { gap: 9px; padding: 10px; }
.color-popover-swatch { width: 30px; height: 30px; }

/* --- Mobil menü ekrandan taşmasın (2026-09-29: "mobilde menüde aşağı inip raporu göremiyorum") --- */
@media (max-width: 640px) {
  header nav.mobile-nav-open {
    max-height: calc(100vh - var(--nav-top, 110px));
    max-height: calc(100dvh - var(--nav-top, 110px));
    padding-bottom: 28px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Mobil menü sekme çubuğunun üstünde bitsin, açıkken Vex gizlensin (2026-09-29) --- */
@media (max-width: 640px) {
  header nav.mobile-nav-open {
    max-height: calc(100vh - var(--nav-top, 110px) - var(--nav-bottom, 0px));
    max-height: calc(100dvh - var(--nav-top, 110px) - var(--nav-bottom, 0px));
  }
  body.nav-open #ai-widget-btn, body.nav-open #ai-widget-panel { display: none !important; }
}

/* --- Fiyat alarmı formu (2026-09-29: "mobilde kötü gözüküyor") ---
   .mp-panel alt alta dizer, .mp-inline yan yana + flex-basis 160px verir; ikisi birleşince
   telefonda alanlar 160px yüksekliğinde ve sağa yaslı kalıyordu. */
.mp-panel.mp-inline { flex-direction: row; align-items: flex-end; }
@media (max-width: 640px) {
  .mp-panel.mp-inline { flex-direction: column; align-items: stretch; gap: 12px; }
  .mp-panel.mp-inline > label, .mp-panel.mp-inline > .mp-ticker { flex: 0 0 auto; max-width: none; width: 100%; }
  .mp-panel.mp-inline > button { align-self: stretch; padding: 12px; }
  #al-list .mp-icon-btn { width: 40px; height: 40px; }
}

/* --- Kart görünümünde etiketler yazı boyunda kalsın (2026-09-29) --- */
@media (max-width: 640px) {
  table.stack-mobile td > .rp-live, table.stack-mobile td > .rp-sim, table.stack-mobile td > .rp-tag,
  table.stack-mobile td > .side, table.stack-mobile td > button { align-self: flex-start; }
}

/* === Kısaca Şirket (sade dilde özet + sektörüne göre) === */
.company-summary {
  margin: 0 0 12px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
  max-width: 70ch;
}
.peer-compare-title {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.peer-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.peer-compare-table th,
.peer-compare-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: top;
}
.peer-compare-table th:first-child,
.peer-compare-table td:first-child {
  text-align: left;
}
.peer-compare-table th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.peer-desc {
  font-size: 12px;
  font-weight: 400;
}
.peer-state {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.peer-state-low { background: rgba(79, 140, 255, 0.14); }
.peer-state-high { background: rgba(240, 180, 41, 0.16); }
.peer-state-near { color: var(--muted); }
@media (max-width: 600px) {
  .peer-compare-table th,
  .peer-compare-table td { padding: 7px 6px; font-size: 13px; }
  .peer-desc { display: none; }
}

/* === Tarama: hazır filtreler === */
.ready-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 14px;
}
.ready-presets-label {
  font-size: 13px;
  color: var(--muted);
}
.ready-presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ready-preset-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ready-preset-chip:hover {
  border-color: var(--accent);
}
.ready-preset-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ready-preset-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ready-preset-desc {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 80ch;
}

/* === Bildirim geçmişi: tıklanabilir kayıtlar === */
a.notification-log-link,
a.notification-log-link:visited {
  display: block;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
a.notification-log-link:hover {
  border-color: var(--accent);
  color: var(--text);
}
a.notification-log-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === Mobil üst çubuk: menü düğmesinin yanında bildirim zili === */
.mobile-nav-bell {
  display: none;
}
@media (max-width: 640px) {
  a.mobile-nav-bell,
  a.mobile-nav-bell:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    text-decoration: none;
    order: 2;
  }
  a.mobile-nav-bell.active {
    border-color: var(--accent);
  }
  a.mobile-nav-bell + .mobile-nav-toggle {
    margin-left: 8px;
  }
}

/* === Bildirimler: liste sayfanın başında, önce son 10 kayıt === */
.notification-log-list.collapsed > :nth-child(n+11) {
  display: none;
}

/* === Zilde okunmamış bildirim rozeti === */
.nav-bell,
a.mobile-nav-bell {
  position: relative;
}
.bell-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--down);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--bg);
  box-sizing: content-box;
  pointer-events: none;
}
/* Bildirimler sayfası: bu ziyarette yeni gelenler vurgulu */
.notification-log-item.unread {
  border-color: var(--accent);
  background: var(--panel-2);
}
.notification-log-item.unread .notification-log-item-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* === sürüm 105: önbellekte bozuk kalan v104 yerine === */

/* === Piyasa haberleri: telefonda kart düzeni === */
@media (max-width: 640px) {
  .news-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .news-filter::-webkit-scrollbar { display: none; }
  .news-chip { flex: none; white-space: nowrap; }

  table.news-table,
  table.news-table tbody { display: block; width: 100%; }
  table.news-table thead { display: none; }
  table.news-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
  }
  table.news-table td { display: block; padding: 0; border: 0; }
  table.news-table td.news-title { order: -1; flex-basis: 100%; font-size: 15px; line-height: 1.45; }
  table.news-table td.news-title a { text-decoration: none; color: var(--text); }
  table.news-table td.news-time,
  table.news-table td.news-source { font-size: 12.5px; }
  table.news-table td.news-source::before { content: "·"; margin-right: 10px; }
  table.news-table td.news-catcell { order: 0; }
  table.news-table td.news-source { order: 1; }
  table.news-table td.news-time { order: 2; }
  table.news-table td.news-time::before { content: "·"; margin-right: 10px; }
}
@media (max-width: 640px) { table.news-table { min-width: 0 !important; } }

/* === Bildirimler: okundu / okunmadı + sabitlenen paket bildirimleri === */
.notification-log-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.notification-new {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
}
.notification-log-item-head { gap: 8px; }
/* Okunmuşlar sönük, okunmamışlar belirgin — fark bir bakışta görülsün */
.notification-log-item.read { opacity: 0.62; }
.notification-log-item.read .notification-log-item-title { font-weight: 500; }
.notification-log-item.read:hover { opacity: 0.85; }
.notification-pinned:not(:empty) {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.notification-pinned-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}
.notification-log-item-head { justify-content: flex-start; }

/* === Bildirimler: "Tamam"a basılana kadar tekrar eden hatırlatmalar === */
.nt-reminders {
  display: grid;
  gap: 10px;
  margin: 4px 0 22px;
}
.nt-reminder {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--panel-2);
}
.nt-reminder-text { flex: 1 1 240px; min-width: 0; }
.nt-reminder-title { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.nt-reminder-count { font-size: 12px; color: var(--gold); margin-top: 6px; }
.nt-reminder-ack { flex: none; }

/* === Portföylerim: VİOP pozisyonları === */
.mp-viop-add,
.mp-viop-closed {
  margin-top: 12px;
}
.mp-viop-add > summary,
.mp-viop-closed > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-2);
  padding: 6px 0;
}
.mp-viop-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 8px 0;
}
.mp-viop-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.mp-viop-form select { min-width: 220px; max-width: 100%; }
.mp-viop-form input[type="number"] { width: 110px; }
@media (max-width: 640px) {
  .mp-viop-form label, .mp-viop-form select, .mp-viop-form input[type="number"] { width: 100%; }
}

/* === Yapay zekâ özetleri (haber / KAP, sadece yönetici) === */
.ai-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent-2);
  background: rgba(124, 140, 240, 0.08);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  display: block;
  white-space: normal;
  text-align: left;
}
.ai-note-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 3px;
}
.ai-note-why { color: var(--muted); margin-top: 3px; }
.ai-note-tickers { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.ai-note-tickers a { text-decoration: none; }

/* ai-note geri bildirim düğmeleri (yönetici) */
.ai-note-fb { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.ai-note-fb button, .ai-note-edit button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); color: inherit; cursor: pointer; }
.ai-note-fb button:hover, .ai-note-edit button:hover { border-color: var(--accent-2); }
.ai-note-state { color: var(--muted); margin-right: auto; }
.ai-note-edit { margin-top: 6px; display: grid; gap: 6px; }
.ai-note-edit label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.ai-note-edit textarea { font: inherit; font-size: 13px; width: 100%; box-sizing: border-box; padding: 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

/* === Bildirimler: sola kaydırıp silme (2026-09-30) === */
.nt-swipe {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  touch-action: pan-y; /* dikey kaydırma sayfanın, yatay hareket bizim */
  transition: height .26s ease, margin-bottom .26s ease;
}
.nt-swipe > .notification-log-item {
  position: relative;
  z-index: 1;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Okunmuş kart yarı saydam olunca arkadaki kırmızı görünmesin: sönüklük içeriğe */
.nt-swipe > .notification-log-item.read,
.nt-swipe > .notification-log-item.read:hover { opacity: 1; }
.nt-swipe > .notification-log-item.read > * { opacity: .62; }
.nt-swipe > .notification-log-item.read:hover > * { opacity: .85; }
.nt-swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 22px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(239, 83, 80, .35), var(--down));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transition: opacity .15s ease;
}
.nt-swipe-bg span { transition: transform .18s ease; display: inline-block; }
.nt-swipe.is-swiping .nt-swipe-bg,
.nt-swipe.is-removing .nt-swipe-bg { opacity: 1; }
.nt-swipe.will-delete .nt-swipe-bg span,
.nt-swipe.is-removing .nt-swipe-bg span { transform: scale(1.18); }
.nt-swipe.is-collapsing { height: 0 !important; margin-bottom: -10px; }
.nt-swipe.is-collapsing .nt-swipe-bg { opacity: 0; transition: opacity .2s ease; }

/* Masaüstü: fareyle kaydırmak zor olabilir, üzerine gelince küçük × düğmesi */
.nt-del {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.nt-del:hover, .nt-del:focus-visible { color: #fff; background: var(--down); border-color: var(--down); }
@media (hover: hover) and (pointer: fine) {
  .nt-swipe > .notification-log-item { padding-right: 46px; }
  .nt-del { display: block; opacity: 0; transition: opacity .15s ease; }
  .nt-swipe:hover .nt-del, .nt-del:focus-visible { opacity: 1; }
  .nt-swipe.is-swiping .nt-del, .nt-swipe.is-removing .nt-del { opacity: 0; }
}

.nt-undo {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px);
  opacity: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  transition: transform .22s ease, opacity .22s ease;
}
.nt-undo.show { transform: translate(-50%, 0); opacity: 1; }
.nt-undo button {
  font: inherit;
  font-weight: 600;
  color: var(--accent-2);
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .nt-swipe, .nt-swipe-bg, .nt-undo { transition: none; }
}

/* === Bildirimler: belirgin "Geri al" + silinen bildirimler (2026-09-30) === */
.nt-undo {
  overflow: hidden;
  gap: 16px;
  padding: 12px 12px 14px 18px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 4px rgba(74, 95, 224, .18);
  font-size: 15px;
  font-weight: 600;
}
.nt-undo .nt-undo-btn {
  color: #fff;
  background: var(--accent);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 700;
}
.nt-undo .nt-undo-btn:hover, .nt-undo .nt-undo-btn:focus-visible { background: var(--accent-2); }
/* Kalan süre: altta azalan çizgi */
.nt-undo-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--accent-2);
  transform-origin: left center;
  animation: nt-undo-countdown linear forwards;
}
@keyframes nt-undo-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  /* Alt menü çubuğunun (64px) üstünde, ekran genişliğinde */
  .nt-undo {
    left: 12px;
    right: 12px;
    justify-content: space-between;
    bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(24px);
  }
  .nt-undo.show { transform: translateY(0); }
}

.nt-trash {
  margin-top: 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0 14px;
}
.nt-trash > summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  color: var(--muted);
  list-style-position: inside;
}
.nt-trash[open] > summary { color: var(--text); }
.nt-trash-note { font-size: 13px; margin: 0 0 10px; }
.nt-trash-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.nt-trash-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  transition: opacity .25s ease, transform .25s ease;
}
.nt-trash-item.is-restored { opacity: 0; transform: translateY(-6px); }
.nt-trash-text { flex: 1; min-width: 0; }
.nt-trash-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.nt-trash-meta { font-size: 12px; margin-top: 2px; }
.nt-trash-restore {
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-2);
  cursor: pointer;
}
.nt-trash-restore:hover { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nt-undo-timer { animation: none; }
  .nt-trash-item { transition: none; }
}

/* === Bildirimler: "Geri al" silinen bildirimin yerinde (2026-09-30) === */
.nt-swipe.is-undo .nt-swipe-bg,
.nt-swipe.is-undo .nt-del { display: none; }
.nt-undo-inline {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 12px 16px;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: var(--panel);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  animation: nt-undo-in .2s ease-out;
}
.nt-undo-inline .nt-undo-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  min-height: 42px;
  cursor: pointer;
}
.nt-undo-inline .nt-undo-btn:hover,
.nt-undo-inline .nt-undo-btn:focus-visible { background: var(--accent-2); }
@keyframes nt-undo-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nt-undo-inline { animation: none; } }

/* === Yönetici Paneli: daha derli toplu görünüm (2026-10-01) === */
.adm-sub { margin: -4px 0 16px; font-size: 13px; }
/* Özet kutuları: 6 → 3+3 → 2+2+2, hiçbir genişlikte tek başına kalan kutu olmasın */
.adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .adm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .adm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.adm-tile { gap: 4px; padding: 14px 16px; border-radius: 12px; }
.adm-tile .k { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
.adm-tile .v { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.adm-tile .s { line-height: 1.4; }
/* Kartlar: masaüstünde 2 × 2 */
.adm-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .adm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-box { gap: 0; padding: 0; border-radius: 12px; overflow: hidden; }
.adm-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.adm-box-head h3 { margin: 0; font-size: 16px; }
.adm-box-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; flex: 1; }
.adm-box-body h4 { margin: 10px 0 2px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; font-family: var(--font-body); }
.adm-box-foot { padding: 11px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Durum etiketi */
.adm-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); }
.adm-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-pill.good { color: var(--up); background: rgba(38, 166, 154, 0.1); border-color: rgba(38, 166, 154, 0.35); }
.adm-pill.warn { color: var(--gold); background: rgba(217, 169, 78, 0.1); border-color: rgba(217, 169, 78, 0.35); }
.adm-pill.bad { color: var(--down); background: rgba(239, 83, 80, 0.1); border-color: rgba(239, 83, 80, 0.35); }
/* Etiket — değer satırları */
.adm-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.adm-kv:last-of-type { border-bottom: 0; }
.adm-kv span { color: var(--muted); }
.adm-kv b { font-variant-numeric: tabular-nums; }
.adm-empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px;
  color: var(--muted); font-size: 13px; text-align: center; }
.adm-ok { margin: 0; color: var(--up); font-size: 14px; line-height: 1.5; }
/* Küçük tablo (paket portföyleri) */
.adm-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-mini th { padding: 0 0 8px; text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; background: none; border: 0; }
.adm-mini td { padding: 9px 0; border-top: 1px solid var(--border); }
.adm-mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-mini td:first-child { font-weight: 600; }
/* Satır kartları (bitecek abonelikler, hatalı işler) */
.adm-rows { display: flex; flex-direction: column; gap: 8px; }
.adm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); }
.adm-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.adm-row.is-bad { border-color: rgba(239, 83, 80, 0.35); }
.adm-err { color: var(--down); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); }
.adm-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.adm-link { font-weight: 600; text-decoration: none; }
.adm-link:hover { text-decoration: underline; }
/* Düğmeler: parmakla basılabilir boyut, klavye odağı görünür */
.adm-edit { min-height: 32px; padding: 4px 12px; border-radius: 8px; }
@media (max-width: 640px) { .adm-edit { min-height: 40px; } }
#admin-tabs .tab:focus-visible, .adm-edit:focus-visible, .adm-link:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* === Yönetici Paneli düzeltme: kart altı yazısı sola, kutu etiketleri tek satır (2026-10-01) === */
.adm-box-foot { text-align: left; margin: 0; }
.adm-tile .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Piyasa Özeti: ekonomik veriler bildirimdeki sade başlıklarla (2026-10-02) === */
.pb-events .pb-list { gap: 10px; }
.pb-events .pb-list li { gap: 2px; }
.pb-ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pb-ev-sub { font-size: 12.5px; line-height: 1.45; }

/* === Bildirim metni satır satır (2026-10-02) === */
.notification-log-item-body { white-space: pre-line; }

/* === ⚠️ Risk uyarısı + Riskli Şirketler (2026-10-02) === */
.tabs .tab.tab-risk { color: var(--down); border-color: rgba(239, 83, 80, 0.45); }
.tabs .tab.tab-risk.active { color: #fff; background: var(--down); border-color: var(--down); }
.risk-intro { display: grid; gap: 8px; padding: 14px 16px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid rgba(239, 83, 80, 0.35); background: rgba(239, 83, 80, 0.07); font-size: 14px; }
.risk-intro p { margin: 0; line-height: 1.55; }
.risk-legend-box { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.risk-legend-box > summary { cursor: pointer; padding: 11px 0; font-weight: 600; }
.risk-legend { display: grid; gap: 8px; padding-bottom: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.risk-legend-item { padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--border); font-size: 13.5px; }
.risk-legend-item p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
.risk-legend-item.sev-high, .risk-card.sev-high { border-left-color: var(--down); }
.risk-legend-item.sev-medium, .risk-card.sev-medium { border-left-color: var(--gold); }
.risk-legend-item.sev-info, .risk-card.sev-info { border-left-color: var(--up); }
.risk-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.risk-tools select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); margin-left: 6px; }
.risk-list { display: grid; gap: 10px; }
.risk-card { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border); }
.risk-card header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.risk-card header a { color: var(--text); text-decoration: none; font-size: 16px; }
.risk-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.risk-sev { flex: none; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.risk-sev.sev-high { color: var(--down); } .risk-sev.sev-medium { color: var(--gold); } .risk-sev.sev-info { color: var(--up); }
.risk-meta { font-size: 12.5px; margin: 4px 0 8px; }
.risk-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.risk-signals li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; font-size: 13.5px; }
.risk-signals .risk-when { color: var(--muted); font-variant-numeric: tabular-nums; grid-row: span 2; }
.risk-signals a { font-weight: 600; text-decoration: none; }
.risk-signals li.sev-high a { color: var(--down); } .risk-signals li.sev-medium a { color: var(--gold); } .risk-signals li.sev-info a { color: var(--up); }
.risk-sum { font-size: 12.5px; overflow-wrap: anywhere; }
/* Hisse sayfasındaki kırmızı kutu */
.risk-banner { margin: 12px 0 14px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--down);
  background: rgba(239, 83, 80, 0.1); font-size: 14px; }
.risk-banner-head { font-size: 16px; font-weight: 700; color: var(--down); margin-bottom: 4px; }
.risk-banner p { margin: 0 0 8px; line-height: 1.55; }
.risk-banner ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 3px; }
.risk-banner li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.risk-banner a { color: var(--text); font-weight: 600; }
.risk-banner-more { font-size: 13px; color: var(--accent-2) !important; }
/* Portföylerim etiketi */
.risk-badge { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap; color: #fff !important; background: var(--down); }
.risk-badge.sev-medium { background: var(--gold); color: #1a1a1a !important; }
/* Bildirimler listesinde risk uyarısı */
.notification-log-item.type-risk_alert { border-color: var(--down); background: rgba(239, 83, 80, 0.09); }
.notification-log-item.type-risk_alert .notification-log-item-title { color: var(--down); }

/* === Riskli Şirketler: kart başlığı (genel header stilinden bağımsız) === */
.risk-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.risk-card-head a { color: var(--text); text-decoration: none; font-size: 16px; }

/* === Riskli Şirketler: sitede sayfası olmayan şirket (Yakın İzleme Pazarı vb., 2026-10-02) === */
.risk-card-head > b { font-size: 16px; }
.risk-offsite { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  color: var(--muted); border: 1px dashed var(--border); cursor: help; }

/* === Hisse sayfası: sadece takip (endeks dışı) etiketi, 2026-10-05 === */
.track-only-badge { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; color: var(--gold); border: 1px solid var(--gold); cursor: help; vertical-align: 1px; }
.track-only-badge[hidden] { display: none; }

/* === Tablo başlığına dokununca sıralama (2026-10-05, js/sortable-table.js) === */
th.th-sortable { cursor: pointer; user-select: none; }
th.th-sortable::after { content: "↕"; margin-left: 4px; font-size: 0.85em; opacity: 0.35; }
th.th-sortable[data-dir="asc"]::after { content: "▲"; opacity: 0.95; color: var(--accent-2); }
th.th-sortable[data-dir="desc"]::after { content: "▼"; opacity: 0.95; color: var(--accent-2); }
th.th-sortable:hover { color: var(--text); }
th.th-sortable:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.sort-mobile { display: none; }
@media (max-width: 640px) {
  .sort-mobile { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
  .sort-mobile select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); }
}