/* ============================================================================
   HASATMATİK — feasibility calculator page. Dark "deep water" theme, reusing
   the core tokens from styles.css. Screenshots' light layout, adapted to the
   NASTEC navy + azure/cyan palette so it reads as native to the site.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════════
   YERLEŞİM — tek ekrana sığan kontrol paneli

   Eskiden altı tam genişlik paneli üst üste diziliyordu; sayfa çok uzuyordu.
   Artık: sol sabit sütun (konum · harita · tarife) + sağda sekmeli çalışma
   alanı. Sayfa gövdesi kaydırılmaz — taşan tek yer sekme içeriği.
   --hm-chrome değerini js/hasatmatik.js sabit başlığı ölçüp yazar.
   ═════════════════════════════════════════════════════════════════════════ */
/* ── Arka plan videosu ────────────────────────────────────────────────────────
   Ana sayfadaki #stage ile aynı desen (css/styles.css:89): sabit tam ekran
   katman, üstünde perde, içerik onun üzerinde.

   Perde diğer sayfalardakinden belirgin şekilde güçlü. Sebebi ölçülmüş: bu
   video gündüz çekimi, ortalama parlaklık 136, tepeleri 237 — arkasında ise
   küçük puntolu, yoğun bir tablo arayüzü var. Hafif blur da hareketli ayrıntıyı
   ortalayıp arka planı doku hâline getiriyor, tabloyla yarışmasın diye. */
#hm-stage {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--stage-bg);
}
.hm-stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(3px) saturate(0.9);
  /* blur kenarda saydam bir hâle bırakır; hafifçe büyüterek kadraj dışına atıyoruz */
  scale: 1.06;
}
/* Perde yoğunluğu ölçümle seçildi. Belirleyici kısıt, panel zemini olmayan
   başlık şeridindeki metin: alfa taraması 0,62'de 5,03 · 0,68'de 6,21 ·
   0,72'de 7,18 kontrast verdi. Üst 0,80 (başlık orada), alta doğru 0,70'e
   açılıyor — orayı zaten paneller kaplıyor, video en çok orada görünsün. */
.hm-stage__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 120% at 78% -10%, rgb(var(--c-blue) / 0.18), transparent 58%),
    linear-gradient(180deg,
      rgb(var(--c-panel) / 0.80) 0%,
      rgb(var(--c-panel) / 0.72) 45%,
      rgb(var(--c-scrim) / 0.70) 100%);
}

/* Akışta kalır. position:fixed DENENMEMELİ: styles.css'teki `pageIn` animasyonu
   #content üzerinde kalıcı bir transform bırakıyor, transform taşıyan bir
   ancestor da fixed'i viewport yerine kendine bağlıyor — kabuk 0 yüksekliğe
   çöküyor ve sayfa bomboş kalıyor. */
