/* =========================================================
   dolarnekadar.net — pano estetigi, mobile-first
   ========================================================= */

:root{
  --ink:#0F1A2B;
  --ink-soft:#5A6572;
  --bg:#F1F4F8;
  --card:#FFFFFF;
  --line:#E4E9F1;
  --brand:#0B3D5C;      /* derin petrol */
  --brand-2:#0E4E75;
  --gold:#B0842B;       /* pirinc/altin vurgu */
  --up:#0E9D57;
  --down:#DE3B3B;
  --same:#8A93A2;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,26,43,.06), 0 8px 24px rgba(16,26,43,.05);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp); line-height:1.15; margin:0}
.wrap{width:100%; max-width:1000px; margin:0 auto; padding:0 16px}
.dir-up{--dir:var(--up)} .dir-down{--dir:var(--down)} .dir-same{--dir:var(--same)}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:var(--card);
  border-bottom:1px solid var(--line)}
.head-row{display:flex; align-items:center; gap:12px; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--disp);
  font-weight:700; font-size:20px; letter-spacing:-.02em}
.brand-mark{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--brand); color:#fff; font-size:19px; font-weight:700}
.brand-name b{color:var(--brand); font-weight:700}
.nav{margin-left:auto; display:flex; gap:4px}
.nav a{padding:9px 13px; border-radius:9px; color:var(--ink-soft); font-weight:500; font-size:15px}
.nav a:hover{background:var(--bg); color:var(--ink)}
.nav a.on{color:var(--brand); background:#EAF2F8}
.nav-toggle{display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  background:var(--card); border-radius:10px; cursor:pointer; padding:11px}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; margin:3px 0}

/* ---------- Ticker (imza) ---------- */
.ticker{background:var(--brand); overflow:hidden; border-bottom:2px solid var(--gold)}
.ticker-track{display:inline-flex; gap:34px; padding:9px 0; white-space:nowrap;
  animation:ticker 46s linear infinite; will-change:transform}
.tick{font-family:var(--mono); font-size:13.5px; color:#DCEAF3; display:inline-flex; gap:8px; align-items:baseline}
.tick b{color:#fff; font-weight:600} .tick i{font-style:normal; font-variant-numeric:tabular-nums}
.tick em{font-style:normal; font-weight:600}
.tick-up em{color:#5CE0A0} .tick-down em{color:#FF8E8E} .tick-same em{color:#9DB6C7}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Genel bloklar ---------- */
main.wrap{padding-top:20px; padding-bottom:40px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px}
.block{margin:26px 0}
.block-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.block-head h2{font-size:19px}
.more,.crumbs a{color:var(--brand); font-weight:600; font-size:14px}
.crumbs{color:var(--ink-soft); font-size:13.5px; margin:4px 0 16px}
.crumbs span{margin:0 6px; opacity:.5}
.page-head{margin:6px 0 18px}
.page-head h1{font-size:26px; letter-spacing:-.02em}
.lede{color:var(--ink-soft); margin:6px 0 0}
.muted{color:var(--ink-soft); font-size:14px}
.empty{color:var(--ink-soft); padding:18px; text-align:center;
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius)}

/* ---------- Hero ---------- */
.hero{display:grid; gap:14px; margin:8px 0 4px}
.hero-main{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; position:relative; overflow:hidden}
.hero-main::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--dir,var(--brand))}
.eyebrow{margin:0 0 6px; color:var(--ink-soft); font-weight:600; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em}
.hero-price .big{font-family:var(--mono); font-weight:600; font-size:clamp(42px,12vw,68px);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink)}
.hero-price .cur{color:var(--ink-soft); font-size:.5em; vertical-align:super; margin-right:4px}
.hero-meta{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}
.hero-meta b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.hero-link{display:inline-block; margin-top:14px; color:var(--brand); font-weight:600}

.hero-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
  border-top:3px solid var(--dir,var(--brand))}
