/* =============================================================
   harita.css — SADECE "BURASI NERESİ?" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, bitiş) css/oyun.css'te.
   Harita renkleri css/tema.css'te (--hr-…).
   Harita çizimi ve yakınlaştırma: js/oyun-harita.js → haritaKur
   ============================================================= */

/* ---------- menü ---------- */
.hr-vitrin{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--hr-deniz);aspect-ratio:1000 / 470;max-height:300px;width:100%;
}
.hr-vitrin svg{display:block;width:100%;height:100%}

.hr-gunluk{margin-top:14px;border-color:var(--green-deep);background:linear-gradient(160deg,var(--bg-2),var(--bg) 140%)}
.hr-mod-ust{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hr-yenilenme{font-family:var(--f-mono);font-size:12px !important;letter-spacing:.02em}
.hr-yenilenme b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.hr-gunluk-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.hr-gunluk-alt .best{border:none;padding:0;margin:0;flex:1;min-width:160px}
.hr-gunluk-alt .best .kare{letter-spacing:1px}

/* seri rozeti (Harf'iyat'takiyle aynı dil) */
.hr-seri-rozet{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;
  color:var(--kivilcim);border:1px solid color-mix(in srgb,var(--kivilcim) 45%,transparent);
  border-radius:999px;padding:3px 10px 3px 7px;
}
.hr-seri-rozet[hidden]{display:none}
.hr-seri-rozet b{font-weight:600;font-variant-numeric:tabular-nums}
.hr-seri-rozet .alev-svg{width:15px;height:15px;fill:currentColor}
.hr-seri-rozet.sonuk{color:var(--muted);border-color:var(--line)}

.hr-ayarlar{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hr-ayarlar .lbl{min-width:70px}
.hr-ayarlar .chip em{font-style:normal;opacity:.6}
.hr-ayar-not{font-size:12.5px;color:var(--muted)}
@media (max-width:480px){
  .hr-ayarlar .chips .lbl{flex-basis:100%}
  .hr-ayarlar .chip{padding-inline:12px}
  .hr-ayar-not{flex-basis:100%}
}
.hr-kucuk{font-size:12.5px;opacity:.8}

.hr-kurallar{
  margin-top:26px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
}
.hr-kurallar h2{font-family:var(--f-display);font-weight:800;font-size:22px;margin:0 0 6px;letter-spacing:.02em}
.hr-kurallar ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.hr-kurallar li{margin:5px 0}
.hr-kurallar b{color:var(--text);font-weight:600}
.hr-kurallar b.k1{color:var(--green)}
.hr-kurallar b.k2{color:var(--lime)}
.hr-kurallar b.k3{color:var(--gold)}

/* ---------- oyun ekranı ---------- */
body.sahnede .sitehead,
body.sahnede .gamehead,
body.sahnede .sitefoot{display:none}
body.sahnede .wrap{padding-block:10px}
body.sahnede .screen{margin-top:0}

.hr-hud .stat[hidden]{display:none}
.hr-canlar{color:var(--bad) !important;letter-spacing:.08em}
.hr-canlar .bos{color:var(--line)}
.hr-sure-stat b{color:var(--muted) !important;margin-left:0 !important}

.hr-oyun{display:grid;gap:10px;margin-top:10px}
@media (min-width:900px){
  .hr-oyun{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:16px}
}

.hr-soru{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.hr-soru h2{
  font-family:var(--f-display);font-weight:800;font-size:clamp(22px,5.4vw,30px);margin:0;line-height:1.05;
  letter-spacing:.01em;text-wrap:balance;
}
.hr-soru h2 em{font-style:normal;color:var(--hr-hedef)}
.hr-haklar{display:flex;gap:5px;flex:none}
.hr-haklar[hidden]{display:none}
.hr-haklar i{width:11px;height:11px;border-radius:50%;background:var(--green);display:block;transition:background .2s}
.hr-haklar i.gitti{background:var(--line)}

/* harita kutusu */
.hr-harita{
  position:relative;margin-top:8px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--hr-deniz);aspect-ratio:2 / 1;width:100%;
  touch-action:none;               /* sürükleme ve iki parmakla yakınlaştırmayı sayfa değil harita yakalasın */
  -webkit-user-select:none;user-select:none;
}
.hr-harita svg{display:block;width:100%;height:100%;cursor:grab}
.hr-harita.suruklen svg{cursor:grabbing}
@media (max-width:720px){ .hr-harita{aspect-ratio:16 / 9} }

/* yakınlaştırma düğmeleri: sağ altta, yan yana (orası Irak/Suriye; Türkiye'nin üstünü kapatmasın) */
.hr-zoom{position:absolute;bottom:6px;right:6px;display:flex;gap:4px;z-index:2}
.hr-zoom button{
  width:30px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font:600 17px/1 var(--f-body);cursor:pointer;padding:0;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
}
.hr-zoom button:active{border-color:var(--green);color:var(--green)}
@media (hover:hover){ .hr-zoom button:hover{border-color:var(--muted)} }

/* seri balonu: üstte ortada (Karadeniz'in üstü) */
.hr-seri-balon{
  position:absolute;left:50%;top:6px;translate:-50% 0;z-index:2;display:none;align-items:center;gap:4px;
  font:600 13px var(--f-mono);color:var(--kivilcim);border-radius:999px;padding:3px 10px 3px 7px;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 85%,transparent);
  border:1px solid color-mix(in srgb,var(--kivilcim) 45%,transparent);
}
.hr-seri-balon.acik{display:inline-flex}
.hr-seri-balon.parla{animation:seriParla .6s ease-out}
.hr-seri-balon .alev-svg{width:14px;height:14px;fill:currentColor}
@keyframes seriParla{ 0%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---------- SVG haritanın parçaları ---------- */
.hr-svg .deniz{fill:var(--hr-deniz)}
.hr-svg .komsu-kara{fill:var(--hr-komsu)}
.hr-svg .dis-cizgi{fill:none;stroke:var(--hr-dis);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.hr-svg .gol{fill:var(--hr-deniz);stroke:var(--hr-sinir);stroke-width:.5;vector-effect:non-scaling-stroke;pointer-events:none}
.hr-svg .deniz-adi{
  fill:var(--hr-deniz-yazi);font-family:var(--f-mono);font-weight:500;letter-spacing:.3em;
  text-anchor:middle;pointer-events:none;text-transform:uppercase;
}
.hr-svg .il{
  fill:var(--hr-kara);stroke:var(--hr-sinir);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;transition:fill .25s,opacity .25s;
}
.hr-svg .il.soluk{fill:var(--hr-komsu);pointer-events:none}
.hr-svg .il.bolgede{fill:var(--hr-kara-2)}
.hr-svg .il.hedef{fill:var(--hr-hedef);animation:hedefNabiz 1.6s ease-in-out infinite}
.hr-svg .il.secili{fill:var(--hr-hedef)}
.hr-svg .il.k1{fill:var(--green)}
.hr-svg .il.k2{fill:var(--lime)}
.hr-svg .il.k3{fill:var(--gold)}
.hr-svg .il.k0{fill:var(--bad)}
.hr-svg .il.sicak{fill:var(--hr-sicak)}
.hr-svg .il.ilik{fill:var(--hr-ilik)}
.hr-svg .il.soguk{fill:var(--hr-soguk)}
.hr-svg .il.vitrin-yan{fill:var(--green-deep)}
.hr-svg .il.vitrin-yan.parlak{fill:var(--green)}
@keyframes hedefNabiz{ 0%,100%{opacity:1} 50%{opacity:.62} }
/* fareli cihazda üstüne gelinen il hafifçe aydınlansın (dokunulabilen modlarda) */
@media (hover:hover){
  .hr-harita.dokunulur .il:not(.soluk):not(.k1):not(.k2):not(.k3):not(.k0):not(.secili):not(.hedef):not(.sicak):not(.ilik):not(.soguk):hover{fill:var(--hr-kara-ust)}
}

/* küçük illerin çevresindeki halka */
.hr-svg .halka{fill:none;stroke:var(--hr-hedef);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.hr-svg .halka.nabiz{animation:halkaNabiz 1.6s ease-in-out infinite}
.hr-svg .halka.k0{stroke:var(--bad)}
@keyframes halkaNabiz{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* il üstündeki yazılar (tahmin, doldurulan il adı) */
.hr-svg .etiket{
  font-family:var(--f-body);font-weight:600;text-anchor:middle;dominant-baseline:central;
  fill:var(--text);stroke:var(--bg);paint-order:stroke;stroke-linejoin:round;pointer-events:none;
}
.hr-svg .etiket.koyu{fill:#07130E;stroke:none}
.hr-svg .etiket.tahmin{font-family:var(--f-mono);font-weight:500}

/* ---------- cevap alanı ---------- */
.hr-sag{display:flex;flex-direction:column;gap:8px;min-width:0}
.hr-geri{margin:0;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);min-height:1.35em;line-height:1.35}
.hr-geri .sicak{color:var(--hr-sicak)}
.hr-geri .ilik{color:var(--hr-ilik)}
.hr-geri .soguk{color:var(--hr-soguk)}
.hr-geri .hata{color:var(--bad)}
.hr-geri .ipucu{color:var(--text)}
.hr-geri b{font-weight:600}

.hr-yaz[hidden],.hr-secenekler[hidden],.hr-dokun[hidden],.hr-sonuc[hidden],.hr-pas[hidden]{display:none}
.hr-girdi-satir{display:flex;gap:8px}
.hr-girdi-satir input[type="text"]{font:600 19px var(--f-body);letter-spacing:.02em;padding:11px 12px}
.hr-girdi-satir .go{padding:0 18px}

/* öneriler */
.hr-oneriler{display:flex;gap:6px;min-height:34px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hr-oneriler::-webkit-scrollbar{display:none}
@media (min-width:900px){ .hr-oneriler{flex-wrap:wrap} }
.hr-oneri{
  font:600 14px/1 var(--f-body);color:var(--text);background:var(--bg-2);border:1px solid var(--line);
  border-radius:999px;padding:9px 13px;cursor:pointer;white-space:nowrap;flex:none;
}
.hr-oneri:active{border-color:var(--green);color:var(--green)}
@media (hover:hover){ .hr-oneri:hover{border-color:var(--green)} }
.hr-oneri.denendi{opacity:.4;text-decoration:line-through}

/* ekran klavyesi — sadece dokunmatik ekranda */
.hr-klavye{display:none}
@media (pointer:coarse){
  .hr-klavye{display:flex;flex-direction:column;gap:6px;-webkit-user-select:none;user-select:none}
}
.hr-klavye .sira{display:flex;gap:4px;justify-content:center}
.hr-klavye button{
  flex:1 1 0;min-width:0;max-width:44px;height:42px;border-radius:6px;border:none;
  background:var(--line);color:var(--text);font:600 16px/1 var(--f-body);cursor:pointer;padding:0;
}
.hr-klavye button:active{background:var(--green-deep)}
.hr-klavye button.genis{max-width:64px;flex-grow:1.5;font-size:18px}

/* 3 seçenek */
.hr-secenekler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:900px){ .hr-secenekler{grid-template-columns:1fr} }
.hr-secenek{
  font:600 16px/1.15 var(--f-body);color:var(--text);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 8px;min-height:60px;cursor:pointer;overflow-wrap:anywhere;
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
}
.hr-secenek kbd{font:500 11px var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 5px}
@media (hover:none){ .hr-secenek kbd{display:none} }
@media (hover:hover){ .hr-secenek:hover:not(:disabled){border-color:var(--green);color:var(--green)} }
.hr-secenek:active:not(:disabled){border-color:var(--green)}
.hr-secenek:disabled{cursor:default}
.hr-secenek.dogru{border-color:var(--green);color:var(--green)}
.hr-secenek.yanlis{border-color:var(--bad);color:var(--bad);text-decoration:line-through}

.hr-dokun{display:flex;gap:8px;flex-wrap:wrap}
.hr-dokun .btn{padding:11px 16px;font-size:14px}
.hr-dokun .btn[hidden]{display:none}
.hr-dokun-ipucu{margin:0;font-size:13px;color:var(--muted);flex-basis:100%}

/* tur sonucu */
.hr-sonuc{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.hr-sonuc-ust{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.hr-sonuc-isaret{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:19px;
  background:var(--green);color:#07130E;
}
.hr-sonuc-isaret svg{display:block}
.hr-sonuc.k2 .hr-sonuc-isaret{background:var(--lime)}
.hr-sonuc.k3 .hr-sonuc-isaret{background:var(--gold)}
.hr-sonuc.k0 .hr-sonuc-isaret{background:var(--bad)}
.hr-sonuc strong{
  display:block;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;letter-spacing:.02em;text-transform:uppercase;
}
.hr-sonuc-ust div > span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.hr-sonuc-puan{font-family:var(--f-mono);font-size:22px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.hr-sonuc.k0 .hr-sonuc-puan{color:var(--muted)}
.hr-sonuc .btn{width:100%}

.hr-pas{margin-left:auto;flex:none;white-space:nowrap}

/* ---------- bitiş ---------- */
.hr-over{padding:28px 18px 26px}
.hr-bitis-ust{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--green);margin:0 0 6px;text-transform:uppercase}
.hr-bitis-harita{
  margin:18px auto 0;max-width:620px;aspect-ratio:1000 / 450;border-radius:var(--r);overflow:hidden;
  background:var(--hr-deniz);border:1px solid var(--line);
}
.hr-bitis-harita svg{display:block;width:100%;height:100%}
.hr-lejant{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:10px;font-size:12px;color:var(--muted)}
.hr-lejant span{display:inline-flex;align-items:center;gap:5px}
.hr-lejant i{width:10px;height:10px;border-radius:2px;display:block}
.hr-lejant i.k1{background:var(--green)}
.hr-lejant i.k2{background:var(--lime)}
.hr-lejant i.k3{background:var(--gold)}
.hr-lejant i.k0{background:var(--bad)}
.hr-over .track{margin-top:12px}
.hr-over .one{max-width:420px;margin:16px auto 0;text-align:left}
.hr-over .one:empty{display:none}
.hr-over .one .rrow b{font-size:15px;text-align:right}
.hr-over .one .rrow span{white-space:nowrap;margin-right:12px}
.hr-bitis-seri{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--kivilcim);font-family:var(--f-mono);font-size:13px;margin:12px 0 0}
.hr-bitis-seri[hidden]{display:none}
.hr-bitis-seri .alev-svg{width:16px;height:16px;fill:currentColor}
.hr-bitis-seri span{color:var(--muted)}

/* ---------- telefon: oyun ekranı 375×553'e sığsın ---------- */
@media (max-width:720px){
  .hud.hr-hud{padding:6px 10px}
  .hr-hud .stat{margin-right:10px;font-size:11px;letter-spacing:.03em}
  .hr-hud .stat b{font-size:15px;margin-left:4px}
  .hr-hud .linkbtn{font-size:12px;padding:2px}
  .hr-oyun{gap:6px;margin-top:6px}
  .hr-harita{margin-top:6px}
  .hr-sag{gap:6px}
  .hr-sonuc{padding:10px 12px;gap:8px}
  .hr-sonuc strong{font-size:23px}
  .hr-over{padding:22px 14px 22px}
}
@media (max-width:360px){
  .hr-klavye button{height:38px;font-size:15px}
  .hr-klavye .sira{gap:3px}
}