.hm-shell {
  --hm-chrome: 96px;
  position: relative; z-index: 1;
  height: 100svh; padding-top: var(--hm-chrome);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Kabuk artık videonun üstünde duruyor; #content'in opak zemini onu kapatırdı. */
body[data-page="hasatmatik"] #content { background: transparent; }
/* Bu sayfa bir araç, bir metin sayfası değil: alta eklenen footer tek ekran
   yerleşimini bozup kaydırma geri getiriyordu. Footer bağlantıları diğer tüm
   sayfalarda duruyor. */
body[data-page="hasatmatik"] #site-footer { display: none; }

.hm-topline {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem; padding: 0.2rem var(--gutter) 0.9rem;
}
.hm-topline__title {
  font-family: var(--font-head); font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 800; letter-spacing: -0.02em; margin-top: 0.2rem;
}
.hm-topline__title .grad {
  background: linear-gradient(100deg, var(--cyan-soft), var(--blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hm-topline__unit {
  flex: none; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.9rem; border-radius: 12px;
  border: 1px solid rgb(var(--c-cyan) / 0.24); background: rgb(var(--c-blue) / 0.12);
  color: var(--cyan-soft);
}
.hm-topline__unit b { display: block; font-size: 0.82rem; color: var(--white); }
.hm-topline__unit small { display: block; font-size: 0.68rem; color: var(--muted); }

.hm-app {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 340px 1fr; gap: 1rem;
  padding: 0 var(--gutter) 1rem;
}
.hm-app.is-busy { opacity: 0.75; }

/* ── Sol sütun ────────────────────────────────────────────────────────────── */
.hm-side {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0.85rem; padding-right: 0.35rem;
}
.hm-side__block {
  background: linear-gradient(180deg, rgb(var(--c-panel) / 0.72), rgb(var(--c-panel) / 0.72));
  border: 1px solid var(--glass-border); border-radius: 16px; padding: 0.9rem;
}
.hm-side__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan-soft); margin-bottom: 0.7rem;
}
.hm-side__sub {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); margin: 1rem 0 0.55rem;
}
.hm-layers { display: flex; gap: 0.3rem; }

/* ── Sağ çalışma alanı ────────────────────────────────────────────────────── */
.hm-main { min-height: 0; display: flex; flex-direction: column; gap: 0.8rem; }

.hm-view-rail {
  flex: none; display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.15rem;
}
.hm-view-tab {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted);
  padding: 0.6rem 1rem; border-radius: 12px;
  border: 1px solid var(--glass-border); background: rgb(var(--c-panel) / 0.5);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.hm-view-tab:hover { color: var(--silver); border-color: rgb(var(--c-cyan) / 0.34); }
.hm-view-tab.is-active {
  color: var(--white); background: rgb(var(--c-blue) / 0.22);
  border-color: rgb(var(--c-cyan) / 0.5);
}
.hm-view-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.hm-view-body { flex: 1; min-height: 0; }
.hm-view {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgb(var(--c-panel) / 0.72), rgb(var(--c-panel) / 0.72));
  border: 1px solid var(--glass-border); border-radius: 20px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  box-shadow: 0 24px 60px rgb(var(--c-shadow) / 0.4);
}
.hm-view[hidden] { display: none; }
.hm-view__head { margin-bottom: 1.1rem; }
.hm-view__head--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.hm-view__title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cyan-soft); }
.hm-view__desc { margin-top: 0.25rem; font-size: 0.87rem; color: var(--muted); }
.hm-view__desc b { color: var(--silver); font-weight: 600; }
.hm-gauge-wrap { display: flex; align-items: center; gap: 1rem; }

/* ── Elektrik tarifesi ────────────────────────────────────────────────────── */
.hm-price { display: flex; flex-direction: column; gap: 0.5rem; flex: none; max-width: 230px; }
.hm-price__label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan-soft);
}
.hm-price__field { display: flex; align-items: center; gap: 0.5rem; }
.hm-price__field input {
  flex: 1; min-width: 0; font: inherit; font-weight: 700; color: var(--white);
  padding: 0.55rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--glass-border); background: rgb(var(--c-scrim) / 0.55);
}
.hm-price__field input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.hm-price__field b { flex: none; font-size: 0.78rem; color: var(--muted); }
.hm-price__note { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.5; color: var(--faint); }

