/* ============================================================================
   PUSULA — Ölçüm Föyü
   ----------------------------------------------------------------------------
   Bu uygulama bir işlem terminali değil, bir ÖLÇÜM ALETİ. İki bağımsız yargıyı
   (değer · zaman) tartar, bir okuma verir ve ölçemediğinde bunu söyler.
   Tasarım bunu taşır: porselen föy zemini, Prusya mavisi yapı mürekkebi,
   basılı toprak tonlarında semantik renkler. Ekran LED değil, kâğıt.

   TİPOGRAFİ KURALI — tek kural, her yerde geçerli:
       mono (JBMono)  = ÖLÇÜLEN   → sayılar, kararlar, etiketler, birimler
       sans (Inter)   = SÖYLENEN  → cümleler, açıklamalar, gerekçeler
   Bir aletin başlığı da okumalarıyla aynı metrik ızgarada durur.

   Renk semantiği basılı mürekkeptir, ekran ışığı değil:
       yeşil  = ucuz / al          (orman, #2E6B44 — neon değil)
       pirinç = bekle / belirsiz   (sarı pirinç, LED sarısı değil)
       kiremit= pahalı / sat       (öküz kanı, alarm kırmızısı değil)
   ========================================================================== */

/* ---------------------------------------------------------------- yazı tipleri */
@font-face { font-family: "Inter"; src: url("font/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-ext-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("font/inter-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "JBMono"; src: url("font/jbmono-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- jetonlar */
:root {
  color-scheme: light;

  /* Zemin: soğuk porselen — krem DEĞİL. Yeşile çalan gri, laboratuvar camı altı kâğıt. */
  --kagit: #E6EAE4;
  --foy: #F8FAF6;
  --foy-2: #EDF0EA;
  --cizik: #CBD2C8;
  --cizik-2: #B0B9AD;

  --murekkep: #131A15;
  --murekkep-2: #47524A;
  --soluk: #5D665F;      /* 5.66:1 föy · 4.89:1 kâğıt üstünde — ikisinde de AA */

  /* Yapı mürekkebi: Prusya mavisi. Marka rengi budur; semantik değildir. */
  --prusya: #1C3F70;
  --prusya-zem: rgba(28, 63, 112, .09);

  /* Semantik — basılı mürekkep tonları */
  --yesil: #2E6B44;      --yesil-zem: rgba(46, 107, 68, .10);
  --pirinc: #8C6A1C;     --pirinc-zem: rgba(140, 106, 28, .12);
  --kiremit: #8F372B;    --kiremit-zem: rgba(143, 55, 43, .10);

  /* Tipografi — mono ölçer, sans konuşur */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JBMono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --t-okuma: clamp(52px, 11vw, 92px);   /* karar sözcüğü */
  --t-dev: clamp(30px, 5vw, 44px);
  --t-buyuk: 24px;
  --t-baslik: 17px;
  --t-orta: 15px;
  --t-govde: 14px;
  --t-kucuk: 12.5px;
  --t-mikro: 10.5px;

  /* Boşluk — 4px taban, föy cömert */
  --b1: 4px; --b2: 8px; --b3: 12px; --b4: 18px; --b5: 28px; --b6: 44px; --b7: 72px;
  --olcu: 1180px;      /* föy genişliği */
  --omurga-en: 78px;   /* aygıtın kasası */
  --olcu-dar: 720px;   /* tek sütun okuma genişliği */

  /* Alet çizimi keskindir; yumuşak köşe yok ama sıfır da değil */
  --r: 3px; --r-b: 6px; --r-tam: 999px;

  /* Canvas serileri — LİTERAL hex olmalı (bkz. yardimci.js renkAlfa).
     Prusya mavisi fiyat çizgisi, pirinç SMA50, mor SMA200: üçü de birbirinden
     hem tonda hem parlaklıkta ayrışır, renk körlüğünde de ayırt edilir. */
  --seri-1: #1C3F70; --seri-2: #8C6A1C; --seri-3: #5B4B96;
  --iyi: #2E6B44; --uyari: #8C6A1C; --kritik: #8F372B;
  --izgara: #CBD2C8; --yuzey: #F8FAF6;

  --kenar: 1px solid var(--cizik);
  --golge: 0 1px 2px rgba(19, 26, 21, .05), 0 8px 24px -12px rgba(19, 26, 21, .12);
}

/* Gece föyü: aynı jetonlar, ters basılmış. Kullanıcı sistem tercihini seçer. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --kagit: #14181A;
    --foy: #1B2124;
    --foy-2: #222A2D;
    --cizik: #2E383B;
    --cizik-2: #3D494D;
    --murekkep: #E6EAE4;
    --murekkep-2: #A6B0AA;
    --soluk: #8E9992;   /* 5.6:1 föy · 6.1:1 kâğıt üstünde — ikisinde de AA */
    --prusya: #7FA6DB;  --prusya-zem: rgba(127, 166, 219, .12);
    --yesil: #64AD7F;   --yesil-zem: rgba(100, 173, 127, .13);
    --pirinc: #C89C46;  --pirinc-zem: rgba(200, 156, 70, .14);
    --kiremit: #C46A5C; --kiremit-zem: rgba(196, 106, 92, .13);
    --seri-1: #7FA6DB; --seri-2: #C89C46; --seri-3: #9B8AD6;
    --iyi: #64AD7F; --uyari: #C89C46; --kritik: #C46A5C;
    --izgara: #2E383B; --yuzey: #1B2124;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

/* ---------------------------------------------------------------- taban */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 var(--t-govde)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
p { margin: 0 0 var(--b3); }
ul { margin: 0; padding-left: 1.1em; }
a { color: var(--prusya); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--prusya); outline-offset: 2px; border-radius: var(--r); }
.gizli { display: none !important; }

/* Ölçülen her şey mono, tabular. Sayılar sütun hâlinde hizalanır. */
.num, .im, .h-deger, .izleme-fiyat, .serit-fiyat, .karar-fiyat,
.firsat-skor, .pf-toplam-deger, .faiz-yon-deger, .nihai-rozet, .bacak-deger {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Etiketler: mono, küçük, geniş harf aralığı — alet plakasındaki kazıma yazı */
.h-etiket, .bacak-etiket, .etiket, .yan-baslik, .fkr-etiket, .halka-etiket,
.pf-dagilim-etiket, .ph-et, .alarm-tur-etiket, .gecmis-rozet, .kb-baslik {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soluk);
}

/* ============================================================================
   KABUK — ALET YÜZÜ
   ----------------------------------------------------------------------------
   Bu bir sayfa değil, bir aygıtın yüzü. Sekme çubuğu yok: sol kenarda bir
   OMURGA var (aygıtın kasası), geri kalan alanın tamamı YÜZ. Görünümler yüzün
   içinde değişir, sayfalar arasında gezinilmez.

   Silüet kasten "web sayfası" olmaktan çıkarıldı: ortalanmış sütun + üst sekme
   yerine, kenardan kenara bir ölçüm alanı ve onu çerçeveleyen dar bir kasa.
   ========================================================================== */
.uygulama {
  display: grid;
  grid-template-columns: var(--omurga-en) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- omurga
   Aygıtın kasası. Marka dikey kazınmış, görünüm seçici alt alta. Aktif
   görünümü PİRİNÇ bir çubuk işaretler — kasadaki metal işaret.               */
.omurga {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--b4) 0;
  background: var(--foy);
  border-right: var(--kenar);
  z-index: 40;
}
.omurga-marka {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-weight: 700; font-size: var(--t-kucuk);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--murekkep); text-decoration: none;
  margin-bottom: var(--b5);
}
.omurga-liste { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.omurga-liste button {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--b2) 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soluk);
  transition: color .12s, background .12s;
}
.omurga-liste button svg { width: 19px; height: 19px; }
.omurga-liste button:hover { color: var(--murekkep); background: var(--foy-2); }
.omurga-liste button.aktif { color: var(--murekkep); }
/* Pirinç işaret: kasadaki metal. Marka rengi Prusya mavisi olduğu için burada
   ondan AYRI bir malzeme kullanılır — mavi bilgi taşır, pirinç konum gösterir. */
.omurga-liste button.aktif::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--pirinc);
}
/* Kasanın dibindeki etiketsiz nokta kaldırıldı: hiçbir CSS durumu yoktu, yani
   "meşgul" hâli hiç görünmüyordu. Araştırma durumu artık künye çıtasındaki
   kadranda — orada bir etiketi ve bir işlevi var. */

/* ---------------------------------------------------------------- yüz */
.yuz { display: flex; flex-direction: column; min-width: 0; }

/* ---------------------------------------------------------------- künye çıtası
   Aletin üst plakası: solda GİRDİ (ne ölçülecek), sağda GÖSTERGE (en son ne
   zaman ölçtü, sonrakine ne kaldı). İkisi de canlı; burada süs metin yok.
   Çıtanın alt kenarı ölçüm alanının başladığı yeri işaretler.                */
.ust-bar {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: var(--b4);
  padding: var(--b3) var(--b5);
  background: color-mix(in srgb, var(--kagit) 90%, transparent);
  backdrop-filter: blur(10px);
}

.arama-sarici { position: relative; flex: 1 1 auto; max-width: 520px; }
.arama {
  width: 100%; padding: var(--b2) 40px var(--b2) 34px;
  background: var(--foy); border: var(--kenar); border-radius: var(--r);
  color: var(--murekkep); font-size: var(--t-govde);
  transition: border-color var(--sure-mikro) var(--egri), box-shadow var(--sure-mikro) var(--egri);
}
.arama::placeholder { color: var(--soluk); }
.arama:focus { border-color: var(--prusya); outline: none; box-shadow: 0 0 0 3px var(--prusya-zem); }
.arama-ikon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--soluk); pointer-events: none;
}
.arama-sarici:focus-within .arama-ikon { color: var(--prusya); }
/* "/" kısayolu zaten çalışıyordu ama hiçbir yerde yazmıyordu — kazınmış tuş. */
.arama-tus {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  padding: 1px 6px; border: 1px solid var(--cizik); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-mikro); line-height: 1.5;
  color: var(--soluk); background: var(--foy-2); pointer-events: none;
}
.arama-sarici:focus-within .arama-tus { opacity: 0; }

