/* =============================================================
   tema.css — SİTENİN ORTAK GÖRÜNÜMÜ
   Her sayfa bu dosyayı yükler. Renkleri buradan değiştirirsen
   tüm site birden değişir. Tek tek sayfalara dokunmana gerek yok.
   ============================================================= */

:root{
  /* renkler — "Oyun Gecesi" teması (Eylül 2026): mürdüm-lacivert zemin, sarı ana düğme,
     her oyun kendi renginde. Yeşil artık "doğru / başarı" rengi; ana düğme sarı. */
  --bg:#15131D;
  --bg-2:#211E2C;
  --line:#34304A;
  --line-soft:#27243A;
  --text:#F5F1FA;
  --muted:#A9A2BA;

  /* ana vurgu: sarı. Sitedeki her "asıl düğme" (Oyna, Başla...) bu renkte.
     --vurgu-kenar düğmenin altındaki kalın gölge: basınca düğme içeri çöker. */
  --vurgu:#FFC933;
  --vurgu-acik:#FFD966;
  --vurgu-kenar:#B8860B;
  --vurgu-yazi:#1B1403;

  /* renkli kartların üstündeki beyazlar (ana sayfa oyun kartları, günlük şeridi) */
  --beyaz:#FFFFFF;
  --cam:rgba(255,255,255,.15);          /* ikon zemini, satır zemini */
  --cam-cizgi:rgba(255,255,255,.28);    /* kart içi çizgi, etiket kenarı */
  --cam-yazi:rgba(255,255,255,.88);     /* kart üstündeki açıklama yazısı */
  --kenar-golge:rgba(0,0,0,.32);        /* kartın altındaki kalın gölge */

  /* ana sayfa oyun kartlarının renkleri: -a üst (açık) ton, -b alt (koyu) ton.
     Yeni oyun eklerken buraya bir çift yaz, index.html'de karta "game renk-xxx" sınıfı ver,
     anasayfa.css → "kart renkleri" bölümüne bir satır ekle. */
  --kart-vaka-a:#8A6230;      --kart-vaka-b:#5A3F1C;
  --kart-tnt-a:#C8321F;       --kart-tnt-b:#8A1D10;
  --kart-kaypak-a:#7447D1;    --kart-kaypak-b:#4A2A96;
  --kart-sus-a:#1C74BD;       --kart-sus-b:#124E85;
  --kart-pp-a:#3656D6;        --kart-pp-b:#1F2F86;
  --kart-dinleyici-a:#C2336D; --kart-dinleyici-b:#7E1A45;
  --kart-yas-a:#B5521A;       --kart-yas-b:#853A10;
  --kart-boy-a:#0C7D70;       --kart-boy-b:#07554C;
  --kart-harita-a:#2A7F4F;    --kart-harita-b:#17502F;
  --kart-kactir-a:#9C620A;    --kart-kactir-b:#6E4304;

  /* günlük bulmacalar şeridi (ana sayfa): mürdümden maviye geçiş */
  --gunluk-a:#2D1B69;
  --gunluk-b:#3656D6;
  --gunluk-kenar:#1B1147;

  --green:#5BE49B;
  --green-deep:#2E7A5B;
  --lime:#B7F05C;
  --bad:#FF6B6B;
  --gold:#C9A227;

  /* Patlar TNT — dinamit, fitil ve kıvılcım */
  --tnt:#EE3B2B;
  --tnt-deep:#B3261A;
  --tnt-acik:#FF8A6E;
  --fitil:#E3D2A8;
  --kivilcim:#FFB23F;

  /* Kaypak — maske moru */
  --kaypak:#C08CFF;
  --kaypak-deep:#6A3FB0;
  --kaypak-acik:#E4CCFF;

  /* Sus da Anlat! — iki takımın renkleri (mavi ve mercan), kart zemini */
  --sus-a:#5CB8FF;
  --sus-a-deep:#1F5C94;
  --sus-b:#FF8A7A;
  --sus-b-deep:#9A3A2E;
  --sus-kart:#F3EEDF;
  --sus-kart-yazi:#17201C;

  /* Vaka Dosyası — kâğıt, mürekkep, dosya kartonu, mühür kırmızısı, fosforlu kalem */
  --vaka-kagit:#EFE7D4;
  --vaka-kagit-2:#E2D6BC;
  --vaka-cizgi:#CFC1A2;
  --vaka-murekkep:#211C15;
  --vaka-soluk:#6E6352;
  --vaka-dosya:#C9A266;
  --vaka-dosya-deep:#7C5C30;
  --vaka-damga:#C63A2F;
  --vaka-isaret:#F3DA55;

  /* Harf'iyat (dosya adlarında: pasaparola) — harf çarkının mavisi (yarışmadaki çark gibi), koyusu, açığı */
  --pp:#4C86FF;
  --pp-deep:#22448F;
  --pp-acik:#B5CCFF;

  /* Burası Neresi? — Türkiye haritası: deniz, iller, komşu ülkeler, sınır çizgisi,
     yanan il, yanlış tahminin sıcak/ılık/soğuk renkleri */
  --hr-deniz:#0A1820;
  --hr-deniz-yazi:#2A4A57;
  --hr-kara:#243D33;
  --hr-kara-2:#2D4B40;
  --hr-kara-ust:#3E6656;
  --hr-komsu:#121A17;
  --hr-dis:#4C7F6B;
  --hr-sinir:#0B1210;
  --hr-hedef:#F4F1D0;
  --hr-sicak:#FF7A45;
  --hr-ilik:#E0B84A;
  --hr-soguk:#5CA8E6;

  /* Kaçtır? — cevap sayısının kehribar rengi, koyusu (joker kenarı), doğru/yanlış şıkkın zemini */
  --kt:#FFB547;
  --kt-deep:#7A5418;
  --kt-dogru-zemin:#12301F;
  --kt-yanlis-zemin:#3A1717;

  /* ölçüler */
  --r:12px;
  --r-buyuk:20px;   /* ana sayfa oyun kartları, günlük şeridi */
  --maxw:1040px;

  /* yazı tipleri */
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-daktilo:"Courier Prime","Courier New",Courier,monospace;   /* Vaka Dosyası — daktilo */
  --f-el:"Caveat","Segoe Print","Bradley Hand",cursive;          /* Vaka Dosyası — el yazısı */
}

