/* ============================================================================
   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
   ==========================================================================*/

/* ————————————————————————————————————————————————————————————————
   Inter — yerel barındırılıyor. Harici font sunucusuna istek gitmez:
   sayfa geçişleri anlık, çevrimdışı çalışır, KVKK açısından da temiz.
   Kaynak: Google Fonts (SIL Open Font License 1.1)
   ———————————————————————————————————————————————————————————————— */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* =========================================================================
   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: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, "Noto 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: 100dvh;
    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, 948px) 391px;
    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: 391px; 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: 391px; 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: 1600px) {
    .main { grid-template-columns: minmax(0, 1fr) 391px; }
  }

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

  @media (max-width: 1279px) {
    .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: 1099px) {
    .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: 899px) {
    .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: 639px) {
    .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-font: Georgia, "Times New Roman", serif; --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-font: Georgia, "Times New Roman", serif; --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; font-size: 9.5px; }

  .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: 1099px) {
    .table-card--tall { height: auto; max-height: 620px; }
  }
  @media (max-width: 899px) {
    .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: 100dvh;
    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: 759px), (max-width: 1099px) {
    body { height: auto; min-height: 100dvh; overflow: visible; display: block; }
    .main { padding: 16px 35px 0; }
    .left, .right, #pageMain { display: block; }
    .table-card--tall { height: auto; max-height: 566px; }
    .table-card { height: 253px; }
    .bottom-row { margin-top: 26px; }
    .news-card { min-height: 0; }
    .feed-card { height: 313px; }
    .right > .ad-image { margin-top: 10px; padding-top: 0; }
    .footer { height: 68px; margin-top: 12px; }
    .header { position: sticky; top: 0; }
  }

  @media (max-width: 1099px) {
    .main { padding-inline: 24px; }
  }
  @media (max-width: 639px) {
    .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Ğİ — üç boyut
   -------------------------------------------------------------------------
   Üst bardaki "T" menüsü <html data-size="sm|md|lg"> değerini değiştirir.
     sm — dizüstü ekran
     md — masaüstü / büyük monitör (varsayılan)
     lg — 55" TV ve üzeri
   Haber paneli kapalıyken tabloya daha çok genişlik kaldığı için puntolar
   bir kademe daha büyür.
   ========================================================================= */
@layer tokens {
  /* Punto ölçeği — üç boyut.
     `--t-quote-max` her boyutun üst sınırı; gerçek punto JS'in ölçtüğü
     `--t-quote-auto` ile sınırlanır: sütuna sığan EN BÜYÜK değer seçilir.
     Haber paneli kapanınca genişlik arttığı için punto kendiliğinden büyür. */
  :root, :root[data-size="md"] {
    --t-quote-max:  32px;
    --t-row-min:    1.85;
    --t-fit-vertical: 1;
    --t-unit-max:   23px;
    --t-firm:       20px;
    --t-side:       13.5px;
    --t-unitcol:    240px;
    --t-title:      42px;
    --t-subtitle:   19px;

    --tick-h:       252px;
    --t-tick-head:  17.5px;
    --t-tick-price: 52px;
    --t-tick-chg:   25px;
    --t-tick-label: 12px;
    --t-tick-val:   17px;
  }

  :root[data-size="sm"] {
    --t-quote-max: 24px;  --t-unit-max: 21px;  --t-row-min: 1.95;  --t-fit-vertical: 1;  --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;
  }

  :root[data-size="lg"] {
    --t-quote-max: 42px;  --t-unit-max: 26px;  --t-row-min: 1.72;  --t-fit-vertical: 0;  --t-firm: 23px;  --t-side: 15.5px;
    --t-unitcol: 272px;   --t-title: 48px;     --t-subtitle: 21px;
    --tick-h: 296px;      --t-tick-head: 20px; --t-tick-price: 62px; --t-tick-chg: 29px;
    --t-tick-label: 13.5px; --t-tick-val: 19.5px;
  }

  /* türetilenler — boyut bloklarından sonra gelmeli */
  :root {
    --t-quote: min(var(--t-quote-max), var(--t-quote-auto, var(--t-quote-max)));
    --t-unit:  min(var(--t-unit-max),  var(--t-unit-auto,  var(--t-unit-max)));
    --t-row:   calc(var(--t-quote) * 2.5);
  }
}

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

  .quote-matrix .firm-row th { height: calc(var(--t-row) * .86); font-size: var(--t-firm); }
  .quote-matrix .side-row th { top: calc(var(--t-row) * .86); height: calc(var(--t-row) * .62); font-size: var(--t-side); }
  .quote-matrix .unit-head   { font-size: var(--t-side); }

  .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) 391px;
    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: 759px), (max-width: 1099px) {
    .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, :root[data-size="md"] { --t-quote-min: 17px; }
  :root[data-size="sm"]        { --t-quote-min: 15px; }
  :root[data-size="lg"]        { --t-quote-min: 19px; }
}