/* Ölçüm göstergesi: kadran + son ölçüm + sonraki tura kalan. Düğmedir —
   tıklayınca ekrandaki bütün okumalar tazelenir. */
.olcum {
  display: flex; align-items: center; gap: var(--b2);
  margin-left: auto; padding: 5px var(--b3) 5px 7px;
  background: var(--foy); border: var(--kenar); border-radius: var(--r-tam);
  cursor: pointer; white-space: nowrap;
  transition: background var(--sure-mikro) var(--egri), border-color var(--sure-mikro) var(--egri);
}
.olcum:hover { background: var(--foy-2); border-color: var(--cizik-2); }
.olcum:active { transform: translateY(1px); }
.olcum-etiket {
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--soluk);
}
.olcum:hover .olcum-etiket { color: var(--murekkep-2); }
/* Sayaç canlı olan taraftır: mürekkep tam, etiket soluk. Aralarında ince kural. */
.olcum-sayac {
  position: relative; padding-left: var(--b3); margin-left: var(--b1);
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--murekkep);
}
.olcum-sayac::before {
  content: ""; position: absolute; left: 0; top: -2px; bottom: -2px;
  width: 1px; background: var(--cizik);
}
.olcum-sayac[hidden] { display: none; }

/* Kadran: yay sonraki taramaya kalan payı çizer. Araştırma sürerken yay kısa
   bir süpürmeye dönüp döner — "alet şu an ölçüyor". */
.olcum-kadran { width: 15px; height: 15px; flex: none; transform: rotate(-90deg); }
.kadran-iz  { fill: none; stroke: var(--cizik); stroke-width: 2.6; }
.kadran-yay {
  fill: none; stroke: var(--prusya); stroke-width: 2.6; stroke-linecap: butt;
  stroke-dasharray: 56.549; stroke-dashoffset: 56.549;
  transition: stroke-dashoffset var(--sure-yerlesme) var(--egri);
}
.olcum.mesgul .kadran-yay {
  stroke: var(--pirinc); stroke-dasharray: 14 43; stroke-dashoffset: 0;
  transition: none;
}
.olcum.mesgul .olcum-kadran { animation: kadran-don 1.1s linear infinite; }
@keyframes kadran-don { to { transform: rotate(270deg); } }
.oneriler {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--foy); border: var(--kenar); border-radius: var(--r);
  box-shadow: var(--golge); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.oneri { padding: var(--b2) var(--b3); cursor: pointer; border-bottom: 1px solid var(--cizik); }
.oneri:last-child { border-bottom: 0; }
.oneri:hover { background: var(--prusya-zem); }
.oneri-ad { color: var(--murekkep-2); }
.oneri-borsa { font-family: var(--mono); font-size: var(--t-mikro); color: var(--soluk); letter-spacing: .08em; }

/* Yüzün içeriği: kenardan kenara, ortalanmış dar sütun YOK. */
.ana { padding: var(--b4) var(--b5) var(--b7); min-width: 0; }

.ulke-sekmeler { display: flex; gap: var(--b1); flex-wrap: wrap; }
.ulke-sekmeler button {
  padding: var(--b2) var(--b3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--soluk); cursor: pointer;
}
.ulke-sekmeler button:hover { color: var(--murekkep); }
.ulke-sekmeler button.aktif { color: var(--murekkep); border-bottom-color: var(--prusya); }

/* ---------------------------------------------------------------- düğmeler */
.ufak-btn, .birincil-btn, .alarm-btn, .poz-btn, .sil-btn, .ha-sec, .bildirim-btn {
  padding: var(--b2) var(--b3);
  background: var(--foy); border: var(--kenar); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--murekkep-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ufak-btn:hover, .alarm-btn:hover, .poz-btn:hover, .ha-sec:hover, .bildirim-btn:hover {
  background: var(--foy-2); color: var(--murekkep); border-color: var(--cizik-2);
}
.birincil-btn { background: var(--prusya); border-color: var(--prusya); color: #F8FAF6; }
.birincil-btn:hover { filter: brightness(1.12); }
.sil-btn:hover { color: var(--kiremit); border-color: var(--kiremit); }

/* ---------------------------------------------------------------- föy blokları */
.bolum, .panel, .karne, .gecmis-kart, .havuz-kart, .plan-kart,
.fon-karsilastir-kart, .halka-sarici, .ha-sarici {
  background: var(--foy);
  border: var(--kenar);
  border-radius: var(--r-b);
  padding: var(--b4);
  margin-bottom: var(--b4);
}
.bolum-baslik {
  display: flex; align-items: baseline; gap: var(--b3); flex-wrap: wrap;
  margin-bottom: var(--b4);
}
.bolum-baslik h2, .grafik-baslik, .gecmis-baslik, .plan-baslik, .havuz-ust, .kb-baslik {
  font-size: var(--t-baslik); font-weight: 600; letter-spacing: -.015em;
}
.bolum-govde { color: var(--murekkep-2); }

/* Föy başlığı: bölümün ne olduğunu söyleyen ince kural + mono etiket */
.manset {
  display: flex; align-items: center; gap: var(--b3);
  margin: var(--b6) 0 var(--b4);
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--soluk);
}
.manset::after { content: ""; flex: 1; height: 1px; background: var(--cizik); }
/* Panelin ilk manşeti üstten boşluk almaz: imza öğe (terazi) katlamanın
   altına düşmemeli — ilk bakışta karar VE onu veren okuma görünmeli. */
.manset:first-child { margin-top: 0; }

/* ============================================================================
   İMZA — TERAZİ
   Karar bir rozet değil, bir OKUMADIR. İki kefe iki bacağı taşır; kiriş
   ağır tarafa yatar. Değer bacağı hesaplanamadıysa o kefe BOŞ çizilir ve
   kiriş kilitlenir: alet "tartamıyorum" der. Gizlemek yerine gösterir.
   ========================================================================== */
/* ============================================================================
   OKUMA — yüzün kendisi
   ----------------------------------------------------------------------------
   Karar bir kartın İÇİNDE değil; okuma sayfanın kendisidir. Kutu kenarlığı yok,
   ortalanmış sütun yok: sözcük kenardan başlar, kiriş baştan sona uzanır.
   Ölçek kasten poster ölçeğinde — bir aletin göstergesi küçük yazılmaz.
   ========================================================================== */
.terazi-kart {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--b6);
}
.terazi-ic { position: relative; }

/* Üst satır: sembol solda, fiyat sağda — aletin künyesi, ince ve sessiz. */
.okuma-ust {
  display: flex; align-items: baseline; gap: var(--b3); flex-wrap: wrap;
  padding-bottom: var(--b2);
  border-bottom: var(--kenar);
  margin-bottom: var(--b4);
}
.okuma-sembol {
  font-family: var(--mono); font-weight: 700; font-size: var(--t-baslik);
  letter-spacing: .04em;
}
.okuma-ad { color: var(--murekkep-2); font-size: var(--t-kucuk); }
.okuma-fiyat {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-buyuk);
  font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* KARAR — sayfanın kendisi. Kenardan başlar, alt hizası kirişe oturur. */
.okuma-karar {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(58px, 15vw, 190px);
  line-height: .84; letter-spacing: -.055em;
  margin: 0 0 var(--b3); text-indent: -.06em;
}
.okuma-al    { color: var(--yesil); }
.okuma-bekle { color: var(--pirinc); }
.okuma-sat, .okuma-uzak { color: var(--kiremit); }
.okuma-yok   { color: var(--soluk); }

.okuma-cumle {
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5;
  color: var(--murekkep-2); max-width: 46ch;
}
.okuma-guven {
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--soluk); margin-top: var(--b2);
}

/* ---------------------------------------------------------------- kiriş
   Terazi artık bir çizim değil, MİMARİ: yüzün bir ucundan öbürüne uzanır ve
   kefeler kenarlarda durur. Sayfa okumaya göre yatar.                        */
.terazi {
  width: 100%; max-width: 1000px; height: auto; display: block;
  margin: var(--b5) 0 var(--b4);
  overflow: visible;
}
.terazi .kiris { stroke: var(--murekkep); stroke-width: 2; fill: none; }
.terazi .direk, .terazi .mesnet { stroke: var(--murekkep); stroke-width: 2; fill: none; }
.terazi .aski { stroke: var(--cizik-2); stroke-width: 1.25; }
.terazi .kefe { stroke-width: 2; fill: none; }
.terazi .kefe-dolu { fill: currentColor; }
.terazi .kefe-bos { stroke-dasharray: 4 4; stroke: var(--soluk); }
.terazi .kiris-grup {
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  transform-origin: 50% 46px;
}
.terazi text {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; fill: var(--soluk);
}
@media (prefers-reduced-motion: reduce) { .terazi .kiris-grup { transition: none; } }

/* ---------------------------------------------------------------- okuma çıktısı
   İki bacak yan yana; ortalama ALINMADIĞI yerleşimden de belli olur.         */