/* ── Uyarı rozetleri ve dipnot ────────────────────────────────────────────── */
.hm-note { margin-top: 0.9rem; font-size: 0.75rem; line-height: 1.6; color: var(--faint); }
.hm-note b { color: var(--silver); }
.hm-warn { display: inline-flex; align-items: center; gap: 0.35rem; color: #f0c450; }
.hm-flag {
  display: inline-flex; vertical-align: middle; margin-left: 0.3rem;
  color: #f0c450; cursor: help;
}
.hm-flag--info { color: var(--faint); }
.hm-proj-table tr.is-flagged td { background: rgba(240, 196, 80, 0.05); }

/* ── Search ──────────────────────────────────────────────────────────────── */
/* Arama, sol sütundaki her şeyin üstünde durmalı: açılır panel haritanın,
   konum kartının ve tarife alanının üzerine iniyor. */
.hm-search { position: relative; z-index: 30; }
.hm-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--faint); }
.hm-search__input, .hm-map-search__input {
  width: 100%; padding: 0.95rem 1rem 0.95rem 2.9rem; border-radius: 14px;
  background: rgb(var(--c-scrim) / 0.6); border: 1px solid var(--glass-border);
  color: var(--white); font-family: var(--font); font-size: 0.95rem;
}
.hm-search__input::placeholder { color: var(--faint); opacity: 0.75; }
.hm-search__input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(var(--c-cyan) / 0.14); }
.hm-search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--bg-navy); border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: var(--glass-shadow); overflow: hidden; max-height: 62vh; overflow-y: auto;
}
/* Panel iki iş yapıyor — başlık hangisine baktığınızı söyler. */
.hm-search__title {
  position: sticky; top: 0; z-index: 1; background: var(--bg-navy);
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; color: var(--faint);
}
#hm-search-picks { padding: 0 0.85rem 0.85rem; }
#hm-search-picks .hm-crisis-label { margin-bottom: 0.6rem; }
#hm-search-picks .hm-side__sub { margin-top: 0.9rem; }
.hm-search__item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.75rem 1rem;
  background: none; border: none; border-bottom: 1px solid rgb(var(--c-line) / 0.08);
  color: var(--white); text-align: left; cursor: pointer; font-size: 0.9rem;
}
.hm-search__item span { display: flex; flex-direction: column; line-height: 1.2; }
.hm-search__item small { color: var(--faint); font-size: 0.74rem; margin-top: 2px; }
.hm-search__item i { color: var(--cyan); flex: none; }
.hm-search__item:hover { background: rgb(var(--c-blue) / 0.14); }
.hm-search__empty { padding: 0.9rem 1rem; color: var(--faint); font-size: 0.85rem; }


