/* =============================================================
   sayfa.css — YAZI SAYFALARI (Hakkında, İletişim)
   Oyun olmayan, düz metin ağırlıklı sayfalar bunu kullanır.
   Yeni bir bilgi sayfası eklersen (mesela "Gizlilik") bunu yükle.
   ============================================================= */

/* ---------- sayfa girişi ---------- */
.sayfabas{padding-block:34px 4px;max-width:62ch}
.sayfabas h1{
  font-family:var(--f-display);font-weight:800;font-size:clamp(38px,8vw,58px);
  line-height:.94;margin:0;letter-spacing:.01em;text-wrap:balance;
}
.sayfabas h1 em{font-style:normal;color:var(--green)}
.sayfabas p{color:var(--muted);font-size:17px;margin:14px 0 0;max-width:52ch}

/* ---------- metin blokları ---------- */
.blok{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);padding:22px 20px;
}
.blok h2{font-family:var(--f-display);font-weight:800;font-size:24px;margin:0 0 10px;letter-spacing:.02em}
.blok p{margin:0 0 10px;font-size:15px;color:var(--muted);max-width:64ch}
.blok p:last-child{margin-bottom:0}
.blok p b{color:var(--text);font-weight:600}
.blok ul{margin:0;padding-left:1.2em;color:var(--muted);font-size:15px;max-width:64ch}
.blok li{margin-bottom:6px}
.blok li:last-child{margin-bottom:0}
.blok li::marker{color:var(--green)}
/* bölüm içi küçük başlık (Hakkında → Şu an rafta: Vaka Dosyaları / Oyunlar / Tahmin Etme) */
.blok h3{font-family:var(--f-mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:18px 0 8px}
.blok h2 + h3{margin-top:4px}
.blok ul + p{margin-top:16px}

/* iki blok yan yana (geniş ekranda), dar ekranda alt alta */
.ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:26px}
.ikili .blok{margin-top:0}

/* küçük numaralı başlık etiketi: "01", "02" ... */
.blok .no{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--green);margin-bottom:6px;font-variant-numeric:tabular-nums;
}

/* ---------- iletişim formu ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form .alan{display:flex;flex-direction:column;gap:6px;min-width:0}
.form label{font-size:14px;font-weight:600;color:var(--text)}
.form label .ops{font-weight:400;color:var(--muted);font-size:13px;margin-left:4px}

.form input,
.form select,
.form textarea{
  font:400 16px/1.4 var(--f-body);   /* 16px: iPhone'da tıklayınca sayfa yakınlaşmasın */
  color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;width:100%;transition:border-color .15s;
}
.form textarea{resize:vertical;min-height:130px}
.form input::placeholder,
.form textarea::placeholder{color:var(--muted);opacity:.7}
.form input:hover,
.form select:hover,
.form textarea:hover{border-color:var(--muted)}
.form input:focus,
.form select:focus,
.form textarea:focus{border-color:var(--green);outline:none}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ad + e-posta: geniş ekranda yan yana, dar ekranda alt alta */
.alan-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}

.form .gonder{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form .durum{margin:0;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);flex:1 1 200px}
.form .durum[data-tur="iyi"]{color:var(--green)}
.form .durum[data-tur="kotu"]{color:var(--bad)}

/* spam tuzağı: ekranda görünmez */
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}