.bacaklar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0; border-top: var(--kenar); border-bottom: var(--kenar);
}
.bacak {
  padding: var(--b4) var(--b4) var(--b4) var(--b3);
  border-left: 3px solid var(--cizik-2);
  background: none;
}
.bacak + .bacak { border-left-color: var(--cizik-2); }
.bacak-deger {
  font-family: var(--mono); font-weight: 700;
  font-size: var(--t-dev); letter-spacing: -.03em; margin-top: var(--b1);
}
.bacak-not { font-size: var(--t-kucuk); color: var(--murekkep-2); margin-top: var(--b2); }
.bacak-yontem { font-size: var(--t-mikro); color: var(--soluk); margin-top: var(--b2); line-height: 1.5; }
.bacak-ucuz   { border-left-color: var(--yesil); }
.bacak-ucuz   .bacak-deger { color: var(--yesil); }
.bacak-pahali { border-left-color: var(--kiremit); }
.bacak-pahali .bacak-deger { color: var(--kiremit); }
.bacak-adil   { border-left-color: var(--pirinc); }
.bacak-adil   .bacak-deger { color: var(--pirinc); }
.bacak-yok    .bacak-deger { color: var(--soluk); font-size: var(--t-baslik); }

.nihai-gerekce { margin: var(--b4) 0 0; padding-left: 1.05em; font-size: var(--t-govde); color: var(--murekkep-2); }
.nihai-gerekce li { margin-bottom: var(--b1); }
.nihai-uyari {
  margin-top: var(--b3); padding: var(--b3);
  background: var(--pirinc-zem); border-left: 2px solid var(--pirinc);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-kucuk); color: var(--murekkep);
}
.nihai-kiyas {
  margin-top: var(--b3); padding-top: var(--b3); border-top: var(--kenar);
  font-size: var(--t-kucuk); color: var(--murekkep-2);
}
.okuma-guven {
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--soluk);
}

/* ---------------------------------------------------------------- satır listeleri
   Kart yerine satır: ana ekranda 20 kart yerine taranabilir bir cetvel.        */
.cetvel { border-top: var(--kenar); }
.cetvel-satir {
  display: grid;
  grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--b3);
  padding: var(--b3) var(--b2);
  border-bottom: var(--kenar);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: background .12s;
}
.cetvel-satir:hover { background: var(--foy); }
.cetvel-kod { font-family: var(--mono); font-weight: 600; letter-spacing: -.01em; }
.cetvel-ad { color: var(--murekkep-2); font-size: var(--t-kucuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cetvel-fiyat { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.cetvel-karar {
  font-family: var(--mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px var(--b2); border-radius: var(--r); white-space: nowrap;
}
.cetvel-karar.al { color: var(--yesil); background: var(--yesil-zem); }
.cetvel-karar.bekle { color: var(--pirinc); background: var(--pirinc-zem); }
.cetvel-karar.sat, .cetvel-karar.uzak { color: var(--kiremit); background: var(--kiremit-zem); }
.cetvel-karar.yok { color: var(--soluk); background: var(--foy-2); }

/* İzleme kartları da cetvele indirgendi */
.izleme-liste { display: block; }
.izleme-ust { display: flex; align-items: baseline; gap: var(--b2); }
.izleme-sembol { font-family: var(--mono); font-weight: 600; }
.izleme-ad { color: var(--murekkep-2); font-size: var(--t-kucuk); }
.izleme-fiyat { font-weight: 600; }
.izleme-alt { display: flex; align-items: center; gap: var(--b2); font-size: var(--t-kucuk); color: var(--soluk); }
.izleme-detay { display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap; }
.izleme-skor { font-family: var(--mono); font-size: var(--t-mikro); color: var(--soluk); }
.kivilcim { opacity: .85; }

/* ---------------------------------------------------------------- veri hücreleri */
.detay-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--cizik);
  border: var(--kenar); border-radius: var(--r); overflow: hidden;
}
.detay-hucre { background: var(--foy); padding: var(--b3); }
.h-deger { font-size: var(--t-buyuk); font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.h-not { font-size: var(--t-mikro); color: var(--soluk); margin-top: var(--b1); line-height: 1.45; }
.yukari { color: var(--yesil); }
.asagi { color: var(--kiremit); }
.notr, .soluk { color: var(--soluk); }

/* Cipler */
.cip, .gecmis-rozet, .gundem-rozet, .bayat-rozet, .stooq-rozet, .normallesme-rozet {
  display: inline-block; padding: 2px var(--b2);
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .1em;
  text-transform: uppercase; border-radius: var(--r);
  background: var(--foy-2); color: var(--murekkep-2); border: 1px solid var(--cizik);
}
.cip.al, .t-al, .b-al { color: var(--yesil); background: var(--yesil-zem); border-color: transparent; }
.cip.sat, .t-sat, .b-sat { color: var(--kiremit); background: var(--kiremit-zem); border-color: transparent; }
.cip.bekle, .t-notr, .b-bekle { color: var(--pirinc); background: var(--pirinc-zem); border-color: transparent; }

/* ---------------------------------------------------------------- tablolar */
.veri-tablo, .ha-tablo { width: 100%; border-collapse: collapse; font-size: var(--t-govde); }
.veri-tablo th, .ha-tablo th {
  text-align: left; padding: var(--b2);
  font-family: var(--mono); font-size: var(--t-mikro); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soluk);
  border-bottom: 1px solid var(--cizik-2);
}
.veri-tablo td, .ha-tablo td { padding: var(--b2); border-bottom: var(--kenar); }
.veri-tablo .num, .veri-tablo th.num, .sag { text-align: right; }
.veri-tablo tr:hover td { background: var(--foy-2); }

/* ---------------------------------------------------------------- açılır bölüm
   "Gereksiz bilgi birikimi" çözümü: derinlik SİLİNMEDİ, katlandı.
   Varsayılan kapalı; isteyen açar.                                            */
.katlanir { border: var(--kenar); border-radius: var(--r-b); background: var(--foy); margin-bottom: var(--b3); }
.katlanir > summary {
  display: flex; align-items: center; gap: var(--b2);
  padding: var(--b3) var(--b4); cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--murekkep-2);
}
.katlanir > summary::-webkit-details-marker { display: none; }
.katlanir > summary::before {
  content: "+"; font-weight: 700; color: var(--prusya);
  width: 1em; display: inline-block;
}
.katlanir[open] > summary::before { content: "–"; }
.katlanir[open] > summary { border-bottom: var(--kenar); }
.katlanir-govde { padding: var(--b4); }
.katlanir-not { margin-left: auto; color: var(--soluk); text-transform: none; letter-spacing: .04em; }

/* ---------------------------------------------------------------- durum kutuları */
.uyari-kutu, .hata-kutu, .karsilastir-uyari, .plan-uyari, .halka-hata, .alarm-hata {
  padding: var(--b3) var(--b4); border-radius: var(--r);
  font-size: var(--t-kucuk); line-height: 1.55;
  background: var(--pirinc-zem); border-left: 2px solid var(--pirinc); color: var(--murekkep);
}
.hata-kutu, .halka-hata, .alarm-hata { background: var(--kiremit-zem); border-left-color: var(--kiremit); }
.bos-durum, .karne-bos, .pf-yok, .plan-yok, .serit-bos, .kb-az-veri {
  padding: var(--b5) var(--b4); text-align: center;
  color: var(--soluk); font-size: var(--t-kucuk); line-height: 1.6;
}
.kaynak-not, .gecikme-not, .aciklayici, .aciklama, .yasal, .havuz-aciklama,
.strateji-bilgi, .gecmis-not, .kb-yorum, .ha-ust-not, .ipucu, .yan-ipucu {
  font-size: var(--t-mikro); color: var(--soluk); line-height: 1.55;
}

/* Oturum rozeti — yalnız çok kullanıcılı kurulumda görünür.
   Kimlik bir uyarı değil bir künyedir: sessiz durur, mono çünkü ölçülen/sabit
   bir değerdir (metin değil), ve pirinç çünkü omurgadaki gibi KONUM gösterir. */
.kullanici-rozet {
  font-family: var(--mono); font-size: var(--t-mikro);
  color: var(--pirinc); border: 1px solid currentColor; border-radius: 2px;
  padding: 1px var(--b1); letter-spacing: .04em; white-space: nowrap;
}

/* ================================================================ GİRİŞ EKRANI
   Uygulamanın geri kalanıyla aynı malzeme: porselen föy, Prusya mavisi yapı
   mürekkebi, mono = ölçülen / sans = söylenen. Giriş ayrı bir ürün değil,
   aynı aletin kapağı. */
.giris-sayfa {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--b5) var(--b4); background: var(--kagit);
}
.giris-kart {
  width: 100%; max-width: 25rem;
  background: var(--foy); border: 1px solid var(--cizik);
  border-radius: 3px; padding: var(--b6) var(--b5) var(--b5);
  box-shadow: 0 1px 2px rgba(19,26,21,.05), 0 12px 32px -18px rgba(19,26,21,.28);
}
.giris-arma { display: block; width: 96px; margin: 0 auto var(--b3); color: var(--prusya); }
.giris-baslik {
  font-size: 1.5rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; margin: 0; color: var(--murekkep); font-weight: 600;
}
.giris-alt {
  text-align: center; color: var(--soluk); font-size: var(--t-mikro);
  letter-spacing: .1em; text-transform: uppercase; margin: var(--b1) 0 var(--b5);
}

.giris-sekmeler { display: flex; gap: var(--b1); margin-bottom: var(--b4); }
.giris-sekme {
  flex: 1; padding: var(--b2); font: inherit; font-size: .85rem;
  background: none; border: 0; border-bottom: 2px solid var(--cizik);
  color: var(--soluk); cursor: pointer;
}
.giris-sekme.etkin { color: var(--prusya); border-bottom-color: var(--prusya); font-weight: 600; }

