/* stil.css — NOTDEFTERI (2026-09-15)
   Sahip kararı: "Koyu tema, sade ve modern" — gece kullanımında göz yormaz,
   ekran parlaması düşük olur (çevredekinin dikkatini çekmez).
   Mobil öncelikli: tüm dokunma hedefleri >= 44px. */

:root {
  --zemin:        #0f1115;
  --zemin-2:      #171a21;
  --zemin-3:      #1f242e;
  --cizgi:        #2a303c;
  --yazi:         #e6e9ef;
  --yazi-sonuk:   #8b93a7;
  --vurgu:        #6ea8fe;
  --benim:        #244a7a;
  --onun:         #232834;
  --panik:        #e03131;
  --iyi:          #37b24d;
  --uyari:        #f59f00;
  --r:            14px;
  --golge:        0 8px 24px rgba(0,0,0,.45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--zemin);
  color: var(--yazi);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
textarea, input { font: inherit; color: inherit; }

/* ───────── kapak (404 görünümü) ───────── */
.kapak {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #fff;
  color: #202124;
  padding: 24px;
}
.kapak-ic { text-align: center; max-width: 420px; }
.kapak-kod {
  font-size: 64px; font-weight: 300; margin: 0 0 8px;
  letter-spacing: -2px; user-select: none;
  padding: 12px 24px; /* gizli dokunma hedefi büyütülür */
  display: inline-block;
}
.kapak-metin { font-size: 18px; margin: 0 0 6px; }
.kapak-alt { font-size: 14px; color: #5f6368; margin: 0; }

/* ───────── ortak kart / form ───────── */
.ortala { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.kart {
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  padding: 22px;
  width: min(380px, 100%);
  box-shadow: var(--golge);
  display: grid;
  gap: 14px;
}
.kart-baslik { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.alan { display: grid; gap: 6px; font-size: 13px; color: var(--yazi-sonuk); }
.alan input, .kart input[type="password"] {
  background: var(--zemin-3);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 44px;
  outline: none;
}
.alan input:focus, .kart input:focus { border-color: var(--vurgu); }
.birincil {
  background: var(--vurgu); color: #06131f; border: 0;
  border-radius: 10px; padding: 12px 16px; min-height: 44px; font-weight: 600;
}
.birincil:disabled { opacity: .5; }
.ikincil {
  background: var(--zemin-3); color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 10px 14px; min-height: 44px;
}
.uyari { color: var(--panik); font-size: 13px; margin: 0; }
.ipucu { color: var(--yazi-sonuk); font-size: 12px; }

/* ───────── sohbet iskeleti ───────── */
.uygulama {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
}
.ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--zemin-2); border-bottom: 1px solid var(--cizgi);
}
.ust-kimlik { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: #4b5163; flex: 0 0 auto; }
.nokta.acik { background: var(--iyi); box-shadow: 0 0 8px rgba(55,178,77,.6); }
.karsi-ad { font-weight: 600; }
.karsi-durum { font-size: 12px; color: var(--yazi-sonuk); }
.ust-dugmeler { display: flex; gap: 4px; }
.ikon {
  background: transparent; border: 0; border-radius: 10px;
  min-width: 40px; min-height: 40px; font-size: 17px; line-height: 1;
}
.ikon:active { background: var(--zemin-3); }

.akis {
  overflow-y: auto; padding: 14px 12px 4px;
  display: flex; flex-direction: column; gap: 8px;
  overscroll-behavior: contain;
}

/* ───────── baloncuklar ───────── */
.satir { display: flex; }
.satir.benim { justify-content: flex-end; }
.balon {
  max-width: min(78%, 560px);
  background: var(--onun);
  border-radius: 16px; padding: 9px 12px;
  position: relative; word-wrap: break-word; overflow-wrap: anywhere;
}
.satir.benim .balon { background: var(--benim); }
.balon.silinmis { opacity: .55; font-style: italic; }
.balon-alinti {
  border-left: 3px solid var(--vurgu);
  background: rgba(110,168,254,.10);
  border-radius: 6px; padding: 5px 8px; margin-bottom: 6px;
  font-size: 13px; color: var(--yazi-sonuk);
}
.balon-alinti b { color: var(--vurgu); display: block; font-size: 12px; }
.balon-alt {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-size: 11px; color: var(--yazi-sonuk); margin-top: 4px;
}
.tik.okundu { color: var(--vurgu); }
.balon img, .balon video { max-width: 100%; border-radius: 10px; display: block; }
.balon audio { width: 220px; max-width: 100%; }
.dosya-baglanti { color: var(--vurgu); text-decoration: none; word-break: break-all; }
.rozet-sure {
  font-size: 10px; background: rgba(245,159,0,.18); color: var(--uyari);
  border-radius: 6px; padding: 1px 5px;
}
.tepkiler { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tepki {
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 1px 6px; font-size: 12px;
}
.mesaj-arac {
  position: absolute; top: -12px; right: 6px;
  display: none; gap: 2px; background: var(--zemin-3);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 2px;
  box-shadow: var(--golge);
}
.balon:hover .mesaj-arac, .balon.acik-arac .mesaj-arac { display: flex; }
.mesaj-arac button {
  background: transparent; border: 0; font-size: 14px;
  min-width: 30px; min-height: 30px; border-radius: 8px;
}

/* ───────── yazıyor ───────── */
.yaziyor { display: flex; gap: 4px; padding: 0 20px 6px; }
.yaziyor span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--yazi-sonuk);
  animation: zipla 1.2s infinite;
}
.yaziyor span:nth-child(2) { animation-delay: .2s; }
.yaziyor span:nth-child(3) { animation-delay: .4s; }
@keyframes zipla { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ───────── alıntı önizleme ───────── */
.alinti-onizleme {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 6px; padding: 8px 10px;
  background: var(--zemin-2); border-left: 3px solid var(--vurgu); border-radius: 8px;
}
.alinti-govde { flex: 1; min-width: 0; font-size: 13px; color: var(--yazi-sonuk); }
.alinti-govde b { display: block; color: var(--vurgu); font-size: 12px; }
.alinti-govde span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────── yazma çubuğu ───────── */
.yazma {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--zemin-2); border-top: 1px solid var(--cizgi);
}
#metinKutu {
  flex: 1; resize: none; max-height: 140px;
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 18px; padding: 11px 14px; outline: none;
}
#metinKutu:focus { border-color: var(--vurgu); }
.yuvarlak { border-radius: 50%; width: 44px; height: 44px; padding: 0; min-height: 44px; }
.ikon.kayitta { background: rgba(224,49,49,.2); animation: nabiz 1s infinite; }
@keyframes nabiz { 50% { opacity: .5; } }

.sure-secim {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 12px 10px; background: var(--zemin-2);
}
.sure-secim button {
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px;
}
.sure-secim button.secili { border-color: var(--uyari); color: var(--uyari); }

/* ───────── panik butonu — ÜST ÇUBUKTA ─────────
   YAPISAL ÇÖZÜM: buton ekrana sabitlenmiş (position:fixed) ve alttan hesaplanmış
   olduğu sürece, yazma çubuğunun yüksekliği / klavye / yazı boyutu değiştikçe
   gönder tuşunun üstüne binme riski hep kalıyordu — sayı ayarlayarak kapanmıyor.
   Artık normal akışta, üst çubuğun içinde: yazma çubuğuyla aynı bölgede değil,
   bu yüzden çakışma FİZİKSEL olarak mümkün değil. Üst çubuk kaymaz, her zaman
   görünür, tek elle başparmakla ulaşılır. */
.panik {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panik); color: #fff; border: 0;
  font-size: 18px; line-height: 1;
  box-shadow: 0 2px 10px rgba(224,49,49,.45);
  margin-right: 2px;
}
.panik:active { transform: scale(.92); }