/* =========================================================================
   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, :root[data-size="md"] { --tick-h: clamp(158px, 23dvh, 252px); }
  :root[data-size="sm"]        { --tick-h: clamp(146px, 20dvh, 212px); }
  :root[data-size="lg"]        { --tick-h: clamp(176px, 27dvh, 300px); }
}

/* =========================================================================
   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, :root[data-size="md"] {
    --tk-title-max: 16px;  --tk-price-max: 46px;  --tk-chg-max: 20px;
    --tk-label-max: 15px;  --tk-value-max: 21px;
  }
  :root[data-size="sm"] {
    --tk-title-max: 13px;  --tk-price-max: 36px;  --tk-chg-max: 16px;
    --tk-label-max: 12.5px; --tk-value-max: 17px;
  }
  :root[data-size="lg"] {
    --tk-title-max: 21px;  --tk-price-max: 60px;  --tk-chg-max: 26px;
    --tk-label-max: 19px;  --tk-value-max: 27px;
  }
}

/* =========================================================================
   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, :root[data-size="md"] { --tk-price-share: .50; --tk-value-share: .56; }
  :root[data-size="sm"]        { --tk-price-share: .46; --tk-value-share: .52; }
  :root[data-size="lg"]        { --tk-price-share: .55; --tk-value-share: .61; }
}

/* Etiketler bu tabanın altına inmez; gerekirse veri puntosundan yer alınır. */
@layer tokens {
  :root, :root[data-size="md"] { --tk-label-min: 12px; }
  :root[data-size="sm"]        { --tk-label-min: 11px; }
  :root[data-size="lg"]        { --tk-label-min: 13.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, :root[data-size="md"] {
    --hdr-h: 74px;   --status-h: 60px;  --foot-h: 50px;
    --t-logo: 35px;  --t-nav: 15px;     --t-topbtn: 13.5px;
    --t-status: 13.5px; --t-crumb: 15px; --t-foot: 11px;
  }
  :root[data-size="sm"] {
    --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;
  }
  :root[data-size="lg"] {
    --hdr-h: 88px;   --status-h: 70px;  --foot-h: 58px;
    --t-logo: 42px;  --t-nav: 18px;     --t-topbtn: 16px;
    --t-status: 16px;   --t-crumb: 17px; --t-foot: 12.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, :root[data-size="md"] {
    --t-cta-title: 14px;  --t-news-meta: 11.5px; --t-news-head: 23px; --t-news-body: 14px;
    --t-feed-meta: 9.5px; --t-feed-title: 12.5px; --t-feed-desc: 10.5px; --t-feed-more: 12px;
  }
  :root[data-size="sm"] {
    --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;
  }
  :root[data-size="lg"] {
    --t-cta-title: 16.5px; --t-news-meta: 13.5px; --t-news-head: 28px; --t-news-body: 16.5px;
    --t-feed-meta: 11px;   --t-feed-title: 15px;  --t-feed-desc: 12.5px; --t-feed-more: 14px;
  }
}

@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;
  }

  .ad-dots {
    position: absolute; right: 10px; bottom: 8px; z-index: 2;
    display: flex; gap: 6px;
  }
  .ad-dot {
    width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  }
  .ad-dot::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.45);
    transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  }
  .ad-dot[aria-selected="true"]::after { background: #fff; transform: scale(1.15); }
  .ad-dot:hover::after { background: rgba(255,255,255,.8); }
}