.giris-etiket {
  display: block; font-size: var(--t-mikro); color: var(--soluk);
  letter-spacing: .08em; text-transform: uppercase; margin: var(--b3) 0 var(--b1);
}
.giris-girdi {
  width: 100%; box-sizing: border-box; padding: var(--b2) var(--b3);
  font: inherit; font-size: 1rem;   /* 16px: iOS küçükte sayfayı yakınlaştırır */
  color: var(--murekkep); background: var(--kagit);
  border: 1px solid var(--cizik); border-radius: 2px;
}
.giris-girdi:focus { outline: 2px solid var(--prusya); outline-offset: 1px; border-color: var(--prusya); }
.giris-kod { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.giris-dugme {
  width: 100%; margin-top: var(--b4); padding: var(--b3);
  font: inherit; font-weight: 600; letter-spacing: .04em;
  color: var(--foy); background: var(--prusya);
  border: 0; border-radius: 2px; cursor: pointer;
}
.giris-dugme:hover:not(:disabled) { filter: brightness(1.12); }
.giris-dugme:disabled { opacity: .6; cursor: default; }

.giris-hata {
  margin: var(--b3) 0 0; padding: var(--b2) var(--b3);
  font-size: .875rem; color: var(--foy); background: var(--kiremit); border-radius: 2px;
}
.giris-not { margin: var(--b2) 0 0; font-size: var(--t-mikro); color: var(--soluk); line-height: 1.5; }
.giris-dipnot {
  margin: var(--b5) 0 0; padding-top: var(--b3); border-top: 1px solid var(--cizik);
  font-size: var(--t-mikro); color: var(--soluk); line-height: 1.55; text-align: center;
}

/* Çıkış — rozetin yanında, sessiz. Bir eylem olduğu için altı çizili. */
.cikis-baglanti {
  color: var(--soluk); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.cikis-baglanti:hover { color: var(--kiremit); }

/* Portföy kaleminden pozisyon kaldırma — sessiz durur, üstüne gelince kızarır.
   Yıkıcı bir eylem olduğu için görünür ama bağırmayan bir denetim. */
.pf-sil {
  background: none; border: 0; cursor: pointer; padding: 0 var(--b1);
  color: var(--cizik-2); font-size: var(--t-govde); line-height: 1;
  margin-left: auto;
}
.pf-sil:hover:not(:disabled) { color: var(--kiremit); }
.pf-sil:disabled { opacity: .4; cursor: default; }
.pf-ust { display: flex; align-items: center; gap: var(--b2); }

/* ================================================================ GÜNDEM
   Makro kartlar mono (ölçülen), gerekçeler sans (söylenen) — uygulamanın
   tipografi kuralı burada da geçerli. */
.gundem-kartlar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--b2); margin-bottom: var(--b3);
}
.gundem-kart {
  background: var(--foy-2); border: 1px solid var(--cizik);
  border-radius: 2px; padding: var(--b3);
}
.gundem-kart.sonuk { opacity: .55; }
.gundem-kart-ad {
  font-size: var(--t-mikro); color: var(--soluk);
  letter-spacing: .08em; text-transform: uppercase;
}
.gundem-kart-deger {
  font-family: var(--mono); font-size: var(--t-buyuk); font-weight: 700;
  color: var(--prusya); line-height: 1.25; margin-top: 2px;
}
.gundem-kart-alt { font-size: var(--t-mikro); color: var(--soluk); line-height: 1.4; }

.gundem-eksik { margin: var(--b1) 0 var(--b2); padding-left: var(--b4); font-size: var(--t-kucuk); }

/* Varlık başına okuma */
.gundem-varlik {
  border: 1px solid var(--cizik); border-radius: 2px;
  padding: var(--b3); margin-bottom: var(--b2); background: var(--foy);
}
.gundem-varlik-ust {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--b2); flex-wrap: wrap; margin-bottom: var(--b2);
}
.gundem-sembol { font-family: var(--mono); font-weight: 700; color: var(--murekkep); }
.gundem-sinif { font-size: var(--t-mikro); color: var(--soluk); margin-left: var(--b2); }

.gundem-okuma {
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .06em;
  padding: 2px var(--b2); border-radius: 2px; white-space: nowrap;
}
.gundem-okuma.iyi { color: var(--yesil); background: var(--yesil-zem); }
.gundem-okuma.kotu { color: var(--kiremit); background: var(--kiremit-zem); }
.gundem-okuma.karisik { color: var(--pirinc); background: var(--pirinc-zem); }
.gundem-okuma.yok { color: var(--soluk); background: var(--foy-2); }

.gundem-kurallar { list-style: none; margin: 0; padding: 0; }
.gundem-kurallar li {
  font-size: var(--t-govde); line-height: 1.55; color: var(--murekkep-2);
  padding: var(--b2) 0 var(--b2) var(--b3);
  border-left: 2px solid var(--cizik); margin-bottom: var(--b1);
}
.gundem-kurallar li.lehte { border-left-color: var(--yesil); }
.gundem-kurallar li.aleyhte { border-left-color: var(--kiremit); }
.gundem-kurallar li.belirsiz { border-left-color: var(--pirinc); }
.gundem-kanal {
  font-family: var(--mono); font-size: var(--t-mikro); color: var(--soluk);
  text-transform: uppercase; letter-spacing: .06em; margin-right: var(--b1);
}
.gundem-yon {
  font-size: var(--t-mikro); font-weight: 600; margin-right: var(--b2);
  text-transform: uppercase; letter-spacing: .04em;
}
.gundem-yon.lehte { color: var(--yesil); }
.gundem-yon.aleyhte { color: var(--kiremit); }
.gundem-yon.belirsiz { color: var(--pirinc); }

.gundem-tablo .sag { font-family: var(--sans); font-size: var(--t-mikro); }

/* Haber akışı */
.gundem-haberler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--b3); margin-bottom: var(--b3);
}
.gundem-haber-blok { border: 1px solid var(--cizik); border-radius: 2px; padding: var(--b3); }
.gundem-haber-baslik {
  font-size: var(--t-mikro); color: var(--prusya); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: var(--b2); border-bottom: 1px solid var(--cizik);
  display: flex; justify-content: space-between; align-items: center;
}
.gundem-haber-sayi { font-family: var(--mono); color: var(--soluk); font-weight: 400; }
.gundem-haber-liste { list-style: none; margin: var(--b2) 0 0; padding: 0; }
.gundem-haber-liste li { font-size: var(--t-kucuk); line-height: 1.5; margin-bottom: var(--b2); }
.gundem-haber-liste a { color: var(--murekkep); text-decoration: none; }
.gundem-haber-liste a:hover { color: var(--prusya); text-decoration: underline; }
.gundem-haber-kaynak { display: block; font-size: var(--t-mikro); color: var(--soluk); }

/* Regresyon ölçümü — Gündem içindeki "neye tepki veriyor" bloğu */
.olcum-alani { margin: var(--b2) 0; }
.olcum-sonuc {
  border-top: 1px solid var(--cizik); margin-top: var(--b3); padding-top: var(--b3);
}
.olcum-ust { display: flex; justify-content: space-between; gap: var(--b2); flex-wrap: wrap; align-items: baseline; }
.olcum-faktorler { list-style: none; margin: var(--b3) 0; padding: 0; }
.olcum-faktorler li {
  padding: var(--b2) 0 var(--b2) var(--b3); margin-bottom: var(--b2);
  border-left: 2px solid var(--cizik);
}
.olcum-faktorler li.ters { border-left-color: var(--kiremit); }
.olcum-faktorler li.ayni { border-left-color: var(--yesil); }
.olcum-faktorler li.yok { border-left-color: var(--cizik); opacity: .72; }
.olcum-cumle { font-size: var(--t-orta); color: var(--murekkep); line-height: 1.5; }
.olcum-guven { font-size: var(--t-kucuk); color: var(--soluk); line-height: 1.5; margin-top: 2px; }
.olcum-yorum {
  font-size: var(--t-kucuk); color: var(--murekkep-2); line-height: 1.5;
  margin-top: var(--b1); padding-left: var(--b2); border-left: 1px dotted var(--cizik-2);
}
.olcum-yildiz { font-family: var(--mono); color: var(--pirinc); font-weight: 700; }

.olcum-uyum {
  font-size: var(--t-govde); color: var(--murekkep-2); line-height: 1.55;
  background: var(--foy-2); padding: var(--b3); border-radius: 2px; margin-bottom: var(--b2);
}
.olcum-sinav {
  font-size: var(--t-govde); line-height: 1.55; padding: var(--b3);
  border-radius: 2px; margin-bottom: var(--b3); border-left: 3px solid var(--cizik);
}
.olcum-sinav.iyi { border-left-color: var(--yesil); background: var(--yesil-zem); }
.olcum-sinav.kotu { border-left-color: var(--kiremit); background: var(--kiremit-zem); }
.olcum-sinav.yok { background: var(--foy-2); }

.olcum-tablo-kutu summary {
  cursor: pointer; font-size: var(--t-kucuk); color: var(--prusya); margin-bottom: var(--b2);
}
.olcum-tablo { font-size: var(--t-kucuk); }
.olcum-tablo .num { font-family: var(--mono); }
.olcum-uyarilar {
  list-style: none; margin: var(--b3) 0 0; padding: var(--b3);
  border: 1px dashed var(--cizik-2); border-radius: 2px;
}
.olcum-uyarilar li {
  font-size: var(--t-mikro); color: var(--soluk); line-height: 1.5; margin-bottom: var(--b1);
}

/* Netleşen kural — ölçümün genel kuralın sustuğu yeri doldurduğu blok.
   Ölçümün en değerli çıktısı bu, o yüzden en görünür olan da bu. */
.olcum-netlesen {
  font-size: var(--t-govde); line-height: 1.55; padding: var(--b3);
  border-radius: 2px; margin: var(--b3) 0; border-left: 3px solid var(--pirinc);
  background: var(--pirinc-zem); color: var(--murekkep);
}
.olcum-netlesen.lehte { border-left-color: var(--yesil); background: var(--yesil-zem); }
.olcum-netlesen.aleyhte { border-left-color: var(--kiremit); background: var(--kiremit-zem); }
.olcum-netlesen-ust {
  display: flex; align-items: center; gap: var(--b2);
  flex-wrap: wrap; margin-bottom: var(--b2);
}
.olcum-rozet {
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--prusya);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px var(--b1);
}

