/* Batumi Seafront Towers — dörd addımlı axının qatları.

   Karkas app-shell.css-dən gəlir; burada yalnız bu demoya xas olanlar var:
   mərtəbə sxemi (stack), mərtəbə planı (plate) və yan paneldəki siyahılar. */

/* 3D qatı ilə 2D plan eyni yeri tutur, stack isə aralarında dar sütundur */
.towers-main {
  grid-template-columns: minmax(0, 1fr) 400px;
}
.towers-main:has(.stackbar:not([hidden])) {
  grid-template-columns: 200px minmax(0, 1fr) 400px;
}
.towers-main:has(.stackbar:not([hidden])) .stackbar { order: -1 }

/* ---------- mərtəbə sxemi (addım 2) ---------- */
.stackbar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface2);
}
.stack-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.stack-head b {
  display: block;
  font-family: var(--f-display);
  font-size: 17px;
}
.stack-head span {
  font-size: 12px;
  color: var(--muted);
}
.stack-host {
  flex: 1;
  min-height: 0;
  padding: 12px 10px;
  overflow: auto;
}
.stack {
  width: 100%;
  height: 100%;
  min-height: 380px;
  overflow: visible;
}

.stack-roof {
  fill: var(--sold);
  opacity: .5;
}
.stack-podium {
  fill: var(--line);
  opacity: .55;
}
.stack-podium-label {
  font-family: var(--f-mono);
  font-size: .5px;
  letter-spacing: .06px;
  fill: var(--muted);
}

.stack-row rect {
  fill: var(--sold);
  opacity: .34;
  transition: opacity .12s, fill .12s;
}
.stack-row.is-many rect { fill: var(--ok);   opacity: .72 }
.stack-row.is-few  rect { fill: var(--hold); opacity: .78 }
.stack-row.is-none rect { fill: var(--sold); opacity: .3 }
.stack-row.is-dim  rect { opacity: .14 }

.stack-row:hover rect,
.stack-row:focus-visible rect {
  opacity: 1;
}
.stack-row.is-sel rect {
  fill: var(--accent);
  opacity: 1;
}
.stack-row { cursor: pointer; outline: none }

.stack-no {
  font-family: var(--f-mono);
  font-size: .58px;
  fill: var(--muted);
}
.stack-left {
  font-family: var(--f-mono);
  font-size: .5px;
  fill: #fff;
  opacity: 0;
  transition: opacity .12s;
}
.stack-row:hover .stack-left,
.stack-row.is-sel .stack-left { opacity: .9 }
.stack-row.is-none .stack-left { fill: var(--ink) }

.stack-key {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.stack-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stack-key i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.stack-key .many { background: var(--ok) }
.stack-key .few { background: var(--hold) }
.stack-key .none { background: var(--sold) }

/* ---------- mərtəbə planı (addım 3–4) ---------- */
.plate-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface2);
}
.plate-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.plate-bar .stage-back {
  position: static;
  flex: none;
}
.plate-note {
  font-size: 12px;
  color: var(--muted);
}
.plate-host {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 20px 24px 28px;
}
.plate {
  width: 100%;
  max-height: 100%;
}

.plate-outline {
  fill: none;
  stroke: var(--line);
  stroke-width: .16;
}
/* Nüvə planın "ölü" zonasıdır: mənzillərdən açıq-aydın fərqlənməli,
   amma onları üstələməməlidir. */
.plate-core rect {
  fill: var(--muted);
  opacity: .16;
}
.plate-core .plate-lift {
  fill: var(--muted);
  opacity: .42;
}
.plate-corridor {
  fill: none;
  stroke: var(--muted);
  stroke-width: .1;
  stroke-dasharray: .9 .7;
  opacity: .5;
}
.plate-core-label {
  font-family: var(--f-mono);
  font-size: .62px;
  letter-spacing: .08px;
  fill: var(--muted);
}

.plate-unit { cursor: pointer; outline: none }
.plate-unit rect {
  fill: var(--sold);
  stroke: var(--surface);
  stroke-width: .1;
  opacity: .5;
  transition: opacity .12s, fill .12s;
}
.plate-unit.is-free rect { fill: var(--ok);   opacity: .8 }
.plate-unit.is-hold rect { fill: var(--hold); opacity: .85 }
.plate-unit.is-sold rect { fill: var(--sold); opacity: .42 }
.plate-unit.is-dim  rect { opacity: .13 }

.plate-unit:hover rect,
.plate-unit:focus-visible rect {
  opacity: 1;
}
.plate-unit.is-sel rect {
  fill: var(--accent);
  opacity: 1;
  stroke: var(--surface);
  stroke-width: .18;
}

.plate-no {
  font-family: var(--f-mono);
  font-size: 1.05px;
  fill: #fff;
  opacity: .82;
  pointer-events: none;
}
.plate-unit.is-sold .plate-no { fill: var(--ink); opacity: .5 }
.plate-unit.is-dim .plate-no { opacity: .2 }

.plate-dir {
  font-family: var(--f-mono);
  font-size: .82px;
  letter-spacing: .14px;
  fill: var(--muted);
}
.plate-dim {
  stroke: var(--line);
  stroke-width: .08;
  fill: none;
}
.plate-dimtxt {
  font-family: var(--f-mono);
  font-size: .72px;
  fill: var(--muted);
}

/* ---------- yan panel siyahıları ---------- */
.side .lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.side .sub {
  margin: 22px 0 10px;
  font-family: var(--f-display);
  font-size: 15px;
}
.side .hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.tlist,
.tylist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tlist button,
.tylist li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
}
.tlist button { cursor: pointer; transition: border-color .15s, background .15s }
.tlist button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tl-head,
.ty-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.tl-head b,
.ty-head b {
  font-family: var(--f-display);
  font-size: 16px;
}
.tl-head i,
.ty-head i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ok);
}
.ty-head i { color: var(--muted) }
.tl-sub,
.ty-sub {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.tl-about,
.ty-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- 3D qülə nişanları ---------- */
#pins .pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: border-color .12s, transform .12s;
}
#pins .pin b {
  font-family: var(--f-display);
  font-size: 14px;
}
#pins .pin small {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--muted);
}
#pins .pin.hot {
  border-color: var(--accent);
  transform: translate(-50%, -100%) scale(1.06);
}

/* ---------- uyğunlaşma ---------- */
@media (max-width: 1100px) {
  .towers-main:has(.stackbar:not([hidden])) {
    grid-template-columns: 150px minmax(0, 1fr) 360px;
  }
}

@media (max-width: 900px) {
  .towers-main,
  .towers-main:has(.stackbar:not([hidden])) {
    grid-template-columns: 1fr;
  }
  .towers-main:has(.stackbar:not([hidden])) .stackbar { order: 0 }
  .stackbar {
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .stack-host { max-height: 46vh }
  .plate-stage { min-height: 52vh }
}

/* ---------- mərtəbə kartı (3D üzərində) ---------- */
.tip-cta {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 700;
}