/* Neredeyim? (neredeyim.html). Harita çerçevesi, yakınlaştırma düğmeleri ve taraf etiketleri harita.css'ten (.hr-cerceve, .hr-tuval,
   .hr-yak, .hr-taraf); burada oyun düzeni, ipucu paneli, kesit ve işaretler. Zemin rengi düz: mini haritada binalar saydam,
   kesitte ve büyük haritada aynı renkte görünsünler. */
.nr-yukleniyor { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50vh; color: var(--krem-3); }
.nr { display: grid; gap: 14px; padding: 22px 0 40px; }
.nr-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.nr-ust-sag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#nr-zorluk[hidden] { display: none; }
.nr-ust .cip svg { width: 14px; height: 14px; }
.nr-oyun { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ------------------------------------------------ panel */
.nr-panel { position: sticky; top: 84px; display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: linear-gradient(180deg, var(--kart-2), var(--kart)); border: 1px solid var(--cizgi); }
.nr-p-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nr-p-bas b { font: 400 24px/1 var(--f-baslik); text-transform: uppercase; }
.nr-p-bas b small { font: 600 14px/1 var(--f-arayuz); color: var(--krem-3); }
.nr-p-bas span { font: 700 14px/1 var(--f-arayuz); color: var(--krem-2); font-variant-numeric: tabular-nums; }
.nr-turlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.nr-turlar li { display: grid; justify-items: center; gap: 4px; padding: 7px 2px 6px; border-radius: 8px; background: rgba(247, 233, 213, .04); box-shadow: inset 0 0 0 1px var(--cizgi); }
.nr-turlar li span { font: 700 13px/1 var(--f-arayuz); color: var(--krem-3); font-variant-numeric: tabular-nums; }
.nr-turlar li small { font: 600 9.5px/1 var(--f-arayuz); letter-spacing: .08em; text-transform: uppercase; color: var(--krem-3); }
.nr-turlar li.simdi { box-shadow: inset 0 0 0 2px var(--turuncu); }
.nr-turlar li.simdi span { color: var(--krem); }
.nr-turlar li:is(.iyi, .orta, .zayif, .kotu) span { color: var(--murekkep); }
.nr-turlar li:is(.iyi, .orta, .zayif, .kotu) small { color: rgba(17, 14, 11, .7); }
.nr-turlar li.iyi { background: var(--yesil); box-shadow: none; }
.nr-turlar li.orta { background: var(--sari, #f2c94c); box-shadow: none; }
.nr-turlar li.zayif { background: var(--kehribar); box-shadow: none; }
.nr-turlar li.kotu { background: #ff8a80; box-shadow: none; }

/* parça: kesit kutusu */
.nr-parca { display: grid; gap: 8px; margin: 0; }
.nr-parca-kutu { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #4a4136; box-shadow: inset 0 0 0 1px var(--cizgi-2), 0 14px 30px rgba(0, 0, 0, .45); }
.nr-parca-don { position: absolute; inset: 0; }
.nr-parca-ic { position: absolute; }
.nr-parca-ic img, .nr-parca-ic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nr-parca-kutu::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, transparent 60%, rgba(0, 0, 0, .35)); }
.nr-parca-hedef { position: absolute; left: 50%; top: 50%; z-index: 1; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--turuncu); box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 0 18px var(--turuncu); }
html.hareket .nr-parca-hedef::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--turuncu); animation: hrNabiz 1.6s ease-out infinite; }
.nr-parca figcaption { display: flex; align-items: flex-start; gap: 6px; font: 500 12px/1.35 var(--f-arayuz); color: var(--krem-3); }
.nr-parca figcaption svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.nr-parca figcaption b { color: var(--krem-2); }
html.hareket .nr-parca-kutu { animation: hafifBelir .4s ease-out; }

/* yer adı */
.nr-yer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 150px; padding: 18px 16px; overflow: hidden; border-radius: 12px;
  background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--yr) 26%, transparent), transparent 60%), rgba(12, 10, 8, .55); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.nr-yer > div { position: relative; z-index: 1; display: grid; gap: 6px; padding-right: 96px; }
.nr-yer small { font: 700 11px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; color: var(--krem-3); }
.nr-yer b { font: 400 26px/1.02 var(--f-baslik); text-transform: uppercase; color: var(--krem); }
.nr-yer span { font: 500 13px/1.35 var(--f-arayuz); color: var(--krem-2); }
.nr-yer-npc { position: absolute; right: -6px; bottom: -4px; width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.nr-yer-ikon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--yr); opacity: .8; }
.nr-yer-ikon svg { width: 64px; height: 64px; }
html.hareket .nr-yer { animation: hafifBelir .4s ease-out; }

