/*
Theme Name: Döviz Altın Kripto
Theme URI: https://dovizaltinkripto.com/
Description: Canlı döviz, altın ve kripto para fiyatları için özel tema. Varlık sayfaları tema kaydından üretilir; blog normal WordPress yazısı olarak kalır.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: dak
*/

/* ============================================================
   Tasarim sistemi.

   Palet finansal veri icin secildi: notr bir zemin uzerinde tek bir
   marka mavisi, hareket icin yesil/kirmizi, altin yalnizca altin
   iceriginde kucuk bir vurgu. Sayfanin %75'i notr kalir.

   Renkler goz karariyla degil hesaplanarak secildi. Metin olarak
   kullanilan her renk kendi zemininde WCAG AA (4.5) esigini geciyor;
   bu yuzden yesil #16A34A yerine #15803D, kirmizi #DC2626 yerine
   #C81E1E. Parlak tonlar yalnizca metin olmayan isaretlerde
   (grafik cizgisi, nokta) kullanilir - orada esik 3.0.

   Tek yazi tipi: Inter. Onceden dort aile yukleniyordu (Archivo,
   IBM Plex Sans, IBM Plex Mono, Poppins); hepsi Inter'e indi.
   Rakamlar tabular, boylece fiyat sutunlari hizali kaliyor.
   ============================================================ */