/* ───────── paravan (ders) ───────── */
.paravan {
  position: fixed; inset: 0; z-index: 90;
  background: #fbfcfe; color: #1a1d23;
  display: flex; flex-direction: column;
}
.paravan-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid #e3e7ee;
}
.paravan-marka { font-weight: 700; color: #1b4fa0; letter-spacing: -.2px; }
.paravan-ders { font-size: 13px; color: #5b6472; }
.paravan-govde {
  flex: 1; overflow-y: auto; padding: 20px 18px 28px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.paravan-ilerleme { height: 4px; background: #e6eaf1; border-radius: 4px; margin-bottom: 20px; }
.paravan-ilerleme i { display: block; height: 100%; width: 38%; background: #1b4fa0; border-radius: 4px; }
.paravan-soru { font-size: 19px; line-height: 1.55; margin: 0 0 18px; font-weight: 600; }
.paravan-secenekler { display: grid; gap: 10px; }
.paravan-secenekler button {
  text-align: left; background: #fff; border: 1px solid #d9dfe8;
  border-radius: 10px; padding: 13px 15px; min-height: 48px; color: #1a1d23;
}
.paravan-secenekler button:active { background: #f1f4f9; }
.paravan-secenekler button.dogru { border-color: #2f9e44; background: #ebfbee; }
.paravan-secenekler button.yanlis { border-color: #e03131; background: #fff5f5; }
.paravan-cozum {
  margin-top: 18px; padding: 14px 16px;
  background: #eef4ff; border-left: 3px solid #1b4fa0; border-radius: 8px;
  font-size: 14px; line-height: 1.6; white-space: pre-wrap;
}
.paravan-alt { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.paravan-alt .ikincil { background: #fff; color: #1a1d23; border-color: #d9dfe8; }
/* Dönüş düğmesi: göze batmayacak kadar sade, ama KAYBOLMAYACAK kadar belirgin.
   Tamamen görünmez yaparsak panik anında bulunamaz — özellik orada çöker.
   İkinci ve asıl yol: markaya 3 dokunma (bkz. uygulama.js). */
.paravan-cikis {
  position: fixed; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #e3e7ee; color: #8b93a7; font-size: 16px;
  box-shadow: 0 2px 6px rgba(16,24,40,.06);
}
.paravan-cikis:active { background: #f1f4f9; }
.paravan-marka { cursor: default; user-select: none; padding: 6px 10px; margin: -6px -10px; }
.paravan-kilit {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(10,12,16,.82);
  display: grid; place-items: center; padding: 20px;
}

/* ───────── katmanlar (not / oyun / panel) ───────── */
.katman {
  position: fixed; inset: 0; z-index: 60;
  background: var(--zemin); display: flex; flex-direction: column;
}
.katman-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--zemin-2); border-bottom: 1px solid var(--cizgi);
}
.katman-ust h2 { margin: 0; font-size: 16px; font-weight: 600; }
.katman-govde {
  flex: 1; overflow-y: auto; padding: 16px 14px 28px;
  max-width: 900px; width: 100%; margin: 0 auto;
}
.alt-baslik { font-size: 14px; color: var(--yazi-sonuk); margin: 22px 0 10px; }
.ortak-not {
  width: 100%; min-height: 220px; resize: vertical;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 12px; outline: none;
}
.ortak-not:focus { border-color: var(--vurgu); }
.yap-form { display: flex; gap: 8px; margin-bottom: 10px; }
.yap-form input {
  flex: 1; background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 11px 13px; min-height: 44px; outline: none;
}
.yap-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.yap-liste li {
  display: flex; align-items: center; gap: 10px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 10px 12px;
}
.yap-liste li.bitti span { text-decoration: line-through; color: var(--yazi-sonuk); }
.yap-liste li span { flex: 1; }
.yap-liste input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--vurgu); }

/* ───────── panel tabloları ───────── */
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sekmeler button {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: 8px 14px; min-height: 40px; font-size: 13px;
}
.sekmeler button.secili { border-color: var(--vurgu); color: var(--vurgu); }
.kutucuklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kutucuk {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 12px;
}
.kutucuk b { display: block; font-size: 20px; margin-bottom: 2px; }
.kutucuk span { font-size: 12px; color: var(--yazi-sonuk); }
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.veri { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
table.veri th, table.veri td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
table.veri th { color: var(--yazi-sonuk); font-weight: 500; }
table.veri td.genis { white-space: normal; word-break: break-word; min-width: 220px; }

/* ───────── oyunlar ───────── */
.oyun-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.oyun-kart {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 12px; padding: 16px; text-align: center; min-height: 92px;
}
.oyun-kart b { display: block; font-size: 15px; margin-top: 6px; }
.oyun-kart small { color: var(--yazi-sonuk); }
.oyun-simge { font-size: 26px; line-height: 1; }

.oyun-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.oyun-alt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.oyun-skor { font-size: 14px; color: var(--yazi); text-align: center; margin-bottom: 8px; font-weight: 600; }
.oyun-izgara-tahta { margin: 0 auto; }
.oyun-hucre {
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 6px;
  padding: 0; font-size: 18px; line-height: 1; color: var(--yazi);
}
.oyun-hucre:active { background: var(--zemin-3); }
.oyun-uyari {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
  background: var(--zemin-3); border: 1px solid var(--uyari); color: var(--uyari);
  border-radius: 999px; padding: 8px 16px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 70;
}
.oyun-uyari.gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Gomoku: tahta ahşap tonunda, taşlar daire */
.oyun-izgara-tahta.gomoku .oyun-hucre { border-radius: 2px; border-color: #3a3f4b; background: #2a2f3a; }
.oyun-izgara-tahta.gomoku .oyun-hucre.s::after,
.oyun-izgara-tahta.gomoku .oyun-hucre.b::after {
  content: ''; display: block; width: 76%; height: 76%; margin: auto; border-radius: 50%;
}
.oyun-izgara-tahta.gomoku .oyun-hucre.s::after { background: #12151c; box-shadow: inset 0 1px 2px rgba(255,255,255,.25); }
.oyun-izgara-tahta.gomoku .oyun-hucre.b::after { background: #eef1f6; box-shadow: inset 0 -1px 2px rgba(0,0,0,.3); }
.oyun-izgara-tahta.gomoku .oyun-hucre.son { outline: 2px solid var(--uyari); outline-offset: -2px; }

/* Amiral Battı */
.amiral-bolum { display: grid; gap: 10px; justify-items: center; }
.amiral-gemiler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.amiral-gemi {
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 999px;
  padding: 7px 12px; font-size: 12px; min-height: 36px;
}
.amiral-gemi.secili { border-color: var(--vurgu); color: var(--vurgu); }
.amiral-gemi.kondu { opacity: .45; }
.oyun-izgara-tahta.amiral-kendi .oyun-hucre { background: #16202e; }
.oyun-izgara-tahta.amiral-rakip .oyun-hucre { background: #131a24; }
.oyun-hucre.gemi { background: #44506a; }
.oyun-hucre.iska::after { content: '·'; font-size: 22px; color: var(--yazi-sonuk); }
.oyun-hucre.vurdu, .oyun-hucre.vuruldu { background: #7a2b2b; }
.oyun-hucre.vurdu::after, .oyun-hucre.vuruldu::after { content: '✕'; font-size: 15px; color: #ffd9d9; }
.oyun-hucre.battik { background: var(--panik); }
.oyun-hucre.battik::after { content: '☠'; font-size: 15px; }

/* Kutu Kapmaca */
.kutu-tahta { position: relative; margin: 8px auto; }
.kutu-nokta {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--yazi-sonuk);
}
.kutu-cizgi {
  position: absolute; background: var(--zemin-3); border: 0; border-radius: 3px; padding: 0;
}
.kutu-cizgi.yatay { height: 10px; }
.kutu-cizgi.dikey { width: 10px; }
.kutu-cizgi.dolu.benim { background: var(--vurgu); }
.kutu-cizgi.dolu.rakip { background: var(--panik); }
.kutu-alan {
  position: absolute; display: grid; place-items: center;
  font-size: 18px; color: transparent; border-radius: 4px;
}
.kutu-alan.benim { background: rgba(110,168,254,.22); color: var(--vurgu); }
.kutu-alan.rakip { background: rgba(224,49,49,.20); color: var(--panik); }

/* Mangala */
.mangala-tahta {
  display: grid; grid-template-rows: auto auto auto; gap: 8px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 12px; margin: 0 auto; max-width: 520px;
}
.mangala-satir { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mangala-kuyu {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--cizgi);
  background: var(--zemin-3); font-size: 16px; font-weight: 600; color: var(--yazi-sonuk);
  min-height: 40px;
}
.mangala-kuyu.dolu { color: var(--yazi); }
.mangala-kuyu.benim { border-color: rgba(110,168,254,.45); }
.mangala-kuyu.oynanabilir { background: rgba(110,168,254,.16); border-color: var(--vurgu); color: var(--vurgu); }
.mangala-orta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.mangala-hazine {
  background: var(--zemin-3); border: 1px solid var(--cizgi); border-radius: 12px;
  padding: 8px 14px; text-align: center; min-width: 74px;
}
.mangala-hazine b { display: block; font-size: 20px; }
.mangala-hazine small { color: var(--yazi-sonuk); font-size: 11px; }
.mangala-bosluk { height: 1px; }
.oyun-alan { display: grid; gap: 12px; justify-items: center; }
.tahta-3 { display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; }
.tahta-3 button {
  width: 84px; height: 84px; font-size: 34px;
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 10px;
}
.tahta-c4 { display: grid; grid-template-columns: repeat(7, 42px); gap: 4px; }
.tahta-c4 button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--zemin-3); border: 1px solid var(--cizgi);
}
.tahta-c4 button.k { background: #e03131; }
.tahta-c4 button.s { background: #fab005; }
.tahta-8 { display: grid; grid-template-columns: repeat(8, 40px); gap: 0; }
.tahta-8 button { width: 40px; height: 40px; border: 0; font-size: 22px; }
.tahta-8 button.acik { background: #cfd6e2; }
.tahta-8 button.koyu { background: #6b7a90; }
.oyun-durum { font-size: 14px; color: var(--yazi-sonuk); text-align: center; }
.kelime-izgara { display: grid; gap: 5px; }
.kelime-satir { display: grid; grid-template-columns: repeat(5, 52px); gap: 5px; }
.kelime-satir div {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 2px solid var(--cizgi); border-radius: 6px;
  font-size: 22px; font-weight: 700; text-transform: uppercase;
}
.kelime-satir div.yerinde { background: #2f9e44; border-color: #2f9e44; }
.kelime-satir div.var { background: #f59f00; border-color: #f59f00; color: #1a1d23; }
.kelime-satir div.yok { background: var(--zemin-3); border-color: var(--zemin-3); }

@media (max-width: 380px) {
  .tahta-3 { grid-template-columns: repeat(3, 72px); }
  .tahta-3 button { width: 72px; height: 72px; font-size: 28px; }
  .kelime-satir { grid-template-columns: repeat(5, 46px); }
  .kelime-satir div { width: 46px; height: 46px; font-size: 19px; }
  .tahta-8 { grid-template-columns: repeat(8, 34px); }
  .tahta-8 button { width: 34px; height: 34px; font-size: 18px; }
}

/* ═══════════ TEMA SİSTEMİ ═══════════
   Açık temalarda (data-tema-turu="acik") gölge/kenar tonlarını yumuşat;
   koyu için tasarlanan sert gölgeler açık zeminde kirli görünür. */
:root[data-tema-turu="acik"] .kart,
:root[data-tema-turu="acik"] .oyun-kart,
:root[data-tema-turu="acik"] .oyun-hucre { box-shadow: none; }
:root[data-tema-turu="acik"] .balon { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
:root[data-tema-turu="acik"] .panik { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.tema-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.tema-kart {
  background: var(--zemin-2); border: 2px solid var(--cizgi);
  border-radius: 14px; padding: 10px; text-align: center; display: grid; gap: 8px;
}
.tema-kart.secili { border-color: var(--vurgu); }
.tema-onizleme {
  height: 66px; border-radius: 10px; border: 1px solid;
  position: relative; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 4px; padding: 8px;
}
.tema-balon { border-radius: 10px; padding: 4px 10px; font-size: 11px; }
.tema-balon.on { align-self: flex-start; }
.tema-balon.on::after { content: 'merhaba'; }
.tema-balon.ben::after { content: 'selam 💛'; }
.tema-vurgu { position: absolute; left: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; }
.tema-ad { font-size: 13px; font-weight: 600; }

/* ═══════════ YENİ OYUN SINIFLARI ═══════════ */
.oyun-hucre.kazanan { outline: 3px solid var(--iyi); outline-offset: -3px; }

/* XOX */
.oyun-izgara-tahta.xox .oyun-hucre { font-size: 40px; font-weight: 700; }

/* Connect 4 */
.oyun-izgara-tahta.c4 .oyun-hucre { border-radius: 50%; background: var(--zemin-3); }
.oyun-izgara-tahta.c4 .oyun-hucre.k { background: var(--panik); }
.oyun-izgara-tahta.c4 .oyun-hucre.s { background: var(--uyari); }

/* Reversi */
.oyun-izgara-tahta.reversi .oyun-hucre { background: #1f6b3a; border-color: #14522a; border-radius: 3px; }
.oyun-izgara-tahta.reversi .oyun-hucre.s::after,
.oyun-izgara-tahta.reversi .oyun-hucre.b::after {
  content: ''; display: block; width: 78%; height: 78%; margin: auto; border-radius: 50%;
}
.oyun-izgara-tahta.reversi .oyun-hucre.s::after { background: #12151c; }
.oyun-izgara-tahta.reversi .oyun-hucre.b::after { background: #eef1f6; }
.oyun-izgara-tahta.reversi .oyun-hucre.ipucu::after {
  content: ''; display: block; width: 26%; height: 26%; margin: auto; border-radius: 50%;
  background: rgba(255,255,255,.4);
}

/* Hafıza */
.oyun-izgara-tahta.hafiza .oyun-hucre { font-size: 30px; background: var(--vurgu); color: transparent; }
.oyun-izgara-tahta.hafiza .oyun-hucre.acik { background: var(--zemin-2); }
.oyun-izgara-tahta.hafiza .oyun-hucre.bulundu { opacity: .35; }

/* Taş Kağıt Makas */
.tkm-sahne { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; }
.tkm-el { font-size: 54px; width: 80px; height: 80px; display: grid; place-items: center;
  background: var(--zemin-2); border-radius: 16px; border: 1px solid var(--cizgi); }
.tkm-el.kazandi { border-color: var(--iyi); box-shadow: 0 0 16px rgba(55,178,77,.4); }
.tkm-vs { font-size: 16px; color: var(--yazi-sonuk); }
.tkm-secimler { display: flex; gap: 12px; justify-content: center; }
.tkm-dugme { font-size: 34px; width: 68px; height: 68px; border-radius: 50%;
  background: var(--zemin-2); border: 2px solid var(--cizgi); }
.tkm-dugme.secili { border-color: var(--vurgu); }
.tkm-dugme:disabled { opacity: .5; }

/* Refleks */
.refleks-ekran { width: 100%; min-height: 160px; border-radius: 16px; border: 0;
  font-size: 20px; font-weight: 700; color: #fff; background: var(--zemin-3); }
.refleks-ekran.bekle { background: #b4451e; }
.refleks-ekran.yesil { background: #2f9e44; }
.refleks-ekran.erken { background: var(--panik); }
.refleks-tablo { white-space: pre-line; font-size: 13px; color: var(--yazi-sonuk); text-align: center; margin-top: 10px; }

/* Yılan */
.yilan-tuval { width: 100%; max-width: 400px; aspect-ratio: 1; border-radius: 12px;
  border: 1px solid var(--cizgi); touch-action: none; display: block; margin: 0 auto; }
.yilan-pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 44px);
  gap: 6px; justify-content: center; margin-top: 12px;
  grid-template-areas: '. up .' 'left down right'; }
.yilan-pad button:nth-child(1) { grid-area: up; }
.yilan-pad button:nth-child(2) { grid-area: left; }
.yilan-pad button:nth-child(3) { grid-area: down; }
.yilan-pad button:nth-child(4) { grid-area: right; }

/* Kelime */
.kelime-girdi { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 11px 14px; min-height: 44px; text-align: center; font-size: 20px; letter-spacing: 6px;
  text-transform: uppercase; width: 100%; max-width: 280px; margin: 10px auto 0; display: block; outline: none; }
.kelime-girdi:focus { border-color: var(--vurgu); }
.kelime-izgara { display: grid; gap: 5px; justify-content: center; margin: 12px 0; }
.kelime-satir { display: grid; grid-template-columns: repeat(5, 50px); gap: 5px; }
.kelime-satir div { width: 50px; height: 50px; display: grid; place-items: center;
  border: 2px solid var(--cizgi); border-radius: 6px; font-size: 22px; font-weight: 700; text-transform: uppercase; }
.kelime-satir div.yerinde { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.kelime-satir div.var { background: #f59f00; border-color: #f59f00; color: #1a1d23; }
.kelime-satir div.yok { background: var(--zemin-3); border-color: var(--zemin-3); color: var(--yazi-sonuk); }

/* Çizim */
.cizim-tuval { width: 100%; max-width: 600px; aspect-ratio: 600/420; background: #fff;
  border-radius: 12px; border: 1px solid var(--cizgi); touch-action: none; display: block; margin: 8px auto; }
.cizim-tuval.pasif { cursor: not-allowed; }
.cizim-kelime { text-align: center; font-weight: 600; margin: 6px 0; }
.cizim-renk { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cizgi); padding: 0; }

/* Adam Asmaca */
.asmaca-adam { font-size: 60px; text-align: center; margin: 6px 0; }
.asmaca-kelime { text-align: center; font-size: 30px; letter-spacing: 8px; font-weight: 700; min-height: 40px; }
.asmaca-yanlis { text-align: center; color: var(--yazi-sonuk); font-size: 13px; margin: 6px 0; }
.asmaca-klavye { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 400px; margin: 10px auto; }
.asmaca-harf { aspect-ratio: 1; border-radius: 8px; background: var(--zemin-2);
  border: 1px solid var(--cizgi); font-size: 15px; font-weight: 600; min-height: 38px; }
.asmaca-harf.dogru { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.asmaca-harf.yanlis { background: var(--panik); border-color: var(--panik); color: #fff; opacity: .6; }
.asmaca-secim { display: grid; gap: 8px; max-width: 360px; margin: 10px auto; }
.asmaca-secim input { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 11px 14px; min-height: 44px; outline: none; }

/* Beni Tanıyor musun / İki Doğru Bir Yalan */
.tanir-kart { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 16px; display: grid; gap: 10px; max-width: 480px; margin: 0 auto; }
.tanir-kart input, .tanir-kart select { background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 11px 13px; min-height: 44px; outline: none; color: var(--yazi); }
.tanir-soru { font-size: 14px; }
.tanir-soru-metin { font-size: 17px; font-weight: 600; text-align: center; }
.tanir-satir { display: flex; gap: 8px; font-size: 14px; }
.tanir-satir b { color: var(--yazi-sonuk); min-width: 100px; }
.tanir-sonuc { text-align: center; font-size: 16px; font-weight: 700; padding: 8px; border-radius: 10px; }
.tanir-sonuc.dogru { background: rgba(55,178,77,.18); color: var(--iyi); }
.tanir-sonuc.yanlis { background: rgba(224,49,49,.15); color: var(--panik); }
.yalan-secim { display: flex; gap: 8px; }
.yalan-iddia { text-align: left; background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 12px 14px; min-height: 48px; color: var(--yazi); }
.yalan-iddia.yalandi { border-color: var(--panik); background: rgba(224,49,49,.12); }
.yalan-iddia.dogruydu { border-color: var(--iyi); background: rgba(55,178,77,.10); }

/* Sayı Tahmin */
.sayi-gizli { text-align: center; font-size: 15px; color: var(--vurgu); font-weight: 700; letter-spacing: 3px; margin: 8px 0; }
.sayi-tablolar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sayi-tablo { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; }
.sayi-tablo b { display: block; font-size: 13px; color: var(--yazi-sonuk); margin-bottom: 6px; }
.sayi-tablo pre { margin: 0; font-size: 14px; white-space: pre-wrap; }