.tile.is-gold{border-top-color:var(--gold)}
.tile-name{font-size:13px; color:var(--ink-soft); font-weight:600}
.tile-price{font-family:var(--mono); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- Pill (degisim) ---------- */
.pill{display:inline-flex; align-items:center; gap:3px; font-family:var(--mono);
  font-size:13px; font-weight:600; padding:3px 8px; border-radius:999px;
  background:#EEF2F7; color:var(--dir,var(--ink-soft)); white-space:nowrap}
.big-pill{font-size:15px; padding:5px 12px}
.dir-up .pill::before{content:"▲"; font-size:9px}
.dir-down .pill::before{content:"▼"; font-size:9px}

/* ---------- Pano (board) ---------- */
.board{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.board-head{display:none}
.row{display:grid; grid-template-columns:5px 1fr auto; gap:2px 12px;
  grid-template-areas:"lead name sell" "lead buy chg";
  align-items:center; padding:12px 14px; border-top:1px solid var(--line);
  transition:background .12s}
.row:first-child{border-top:0}
.row:hover{background:#FAFBFD}
.lead{grid-area:lead; align-self:stretch; width:5px; border-radius:3px; background:var(--dir,var(--same))}
.col{min-width:0}
.col label{display:block; font-size:11px; color:var(--ink-soft); font-weight:500}
.col.name{grid-area:name}
.col.name b{font-weight:600; font-size:15px; display:block; overflow:hidden; text-overflow:ellipsis}
.col.name small{color:var(--ink-soft); font-size:12px; font-family:var(--mono)}
.is-gold .col.name small{color:var(--gold)}
.col.buy{grid-area:buy}
.col.sell{grid-area:sell; text-align:right}
.col.chg{grid-area:chg; text-align:right}
.col.buy i,.col.sell i{font-family:var(--mono); font-variant-numeric:tabular-nums; font-style:normal}
.col.sell i{font-size:16px; font-weight:600}
.col.buy i{color:var(--ink-soft); font-size:14px}

/* ---------- Cevirici ---------- */
.mini-conv{padding:12px}
.conv-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.conv-form input,.conv-form select{font-family:var(--body); font-size:15px; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); min-width:0}
.conv-form input{flex:1 1 90px; font-family:var(--mono)}
.conv-form select{flex:1 1 120px}
.conv-form button{background:var(--brand); color:#fff; border:0; padding:11px 18px;
  border-radius:10px; font-weight:600; cursor:pointer; font-family:var(--body); font-size:15px}
.conv-form button:hover{background:var(--brand-2)}
.conv-arrow{color:var(--ink-soft)}

.conv-card{padding:20px}
.conv-form.big{gap:10px}
.conv-field{display:flex; flex-direction:column; gap:5px; flex:1 1 120px}
.conv-field label{font-size:12px; color:var(--ink-soft); font-weight:600}
.swap{background:var(--bg); border:1px solid var(--line); border-radius:10px; width:44px; height:44px;
  align-self:flex-end; cursor:pointer; font-size:18px; color:var(--brand)}
.conv-result{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.conv-in{color:var(--ink-soft)}
.conv-eq{color:var(--ink-soft)}
.conv-out{font-family:var(--mono); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--brand)}
.conv-unit{color:var(--ink-soft)}

/* ---------- Varlik detay ---------- */
.asset-hero{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; position:relative; overflow:hidden; margin-bottom:8px}
.asset-hero::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--dir,var(--brand))}
.asset-hero.is-gold::before{background:var(--gold)}
.asset-hero-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.asset-hero-top h1{font-size:22px}
.asset-hero-top h1 small{color:var(--ink-soft); font-family:var(--mono); font-size:15px}
.asset-price{font-family:var(--mono); font-weight:600; font-size:clamp(38px,11vw,60px);
  line-height:1.05; margin:10px 0 6px; font-variant-numeric:tabular-nums}
.asset-price .cur{color:var(--ink-soft); font-size:.5em; vertical-align:super; margin-right:4px}
.asset-sub{display:flex; gap:18px; color:var(--ink-soft)}
.asset-sub b{font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums}
.asset-chart{margin-top:16px; height:120px}
.spark{width:100%; height:120px; display:block}
.chart-cap{margin:4px 0 0; font-size:12px; color:var(--ink-soft)}

/* ---------- Hizli tablo (kac TL) ---------- */
.qtable{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.qrow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.qrow:hover{border-color:var(--brand); color:var(--brand)}
.qrow.on{border-color:var(--brand); background:#EAF2F8}
.qrow b{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- Cevap sayfasi ---------- */
.answer{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; margin-bottom:8px}
.answer h1{font-size:24px}
.answer-big{font-family:var(--mono); font-weight:600; font-size:clamp(40px,12vw,64px);
  color:var(--brand); line-height:1.05; margin:12px 0; font-variant-numeric:tabular-nums}
.answer-big .cur{font-size:.55em; color:var(--ink-soft); vertical-align:super; margin-right:4px}
.answer-line b{font-family:var(--mono)}

/* ---------- Butonlar / CTA ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff;
  padding:12px 18px; border-radius:11px; font-weight:600}
.btn:hover{background:var(--brand-2); color:#fff}
.btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand); background:#EAF2F8}
.cta-conv{display:flex; gap:10px; flex-wrap:wrap}

.cat-tabs{display:flex; gap:8px; margin-top:16px}
.cat-tabs a{padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-soft); font-weight:600; font-size:14px; background:var(--card)}
.cat-tabs a.on{color:var(--brand); border-color:var(--brand); background:#EAF2F8}

.seo-note{margin-top:26px}
.seo-note h2{font-size:18px; margin-bottom:8px}
.seo-note p{color:var(--ink-soft); margin:0}
.seo-note a{color:var(--brand); font-weight:500}

/* ---------- 404 ---------- */
.notfound{text-align:center; padding:50px 16px}
.nf-code{font-family:var(--mono); font-size:64px; font-weight:600; color:var(--brand)}
.nf-links{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}

/* ---------- Footer ---------- */
.site-foot{background:var(--card); border-top:1px solid var(--line); margin-top:30px; padding:30px 0 40px}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.foot-cols h4{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:10px}
.foot-cols a{display:block; padding:5px 0; color:var(--ink); font-size:14.5px}
.foot-cols a:hover{color:var(--brand)}
.disclaimer{margin:24px 0 6px; color:var(--ink-soft); font-size:13px; line-height:1.6;
  border-top:1px solid var(--line); padding-top:18px}
.copyright{color:var(--ink-soft); font-size:13px; margin:0}

.hide-js{display:none}

/* ---------- Kurulum durumu ---------- */
.setup{margin-top:8px}
.setup h1{font-size:22px; margin-bottom:8px}
.setup ol{margin:12px 0; padding-left:20px; color:var(--ink); line-height:1.8}
.setup ol a{color:var(--brand); font-weight:600}
.setup .btn{margin-top:8px}

/* ---------- Masaustu ---------- */
@media (min-width:720px){
  .hero{grid-template-columns:1.4fr 1fr; align-items:stretch}
  .hero-tiles{grid-template-columns:1fr; gap:10px}
  .tile{flex-direction:row; align-items:center; justify-content:space-between; border-top:0;
    border-left:3px solid var(--dir,var(--brand))}
  .tile.is-gold{border-left-color:var(--gold)}

  .board-head{display:grid; grid-template-columns:5px minmax(0,2.2fr) 1fr 1fr 1.1fr; gap:12px;
    padding:11px 14px; background:#FAFBFD; border-bottom:1px solid var(--line)}
  .board-head .col{font-size:12px; color:var(--ink-soft); font-weight:600}
  .board-head .buy,.board-head .sell,.board-head .chg{text-align:right}
  .row{grid-template-columns:5px minmax(0,2.2fr) 1fr 1fr 1.1fr;
    grid-template-areas:none; padding:13px 14px}
  .row .col.name,.row .col.buy,.row .col.sell,.row .col.chg{grid-area:auto}
  .col label{display:none}
}

/* ---------- Mobil menu ---------- */
@media (max-width:719px){
  .nav-toggle{display:block}
  .nav{position:absolute; top:60px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--card); border-bottom:1px solid var(--line); padding:6px 12px 12px;
    box-shadow:var(--shadow); display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 10px; border-radius:8px}
}

/* ---------- Erisilebilirlik ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  *{transition:none !important}
}