/* =============================================================
   arsa.css — SADECE "DÖNÜMÜ KAÇA?" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, mod kartları, bitiş) css/oyun.css'te.
   Krokinin kendi renkleri js/arsa-kroki.js → KROKI_RENK (SVG'nin içinde).
   ============================================================= */

:root{
  --ar:#D8C27A;              /* oyunun rengi: buğday */
  --ar-zemin:#1B2419;        /* kroki zemini (KROKI_RENK.zemin ile aynı) */
  --ar-dogru-zemin:rgba(91,228,155,.12);
  --ar-yanlis-zemin:rgba(255,107,107,.12);
}

.lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* ---------- menü ---------- */
.ar-vitrin{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ar-zemin);line-height:0;max-height:240px;
}
.ar-vitrin svg{display:block;width:100%;height:clamp(130px, 24svh, 240px)}

.ar-gunluk{margin-top:14px;border-color:#5E6B3A;background:linear-gradient(160deg,var(--bg-2),var(--bg) 140%)}
.ar-mod-ust{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ar-yenilenme{font-family:var(--f-mono);font-size:12px !important;letter-spacing:.02em}
.ar-yenilenme b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ar-gunluk-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.ar-gunluk-alt .best{border:none;padding:0;margin:0;flex:1;min-width:160px}
.ar-gunluk-alt .best .kare{letter-spacing:1px}
.ar-seri-rozet{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;
  color:var(--kivilcim);border:1px solid rgba(255,178,63,.45);
  border-radius:999px;padding:3px 10px 3px 7px;
}
.ar-seri-rozet[hidden]{display:none}
.ar-seri-rozet b{font-weight:600;font-variant-numeric:tabular-nums}
.ar-seri-rozet .alev-svg{width:14px;height:14px;fill:currentColor}

.ar-ayarlar{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.ar-ayarlar .lbl{min-width:52px}

/* ---------- oyun kartı ---------- */
.ar-kart{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  margin-top:10px;overflow:hidden;
}
.ar-kroki{position:relative;background:var(--ar-zemin);line-height:0}
/* Telefonda kroki ekranın ~üçte birini alsın (künye ve fiyat girişi de sığsın); yanlar kroki zeminiyle dolar */
.ar-kroki > svg{display:block;width:100%;height:clamp(170px, 31svh, 300px)}
.ar-mini{
  position:absolute;right:8px;bottom:8px;width:86px;line-height:0;
  border-radius:8px;overflow:hidden;border:1px solid #3A4630;background:#1C3350;
}
.ar-mini svg{width:100%;height:auto;display:block}

.ar-bilgi{padding:10px 14px 4px}
.ar-ust{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ar-tur{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ar);font-weight:600;flex:none;
}
.ar-yer{font-size:13.5px;color:var(--text);font-weight:500}
.ar-kunye{list-style:none;margin:6px 0 0;padding:0;font-size:14px;line-height:1.3;
  display:grid;grid-template-columns:1fr;column-gap:18px}
.ar-kunye li{display:flex;gap:8px;padding:3px 0;border-bottom:1px dashed var(--line-soft)}
.ar-kunye li:last-child{border-bottom:none}
.ar-kunye li span:first-child{width:20px;flex:none;text-align:center}
@media (min-width:640px){ .ar-kunye{grid-template-columns:1fr 1fr} }

/* ---------- tahmin: değer + kaydırıcı + yazı kutusu ---------- */
.ar-tahmin{padding:6px 14px 14px;display:flex;flex-direction:column;gap:8px}
.ar-tahmin[hidden]{display:none}
.ar-deger{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:30px}
.ar-deger b{font-family:var(--f-mono);font-weight:600;font-size:clamp(21px,5.6vw,26px);color:var(--text);font-variant-numeric:tabular-nums}
.ar-deger b.soluk{color:var(--muted);font-family:var(--f-body);font-weight:500;font-size:17px}
.ar-deger span{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ar-kaydir{display:flex;align-items:center;gap:10px}
.ar-kaydir input[type="range"]{flex:1;min-width:0;height:36px;accent-color:var(--vurgu);cursor:pointer;margin:0}
.ar-adim{
  width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  color:var(--text);font:600 22px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;
}
@media (hover:hover){ .ar-adim:hover{border-color:var(--muted)} }
.ar-adim:active{border-color:var(--vurgu);color:var(--vurgu)}
.ar-tahmin .guessrow input[type="text"]{font-size:16px;padding:10px 12px;letter-spacing:.02em}
.ar-tahmin .go{padding:0 26px;font-size:16px}

/* ---------- sonuç ---------- */
.ar-sonuc{padding:10px 14px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ar-sonuc[hidden]{display:none}
.ar-sonuc-ust{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ar-fiyat{font-family:var(--f-mono);font-weight:600;font-size:clamp(26px,7vw,34px);color:var(--green);line-height:1.1;font-variant-numeric:tabular-nums}
.ar-m2{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.ar-puan-kutu{text-align:right;flex:none}
.ar-puan-kutu b{display:block;font-family:var(--f-display);font-weight:800;font-size:38px;line-height:1;color:var(--vurgu)}
.ar-puan-kutu span{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.ar-karsilastir{margin:0;font-size:14px;color:var(--muted)}
.ar-karsilastir b{color:var(--text);font-family:var(--f-mono);font-weight:600}
.ar-mesaj{font-weight:600}
.ar-mesaj.s3{color:var(--green)} .ar-mesaj.s2{color:var(--lime)} .ar-mesaj.s1{color:var(--gold)} .ar-mesaj.s0{color:var(--bad)}
.ar-emlakci{margin:0;font-style:italic;color:var(--muted);font-size:13.5px}
.ar-dokum summary{cursor:pointer;font-size:13.5px;color:var(--text);padding:2px 0}
.ar-dokum table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.ar-dokum td{padding:3px 0;color:var(--muted);border-bottom:1px dashed var(--line-soft)}
.ar-dokum td:last-child{text-align:right;color:var(--text);font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.ar-dokum td.yukari{color:var(--green)} .ar-dokum td.asagi{color:var(--bad)}
.ar-dokum tr.toplam td{color:var(--text);font-weight:600;border-bottom:none;padding-top:6px}
.ar-ileri{align-self:stretch;margin-top:2px}

#s-oyun .track{margin-top:10px}

/* ---------- bitiş özeti ---------- */
.ar-ozet{list-style:none;margin:18px auto 0;padding:0;max-width:460px;text-align:left;display:flex;flex-direction:column;gap:6px}
.ar-ozet li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.ar-ozet-kare{width:12px;height:12px;border-radius:3px;flex:none;background:var(--line-soft)}
.ar-ozet-kare.s3{background:var(--green)} .ar-ozet-kare.s2{background:var(--lime)} .ar-ozet-kare.s1{background:var(--gold)} .ar-ozet-kare.s0{background:var(--bad)}
.ar-ozet-ad{flex:1;font-size:13.5px;min-width:0}
.ar-ozet-sayi{font-family:var(--f-mono);font-size:13.5px;text-align:right;white-space:nowrap}
.ar-ozet-sayi small{display:block;color:var(--muted);font-size:11.5px}
.over .msg b{color:var(--ar)}

/* ---------- Hangisi Pahalı? ---------- */
.ar-duello-soru{font-family:var(--f-display);font-weight:800;font-size:24px;text-align:center;margin:12px 0 8px;letter-spacing:.01em}
.ar-duello{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ar-aday{
  display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:var(--bg-2);border:2px solid var(--line);border-radius:var(--r);color:var(--text);font:inherit;
  transition:border-color .15s, transform .1s;
}
@media (hover:hover){ .ar-aday:hover:not(:disabled){border-color:var(--vurgu)} }
.ar-aday:active:not(:disabled){transform:scale(.985);border-color:var(--vurgu)}
.ar-aday:disabled{cursor:default}
.ar-aday.dogru{border-color:var(--green);background:var(--ar-dogru-zemin)}
.ar-aday.yanlis{border-color:var(--bad);background:var(--ar-yanlis-zemin)}
.ar-aday-kroki{display:block;line-height:0;background:var(--ar-zemin)}
.ar-aday-kroki svg{display:block;width:100%;height:auto}
.ar-aday-bilgi{display:flex;flex-direction:column;gap:3px;padding:8px 10px 10px}
.ar-aday-yer{font-weight:700;font-size:16px}
.ar-aday-yer small{font-weight:400;color:var(--muted);font-size:12px}
.ar-aday-tur{font-family:var(--f-mono);font-size:12px;color:var(--ar)}
.ar-aday-kunye{font-size:12.5px;color:var(--muted);line-height:1.3;display:flex;flex-direction:column;gap:2px}
.ar-aday-kunye i{font-style:normal}
.nw{white-space:nowrap}
.ar-aday-fiyat{font-family:var(--f-mono);font-weight:600;font-size:17px;color:var(--text);min-height:0}
.ar-aday-fiyat:empty{display:none}
.ar-aday-fiyat small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.ar-aday.dogru .ar-aday-fiyat{color:var(--green)}
.ar-duello-sonuc{font-family:var(--f-display);font-weight:800;font-size:21px;text-align:center;margin:10px 0 0;min-height:1.2em;letter-spacing:.01em}
.ar-duello-sonuc.ok{color:var(--green)} .ar-duello-sonuc.no{color:var(--bad)}
#s-duello .ar-ileri{display:block;width:100%;max-width:420px;margin:10px auto 0}
#s-duello .ar-ileri[hidden]{display:none}

/* telefonda düello: kroki kısa, künye tek satır */
@media (max-width:520px){
  .ar-duello{gap:8px}
  .ar-aday-bilgi{padding:6px 8px 8px}
  .ar-aday-yer{font-size:15px}
  .ar-aday-kunye{font-size:11.5px}
  .ar-duello-soru{font-size:21px;margin:8px 0 6px}
}

/* Geniş ekranda oyun alanı ortada ve dar; kroki kendi oranında (basık görünmesin) */
#s-oyun, #s-duello{max-width:640px;margin-inline:auto}
@media (min-width:700px) and (min-height:721px){ .ar-kroki > svg{height:auto} }
#s-duello{max-width:760px}

/* Kısa telefon ekranı (Safari çubukları açıkken ~553 px): kroki, künye ve fiyat girişi kaydırmadan sığsın */
@media (max-height:720px){
  .ar-kroki > svg{height:clamp(140px, 27svh, 260px)}
  .ar-kart.kalabalik .ar-kroki > svg{height:clamp(118px, 23svh, 260px)}
  .ar-mini{width:72px}
  .ar-bilgi{padding:7px 12px 2px}
  .ar-kunye{font-size:13px;margin-top:3px}
  .ar-kunye li{padding:1.5px 0}
  .ar-tahmin{padding:4px 12px 10px;gap:6px}
  .ar-deger{min-height:26px}
  .ar-deger b{font-size:21px}
  .ar-adim{width:36px;height:36px;font-size:20px}
  .ar-kaydir input[type="range"]{height:30px}
  .ar-tahmin .guessrow input[type="text"]{padding:8px 10px}
  #s-oyun .track{margin-top:6px}
  .ar-sonuc{padding:8px 12px 10px;gap:6px}
  .ar-fiyat{font-size:26px}
  .ar-puan-kutu b{font-size:32px}
}

/* oynarken site başlığı ve alt bilgi gizlenir (oyun-arsa.js "sahnede" sınıfını ekler) */
body.sahnede .sitehead,
body.sahnede .gamehead,
body.sahnede .sitefoot{display:none}
body.sahnede .wrap{padding-block:10px}
body.sahnede .screen{margin-top:0}

/* dokunmatik cihazda klavye ipucu gereksiz */
@media (hover:none){ .klavye-ipucu{display:none} }