/* Liman Residences — hazır render üzərində SVG qatları.
   3D yoxdur: zoom CSS transform ilə, qüllə və mərtəbələr SVG çoxbucaqlıları ilə.
   Blok siyahısı, şahmat cədvəli və nişanlar sales.css-dən gəlir. */

/* ---------- render səhnəsi ---------- */
.stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage);
  padding: 16px;
  min-height: 0;
}

/* 16:9 saxlanılır ki, SVG koordinatları render pikselləri ilə üst-üstə düşsün */
.stage {
  position: relative;
  width: min(100%, calc((100dvh - 120px) * 16 / 9));
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--stage);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* zoom edilən qat: şəkil + SVG + nişanlar birlikdə sürüşür */
.world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform .85s cubic-bezier(.2, .7, .15, 1);
  will-change: transform;
}
.world img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  max-width: none;
}
.world svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- qüllə konturları ----------

   "2.5D" effekti: sakit vəziyyətdə yalnız zəif kontur var — render
   açıq qalır, 14 bina qutu ilə örtülmür. Kursor üstünə gələndə kütlə
   işıqlanır, kənarı ağ xətt tutur və ALTINA kölgə düşür: düz ləkə deyil,
   şəkildən qalxan həcm kimi oxunur.

   Qutunun ÖZÜ yerindən tərpənmir — tərpənsəydi kursor kənarda qalıb
   hover sönüb-yanardı. Qalxma hissini kölgə və parlaqlıq verir. */
/* Sakit vəziyyətdə kütlələrin ÜSTÜNDƏ heç nə yoxdur: nə kontur, nə ləkə.
   Render olduğu kimi görünür, binaların yerini yalnız nişanlar (hərflər)
   bildirir. Əvvəl zəif kontur vardı və 14 bina şəklin üstünə çəkilmiş
   qutular kimi oxunurdu. */
.tower {
  fill: var(--accent);
  fill-opacity: 0;
  stroke: #fff;
  stroke-opacity: 0;
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill-opacity .18s, stroke-opacity .18s, filter .18s;
}
.tower:hover,
.tower.hl {
  fill-opacity: .34;
  stroke-opacity: 1;
  stroke-width: 1.8;
  filter: drop-shadow(0 9px 12px rgba(4, 20, 30, .5)) brightness(1.06);
}

/* Dam üzü: fasaddan AÇIQ tonda — iki üz fərqli işıqlananda kütlə həcm
   kimi oxunur. Hover həm gövdədən, həm damdan gəlir (ikisi də eyni
   `data-tower` daşıyır), ona görə qardaş seçicisi ilə birlikdə yanırlar. */
.tower-cap {
  fill: #eaf6ff;
  fill-opacity: 0;
  stroke: #fff;
  stroke-opacity: 0;
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill-opacity .18s, stroke-opacity .18s;
}
.tower-cap:hover,
.tower-cap.hl {
  fill-opacity: .62;
  stroke-opacity: .9;
}
/* SVG-də "əvvəlki qardaş" seçicisi yoxdur və dam gövdədən ƏVVƏL çəkilir,
   ona görə ikisini birlikdə yandırmaq JS-in işidir (bax markTower). */

/* ---------- binanın 2D modeli ----------
   Vektor çertyoj: hər miqyasda kəskin, mərtəbələr isə barmaqla tutula
   bilən böyüklükdədir (renderdə bir mərtəbə 3 piksel idi). */
.stage-elev {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%),
    var(--stage);
}
.elev { width: 100%; height: 100% }

