/* ============================================================================
   BULURO — Döviz & Altın
   buluro.css · tasarım sistemi + sayfa bileşenleri
   ----------------------------------------------------------------------------
   İÇİNDEKİLER
     01. layer sırası
     02. tokens ....... renk / tipografi / boşluk / gölge / hareket
     03. base ......... reset, tipografi, erişilebilirlik temelleri
     04. layout ....... header, durum çubuğu, ana ızgara, footer
     05. components ... grafik, tablo, kur kartları, haber, akış
     06. utilities .... duyarlılık, baskı, düşük hareket
   ==========================================================================*/

/* ————————————————————————————————————————————————————————————————
   Yazı tipi: Arial / Helvetica — tr.investing.com ile aynı yığın.
   Sistem fontu olduğu için indirme yok: sayfa geçişleri anlık, çevrimdışı
   çalışır, harici font sunucusuna istek gitmez.
   ———————————————————————————————————————————————————————————————— */

@layer tokens, base, layout, components, utilities;

/* Firma bandının satır yüksekliğine oranı — CSS ve fitTable ortak okur. */
@layer tokens { :root { --t-firmband: 2.1; } }

/* =========================================================================
   02. TOKENS
   ========================================================================= */
@layer tokens {
  :root {
    /* — marka renkleri (orijinal paletten birebir) — */
    --blue:            #08425c;
    --blue2:           #0c6188;
    --blue3:           #0e6f9d;
    --ink:             #09364c;
    --muted:           #56859a;
    --line:            #ceebf8;
    --green:           #098f35;
    --green-bg:        #eff9f2;
    --red:             #ff241a;
    --red-bg:          #fff2f0;
    --card:            #ffffff;

    /* — header degradesi — */
    --hdr-1:           #063144;
    --hdr-2:           #073d56;
    --hdr-3:           #073a51;
    --hdr-fg:          #ffffff;
    --hdr-fg-dim:      rgba(255,255,255,.78);
    --hdr-hairline:    rgba(255,255,255,.16);
    --hdr-surface:     rgba(255,255,255,.10);
    --hdr-surface-2:   rgba(255,255,255,.18);
    --hdr-border:      rgba(255,255,255,.34);

    /* — yüzeyler — */
    --bg:              #ffffff;
    --bg-sunken:       #f3fafe;
    --surface:         #ffffff;
    --surface-2:       #eef9fd;
    --surface-3:       #e8f6fd;

    /* — çizgiler — */
    --line-soft:       #e2f0f6;
    --line-card:       #d3ecf7;
    --line-strong:     #c6e6f4;
    --line-accent:     #0f76a5;

    /* — metin — */
    --fg:              #09364c;
    --fg-strong:       #082939;
    --fg-2:            #0e3a4f;
    --fg-3:            #124055;
    --fg-nav:          #14668d;
    --fg-muted:        #326983;
    --fg-status:       #27647f;
    --fg-axis:         #1f5c79;

    /* — durum renkleri — */
    --up:              #098f35;
    --up-ink:          #0a8d36;
    --up-bg:           #eff8f1;
    --up-line:         #d8efdf;
    --down:            #ff241a;
    --down-ink:        #ff1e1e;
    --down-bg:         #fff2f0;
    --down-line:       #fbdedb;
    --live:            #00a141;

    /* — seri renkleri (grafik + gösterge) — */
    --s-ehg:           #0f77a8;
    --s-harem:         #0b9e48;
    --s-nadir:         #ff2424;
    --s-saglam:        #9023ff;
    --s-yazici:        #ff7700;
    --grid:            #e2f4fb;
    --grid-strong:     #ceeaf7;

    /* — kur kartı degradeleri — */
    --tick-up:         linear-gradient(180deg,#087b2d 0%,#027027 66%,#07541f 100%);
    --tick-down:       linear-gradient(180deg,#c91212 0%,#b50d0d 65%,#801010 100%);
    --tick-spark-up:   #19ff65;
    --tick-spark-down: #ffb2ad;
    --tick-border:     rgba(5,45,63,.12);

    /* — tipografi — */
    --font: Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif;

    /* — yarıçap — */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 7px;
    --r-lg: 8px;  --r-xl: 10px; --r-2xl: 11px; --r-full: 999px;

    /* — gölge ölçeği — */
    --sh-1: 0 1px 2px rgba(8,50,70,.05);
    --sh-2: 0 2px 5px rgba(10,62,85,.07);
    --sh-3: 0 4px 14px -4px rgba(8,50,70,.14), 0 1px 3px rgba(8,50,70,.05);
    --sh-4: 0 12px 30px -10px rgba(8,50,70,.24), 0 2px 6px rgba(8,50,70,.07);
    --sh-pop: 0 18px 40px -12px rgba(5,38,52,.32), 0 3px 10px rgba(5,38,52,.10);
    --sh-brand: 0 3px 8px rgba(11,89,124,.18);

    /* — hareket — */
    --dur-1: 110ms;  --dur-2: 180ms;  --dur-3: 260ms;  --dur-4: 420ms;
    --ease:      cubic-bezier(.4,0,.2,1);
    --ease-out:  cubic-bezier(.16,1,.3,1);
    --ease-in:   cubic-bezier(.4,0,1,1);

    /* — odak halkası (outline; katmansız blokta uygulanır) — */
    --focus:      #0e6f9d;
    --focus-on-dark: #71caf3;

    /* — katmanlar — */
    --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 40; --z-pop: 100;

    color-scheme: light;
  }

  /* ——— koyu tema ——— */
  :root[data-theme="dark"] {
    --bg:              #040f15;
    --bg-sunken:       #030b0e;
    --surface:         #091921;
    --surface-2:       #0e222c;
    --surface-3:       #122a36;
    --card:            #091921;

    --line:            #18323d;
    --line-soft:       #152c38;
    --line-card:       #193541;
    --line-strong:     #1e3e4c;
    --line-accent:     #1085bc;

    --ink:             #d9f1fc;
    --fg:              #d9f1fc;
    --fg-strong:       #ffffff;
    --fg-2:            #c2e8fa;
    --fg-3:            #addcf1;
    --fg-nav:          #34b3ed;
    --fg-muted:        #72b2cf;
    --fg-status:       #7ebcd8;
    --fg-axis:         #69afcf;
    --muted:           #70aecc;

    --up:              #35d17a;
    --up-ink:          #35d17a;
    --up-bg:           rgba(53,209,122,.13);
    --up-line:         rgba(53,209,122,.30);
    --down:            #ff6a5e;
    --down-ink:        #ff6a5e;
    --down-bg:         rgba(255,106,94,.13);
    --down-line:       rgba(255,106,94,.32);
    --live:            #35d17a;

    --s-ehg:           #139fe0;
    --s-harem:         #2fd06d;
    --s-nadir:         #ff6b6b;
    --s-saglam:        #b47bff;
    --s-yazici:        #ffa03d;
    --grid:            #122a34;
    --grid-strong:     #193541;

    --tick-border:     rgba(255,255,255,.10);

    --sh-1: 0 1px 2px rgba(0,0,0,.40);
    --sh-2: 0 2px 6px rgba(0,0,0,.45);
    --sh-3: 0 4px 16px -4px rgba(0,0,0,.60), 0 1px 3px rgba(0,0,0,.40);
    --sh-4: 0 14px 34px -12px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.45);
    --sh-pop: 0 20px 46px -14px rgba(0,0,0,.80), 0 4px 12px rgba(0,0,0,.50);
    --sh-brand: 0 3px 10px rgba(12,97,136,.45);

    --focus:      #34b3ed;

    color-scheme: dark;
  }
}

/* =========================================================================
   03. BASE
   ========================================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: calc(100 * var(--vh));
    transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
  }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  p { margin: 0; }
  h1, h2, h3, h4 { margin: 0; font-weight: 800; }
  table { border-collapse: collapse; width: 100%; }
  ol, ul { margin: 0; padding: 0; list-style: none; }

  /* [hidden] her zaman kazansın — display kuralı olan bileşenlerde de */
  [hidden] { display: none !important; }

  /* rakamlar hiç zıplamasın */
  .num, td, th, .ticker, .status, .chart-axis, .feed-meta, .news-meta {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* odak stilleri dosyanın sonunda, katman dışında tanımlıdır — böylece
     hiçbir bileşen kuralı odak halkasını ezemez. */

  /* — ekran okuyucu — */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: fixed; top: 10px; left: 10px; z-index: var(--z-pop);
    transform: translateY(-200%);
    background: var(--blue2); color: #fff; font-size: 13px; font-weight: 700;
    padding: 11px 18px; border-radius: var(--r-lg); box-shadow: var(--sh-4);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  ::selection { background: rgba(14,111,157,.18); }

  /* — ince kaydırma çubuğu — */
  .scroll-y {
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .scroll-y::-webkit-scrollbar { width: 9px; }
  .scroll-y::-webkit-scrollbar-track { background: transparent; }
  .scroll-y::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: var(--r-full);
    border: 3px solid var(--surface); background-clip: padding-box;
  }
  .scroll-y:hover::-webkit-scrollbar-thumb {
    background: var(--muted); background-clip: padding-box;
  }

  .icon { width: 16px; height: 16px; flex: none; }
  .icon-xs { width: 13px; height: 13px; }
  .icon-sm { width: 14px; height: 14px; }
  .icon-lg { width: 20px; height: 20px; }
}

/* =========================================================================
   04. LAYOUT — header · durum çubuğu · ana ızgara · footer
   ========================================================================= */
@layer layout {

  /* ——————————————————————————————— header ——————————————————————————————— */
  .header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    height: 64px;
    display: flex; align-items: center;
    padding: 0 35px;
    color: var(--hdr-fg);
    background:
      radial-gradient(120% 180% at 12% -40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
      linear-gradient(90deg, var(--hdr-1) 0%, var(--hdr-2) 55%, var(--hdr-3) 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(4,32,46,.10);
    isolation: isolate;
  }

  .logo {
    position: relative; line-height: 1;
    margin-right: 44px;
    font-size: 31px; font-weight: 800; letter-spacing: -1.4px;
    color: var(--hdr-fg);
    border-radius: var(--r-sm);
  }
  .logo small {
    display: block; margin-top: 2px; text-align: center;
    font-size: 6px; font-weight: 600; letter-spacing: 2.5px; opacity: .86;
  }

  .nav { display: flex; align-items: stretch; gap: 34px; height: 100%; }
  .nav a {
    position: relative;
    flex: none; white-space: nowrap;
    display: flex; align-items: center;
    font-size: 13px; font-weight: 700; letter-spacing: .1px;
    color: var(--hdr-fg); opacity: .82;
    transition: opacity var(--dur-2) var(--ease);
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 11px;
    height: 3px; border-radius: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .nav a:hover { opacity: 1; }
  .nav a:hover::after { transform: scaleX(.55); }
  .nav a.active { opacity: 1; }
  .nav a.active::after { transform: scaleX(1); }

  .top-actions {
    margin-left: auto;
    display: flex; align-items: center; gap: 16px;
    font-size: 12px; font-weight: 600;
  }

  /* tema anahtarı */
  .switch { display: flex; align-items: center; gap: 7px; }
  .switch-btn {
    display: flex; align-items: center; gap: 7px;
    color: var(--hdr-fg); font-size: 12px; font-weight: 600;
    padding: 4px 2px; border-radius: var(--r-full);
  }
  .switch-btn > span { opacity: .62; transition: opacity var(--dur-2) var(--ease); }
  .switch-track {
    position: relative; width: 39px; height: 19px; flex: none;
    background: var(--hdr-surface-2);
    border: 1px solid var(--hdr-border);
    border-radius: 13px;
    transition: background-color var(--dur-2) var(--ease);
  }
  .switch-track::after {
    content: ""; position: absolute; top: 1.5px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .switch-btn[aria-checked="false"] .switch-track::after { transform: translateX(19px); }
  .switch-btn[aria-checked="true"]  .switch-lbl-dark  { opacity: 1; }
  .switch-btn[aria-checked="false"] .switch-lbl-light { opacity: 1; }
  .switch-btn:hover .switch-track { background: rgba(255,255,255,.26); }

  /* header düğmeleri */
  .top-btn {
    display: flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 10px;
    white-space: nowrap; color: var(--hdr-fg);
    border-radius: var(--r-lg);
    transition: background-color var(--dur-2) var(--ease);
  }
  .top-btn:hover { background: var(--hdr-surface); }
  .top-btn:active { background: var(--hdr-surface-2); }

  .square {
    display: flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 11px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--r-md); color: var(--hdr-fg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .square:hover { background: var(--hdr-surface); border-color: rgba(255,255,255,.9); }
  .square .chev { transition: transform var(--dur-2) var(--ease); }
  .square[aria-expanded="true"] .chev { transform: rotate(180deg); }

  /* ————————————————————————— durum çubuğu ————————————————————————— */
  .status {
    position: sticky; top: 64px; z-index: calc(var(--z-sticky) - 1);
    height: 54px;
    display: flex; align-items: center;
    padding: 0 35px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 1px 0 rgba(8,63,89,.03);
    color: var(--fg-status); font-size: 12px; font-weight: 600;
  }
  .status .live {
    display: flex; align-items: center; gap: 8px;
    margin-right: 34px;
    color: var(--live); font-weight: 800; letter-spacing: .3px;
  }
  .live-dot {
    position: relative; width: 8px; height: 8px; flex: none;
    border-radius: 50%; background: currentColor;
  }
  .live-dot::before, .live-dot::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; border: 1.5px solid currentColor;
    animation: live-ping 2.4s var(--ease-out) infinite;
  }
  .live-dot::after { animation-delay: 1.2s; }
  @keyframes live-ping {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(3.1); opacity: 0; }
    100% { transform: scale(3.1); opacity: 0; }
  }

  .status .item { display: flex; align-items: center; gap: 8px; margin-right: 32px; }
  .ico {
    width: 18px; height: 18px; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid #266786; border-radius: 50%;
    color: #266786;
  }
  :root[data-theme="dark"] .ico { border-color: var(--fg-status); color: var(--fg-status); }
  .ico svg { width: 10px; height: 10px; }
  .status .notice { font-weight: 700; color: #1a698e; }
  :root[data-theme="dark"] .status .notice { color: var(--fg-nav); }
  #clock { min-width: 58px; display: inline-block; }

  .fullscreen {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--surface); color: #185f81;
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    font-size: 11px; font-weight: 700;
    box-shadow: var(--sh-1);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  :root[data-theme="dark"] .fullscreen { color: var(--fg-nav); }
  .fullscreen:hover {
    background: var(--surface-2); border-color: var(--blue3); color: var(--blue3);
    box-shadow: var(--sh-2);
  }
  .fullscreen:active { transform: translateY(.5px); }

  /* ——————————————————————————— ana ızgara ——————————————————————————— */
  .main {
    display: grid;
    grid-template-columns: minmax(0, 1017px) 322px;
    gap: 23px;
    margin: 0 35px;
    padding-top: 16px;
    align-items: start;
  }
  .left  { min-width: 0; }
  .right { min-width: 0; display: flex; flex-direction: column; }

  /* —————————————————————— başlık + zaman aralığı —————————————————————— */
  .analysis-top {
    position: relative;
    height: 109px;
    display: grid; grid-template-columns: 330px 1fr;
  }
  .breadcrumb { margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--fg-nav); }
  .breadcrumb ol { display: flex; align-items: center; }
  /* dokunma hedefi >= 24px (WCAG 2.2 SC 2.5.8); negatif kenar boşluğu
     yüksekliği geri alır, böylece başlık konumu kaymaz */
  .breadcrumb a {
    border-radius: var(--r-xs);
    padding-block: 5px; margin-block: -5px;
    transition: color var(--dur-2) var(--ease);
  }
  .breadcrumb a:hover { color: var(--blue3); text-decoration: underline; text-underline-offset: 3px; }
  .breadcrumb .sep { padding: 0 5px; opacity: .7; }
  .breadcrumb [aria-current="page"] { color: var(--fg-2); }
  :root[data-theme="dark"] .breadcrumb [aria-current="page"] { color: var(--fg); }

  .title {
    margin: 16px 0 5px;
    font-size: 31px; line-height: 1.05; font-weight: 800; letter-spacing: -.8px;
    color: var(--ink);
  }
  .subtitle { font-size: 15px; font-weight: 600; color: #19485d; }
  :root[data-theme="dark"] .subtitle { color: var(--fg-3); }

  .ranges {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding-top: 35px;
  }
  .range-btn {
    min-width: 77px; height: 39px;
    background: var(--surface); color: #0e3a4e;
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    font-size: 13px; font-weight: 700;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
  }
  :root[data-theme="dark"] .range-btn { color: var(--fg-2); }
  .range-btn:hover { border-color: var(--blue3); color: var(--blue3); background: var(--surface-2); }
  .range-btn:active { transform: translateY(1px); }
  .range-btn.active {
    background: #0c6188; color: #fff; border-color: #0c6188;
    box-shadow: var(--sh-brand);
  }
  .range-btn.active:hover { background: var(--blue3); border-color: var(--blue3); }

  /* ————————————————————————————— footer ————————————————————————————— */
  .footer {
    height: 68px;
    margin-top: 12px; padding: 0 35px;
    display: flex; align-items: center;
    border-top: 1px solid #e8f1f6;
    color: #235e7a; font-size: 9px; font-weight: 600;
  }
  :root[data-theme="dark"] .footer { border-top-color: var(--line-soft); color: var(--fg-muted); }
  .footer .links { margin-left: auto; display: flex; gap: 46px; margin-right: 68px; }
  .footer .links a {
    border-radius: var(--r-xs);
    padding-block: 7px; margin-block: -7px;      /* hedef yüksekliği >= 24px */
    transition: color var(--dur-2) var(--ease);
  }
  .footer .links a:hover { color: var(--blue3); text-decoration: underline; text-underline-offset: 3px; }
}

/* =========================================================================
   05. COMPONENTS
   ========================================================================= */
@layer components {

  /* ——————————————————————————— kart temeli ——————————————————————————— */
  .card {
    background: var(--surface);
    border: 1px solid var(--line-card);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-1);
    transition: border-color var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease),
                box-shadow var(--dur-3) var(--ease);
  }

  /* ————————————————————————————— GRAFİK ————————————————————————————— */
  .chart-card {
    height: 255px;
    padding: 13px 13px 9px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }

  .legend {
    height: 27px; flex: none;
    display: flex; justify-content: center; align-items: center; gap: 44px;
    font-size: 11px; font-weight: 700;
  }
  .legend-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px; margin: -6px 0;
    color: var(--ink); border-radius: var(--r-sm);
    transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .legend-btn i {
    display: inline-block; width: 25px; height: 2px; flex: none;
    border-radius: 3px; background: var(--c);
    transition: opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .legend-btn:hover { color: var(--c); }
  .legend-btn:hover i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
  .legend-btn[aria-pressed="false"] { opacity: .38; }
  .legend-btn[aria-pressed="false"] i {
    background: transparent; box-shadow: inset 0 0 0 1.5px var(--c);
    height: 3px; border-radius: 2px;
  }

  .chart-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
  #chart { width: 100%; height: 100%; display: block; overflow: visible; }
  /* odak halkası .chart-focus-ring ile gösterilir (bkz. bölüm 08) */
  .chart-wrap:focus-within .chart-focus-ring { opacity: 1; }
  .chart-focus-ring {
    position: absolute; inset: -4px; pointer-events: none; opacity: 0;
    border: 2px solid var(--focus); border-radius: var(--r-lg);
    transition: opacity var(--dur-2) var(--ease);
  }

  .chart-axis     { fill: var(--fg-axis); font-size: 11px; font-weight: 700; }
  .chart-grid     { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
  .chart-grid--base { stroke: var(--grid-strong); }
  .chart-line     { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .chart-line--dim   { opacity: .16; }
  .chart-line--focus { stroke-width: 2.3; }
  .chart-area     { opacity: .10; }
  .chart-cross    { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
  .chart-dot      { fill: var(--surface); stroke-width: 2; }
  .chart-pulse    { transform-box: fill-box; transform-origin: center; }
  @keyframes chart-pulse {
    0%   { r: 3;   opacity: .55; }
    100% { r: 8.5; opacity: 0; }
  }
  .chart-pulse circle { animation: chart-pulse 2s var(--ease-out) infinite; }

  /* çizim animasyonu */
  .chart-line--draw {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: chart-draw var(--dur-4) var(--ease-out) forwards;
    animation-delay: var(--delay, 0ms);
  }
  @keyframes chart-draw { to { stroke-dashoffset: 0; } }

  /* ipucu kutusu */
  .chart-tip {
    position: absolute; top: 0; left: 0; z-index: var(--z-pop);
    min-width: 168px; padding: 9px 11px 8px;
    background: var(--surface);
    border: 1px solid var(--line-card); border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
    pointer-events: none; opacity: 0;
    transition: opacity var(--dur-1) var(--ease);
    will-change: transform;
  }
  .chart-tip[data-open="true"] { opacity: 1; }
  .chart-tip-time {
    font-size: 10px; font-weight: 800; letter-spacing: .4px;
    color: var(--fg-muted); text-transform: uppercase;
    padding-bottom: 6px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  .chart-tip-row {
    display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; color: var(--fg-2);
    padding: 2px 0;
  }
  .chart-tip-row i { width: 9px; height: 3px; border-radius: 2px; background: var(--c); }
  .chart-tip-row b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .chart-tip-row[data-off="true"] { opacity: .34; }

  /* ————————————————————————————— TABLO ————————————————————————————— */
  .table-card {
    margin-top: 13px; height: 253px;
    overflow: hidden; display: flex; flex-direction: column;
  }
  .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

  .market-table thead th {
    position: sticky; top: 0; z-index: 2;
    height: 36px; padding: 0;
    background: var(--surface);
    color: var(--fg-muted); font-size: 9.5px; font-weight: 700; text-align: center;
    white-space: nowrap;
  }
  /* sticky başlıkta border-collapse kenarlığı kaybolabilir → pseudo çizgi */
  .market-table thead th::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--grid-strong);
  }
  .th-btn {
    position: relative;
    width: 100%; height: 36px; padding: 0 15px 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    color: inherit; font: inherit; border-radius: var(--r-xs);
    transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .market-table th:first-child .th-btn { justify-content: flex-start; padding-left: 14px; }
  .th-btn:hover { color: var(--blue3); background: var(--surface-2); }
  /* sıralama oku mutlak konumda: sütun genişliğini etkilemez */
  .th-btn .sort {
    position: absolute; right: 2px; top: 50%;
    width: 9px; height: 11px; flex: none; opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .th-btn:hover .sort { opacity: .45; }
  th[aria-sort="ascending"]  .sort,
  th[aria-sort="descending"] .sort { opacity: 1; color: var(--blue3); }
  th[aria-sort="descending"] .sort { transform: translateY(-50%) rotate(180deg); }
  th[aria-sort="ascending"] .th-btn,
  th[aria-sort="descending"] .th-btn { color: var(--blue3); }

  .market-table td {
    height: 43px; padding: 0 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center; font-size: 11px; font-weight: 700; color: var(--fg-2);
    white-space: nowrap;
  }
  .market-table th:first-child, .market-table td:first-child { text-align: left; padding-left: 14px; }
  .market-table tbody tr:last-child td { border-bottom: 0; }
  .market-table tbody tr {
    transition: background-color var(--dur-1) var(--ease);
  }
  .market-table tbody tr:hover { background: var(--surface-2); }
  .market-table tbody tr td:first-child { position: relative; }
  .market-table tbody tr td:first-child::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--blue3);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .market-table tbody tr:hover td:first-child::before { transform: scaleY(1); }

  .company { font-size: 12px; font-weight: 800; color: var(--fg-strong); letter-spacing: -.1px; }
  :root[data-theme="dark"] .company { color: var(--fg-strong); }

  .buy, .sell {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 88px; height: 26px; border-radius: var(--r-md);
    font-size: 10px; font-weight: 800; letter-spacing: .1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  :root[data-theme="dark"] .buy, :root[data-theme="dark"] .sell { box-shadow: none; }
  .buy  { background: var(--up-bg);   color: var(--up-ink);   border: 1px solid var(--up-line); }
  .sell { background: var(--down-bg); color: var(--down-ink); border: 1px solid var(--down-line); }
  .buy small, .sell small { font-size: 8px; margin-left: 7px; opacity: .85; }
  tr:hover .buy  { box-shadow: 0 1px 6px rgba(9,143,53,.18); }
  tr:hover .sell { box-shadow: 0 1px 6px rgba(255,36,26,.16); }

  .change { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
  .change .dir { display: inline-flex; }
  .change.is-up   { color: var(--up-ink); }
  .change.is-down { color: var(--down-ink); }
  .change .dir svg { width: 9px; height: 9px; }

  /* ————————————————————————— KUR KARTLARI ————————————————————————— */
  .bottom-row {
    margin-top: 58px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .ticker {
    position: relative; height: 159px; overflow: hidden;
    border-radius: var(--r-xl); border: 1px solid var(--tick-border);
    box-shadow: var(--sh-2);
    color: #fff; text-align: left;
    isolation: isolate;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .ticker::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(90% 60% at 50% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  }
  .ticker.green { background: var(--tick-up); }
  .ticker.red   { background: var(--tick-down); }
  .ticker:hover { transform: translateY(-2px); box-shadow: var(--sh-4); }
  .ticker:active { transform: translateY(0); }

  .ticker-head {
    height: 38px; padding-top: 9px; text-align: center;
    font-size: 10px; font-weight: 700; letter-spacing: .15px;
    color: rgba(255,255,255,.92);
  }
  .ticker-price {
    text-align: center; font-size: 24px; font-weight: 800; line-height: 1;
    letter-spacing: -.4px; text-shadow: 0 1px 1px rgba(0,0,0,.18);
  }
  .ticker-change {
    margin-top: 4px; text-align: center;
    font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .ticker-change svg { width: 10px; height: 10px; }

  .spark { position: absolute; left: 7px; right: 7px; top: 67px; height: 32px; }
  .spark svg { width: 100%; height: 100%; overflow: visible; }
  .spark .spark-line { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .spark .spark-area { opacity: .22; }

  .info-grid {
    position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.06);
  }
  .info { padding: 7px 5px; border-right: 1px solid rgba(255,255,255,.14); }
  .info:last-child { border-right: 0; }
  .info dt {
    display: block; font-size: 7px; letter-spacing: .2px;
    color: rgba(255,255,255,.88);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .info dd { display: block; margin: 4px 0 0; font-size: 10px; font-weight: 700; }

  /* fiyat değişim parlaması */
  @keyframes tick-flash-up   { from { background: rgba(60,255,140,.30); } to { background: transparent; } }
  @keyframes tick-flash-down { from { background: rgba(255,120,110,.32); } to { background: transparent; } }
  .ticker-price.flash-up   { animation: tick-flash-up   var(--dur-4) var(--ease-out); border-radius: var(--r-sm); }
  .ticker-price.flash-down { animation: tick-flash-down var(--dur-4) var(--ease-out); border-radius: var(--r-sm); }

  /* ————————————————————————— SAĞ SÜTUN ————————————————————————— */
  .download-image {
    width: 322px; height: 120px; object-fit: cover;
    display: block; margin-top: -2px;
    border-radius: var(--r-xl);
  }

  /* haber kartı */
  .news-card {
    height: 281px;
    border: 1.5px solid var(--line-accent); border-radius: var(--r-2xl);
    background: var(--surface); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--sh-1);
    transition: border-color var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease);
  }
  .news-feature {
    position: relative; flex: 1 1 auto; min-height: 0;
    padding: 16px 17px 10px;
    display: flex; flex-direction: column;
  }
  .news-meta {
    display: flex; align-items: center; gap: 11px;
    font-size: 10px; font-weight: 800; color: #13455d;
  }
  :root[data-theme="dark"] .news-meta { color: var(--fg-3); }
  .news-logo {
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: #0d3548; color: #fff;
    display: grid; place-items: center; font-size: 10px; font-weight: 800;
  }
  .news-head {
    margin: 17px 0 11px;
    font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.35px;
    color: #083549; text-wrap: balance;
  }
  :root[data-theme="dark"] .news-head { color: var(--fg-strong); }
  .news-body {
    font-size: 12px; line-height: 1.6; font-weight: 600; color: var(--fg-3);
    width: 92%;
  }
  .news-slide {
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease-out);
  }
  .news-slide[data-swap="true"] { opacity: 0; transform: translateY(6px); }

  .news-controls {
    flex: none; height: 55px;
    padding: 0 15px 10px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .circle-btn {
    width: 35px; height: 35px; flex: none;
    display: grid; place-items: center;
    background: var(--surface); color: var(--fg-nav);
    border: 1px solid var(--line-strong); border-radius: 50%;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  }
  .circle-btn:hover { background: var(--blue3); border-color: var(--blue3); color: #fff; }
  .circle-btn:active { transform: scale(.94); }
  .circle-btn svg { width: 15px; height: 15px; }

  .dots-wrap { display: flex; align-items: center; gap: 4px; }
  .dots { display: flex; align-items: center; gap: 9px; }
  .dot {
    width: 24px; height: 24px; flex: none;
    display: grid; place-items: center; border-radius: 50%;
  }
  .dot::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: #c6dbe4;
    transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  :root[data-theme="dark"] .dot::after { background: var(--line-strong); }
  .dot:hover::after { background: var(--muted); transform: scale(1.15); }
  .dot[aria-current="true"]::after { background: #116388; transform: scale(1.05); }
  :root[data-theme="dark"] .dot[aria-current="true"]::after { background: var(--fg-nav); }

  .autoplay-btn {
    width: 24px; height: 24px; margin-left: 4px;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--muted);
    transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .autoplay-btn:hover { color: var(--blue3); background: var(--surface-2); }
  .autoplay-btn svg { width: 11px; height: 11px; }

  /* haber akışı */
  .feed-card {
    margin-top: 10px; height: 313px;
    border: 1px solid #b9e3f7; border-radius: var(--r-2xl);
    background: var(--surface); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--sh-1);
    transition: border-color var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease);
  }
  :root[data-theme="dark"] .feed-card { border-color: var(--line-card); }
  .feed-list { flex: 1 1 auto; min-height: 0; }

  .feed-item {
    position: relative; width: 100%; height: 61px;
    padding: 9px 12px;
    display: grid; grid-template-columns: 23px 1fr 7px; gap: 8px; align-items: start;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    transition: background-color var(--dur-1) var(--ease);
  }
  .feed-item:last-of-type { border-bottom: 0; }
  .feed-item:hover { background: var(--surface-3); }
  .feed-item.active { background: var(--surface-2); }
  .feed-item::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--blue3);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .feed-item.active::before { transform: scaleY(1); }

  .src-icon {
    width: 18px; height: 18px; margin-top: 2px;
    display: grid; place-items: center; border-radius: 50%;
    color: #fff; font-size: 9px; font-weight: 800; overflow: hidden;
  }
  .src-bloom   { background: #0e3f56; }
  .src-reuters { background: #ff4a00; }
  .src-foreks  {
    background: #fff; color: #111; font-weight: 900; font-size: 15px;
    width: 47px; justify-self: start; border-radius: var(--r-xs);
    box-shadow: inset 0 0 0 1px var(--line-soft);
  }
  .src-cnbc    { background: linear-gradient(135deg,#0bbd44,#ffc400,#ed3559,#118cc4); }

  .feed-content { min-width: 0; }
  .feed-meta { display: flex; gap: 14px; font-size: 8px; font-weight: 800; color: #2b6a87; }
  :root[data-theme="dark"] .feed-meta { color: var(--fg-muted); }
  .feed-title {
    margin-top: 3px; font-size: 10.5px; font-weight: 800; color: var(--fg-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .feed-desc {
    margin-top: 1px; font-size: 9px; color: #31637b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :root[data-theme="dark"] .feed-desc { color: var(--fg-muted); }
  .feed-bullet {
    width: 6px; height: 6px; margin-top: 3px; border-radius: 50%;
    background: #12658b; opacity: .35;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .feed-item.active .feed-bullet,
  .feed-item:hover .feed-bullet { opacity: 1; transform: scale(1.15); }

  .feed-more {
    flex: none; height: 34px;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 0 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 10px; font-weight: 700; color: #10648c;
    transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  :root[data-theme="dark"] .feed-more { color: var(--fg-nav); }
  .feed-more:hover { background: var(--surface-2); }
  .feed-more svg { width: 13px; height: 13px; transition: transform var(--dur-2) var(--ease-out); }
  .feed-more:hover svg { transform: translateX(3px); }

  .ad-image {
    width: 322px; height: 160px; object-fit: cover;
    display: block; margin-top: 10px; border-radius: var(--r-2xl);
  }
}

/* =========================================================================
   06. UTILITIES — duyarlılık · düşük hareket · baskı
   ========================================================================= */
@layer utilities {

  /* ————————————————————————— büyük ekranlar ————————————————————————— */
  @media (min-width: 1440px) {
    .main { grid-template-columns: minmax(0, 1fr) 322px; }
  }

  /* ————————————————————— orta masaüstü / laptop ————————————————————— */
  @media (max-width: 1295px) {
    .main { grid-template-columns: minmax(0, 1fr) 322px; }
  }

  @media (max-width: 1151px) {
    .header, .status, .footer, .main { padding-inline: 24px; }
    .main { margin-inline: 0; }
    .nav { gap: 24px; }
    .logo { margin-right: 28px; }
    .top-actions { gap: 12px; }
    .legend { gap: 26px; }
  }

  /* ——————————————————————— tablet: tek sütun ——————————————————————— */
  @media (max-width: 989px) {
    .main { grid-template-columns: minmax(0, 1fr); }
    .right { max-width: 640px; }
    .download-image, .ad-image { width: 100%; }
    .bottom-row { margin-top: 28px; }
    .header { flex-wrap: nowrap; overflow: hidden; }
    .nav {
      overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { scroll-snap-align: start; }
    .status { overflow-x: auto; scrollbar-width: none; }
    .status::-webkit-scrollbar { display: none; }
  }

  /* —————————————————————————— küçük tablet —————————————————————————— */
  @media (max-width: 809px) {
    .header { height: auto; min-height: 64px; padding-block: 10px; flex-wrap: wrap; gap: 10px; }
    .nav { height: 44px; order: 3; width: 100%; }
    .nav a::after { bottom: 4px; }
    .top-actions { margin-left: auto; }
    .status {
      position: static; overflow: visible;
      height: auto; min-height: 54px; padding-block: 11px;
      flex-wrap: wrap; gap: 10px 26px;
    }
    .status .live, .status .item { margin-right: 0; }
    .status .fullscreen { margin-left: auto; }
    .analysis-top { height: auto; grid-template-columns: 1fr; gap: 14px; padding-bottom: 14px; }
    .ranges { padding-top: 0; justify-content: flex-start; flex-wrap: wrap; }
    .range-btn { min-width: 68px; }
    .chart-card { height: 280px; }
    .bottom-row { grid-template-columns: repeat(2, 1fr); }
    .table-card { height: auto; max-height: 380px; }
    .table-scroll { overflow-x: auto; }
    .market-table { min-width: 860px; }
  }

  /* ———————————————————————————— telefon ———————————————————————————— */
  @media (max-width: 575px) {
    .header, .status, .footer, .main { padding-inline: 16px; }
    .logo { font-size: 26px; margin-right: 16px; }
    .title { font-size: 26px; }
    .legend { gap: 14px; flex-wrap: wrap; height: auto; padding-bottom: 6px; }
    .chart-card { height: 300px; }
    .bottom-row { grid-template-columns: 1fr; }
    .news-head { font-size: 18px; }
    .footer { height: auto; padding-block: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer .links { margin: 0; gap: 18px; flex-wrap: wrap; }
    .top-actions .square:last-child, .top-btn span { display: none; }
  }

  /* —————————————————————— hareket duyarlılığı —————————————————————— */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .chart-line--draw { stroke-dashoffset: 0 !important; }
    .live-dot::before, .live-dot::after { display: none; }
  }

  /* ———————————————————————— dokunmatik ———————————————————————— */
  @media (hover: none) {
    .ticker:hover { transform: none; box-shadow: var(--sh-2); }
    .th-btn .sort { opacity: .45; }
  }

  /* —————————————————————————— yazdırma —————————————————————————— */
  @media print {
    :root { --bg: #fff; --surface: #fff; }
    .header, .status, .news-controls, .feed-more, .skip-link,
    .download-image, .ad-image { display: none !important; }
    .main { display: block; margin: 0; }
    .right { margin-top: 18px; }
    .card, .chart-card, .table-card, .news-card, .feed-card {
      break-inside: avoid; box-shadow: none;
    }
    .ticker { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .bottom-row { margin-top: 20px; }
    body { min-width: 0; }
  }

  /* —————————————————————— yardımcı sınıflar —————————————————————— */
  .u-hidden { display: none !important; }
  .u-nowrap { white-space: nowrap; }
}

/* =========================================================================
   07. İŞARETLEME UYUMU — semantik etiketlere göre düzeltmeler
   ========================================================================= */
@layer base {
  /* ikon seti: boyama CSS'ten kalıtımla gelir (use gölge ağacına akar) */
  .icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon.solid { fill: currentColor; stroke: none; }
  .ico .icon  { width: 10px; height: 10px; stroke-width: 2.4; }
}

@layer components {

  /* —————————————————— tablo: satır başlığı th[scope=row] —————————————————— */
  .market-table tbody th[scope="row"] {
    position: relative;
    height: 43px; padding: 0 12px 0 14px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left; font-size: 12px; font-weight: 800;
    color: var(--fg-strong); letter-spacing: -.1px; white-space: nowrap;
  }
  .market-table tbody tr:last-child th[scope="row"],
  .market-table tbody tr:last-child td { border-bottom: 0; }

  .market-table tbody th[scope="row"]::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--blue3);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .market-table tbody tr:hover th[scope="row"]::before { transform: scaleY(1); }
  /* ilk hücre artık th; td üzerindeki eski vurgu şeridi devre dışı */
  .market-table tbody tr td:first-child::before { content: none; }

  /* ————————————————————————— mini seriler ————————————————————————— */
  .spark .spark-line { vector-effect: non-scaling-stroke; }

  /* ——————————————————— akış: button içinde span'ler ——————————————————— */
  .feed-content, .feed-title, .feed-desc, .feed-bullet { display: block; }
  .feed-item { font: inherit; color: inherit; }

  /* ——————————————————————— kur kartı: dl/dt/dd ——————————————————————— */
  .info-grid dt, .info-grid dd { margin: 0; }

  /* ————————————————————————— ekmek kırıntısı ————————————————————————— */
  .breadcrumb li { display: flex; align-items: center; }

  /* ————————————————— odaklanabilir kur kartı göstergesi ————————————————— */
  .ticker { text-align: inherit; }
  .ticker h2 { font-weight: 700; }
}

/* =========================================================================
   08. ODAK GÖRÜNÜRLÜĞÜ  —  KATMAN DIŞI (bilerek)
   -------------------------------------------------------------------------
   Katmansız kurallar tüm @layer kurallarını yener. Odak halkası hiçbir
   bileşen stiline yenilmemeli; bu yüzden burada, dosyanın en sonunda.
   `outline` kullanılıyor: box-shadow ile çakışmaz, köşe yarıçapını izler.
   ========================================================================= */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* koyu zeminler: header ve kur kartları */
.header :focus-visible { outline-color: var(--focus-on-dark); }
.ticker:focus-visible   { outline-color: #ffffff; outline-offset: -3px; }

/* overflow:hidden içindeki öğelerde halka kırpılmasın → içeri al */
.nav a:focus-visible            { outline-offset: -8px; }
.feed-item:focus-visible,
.feed-more:focus-visible        { outline-offset: -3px; }
.th-btn:focus-visible           { outline-offset: -2px; }
.legend-btn:focus-visible       { outline-offset: 0; }
.skip-link:focus-visible        { outline-color: #ffffff; }

/* grafiğin kendi halkası var (.chart-focus-ring) */
#chart:focus-visible { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  :focus-visible { transition: outline-offset var(--dur-1) var(--ease); }
}

/* =========================================================================
   09. FİRMA SÜTUNU + BULURO MAVİSİ ALIŞ/SATIŞ
   ========================================================================= */
@layer components {

  /* ————————————————————— Alış / Satış: Buluro mavisi —————————————————————
     Yön bilgisi artık renkte değil, "Günlük Değişim" sütununda taşınıyor;
     alış ve satış iki mavi tonuyla ayrışıyor. */
  .buy, .sell {
    background: var(--quote-bg);
    color: var(--quote-fg);
    border: 1px solid var(--quote-line);
    box-shadow: none;
  }
  .buy  { --quote-bg: var(--buy-bg);  --quote-fg: var(--buy-fg);  --quote-line: var(--buy-line); }
  .sell { --quote-bg: var(--sell-bg); --quote-fg: var(--sell-fg); --quote-line: var(--sell-line); }
  .buy small, .sell small { opacity: .72; font-weight: 800; }

  tr:hover .buy  { box-shadow: 0 1px 6px rgba(12,97,136,.16); }
  tr:hover .sell { box-shadow: 0 1px 6px rgba(8,66,92,.18); }

  /* ————————————————————————— firma kelime markası —————————————————————————
     Her firma kendi yazı karakteriyle ayrışır (gerçek logoların yerini tutar).
     Gerçek logo geldiğinde: .firm içine <img class="firm-logo"> koymak yeterli,
     başka değişiklik gerekmez. */
  .firm {
    display: inline-flex; align-items: center;
    font-family: var(--firm-font, var(--font));
    font-weight: var(--firm-weight, 800);
    font-size: var(--firm-size, 12.5px);
    letter-spacing: var(--firm-track, -.1px);
    font-style: var(--firm-style, normal);
    color: var(--fg-strong);
    line-height: 1.1;
    white-space: nowrap;
  }
  :root[data-theme="dark"] .firm { color: var(--fg-strong); }

  .firm-logo { height: 18px; width: auto; display: block; }

  /* — beş firmanın kimlikleri — */
  .firm--harem  { --firm-weight: 700; --firm-track: .3px;  --firm-size: 13.5px; }
  .firm--nadir  { --firm-weight: 800; --firm-track: -.35px; }
  .firm--saglam { --firm-weight: 600; --firm-track: 1.5px;  --firm-size: 11.5px; }
  .firm--yazici { --firm-weight: 400; --firm-track: 1.3px; --firm-size: 12.5px; }
  .firm--ehg    { --firm-weight: 900; --firm-track: -.5px;  --firm-size: 14px; }

  /* ————————————————————— satırdan detaya geçiş ————————————————————— */
  .row-link {
    display: inline-flex; align-items: center; gap: 7px;
    color: inherit; border-radius: var(--r-xs);
    transition: color var(--dur-2) var(--ease);
  }
  .row-link .go {
    width: 12px; height: 12px; flex: none;
    opacity: 0; transform: translateX(-3px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .row-link:hover { color: var(--blue3); }
  .row-link:hover .go, .row-link:focus-visible .go { opacity: .8; transform: translateX(0); }
  tr:hover .row-link .go { opacity: .55; transform: translateX(0); }
}

@layer tokens {
  :root {
    /* alış / satış — iki Buluro mavisi kademesi */
    --buy-bg:    #e8f6fd;
    --buy-fg:    #0c6188;
    --buy-line:  #bfe6f7;
    --sell-bg:   #d3eefb;
    --sell-fg:   #08425c;
    --sell-line: #aadbf3;
  }
  :root[data-theme="dark"] {
    --buy-bg:    rgba(19,159,224,.13);
    --buy-fg:    #59c1f1;
    --buy-line:  rgba(19,159,224,.30);
    --sell-bg:   rgba(19,159,224,.22);
    --sell-fg:   #99d8f6;
    --sell-line: rgba(19,159,224,.42);
  }
}

/* =========================================================================
   10. FİYAT MATRİSİ · FAVORİ YILDIZI · ARAMA
   ========================================================================= */
@layer tokens {
  :root {
    --star:      #f2b705;          /* favori — sarı */
    --star-soft: rgba(242,183,5,.16);
    --star-off:  #aacada;
  }
  :root[data-theme="dark"] {
    --star:      #ffc93c;
    --star-soft: rgba(255,201,60,.18);
    --star-off:  #315161;
  }
}

@layer layout {
  /* grafiksiz sayfalarda başlık bloğu tek sütun */
  .analysis-top--plain { grid-template-columns: 1fr; height: 109px; }
}

@layer components {

  /* liste sayfası: grafik yok → tablo boşluğu doldurur */
  /* içerik kadar yükselir, taşarsa kaydırılır (satır sayısı sayfadan sayfaya değişir) */
  /* Yükseklik sınırı yok: kart esnek kutuda kalan alanı doldurur. Sabit
     566px, tarayıcı çerçevesi kalkınca (tam ekran) ya da uzun ekranlarda
     tablonun altında boşluk bırakıyordu. */
  .table-card--tall { height: auto; max-height: none; margin-top: 0; }

  /* ————————————————————————— iki satırlı başlık ————————————————————————— */
  .quote-matrix { table-layout: fixed; }
  .quote-matrix .unit-head, .quote-matrix .unit { width: 184px; }
  .quote-matrix col, .quote-matrix td { width: auto; }

  .quote-matrix thead th {
    position: sticky; z-index: 3;
    background: var(--surface);
    color: var(--fg-muted); font-weight: 700; white-space: nowrap;
  }
  .quote-matrix .firm-row th { top: 0; height: 38px; font-size: 9.5px; text-align: center; }
  .quote-matrix .side-row th { top: 38px; height: 26px; font-size: 9px; letter-spacing: .4px; }

  /* firma sütun çiftini ayıran ince çizgi */
  .quote-matrix .firm-row th:not(.unit-head) { border-left: 1px solid var(--line-soft); }
  .quote-matrix .side-row th:nth-child(odd)  { border-left: 1px solid var(--line-soft); }
  .quote-matrix tbody td:nth-child(even)     { border-left: 1px solid var(--line-soft); }

  .quote-matrix .firm-row th::after,
  .quote-matrix .side-row th::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--line-soft);
  }
  .quote-matrix .side-row th::after { background: var(--grid-strong); }
  .quote-matrix .unit-head { z-index: 4; text-align: left; padding-left: 14px; }
  .quote-matrix .firm-row th.unit-head { font-size: 14.25px; }

  .side { color: var(--fg-muted); text-transform: uppercase; }
  .side-buy  { color: var(--buy-fg); }
  .side-sell { color: var(--sell-fg); }

  /* ————————————————————————————— gövde ————————————————————————————— */
  /* th tablo hücresi olarak kalmalı — flex kullanılırsa sütun hizası bozulur */
  .quote-matrix tbody th.unit {
    position: relative;
    height: 43px; padding: 0 10px 0 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left; white-space: nowrap;
  }
  .quote-matrix .unit .fav { vertical-align: middle; margin-right: 5px; }
  .quote-matrix .unit .row-link { vertical-align: middle; }
  .quote-matrix tbody tr:last-child th.unit,
  .quote-matrix tbody tr:last-child td { border-bottom: 0; }

  .quote-matrix .unit .row-link {
    font-size: 12px; font-weight: 800; color: var(--fg-strong); letter-spacing: -.1px;
  }

  .quote-matrix td.q {
    height: 43px; padding: 0 9px;
    border-bottom: 1px solid var(--line-soft);
    text-align: right; font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .q-buy  { color: var(--buy-fg); }
  .q-sell { color: var(--sell-fg); background: color-mix(in srgb, var(--sell-bg) 45%, transparent); }
  .quote-matrix tbody tr:hover td.q { background: var(--surface-2); }
  .quote-matrix tbody tr:hover .q-sell { background: var(--sell-bg); }

  /* fiyat güncellenince kısa parlama */
  @keyframes q-flash { from { background: var(--star-soft); } to { background: transparent; } }
  .q.flash { animation: q-flash var(--dur-4) var(--ease-out); }

  /* ————————————————————————— favori yıldızı ————————————————————————— */
  .fav {
    width: 24px; height: 24px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: 50%; color: var(--star-off);
    transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
  }
  .fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
  .fav:hover { color: var(--star); background: var(--star-soft); }
  .fav:active { transform: scale(.88); }
  .fav[aria-pressed="true"] { color: var(--star); }
  .fav[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; stroke-width: 1.2; }

  /* ——————————————————————————— araç çubuğu ——————————————————————————— */
  .table-toolbar {
    flex: none; height: 56px;
    display: flex; align-items: center; gap: 16px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .toolbar-hint {
    font-size: 10.5px; font-weight: 600; color: var(--fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .search { position: relative; width: 306px; flex: none; }
  .search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--muted); pointer-events: none;
  }
  .search-input {
    width: 100%; height: 36px;
    padding: 0 34px 0 33px;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    font-size: 12px; font-weight: 600;
    transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .search-input::placeholder { color: var(--muted); font-weight: 500; }
  .search-input:hover { border-color: var(--blue3); }
  .search-input:focus { background: var(--surface); border-color: var(--blue3); }
  .search-input::-webkit-search-cancel-button { display: none; }

  .search-clear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 50%; color: var(--muted);
  }
  .search-clear:hover { color: var(--blue3); background: var(--surface-3); }
  .search-clear svg { width: 12px; height: 12px; }

  .search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-pop);
    max-height: 268px; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line-card); border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
  }
  .search-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 38px; padding: 0 12px;
    font-size: 12px; font-weight: 700; color: var(--fg-2); cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
  }
  .search-item:last-child { border-bottom: 0; }
  .search-item:hover, .search-item[aria-selected="true"] { background: var(--surface-2); color: var(--blue3); }
  .search-tag {
    font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    padding: 3px 7px; border-radius: var(--r-full);
    background: var(--buy-bg); color: var(--buy-fg);
  }
  .search-empty {
    height: 38px; padding: 0 12px; display: flex; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--muted);
  }

  /* ————————————————————————— boş durum ————————————————————————— */
  .empty-state {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 30px 40px; text-align: center;
  }
  .empty-icon { width: 34px; height: 34px; color: var(--star-off); fill: none; stroke: currentColor; stroke-width: 1.4; }
  .empty-title { font-size: 14px; font-weight: 800; color: var(--ink); }
  .empty-text  { font-size: 12px; font-weight: 600; color: var(--fg-muted); max-width: 46ch; line-height: 1.6; }
}

@layer utilities {
  @media (max-width: 989px) {
    .table-card--tall { height: auto; max-height: 620px; }
  }
  @media (max-width: 809px) {
    .quote-matrix { min-width: 940px; }
    .table-toolbar { height: auto; padding-block: 12px; flex-wrap: wrap; }
    .search { width: 100%; }
    .toolbar-hint { display: none; }
  }
}

/* =========================================================================
   11. TERMİNAL DÜZENİ — tek ekran, kaydırmasız
   -------------------------------------------------------------------------
   Sayfa 100dvh'yi doldurur: üst bar, durum çubuğu, içerik, kur kartları ve
   footer sabit; yalnız tablo kendi içinde kaydırılır. Kur kartları her zaman
   en altta, sağ sütunun alt kenarıyla aynı hizada biter.
   Ekran çok kısaysa (bkz. en alttaki media) normal akışa geri dönülür.
   ========================================================================= */
@layer layout {

  html { height: 100%; }

  body {
    height: calc(100 * var(--vh));
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  .header, .status, .footer { flex: none; }

  .main {
    flex: 1 1 auto; min-height: 0;
    margin: 0;
    padding: 16px 35px 0;
    gap: 23px;
    align-items: stretch;
  }

  /* içerik tam genişlikte — veriler sola doğru yayılır */
  .main { max-width: none; margin-inline: 0; }

  .left, .right {
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
  }

  /* sayfadan sayfaya değişen blok: kalan yüksekliği doldurur */
  #pageMain {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  #pageMain:focus { outline: none; }

  .analysis-top { flex: none; }
  .chart-card   { flex: none; }

  /* tablo boşluğu yer; içeriği taşarsa kendi içinde kaydırılır */
  .table-card,
  .table-card--tall {
    flex: 1 1 auto; min-height: 120px; height: auto; max-height: none;
  }

  /* kur kartları: her zaman en altta */
  .bottom-row { flex: none; margin-top: 16px; }

  /* sağ sütun: haber akışı esner, banner en altta kalır */
  .right > .download-image { flex: none; }
  .news-card { flex: 0 1 281px; min-height: 186px; }
  .feed-card { flex: 1 1 auto; min-height: 88px; height: auto; }
  .right > .ad-image { flex: none; margin-top: auto; padding-top: 10px; }

  .news-feature { min-height: 0; overflow: hidden; }

  .footer { height: 44px; margin-top: 0; }
}

@layer components {
  /* geniş ekranda sayılar sütun içinde ortalanır — sağa yaslı kalsa
     sütunlar genişledikçe rakamlar kenarda öksüz görünüyor */
  .quote-matrix td.q { text-align: center; }
}

/* =========================================================================
   12. HABER PANELİ AÇ/KAPA
   ========================================================================= */
@layer layout {
  /* haber paneli kapalıyken içerik iki sütuna yayılır;
     kur kartları ve reklam bandı yerinde kalır */
  :root[data-news="off"] .main {
    grid-template-areas: "content content" "tickers ad";
  }
  :root[data-news="off"] .right { display: none; }
}

@layer components {
  /* başlıktaki onay kutusu — Filtrele'nin yanında */
  .check-btn {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px 0 10px;
    border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-md);
    color: var(--hdr-fg); font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .check-btn:hover { background: var(--hdr-surface); border-color: rgba(255,255,255,.9); }

  .check-box {
    width: 15px; height: 15px; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid rgba(255,255,255,.75); border-radius: 4px;
    background: transparent;
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .check-box svg {
    width: 11px; height: 11px; color: var(--hdr-2);
    opacity: 0; transform: scale(.6);
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .check-btn[aria-checked="true"] .check-box {
    background: #fff; border-color: #fff;
  }
  .check-btn[aria-checked="true"] .check-box svg { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   13. KISA EKRAN GERİ DÖNÜŞÜ — düzen sığmıyorsa normal akış
   ========================================================================= */
@layer utilities {
  @media (max-height: 460px), (max-width: 989px) {
    body { height: auto; min-height: calc(100 * var(--vh)); overflow: visible; display: block; }
    .main { padding: 16px 35px 0; }
    .left, .right, #pageMain { display: block; }
    /* Dizilmiş düzende kartlar içerikleri kadar uzar: sabit yükseklik
       haber metnini ve başlık şeridini kırpıyordu. */
    .table-card--tall { height: auto; max-height: none; }
    .table-card { height: 253px; }
    .bottom-row { margin-top: 26px; }
    .news-card { min-height: 0; height: auto; }
    .feed-card { height: auto; }
    .right > .ad-image { margin-top: 10px; padding-top: 0; }
    .footer { height: 68px; margin-top: 12px; }
    .header { position: sticky; top: 0; }
  }

  @media (max-width: 989px) {
    .main { padding-inline: 24px; }
  }
  @media (max-width: 575px) {
    .main { padding-inline: 16px; }
    .check-btn span:not(.check-box) { display: none; }
  }
}

/* =========================================================================
   14. HABER PANELİ KAPALIYKEN — katman sırası gereği en sonda
   -------------------------------------------------------------------------
   Izgara sütunları utilities katmanındaki medya sorgularında da tanımlı;
   bu kural onları yenmek için aynı katmanda ve daha yüksek özgüllükte.
   ========================================================================= */
@layer utilities {
  :root[data-news="off"] .main {
    grid-template-areas: "content content" "tickers ad";
  }
  :root[data-news="off"] .right { display: none; }
}

/* =========================================================================
   15. PUNTO ÖLÇEĞİ — tek ölçek
   -------------------------------------------------------------------------
   Site tek punto ölçeği kullanır; kullanıcıya sunulan boyut seçimi kaldırıldı.
   Gerçek punto her zaman ölçümle bulunur (`fitTable`, `fitDetail`,
   `fitTickers`); buradaki değerler yalnız üst sınırdır. Haber paneli
   kapalıyken tabloya daha çok genişlik kaldığı için puntolar bir kademe
   daha büyür.
   ========================================================================= */
@layer tokens {
  :root { --t-quote-max: 24px; --t-row-min: 1.95; --t-fit-vertical: 1; --t-unit-max: 21px; --t-firm: 17px; --t-side: 12px; --t-unitcol: 210px; --t-title: 36px; --t-subtitle: 17px; --tick-h: 210px; --t-tick-head: 15px; --t-tick-price: 42px; --t-tick-chg: 21px; --t-tick-label: 10.5px; --t-tick-val: 14.5px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }

  /* Türetilenler — boyut bloklarından sonra gelmeli.
     ÖLÇÜM ÖNCESİ DEĞER KÜÇÜK OLMALI: `fitTable` ilk çizimden sonra
     çalışıyor; yedek değer üst sınır olursa ilk kare dev rakamlarla,
     üst üste binmiş hâlde boyanıyordu. Küçükten büyüğe geçiş göze
     çarpmaz, tersi ekranı bozar. */
  :root {
    --t-quote: min(var(--t-quote-max), var(--t-quote-auto, var(--t-quote-min, 15px)));
    --t-unit:  min(var(--t-unit-max),  var(--t-unit-auto,  12px));
    --t-row:   calc(var(--t-quote) * 2.5);
  }
}

@layer components {
  /* ————————————————————————— fiyat matrisi ————————————————————————— */
  .quote-matrix .unit-head, .quote-matrix .unit { width: var(--t-unitcol); }

  /* Bant yüksekliği jetondan gelir; fitTable dikey bütçeyi aynı jetonla
     hesaplar — ikisi ayrışırsa tablo taşar. Logolar addan daha çok yer
     istediği için çarpan 0,86 yerine 1,06. */
  .quote-matrix .firm-row th {
    height: calc(var(--t-row) * var(--t-firmband)); font-size: var(--t-firm);
  }
  .quote-matrix .side-row th {
    top: calc(var(--t-row) * var(--t-firmband));
    height: calc(var(--t-row) * .62); font-size: var(--t-side);
  }
  /* Birim başlığı öteki başlıklardan %50 büyük durur. */
  .quote-matrix .firm-row th.unit-head { font-size: calc(var(--t-side) * 1.5); }

  .quote-matrix .firm { font-size: var(--t-firm); }
  .firm--harem  { --firm-size: calc(var(--t-firm) * 1.08); }
  .firm--saglam { --firm-size: calc(var(--t-firm) * .88); }
  .firm--yazici { --firm-size: calc(var(--t-firm) * .98); }
  .firm--ehg    { --firm-size: calc(var(--t-firm) * 1.14); }
  .firm--nadir  { --firm-size: var(--t-firm); }

  .quote-matrix tbody th.unit,
  .quote-matrix td.q { height: var(--t-row); }
  .quote-matrix td.q { font-size: var(--t-quote); padding: 0 calc(var(--t-quote) * .3); }
  .quote-matrix .unit .row-link { font-size: var(--t-unit); }
  .quote-matrix .unit .fav { width: calc(var(--t-unit) * 1.6); height: calc(var(--t-unit) * 1.6); }
  .quote-matrix .unit .fav svg { width: calc(var(--t-unit) * 1.02); height: calc(var(--t-unit) * 1.02); }

  /* ————————————————————————— kur kartları ————————————————————————— */
  .ticker      { height: var(--tick-h); }
  .ticker-head { height: calc(var(--tick-h) * .24); padding-top: calc(var(--tick-h) * .056);
                 font-size: var(--t-tick-head); }
  .ticker-price  { font-size: var(--t-tick-price); }
  .ticker-change { font-size: var(--t-tick-chg); margin-top: calc(var(--tick-h) * .026); }
  .ticker-change svg { width: calc(var(--t-tick-chg) * .68); height: calc(var(--t-tick-chg) * .68); }
  .spark     { top: calc(var(--tick-h) * .42); height: calc(var(--tick-h) * .2);
               left: calc(var(--tick-h) * .045); right: calc(var(--tick-h) * .045); }
  .info-grid { height: calc(var(--tick-h) * .352); }
  .info      { padding: calc(var(--tick-h) * .044) calc(var(--tick-h) * .032); }
  .info dt   { font-size: var(--t-tick-label); }
  .info dd   { font-size: var(--t-tick-val); margin-top: calc(var(--tick-h) * .025); }

  /* ——————————————————————— detay tablosu ——————————————————————— */
  .market-table tbody td,
  .market-table tbody th[scope="row"] { height: calc(var(--t-row) * .93); font-size: calc(var(--t-quote) * .82); }
  .market-table tbody th[scope="row"] { font-size: calc(var(--t-unit) * .86); }
  .market-table thead th { height: calc(var(--t-row) * .78); font-size: calc(var(--t-side) * .95); }
  .th-btn { height: calc(var(--t-row) * .78); }
  .buy, .sell { height: calc(var(--t-row) * .58); font-size: calc(var(--t-quote) * .72);
                min-width: calc(var(--t-quote) * 6.2); }
  .buy small, .sell small { font-size: calc(var(--t-quote) * .56); }
  .change { font-size: calc(var(--t-quote) * .78); }

  /* ——————————————————————— sayfa başlığı ——————————————————————— */
  .title    { font-size: var(--t-title); }
  .subtitle { font-size: var(--t-subtitle); }
}

@layer components {
  /* reklam bandı kur kartlarıyla tam aynı yükseklikte — alt kenarları birleşir */
  .right > .ad-image { height: var(--tick-h); object-fit: cover; }
}

/* =========================================================================
   16. UYGULAMA İNDİRME BLOĞU
   -------------------------------------------------------------------------
   Eskiden tek parça PNG'ydi; koyu temada beyaz kalıyordu. Artık zemin ve
   başlık temaya uyuyor, mağaza rozetleri ile görsel kendi hâlinde kalıyor.
   ========================================================================= */
@layer components {
  .app-cta {
    flex: none; height: 120px;
    display: grid; grid-template-columns: minmax(0, 1fr) 142px;
    background: var(--surface);
    border: 1px solid var(--line-card); border-radius: var(--r-xl);
    overflow: hidden;
    transition: background-color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
  }
  .app-cta-body {
    padding: 0 0 0 16px;
    display: flex; flex-direction: column; justify-content: center; gap: 11px;
    min-width: 0;
  }
  .app-cta-title {
    font-size: 12px; font-weight: 800; letter-spacing: .55px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-cta-badges { display: flex; gap: 8px; }
  .app-cta-badges a { border-radius: var(--r-sm); display: block; }
  .app-cta-badges img { height: 38px; width: auto; display: block; }
  .app-cta-art { width: 142px; height: 100%; object-fit: cover; object-position: 50% 40%; }
}

/* =========================================================================
   17. ÜST BAR MENÜLERİ — T · Filtrele · Alarm · Çeviri
   ========================================================================= */
@layer components {
  .menu { position: relative; }

  .popover {
    position: absolute; top: calc(100% + 9px); right: 0; z-index: var(--z-pop);
    width: 292px; padding: 13px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-card); border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
    text-align: left;
  }
  .popover[hidden] { display: none; }
  .popover-title {
    font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--fg-muted); margin-bottom: 10px;
  }
  .popover-note { font-size: 10.5px; font-weight: 600; color: var(--fg-muted); line-height: 1.5; margin-top: 10px; }

  /* seçenek satırı (onay kutusu / radyo) */
  .opt {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px; border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 700; color: var(--fg-2); text-align: left;
    transition: background-color var(--dur-1) var(--ease);
  }
  .opt:hover { background: var(--surface-2); }
  .opt-mark {
    width: 16px; height: 16px; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid var(--line-strong); border-radius: 4px;
    background: var(--surface);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .opt[role="menuitemradio"] .opt-mark { border-radius: 50%; }
  .opt-mark svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6);
                  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out); }
  .opt[aria-checked="true"] .opt-mark { background: var(--blue3); border-color: var(--blue3); }
  .opt[aria-checked="true"] .opt-mark svg { opacity: 1; transform: scale(1); }
  .opt-sub { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--muted); }

  /* form alanları */
  .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
  .field > label { font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--fg-muted); text-transform: uppercase; }
  .field select, .field input {
    height: 34px; padding: 0 9px;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 700;
  }
  .field select:focus, .field input:focus { border-color: var(--blue3); background: var(--surface); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

  .btn-primary {
    width: 100%; height: 36px; margin-top: 3px;
    background: var(--blue2); color: #fff;
    border-radius: var(--r-sm); font-size: 12.5px; font-weight: 800;
    transition: background-color var(--dur-2) var(--ease);
  }
  .btn-primary:hover { background: var(--blue3); }

  /* kurulu alarmlar */
  .alarm-list { margin-top: 11px; border-top: 1px solid var(--line-soft); padding-top: 9px;
                max-height: 168px; overflow-y: auto; }
  .alarm-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 11.5px; font-weight: 700; color: var(--fg-2);
  }
  .alarm-item:last-child { border-bottom: 0; }
  .alarm-item b { font-weight: 800; }
  .alarm-item .alarm-cond { color: var(--fg-muted); font-weight: 600; }
  .alarm-del {
    margin-left: auto; width: 24px; height: 24px; flex: none;
    display: grid; place-items: center; border-radius: 50%; color: var(--muted);
  }
  .alarm-del:hover { color: var(--down-ink); background: var(--down-bg); }
  .alarm-del svg { width: 13px; height: 13px; }
  .alarm-empty { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 0; }

  /* çevirici sonucu */
  .conv-out {
    margin-top: 4px; padding: 11px 12px;
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    font-size: 17px; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right;
  }
  .conv-swap {
    width: 100%; height: 26px; margin: -3px 0 6px;
    display: grid; place-items: center; color: var(--fg-nav); border-radius: var(--r-sm);
  }
  .conv-swap:hover { background: var(--surface-2); }
  .conv-swap svg { width: 15px; height: 15px; }

  /* alarm bildirimi */
  .toast-wrap {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-pop);
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  .toast {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; max-width: 340px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-card); border-left: 3px solid var(--star);
    border-radius: var(--r-lg); box-shadow: var(--sh-pop);
    font-size: 12.5px; font-weight: 700;
    animation: toast-in var(--dur-3) var(--ease-out);
  }
  .toast svg { width: 16px; height: 16px; color: var(--star); flex: none; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

  /* gizli firma sütunları */
  [data-firm-hidden] { display: none !important; }
}

/* =========================================================================
   18. SAĞ SÜTUN TAŞMA DÜZELTMESİ + REKLAM BANDI
   ========================================================================= */
@layer layout {
  /* haber akışı sonuna kadar küçülebilsin; aksi hâlde alttaki reklam bandının
     üstüne taşıyordu */
  .right { overflow: hidden; }
  .feed-card { min-height: 0; }
  .news-card { min-height: 0; flex: 0 1 auto; }
}

@layer components {
  /* reklam bandı ayrılan alanı tamamen doldurur */
  .right > .ad-image {
    height: var(--tick-h);
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* =========================================================================
   19. KUR KARTI — kart genişliğine göre otomatik punto
   -------------------------------------------------------------------------
   Kart 4'lü ızgarada ~350px; haber paneli kapanınca ~456px'e çıkıyor.
   Konteyner sorgusuyla punto kart genişliğini takip eder, alt bilgi
   sütunlarından taşmaz.
   ========================================================================= */
@layer components {
  .ticker { container-type: inline-size; }

  .ticker-head   { font-size: min(var(--t-tick-head),  5.2cqw); }
  .ticker-price  { font-size: min(var(--t-tick-price), 15cqw); }
  .ticker-change { font-size: min(var(--t-tick-chg),   7.4cqw); }
  .info dt       { font-size: min(var(--t-tick-label), 3.1cqw); }
  .info dd       { font-size: min(var(--t-tick-val),   4.3cqw); }
  .info          { padding: calc(var(--tick-h) * .034) calc(var(--tick-h) * .022); }
}

/* =========================================================================
   20. REKLAM BLOĞU — kur kartlarıyla aynı yüksekliği tam doldurur
   -------------------------------------------------------------------------
   Eskiden 385×160 tek parça PNG'ydi; ayrılan alan yükseldikçe ya kırpılıyor
   ya da boşluk bırakıyordu. Artık zemin CSS, görsel yalnızca figür.
   ========================================================================= */
@layer components {
  .ad-cta {
    flex: none;
    height: var(--tick-h);
    margin-top: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    background: linear-gradient(135deg, #073a51 0%, #052a3c 62%, #04202e 100%);
    border-radius: var(--r-2xl);
    overflow: hidden;
    container-type: inline-size;
  }
  .ad-cta-body {
    padding: 0 0 0 clamp(14px, 4.5cqw, 24px);
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(10px, 4cqw, 20px);
    min-width: 0;
  }
  .ad-cta-title {
    color: #fff; font-weight: 800; letter-spacing: -.3px;
    font-size: clamp(14px, 5.4cqw, 26px);
    line-height: 1.25;
  }
  .ad-cta-badges { display: flex; flex-wrap: wrap; gap: clamp(6px, 2.2cqw, 11px); }
  .ad-cta-badges a { display: block; border-radius: 5px; }
  .ad-cta-badges img {
    height: clamp(26px, 9.2cqw, 44px); width: auto; display: block;
  }
  .ad-cta-art {
    height: 100%; width: auto; max-width: 46cqw;
    object-fit: cover; object-position: left center;
    align-self: end;
  }
}

/* =========================================================================
   21. SATIR YÜKSEKLİĞİ — dikeyde de sığdır
   ========================================================================= */
@layer tokens {
  :root {
    /* JS ölçtüğü --t-row-auto ile sınırlanır; okunabilirlik için alt sınır
       puntonun 1,95 katı. */
    --t-row: max(
      calc(var(--t-quote) * var(--t-row-min, 1.85)),
      min(calc(var(--t-quote) * 2.5), var(--t-row-auto, 9999px))
    );
  }
}

/* =========================================================================
   22. YILDIZ DÜĞMESİ SATIRI ŞİŞİRMESİN
   -------------------------------------------------------------------------
   Yıldız birim puntosundan ölçeklenince, satır sıkışan sayfalarda hücreyi
   yukarı itip dikey sığdırmayı bozuyordu. Artık satır yüksekliğini izler
   (dokunma hedefi için 24px alt sınırla).
   ========================================================================= */
@layer components {
  .quote-matrix .unit .fav {
    width:  max(24px, calc(var(--t-row) * .62));
    height: max(24px, calc(var(--t-row) * .62));
  }
  .quote-matrix .unit .fav svg {
    width:  max(14px, calc(var(--t-row) * .38));
    height: max(14px, calc(var(--t-row) * .38));
  }
  .quote-matrix .unit .row-link { line-height: 1.15; }
}

/* =========================================================================
   23. ANA IZGARA — dört bölge
   -------------------------------------------------------------------------
     içerik  | haber paneli
     kurlar  | reklam
   Haber paneli kapatılınca içerik iki sütuna yayılır; alt banttaki dört kur
   kartı ile reklam bandı yerinde kalır.
   ========================================================================= */
@layer layout {
  .main {
    grid-template-columns: minmax(0, 1fr) 322px;
    grid-template-rows: minmax(0, 1fr) var(--tick-h);
    grid-template-areas:
      "content aside"
      "tickers ad";
    column-gap: 23px;
    row-gap: 16px;
  }
  .left       { grid-area: content; }
  .right      { grid-area: aside; }
  .bottom-row { grid-area: tickers; margin-top: 0; }
  .ad-slot    { grid-area: ad; min-width: 0; display: flex; }

  .ad-slot > .ad-cta { margin-top: 0; height: auto; flex: 1 1 auto; }

  /* sağ sütunda artık reklam yok; akış sonuna kadar esner */
  .right > .feed-card { margin-bottom: 0; }
}

@layer utilities {
  @media (max-height: 460px), (max-width: 989px) {
    .main {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-template-areas: "content" "tickers" "aside" "ad";
    }
    :root[data-news="off"] .main {
      grid-template-areas: "content" "tickers" "ad";
    }
    .ad-slot > .ad-cta { height: 170px; }
  }
}

/* =========================================================================
   24. EN KÜÇÜK PUNTODA BİLE OKUNUR KALSIN
   -------------------------------------------------------------------------
   Otomatik ölçek çok satırlı sayfalarda puntoyu kısabiliyordu. Artık bir
   taban var: altına inmek yerine tablo kendi içinde kaydırılıyor.
   ========================================================================= */
@layer tokens {
  :root { --t-quote-min: 15px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* =========================================================================
   25. IZGARA BÖLGELERİ — katman düzeltmesi
   -------------------------------------------------------------------------
   .bottom-row ve .ad-cta için eski kurallar components katmanında; ızgara
   düzenlemesi de aynı katmanda olmalı ki onları yensin.
   ========================================================================= */
@layer components {
  .bottom-row { grid-area: tickers; margin-top: 0; }

  .ad-slot > .ad-cta {
    margin-top: 0;
    height: auto;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =========================================================================
   26. KUR KARTI ALT BİLGİ ŞERİDİ
   -------------------------------------------------------------------------
   Sıra: Önceki Gün Kapanış · Açılış · En Düşük · En Yüksek
   Punto JS ile hücre başına ölçülür (--fit-label / --fit-value): etiket ve
   değer, hücreyi dolduracak en büyük boyuta ayarlanır. Kısa sayılar da
   alanı boş bırakmaz; ekran değişince yeniden hesaplanır.
   ========================================================================= */
@layer components {
  /* şerit yükseldi: hem etiket hem değer için yer açıldı */
  .info-grid { height: calc(var(--tick-h) * .42); }

  /* etiket üstte, değer altta: hücreler farklı satır sayısında olsa da
     dört değer aynı hizada kalır */
  .info {
    padding: calc(var(--tick-h) * .022) calc(var(--tick-h) * .018);
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 4px; min-width: 0; overflow: hidden;
  }

  .info dt {
    font-size: var(--fit-label, var(--t-tick-label));
    font-weight: 700; line-height: 1.12; letter-spacing: 0;
    color: rgba(255,255,255,.9);
    white-space: normal;            /* iki satıra sarabilir */
    overflow-wrap: anywhere; text-overflow: clip;
  }
  .info dd {
    margin-top: 0;
    font-size: var(--fit-value, var(--t-tick-val));
    font-weight: 800; line-height: 1.12;
    white-space: nowrap;
  }
}

/* =========================================================================
   27. KUR KARTI DİKEY DENGE
   -------------------------------------------------------------------------
   Alt bilgi şeridi büyüdüğü için değişim satırıyla çakışıyordu. Şerit ve
   mini grafik bantları kart yüksekliğinin oranı olarak yeniden ayarlandı.
   ========================================================================= */
@layer components {
  .info-grid { height: calc(var(--tick-h) * .38); }
  .spark {
    top: calc(var(--tick-h) * .43);
    height: calc(var(--tick-h) * .16);
  }
}

/* =========================================================================
   28. KUR KARTI YÜKSEKLİĞİ EKRANA GÖRE
   -------------------------------------------------------------------------
   Sabit yükseklik, 768 px'lik dizüstü ekranlarda kartların ekranın üçte
   birini yiyip hem tabloyu hem alt bilgi şeridini sıkıştırıyordu. Artık
   ekran yüksekliğinin oranı — alt ve üst sınırla.
   ========================================================================= */
@layer tokens {
  :root { --tick-h: clamp(146px, calc(20 * var(--vh)), 212px); --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* =========================================================================
   29. KUR KARTI — YENİ İÇ DÜZEN
   -------------------------------------------------------------------------
     üst satır : başlık solda · fiyat ve günlük değişim sağda
     alt ızgara: A Açılış            C En Yüksek
                 B Önceki Gün Kap.   D En Düşük
   Etiket solda, veri sağında. Puntolar JS ile kart genişliğine göre
   ölçülür (--tk-*); geniş ekranda büyür, dar ekranda sığar.
   ========================================================================= */
@layer components {
  .ticker {
    display: flex; flex-direction: column;
    padding: calc(var(--tick-h) * .055) calc(var(--tick-h) * .05);
    gap: calc(var(--tick-h) * .03);
  }

  /* ————————————————————————— üst satır ————————————————————————— */
  .tk-top {
    flex: none;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: calc(var(--tick-h) * .04);
  }
  .ticker-head {
    flex: 1 1 auto; min-width: 0;
    height: auto; padding: 0; text-align: left;
    font-size: var(--tk-title, 14px); font-weight: 700; line-height: 1.2;
    letter-spacing: .1px; color: rgba(255,255,255,.94);
  }
  .tk-figures { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
  .ticker-price {
    text-align: right; line-height: 1;
    font-size: var(--tk-price, 34px); font-weight: 800; letter-spacing: -.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .ticker-change {
    margin-top: calc(var(--tick-h) * .015);
    justify-content: flex-end;
    font-size: var(--tk-chg, 15px); font-weight: 800;
  }
  .ticker-change svg { width: .68em; height: .68em; }

  /* ————————————————————————— mini grafik ————————————————————————— */
  .spark {
    position: absolute; left: 0; right: 0;
    top: calc(var(--tick-h) * .42); height: calc(var(--tick-h) * .2);
    opacity: .55; pointer-events: none;
  }

  /* ————————————————————————— alt ızgara ————————————————————————— */
  .tk-stats {
    position: static; flex: 1 1 auto; min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;                 /* A,B sol sütun · C,D sağ sütun */
    column-gap: calc(var(--tick-h) * .05);
    row-gap: calc(var(--tick-h) * .01);
    align-content: end;
    border-top: 0; background: none; height: auto;
  }
  .tk-stat {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px; min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
    padding-bottom: calc(var(--tick-h) * .012);
  }
  .tk-stat dt {
    min-width: 0;
    font-size: var(--tk-label, 12px); font-weight: 600; line-height: 1.15;
    color: rgba(255,255,255,.86);
    overflow-wrap: anywhere;
  }
  .tk-stat dd {
    flex: none; margin: 0;
    font-size: var(--tk-value, 16px); font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
}

/* =========================================================================
   30. KUR KARTI PUNTO ÜST SINIRLARI — üç boyut
   -------------------------------------------------------------------------
   JS bu sınırları aşmadan, kart genişliğine sığan en büyük değeri seçer.
   ========================================================================= */
@layer tokens {
  :root { --tk-title-max: 13px; --tk-price-max: 36px; --tk-chg-max: 16px; --tk-label-max: 12.5px; --tk-value-max: 17px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* =========================================================================
   31. KUR KARTI ALT IZGARA — satırlar içeriğe otursun
   ========================================================================= */
@layer components {
  .tk-stats {
    grid-template-rows: auto auto;
    align-content: end;
    row-gap: calc(var(--tick-h) * .035);
  }
  .ticker-head { text-wrap: balance; }
}

/* =========================================================================
   32. KUR KARTI — etiket sarması ve mini grafik bandı
   ========================================================================= */
@layer components {
  /* kısa etiketler tek satırda kalır; yalnız "Önceki Gün Kapanış" sarabilir */
  .tk-stat dt { white-space: nowrap; }
  .tk-stat dt.tk-wrap { white-space: normal; }

  /* üst satır ile alt ızgara arasındaki boşluğu mini grafik doldurur */
  .spark {
    top: calc(var(--tick-h) * .34);
    height: calc(var(--tick-h) * .3);
    opacity: .6;
  }
}

/* Boyut büyüdükçe fiyat ve veri, kartın genişliğinden daha çok pay alır. */
@layer tokens {
  :root { --tk-price-share: .46; --tk-value-share: .52; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* Etiketler bu tabanın altına inmez; gerekirse veri puntosundan yer alınır. */
@layer tokens {
  :root { --tk-label-min: 11px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* =========================================================================
   33. ÜST BAR VE DURUM ÇUBUĞU DA BOYUTLA ÖLÇEKLENSİN
   -------------------------------------------------------------------------
   "T" menüsü artık yalnız tabloyu değil sayfa çerçevesini de büyütüyor:
   logo, menü, üst bar düğmeleri, durum çubuğu, ekmek kırıntısı ve footer.
   Çubuk yükseklikleri de puntoyla birlikte artar.
   ========================================================================= */
@layer tokens {
  :root { --hdr-h: 64px; --status-h: 54px; --foot-h: 44px; --t-logo: 31px; --t-nav: 13px; --t-topbtn: 12px; --t-status: 12px; --t-crumb: 13px; --t-foot: 9.5px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer layout {
  .header { height: var(--hdr-h); }
  .status { height: var(--status-h); top: var(--hdr-h); }
  .footer { height: var(--foot-h); font-size: var(--t-foot); }

  .logo     { font-size: var(--t-logo); }
  .logo small { font-size: calc(var(--t-logo) * .195); }
  .nav a    { font-size: var(--t-nav); }
  .top-actions { font-size: var(--t-topbtn); }
  .switch-btn, .top-btn, .square, .check-btn { font-size: var(--t-topbtn); }
  .top-btn, .square, .check-btn { height: calc(var(--t-topbtn) * 2.6); }
  .top-actions .icon { width: calc(var(--t-topbtn) * 1.25); height: calc(var(--t-topbtn) * 1.25); }

  .status      { font-size: var(--t-status); }
  .ico         { width: calc(var(--t-status) * 1.5); height: calc(var(--t-status) * 1.5); }
  .ico .icon   { width: calc(var(--t-status) * .82); height: calc(var(--t-status) * .82); }
  #clock       { min-width: calc(var(--t-status) * 4.9); }
  .fullscreen  { font-size: calc(var(--t-status) * .92); padding: calc(var(--t-status) * .68) calc(var(--t-status) * 1.1); }

  .breadcrumb  { font-size: var(--t-crumb); }
}

/* =========================================================================
   34. KUR KARTI HÜCRESİ — sıra, kalın etiket, sağlam hizalama
   -------------------------------------------------------------------------
   Sıra: A Önceki Gün Kapanış · B Açılış · C En Yüksek · D En Düşük
   Etiket kalın; veri sağda kendi sütununda durur, uzun sayı gelse de
   etiketin üstüne binmez.
   ========================================================================= */
@layer components {
  .tk-stat {
    align-items: center;                     /* etiket sarsa da veri ortada */
    min-height: calc(var(--tk-value, 18px) * 1.9);
  }
  .tk-stat dt { font-weight: 800; }
  .tk-stat dd { flex: 0 0 auto; text-align: right; }
}

/* =========================================================================
   35. KUR KARTI — dört satır tek sütun
   -------------------------------------------------------------------------
   A ve B'nin altına C ve D geldi. Her satır kartın tüm genişliğini
   kullandığı için etiket ve veri belirgin biçimde büyüyor.
   ========================================================================= */
@layer components {
  .tk-stats {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: row;
    row-gap: calc(var(--tick-h) * .012);
    column-gap: 0;
  }
  .tk-stat {
    min-height: 0;
    padding-bottom: calc(var(--tick-h) * .008);
    gap: 10px;
  }
  /* dört satır sığsın diye mini grafik daha ince bir bant */
  .spark { top: calc(var(--tick-h) * .30); height: calc(var(--tick-h) * .16); }
}

/* =========================================================================
   36. HABER PANELİ DE PUNTO ÖLÇEĞİNİ İZLESİN
   ========================================================================= */
@layer tokens {
  :root { --t-cta-title: 12px; --t-news-meta: 10px; --t-news-head: 20px; --t-news-body: 12px; --t-feed-meta: 8px; --t-feed-title: 10.5px; --t-feed-desc: 9px; --t-feed-more: 10px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  .app-cta-title { font-size: var(--t-cta-title); }
  .news-meta     { font-size: var(--t-news-meta); }
  .news-logo     { width: calc(var(--t-news-meta) * 1.85); height: calc(var(--t-news-meta) * 1.85);
                   font-size: calc(var(--t-news-meta) * .9); }
  .news-head     { font-size: var(--t-news-head); }
  .news-body     { font-size: var(--t-news-body); }

  .feed-meta     { font-size: var(--t-feed-meta); }
  .feed-title    { font-size: var(--t-feed-title); }
  .feed-desc     { font-size: var(--t-feed-desc); }
  .feed-more     { font-size: var(--t-feed-more); height: calc(var(--t-feed-more) * 2.8); }
  .src-icon      { width: calc(var(--t-feed-title) * 1.7); height: calc(var(--t-feed-title) * 1.7);
                   font-size: calc(var(--t-feed-title) * .85); }
  .src-foreks    { width: calc(var(--t-feed-title) * 4.4); font-size: calc(var(--t-feed-title) * 1.4); }
  .feed-item     { height: calc(var(--t-feed-title) * 4.9); }
  .circle-btn    { width: calc(var(--t-news-body) * 2.5); height: calc(var(--t-news-body) * 2.5); }
  .circle-btn svg { width: calc(var(--t-news-body) * 1.08); height: calc(var(--t-news-body) * 1.08); }
}

/* =========================================================================
   37. REKLAM SLIDER — tek parça, kırpılmayan banner
   -------------------------------------------------------------------------
   Görsel artık `contain` ile yerleştiriliyor: figürün başı kesilmiyor.
   Slaytlar çapraz geçişle döner; noktalardan seçilebilir.
   ========================================================================= */
@layer components {
  .ad-slider {
    position: relative;
    width: 100%; height: 100%;
    border-radius: var(--r-2xl); overflow: hidden;
    background: linear-gradient(135deg, #073a51 0%, #052a3c 62%, #04202e 100%);
    container-type: inline-size;
    isolation: isolate;
  }

  .ad-slide {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-3) var(--ease);
  }
  .ad-slide[data-active] { opacity: 1; visibility: visible; }

  .ad-cta-body {
    padding: clamp(12px, 4.5cqw, 26px) 0 clamp(12px, 4.5cqw, 26px) clamp(14px, 5cqw, 26px);
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(9px, 3.6cqw, 18px);
    min-width: 0;
  }
  .ad-cta-title {
    color: #fff; font-weight: 800; letter-spacing: -.3px;
    font-size: clamp(13px, 5cqw, 26px); line-height: 1.24;
  }
  .ad-cta-badges { display: flex; flex-wrap: wrap; gap: clamp(5px, 2cqw, 10px); }
  .ad-cta-badges a { display: block; border-radius: 5px; }
  .ad-cta-badges img { height: clamp(24px, 8.6cqw, 42px); width: auto; display: block; }

  /* figür tamamen görünür: kırpma yok */
  .ad-cta-art {
    height: 100%; width: auto;
    max-width: 44cqw;
    object-fit: contain; object-position: right bottom;
    align-self: end;
  }

}

/* =========================================================================
   38. KOYU MODDA KALAN AÇIK YÜZEY
   -------------------------------------------------------------------------
   Foreks marka rozeti beyaz zeminliydi; koyu kartların üzerinde parlak bir
   blok gibi duruyordu. Koyu temada kendi yüzey tonuna alındı.
   ========================================================================= */
@layer components {
  :root[data-theme="dark"] .src-foreks {
    background: var(--surface-3);
    color: var(--fg-2);
    box-shadow: inset 0 0 0 1px var(--line-card);
  }
}

/* =========================================================================
   39. HABER PANELİ PUNTOSU — tabloya yarı yolda buluşsun
   -------------------------------------------------------------------------
   Fiyat tablosu (mavi alan) sabit kaldı; haber paneli (pembe alan) her
   öğede tablo puntosuyla arasındaki farkın yarısı kadar büyütüldü.
   Panel içindeki hiyerarşi korunuyor: başlık > gövde > akış başlığı >
   açıklama > üstveri.
   ========================================================================= */
@layer tokens {
  :root { --t-cta-title: 17px; --t-news-meta: 13px; --t-news-head: 23px; --t-news-body: 17px; --t-feed-meta: 13px; --t-feed-title: 16px; --t-feed-desc: 14.5px; --t-feed-more: 15px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  /* satır yüksekliği yeni puntolara göre */
  .feed-item { height: calc(var(--t-feed-title) * 4.5); }

  /* gövde metni kartı taşırmasın: satır sınırıyla kesilsin */
  .news-body {
    width: 100%;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .news-head { -webkit-line-clamp: 2; }

  /* akış metinleri tek satırda kalır, taşan kısım üç noktayla biter */
  .feed-title, .feed-desc { line-height: 1.25; }
}

/* =========================================================================
   40. HABER KARTI — büyüyen puntoya göre yer paylaşımı
   -------------------------------------------------------------------------
   Başlık iki, gövde üç satırla sınırlı; kart, akıştan biraz daha fazla pay
   alıyor ki gövde metni kaybolmasın.
   ========================================================================= */
@layer components {
  .news-head {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    margin: calc(var(--t-news-head) * .45) 0 calc(var(--t-news-head) * .3);
  }
  .news-body { -webkit-line-clamp: 3; }
}

@layer layout {
  .news-card { flex: 1.25 1 auto; }
  .feed-card { flex: 1 1 auto; }
}

/* Haber kartı ile akış, esneme oranıyla paylaşsın (içerik boyu değil). */
@layer layout {
  .news-card { flex: 1.4 1 0; }
  .feed-card { flex: 1 1 0; }
}
@layer components {
  .news-controls { height: calc(var(--t-news-body) * 2.7); padding-bottom: calc(var(--t-news-body) * .4); }
}

/* Büyük puntoda gövde iki satıra iner ki kart taşmasın. */
@layer components {
}

/* Büyük puntoda kur kartları da yükseldiği için sağ sütun daralıyor;
   haber kartı akıştan daha çok pay alsın ki gövde metni kırpılmasın. */
@layer layout {
}
@layer components {
}

/* Büyük puntoda 6 px'lik taşma kalıyordu; iç boşluk buna göre kısıldı. */
@layer components {
}

/* =========================================================================
   41. TEMA GEÇİŞİ ANINDA OLSUN
   -------------------------------------------------------------------------
   Zemin renkleri 260 ms animasyonla değişirken yazı renkleri anında
   değişiyordu; o aralıkta açık zemin üzerinde açık yazı kalıyor, ekran
   "yarı beyaz" görünüyordu. Geçiş sırasında tüm animasyonlar kapatılır.
   ========================================================================= */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
  transition: none !important;
}

/* Koyu temada üst bardaki iki gösterge de saf beyaz yerine yumuşak mavi-beyaz. */
@layer components {
  :root[data-theme="dark"] .check-btn[aria-checked="true"] .check-box {
    background: #bbe6f9; border-color: #bbe6f9;
  }
  :root[data-theme="dark"] .check-box svg { color: #091a21; }
  :root[data-theme="dark"] .switch-track::after { background: #bbe6f9; }
}

/* =========================================================================
   42. HABER KONTROLÜ — tek çerçevede Haber · Başlık · Detay
   -------------------------------------------------------------------------
   Üçü aynı kutuda: panelin açık/kapalı olmasıyla gösterim biçiminin
   birbirine bağlı olduğu görünsün. Panel kapalıyken mod seçici sönükleşir.
   ========================================================================= */
@layer components {
  .news-seg {
    display: flex; align-items: stretch;
    height: calc(var(--t-topbtn) * 2.6);
    border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-md);
    overflow: hidden;
    font-size: var(--t-topbtn);
  }

  .seg-master {
    display: flex; align-items: center; gap: 7px;
    padding: 0 10px;
    color: var(--hdr-fg); font-weight: 600; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease);
  }
  .seg-master:hover { background: var(--hdr-surface); }

  .seg-divider { width: 1px; background: rgba(255,255,255,.4); flex: none; }

  .seg-modes { display: flex; align-items: stretch; }
  .seg-opt {
    padding: 0 10px;
    color: rgba(255,255,255,.72); font-weight: 700; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .seg-opt:hover { background: var(--hdr-surface); color: #fff; }
  .seg-opt[aria-checked="true"] { background: rgba(255,255,255,.92); color: var(--hdr-2); }
  :root[data-theme="dark"] .seg-opt[aria-checked="true"] { background: #bbe6f9; color: #091a21; }

  /* panel kapalıyken mod seçici işlevsiz görünsün */
  :root[data-news="off"] .seg-modes { opacity: .38; pointer-events: none; }

  /* ————————————————— yalnızca başlık modu ————————————————— */
  :root[data-newsmode="title"] .news-body,
  :root[data-newsmode="title"] .feed-desc,
  :root[data-newsmode="title"] .news-page { display: none; }
  :root[data-newsmode="title"] .feed-item { height: calc(var(--t-feed-title) * 3.1); }
  :root[data-newsmode="title"] .feed-title { white-space: normal; -webkit-line-clamp: 2;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  :root[data-newsmode="title"] .news-head { -webkit-line-clamp: 4; }

  /* ————————————————— sayfa göstergesi (1/2) ————————————————— */
  .news-page {
    margin-left: 10px;
    font-size: calc(var(--t-news-meta) * .92); font-weight: 800;
    color: var(--fg-muted); font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .dots-wrap { align-items: center; }
}

/* =========================================================================
   43. KOYU MODDA ZEMİN GÜVENCESİ
   -------------------------------------------------------------------------
   Sayfa gövdesi 100dvh + flex olduğu için, gömülü/çerçeveli görüntülemede
   altında kalan yüzey sızabiliyordu. Sabit bir zemin katmanı bunu keser.
   ========================================================================= */
:root, body { background-color: var(--bg); }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

/* tema anahtarının yolu da koyu tonda kalsın */
@layer components {
  :root[data-theme="dark"] .switch-track { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
  :root[data-theme="dark"] .news-seg,
  :root[data-theme="dark"] .square      { border-color: rgba(255,255,255,.34); }
}

/* =========================================================================
   44. HABER GÖVDESİ — sabit kutu, sayfalama buna göre
   -------------------------------------------------------------------------
   Gövde satır sayısıyla değil, kartta kalan alanla sınırlı. Böylece punto
   büyüdükçe aynı metin daha çok sayfaya bölünür (1/2 → 1/3 → 1/4).
   ========================================================================= */
@layer components {
  .news-body {
    flex: 1 1 auto; min-height: 0;
    display: block; overflow: hidden;
    -webkit-line-clamp: none;
  }
  .news-feature { display: flex; flex-direction: column; }
}

/* Slayt kabı da esnek olmalı; yoksa gövdeye verilen flex kuralları
   blok kapsayıcı içinde işlemiyor ve metin karttan taşıyor. */
@layer components {
  .news-slide {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .news-slide > .news-meta { flex: none; }
  .news-slide > .news-head { flex: none; }
}

/* Onay kutusunun işaretli görünümü yeni birleşik kontrolde de geçerli olsun. */
@layer components {
  .seg-master[aria-checked="true"] .check-box { background: #fff; border-color: #fff; }
  .seg-master[aria-checked="true"] .check-box svg { opacity: 1; transform: scale(1); }
  :root[data-theme="dark"] .seg-master[aria-checked="true"] .check-box {
    background: #bbe6f9; border-color: #bbe6f9;
  }
}

/* =========================================================================
   45. HABER ALANI — A ve B birbirinin alternatifi
   -------------------------------------------------------------------------
   A = okuyucu kartı (başlık + sayfalanan detay)
   B = başlık listesi (akış)
   "Detay" seçiliyse alanın tamamı A, "Başlık" seçiliyse tamamı B olur.
   ========================================================================= */
@layer layout {
  /* Detay: yalnızca okuyucu kartı, tüm alanı kaplar */
  :root:not([data-newsmode="title"]) .feed-card { display: none; }
  :root:not([data-newsmode="title"]) .news-card { flex: 1 1 auto; min-height: 0; }

  /* Başlık: yalnızca akış listesi, tüm alanı kaplar */
  :root[data-newsmode="title"] .news-card { display: none; }
  :root[data-newsmode="title"] .feed-card { flex: 1 1 auto; min-height: 0; margin-top: 0; }
}

@layer components {
  /* alanın tamamına yayılan okuyucuda başlık ve gövdeye daha çok nefes */
  :root:not([data-newsmode="title"]) .news-feature {
    padding: calc(var(--t-news-head) * .7) calc(var(--t-news-head) * .72) calc(var(--t-news-head) * .45);
  }
  :root:not([data-newsmode="title"]) .news-head { -webkit-line-clamp: 3; }
}

/* Görünürlük kuralları components katmanında olmalı: kartların kendi
   `display: flex` tanımları da orada ve aksi hâlde bunları eziyor. */
@layer components {
  :root:not([data-newsmode="title"]) .feed-card { display: none; }
  :root[data-newsmode="title"]       .news-card { display: none; }
}

/* Başlık modunda satırlar iki satırlık başlığı almalı; 3,1 kat yükseklik
   üstveri satırının üstüne biniyordu. */
@layer components {
  :root[data-newsmode="title"] .feed-item {
    height: auto; min-height: calc(var(--t-feed-title) * 4.1);
    align-items: start;
  }
  :root[data-newsmode="title"] .feed-title { margin-top: 4px; }
}

/* =========================================================================
   46. ALARM VE ÇEVİRİ PANELLERİ
   Panelin tüm ölçüleri kendi punto birimine (em) bağlıdır; "T" menüsü
   punto değiştirince genişlik, yükseklik ve boşluklar birlikte ölçeklenir.
   ========================================================================= */
@layer tokens {
  :root { --t-panel: 12.5px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  .popover--panel {
    font-size: var(--t-panel);
    width: 29em; padding: 1.1em;
    max-height: min(calc(80 * var(--vh)), 54em); overflow-y: auto;
    background: var(--surface-2);
  }
  .popover--conv { width: 31.5em; }
  .popover--panel::-webkit-scrollbar { width: .58em; }
  .popover--panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }

  /* ————————————————— iki seçenekli anahtar (Alış / Satış) ————————————————— */
  .seg2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: .3em;
    padding: .3em; margin-bottom: 1em;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
  }
  .seg2 button {
    height: 2.7em; border-radius: var(--r-lg);
    font-size: 1em; font-weight: 800; color: var(--fg-muted);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .seg2 button:hover { color: var(--blue3); }
  .seg2 button[aria-checked="true"] { background: var(--blue2); color: #fff; }

  /* ————————————————— birim + güncel fiyat ————————————————— */
  .alarm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85em; align-items: end; }

  .popover--panel .field > label {
    font-size: .89em; font-weight: 800; color: var(--fg-muted);
    text-transform: none; letter-spacing: 0; margin-bottom: .4em;
  }

  .select-wrap { position: relative; }
  .select-wrap select {
    width: 100%; height: 3.3em; padding: 0 2.4em 0 .85em;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-xl);
    font-size: 1em; font-weight: 800;
    appearance: none;
  }
  .select-wrap select:focus { border-color: var(--blue3); }
  .sel-chev {
    position: absolute; right: .8em; top: 50%; transform: translateY(-50%);
    width: 1.07em; height: 1.07em; color: var(--fg-muted); pointer-events: none;
  }

  .cur-card {
    height: 4.4em; padding: .6em .85em;
    display: flex; flex-direction: column; justify-content: center; gap: .14em;
    background: linear-gradient(135deg, var(--blue2) 0%, #1f86b5 100%);
    border-radius: var(--r-xl); color: #fff;
  }
  .cur-label { font-size: .82em; font-weight: 700; opacity: .82; }
  .cur-value { font-size: 1.43em; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* ————————————————— hedef değer (eksi · değer · artı) ————————————————— */
  .stepper { display: grid; grid-template-columns: 3.7em 1fr 3.7em; gap: .57em; }
  .step {
    height: 3.85em; display: grid; place-items: center;
    background: var(--surface); color: var(--buy-fg);
    border: 1px solid var(--line-strong); border-radius: var(--r-xl);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .step:hover { background: var(--surface-3); border-color: var(--blue3); }
  .step:active { transform: translateY(1px); }
  .step svg { width: 1.5em; height: 1.5em; stroke-width: 2.4; }

  .step-box {
    position: relative; height: 3.85em;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
    display: flex; align-items: center;
  }
  .step-box input {
    width: 100%; height: 100%; padding: 0 2.4em 0 1em;
    background: none; border: 0; border-radius: var(--r-xl);
    font-size: 1.57em; font-weight: 800; color: var(--ink);
    text-align: center; font-variant-numeric: tabular-nums;
  }
  .step-box:focus-within { border-color: var(--blue3); }
  .step-unit {
    position: absolute; right: .9em; font-size: 1.07em; font-weight: 700; color: var(--fg-muted);
    pointer-events: none;
  }

  .alarm-hint {
    display: flex; align-items: center; gap: .5em;
    margin: .65em 0 .95em;
    font-size: .93em; font-weight: 800; color: var(--up-ink);
  }
  .alarm-hint svg { width: 1.14em; height: 1.14em; flex: none; }
  .alarm-hint[data-dir="down"] { color: var(--down-ink); }

  .popover--panel .btn-primary {
    height: 3.4em; display: flex; align-items: center; justify-content: center; gap: .64em;
    font-size: 1.07em; border-radius: var(--r-xl);
  }
  .popover--panel .btn-primary svg { width: 1.13em; height: 1.13em; }

  /* ————————————————— kurulu alarmlar ————————————————— */
  .alarm-head {
    display: flex; align-items: center; justify-content: space-between; gap: .7em;
    margin: 1.3em 0 .6em;
  }
  .alarm-title {
    display: flex; align-items: center; gap: .5em;
    font-size: 1em; font-weight: 800; color: var(--buy-fg);
  }
  .alarm-title svg { width: 1.14em; height: 1.14em; }
  .alarm-title b { color: var(--fg-muted); font-weight: 700; }

  .chip-row { display: flex; gap: .43em; }
  .chip {
    height: 1.86em; padding: 0 .72em; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line-strong);
    font-size: .82em; font-weight: 800; color: var(--fg-muted);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .chip:hover { color: var(--blue3); border-color: var(--blue3); }
  .chip[aria-checked="true"] { background: var(--blue2); border-color: var(--blue2); color: #fff; }

  .alarm-list { margin: 0; border-top: 0; padding-top: 0; max-height: none; overflow: visible; }
  .alarm-item {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .64em;
    padding: .72em; margin-bottom: .5em;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    font-size: .89em;
  }
  .alarm-item .a-name { font-weight: 800; color: var(--ink); }
  .alarm-item .a-sub  { font-size: .84em; font-weight: 700; color: var(--fg-muted); margin-top: .12em; }
  .alarm-item .a-target { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--buy-fg); }
  .alarm-item .alarm-del { width: 2.2em; height: 2.2em; display: grid; place-items: center;
    border-radius: var(--r-md); color: var(--fg-muted); }
  .alarm-item .alarm-del:hover { color: var(--down-ink); background: var(--down-bg); }
  .alarm-item .alarm-del svg { width: 1.1em; height: 1.1em; }
  .alarm-empty { font-size: .89em; color: var(--muted); padding: .45em 0; }

  /* "devamı için tıklayın" — kalan kayıtlar ayrı sayfada */
  .alarm-more {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    height: 2.9em; margin-top: .3em;
    background: var(--surface-3); border: 1px dashed var(--line-strong); border-radius: var(--r-xl);
    font-size: .93em; font-weight: 800; color: var(--buy-fg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .alarm-more:hover { background: var(--surface-2); border-color: var(--blue3); }
  .alarm-more svg { width: 1.14em; height: 1.14em; }

  /* ————————————————————————— çeviri ————————————————————————— */
  .conv-top {
    display: flex; align-items: stretch;
    background: var(--surface);
    border: 2px solid var(--blue2); border-radius: var(--r-xl);
    overflow: hidden; margin-bottom: 1em;
  }
  .conv-top input {
    flex: 1 1 auto; min-width: 0; height: 3.7em; padding: 0 .85em;
    background: none; border: 0; color: var(--ink);
    font-size: 1em; font-weight: 700;
  }
  .conv-top input::placeholder { color: var(--muted); font-weight: 600; }

  .conv-src { position: relative; flex: none; display: flex; }
  .conv-src select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 1;
  }
  .conv-src-face {
    display: flex; align-items: center; gap: .43em;
    padding: 0 .85em; background: var(--blue2); color: #fff;
    font-size: .93em; font-weight: 700; white-space: nowrap;
  }
  .conv-src-face b { font-weight: 800; }
  .conv-src-face svg { width: 1.07em; height: 1.07em; }
  .conv-src:hover .conv-src-face { background: var(--blue3); }

  .conv-label { font-size: .89em; font-weight: 800; color: var(--fg-muted); margin-bottom: .57em; }
  .conv-list { display: flex; flex-direction: column; gap: .64em; }
  .conv-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7em;
    padding: .78em .85em;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  }
  .conv-row .c-name { font-size: .93em; font-weight: 800; color: var(--buy-fg); }
  .conv-row .c-value {
    display: block; margin-top: .2em;
    font-size: 1.29em; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .conv-row .c-value[data-empty="true"] { color: var(--muted); }
  .conv-del {
    width: 2.7em; height: 2.7em; display: grid; place-items: center;
    background: var(--down-bg); color: var(--down-ink);
    border: 1px solid var(--down-line); border-radius: var(--r-lg);
    transition: background-color var(--dur-2) var(--ease);
  }
  .conv-del:hover { background: var(--down-line); }
  .conv-del svg { width: 1.07em; height: 1.07em; }

  .conv-add { display: flex; margin-top: .8em; }
  .conv-add-face {
    flex: 1; height: 3.4em;
    display: flex; align-items: center; justify-content: center; gap: .57em;
    background: var(--surface-3); color: var(--buy-fg);
    border: 1px dashed var(--line-strong); border-radius: var(--r-xl);
    font-size: 1em; font-weight: 800;
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .conv-add-face svg { width: 1.2em; height: 1.2em; }
  .conv-add-face:hover { border-color: var(--blue3); background: var(--surface-2); }

  /* ————————————————— arama ile birim seçici ————————————————— */
  .unit-picker {
    margin-top: .8em; padding: .72em;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
  }
  .picker-search { position: relative; display: flex; align-items: center; }
  .picker-search .search-icon {
    position: absolute; left: .72em; width: 1.14em; height: 1.14em;
    color: var(--fg-muted); pointer-events: none;
  }
  .picker-search input {
    width: 100%; height: 3em; padding: 0 2.5em 0 2.5em;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    font-size: 1em; font-weight: 700;
  }
  .picker-search input::placeholder { color: var(--muted); font-weight: 600; }
  .picker-search input:focus { border-color: var(--blue3); background: var(--surface); }
  .picker-clear {
    position: absolute; right: .5em; width: 2em; height: 2em;
    display: grid; place-items: center; border-radius: var(--r-md);
    color: var(--fg-muted);
  }
  .picker-clear:hover { color: var(--down-ink); background: var(--down-bg); }
  .picker-clear svg { width: 1em; height: 1em; }

  .unit-results {
    list-style: none; margin: .57em 0 0; padding: 0;
    max-height: 15em; overflow-y: auto;
  }
  .unit-results::-webkit-scrollbar { width: .5em; }
  .unit-results::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
  .unit-results li + li { margin-top: .3em; }
  .unit-results button {
    width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .57em;
    padding: .6em .72em; text-align: left;
    background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-lg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .unit-results button:hover, .unit-results button:focus-visible {
    background: var(--surface-3); border-color: var(--blue3);
  }
  .unit-results .u-name { font-size: .93em; font-weight: 800; color: var(--ink); }
  .unit-results .u-sub  { font-size: .8em; font-weight: 700; color: var(--fg-muted); margin-top: .1em; }
  .unit-results .u-add  { width: 1.86em; height: 1.86em; display: grid; place-items: center;
    background: var(--blue2); color: #fff; border-radius: var(--r-md); }
  .unit-results .u-add svg { width: .93em; height: .93em; stroke-width: 2.6; }
  .picker-empty { font-size: .89em; color: var(--muted); padding: .6em .2em 0; }
}

/* =========================================================================
   47. KURULU ALARMLAR SAYFASI
   Kayıtlar aşağı doğru uzayan tek sütun yerine sağa sola yayılan bir
   ızgarada durur; ızgara ölçülü genişlikte kalsın diye üst sınırı vardır.
   ========================================================================= */
@layer components {
  .alarm-page { flex: 1 1 auto; min-height: 0; padding: 18px 20px 20px; overflow-y: auto; }
  .alarm-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
  }
  .alarm-bar .chip-row { font-size: var(--t-crumb); }
  .alarm-bar-left { display: flex; align-items: center; gap: 10px; }
  .alarm-bar-label { font-size: var(--t-crumb); font-weight: 800; color: var(--fg-muted); }

  .alarm-board {
    display: grid; gap: 12px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(300px, calc(21 * var(--vw)), 380px)), 1fr));
    max-width: 1440px;
  }
  .alarm-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
    gap: 12px; padding: 14px;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-xl); box-shadow: var(--sh-1);
  }
  .alarm-card .ac-dir {
    width: 38px; height: 38px; display: grid; place-items: center; flex: none;
    background: var(--up-bg); color: var(--up-ink);
    border: 1px solid var(--up-line); border-radius: var(--r-lg);
  }
  .alarm-card[data-dir="down"] .ac-dir {
    background: var(--down-bg); color: var(--down-ink); border-color: var(--down-line);
  }
  .alarm-card .ac-dir svg { width: 19px; height: 19px; }
  .alarm-card .ac-name { font-size: var(--t-crumb); font-weight: 800; color: var(--ink); }
  .alarm-card .ac-target { white-space: nowrap; }
  .alarm-card .ac-sub  { font-size: calc(var(--t-crumb) * .82); font-weight: 700; color: var(--fg-muted); margin-top: 2px; }
  .alarm-card .ac-target {
    font-size: calc(var(--t-crumb) * 1.16); font-weight: 800; color: var(--buy-fg);
    font-variant-numeric: tabular-nums;
  }
  .alarm-card .ac-meta { font-size: calc(var(--t-crumb) * .78); font-weight: 700; color: var(--muted); margin-top: 2px; text-align: right; }
  .alarm-card .ac-del {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: var(--r-lg); color: var(--fg-muted);
  }
  .alarm-card .ac-del:hover { color: var(--down-ink); background: var(--down-bg); }
  .alarm-card .ac-del svg { width: 16px; height: 16px; }
  .alarm-card[data-fired="true"] { border-color: var(--blue3); }

  .alarm-page .empty-state { margin-top: 30px; }
}

/* =========================================================================
   48. TAM EKRAN KATMANLAR — çeviri tablosu ve kurulu alarmlar
   -------------------------------------------------------------------------
   Panelde altı birimden fazlası dar sütunda okunmuyordu. Altıyı geçince
   çeviri gövdesi olduğu gibi bu katmana taşınır ve 6×3 = 18'lik bir
   ızgaraya açılır. Aynı dil alarm listesi için de kullanılır.
   ========================================================================= */
@layer components {
  .sheet-back {
    position: fixed; inset: 0; z-index: calc(var(--z-pop) + 10);
    display: grid; place-items: center; padding: calc(3.2 * var(--vh)) calc(2.4 * var(--vw));
    background: color-mix(in srgb, var(--bg) 72%, rgba(0,0,0,.55));
    backdrop-filter: blur(3px);
    animation: sheet-in var(--dur-2) var(--ease-out);
  }
  @keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
  :root.sheet-open { overflow: hidden; }

  .sheet {
    width: min(1180px, 100%); max-height: 100%;
    display: flex; flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-2xl);
    box-shadow: 0 24px 68px rgba(3,28,40,.38);
    overflow: hidden;
  }
  .sheet--alarm { width: min(960px, 100%); }

  .sheet-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 18px;
    background: var(--surface); border-bottom: 1px solid var(--line-strong);
  }
  .sheet-title {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: calc(var(--t-crumb) * 1.24); font-weight: 800; color: var(--ink);
  }
  .sheet-title svg { width: 1.05em; height: 1.05em; color: var(--buy-fg); }
  .sheet-title b { color: var(--fg-muted); font-weight: 700; }

  .sheet-tools { display: flex; align-items: center; gap: 10px; }

  .sheet-link {
    display: inline-flex; align-items: center; gap: 7px;
    height: 2.6em; padding: 0 .9em;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    font-size: calc(var(--t-crumb) * .92); font-weight: 800; color: var(--buy-fg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .sheet-link:hover { background: var(--surface-2); border-color: var(--blue3); }
  .sheet-link svg { width: 1.05em; height: 1.05em; }

  .sheet-close {
    width: 2.4em; height: 2.4em; display: grid; place-items: center;
    font-size: calc(var(--t-crumb) * .92);
    background: var(--surface-3); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); color: var(--fg-muted);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .sheet-close:hover { background: var(--down-bg); color: var(--down-ink); border-color: var(--down-line); }
  .sheet-close svg { width: 1.1em; height: 1.1em; }

  .sheet-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 16px 18px 18px;
    font-size: var(--t-panel);
  }
  .sheet-body::-webkit-scrollbar { width: .6em; }
  .sheet-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
  .sheet-empty { font-size: calc(var(--t-crumb) * .95); color: var(--muted); padding: 10px 2px; }

  /* — çeviri gövdesi katmandayken: üstte tutar + ekleme, altta 6×3 ızgara — */
  .sheet .conv-body {
    display: grid; gap: 14px;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.9fr);
  }
  .sheet .conv-top { grid-column: 1; grid-row: 1; margin: 0; }
  .sheet .conv-add { grid-column: 2; grid-row: 1; margin: 0; }
  .sheet .conv-add-face { height: 100%; font-size: 1.15em; }
  .sheet .conv-label   { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .sheet .unit-picker  { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .sheet .unit-picker .unit-results { max-height: 17em; }
  .sheet .conv-note    { grid-column: 1 / -1; grid-row: 4; }
  .sheet .conv-list {
    grid-column: 1 / -1; grid-row: 5;
    display: grid; gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }
  .sheet .conv-row { padding: .85em .95em; }

  .conv-note {
    margin: .6em 0 0; font-size: .89em; font-weight: 700; color: var(--fg-muted);
  }
  .conv-note[data-full="true"] { color: var(--down-ink); }

  /* panelde katmana geçiş düğmesi */
  .popover--panel .sheet-link {
    display: flex; justify-content: center; width: 100%;
    height: 3em; margin-top: .8em; font-size: .95em;
    border-radius: var(--r-xl);
  }

  /* katmandaki alarm ızgarası panel puntosuna değil sayfa puntosuna uyar */
  .sheet--alarm .alarm-board { max-width: none; }
}

@media (max-width: 810px) {
  @layer components {
    .sheet .conv-body { grid-template-columns: minmax(0, 1fr); }
    .sheet .conv-top, .sheet .conv-add { grid-column: 1; }
    .sheet .conv-add { grid-row: 2; }
    .sheet .conv-label { grid-row: 3; }
    .sheet .unit-picker { grid-row: 4; }
    .sheet .conv-note { grid-row: 5; }
    .sheet .conv-list { grid-row: 6; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  }
}

/* =========================================================================
   49. DETAY TABLOSU — başlık puntosu veriyle aynı, sütunlar renkle ayrı
   -------------------------------------------------------------------------
   Başlıklar veriye göre çok küçük kalıyordu; artık aynı ölçekten besleniyor.
   Dört seviye sütunu (kapanış · başlangıç · en düşük · en yüksek) ana
   sayfadaki gibi dikey renk bandıyla ayrılır ki rakamlar karışmasın.
   ========================================================================= */
@layer tokens {
  :root { --t-detail-max: 38px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
  /* Yedek değer küçük: ölçümden önceki ilk kare taşmasın (bkz. 27. bölüm). */
  :root { --t-detail: min(var(--t-detail-max), var(--t-detail-auto, 11px)); }
}

@layer components {
  .market-table:not(.quote-matrix) thead th {
    height: calc(var(--t-detail) * 2.35);
    font-size: calc(var(--t-detail) * .92);
    font-weight: 800; color: var(--fg-strong);
    line-height: 1.14; white-space: normal;
  }
  .market-table:not(.quote-matrix) .th-btn {
    height: calc(var(--t-detail) * 2.35);
    padding: 0 calc(var(--t-detail) * .34);
    font-weight: 800;
  }
  .market-table:not(.quote-matrix) tbody td,
  .market-table:not(.quote-matrix) tbody th[scope="row"] {
    height: var(--t-detail-rowh, calc(var(--t-detail) * 1.62));
    padding: 0 calc(var(--t-detail) * .34);
    font-size: var(--t-detail);
  }
  .market-table:not(.quote-matrix) tbody th[scope="row"] .firm { font-size: calc(var(--t-detail) * .92); }
  .market-table:not(.quote-matrix) .buy,
  .market-table:not(.quote-matrix) .sell {
    height: calc(var(--t-detail) * 1.18);
    min-width: calc(var(--t-detail) * 4.5);
    font-size: calc(var(--t-detail) * .92);
  }
  .market-table:not(.quote-matrix) .change { font-size: calc(var(--t-detail) * .92); }
  .th-btn .sort { width: .62em; height: .78em; font-size: inherit; }

  /* — dikey renk bandı: seviye sütunları dönüşümlü — */
  .market-table td.lvl,
  .market-table th.lvl { color: var(--buy-fg); }
  .market-table td.lvl-b,
  .market-table th.lvl-b {
    color: var(--sell-fg);
    background: color-mix(in srgb, var(--sell-bg) 45%, transparent);
  }
  .market-table tbody tr:hover td.lvl-b { background: var(--sell-bg); }
  .market-table thead th.lvl-b { background: color-mix(in srgb, var(--sell-bg) 62%, var(--surface)); }

  /* AL / SAT etiketleri kaldırıldı — rozet yalnız rakamı taşır */
  .buy small, .sell small { display: none; }
  .buy, .sell { min-width: calc(var(--t-quote) * 4.6); }
}

/* =========================================================================
   50. DETAY SAYFASINDA ALAN PAYLAŞIMI
   -------------------------------------------------------------------------
   Büyük punto seçildiğinde üst bar, durum çubuğu ve kur kartları da
   büyüdüğü için tabloya kalan yükseklik azalıyordu — grafik kartı bu
   kademede bir miktar yer bırakır ki rakamlar küçülmesin.
   ========================================================================= */
@layer tokens {
  /* Grafik yüksekliği kısaldı: detay sayfasında kalan yer fiyat
     tablosuna gidiyor, punto oradan besleniyor. */
  :root { --chart-h: clamp(120px, calc(14 * var(--vh)), 168px); --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  .chart-card { height: var(--chart-h); }
}

/* =========================================================================
   51. KUR KARTI BAŞLIĞI VE ETİKETLERİ — okunur puntoya çıkarıldı
   -------------------------------------------------------------------------
   Başlık ("ALTIN TL GRAM - SATIŞ") ve dört alt etiket en küçük kademede
   bile seçilebilmeli; üst sınırlar buna göre yükseltildi, fiyatın aldığı
   yatay pay bir miktar geri verildi.
   ========================================================================= */
@layer tokens {
  :root { --tk-title-max: 18px; --tk-label-max: 15.5px; --tk-label-min: 13px; --tk-price-share: .43; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  .ticker-head {
    font-weight: 800; letter-spacing: .2px;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18);
  }
  .tk-stat dt { font-weight: 800; color: rgba(255,255,255,.94); }
}

/* =========================================================================
   52. TABLOLAR AYRILAN ALANI TAM DOLDURSUN
   -------------------------------------------------------------------------
   Satır sayısı azaldığında (firma ya da birim çıkarıldığında) tablonun
   altında boşluk kalıyordu. Tablo artık kutusunun yüksekliğini alır ve
   satırlar kalan yüksekliği paylaşır.
   ========================================================================= */
@layer components {
  .market-table { height: 100%; }
  .market-table tbody tr { height: auto; }
  .table-scroll > .market-table { min-height: 100%; }
}

/* =========================================================================
   53. BİRİM SEÇİCİ — arama yerine doğrudan liste
   ========================================================================= */
@layer components {
  .picker-title {
    margin: 0 0 .5em; font-size: .89em; font-weight: 800; color: var(--fg-muted);
  }
  .unit-results { max-height: 18em; }
  .sheet .unit-results {
    max-height: 16em;
    display: grid; gap: .4em;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
    align-content: start;
  }
  .sheet .unit-results li + li { margin-top: 0; }

  .conv-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; }
  .conv-note b { font-weight: 800; color: var(--fg-muted); }
  .conv-note b[data-full="true"] { color: var(--down-ink); }
  .conv-note .note-info {
    font-weight: 700; color: var(--muted);
    padding-left: .5em; border-left: 1px solid var(--line-strong);
  }
}

/* =========================================================================
   54. SAYFA İÇİ FİLTRELEME — Birim Düzenle · Firma Düzenle
   -------------------------------------------------------------------------
   Filtre üst bardan sayfa başlığının yanına indi. Liste sayfalarında iki
   seçenek (birim + firma), detay sayfasında yalnız firma bulunur.
   ========================================================================= */
@layer components {
  .filter-group {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    z-index: 5;
  }
  .analysis-top--chart .filter-group { position: static; transform: none; margin-left: 14px; }
  .analysis-top--chart { grid-template-columns: 330px 1fr auto; align-items: center; }

  .filter-cap {
    font-size: calc(var(--t-crumb) * .86); font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase; color: var(--fg-muted);
  }
  .filter-row { display: flex; gap: 8px; }

  .filter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: calc(var(--t-crumb) * 2.5); padding: 0 calc(var(--t-crumb) * .8);
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    font-size: calc(var(--t-crumb) * .94); font-weight: 800; color: var(--buy-fg);
    white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .filter-btn:hover { background: var(--surface-3); border-color: var(--blue3); }
  .filter-btn svg { width: 1.05em; height: 1.05em; }
  .filter-btn .chev { width: .8em; height: .8em; opacity: .7; }
  .filter-btn[aria-expanded="true"] { background: var(--blue2); border-color: var(--blue2); color: #fff; }

  .popover--pick {
    right: 0; left: auto; top: calc(100% + 8px);
    width: min(640px, calc(78 * var(--vw)));
    max-height: min(calc(64 * var(--vh)), 520px); overflow-y: auto;
  }
  .popover--pick::-webkit-scrollbar { width: 8px; }
  .popover--pick::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
  .pick-grid {
    display: grid; gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  }
  .pick-grid .opt { white-space: nowrap; }

  /* birim gizlendiğinde satır tablodan çıkar; ölçüm de onu saymaz */
  .quote-matrix tbody tr[data-unit-hidden] { display: none; }
}

/* =========================================================================
   55. ALARMLAR BİRİM BAZINDA KÜMELENİR
   -------------------------------------------------------------------------
   Onlarca kayıt alt alta dizilince okunmuyordu. Her birim tek satır olur
   ("Dolar / TL · 4 adet"); tıklanınca kendi kayıtları açılır.
   ========================================================================= */
@layer components {
  .alarm-board { align-items: start; }

  .agroup {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-xl); overflow: hidden;
  }
  .agroup-head {
    width: 100%; display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 10px; padding: 13px 14px;
    text-align: left;
    transition: background-color var(--dur-2) var(--ease);
  }
  .agroup-head:hover { background: var(--surface-3); }
  .ag-name  { font-size: var(--t-crumb); font-weight: 800; color: var(--ink); }
  .ag-count {
    font-size: calc(var(--t-crumb) * .84); font-weight: 800; color: #fff;
    background: var(--blue2); border-radius: var(--r-full);
    padding: .22em .7em;
  }
  .ag-chev { display: grid; place-items: center; color: var(--fg-muted); }
  .ag-chev svg { width: 1.1em; height: 1.1em; font-size: var(--t-crumb);
    transition: transform var(--dur-2) var(--ease); }
  .agroup-head[aria-expanded="true"] { background: var(--surface-3); }
  .agroup-head[aria-expanded="true"] .ag-chev svg { transform: rotate(180deg); }

  .agroup-body { border-top: 1px solid var(--line-soft); padding: 8px; }
  .aline {
    display: grid; grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: 10px;
    padding: 8px 6px;
  }
  .aline + .aline { border-top: 1px solid var(--line-soft); }
  .aline .al-dir {
    width: 30px; height: 30px; display: grid; place-items: center;
    background: var(--up-bg); color: var(--up-ink);
    border: 1px solid var(--up-line); border-radius: var(--r-md);
  }
  .aline[data-dir="down"] .al-dir {
    background: var(--down-bg); color: var(--down-ink); border-color: var(--down-line);
  }
  .aline .al-dir svg { width: 15px; height: 15px; }
  .aline .al-sub    { font-size: calc(var(--t-crumb) * .84); font-weight: 700; color: var(--fg-muted); }
  .aline .al-target {
    font-size: calc(var(--t-crumb) * 1.06); font-weight: 800; color: var(--buy-fg);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .aline .al-del {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: var(--r-md); color: var(--fg-muted);
  }
  .aline .al-del:hover { color: var(--down-ink); background: var(--down-bg); }
  .aline .al-del svg { width: 15px; height: 15px; }
}

/* =========================================================================
   56. FİRMA DÜZENLE — sıralama kullanıcıya bırakıldı
   -------------------------------------------------------------------------
   Firmalar tek sütunda yukarıdan aşağıya durur; satır sonundaki üç nokta
   o firmayı listede yukarı/aşağı taşır. Sıra tabloya ve grafiğe yansır.
   ========================================================================= */
@layer components {
  #filterMenu { width: min(360px, calc(76 * var(--vw))); }
  #firmOpts { display: block; }

  .firm-line {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-radius: var(--r-md);
  }
  .firm-line .opt { width: 100%; }
  .firm-more {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center; margin-right: 4px;
    border-radius: var(--r-md); color: var(--fg-muted);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .firm-more:hover { background: var(--surface-3); color: var(--blue3); }
  .firm-more[aria-expanded="true"] { background: var(--blue2); color: #fff; }
  .firm-more svg { width: 16px; height: 16px; }

  .firm-move {
    grid-column: 1 / -1;
    display: flex; gap: 6px; padding: 6px 8px 8px;
  }
  .firm-move button {
    flex: 1; height: 30px; border-radius: var(--r-md);
    background: var(--surface-3); border: 1px solid var(--line-strong);
    font-size: 11.5px; font-weight: 800; color: var(--buy-fg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .firm-move button:hover:not(:disabled) { border-color: var(--blue3); background: var(--surface-2); }
  .firm-move button:disabled { opacity: .38; cursor: default; }
}

/* =========================================================================
   57. KUR KARTI SATIRLARI — seviye ve canlı fiyat farkı
   -------------------------------------------------------------------------
   Sıra: En Yüksek · En Düşük · Açılış · Önceki Gün Kapanış. Her satırda
   değerin yanında canlı fiyata olan fark durur. Kart zemini zaten yeşil ya
   da kırmızı olduğu için fark, renkle değil işaretle okunur.
   ========================================================================= */
@layer components {
  .tk-stat dd { display: flex; align-items: baseline; justify-content: flex-end; gap: .5em; }
  .tk-val  { font-variant-numeric: tabular-nums; }
  /* Rozet küçüldü ve daraldı: satırın üçte birini alıyordu, asıl rakam
     okunmuyordu. Ölçüm katsayıları da buna göre (bkz. fitTickers). */
  .tk-diff {
    font-size: .68em; font-weight: 800; font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.78);
    background: rgba(0,0,0,.16); border-radius: var(--r-full);
    padding: .08em .34em; white-space: nowrap;
  }
  .tk-diff[data-dir="flat"] { opacity: .55; }
}

/* =========================================================================
   58. HABER KAPALIYKEN TABLO PUNTOSU SERBEST KALSIN
   -------------------------------------------------------------------------
   Haber paneli kapatıldığında tabloya hem genişlik hem yükseklik açılıyor;
   üst sınırlar ve satır oranı buna göre gevşetilir. Gerçek punto yine
   ölçümle bulunur, dolayısıyla taşma ya da "…" kısaltması olmaz.
   ========================================================================= */
@layer tokens {
  :root[data-news="off"] {
    --t-quote-max: 40px;  --t-unit-max: 27px;  --t-row-min: 1.42;
    --t-firm: 23px;       --t-side: 15px;
    --t-detail-max: 46px;
  }
}

/* =========================================================================
   59. ALARM LİSTESİ — solda birimler, sağda o birimin kayıtları
   -------------------------------------------------------------------------
   Birimler yan yana üç sütuna dağılınca okunmuyordu. Sol sütunda birimler
   alt alta durur; seçilen birimin kayıtları sağda açılır. İki sütun da
   ondan fazla satırda kendi içinde kayar.
   ========================================================================= */
@layer components {
  /* Kayıt ızgarası yerini iki sütunlu görünüme bıraktı. */
  .alarm-board { display: block; max-width: none; }

  .alarm-split {
    display: grid; gap: 14px; align-items: start;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  }

  .alarm-side {
    display: flex; flex-direction: column; gap: 6px;
    max-height: calc(var(--t-crumb) * 33); overflow-y: auto;
    padding-right: 4px;
  }
  .alarm-side::-webkit-scrollbar,
  .alarm-lines::-webkit-scrollbar { width: 7px; }
  .alarm-side::-webkit-scrollbar-thumb,
  .alarm-lines::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }

  .alarm-side .agroup-head {
    flex: none;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
  }
  .alarm-side .agroup-head[aria-selected="true"] {
    background: var(--surface-3); border-color: var(--blue3);
  }
  .alarm-side .agroup-head[aria-selected="true"] .ag-chev { color: var(--buy-fg); }

  .alarm-detail {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-xl); padding: 12px 14px 14px;
  }
  .ad-title {
    margin: 0 0 8px; font-size: var(--t-crumb); font-weight: 800; color: var(--buy-fg);
  }
  .alarm-lines {
    display: flex; flex-direction: column;
    max-height: calc(var(--t-crumb) * 30); overflow-y: auto;
  }
}

/* =========================================================================
   60. FİRMA SIRASI — üç noktadan sürükleyerek
   ========================================================================= */
@layer components {
  .firm-line {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-radius: var(--r-md);
    background: var(--surface-2);
  }
  .firm-grip {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center; margin-right: 4px;
    border-radius: var(--r-md); color: var(--fg-muted);
    cursor: grab; touch-action: none;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .firm-grip:hover { background: var(--surface-3); color: var(--blue3); }
  .firm-grip:active { cursor: grabbing; }
  .firm-grip svg { width: 16px; height: 16px; }

  #firmOpts.reordering .firm-line { transition: none; }
  .firm-line.dragging {
    background: var(--surface-3);
    box-shadow: 0 6px 18px rgba(3,28,40,.22);
    outline: 1px solid var(--blue3);
  }
  .firm-line.dragging .firm-grip { cursor: grabbing; color: var(--blue3); }
}

/* =========================================================================
   61. ALARM DETAYI — satır içeriğe göre daralsın
   -------------------------------------------------------------------------
   Sağ sütun tüm genişliği kaplayınca koşul ile hedef değer arasında geniş
   bir boşluk kalıyordu; sütun içeriğe oturur.
   ========================================================================= */
@layer components {
  .alarm-split {
    grid-template-columns: minmax(0, 320px) minmax(0, 560px);
    justify-content: start;
  }
  .aline { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .aline .al-sub { white-space: nowrap; }

  #firmOpts.reordering { user-select: none; -webkit-user-select: none; }
}

/* =========================================================================
   62. PUNTO, VERİ YOĞUNLUĞUYLA TERS ORANTILI OLSUN
   -------------------------------------------------------------------------
   Firma ya da birim çıkarıldıkça tabloya yer açılır; punto o ölçüde büyür.
   Veri eklendikçe küçülür. Gerçek değeri yine JS ölçer (`fitTable`), buradaki
   sınırlar yalnız üst tavanı belirler — eskiden tavan erken devreye girip
   büyümeyi kesiyordu.
   ========================================================================= */
@layer tokens {
  :root { --t-quote-max: 40px; --t-unit-max: 30px; --t-row-min: 1.62; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }

  :root[data-news="off"] {
    --t-quote-max: 52px; --t-unit-max: 34px; --t-row-min: 1.45; --t-side: 21px;
  }
}

/* =========================================================================
   63. KUR KARTI — bağlantı ve bilgilendirme satırı
   -------------------------------------------------------------------------
   Kart artık birimin detay sayfasına giden bir bağlantı. Alt satırda sabit
   bilgilendirme durur; kartlar otuz saniyede bir sonraki dörtlüye geçer.
   ========================================================================= */
@layer components {
  /* Kart bağlantı oldu; `inherit` sayfanın lacivert metin rengini içeri
     çekiyordu — kart yazıları beyaz kalmalı. */
  a.ticker { text-decoration: none; color: #fff; display: block; }
  a.ticker:hover { text-decoration: none; }

  /* Not, kartın alt kenarına oturur; istatistik ızgarası ona yer bırakır. */
  .tk-stats { padding-bottom: calc(var(--tk-label, 12px) * 1.05); }
  .tk-note {
    position: absolute; left: 10.6px; right: 10.6px; bottom: 5px;
    margin: 0;
    font-size: max(9px, calc(var(--tk-label, 12px) * .74));
    font-weight: 700; letter-spacing: .1px;
    color: rgba(255,255,255,.62);
    text-align: right;
  }
}

/* =========================================================================
   64. KUR KARTI ALT SATIRLARI DAHA OKUNUR OLSUN
   -------------------------------------------------------------------------
   Dört seviye satırı ("En Yüksek · En Düşük · Bugün Açılış · Önceki Gün
   Kapanış") ve yanlarındaki veriler küçük kalıyordu. Kart bir miktar
   yükseltilip bu satırların üst sınırı yukarı çekildi; gerçek punto yine
   `fitTickers` ölçümüyle bulunur, taşma olmaz.
   ========================================================================= */
/* Kart yüksekliği ekran yüksekliğine bağlandı ve tavanı indirildi: sabit
   yükseklikte şerit, fiyat tablosundan daha çok yer kaplıyordu. Artık uzun
   ekranda kartlar büyür, kısa ekranda tabloyu boğmaz. Punto yine
   `fitTickers` ölçümüyle bulunur. */
@layer tokens {
  /* Değer sütunu satırın %62'sini alır: rakam okunur olsun. */
  :root { --tk-value-share: .62; --tick-h: clamp(216px, calc(27 * var(--vh)), 300px); --tk-label-max: 20px; --tk-value-max: 24px; --tk-label-min: 11px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

@layer components {
  /* satır arası biraz kısılınca punto için yer açılır */
  .tk-stats { row-gap: calc(var(--tick-h) * .022); }
}

/* Etiket sıkışıp kırpılmasın: daralması gereken taraf veri hücresidir. */
@layer components {
  .tk-stat dt { flex: 0 0 auto; }
  .tk-stat dd { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   65. HABER KARTI — TV bandı düzeni
   -------------------------------------------------------------------------
   Üstte sabit "HABERLER" bandı, altında kaynak ve saat, sonra başlık.
   Başlık haber boyunca sabit kalır; gövde kutuya sığdığı kadar bölünür ve
   "SAYFA 1/2 → 2/2" şeridinden takip edilir. Sayfalar bitince sıradaki
   habere geçilir.
   ========================================================================= */
@layer components {
  .news-band {
    flex: none; margin: 0;
    padding: calc(var(--t-news-meta) * .42) 17px;
    background: var(--blue2); color: #fff;
    font-size: calc(var(--t-news-meta) * 1.06);
    font-weight: 800; letter-spacing: 1.2px;
  }

  .news-pagebar {
    flex: none;
    margin: 0 0 calc(var(--t-news-body) * .5);
    padding: calc(var(--t-news-meta) * .26) calc(var(--t-news-meta) * .6);
    background: var(--surface-3); border-left: 3px solid var(--blue2);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    font-size: calc(var(--t-news-meta) * .96);
    font-weight: 800; letter-spacing: .6px; color: var(--fg-muted);
  }
  :root[data-theme="dark"] .news-pagebar { color: var(--fg-2); }

  /* bant eklenince üst dolgu küçülür; başlık ile gövde arası da sıkışır */
  .news-feature { padding-top: calc(var(--t-news-meta) * .85); }
  .news-slide > .news-pagebar { flex: none; }
  .news-head { margin-top: calc(var(--t-news-head) * .38); }
}

/* =========================================================================
   66. SATIRLAR AYRILAN YÜKSEKLİĞİ TAM PAYLAŞSIN
   -------------------------------------------------------------------------
   Satır yüksekliği puntonun 2,5 katıyla sınırlıydı; tarayıcı çerçevesi
   kalkınca (tam ekran) ya da satır azalınca tablonun altında boşluk
   kalıyordu. Üst sınır kalktı: satırlar kutuyu bitirir, alt sınır yine
   okunabilirlik payıdır.
   ========================================================================= */
@layer tokens {
  :root {
    --t-row: max(
      calc(var(--t-quote) * var(--t-row-min, 1.85)),
      var(--t-row-auto, calc(var(--t-quote) * 2.5))
    );
  }
}

/* =========================================================================
   67. TAM EKRAN — punto bir kademe yukarı
   -------------------------------------------------------------------------
   Tam ekranda kazanılan yükseklik zaten ölçüme giriyor; üst sınırlar da
   açılınca punto gerçekten büyüyebiliyor. Gerçek değeri yine `fitTable`,
   `fitDetail` ve `fitTickers` ölçer, dolayısıyla taşma olmaz.
   ========================================================================= */
@layer tokens {
  /* Tam ekranda kazanılan yükseklik YALNIZ FİYAT TABLOSUNA verilir.
     Haber paneli ve kur kartları normal ölçüsünde kalır — eskiden ikisi
     de birden büyüyor, sayfa normalden bambaşka görünüyordu. Kart ve
     grafik yükseklikleri zaten görüntü alanına bağlı (`--vh`), yani tam
     ekranda kendiliğinden ölçülü biçimde büyürler. */
  :root[data-fullscreen="on"] {
    --t-unit-max: 37px;  --t-detail-max: 56px;
    --t-firm: 23px;      --t-side: 15.5px;
  }
}

/* =========================================================================
   68. TAM EKRANDA FİYAT SÜTUNLARINA YER AÇ
   -------------------------------------------------------------------------
   Tam ekran genişlik kazandırmıyor; fiyat puntosu genişliğe bağlı olduğu
   için tek yol hücre dolgusunu ve birim sütununu bir miktar daraltmak.
   `--q-pad` hem CSS dolgusunu hem `fitTable` hesabını besler.
   ========================================================================= */
@layer tokens {
  :root { --q-pad: .16; }
  :root[data-fullscreen="on"] { --q-pad: .18; }
}

@layer components {
  .quote-matrix td.q { padding: 0 calc(var(--t-quote) * var(--q-pad)); }
}

/* =========================================================================
   69. MARKA RENGİ — buluro.com gök mavisi
   -------------------------------------------------------------------------
   Palet laciverten marka tonuna (≈199°) çevrildi. Çevrim rengin BAĞIL
   PARLAKLIĞINI koruyarak yapıldı, dolayısıyla her metin/zemin çiftinin
   kontrast oranı olduğu gibi kaldı.

   Üst bar bir istisna: markanın kimliği orada okunuyor, bu yüzden
   parlaklığı korumak yerine markanın açık mavisine çekildi — beyaz yazının
   4,5:1 eşiğini geçtiği en açık tona kadar.
   ========================================================================= */
@layer tokens {
  :root {
    --hdr-1: #0d6b96;   /* beyaz yazı 5,9:1 */
    --hdr-2: #0f78a9;   /* beyaz yazı 4,9:1 */
    --hdr-3: #0e7099;   /* beyaz yazı 5,4:1 */
    --line-accent: #1e9bd7;
    --focus: #1188c2;
    --brand: #1e9bd7;   /* markanın imza mavisi — vurgu yüzeyleri için */
  }
  :root[data-theme="dark"] {
    --hdr-1: #0a5375;
    --hdr-2: #0c6288;
    --hdr-3: #0b5b7e;
    --line-accent: #2aa3dc;
    --focus: #4fbdea;
  }
}

@layer components {
  /* Marka sitesindeki ince çapraz çizgi dokusu üst barda da görünsün. */
  .header::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-linear-gradient(
      118deg,
      rgba(255,255,255,.07) 0 1px,
      rgba(255,255,255,0) 1px 22px
    );
    pointer-events: none;
  }
}

/* =========================================================================
   70. FİRMA BANTLARI — konuma göre iki ton
   -------------------------------------------------------------------------
   Sütunlar gözle ayrılsın diye başlık bandı dönüşümlü iki altın tonu alır:
   1., 3., 5. sütun koyu (Harem altını), 2. ve 4. onun açığı. Ton firmaya
   değil KONUMA bağlıdır — sıra değişse ya da bir firma gizlense bile
   dönüşüm bozulmaz; dağıtımı `paintFirmBands()` yapar.
   ========================================================================= */
@layer components {
  :root {
    --firm-band-a: #b8985a;   /* HAREMALTIN altını */
    --firm-band-b: #d8c6a4;   /* aynı tonun açığı */
    --firm-band-ink: #0e222c;
  }
  :root[data-theme="dark"] {
    --firm-band-a: #a8874a;
    --firm-band-b: #c9b183;
  }

  /* — fiyat matrisi başlığı — */
  .quote-matrix .firm-row th[data-band="a"] { background: var(--firm-band-a); }
  .quote-matrix .firm-row th[data-band="b"] { background: var(--firm-band-b); }
  .quote-matrix .firm-row th[data-band] .firm { color: var(--firm-band-ink); }

  /* renkli zeminde açık gri ayırıcı kaybolduğu için koyulaştırılır */
  .quote-matrix .firm-row th[data-band] { border-left-color: rgba(0,0,0,.18); }
  .quote-matrix .firm-row th[data-band]::after { background: rgba(0,0,0,.18); }

  /* — detay tablosu: satır başındaki ad rozet olur — */
  .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
    padding: .22em .62em; border-radius: var(--r-md);
  }
  /* koyu temanın `.firm` kuralından daha belirgin olmalı, yoksa altın
     zeminde beyaz yazı kalıyor */
  :root .market-table tbody tr[data-band="a"] .firm { background: var(--firm-band-a); color: var(--firm-band-ink); }
  :root .market-table tbody tr[data-band="b"] .firm { background: var(--firm-band-b); color: var(--firm-band-ink); }
}

/* =========================================================================
   71. REKLAM ALANI — figür kaldırıldı, metin tüm genişliği kullanır
   -------------------------------------------------------------------------
   Burası bir reklam yüzeyi; sağdaki figür yeri daraltıyordu. Slayt tek
   sütuna indi, başlık ve rozetler alanın tamamına yayılır, punto da buna
   göre bir üst kademeye çıkar.
   ========================================================================= */
@layer components {
  .ad-slide { grid-template-columns: minmax(0, 1fr); }

  .ad-cta-body {
    padding: clamp(12px, 4.5cqw, 28px) clamp(14px, 5cqw, 30px);
    gap: clamp(10px, 3.8cqw, 20px);
  }
  .ad-cta-title {
    font-size: clamp(16px, 8.8cqw, 44px);
    text-wrap: balance;
  }
  .ad-cta-badges img { height: clamp(26px, 10.5cqw, 52px); }
}

/* =========================================================================
   72. GRAFİK ANAHTARI — kapatınca tablo boşalan alana yayılır
   -------------------------------------------------------------------------
   Detay sayfasında grafik kartı sabit yükseklik tutuyor. Anahtar kapanınca
   kart ve zaman aralığı düğmeleri gizlenir; tablo esnek kutuda kalan tüm
   yüksekliği alır, punto da `fitDetail` ölçümüyle kendiliğinden büyür.
   ========================================================================= */
@layer components {
  .filter-check { gap: .55em; }
  .filter-check .fc-box {
    width: 1.15em; height: 1.15em; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-xs);
    background: var(--surface);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .filter-check .fc-box svg {
    width: .82em; height: .82em; color: #fff;
    opacity: 0; transform: scale(.6);
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .filter-check[aria-checked="true"] .fc-box { background: var(--blue2); border-color: var(--blue2); }
  .filter-check[aria-checked="true"] .fc-box svg { opacity: 1; transform: none; }
  .filter-check[aria-checked="true"] { background: var(--surface); color: var(--buy-fg); }

  :root[data-chart="off"] .chart-card,
  :root[data-chart="off"] .ranges { display: none; }
}

/* Grafik kapalıyken tabloya çok daha fazla yükseklik kalıyor: punto üst
   sınırı da açılsın ki alan boş boş büyümesin. Gerçek değeri yine
   `fitDetail` ölçer, taşma olmaz. */
@layer tokens {
  :root[data-chart="off"] { --t-detail-max: 52px; }

}

/* =========================================================================
   73. BAŞLIK HİZASI VE KUR KARTI SATIRI
   -------------------------------------------------------------------------
   Detay tablosunda iki-üç satıra saran başlıklar tek satırlıkların altına
   sarkıyordu; hepsi alt kenara hizalanınca ortak bir çizgide buluşurlar.
   Kur kartında etiket ile veri esnek kutuda üst üste binebiliyordu; ızgara
   düzeninde her biri kendi sütununda kalır.
   ========================================================================= */
@layer components {
  .market-table:not(.quote-matrix) thead th { vertical-align: bottom; }
  .market-table:not(.quote-matrix) .th-btn {
    height: auto; min-height: calc(var(--t-detail) * 2.35);
    align-items: flex-end; padding-bottom: .3em;
  }

  /* Veri sütunu tam ihtiyacı kadar yer alır, etiket kalanı kullanır ve
     gerekirse kendi içinde sarar. Böylece iki alan hiçbir zaman üst üste
     binmez; sığmadığı durumda punto fitTickers döngüsünde kısılır. */
  .tk-stat {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline; column-gap: .55em;
  }
  .tk-stat dt { min-width: 0; }
  .tk-stat dd { justify-self: end; }
}

/* Veri sütunu artık kendi genişliğini garanti ettiği için rakama daha çok
   pay verilebilir; etiket kalan yerde sarar. */
@layer tokens {
  :root { --tk-value-share: .56; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* Fark rozeti hapı yer kaplıyordu; rakama pay bırakmak için sade metne
   döndü. Yön yine işaretten (+ / −) okunur. */
@layer components {
  .tk-diff {
    font-size: .72em; padding: 0; background: none;
    color: rgba(255,255,255,.72);
  }
}

/* Etiket tabanı çok yüksekti: veri hücresinden yer çalıp rakamı küçültüyordu.
   Rakam önceliklidir; etiket bu tabanın altına inmez ama üstünü de zorlamaz. */
@layer tokens {
  :root { --tk-label-min: 13px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
}

/* =========================================================================
   74. KUR KARTI AYARLARI ŞERİDİN SOL ALTINDA
   -------------------------------------------------------------------------
   Ayar düğmesi üst bardan alınıp yönettiği kartların yanına indi. Şerit
   ekranın altında olduğu için liste yukarı doğru açılır.
   ========================================================================= */
@layer components {
  .bottom-row { position: relative; }

  .tk-settings {
    position: absolute; left: 0; bottom: 0; z-index: var(--z-raised);
    transform: translate(-2px, 2px);
  }
  .tk-settings .square {
    width: auto; height: 2.2em; padding: 0 .7em;
    display: inline-flex; align-items: center; gap: .4em;
    font-size: var(--t-crumb); font-weight: 800;
    background: var(--surface); color: var(--buy-fg);
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    box-shadow: var(--sh-2);
  }
  .tk-label { white-space: nowrap; }
  .tk-settings .square:hover { background: var(--surface-3); border-color: var(--blue3); }
  .tk-settings .square[aria-expanded="true"] { background: var(--blue2); border-color: var(--blue2); color: #fff; }
  .tk-settings .square .chev { display: none; }
  .tk-settings .square svg { width: 1.1em; height: 1.1em; }

  /* şerit en altta: liste yukarı açılır */
  .tk-settings .popover--pick {
    top: auto; bottom: calc(100% + 8px);
    left: 0; right: auto;
  }
}

/* =========================================================================
   75. BAŞLIKLAR ŞERİDİ — televizyon bandı düzeni
   -------------------------------------------------------------------------
   Eski akış kaynak rozeti + başlık + özet taşıyordu; geniş "foreks" rozeti
   metin sütununa taşıp yazıların üstüne biniyordu. Şerit sadeleşti: üstte
   BAŞLIKLAR bandı, altında yalnız başlıklar. Sıradaki başlık en üste girer,
   işaretlenir, öncekiler bir sıra aşağı kayar.
   ========================================================================= */
@layer components {
  .feed-band {
    flex: none; margin: 0;
    padding: calc(var(--t-feed-title) * .34) calc(var(--t-feed-title) * .7);
    background: var(--hdr-1); color: #fff;
    font-size: calc(var(--t-feed-title) * .92);
    font-weight: 800; letter-spacing: 1.1px;
  }

  .feed-list { display: flex; flex-direction: column; overflow: hidden; }

  .feed-item {
    position: relative; width: 100%;
    height: auto; min-height: 0; flex: 1 1 0;
    display: block; padding: calc(var(--t-feed-title) * .42) calc(var(--t-feed-title) * .62);
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .feed-item:last-child { border-bottom: 0; }
  .feed-item:hover { background: var(--surface-3); }

  /* işaretli başlık: dolu zemin, beyaz yazı */
  .feed-item.active { background: var(--hdr-1); }
  .feed-item.active .feed-title { color: #fff; }
  .feed-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand, #1e9bd7);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .feed-item.active::before { transform: scaleX(1); }

  .feed-title {
    display: block; margin: 0;
    font-size: var(--t-feed-title); font-weight: 800; line-height: 1.24;
    color: var(--fg-2);
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  }

  /* yeni giren satır yukarıdan süzülür */
  .feed-item[data-enter] { opacity: 0; transform: translateY(-6px); }
  .feed-item { transition: background-color var(--dur-2) var(--ease),
                           opacity var(--dur-3) var(--ease),
                           transform var(--dur-3) var(--ease-out); }
}

/* =========================================================================
   76. DAR EKRANDA HABER ALANI — metin kırpılmasın
   -------------------------------------------------------------------------
   Kartın masaüstündeki sabit yüksekliği telefonda gövdeye 60–70 piksel
   bırakıyordu; metin kutuya sığmayıp kırpılıyor, haber görünmez oluyordu.
   Dar ekranda sayfa zaten dikey kaydığı için kart içeriği kadar uzar,
   gövde tam metni gösterir ve sayfalama devre dışı kalır.
   ========================================================================= */
@media (max-width: 989px) {
  @layer components {
    .news-card {
      height: auto; min-height: 0; flex: 0 0 auto;
    }
    .news-feature { min-height: 0; overflow: visible; }
    .news-slide   { flex: 0 0 auto; }
    .news-body {
      flex: 0 0 auto; min-height: 0;
      overflow: visible; -webkit-line-clamp: none;
      display: block; width: 100%;
    }
    .news-pagebar { display: none; }

    /* başlıklar şeridi de içeriğine göre uzasın */
    .feed-card { height: auto; }
    .feed-item { flex: 0 0 auto; }
    .feed-title { -webkit-line-clamp: none; }
  }
}

/* =========================================================================
   77. BAŞLIKLAR ŞERİDİ — paylaşılan tasarımdaki nötr bant
   -------------------------------------------------------------------------
   Referans tasarımda bant ve işaretli satır marka mavisi değil, nötr koyu
   tonlarda. Sol kenardaki kısa çizgi her satırı ayırır, işaretli satır
   dolu zemin alır.
   ========================================================================= */
@layer components {
  :root {
    --feed-band-bg:   #4f5a63;   /* BAŞLIKLAR bandı */
    --feed-active-bg: #23384a;   /* işaretli başlık */
    --feed-rule:      #9aa7b1;   /* satır başındaki kısa çizgi */
  }
  :root[data-theme="dark"] {
    --feed-band-bg:   #33414c;
    --feed-active-bg: #12283a;
    --feed-rule:      #4a6070;
  }

  .feed-band { background: var(--feed-band-bg); }

  .feed-item { background: var(--surface); }
  .feed-item.active { background: var(--feed-active-bg); }
  .feed-item.active .feed-title { color: #fff; }

  /* sol kenar çizgisi hep görünür; işaretliyken marka rengine döner */
  .feed-item::before {
    top: calc(var(--t-feed-title) * .42); bottom: calc(var(--t-feed-title) * .42);
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--feed-rule);
    transform: none; opacity: .55;
    transition: background-color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .feed-item.active::before { background: var(--brand, #1e9bd7); opacity: 1; }

  .feed-item { cursor: pointer; }
  .feed-item:hover .feed-title { color: var(--blue3); }
  /* Sıradaki haber eskiden koyu zeminde beyaz yazıyla gösteriliyordu;
     81. bölümde zemin beyaza döndü ama bu satır beyaz kaldı: yeşil ışıklı
     haberin üzerine gelince başlık beyaz-üstü-beyaz olup kayboluyordu.
     Artık o satır da diğerleriyle aynı vurguyu alıyor. */
  .feed-item.active:hover .feed-title { color: var(--blue3); }
}

/* =========================================================================
   78. HABER DETAY PENCERESİ
   ========================================================================= */
@layer components {
  /* Pencere ekranın büyük bir bölümünü kaplar; metin uzun gelirse gövde
     kendi içinde kaydırılır, başlık şeridi ve kapatma tuşu sabit kalır. */
  .sheet--news {
    width: min(880px, 100%);
    height: min(860px, 100%);
  }
  .sheet--news .sheet-body {
    padding: 22px 26px 26px;
    font-size: calc(var(--t-panel) * 1.1);
  }

  .ns-meta {
    display: flex; align-items: center; gap: .7em; margin: 0 0 .8em;
    font-size: 1em; font-weight: 800; color: var(--fg-muted);
  }
  .ns-logo {
    width: 2em; height: 2em; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--feed-active-bg); color: #fff;
    font-size: .9em; font-weight: 800;
  }
  .ns-head {
    margin: 0 0 .7em;
    font-size: 1.9em; line-height: 1.2; font-weight: 800;
    letter-spacing: -.3px; color: var(--ink); text-wrap: balance;
  }
  :root[data-theme="dark"] .ns-head { color: var(--fg-strong); }
  .ns-body {
    margin: 0; font-size: 1.12em; line-height: 1.65;
    font-weight: 600; color: var(--fg-3);
  }
}

/* =========================================================================
   79. ALIŞ / SATIŞ BAŞLIKLARI — ortalı ve uzaktan okunur
   -------------------------------------------------------------------------
   Etiketler sütun ortasına gelmiyordu ve punto fiyatın yanında çok küçük
   kalıyordu; ölçek değeri yükseltilip hizalama sabitlendi.
   ========================================================================= */
@layer tokens {
  :root { --t-side: 17px; --t-axis-x: 11.5px; --t-axis-y: 11.5px; }
  :root[data-news="off"] { --t-side: 21px; }

}

@layer components {
  .quote-matrix .side-row th {
    text-align: center; padding: 0;
    letter-spacing: .2px;
  }
  /* .side sınıfı hücrenin kendisinde: display değiştirmek tablo düzenini
     bozuyordu, yalnız hizalama ve ağırlık verilir. */
  .side { text-align: center; font-weight: 800; }
}

/* Alış/Satış satırının yüksekliği kendi puntosunu izlesin; satır yüksekliğine
   bağlıyken büyüyen etiket kutuya sığmıyordu. */
@layer components {
  .quote-matrix .side-row th { height: calc(var(--t-side) * 1.5); }
  .quote-matrix .firm-row th { top: 0; }
  .quote-matrix .side-row th { top: calc(var(--t-row) * .86); }
}

/* =========================================================================
   80. ŞERİT SATIRLARI — kaynak ve saat geri geldi
   -------------------------------------------------------------------------
   Satır yeniden eski düzeninde: kaynak rozeti, kaynak adı + saat, başlık ve
   bir satırlık özet. Rozet artık her kaynakta aynı boyda dairedir; eski
   geniş "foreks" kutusu metin sütununa taşıp yazıların üstüne biniyordu.
   ========================================================================= */
@layer components {
  .feed-item {
    display: grid;
    grid-template-columns: calc(var(--t-feed-title) * 1.8) minmax(0, 1fr) auto;
    align-items: start;
    gap: calc(var(--t-feed-title) * .55);
    padding: calc(var(--t-feed-title) * .5) calc(var(--t-feed-title) * .62);
  }

  .src-icon {
    width: calc(var(--t-feed-title) * 1.8); height: calc(var(--t-feed-title) * 1.8);
    margin-top: 1px; flex: none;
    display: grid; place-items: center; border-radius: 50%;
    color: #fff; font-size: calc(var(--t-feed-title) * .85); font-weight: 800;
    overflow: hidden;
  }
  /* foreks de diğerleriyle aynı ölçüde: taşma yapan geniş kutu kalktı */
  .src-foreks {
    width: calc(var(--t-feed-title) * 1.8); justify-self: stretch;
    border-radius: 50%; box-shadow: none;
    background: #10202a; color: #fff;
    font-size: calc(var(--t-feed-title) * .85); font-weight: 800;
  }

  .feed-content { min-width: 0; display: block; }
  .feed-meta {
    display: flex; gap: calc(var(--t-feed-title) * .7);
    font-size: var(--t-feed-meta); font-weight: 800; color: var(--fg-muted);
  }
  .feed-title {
    margin-top: calc(var(--t-feed-title) * .18);
    -webkit-line-clamp: 2;
  }
  .feed-desc {
    display: block; margin-top: calc(var(--t-feed-title) * .1);
    font-size: var(--t-feed-desc); font-weight: 600; color: var(--fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .feed-bullet {
    width: calc(var(--t-feed-title) * .5); height: calc(var(--t-feed-title) * .5);
    margin-top: calc(var(--t-feed-title) * .35);
    border-radius: 50%; background: var(--brand, #1e9bd7); opacity: .35;
    transition: opacity var(--dur-2) var(--ease);
  }

  /* işaretli satırda tüm yazılar beyaz okunur */
  .feed-item.active .feed-meta,
  .feed-item.active .feed-desc { color: rgba(255,255,255,.82); }
  .feed-item.active .feed-bullet { opacity: 1; background: #fff; }
}

@media (max-width: 989px) {
  @layer components {
    .feed-title { -webkit-line-clamp: none; }
  }
}

/* Dar ekranda kart yüksekliği içerikle belirlenir. Aynı katmandaki sabit
   yükseklikle çakışmasın diye seçici bir kademe daha belirgin yazıldı. */
@media (max-width: 989px) {
  @layer components {
    :root .feed-card { height: auto; min-height: 0; }
    :root .feed-list { overflow: visible; }
    :root .news-card { height: auto; }
  }
}

/* =========================================================================
   81. ŞERİTTE İŞARET — koyu zemin yerine yanıp sönen yeşil ışık
   -------------------------------------------------------------------------
   Sıradaki haber artık satırı koyulaştırarak değil, satır sonundaki noktanın
   yeşil yanıp sönmesiyle belli olur; liste sakin kalır.
   ========================================================================= */
@layer components {
  .feed-item.active { background: var(--surface); }
  .feed-item.active .feed-title { color: var(--fg-2); }
  .feed-item.active .feed-meta,
  .feed-item.active .feed-desc { color: var(--fg-muted); }
  .feed-item.active::before { background: var(--live, #00a141); opacity: 1; }

  .feed-bullet { background: var(--fg-muted); opacity: .28; }
  .feed-item.active .feed-bullet {
    background: var(--live, #00a141); opacity: 1;
    box-shadow: 0 0 0 0 rgba(0,161,65,.55);
    animation: feed-blink 1.6s var(--ease) infinite;
  }
  @keyframes feed-blink {
    0%   { opacity: 1;   box-shadow: 0 0 0 0 rgba(0,161,65,.55); }
    70%  { opacity: .35; box-shadow: 0 0 0 .5em rgba(0,161,65,0); }
    100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(0,161,65,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .feed-item.active .feed-bullet { animation: none; }
  }
}

/* =========================================================================
   82. SON 24 SAAT — şerit altındaki bağlantı ve arşiv penceresi
   ========================================================================= */
@layer components {
  .feed-more {
    flex: none; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: calc(var(--t-feed-title) * .5);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-2);
    font-size: var(--t-feed-more); font-weight: 800; color: var(--buy-fg);
    transition: background-color var(--dur-2) var(--ease);
  }
  .feed-more:hover { background: var(--surface-3); }
  .feed-more svg { width: 1.05em; height: 1.05em; }

  /* Bağlantı öteki şerit yazılarından %20 büyük okunuyor. Yükseklik ve
     dolgu başka jetonlardan geldiği için kutu büyümüyor. */
  .feed-more { font-size: calc(var(--t-feed-more) * 1.2); }

  .sheet--arch { width: min(760px, 100%); }
  .arch-list { display: flex; flex-direction: column; gap: .45em; }
  .arch-item {
    width: 100%; display: grid; grid-template-columns: 2em minmax(0, 1fr);
    align-items: start; gap: .7em; text-align: left;
    padding: .65em .7em;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .arch-item:hover { background: var(--surface-3); border-color: var(--blue3); }
  .arch-item .src-icon { width: 2em; height: 2em; font-size: .9em; }
  .arch-content { min-width: 0; }
  .arch-meta {
    display: flex; gap: .7em; align-items: baseline;
    font-size: .82em; font-weight: 800; color: var(--fg-muted);
  }
  .arch-title {
    display: block; margin-top: .18em;
    font-size: 1em; font-weight: 800; line-height: 1.28; color: var(--ink);
  }
  :root[data-theme="dark"] .arch-title { color: var(--fg-strong); }
}

/* =========================================================================
   83. İPUCU BALONU
   -------------------------------------------------------------------------
   `data-tip` taşıyan denetimin üzerinde iki saniye durulunca açılır.
   Konumu JS hesaplar; burada yalnız görünüşü ve okun yönü tanımlıdır.
   ========================================================================= */
@layer components {
  .tip {
    position: fixed; z-index: calc(var(--z-pop) + 20);
    max-width: 280px; padding: .6em .75em;
    background: var(--feed-active-bg, #23384a); color: #fff;
    border-radius: var(--r-lg);
    font-size: calc(var(--t-crumb) * .92); font-weight: 600; line-height: 1.4;
    box-shadow: 0 10px 26px rgba(4, 24, 38, .3);
    pointer-events: none;
    opacity: 0; transform: translateY(-3px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .tip[data-open="true"] { opacity: 1; transform: none; }

  /* ok: balon hedefin altındaysa yukarı, üstündeyse aşağı bakar */
  .tip::after {
    content: ""; position: absolute; left: var(--tip-arrow, 50%);
    margin-left: -6px; border: 6px solid transparent;
  }
  .tip[data-below="true"]::after {
    bottom: 100%; border-bottom-color: var(--feed-active-bg, #23384a);
  }
  .tip[data-below="false"]::after {
    top: 100%; border-top-color: var(--feed-active-bg, #23384a);
  }

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

/* =========================================================================
   84. SLAYT ŞERİDİ — başlığın yanında sıradaki birim ve sayaç
   -------------------------------------------------------------------------
   Yalnız slayt açıkken görünür; kapalıyken DOM'da durur ama gizlidir.
   ========================================================================= */
@layer components {
  .title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

  .slide-next {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .3em .4em .3em .75em;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    font-size: calc(var(--t-crumb) * .95);
  }
  .slide-next[hidden] { display: none; }

  .sn-label {
    font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    font-size: .82em; color: var(--fg-muted);
  }
  .sn-name { font-weight: 800; color: var(--buy-fg); }
  .sn-count {
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg-muted);
    min-width: 4.2em; text-align: right;
  }
  .sn-skip {
    height: 2.1em; padding: 0 .8em; border-radius: var(--r-full);
    background: var(--blue2); color: #fff;
    font-size: .92em; font-weight: 800; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease);
  }
  .sn-skip:hover { background: var(--blue3); }
}

/* =========================================================================
   85. SLAYT ŞERİDİ BAŞLIĞIN YANINDA
   -------------------------------------------------------------------------
   Başlık sütunu 330px sabitti, şerit alt satıra kayıyordu. Sütun artık
   içeriği kadar genişleyebiliyor ve satır sarmıyor; şerit gizliyken sütun
   yine 330px'e oturduğu için zaman aralığı düğmeleri yerinden oynamıyor.
   ========================================================================= */
@layer components {
  .analysis-top--chart { grid-template-columns: minmax(330px, max-content) 1fr auto; }
  .title-row { flex-wrap: nowrap; }
  .title-row .title { white-space: nowrap; }
}

/* =========================================================================
   86. GRAFİĞİ BÜYÜT — grafik + tablo tek ekranda
   -------------------------------------------------------------------------
   Düğme grafik kartının sağ üstünde durur. Açılınca üst bar, durum çubuğu,
   sağ sütun, kur kartları ve footer gizlenir; ekranda yalnız başlık şeridi,
   grafik ve firma tablosu kalır. Dikey pay 1 / 4 / 5 oranındadır.
   ========================================================================= */
@layer components {
  .chart-card { position: relative; }

  .chart-max {
    position: absolute; top: 8px; right: 10px; z-index: 4;
    height: calc(var(--t-crumb) * 2.1); padding: 0 .7em;
    display: inline-flex; align-items: center; gap: .45em;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface); color: var(--fg-muted);
    font-size: calc(var(--t-crumb) * .92); font-weight: 800; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .chart-max:hover { background: var(--surface-2); color: var(--blue3); border-color: var(--blue3); }

  /* Düğme mutlak konumlu: dar ekranda gösterge adları altına girmesin diye
     gösterge satırı sağdan düğme kadar pay bırakır (ortalama da onunla
     birlikte sola kayar). */
  .chart-card .legend { padding-right: calc(var(--t-crumb) * 11); }
  .chart-max .icon { width: 1.15em; height: 1.15em; }
  .chart-max .i-off { display: none; }
  .chart-max[aria-pressed="true"] .i-on  { display: none; }
  .chart-max[aria-pressed="true"] .i-off { display: inline-flex; }
  .chart-max[aria-pressed="true"] span.i-off { display: inline; }
}

/* Büyütülmüş düzen `utilities` katmanındadır: kısa ekranlarda normal akışa
   dönen medya kuralları `components` katmanında yaşıyor ve özgüllük ne
   olursa olsun `layout`u yeniyordu. En son katman her durumda kazanır. */
@layer utilities {
  /* Üst bar ve footer marka bandına dönüşür (bkz. 89); burada yalnız
     durum çubuğu, kur kartları ve reklam alanı kalkar. */
  :root[data-chartmax="on"] .status,
  :root[data-chartmax="on"] .bottom-row,
  :root[data-chartmax="on"] .ad-slot { display: none; }

  /* Kısa ekranda sayfa normal akışa dönüyor; büyütülmüş görünüm her
     durumda ekranı kaplamalı, o yüzden kabuk burada yeniden kurulur. */
  :root[data-chartmax="on"] body {
    height: calc(100 * var(--vh)); overflow: hidden;
    display: flex; flex-direction: column;
  }
  :root[data-chartmax="on"] .main {
    display: grid; grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto; min-height: 0;
    margin: 0; padding: 0 22px 12px; gap: 0;
    max-width: none; align-items: stretch;
  }
  /* Tek satır, tam yükseklik: normal düzenin ikinci ızgara satırı burada
     boş kalıp yüksekliğin üçte birini yutuyordu. */
  :root[data-chartmax="on"] .main { grid-template-rows: minmax(0, 1fr); }
  :root[data-chartmax="on"] .left {
    display: flex; flex-direction: column; min-height: 0;
    grid-row: 1; grid-column: 1; height: 100%;
  }

  /* 1 birim başlık · 4 birim grafik · 5 birim tablo */
  :root[data-chartmax="on"] #pageMain {
    display: grid; grid-template-rows: 1fr 4fr 5fr; gap: 12px;
    flex: 1 1 auto; min-height: 0;
  }
  :root[data-chartmax="on"] .analysis-top {
    height: auto; min-height: 0; align-self: stretch; align-items: center;
    padding-bottom: 0; border-bottom: 0;
  }
  :root[data-chartmax="on"] .chart-card,
  :root[data-chartmax="on"] .table-card {
    height: auto; max-height: none; min-height: 0; margin: 0;
  }
  :root[data-chartmax="on"] .table-card .table-scroll { max-height: none; }

  /* Grafik kapalıyken kart DOM'dan düşer (display:none), ızgarada iki öğe
     kalır: üçüncü satır tanımlı bırakılırsa tablo boş ikinci satıra düşüyor.
     Bu yüzden satır sayısı da ikiye iner; tablo grafiğin payını devralır. */
  :root[data-chartmax="on"][data-chart="off"] #pageMain { grid-template-rows: 1fr 9fr; }
}

/* =========================================================================
   87. GERİ TUŞU — filtre başlığının üstünde
   -------------------------------------------------------------------------
   Grafik büyütülünce üst menü küçülüyor; gezinme burada da mümkün kalsın.
   ========================================================================= */
/* Yalnız büyütülmüş görünümde görünür: normal sayfada üst menü zaten
   duruyor, orada ikinci bir geri tuşu işe yaramıyordu. */
@layer components {
  .back-btn { display: none; }

  :root[data-chartmax="on"] .back-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: calc(var(--t-crumb) * 1.9); padding: 0 .7em 0 .5em;
    margin-bottom: 4px;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface); color: var(--fg-strong);
    font-size: calc(var(--t-crumb) * .92); font-weight: 800;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .back-btn .icon { width: 1.05em; height: 1.05em; }
  .back-btn:hover { background: var(--surface-2); color: var(--blue3); border-color: var(--blue3); }
}

/* =========================================================================
   88. GRAFİK EKSENİ PUNTOSU
   -------------------------------------------------------------------------
   Saat ve fiyat etiketleri sabit 11px'ti; artık boyut seçimiyle birlikte
   büyüyor, büyütülmüş görünümde ise tablo verisiyle aynı puntoya çıkıyor.
   ========================================================================= */
/* Saat etiketleri (x) veriyle aynı puntoya çıkar; fiyat etiketleri (y)
   daha ölçülü büyür — yoksa grafiğin sol payını yiyip alanı daraltırlar.
   `buluro.chart.js` her iki payı da bu jetonlardan hesaplar. */
@layer tokens {
  :root { --t-axis-x: 11.5px; --t-axis-y: 11.5px; }

  :root[data-chartmax="on"] {
    --t-axis-x: var(--t-detail);
    --t-axis-y: clamp(13px, calc(var(--t-detail) * .58), 26px);
  }
}

@layer components {
  .chart-axis   { font-size: var(--t-axis-y); }
  .chart-axis-x { font-size: var(--t-axis-x); }
}

/* =========================================================================
   89. BÜYÜTÜLMÜŞ GÖRÜNÜM — marka bantları, banner, büyük tablo
   -------------------------------------------------------------------------
   Ekranın üstünde ve altında ana sayfadaki marka bandı durur; sağ altta
   uygulama banner'ı yer alır. Tüm renkler jetonlardan geldiği için açık ve
   koyu tema burada da geçerlidir; tema anahtarı üst bantta açık kalır.
   ========================================================================= */
@layer utilities {
  /* —————————————————————— üst marka bandı —————————————————————— */
  /* Bant, kırıntı yolu ve Geri tuşunun başladığı yere kadar iner; üstteki
     beyaz şerit kapanır. Kazanılan yükseklik `.main` üst dolgusundan
     alındığı için içerik yerinden oynamaz. */
  :root[data-chartmax="on"] .header {
    display: flex; position: static;
    height: 78px; padding-inline: 22px;
  }
  :root[data-chartmax="on"] .nav { display: none; }
  :root[data-chartmax="on"] .logo { margin-right: 0; }
  :root[data-chartmax="on"] .top-actions { display: flex; margin-left: auto; gap: 0; }
  :root[data-chartmax="on"] .top-actions > * { display: none; }
  :root[data-chartmax="on"] .top-actions > .switch-btn { display: inline-flex; }

  /* —————————————————————— alt marka bandı —————————————————————— */
  :root[data-chartmax="on"] .footer {
    display: flex; align-items: center;
    height: 108px; margin: 0; padding: 0 22px;
    border-top: 0;
    color: var(--hdr-fg);
    font-size: 12px; font-weight: 700;
    background:
      radial-gradient(120% 180% at 12% -40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
      linear-gradient(90deg, var(--hdr-1) 0%, var(--hdr-2) 55%, var(--hdr-3) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  :root[data-chartmax="on"] .footer .links { display: none; }

  /* Durum çubuğu bu görünümde gizli; yasal uyarı alt banda taşınır. */
  .footer-notice { display: none; }
  :root[data-chartmax="on"] .footer-notice {
    display: inline-flex; align-items: center; gap: .5em;
    margin-left: 2.4em;
    font-size: 13px; font-weight: 700; color: var(--hdr-fg);
  }
  :root[data-chartmax="on"] .footer-notice .ico {
    display: grid; place-items: center;
    width: 1.5em; height: 1.5em; flex: none;
    border-radius: 50%; background: rgba(255,255,255,.16);
  }
  :root[data-chartmax="on"] .footer-notice .icon { width: .95em; height: .95em; }

  /* ————————————— sağ altta uygulama banner'ı ————————————— */
  /* `.right` gizlenirse çocukları da gizlenir; `display: contents` ile
     kutu ortadan kalkar, yalnız banner görünür kalır. */
  :root[data-chartmax="on"] .right { display: contents; }
  :root[data-chartmax="on"] .right > * { display: none; }
  :root[data-chartmax="on"] .app-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) 104px;
    position: fixed; right: 22px; bottom: 10px; z-index: 30;
    width: 404px; height: 88px;
    border-radius: var(--r-lg);
  }
  :root[data-chartmax="on"] .app-cta-body { padding-left: 16px; gap: 9px; }
  :root[data-chartmax="on"] .app-cta-title { font-size: 15px; letter-spacing: .5px; }
  :root[data-chartmax="on"] .app-cta-badges { gap: 10px; }
  :root[data-chartmax="on"] .app-cta-badges img { height: 36px; }
  :root[data-chartmax="on"] .app-cta-art { width: 104px; }
}

/* Büyütülmüş görünümde tablo puntosu — tam ekranın asıl amacı budur.
   Gerçek değeri yine `fitDetail` ölçer; bunlar yalnız üst sınırlardır. */
@layer tokens {
  :root[data-chartmax="on"]                  { --t-detail-max: 38px; --t-firm: 22px; }

  :root[data-chartmax="on"][data-chart="off"] { --t-detail-max: 64px; --t-firm: 29px; }

}

/* =========================================================================
   90. SÜTUN BAŞLIĞI ALT NOTU — "(Satış)"
   -------------------------------------------------------------------------
   Dört seviye sütunu satış fiyatını gösterir. Not, başlığın altına kendi
   satırında düşer; `flex-basis: 100%` sarma yaparak yeni satır açar.
   ========================================================================= */
@layer components {
  .th-btn { flex-wrap: wrap; height: auto; min-height: 36px; padding-block: 4px; }

  .th-note {
    flex-basis: 100%;
    margin-top: .12em;
    font-size: .82em; font-weight: 700; letter-spacing: 0;
    color: var(--fg-muted); text-transform: none;
  }
}

/* =========================================================================
   91. UYGULAMA KARTI BAŞLIĞI — kutusuna göre ölçeklenir
   -------------------------------------------------------------------------
   Arial, Inter'den geniş: "UYGULAMAYI İNDİRİN" sabit puntoda kutuya
   sığmayıp üç noktayla kesiliyordu. Punto artık kartın genişliğine bağlı,
   üst sınırı yine boyut jetonu belirliyor.
   ========================================================================= */
@layer components {
  .app-cta { container-type: inline-size; }
  .app-cta-title { font-size: min(var(--t-cta-title), 4.6cqw); }
}

/* =========================================================================
   92. ÖLÇÜM BİTENE KADAR GİZLE
   -------------------------------------------------------------------------
   `fitTable` / `fitDetail` / `fitTickers` ancak ilk boyamadan sonra
   çalışabiliyor (ölçüm için düzenin kurulmuş olması gerek). Ölçülen alanlar
   o âna kadar görünmezdir; böylece önce yanlış punto, sonra düzeltme
   şeklinde bir geçiş yaşanmaz. İşaret `<html data-fit="wait">` olarak
   kabuğun baş kısmında konur, ilk ölçüm biter bitmez kalkar; betik hiç
   çalışmazsa 800 ms'lik zaman aşımı içeriği yine de açar.
   ========================================================================= */
@layer utilities {
  :root[data-fit="wait"] .table-scroll,
  :root[data-fit="wait"] .ticker { visibility: hidden; }
}

/* =========================================================================
   93. MOBİL — telefon ve tablet
   -------------------------------------------------------------------------
   Kurallar `utilities` katmanında: masaüstü düzenini kuran her şeyi
   (tokens / layout / components) bilerek ezerler.

   Temel karar: mobilde punto ÖLÇÜMLE değil, sabit ve okunur değerlerle
   belirlenir. Dar ekranda on fiyat sütununu sığdırmaya çalışmak yazıyı
   okunmaz hâle getiriyordu; onun yerine tablo yatay kaydırılır ve ilk
   sütun (birim / firma) yapışkan kalır — kaydırırken hangi satıra
   bakıldığı hep görünür. `buluro.tools.js` bu genişliklerde tablo
   ölçümünü atlar ve jetonları temizler.
   ========================================================================= */
@media (max-width: 810px) {
  @layer utilities {

    /* ————————————————————————— kabuk ————————————————————————— */
    html, body { height: auto; overflow-x: hidden; }
    body { display: block; overflow-y: visible; }
    .main {
      display: block; padding: 12px 14px 0; margin: 0; gap: 0;
      max-width: none;
    }
    .left, .right { display: block; min-height: 0; }

    /* ————————————————————————— üst bar ————————————————————————— */
    .header {
      position: static; height: auto; min-height: 0;
      padding: 8px 14px 0; gap: 8px;
      display: flex; flex-wrap: wrap; align-items: center;
    }
    .logo { font-size: 22px; margin-right: auto; }

    .top-actions { margin-left: 0; gap: 6px; flex-wrap: nowrap; }
    .top-actions .top-btn span { display: none; }
    .top-btn, .top-actions .square {
      min-width: 42px; height: 42px; padding-inline: 10px;
    }
    .news-seg { order: 4; }
    .switch-btn { height: 38px; }

    /* menü ikinci satırda, yatay kaydırmalı şerit */
    .nav {
      order: 5; width: 100%; height: 46px; gap: 2px;
      overflow-x: auto; overscroll-behavior-x: contain;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a {
      flex: none; height: 46px; padding-inline: 12px;
      font-size: 13px; display: inline-flex; align-items: center;
    }

    /* ——————————————————————— durum çubuğu ——————————————————————— */
    .status {
      position: static; height: auto; min-height: 0;
      padding: 8px 14px; gap: 8px 18px;
      flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
      scrollbar-width: none;
    }
    .status::-webkit-scrollbar { display: none; }
    .status .fullscreen { display: none; }

    /* ———————————————————— sayfa başlığı + filtre ———————————————————— */
    .analysis-top,
    .analysis-top--plain,
    .analysis-top--chart {
      height: auto; grid-template-columns: minmax(0, 1fr);
      gap: 10px; padding-bottom: 12px;
    }
    .title-row { flex-wrap: wrap; }
    .title { font-size: 24px; white-space: normal; }
    .subtitle { font-size: 13px; }

    .filter-group {
      position: static; transform: none;
      align-items: stretch; width: 100%; margin-left: 0;
    }
    .filter-cap { text-align: left; }
    .filter-row { flex-wrap: wrap; gap: 8px; }
    .filter-btn, .filter-check { min-height: 44px; }
    .back-btn { min-height: 40px; }

    .ranges {
      justify-content: flex-start; flex-wrap: nowrap;
      overflow-x: auto; padding-top: 0; scrollbar-width: none;
    }
    .ranges::-webkit-scrollbar { display: none; }
    .range-btn { flex: none; min-width: 64px; min-height: 40px; }

    /* ————————————————————————— grafik ————————————————————————— */
    .chart-card { height: 240px; }
    .legend { height: auto; gap: 12px; flex-wrap: wrap; padding: 2px 0 6px; }
    .chart-card .legend { padding-right: 0; }
    .chart-max { display: none; }          /* büyütme masaüstü/TV özelliği */

    /* —————————————————— tablolar: yatay kaydırma —————————————————— */
    .table-card, .table-card--tall {
      height: auto; max-height: none; min-height: 0;
    }
    .table-scroll {
      overflow-x: auto; overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    /* Genişliği hücreler belirler: sabit bir tablo genişliği rakamları
       birbirine bindiriyordu. Her fiyat sütunu kendi metnine yetecek
       kadar yer ister, birim sütunu en uzun ada göre uzar; tablo da
       toplam kadar geniş olur ve yatay kaydırılır. */
    .quote-matrix { min-width: 100%; width: max-content; }
    .market-table:not(.quote-matrix) { min-width: 100%; width: max-content; }
    .quote-matrix td.q { min-width: 72px; }
    .market-table:not(.quote-matrix) td { min-width: 86px; }
    .market-table:not(.quote-matrix) thead th { min-width: 86px; }

    /* sabit puntolar — ölçüm mobilde devre dışı */
    .quote-matrix td.q { font-size: 14px; padding: 0 8px; height: 46px; }
    .quote-matrix .unit .row-link { font-size: 14px; }
    .quote-matrix tbody th.unit { height: 46px; }
    .quote-matrix .firm { font-size: 13px; }
    .quote-matrix .unit-head, .quote-matrix .unit {
      width: auto; min-width: 148px; padding-right: 12px;
    }
    .quote-matrix .firm-row th { height: 34px; font-size: 13px; }
    .quote-matrix .firm-row th.unit-head { font-size: 19.5px; }
    .quote-matrix .side-row th { top: 34px; height: 24px; font-size: 11px; }
    .quote-matrix .unit .fav { width: 26px; height: 26px; }
    .quote-matrix .unit .fav svg { width: 15px; height: 15px; }

    .market-table:not(.quote-matrix) td,
    .market-table:not(.quote-matrix) tbody th[scope="row"] {
      font-size: 14px; height: 48px;
    }
    .market-table:not(.quote-matrix) thead th { font-size: 12px; }
    .market-table:not(.quote-matrix) tbody th[scope="row"] .firm { font-size: 13px; }
    .th-note { font-size: 10px; }

    /* ilk sütun kaydırırken yerinde kalsın */
    .quote-matrix .unit-head,
    .quote-matrix tbody th.unit,
    .market-table:not(.quote-matrix) thead th:first-child,
    .market-table:not(.quote-matrix) tbody th[scope="row"] {
      position: sticky; left: 0; z-index: 3;
      background: var(--surface);
      box-shadow: 1px 0 0 var(--line-soft);
    }
    .quote-matrix .firm-row th:first-child,
    .quote-matrix .side-row th:first-child { z-index: 5; }
    .quote-matrix tbody tr:hover th.unit { background: var(--surface-2); }

    /* ———————————————————————— kur kartları ———————————————————————— */
    .bottom-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px; margin-top: 14px;
    }
    :root { --tick-h: 196px; }
    .tk-settings { transform: translate(0, 6px); }

    /* ————————————————————————— sağ sütun ————————————————————————— */
    .right { margin-top: 16px; }
    .news-card, .feed-card { height: auto; min-height: 0; }
    .app-cta { height: 104px; }
    /* Mobilde başlık kırpılmasın, iki satıra sarsın. */
    .app-cta-title {
      white-space: normal; overflow: visible; text-overflow: clip;
      font-size: 14px; line-height: 1.25;
    }
    .ad-slot { margin-top: 14px; }
    /* Banner alanı 3:2 — kreatif 2400×1600, masaüstündeki oranla aynı. */
    .ad-slot > .ad-slider { height: auto; aspect-ratio: 3 / 2; align-self: center; }

    /* Reklam kartı: kutu geniş ama alçak olduğu için genişliğe bağlı
       punto (8.8cqw) taşıyordu — başlık üç satıra sarıp mağaza
       rozetlerini kartın dışına itiyordu. Alçak kutuda kısılıyor. */
    .ad-cta-title { font-size: clamp(15px, 5.2cqw, 23px); line-height: 1.2; }
    .ad-cta-body { padding: clamp(10px, 3cqw, 15px) clamp(12px, 3.6cqw, 18px);
                   gap: clamp(6px, 2cqw, 10px); }
    .ad-cta-badges img { height: clamp(22px, 6.4cqw, 30px); }
    .right > .ad-image { margin-top: 14px; }

    /* ————————————————————— katmanlar tam ekran ————————————————————— */
    .sheet-back { padding: 0; }
    .sheet, .sheet--news, .sheet--alarm {
      width: 100%; height: 100%; max-height: 100%;
      border-radius: 0; border: 0;
    }
    .sheet--news .sheet-body { padding: 16px 16px 22px; font-size: 15px; }
    .ns-head { font-size: 1.5em; }

    /* Açılır menüler mobilde alt sayfa olur.
       Düğmeye göre konumlanan panel, düğme sağ kenara yakınken ekranın
       soluna taşıyordu (sol kenar eksiye düşüyordu). Sabit konumlanmış,
       iki yandan kenar boşluklu bir katman her ekran genişliğinde sığar. */
    .menu .popover {
      position: fixed; inset: auto 8px 8px 8px;
      width: auto; max-width: none; min-width: 0;
      max-height: calc(78 * var(--vh)); overflow-y: auto;
      transform: none; margin: 0;
    }
    .menu .popover::before, .menu .popover::after { display: none; }   /* ok ucu */
    .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ————————————————————————— slayt şeridi ————————————————————————— */
    .slide-next { flex-wrap: wrap; font-size: 12px; }
    .sn-skip { min-height: 36px; }

    /* ————————————————————————— alt bilgi ————————————————————————— */
    .footer {
      height: auto; padding: 16px 14px; margin-top: 18px;
      flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .footer .links { margin: 0; gap: 14px 18px; flex-wrap: wrap; }

    /* dokunma hedefleri */
    .th-btn { min-height: 40px; }
    .sheet-close, .circle-btn { min-width: 42px; min-height: 42px; }

    /* Çentikli telefonlar: içerik güvenli alanın dışına taşmasın. */
    .header, .status, .main, .footer {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    .footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .menu .popover { bottom: max(8px, env(safe-area-inset-bottom)); }
    .sheet { padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* ————————————————————————— dar telefon ————————————————————————— */
@media (max-width: 504px) {
  @layer utilities {
    .main { padding-inline: 10px; }
    .header, .status, .footer { padding-inline: 10px; }
    .logo { font-size: 20px; }
    .title { font-size: 21px; }
    .news-seg { display: none; }

    .bottom-row { grid-template-columns: minmax(0, 1fr); }
    :root { --tick-h: 184px; }

    .quote-matrix .unit-head, .quote-matrix .unit { min-width: 136px; }
    .quote-matrix td.q { font-size: 13px; padding: 0 7px; min-width: 66px; }
    .quote-matrix .unit .row-link { font-size: 13px; }
    .market-table:not(.quote-matrix) td,
    .market-table:not(.quote-matrix) thead th { min-width: 78px; }
    .market-table:not(.quote-matrix) td,
    .market-table:not(.quote-matrix) tbody th[scope="row"] { font-size: 13px; }

    .chart-card { height: 210px; }
    .app-cta { height: 92px; }
    .ad-slot > .ad-slider { height: auto; aspect-ratio: 3 / 2; align-self: center; }

    /* Reklam kartı: kutu geniş ama alçak olduğu için genişliğe bağlı
       punto (8.8cqw) taşıyordu — başlık üç satıra sarıp mağaza
       rozetlerini kartın dışına itiyordu. Alçak kutuda kısılıyor. */
    .ad-cta-title { font-size: clamp(15px, 5.2cqw, 23px); line-height: 1.2; }
    .ad-cta-body { padding: clamp(10px, 3cqw, 15px) clamp(12px, 3.6cqw, 18px);
                   gap: clamp(6px, 2cqw, 10px); }
    .ad-cta-badges img { height: clamp(22px, 6.4cqw, 30px); }
  }
}

/* Yatay tutulan telefon: yükseklik az, grafiği kısalt. */
@media (max-width: 810px) and (max-height: 432px) {
  @layer utilities {
    .chart-card { height: 168px; }
    :root { --tick-h: 168px; }
  }
}

/* =========================================================================
   94. FİRMA LOGOLARI — ad yerine marka görseli
   -------------------------------------------------------------------------
   Beş logonun ölçüsü, biçimi ve zemini birbirinden farklı (biri lacivert
   bloklu WebP, biri beyaz zeminli JPEG, üçü saydam PNG). Tabloda hepsi aynı
   görünsün diye her logo TEK ÖLÇÜDE bir karta oturur:

     • kart ölçüsü tablo puntosundan türer, satır yüksekliğini aşmaz
     • logo `object-fit: contain` ile kartın içine sığar, oranı bozulmaz
     • kart zemini logonun kendi zemini (dördü beyaz, Sağlamoğlu lacivert)
       → koyu temada da okunur kalır, marka renkleri korunur

   Ad `alt` içinde durur: ekran okuyucu okur, görsel gelmezse yazı çıkar.
   ========================================================================= */
@layer components {
  .firm {
    --firm-bg: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--firm-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    padding: 0;
    line-height: 0;
  }

  .firm img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 5%;
  }

  /* Beş logo da beyaz zeminli: hepsi aynı levhayı kullanır. */

  /* Liste tablosu — altın bandın üstündeki kart.
     Kart bandın genişliğini kullanır (iki fiyat sütunu kadar), yüksekliği
     bandın yaklaşık dörtte üçü; logolar uzaktan da okunur. */
  .quote-matrix .firm-row th[data-firm] { padding: 0 7px; }
  .quote-matrix .firm {
    width: 100%;
    max-width: calc(var(--t-row) * 5);
    height: calc(var(--t-row) * 0.72);
    box-shadow: 0 1px 2px rgba(4, 32, 46, .18);
  }

  /* Detay tablosu — firma sütunu */
  .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
    width: calc(var(--t-detail) * 4.6);
    height: calc(var(--t-detail) * 1.7);
    min-width: 74px; min-height: 24px;      /* dar kutuda bile okunur kalsın */
    max-width: 100%;
  }

  /* Firma seçim listesi ve alarm kayıtlarında ad yazısı kalır. */
  .pick-grid .firm, .alarm-list .firm { width: auto; height: auto; }
}

/* Mobilde kart, sütun genişliğine göre küçülür. */
@media (max-width: 810px) {
  @layer utilities {
    .quote-matrix .firm { width: 108px; height: 30px; }
    .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
      width: 104px; height: 30px;
    }
  }
}

@media (max-width: 504px) {
  @layer utilities {
    .quote-matrix .firm { width: 96px; height: 28px; }
    .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
      width: 94px; height: 28px;
    }
  }
}

/* =========================================================================
   95. LOGOLAR BÜYÜK VE ZEMİNSİZ
   -------------------------------------------------------------------------
   Ad yerine logo geldiğinde altın bandın işlevi kalmadı: renkli zemin hem
   logoların kendi renkleriyle çakışıyor hem de kart küçüldüğü için okunmayı
   zorlaştırıyordu. Bant kaldırıldı, logo başlığın tamamını kullanıyor.

   Koyu temada Harem/Nadir/Yazıcı koyu çizgili logolar: arkalarında beyaz
   bir levha kalır, yoksa koyu zeminde kaybolurlar. Açık temada levha kartın
   beyazıyla birleştiği için görünmez.
   ========================================================================= */
@layer components {
  /* — altın bant kaldırıldı — */
  .quote-matrix .firm-row th[data-band="a"],
  .quote-matrix .firm-row th[data-band="b"] { background: var(--surface); }
  .quote-matrix .firm-row th[data-band] { border-left-color: var(--line-soft); }
  .quote-matrix .firm-row th[data-band]::after { background: var(--grid-strong); }

  :root .market-table tbody tr[data-band="a"] .firm,
  :root .market-table tbody tr[data-band="b"] .firm { background: #fff; }

  /* — logo levhası: çerçevesiz, hücreyi doldurur — */
  .firm {
    --firm-bg: #fff;
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: none;
  }
  .firm img { padding: 2%; }

  /* Liste tablosu: bant yükseldi, logo bandın neredeyse tamamını kaplar. */
  .quote-matrix .firm-row th[data-firm] { padding: 4px 6px; }
  .quote-matrix .firm {
    width: 100%; max-width: none;
    height: calc(var(--t-row) * var(--t-firmband) - 10px);
    box-shadow: none;
  }

  /* Detay tablosu: logo satır yüksekliğinin büyük bölümünü alır ama SABİT
     bir taban yok — kutu daraldığında levha da küçülmeli, yoksa beş satır
     sığmıyor ve tablo taşıyor. Ölçü tamamen puntoyla birlikte hareket eder,
     `fitDetail` de satır tabanını bu ölçüden hesaplar. */
  /* Levha yüksekliği satır tabanını belirliyor: 2,2em iken satır
     2,2·punto oluyordu ve tablonun puntosu bu yüzden ~%25 küçük kalıyordu.
     1,7em'de logo aynı büyüklükte kalır (punto büyüdüğü için), yazı büyür. */
  .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
    width: calc(var(--t-detail) * 4.6);
    height: calc(var(--t-detail) * 1.7);
    max-width: 100%;
    padding: 0; border-radius: var(--r-sm);
  }
}

@media (max-width: 810px) {
  @layer utilities {
    .quote-matrix .firm { width: 100%; height: 40px; }
    .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
      width: 118px; height: 38px;
    }
  }
}

@media (max-width: 504px) {
  @layer utilities {
    .quote-matrix .firm { height: 36px; }
    .market-table:not(.quote-matrix) tbody th[scope="row"] .firm {
      width: 104px; height: 34px;
    }
  }
}

/* =========================================================================
   96. KUR KARTI PUNTOSU — son söz
   -------------------------------------------------------------------------
   Bu jetonlar dosyanın farklı yerlerinde birkaç kez tanımlanıyordu ve
   sonrakiler öncekileri eziyordu. Kartlardaki punto burada, tek yerde
   belirlenir. Değerler yalnız ÜST SINIRDIR; gerçek punto `fitTickers`
   ölçümüyle bulunur, dolayısıyla taşma olmaz.
   ========================================================================= */
@layer tokens {
  :root {
    --tk-value-share: .58;   /* satırın rakama ayrılan payı — .58 ikisini de
                                büyüten en dengeli değer (ölçümle bulundu) */
    --tk-label-min: 12px;
    --tk-label-max: 24px;  --tk-value-max: 30px;
    --tk-title-max: 20px;  --tk-price-max: 44px;  --tk-chg-max: 20px;
  }
}

/* =========================================================================
   97. KART BAŞLIĞI İKİ SATIRLA SINIRLI
   -------------------------------------------------------------------------
   Uzun birim adları (ör. AVUSTRALYA DOLARI / TL - SATIŞ) başlığı üç satıra
   çıkarıp kartı taşırıyordu; ölçüm de bunu telafi etmek için o kartın tüm
   puntolarını kısıyor, dört kart birbirinden farklı görünüyordu. Başlık
   artık en fazla iki satır; taşan kısım üç noktayla biter.
   ========================================================================= */
@layer components {
  .ticker-head {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* =========================================================================
   98. EN İYİ FİYAT KALIN
   -------------------------------------------------------------------------
   Her satırda alışın en yükseği, satışın en düşüğü kullanıcının lehinedir;
   o hücre kalın yazılır. Arial'de 700'ün üstünde ağırlık yok, bu yüzden
   ayrım diğer hücreleri 500'e indirerek sağlanır — kalın olan gerçekten
   kalın kalır. İşareti markBest() her ölçümde veriye göre yeniler.
   ========================================================================= */
@layer components {
  .quote-matrix td.q { font-weight: 500; }
  .quote-matrix td.q.is-best { font-weight: 700; }

  .market-table:not(.quote-matrix) td .buy,
  .market-table:not(.quote-matrix) td .sell { font-weight: 500; }
  .market-table:not(.quote-matrix) td.is-best .buy,
  .market-table:not(.quote-matrix) td.is-best .sell { font-weight: 800; }
}

/* =========================================================================
   99. ÖLÜ ALANLAR KESİLDİ — TABLO YUKARI VE AŞAĞI BÜYÜDÜ
   -------------------------------------------------------------------------
   Üç ayrı boşluk hiçbir işe yaramıyordu:
   · Başlık bloğu 109px sabitti; filtre kutusu dikeyde ortalandığı için
     başlığın altında ~30px ölü şerit kalıyordu. Kutu artık kırıntı
     çizgisiyle (Ana Sayfa) aynı hizada başlar, blok içeriği kadar yer tutar.
   · Kur kartlarında `dl` etiketinin tarayıcıdan gelen 16px kenar boşlukları
     ve kaldırılan "bilgilendirme" notundan kalan alt dolgu duruyordu.
   · Bu ikisi kesilince kart şeridi de kısaldı; şerit aşağı indi.
   Kazanılan yükseklik fiyat tablosuna geçti — punto yine ölçümle bulunur.
   ========================================================================= */
@layer components {
  .analysis-top--plain { height: 80px; }
  /* 3px = kırıntı çizgisinin üst boşluğu; iki yazı aynı satırdan başlar */
  .analysis-top--plain .filter-group { top: 3px; transform: none; }

  .tk-stats { margin: 0; padding-bottom: 0; }

  /* Uygulama kartı başlığı üç noktayla kesilmek yerine iki satıra sarar. */
  .app-cta-title {
    white-space: normal; overflow-wrap: break-word; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; line-height: 1.2;
  }
}

/* Şerit yüksekliği: ölü alanlar kesilince kartlar 270px'e ihtiyaç duymuyor.
   Buradaki aralık ÜST SINIR; altta boşluk kalırsa `trimTickStrip` her
   sayfada ölçüp kesiyor, kazanılan yükseklik fiyat tablosuna geçiyor.
   Kart puntolarını yine `fitTickers` ölçüyor — kutuya sığar, taşmaz. */
@layer tokens {
  :root { --tick-h: clamp(178px, calc(21 * var(--vh)), 240px); }
}

/* =========================================================================
   100. "DÜZENLE" ALT BANDA TAŞINDI — kart şeridinin üstündeki şerit kalktı
   -------------------------------------------------------------------------
   Düğme kartların sol alt köşesinde duruyordu ve ölü alan kesilince son
   satırın ("Önceki Kapanış") üstüne biniyordu. Ona ayrılan ara şerit de
   yer yiyordu. Düğme artık alt bandın içinde (bkz. 101. bölüm); kart şeridi
   aşağı kayıp o şeridi yuttu, ızgara satırı içeriğe göre ölçülüyor.
   ========================================================================= */
@media (min-width: 811px) {
  @layer layout {
    .main { grid-template-rows: minmax(0, 1fr) auto; }
  }
}

/* =========================================================================
   101. ALT BANT — sade şerit: solda Düzenle, sağda kurumsal bağlantılar
   -------------------------------------------------------------------------
   Bant bir süre üst barın mavisini taşıdı; sayfadan yer yiyor ve dikkati
   dağıtıyordu. Artık zeminsiz ve ince: solda kur kartı ayarları (Düzenle),
   sağda küçük puntolu yasal bağlantılar. "Grafiği Büyüt" görünümündeki
   marka bandı 89. bölümde, utilities katmanında olduğu için bunları ezer.
   ========================================================================= */
@layer components {
  .footer {
    height: auto; min-height: 34px;
    margin-top: 8px; padding: 4px 35px;
    display: flex; align-items: center; gap: 18px;
    border-top: 1px solid #e8f1f6;
    background: none; box-shadow: none;
    color: #235e7a; font-size: 11px; font-weight: 600;
  }
  :root[data-theme="dark"] .footer { border-top-color: var(--line-soft); color: var(--fg-muted); }

  .footer-copy { flex: none; opacity: .85; }

  .footer .links {
    margin: 0 0 0 auto; display: flex; align-items: center;
    gap: clamp(14px, calc(1.8 * var(--vw)), 34px); flex-wrap: wrap;
    font-size: 11px;
  }
  .footer .links a { color: inherit; }
  .footer .links a:hover {
    color: var(--blue3);
    text-decoration: underline; text-underline-offset: 3px;
  }

  /* Düğme bandın solunda durur; listesi ona göre yukarı açılsın diye
     konumu relative olmalı (mutlak konumu kalktı). */
  .footer .tk-settings { position: relative; inset: auto; transform: none; flex: none; }
  .footer .tk-settings .square {
    height: 2em; font-size: 11.5px;
    background: var(--surface); color: var(--buy-fg);
    border-color: var(--line-strong); box-shadow: none;
  }
  .footer .tk-settings .square:hover { background: var(--surface-3); border-color: var(--blue3); }
  .footer .tk-settings .square[aria-expanded="true"] {
    background: var(--blue2); border-color: var(--blue2); color: #fff;
  }
  .footer .tk-settings .popover--pick { color: var(--ink); font-weight: 600; }
}

/* =========================================================================
   102. YILDIZ, SIKIŞIK SATIRDA KÜÇÜLSÜN
   -------------------------------------------------------------------------
   Yıldızın 24px'lik alt sınırı satır yüksekliğinin gerçek tabanıydı: satır
   sayısı çok olan sayfalarda (Döviz 14 birim) tablo kutuya sığmıyor,
   kaydırma çubuğu çıkıyordu. Artık geniş satırda yine 24px, satır
   sıkıştığında 18px'e kadar iniyor — dokunma hedefi yalnız gerçekten yer
   kalmadığında küçülüyor.
   ========================================================================= */
@layer components {
  .quote-matrix .unit .fav {
    width:  clamp(18px, calc(var(--t-row) * .86), 24px);
    height: clamp(18px, calc(var(--t-row) * .86), 24px);
  }
  .quote-matrix .unit .fav svg {
    width:  clamp(11px, calc(var(--t-row) * .52), 15px);
    height: clamp(11px, calc(var(--t-row) * .52), 15px);
  }
}

/* Büyütülmüş görünümde kur kartları yok; onların ayar düğmesi de olmasın. */
@layer utilities {
  :root[data-chartmax="on"] .footer .tk-settings { display: none; }
}

/* =========================================================================
   103. HABER PANELİ FİYAT TABLOSUYLA AYNI HİZADA
   -------------------------------------------------------------------------
   Referans görselde haber kartı tablonun üst çizgisinde başlıyor ve alt
   çizgisinde bitiyor; banner da kur kartlarıyla aynı hizada. Panelin üstünde
   duran uygulama kartı bunu bozuyordu: sol taraftaki başlık bloğu 80px'e
   inince kart 120px'te kalmış, haber paneli 40px aşağıda başlamıştı.
   Kartın boyu artık başlık bloğuyla birlikte ölçülüyor (`alignAside`),
   panel de eskisi gibi satırın kalanını dolduruyor.
   ========================================================================= */
/* Izgara satırı 1fr: görselin kendi en-boy oranı kartı şişirmesin (satır
   `auto` iken resim kartın boyundan uzun çıkıp içeriği taşırıyordu — mobilde
   de aynı sorun vardı, o yüzden bu kural her genişlikte geçerli). */
@layer components {
  .app-cta { grid-template-rows: minmax(0, 1fr); }
}

@media (min-width: 811px) {
  @layer components {
    /* Uygulama kartı, soldaki başlık bloğuyla aynı yükseklikte. */
    .app-cta { height: var(--cta-h, 120px); }
    .app-cta-body { gap: min(11px, calc(var(--cta-h, 120px) * .09)); }
    .app-cta-badges img { height: min(38px, calc(var(--cta-h, 120px) * .3)); }
    .app-cta-art { width: min(142px, calc(var(--cta-h, 120px) * 1.3)); height: 100%; }

    /* Panel satırın kalanını doldurur; iki mod da aynı yerde başlar. */
    .news-card, .feed-card { flex: 1 1 auto; margin-top: 0; min-height: 0; }
  }
}

/* =========================================================================
   104. FİRMA SÜTUNLARI BELİRGİN AYRILSIN
   -------------------------------------------------------------------------
   Beş firmanın Alış/Satış çiftleri yalnız zemin tonuyla ayrılıyordu; uzaktan
   bakınca hangi rakamın hangi firmaya ait olduğu karışıyordu. Her firmanın
   ilk sütununa (Alış) dikey ayraç kondu; ayraç başlık bandından son satıra
   kadar iner.
   ========================================================================= */
@layer tokens {
  :root { --firm-sep: #b9d9ea; }
  :root[data-theme="dark"] { --firm-sep: rgba(255,255,255,.20); }
}

@layer components {
  /* Özgüllük notu: eski ince ayraç `tbody td:nth-child(even)` ile geliyor;
     buradaki seçicinin ondan zayıf kalmaması için `tbody` da yazılı. */
  .quote-matrix thead th[data-firm][colspan],
  .quote-matrix .side-row th.side-buy,
  .quote-matrix tbody td.q-buy { border-left: 2px solid var(--firm-sep); }

  /* İlk ayraç eskiden 1px'e inceltiliyordu ('çift çizgi görünmesin'
     diye); aynı dikey çizgi başlıkta 2px, gövdede 1px olduğu için
     yarı yolda inceliyordu. 150. bölüm hepsini 2px'e getirdi. */
}

/* =========================================================================
   105. LOGO BANDI BÜYÜMESİN — kazanılan yer satırlara gitsin
   -------------------------------------------------------------------------
   Bant yüksekliği satır yüksekliğinin katıydı; birim sayısı azalınca (ör.
   Favoriler'de dört satır) satırlar uzuyor, bant da onunla birlikte şişip
   ekranın üçte birini logolara ayırıyordu. Bandın artık bir tavanı var;
   kalan yükseklik veri satırlarına kalıyor.
   ========================================================================= */
@layer tokens {
  :root {
    --firmband-max: clamp(58px, calc(8.5 * var(--vh)), 104px);
    --firmband-h: min(calc(var(--t-row) * var(--t-firmband)), var(--firmband-max));
  }
}

@layer components {
  .quote-matrix .firm-row th { height: var(--firmband-h); }
  .quote-matrix .side-row th { top: var(--firmband-h); }
  .quote-matrix .firm { height: calc(var(--firmband-h) - 10px); }
}

/* =========================================================================
   106. BİRİM HAREKETİ — yükselen açık yeşil, düşen açık kırmızı
   -------------------------------------------------------------------------
   "Birim Hareketi" tikiyle açılır. Her hücre son hareketinin rengini taşır;
   fiyat güncellenince renk yenilenir. Kapalıyken zemin sade kalır.
   ========================================================================= */
@layer tokens {
  :root { --move-up: #dff5e4; --move-down: #fde3e3; }
  :root[data-theme="dark"] { --move-up: rgba(45,168,90,.26); --move-down: rgba(214,68,68,.26); }
}

@layer components {
  .quote-matrix td.q, .market-table:not(.quote-matrix) td {
    transition: background-color var(--dur-3) var(--ease);
  }
  :root[data-move="on"] .quote-matrix td.q[data-move="up"],
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="up"] {
    background: var(--move-up);
  }
  :root[data-move="on"] .quote-matrix td.q[data-move="down"],
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="down"] {
    background: var(--move-down);
  }
}

/* =========================================================================
   107. "EN İYİ FİYAT" TİKİ KAPATILABİLİR
   -------------------------------------------------------------------------
   İşaret 98. bölümde tanımlı; burada yalnız kapatma durumu var. Kapalıyken
   tüm hücreler aynı ağırlıkta yazılır.
   ========================================================================= */
@layer components {
  :root[data-best="off"] .quote-matrix td.q.is-best { font-weight: 500; }
  :root[data-best="off"] .market-table:not(.quote-matrix) td.is-best .buy,
  :root[data-best="off"] .market-table:not(.quote-matrix) td.is-best .sell { font-weight: 500; }
}

/* =========================================================================
   108. BAŞLIKLAR ŞERİDİ — punto bir kademe yukarı
   -------------------------------------------------------------------------
   Haber başlıkları uzaktan okunamıyordu; şeridin puntoları ~%25 büyüdü.
   Kaç başlığın sığacağını yine kutu belirler (liste kendi içinde bölünür).
   ========================================================================= */
@layer tokens {
  :root {
    --t-feed-meta: 15px; --t-feed-title: 19.5px;
    --t-feed-desc: 17px; --t-feed-more: 17px;
  }
}

/* Punto büyüyünce beş başlık şeride tam sığmıyor, sonuncusu kırpılıyordu.
   Liste artık esnek: satırlar kutunun yüksekliğini eşit paylaşır, kaydırma
   çubuğu çıkmaz. Uzun başlık yine iki satırda biter (üç nokta). */
@layer components {
  .feed-list { display: flex; flex-direction: column; overflow: hidden; }
  :root[data-newsmode="title"] .feed-item { flex: 1 1 0; min-height: 0; }
}

/* =========================================================================
   109. HAREKET RENGİ RAKAMA DA İŞLESİN — hücre bazında
   -------------------------------------------------------------------------
   Renk satırın tamamına değil, HER RAKAMA kendi hareketine göre uygulanır:
   zemin açık, rakam koyu yeşil/kırmızı. Kalın yazılan "en iyi fiyat" da
   rengini korur, ayrım ağırlıktan gelir.
   ========================================================================= */
@layer components {
  :root[data-move="on"] .quote-matrix td.q[data-move="up"],
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="up"] .buy,
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="up"] .sell {
    color: var(--up-ink);
  }
  :root[data-move="on"] .quote-matrix td.q[data-move="down"],
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="down"] .buy,
  :root[data-move="on"] .market-table:not(.quote-matrix) td[data-move="down"] .sell {
    color: var(--down-ink);
  }
  .quote-matrix td.q { transition: background-color var(--dur-3) var(--ease), color var(--dur-2) var(--ease); }
}

/* =========================================================================
   110. "BİRİM TAM EKRAN" DÜĞMESİ FİLTRELEME BAŞLIĞININ ÜSTÜNDE
   -------------------------------------------------------------------------
   Düğme grafiğin sağ üstünde duruyor, gösterge adlarına yer bırakmak için
   şeridi daraltıyordu. Artık filtre kutusunun tepesinde — Geri tuşuyla aynı
   sırada — ve adı "Birim Tam Ekran".
   ========================================================================= */
@layer components {
  .filter-group .chart-max {
    position: static; align-self: flex-end;
    margin-bottom: 4px;
    height: calc(var(--t-crumb) * 1.9); padding: 0 .7em;
    color: var(--fg-strong);
  }
  /* Düğme şeritten çıktı: gösterge adları tüm genişliği kullanabilir. */
  .chart-card .legend { padding-right: 0; }
}

/* =========================================================================
   111. FAVORİ YILDIZI KURUMSAL MAVİ
   -------------------------------------------------------------------------
   Sarı yıldız marka paletinin dışındaydı; işaretli birim artık Buluro
   mavisiyle gösteriliyor (koyu temada daha açık bir mavi).
   ========================================================================= */
@layer tokens {
  :root { --star: #0e6f9d; }
  :root[data-theme="dark"] { --star: #4fb9e8; }
}

/* =========================================================================
   112. ÜST BANT %50 BÜYÜDÜ — logo, ikonlar ve yazılar birlikte
   -------------------------------------------------------------------------
   Bant ve içindeki her şey yarı yarıya büyüdü; kazanılan yükseklik `.main`
   payından düşüyor, tablo ölçümü bunu kendiliğinden telafi ediyor.
   Sağdaki denetimlerin taşmaması için üst bar gerektiğinde sarmıyor,
   aradaki boşluklar daralıyor.
   ========================================================================= */
@layer tokens {
  /* Ölçüler ekran genişliğine bağlı: 1920'de tam %50 büyür, dar ekranda
     üst bar yatayda taşmasın diye eski değerlerine iner. */
  :root {
    --hdr-h: clamp(70px, calc(5 * var(--vw)), 96px);
    --t-logo: clamp(33px, calc(2.4 * var(--vw)), 46px);
    --t-nav: clamp(13.5px, calc(1.02 * var(--vw)), 19.5px);
    --t-topbtn: clamp(12.5px, .94vw, 18px);
  }
}

@layer components {
  .header { padding-inline: 26px; gap: 0; }
  .header .nav { gap: clamp(10px, calc(1.1 * var(--vw)), 22px); }
  .top-actions { gap: clamp(6px, .7vw, 14px); }
}

/* =========================================================================
   113. "BANT AKIŞI" TİKİ — alt kur şeridi kapatılabilir
   -------------------------------------------------------------------------
   Tik kalkınca dört kurluk şerit gizlenir, fiyat tablosu boşalan alanı
   doldurur ve punto tavanları yükselir (gerçek punto yine ölçümle bulunur).
   Sağ alttaki banner yerinde kalır.
   ========================================================================= */
@media (min-width: 811px) {
  @layer layout {
    :root[data-strip="off"] .main {
      grid-template-areas:
        "content aside"
        "content ad";
    }
  }
}

@layer utilities {
  /* Yalnız dört kart kalkar; reklam kutusu 140. bölümde yerinde tutulur. */
  :root[data-strip="off"] .bottom-row > .ticker { display: none; }
}

@layer tokens {
  /* Şerit kapalıyken satırlar iki katına yakın yer bulur; tavanlar da
     onunla birlikte açılır, yoksa punto eski sınırında takılı kalırdı. */
  :root[data-strip="off"] {
    --t-quote-max: 72px; --t-unit-max: 52px; --t-detail-max: 84px;
    --t-firm: 26px; --t-side: 20px; --firmband-max: clamp(70px, calc(11 * var(--vh)), 150px);
  }
}

/* =========================================================================
   114. FİRMA AYRACI BİR TIK DAHA KALIN
   ========================================================================= */
@layer tokens {
  :root { --firm-sep: #93c3dc; }
  :root[data-theme="dark"] { --firm-sep: rgba(255,255,255,.30); }
}

@layer components {
  .quote-matrix thead th[data-firm][colspan],
  .quote-matrix .side-row th.side-buy,
  .quote-matrix tbody td.q-buy { border-left-width: 3px; }
  /* İlk ayraç eskiden 1px'e inceltiliyordu ('çift çizgi görünmesin'
     diye); aynı dikey çizgi başlıkta 2px, gövdede 1px olduğu için
     yarı yolda inceliyordu. 150. bölüm hepsini 2px'e getirdi. */
}

/* Bant kapalıyken: banner kendi yerini korur (ızgara satırı boşalınca
   yüksekliği sıfırlanıyordu), tablo ise hem dikeyde hem yatayda genişler —
   birim sütunu daralır, hücre dolgusu incelir, rakamlara yer açılır. */
@layer tokens {
  :root { --t-unitcol-share: .21; }
  :root[data-strip="off"] { --t-unitcol-share: .15; --q-pad: .12; }
}

@media (min-width: 811px) {
  @layer components {
    :root[data-strip="off"] .ad-slot { min-height: clamp(150px, calc(20 * var(--vh)), 240px); }
  }
}

/* Detay sayfasında filtre kutusu artık beş tik taşıyor ve zaman aralığı
   şeridiyle aynı satırda; olduğu gibi bırakılınca sağ sütunun üstüne
   biniyordu. Denetimler orada bir kademe küçülür, satır gerekirse sarar ve
   blok içeriği kadar yükselir (yükseklik ölçüyle sağ sütuna aktarılıyor). */
@layer components {
  .analysis-top--chart { height: auto; min-height: 109px; align-items: start; }
  .analysis-top--chart .filter-group { min-width: 0; max-width: 100%; }
  .analysis-top--chart .filter-row { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .analysis-top--chart .filter-btn {
    height: calc(var(--t-crumb) * 2.1);
    padding: 0 calc(var(--t-crumb) * .58);
    font-size: calc(var(--t-crumb) * .92);
    gap: 5px;
  }
  .analysis-top--chart .chart-max {
    height: calc(var(--t-crumb) * 1.75); font-size: calc(var(--t-crumb) * .82);
  }
}

/* =========================================================================
   115. "BANT AKIŞI" TİKİ ALT BANTTA — Düzenle'nin yanında
   -------------------------------------------------------------------------
   Ayar, kapattığı şeridin yanında dursun diye filtre kutusundan alt banda
   taşındı; ölçüleri oradaki Düzenle düğmesiyle aynı.
   ========================================================================= */
@layer components {
  .footer .footer-check {
    flex: none; height: 2em; padding: 0 .7em; gap: .45em;
    font-size: 11.5px; font-weight: 800;
    background: var(--surface); color: var(--buy-fg);
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    box-shadow: none;
  }
  .footer .footer-check:hover { background: var(--surface-3); border-color: var(--blue3); }
  .footer .footer-check .fc-box { width: 1.05em; height: 1.05em; }
}

@layer utilities {
  /* Büyütülmüş görünümde alt bant marka bandına dönüşüyor; ayar orada
     görünmez (şerit zaten gizli). */
  :root[data-chartmax="on"] .footer .footer-check { display: none; }
}

/* =========================================================================
   116. BİRİM TAM EKRAN — punto bant ayarından bağımsız, bant iki katı
   -------------------------------------------------------------------------
   Bu görünümde alt şerit zaten gizli; tablo puntosunun "Bant Akışı" tikine
   göre değişmesi için sebep yok. Tavan burada tek değer olarak sabitlendi
   (gerçek punto yine `fitDetail` ölçümüyle bulunur).
   Üst marka bandı da iki katına çıktı, logo onunla birlikte büyüdü.
   ========================================================================= */
@layer tokens {
  :root[data-chartmax="on"]                   { --t-detail-max: 84px; }
  :root[data-chartmax="on"][data-chart="off"] { --t-detail-max: 110px; }
}

@layer utilities {
  /* Bant logonun boyuna göre kesildi: altta 40px ölü alan kalıyordu. Logo
     bandı dolduracak en büyük punto (blok yüksekliği ≈ punto × 1,17). */
  :root[data-chartmax="on"] .header { height: 120px; padding-inline: 30px; }
  :root[data-chartmax="on"] .logo   { font-size: 92px; }
}

/* =========================================================================
   117. SLAYT SÜRESİ KUTUSU
   -------------------------------------------------------------------------
   Slaytın yanında duran sayı kutusu: 10–180 saniye. Slayt kapalıyken kutu
   sönük ve seçilemez olur (girdi `disabled`).
   ========================================================================= */
@layer components {
  .filter-num {
    display: inline-flex; align-items: center; gap: .5em;
    cursor: text;
  }
  .filter-num input {
    width: 4.2em; min-width: 0;
    padding: 0 .25em;
    background: var(--surface-3); color: var(--buy-fg);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font: inherit; font-weight: 800; text-align: center;
  }
  .filter-num input::-webkit-outer-spin-button,
  .filter-num input::-webkit-inner-spin-button { opacity: 1; }
  .filter-num .fn-unit { color: var(--fg-muted); font-weight: 700; }
  .filter-num.is-disabled { opacity: .45; cursor: not-allowed; }
  .filter-num.is-disabled input { cursor: not-allowed; }
}

/* =========================================================================
   118. BİRİM TAM EKRAN — tek çıkış tuşu, büyük yazı, büyük filtre satırı
   -------------------------------------------------------------------------
   "Geri" ve "Küçült" aynı işi yapıyordu; bu görünümde tek tuş kaldı ve
   puntosu ciddi biçimde büyüdü. Filtre satırındaki denetimler de iki katına
   çıktı — uzaktan okunabilsin diye.
   ========================================================================= */
@layer utilities {
  :root[data-chartmax="on"] .back-btn { display: none; }

  :root[data-chartmax="on"] .filter-group .chart-max {
    height: 2.1em; padding: 0 .8em; gap: .4em;
    font-size: 26px; font-weight: 800;
    border-width: 2px;
  }
  :root[data-chartmax="on"] .filter-group .chart-max .icon { width: 1em; height: 1em; }

  :root[data-chartmax="on"] .filter-cap { font-size: 17px; }
  :root[data-chartmax="on"] .filter-row { gap: 10px; }
  :root[data-chartmax="on"] .filter-row .filter-btn {
    height: 2.15em; padding: 0 .75em;
    font-size: 21px; gap: .45em;
  }
  :root[data-chartmax="on"] .filter-row .filter-btn .icon { width: 1.05em; height: 1.05em; }
  :root[data-chartmax="on"] .filter-row .fc-box { width: 1.05em; height: 1.05em; }
}

/* =========================================================================
   119. PANEL VE TAM EKRAN PENCERELER — punto iki katı
   -------------------------------------------------------------------------
   Alarm ve Çeviri panelleri, çeviri tablosu, kurulu alarmlar, haber arşivi
   ve haber detayı aynı `--t-panel` biriminden ölçekleniyor; jeton ikiye
   katlandı. Panel genişliği em cinsinden olduğu için ekranı aşmasın diye
   üst sınır eklendi; pencere gövdeleri zaten kendi içinde kaydırılıyor.
   ========================================================================= */
@layer tokens {
  :root { --t-panel: 25px; }
}

@layer components {
  .popover--panel { width: min(29em, calc(94 * var(--vw))); max-height: min(calc(84 * var(--vh)), 40em); }
  /* Alarm/çeviri kartlarındaki ızgaralar dar ekranda tek sütuna insin. */
  .sheet .conv-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .alarm-page { font-size: var(--t-panel); }
}

/* Filtre sütunu içeriğinden taşmasın: `auto` sütun max-content istiyor ve
   satır sarmasına rağmen kutu sağ sütunun üstüne biniyordu. */
@layer components {
  .analysis-top--chart {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, auto);
  }
}

/* Pencere başlığı ve araç düğmeleri de gövdeyle aynı ölçeğe bağlandı;
   gövde iki katına çıkınca başlık şeridi küçük kalıyordu. */
@layer components {
  .sheet-title { font-size: calc(var(--t-panel) * .92); }
  .sheet-link, .sheet-close { font-size: calc(var(--t-panel) * .72); }
  .sheet-empty { font-size: calc(var(--t-panel) * .8); }
}

/* =========================================================================
   120. SLAYT ŞERİDİ TEK SATIRDA
   -------------------------------------------------------------------------
   "SIRADAKİ · Dolar / Euro · 4 sn · Şimdi geç" şeridi dar sütunda sıkışıp
   birim adını iki satıra bölüyordu. Şerit artık ne sıkışır ne de sarar;
   yer yetmezse başlık satırında bir alt satıra iner (mobil kuralları
   utilities katmanında olduğu için orada sarma davranışı korunur).
   ========================================================================= */
@layer components {
  .slide-next { flex: none; white-space: nowrap; }
  .sn-label, .sn-name, .sn-count { white-space: nowrap; }
}

/* =========================================================================
   121. LİSTE SAYFALARINDA FİLTRE SATIRI TAM EKRAN ÖLÇÜSÜNDE
   -------------------------------------------------------------------------
   Ana sayfa, Döviz, Altın & Gümüş, Sarrafiye ve Favoriler'de tikler "Birim
   Tam Ekran" görünümündeki ölçüye çekildi. Detay sayfası dışarıda: orada
   aynı satırda zaman aralığı şeridi de var, 21px'e çıkınca aralıklar sıfır
   genişliğe düşüyordu.
   ========================================================================= */
@layer components {
  .analysis-top--plain .filter-cap { font-size: 17px; }
  .analysis-top--plain .filter-row { gap: 10px; }
  .analysis-top--plain .filter-row .filter-btn {
    height: 2.15em; padding: 0 .75em;
    font-size: 21px; gap: .45em;
  }
  .analysis-top--plain .filter-row .filter-btn .icon { width: 1.05em; height: 1.05em; }
  .analysis-top--plain .filter-row .fc-box { width: 1.05em; height: 1.05em; }
  .filter-num input { font-size: .92em; }

  /* Başlık bloğu artık sabit değil: büyüyen filtre satırı sığsın. */
  .analysis-top--plain { height: auto; min-height: 80px; }
}

/* =========================================================================
   122. ÇEVİRİ PANELİ — kaydırmasız açılır
   -------------------------------------------------------------------------
   Panelde en fazla beş birim durur (altıncı otomatik tabloya taşınır), bu
   yüzden gövde ekrana sığar; üst sınır yükseltilip kaydırma kalktı.
   ========================================================================= */
@layer components {
  .popover--panel { max-height: min(calc(92 * var(--vh)), 60em); }
  .popover--conv  { overflow: visible; }
}

/* =========================================================================
   123. ÇEVİRİ TABLOSU — 4 × 4 = 16 birim, tek ekran
   ========================================================================= */
@layer components {
  .sheet .conv-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
  .sheet--conv { width: min(1320px, 100%); }
  /* Tablo tek ekranda kalsın: satırlar kutuya sığacak biçimde sıkışır. */
  .sheet .conv-row { padding: .6em .7em; }
  .sheet .conv-row .c-name { font-size: .92em; }
}

/* =========================================================================
   124. ALARM PANELİ VE PENCERESİ — punto ve boy
   -------------------------------------------------------------------------
   Panel üç kaydı ve "devamı" düğmesini kaydırmadan gösterecek kadar uzun;
   penceredeki kartlar da panelle aynı ölçeğe (--t-panel) bağlandı, eskiden
   sayfa puntosundan geliyor ve minik kalıyorlardı.
   ========================================================================= */
@layer components {
  .sheet--alarm { width: min(1180px, 100%); }
  .sheet--alarm .alarm-board {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26em), 1fr));
    gap: .6em;
  }
  .sheet--alarm .alarm-card {
    gap: .5em; padding: .6em .7em;
    font-size: var(--t-panel);
  }
  .sheet--alarm .alarm-card .ac-dir { width: 1.7em; height: 1.7em; }
  .sheet--alarm .alarm-card .ac-dir svg { width: .9em; height: .9em; }
  .sheet--alarm .alarm-card .ac-name   { font-size: .82em; }
  .sheet--alarm .alarm-card .ac-sub    { font-size: .62em; }
  .sheet--alarm .alarm-card .ac-target { font-size: .82em; }
  .sheet--alarm .alarm-card .ac-meta   { font-size: .58em; }
  .sheet--alarm .alarm-card .ac-del    { width: 1.5em; height: 1.5em; }
  .sheet--alarm .alarm-card .ac-del svg { width: .8em; height: .8em; }
}

/* Panel gövdesi kaydırmasız sığsın: satırlar tek satıra indi (ad solda,
   karşılık sağda), dolgular ve yardımcı bloklar inceldi. Tam ekran
   tablodaki iki satırlı düzen olduğu gibi kalıyor. */
@layer components {
  .popover--conv { padding: .7em; }
  .popover--conv .conv-row { padding: .34em .6em; }
  .popover--conv .conv-row > div {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: .6em;
  }
  .popover--conv .conv-row .c-name  { font-size: .86em; }
  .popover--conv .conv-row .c-value { font-size: .92em; margin: 0; }
  .popover--conv .conv-list { gap: .4em; }
  .popover--conv .conv-add { padding: .35em; }
  .popover--conv .conv-add-face { height: 2em; font-size: .86em; }
  .popover--conv .conv-note { font-size: .72em; margin-top: .35em; }
  .popover--conv .conv-top { gap: .5em; }
  .popover--panel .sheet-link { height: 2.2em; font-size: .8em; margin-top: .5em; }
  .popover--conv .conv-label { font-size: .78em; margin: .35em 0 .15em; }
}

/* Birim arama listesi paneli/pencereyi şişirmesin: kendi içinde kayar. */
@layer components {
  .popover--conv .unit-results { max-height: 9em; overflow-y: auto; }
  .sheet .unit-picker .unit-results { max-height: 8em; }
}

/* 4 × 4 tablo tek ekranda kalsın: kart dolguları ve puntolar sıkıştı,
   ad ile karşılık iki satırda ama yakın duruyor. */
@layer components {
  .sheet .conv-row { padding: .26em .5em; }
  .sheet .conv-row .c-name  { font-size: .74em; }
  .sheet .conv-row .c-value { font-size: .9em; margin-top: 0; }
  .sheet .conv-list { gap: .42em; }
  .sheet .conv-label { font-size: .78em; }
  .sheet .conv-note { font-size: .74em; }
}

/* Alarm paneli de kaydırmasız açılsın: üç kayıt ve "devamı" düğmesi ekrana
   sığacak biçimde dolgular inceldi, yardımcı satırlar küçüldü. Yazı ölçeği
   (--t-panel) korunuyor. */
@layer components {
  #alarmMenu { padding: .64em; }
  #alarmMenu .seg2 { font-size: .82em; }
  #alarmMenu .alarm-grid { gap: .45em; }
  #alarmMenu .alarm-grid select,
  #alarmMenu .field input { height: 2.1em; font-size: .92em; }
  #alarmMenu .field .step { width: 2.1em; height: 2.1em; }
  #alarmMenu .alarm-hint { font-size: .68em; margin: .3em 0; }
  #alarmMenu .btn-primary { height: 2.2em; font-size: .92em; }
  #alarmMenu .alarm-head { font-size: .78em; margin: .5em 0 .3em; }
  #alarmMenu .alarm-item { padding: .32em .45em; }
  #alarmMenu .alarm-item .a-name { font-size: .82em; }
  #alarmMenu .alarm-item .a-sub { font-size: .62em; }
  #alarmMenu .alarm-item .a-target { font-size: .82em; }
  #alarmMenu .alarm-more { height: 2.1em; font-size: .78em; }
  #alarmMenu .chip-row { font-size: .7em; }
}

/* Kurulu Alarmlar penceresi: gruplar ve satırlar sayfa puntosundan (13px)
   geliyordu, gövdenin yanında minik kalıyordu. Hepsi panel ölçeğine bağlandı. */
@layer components {
  .sheet--alarm .ag-name   { font-size: calc(var(--t-panel) * .72); }
  .sheet--alarm .ag-count  { font-size: calc(var(--t-panel) * .56); }
  .sheet--alarm .ad-title  { font-size: calc(var(--t-panel) * .66); }
  .sheet--alarm .al-sub    { font-size: calc(var(--t-panel) * .58); }
  .sheet--alarm .al-target { font-size: calc(var(--t-panel) * .74); }
  .sheet--alarm .aline     { padding-block: .18em; }
  .sheet--alarm .al-dir    { width: 1.3em; height: 1.3em; }
  .sheet--alarm .al-dir svg { width: .8em; height: .8em; }
  .sheet--alarm .al-del    { width: 1.4em; height: 1.4em; }
  .sheet--alarm .al-del svg { width: .78em; height: .78em; }
}

/* =========================================================================
   125. ÇEVİRİ — ARANABİLİR SEÇİCİLER, ORANLAR VE SIFIRLAMA
   -------------------------------------------------------------------------
   · Tablo üst satırı 4 : 3 : 3 (tutar · kaynak birim · birim ekle).
   · Kaynak birim yerli açılır liste değil: üstte arama, altında kategoriye
     ayrılmış birimler.
   · "Birim Ekle" listesi de aynı düzende; "Eklenecek birimi seçin" başlığı
     kalktı, yerine arama kutusu geldi.
   · "Karşılıkları" ve not satırında sıfırlama düğmesi.
   ========================================================================= */
@layer components {
  /* — üst satır oranları — */
  .sheet .conv-body { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .sheet .conv-top  { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: .5em; }
  .conv-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: .5em; }

  /* — aranabilir seçici — */
  .conv-src { position: relative; }
  .conv-src .conv-src-face {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: .4em;
  }
  .unit-picker--src {
    position: absolute; z-index: 40; top: calc(100% + .3em); right: 0;
    width: min(26em, calc(88 * var(--vw)));
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
    padding: .5em;
  }

  .unit-search {
    width: 100%; height: 2.2em; margin-bottom: .4em;
    padding: 0 .7em;
    background: var(--surface-3); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    font: inherit; font-size: .82em; font-weight: 700;
  }
  .unit-search::placeholder { color: var(--fg-muted); font-weight: 600; }

  .picker-group {
    margin: .45em 0 .2em; padding: 0 .25em;
    font-size: .68em; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--fg-muted);
  }
  .picker-items { display: flex; flex-direction: column; gap: .16em; }
  .picker-items li { list-style: none; }
  .picker-items button {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: .5em; padding: .3em .5em;
    border-radius: var(--r-md); font-size: .8em; font-weight: 700; color: var(--ink);
    text-align: left;
  }
  .picker-items button:hover { background: var(--surface-3); }
  .picker-items button[aria-current="true"] { background: var(--blue2); color: #fff; }
  .picker-empty { padding: .5em; font-size: .74em; font-weight: 700; color: var(--fg-muted); }

  /* — sıfırlama düğmeleri — */
  .conv-label { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
  .mini-reset {
    display: inline-flex; align-items: center; gap: .35em;
    height: 1.9em; padding: 0 .6em;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    font-size: .68em; font-weight: 800; color: var(--buy-fg);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .mini-reset .icon { width: 1.05em; height: 1.05em; }
  .mini-reset:hover { background: var(--surface-2); border-color: var(--blue3); }
  .mini-reset.is-armed,
  .sheet-link.is-armed {
    background: var(--down-bg); border-color: var(--down-line); color: var(--down-ink);
  }

  /* Tam ekran tabloda seçici ızgaranın yanında açılır (sağ sütun). */
  .sheet .unit-picker { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .sheet .unit-picker .unit-results { max-height: 22em; overflow-y: auto; }
  .sheet .conv-add { grid-column: 2; grid-row: 1; }
}

/* =========================================================================
   126. PUNTO DÜZELTMELERİ — filtre satırı iki beden küçük, alt bant iki
        beden büyük, tam ekran düğmesi üst bara taşındı
   ========================================================================= */
@layer components {
  .analysis-top--plain .filter-cap { font-size: 15px; }
  .analysis-top--plain .filter-row .filter-btn { font-size: 17px; }

  .footer .footer-check,
  .footer .tk-settings .square { font-size: 15px; }

  /* Tam ekran düğmesi artık üst barın son öğesi: Alarm/Çeviri ile aynı ölçü. */
  .header .fullscreen {
    display: inline-flex; align-items: center; gap: .45em;
    height: auto; padding: .35em .7em;
    font-size: var(--t-topbtn); font-weight: 800;
  }
  .header .fullscreen .icon { width: 1.15em; height: 1.15em; }
}

/* Tam ekran tabloda birim listesi akışı itmesin: "Birim Ekle" düğmesinin
   altına, ızgaranın yanına açılan bir katman olarak durur; kendi içinde
   kaydırılır, tablo yerinden oynamaz. */
@layer components {
  .sheet .conv-body { position: relative; }
  .sheet .unit-picker {
    position: absolute; z-index: 30;
    top: 5.2em; right: 0; width: min(24em, 46%);
    max-height: min(calc(42 * var(--vh)), 17em); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: .5em;
  }
  .sheet .unit-picker .unit-results { max-height: none; }
}

/* =========================================================================
   127. ÜST BANT ÖLÇÜSÜ SABİT — önizleme ile yayın aynı görünsün
   -------------------------------------------------------------------------
   Ölçüler `vw` ile bağlıydı: önizleme dar bir çerçevede açıldığı için bant
   72px, yayında 1920'de 96px çıkıyordu. Kullanıcı önizlemedeki ölçüyü
   seçti; değerler artık genişlikten bağımsız.
   ========================================================================= */
@layer tokens {
  :root {
    --hdr-h: 72px;
    --t-logo: 34.5px; --t-nav: 14.7px; --t-topbtn: 13.5px;
  }
}

/* =========================================================================
   128. SAĞ SÜTUN BİR BİRİM DARALDI — kazanılan genişlik tabloya/grafiğe
   -------------------------------------------------------------------------
   Sütun beş birimlik genişliğin dördüne indi (322 → 258px); fark soldaki
   fiyat tablosuna ve detay sayfasındaki grafiğe geçti.
   ========================================================================= */
@layer layout {
  .main { grid-template-columns: minmax(0, 1fr) 258px; }
}

/* =========================================================================
   129. REKLAM ALANI DAR ÇERÇEVEDE DE GÜÇLÜ KALSIN
   -------------------------------------------------------------------------
   Banner yüksekliği kur şeridine bağlıydı; önizleme küçük çerçevede
   açılınca alan zayıflıyordu. Alt sınır kondu: dar/kısa görünümde de
   yayındaki kadar yer tutar.
   ========================================================================= */
@media (min-width: 811px) {
  @layer components {
    .ad-slot { min-height: 190px; }
    .ad-slot > .ad-slider { min-height: 0; }
  }
}

/* Sütun genişliği utilities katmanındaki iki medya kuralında da 322px
   yazılıydı ve 128. bölümü eziyordu (1600px üstü ve 1439px altı). Üçü de
   aynı ölçüye çekildi. */
@layer utilities {
  @media (min-width: 1440px) {
    .main { grid-template-columns: minmax(0, 1fr) 258px; }
  }
  @media (min-width: 811px) and (max-width: 1295px) {
    .main { grid-template-columns: minmax(0, 1fr) 258px; }
  }
}

/* =========================================================================
   130. ALT ŞERİT BEŞ EŞİT KUTU — dört kur kartı + reklam
   -------------------------------------------------------------------------
   Reklam sağ sütunun altındaydı ve kartlardan dar kalıyordu (258 vs ~383px).
   Artık şeridin beşinci kutusu: satır tüm genişliği kaplar, beş kutu eşit
   bölüşür. Sağ sütun yalnız üst satırda kalır, haber paneli tablonun alt
   çizgisine kadar iner.
   ========================================================================= */
@media (min-width: 811px) {
  @layer layout {
    .main {
      grid-template-areas:
        "content aside"
        "tickers tickers";
    }
    .bottom-row { grid-area: tickers; }
  }

  @layer components {
    /* Dört sütunluk eski kural da components katmanında; beş kutu için
       genişletme aynı katmanda ve sonra yazılmalı. */
    .bottom-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    /* Şerit içindeki reklam kutusu kartlarla aynı ölçüde durur. */
    /* Eski `grid-area: ad` adlandırması artık yok; kutu şeritte akışa girer. */
    .bottom-row .ad-slot {
      grid-area: auto; min-height: 0; margin-top: 0; height: var(--tick-h);
      display: flex;
    }
    .bottom-row .ad-slider { height: 100%; min-height: 0; }
  }
}

/* Bant kapalıyken şerit tümüyle gizlenir (reklam da onunla birlikte). */

/* =========================================================================
   131. ALT BANT DÜĞMELERİ FİLTRE SATIRIYLA AYNI PUNTODA
   ========================================================================= */
@layer components {
  .footer .footer-check,
  .footer .tk-settings .square { font-size: 17px; }
}

/* =========================================================================
   132. EN İYİ FİYAT — mavi çerçeveli kutu
   -------------------------------------------------------------------------
   Kalın yazı uzaktan yeterince ayrışmıyordu; en iyi rakam artık açık mavi
   zeminli, mavi çerçeveli bir kutu içinde. Çerçeve hücrenin içine katman
   olarak çizilir (tablo `border-collapse` olduğu için köşe yuvarlaması
   doğrudan hücreye uygulanamıyor).
   ========================================================================= */
@layer components {
  .quote-matrix td.q.is-best { position: relative; color: var(--blue3); }
  .quote-matrix td.q.is-best::after {
    content: ''; position: absolute; z-index: 0;
    /* YATAY PAY HÜCRE DOLGUSUNDAN KÜÇÜK OLMALI.

       Eskiden `6%` idi: hücre genişliğinin yüzdesi + 2px çerçeve ≈ 9,5px,
       hücre dolgusu (`--t-quote` × .3) ise ≈ 9,6px. İkisi çakışınca sekiz
       haneli rakamlar (2.293,34) kutunun kenarını iki yandan 2–3px
       aşıyordu; yedi hanelilerde 1px pay kaldığı için sorun görünmüyordu.

       Pay artık dolgunun yaklaşık yarısı ve puntoyla ölçekleniyor, yüzdeyle
       değil: hücre ne kadar genişlerse genişlesin yazı hep içeride kalır. */
    inset: 12% calc(var(--t-quote) * .12);
    border: 2px solid var(--blue3); border-radius: var(--r-lg);
    background: rgba(14, 111, 157, .07);
    pointer-events: none;
  }
  :root[data-theme="dark"] .quote-matrix td.q.is-best::after {
    border-color: var(--blue4, #4fb9e8); background: rgba(79, 185, 232, .12);
  }
  :root[data-theme="dark"] .quote-matrix td.q.is-best { color: #7fd0f2; }

  /* Hareket rengi açıkken kutu değil rakam öne çıksın: çerçeve soluklaşır. */
  :root[data-move="on"] .quote-matrix td.q.is-best::after { opacity: .45; }
  :root[data-best="off"] .quote-matrix td.q.is-best::after { display: none; }
  :root[data-best="off"] .quote-matrix td.q.is-best { color: inherit; }
}

/* Reklam kutusu artık şeridin içinde: eski `grid-area: ad` adlandırması her
   genişlikte temizlenmeli, yoksa mobilde ızgara "ad" adlı hayalet sütunlar
   üretip kartları eziyor. Dar ekranda kutu satırın tamamını kaplar. */
@layer components {
  .bottom-row .ad-slot { grid-area: auto; }
}

@media (max-width: 810px) {
  @layer utilities {
    .bottom-row .ad-slot {
      grid-column: 1 / -1; height: auto; min-height: 0; margin-top: 0;
    }
    .bottom-row .ad-slider { height: auto; aspect-ratio: 3 / 2; align-self: center; }
  }
}

/* =========================================================================
   133. PUNTO VE ORAN DÜZELTMELERİ (26.08.2026 turu)
   -------------------------------------------------------------------------
   · Sarı işaretliler (filtre satırı, alt bant düğmeleri, fiyat rakamları)
     %20 küçüldü.
   · BAŞLIKLAR şeridindeki beş haber %50 küçüldü.
   · Sağ sütun %20 genişledi; reklam kutusu haber sütunuyla aynı hizaya
     geldi (şeridin son sütunu artık tam olarak sağ sütun genişliğinde).
   · Firma logosu bandı %15, durum çubuğu %20 kısaldı (yazılar aynı kaldı).
   ========================================================================= */
@layer tokens {
  /* Fiyat rakamı: ölçüm aynı kalır, çizim %20 küçük — taşma riski yok. */
  :root { --t-quote-scale: .8; }

  /* Durum çubuğu 54 → 43px; içindeki yazı ölçüsü (--t-status) değişmedi. */
  :root { --status-h: 43px; }

  /* Logo bandı tavanı %15 aşağı. */
  :root { --firmband-max: clamp(47px, calc(6.8 * var(--vh)), 84px); }
  :root[data-strip="off"] { --firmband-max: clamp(60px, calc(9.4 * var(--vh)), 128px); }

  /* BAŞLIKLAR şeridi: beş haber yarı puntoda. */
  :root {
    --t-feed-meta: 7.5px; --t-feed-title: 9.8px;
    --t-feed-desc: 8.5px; --t-feed-more: 8.5px;
  }
}

@layer components {
  .quote-matrix td.q { font-size: calc(var(--t-quote) * var(--t-quote-scale, 1)); }

  /* Filtre satırı ve alt bant düğmeleri: 17 → 13,6px (%20). */
  .analysis-top--plain .filter-cap { font-size: 12px; }
  .analysis-top--plain .filter-row .filter-btn { font-size: 13.6px; }
  .footer .footer-check,
  .footer .tk-settings .square { font-size: 13.6px; }
}

/* Sağ sütun %20 geniş: 258 → 310px. */
@layer layout {
  .main { grid-template-columns: minmax(0, 1fr) 310px; }
}

@layer utilities {
  @media (min-width: 1440px) {
    .main { grid-template-columns: minmax(0, 1fr) 310px; }
  }
  @media (min-width: 811px) and (max-width: 1295px) {
    .main { grid-template-columns: minmax(0, 1fr) 310px; }
  }
}

/* Reklam kutusu haber sütununun tam altında ve onunla aynı genişlikte:
   şeridin son sütunu sağ sütun ölçüsünde, dört kart kalanı eşit paylaşır. */
@media (min-width: 811px) {
  @layer components {
    .bottom-row { grid-template-columns: repeat(4, minmax(0, 1fr)) 310px; }
  }
}

/* =========================================================================
   134. SARI İŞARETLİLER %30 KÜÇÜLDÜ
   -------------------------------------------------------------------------
   Filtre satırı (başlığıyla birlikte), alt bandın sol düğmeleri ve haber
   panelinin gövde metni bir kademe daha indi. Başlık ve kaynak satırı
   dokunulmadı — işaret yalnız gövde metnindeydi.
   ========================================================================= */
@layer tokens {
  :root { --t-news-body: 11.9px; }
}

@layer components {
  .analysis-top--plain .filter-cap { font-size: 8.4px; }
  .analysis-top--plain .filter-row .filter-btn { font-size: 9.5px; }
  .footer .footer-check,
  .footer .tk-settings .square { font-size: 9.5px; }
}

/* =========================================================================
   135. DETAY BAŞLIK BLOĞU — ÇAKIŞMA BİTTİ
   -------------------------------------------------------------------------
   Blok sabit sütunlu bir ızgaraydı: slayt şeridi başlık sütununa sığmayınca
   zaman aralığı düğmelerinin üstüne biniyordu (slayt açılır açılmaz her şey
   üst üste geliyordu). Blok artık esnek: parçalar sığmazsa alt satıra iner,
   üst üste binemez. Slayt şeridi de başlığın altında kendi satırında durur.
   ========================================================================= */
@layer components {
  .analysis-top--chart {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 8px 18px; height: auto; min-height: 0;
  }
  .analysis-top--chart > div:first-child { flex: 0 1 auto; min-width: 0; }
  /* Aralık şeridi büyümesin: büyüyünce filtre kutusuna yer kalmıyor ve
     blok alt satıra kırılıp başlığı üç kata çıkarıyordu. */
  .analysis-top--chart .ranges {
    flex: 0 1 auto; min-width: 0;
    justify-content: flex-start; padding-top: 0;
  }
  /* Kutu daralabilsin: daralamayınca satır kırılıyor ve başlık bloğu üç
     kata çıkıyordu. İçerideki tikler gerektiğinde alt satıra sarar. */
  .analysis-top--chart .filter-group {
    flex: 0 1 auto; min-width: 0; margin-left: auto; align-items: flex-end;
  }

  /* Başlık ve slayt şeridi alt alta: yan yana durunca şerit taşıyordu. */
  .analysis-top--chart .title-row {
    flex-direction: column; align-items: flex-start; gap: 5px;
  }
  .slide-next { max-width: 100%; }

  /* Aralık düğmeleri bir tık küçüldü — şeritle aynı satırda nefes alsın. */
  .analysis-top--chart .range-btn { font-size: 11px; height: 2.1em; padding: 0 .8em; }
}

/* =========================================================================
   136. BİRİM TAM EKRAN — filtre yarı punto, ince alt bant, banner üstte
   -------------------------------------------------------------------------
   · Filtre satırı %50 küçüldü (21 → 10,5px).
   · Alt bant inceldi; uygulama banner'ı sağ alttan alınıp üst bantta
     Buluro logosunun yanına taşındı.
   ========================================================================= */
@layer utilities {
  :root[data-chartmax="on"] .filter-row .filter-btn { font-size: 10.5px; }
  :root[data-chartmax="on"] .filter-row .filter-btn .icon,
  :root[data-chartmax="on"] .filter-row .fc-box { width: 1.05em; height: 1.05em; }
  :root[data-chartmax="on"] .filter-cap { font-size: 9px; }
  :root[data-chartmax="on"] .filter-group .chart-max { font-size: 15px; }
  :root[data-chartmax="on"] .range-btn { font-size: 11px; }

  /* Alt bant: yalnız uyarı metnini taşıyacak kadar ince. */
  :root[data-chartmax="on"] .footer { height: 56px; }
  :root[data-chartmax="on"] .footer-notice { font-size: 12px; margin-left: 1.6em; }

  /* Banner üst bantta, logonun yanında. */
  :root[data-chartmax="on"] .app-cta {
    position: fixed; top: 14px; left: 372px; right: auto; bottom: auto;
    width: 360px; height: 92px; z-index: 30;
  }
  :root[data-chartmax="on"] .app-cta-art { width: 96px; }
}

/* Üç blok tek satıra sığsın: tarayıcı daraltmak yerine önce alt satıra
   kırdığı için toplam genişlik kırpıldı (boşluk, aralık düğmeleri ve tik
   dolguları). Sığdığı sürece başlık bloğu tek satır kalır. */
@layer components {
  .analysis-top--chart { gap: 6px 12px; }
  .analysis-top--chart .range-btn { padding: 0 .6em; }
  .analysis-top--chart .ranges { gap: 5px; }
  .analysis-top--chart .filter-row { gap: 5px; }
  .analysis-top--chart .filter-btn { padding: 0 .5em; gap: 4px; }
  .analysis-top--chart .filter-num input { width: 3.4em; }
}

/* =========================================================================
   137. SLAYT ŞERİDİ BAŞLIĞIN YANINDA — ARADAKİ SATIR KESİLDİ
   -------------------------------------------------------------------------
   Şerit başlığın altında kendi satırını açıyordu; o satır kesildi, şerit
   doğrudan "Dolar / TL" başlığının yanına alındı. Zaman aralığı düğmeleri
   bir üst satırda olduğu için çakışma riski yok. Kazanılan yükseklik
   grafiğe ve firma tablosuna geçer.
   ========================================================================= */
@layer components {
  .analysis-top--chart .title-row {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  }
}

/* =========================================================================
   138. BAŞLIKLAR ŞERİDİ — başlık %50 büyüdü
   -------------------------------------------------------------------------
   Kaynak ve saat satırı olduğu gibi kaldı; yalnız haber başlığı büyüdü.
   ========================================================================= */
@layer tokens {
  :root { --t-feed-title: 14.7px; }
}

/* =========================================================================
   139. LOGO BİRAZ DAHA BÜYÜK — bant yüksekliği aynı
   ========================================================================= */
@layer tokens {
  :root { --t-logo: 42px; }
}

/* Şerit başlığın yanına gelince satır genişledi ve filtre kutusu alt satıra
   kırılıp bloğu yükseltti. Aralık düğmeleri ve tikler bir tık daha kırpıldı:
   üçü tek satırda kalıyor, kazanılan yükseklik grafiğe ve tabloya gidiyor. */
@layer components {
  .analysis-top--chart .range-btn { font-size: 10.5px; padding: 0 .5em; }
  .analysis-top--chart .ranges { gap: 4px; }
  .analysis-top--chart .filter-btn { font-size: 10.5px; padding: 0 .45em; gap: 3px; }
  .analysis-top--chart .filter-cap { font-size: 9px; }
  .analysis-top--chart .filter-row { gap: 4px; }
  .analysis-top--chart .filter-num input { width: 3em; }
  .analysis-top--chart .chart-max { font-size: 11px; }
}

/* Son ayar: şerit başlığın yanında biraz daha derli toplu dursun ki başlık,
   aralıklar ve filtre tek satıra sığsın (kırılırsa blok yükseliyor). */
@layer components {
  .analysis-top--chart .slide-next { font-size: calc(var(--t-crumb) * .78); padding: .25em .3em .25em .6em; }
  .analysis-top--chart .sn-count { min-width: 3.4em; }
  .analysis-top--chart .range-btn { font-size: 10px; padding: 0 .45em; }
}

/* Zaman aralığı şeridi kırıntı yolu hizasına (üst satıra) çekildi; slayt
   şeridi de başlığın yanında, onun bir altındaki satırda kalıyor. */
@layer components {
  .analysis-top--chart .ranges { align-self: flex-start; }
  .analysis-top--chart .filter-group { align-self: flex-start; }
}

/* "Küçült" düğmesi %30 küçüldü (tam ekran görünümünde 15 → 10,5px). */
@layer utilities {
  :root[data-chartmax="on"] .filter-group .chart-max { font-size: 10.5px; }
}

/* =========================================================================
   140. BANT AKIŞI KAPALI — yalnız dört kart kalkar, reklam kalır
   -------------------------------------------------------------------------
   Reklam kutusu 130. bölümde şeridin beşinci kutusu olmuştu; tik kalkınca
   şeritle birlikte o da gidiyordu. Artık yalnız kartlar gizlenir, kutu
   ızgaraya doğrudan girip (şerit `display: contents`) haber panelinin
   altında, sağ sütunda kalır. Tablo boşalan tüm yüksekliği alır.
   ========================================================================= */
@media (min-width: 811px) {
  @layer layout {
    :root[data-strip="off"] .main {
      grid-template-rows: minmax(0, 1fr) auto;
      grid-template-areas:
        "content aside"
        "content ad";
    }
    :root[data-strip="off"][data-news="off"] .main {
      grid-template-areas:
        "content content"
        "content ad";
    }
  }

  /* Şerit kutusu ortadan kalkar, çocukları ana ızgaranın öğesi olur.
     `display` kuralı utilities katmanında olmalı: `.bottom-row { display: grid }`
     components katmanında ve katman sırası özgüllüğü ezer. */
  @layer utilities {
    :root[data-strip="off"] .bottom-row { display: contents; }
  }

  @layer components {
    /* Yükseklik artık şeride (--tick-h) değil, kendi içeriğine bağlı. */
    :root[data-strip="off"] .bottom-row .ad-slot {
      grid-area: ad; height: auto; margin-top: 0;
    }
  }
}

/* =========================================================================
   141. BİRİM TAM EKRAN — alt bant yarı yüksekliğe indi
   -------------------------------------------------------------------------
   56 → 28px. Yazı puntoları aynı kaldı; yalnız uyarı simgesi bandın içine
   sığacak kadar küçüldü.
   ========================================================================= */
@layer utilities {
  /* 101. bölümdeki `min-height: 34px` yoksa yükseklik 28'e inmiyor. */
  :root[data-chartmax="on"] .footer { height: 28px; min-height: 0; }
  :root[data-chartmax="on"] .footer-notice .ico { width: 1.25em; height: 1.25em; }
}

/* =========================================================================
   142. DETAY BAŞLIK BLOĞU HER SAYFADA AYNI YÜKSEKLİKTE
   -------------------------------------------------------------------------
   Blok üç esnek parçadan oluşuyordu: başlık + zaman aralıkları + filtre
   kutusu. Toplam genişlik ekrana sığdığı sürece tek satır kalıyor, birim adı
   uzun olan sayfalarda (Euro / Dolar, Sterlin / TL, Altın Gram / TL…) filtre
   kutusu alt satıra kırılıp bloğu 97px'ten 181px'e çıkarıyordu: slayt
   dönerken sayfa düzeni sayfadan sayfaya değişiyordu.

   Aralık düğmeleri artık akıştan çıkarıldı (kırıntı satırında, ortada, sabit
   konumda). Geriye iki parça kalıyor: esneyen başlık bloğu ve filtre kutusu —
   bunlar her adda sığar, satır hiç kırılmaz. Şerit sığmazsa birim adı
   kısalır, blok yükselmez.
   ========================================================================= */
@media (min-width: 811px) {
  @layer components {
    .analysis-top--chart { position: relative; flex-wrap: nowrap; }

    .analysis-top--chart .ranges {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      flex: none; margin: 0; z-index: 1;
    }

    .analysis-top--chart > div:first-child { flex: 1 1 auto; min-width: 0; }
    .analysis-top--chart .filter-group { flex: none; margin-left: auto; }

    /* Başlık ve slayt şeridi tek satır: sığmazsa şerit kısalır. */
    .analysis-top--chart .title-row { flex-wrap: nowrap; min-width: 0; }
    .analysis-top--chart .slide-next { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .analysis-top--chart .sn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  }
}

/* =========================================================================
   143. SLAYT SÜRESİ KUTUSU — İKİ/ÜÇ HANE GÖRÜNSÜN
   -------------------------------------------------------------------------
   Kutu 3em genişti; okların payı düşünce "30" yalnız "3" olarak görünüyordu.
   ========================================================================= */
@layer components {
  /* Genişlik + sağda okların payı: üç hane (180) bile okların altına
     girmeden görünür. */
  .filter-num input,
  .analysis-top--chart .filter-num input {
    width: 5.4em; padding: 0 1.25em 0 .45em; text-align: left;
  }
}

/* =========================================================================
   144. HABER PANELİ KAPALIYKEN ALT ŞERİT BOZULMASIN
   -------------------------------------------------------------------------
   12. bölümdeki kural şeridi "tickers ad" olarak yerleştiriyordu: reklam
   kutusu şeridin İÇİNE alındıktan sonra (130) sağdaki 310px'lik "ad" sütunu
   boş kaldı, dört kart + banner ise kalan dar alana sıkıştı — kartlar
   daralıyor, banner taşıyor, sağda boşluk kalıyordu.

   Haber kapalıyken şerit artık tüm genişliği alır: dörtlü kart + banner
   ölçüleri haber açıkkenki ile aynı kalır. Bant da kapalıysa tablo tüm
   genişliği alır, banner alt satırda tam genişlikte durur.
   ========================================================================= */
@media (min-width: 811px) {
  @layer utilities {
    :root[data-news="off"] .main {
      grid-template-areas:
        "content content"
        "tickers tickers";
    }

    :root[data-news="off"][data-strip="off"] .main {
      grid-template-rows: minmax(0, 1fr) auto;
      grid-template-areas:
        "content content"
        "ad ad";
    }
    /* Karusel içeriği mutlak konumlu: kendi yüksekliği yok, bant için
       ölçü verilmezse kutu sıfıra iniyor. */
    :root[data-news="off"][data-strip="off"] .bottom-row .ad-slot {
      grid-area: ad; height: auto; min-height: clamp(130px, calc(17 * var(--vh)), 200px);
    }
    :root[data-news="off"][data-strip="off"] .ad-slot > .ad-slider {
      height: 100%; min-height: 0;
    }
  }
}

/* =========================================================================
   145. TAM EKRANDA HABER BAŞLIKLARI BÜYÜMESİN
   -------------------------------------------------------------------------
   Tam ekranda haber şeridinin puntosu büyütülüyordu (başlık 14,7 → 22px).
   Kutu boyu aynı kaldığı için başlığın daha AZ kısmı okunuyor, cümle erken
   kesiliyordu ("Merkez Bankası sıkı duruşunu…"). Şerit artık tam ekranda da
   normal ölçüsünde: yazı tipi aynı, başlığın okunan kısmı 1. görseldeki
   kadar. 67. bölümdeki --t-feed-* atamaları bu yüzden kaldırıldı; şerit
   kök değerleri kullanır.
   ========================================================================= */

/* =========================================================================
   146. BANT KAPALIYKEN BİRİM ADLARI KÜÇÜLMESİN
   -------------------------------------------------------------------------
   Şerit kapanınca birim sütunu daraltılıyordu (.21 → .15); rakamlara yer
   açıyordu ama birim adının puntosu 22,1 → 12,6px'e düşüyordu. Sütun artık
   normalden bir tık GENİŞ: birim adı da rakamlar da açık haldekinden büyük.
   ========================================================================= */
@layer tokens {
  :root[data-strip="off"] { --t-unitcol-share: .22; --q-pad: .09; }
}

/* =========================================================================
   147. HABER + BANT KAPALIYKEN BANNER SAĞ ALTTA KALSIN
   -------------------------------------------------------------------------
   144'te banner tüm genişliğe yayılmıştı; olması gereken, 1. ve 2. görsel
   gibi sağ alt köşede kendi sütununda durması.
   ========================================================================= */
@media (min-width: 811px) {
  @layer utilities {
    :root[data-news="off"][data-strip="off"] .main {
      grid-template-rows: minmax(0, 1fr) auto;
      grid-template-areas:
        "content content"
        "tickers ad";
    }
    :root[data-news="off"][data-strip="off"] .bottom-row .ad-slot {
      grid-area: ad; height: auto; min-height: clamp(150px, calc(20 * var(--vh)), 240px);
    }
    :root[data-news="off"][data-strip="off"] .ad-slot > .ad-slider {
      height: 100%; min-height: 0;
    }
  }
}

/* =========================================================================
   148. ALT BANT KURUMSAL MAVİ
   -------------------------------------------------------------------------
   Düzenle · Bant Akışı · telif ve yasal bağlantıların olduğu bant beyazdı;
   üst bantla aynı kurumsal zemine alındı. Düğmeler zemine göre saydam beyaz.
   ========================================================================= */
@layer components {
  .footer {
    border-top: 0;
    color: var(--hdr-fg);
    background:
      radial-gradient(120% 180% at 12% -40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
      linear-gradient(90deg, var(--hdr-1) 0%, var(--hdr-2) 55%, var(--hdr-3) 100%);
  }
  :root[data-theme="dark"] .footer { border-top: 0; color: var(--hdr-fg); }

  .footer-copy { opacity: .9; }
  .footer .links a { color: var(--hdr-fg-dim); }
  .footer .links a:hover { color: var(--hdr-fg); }

  .footer .tk-settings .square,
  .footer .footer-check {
    background: rgba(255,255,255,.14); color: var(--hdr-fg);
    border-color: rgba(255,255,255,.34);
  }
  .footer .tk-settings .square:hover,
  .footer .footer-check:hover {
    background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6);
  }
  .footer .tk-settings .square[aria-expanded="true"] {
    background: #fff; border-color: #fff; color: var(--hdr-1);
  }
}

/* =========================================================================
   149. KUR KARTLARINDA KALIN YAZI KALKTI
   -------------------------------------------------------------------------
   Kart başlığı ("ESKİ YARIM - SATIŞ") ve sol etiketler (En Yüksek, En
   Düşük, Açılış, Önceki Kapanış) kalındı; normal ağırlığa alındı. Başlık
   ayrıca üç noktayla kesilmiyor: gereken punto ölçülerek bulunuyor.
   ========================================================================= */
@layer components {
  /* Daha özgül seçici şart: düz `.ticker-head` kuralı başka bir yerdeki
     iki sınıflı kural tarafından eziliyordu. */
  .ticker .ticker-head { font-weight: 500; }
  .ticker .tk-stat dt { font-weight: 500; }
}

/* =========================================================================
   150. ÜST BANT %20 KISALDI
   ========================================================================= */
@layer tokens {
  :root { --hdr-h: 58px; --t-logo: 34px; }
}

/* =========================================================================
   151. BİRİM TAM EKRAN — kırıntı yolu bandın altına indi, "Geri" tuşu geldi
   -------------------------------------------------------------------------
   · Başlık bloğu dikeyde ortalanıyordu; kırıntı yolu mavi bandın içine
     taşıyor, altında da başlıkla arasında boş bir şerit kalıyordu. Blok
     yukarıdan hizalandı, başlığın 16px'lik üst boşluğu 2px'e indi.
   · Tema anahtarının üstüne "Geri" tuşu kondu: görünümden çıkar ve bir
     önceki sayfaya döner.
   ========================================================================= */
@layer components {
  .top-back { display: none; }
}

@layer utilities {
  :root[data-chartmax="on"] .analysis-top--chart { align-items: flex-start; }
  :root[data-chartmax="on"] .analysis-top--chart > div:first-child { padding-top: 4px; }
  :root[data-chartmax="on"] .analysis-top--chart .title-row .title { margin-top: 2px; }

  /* Tema anahtarı ile geri tuşu alt alta, sağ üstte. */
  :root[data-chartmax="on"] .top-actions {
    flex-direction: column; align-items: flex-end; gap: 6px;
  }
  :root[data-chartmax="on"] .top-back {
    display: inline-flex; align-items: center; gap: .35em;
    height: 27px; padding: 0 .8em;
    border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-full);
    background: rgba(255,255,255,.14); color: var(--hdr-fg);
    font-size: 13px; font-weight: 700;
  }
  :root[data-chartmax="on"] .top-back:hover {
    background: rgba(255,255,255,.26); border-color: #fff;
  }
  :root[data-chartmax="on"] .top-back .icon { width: 1.05em; height: 1.05em; }
}

/* =========================================================================
   152. BİRİM SEÇİCİ — Temizle düğmesi ve arama kutusu
   -------------------------------------------------------------------------
   Başlık satırı üç parçalı: solda "Gösterilecek birimler", yanında Temizle,
   sağ üstte "Birim ara" kutusu. Uzun listelerde (39 birim) aramadan
   bulmak zordu.
   ========================================================================= */
@layer components {
  .pick-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
  }
  .pick-head .popover-title { margin: 0; flex: none; }

  .pick-reset {
    flex: none; height: 1.9em; padding: 0 .7em;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface); color: var(--buy-fg);
    font-size: calc(var(--t-panel) * .62); font-weight: 800;
  }
  .pick-reset:hover { background: var(--surface-3); border-color: var(--blue3); color: var(--blue3); }

  .pick-search {
    margin-left: auto; display: flex; align-items: center; gap: .4em;
    height: 2em; padding: 0 .6em;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface);
  }
  .pick-search .icon { width: 1em; height: 1em; opacity: .65; }
  .pick-search input {
    width: 11em; border: 0; background: none; outline: none;
    font: inherit; font-size: calc(var(--t-panel) * .62); color: var(--ink);
  }
  .pick-search input::-webkit-search-cancel-button { cursor: pointer; }
  .pick-search:focus-within { border-color: var(--blue3); box-shadow: 0 0 0 2px rgba(11,110,153,.18); }

  /* Seçeneklerde `display: flex` var; [hidden] tek başına gizlemiyor. */
  .pick-grid .opt[hidden] { display: none; }

  /* Aramada eşleşme yoksa ızgara boş kalmasın diye bilgi satırı. */
  .pick-grid[data-empty="1"]::after {
    content: 'Eşleşen birim yok';
    grid-column: 1 / -1; padding: .6em .2em;
    color: var(--fg-muted); font-size: calc(var(--t-panel) * .62); font-weight: 700;
  }
}

/* =========================================================================
   153. KURULU ALARMLAR — sağdaki boş alan kalktı
   -------------------------------------------------------------------------
   Katman 1180px genişti ama içerik 320 + 560px'de duruyordu: sağda üçte
   birlik boş bir blok kalıyordu (61. bölümdeki sabit sütun). Alarm listesi
   artık katmanın sağ kenarına kadar uzuyor, üstteki araç şeridiyle aynı
   hizada bitiyor.
   ========================================================================= */
@layer components {
  .sheet--alarm .alarm-split {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    justify-content: stretch;
  }
  /* Satır içinde koşul ile hedef arasındaki boşluk açılmasın: hedef ve
     çöp kutusu sağda toplanır, koşul metni solda kalır. */
  .sheet--alarm .aline { grid-template-columns: auto minmax(0, 1fr) auto auto; }
}

/* =========================================================================
   154. "SON 24 SAAT" KATMANI — punto küçüldü
   -------------------------------------------------------------------------
   Katman gövdesi 25px'ti; bir kartta kaynak+tarih 20,5px, başlık 25px
   çıkıyordu. Kaynak/tarih %50 (→10,3px), başlık %40 (→15px) küçüldü;
   kaynak rozeti ve kart dolgusu da yeni ölçüye oturdu.
   ========================================================================= */
@layer components {
  .arch-item {
    font-size: 15px;
    grid-template-columns: 1.75em minmax(0, 1fr);
    gap: .6em; padding: .55em .65em;
  }
  .arch-item .arch-meta { font-size: 10.3px; gap: .8em; }
  .arch-item .arch-title { font-size: 15px; line-height: 1.3; }
  .arch-item .src-icon { width: 1.75em; height: 1.75em; font-size: .78em; }
  .arch-list { gap: .4em; }
}

/* =========================================================================
   155. GRAFİĞİN SAĞINDA SABİT OKUMA PANELİ
   -------------------------------------------------------------------------
   Yüzen ipucu kutusu grafik kutusuna sığmadığında kırpılıyordu: beş
   firmadan üçü görünüyordu. Artık grafiğin sağında sabit bir panel var —
   üstte saat, altında bütün firmalar renkleriyle ve o saatteki değerle.
   İmleç grafikte gezerken panel o saate göre güncellenir, imleç yokken
   günün son değerlerinde kalır. Dar ekranda panel gizlenir, orada eski
   yüzen kutu çalışır.
   ========================================================================= */
@layer components {
  .chart-readout { display: none; }
}

@media (min-width: 811px) {
  @layer components {
    /* Kart ızgaraya döndü: solda gösterge + grafik alt alta, sağda panel
       iki satırı birden kaplıyor (kısa grafikte punto boğuluyordu). */
    .chart-card {
      display: grid; gap: 0 12px;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto minmax(0, 1fr);
      align-items: stretch;
    }
    .chart-card > .legend { grid-column: 1; grid-row: 1; }
    .chart-card > .chart-wrap { grid-column: 1; grid-row: 2; }
    .chart-card > .chart-readout { grid-column: 2; grid-row: 1 / span 2; }

    .chart-readout {
      display: flex; flex-direction: column; justify-content: center; gap: .25em;
      flex: none; width: clamp(150px, calc(13 * var(--vw)), 210px);
      padding: .5em .6em;
      background: var(--surface-2); border: 1px solid var(--line-soft);
      border-radius: var(--r-lg);
      font-size: clamp(10px, .78vw, 14px); font-weight: 700;
    }
    .cr-time {
      font-size: 1.25em; font-weight: 800; color: var(--ink);
      padding-bottom: .25em; margin-bottom: .1em;
      border-bottom: 1px solid var(--line-soft);
      text-align: center; letter-spacing: .3px;
    }
    .cr-row {
      display: grid; grid-template-columns: .7em minmax(0, 1fr) auto;
      align-items: center; gap: .45em;
      color: var(--fg-2);
    }
    .cr-row i {
      width: .7em; height: .7em; border-radius: 2px;
      background: var(--c); display: block;
    }
    .cr-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cr-row b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
    .cr-row[data-off="true"] { opacity: .35; }

    /* Panel varken yüzen kutuya gerek yok. */
    .chart-tip { display: none; }
  }
}

/* =========================================================================
   156. PANEL VE ALARM KATMANI ÖLÇÜLERİ
   -------------------------------------------------------------------------
   · Alarm ve Çeviri düğmelerinin açtığı paneller %50 küçüldü (25 → 12,5px).
   · "Kurulu Alarmlar" katmanı üçte iki genişliğe indi (1180 → 790px) ve
     yazıları %35 küçüldü; yazı tipi değişmedi. Ölçek yerel `--t-panel`
     üzerinden verildiği için katmandaki bütün parçalar birlikte küçülür.
   ========================================================================= */
@layer components {
  /* Üst bardaki Alarm ve Çeviri panelleri */
  .popover--panel { font-size: calc(var(--t-panel) * .5); }

  .sheet--alarm {
    --t-panel: 16.25px;                /* 25px'in %65'i */
    width: min(790px, 100%);
  }
  .sheet--alarm .alarm-split { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}

/* =========================================================================
   157. HABERLER KARTINDA DA 24 SAATLİK LİSTE
   -------------------------------------------------------------------------
   Düğme başlıklar şeridinde vardı; detay görünümünde kartın altında da
   yerini aldı. Kart esnek kutuya döndü ki düğme hep en altta dursun.
   ========================================================================= */
@layer components {
  .news-card { display: flex; flex-direction: column; }
  .news-card .news-feature { flex: 1 1 auto; min-height: 0; }
  .news-card .news-more { flex: none; margin-top: auto; }
}

/* =========================================================================
   ARAYÜZ ÖLÇEĞİ — %100 yakınlaştırmada %90 görünümü
   -------------------------------------------------------------------------
   Kullanıcı tarayıcıyı %90'a alınca düzen tam istediği gibi oturuyordu.
   `zoom` tarayıcı yakınlaştırmasının aynısını sayfaya uygular: her şey
   0,9 katına iner, buna karşılık görüntü alanı CSS pikseli olarak 1/0,9
   kadar genişler — yani %90'daki yerleşimin birebir aynısı.

   Görüntü alanı birimleri (dvh) yakınlaştırmadan etkilenmediği için
   kabuğun yüksekliği ölçeğe bölünür; yoksa sayfa ekranın %90'ında kalıp
   altta boşluk bırakırdı.
   ========================================================================= */
@layer base {
  :root {
    --ui-zoom: .9;
    zoom: var(--ui-zoom);
    /* Ölçeğe göre düzeltilmiş görüntü alanı birimleri */
    --vh: calc(1dvh / var(--ui-zoom));
    --vw: calc(1vw / var(--ui-zoom));
  }
}

@layer layout {
  body { height: calc(100 * var(--vh)); }
}

@layer utilities {
  @media (max-height: 460px), (max-width: 989px) {
    body { height: auto; min-height: calc(100 * var(--vh)); }
  }
  :root[data-chartmax="on"] body { height: calc(100 * var(--vh)); }
}

/* =========================================================================
   KUR KARTI BAŞLIĞI — dörtte bir küçük ve kalın
   -------------------------------------------------------------------------
   Başlık ("ESKİ YARIM - SATIŞ") fiyatın yanında fazla yer kaplıyordu:
   punto %25 kısıldı, buna karşılık kalın yazıldı ki okunurluk düşmesin.
   Ölçüyü yine `fitTickers` belirler; burada yalnız oranı düşürüyoruz.
   Seçici `.ticker .ticker-head` olmalı — daha genel kural onu yeniyor.
   ========================================================================= */
@layer tokens {
  :root { --tk-title-scale: .75; }
}

@layer components {
  .ticker .ticker-head {
    font-size: calc(var(--tk-title, 14px) * var(--tk-title-scale));
    font-weight: 700;
  }
}

/* =========================================================================
   UYGULAMA KARTI DURUM ÇUBUĞUNDA
   -------------------------------------------------------------------------
   Kart sağ sütunun tepesindeydi ve haber panelini aşağı itiyordu. Artık
   durum çubuğunun sağ ucundaki boş şeritte yatay bir şerit olarak duruyor;
   kazanılan yüksekliğin tamamı haber paneline gidiyor. Yükseklik durum
   çubuğuna göre ölçülür — `--cta-h` (başlık hizası) burada geçersiz.
   ========================================================================= */
@layer components {
  /* NOT: buraya `position: relative` yazılmamalı — çubuk `sticky` ve
     `top: var(--hdr-h)` taşıyor; `relative` o değeri gerçek bir kaydırmaya
     çevirip çubuğu üst barın altına 58px boşlukla itiyordu. */
  .status .app-cta {
    /* `container-type: inline-size` genişliği içerikten bağımsız kılıyor;
       esnek satırda kart 12px'e çöküyordu. Şeritte kapatılır. */
    container-type: normal;
    flex: none; margin-left: auto;
    display: flex; align-items: center; gap: .8em;
    width: auto; height: calc(var(--status-h, 54px) - 8px);
    padding: 0 0 0 .9em;
    border: 1px solid var(--line-card); border-radius: var(--r-full);
    background: var(--surface);
    overflow: hidden;
  }
  .status .app-cta-body {
    flex: none; display: flex; flex-direction: row; align-items: center;
    gap: .8em; padding: 0;
  }
  .status .app-cta-title {
    font-size: clamp(9px, calc(1.35 * var(--vh)), 15px);
    letter-spacing: .4px; white-space: nowrap;
  }
  .status .app-cta-badges { gap: .45em; }
  .status .app-cta-badges img { height: calc(var(--status-h, 54px) - 20px); }
  .status .app-cta-art {
    flex: none; width: auto; height: 100%;
    object-fit: cover; object-position: 50% 30%;
  }
}

/* Sağ sütun artık yalnız haber panelinden ibaret: kart kadar yükseklik
   kazandı, panel tablonun değil sayfa başlığının hizasında başlıyor. */
@layer layout {
  .right > .news-card, .right > .feed-card { margin-top: 0; }
}

/* =========================================================================
   HABER BAŞLIĞI — %20 küçük ve ekranla orantılı
   -------------------------------------------------------------------------
   Sabit punto büyük ekranda küçük kalıyordu. Değer artık görüntü alanı
   yüksekliğine bağlı: her ekranda aynı oranda, alt ve üst sınır içinde.
   Katsayılar önceki sabit değerlerin %80'i (23px → 18,4px @827px).
   ========================================================================= */
@layer tokens {
  :root, :root[data-size="md"] { --t-news-head: clamp(15px, calc(2.22 * var(--vh)), 34px); }
  :root[data-size="sm"]        { --t-news-head: clamp(13px, calc(1.93 * var(--vh)), 30px); }
  :root[data-size="lg"]        { --t-news-head: clamp(18px, calc(2.71 * var(--vh)), 42px); }

}

/* =========================================================================
   REKLAM ALANI HER MODDA AYNI BOYUTTA
   -------------------------------------------------------------------------
   Kutunun yüksekliği moda göre değişiyordu: haber açık/kapalı ve bant
   açık/kapalı kombinasyonlarının her biri kendi `min-height` değerini
   veriyordu (190px, clamp(130–200), clamp(150–240), 176px, 152px…).
   Ölçü artık tek kaynaktan: kur kartı yüksekliği (`--tick-h`) — yani
   kartların yanındayken ne ise, onlar gizlendiğinde de aynısı.
   Yalnız masaüstü terminal düzeninde geçerli; kısa/dar ekranda sayfa
   normal akışa döndüğü için kutu kendi içeriğine göre uzayabilmeli.
   ========================================================================= */
@media (min-width: 990px) and (min-height: 684px) {
  @layer utilities {
    .ad-slot,
    .bottom-row .ad-slot,
    :root[data-strip="off"] .ad-slot,
    :root[data-strip="off"] .bottom-row .ad-slot,
    :root[data-news="off"][data-strip="off"] .bottom-row .ad-slot {
      height: var(--tick-h);
      min-height: var(--tick-h);
      max-height: var(--tick-h);
    }

    .ad-slot > .ad-slider,
    .bottom-row .ad-slider,
    :root[data-news="off"][data-strip="off"] .ad-slot > .ad-slider {
      height: auto; aspect-ratio: 3 / 2;
      max-height: 100%; min-height: 0;
      margin-block: auto;
    }
  }
}

/* =========================================================================
   BÜYÜTÜLMÜŞ GÖRÜNÜM — uygulama şeridi ve daha ince üst bant
   -------------------------------------------------------------------------
   Uygulama kartı durum çubuğuna taşınınca büyütülmüş görünümden düşmüştü
   (çubuk orada gizli). `display: contents` ile çubuğun kutusu kalkar,
   içinden yalnız kart görünür kalır ve alt bandın sağ ucuna sabitlenir.
   Böylece şerit her iki görünümde de duruyor.

   Üst bant da %20 kısaldı: 78px → 62px (logo 33px → 27px).
   ========================================================================= */
@layer utilities {
  :root[data-chartmax="on"] .status { display: contents; }
  :root[data-chartmax="on"] .status > *:not(.app-cta) { display: none; }

  :root[data-chartmax="on"] .app-cta {
    container-type: normal;
    /* `top`/`left` açıkça serbest bırakılmalı: başka bir kural onları
       değer verince kutu sağ alta değil, tüm genişliğe yayılıyordu. */
    /* Şerit alt bandın İÇİNDE durur: dışarıda kalsaydı tablonun son
       satırının üstüne biner, veriyi kapatırdı. Bant bunun için 28px'ten
       48px'e çıkarıldı (aşağıda). */
    position: fixed; inset: auto 22px 6px auto; z-index: 30;
    display: flex; align-items: center; gap: .8em;
    width: auto; height: 36px; padding: 0 0 0 .9em;
    grid-template-columns: none;
    border: 1px solid var(--line-card); border-radius: var(--r-full);
    background: var(--surface);
    overflow: hidden;
  }
  :root[data-chartmax="on"] .app-cta-body {
    flex: none; display: flex; flex-direction: row; align-items: center;
    gap: .8em; padding: 0;
  }
  :root[data-chartmax="on"] .app-cta-title {
    font-size: 12px; letter-spacing: .4px; white-space: nowrap;
  }
  :root[data-chartmax="on"] .app-cta-badges { gap: .45em; }
  :root[data-chartmax="on"] .app-cta-badges img { height: 22px; }
  :root[data-chartmax="on"] .app-cta-art {
    flex: none; width: auto; height: 100%;
    object-fit: cover; object-position: 50% 30%;
  }

  /* Alt bant şeridi barındıracak kadar: 28px → 48px */
  :root[data-chartmax="on"] .footer { height: 48px; }

  /* Üst marka bandı %20 daha ince */
  :root[data-chartmax="on"] .header { height: 62px; }

  /* Logo ana sayfadakiyle birebir aynı: aynı jetondan besleniyor, ayrı bir
     ölçü tutulmuyor. Bandın yüksekliği yukarıda sabit verildiği için logo
     büyüdüğünde bant uzamıyor — 34px logo 38px yer kaplıyor, 62px banda
     rahat sığıyor. */
  :root[data-chartmax="on"] .logo { font-size: var(--t-logo); }

  /* Uygulama şeridi bandın içinde `position: fixed` duruyor ve sağ uca
     yapışıyor; sosyal ikonlar `margin-left: auto` ile aynı yere gidince
     şeridin altında kalıyor, hiç görünmüyordu. Şeridin yeri ayrılıyor. */
  :root[data-chartmax="on"] .footer { padding-right: 420px; }
  :root[data-chartmax="on"] .footer .social { gap: 10px; }
  :root[data-chartmax="on"] .footer .social-link { width: 30px; height: 30px; }
  :root[data-chartmax="on"] .footer .social-link .icon { width: 18px; height: 18px; }
  :root[data-chartmax="on"] .footer .social-link:hover {
    background: rgba(255, 255, 255, .18); color: #fff;
  }
}

/* =========================================================================
   DETAY TABLOSU BAŞLIKLARI DİKEYDE ORTALI
   -------------------------------------------------------------------------
   Başlık hücresi iki-üç satırlık en uzun başlığa göre yükseliyor; kısa
   başlıklar (Alış, Satış, Günlük Değişim, Firma) hücrenin dibine yapışıp
   uzun olanlardan ~50px aşağıda kalıyordu. Hepsi artık kendi hücresinin
   dikey ortasında.
   ========================================================================= */
@layer components {
  .market-table:not(.quote-matrix) thead th { vertical-align: middle; }
  .market-table:not(.quote-matrix) thead .th-btn {
    height: 100%; align-items: center; align-content: center;
  }
}

/* =========================================================================
   ALARM VE ÇEVİRİ PANELLERİ — her ekranda okunur punto
   -------------------------------------------------------------------------
   Panel puntosu 12,5px'ti; arayüz 0,9 ölçeğinde çizildiği için ekranda
   11,3px'e, panelin en küçük yazısı (not satırı) 8,1px'e iniyordu — büyük
   ekranda kabul edilebilir, dizüstünde okunmuyordu. Taban 16px'e çıkarıldı;
   değer piksel cinsinden olduğu için ekran boyutundan bağımsız, yani her
   ekranda aynı fiziksel büyüklükte.
   ========================================================================= */
@layer components {
  .popover--panel { font-size: calc(var(--t-panel) * .64); }
}

/* =========================================================================
   PANELLERDE TEK PUNTO — yalnız başlıklar bir tık büyük
   -------------------------------------------------------------------------
   Alarm panelinde sekiz ayrı punto vardı: 7,2 (Artan/Azalan) · 8,5 (Sıfırla)
   · 10,9 (ipucu) · 12,5 · 13,1 · 14,2 · 14,7 · 22,9 px. Hepsi panelin taban
   puntosuna eşitlendi; sadece başlık ve değer satırları %14 büyük kalıyor.
   `utilities` katmanı: bileşen kurallarının em zinciri buradan kırılır.
   ========================================================================= */
@layer utilities {
  .popover--panel * { font-size: 1em; }

  .popover--panel .popover-title,
  .popover--panel .alarm-title,
  .popover--panel .conv-label,
  .popover--panel .cur-label,
  .popover--panel .field > label,
  .popover--panel .cur-value,
  .popover--panel .step-value,
  .popover--panel .step-unit { font-size: 1.14em; }

  /* Başlık satırındaki küçük düğmeler (ör. "Sıfırla") standart kalsın:
     başlıktan miras aldıkları için onunla birlikte büyüyorlardı. */
  .popover--panel .conv-label button,
  .popover--panel .alarm-title button { font-size: .88em; }
}

/* =========================================================================
   ALARM PANELİ — hedef değer büyük, artı/eksi değerle simetrik
   -------------------------------------------------------------------------
   · Hedef değer alanı sınıfsız bir <input>; bir önceki turdaki başlık
     listesine takılmıyor, 16px'te kalmıştı. Güncel Satış ile aynı ölçüye
     çıkarıldı: ikisi de panelin okunacak sayıları.
   · Adım düğmeleri ızgarada satırın BAŞINA yaslanıyordu (kendi yükseklikleri
     34px, kutu 62px) ve değerden 14px yukarıda duruyordu. Artık dikeyde
     ortalı: eksi · rakam · artı aynı hizada.
   ========================================================================= */
@layer utilities {
  .popover--panel .stepper { align-items: center; }

  .popover--panel #alarmValue,
  .popover--panel .step-unit,
  .popover--panel .cur-value { font-size: 1.45em; }
}

/* =========================================================================
   FİLTRE SATIRI — ÜST BANTLA AYNI PUNTO
   -------------------------------------------------------------------------
   Filtreleme başlığı ve düğmeleri, üst banttaki tuşlarla (Alarm, Çeviri,
   Haber, Tam ekran) aynı boya getirildi; satır zaten sarabildiği için
   çakışma olmuyor.
   ========================================================================= */
@layer components {
  /* Punto üst banttaki tuşlarla eşitlendi. Sabit px yerine bandın kendi
     tokenı kullanılıyor: ekran küçülüp büyüdükçe ikisi birlikte ölçekleniyor. */
  .analysis-top--plain .filter-cap,
  .analysis-top--plain .filter-row .filter-btn,
  .analysis-top--chart .filter-cap,
  .analysis-top--chart .filter-row .filter-btn { font-size: var(--t-topbtn); }
}

/* =========================================================================
   LİSTE SAYFASI BAŞLIK SATIRI — filtreler başlığın üstüne binmesin
   -------------------------------------------------------------------------
   Filtre kutusu mutlak konumluydu ve başlığın üzerinde yüzüyordu; dar
   ekranda "En İyi Fiyat" düğmesi "Piyasa Özeti" yazısının üstüne biniyordu
   (punto büyüdükçe daha da soluna taşıyordu). Artık iki sütunlu bir ızgara:
   başlık solda, filtreler sağda, çakışma imkânsız. Yer kalmazsa düğmeler
   alt satıra sarar.
   ========================================================================= */
@layer components {
  .analysis-top--plain {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: center; column-gap: 18px;
  }
  .analysis-top--plain .filter-group {
    position: static; transform: none;
    justify-self: end; align-items: flex-end;
  }
  .analysis-top--plain .filter-row { flex-wrap: wrap; justify-content: flex-end; }
}

/* =========================================================================
   HABER PENCERESİ — üç kademe, ekranla orantılı
   -------------------------------------------------------------------------
   Pencerede yazılar gereğinden büyüktü (başlık 52px, gövde 31px, kaynak
   27px). Üç kademeye indirildi: BAŞLIK en büyük, GÖVDE orta, KAYNAK/SAAT
   en küçük. Değerler görüntü alanı yüksekliğine bağlı (`--vh`), alt ve üst
   sınır içinde — dizüstünde, masaüstünde ve televizyonda aynı oranda.
   ========================================================================= */
@layer utilities {
  .sheet--news .ns-head {
    font-size: clamp(22px, calc(3.4 * var(--vh)), 64px);
    line-height: 1.18;
  }
  .sheet--news .ns-body {
    font-size: clamp(14px, calc(1.95 * var(--vh)), 38px);
    line-height: 1.5;
  }
  .sheet--news .ns-meta,
  .sheet--news .ns-meta span,
  .sheet--news .ns-meta time {
    font-size: clamp(12px, calc(1.45 * var(--vh)), 28px);
  }
  .sheet--news .ns-logo { font-size: clamp(11px, calc(1.3 * var(--vh)), 25px); }
}

/* =========================================================================
   FİLTRE KUTUSU TIKLAMAYI YUTMASIN
   -------------------------------------------------------------------------
   Kutu sütun genişliğince yayılıyor, düğmeleri sağa yaslıyor; boş kalan sol
   yarısı zaman aralığı düğmelerinin (3 Ay, 6 Ay, 1 Yıl, MAX) üstüne binip
   tıklamaları yutuyordu — düğmeler görünüyor ama çalışmıyordu. Kutunun
   kendisi artık tıklama almıyor, yalnız içindeki gerçek denetimler alıyor.
   ========================================================================= */
@layer utilities {
  .filter-group { pointer-events: none; }
  .filter-group > *,
  .filter-group .filter-row,
  .filter-group .menu,
  .filter-group button,
  .filter-group .popover,
  .filter-group input,
  .filter-group label { pointer-events: auto; }
}

/* =========================================================================
   UYGULAMA KARTININ TAMAMI TIKLANABİLİR
   -------------------------------------------------------------------------
   Yalnız mağaza rozetleri bağlantıydı; "UYGULAMAYI İNDİRİN" yazısına ya da
   görsele tıklamak bir şey yapmıyordu. Kartı kaplayan bir bağlantı katmanı
   eklendi; rozetler onun üstünde kalır, böylece kendi hedefleri de çalışır.
   ========================================================================= */
@layer components {
  .app-cta { position: relative; }

  .app-cta-link {
    position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
  }
  .app-cta-badges { position: relative; z-index: 2; }
}

/* =========================================================================
   130. ALARM PANELİ VE ARANABİLİR BİRİM SEÇİCİLERİ
   -------------------------------------------------------------------------
   · Kurulu alarmların tamamı artık panelin kendi listesinde: ayrı sayfaya
     ve "devamı için tıklayın" bağlantısına gerek kalmadı, liste kendi
     içinde kaydırılıyor.
   · Alarm birimi yerli açılır liste yerine aranabilir seçicide; çeviri
     panelindeki kaynak seçiciyle aynı bileşen.
   · Tam ekran çeviri tablosunda seçiciler ızgaranın dar sütununa
     sıkışıyordu: `46%` oradaki alana göre hesaplanıyor, kutu 175px kalıyor
     ve arama kutusuyla birim adları yarım görünüyordu.
   ========================================================================= */
@layer components {
  /* — panelde tüm kayıtlar; liste kendi içinde kaydırılır — */
  .popover--panel .alarm-list {
    max-height: calc(32 * var(--vh)); overflow-y: auto; padding-right: .2em;
  }

  /* — alarm birimi: aranabilir seçici — */
  .unit-field { position: relative; }
  .unit-face {
    width: 100%; height: 3.3em; padding: 0 .85em;
    display: flex; align-items: center; justify-content: space-between; gap: .4em;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-xl);
    font-size: 1em; font-weight: 800; text-align: left;
  }
  .unit-face b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .unit-face svg { width: 1.07em; height: 1.07em; color: var(--fg-muted); flex: none; }
  .unit-face:hover,
  .unit-face[aria-expanded="true"] { border-color: var(--blue3); }
  .unit-field .unit-picker--src {
    top: calc(100% + .3em); left: 0; right: auto;
    width: max(100%, 15em); z-index: 45;
  }
  .unit-field .unit-results { max-height: calc(30 * var(--vh)); }
  .unit-results button[aria-current="true"] { background: var(--surface-3); }

  /* — tam ekran çeviri tablosu: kutular gövdenin tamamına göre ölçülür — */
  .sheet #convPicker {
    grid-column: auto; grid-row: auto;
    width: min(30em, calc(34 * var(--vw)));
    max-height: min(calc(52 * var(--vh)), 26em); overflow-y: auto;
  }
  .sheet .unit-picker--src {
    position: absolute; top: calc(100% + .3em); right: 0; left: auto;
    width: min(24em, calc(30 * var(--vw)));
    max-height: min(calc(46 * var(--vh)), 22em); overflow-y: auto;
  }
  .sheet .unit-picker--src .unit-results { max-height: none; }
}

/* =========================================================================
   131. ÇEVİRİ KAYNAK SEÇİCİSİ ALARMDAKİYLE AYNI · PANELDEN TABLOYA GEÇİŞ
   -------------------------------------------------------------------------
   Kaynak seçici doğru çalışıyordu ama listesi 9em ile sınırlıydı: dört
   buçuk satır görünüyor, alarm panelindeki seçiciden farklı duruyordu.
   İkisi de aynı yükseklikte açılır. Kurulu alarm tablosu da panelin
   altındaki düğmeden yeniden açılabiliyor.
   ========================================================================= */
@layer components {
  .popover--conv .unit-picker--src .unit-results { max-height: calc(30 * var(--vh)); }

}

/* =========================================================================
   132. ÇEVİRİ KAYNAK SEÇİCİSİ KIRPILMASIN
   -------------------------------------------------------------------------
   Seçici `.conv-top` kutusunun içindeydi; o kutu yuvarlak köşeleri için
   `overflow: hidden` taşıyor ve açılan listeyi 56 piksellik satıra
   kırpıyordu: ekranda yalnız arama kutusu görünüyor, arama alanına odak
   gelince kutu kendi içinde kayıp üstteki satırı yukarı itiyordu.
   Seçici artık `.conv-top`'un kardeşi; kırpılmadan satırın altına açılıyor.
   ========================================================================= */
@layer components {
  .popover--conv .conv-body { position: relative; }
  .popover--conv .unit-picker--src {
    position: absolute; top: auto; bottom: auto; left: auto; right: 0;
    margin-top: -.7em; width: min(26em, 100%); z-index: 45;
  }
  .sheet .unit-picker--src {
    position: absolute; top: 4.9em; right: 0; left: auto; bottom: auto;
    margin-top: 0; width: min(24em, calc(30 * var(--vw)));
  }
}

/* =========================================================================
   133. TAM EKRAN TABLOLAR TEK ÖLÇÜDE
   -------------------------------------------------------------------------
   Çeviri tablosu 25px ölçekle fazla büyük, Kurulu Alarmlar 16,25px ile
   fazla küçüktü. İkisi de aradaki değere bağlandı; kutu genişlikleri de
   aynı oranda ortalandı, böylece her iki tablonun kendi içindeki sıkışıklığı
   değişmiyor (çeviri 4 sütun, alarm iki kolon olarak kalıyor).
   ========================================================================= */
@layer components {
  .sheet--conv,
  .sheet--alarm { --t-panel: 20.5px; }
  .sheet--conv { width: min(1050px, 100%); }

  /* Alarm tablosu sabit genişlikte enine yayılıp basık bir dikdörtgene
     dönüyordu: içerik iki kolon, kutu ise 1050px. Kutu artık içeriğini
     sarıyor; kayıt arttıkça genişler, üst sınırda durur. */
  .sheet--alarm {
    width: fit-content;
    min-width: min(520px, 100%);
    max-width: min(1050px, 100%);
  }
}

/* =========================================================================
   135. ALT BANT PANELİNDEKİ ARAMA KUTUSU "BİRİM DÜZENLE" İLE AYNI
   -------------------------------------------------------------------------
   Kutunun bütün ölçüleri `em` ile veriliyor; alt banttaki panelin taban
   puntosu 11px olduğu için kutu 22px'e düşüyor, üstelik panelin kalın
   yazısını miras alıp placeholder'ı koyulaşıyordu. Taban punto ve kalınlık
   Birim Düzenle panelininkine sabitlendi: yükseklik, iç boşluk, ikon ve
   yazı birebir aynı çıkıyor.
   ========================================================================= */
@layer components {
  #tickerMenu .pick-search {
    font-size: calc(var(--t-panel) * .64);
    font-weight: 400;
  }
}

/* =========================================================================
   136. BÜTÜN "BİRİM ARA" KUTULARI TEK DÜZENDE
   -------------------------------------------------------------------------
   Uygulamada beş arama kutusu vardı ve iki ayrı ailedendi: Birim Düzenle ile
   alt bant panelinde hap kenarlı, büyüteçli, ince yazılı kutu; alarm ve
   çeviri seçicilerinde ise ikonsuz, köşeli, kalın yazılı çıplak girdi.
   Üçü de referans kutunun içine alındı; burada yalnız blok yerleşimi
   (tam genişlik, üstte durma) ayarlanıyor.
   ========================================================================= */
@layer components {
  .pick-search--block {
    margin: 0 0 .4em; width: 100%;
    font-size: calc(var(--t-panel) * .64); font-weight: 400;
  }
  .pick-search--block input { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* Panel içindeki her şeyi taban puntoya eşitleyen `utilities` kuralı arama
   girdisini de yakalıyordu; kutu referansla aynı kalsın diye ayrık tutuldu. */
@layer utilities {
  .popover--panel .pick-search--block input { font-size: calc(var(--t-panel) * .62); }
}

/* =========================================================================
   137. ARAMA KUTUSU BAŞLIK SATIRINA SIĞSIN
   -------------------------------------------------------------------------
   Kutu referans ölçüsüne (16px taban) çekilince alt bant panelinin dar
   başlık satırına sığmaz oldu: sağdan 17px taşıyordu. Kutu ve içindeki
   girdi artık kalan yere göre kısalabiliyor; geniş panelde ölçü aynı
   kalır, dar panelde kutu daralır ama görünüş değişmez.
   ========================================================================= */
@layer components {
  .pick-head { min-width: 0; }
  .pick-search { flex: 0 1 auto; min-width: 0; }
  .pick-search input { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   138. DETAY TABLOSUNDA SÜTUNLAR EŞİT BÖLÜNÜR
   -------------------------------------------------------------------------
   Genişlik içeriğe göre dağılıyordu: seviye sütunları 130-148px, canlı fiyat
   sütunları 85-93px kalıyordu. Sekiz sütun da tablonun sekizde birini alır.
   ========================================================================= */
@layer components {
  .market-table:not(.quote-matrix) { table-layout: fixed; }
  .market-table:not(.quote-matrix) thead th { width: 12.5%; }

  /* Sütun daralınca firma rozeti hücreden taşıyordu: logo kutuya sığar. */
  .market-table:not(.quote-matrix) tbody th[scope="row"] .firm { max-width: 100%; }
}

/* =========================================================================
   139. ALT BANTTA SOSYAL MEDYA SİMGELERİ
   -------------------------------------------------------------------------
   Menü bağlantılarının solunda duruyor; alt bandın kendi rengini ve punto
   ölçüsünü izliyorlar.
   ========================================================================= */
@layer components {
  .footer .social { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .footer .social + .links { margin-left: 46px; }
  .footer .social-link {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: var(--r-full);
    color: inherit;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .footer .social-link .icon { width: 16px; height: 16px; }
  .footer .social-link:hover { background: var(--surface-3); color: var(--blue3); }
}

/* =========================================================================
   140. YÖNETİM PANELİNDEN GELEN İÇERİK
   -------------------------------------------------------------------------
   Reklam kartına görsel konabiliyor (yazı okunur kalsın diye üzerine koyu
   bir perde geliyor) ve haber şeridine "REKLAM" etiketli bir satır
   eklenebiliyor. İkisi de panelde kapalıyken sayfa eskisi gibi görünür.
   ========================================================================= */
@layer components {
  /* Alan çoğu genişlikte tam 3:2 (279×186, telefonda 372×248), ama ara
     genişliklerde alt şerit kartın yüksekliğine uyduğu için 279×157'ye
     (~16:9) düşüyor. `contain` orada görselin iki yanında koyu bant
     bırakıyordu — reklam kutusu yarım dolu görünüyordu. `cover` kutuyu
     her zaman dolduruyor; 3:2 kreatif en kötü durumda üstten/alttan
     toplam %16 kırpılıyor, o da kompozisyonun boş payına denk geliyor.
     Kreatifi 3:2 hazırlayıp kenarlara kritik öğe koymamak yeterli. */
  .ad-slide[data-gorselli] {
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
  }
  .ad-slide[data-gorselli]::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(6,32,45,.86), rgba(6,32,45,.55));
  }

  .feed-ad { text-decoration: none; }
  .feed-ad .feed-meta b { color: var(--brand, #1e9bd7); letter-spacing: .06em; }
  .feed-ad-icon { overflow: hidden; background: var(--surface-3); color: var(--fg-muted); }
  .feed-ad-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* Sponsorlu haber kartındaki CTA satırı. */
@layer components {
  .feed-ad-cta {
    display: inline-block; margin-top: .25em;
    font-size: .82em; font-weight: 800; color: var(--brand, #1e9bd7);
  }
}

/* =========================================================================
   141. HABER KARTINDA SPONSORLU SLAYT
   -------------------------------------------------------------------------
   "Haber detayı" yerleşimli native kampanya, HABERLER kartının döngüsüne
   girer ve sırası gelince haberin yerine geçer. Düzen yukarıdan aşağı:
   marka + "Sponsorlu" etiketi · görsel · başlık · açıklama · CTA.

   Kart yüksekliği sabit olduğu için ızgara kuruluyor: görsel kalan alanı
   alır, yazılar kendi yüksekliğinde durur. Görsel `contain` ile yerleşir —
   kırpılmaz, kendi oranında ölçeklenir. Açıklama satır sınırıyla kesilir;
   taşıp kartın dışına çıkmaz.
   ========================================================================= */
@layer components {
  .news-ad { display: none; }

  /* Reklam sırasındayken haber alanları kapanır. */
  .news-slide[data-ad] .news-meta,
  .news-slide[data-ad] .news-head,
  .news-slide[data-ad] .news-pagebar,
  .news-slide[data-ad] .news-body { display: none; }

  /* Görsel alanı 3:2 — kreatif 2400×1600 hazırlanıyor, boşluksuz otursun.
     Kalan yüksekliği açıklama alır; kart kısaldığında görsel oranını korur,
     kısalan açıklama olur. */
  .news-slide[data-ad] .news-ad {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: clamp(6px, 1.4cqh, 12px);
    height: 100%;
    min-height: 0;
    cursor: pointer;
  }

  /* — üst satır: marka solda, "Sponsorlu" sağda — */
  .news-ad-ust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0; min-width: 0;
  }
  .news-ad-marka {
    font-size: var(--t-news-meta); font-weight: 800; color: var(--fg-muted);
    letter-spacing: .04em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .news-ad-etiket {
    flex: none;
    font-size: calc(var(--t-news-meta) * .92); font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand, #1e9bd7);
    background: color-mix(in srgb, var(--brand, #1e9bd7) 12%, transparent);
    border-radius: var(--r-full);
    padding: .25em .7em;
  }

  /* — görsel: kendi oranında, kırpılmadan —
     Eskiden kutu 3:2'ye sabitti ve `contain` ile boyanıyordu: 3:2 olmayan
     kreatifin altında üstünde açık renk bantlar kalıyor, kart dağınık
     görünüyordu. Artık kreatif <img> olarak basılıyor ve kutu görselin
     KENDİ oranını alıyor — hangi ölçü gelirse gelsin bant oluşmuyor,
     kırpma da yok. Üst sınır kartın yarısı: yüksek bir kreatif başlığı ve
     açıklamayı ezmesin. */
  .news-ad-gorsel {
    display: block;
    width: auto; height: auto;
    max-width: 100%; max-height: 46cqh;
    margin-inline: auto;
    border-radius: var(--r-md, 10px);
  }
  .news-ad-gorsel[hidden] { display: none; }

  /* — başlık — */
  .news-ad-baslik {
    margin: 0;
    font-size: var(--t-news-head); font-weight: 800; line-height: 1.2;
    color: var(--fg);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* — açıklama: kalanı doldurur, taşarsa kesilir — */
  .news-ad-aciklama {
    margin: 0;
    font-size: var(--t-news-body); line-height: 1.45; color: var(--fg-2);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .news-ad-cta {
    justify-self: start;
    font-size: var(--t-news-meta); font-weight: 800;
    color: var(--brand, #1e9bd7);
  }
  .news-ad-cta[hidden] { display: none; }

  /* Görsel yokken yazılar alanı paylaşsın; boş kutu bırakılmaz. */
  .news-slide[data-ad] .news-ad:has(.news-ad-gorsel[hidden]) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
}

/* Dar ekranda kart kendi içeriğine göre uzuyor: görsele sabit bir yükseklik
   verilir, yoksa `1fr` sıfıra iner ve görsel kaybolur. */
@media (max-width: 1099px) {
  @layer components {
    /* Dar ekranda da oran korunur; sabit yükseklik verilmiyor. */
    .news-slide[data-ad] .news-ad { grid-template-rows: auto auto auto auto auto; }
    .news-ad-aciklama { -webkit-line-clamp: 4; }
  }
}

/* =========================================================================
   142. REKLAM ALANI HER KIRILIMDA 3:2
   -------------------------------------------------------------------------
   Kreatifler 2400×1600 hazırlanıyor; alan da aynı oranda olmalı ki görsel
   boşluksuz otursun. Oran kırılım kırılım verilince 811–989 px arası boşta
   kalmıştı — burada tek yerden, en son katmandan veriliyor.

   `align-self` şart: `.ad-slot` ve `.bottom-row` birer flex kutu, öntanımlı
   `stretch` şeridi dikeyde gerip `aspect-ratio`yi tamamen yok sayıyor.
   ========================================================================= */
@layer utilities {
  .ad-slider {
    height: auto;
    aspect-ratio: 3 / 2;
    align-self: center;
  }
}

/* =========================================================================
   143. KUR BANDINI KAPATAN OK — "Bant Akışı" düğmesinin içinde
   -------------------------------------------------------------------------
   Onay tiki ile ayrı duran yuvarlak kapatma oku tek düğmede birleşti; iki
   denetim aynı işi yapıyordu. Tik kutusunun yerini ok aldı: açıkken aşağı
   (dokununca bandı indirir), kapalıyken yukarı (geri getirir). Durum yine
   aria-checked'te, dönüş de ona bağlı.

   Düğme ayak çubuğunda durur, bandın içinde değil: bant kapanınca ızgara
   satırı tamamen kalkıyor, orada olsaydı kapandığında geri açma yolu
   kalmazdı.

   Rengi, birleşmeden önceki yuvarlak okun rengi: bandın saydam beyaz
   çiplerinden ayrışsın diye düz beyaz zemin ve marka mavisi. 148. bölümdeki
   bant kuralını geçmek için bir sınıf daha özgül.
   ========================================================================= */
@layer components {
  /* Ayak bandındaki iki düğme de aynı görünür: beyaz zemin, marka mavisi.
     Renkler tema belirtecine bağlanmıyor — bant (148. bölüm) iki temada da
     kurumsal mavi kalıyor, oysa --surface koyuda #091921'e dönüyor ve çip
     mavi bandın üstünde kararıyordu. */
  .footer .footer-check.strip-toggle,
  .footer .tk-settings .square {
    background: #fff;
    color: var(--brand, #1e9bd7);
    border-color: #d3ecf7;
  }
  .footer .footer-check.strip-toggle:hover,
  .footer .tk-settings .square:hover {
    background: #eaf6fc;
    border-color: var(--brand, #1e9bd7);
  }

  /* "Düzenle" açıkken ters dönüyor: beyaz artık dinlenme hâli olduğu için
     açık olduğu dolu maviden anlaşılmalı. */
  .footer .tk-settings .square[aria-expanded="true"] {
    background: var(--brand, #1e9bd7);
    border-color: var(--brand, #1e9bd7);
    color: #fff;
  }

  /* Tek simge var; kapalıyken çevrilerek yukarıyı gösteriyor. Dönüş
     geçişsiz: yön bir durum göstergesi, animasyon saati duraklarsa (arka
     plandaki sekme, azaltılmış hareket) ok yanlış yöne bakmış kalmasın. */
  /* Yazıdan belirgin biçimde büyük: düğmenin asıl anlatan parçası ok,
     etiket değil. Kutu düğme boyuyla sınırlı (2em), ama çizim değil: chevron
     24x24 kutunun yalnız ortasını kullanıyor (x 6-18, y 9-15), yani boşluğun
     çoğu boş. Ok bu yüzden ölçeklenerek büyütülüyor — düğme boyu, hizası ve
     yanındaki "Düzenle" çipiyle aynı yüksekliği bozulmadan çizim büyüyor.

     Seçici iki sınıflı: tek başına ".strip-chev" (0,1,0), aynı katmandaki
     ".filter-btn svg" (0,1,1) kuralına yeniliyor ve ok 1.05em'de kalıyordu. */
  .strip-toggle .strip-chev {
    width: 1.8em; height: 1.8em;
    stroke-width: 2;
    transform: scale(1.6);
  }
  /* Kapalıyken yön dönüyor; ölçek korunmalı, yoksa ok küçülerek dönerdi. */
  .strip-toggle[aria-checked="false"] .strip-chev { transform: rotate(180deg) scale(1.6); }
}

/* ---------------------------------------------------------------------------
   Düz metin sayfaları (yasal uyarı vb.) — kabuk aynı, gövde okunur bir sütun.
   Katman sırası dosyanın başında bildirildi; buraya eklemek sırayı bozmaz.  */
@layer components {
  .text-page {
    max-width: 72ch;
    padding: 4px 12px 32px 4px;
    overflow: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg);
  }
  .text-page p { margin: 0 0 14px; }
  .text-page a { color: var(--fg-nav); text-decoration: underline; text-underline-offset: 2px; }
  .text-page .subtitle { margin-top: 20px; }
}

/* =========================================================================
   144. İNCE PUNTO — ÖLÇÜM YALNIZ KISAR, BÜYÜTMEZ
   -------------------------------------------------------------------------
   Tablo puntosu iki adımda oturuyordu: sayfa önce CSS'in taban puntosuyla
   (ince) boyanıyor, `fitTable` / `fitDetail` bitince punto kutuyu
   dolduracak kadar büyüyordu. Kullanıcı her açılışta ince yazının
   kalınlaşmasını görüyordu; istenen, ince hâlin kalması.

   Artık taban punto NİHAİ değerdir: ölçüm yalnız sığmayan durumlarda
   (dar sütun, çok satır, küçük pencere) puntoyu kısar — hiçbir zaman
   büyütmez. Tavan ayrı jetonlarda tutuluyor ki ileride tek yerden
   yükseltilebilsin; kırılımlara göre değişen üst sınır jetonları
   (`--t-*-max`) olduğu gibi duruyor, tavan onların da altında kalır.

   Aynı tavanlar `buluro.tools.js` içinde de okunuyor: ölçüm büyütme
   turlarını bu değerde durdurur, yoksa jetona boşuna değer yazardı.
   ========================================================================= */
@layer tokens {
  :root {
    /* TAVANLAR KALDIRILDI. Bunlar puntoyu ince tabana sabitliyordu;
       sonuç olarak rakamlar 1366'dan 1920'ye kadar hep 12px kalıyor,
       TV'de de büyümüyordu. Punto yine kutuyu dolduruyor; üst sınır
       kırılıma göre gelen `--t-*-max` jetonları (kodda yazılı). */
    --t-quote-tavan:  var(--t-quote-max);
    --t-unit-tavan:   var(--t-unit-max);
    --t-detail-tavan: var(--t-detail-max);

    --t-quote: min(var(--t-quote-max), var(--t-quote-auto, var(--t-quote-min, 15px)),
                   var(--t-quote-tavan));
    --t-unit:  min(var(--t-unit-max), var(--t-unit-auto, 12px), var(--t-unit-tavan));
    --t-detail: min(var(--t-detail-max), var(--t-detail-auto, 11px), var(--t-detail-tavan));
  }
}

/* =========================================================================
   145. İNCE PUNTO — KUR KARTLARI DA (alt bant)
   -------------------------------------------------------------------------
   144. bölüm tabloyu ince tuttu ama alt banttaki kur kartları kendi ölçüm
   motorundan (`fitTickers`) besleniyor ve büyük kırılımın tavanlarına
   (fiyat 44px, veri 30px) kadar büyüyordu: tablo incelince kartlar
   orantısız kalın göründü.

   Kartlara da aynı kural: taban punto — yani ölçüm çalışmadan önceki
   yedek değerler (bkz. `.ticker-price` vb. bileşen kuralları) — nihai
   değerdir. `fitTickers` dar kartta yine kısar; büyütmez.
   ========================================================================= */
@layer tokens {
  :root {
    /* TELEFON VE TABLETTE TAVAN DURUYOR.

       Tavanlar kartları ince tabana sabitliyordu; masaüstünde büyük fiyat
       kutuyu doldururken alt satırlar 12–16px'de kalıp orantısız küçük
       görünüyordu, o yüzden orada kaldırıldı (aşağıdaki 811px kuralı).
       Ama telefonda kart zaten dar: tavan kalkınca fiyat 34 → 43px'e
       çıkıp kartı eziyordu. Mobil kademe bu değerlerle kalıyor. */
    --tk-title-tavan: 14px;   /* kart adı ("DOLAR / TL - SATIŞ") */
    --tk-price-tavan: 34px;   /* büyük fiyat                     */
    --tk-chg-tavan:   15px;   /* yüzde değişim rozeti            */
    --tk-label-tavan: 12px;   /* alt satır etiketleri            */
    --tk-value-tavan: 16px;   /* alt satır değerleri             */
  }
}

/* Masaüstünde tavan yok: punto kırılımın kendi üst sınırına kadar çıkar.
   Eşik 811px — projedeki mobil/masaüstü ayrımıyla aynı. */
@media (min-width: 811px) {
  @layer tokens {
    :root {
      --tk-title-tavan: var(--tk-title-max);
      --tk-price-tavan: var(--tk-price-max);
      --tk-chg-tavan:   var(--tk-chg-max);
      --tk-label-tavan: var(--tk-label-max);
      --tk-value-tavan: var(--tk-value-max);
    }
  }
}

/* =========================================================================
   146. KAYNAK ROZETİ PALETİ — tanımlı markası olmayan beslemeler
   -------------------------------------------------------------------------
   Rozet renkleri yalnız dört eski kaynak için tanımlıydı (Bloomberg HT,
   Reuters, Foreks, CNBC-e); `HABER_RSS_URL` ile eklenen her yeni kaynak
   Bloomberg'in lacivertine düşüyordu. İki ajans yan yana aynı rozetle
   görünüyor, "Son 24 Saat" listesi tek renk kalıyordu.

   Artık marka rozeti olmayan kaynağa adından türetilen sabit bir renk
   veriliyor (`srcClass`, buluro.page.js): aynı ad her zaman aynı rengi
   alır, ayrı adlar birbirinden ayrışır. Tonlar beyaz yazıyla okunacak
   kadar koyu; rozet iki temada da aynı durur.
   ========================================================================= */
@layer components {
  .src-k1 { background: #1d6f8b; }   /* petrol mavisi */
  .src-k2 { background: #b4462f; }   /* kiremit       */
  .src-k3 { background: #2f7d4f; }   /* yeşil         */
  .src-k4 { background: #6b4c9a; }   /* mor           */
  .src-k5 { background: #a8621b; }   /* kehribar      */
  .src-k6 { background: #2b5fa8; }   /* mavi          */
  .src-k7 { background: #8a2f5c; }   /* bordo         */
  .src-k8 { background: #4a6b2f; }   /* zeytin        */
}

/* =========================================================================
   147. TABLO HABER KARTIYLA AYNI ÇERÇEVEDE — kırıntı ve "Filtreleme" etiketi
   -------------------------------------------------------------------------
   Sayfa başlığının iki yanındaki "Ana Sayfa" kırıntısı ve "FİLTRELEME"
   etiketi görsel olarak kaldırıldı; ikisi de ekran okuyucuda duruyor
   (`clip` ile gizleniyor, `display:none` değil) — konum bilgisi ve filtre
   satırının başlığı kaybolmasın.

   Fiyat tablosu, sağdaki haber kartıyla aynı dili konuşuyor: aynı vurgu
   çerçevesi ve köşe yarıçapı, başlık şeridinde aynı lacivert zemin
   (`--blue2`) ve beyaz yazı. Firma logoları kendi açık zemininde kalır —
   laciverte alınınca marka renkleri bozuluyordu.
   ========================================================================= */
@layer components {
  /* — kırıntı ve filtre etiketi: görünmez, okunabilir — */
  .analysis-top .breadcrumb,
  .analysis-top .filter-cap {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }

  /* — tablo kabı: haber kartının çerçevesi — */
  .table-card {
    border: 1.5px solid var(--line-accent);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: var(--sh-1);
    overflow: hidden;
  }

  /* — başlık şeridi: "Birim" köşesi ve Alış/Satış satırı —
     Lacivertti, beyaza döndü. Şerit tablonun kendi zemininde kalıyor;
     ayırt edici olan koyu yazı ve alttaki ayraç çizgileri. */
  .quote-matrix .firm-row th.unit-head,
  .quote-matrix .side-row th {
    background: var(--surface);
    color: var(--fg);
  }
  .quote-matrix .side-row th.side-buy,
  .quote-matrix .side-row th.side-sell { color: var(--fg-muted); }

  /* AYRAÇLAR — başlık şeridinde gövdeyle AYNI yerde, aynı kalınlıkta ve
     aynı renkte; çizgi tepeden tırnağa tek parça okunuyor (150. bölüm).

     NOT: burada eskiden yorum bloğu erken kapanıyordu ('… binsin. */' ve
     ardından yorum sanılan üç satır daha). Kalan metin CSS olarak
     ayrıştırılıp altındaki kuralı da düşürüyordu — `rgba(0,0,0,.16)`
     hiç uygulanmıyordu, ölçümde her yerde .24 çıkıyordu. */
  /* Alış|Satış arasına çizgi girmesin: gövdede de yok. */
  .quote-matrix .side-row th.side-sell { border-left: 0; }
}

/* =========================================================================
   148. BAŞLIK ŞERİDİ TAM LACİVERT — beyaz logolar, lacivert birim sütunu
   -------------------------------------------------------------------------
   147. bölüm "Birim" köşesini ve Alış/Satış satırını laciverte almıştı;
   logo bandı ile birim sütunu açık kalınca başlık ikiye bölünmüş
   görünüyordu. Şerit artık tek parça.

   Logolar tek renk beyaza indiriliyor (`brightness(0) invert(1)`): beş
   marka farklı renk ve zeminde olduğu için lacivertte dağınık duruyordu.
   EHG ve Sağlamoğlu JPG'di, beyaz zeminleri opaktı — saydam PNG'ye
   çevrildi (`.claude/gen-content.mjs` dosya adları da güncellendi),
   yoksa beyaza boyanınca dolu bir dikdörtgen çıkıyordu.
   ========================================================================= */
@layer components {
  /* — logo bandı beyaz —
     Bant bir süre lacivertti; beyaza döndü. Firma renkleri (`[data-band]`,
     3693. bölüm) yeniden görünür, logolar kendi renklerinde kalır. */
  .quote-matrix .firm-row th { background: var(--surface); }

  /* Logolar banda göre biraz küçük: kurumsal dosyalar eskilerden çok daha
     büyük çözünürlüklü ve şeridi neredeyse tümüyle kaplıyordu.

     Küçültme `padding` ile YAPILMIYOR: `.firm img` zaten `width/height:100%`
     ve `.firm` kutusu `overflow:hidden` — dolgu eklenince görsel kutudan
     taşıp kırpılıyor, logo tümden kayboluyordu. `scale` düzeni hiç
     etkilemez, bant yüksekliği ve hizalama aynı kalır. */
  .quote-matrix .firm-row th .firm img { transform: scale(.82); }
  /* Logolar firmaların kendi yüksek çözünürlüklü dosyaları (SVG / büyük
     PNG). Dördü koyu zemin için hazır: Nadir'in GECE sürümü beyaz yazılı,
     Sağlamoğlu'nun SVG'si beyaz kelime markası + renkli amblem, EHG ve
     Yazıcı altın tonlu. Onlara dokunulmuyor.

     Tek istisna Harem: kelime markasının "HAREM" yarısı koyu lacivert,
     bizim şeridimizde kayboluyor. Markanın koyu zemin sürümü verilmediği
     için tek renk beyaza indiriliyor — "ALTIN"ın altın tonu da beyaza
     dönüyor ama marka bütün ve okunur kalıyor. */
  /* Harem'in beyaza indirilmesi kalktı: beyaz şeritte markayı yok
     ediyordu. Logolar artık kendi renkleriyle duruyor. */

  /* — birim sütunu: zemin beyaz, yazı koyu —
     Lacivert yalnız BAŞLIK şeridine ait. Gövdedeki birim sütunu tablonun
     kendi zemininde kalır; laciverte alınınca satırlar iki ayrı tabloymuş
     gibi bölünüyordu. Adlar bir kademe kalın — punto artırılmadı, tablo
     puntosu bilerek ince (bkz. 144. bölüm). */
  .quote-matrix tbody th.unit .row-link { font-weight: 900; letter-spacing: .1px; }
}

/* =========================================================================
   149. SAYFA BAŞLIĞI — vurgu çizgisi ve filtre satırıyla aynı hiza
   -------------------------------------------------------------------------
   Başlık marka mavisine alındı ve soluna vurgu çizgisi kondu; haber
   kartının lacivert şeridiyle aynı aileden ama şerit kadar ağır değil.

   Hiza: kırıntı gizlenince (147. bölüm) başlığın üstündeki 16px boşluk
   anlamını yitirdi ve başlık sağdaki filtre satırından aşağıda kalıyordu.
   Filtre kümesi zaten kutunun dikey ortasında duruyor (`top:50%`); başlık
   sarmalayıcısı da ortalanınca ikisi aynı hizaya oturuyor.
   ========================================================================= */
@layer components {
  /* Başlık satırı ile sağdaki HABERLER bandı aynı çizgide başlasın.
     Sol ve sağ sütun zaten aynı y'de açılıyor; içerik dikey ortalanınca
     başlık bandın ~23px altına düşüyordu. Üste hizalandı: filtre satırının
     ortası bandın ortasıyla çakışıyor, başlık da bandın üst kenarından
     başlıyor. */
  /* Kutunun taban yüksekliği (80px) kırıntı + başlık iki satırken
     anlamlıydı; kırıntı gizlenip içerik üste alınınca altta ~42px ölü
     boşluk kalıyor ve tablo aşağı itiliyordu. Taban, içeriğe sayfanın
     dikey ritmi kadar (≈16px) pay bırakacak ölçüye çekildi. */
  .analysis-top--plain { align-items: start; min-height: 54px; }
  .analysis-top--plain > div:first-child { display: flex; align-items: flex-start; }
  .analysis-top--plain .filter-group { top: 0; transform: none; }

  .analysis-top--plain .title-row { margin: 0; }
  .analysis-top--plain .title {
    margin: 0;
    color: var(--blue2);
    border-left: 6px solid var(--line-accent);
    border-radius: 2px;
    padding-left: 14px;
    line-height: 1.05;
  }

  /* Koyu temada --blue2 koyu zeminde sönük kalıyor; başlık bir kademe
     parlak tona alınır (şerit dolgu olduğu için o olduğu gibi kalabilir). */
  :root[data-theme="dark"] .analysis-top--plain .title { color: var(--line-accent); }
}

/* ---------------------------------------------------------------------------
   Alarm tetiklendi: üst bardaki düğme. Rozet bekleyen sayıyı gösterir, zil üç
   kez hafifçe sallanır; hareket azaltılmışsa yalnız renk değişir.            */
@layer tokens {
  :root { --alarm-alert: #ffc93c; --alarm-alert-ink: #1b1400; }
  :root[data-theme="dark"] { --alarm-alert: #ffd35c; --alarm-alert-ink: #1b1400; }
}
@layer components {
  #alarmBtn { position: relative; }
  #alarmBtn .alarm-badge {
    position: absolute; top: -4px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--alarm-alert-ink); background: var(--alarm-alert);
    border-radius: 999px; box-shadow: 0 0 0 2px var(--hdr-2);
    font-variant-numeric: tabular-nums;
  }
  #alarmBtn[data-alert="on"] { background: var(--hdr-surface); }
  /* Zil çizgi çizimi (`.icon { fill: none }`); uyarı hâlinde içi de dolar,
     böylece sarı rozetle aynı ağırlıkta okunur. `<use>` gölge ağacına
     seçici giremiyor, ama `fill` kalıtımla iki yola da geçiyor. */
  #alarmBtn[data-alert="on"] .icon {
    color: var(--alarm-alert); fill: var(--alarm-alert);
    transform-origin: 50% 12%; animation: alarm-ring 1.6s var(--ease-out) 1;
  }
  @keyframes alarm-ring {
    0%, 100% { transform: rotate(0); }
    12%  { transform: rotate(14deg); }
    24%  { transform: rotate(-12deg); }
    36%  { transform: rotate(9deg); }
    48%  { transform: rotate(-6deg); }
    60%  { transform: rotate(3deg); }
    72%  { transform: rotate(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #alarmBtn[data-alert="on"] .icon { animation: none; }
  }
}

/* ---------------------------------------------------------------------------
   Reklamveren slaytı: görsel temiz görünür (perde yalnız başlık varsa), slaytın
   tamamı hedef bağlantısıdır; mağaza rozetleri yalnız kabuk tanıtımında.  */
@layer components {
  .ad-slide[data-gorselli]:not([data-baslikli])::before { display: none; }
  .ad-slide[data-campaign] { cursor: pointer; }
  .ad-slide .ad-link {
    position: absolute; inset: 0; z-index: 2;
    display: block; border-radius: inherit;
    text-decoration: none; color: transparent;
  }
  .ad-slide[data-campaign] .ad-cta-body { position: relative; z-index: 1; pointer-events: none; }
}

/* =========================================================================
   150. TABLO IZGARASI — tek çizgi, tepeden tırnağa aynı
   -------------------------------------------------------------------------
   Ölçüldü: aynı dikey çizgi tablo boyunca üç kez değişiyordu.

     · RENK — lacivert başlıkta rgba(0,0,0,.16/.24), gövdede #b9d9ea.
       Koyu çizgi lacivert üstünde neredeyse görünmüyordu, açık mavi
       gövdede belirgindi: çizgi başlıkta kaybolup gövdede başlıyor gibi
       duruyordu. Artık başlıkta da AÇIK — beyazın soluğu. Zemin değişince
       ton değişiyor, ağırlık değişmiyor.

     · KALINLIK — Birim|firma sınırı logo bandında 2px, Alış/Satış
       satırında ve gövdede 1px idi (105. bölümdeki `:first-of-type`
       kuralı yüzünden). Tek bir dikey çizgi yarı yolda inceliyordu.
       Artık her yerde 2px, firma|firma ayraçlarıyla aynı.

   Alış|Satış arasında çizgi yok — iki sütun zaten dolgu rengiyle ayrılıyor.
   ========================================================================= */
@layer components {
  /* Başlıktaki ayraçlar gövdedekiyle AYNI renk: şerit beyaza döndüğü için
     artık ayrı bir ton gerekmiyor, çizgi tepeden tırnağa tek parça. */
  .quote-matrix .firm-row th:not(.unit-head),
  .quote-matrix .side-row th:nth-child(odd),
  .quote-matrix thead th[data-firm][colspan],
  .quote-matrix .side-row th.side-buy {
    border-left-color: var(--firm-sep);
  }

  /* Kalınlık için ayrı kural yok: ilk ayracı incelten 105. ve 114.
     bölümlerdeki `:first-of-type` kuralları kaynağında kaldırıldı,
     üstlerine bir override daha yığmak yerine. */

  /* Alış|Satış arasına çizgi girmesin (147. bölümdeki kural korunuyor). */
  .quote-matrix .side-row th.side-sell { border-left: 0; }
}