.hm-crisis-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: #f0857b; margin-bottom: 0.8rem; }
.hm-crisis-label i { color: #e2574c; }

/* ── City cards ──────────────────────────────────────────────────────────── */
.hm-city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.hm-city {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 14px;
  background: rgb(var(--c-panel) / 0.5); border: 1px solid var(--glass-border);
  color: var(--white); cursor: pointer; text-align: left; transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s;
}
.hm-city:hover { transform: translateY(-2px); border-color: rgb(var(--c-cyan) / 0.4); }
.hm-city.is-active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgb(var(--c-cyan) / 0.28); }
.hm-city__text { display: flex; flex-direction: column; line-height: 1.2; }
.hm-city__text b { font-size: 0.95rem; }
.hm-city__text small { color: var(--muted); font-size: 0.76rem; margin-top: 2px; }
.hm-city__badge { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.hm-city--crisis { background: rgba(226, 87, 76, 0.09); border-color: rgba(226, 87, 76, 0.32); }
.hm-city--crisis:hover { border-color: rgba(226, 87, 76, 0.6); }
.hm-city--crisis .hm-city__badge { background: #e2574c; color: #fff; }
.hm-city--crisis.is-active { box-shadow: 0 0 0 2px rgba(226, 87, 76, 0.4); border-color: #e2574c; }

/* ── Current location + tip ──────────────────────────────────────────────── */
.hm-current {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 1.4rem; padding: 1rem 1.2rem;
  border-radius: 14px; background: rgb(var(--c-scrim) / 0.45); border: 1px solid var(--glass-border);
}
.hm-current > i { color: var(--cyan); flex: none; }
.hm-current__label { font-size: 0.78rem; color: var(--faint); }
.hm-current__name { font-size: 1rem; font-weight: 600; color: var(--white); }
.hm-current__coords { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.hm-geo-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem;
  border-radius: 10px; background: rgb(var(--c-blue) / 0.16); border: 1px solid rgb(var(--c-cyan) / 0.28);
  color: var(--cyan-soft); font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.hm-geo-btn:hover { background: rgb(var(--c-blue) / 0.28); }
.hm-geo-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Map ─────────────────────────────────────────────────────────────────── */
.hm-map-search { display: flex; gap: 0.5rem; align-items: center; }
.hm-map-search__input { width: 220px; padding-left: 1rem; }
.hm-map-search__btn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hm-map-search__btn:hover { background: var(--blue-soft); }

/* Katman düğmeleri sol sütunda ikon boyutunda — etiket title'a taşındı. */
.hm-layer {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: rgb(var(--c-panel) / 0.5); border: 1px solid var(--glass-border);
  color: var(--faint); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hm-layer:hover { color: var(--silver); }
.hm-layer.is-active { background: rgb(var(--c-blue) / 0.22); border-color: var(--cyan); color: var(--cyan); }
.hm-layer:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hm-map-data { margin-top: 0.6rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: rgb(var(--c-scrim) / 0.5); border: 1px solid var(--glass-border); }
.hm-map-data__row { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 0.3rem 0; color: var(--muted); }
.hm-map-data__row b { color: var(--cyan-soft); font-family: var(--font-head); }
.hm-map-suggested { display: flex; flex-direction: column; gap: 0.4rem; }
.hm-sugg { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: rgb(var(--c-panel) / 0.45); border: 1px solid var(--glass-border); color: var(--silver); font-size: 0.82rem; cursor: pointer; text-align: left; }
.hm-sugg i { color: var(--cyan); flex: none; }
.hm-sugg:hover { background: rgb(var(--c-blue) / 0.16); color: var(--white); }

/* z-index:0 burada bilinçli — konumlandırılmış bir öğeye sayısal z-index vermek
   YIĞIN BAĞLAMI oluşturur. Leaflet kendi katmanlarını 400–1000 arasında diziyor
   (.leaflet-top 1000); bağlam olmadan bu değerler dışarı taşıp arama panelinin
   üstüne çıkıyordu. Bağlam onları tuvalin içine hapsediyor. */
.hm-map-canvas {
  position: relative; z-index: 0;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border);
  height: 240px; margin-top: 0.6rem;
}
#hm-leaflet { width: 100%; height: 100%; background: var(--bg-deep); }
.hm-map-info {
  position: absolute; top: 8px; right: 8px; z-index: 500; width: 176px; padding: 0.6rem 0.7rem; font-size: 0.72rem;
  background: rgb(var(--c-panel) / 0.92); border: 1px solid rgb(var(--c-cyan) / 0.3); border-radius: 14px; backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgb(var(--c-shadow) / 0.5);
}
.hm-map-info__name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--white); font-size: 0.92rem; }
.hm-map-info__name i { color: var(--cyan); }
.hm-map-info__coords { font-size: 0.74rem; color: var(--muted); margin: 0.3rem 0; }
.hm-map-info__layer { font-size: 0.78rem; color: var(--cyan-soft); }
.hm-map-info__hint { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--faint); margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--silver-line); }
.hm-pin { background: none; border: none; filter: drop-shadow(0 4px 8px rgb(var(--c-shadow) / 0.6)); }
/* Leaflet chrome → dark */
.leaflet-container { font-family: var(--font); }
.leaflet-bar a { background: var(--bg-navy); color: var(--white); border-color: var(--glass-border); }
.leaflet-bar a:hover { background: var(--bg-black); }
.leaflet-control-attribution { background: rgb(var(--c-panel) / 0.8) !important; color: var(--faint) !important; }
.leaflet-control-attribution a { color: var(--cyan) !important; }

/* ── Tabs + conditions ───────────────────────────────────────────────────── */
.hm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 1.4rem; }
.hm-tab {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 0.5rem; border-radius: 12px;
  background: rgb(var(--c-panel) / 0.5); border: 1px solid var(--glass-border); color: var(--muted); font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.hm-tab i { flex: none; }
.hm-tab:hover { color: var(--white); border-color: rgb(var(--c-cyan) / 0.35); }
/* Dolgu --blue-deep: --blue üstünde beyaz yazı 3,9:1'de kalıyordu, bu tonda 6:1. */
.hm-tab.is-active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; box-shadow: 0 8px 22px rgb(var(--c-blue) / 0.32); }

