/* =========================================================================
   TLkur.com — Modern tema v2  (mobil öncelikli, liveexchanges esinli)
   Varsayılan: mavi tonlu DARK. Sağ üstte güneş/ay ile LIGHT'a geçiş.
   ========================================================================= */

/* ----- Tokens: DARK (varsayılan) ------------------------------------- */
:root,
[data-theme="dark"] {
  --bg:            #0a1424;   /* koyu mavi-slate (liveexchanges mavisi) */
  --bg-grad:       radial-gradient(1150px 560px at 50% -14%, rgba(47,107,196,.30) 0%, transparent 60%);
  --surface:       #122339;   /* mavi tonlu yüzey */
  --surface-2:     #0d1b2e;
  --surface-3:     #1b3152;   /* daha parlak mavi (kart/hover) */
  --border:        #243a5e;
  --border-strong: #335583;

  --text:          #e9eff8;
  --text-muted:    #9fb4d2;
  --text-faint:    #687f9c;

  --accent:        #3b82f6;   /* parlak mavi */
  --accent-2:      #63a4ff;
  --accent-soft:   rgba(59,130,246,.16);
  --blue-bright:   #4f93ff;
  --blue-soft:     #6f8fb8;

  --up:            #2fc46e;
  --up-bg:         rgba(47,196,110,.14);
  --down:          #ff5d52;
  --down-bg:       rgba(255,93,82,.14);

  /* Kur flash + ripple (birebir liveexchanges) — tweaks paneli runtime'da değiştirir */
  --flash-duration: 700ms;   /* tik animasyon süresi */
  --flash-ripple:   35;      /* hücreler arası gecikme (ms, birimsiz; 0 = hepsi birden) */

  --header-bg:     rgba(10,20,36,.85);
  --header-border: rgba(120,160,220,.12);
  --shadow:        0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(2,10,28,.45);
  --shadow-sm:     0 1px 2px rgba(2,10,28,.40);
  --ring:          0 0 0 3px rgba(59,130,246,.40);

  --logo-word:     #e9eff8;
  --logo-badge-bg: #5eead4;   /* teal disk (koyu zeminde görünür) */
  --logo-badge-fg: #0a1424;   /* navy ₺ */
}

/* ----- Tokens: LIGHT -------------------------------------------------- */
[data-theme="light"] {
  --bg:            #f6f8fa;   /* liveexchanges açık gri zemin */
  --bg-grad:       none;
  --surface:       #ffffff;
  --surface-2:     #f6f8fa;
  --surface-3:     #eceff3;
  --border:        #e3e8ee;
  --border-strong: #d0d7e0;

  --text:          #1f2a37;
  --text-muted:    #5b6b7b;
  --text-faint:    #8a97a6;

  --accent:        #2563eb;
  --accent-2:      #1d4ed8;
  --accent-soft:   rgba(37,99,235,.10);
  --blue-bright:   #2563eb;
  --blue-soft:     #6b86b3;

  --up:            #16a34a;
  --up-bg:         rgba(22,163,74,.10);
  --down:          #dc2626;
  --down-bg:       rgba(220,38,38,.10);

  --header-bg:     rgba(255,255,255,.85);
  --header-border: #e3e8ee;
  --shadow:        0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.08);
  --shadow-sm:     0 1px 2px rgba(16,24,40,.06);
  --ring:          0 0 0 3px rgba(37,99,235,.30);

  --logo-word:     #1f2a37;
  --logo-badge-bg: #0e9e8e;   /* teal disk (açık zeminde okunur ton) */
  --logo-badge-fg: #ffffff;   /* beyaz ₺ */
}

/* ----- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* clip: yan taşmayı kırpar ama overflow:hidden gibi sticky'yi BOZMAZ */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
h1,h2,h3,h4,p,ul,figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.num,.rate,td,th,time,.change,.badge,.stat-val,.stat-sub,.ticker-rate,
.pin-rate,.pin-pct,.hero-rate,.hs-v,.rel-rate,.rel-pct,.p-rate,.p-pct,.mq-rate,
.conv-eq,.cross-val,.cross-pct,.r52-ends b,.r52-head .now {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* İsim/etiket hücreleri gövde fontunda kalsın (sadece sayılar mono) */
.bank-name,.tbl-name,.p-name,.mq-name,.pin-name,.tbl-name small {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----- Layout --------------------------------------------------------- */
:root { --maxw: 1120px; --gap: 16px; }
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--gap) 14px 36px;
}
.layout > main, .layout > aside { min-width: 0; }
@media (min-width: 920px) {
  .layout { grid-template-columns: minmax(0,1fr) 340px; align-items: start; padding: 20px 16px 48px; }
}

/* ----- Breadcrumb (görsel iz; JSON-LD ayrı) ----- */
.crumb { max-width: var(--maxw); margin: 0 auto; padding: 10px 14px 0; text-transform: uppercase; letter-spacing: .03em; }
.crumb ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 0; margin: 0; padding: 0 0 2px;
  font-size: 12.5px; font-weight: 600; color: var(--text-faint);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crumb ol::-webkit-scrollbar { display: none; }
.crumb li { display: inline-flex; align-items: center; flex: 0 0 auto; }
.crumb li:not(:first-child)::before { content: "›"; margin: 0 7px; color: var(--text-faint); opacity: .6; }
.crumb a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.crumb a:hover { color: var(--accent-2); }
.crumb [aria-current="page"] { color: var(--text); white-space: nowrap; }

/* ----- Header (sticky, glass) ---------------------------------------- */
.site-header {
  position: relative; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--header-border);
}
/* Desktop: header band'i tam genişlikte farklı zemin, içerik wrap'te */
@media (min-width: 920px) {
  .site-header {
    background:
      linear-gradient(180deg, var(--surface-3) 0%, var(--bg) 85%);
    border-bottom: 1px solid var(--border);
  }
  .header-top { padding-top: 14px; padding-bottom: 14px; }
}
/* MOBİL: flex-column — 1.satır logo+ikonlar, 2.satır swipe menü.
   gap = 10px → logo-menü ve menü-pinned mesafesi eşit (pinned-wrap top-pad da 10px). */
.header-top {
  display: flex; flex-direction: column; gap: 10px;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 14px 0;
}
.header-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-bar .logo { flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.header-top .swipe-menu { min-width: 0; }
/* DESKTOP: tek satır — logo | arama | menü | tema */
@media (min-width: 920px) {
  .header-top {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: auto minmax(120px,220px) minmax(0,1fr) auto;
    grid-template-areas: "logo search menu actions";
  }
  .header-bar { display: contents; }
  .header-top .logo          { grid-area: logo; }
  .header-top .search-bar    { grid-area: search; flex: none; }
  .header-top .header-actions { grid-area: actions; }
  .header-top .swipe-menu     { grid-area: menu; padding: 0; border-top: none; margin: 0; }
}

/* Logo: TLKUR | ₺ (daire içinde) — eski dizilim, tema-uyumlu */
.logo { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.logo .word {
  font-size: 23px; font-weight: 800; letter-spacing: .04em;
  color: var(--logo-word); line-height: 1;
}
.logo-sep { width: 2px; height: 23px; border-radius: 2px; background: var(--logo-word); opacity: .3; }
/* ₺ diski: yüksekliği TLKUR yazısıyla hizalı (büyük daire).
   padding:0 → genel .badge (yüzde rozeti) kuralının iç boşluğunu ezmesini engeller */
.logo .badge { width: 25px; height: 25px; flex: 0 0 auto; display: block; padding: 0; }
.logo .badge svg { display: block; width: 100%; height: 100%; }
.logo .badge .b-disc { fill: var(--logo-badge-bg); }
.logo .badge .b-tl { fill: var(--logo-badge-fg); stroke: none; }

@media (min-width: 920px) {
  .menu-btn { display: none; } /* hamburger sadece mobil */
}


.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); transition: background .15s ease, transform .12s ease, border-color .15s;
}
.icon-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.93); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.menu-btn { display: inline-grid; }