/* ================================================================ PROFİL
   Uygulamanın geri kalanı piyasayı ölçer; bu sekme kullanıcıyı gösterir.
   Ölçüm yok, o yüzden terazi/kadran dili de yok — düz künye. */
.profil-kimlik {
  display: flex; align-items: center; gap: var(--b4);
  padding: var(--b4) 0 var(--b5);
}
.profil-arma {
  width: 48px; height: 48px; flex: none; color: var(--prusya);
  background: var(--prusya-zem); border-radius: 50%; padding: var(--b2);
  box-sizing: border-box;
}
.profil-ad {
  font-family: var(--mono); font-size: var(--t-buyuk); font-weight: 600;
  color: var(--murekkep); letter-spacing: .02em;
  display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap;
}
.profil-alt { font-size: var(--t-kucuk); color: var(--soluk); margin-top: 2px; }
.profil-rozet {
  font-family: var(--mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pirinc); border: 1px solid currentColor; border-radius: 2px;
  padding: 1px var(--b1);
}
.profil-rozet.ufak { font-size: 9px; }

/* Sayaçlar — mono, çünkü ölçülen şeyler. */
.profil-sayaclar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--b2); margin-bottom: var(--b3);
}
.profil-sayac {
  background: var(--foy-2); border: 1px solid var(--cizik);
  border-radius: 2px; padding: var(--b3) var(--b2); text-align: center;
}
.profil-sayi {
  font-family: var(--mono); font-size: var(--t-dev); font-weight: 700;
  color: var(--prusya); line-height: 1.1;
}
.profil-etiket {
  font-size: var(--t-mikro); color: var(--soluk);
  letter-spacing: .08em; text-transform: uppercase; margin-top: 2px;
}

/* Davet kodu — telefonla okunup yazılacak, o yüzden iri ve aralıklı. */
.profil-kod {
  font-family: var(--mono); font-size: var(--t-orta); font-weight: 700;
  letter-spacing: .16em; color: var(--murekkep);
  background: var(--pirinc-zem); border: 1px solid var(--pirinc);
  border-radius: 2px; padding: var(--b2) var(--b3); user-select: all;
}

.profil-tablo {
  width: 100%; border-collapse: collapse; font-size: var(--t-govde);
  margin-bottom: var(--b3);
}
.profil-tablo th {
  text-align: left; font-size: var(--t-mikro); color: var(--soluk);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: var(--b2) 0; border-bottom: 1px solid var(--cizik);
}
.profil-tablo td { padding: var(--b2) 0; border-bottom: 1px solid var(--foy-2); }
.profil-tablo .sag { text-align: right; color: var(--soluk); font-family: var(--mono); font-size: var(--t-kucuk); }

/* Parola değiştirme — eylem çubuğunda, açılıp kapanan. */
.parola-form {
  display: flex; flex-wrap: wrap; gap: var(--b2); align-items: center;
  width: 100%; margin-top: var(--b2);
}
.parola-form .giris-girdi { width: auto; flex: 1 1 10rem; font-size: var(--t-govde); }
.parola-sonuc { font-size: var(--t-mikro); color: var(--soluk); }

/* ---------------------------------------------------------------- acil şerit */
.acil-serit {
  position: sticky; top: 0; z-index: 60;
  background: var(--kiremit); color: #F8FAF6;
  padding: var(--b2) var(--b4);
}
.acil-oge { display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap; }
.acil-baslik { font-family: var(--mono); font-weight: 700; font-size: var(--t-mikro); letter-spacing: .16em; text-transform: uppercase; }
.acil-emir { font-weight: 600; }
.acil-sebep { font-size: var(--t-kucuk); opacity: .9; }

/* ---------------------------------------------------------------- piyasa şeridi
   Gösterge bandı: künye çıtasının altında, her enstrüman ince kurallarla
   ayrılmış bir HÜCRE. Eskiden bant kenardan kenara akıyor ve altındaki föyle
   hizalanmıyordu; artık ilk hücre föy kenarından başlar.                      */
.serit-sarici {
  position: relative;
  background: color-mix(in srgb, var(--foy) 55%, transparent);
  border-top: var(--kenar);
  border-bottom: var(--kenar);
}
/* Taşan uçlar kesilmiş görünmesin: bant sola/sağa doğru zemine karışır. */
.serit-sarici::before, .serit-sarici::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--b4);
  pointer-events: none; z-index: 1;
}
.serit-sarici::before { left: 0; background: linear-gradient(90deg, var(--kagit), transparent); }
.serit-sarici::after { right: 0; background: linear-gradient(270deg, var(--kagit), transparent); }
.serit { display: flex; overflow-x: auto; padding: 0 var(--b5); scrollbar-width: none; }
.serit::-webkit-scrollbar { display: none; }
.serit-oge {
  display: flex; align-items: baseline; gap: var(--b2);
  padding: var(--b2) var(--b4); white-space: nowrap;
}
.serit-oge:first-child { padding-left: 0; }
.serit-oge + .serit-oge { border-left: var(--kenar); }
.serit-ad { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
/* Parlama arka planla çalışır; bitişik kenarlarda görünür olsun diye ince pay. */
.serit-fiyat { font-weight: 600; font-size: var(--t-kucuk); padding: 1px 3px; margin: 0 -3px; border-radius: var(--r); }
.serit-degisim { font-family: var(--mono); font-size: var(--t-mikro); }

/* ---------------------------------------------------------------- faiz */
.faiz-yon {
  display: flex; align-items: center; gap: var(--b4);
  padding: var(--b4); border: var(--kenar); border-radius: var(--r-b); background: var(--foy);
  border-left: 3px solid var(--cizik-2);
}
.faiz-yon.yukari { border-left-color: var(--kiremit); }
.faiz-yon.asagi { border-left-color: var(--yesil); }
.faiz-yon-ok { font-size: var(--t-dev); line-height: 1; color: var(--soluk); }
.faiz-yon.yukari .faiz-yon-ok { color: var(--kiremit); }
.faiz-yon.asagi .faiz-yon-ok { color: var(--yesil); }
.faiz-yon-metin { font-family: var(--mono); font-weight: 700; font-size: var(--t-baslik); letter-spacing: .02em; }
.faiz-yon-alt { font-size: var(--t-kucuk); color: var(--murekkep-2); margin-top: var(--b1); }
.faiz-yon-deger { margin-left: auto; font-size: var(--t-dev); font-weight: 600; text-align: right; letter-spacing: -.02em; }
.faiz-vade { display: block; font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .12em; color: var(--soluk); }
.faiz-reel { background: var(--foy); padding: var(--b3); }
.faiz-reel.yukari .h-deger { color: var(--yesil); }
.faiz-reel.asagi .h-deger { color: var(--kiremit); }
.kod-blok {
  background: var(--foy-2); border: var(--kenar); border-radius: var(--r);
  padding: var(--b3); overflow-x: auto;
  font-family: var(--mono); font-size: var(--t-kucuk); line-height: 1.6; color: var(--murekkep-2);
}

/* ---------------------------------------------------------------- işlem planı */
.plan-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--cizik); border: var(--kenar); border-radius: var(--r); overflow: hidden; }
.plan-hucre { background: var(--foy); padding: var(--b3); }
.plan-bar { height: 6px; border-radius: var(--r-tam); background: var(--foy-2); overflow: hidden; display: flex; margin: var(--b3) 0; }
.pb-odul { background: var(--yesil); }
.pb-risk { background: var(--kiremit); }
.plan-cumle { font-size: var(--t-govde); color: var(--murekkep-2); }
.plan-kelly { font-size: var(--t-kucuk); color: var(--murekkep-2); margin-top: var(--b2); }

/* ---------------------------------------------------------------- strateji / havuz */
.strateji-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--b3); }
.strateji-kart { background: var(--foy-2); border: var(--kenar); border-radius: var(--r); padding: var(--b3); }
.strateji-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--b2); }
.strateji-ad { font-weight: 600; font-size: var(--t-govde); }
.strateji-agirlik { font-family: var(--mono); font-size: var(--t-mikro); color: var(--soluk); letter-spacing: .1em; }
.strateji-neden { font-size: var(--t-kucuk); color: var(--murekkep-2); margin-top: var(--b2); }
.strateji-gecmis { font-size: var(--t-mikro); color: var(--soluk); margin-top: var(--b2); }
.isabet-cubuk, .gosterge-cubugu, .havuz-bar { position: relative; height: 5px; background: var(--foy); border-radius: var(--r-tam); overflow: hidden; margin-top: var(--b1); }
.isabet-cubuk .dolgu, .gosterge-cubugu .dolgu, .havuz-bar .dolgu { height: 100%; background: var(--prusya); }
.hata-bandi { position: absolute; top: 0; height: 100%; background: var(--murekkep); opacity: .14; }
.havuz-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--b3); }
.havuz-tally { font-family: var(--mono); font-size: var(--t-kucuk); color: var(--murekkep-2); }

/* ---------------------------------------------------------------- karne / portföy */
.karne-satir, .pf-kalem, .fkr-satir, .haber-satir, .alarm-mesaj, .fon-bilesen-satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--b3);
  padding: var(--b2) 0; border-bottom: var(--kenar); font-size: var(--t-kucuk);
}
.karne-satir:last-child, .pf-kalem:last-child { border-bottom: 0; }
.karne-oran, .pf-toplam-deger { font-family: var(--mono); font-weight: 600; }
.karne-sag, .pf-alt { color: var(--soluk); font-size: var(--t-mikro); font-family: var(--mono); }

/* Bayat fiyatlı kalem. Sayı doğru hesaplanmış olabilir ama GÜNCEL olmayabilir;
   sessizce göstermek yanlış göstermekten farksızdı. */