.hm-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.hm-metric { padding: 1.1rem 1.2rem; border-radius: 14px; background: rgb(var(--c-scrim) / 0.42); border: 1px solid var(--glass-border); }
.hm-metric__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.hm-metric__label { font-size: 0.86rem; color: var(--silver); }
.hm-metric__val { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--white); }
.hm-metric__sub { margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.hm-badge { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--bc); color: var(--bc); }
.hm-badge--good, .hm-badge--ok { background: rgba(61, 220, 151, 0.12); }
.hm-badge--warn { background: rgba(245, 180, 69, 0.12); }
.hm-badge--info { background: rgb(var(--c-blue) / 0.12); }
.hm-note { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
.hm-note i { color: var(--cyan); flex: none; margin-top: 2px; }
.hm-loading { padding: 2rem; text-align: center; color: var(--faint); font-size: 0.9rem; }

.hm-bar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.hm-baritem__row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--silver); margin-bottom: 0.4rem; }
.hm-baritem__row b { font-family: var(--font-head); }
.hm-baritem__desc { margin-top: 0.4rem; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.hm-bar { height: 7px; border-radius: 20px; background: rgb(var(--c-line) / 0.14); overflow: hidden; }
.hm-bar span { display: block; height: 100%; border-radius: 20px; transition: width 0.7s var(--ease); }
.hm-bar--lg { height: 9px; margin: 0.7rem 0; }
.hm-bar--sm { height: 6px; }

/* ── Feasibility ─────────────────────────────────────────────────────────── */
.hm-gauge { position: relative; width: 112px; height: 112px; flex: none; }
.hm-gauge svg { transform: rotate(-90deg); }
.hm-gauge__track { fill: none; stroke: rgb(var(--c-line) / 0.14); stroke-width: 9; }
.hm-gauge__arc { fill: none; stroke: var(--cyan); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease), stroke 0.4s; }
.hm-gauge__center { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; color: var(--white); }
.hm-gauge__meta { display: flex; flex-direction: column; justify-content: center; }
.hm-gauge__label { font-size: 0.82rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.hm-gauge__reco { font-size: 0.95rem; font-weight: 600; color: var(--cyan-soft); max-width: 260px; line-height: 1.4; margin-top: 0.3rem; }

.hm-feas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hm-feas-card { padding: 1.1rem 1.2rem; border-radius: 16px; background: rgb(var(--c-scrim) / 0.42); border: 1px solid var(--glass-border); }
.hm-feas-card__head { display: flex; align-items: center; gap: 0.8rem; }
.hm-feas-card__icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--fc) 16%, transparent); color: var(--fc); border: 1px solid color-mix(in srgb, var(--fc) 34%, transparent); }
.hm-feas-card__meta { display: flex; flex-direction: column; line-height: 1.2; }
.hm-feas-card__meta b { font-size: 0.98rem; color: var(--white); }
.hm-feas-card__meta small { font-size: 0.74rem; color: var(--faint); margin-top: 2px; }
.hm-feas-card__score { margin-left: auto; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
.hm-feas-card__score small { font-size: 0.8rem; color: var(--faint); font-weight: 500; }
.hm-feas-card__toggle { display: flex; align-items: center; gap: 0.4rem; background: none; border: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0; }
.hm-feas-card__toggle i { transition: transform 0.3s var(--ease); }
.hm-feas-card.is-open .hm-feas-card__toggle i { transform: rotate(180deg); }
.hm-feas-card__details { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), margin 0.4s; display: flex; flex-direction: column; gap: 0.7rem; }
.hm-feas-card.is-open .hm-feas-card__details { max-height: 400px; margin-top: 0.7rem; }
.hm-factor__row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--silver); margin-bottom: 0.35rem; }
.hm-factor__row b { color: var(--white); font-family: var(--font-head); font-weight: 600; }

/* ── Proposal + AI ───────────────────────────────────────────────────────── */
/* ── AI başlık şeridi ─────────────────────────────────────────────────────────
   Eskiden altı onay kutusuydu ve hepsi zaten işaretliydi — seçim yapılmıyordu.
   Artık dönen içeriğin göstergesi: hangi analizin ekranda olduğunu söyler ve
   tıklanarak atlanabilir. */