:root{
  --zemin:#F8FAFC;
  --yuzey:#FFFFFF;
  --yuzey-2:#F1F5F9;
  --murekkep:#0F172A;
  --metin:#0F172A;
  --metin-2:#475569;
  --metin-3:#556478;
  --marka:#2563EB;
  --marka-zemin:rgba(37,99,235,.08);
  --marka-koyu:#1D4ED8;

  /* Metin icin (AA gecer) */
  --artis:#15803D;
  --dusus:#C81E1E;
  /* Isaret icin - grafik cizgisi, nokta, dolgu. Metin degil. */
  --artis-parlak:#16A34A;
  --dusus-parlak:#DC2626;
  --artis-zemin:rgba(21,128,61,.10);
  --dusus-zemin:rgba(200,30,30,.09);

  --altin:#8A6A12;
  --altin-parlak:#C9A227;
  --altin-zemin:rgba(201,162,39,.12);

  --cizgi:#E2E8F0;
  --cizgi-2:#CBD5E1;
  --golge:0 1px 2px rgba(15,23,42,.05);

  --govde:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:var(--govde);
  --mono:var(--govde);
  --marka-font:var(--govde);
  --marka-sari:var(--altin-parlak);

  /* Kategori vurgulari - yalnizca kucuk isaret ve ikonlarda. */
  --k-doviz:#2563EB;
  --k-altin:#8A6A12;
  --k-gumus:#64748B;
  --k-kripto:#4F46E5;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --zemin:#0B1220;
    --yuzey:#111C2E;
    --yuzey-2:#1B2941;
    --murekkep:#060B14;
    --metin:#E2E8F0;
    --metin-2:#A3B2C7;
    --metin-3:#8496AE;
    --marka:#7BA9FB;
    --marka-zemin:rgba(123,169,251,.12);
    --marka-koyu:#93BBFC;
    --artis:#4ADE80;
    --dusus:#F87171;
    --artis-parlak:#4ADE80;
    --dusus-parlak:#F87171;
    --artis-zemin:rgba(74,222,128,.12);
    --dusus-zemin:rgba(248,113,113,.12);
    --altin:#D9B44A;
    --altin-parlak:#D9B44A;
    --altin-zemin:rgba(217,180,74,.13);
    --cizgi:rgba(226,232,240,.13);
    --cizgi-2:rgba(226,232,240,.26);
    --golge:0 1px 2px rgba(0,0,0,.45);
    --k-doviz:#7BA9FB;
    --k-altin:#D9B44A;
    --k-gumus:#94A3B8;
    --k-kripto:#A5B4FC;
  }
}
:root[data-theme="dark"]{
  --zemin:#0B1220;
  --yuzey:#111C2E;
  --yuzey-2:#1B2941;
  --murekkep:#060B14;
  --metin:#E2E8F0;
  --metin-2:#A3B2C7;
  --metin-3:#8496AE;
  --marka:#7BA9FB;
  --marka-zemin:rgba(123,169,251,.12);
  --marka-koyu:#93BBFC;
  --artis:#4ADE80;
  --dusus:#F87171;
  --artis-parlak:#4ADE80;
  --dusus-parlak:#F87171;
  --artis-zemin:rgba(74,222,128,.12);
  --dusus-zemin:rgba(248,113,113,.12);
  --altin:#D9B44A;
  --altin-parlak:#D9B44A;
  --altin-zemin:rgba(217,180,74,.13);
  --cizgi:rgba(226,232,240,.13);
  --cizgi-2:rgba(226,232,240,.26);
  --golge:0 1px 2px rgba(0,0,0,.45);
  --k-doviz:#7BA9FB;
  --k-altin:#D9B44A;
  --k-gumus:#94A3B8;
  --k-kripto:#A5B4FC;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--govde);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--marka);outline-offset:2px}
table{border-collapse:collapse;width:100%}

.kap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- şerit ---------- */
/* Serit iki temada da koyu zeminde duruyor, dolayisiyla yazisi her
   iki temada da acik olmali. Rengi --zemin'e baglamak acik temada
   dogru sonuc veriyordu ama koyu temada --zemin de koyulasiyor ve
   serit tamamen gorunmez oluyordu: 9 Eylul 2026'da olculdu, 1,05:1.
   Bu yuzden acik renk sabit yaziliyor (#060B14 uzerinde 15,98:1). */
.serit{background:var(--murekkep);color:#E2E8F0;overflow:hidden;
  border-bottom:1px solid var(--cizgi)}
.serit-ic{display:flex;gap:26px;padding:9px 20px;overflow-x:auto;
  scrollbar-width:none;max-width:1080px;margin:0 auto}
.serit-ic::-webkit-scrollbar{display:none}
.serit span{display:flex;align-items:baseline;gap:7px;font-size:12.5px;white-space:nowrap;
  font-family:var(--mono)}
.serit span i{font-style:normal;opacity:.62;letter-spacing:.06em}
.serit span b{font-weight:500}
/* Serit koyu zeminde; token yerine parlak tonlar, cunku burada zemin
   temadan bagimsiz olarak her zaman koyu. */
.serit .yu{color:#4ADE80}
.serit .as{color:#F87171}
.serit .no{color:#94A3B8}

/* ---------- başlık ---------- */
header.ust{background:var(--yuzey);border-bottom:1px solid var(--cizgi);
  position:sticky;top:0;z-index:40}
.ust-ic{display:flex;align-items:center;gap:22px;padding:13px 20px;
  max-width:1080px;margin:0 auto}
/* Logo bir görsel değil, yazı. Böylece koyu temada renk sorunu çıkmıyor,
   her ekranda keskin kalıyor ve ek dosya isteği doğurmuyor. Görsel logo
   yüklenirse (.gorsel) bu kurallar devre dışı kalır. */
.marka{font-family:var(--marka-font);font-weight:800;font-size:21px;
  letter-spacing:-.028em;display:flex;align-items:baseline;gap:0;
  color:var(--metin);white-space:nowrap}
/* Logodaki sarı, arayüzdeki vurgu renginden bir tık parlak. Marka
   için ayrı bir token tutuyoruz ki menü ve bağlantı rengi değişmesin. */
.marka em,.marka i{font-style:normal;color:var(--marka-sari)}
@media (max-width:680px){.marka{font-size:18px}}

/* Logo yüklendiğinde yazı markasının tipografi kuralları devre dışı;
   görsel kendi oranını korusun. */
.marka.gorsel{font-size:0;line-height:0;gap:0}
.marka .logo{display:block;height:32px;width:auto;max-width:min(260px,46vw)}
.marka .logo-koyu{display:none}

/* Yalnızca iki sürüm de yüklendiyse zemine göre değiştiriyoruz —
   .cift sınıfını PHP koyuyor. Koyu sürüm yoksa açık sürüm her iki
   temada da kalır; görünmez logo göstermektense kontrastı düşük
   ama okunur bir logo yeğdir. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marka.cift .logo-acik{display:none}
  :root:not([data-theme="light"]) .marka.cift .logo-koyu{display:block}
}
:root[data-theme="dark"] .marka.cift .logo-acik{display:none}
:root[data-theme="dark"] .marka.cift .logo-koyu{display:block}

@media (max-width:680px){
  .marka .logo{height:27px}
}
nav.ana{display:flex;gap:20px;margin-left:auto;font-size:14.5px;font-weight:500}
nav.ana a{color:var(--metin-2);padding:4px 0;border-bottom:2px solid transparent}
nav.ana a:hover,nav.ana a[aria-current]{color:var(--metin);border-bottom-color:var(--marka)}

/* Dar ekranda logo ve beş menü bağlantısı aynı satırda yarışıyordu:
   360px'te menünün 98 pikseli görünmüyordu ve yan kaydırma gerekiyordu.
   Çözüm iki satır — logo kendi satırında, menü altında.

   Hamburger yok: beş bağlantı var ve kullanıcı Altın ile Kripto'ya tek
   dokunuşla ulaşabilmeli. Menüyü bir düğmenin arkasına saklamak bu
   sitede tıklama değil kayıp üretir.

   Menü satırı tam genişlikte bir zemin istiyor; .ust-ic'in 20px yan
   dolgusundan taşması için calc(100% + 40px) ve negatif kenar boşluğu
   kullanılıyor. width:100% yetmez — o, dolgunun içinde kalır ve zemin
   ekranın sağında 40px boşluk bırakır. */
@media (max-width:680px){
  .ust-ic{flex-wrap:wrap;gap:0;padding:0 20px}
  .marka{width:100%;flex:none;padding:12px 0}
  nav.ana{
    width:calc(100% + 40px);margin:0 -20px;padding:0 20px;
    background:var(--yuzey-2);border-top:1px solid var(--cizgi);
    display:flex;justify-content:space-between;gap:4px;
    font-size:14px;overflow:visible;flex-wrap:wrap
  }
  nav.ana a{
    flex:1 1 auto;text-align:center;white-space:nowrap;
    padding:11px 2px;border-bottom:2px solid transparent
  }
}

/* ---------- hero ---------- */
/* Hero bilerek kisa: kullanici fiyati gormeye geliyor, tanitim
   metnini okumaya degil. Olculdu - once ilk fiyat satiri 382px'teydi,
   mobilde katlamanin altinda kaliyordu. */
.hero{padding:24px 0 4px}
@media (max-width:680px){.hero{padding:18px 0 2px}}
h1{font-size:clamp(29px,5vw,44px);font-weight:800}
.hero p{margin-top:12px;color:var(--metin-2);font-size:17px;max-width:60ch}
.saat{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;color:var(--metin-3);
  background:var(--yuzey-2);padding:5px 11px;border-radius:3px}
.nokta{width:7px;height:7px;border-radius:50%;background:var(--artis);
  animation:nabiz 2.4s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.nokta{animation:none}}

/* ---------- bölüm ---------- */
section{padding-top:46px}
h2{font-size:clamp(20px,3vw,27px);font-weight:700}
.bolum-ust{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:2px solid var(--murekkep)}
.bolum-ust a{margin-left:auto;font-size:14px;font-weight:600;color:var(--marka)}
.bolum-ust a:hover{text-decoration:underline}
section > p{margin-top:16px;color:var(--metin-2);max-width:68ch}
h3{font-size:17px;font-weight:700;margin-top:26px}

/* ---------- fiyat tablosu ---------- */
.tablo-kutu{margin-top:18px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:4px;overflow:hidden;box-shadow:var(--golge)}
.kaydir{overflow-x:auto}
table{min-width:520px}
thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);font-weight:400;text-align:right;padding:11px 16px;
  background:var(--yuzey-2);border-bottom:1px solid var(--cizgi);white-space:nowrap
}
thead th:first-child{text-align:left}
tbody td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--cizgi);
  font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--yuzey-2)}
