/* ============================================================
   TASARIM BELİRTEÇLERİ
   Bütün renkler ve ölçüler burada tanımlı. Sayfa ya da grafik
   kodunda doğrudan hex yazma; buradaki değişkeni kullan.
   ============================================================ */
:root{
  --zemin:#faf9f7; --yuzey:#ffffff; --cizgi:#e4e1db; --cizgi-koyu:#d2cec6;
  --metin:#23262b; --metin-soluk:#6b7076; --metin-cok-soluk:#8f949a;
  --vurgu:#2f5d4a; --vurgu-soluk:#eaf0ec;
  --android:#2f6f55; --ios:#8a5b2e;
  --artis:#2f6f55; --azalis:#9c4a3f; --uyari:#8a6d1f;

  /* Pasta/halka dilimleri. Sırayla kullanılır; platform grafiklerinde
     bunlar DEĞİL, --android / --ios kullanılır (sayfalar arası tutarlılık). */
  --dilim-1:#2f5d4a; --dilim-2:#6a8f7b; --dilim-3:#8a5b2e; --dilim-4:#b08b5e;
  --dilim-5:#4a6273; --dilim-6:#9aa0a7;

  --b1:4px; --b2:8px; --b3:12px; --b4:20px; --b5:32px;
  --y1:11px; --y2:13px; --y3:15px; --y4:20px; --y5:30px;
}

/* Koyu mod: yalnızca değişkenler değişir, kural gövdeleri aynı kalır. */
@media (prefers-color-scheme: dark){
  :root{
    --zemin:#14161a; --yuzey:#1b1e23; --cizgi:#2b2f36; --cizgi-koyu:#3a3f47;
    --metin:#e6e4df; --metin-soluk:#9aa0a7; --metin-cok-soluk:#767c83;
    --vurgu:#6aa88c; --vurgu-soluk:#1f2a25;
    --android:#5f9c80; --ios:#c08e57;
    --artis:#5f9c80; --azalis:#c9736a; --uyari:#c2a24e;
    --dilim-1:#6aa88c; --dilim-2:#43705e; --dilim-3:#c08e57; --dilim-4:#8a6540;
    --dilim-5:#6b8497; --dilim-6:#767c83;
  }
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--zemin); color:var(--metin);
  font:var(--y3)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Rakamlar hep aynı genişlikte olsun; tablolarda sütunlar kaymasın. */
.sayi,td.sayi,.deger,table,.rozet{font-variant-numeric:tabular-nums}

/* ============================================================
   ÜST MENÜ
   ============================================================ */
header{
  position:sticky; top:0; z-index:10;
  background:var(--yuzey); border-bottom:1px solid var(--cizgi);
}
.ust{
  max-width:1400px; margin:0 auto; padding:0 var(--b4);
  display:flex; align-items:center; gap:var(--b4); height:52px;
}
.marka{font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.ust nav{display:flex; gap:2px; flex:1; overflow-x:auto}
.ust nav a{
  padding:0 var(--b3); height:52px; display:flex; align-items:center;
  color:var(--metin-soluk); text-decoration:none; font-size:var(--y2);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.ust nav a:hover{color:var(--metin)}
.ust nav a.aktif{color:var(--vurgu); border-bottom-color:var(--vurgu); font-weight:500}
.ust-sag{display:flex; align-items:center; gap:var(--b2)}
.ust-sag form{display:flex; align-items:center; gap:6px; margin:0}

/* ============================================================
   FORM ÖĞELERİ
   ============================================================ */
select,.dugme,input[type=text],input[type=password]{
  font:inherit; font-size:var(--y2); padding:5px 8px; color:var(--metin);
  background:var(--yuzey); border:1px solid var(--cizgi-koyu); border-radius:3px;
}
.dugme{cursor:pointer}
.dugme:hover{border-color:var(--vurgu); color:var(--vurgu)}
.dugme.ana{background:var(--vurgu); border-color:var(--vurgu); color:#fff}
:focus-visible{outline:2px solid var(--vurgu); outline-offset:2px}

.arac{
  display:flex; align-items:center; gap:var(--b2); flex-wrap:wrap;
  margin-bottom:var(--b3);
}
.arac label{font-size:var(--y2); color:var(--metin-soluk)}

/* ============================================================
   SAYFA İSKELETİ
   ============================================================ */
main{max-width:1400px; margin:0 auto; padding:var(--b4)}
main.tek{max-width:380px; padding-top:12vh}

h1{font-size:var(--y4); font-weight:600; margin:0 0 var(--b1); letter-spacing:-.01em}
h2{font-size:var(--y3); font-weight:600; margin:var(--b5) 0 var(--b2)}
h2:first-of-type{margin-top:var(--b4)}
.altbilgi{color:var(--metin-soluk); font-size:var(--y2); margin:0 0 var(--b4)}

/* ============================================================
   KARTLAR
   ============================================================ */
.kartlar{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:var(--b2)}
.kart{
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:3px;
  padding:var(--b3) var(--b3) var(--b2);
}
.kart.vurgulu{border-left:2px solid var(--vurgu)}
.kart .ad{
  font-size:var(--y1); color:var(--metin-soluk); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:6px;
}
.kart .deger{font-size:var(--y5); font-weight:600; line-height:1.1; letter-spacing:-.02em}
.kart .alt{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; height:26px; gap:var(--b2);
}
.kart .alt canvas{max-height:26px}

.rozet{font-size:var(--y1); font-weight:600; white-space:nowrap}
.rozet.artis{color:var(--artis)}
.rozet.azalis{color:var(--azalis)}
.rozet.yok{color:var(--metin-cok-soluk); font-weight:400}

/* ============================================================
   GRAFİK KUTULARI
   ============================================================ */
.grafik{
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:3px;
  padding:var(--b3); margin-bottom:var(--b2);
}
.ikili{display:grid; grid-template-columns:2fr 1fr; gap:var(--b2); align-items:start}
.esit{display:grid; grid-template-columns:1fr 1fr; gap:var(--b2); align-items:start}
.uclu{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--b2); align-items:start}
@media(max-width:1100px){ .uclu{grid-template-columns:1fr 1fr} }
@media(max-width:900px){
  .ikili,.esit,.uclu{grid-template-columns:1fr}
}

/* Grafiğin altındaki renk açıklaması. Chart.js göstergesi kapalı,
   çünkü HTML'de yazınca hem daha okunaklı hem de tema rengini alıyor. */
.gosterge{
  display:flex; gap:var(--b3); flex-wrap:wrap;
  font-size:var(--y2); color:var(--metin-soluk); margin-bottom:var(--b2);
}
.nokta{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px}

/* ============================================================
   TABLOLAR
   ============================================================ */
.tablo-sarma{border:1px solid var(--cizgi); border-radius:3px; overflow:hidden; margin-bottom:var(--b2)}
table{width:100%; border-collapse:collapse; font-size:var(--y2); background:var(--yuzey)}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--cizgi)}
tbody tr:last-child td{border-bottom:none}
th{
  font-size:var(--y1); text-transform:uppercase; letter-spacing:.06em;
  color:var(--metin-soluk); font-weight:600; background:var(--zemin);
}
td.sayi,th.sayi{text-align:right}
tbody tr:hover{background:var(--vurgu-soluk)}
td.ince{color:var(--metin-soluk)}
canvas.mini{width:80px; height:22px; vertical-align:middle}