.hm-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.hm-topic {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  padding: 0.45rem 0.8rem; border-radius: 999px;
  background: rgb(var(--c-panel) / 0.5); border: 1px solid var(--glass-border);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.hm-topic i { color: var(--faint); transition: color 0.25s var(--ease); }
.hm-topic:hover { color: var(--silver); border-color: rgb(var(--c-cyan) / 0.34); }
.hm-topic.is-active { color: var(--white); background: rgb(var(--c-blue) / 0.22); border-color: rgb(var(--c-cyan) / 0.5); }
.hm-topic.is-active i { color: var(--cyan); }
.hm-topic:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Sıradaki başlığa kalan süre — metin habersizce değişmesin diye görünür. */
.hm-ai__progress { height: 2px; border-radius: 2px; background: rgb(var(--c-line) / 0.12); overflow: hidden; margin-bottom: 1rem; }
.hm-ai__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.hm-ai__progress:not(.is-running):not(.is-waiting) span { width: 0; animation: none !important; }
/* Geri sayım: sıradaki başlığa kalan süre */
@keyframes hmTick { from { width: 0; } to { width: 100%; } }
/* Bekleme: yanıt hâlâ akıyor, başlık ilerlemiyor — geri sayım göstermek yalan olurdu */
.hm-ai__progress.is-waiting span { width: 34%; }
@keyframes hmWait {
  0%   { margin-left: -34%; }
  100% { margin-left: 100%; }
}

.hm-ai__sub { font-size: 0.76rem; color: var(--faint); margin-top: 0.15rem; }
.hm-ai__toggle {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  cursor: pointer; color: var(--cyan-soft);
  background: rgb(var(--c-panel) / 0.6); border: 1px solid var(--glass-border);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.hm-ai__toggle:hover { border-color: rgb(var(--c-cyan) / 0.5); color: var(--white); }
.hm-ai__toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.hm-ai { padding: 1.3rem; border-radius: 16px; background: linear-gradient(135deg, rgb(var(--c-blue) / 0.1), rgb(var(--c-cyan) / 0.05)); border: 1px solid rgb(var(--c-cyan) / 0.22); }
.hm-ai__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.hm-ai__title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--cyan-soft); }
/* Başlık her 5 sn'de değişiyor; metin de onunla birlikte yerini almalı ki
   geçiş ani bir sıçrama gibi durmasın. */
.hm-ai__body { font-size: 0.92rem; line-height: 1.7; color: var(--silver); min-height: 8.5rem; }
.hm-ai__body > :first-child { animation: hmFade 0.45s var(--ease-io) both; }
@keyframes hmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hm-ai__body > :first-child { animation: none; }
  .hm-ai__progress span { animation: none !important; }
}
.hm-ai__body p { margin-bottom: 0.75rem; }
.hm-ai__body b { color: var(--white); }
.hm-ai__body ul { margin: 0.5rem 0 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.hm-ai__body li { list-style: disc; }
.hm-ai__pill { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; padding: 0.35rem 0.8rem; border-radius: 20px; font-size: 0.76rem; background: rgb(var(--c-panel) / 0.6); border: 1px solid var(--glass-border); color: var(--muted); }
.hm-ai__pill--ok { color: var(--cyan-soft); border-color: rgb(var(--c-cyan) / 0.4); background: rgb(var(--c-cyan) / 0.12); }
.hm-ai__pill--off { color: var(--faint); }
.hm-ai__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: hmPulse 1.1s infinite; }
@keyframes hmPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.hm-ai__actions { display: flex; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.hm-ai__actions .btn { font-size: 0.85rem; }

/* ── Projection ──────────────────────────────────────────────────────────── */
.hm-proj-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.hm-sumbox { padding: 1rem 1.2rem; border-radius: 14px; background: rgb(var(--c-scrim) / 0.42); border: 1px solid var(--glass-border); }
.hm-sumbox__label { font-size: 0.76rem; color: var(--faint); }
.hm-sumbox__val { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--cyan-soft); margin: 0.3rem 0; }
.hm-sumbox__sub { font-size: 0.74rem; color: var(--muted); }