td.varlik{text-align:left}
td.varlik a{display:flex;align-items:baseline;gap:9px;font-weight:600}
td.varlik a:hover{color:var(--marka)}
td.varlik code{font-family:var(--mono);font-size:11px;color:var(--metin-3);
  background:var(--yuzey-2);padding:2px 6px;border-radius:2px;font-weight:400}
td.satis{font-weight:600}
/* Degisim yuzdesi: zeminsiz, yalnizca renkli rakam.
   Onceden renkli bir hap icindeydi; tabloda her satirda tekrarlaninca
   goz once haplari, sonra fiyatlari goruyordu. Asil urun fiyat. */
.yon{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.yon.yu{color:var(--artis)}
.yon.as{color:var(--dusus)}
.yon.no{color:var(--metin-3)}

/* ---------- üçlü kart ---------- */
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:14px;margin-top:20px}
/* İki kartlık satırda auto-fit kartları sayfa genişliğine yayıyor ve üç
   kartlık bölümlerin yanında orantısız duruyorlardı; üst sınır koyuyoruz. */
.kartlar.ikili{grid-template-columns:repeat(auto-fit,minmax(228px,352px))}
.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;
  padding:18px;box-shadow:var(--golge)}
.kart h3{margin:0;font-size:15px;font-weight:700;color:var(--metin-2)}
.kart .fiyat{font-family:var(--display);font-weight:800;font-size:31px;
  letter-spacing:-.03em;margin-top:9px;font-variant-numeric:tabular-nums}