.nr-yonerge { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 13.5px/1.4 var(--f-arayuz); color: var(--krem-2); }
.nr-yonerge svg { flex: none; width: 17px; height: 17px; color: var(--turuncu-2); }
.nr-tur-sonuc { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(247, 233, 213, .04); box-shadow: inset 3px 0 0 var(--c, var(--krem-3)); }
.nr-tur-sonuc b { font: 700 22px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; color: var(--c, var(--krem)); }
.nr-tur-sonuc span { font: 600 13px/1 var(--f-arayuz); color: var(--krem-2); }
.nr-tur-sonuc.iyi { --c: var(--yesil); } .nr-tur-sonuc.orta { --c: var(--sari, #f2c94c); } .nr-tur-sonuc.zayif { --c: var(--kehribar); } .nr-tur-sonuc.kotu { --c: #ff8a80; }
html.hareket .nr-tur-sonuc { animation: belir .45s cubic-bezier(.2, .8, .2, 1.3) backwards; }

/* sonuç */
.nr-sonuc { display: grid; justify-items: center; gap: 6px; padding: 8px 0 2px; text-align: center; }
.nr-sonuc small { font: 700 11px/1 var(--f-arayuz); letter-spacing: .14em; text-transform: uppercase; color: var(--krem-3); }
.nr-sonuc b { font: 400 52px/1 var(--f-baslik); color: var(--krem); font-variant-numeric: tabular-nums; }
.nr-sonuc b em { font: 600 16px/1 var(--f-arayuz); font-style: normal; color: var(--krem-3); }
.nr-sonuc p { margin: 0; font-size: 14px; color: var(--krem-2); }
.nr-istat { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.nr-istat > div { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 8px; background: rgba(247, 233, 213, .035); }
.nr-istat b { font: 700 18px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; }
.nr-istat small { font: 600 10.5px/1 var(--f-arayuz); color: var(--krem-3); }
.nr-son-dug { display: grid; gap: 8px; }
.nr-son-dug .dug { justify-content: center; }
.nr-yarin { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font: 500 12.5px/1 var(--f-arayuz); color: var(--krem-3); }
.nr-yarin svg { width: 14px; height: 14px; }

/* ------------------------------------------------ harita */
.nr-harita { display: grid; gap: 10px; min-width: 0; }
.nr-cerceve { max-width: 760px; background: #4a4136; cursor: crosshair; }
.nr-cerceve.kilitli { cursor: default; }
.nr-cerceve.yakin { cursor: grab; }
.nr-cerceve .hr-zemin { opacity: 1; }
.nr-koridor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nr-koridor polyline { fill: none; stroke: var(--lr); stroke-width: calc(6px / var(--z, 1)); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.nr-parca-ic .nr-koridor.ince polyline { stroke-width: 3px; opacity: .6; }
.nr-cizim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.nr-cizim line { stroke: #fff; stroke-width: calc(3px / var(--z, 1)); stroke-dasharray: calc(10px / var(--z, 1)) calc(7px / var(--z, 1)); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); }
.nr-cizim rect.alan { fill: rgba(255, 255, 255, .08); stroke: #fff; stroke-width: calc(2px / var(--z, 1)); stroke-dasharray: calc(6px / var(--z, 1)) calc(5px / var(--z, 1)); }
.nr-cizim circle.oburu { r: calc(7px / var(--z, 1)); fill: rgba(151, 218, 121, .35); stroke: var(--yesil); stroke-width: calc(2px / var(--z, 1)); }
.nr-cizim circle.cevap { r: calc(9px / var(--z, 1)); stroke: #111; stroke-width: calc(2px / var(--z, 1)); }
.nr-cizim circle.cevap.iyi { fill: var(--yesil); } .nr-cizim circle.cevap.orta { fill: var(--sari, #f2c94c); } .nr-cizim circle.cevap.zayif { fill: var(--kehribar); } .nr-cizim circle.cevap.kotu { fill: #ff8a80; }
.nr-cizim circle.tahmin { r: calc(6px / var(--z, 1)); fill: #fff; stroke: #111; stroke-width: calc(2px / var(--z, 1)); }
/* iğneler (ekranda sabit boy) */
.nr-pin { position: absolute; z-index: 4; width: 30px; height: 30px; margin: -30px 0 0 -15px; transform-origin: 50% 100%; scale: calc(1 / var(--z, 1)); pointer-events: none;
  background: var(--pc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); }
.nr-pin.tahmin { --pc: var(--turuncu); }
.nr-pin.gercek { --pc: var(--yesil); }
html.hareket .nr-pin:not([hidden]) { animation: nrDus .35s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes nrDus { from { translate: 0 -14px; opacity: 0; } }
.nr-mesafe { position: absolute; z-index: 5; transform: translate(-50%, -140%); transform-origin: 0 0; scale: calc(1 / var(--z, 1)); padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--murekkep); font: 700 12.5px/1 var(--f-arayuz); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.nr-eylem { display: flex; justify-content: center; min-height: 46px; }
.nr-eylem .dug { min-width: 240px; justify-content: center; }
.nr-eylem .dug[disabled] { opacity: .55; cursor: default; }
.nr .bilgi-notu kbd { padding: 1px 5px; border-radius: 4px; background: rgba(247, 233, 213, .1); font: 600 11px/1.3 var(--f-arayuz); }

@media (max-width: 980px) {
  .nr-oyun { grid-template-columns: minmax(0, 1fr); }
  .nr-panel { position: static; }
  .nr-parca-kutu { max-width: 300px; width: 100%; justify-self: center; }
  .nr-parca { justify-items: center; }
}
@media (max-width: 560px) {
  .nr { padding-top: 14px; }
  .nr-panel { padding: 12px; gap: 10px; }
  .nr-parca-kutu { max-width: 230px; }
  .nr-yer { min-height: 118px; padding: 14px; }
  .nr-yer b { font-size: 22px; }
  .nr-yer-npc { width: 108px; height: 108px; }
  .nr-yer > div { padding-right: 70px; }
  .nr-sonuc b { font-size: 44px; }
  .nr-eylem .dug { width: 100%; min-width: 0; }
}