/* Arama — her zaman açık, logo sağında */
.search-bar {
  position: relative; flex: 1 1 auto; min-width: 0;
}
.search-bar .search-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-faint); pointer-events: none;
}
.search-bar input[type="text"] {
  display: block; width: 100%;
  padding: 8px 10px 8px 31px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 13.5px;
  transition: border-color .14s;
}
.search-bar input[type="text"]:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.search-bar input[type="text"]::placeholder { color: var(--text-faint); }

/* Anlık arama dropdown — pro: position:fixed (her zaman en önde), SABİT yükseklik (sonuç sayısına
   göre değişmez), tip-renkli etiketler, eşleşen metin vurgusu, aktif satır aksan çizgisi, footer ipucu.
   Konum/genişlik JS (place()): desktop 420px dar, mobil full-width. */
#siteSearch { position: relative; }
.search-panel {
  position: fixed; z-index: 9999; display: flex; flex-direction: column;
  height: 366px;                              /* SABİT — type/sonuç sayısına göre değişmez */
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(2, 10, 28, .55), 0 2px 8px rgba(2, 10, 28, .4);
  overflow: hidden;
}
.search-panel[hidden] { display: none; }   /* .search-panel{display:flex} hidden attribute'unu ezmesin */
@media (max-width: 719px) { .search-panel { height: 250px; } }
.search-panel .sr-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 6px;
}
.search-panel .sr-list::-webkit-scrollbar { width: 9px; }
.search-panel .sr-list::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--surface); border-radius: 9px; }
.sr-item {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 0 var(--accent); transition: background .12s, box-shadow .12s;
}
.sr-item::after {                          /* satır ayracı — uçlarda sönen hairline (havalı + kurumsal) */
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 14%, var(--border) 86%, transparent);
}
.sr-item:last-child::after { display: none; }
.sr-item:hover { background: var(--surface-2); }
.sr-item.active { background: var(--surface-2); box-shadow: inset 3px 0 0 0 var(--accent); }
.sr-item.active::after, .sr-item:hover::after { opacity: 0; }   /* vurgulu satırda ayraç gizlenir → temiz */
.sr-tag {
  flex: 0 0 auto; min-width: 50px; text-align: center; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 6px;
}
.sr-tag.g-doviz { color: var(--accent-2); background: var(--accent-soft); }
.sr-tag.g-altin { color: #c0871a; background: rgba(216, 162, 58, .16); }
.sr-tag.g-page  { color: var(--text-muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.sr-tag.g-banka { color: #8b5cf6; background: rgba(139, 92, 246, .15); }
.sr-tag.g-capraz { color: #14a37f; background: rgba(20, 163, 127, .15); }
.sr-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-title mark { background: var(--accent-soft); color: var(--accent-2); border-radius: 3px; padding: 0 1px; font-weight: 800; }
.sr-code {                                  /* tablo başı .tbl-sym estetiği — küçük + hafif vurgulu pill */
  flex: 0 0 auto; min-width: 58px; text-align: center;
  background: var(--accent-soft); color: var(--accent-2);
  font: 800 11px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: -.01em;
  padding: 4px 7px; border-radius: 7px;
}
.sr-code:empty { background: none; }        /* manuel sayfa (kodsuz) → boş pill görünmesin, hizalama kalsın */
.sr-rate { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.sr-val { font: 700 13.5px "IBM Plex Mono", ui-monospace, monospace; color: var(--text); border-radius: 4px; padding: 0 3px; }
.sr-tri { width: 9px; font-size: 9px; line-height: 1; text-align: center; }
.sr-tri.up { color: var(--up); } .sr-tri.up::before { content: "\25B2"; }
.sr-tri.down { color: var(--down); } .sr-tri.down::before { content: "\25BC"; }
.sr-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); font-size: 13px; }
.sr-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 11px; color: var(--text-faint); letter-spacing: .01em;
}
.sr-foot-n { font-weight: 700; }
@media (max-width: 719px) { .sr-foot span:first-child { display: none; } .sr-foot { justify-content: flex-end; } }

/* ----- Direction arrows (shared) ------------------------------------- */
.dir { width: 0; height: 0; display: inline-block; flex: 0 0 auto; }
.dir.is-up   { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--up); }
.dir.is-down { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--down); }
.dir.is-flat { width: 7px; height: 2px; background: var(--text-faint); }

/* ----- Pinned rates: kart yapısı (2 sütun mobil / 3 satır) ----------- */
.pinned-wrap { padding: 10px 14px 12px; }
.pinned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-width: var(--maxw); margin: 0 auto;
}
@media (min-width: 560px) { .pinned { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 920px) { .pinned { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.pin {
  display: block; min-width: 0;
  background: linear-gradient(158deg, var(--surface-3) 0%, var(--surface) 72%);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 11px 13px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pin:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-sm); }
/* ana parite vurgulu (parlak mavi) */
.pin.primary {
  border-color: var(--accent);
  background: linear-gradient(158deg, rgba(59,130,246,.22) 0%, var(--surface) 75%);
}
.pin.primary .pin-name { color: var(--accent-2); }
.pin-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pin-name {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pin-bottom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; margin-top: 5px; min-width: 0; }
.pin-rate {
  font-size: clamp(16px, 4.6vw, 21px); font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap;
}
.pin-pct { font-size: 11.5px; font-weight: 800; white-space: nowrap; flex: 0 0 auto; }

/* ----- Kayan kurlar (marquee) ---------------------------------------- */
.marquee-wrap {
  position: sticky; top: 8px; z-index: 60;
  width: calc(100% - 20px); max-width: var(--maxw);
  margin: 8px auto 16px;
  overflow: hidden; background: #0e1626;
  border: 1px solid #1c2740; border-radius: 13px;
  box-shadow: 0 6px 20px rgba(8,14,28,.30);
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, #0e1626, transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(270deg, #0e1626, transparent); }
.marquee {
  display: inline-flex; align-items: center; gap: 26px;
  padding: 7px 0; white-space: nowrap;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; padding-left: 26px; border-left: 1px solid #1c2740;
}
.mq:first-child { border-left: 0; }
a.mq { color: inherit; text-decoration: none; cursor: pointer; }
a.mq:hover .mq-name { color: #cfe0ff; }
.mq .mq-name { color: #9aa8c2; font-weight: 600; }
.mq .mq-rate { font-weight: 700; color: #eaf0fa; }
.mq .change { font-weight: 600; font-size: 11.5px; }
.marquee-live {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; background: #0b1220; border-right: 1px solid #1c2740;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #eaf0fa;
}
.marquee-live::after {
  content: ""; position: absolute; right: -22px; top: 0; bottom: 0; width: 22px;
  background: linear-gradient(90deg, #0b1220, transparent);
}
/* Ripple canlı nokta (design tlkRipple) */
.marquee-live .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2ed47f; }
.marquee-live .dot::before,
.marquee-live .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid #2ed47f; animation: tlkRipple 1.8s ease-out infinite;
}
.marquee-live .dot::after { animation-delay: .9s; }
@keyframes tlkRipple { from { transform: scale(1); opacity: .55; } to { transform: scale(3.4); opacity: 0; } }

/* ----- Ana menü (header içinde; desktop'ta logo↔arama arası, mobilde alt satır) */
.swipe-menu {
  display: flex; gap: 6px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  scrollbar-width: none;
  min-width: 0; padding: 0;
}
.swipe-menu::-webkit-scrollbar { display: none; }
.swipe-menu a {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: .015em;
  color: var(--text-muted);
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: var(--surface);
  transition: background .14s, color .14s, border-color .14s;
}
.swipe-menu a:hover {
  background: var(--surface-3); color: var(--text); border-color: var(--border-strong);
}
.swipe-menu a.active {
  background: var(--surface-3); color: var(--text); border-color: var(--border-strong);
}

/* ── Menü vurgu sınıfları (tweaks → Menü'den atanır) ─────────────────── */
/* CTA: dolu accent buton — birincil eylem gibi öne çıkar */
.swipe-menu a.nav-cta {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700;
}
.swipe-menu a.nav-cta:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
/* Sıcak: yanıp sönen nokta — "öne çıkan/popüler". Ton = --hot (varsayılan: uyarı/kırmızı).
   Renk varyantları (aynı efekt, farklı ton): nav-hot-blue / -green / -gold / -silver. */
.swipe-menu a[class*="nav-hot"]  { --hot: var(--down); }      /* varsayılan kırmızı — varyantlar EZER (sıra önemli) */
.swipe-menu a.nav-hot-blue       { --hot: #3b82f6; }
.swipe-menu a.nav-hot-green      { --hot: #16a34a; }
.swipe-menu a.nav-hot-gold       { --hot: #d4a017; }
.swipe-menu a.nav-hot-silver     { --hot: #94a3b8; }
.swipe-menu a[class*="nav-hot"] {
  color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, var(--border));
}
.swipe-menu a[class*="nav-hot"]::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot); margin-right: 6px; vertical-align: middle; animation: navHotPulse 1.4s infinite;
}
@keyframes navHotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hot) 70%, transparent); opacity: 1; }
  60%      { box-shadow: 0 0 0 5px transparent; opacity: .55; }
}
/* Yeni: yeşil "YENİ" rozeti */
.swipe-menu a.nav-new::after {
  content: "YENİ"; margin-left: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--up); padding: 2px 5px; border-radius: 5px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .swipe-menu a[class*="nav-hot"]::before { animation: none; } }

/* Altın kaynak pill'leri — SSS altı, chip görünümü, yan yana (flex-wrap), orphan'ı kapatır */
.altin-src-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 4px 4px;
}
.altin-src-pills .src-pill {
  display: inline-block; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; text-decoration: none; transition: border-color .15s, color .15s;
}
.altin-src-pills .src-pill:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* Kripto sayfası: USD'nin altında TL + EUR karşılığı (küçük chip'ler, canlı) */
.hero-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hero-alt-i { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-variant-numeric: tabular-nums; }
.hero-alt-c { color: var(--text-faint); font-weight: 700; font-size: 14px; }
.hero-alt-v { font-weight: 700; font-size: 15px; color: var(--text); }
.hero-alt-u { color: var(--text-faint); font-size: 11px; font-weight: 600; letter-spacing: .03em; }