.kart .fiyat small{font-size:16px;font-weight:600;color:var(--metin-3);margin-left:3px}
.kart .as-satir{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.kart .detay{margin-top:14px;padding-top:12px;border-top:1px solid var(--cizgi);
  font-size:13.5px;color:var(--metin-3);display:flex;justify-content:space-between;gap:10px}
.kart .detay b{font-weight:500;color:var(--metin-2)}
.kart .git{display:inline-block;margin-top:13px;font-size:13.5px;font-weight:600;color:var(--marka)}
.kart .git:hover{text-decoration:underline}

/* ---------- çevirici ---------- */
.cevirici{margin-top:20px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:4px;padding:20px;box-shadow:var(--golge)}
.cev-satir{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.alan{display:grid;gap:6px;min-width:0}
.alan label{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--metin-3)}
.alan input,.alan select{
  width:100%;font-family:var(--govde);font-size:17px;font-weight:600;
  padding:11px 12px;border:1px solid var(--cizgi-2);border-radius:3px;
  background:var(--zemin);color:var(--metin);font-variant-numeric:tabular-nums
}
.alan select{font-weight:500;cursor:pointer}
.degistir{
  width:40px;height:44px;border:1px solid var(--cizgi-2);border-radius:3px;
  background:var(--yuzey-2);color:var(--metin-2);cursor:pointer;font-size:15px;
  display:grid;place-items:center
}
.degistir:hover{background:var(--marka-zemin);color:var(--marka);border-color:var(--marka)}
.cev-sonuc{margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi);
  font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cev-sonuc span{color:var(--metin-3);font-weight:500;font-size:15px;font-family:var(--govde)}
.kisayol{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.kisayol button{font-family:var(--mono);font-size:12px;padding:5px 10px;
  border:1px solid var(--cizgi);border-radius:3px;background:var(--zemin);
  color:var(--metin-2);cursor:pointer}
.kisayol button:hover{border-color:var(--marka);color:var(--marka)}

@media (max-width:560px){
  .cev-satir{grid-template-columns:1fr;gap:10px}
  .degistir{width:100%;height:38px}
}

/* ---------- metin ---------- */
/* ---------- düz metin blokları ----------
   Ana sayfadaki SEO metni, varlık sayfalarının açıklamaları ve yasal
   sayfalar hep bu blokta. Başlık ve liste tipografisi burada tanımlı
   olmazsa global sıfırlama devreye giriyor: h2'ler sıfır boşlukla
   paragrafa yapışıyor, li işaretleri kayboluyor. */
.metin{margin-top:18px;max-width:68ch;line-height:1.72}
.metin > *:first-child{margin-top:0}

.metin p{color:var(--metin-2);margin-top:17px}

.metin h2{font-family:var(--display);font-size:clamp(19px,2.4vw,23px);font-weight:700;
  letter-spacing:-.02em;color:var(--metin);margin-top:40px;padding-bottom:9px;
  border-bottom:1px solid var(--cizgi)}
.metin h3{font-family:var(--display);font-size:17.5px;font-weight:700;
  color:var(--metin);margin-top:30px;letter-spacing:-.01em}
.metin h4{font-size:16px;font-weight:600;color:var(--metin);margin-top:24px}

.metin ul,.metin ol{margin-top:16px;padding-left:23px;color:var(--metin-2)}
.metin li{margin-bottom:11px;list-style:disc}
.metin ol li{list-style:decimal}
.metin li::marker{color:var(--marka)}
.metin li:last-child{margin-bottom:0}
.metin li > ul,.metin li > ol{margin-top:9px}

.metin strong,.metin b{color:var(--metin);font-weight:600}
.metin em{font-style:italic}
.metin a{color:var(--marka);border-bottom:1px solid var(--marka-zemin)}
.metin a:hover{border-bottom-color:var(--marka)}
.metin code{font-family:var(--mono);font-size:.88em;background:var(--yuzey-2);
  padding:2px 6px;border-radius:2px;color:var(--marka)}

.metin blockquote{margin-top:20px;padding:2px 0 2px 18px;
  border-left:3px solid var(--marka);color:var(--metin-2)}

.metin table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px;
  display:block;overflow-x:auto}
.metin th,.metin td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--cizgi)}
.metin th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--metin-3);font-weight:400;background:var(--yuzey-2)}
.metin tr:last-child td{border-bottom:0}