/* ============================================================
   ETİKET / ROZET
   ============================================================ */
.etiket{
  font-size:var(--y1); padding:2px 6px; border-radius:2px;
  border:1px solid var(--cizgi-koyu); color:var(--metin-soluk); white-space:nowrap;
}
.etiket.iyi{color:var(--artis); border-color:var(--artis)}
.etiket.kotu{color:var(--azalis); border-color:var(--azalis)}
.etiket.uyari{color:var(--uyari); border-color:var(--uyari)}

/* ============================================================
   HUNİ
   Chart.js DEĞİL, düz blok kutular. Sayılar on binlerle tek haneler
   arasında değiştiği için çubuk grafiği okunaksız olurdu.
   Kutu genişliği inline style ile veriliyor ve yalnızca görsel
   sıralama içindir — sayılarla ORANTILI DEĞİLDİR.
   ============================================================ */
.huni{display:flex; flex-direction:column; align-items:center; gap:6px}
.huni-kutu{
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:3px;
  border-left:2px solid var(--vurgu); padding:var(--b2) var(--b3);
  text-align:center; min-width:180px;
}
.huni-kutu.son{border-left-color:var(--ios)}
.huni-ad{
  font-size:var(--y1); color:var(--metin-soluk); text-transform:uppercase;
  letter-spacing:.06em;
}
.huni-deger{
  font-size:var(--y5); font-weight:600; line-height:1.15; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.huni-alt{font-size:var(--y1); color:var(--metin-cok-soluk)}

/* Kutular arası ok satırı. YALNIZCA reklam tarafında oran yazılır;
   alt basamaklar arasında bilerek boş bırakılır. */
.huni-ara{font-size:var(--y2); color:var(--metin-soluk); padding:2px 0}
.huni-ara strong{color:var(--metin)}

/* İki evreni ayıran çizgi: üstü reklamdan gelenler, altı tüm kullanıcılar. */
.huni-ayrac{
  display:flex; align-items:center; gap:var(--b2);
  width:100%; margin:var(--b3) 0 var(--b2);
}
.huni-ayrac-cizgi{flex:1; height:1px; background:var(--cizgi-koyu)}
.huni-ayrac-metin{
  font-size:var(--y1); color:var(--metin-cok-soluk);
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
.huni-etiket{
  font-size:var(--y1); color:var(--metin-soluk); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px;
}

/* ============================================================
   NOT KUTUSU
   Toplama kurallarını okuyucuya hatırlatan açıklamalar.
   ============================================================ */
.not{
  background:var(--vurgu-soluk); border-left:2px solid var(--vurgu);
  padding:var(--b2) var(--b3); font-size:var(--y2); color:var(--metin-soluk);
  margin:var(--b3) 0; border-radius:0 3px 3px 0;
}
.not code{
  font-size:var(--y1); background:var(--yuzey); padding:1px 4px;
  border:1px solid var(--cizgi); border-radius:2px;
}

/* ============================================================
   GİRİŞ SAYFASI
   ============================================================ */
.giris{
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:3px;
  padding:var(--b4); display:flex; flex-direction:column; gap:6px;
}
.giris h1{margin-bottom:var(--b3)}
.giris label{font-size:var(--y2); color:var(--metin-soluk); margin-top:var(--b2)}
.giris .dugme{margin-top:var(--b3); padding:8px}
.hata{color:var(--azalis); font-size:var(--y2); margin:var(--b2) 0 0}