/* /banka karşılaştırma hücresi — Satış / Alış / Makas üçü de label'li, alt alta (Satış vurgulu) */
.tbl-c-sell .bq { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; line-height: 1.55; }
.bq-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.bq-v { min-width: 66px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bq--main .bq-v { font-size: 15px; color: var(--text); }
.bq:not(.bq--main) .bq-v { font-size: 12.5px; color: var(--text-muted); }

/* Kripto çevirici — ÇİFT YÖNLÜ BTC ⇄ TL ⇄ USD (3 alan; hangisi girilirse diğerleri). Mobil öncelik. */
.cconv { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cconv-f { flex: 1 1 92px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cconv-lbl { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.cconv-f input { width: 100%; padding: 11px 12px; font-size: 16px; font-weight: 700; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; }
.cconv-f input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Kripto price hero — TL (üst) + USD (alt) soft-border box, trend üçgeni, "1 BTC = X" */
.crypto-prices { display: flex; flex-direction: column; gap: 10px; }
.cp-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cp-box .dir { align-self: center; }
.cp-lead { font-size: clamp(14px, 4vw, 18px); font-weight: 600; color: var(--text-muted); }
.crypto-prices .cp-v { font-size: clamp(24px, 7vw, 34px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.04; font-variant-numeric: tabular-nums; color: var(--text); }
.crypto-prices .cp-u { font-size: clamp(13px, 3vw, 16px); font-weight: 700; color: var(--text-faint); align-self: center; }

/* Popüler miktar linki (conv tablosu) — göze batmaz: hücre rengini alır, altı çizili değil (linkli/linksiz ayrık durmaz) */
.conv-mini a.conv-amt { color: inherit; text-decoration: none; }

/* Kapalıçarşı box (altın type sayfası — serbest'in yanında AYRI kutu; data-cc/ccf canlı) */
.kc-box .kc-box-row { display: flex; gap: 12px; }
.kc-box .kc-cell { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; }
.kc-box .kc-cell--sell { border-color: var(--accent); }
.kc-box .kc-k { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.kc-box .kc-v { font-size: clamp(19px, 4.5vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-box .kc-cell--sell .kc-v { color: var(--accent-2); }
.kc-box .kc-pct { font-size: 13px; font-weight: 700; }
.kc-box .kc-pct.is-up { color: var(--up); }
.kc-box .kc-pct.is-down { color: var(--down); }

/* PWA kurulum bandı — küçük, alt-orta, kapatılabilir. JS yalnız kurulabilirken (apex) oluşturur. */
.pwa-install {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(12px);
  z-index: 60; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: 7px 8px 7px 13px;
  max-width: calc(100vw - 24px); font-size: 13.5px; color: var(--text-muted);
  opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
}
.pwa-install.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.pwa-install b { color: var(--text); font-weight: 700; }
.pwa-install .pwa-go {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.pwa-install .pwa-go:hover { background: var(--accent-2); }
.pwa-install .pwa-x {
  background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
}

/* ----- Nav (hamburger panel on mobile, inline on desktop) ------------ */
.nav {
  display: none; flex-direction: column;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.nav.open { display: flex; }
.nav-inner {
  display: flex; flex-direction: column;
  max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 8px 10px;
}
.nav-inner a {
  padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--text-muted);
  border-radius: 10px;
}
.nav-inner a:hover { background: var(--surface-2); color: var(--text); }
.nav-inner a.active { color: var(--accent-2); }
@media (min-width: 560px) {
  .nav-inner { flex-flow: row wrap; padding: 8px 14px; gap: 4px; }
  .nav-inner a { flex: 0 0 auto; }
}

/* ----- Card ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.layout > main > .card, .layout > aside > .card { margin-bottom: var(--gap); }
.card-pad { padding: 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h1 {
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-muted);
}
.card-time { font-size: 12px; color: var(--text-faint); }

/* ----- Hero ----------------------------------------------------------- */
.hero { padding: 18px 16px; }
.hero-label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.hero-main { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.hero-rate { font-size: clamp(38px, 12vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hero-unit { font-size: 17px; font-weight: 700; color: var(--text-muted); }

/* Amount cevabı — sayfanın en vurgulu öğesi (büyük toplam); altta 1-birim hero görünür kalır */
/* Amount kartı — kurumsal: "tutar = sonuç" eşit boyda; vurgulu ama pro (parlak yüzey + ince gölge) */
.amount-box {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px;
  margin: 4px 0 18px; padding: 20px 22px; border-radius: 14px;
  background: var(--surface-3); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.amount-from, .amount-total {
  font-size: clamp(32px, 9vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.amount-from  { color: var(--text); }
.amount-total { color: var(--accent-2); }
.amount-eq { align-self: center; font-size: clamp(20px, 5vw, 30px); font-weight: 400; color: var(--text-faint); }
.amount-out { display: inline-flex; align-items: baseline; gap: 8px; }
.amount-from i, .amount-out i { font-style: normal; font-size: .36em; font-weight: 700; color: var(--text-faint); letter-spacing: .03em; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px;
}
.badge.is-up   { color: var(--up); background: var(--up-bg); }
.badge.is-down { color: var(--down); background: var(--down-bg); }
/* Hero alt metrikler — sade, az vurgulu. Üst: Alış/Satış. Alt: Açılış·Yük·Düş ince satır. */
.hero-stats { margin-top: 14px; }
.hs-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 0; }
.hs-item { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.hs-item:first-child { padding-left: 0; }
.hs-item + .hs-item { border-left: 1px solid var(--border); }
.hs-k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.hs-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hs-item--up .hs-v   { color: var(--up,   #16c784); }
.hs-item--down .hs-v { color: var(--down, #ea3943); }
/* Değişim (yuzde) — is-up/is-down doğrudan hs-v üstünde */
.hs-v.is-up   { color: var(--up,   #16c784); }
.hs-v.is-down { color: var(--down, #ea3943); }
/* zaman satırı için küçük metin (kaynak/banka item içinde) */
.hs-item .src-zaman { font-size: 12px; font-weight: 600; }
@media (max-width: 560px) {
  /* hero-stats: 3'lü grid — 4. item yeni satır başı (border sıfırla) */
  .hs-item { flex: 0 0 33.333%; padding: 0 10px; }
  .hs-item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

/* Converter — üstte ince ayraçla net ayrılır */
.converter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.conv-field { position: relative; min-width: 0; }
.conv-field input {
  width: 100%; font-size: 16px; font-weight: 700; padding: 13px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
}
.conv-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.conv-field label {
  position: absolute; top: -7px; left: 11px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  background: var(--surface); padding: 0 6px; color: var(--text-faint); text-transform: uppercase;
}
.conv-swap { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--accent); display: grid; place-items: center; font-size: 17px; }

/* ----- Stat chips ----------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
@media (max-width: 420px) { .stats { grid-template-columns: repeat(2,1fr); } }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 8px; text-align: center; }
.stat-key { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; }
.stat-val { font-size: 15.5px; font-weight: 700; margin-top: 5px; }
.stat-val.is-up { color: var(--up); } .stat-val.is-down { color: var(--down); }
.stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ----- Chart (lightweight-charts) ------------------------------------- */
.chart-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* Quote seçici (kripto/metal: USD/EUR/TRY) — segmented control */
.chart-quotes { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.chart-quote { font-size: 12px; font-weight: 700; padding: 6px 13px; cursor: pointer; color: var(--text-muted);
  background: var(--surface-2); border: 0; border-right: 1px solid var(--border); }
.chart-quote:last-child { border-right: 0; }
.chart-quote:hover { color: var(--text); }
.chart-quote.on { background: var(--accent); color: #fff; }
.chart-tabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.chart-tabs::-webkit-scrollbar { display: none; }
.chart-tab { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 9px;
  cursor: pointer; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); }
.chart-tab:hover { background: var(--surface-3); color: var(--text); }
.chart-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#tlkur-chart { width: 100%; height: 300px; position: relative; }
#tlkur-chart[data-loading] { opacity: .55; }

/* TradingView tarzı canlı nokta (son barda atan ripple) */
.tlkur-live-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); z-index: 4; pointer-events: none; display: none;
  transform: translate(-50%, -50%); animation: tlkur-live-pulse 1.4s ease-out infinite; }
@keyframes tlkur-live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Sol-üst hover readout (kur + O/H/L + tarih) */
.tlkur-ro { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 5; pointer-events: none;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-family: "IBM Plex Mono", monospace; }
.tlkur-ro .ro-price { font-size: 18px; font-weight: 700; color: var(--text); }
.tlkur-ro .ro-ohlc { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }
.tlkur-ro .ro-ohlc i { opacity: .5; font-style: normal; }
.tlkur-ro .ro-ohlc b.up { color: var(--up); } .tlkur-ro .ro-ohlc b.down { color: var(--down); }
.tlkur-ro .ro-date { font-size: 11px; font-weight: 500; color: var(--text-faint); }
/* Mobil: fiyat+tarih 1. satır, O/H/L 2. satıra düşsün */
@media (max-width: 600px) {
  .tlkur-ro .ro-date { order: 2; }
  .tlkur-ro .ro-ohlc { order: 3; flex-basis: 100%; margin-top: 1px; }
}

/* ===== TABLO SİSTEMİ (.tbl) — TEK kaynak =============================
   Sitedeki TÜM kur/veri tabloları bunu kullanır: anasayfa, kur sayfası,
   altın sekmeleri, bankalar, para birimleri, kripto… Görsel his her yerde
   AYNI; yalnız kolon sayısı bağlama göre 2–5 değişir.

   ► Tek override noktası: aşağıdaki --tbl-* token'larını değiştir →
     tüm tablolar aynı anda değişir (CSS'te ya da /tweaks → Görünüm).

   ► Hücre DNA'sı: her hücre = ÜST ana değer + ALTINDA opsiyonel .tbl-sub
     (ad altı: birim/zaman · satış altı: % değişim veya makas marjı).
     Canlı değer DAİMA <span> içinde → flash span'e biner, grid bozulmaz.
     Satır data-href ile tıklanabilir.

   ► Yerleşim: table-layout:auto + "greedy" isim sütunu → kısa tablolar
     taşmaz/swipe yok; uzun değerli ya da çok kolonlu tablolar gerektiğinde
     yatay kayar (ilk kolonlar görünür kalır). Mobilde sembol rozeti gizli. */
:root {
  --tbl-fs: 14px;            --tbl-fs-sm: 13px;          /* gövde / mobil */
  --tbl-pad: 11px 12px;      --tbl-pad-sm: 10px 8px;     /* hücre boşluğu */
  --tbl-head-fs: 11px;       --tbl-head-color: var(--text-faint);
  --tbl-sub-fs: 11px;        --tbl-sub-color: var(--text-faint);
  --tbl-num-font: "IBM Plex Mono", ui-monospace, monospace;
  --tbl-sym: 32px;                                       /* sembol rozeti */
  --tbl-hover: var(--surface-2);  --tbl-row-hl: var(--surface-2);
  --tbl-border: var(--border);    --tbl-border-strong: var(--border-strong);
}

/* Sarmal — gerektiğinde yatay kaydırma (.table-scroll eski ad, alias) */
.tbl-wrap, .table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--tbl-fs); }
.tbl th, .tbl td { box-sizing: border-box; white-space: nowrap; }

/* Başlık */
.tbl thead th {
  text-align: right; font-size: var(--tbl-head-fs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tbl-head-color);
  padding: 10px 12px; border-bottom: 1px solid var(--tbl-border-strong);
}
.tbl thead th.tbl-c-name { text-align: left; }
.tbl th[data-sortable] { cursor: pointer; user-select: none; }
.tbl th[data-sortable]:hover { color: var(--text); }
.sort-ic { display: inline-block; margin-left: 4px; opacity: .45; }
.sort-ic.sort_up::after   { content: "▲"; font-size: 9px; }
.sort-ic.sort_down::after { content: "▼"; font-size: 9px; }

/* Satır */
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr:hover { background: var(--tbl-hover); }
.tbl tbody tr:not(:last-child) td { border-bottom: 1px solid var(--tbl-border); }
/* Üste hizalı: satışın altına % inince diğer kolonların ana değeri kaymaz. */
.tbl td { padding: var(--tbl-pad); vertical-align: top; }

/* 1. sütun — Ad (sola, kalanı alır; rozet + ad + alt small) */
.tbl-c-name { width: 99%; }
.tbl-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbl-sym {
  flex: 0 0 auto; width: var(--tbl-sym); height: var(--tbl-sym); border-radius: 9px;
  display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent-2); font-size: 12px; font-weight: 800;
}
.tbl-name { font-weight: 700; line-height: 1.25; min-width: 0; }

/* Sayı sütunları — sağa, mono, tabular */
.tbl-c-num { text-align: right; font-family: var(--tbl-num-font); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl-c-sell { font-weight: 700; }
.tbl-c-sell .tbl-sell-v { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.tbl-c-sell .dir { vertical-align: middle; }

/* İkinci satır small — TEK class: ad altı (birim/zaman), satış altı (% renkli),
   makas altı (marj %). Renk: % için .is-up/.is-down devralır (aşağıda). */
.tbl-sub, .tbl-name small {
  display: block; margin-top: 2px; font-size: var(--tbl-sub-fs); font-weight: 600;
  color: var(--tbl-sub-color); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.tbl-c-num .tbl-sub { font-family: var(--tbl-num-font); }

/* Vurgulu satır (serbest piyasa / kapalıçarşı referansı) + ince ayraç */
.tbl tr.tbl-row--hl td { background: var(--tbl-row-hl); font-weight: 700; }
/* Aktif kaynak satırı (örn. /gram-altin/{banka} görünümünde o banka) — vurgulu, sıralamayı bozmaz */
.tbl tbody tr.tbl-row--active td { background: var(--accent-soft); }
.tbl tr.tbl-div td { padding: 0; height: 1px; background: var(--tbl-border-strong); border: 0; }

/* Mobil: sembol rozeti gizli (kullanıcı isteği) + sıkı padding/font */
@media (max-width: 560px) {
  .tbl { font-size: var(--tbl-fs-sm); }
  .tbl td { padding: var(--tbl-pad-sm); }
  .tbl-sym { display: none; }
  .tbl-name-cell { gap: 0; }
}

/* Popular rates list (sidebar) */
.poplist { display: flex; flex-direction: column; }
.poprow {
  display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.poprow:last-child { border-bottom: 0; }
.poprow:hover { background: var(--surface-2); }
.poprow .sym { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-size: 12px; font-weight: 800; }
.poprow .p-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poprow .p-rate { text-align: right; font-weight: 800; font-size: 14.5px; }
.poprow .p-pct { text-align: right; font-size: 12.5px; font-weight: 800; min-width: 56px; }
.poprow.all td, .all-row { text-align: center; }
.all-row { padding: 12px; text-align: center; }
.all-row a { color: var(--accent-2); font-weight: 800; font-size: 13.5px; }

/* Yüzde / değişim renk kabı (canlı) */
.is-up { color: var(--up); } .is-down { color: var(--down); }

/* (Eski .rt kur tablosu kaldırıldı → artık yukarıdaki tek .tbl sistemi.) */

/* Para birimleri / "diğer" listeleri (tek sayfa; .tbl + arama kutusu) */
.dpb-search {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 11px 14px;
  font-size: 14px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 11px;
}
.dpb-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.dpb-none { padding: 18px 14px; text-align: center; color: var(--text-faint); font-size: 13.5px; }
.tbl tbody tr.passive { opacity: .5; }

/* ===== PWA açılış ekranı — YALNIZCA kurulu app (standalone) modunda; havalı/gradient ===== */
#pwa-splash { display: none; }
@media (display-mode: standalone) {
  #pwa-splash {
    display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center;
    background: radial-gradient(125% 85% at 50% 16%, #123a63 0%, #0a1d38 46%, #06101f 100%);
    transition: opacity .5s ease;
  }
  #pwa-splash.hide { opacity: 0; pointer-events: none; }
  .pwa-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .pwa-splash-badge {
    width: 96px; height: 96px; border-radius: 50%; color: #fff;
    background: linear-gradient(150deg, #2dd4bf, #0e9e8e);
    display: grid; place-items: center;
    font: 700 56px/1 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
    box-shadow: 0 18px 50px rgba(20,184,166,.5), 0 0 0 10px rgba(45,212,191,.10);
    animation: pwaPulse 1.8s ease-in-out infinite;
  }
  .pwa-splash-spark { width: 140px; height: 44px; opacity: .92; }
  .pwa-splash-spark polyline {
    stroke-dasharray: 320; stroke-dashoffset: 320;
    filter: drop-shadow(0 2px 6px rgba(94,234,212,.5));
    animation: pwaDraw 1.8s ease-out infinite;
  }
  .pwa-splash-name { font: 800 24px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .14em; color: #eaf2ff; }
  .pwa-splash-bar { width: 152px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.10); overflow: hidden; }
  .pwa-splash-bar i {
    display: block; width: 42%; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, transparent, #5eead4, transparent);
    animation: pwaSlide 1.1s ease-in-out infinite;
  }
  .pwa-splash-txt { font-size: 12.5px; color: #8fa9cf; letter-spacing: .02em; }
}
@keyframes pwaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pwaDraw  { 0% { stroke-dashoffset: 320; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes pwaSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }

/* ===== İletişim — dekoratif splash estetiği (TEK sayfa hero; site SEO/hız etkilenmez) ===== */
.contact-hero {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  padding: 52px 24px; text-align: center; color: #eaf2ff;
  background: radial-gradient(125% 85% at 50% 16%, #123a63 0%, #0a1d38 46%, #06101f 100%);
}
.contact-badge {
  width: 92px; height: 92px; border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, #2dd4bf, #0e9e8e); display: grid; place-items: center;
  font: 700 54px/1 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 18px 50px rgba(20,184,166,.5), 0 0 0 10px rgba(45,212,191,.10);
  animation: pwaPulse 1.8s ease-in-out infinite;
}
.contact-spark { width: 160px; height: 50px; opacity: .92; }
.contact-spark polyline {
  stroke-dasharray: 360; stroke-dashoffset: 360;
  filter: drop-shadow(0 2px 6px rgba(94,234,212,.5)); animation: pwaDraw 1.9s ease-out infinite;
}
.contact-name { font: 800 26px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .14em; }
.contact-tag { font-size: 13px; color: #9fb4d2; }
.contact-row { margin-top: 6px; }
.contact-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.contact-link:hover { border-color: var(--accent); color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .contact-badge, .contact-spark polyline { animation: none; } }

/* canlı-bar — sürekli dönen shimmer (splash bar'ı; hero altında) */
.contact-bar { width: 168px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 4px; }
.contact-bar i { display: block; width: 42%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, #5eead4, transparent); animation: pwaSlide 1.1s ease-in-out infinite; }

/* iletişim bilgileri + form */
.contact-details { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.contact-link { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  font-weight: 600; font-size: 14px; text-decoration: none; }
.contact-link:hover { border-color: var(--accent); color: var(--accent-2); }
.contact-link.is-static, .contact-link.is-static:hover { cursor: default; border-color: var(--border-strong); color: var(--text); }
.contact-link svg { color: var(--accent-2); flex: 0 0 auto; }
.contact-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-f { display: flex; flex-direction: column; gap: 5px; }
.cf-f > span { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.cf-f input, .cf-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font: 14px "IBM Plex Sans", system-ui, sans-serif; }
.cf-f input:focus, .cf-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-ta { min-height: 120px; resize: vertical; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button { align-self: flex-start; padding: 11px 22px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.contact-form button:hover { filter: brightness(1.05); }
.contact-ok { margin-top: 16px; padding: 14px 16px; border-radius: 11px; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--up) 14%, transparent); border: 1px solid var(--up); }
.contact-err { margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--down) 13%, transparent); border: 1px solid var(--down); }
@media (max-width: 480px) { .cf-grid { grid-template-columns: 1fr; } }

/* Kurumsal prose (metodoloji / gizlilik) — başlık ritmi */
.corp-prose h2 { font-size: 19px; margin: 22px 0 8px; }
.corp-prose h2:first-child { margin-top: 4px; }
.corp-prose h3 { font-size: 15.5px; margin: 18px 0 6px; color: var(--text); }
.corp-prose p { margin: 0 0 11px; }
.corp-prose a { color: var(--accent-2); }

/* ----- Kaynak sekmeleri (altın: Serbest Piyasa / Kapalıçarşı / Bankalar) ----- */
.src-tabs { display: flex; gap: 7px; padding: 12px 14px 0; flex-wrap: wrap; }
.src-tab {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 14px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.src-tab:hover { color: var(--text); border-color: var(--border-strong); }
.src-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* "yakında" (banka döviz API'si gelene dek) — tıklanamaz, soluk */
.src-tab.src-soon { cursor: default; opacity: .55; }
.src-tab.src-soon:hover { color: var(--text-muted); border-color: var(--border); background: var(--surface-2); }
/* Hero içindeki kaynak sekmeleri ortalı, hero-main'den önce */
.hero .src-tabs { justify-content: center; padding: 0 0 14px; }
.src-panel { margin-top: 4px; }

/* Kaynak seçici (card-head sağ üst): mavi ripple ikon + select — etiketsiz, kompakt pill */
.card-head .src-pick {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 11px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px;
  max-width: 64vw;
}
.card-head .src-pick:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
/* Mavi ripple nokta — "canlı kaynak" işareti */
.src-ico { position: relative; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); }
.src-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); animation: src-ripple 1.8s ease-out infinite; }
@keyframes src-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .src-ico::after { animation: none; } }
.src-select {
  font-size: 13.5px; font-weight: 700; color: var(--text); background: transparent;
  border: 0; border-radius: 999px; padding: 4px 26px 4px 4px; cursor: pointer;
  max-width: 100%; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb4d2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
.src-select:focus { outline: none; }

/* Dönemsel performans — yatay kaydırmalı sütunlar (hs-row ile aynı dil) */
.perf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 14px; }
.perf-scroll::-webkit-scrollbar { display: none; }
.perf-row { display: flex; }
@media (min-width: 561px) { .hs-item[aria-hidden="true"] { display: none; } }
.perf-col { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.perf-col:first-child { padding-left: 0; }
.perf-col + .perf-col { border-left: 1px solid var(--border); }
.perf-k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.perf-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
.perf-col.up   .perf-v { color: var(--up,   #16c784); }
.perf-col.down .perf-v { color: var(--down, #ea3943); }
.perf-col.flat .perf-v { color: var(--text-muted); }
/* Mobil: hs-item ile birebir hizalı — 3 sütun görünür, 4-5 yana kaydırılır */
@media (max-width: 560px) {
  .perf-row { flex-wrap: nowrap; }
  .perf-col { flex: 0 0 33.333%; min-width: 0; padding: 0 10px; }
  .perf-col:first-child { padding-left: 0; border-left: 0; }
}

/* ---- Karşılıklı çevirici kopya ikonu (hero-conv.php; input'un içinde sağda) ---- */
.conv-field .conv-copy {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
  border-radius: 8px; transition: color .15s, background .15s;
}
.conv-field .conv-copy:hover { color: var(--accent); background: var(--surface-3, var(--surface-2)); }
.conv-field .conv-copy.copied { color: #22c55e; }
.conv-field:has(.conv-copy) input { padding-right: 42px; }

/* Canlı saat — kutunun sağ altı (dönüştürücüden sonra) */
.hero-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-foot .card-time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Paylaş — WhatsApp ikonu + cihaz (native) paylaşımı (hero-foot'ta, saatin solunda) */
.share { display: inline-flex; gap: 6px; align-items: center; }
.share-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer; flex-shrink: 0; }
.share-wa { background: #25d366; border-color: #25d366; color: #fff; }
.share-wa:hover { filter: brightness(1.06); }
.share-native { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.share-native:hover { border-color: var(--accent); color: var(--accent-2); }
.share-copied::after { content: " ✓"; color: var(--up); }
.badge.bank-marj { color: var(--text-faint); background: var(--surface-2); }
/* Kaynak kotasyon saati — kurun altında soluk */
.src-zaman { color: var(--text-faint); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.src-zaman:not(:empty)::before { content: "· "; }
.src-wait { padding: 16px 14px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* Harici altın kaynak sayfası — intro (görsel + yazı) */
.src-intro { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; }
.src-intro-img { flex: 0 0 auto; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.src-intro-txt { min-width: 0; }
.src-intro-txt :first-child { margin-top: 0; }
@media (max-width: 560px) { .src-intro { flex-direction: column; gap: 10px; } .src-intro-img { width: 72px; height: 72px; } }
/* Kaynak tabloları (altın SP/KÇ/Banka, kur sayfası piyasalar) artık tek .tbl
   sistemini kullanır: auto-layout uzun değerleri kırpmaz, makas kendi sütununda
   (.num + .tbl-sub marj), referans satırları .tbl-row--hl ile vurgulanır.
   Eski .src-panel/.makas-*/#altin-banka genişlik hack'lerine gerek kalmadı. */
/* Kaynak hücre flash'ı (yön rengiyle kısa arka plan) */
.flash-up   { animation: srcFlashUp   var(--flash-duration, .7s) ease; }
.flash-down { animation: srcFlashDown var(--flash-duration, .7s) ease; }
@keyframes srcFlashUp   { 0% { background: var(--up-bg); }   100% { background: transparent; } }
@keyframes srcFlashDown { 0% { background: var(--down-bg); } 100% { background: transparent; } }

/* ----- 404 sayfası -------------------------------------------------- */
.nf-card { text-align: center; padding: 40px 22px 34px; }
.nf-code {
  font: 800 clamp(64px, 18vw, 104px)/1 "IBM Plex Mono", monospace; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.nf-title { font-size: clamp(20px, 5vw, 26px); font-weight: 800; margin: 6px 0 10px; }
.nf-msg { color: var(--text-muted); max-width: 460px; margin: 0 auto; }
.nf-path { display: inline-block; margin-top: 8px; font-family: "IBM Plex Mono", monospace;
  font-size: 13px; color: var(--text-faint); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; word-break: break-all; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 22px 0 8px; }
.nf-btn { font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); }
.nf-btn:hover { border-color: var(--accent); }
.nf-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nf-pop { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.nf-pop-h { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-faint); margin-bottom: 10px; }
.nf-pop-links { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.nf-pop-links a { font-size: 13px; color: var(--accent-2); text-decoration: none;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; }
.nf-pop-links a:hover { background: var(--surface-2); }

/* ----- Ana sayfa: intro başlık -------------------------------------- */
.page-intro { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.page-intro h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.page-intro--standalone { padding: 14px 16px 10px; }

/* ----- Ana sayfa: çevirici (select + sonuç) ------------------------- */
.converter:has(.conv-select-field) { grid-template-columns: 1fr 1.3fr; }
.conv-select-field select {
  width: 100%; font-size: 16px; font-weight: 700; padding: 13px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb4d2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.conv-select-field select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.conv-result {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
}
.conv-eq { font-size: clamp(22px, 6vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--accent-2); }
.conv-hint { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 389px) {
  /* Sembol rozeti zaten 560px'te gizleniyor (.tbl-sym). Burada sadece başlık. */
  .tbl-name { font-size: 13.5px; }
  .page-intro h1 { font-size: 19px; }
}

/* ----- Çapraz Kur & Endeksler listesi ------------------------------- */
.crosslist { display: flex; flex-direction: column; }
.crossrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.crossrow:last-child { border-bottom: 0; }
.crossrow:hover { background: var(--surface-2); }
.cross-name { font-weight: 600; font-size: 14px; min-width: 0; }
.cross-name small { display: block; font-size: 10.5px; color: var(--text-faint); font-weight: 600; letter-spacing: .03em; }
.cross-val { font-weight: 700; font-size: 14.5px; text-align: right; }
.cross-pct { font-weight: 700; font-size: 12.5px; text-align: right; min-width: 62px; }

/* ----- Link lists ----------------------------------------------------- */
.linklist h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 8px; }
.linklist h3 a { color: inherit; }
.linklist a.row {
  display: block; padding: 11px 13px; margin: 7px 0; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 9px; font-size: 13.5px; transition: transform .12s ease, background .15s ease;
}
.linklist a.row:hover { background: var(--surface-3); transform: translateX(2px); }
.linklist .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linklist .two a.row { margin: 0; }

/* ----- Prose (SEO veri bloğu) ---------------------------------------- */
.prose {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-muted);
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.prose b { color: var(--text); font-weight: 700; }

/* Anlık kur chip — data-kur hücresini saran vurgulayıcı */
.prose .hl {
  display: inline-flex; align-items: center;
  font-size: .97em; font-weight: 800; letter-spacing: -.01em;
  padding: 2px 9px 3px; border-radius: 6px;
  vertical-align: baseline; line-height: 1.45;
}
.prose .hl.go_red   { color: var(--down); background: var(--down-bg); }
.prose .hl.go_green { color: var(--up);   background: var(--up-bg);  }
.prose-unit { font-weight: 700; color: var(--text); margin-left: 2px; }

/* Yüzde değişim (is-up/is-down live-data.js'den) */
.prose .is-up   { color: var(--up);   font-weight: 700; }
.prose .is-down { color: var(--down); font-weight: 700; }

.prose a {
  color: var(--accent-2); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  transition: border-color .15s;
}
.prose a:hover { border-bottom-color: var(--accent-2); }

/* Reklam alanları artık panel snippet'lerinden gelir (yerleşik .ad-slot kaldırıldı). */

/* ----- Footer --------------------------------------------------------- */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--border); margin-top: 28px; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: 26px 16px; display: grid; grid-template-columns: 1fr; gap: 22px; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer a { color: var(--text); }
.site-footer a:hover { text-decoration: underline; }
.footer-links { margin: 10px 0; }
.footer-links a { margin-right: 8px; }
.footer-brand { color: var(--text); font-weight: 800; }

/* ====================================================================== */
/*  Finans bileşenleri (modern eklentiler)                                */
/* ====================================================================== */

/* ----- İlgili fiyatlar şeridi (hero altı: diğer türler/pariteler) ------ */
.related-card .card-head { border-bottom: 0; padding-bottom: 0; }
.rel-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rel-strip::-webkit-scrollbar { display: none; }
.rel-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; min-width: 96px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
  transition: border-color .14s, background .14s;
}
.rel-chip:hover { border-color: var(--accent); background: var(--surface-3); }
.rel-name { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.rel-rate { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.rel-pct  { font-size: 11px; font-weight: 700; }

/* ----- 52 hafta aralığı ---------------------------------------------- */
.range52 { padding: 4px 2px; }
.r52-head { display: flex; justify-content: space-between; align-items: baseline; }
.r52-head .now { font-weight: 800; }
.r52-track { position: relative; height: 8px; border-radius: 999px; margin: 14px 0 9px; background: linear-gradient(90deg, var(--up), #d9a400 55%, var(--down)); opacity: .85; }
.r52-marker { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.r52-ends { display: flex; justify-content: space-between; font-size: 12px; }
.r52-ends b { display: block; font-size: 15.5px; font-weight: 700; }
.r52-ends .lo { color: var(--up); } .r52-ends .hi { color: var(--down); }
.r52-ends span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* ----- Teknik görünüm ------------------------------------------------ */
.tech-verdict { text-align: center; padding: 6px 0 14px; }
.tech-pill { display: inline-block; font-size: 19px; font-weight: 800; letter-spacing: .04em; padding: 7px 22px; border-radius: 999px; }
.tech-pill.buy  { color: var(--up);   background: var(--up-bg); }
.tech-pill.sell { color: var(--down); background: var(--down-bg); }
.tech-pill.neutral { color: var(--text-muted); background: var(--surface-3); }
.tech-sub { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tech-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px; text-align: center; }
.tech-cell .t-name { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; }
.tech-cell .t-verdict { font-weight: 800; margin: 5px 0 6px; }
.tech-counts { display: flex; justify-content: center; gap: 9px; font-size: 11.5px; font-weight: 700; }
.tech-counts .c-buy { color: var(--up); } .tech-counts .c-sell { color: var(--down); } .tech-counts .c-neu { color: var(--text-faint); }

/* ----- Hızlı dönüşüm tablosu ----------------------------------------- */
.conv-mini { width: 100%; border-collapse: collapse; font-size: var(--tbl-fs); }
.conv-mini td { padding: var(--tbl-pad); border-bottom: 1px solid var(--tbl-border); }
.conv-mini tr:last-child td { border-bottom: 0; }
.conv-mini tr:hover { background: var(--tbl-hover); }
.conv-mini td:first-child { color: var(--text-muted); font-weight: 600; }
.conv-mini td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--tbl-num-font); }

/* ----- Ekonomik takvim ----------------------------------------------- */
.cal-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cal-item:last-child { border-bottom: 0; }
.cal-date { text-align: center; }
.cal-date .d { font-size: 17px; font-weight: 800; line-height: 1; }
.cal-date .mo { font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.cal-main .ev { font-weight: 600; font-size: 14px; }
.cal-main .meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.cal-impact { display: inline-flex; gap: 3px; align-items: center; }
.cal-impact i { width: 5px; height: 13px; border-radius: 2px; background: var(--border-strong); }
.cal-impact.high i { background: var(--down); }
.cal-impact.med  i:nth-child(-n+2) { background: #d9a400; }
.cal-impact.low  i:nth-child(1) { background: var(--up); }

/* ----- Fiyat alarmı -------------------------------------------------- */
.alert-card .a-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 12px; }
.alert-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; margin-top: 10px; }
.alert-seg button { border: 0; background: transparent; color: var(--text-muted); font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 8px; }
.alert-seg button.on { background: var(--accent); color: #fff; }
.alert-input { width: 100%; min-width: 0; padding: 12px 13px; font-size: 16px; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface-2); color: var(--text); }
.alert-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.btn-primary { border: 0; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; padding: 0 18px; border-radius: 11px; white-space: nowrap; }
.btn-primary:hover { background: var(--accent-2); }
.alert-note { font-size: 12px; color: var(--text-muted); margin-top: 9px; min-height: 1em; }

/* ----- SSS (FAQ) ----------------------------------------------------- */
.faq { border-bottom: 1px solid var(--border); }
.faq:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 14.5px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--accent); transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 16px 15px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/* Fiyat tik flash'ı — BİREBİR liveexchanges modeli. live-data.js .tick-up/.tick-down ekler.
   Süre: --flash-duration · Mod: data-flash-mode="text|bg|both" (tweaks paneli runtime ayarlar). */

/* Yazı rengi flash'ı (renk değişir + hafif ölçek) */
@keyframes tick-up-text {
  0%   { color: var(--up);   transform: scale(1.05); }
  35%  { color: var(--up);   transform: scale(1); }
  100% { color: inherit;     transform: none; }
}
@keyframes tick-down-text {
  0%   { color: var(--down); transform: scale(0.96); }
  35%  { color: var(--down); transform: scale(1); }
  100% { color: inherit;     transform: none; }
}
/* Arka plan flash'ı (değerin arkasında parıltı; metin yerinde kalır, layout'u itmez) */
@keyframes tick-up-bg {
  0%   { background-color: color-mix(in srgb, var(--up) 38%, transparent);
         box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 38%, transparent); }
  100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
@keyframes tick-down-bg {
  0%   { background-color: color-mix(in srgb, var(--down) 38%, transparent);
         box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 38%, transparent); }
  100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
.tick-up, .tick-down {
  display: inline-block; border-radius: 3px;
  animation-duration: var(--flash-duration, 700ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/* Varsayılan + 'both': metin rengi VE arka plan birlikte yanar */
.tick-up   { animation-name: tick-up-text, tick-up-bg; }
.tick-down { animation-name: tick-down-text, tick-down-bg; }
/* 'text' modu: yalnızca yazı rengi */
html[data-flash-mode='text'] .tick-up   { animation-name: tick-up-text; }
html[data-flash-mode='text'] .tick-down { animation-name: tick-down-text; }
/* 'bg' modu: yalnızca arka plan */
html[data-flash-mode='bg'] .tick-up   { animation-name: tick-up-bg; }
html[data-flash-mode='bg'] .tick-down { animation-name: tick-down-bg; }

/* ----- Makaleler (liste + tek makale) -------------------------------- */
.art-list { display: flex; flex-direction: column; }
.art-item { display: block; padding: 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.art-item:last-child { border-bottom: 0; }
.art-item:hover { background: var(--surface-2); }
.art-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); }
.art-cat { background: var(--accent-soft); color: var(--accent-2); font-weight: 700; padding: 2px 9px; border-radius: 6px; }
.art-title { font-size: 17px; font-weight: 800; margin: 7px 0 5px; letter-spacing: -.01em; }
.art-excerpt { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.art-crumb { font-size: 13px; margin-bottom: 10px; }
.art-crumb a { color: var(--accent-2); text-decoration: none; }
.art-h1 { font-size: clamp(22px, 5vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.art-meta-lg { margin-top: 10px; font-size: 13px; }
.art-upd { color: var(--text-faint); }
/* Markdown gövde */
.article-body { margin-top: 18px; font-size: 15.5px; line-height: 1.75; }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { font-size: 20px; font-weight: 800; margin: 26px 0 10px; }
.article-body h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 22px; }
.article-body li { margin: 4px 0; }
.article-body a { color: var(--accent-2); }
.article-body blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--text-muted); }
.article-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px;
  font-size: 13.5px; font-family: "IBM Plex Mono", monospace; }
.article-body pre { background: var(--surface-2); padding: 14px; border-radius: 10px; overflow-x: auto; }
.article-body pre code { background: none; padding: 0; }
.article-body img { max-width: 100%; border-radius: 10px; }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/* ----- Küçük telefonlar (≤ 380px, 360px hedef) ----------------------- */
@media (max-width: 380px) {
  :root { --gap: 12px; }
  body { font-size: 14.5px; }

  .header-top { gap: 8px; padding: 8px 10px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .logo .word { font-size: 21px; letter-spacing: .02em; }
  .logo-sep { height: 21px; }
  .logo .badge { width: 23px; height: 23px; }


  .pin { padding: 8px 10px; }
  .pin-name { font-size: 10.5px; }
  .pin-rate { font-size: clamp(15px, 4.3vw, 19px); }
  .pin-pct { font-size: 10.5px; }

  .swipe-menu a { padding: 6px 11px; font-size: 12.5px; }
  .marquee { gap: 20px; }
  .mq { padding-left: 20px; font-size: 12px; }

  .layout { padding: 12px 10px 30px; }
  .card-pad { padding: 14px; }
  .card-head { padding: 12px 14px; }
  .hero { padding: 15px 13px; }
  .hero-rate { font-size: clamp(34px, 11.5vw, 46px); }
  .hs-v { font-size: 13px; }
  .converter { gap: 6px; }
  /* Mobil: yatay padding'i kıs (dikey aynı) → sayıya daha çok yer, görünüm bozulmaz */
  .conv-field input { padding: 11px 8px; font-size: 15px; }
  .conv-field:has(.conv-copy) input { padding-right: 36px; }
  .conv-field .conv-copy { right: 4px; width: 28px; }
  .conv-swap { width: 32px; height: 32px; }

  .stats { gap: 7px; }
  .stat { padding: 10px 6px; }

  .chart-tab { padding: 6px 12px; }
  #tlkur-chart { height: 260px; }

  .poprow { grid-template-columns: 26px 1fr auto auto; gap: 8px; padding: 10px 12px; }
  .poprow .sym { width: 26px; height: 26px; font-size: 11px; }
  .poprow .p-name { font-size: 13.5px; }
  .poprow .p-rate { font-size: 13.5px; }
  .poprow .p-pct { min-width: 50px; font-size: 12px; }

  .linklist .two { grid-template-columns: 1fr 1fr; gap: 7px; }
  .footer-grid { padding: 22px 12px; }

  .rel-chip { min-width: 88px; padding: 8px 11px; }
  .tech-pill { font-size: 17px; padding: 6px 18px; }
  .tech-grid { gap: 7px; }
  .tech-cell { padding: 9px; }
  .tech-counts { gap: 6px; font-size: 11px; }
  .cal-item { grid-template-columns: 46px 1fr auto; gap: 9px; padding: 11px 12px; }
  .cal-main .ev { font-size: 13px; }
  .conv-mini td { padding: 9px 12px; font-size: 13.5px; }
}

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