.metin hr{border:0;border-top:1px solid var(--cizgi);margin:34px 0}

/* ---------- SSS ---------- */
.sss{margin-top:18px;border:1px solid var(--cizgi);border-radius:4px;overflow:hidden;
  background:var(--yuzey)}
details{border-bottom:1px solid var(--cizgi)}
details:last-child{border-bottom:0}
summary{padding:15px 18px;cursor:pointer;font-weight:600;font-size:16px;
  list-style:none;display:flex;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:var(--mono);color:var(--marka);font-size:17px;
  flex:none;width:14px}
details[open] summary::before{content:"−"}
details[open] summary{color:var(--marka)}
details .cevap{padding:0 18px 16px 44px;color:var(--metin-2);font-size:15.5px}

/* ---------- alt ---------- */
footer{margin-top:60px;background:var(--yuzey);border-top:1px solid var(--cizgi);
  padding:34px 0 40px}
.alt-ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.alt-ic h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--metin-3);font-weight:400;margin:0 0 10px}
.alt-ic li{margin-bottom:7px}
.alt-ic a{font-size:14.5px;color:var(--metin-2)}
.alt-ic a:hover{color:var(--marka)}
.kunye{margin-top:28px;padding-top:18px;border-top:1px solid var(--cizgi);
  font-size:13px;color:var(--metin-3);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.uyari{margin-top:10px;font-size:12.5px;color:var(--metin-3);max-width:80ch;line-height:1.55}


/* ---------- sayfa yolu ---------- */
.yol{display:flex;align-items:center;gap:8px;padding-top:22px;font-size:13.5px;
  color:var(--metin-3);flex-wrap:wrap}
.yol a{color:var(--metin-2)}
.yol a:hover{color:var(--marka)}
.yol strong{font-weight:600;color:var(--metin)}

/* ---------- varlık sayfası büyük fiyat ---------- */
.buyuk-fiyat{display:flex;align-items:baseline;gap:16px;margin-top:16px;flex-wrap:wrap}
.buyuk-fiyat .rakam{font-family:var(--display);font-weight:800;
  font-size:clamp(38px,7vw,58px);letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.buyuk-fiyat .rakam small{font-size:.42em;font-weight:600;color:var(--metin-3);margin-left:4px}

/* ---------- ilgili sayfalar ---------- */
.ilgili{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;margin-top:18px;background:var(--cizgi);border:1px solid var(--cizgi)}
.ilgili li{background:var(--yuzey)}
.ilgili a{display:block;padding:14px 16px;font-size:15px;font-weight:500;color:var(--metin-2)}
.ilgili a:hover{background:var(--yuzey-2);color:var(--marka)}

/* ---------- blog ---------- */
.yazilar{display:grid;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)}
.yazi{background:var(--yuzey);padding:22px}
.yazi h2{font-size:20px;font-weight:700;margin:0}
.yazi a:hover h2{color:var(--marka)}
.yazi-bilgi{margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--metin-3);
  display:flex;gap:8px;flex-wrap:wrap}
.yazi p{margin-top:11px;color:var(--metin-2);font-size:15.5px}
.yazi .git{margin-top:11px}
.yazi-govde h2{font-family:var(--display);font-size:22px;margin-top:30px}
.yazi-govde h3{font-size:18px;margin-top:26px}
.yazi-govde ul,.yazi-govde ol{margin-top:14px;padding-left:22px;color:var(--metin-2)}
.yazi-govde li{margin-bottom:7px;list-style:disc}
.yazi-govde ol li{list-style:decimal}
.yazi-govde img{max-width:100%;height:auto;border-radius:4px;margin-top:18px}
.yazi-govde a{color:var(--marka);border-bottom:1px solid var(--marka-zemin)}

.sayfalama{margin-top:26px}
.sayfalama .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.sayfalama a,.sayfalama span{padding:8px 13px;border:1px solid var(--cizgi);
  border-radius:3px;font-size:14px;color:var(--metin-2);background:var(--yuzey)}
.sayfalama .current{background:var(--marka);color:var(--zemin);border-color:var(--marka)}
.sayfalama a:hover{border-color:var(--marka);color:var(--marka)}

