/* Erfa Atelier — "Konum" (harita.php) sayfa stilleri.
 * cizim.css üzerine gelir; hr- önekli sınıflar bu sayfaya özeldir.
 */

/* ------------------------------------------------------------ harita ----- */
.hr-map-card{position:relative;border-radius:20px;overflow:hidden;background:#1c1813;box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.hr-map{width:100%;aspect-ratio:1;min-height:300px;background:#14110d;z-index:1}

/* Çevrimdışı etkileşimli örnek harita */
.hr-offmap{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.hr-offmap:active{cursor:grabbing}
.hr-offzoom{position:absolute;right:10px;top:10px;z-index:650;display:flex;flex-direction:column;gap:6px}
.hr-offzoom button{width:38px;height:38px;border-radius:12px;border:none;background:rgba(20,16,10,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 1px rgba(255,255,255,.15);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.hr-offzoom button:hover{background:rgba(45,38,28,.85)}
.hr-map-card.is-offline-map .hr-map-note{content:"";font-size:11px}
.hr-map-card.is-offline-map .hr-map-note::after{content:" · örnek bölge (temsilî)"}

/* Kaplama = kolyeye girecek 1,2 km'lik alan. Boyut sabit yüzde değil, JS'in
   yazdığı --hr-crop (metreden gelen piksel karşılığı); zoom değişince kaplama
   da büyür/küçülür, yoksa gösterilen kadraj gerçekte kesilenle örtüşmez.
   --hr-crop yokken (harita henüz hazır değil) eski %78'e düşer. */
[data-hr-overlay]{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* Sekil kaplamasi kaldirildi (bkz. harita.js syncOverlay). Bu iki kural
   artik hicbir elemani secmiyor; kapsayici duruyor cunku syncReticle
   --hr-crop degiskenini oraya yaziyor ve ileride ince bir kirpma
   halkasi istenirse yeri hazir. */

.hr-map-note{position:absolute;left:10px;bottom:8px;z-index:600;font-size:11px;color:rgba(255,255,255,.55);background:rgba(10,8,5,.5);padding:3px 8px;border-radius:8px;pointer-events:none}
/* Sabit hedef işareti: haritanın tam ortası = seçilen nokta (Google Maps mantığı).
   Kullanıcı haritayı sürükler, merkez hep bu hedefin altındaki noktayı seçer. */
.hr-reticle{position:absolute;left:50%;top:50%;z-index:550;transform:translate(-50%,-50%);pointer-events:none;width:46px;height:46px}
.hr-reticle::before,.hr-reticle::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.hr-reticle::before{width:46px;height:46px;border:2px solid rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.18)}
.hr-reticle::after{width:7px;height:7px;background:#d9c08f;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 6px rgba(217,192,143,.8)}
.hr-scale{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:600;font-size:12px;font-weight:400;color:#fff;background:rgba(10,8,5,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 14px;border-radius:9999px;pointer-events:none;white-space:nowrap}

/* ===== LEAFLET KOYU TEMA — MARKA KOPUKLUGUNUN KAPATILMASI ================
   Onceki deger `grayscale(.25) brightness(.92)` idi: pratikte hicbir sey
   yapmiyordu. Olculdu (gercek piksel, .qa/ss/uiux/_dogrula/konum-normal.png
   ve tools/qa-kontrast.mjs): karo zemini rgb(222,220,216), deniz
   rgb(164,192,201). Yani sitenin en koyu, en sicak sayfasinin ortasinda
   bembeyaz bir dikdortgen duruyordu — beyaz sokaklar, mavi deniz, yesil
   park, PEMBE D400 yolu, KIRMIZI hastane pini. Tek aksan kuralini tek
   basina cignemekle kalmiyor, sayfanin geri kalanini ucuzlatiyordu.

   Yontem: invert + hue-rotate(180deg) klasik koyu-OSM cevrimi. Invert
   parlakligi ters cevirir (beyaz kagit -> koyu zemin), hue-rotate rengi
   geri dogrultur (invert sonrasi mavi deniz turuncuya donerdi).
   sepia(.22) + saturate(.6) kalan renkleri espresso tarafina ceker;
   contrast(.9) invert'in urettigi sert kenarlari yumusatir.
   Sonuc: karo zemini ~rgb(38,33,28), yani --ea-bg-1 (#14110d) ile ayni
   ailede; ustundeki beyaz reticle ve sampanya nokta artik gorunur.
   NOT: filtre yalnizca KAROLARA uygulanir — isaretler, kaplama ve
   kontroller kendi (dogru) renklerinde kalir. */
.hr-map .leaflet-tile{
  filter:invert(1) hue-rotate(180deg) saturate(.6) sepia(.22)
         brightness(.92) contrast(.9);
}
/* Karo aralarindaki 1px'lik acik cizgiler invert sonrasi parlak kaliyordu:
   konteynere koyu zemin verilir, bosluklar kaybolur. */
.hr-map .leaflet-container{background:#14110d}
/* Telif etiketi Leaflet'in varsayilan beyaz kutusuyla geliyordu; siteye
   ait tek bir hap dili var, o da .hr-map-note. */
.hr-map .leaflet-control-attribution{
  background:rgba(10,8,5,.55);color:rgba(255,255,255,.62);
  font-family:'Barlow',sans-serif;font-size:11px;
  padding:3px 8px;border-radius:8px;margin:0 8px 8px 0}
.hr-map .leaflet-control-attribution a{color:rgba(255,255,255,.8)}
/* LEAFLET'IN KENDI ZOOM DUGMELERI 30x30px geliyor (kutuphane varsayilani).
   Haritada konum secmek bu aracin ILK adimi; 30px parmakla zor. Kutuphane
   CSS'i bizden sonra yuklenmedigi icin normal ozgullukle ezilebiliyor. */
.hr-map .leaflet-control-zoom a{background:#2b2620;color:#fff;border-color:rgba(255,255,255,.15);
  width:44px;height:44px;line-height:44px;font-size:20px}
.hr-map .leaflet-control-zoom a:hover{background:#3a332b}

/* ------------------------------------------------------------- arama ----- */
[data-hr-search-wrap]{position:relative}
.hr-search-row{display:flex;gap:8px}
.hr-search-input{flex:1;min-width:0;padding:14px 18px;border-radius:9999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font-family:'Barlow',sans-serif;font-size:14px}
.hr-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:800;border-radius:16px;overflow:hidden;background:rgba(32,27,22,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.1)}
.hr-result{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.85);font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;line-height:1.45;padding:12px 16px;cursor:pointer}
.hr-result:last-child{border-bottom:none}
.hr-result:hover,.hr-result:focus-visible{background:rgba(255,255,255,.07);color:#fff;outline:none}
.hr-result.is-note{cursor:default;color:rgba(255,255,255,.5)}
.hr-result.is-note:hover{background:none}

/* ------------------------------------------------------- yükleniyor ------ */
[data-hr-loading]{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(15,12,8,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:rgba(255,255,255,.85);font-size:14px;font-weight:300}
[data-hr-loading] i{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:#fff;animation:hrSpin 1s linear infinite}
@keyframes hrSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){[data-hr-loading] i{animation:none}}

/* ------------------------------------------------------------ hero ------- */
/* Yaylanmali (overshoot) egri kaldirildi. Geri sekme,
   BIR KEZ dusen bir raptiye icin anlamli olurdu; burada SONSUZ suzulme
   animasyonu var — her donguda geri sekiyor ve titrek/ucuz duruyordu.
   Sitenin kanonik egrisi kullaniliyor (bkz. styles.css --ea-ease). */
.hr-hero-pin{position:absolute;left:50%;top:26%;transform:translateX(-50%);animation:hrPin 2.6s var(--ea-ease,cubic-bezier(.22,1,.36,1)) infinite}
@keyframes hrPin{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.hr-hero-pin{animation:none}}

/* ------------------------------------------- sokak verisi kurtarma kartı --- */
.hr-fetch-err{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,10,8,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hr-fetch-err-card{max-width:340px;text-align:center;border-radius:22px;padding:26px 24px;background:rgba(255,255,255,.05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 24px 60px -30px rgba(0,0,0,.8)}
.hr-fetch-err-t{font-size:16px;font-weight:500;color:#fff;margin:0 0 8px}
.hr-fetch-err-d{font-size:12px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62);margin:0 0 16px}
.hr-fetch-err-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}