*{box-sizing:border-box}
html{
  color-scheme:dark;
  -webkit-tap-highlight-color:transparent;   /* telefonda dokununca çıkan gri/mavi kutu olmasın (yerine :active var) */
  -webkit-text-size-adjust:100%;             /* iPhone yan çevrilince yazıları kendiliğinden büyütmesin */
  text-size-adjust:100%;
}
/* Telefonda hızlı art arda dokununca sayfa yakınlaşmasın (iki parmakla yakınlaştırma yine çalışır) */
a,button,input,select,textarea,label,summary,[role="button"]{touch-action:manipulation}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--green)}
code{font-family:var(--f-mono);color:var(--green);font-size:.92em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:16px;padding-block:clamp(18px,4vw,32px) 48px}

/* ---------- site başlığı (her sayfada aynı) ---------- */
.sitehead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--text)}
.logo span.mark{
  font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.03em;
  line-height:1;text-transform:uppercase;
}
/* logodaki renkli harfler: O·y·N·a·Z·O → kırmızı, mor, mavi, sarı (oyunların renkleri) */
.logo .mark i{font-style:normal}
.logo .mark i:nth-of-type(1){color:var(--tnt)}
.logo .mark i:nth-of-type(2){color:var(--kaypak)}
.logo .mark i:nth-of-type(3){color:var(--pp)}
.logo .mark i:nth-of-type(4){color:var(--vurgu)}
.sitenav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sitenav a{
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
  padding:7px 12px;border-radius:999px;transition:color .15s,background-color .15s;
}
@media (hover:hover){ .sitenav a:hover{color:var(--text);background:var(--bg-2)} }
.sitenav a[aria-current="page"]{color:var(--text);background:var(--bg-2)}

/* ---------- ortak bileşenler ---------- */
/* Düğmelerin altında kalın, bulanıksız bir gölge var: basınca düğme 2-3px aşağı iner,
   gölge incelir — "içeri çöktü" hissi. Bulanık gölge (blur) kullanılmadı: telefonu yormasın. */
.btn{
  font:600 15px/1 var(--f-body);border-radius:var(--r);padding:14px 24px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--text);
  box-shadow:0 3px 0 var(--line);
  transition:background-color .15s,border-color .15s,transform .08s,box-shadow .08s;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn.primary{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-yazi);font-weight:700;box-shadow:0 4px 0 var(--vurgu-kenar)}
/* "Üzerine gelince" renkleri sadece fareli cihazlarda: telefonda dokunulan düğme
   bir sonraki dokunuşa kadar renkli kalıyordu. Telefonda basılı tutarken :active çalışır. */
@media (hover:hover){
  .btn:hover{border-color:var(--muted)}
  .btn.primary:hover{background:var(--vurgu-acik);border-color:var(--vurgu-acik)}
}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn.primary:active:not(:disabled){background:var(--vurgu-acik);transform:translateY(3px);box-shadow:0 1px 0 var(--vurgu-kenar)}
.btn:disabled{opacity:.4;cursor:default}

.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chips .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.chip{
  font:500 13px/1 var(--f-body);background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:color .15s,background-color .15s,border-color .15s;
}
@media (hover:hover){ .chip:hover{color:var(--text);border-color:var(--muted)} }
.chip:active{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-yazi);font-weight:600}

.tag{
  font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px;
}

.avatar{
  width:80px;height:80px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:33px;color:#07130E;flex:none;letter-spacing:.02em;
}

:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.sitefoot{
  margin-top:44px;border-top:1px solid var(--line);padding-top:14px;
  font-size:12.5px;color:var(--muted);line-height:1.6;
}
.sitefoot a{color:var(--text)}

/* ---------- sayfalar arası yumuşak geçiş ----------
   Bir sayfadan ötekine geçerken ekran bir anlık kararıp yeniden çizilmek yerine
   kısa bir geçişle değişir; üstteki site başlığı (logo + menü) yerinde sabit kalır.
   Destekleyen tarayıcılarda çalışır (Chrome, Android, iPhone iOS 18.2+), desteklemeyen
   eskisi gibi açar — hiçbir şey bozulmaz. Süre kısa tutuldu: oyuna geçişi yavaşlatmasın. */
@view-transition{navigation:auto}
.sitehead{view-transition-name:site-baslik}
::view-transition-group(*){animation-duration:.14s}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  @view-transition{navigation:none}
}