/* ---------- boş durum ---------- */
.bos{margin-top:18px;padding:22px;background:var(--yuzey-2);border:1px solid var(--cizgi);
  border-radius:4px;color:var(--metin-2);font-size:15.5px}

/* ---------- kategori vurgusu ----------
   Brief kategori basina ayri tema istemiyor; ayni sistem, yalnizca
   kucuk bir isaret. Baslik solunda 3px'lik bir cizgi kadar. */
.vurgu-doviz{--vurgu:var(--k-doviz)}
.vurgu-altin{--vurgu:var(--k-altin)}
.vurgu-gumus{--vurgu:var(--k-gumus)}
.vurgu-kripto{--vurgu:var(--k-kripto)}
.rozet{display:inline-block;width:3px;height:1em;border-radius:2px;
  background:var(--vurgu,var(--marka));vertical-align:-.13em;margin-right:9px}

/* ---------- reklam yuvasi ----------
   Yuva yalnizca yayinci kimligi tanimliysa basilir (dak_reklam()).
   Tanimli degilken hicbir sey cikmaz - bos beyaz alan birakmak,
   rezerve etmenin amaci olan CLS'i cozmez, sadece sayfayi uzatir.
   Tanimliyken yukseklik pesinen ayrilir, dolayisiyla kayma sifir. */
.reklam{margin:34px auto 0;text-align:center;overflow:hidden}
.reklam::before{content:"Reklam";display:block;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--metin-3);
  margin-bottom:6px}
.reklam-govde{margin:0 auto;background:var(--yuzey-2);
  border:1px solid var(--cizgi);border-radius:4px}
/* Boyutlar sabit; reklam gelmese bile yer degismez. */
.reklam.yatay .reklam-govde{width:100%;max-width:728px;height:90px}
.reklam.kare  .reklam-govde{width:100%;max-width:336px;height:280px}
@media (max-width:680px){
  .reklam.yatay .reklam-govde{max-width:320px;height:100px}
}

/* ---------- grafik ----------
   Kutuphane yok; sunucuda uretilen satir ici SVG. Chart.js ~70 KB JS
   demek ve bu sayfalarin tek isi fiyat gostermek.
   Yukseklik CSS'te sabit: veri gec gelse bile duzen kaymaz. */
