/* hangibankada.com — tasarım kararlarının kaynağı: DESIGN.md */

/* Geist (SIL OFL 1.1) — kendi sunucumuzdan, render'ı engellemesin diye */
@font-face{font-family:"Geist"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/fonts/geist-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:"Geist"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/fonts/geist-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}


  /* ============ TOKENS ============ */
  :root{
    --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#F1F3F6;
    --ink:#0E1A28; --ink-2:#3A4858; --muted:#627286; --faint:#A3AEBA;
    --border:#DCE1E7; --hairline:#EBEEF2;
    --brand:#0B2F5B; --on-brand:#FFFFFF;
    --accent:#1456C8; --accent-soft:#EAF1FD;
    --pos:#0A7747; --pos-soft:#E9F6EF;
    --neg:#BF3326;
    --warn:#8A5A00; --warn-soft:#FFF3D6;
    --shadow-1:0 1px 2px rgba(14,26,40,.06), 0 1px 1px rgba(14,26,40,.04);
    --shadow-2:0 12px 32px rgba(14,26,40,.16), 0 2px 6px rgba(14,26,40,.06);
    --scrim:rgba(8,14,22,.45);
    --r-sm:6px; --r-md:10px; --r-lg:16px;
    --ease-out:cubic-bezier(.2,.8,.2,1);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A0F15; --surface:#10171F; --surface-2:#161F29;
      --ink:#E7EDF3; --ink-2:#B9C4D0; --muted:#8F9DAC; --faint:#4F5C6A;
      --border:#232F3C; --hairline:#19232E;
      --brand:#DCE7F5; --on-brand:#0B1826;
      --accent:#6FA6FF; --accent-soft:#132339;
      --pos:#43C282; --pos-soft:#0F2A1F;
      --neg:#F27D70;
      --warn:#E5B561; --warn-soft:#2A2112;
      --shadow-1:0 1px 2px rgba(0,0,0,.4);
      --shadow-2:0 12px 32px rgba(0,0,0,.55);
      --scrim:rgba(0,0,0,.6);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A0F15; --surface:#10171F; --surface-2:#161F29;
    --ink:#E7EDF3; --ink-2:#B9C4D0; --muted:#8F9DAC; --faint:#4F5C6A;
    --border:#232F3C; --hairline:#19232E;
    --brand:#DCE7F5; --on-brand:#0B1826;
    --accent:#6FA6FF; --accent-soft:#132339;
    --pos:#43C282; --pos-soft:#0F2A1F;
    --neg:#F27D70;
    --warn:#E5B561; --warn-soft:#2A2112;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 12px 32px rgba(0,0,0,.55);
    --scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }

  /* ============ BASE ============ */
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg); color:var(--ink); margin:0;
    font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14px; line-height:20px;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  h1,h2,h3,p{margin:0}
  h1,h2,h3{text-wrap:balance}
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; text-align:inherit}
  input,select{font:inherit; color:inherit}
  a{color:var(--accent); text-decoration:none}
  a:hover{text-decoration:underline}
  .prose a,.lead a,.note a,.verdict a,.faq a,.stamp a,.res-bank a{text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
  .num{font-variant-numeric:tabular-nums}
  .label{
    font-size:11px; line-height:14px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted);
  }
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  a.sr-only:focus{position:fixed; left:16px; top:12px; z-index:200; width:auto; height:auto; clip:auto; padding:8px 14px; border-radius:var(--r-sm); background:var(--ink); color:var(--surface); font-weight:600}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md)}

  .wrap{max-width:1280px; margin:0 auto; padding:0 24px}
  .layout{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start}
  @media (min-width:1240px){ .layout{grid-template-columns:minmax(0,1fr) 300px} }
  main{min-width:0}

  /* ============ BADGE ============ */
  .badge{
    display:inline-flex; align-items:center; height:20px; padding:0 6px;
    border-radius:var(--r-sm); white-space:nowrap;
    font-size:11px; font-weight:600; letter-spacing:.04em; line-height:1;
    color:var(--muted); background:var(--surface-2);
  }
  .badge.warn{color:var(--warn); background:var(--warn-soft)}
  .badge.pos{color:var(--pos); background:var(--surface); box-shadow:inset 0 0 0 1px var(--pos)}

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
    border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface);
    font-weight:500; color:var(--ink); white-space:nowrap;
    transition:border-color .12s ease, background .12s ease, color .12s ease;
  }
  .btn:hover{border-color:var(--muted)}
  .btn[aria-expanded="true"],.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
  .btn svg{width:16px; height:16px; flex:none}
  .btn.icon{width:36px; padding:0; justify-content:center; color:var(--ink-2)}
  .btn.icon.spin svg{animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Segmented control */
  .seg{
    display:inline-flex; padding:2px; gap:2px; border-radius:var(--r-sm);
    background:var(--surface-2); border:1px solid var(--border);
  }
  .seg button,.seg a{
    display:inline-flex; align-items:center; color:var(--muted); text-decoration:none;
    height:30px; padding:0 14px; border-radius:4px;
    font-weight:600; color:var(--muted); white-space:nowrap;
    transition:background .12s ease, color .12s ease;
  }
  .seg button:hover:not([aria-pressed="true"]),.seg a:hover:not([aria-current]){color:var(--ink); text-decoration:none}
  .seg button[aria-pressed="true"],.seg a[aria-current]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
  :root[data-theme="dark"] .seg button[aria-pressed="true"],:root[data-theme="dark"] .seg a[aria-current]{background:var(--border)}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .seg button[aria-pressed="true"],:root:not([data-theme="light"]) .seg a[aria-current]{background:var(--border)} }
  .seg.sm button{height:26px; padding:0 12px; font-size:13px}

  /* ============ TOP BAR ============ */
  .topbar{
    position:sticky; top:0; z-index:40;
    background:var(--surface); border-bottom:1px solid var(--border);
    transition:box-shadow .12s ease;
  }
  .topbar.scrolled{box-shadow:var(--shadow-1)}
  .bar{display:flex; align-items:center; gap:12px; min-height:60px}
  .logo{display:flex; align-items:center; gap:8px; color:inherit; flex:none}
  .logo:hover{text-decoration:none}
  .logomark{
    width:28px; height:28px; border-radius:var(--r-sm); flex:none;
    background:var(--brand); color:var(--on-brand);
    display:grid; place-items:center; font-weight:700; font-size:15px;
  }
  .logotype{font-weight:700; font-size:16px; letter-spacing:-.02em}
  .logotype span{color:var(--muted); font-weight:500}

  .tabs{display:flex; gap:4px; margin-left:24px; align-self:stretch; overflow-x:auto; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    position:relative; display:flex; align-items:center; gap:8px; padding:0 12px;
    font-weight:500; color:var(--muted); white-space:nowrap; flex:none;
  }
  .tab::after{
    content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
    border-radius:2px 2px 0 0; background:transparent;
  }
  .tab:hover{text-decoration:none}
  .tab[aria-current]{color:var(--ink); font-weight:600}
  .tab[aria-current]::after{background:var(--accent)}
  .tab:hover:not(.off):not([aria-current]){color:var(--ink)}
  .tab.off{cursor:default; color:var(--muted); opacity:.7}
  .tab:focus-visible{outline-offset:-4px}

  .bar .spacer{flex:1}
  .live{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap}
  .live .dot{width:8px; height:8px; border-radius:50%; background:var(--pos); position:relative; flex:none}
  .live .dot::after{
    content:""; position:absolute; inset:0; border-radius:50%; background:var(--pos);
    animation:pulse 2s ease-out infinite;
  }
  .live.off .dot,.live.off .dot::after{background:var(--faint); animation:none}
  @keyframes pulse{0%{transform:scale(1); opacity:.6} 100%{transform:scale(2.6); opacity:0}}
  .actions{display:flex; align-items:center; gap:8px; flex:none}

  @media (max-width:900px){
    .bar{flex-wrap:wrap; row-gap:0}
    .tabs{order:3; width:100%; margin:0 -24px; padding:0 20px; min-height:44px; flex:none; width:calc(100% + 48px)}
    .bar .spacer{display:none}
    .actions{margin-left:auto}
  }

  /* ============ TOAST ============ */
  .toast{
    position:fixed; top:12px; left:50%; z-index:100;
    transform:translate(-50%,-72px);
    background:var(--ink); color:var(--surface);
    font-size:13px; font-weight:500; border-radius:999px; padding:8px 16px;
    box-shadow:var(--shadow-2); pointer-events:none;
    transition:transform .25s ease;
  }
  .toast.show{transform:translate(-50%,0)}

  /* ============ HERO ============ */
  .hero{
    display:grid; grid-template-columns:minmax(0,1fr); gap:24px;
    padding:40px 0 24px;
  }
  @media (min-width:960px){ .hero{grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:center} }
  .eyebrow{color:var(--accent); margin-bottom:12px}
  .hero h1{font-size:34px; line-height:40px; font-weight:700; letter-spacing:-.025em; max-width:20ch}
  .lead{font-size:16px; line-height:24px; color:var(--ink-2); margin-top:12px; max-width:56ch}
  .hero .seg{margin-top:24px}

  .calc{padding:20px}
  .calc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
  .calc-head h2{font-size:16px; line-height:24px; font-weight:650}
  .field{display:block}
  .field .label{display:block; margin-bottom:8px}
  .inputwrap{
    display:flex; align-items:center; height:44px; padding:0 14px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  }
  .inputwrap:focus-within{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
  .inputwrap input{
    flex:1; min-width:0; border:none; background:none; outline:none;
    font-size:18px; font-weight:600; font-variant-numeric:tabular-nums;
  }
  .inputwrap .unit{font-weight:600; color:var(--muted)}
  .calc-res{margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); min-height:124px}
  .res-bank{display:flex; align-items:center; gap:8px; margin-top:8px; font-weight:600}
  .res-total{margin-top:8px; font-size:26px; line-height:32px; font-weight:650; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
  .res-total small{font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:4px}
  .res-save{margin-top:8px; font-size:13px; line-height:18px; color:var(--ink-2)}
  .res-save b{color:var(--pos); font-weight:650; font-variant-numeric:tabular-nums}
  .res-empty{color:var(--muted); font-size:13px}

  /* ============ KPI ============ */
  .kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden}
  .kpi{padding:16px 20px; border-left:1px solid var(--hairline); min-width:0}
  .kpi:first-child{border-left:none}
  .kpi .v{
    margin-top:8px; font-size:26px; line-height:32px; font-weight:650; letter-spacing:-.015em;
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .kpi .v.up{color:var(--pos)} .kpi .v.down{color:var(--neg)}
  .kpi .m{margin-top:4px; font-size:12px; line-height:16px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .kpi .m b{color:var(--ink-2); font-weight:600}

  /* ============ BOARD ============ */
  .board{margin-top:24px; overflow:hidden}
  .boardbar{display:flex; align-items:center; gap:8px; padding:16px 20px; border-bottom:1px solid var(--border)}
  .boardbar h2{font-size:16px; line-height:24px; font-weight:650}
  .boardbar .count{color:var(--muted); font-weight:500; margin-left:4px}
  .boardbar .spacer{flex:1}
  .sortsel{
    height:36px; padding:0 10px; border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--surface); font-weight:500; display:none;
  }

  .trendpane{padding:16px 20px 8px; border-bottom:1px solid var(--border)}
  .trendhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
  .trendhead h3{font-size:14px; font-weight:600}
  .trendhead .sub{font-size:12px; line-height:16px; color:var(--muted)}
  .trendhead .spacer{flex:1}
  .chartbox{position:relative; min-height:120px}
  .chartbox svg{display:block; width:100%; height:auto; touch-action:pan-y}
  .ttip{
    position:absolute; pointer-events:none; z-index:5; display:none;
    background:var(--ink); color:var(--surface);
    border-radius:var(--r-sm); padding:6px 10px; font-size:12px; line-height:16px;
    white-space:nowrap; transform:translate(-50%,-100%); box-shadow:var(--shadow-2);
  }
  .ttip .tv{font-weight:650; font-size:13px; font-variant-numeric:tabular-nums}
  .ttip .td{opacity:.7}

  .cols{
    display:grid;
    grid-template-columns:28px minmax(180px,1.7fr) minmax(72px,.9fr) minmax(72px,.9fr) minmax(96px,1fr) minmax(80px,.8fr) minmax(128px,1.2fr);
    column-gap:16px; align-items:center; padding:0 20px;
  }
  .thead{height:40px; border-bottom:1px solid var(--border); background:var(--surface-2)}
  .th{display:flex; align-items:center; gap:4px; height:100%; color:var(--muted); white-space:nowrap}
  .th.r{justify-content:flex-end}
  button.th:hover{color:var(--ink)}
  .th .arr{font-size:9px; letter-spacing:0; visibility:hidden}
  .th[aria-sort]:not([aria-sort="none"]){color:var(--ink)}
  .th[aria-sort]:not([aria-sort="none"]) .arr{visibility:visible}
  .th:focus-visible{outline-offset:-2px}

  .row{
    width:100%; min-height:60px; position:relative; color:inherit;
    border-bottom:1px solid var(--hairline);
    transition:background .12s ease;
  }
  .row:hover{background:var(--surface-2); text-decoration:none}
  .row:focus-visible{outline-offset:-2px; border-radius:0}
  .row.best{background:var(--pos-soft)}
  .row.best::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pos)}
  #rowsBottom .row:last-child{border-bottom:none}

  .c-rank{font-size:13px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums}
  .c-bank{display:flex; align-items:center; gap:12px; min-width:0; padding:10px 0}
  .mgram{
    width:32px; height:32px; border-radius:var(--r-sm); flex:none;
    display:grid; place-items:center;
    font-weight:700; font-size:12px; color:#fff; letter-spacing:.02em;
  }
  .bmeta{min-width:0; display:flex; flex-direction:column}
  .bname{font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap}
  .bname .nm{overflow:hidden; text-overflow:ellipsis}
  .bupd{font-size:12px; line-height:16px; color:var(--muted); display:flex; margin-top:2px}
  .bupd .badge{height:18px; font-size:11px}
  .c-num{text-align:right; font-variant-numeric:tabular-nums; min-width:0}
  .c-num .lab{display:none}
  .c-num .v{font-weight:500; white-space:nowrap}
  .c-num .v.hit{color:var(--pos); font-weight:700}
  .c-num .v.up{color:var(--pos)} .c-num .v.down{color:var(--neg)}
  .c-spread .sp{display:flex; align-items:center; justify-content:flex-end; gap:8px}
  .bar-track{width:40px; height:4px; border-radius:2px; background:var(--hairline); overflow:hidden; flex:none}
  .bar-track i{display:block; height:100%; background:var(--faint); border-radius:2px}
  .c-total .v{font-weight:600}
  .c-total .diff{display:block; font-size:12px; line-height:16px; color:var(--neg); white-space:nowrap}
  .c-total .diff.best{color:var(--pos); font-weight:600}

  /* Skeleton + empty */
  .skel .blk{display:block; height:12px; border-radius:4px; background:var(--surface-2); animation:shimmer 1.2s ease-in-out infinite alternate}
  .skel .c-num .blk{margin-left:auto; width:64%}
  @keyframes shimmer{from{opacity:1} to{opacity:.45}}
  .empty{padding:56px 20px; text-align:center; color:var(--muted)}
  .empty svg{width:28px; height:28px; color:var(--faint)}
  .empty h3{color:var(--ink); font-size:16px; line-height:24px; font-weight:600; margin-top:8px}
  .empty p{margin-top:4px}
  .empty .btn{margin-top:16px}

  /* Sponsorlu satır */
  .sponrow{
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    border-bottom:1px solid var(--hairline); background:var(--surface-2);
  }
  .sponrow .mgram{background:var(--muted)}
  .sponmeta{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px}
  .spontitle{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sponsub{font-size:13px; line-height:18px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* Not */
  .note{
    display:flex; gap:12px; margin-top:16px; padding:12px 16px;
    font-size:13px; line-height:18px; color:var(--ink-2);
    border-radius:var(--r-md); background:var(--surface-2);
  }
  .note svg{width:16px; height:16px; flex:none; margin-top:1px; color:var(--muted)}
  .note b{color:var(--ink); font-weight:600}
  .note p + p{margin-top:4px; color:var(--muted)}

  /* ============ ADS ============ */
  .ad{margin-top:24px}
  .ad .label{margin-bottom:8px}
  .adslot{
    display:grid; place-items:center; text-align:center; padding:8px;
    background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--r-sm);
    font-size:12px; color:var(--muted);
  }
  .ad-lb{height:90px; max-width:728px; margin:0 auto}
  .ad .label.center{max-width:728px; margin-left:auto; margin-right:auto}
  .rail{display:none}
  @media (min-width:1240px){ .rail{display:block} }
  .railin{position:sticky; top:84px; display:flex; flex-direction:column; gap:24px; padding-top:40px}
  .ad-mpu{height:250px}
  .ad-hpu{height:600px}

  /* ============ FOOTER ============ */
  .site-footer{margin-top:56px; border-top:1px solid var(--border); background:var(--surface)}
  .fgrid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)); gap:32px; padding:40px 0 32px}
  .fgrid p{font-size:13px; line-height:18px; color:var(--muted); margin-top:12px; max-width:40ch}
  .fgrid h2{margin-bottom:12px}
  .fgrid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:18px}
  .fgrid ul a{color:var(--ink-2)}
  .fbottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 0 32px; border-top:1px solid var(--hairline); font-size:12px; line-height:16px; color:var(--muted)}
  @media (max-width:960px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .fgrid > :first-child{grid-column:1/-1} }

  /* ============ BREADCRUMB ============ */
  .crumbs{padding-top:20px; font-size:13px; line-height:18px; color:var(--muted)}
  .crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px}
  .crumbs li{display:flex; gap:8px; align-items:center}
  .crumbs li + li::before{content:"›"; color:var(--faint)}
  .crumbs a{color:var(--muted)}
  .crumbs [aria-current]{color:var(--ink-2)}
  .crumbs + .hero{padding-top:20px}

  /* ============ SECTIONS ============ */
  .section{margin-top:40px}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
  .section-head h2{font-size:20px; line-height:28px; font-weight:650; letter-spacing:-.01em}
  .section-head a{font-size:13px; font-weight:500; white-space:nowrap}
  .stamp{font-size:13px; line-height:18px; color:var(--muted); margin-top:8px}
  .stamp time{color:var(--ink-2); font-weight:500}

  /* Ürün kartları */
  .pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
  .pcard-link{display:flex; flex-direction:column; padding:16px 20px; color:inherit; transition:border-color .12s ease}
  .pcard-link:hover{text-decoration:none; border-color:var(--muted)}
  .pcard-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
  .pcard-top h3{font-size:16px; line-height:24px; font-weight:650}
  .pcard-top .v.up{color:var(--pos)} .pcard-top .v.down{color:var(--neg)}
  .pcard-top .v{font-size:12px; font-weight:600; white-space:nowrap}
  .pcard-kv{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
  .pcard-kv .n{font-size:20px; line-height:28px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-top:2px}
  .pcard-kv .b{font-size:12px; line-height:16px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pcard-more{margin-top:16px; padding-top:12px; border-top:1px solid var(--hairline); font-size:13px; font-weight:500; color:var(--accent)}

  /* Veri tablosu (matris, banka, geçmiş) */
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .dtable{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
  .dtable caption{text-align:left; padding:16px 20px; font-size:16px; line-height:24px; font-weight:650; border-bottom:1px solid var(--border)}
  .dtable caption small{display:block; font-size:12px; line-height:16px; font-weight:400; color:var(--muted)}
  .dtable th,.dtable td{padding:12px 16px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--hairline)}
  .dtable th:first-child,.dtable td:first-child{text-align:left; padding-left:20px}
  .dtable th:last-child,.dtable td:last-child{padding-right:20px}
  .dtable thead th{background:var(--surface-2); border-bottom:1px solid var(--border); height:40px; padding-top:0; padding-bottom:0}
  .dtable thead th a{color:inherit}
  .dtable thead tr.grp th{height:32px; text-align:center; color:var(--ink-2); border-bottom:1px solid var(--hairline)}
  .dtable thead tr.grp th:first-child{text-align:left}
  .dtable tbody tr:last-child td{border-bottom:none}
  .dtable tbody tr:hover td{background:var(--surface-2)}
  .dtable td a{color:inherit}
  .dtable td a:hover{color:var(--accent)}
  .dtable .bankname{display:flex; align-items:center; gap:10px; font-weight:600}
  .dtable .bankname .mgram{width:24px; height:24px; font-size:10px}
  .dtable .hit{color:var(--pos); font-weight:700}
  .dtable .muted{color:var(--muted)}
  .dtable .up{color:var(--pos)} .dtable .down{color:var(--neg)}
  .dtable tr.me td{background:var(--pos-soft)}
  .dtable .sep{border-left:1px solid var(--hairline)}

  /* Metin (rehber, kurumsal) */
  .prose{max-width:72ch; font-size:15px; line-height:24px; color:var(--ink-2)}
  .prose h2{font-size:20px; line-height:28px; font-weight:650; color:var(--ink); margin:32px 0 8px}
  .prose h2:first-child{margin-top:0}
  .prose h3{font-size:16px; line-height:24px; font-weight:650; color:var(--ink); margin:24px 0 4px}
  .prose p{margin:0 0 12px}
  .prose ul,.prose ol{margin:0 0 12px; padding-left:20px}
  .prose li{margin-bottom:4px}
  .prose b,.prose strong{color:var(--ink); font-weight:600}
  .prose table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px}
  .prose th,.prose td{text-align:left; padding:8px 12px 8px 0; border-bottom:1px solid var(--hairline)}
  .prose th{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .prose code{font-size:13px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
  .guide{padding:24px; max-width:none}
  .guide > *{max-width:72ch}

  /* SSS */
  .faq{padding:0}
  .faq details{border-bottom:1px solid var(--hairline)}
  .faq details:last-child{border-bottom:none}
  .faq summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 20px; font-size:15px; line-height:22px; font-weight:600;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; font-size:20px; font-weight:400; color:var(--muted); flex:none; transition:transform .12s ease}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:focus-visible{outline-offset:-2px}
  .faq .ans{padding:0 20px 16px; font-size:14px; line-height:22px; color:var(--ink-2); max-width:80ch}

  /* Bağlantı listeleri */
  .linkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
  .linkgrid a{
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
    color:var(--ink); font-weight:500;
  }
  .linkgrid a:hover{text-decoration:none; border-color:var(--muted)}
  .linkgrid a .num{color:var(--muted); font-weight:500; font-size:13px}
  .linkgrid a.me{border-color:var(--pos); background:var(--pos-soft)}

  /* Özellikler */
  .feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .feat{padding:20px}
  .feat h3{font-size:16px; line-height:24px; font-weight:650; margin-top:12px}
  .feat p{font-size:14px; line-height:20px; color:var(--ink-2); margin-top:4px}
  .feat .ic{width:36px; height:36px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
  .feat .ic svg{width:18px; height:18px}
  @media (max-width:800px){ .feats{grid-template-columns:1fr} }

  /* Chip bağlantıları */
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
  .chip{display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:500; font-size:13px}
  .chip:hover{text-decoration:none; border-color:var(--muted)}

  /* Karşılaştırma kutusu (banka × ürün) */
  .verdict{padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .verdict .rank{font-size:26px; line-height:32px; font-weight:650; font-variant-numeric:tabular-nums}
  .verdict .rank small{font-size:14px; color:var(--muted); font-weight:500}
  .verdict p{font-size:13px; line-height:18px; color:var(--ink-2); margin-top:4px}
  .verdict b{font-weight:650}
  .verdict .pos{color:var(--pos)} .verdict .neg{color:var(--neg)}
  @media (max-width:700px){ .verdict{grid-template-columns:1fr} }

  .chartcard{padding:16px 20px 8px}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1100px) and (min-width:701px){
    .cols{grid-template-columns:minmax(160px,1.6fr) minmax(64px,.9fr) minmax(64px,.9fr) minmax(88px,1fr) minmax(72px,.8fr) minmax(112px,1.2fr); column-gap:12px}
    .c-rank{display:none}
    .bar-track{display:none}
  }
  @media (max-width:700px){
    .wrap{padding:0 16px}
    .tabs{margin:0 -16px; padding:0 12px; width:calc(100% + 32px)}
    .live{display:none}
    .actions{gap:6px}
    .hero{padding:24px 0 16px; gap:20px}
    .hero h1{font-size:26px; line-height:32px}
    .lead{font-size:15px; line-height:22px}
    .hero .seg{margin-top:20px; display:flex}
    .hero .seg button,.hero .seg a{flex:1; justify-content:center}
    .calc{padding:16px}
    .kpis{grid-template-columns:1fr 1fr}
    .kpi{padding:14px 16px}
    .kpi:nth-child(3){border-left:none}
    .kpi:nth-child(n+3){border-top:1px solid var(--hairline)}
    .kpi .v{font-size:20px; line-height:28px}
    .boardbar{padding:12px 16px}
    .boardbar h2 .count{display:none}
    .sortsel{display:block; max-width:150px}
    .trendpane{padding:12px 16px 4px}
    .thead{display:none}
    .cols{
      grid-template-columns:repeat(3,minmax(0,1fr));
      grid-template-areas:"bank bank chg" "buy sell spread" "total total total";
      row-gap:12px; column-gap:12px; padding:14px 16px;
    }
    .c-rank{display:none}
    .c-bank{grid-area:bank; padding:0}
    .c-buy{grid-area:buy} .c-sell{grid-area:sell} .c-spread{grid-area:spread} .c-chg{grid-area:chg; align-self:start}
    .c-total{grid-area:total}
    .c-buy,.c-sell,.c-spread{text-align:left}
    .c-num .lab{display:block; margin-bottom:2px}
    .c-chg .lab{display:none}
    .c-buy .v,.c-sell .v{font-size:16px; line-height:24px; font-weight:600}
    .c-spread .sp{justify-content:flex-start; font-size:16px; line-height:24px}
    .bar-track{display:none}
    .c-total{
      display:flex; align-items:baseline; gap:8px; text-align:left;
      padding-top:10px; border-top:1px dashed var(--hairline);
    }
    .c-total .lab{margin:0; flex:1}
    .c-total .diff{display:inline}
    .skel.cols{grid-template-areas:"bank bank chg" "buy sell spread"}
    .skel .c-total{display:none}
    .sponrow{padding:12px 16px}
    .sponrow .btn{display:none}
    .note{padding:12px}
    .ad-lb{height:100px; max-width:320px}
    .ad .label.center{max-width:320px}
    .fgrid{gap:24px}
    .section{margin-top:32px}
    .guide{padding:16px}
    .faq summary{padding:14px 16px}
    .faq .ans{padding:0 16px 14px}
    .dtable th:first-child,.dtable td:first-child{padding-left:16px; position:sticky; left:0; background:var(--surface); z-index:1}
    .dtable thead th:first-child{background:var(--surface-2)}
    .dtable caption{padding:12px 16px}
  }

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