.pf-bayat { border-left: 2px solid var(--uyari); padding-left: 6px; }
.pf-bayat-uyari { color: var(--uyari); margin-top: 2px; }
.pf-dagilim { height: 6px; border-radius: var(--r-tam); overflow: hidden; display: flex; margin: var(--b2) 0; background: var(--foy-2); }
.pf-dilim { height: 100%; }
.olcek { position: relative; height: 26px; margin: var(--b3) 0; }
.olcek-band { position: absolute; height: 6px; top: 10px; border-radius: var(--r-tam); background: var(--murekkep); opacity: .16; }
.olcek-bolge { position: absolute; top: 10px; height: 6px; }
.olcek-isaret { position: absolute; top: 4px; width: 2px; height: 18px; background: var(--murekkep); }

/* ---------------------------------------------------------------- yükleme */
.yukleme { color: var(--soluk); font-size: var(--t-kucuk); padding: var(--b4) 0; }
.iskelet { display: grid; gap: var(--b2); margin-top: var(--b3); }
.iskelet-satir, .iskelet-kart {
  background: linear-gradient(90deg, var(--foy-2) 25%, var(--foy) 50%, var(--foy-2) 75%);
  background-size: 200% 100%; animation: kayma 1.4s linear infinite;
  border-radius: var(--r); height: 44px;
}
.iskelet-kart { height: 92px; }
@keyframes kayma { to { background-position: -200% 0; } }
.ilerleme-nokta::after { content: "…"; animation: nokta 1.2s steps(4) infinite; }
@keyframes nokta { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) {
  .iskelet-satir, .iskelet-kart, .ilerleme-nokta::after { animation: none; }
}

/* ---------------------------------------------------------------- formlar */
select, input[type="text"], input[type="number"], input[type="date"], input[type="search"] {
  padding: var(--b2) var(--b3); background: var(--foy); border: var(--kenar);
  border-radius: var(--r); color: var(--murekkep); font: inherit;
}
select:focus, input:focus { border-color: var(--prusya); outline: none; box-shadow: 0 0 0 3px var(--prusya-zem); }
.eylem-cubugu { display: flex; gap: var(--b2); flex-wrap: wrap; align-items: center; margin-bottom: var(--b4); }
.alarm-form, .pozisyon-form { display: grid; gap: var(--b2); margin-top: var(--b3); }

/* ---------------------------------------------------------------- grafik */
.grafik { width: 100%; border: var(--kenar); border-radius: var(--r); background: var(--foy); }

/* ---------------------------------------------------------------- duyarlı */
/* ---------------------------------------------------------------- duyarlı
   Dar ekranda kasa yana değil ALTA geçer: omurga yatay bir çıtaya dönüşür.
   Aygıt aynı aygıttır, sadece tutuş yönü değişir.                            */
@media (max-width: 900px) {
  .uygulama { grid-template-columns: 1fr; }
  .omurga {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; flex-direction: row; align-items: stretch;
    padding: 0 0 env(safe-area-inset-bottom);
    border-right: 0; border-top: var(--kenar);
    background: color-mix(in srgb, var(--foy) 96%, transparent);
    backdrop-filter: blur(10px);
    overflow-x: auto; scrollbar-width: none;
  }
  .omurga::-webkit-scrollbar { display: none; }
  .omurga-marka { display: none; }
  .omurga-liste { flex-direction: row; width: auto; flex: 1; }
  /* Yedi öğe dar ekrana eşit bölünür. Sabit genişlikle ikisi kayma alanında
     kalıyordu — gizli gezinme öğesi keşfedilmez. */
  .omurga-liste button { padding: var(--b2) 2px; min-width: 0; flex: 1 1 0; font-size: 8.5px; letter-spacing: .04em; }
  .omurga-liste button svg { width: 17px; height: 17px; }
  .omurga { overflow-x: hidden; }
  .omurga-liste button.aktif::before {
    left: 6px; right: 6px; top: 0; bottom: auto; width: auto; height: 3px;
  }
  .ana { padding: var(--b3) var(--b3) 104px; }
  .ust-bar { padding: var(--b2) var(--b3); gap: var(--b2); }
  /* Dar ekranda gösterge sadeleşir: kadran + kalan süre kalır, uzun etiket
     düşer. Bilgi kaybolmaz — düğmenin title'ı tam cümleyi taşır. */
  .olcum-etiket { display: none; }
  .olcum-sayac { padding-left: 0; margin-left: 0; }
  .olcum-sayac::before { content: none; }
  .arama-tus { display: none; }
  .arama { padding-right: var(--b3); }
  .arama-sarici { max-width: none; }
  .serit { padding: 0 var(--b3); }
  .serit-sarici::before, .serit-sarici::after { width: var(--b3); }
  .gizle-mobil { display: none; }
  /* Fırsat panelinin dar ekran kuralları kendi bileşeninin yanında duruyor
     (bkz. "TARAMA FÖYÜ" bölümünün sonu) — burada tanımlansaydı bileşen bloğu
     dosyada daha sonra geldiği için onları ezerdi. */
  .cetvel-satir { grid-template-columns: minmax(72px, 1fr) auto auto; }
  .cetvel-ad { display: none; }
  .okuma-fiyat { margin-left: auto; }
  .okuma-karar { letter-spacing: -.045em; }
  .faiz-yon { flex-wrap: wrap; }
  .faiz-yon-deger { margin-left: 0; }
  .bacaklar { grid-template-columns: 1fr; }
  .bacak + .bacak { border-top: var(--kenar); }
}



/* Yazdırma: föy zaten kâğıt. */
@media print {
  .ust-bar, .omurga, .eylem-cubugu, .katlanir { display: none; }
  body { background: #fff; }
  .terazi-kart, .bolum { border-color: #999; box-shadow: none; }
}

/* ---------------------------------------------------------------- izleme satırı
   Kart değil satır: 10 enstrüman 10 kart = 40 düğme demekti. Artık her satır
   tek bakışta okunur, düzenleme kontrolleri katlanmış durur.                   */
.izleme-kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--b1) var(--b3);
  padding: var(--b3) var(--b2);
  border-bottom: var(--kenar);
  cursor: pointer;
  transition: background .12s;
}
.izleme-kart:hover { background: var(--foy); }
.izleme-kart.kart-acil { background: var(--kiremit-zem); }
.izleme-kart.kart-uyari { background: var(--pirinc-zem); }
.izleme-kart .izleme-ust { grid-column: 1; display: flex; align-items: baseline; gap: var(--b2); flex-wrap: wrap; }
.izleme-kart .izleme-ust > div:first-child { display: flex; align-items: baseline; gap: var(--b2); }
.izleme-kart .izleme-alt { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--b3); }
.izleme-kart .izleme-fiyat { font-size: var(--t-orta); font-weight: 600; text-align: right; }
.izleme-kart .izleme-skor { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .08em; color: var(--soluk); text-align: right; }
.izleme-acil-sebep { grid-column: 1 / -1; font-size: var(--t-mikro); color: var(--kiremit); }

/* Satır başına düzenleme: katlanmış, sessiz */
.satir-detay { grid-column: 1 / -1; }
.satir-detay > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--soluk); padding: 2px 0;
}
.satir-detay > summary::-webkit-details-marker { display: none; }
.satir-detay > summary:hover { color: var(--prusya); }
.izleme-detay { display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap; padding-top: var(--b2); }
.elimde-etiket { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .08em; color: var(--murekkep-2); display: flex; align-items: center; gap: 5px; }
.tiklanir { cursor: pointer; }
.tiklanir:hover { border-color: var(--cizik-2); }

/* ============================================================================
   FIRSATLAR — TARAMA FÖYÜ
   ----------------------------------------------------------------------------
   Bu panel bir "öneri listesi" değil, bir SÜPÜRME RAPORU: alet evreni taradı,
   bulduklarını yargıya göre ayırdı. Tasarım bunu taşır:
     · her grubun solunda o yargının mürekkebinden bir ray (yeşil/mavi/kiremit)
     · her satırda skorun HATA PAYIYLA birlikte çizildiği bir ölçek — uygulamanın
       tek büyük iddiası budur, sayının yanında rakamla değil BANTLA durur
     · satırlar giriş sırasında sırayla belirir, iğne dengeye oturur
   Eskiden ilk grup `.manset` sınıfını da taşıyordu; `.manset` flex olduğu için
   başlık, açıklama ve listeyi yan yana diziyordu. Grup artık kendi bileşeni.
   ========================================================================== */
.firsat-ust {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--b4); flex-wrap: wrap; margin-bottom: var(--b5);
  padding-bottom: var(--b3); border-bottom: 1px solid var(--cizik-2);
}
.firsat-ust h2 { font-size: var(--t-buyuk); letter-spacing: -.02em; }
/* Künye: taramanın kimliği — ne zaman, hangi sıklıkta, kaç enstrüman, ölçek nasıl
   okunur. Eskiden bu bilgi listenin ALTINDA boş-durum kutusunda duruyordu. */
.firsat-kunye {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b1) var(--b3);
  margin-top: var(--b2);
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--soluk);
}
.firsat-kunye > span { display: flex; align-items: center; gap: 5px; }
.firsat-kunye > span + span::before {
  content: ""; width: 1px; height: 9px; background: var(--cizik); margin-right: var(--b2);
}
.firsat-kunye b { color: var(--murekkep-2); font-weight: 600; }

.firsat-izgara { display: grid; gap: var(--b6); }

/* Grup: yargının rengi solda bir ray. Ray süs değil — hangi kararın listesine
   baktığını bir bakışta söyler ve omurgadaki pirinç işaretle aynı dili konuşur. */
.firsat-grup { --ton: var(--cizik-2); --ton-zem: var(--foy-2); }
.firsat-grup[data-ton="al"]     { --ton: var(--yesil);   --ton-zem: var(--yesil-zem); }
.firsat-grup[data-ton="trend"]  { --ton: var(--prusya);  --ton-zem: var(--prusya-zem); }
.firsat-grup[data-ton="zayif"]  { --ton: var(--kiremit); --ton-zem: var(--kiremit-zem); }
.firsat-grup[data-ton="gundem"] { --ton: var(--pirinc);  --ton-zem: var(--pirinc-zem); }