.elev-ground { stroke: rgba(255, 255, 255, .22); stroke-width: .25 }
.elev-podium { fill: #7f8a90; fill-opacity: .55 }
.elev-side { fill: #5e6a72; fill-opacity: .75 }
.elev-roof { fill: #9aa7ae; fill-opacity: .9 }

.elev-row { cursor: pointer; outline: none }
/* Mərtəbə zolağı şüşənin ALTINDADIR: rəng statusu, üstündəki mülyon və
   əks isə fasadı şüşə kimi saxlayır. */
.elev-row polygon {
  fill: var(--sold);
  fill-opacity: .55;
  stroke: rgba(10, 24, 32, .45);
  stroke-width: .05;
  transition: fill-opacity .12s, filter .12s;
}
.elev-row.is-many polygon { fill: var(--ok);   fill-opacity: .72 }
.elev-row.is-few  polygon { fill: var(--hold); fill-opacity: .78 }
.elev-row.is-none polygon { fill: var(--sold); fill-opacity: .62 }
.elev-row.is-dim  polygon { fill-opacity: .16 }
.elev-row:hover polygon,
.elev-row:focus-visible polygon,
.elev-row.hl polygon {
  fill-opacity: 1;
  filter: brightness(1.16);
}
.elev-row.is-sel polygon {
  fill: #fff;
  fill-opacity: .92;
  stroke: var(--accent);
  stroke-width: .22;
}

/* şüşə gövdə, mülyonlar və əks */
.elev-glass {
  fill: url(#elevGlass);
  stroke: rgba(255, 255, 255, .35);
  stroke-width: .25;
}
.elev-mullions line {
  stroke: rgba(255, 255, 255, .22);
  stroke-width: .18;
}
.elev-wing {
  fill: #7f93a0;
  fill-opacity: .9;
  stroke: rgba(255,255,255,.25);
  stroke-width: .18;
}
.elev-reflect {
  fill: #fff;
  fill-opacity: .07;
  pointer-events: none;
}

.elev-no, .elev-m, .elev-sub, .elev-name {
  fill: var(--stage-ink);
  font-family: var(--f-mono);
  pointer-events: none;
}
.elev-no { font-size: 2.4px; opacity: .72 }
.elev-m { font-size: 2.1px; opacity: .45 }
.elev-sub { font-size: 3px; opacity: .62 }
.elev-name {
  font-family: var(--f-display);
  font-size: 6.4px;
  font-weight: 700;
  opacity: 1;
}

/* Bulvar hovuzu: planda uzun yumru dördbucaqlı. */
.sp-pool {
  fill: rgba(63, 178, 195, .35);
  stroke: rgba(160, 210, 220, .6);
  stroke-width: 2;
}

/* Çarx kafe: planda iki dairə — çarxın konturu və dibindəki kafe. */
.sp-wheel {
  fill: rgba(63, 178, 195, .1);
  stroke: rgba(160, 200, 210, .7);
  stroke-width: 2;
  stroke-dasharray: 10 7;
}
.sp-wheel-c { fill: rgba(220, 230, 234, .55); stroke: none }

/* Blokun ayaq izi (sol sütundaki plan): doldurulmuş kontur. */
.elev-plan {
  fill: rgba(190, 214, 224, .3);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: .5;
}

/* leqenda nümunələri — zolaqlarla eyni rənglər */
.elev-key { stroke: rgba(10, 24, 32, .5); stroke-width: .06 }
.elev-key.is-many { fill: var(--ok);   fill-opacity: .8 }
.elev-key.is-few  { fill: var(--hold); fill-opacity: .85 }
.elev-key.is-none { fill: var(--sold); fill-opacity: .68 }

/* ---------- 3D model qatı ----------
   Render ilə eyni çərçivədə yaşayır: `.stage` onsuz da 16:9-dur və
   kənarları kəsir, ona görə kanvas sadəcə onu doldurur. */
.stage3d {
  position: absolute;
  inset: 0;
  background: var(--stage);
}
.stage3d canvas { display: block; width: 100%; height: 100% }

/* Kamera baxışları — səhnənin sağ aşağı küncündə, şaquli siyahı.
   Satış görüşündə bir kadr bəs etmir: master-plan, nişanə qüllələr,
   villa məhəlləsi və marina ayrıca lazım olur. */
.viewcam {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(8, 20, 28, .55);
  backdrop-filter: blur(6px);
}
.viewcam button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.viewcam button:hover { color: #fff; background: rgba(255,255,255,.12) }
.viewcam button.on { background: #fff; color: #0F2431 }

/* Görünüş seçicisi — səhnənin sağ üst küncündə. */
.viewsw {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(8, 20, 28, .55);
  backdrop-filter: blur(6px);
}
.viewsw button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.viewsw button:hover { color: #fff }
.viewsw button.on { background: #fff; color: #0F2431 }

/* ---------- blok nişanları ----------

   14 nişanın hamısı tam yazı ilə dursaydı render yazı ilə örtülərdi, ona
   görə sakit vəziyyətdə yalnız hərf görünür (A, B, C…). Kursor binaya və ya
   siyahıdakı sətrə gələndə həmin nişan açılır. */
.pin.dot .k {
  background: rgba(10, 24, 32, .72);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  backdrop-filter: blur(4px);
}
.pin.dot .full { display: none }

.pin.dot.on .k,
.pin.dot:hover .k { display: none }
.pin.dot.on .full,
.pin.dot:hover .full {
  display: block;
  animation: pinIn .16s ease-out;
}
/* Seçilmiş blokun hərfi vurğulanır — renderdə kliklənən yeganə element
   odur, ona görə hansının seçildiyi şəkildən oxunmalıdır. */
.pin.dot.sel .k {
  background: var(--accent);
  color: #0F2431;
}
@keyframes pinIn {
  from { opacity: 0; transform: translateY(3px) }
  to { opacity: 1; transform: none }
}

/* ---------- infrastruktur kütlələri ----------
   Satılmır, amma izah edilir: marina klubu, körpülər, villalar. */
.spot {
  fill: #fff;
  fill-opacity: 0;
  stroke: #fff;
  stroke-opacity: 0;
  stroke-width: 1.2;
  cursor: help;
  transition: fill-opacity .18s, stroke-opacity .18s;
}
.spot:hover {
  fill-opacity: .18;
  stroke-opacity: .8;
}
/* seçilmiş qüllədən başqaları solğunlaşır */
.tower.ghost {
  fill-opacity: .05;
  stroke-opacity: .35;
}
.tower.ghost:hover {
  fill-opacity: .2;
}

/* ---------- mərtəbə zolaqları ---------- */
.band {
  stroke: #fff;
  stroke-opacity: .55;
  stroke-width: .6;
  cursor: pointer;
  transition: fill-opacity .15s;
}
.band.hl {
  fill: var(--accent) !important;
  fill-opacity: .7 !important;
  stroke-opacity: 1;
  stroke-width: 1.2;
}
.band.sel {
  fill: #fff !important;
  fill-opacity: .9 !important;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-opacity: 1;
}

/* ---------- mərtəbə planı (çertyoj) ----------

   Memarlıq vərəqinin qaydaları: divar qalın, arakəsmə nazik, qapı boşluğu
   kəsilmiş, şüşə fasad ikiqat xətt, nüvə ştrixli. Rəng yalnız satış
   statusunu daşıyır və ÇOX solğundur — çertyoj ağ qalmalıdır. */
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.plan svg {
  display: block;
  width: 100%;
  height: auto;
}

.plan .plate {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: .22;
  stroke-opacity: .75;
}

/* dəhliz və nüvə */
.plan .corridor { fill: var(--muted); fill-opacity: .1 }
.plan .core { fill: var(--muted); fill-opacity: .2 }
.plan .lift {
  fill: none;
  stroke: var(--muted);
  stroke-width: .1;
}
.plan .stair { fill: var(--surface); stroke: var(--muted); stroke-width: .08 }
.plan .stair-step { stroke: var(--muted); stroke-width: .05; stroke-opacity: .7 }
.plan .core-label {
  font-family: var(--f-mono);
  font-size: .62px;
  fill: var(--muted);
}

/* otaq döşəməsi: status rəngi, ağ vərəqi boğmayan tonda */
.plan .room {
  fill-opacity: .16;
  stroke: none;
}
.plan .unit.is-sold .room { fill-opacity: .2 }
.plan .unit:hover .room { fill-opacity: .3 }
.plan .unit.sel .room { fill-opacity: .26 }

/* divarlar: arakəsmə nazik, mənzilin konturu qalın */
.plan .wall {
  fill: none;
  stroke: var(--ink);
  stroke-width: .09;
  stroke-opacity: .55;
}
.plan .outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: .2;
  stroke-opacity: .85;
}
.plan .unit.sel .outline { stroke: var(--accent); stroke-width: .34 }

/* qapı: divarda ağ boşluq + açılma qövsü */
.plan .door-gap { fill: var(--surface); stroke: none }
.plan .door-arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: .06;
  stroke-opacity: .45;
}
.plan .entry {
  fill: var(--accent);
  fill-opacity: .25;
  stroke: var(--accent);
  stroke-width: .08;
}

/* şüşə fasad */
.plan .glass {
  stroke: var(--accent);
  stroke-width: .1;
  stroke-opacity: .9;
}

/* mebel konturu — otağın nəyə yaradığını bir baxışda deyir */
.plan .f-bed, .plan .f-sofa, .plan .f-table, .plan .f-kitchen, .plan .f-bath {
  fill: var(--muted);
  fill-opacity: .14;
  stroke: var(--muted);
  stroke-width: .05;
  stroke-opacity: .5;
}
.plan .f-line { stroke: var(--muted); stroke-width: .05; stroke-opacity: .5 }

.plan .unit { cursor: pointer }
.plan .unit-label { cursor: pointer }
.plan text {
  font-family: var(--f-body);
  fill: var(--ink);
  pointer-events: none;
}
.plan .ul {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.1px;
}
.plan .ua { font-size: .8px; fill: var(--muted) }
.plan .dim { fill: none; stroke: var(--muted); stroke-width: .06 }
.plan .dimtxt { font-size: .7px; fill: var(--muted); font-family: var(--f-mono) }
.plan .dir { font-size: .68px; fill: var(--muted); font-family: var(--f-mono) }

@media (max-width: 900px) {
  .stage-wrap {
    padding: 10px;
  }
  .stage {
    width: 100%;
  }
}

/* ---------- master-plan ----------

   Dördüncü görünüş: sahənin yuxarıdan, ölçülü çertyoju (bax
   ui/site-plan.js). Rəng dili satış renderinin deyil, İŞ ÇERTYOJUNUN
   dilidir — tünd fon, nazik açıq cizgilər, monospace rəqəmlər. Səbəb:
   bu görüntü "gözəl görünmək" üçün deyil, YOXLAMAQ üçündür.

   Ölçülər SVG vahidindədir və vahid = 1 METRDİR (viewBox 2000 × 1500 m),
   yəni şrift ölçüsü də metrlədir: 38 m hündürlüyündə hərf ekranda ≈13 px
   olur. Rəqəmləri metrlə saxlamaq vacibdir — belə olanda plan böyüdüləndə
   yazı da binayla birlikdə böyüyür. */
.stage-siteplan {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
    var(--stage);
}
.siteplan { width: 100%; height: 100% }

/* su və quru: planda sahənin "boyası" */
.sp-sea { fill: #0c2430 }
.sp-lagoon { fill: #103243 }
.sp-land { fill: #1b2a28 }
.sp-sand { fill: #2d3330 }
.sp-arm { fill: #223129 }
.sp-island { fill: #26332b }

/* zonalar: yaşıllıq və yaşayış zolaqları */
.sp-veg {
  fill: rgba(70, 119, 60, .22);
  stroke: rgba(109, 167, 94, .45);
  stroke-width: 1.5;
  stroke-dasharray: 14 10;
}
.sp-vegline {
  fill: none;
  stroke: rgba(109, 167, 94, .75);
  stroke-width: 3;
  stroke-dasharray: 6 9;
}
.sp-res {
  fill: none;
  stroke: rgba(232, 177, 63, .5);
  stroke-width: 2.5;
  stroke-dasharray: 22 12;
}

/* yollar: zolaq + mərkəz xətti (çertyoj qaydası) */
.sp-road { fill: none; stroke: rgba(226, 238, 242, .22); stroke-linecap: round }
.sp-road-c {
  fill: none;
  stroke: rgba(226, 238, 242, .55);
  stroke-width: 1.6;
  stroke-dasharray: 26 18;
}
.sp-bridge { fill: none; stroke: rgba(226, 238, 242, .4); stroke-linecap: butt }
.sp-dock { stroke: rgba(226, 238, 242, .35); stroke-width: 3 }

/* marinalar: M1 başlanğıcdır, ona görə iki dairə ilə vurğulanır */
.sp-marina { fill: rgba(63, 178, 195, .12); stroke: rgba(63, 178, 195, .5); stroke-width: 2 }
.sp-marina-core { fill: rgba(63, 178, 195, .3); stroke: rgba(63, 178, 195, .8); stroke-width: 2 }

/* koordinat şəbəkəsi */
.sp-grid { stroke: rgba(157, 178, 188, .12); stroke-width: 1 }
.sp-grid .sp-axis, .sp-axis { stroke: rgba(63, 178, 195, .55); stroke-width: 2.5 }
.sp-grid-l {
  fill: var(--stage-muted);
  font-family: var(--f-mono);
  font-size: 22px;
  text-anchor: middle;
  opacity: .8;
}
.sp-grid-y { text-anchor: start }

/* parselin sərhədi: 1800 × 1200 m */
.sp-parcel {
  fill: none;
  stroke: rgba(232, 241, 243, .45);
  stroke-width: 3;
  stroke-dasharray: 40 22;
}

/* binalar: podium + kütlə + ID */
.sp-block { cursor: pointer }
.sp-podium { fill: rgba(232, 241, 243, .12); stroke: rgba(232, 241, 243, .25); stroke-width: 1 }
.sp-mass {
  fill: rgba(226, 238, 242, .82);
  stroke: #0A1820;
  stroke-width: 1.5;
  transition: fill .12s;
}
.sp-block:hover .sp-mass { fill: #fff }
.sp-block.sp-on .sp-mass { fill: var(--accent); stroke: #fff; stroke-width: 2.5 }

.sp-id {
  fill: var(--stage-ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 38px;
  text-anchor: middle;
  pointer-events: none;
}
.sp-id-marina, .sp-id-island { font-size: 26px; fill: rgba(63, 178, 195, .95) }
.sp-coord {
  fill: var(--stage-muted);
  font-family: var(--f-mono);
  font-size: 20px;
  text-anchor: middle;
  pointer-events: none;
}
.sp-zone {
  fill: rgba(109, 167, 94, .9);
  font-family: var(--f-mono);
  font-size: 24px;
  text-anchor: middle;
}
.sp-road-id {
  fill: rgba(226, 238, 242, .6);
  font-family: var(--f-mono);
  font-size: 20px;
  text-anchor: middle;
}

/* miqyas, istiqamət, başlıq */
.sp-scale line, .sp-compass line { stroke: var(--stage-ink); stroke-width: 2 }
.sp-compass polygon { fill: var(--stage-ink) }
.sp-title {
  fill: var(--stage-ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 2px;
}
.sp-note {
  fill: var(--stage-muted);
  font-family: var(--f-mono);
  font-size: 24px;
}

/* ---------- yoxlama rejimi ----------

   3D modeldə hər obyektin ID-si və koordinatı. Yazılar HTML qatındadır
   (sprite deyil) və göstərici hadisələrini tutmur — yoxsa modelə klik
   etmək mümkün olmazdı. */
.inspectsw {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(8, 20, 28, .55);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.inspectsw:hover { color: #fff }
.inspectsw.on { background: #fff; color: #0F2431 }

.inspect {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.ins {
  position: absolute;
  transform: translate(-50%, -100%);
  display: block;
  padding: 3px 7px;
  border: 1px solid rgba(63, 178, 195, .55);
  border-radius: 7px;
  background: rgba(6, 18, 25, .78);
  color: var(--stage-ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
}
.ins i { display: block; font-style: normal; font-weight: 700; font-size: 12px }
.ins em { display: block; font-style: normal; opacity: .62 }
.ins-marina { border-color: rgba(63, 178, 195, .9) }
.ins-island { border-color: rgba(109, 167, 94, .75) }

/* plan cədvəli: ID ↔ koordinat */
.sp-th {
  fill: var(--stage-muted);
  font-family: var(--f-mono);
  font-size: 20px;
  letter-spacing: 1px;
  opacity: .7;
}
.sp-td {
  fill: var(--stage-ink);
  font-family: var(--f-mono);
  font-size: 24px;
  opacity: .9;
}
.sp-td-id { font-weight: 700; fill: var(--accent) }
.sp-tr { cursor: pointer }
.sp-tr:hover .sp-td { fill: #fff; opacity: 1 }
.sp-tr-on .sp-td { fill: #fff; opacity: 1 }
.sp-panel {
  fill: rgba(5, 15, 21, .82);
  stroke: rgba(232, 241, 243, .18);
  stroke-width: 1.5;
}

/* yeni plan elementləri: daş dalğakıran, promenad, villa ayaq izi, kontekst */
.sp-rock { fill: #3a3a36; stroke: rgba(232, 241, 243, .18); stroke-width: 1 }
.sp-walk { fill: rgba(232, 241, 243, .14) }
.sp-villa {
  fill: rgba(232, 241, 243, .72);
  stroke: #0A1820;
  stroke-width: .8;
}
.sp-ctx { fill: rgba(157, 178, 188, .22); stroke: rgba(157, 178, 188, .3); stroke-width: 1 }

/* ---------- ev planı ----------
   Mənzil planı ilə eyni dildədir (.plan), yalnız iki əlavə element var:
   taxta terras və hovuz. */
.house-plan { width: 100%; height: 100%; max-height: 420px }
.plan .f-deck { fill: #c29a6c; fill-opacity: .55 }
.plan .f-pool { fill: #51c6d8; fill-opacity: .7 }
.plan .floor .plate { fill: var(--surface); stroke: none }

/* evin statusu planda: satışda yaşıl, rezerv sarı, satılıb qırmızı */
.sp-villa.sp-free { fill: rgba(69, 181, 129, .85) }
.sp-villa.sp-hold { fill: rgba(232, 177, 63, .85) }
.sp-villa.sp-sold { fill: rgba(226, 105, 92, .8) }
.sp-villa { cursor: pointer }
.sp-villa:hover { fill: #fff }
.sp-house-on { fill: var(--accent); stroke: #fff; stroke-width: 2 }

/* ---------- elevasiyada 3D detalları ----------
   Çertyoj modelin siluetini təkrarlayır: balkon lövhəsi, səma bağı
   qatı, firuzəyi tac, damdakı hovuz və kristal dəstə. */
.elev-balcony { stroke: rgba(255, 255, 255, .75); stroke-width: .22 }
.elev-sky { fill: #2d4450; fill-opacity: .88 }
.elev-top { fill: #2f6f7d; fill-opacity: .9 }
.elev-pool { fill: #51c6d8; fill-opacity: .9 }
.elev-roofbox { fill: #dfe3e2; fill-opacity: .9 }
.elev-shaft {
  fill: url(#elevGlass);
  fill-opacity: .9;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: .2;
}
.elev-shaft.is-main { fill-opacity: 1 }
/* Şüşün KONTURU — satış zolaqlarının üstündə. Dolu gövdə zolaqların
   altında qalır, kontur isə dəstənin ritmini saxlayır. */
.elev-shaft-line {
  fill: none;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: .35;
}
.elev-detail { pointer-events: none }

/* ---------- "işlənir" nişanı ----------
   Kamera siyahısında hələ bitməmiş rejimin yanında kiçik etiket:
   demo müştəriyə göstəriləndə hansının hazır olduğu dərhal görünür. */
.viewcam .wip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(232, 177, 63, .2);
  color: #e8b13f;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: 1px;
}
.viewcam button.on .wip { background: rgba(176, 124, 20, .22); color: #8a6411 }