.grafik-kutu{margin-top:18px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:4px;box-shadow:var(--golge);overflow:hidden}
.grafik-ust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--cizgi)}
.grafik-araliklar{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.grafik-araliklar button{font-size:12.5px;font-weight:600;padding:5px 11px;
  border:1px solid var(--cizgi);border-radius:3px;background:var(--yuzey);
  color:var(--metin-2);cursor:pointer;font-variant-numeric:tabular-nums}
.grafik-araliklar button:hover{border-color:var(--marka);color:var(--marka)}
.grafik-araliklar button[aria-pressed="true"]{background:var(--marka);
  border-color:var(--marka);color:#fff}
.grafik-alan{position:relative;height:280px;padding:14px 16px 10px}
@media (max-width:680px){.grafik-alan{height:220px;padding:12px 10px 8px}}
.grafik-alan svg{display:block;width:100%;height:100%;overflow:visible}
.grafik-cizgi{fill:none;stroke:var(--marka);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.grafik-cizgi.yu{stroke:var(--artis-parlak)}
.grafik-cizgi.as{stroke:var(--dusus-parlak)}
.grafik-dolgu{fill:var(--marka-zemin);stroke:none}
.grafik-izgara{stroke:var(--cizgi);stroke-width:1;vector-effect:non-scaling-stroke}
.grafik-etiket{font-size:10.5px;fill:var(--metin-3);font-variant-numeric:tabular-nums}
.grafik-not{padding:10px 16px 13px;font-size:12.5px;color:var(--metin-3);
  border-top:1px solid var(--cizgi)}
.grafik-yok{padding:26px 16px;color:var(--metin-2);font-size:15px;text-align:center}

/* ---------- veri kaynagi satiri ----------
   Brief §4: her onemli fiyat kaynagini ve tazeligini soylemeli. */
.kaynak-satir{margin-top:14px;font-size:13px;color:var(--metin-3);
  display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.kaynak-satir a{color:var(--metin-2);border-bottom:1px solid var(--cizgi-2)}
.kaynak-satir a:hover{color:var(--marka);border-bottom-color:var(--marka)}

/* ============================================================
   Dar ekranda fiyat tablosu
   ============================================================

   Sorun ölçüldü: 360px'te tablo 705px genişliğindeydi, yani 387
   piksel görünmüyordu. Kullanıcı Döviz ve Alış'ı görüyor, Satış ile
   Değişim'i görmek için yana kaydırmak zorunda kalıyordu. Bir fiyat
   sitesinde satış fiyatının gizli olması kabul edilebilir değil.

   Çözüm ikinci bir HTML bloğu değil, aynı tablonun CSS ile karta
   dönüşmesi. Böylece:
     - tek veri kaynağı kalıyor, masaüstü ve mobil aynı hücrelerden
       besleniyor, iki değer hiçbir koşulda ayrışamıyor,
     - arama motoru tek tablo görüyor, kopya içerik oluşmuyor,
     - JavaScript eklenmiyor.

   thead gizlenince sütun etiketi kayboluyor; onu her hücrenin
   data-etiket özniteliğinden ::before basıyor. Tablo semantiği
   display:block ile düştüğü için roller HTML'de açıkça yazılı.

   Eşik 759px: tablonun kendi doğal genişliği ~705px, 768px'te
   dolgu düşüldükten sonra hâlâ sığıyor. Bu yüzden tablo eşiği
   başlığınkinden (680px) farklı — bileşenler farklı yer istiyor.
   ============================================================ */

@media (max-width:759px){
  .tablo-kutu table{min-width:0;display:block}
  .tablo-kutu thead{display:none}
  .tablo-kutu tbody{display:block}

  /* İki sütun, üç seviye:
       satır 1 — varlık adı + kod  |  değişim
       satır 2 — Alış | Satış
       satır 3 — Günlük Aralık (tam genişlik, ikincil)

     Önce üç sütun denendi; 320px'te sütun 78 piksele düşüyor ve ziynet
     altın fiyatları ("45.678,90") oraya sığmıyordu — döviz kurlarından
     iki basamak uzunlar. Değişimi adın yanına almak hem sütunları
     genişletiyor hem de boş hücre bırakmıyor.

     minmax(0,1fr) şart: düz 1fr içerikten küçülmeyi reddeder ve
     nowrap'li rakamlar hücreden taşar. */
  .tablo-kutu tbody tr{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px 14px;padding:14px 16px;
    border-bottom:1px solid var(--cizgi)
  }
  .tablo-kutu tbody tr:last-child{border-bottom:0}
  /* Dokunmatikte :hover takılı kalıyor; kart düzeninde gereksiz. */
  .tablo-kutu tbody tr:hover{background:transparent}

  .tablo-kutu tbody td{
    display:block;padding:0;border:0;text-align:left;
    font-size:17px;font-weight:600;white-space:nowrap
  }

  .tablo-kutu td.varlik{grid-column:1;grid-row:1;align-self:center}
  .tablo-kutu td.varlik a{font-size:15.5px;font-weight:600;gap:8px}
  .tablo-kutu td.varlik code{font-size:12.5px}

  /* Değişim yalnızca listeleme tablolarında adın yanına gider; orada
     .degisim sınıfı var. Varlık sayfasındaki tek satırlık tabloda bu
     sınıf hiç basılmıyor, dolayısıyla hücreler normal akışta kalıyor. */
  .tablo-kutu td.degisim{grid-column:2;grid-row:1;text-align:right;align-self:center}

  /* Sütun başlığı burada yaşıyor.

     Etiket sarabilir (white-space:normal): "ÖNCEKİ KAPANIŞ" 11 puntoda
     ~105 piksel ve dar sütunda taşıyordu. Etiket kelimelerden oluştuğu
     için sarmak zararsız; rakamlar nowrap kalıyor, çünkü bir fiyatın
     ortadan bölünmesi kabul edilemez. */
  .tablo-kutu tbody td:not(.varlik)::before{
    content:attr(data-etiket);display:block;
    font-size:11px;font-weight:500;letter-spacing:.07em;
    text-transform:uppercase;color:var(--metin-3);
    margin-bottom:3px;white-space:normal
  }

  /* Günlük aralık ikincil bilgi: tam satır, daha küçük ve sakin. */
  .tablo-kutu td.aralik{grid-column:1/-1;font-size:13.5px;font-weight:500;color:var(--metin-2)}
  .tablo-kutu .yon{font-size:14.5px}
}

/* En dar ekranda bir tık sıkıştırıyoruz. */
@media (max-width:360px){
  .tablo-kutu tbody td{font-size:16px}
  .tablo-kutu tbody tr{gap:10px 12px;padding:13px 14px}
}

/* ---------- hub listesi ----------
   /hesaplama/ ve /rehber/ gibi toplayıcı sayfalarda. Kart değil liste:
   her satır bir bağlantı, altında ne işe yaradığı. Kullanıcı taramak
   için geliyor, göz gezdirmek için değil. */
.hub-liste{display:grid;gap:1px;margin-top:20px;
  background:var(--cizgi);border:1px solid var(--cizgi);border-radius:4px;overflow:hidden}
.hub-liste li{background:var(--yuzey)}
.hub-liste a{display:block;padding:16px 18px}
.hub-liste a:hover{background:var(--yuzey-2)}
.hub-liste strong{display:block;font-size:16px;font-weight:600;color:var(--metin)}
.hub-liste a:hover strong{color:var(--marka)}
.hub-liste span{display:block;margin-top:4px;font-size:14px;color:var(--metin-2);line-height:1.55}

/* Menüye altıncı bağlantı (Hesaplama) eklenince 320px'te satır taşıp
   "Blog" tek başına ikinci satırda kalıyordu. Ölçüldü: altı etiket
   14 puntoda ~258px, kullanılabilir genişlik 280px, dolgularla birlikte
   sığmıyor. Bir punto düşürmek tek satırı geri getiriyor. */
@media (max-width:400px){
  nav.ana{font-size:13px;gap:2px}
  nav.ana a{padding:11px 1px;letter-spacing:-.01em}
}

/* ---------- arama ----------
   Kutu masaustunde menunun sagina, mobilde logo satirinin yanina
   oturuyor. Oneri listesi mutlak konumlu; acilinca sayfa kaymiyor. */
.ara{position:relative;margin-left:16px;flex:0 1 260px;min-width:0}
.ara input{
  width:100%;font-family:inherit;font-size:14px;padding:8px 12px;
  border:1px solid var(--cizgi-2);border-radius:4px;
  background:var(--zemin);color:var(--metin)
}
.ara input::placeholder{color:var(--metin-3)}
.ara input:focus{outline:2px solid var(--marka);outline-offset:1px;border-color:var(--marka)}

.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ara-sonuc{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:4px;
  box-shadow:0 8px 24px rgba(15,23,42,.10);overflow:hidden;max-height:60vh;overflow-y:auto
}
.ara-sonuc li{border-bottom:1px solid var(--cizgi)}
.ara-sonuc li:last-child{border-bottom:0}
.ara-sonuc a{display:flex;align-items:baseline;gap:8px;padding:10px 13px;font-size:14.5px}
.ara-sonuc li[aria-selected="true"] a,.ara-sonuc a:hover{background:var(--yuzey-2)}
.ara-sonuc strong{font-weight:600;color:var(--metin)}
.ara-sonuc code{font-size:11.5px;color:var(--metin-3);background:var(--yuzey-2);
  padding:1px 5px;border-radius:2px}
.ara-sonuc em{margin-left:auto;font-style:normal;font-size:12px;color:var(--metin-3)}

@media (max-width:680px){
  /* Iki satirli baslikta kutu logo satirinin sagina gidiyor; menu
     satiri asagida kendi zemininde kaliyor. */
  .ara{order:2;margin-left:auto;flex:1 1 auto;max-width:none;padding:0 0 10px}
  .marka{width:auto;padding:12px 12px 12px 0}
  .ust-ic{flex-wrap:wrap;align-items:center}
  nav.ana{order:3}
}
@media (max-width:400px){
  .ara input{font-size:13px;padding:7px 10px}
  .ara input::placeholder{font-size:12.5px}
}

/* ---------- içeriğe atla ----------
   Başlıkta şerit, logo, arama ve menü var; ana sayfada yetmiş küsur
   odaklanabilir öge oluyor. Klavye kullanıcısı her sayfada hepsini
   geçmek zorunda kalmasın. Bağlantı yalnızca odaklanınca görünür. */
.atla{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:10px 16px;background:var(--marka);color:#fff;
  font-size:14px;font-weight:600;border-radius:0 0 4px 0
}
.atla:focus{left:0}
/* Koyu temada --marka acik maviye donuyor; beyaz yazi orada 2,36:1
   kaliyor. Zemin acilinca yazi koyulasmali (7,94:1). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .atla{color:#0B1220}
}
:root[data-theme="dark"] .atla{color:#0B1220}