/* =============================================================
   harfal.css — SADECE HARF AL
   Harf kutuları, soru şeridi, "Harf al / Cevapla" düğmeleri, cevap geri sayımı.
   Menü kartları, üst çubuk, perde ve sonuç ekranının iskeleti Harf'iyat ile
   ortak: pasaparola.css (sayfa ikisini de yükler, bu dosya ondan SONRA gelir).
   Renkler tema.css'teki --pp (mavi), --green (doğru), --bad (yanlış), --vurgu (sarı).
   ============================================================= */

.ha-sahne [hidden]{display:none !important}

/* ---------- harf kutusu (menü süsü, oyun, cevap anahtarı) ---------- */
.ha-kutu{
  display:grid;place-items:center;aspect-ratio:1/1.12;min-width:0;
  background:var(--bg-2);border:2px solid var(--line);border-radius:8px;
  font-family:var(--f-display);font-weight:800;line-height:1;color:var(--text);
  text-transform:uppercase;
}
.ha-kutu.acik{background:var(--pp-deep);border-color:var(--pp);color:var(--pp-acik)}      /* "Harf al" ile açılan */
.ha-kutu.yazili{border-color:var(--muted)}                                                /* oyuncunun yazdığı */
.ha-kutu.imlec{border-color:var(--vurgu);box-shadow:0 0 0 2px color-mix(in srgb,var(--vurgu) 35%,transparent)}
.ha-kutu.dogru{background:var(--green);border-color:var(--green);color:#07130E}
.ha-kutu.yanlis{background:var(--bad);border-color:var(--bad);color:#2A0808}
.ha-kutu.sifir{background:var(--bg-2);border-color:var(--muted);color:var(--muted)}       /* bütün harfler açıldı */
.ha-kutu.yeni{animation:ha-ac .32s ease}
@keyframes ha-ac{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

/* ---------- menü süsü ---------- */
.ha-sus{display:flex;gap:6px;align-items:center;justify-content:center;flex:none;margin:0 auto}
.ha-sus .ha-kutu{width:44px;font-size:26px}
.ha-sus i{width:10px}

/* ---------- oyun: üst çubukta puan ---------- */
.ha-puan{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.ha-puan b{font-size:20px;font-weight:600;color:var(--vurgu);font-variant-numeric:tabular-nums}
.ha-puan b.eksi{color:var(--bad)}

/* ---------- 14 sorunun şeridi ---------- */
.ha-serit{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.ha-serit li{
  display:grid;place-items:center;height:22px;border-radius:5px;
  background:var(--bg-2);border:1.5px solid var(--line);
  font-family:var(--f-mono);font-weight:600;font-size:11.5px;line-height:1;color:var(--muted);
}
.ha-serit li.simdi{border-color:var(--vurgu);color:var(--vurgu)}
.ha-serit li.dogru{background:var(--green);border-color:var(--green);color:#07130E}
.ha-serit li.yanlis{background:var(--bad);border-color:var(--bad);color:#2A0808}
.ha-serit li.sifir{border-color:var(--muted);color:var(--text)}
.ha-serit-sonuc{width:100%;max-width:420px}

/* ---------- soru kutusu ---------- */
.ha-soru{
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 14px;
  min-height:112px;
}
.ha-kunye{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-acik);
}
.ha-kunye b{font-weight:600;color:var(--vurgu);letter-spacing:.04em;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ha-soru p{margin:0;font-size:clamp(17px,4.5vw,21px);line-height:1.32;color:var(--text);text-wrap:pretty}
.ha-soru.dogru{border-color:var(--green)}
.ha-soru.yanlis{border-color:var(--bad)}
body.perdeli .ha-soru p,body.perdeli .ha-kutular{visibility:hidden}   /* duraklatınca soru ve harfler görünmesin */

/* ---------- kutular + düğme satırı; görünmez yazı kutusu ikisinin üstünde ---------- */
.ha-alan{position:relative;display:flex;flex-direction:column;gap:12px}
.ha-giris{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  opacity:0;border:0;padding:0;margin:0;background:transparent;color:transparent;caret-color:transparent;
  font-size:16px;                 /* 16px'ten küçük olursa iPhone yazarken sayfayı yakınlaştırır */
  pointer-events:none;            /* cevap aşamasında açılır (aşağıda) */
}
.ha-alan.cevapta .ha-giris{pointer-events:auto}
.ha-kutular{
  display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,46px));gap:5px;justify-content:center;
  perspective:400px;
}
.ha-kutular .ha-kutu{font-size:clamp(17px,5.6vw,28px)}

.ha-eylem{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:56px;align-items:stretch;position:relative;z-index:2}
.ha-harfal,.ha-cevapla{
  border-radius:var(--r);cursor:pointer;min-height:56px;padding:0 12px;
  font:800 21px var(--f-display);letter-spacing:.04em;text-transform:uppercase;
}
.ha-harfal{background:transparent;color:var(--pp-acik);border:2px solid var(--pp)}
.ha-harfal small{font:600 12px var(--f-mono);letter-spacing:.02em;color:var(--muted);margin-left:4px;text-transform:none}
.ha-cevapla{background:var(--green);color:#07130E;border:none}
@media (hover:hover){
  .ha-harfal:hover{background:var(--pp-deep)}
  .ha-cevapla:hover{background:#7BEDB0}
}
.ha-harfal:active{background:var(--pp-deep)}
.ha-cevapla:active{background:#7BEDB0}
.ha-harfal:disabled{opacity:.4;cursor:default}

/* cevap geri sayımı */
.ha-sayac{display:flex;align-items:center;gap:10px;padding:0 4px}
.ha-sayac b{font-family:var(--f-mono);font-weight:600;font-size:30px;line-height:1;color:var(--vurgu);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.ha-sayac-cubuk{flex:1;height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.ha-sayac-cubuk i{display:block;height:100%;width:100%;background:var(--vurgu);border-radius:4px}
.ha-sayac.az b{color:var(--bad)}
.ha-sayac.az .ha-sayac-cubuk i{background:var(--bad)}

/* soru sonucu (doğru / yanlış) */
.ha-sonuc-satiri{grid-template-columns:1fr;place-items:center}
.ha-sonuc-satiri p{margin:0;font:800 24px var(--f-display);letter-spacing:.03em;text-align:center;color:var(--text)}
.ha-sonuc-satiri p.iyi{color:var(--green)}
.ha-sonuc-satiri p.kotu{color:var(--bad)}
.ha-sonuc-satiri p small{display:block;font:500 13.5px var(--f-body);letter-spacing:0;color:var(--muted);margin-top:2px}

.ha-bildirim{min-height:1.4em;text-align:center;flex:none}
.ha-alan.salla .ha-kutular{animation:pp-salla .35s}

/* ---------- sonuç ---------- */
.ha-skor{color:var(--vurgu)}
.ha-skor.eksi{color:var(--bad)}
.ha-skor small{font-size:.26em;letter-spacing:.06em}

/* cevap anahtarı: solda harf sayısı, sağda kazanılan / giden puan */
.ha-anahtar li{grid-template-columns:34px 1fr auto}
.ha-anahtar .ha-no{
  grid-row:span 3;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:600;font-size:15px;background:var(--bg);border:1.5px solid var(--line);color:var(--muted);
}
.ha-anahtar li.dogru .ha-no{background:var(--green);border-color:var(--green);color:#07130E}
.ha-anahtar li.yanlis .ha-no{background:var(--bad);border-color:var(--bad);color:#2A0808}
.ha-anahtar .kelime{text-transform:uppercase;letter-spacing:.06em}
.ha-anahtar .puan{font-family:var(--f-mono);font-weight:600;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ha-anahtar li.dogru .puan{color:var(--green)}
.ha-anahtar li.yanlis .puan{color:var(--bad)}
.ha-anahtar .soru,.ha-anahtar .senin{grid-column:2 / -1}

/* ---------- telefon ---------- */
@media (max-width:520px){
  .ha-sus .ha-kutu{width:38px;font-size:22px}
  .ha-soru{padding:10px 12px 12px;min-height:100px}
  .ha-harfal,.ha-cevapla{font-size:19px}
  .ha-serit{gap:3px}
  .ha-serit li{height:20px;font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .ha-kutu.yeni{animation:none}
}