/* =========================================================================
   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, :root[data-size="md"] {
    --t-cta-title: 19.5px; --t-news-meta: 15px;   --t-news-head: 26px; --t-news-body: 19.5px;
    --t-feed-meta: 15px;   --t-feed-title: 18.5px; --t-feed-desc: 16.5px; --t-feed-more: 17.5px;
  }
  :root[data-size="sm"] {
    --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;
  }
  :root[data-size="lg"] {
    --t-cta-title: 22px;   --t-news-meta: 17px;   --t-news-head: 31px; --t-news-body: 22px;
    --t-feed-meta: 17px;   --t-feed-title: 21px;  --t-feed-desc: 19px;  --t-feed-more: 20px;
  }
}

@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 {
  :root[data-size="lg"] .news-body { -webkit-line-clamp: 2; }
}

/* 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 {
  :root[data-size="lg"] .news-card { flex: 2 1 0; }
}
@layer components {
  :root[data-size="lg"] .news-head { margin: calc(var(--t-news-head) * .3) 0 calc(var(--t-news-head) * .22); }
}

/* Büyük puntoda 6 px'lik taşma kalıyordu; iç boşluk buna göre kısıldı. */
@layer components {
  :root[data-size="lg"] .news-feature { padding-top: 11px; padding-bottom: 7px; }
}

/* =========================================================================
   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;
  }
  :root[data-size="lg"] .news-body { -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, :root[data-size="md"] { --t-panel: 14px; }
  :root[data-size="sm"]        { --t-panel: 12.5px; }
  :root[data-size="lg"]        { --t-panel: 16.5px; }
}

@layer components {
  .popover--panel {
    font-size: var(--t-panel);
    width: 29em; padding: 1.1em;
    max-height: min(80dvh, 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, 21vw, 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: 3.2vh 2.4vw;
    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--conv .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: 900px) {
  @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 {
  /* Detay tablosu kendi ölçeğinden beslenir: başlık ve veri aynı puntoyu
     paylaşır, gerçek değer JS'in ölçtüğü `--t-detail-auto` ile sınırlanır —
     beş firma da kaydırmadan görünsün diye. */
  :root, :root[data-size="md"] { --t-detail-max: 25px; }
  :root[data-size="sm"]        { --t-detail-max: 21px; }
  :root[data-size="lg"]        { --t-detail-max: 33px; }
  :root { --t-detail: min(var(--t-detail-max), var(--t-detail-auto, var(--t-detail-max))); }
}

@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 {
  :root, :root[data-size="md"] { --chart-h: 228px; }
  :root[data-size="sm"]        { --chart-h: 214px; }
  :root[data-size="lg"]        { --chart-h: 188px; }
}

@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, :root[data-size="md"] {
    --tk-title-max: 23px;  --tk-label-max: 18.5px;  --tk-label-min: 15px;
    --tk-price-share: .46;
  }
  :root[data-size="sm"] {
    --tk-title-max: 18px;  --tk-label-max: 15.5px;  --tk-label-min: 13px;
    --tk-price-share: .43;
  }
  :root[data-size="lg"] {
    --tk-title-max: 29px;  --tk-label-max: 23px;    --tk-label-min: 18px;
    --tk-price-share: .51;
  }
}

@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, 78vw);
    max-height: min(64vh, 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, 76vw); }
  #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; }
  .tk-diff {
    font-size: .8em; 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: .1em .48em; 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"], :root[data-news="off"][data-size="md"] {
    --t-quote-max: 52px;  --t-unit-max: 32px;  --t-row-min: 1.42;
    --t-firm: 27px;       --t-side: 17px;
    --t-detail-max: 38px;
  }
  :root[data-news="off"][data-size="sm"] {
    --t-quote-max: 40px;  --t-unit-max: 27px;  --t-row-min: 1.42;
    --t-firm: 23px;       --t-side: 15px;
    --t-detail-max: 31px;
  }
  :root[data-news="off"][data-size="lg"] {
    --t-quote-max: 66px;  --t-unit-max: 37px;  --t-row-min: 1.38;
    --t-firm: 31px;       --t-side: 20px;
    --t-detail-max: 50px;
  }
}