.hm-proj-tablewrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--glass-border); }
.hm-proj-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.hm-proj-table thead th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--faint); font-weight: 600; padding: 0.9rem 1rem; background: rgb(var(--c-scrim) / 0.5); border-bottom: 1px solid var(--glass-border); }
.hm-proj-table tbody td { padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--silver); border-bottom: 1px solid rgb(var(--c-line) / 0.07); }
.hm-proj-table tbody tr:last-child td { border-bottom: none; }
.hm-proj-table tbody tr:hover td { background: rgb(var(--c-blue) / 0.06); }
.hm-proj-month { font-weight: 600; color: var(--white) !important; }
.hm-proj-cell { display: flex; align-items: center; gap: 0.7rem; }
.hm-proj-cell .hm-bar { width: 90px; flex: none; }
.hm-proj-cell b { font-family: var(--font-head); }

/* ── RTL (Arabic) ────────────────────────────────────────────────────────── */
html[dir="rtl"] .hm-search__icon { left: auto; right: 1rem; }
html[dir="rtl"] .hm-search__input { padding: 0.95rem 2.9rem 0.95rem 1rem; }
html[dir="rtl"] .hm-search__item, html[dir="rtl"] .hm-baritem__desc, html[dir="rtl"] .hm-metric__sub { text-align: right; }
html[dir="rtl"] .hm-geo-btn { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hm-map-info { right: auto; left: 8px; }
html[dir="rtl"] .hm-side { padding-right: 0; padding-left: 0.35rem; }
html[dir="rtl"] .hm-ai__body ul { margin: 0.5rem 1.1rem 0.9rem 0; }
html[dir="rtl"] .hm-proj-table thead th, html[dir="rtl"] .hm-proj-table tbody td { text-align: right; }
html[dir="rtl"] .hm-flag { margin-left: 0; margin-right: 0.3rem; }

/* ── Responsive ──────────────────────────────────────────────────────────────
   Dar ekranda tek görünüme sığdırmak okunabilirliği bozuyor: ızgara tek sütuna
   iner, sabit yükseklik bırakılır ve normal dikey kaydırma geri gelir. */
@media (max-width: 1024px) {
  .hm-shell { height: auto; overflow: visible; }
  .hm-app { grid-template-columns: 1fr; padding-bottom: 3rem; }
  /* Izgara öğeleri varsayılan min-width:auto ile min-content genişliğinin
     altına inemez. İçerideki harita/tablo/giriş alanları 550px min-content
     ürettiği için tek sütuna düşen bu iki öğe kabı 375px'ten 550px'e
     genişletiyordu — sayfa yatayda taşıyordu. min-width:0 daralmayı serbest
     bırakır; içerik gerçekten sığmıyorsa aşağıdaki kendi kaydırma kapları
     devreye girer. */
  .hm-side, .hm-main { min-width: 0; }
  .hm-side { overflow: visible; max-height: none; }
  .hm-view-body { min-height: 0; }
  .hm-view { height: auto; max-height: none; overflow: visible; }
  .hm-topline { flex-wrap: wrap; align-items: flex-start; }
}
@media (max-width: 900px) {
  .hm-tabs { grid-template-columns: 1fr 1fr; }
  .hm-feas-grid, .hm-proj-summary { grid-template-columns: 1fr 1fr; }
  .hm-map-search__input { width: 150px; }
}
@media (max-width: 560px) {
  .hm-city-grid, .hm-bar-grid, .hm-feas-grid, .hm-proj-summary, .hm-tabs { grid-template-columns: 1fr; }

  /* Harita bilgi paneli köşede 176px'lik bir kutuydu; 301px genişliğindeki
     mobil haritada genişliğin %58'ini, yüksekliğin %62'sini kaplayıp haritayı
     kullanılamaz hâle getiriyordu. Akışa alınamaz (kap 240px ve kırpıyor),
     bu yüzden alt şeride çevrildi: tam genişlik, tek satıra yakın, ipucu
     satırı gizli — dokunmatikte "tıklayın" yönergesi zaten gereksiz. */
  .hm-map-canvas { height: 300px; }
  .hm-map-info {
    top: auto; bottom: 8px; left: 8px; right: 8px; width: auto;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
    padding: 0.5rem 0.7rem;
  }
  .hm-map-info__coords { margin: 0; }
  .hm-map-info__hint { display: none; }
  .hm-view__head--split { gap: 0.9rem; }
  .hm-gauge__reco { max-width: none; }
  .hm-current { flex-wrap: wrap; }
  .hm-geo-btn { margin-left: 0; }
}