.firsat-grup-ust {
  padding-left: var(--b3); border-left: 3px solid var(--ton);
  margin-bottom: var(--b3);
}
.firsat-grup-ust h3 { font-size: var(--t-baslik); }
.firsat-grup-ust .firsat-aciklama {
  margin: 3px 0 0; font-size: var(--t-mikro); color: var(--soluk); line-height: 1.55;
}

.firsat-liste { border-top: var(--kenar); }
.firsat-satir {
  display: flex; align-items: center; gap: var(--b4);
  width: 100%; text-align: left; padding: var(--b3) var(--b2);
  background: none; border: 0; border-bottom: var(--kenar); border-radius: 0;
  cursor: pointer;
}
.firsat-satir:hover { background: var(--foy); }
.firsat-satir:focus-visible { outline-offset: -2px; }
.firsat-kimlik {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(84px, 112px) minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--b3);
}
.firsat-sembol { font-family: var(--mono); font-weight: 600; font-size: var(--t-govde); }
.firsat-ad {
  color: var(--murekkep-2); font-size: var(--t-kucuk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Grubun sıraladığı büyüklük satırda da görünür: uzun vade listesi 1 yıllık
   getiriye göre diziliyordu ama o sayı hiçbir yerde yazmıyordu. */
.firsat-ek { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .06em; color: var(--soluk); }
.firsat-ek.yukari { color: var(--yesil); }
.firsat-ek.asagi { color: var(--kiremit); }
.firsat-olcum { display: flex; align-items: center; gap: var(--b3); flex: none; }
.firsat-skor { font-size: var(--t-orta); font-weight: 600; text-align: right; min-width: 58px; }
.firsat-skor small { font-size: var(--t-mikro); font-weight: 400; color: var(--soluk); }

/* ---- İMZA: SKOR ÖLÇEĞİ ----------------------------------------------------
   0–100 arası bir cetvel. Ortadaki çentik 50'dir (nötr). Bant hata payıdır,
   iğne skorun kendisi. Sayı tek başına "70" der; ölçek "70, ama 57 ile 83
   arasında olabilir" der — föyün bütün iddiası bu ikinci cümlede.            */
.firsat-olcek {
  position: relative; width: 108px; height: 20px; flex: none;
  --ton: var(--pirinc); --ton-zem: var(--pirinc-zem);
}
.firsat-olcek.o-iyi   { --ton: var(--yesil);   --ton-zem: var(--yesil-zem); }
.firsat-olcek.o-zayif { --ton: var(--kiremit); --ton-zem: var(--kiremit-zem); }
.firsat-olcek::before {           /* cetvel çizgisi */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--cizik); transform: translateY(-50%);
}
.firsat-olcek::after {            /* 50 çentiği — nötr eşiği */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1px; height: 11px; background: var(--cizik-2); transform: translate(-50%, -50%);
}
.olcek-band {
  position: absolute; top: 50%; height: 6px; border-radius: var(--r-tam);
  left: var(--a); width: var(--w);
  background: var(--ton); opacity: .3;
  transform: translateY(-50%);
}
.olcek-igne {
  position: absolute; top: 50%; left: var(--p);
  width: 2px; height: 16px; background: var(--ton);
  transform: translate(-50%, -50%);
}

.firsat-yasal { margin-top: var(--b5); max-width: var(--olcu-dar); }

/* Dar ekran: satır iki kata iner ama HİÇBİR ŞEY atılmaz. Solda kimlik (sembol
   üstte, ad altta), sağda ölçüm (skor + karar üstte, ölçek altta). Ölçek dar
   ekranda da kalır — hata payı bu ürünün asıl söylediği şey, ilk kesilecek
   öğe değil. Bu blok bileşenin HEMEN ARDINDA durur: genel duyarlı bölüm
   dosyada daha önce geldiği için oradaki kurallar buradakileri ezerdi. */
@media (max-width: 900px) {
  .firsat-izgara { gap: var(--b5); }
  .firsat-ust { margin-bottom: var(--b4); }
  .firsat-satir { gap: var(--b3); padding: var(--b3) 0; align-items: center; }
  .firsat-kimlik { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--b2); }
  .firsat-sembol { grid-area: 1 / 1; font-size: var(--t-kucuk); }
  .firsat-ek { grid-area: 1 / 2; justify-self: end; }
  .firsat-ad { grid-area: 2 / 1 / 3 / -1; }
  .firsat-olcum {
    display: grid; justify-items: end; align-items: center; gap: 5px var(--b2);
    grid-template-areas: "skor cip" "olcek olcek";
  }
  .firsat-skor { grid-area: skor; min-width: 0; font-size: var(--t-govde); }
  .firsat-olcum .cip { grid-area: cip; }
  .firsat-olcek { grid-area: olcek; width: 104px; height: 14px; }
  .firsat-olcek::after { height: 9px; }
  .olcek-igne { height: 13px; }
  .olcek-band { height: 5px; }
}

/* Liste altı: kaç satır gösterildiği + "daha fazla". Uzun listeler varsayılan
   olarak kısaltılır; devamı istenirse açılır. */
.liste-alt {
  display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap;
  padding: var(--b3) var(--b2); margin-top: var(--b2);
  border-top: var(--kenar);
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--soluk);
}
.liste-alt button { margin-left: auto; }

/* ============================================================================
   HAREKET — "alet yerleşir"
   ----------------------------------------------------------------------------
   Tek bir orkestre edilmiş an vardır: okuma açıldığında künye belirir, karar
   sözcüğü basılır, kiriş sallanıp dengeye oturur, bacaklar yerine kayar.
   Dağınık efekt YOKTUR — her hareketin bir sebebi var:
     · kiriş yerleşmesi  → aletin ölçüm yaptığını gösterir (imza)
     · karar açılması    → sözcüğün basıldığı hissi (föy metaforu)
     · imleç kayması     → kasadaki metal işaretin fiziksel sürekliliği
     · fiyat parlaması   → "bu sayı az önce değişti" (bilgi, süs değil)
   Hepsi prefers-reduced-motion ile kapanır ve son durum anında uygulanır.
   ========================================================================== */
:root {
  --sure-mikro: 120ms;   /* durum değişimi: hover, odak */
  --sure-ui: 220ms;      /* panel, katlanır */
  --sure-acilis: 460ms;  /* okuma öğelerinin belirmesi */
  --sure-yerlesme: 1000ms; /* kirişin dengeye oturması */
  --adim: 70ms;          /* sahneler arası gecikme */
  --egri: cubic-bezier(.2, .8, .2, 1);          /* yumuşak yavaşlama */
  --egri-yerlesme: cubic-bezier(.22, 1.35, .36, 1); /* aşıp geri dönen — terazi */
}

/* ---------------------------------------------------------------- sahneleme
   Okuma açıldığında öğeler sırayla girer. Sıra ANLAMLIDIR: önce neye baktığın
   (künye), sonra cevap (karar), sonra cevabın nasıl çıktığı (kiriş, bacaklar). */
@keyframes belir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Karar sözcüğü aşağıdan yukarı AÇILIR — mürekkebin kâğıda basıldığı an. */
@keyframes bas {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(6px); }
  to   { opacity: 1; clip-path: inset(-20% 0 -20% 0); transform: none; }
}
@keyframes soluk-gir { from { opacity: 0; } to { opacity: 1; } }

/* Giriş dizisi bittiğinde (ya da hiç çalışamadığında) animasyonlar sökülür ve
   öğeler doğal, GÖRÜNÜR hâllerine döner. Bu koşulsuz güvenlik ağıdır: sekme arka
   planda açıldıysa CSS animasyonları hiç ilerlemez ve `fill-mode: both` yüzünden
   opaklık 0'da kalırdı. js/hareket.js bu sınıfı dizinin süresi kadar sonra ekler.
   Bir kere daha: hareket bir iyileştirmedir, görünürlüğün ön koşulu değil. */
.hareket-bitti .terazi-kart * { animation: none !important; }

/* KURAL: içerik ASLA animasyona bağımlı olmaz.
   `animation-fill-mode: both` gecikme boyunca `from` durumunu tutar — yani
   opaklık 0. Animasyon herhangi bir sebeple çalışmazsa (JS kapalı, eski tarayıcı,
   sekme hiç boyanmıyor) öğe KALICI OLARAK GÖRÜNMEZ kalırdı. Bu yüzden giriş
   animasyonları yalnız `html.hareketli` altında tanımlıdır; o sınıfı js/ana.js
   çalıştığını KANITLADIKTAN sonra ekler. Sınıf yoksa her şey normal görünür. */
.hareketli .terazi-kart .okuma-ust  { animation: belir var(--sure-acilis) var(--egri) both; }
/* Karar harf harf basılır: her harf kendi gecikmesiyle açılır (js/hareket.js
   `harflereBol`). Tek parça açılmaya göre çok daha okunur bir "basılıyor" hissi. */
.hareketli .terazi-kart .okuma-karar .harf {
  display: inline-block;
  animation: bas var(--sure-acilis) var(--egri) both;
}
/* Harflere bölünememişse (ör. JS hatası) sözcük bir bütün olarak açılır. */
.hareketli .terazi-kart .okuma-karar:not(:has(.harf)) {
  animation: bas var(--sure-acilis) var(--egri) both; animation-delay: var(--adim);
}
.hareketli .terazi-kart .okuma-cumle{ animation: belir var(--sure-acilis) var(--egri) both; animation-delay: calc(var(--adim) * 2); }
.hareketli .terazi-kart .okuma-guven{ animation: belir var(--sure-acilis) var(--egri) both; animation-delay: calc(var(--adim) * 2.4); }
.hareketli .terazi-kart .terazi     { animation: soluk-gir var(--sure-acilis) var(--egri) both; animation-delay: calc(var(--adim) * 3); }
.hareketli .terazi-kart .bacaklar   { animation: belir var(--sure-acilis) var(--egri) both; animation-delay: calc(var(--adim) * 4.2); }
.hareketli .terazi-kart .nihai-gerekce,
.hareketli .terazi-kart .nihai-uyari,
.hareketli .terazi-kart .nihai-kiyas { animation: belir var(--sure-acilis) var(--egri) both; animation-delay: calc(var(--adim) * 5); }