/* =========================================================================
   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, :root[data-size="md"] { --t-quote-max: 52px; --t-unit-max: 34px; --t-row-min: 1.58; }
  :root[data-size="sm"]        { --t-quote-max: 40px; --t-unit-max: 30px; --t-row-min: 1.62; }
  :root[data-size="lg"]        { --t-quote-max: 68px; --t-unit-max: 42px; --t-row-min: 1.50; }

  :root[data-news="off"], :root[data-news="off"][data-size="md"] {
    --t-quote-max: 66px; --t-unit-max: 40px; --t-row-min: 1.42;
  }
  :root[data-news="off"][data-size="sm"] {
    --t-quote-max: 52px; --t-unit-max: 34px; --t-row-min: 1.45;
  }
  :root[data-news="off"][data-size="lg"] {
    --t-quote-max: 82px; --t-unit-max: 48px; --t-row-min: 1.38;
  }
}

/* =========================================================================
   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.
   ========================================================================= */
@layer tokens {
  :root, :root[data-size="md"] {
    --tick-h: 300px;
    --tk-label-max: 21px;  --tk-value-max: 25px;  --tk-label-min: 17px;
  }
  :root[data-size="sm"] {
    --tick-h: 254px;
    --tk-label-max: 18px;  --tk-value-max: 21px;  --tk-label-min: 15px;
  }
  :root[data-size="lg"] {
    --tick-h: 344px;
    --tk-label-max: 26px;  --tk-value-max: 31px;  --tk-label-min: 20px;
    /* başlık üç satıra sarıp üst bloğu şişiriyordu: fiyata daha az pay */
    --tk-price-share: .44;  --tk-title-max: 26px;
  }
}

@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 şey YÜKSEKLİK; genişlik değişmiyor. Bu yüzden
     fiyat sütunlarının puntosu (genişliğe bağlı) zorlanmaz, kazanılan yer
     satır yüksekliğine, kur kartlarına ve haber metnine verilir. */
  :root[data-fullscreen="on"] {
    --tick-h: 278px;  --chart-h: 206px;  --t-unit-max: 32px;  --tk-value-share: .54;  --t-detail-max: 26px;
    --t-firm: 19px;  --t-side: 13.5px;
    --tk-title-max: 21px; --tk-label-max: 20px; --tk-value-max: 28px; --tk-label-min: 15px;
    --t-news-head: 26px;  --t-news-body: 19px;  --t-news-meta: 13px;
  }
  :root[data-fullscreen="on"][data-size="md"] {
    --tick-h: 304px;  --chart-h: 214px;  --t-unit-max: 37px;  --tk-value-share: .58;  --t-detail-max: 32px;
    --t-firm: 23px;  --t-side: 15.5px;
    --tk-title-max: 26px; --tk-label-max: 23px; --tk-value-max: 33px; --tk-label-min: 17px;
    --t-news-head: 30px;  --t-news-body: 22px;  --t-news-meta: 15px;
  }
  :root[data-fullscreen="on"][data-size="lg"] {
    --tick-h: 336px;  --chart-h: 178px;  --t-unit-max: 40px;  --tk-value-share: .62;  --t-detail-max: 40px;
    --t-firm: 26px;  --t-side: 17.5px;
    --tk-title-max: 30px; --tk-label-max: 28px; --tk-value-max: 40px; --tk-label-min: 20px;
    --t-news-head: 36px;  --t-news-body: 26px;  --t-news-meta: 18px;
  }
}

/* =========================================================================
   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: .30; }
  :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"], :root[data-chart="off"][data-size="md"] { --t-detail-max: 38px; }
  :root[data-chart="off"][data-size="sm"]                          { --t-detail-max: 30px; }
  :root[data-chart="off"][data-size="lg"]                          { --t-detail-max: 48px; }
}

/* =========================================================================
   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, :root[data-size="md"] { --tk-value-share: .58; }
  :root[data-size="sm"]        { --tk-value-share: .56; }
  :root[data-size="lg"]        { --tk-value-share: .62; }
}

/* 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, :root[data-size="md"] { --tk-label-min: 14px; }
  :root[data-size="sm"]        { --tk-label-min: 13px; }
  :root[data-size="lg"]        { --tk-label-min: 15px; }
}

/* =========================================================================
   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: 2.2em; height: 2.2em; padding: 0;
    font-size: var(--t-crumb);
    background: var(--surface); color: var(--buy-fg);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
  }
  .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: 1099px) {
  @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; }
  }
}