/* =============================================================
   anasayfa.css — sadece ana sayfanın (index.html) stilleri
   ============================================================= */

/* ---------- giriş ---------- */
.hero{padding-block:34px 6px;max-width:62ch}
.hero h1{
  font-family:var(--f-display);font-weight:800;font-size:clamp(38px,8vw,62px);
  line-height:.94;margin:0;letter-spacing:.01em;text-wrap:balance;
}
/* "bütün masa." — sarı zemin üstünde, hafif yamuk etiket gibi */
.hero h1 em{
  font-style:normal;display:inline-block;margin-top:4px;
  background:var(--vurgu);color:var(--vurgu-yazi);
  padding:.04em .14em 0;border-radius:10px;transform:rotate(-2deg);
}
.hero p{color:var(--muted);font-size:17px;margin:14px 0 0;max-width:52ch}

/* ---------- günlük bulmacalar şeridi (geri sayım + seri) ---------- */
/* mürdümden maviye geçen renkli kutu; altında kalın gölge (kartlarla aynı dil) */
.gunluk{
  margin-top:26px;border-radius:var(--r-buyuk);color:var(--beyaz);
  background:var(--gunluk-b);
  background:linear-gradient(135deg,var(--gunluk-a),var(--gunluk-b));
  box-shadow:0 5px 0 var(--gunluk-kenar);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.gunluk-ust{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.gunluk-ust h2{font-family:var(--f-display);font-weight:800;font-size:24px;margin:0;letter-spacing:.02em}
.gunluk-sayac{margin:0;font-family:var(--f-mono);font-size:12.5px;color:var(--cam-yazi);letter-spacing:.02em}
.gunluk-sayac b{font-size:17px;font-weight:600;color:var(--vurgu);font-variant-numeric:tabular-nums}
.gunluk-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gunluk-oyun{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad seri" "durum seri";gap:2px 12px;align-items:center;
  background:var(--cam);border:1px solid transparent;border-radius:var(--r);padding:10px 12px;
  color:var(--beyaz);text-decoration:none;transition:border-color .15s,transform .08s;
}
@media (hover:hover){ .gunluk-oyun:hover{border-color:var(--cam-cizgi)} }
.gunluk-oyun:active{border-color:var(--cam-cizgi);transform:scale(.99)}
.gunluk-ad{grid-area:ad;font-weight:600;font-size:16px}
.gunluk-durum{grid-area:durum;font-size:13px;color:var(--cam-yazi)}
.gunluk-durum b{color:var(--vurgu);font-weight:600;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.gunluk-oyun.bekliyor .gunluk-durum{color:var(--cam-yazi)}
.gunluk-seri{
  grid-area:seri;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-family:var(--f-mono);font-size:12.5px;color:var(--vurgu-yazi);background:var(--vurgu);
  border:1px solid var(--vurgu);border-radius:999px;padding:4px 10px 4px 7px;
}
.gunluk-seri[hidden]{display:none}
.gunluk-seri b{font-weight:600;font-variant-numeric:tabular-nums}
.gunluk-seri.sonuk{color:var(--cam-yazi);background:transparent;border-color:var(--cam-cizgi)}   /* bugün henüz oynanmadı */
.gunluk-seri .alev-svg{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.gunluk-not{margin:0;font-size:13px;color:var(--cam-yazi)}

/* ---------- kişisel istatistik şeridi ---------- */
.mystats{
  display:flex;gap:0;flex-wrap:wrap;margin-top:18px;
  border:1px solid var(--line);border-radius:var(--r-buyuk);background:var(--bg-2);overflow:hidden;
}
.mystats .cell{flex:1 1 150px;padding:14px 18px;border-right:1px solid var(--line)}
.mystats .cell:last-child{border-right:none}
.mystats .k{font-size:13px;font-weight:500;color:var(--muted);display:block;line-height:1.3}
.mystats .v{font-family:var(--f-mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--vurgu);display:block;margin-top:3px}
.mystats .v.none{color:var(--line);font-size:18px}

/* ---------- bölüm başlığı ---------- */
.secthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:46px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.secthead h2{font-family:var(--f-display);font-weight:800;font-size:28px;margin:0;letter-spacing:.02em}
.secthead .count{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.08em}

/* ---------- Vaka Dosyaları bölümündeki kurgu uyarısı ---------- */
.kurgu-uyari{
  margin:14px 0 0;padding:10px 14px;border-radius:var(--r);max-width:72ch;
  border-left:4px solid var(--vaka-damga);background:color-mix(in srgb, var(--vaka-damga) 9%, var(--bg-2));
  font-size:13.5px;line-height:1.5;color:var(--muted);
}
.kurgu-uyari b{color:var(--text);font-weight:600}

/* ---------- oyun rafı ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px}

/* Her oyun kartı kendi renginde (raftaki kutu oyunları gibi). Renk çifti karttaki
   "renk-xxx" sınıfından gelir (aşağıda "kart renkleri"); sınıfı olmayan kart düz kalır.
   Arka plan: sağ üstte hafif açık bir daire + yukarıdan aşağı koyulaşan renk.
   Altındaki kalın gölge bulanık değil (blur yok) — telefonu yormaz. */
.game{
  --kart-a:var(--bg-2);--kart-b:var(--bg-2);
  background:var(--kart-b);
  background:
    radial-gradient(circle at 100% 0,var(--cam) 0 64px,transparent 65px),
    linear-gradient(160deg,var(--kart-a),var(--kart-b));
  border:1px solid transparent;border-radius:var(--r-buyuk);color:var(--beyaz);
  box-shadow:0 5px 0 var(--kenar-golge);
  padding:20px;display:flex;flex-direction:column;gap:11px;
  transition:transform .18s;
}
/* kart yukarı kalkma efekti sadece fareli cihazlarda (telefonda dokununca kalkık kalıyordu) */
@media (hover:hover){ .game:hover{transform:translateY(-2px)} }

/* ---------- kart renkleri (renkler tema.css → --kart-xxx-a / -b) ---------- */
.renk-vaka{--kart-a:var(--kart-vaka-a);--kart-b:var(--kart-vaka-b)}
.renk-tnt{--kart-a:var(--kart-tnt-a);--kart-b:var(--kart-tnt-b)}
.renk-kaypak{--kart-a:var(--kart-kaypak-a);--kart-b:var(--kart-kaypak-b)}
.renk-sus{--kart-a:var(--kart-sus-a);--kart-b:var(--kart-sus-b)}
.renk-pp{--kart-a:var(--kart-pp-a);--kart-b:var(--kart-pp-b)}
.renk-dinleyici{--kart-a:var(--kart-dinleyici-a);--kart-b:var(--kart-dinleyici-b)}
.renk-yas{--kart-a:var(--kart-yas-a);--kart-b:var(--kart-yas-b)}
.renk-boy{--kart-a:var(--kart-boy-a);--kart-b:var(--kart-boy-b)}
.renk-harita{--kart-a:var(--kart-harita-a);--kart-b:var(--kart-harita-b)}
.renk-kactir{--kart-a:var(--kart-kactir-a);--kart-b:var(--kart-kactir-b)}

.game .top{display:flex;align-items:center;gap:13px}
.game .ico{
  width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:24px;
  background:var(--cam);
}
/* Kart artık oyunun renginde; ikonlar beyaz çizilir, iç boşluklar kartın koyu tonunda */
/* Patlar TNT — dinamit */
.ico-tnt .mini-cubuk{fill:var(--beyaz)}
.ico-tnt .mini-bant{fill:var(--kart-b)}
.ico-tnt .mini-fitil{fill:none;stroke:var(--beyaz);stroke-width:1.6;stroke-linecap:round}
.ico-tnt .mini-kivilcim{fill:var(--vurgu)}
/* Kaypak — maske */
.ico-kaypak .mini-maske{fill:var(--beyaz)}
.ico-kaypak .mini-goz{fill:var(--kart-b)}
.ico-kaypak .mini-bebek{fill:var(--kaypak-acik)}
/* Sus da Anlat! — konuşma balonu */
.ico-sus .mini-balon{fill:var(--beyaz)}
.ico-sus .mini-nokta{fill:var(--kart-b)}
.ico-sus .mini-yasak{fill:none;stroke:var(--sus-b);stroke-width:3;stroke-linecap:round}
/* Vaka Dosyası — karton klasör (kendi kâğıt renkleri kalır) */
.ico-vaka .mini-dosya{fill:var(--vaka-dosya)}
.ico-vaka .mini-kagit{fill:var(--vaka-kagit)}
/* Harf'iyat — harf çarkı */
.ico-pp .mini-harf{fill:var(--beyaz)}
.ico-pp .mini-harf.yesil{fill:var(--green)}
.ico-pp .mini-harf.kirmizi{fill:var(--bad)}
.ico-pp .mini-p{fill:var(--beyaz);font:800 13px var(--f-display)}
/* Burası Neresi? — küçük Türkiye haritası ve yanan il (deniz zemini kalır) */
.game .ico.ico-harita{background:var(--hr-deniz)}
.ico-harita .mini-tr{fill:var(--hr-kara-2);stroke:var(--hr-dis);stroke-width:.5;stroke-linejoin:round}
.ico-harita .mini-hedef{fill:var(--hr-hedef)}
.ico-harita .mini-hedef-halka{fill:none;stroke:var(--hr-hedef);stroke-width:.9;opacity:.7}
.ico-vaka .mini-cizgi{fill:none;stroke:var(--vaka-soluk);stroke-width:1.6;stroke-linecap:round}
.ico-vaka .mini-muhur{fill:var(--vaka-damga)}
.ico-vaka .mini-akrep{fill:none;stroke:var(--vaka-kagit);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.game h3{font-family:var(--f-display);font-weight:800;font-size:25px;margin:0;line-height:1.02;letter-spacing:.01em}
/* kaç kişiyle oynanır — her oyun kartında */
.game .kisi{display:block;margin-top:5px;font-size:13px;font-weight:500;color:var(--cam-yazi)}
.game p{margin:0;font-size:14px;color:var(--cam-yazi)}
.game .meta{display:flex;gap:6px;flex-wrap:wrap}
.game .tag{color:var(--beyaz);border-color:var(--cam-cizgi)}
.game .spacer{flex:1}
.game .foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px dashed var(--cam-cizgi);padding-top:12px;
}
.game .score{font-size:12.5px;color:var(--cam-yazi)}
.game .score b{color:var(--beyaz);font-weight:600;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* "Oyna": renkli kartın üstünde beyaz, yazısı kartın koyu renginde */
.game .btn{padding:11px 22px;font-size:15px}
.game .btn.primary{
  background:var(--beyaz);border-color:var(--beyaz);color:var(--kart-b);
  border-radius:999px;box-shadow:0 3px 0 var(--kenar-golge);
}
@media (hover:hover){ .game .btn.primary:hover{background:var(--beyaz);border-color:var(--beyaz)} }
.game .btn.primary:active:not(:disabled){background:var(--beyaz);transform:translateY(2px);box-shadow:0 1px 0 var(--kenar-golge)}

/* boş slot — buraya sıradaki oyun gelecek */
.game.slot{
  border:1px dashed var(--line);background:transparent;box-shadow:none;color:var(--muted);align-items:center;justify-content:center;
  text-align:center;min-height:190px;color:var(--muted);gap:7px;
}
@media (hover:hover){ .game.slot:hover{transform:none;border-color:var(--line)} }
.game.slot .plus{font-family:var(--f-display);font-weight:800;font-size:34px;color:var(--line);line-height:1}
.game.slot p{font-size:13px;max-width:22ch}

@media (max-width:520px){
  .mystats .cell{border-right:none;border-bottom:1px solid var(--line)}
  .mystats .cell:last-child{border-bottom:none}
}