/* ---------------------------------------------------------------- kiriş
   Yerleşme JS ile sürülür (bkz. js/hareket.js): kiriş 0°'de doğar, bir kare
   sonra hedef açıya geçer. Aşan eğri sayesinde gerçek bir terazi gibi salınıp
   dengeye oturur. Kefeler kirişle birlikte gider.                            */
/* Kiriş ve kefeler js/hareket.js'te Web Animations API ile sürülür: sönümlü
   salınım her okumada farklı bir hedef açıya gider, CSS keyframe'i bunu bilemez.
   Burada CSS geçişi TANIMLANMAZ — iki mekanizma birbiriyle yarışırdı. */
.terazi .kefe-grup { transform-box: fill-box; }
/* Ölçek yayı kiriş yerleşirken hafifçe belirir — ölçüm alanının çizildiği an. */

/* ---------------------------------------------------------------- omurga imleci
   Pirinç işaret artık her düğmede ayrı bir sözde-öğe değil, KAYAN tek bir
   parçadır: kasadaki metal işaret görünümler arasında fiziksel olarak taşınır. */
.omurga-liste { position: relative; }
.omurga-imlec {
  position: absolute; left: 0; width: 3px;
  background: var(--pirinc);
  transition: transform var(--sure-ui) var(--egri), height var(--sure-ui) var(--egri);
  pointer-events: none;
  will-change: transform;
}
.omurga-liste button.aktif::before { content: none; } /* kayan imleç devraldı */

/* ---------------------------------------------------------------- görünüm geçişi */
@keyframes panel-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel-gecis { animation: panel-gir var(--sure-ui) var(--egri) both; }

/* ---------------------------------------------------------------- liste girişi
   Bir görünüm açıldığında satırları yukarıdan aşağı sırayla belirir. Fırsat
   panelinde başladı, artık BÜTÜN görünümlerin ortak dili: izleme listesi, fon
   ve halka arz tabloları, faiz kayıtları, portföy kalemleri, karne satırları,
   rapor blokları. Panelden panele farklı davranan bir arayüz aynı aygıtın
   parçası gibi durmaz.

   Terazi kartındaki kuralın aynısı: dizi yalnız `.hareketli` (JS çalıştı) VE
   `.giris-dizisi` (bu çizim bir GİRİŞ) varken tanımlıdır. Yoklama turlarında
   sınıf eklenmez. Sınıf, dizi süresi dolunca js/hareket.js tarafından sökülür —
   animasyon hiç ilerlemese bile içerik görünür kalır.

   Gecikme adımı (38ms) js/hareket.js'teki GIRIS_ADIM ile aynı olmalı. */
.hareketli .giris-dizisi .giris-oge {
  animation: belir var(--sure-acilis) var(--egri) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
/* Tablo satırı: `transform` bir <tr> üzerinde tarayıcıya göre satırın hücre
   hizasını bozabiliyor. Orada yalnız opaklık açılır — dizi aynı okunur. */
.hareketli .giris-dizisi tr.giris-oge { animation-name: soluk-gir; }

/* Fırsat satırının ölçeği diziye katılır: satır belirdikten sonra hata bandı
   ortadan açılır, iğne dengeye oturur. "Alet bu satırı az önce ölçtü." */
@keyframes olcek-ac { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
@keyframes igne-otur {
  from { opacity: 0; transform: translate(-50%, -50%) scaleY(.15); }
  to   { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
}
.hareketli .giris-dizisi .olcek-band {
  animation: olcek-ac var(--sure-acilis) var(--egri) both;
  animation-delay: calc(var(--i, 0) * 38ms + 140ms);
}
.hareketli .giris-dizisi .olcek-igne {
  animation: igne-otur var(--sure-acilis) var(--egri-yerlesme) both;
  animation-delay: calc(var(--i, 0) * 38ms + 220ms);
}

/* ---------------------------------------------------------------- mikro etkileşim */
.cetvel-satir, .izleme-kart, .firsat-satir, .veri-tablo tr, .oneri {
  transition: background var(--sure-mikro) var(--egri);
}
.ufak-btn, .birincil-btn, .alarm-btn, .poz-btn, .sil-btn, .ha-sec, .bildirim-btn {
  transition: background var(--sure-mikro) var(--egri),
              border-color var(--sure-mikro) var(--egri),
              color var(--sure-mikro) var(--egri),
              transform var(--sure-mikro) var(--egri);
}
.ufak-btn:active, .birincil-btn:active, .poz-btn:active, .ha-sec:active { transform: translateY(1px); }
.omurga-liste button { transition: color var(--sure-mikro) var(--egri), background var(--sure-mikro) var(--egri); }

/* Okuma kartı tıklanabilir: üstüne gelince hafifçe yükselir — "açılabilir" ipucu. */
.terazi-kart.tiklanir {
  transition: transform var(--sure-ui) var(--egri), filter var(--sure-ui) var(--egri);
}
.terazi-kart.tiklanir:hover { transform: translateY(-2px); }
.terazi-kart.tiklanir:active { transform: translateY(0); }

/* Katlanır bölüm açılırken içerik belirir (yükseklik animasyonu yapılmaz:
   içerik yüksekliği bilinmediği için zıplamaya yol açar). */
.hareketli .katlanir[open] > .katlanir-govde { animation: belir var(--sure-ui) var(--egri) both; }
.katlanir > summary::before { transition: transform var(--sure-ui) var(--egri); }

/* ---------------------------------------------------------------- fiyat parlaması
   Canlı fiyat tazelendiğinde sayı kısaca parlar. Bu SÜS DEĞİL bilgidir:
   "bu değer az önce güncellendi" der. Yön rengi taşır.                       */
@keyframes parla-yukari { from { background: var(--yesil-zem); } to { background: transparent; } }
@keyframes parla-asagi  { from { background: var(--kiremit-zem); } to { background: transparent; } }
.parla-yukari { animation: parla-yukari 1.1s var(--egri); }
.parla-asagi  { animation: parla-asagi 1.1s var(--egri); }

/* ---------------------------------------------------------------- erişilebilirlik
   Hareketi azalt tercihinde HER ŞEY kapanır ve son durum ANINDA uygulanır —
   içerik asla gizli kalmaz (both dolgulu animasyonların tuzağı budur).       */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* Giriş animasyonlarını tamamen kaldır: 1ms bile olsa `from` durumundan
     geçmek titreşim yaratır. İçerik doğrudan son hâliyle görünür. */
  .hareketli .terazi-kart *,
  .hareketli .giris-dizisi *,
  .hareketli .katlanir[open] > .katlanir-govde { animation: none !important; }
  .olcum.mesgul .olcum-kadran { animation: none !important; }
}

/* ============================================================================
   TEKNİK AYRINTI — katlanmış bölümün iç öğeleri
   ----------------------------------------------------------------------------
   Bu sınıflar rapor.js tarafından üretiliyordu ama yeniden tasarımda kuralları
   düşmüştü: işaretleme kaldı, stil gitti — öğeler stilsiz render oluyordu.
   Buradaki kurallar onları yeni dile bağlar. Katlanmış bölümün içi olduğu için
   ton SESSİZDİR; imza öğe terazidir, burası onun kanıt defteri.
   ========================================================================== */
.karar-orta { display: flex; align-items: center; gap: var(--b4); flex-wrap: wrap; }
.karar-ozet { flex: 1 1 260px; min-width: 0; }
.karar-sinyal-satir { display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap; }
.oy-rozetleri {
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .08em;
  color: var(--soluk);
}
.ozet-liste {
  margin: var(--b3) 0 0; padding-left: 1.05em;
  font-size: var(--t-kucuk); color: var(--murekkep-2); line-height: var(--satir, 1.55);
}
.ozet-liste li { margin-bottom: var(--b1); }

/* Skor · uyuşmazlık bandı */
.karar-bandi { margin-top: var(--b4); padding-top: var(--b4); border-top: var(--kenar); }
.kb-ozet-deger { font-family: var(--mono); font-weight: 600; font-size: var(--t-orta); }
.kb-gecmis, .kb-guvenilirlik {
  font-size: var(--t-mikro); color: var(--soluk); line-height: 1.55; margin-top: var(--b2);
}
/* Ölçek bölgeleri: SAT · BEKLE · AL şeridi */
.olcek { display: flex; }
.olcek-bolge { position: relative; height: 6px; top: 10px; }
.olcek-bolge span {
  position: absolute; top: 10px; left: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soluk); white-space: nowrap;
}
.b-sat { background: var(--kiremit-zem); }
.b-bekle { background: var(--pirinc-zem); }
.b-al { background: var(--yesil-zem); }

/* Skor halkası iç yazısı */
.halka-sarici { position: relative; flex: 0 0 auto; }
.halka-skor {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: var(--t-buyuk);
  letter-spacing: -.02em; pointer-events: none;
}
.halka-icyazi {
  font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soluk);
}

/* Havuz kontrol satırı */
.hp-ad { font-size: var(--t-kucuk); color: var(--murekkep-2); }
.hp-not { font-size: var(--t-mikro); color: var(--soluk); line-height: 1.5; }
.hp-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: var(--r-tam);
  background: var(--soluk); margin-right: 6px; flex: 0 0 auto;
}
.hp-dot.t-al { background: var(--yesil); }
.hp-dot.t-sat { background: var(--kiremit); }
.hp-dot.t-notr { background: var(--pirinc); }