/* ARworks ingatlan portfólió — az eszköztár (hét kipróbálható koncepciódemó) és a 3D-ábrák belső stílusai.
   Szkript nélkül minden panel látszik egymás alatt; a `.ip-js` osztállyal fülekre vált. A színpad kezdőállapota a HTML-ben áll. */

/* ------------------------------------------------------------ a munkapad: fülek + panelek */
.ip .ip-bench { border: 1px solid var(--ip-line-2); background: #fff; box-shadow: 0 1px 2px rgba(18, 24, 29, 0.04), 0 40px 70px -50px rgba(18, 24, 29, 0.4); }
.ip .ip-tabs { display: none; }
.ip.ip-js .ip-tabs { display: flex; overflow-x: auto; background: var(--ip-paper); border-bottom: 1px solid var(--ip-line-2); scrollbar-width: thin; }
.ip .ip-tab {
  flex: 1 0 auto; display: grid; justify-items: start; align-content: start; gap: 7px; min-width: 132px; padding: 15px 18px 13px; text-align: left; cursor: pointer;
  background: none; border: 0; border-right: 1px solid var(--ip-line); border-top: 3px solid transparent; color: var(--ip-mute);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ip .ip-tab:last-child { border-right: 0; }
.ip .ip-tab__ic .ipi { width: 30px; height: 30px; }
.ip .ip-tab__n { font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: var(--ip-orange-ink); }
.ip .ip-tab b { font: 400 14px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.ip .ip-tab:hover { color: var(--ip-ink); background: #fff; }
.ip .ip-tab.is-on { background: #fff; color: var(--ip-ink); border-top-color: var(--ip-orange); margin-bottom: -1px; }
.ip .ip-tab.is-on .ipi { color: var(--ip-orange); }
.ip.ip-js .ip-tool:not(.is-on) { display: none; }
.ip .ip-tool { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.ip .ip-tool + .ip-tool { border-top: 1px solid var(--ip-line-2); }
.ip .ip-tool__main { padding: 22px 22px 24px; border-right: 1px solid var(--ip-line); min-width: 0; }
.ip .ip-tool__side { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; background: var(--ip-paper); min-width: 0; }
.ip .ip-tool__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ip .ip-tool__t { font: 300 28px/1.1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.ip .ip-tool__lead { font-size: 15px; line-height: 1.55; color: var(--ip-mute); }
@media (max-width: 1080px) {
  .ip .ip-tool { grid-template-columns: 1fr; }
  .ip .ip-tool__main { border-right: 0; border-bottom: 1px solid var(--ip-line); padding: 16px 16px 18px; }
  .ip .ip-tool__side { padding: 22px 20px 26px; }
}

/* a „mire használható” négyes */
.ip .ip-use { display: grid; gap: 0; border-top: 1px solid var(--ip-line-2); }
.ip .ip-use__i { display: grid; gap: 4px; padding: 11px 0 12px; border-bottom: 1px solid var(--ip-line); }
.ip .ip-use dt { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ip-orange-ink); }
.ip .ip-use dd { font-size: 14.5px; line-height: 1.5; color: var(--ip-ink-2); }
.ip .ip-use__i--main dd { font-size: 16px; line-height: 1.5; color: var(--ip-ink); }
.ip .ip-built { display: grid; gap: 8px; }
.ip .ip-built__l { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ip-dim); }
.ip .ip-built__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ip .ip-built__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-ink); background: #fff; border: 1px solid var(--ip-line-2); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.ip .ip-built__chip:hover { background: var(--ip-ink); color: #fff; border-color: var(--ip-ink); }
.ip .ip-built__chip svg { transition: transform 0.35s var(--ip-ease); }
.ip .ip-built__chip:hover svg { transform: rotate(90deg); }
.ip .ip-tool__more { margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------------ a színpad */
.ip .ip-tool__stage {
  position: relative; aspect-ratio: 800 / 520; overflow: hidden; border: 1px solid var(--ip-line);
  background:
    linear-gradient(var(--ip-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--ip-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(80% 70% at 50% 108%, rgba(239, 84, 34, 0.1), transparent 70%), linear-gradient(#fbfcfd, #f1f5f8);
}
.ip .ip-tool__stage--view { aspect-ratio: 800 / 420; }
.ip .ip-tool__stage--finish { aspect-ratio: 3 / 2; background: #e3dfd3; }
.ip .ip-iso { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ip .ip-iso.is-drag { cursor: grabbing; }
.ip .ip-iso--wide { cursor: default; }
.ip .ip-tool__stage--view .ip-iso, .ip .ip-tool__stage--map .ip-iso { cursor: default; }
.ip .ip-tool__tag { position: absolute; left: 12px; top: 12px; z-index: 4; padding: 5px 9px; pointer-events: none; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-ink); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--ip-line-2); }
.ip .ip-tool__hint { position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 6px 10px; pointer-events: none; font: 400 10px/1.2 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-orange-ink); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--ip-line); transition: opacity 0.4s; max-width: 64%; }
.ip .ip-tool.is-used .ip-tool__hint, .ip .ip-tool__body.is-used .ip-tool__hint { opacity: 0; }
.ip .ip-legend2 { position: absolute; right: 12px; top: 12px; z-index: 4; display: grid; gap: 6px; padding: 9px 11px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--ip-line); font: 400 10px/1.2 var(--font-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ip-ink-2); pointer-events: none; }
.ip .ip-legend2 li { display: flex; align-items: center; gap: 8px; }
.ip .ip-legend2 i { width: 14px; height: 10px; border: 1px solid rgba(18, 24, 29, 0.3); }
.ip .ip-legend2 .is-free { background: #79c9a0; } .ip .ip-legend2 .is-few { background: #eebe6e; } .ip .ip-legend2 .is-sold { background: #bcc5ce; }
.ip .ip-legend2__bar { display: block; width: 130px; height: 8px; background: linear-gradient(90deg, #6fa8d6, #f2d58a, #ef7a43); border: 1px solid rgba(18, 24, 29, 0.25); }
.ip .ip-legend2__ends { display: flex; justify-content: space-between; }

@media (max-width: 760px) {
  .ip .ip-tool__hint { display: none; }
  .ip .ip-legend2 { right: 8px; top: 8px; gap: 4px; padding: 6px 7px; font-size: 8.5px; }
  .ip .ip-legend2__bar { width: 90px; }
  .ip .ip-tool__tag { left: 8px; top: 8px; font-size: 8.5px; padding: 4px 7px; }
}

/* ------------------------------------------------------------ vezérlők */
.ip .ip-tool__ctl { display: grid; gap: 12px; padding-top: 16px; }
.ip .ip-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ip .ip-ctl { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 190px; }
.ip .ip-ctl__l { font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-mute); white-space: nowrap; }
.ip .ip-ctl output { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--ip-ink); min-width: 6.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.ip .ip-ctl--wide { flex-basis: 100%; }
.ip .ip-ctl input[type='range'] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.ip .ip-ctl input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ip-orange) var(--fill, 0%), rgba(18, 24, 29, 0.18) var(--fill, 0%)); }
.ip .ip-ctl input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(18, 24, 29, 0.18); }
.ip .ip-ctl input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ip-orange); }
.ip .ip-ctl input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--ip-orange); box-shadow: 0 2px 8px rgba(18, 24, 29, 0.28); }
.ip .ip-ctl input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ip-orange); box-shadow: 0 2px 8px rgba(18, 24, 29, 0.28); }
.ip .ip-seg { display: inline-flex; border: 1px solid var(--ip-ink); border-radius: 2px; overflow: hidden; background: #fff; }
.ip .ip-seg button { padding: 9px 14px; cursor: pointer; font: 500 12.5px/1 var(--font-body, sans-serif); color: var(--ip-ink); background: #fff; border: 0; border-left: 1px solid var(--ip-line-2); transition: background 0.2s, color 0.2s; }
.ip .ip-seg button:first-child { border-left: 0; }
.ip .ip-seg button:hover { background: var(--ip-paper-2); }
.ip .ip-seg button.is-on { background: var(--ip-ink); color: #fff; }
.ip .ip-tgl { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 10px; cursor: pointer; font: 500 12.5px/1 var(--font-body, sans-serif); color: var(--ip-ink); background: #fff; border: 1px solid var(--ip-line-2); border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
.ip .ip-tgl:hover { border-color: var(--ip-ink); }
.ip .ip-tgl i { position: relative; width: 26px; height: 14px; flex: none; border-radius: 8px; background: rgba(18, 24, 29, 0.22); transition: background 0.25s; }
.ip .ip-tgl i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ip-ease); }
.ip .ip-tgl.is-on i { background: var(--ip-orange); }
.ip .ip-tgl.is-on i::after { transform: translateX(12px); }
.ip .ip-tgl--transport.is-on i { background: #2f5f94; } .ip .ip-tgl--school.is-on i { background: #d9901a; } .ip .ip-tgl--shop.is-on i { background: #ef5422; } .ip .ip-tgl--green.is-on i { background: #1f9d63; }
.ip .ip-tgl--res.is-on i { background: #ef5422; } .ip .ip-tgl--off.is-on i { background: #2f5f94; } .ip .ip-tgl--ind.is-on i { background: #1f9d63; }
.ip .ip-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 124px; padding: 10px 16px; cursor: pointer; font: 500 13px/1 var(--font-body, sans-serif); color: #fff; background: var(--ip-orange); border: 1px solid var(--ip-orange); border-radius: 2px; transition: background 0.2s; }
.ip .ip-play:hover { background: var(--orange-600, #d3431a); }
.ip .ip-tool__info { min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--ip-ink-2); border-left: 2px solid var(--ip-orange); padding: 3px 0 3px 12px; }
.ip .ip-chipsrow { gap: 8px; }

/* építési fázisok */
.ip .ip-phases { display: flex; flex-wrap: wrap; gap: 6px; }
.ip .ip-phases li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ip-dim); background: #fff; border: 1px solid var(--ip-line); transition: color 0.3s, border-color 0.3s, background 0.3s; }
.ip .ip-phases li span { color: var(--ip-orange-ink); }
.ip .ip-phases li.is-on { color: var(--ip-ink); border-color: var(--ip-orange); background: #fff4ee; }

/* iroda: számlálók */
.ip .ip-stats2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ip-line-2); }
.ip .ip-stats2 > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 14px 12px 6px; border-left: 1px solid var(--ip-line); }
.ip .ip-stats2 > div:first-child { border-left: 0; padding-left: 0; }
.ip .ip-stats2 dd { font: 300 clamp(24px, 2.6vw, 34px)/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.03em; color: var(--ip-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip .ip-stats2 dt { font: 400 9.5px/1.35 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-mute); }
@media (max-width: 640px) { .ip .ip-stats2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ip .ip-stats2 > div:nth-child(4) { border-left: 0; padding-left: 0; } }

/* felületek és színek */
.ip .ip-fin { position: absolute; inset: 0; }
.ip .ip-fin__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; pointer-events: none; }
.ip .ip-fin__img.is-on { opacity: 1; }
.ip .ip-fin__img.is-top { z-index: 2; opacity: 1; }
.ip .ip-fin__scan { position: absolute; top: -2%; bottom: -2%; left: 0; width: 3px; z-index: 4; opacity: 0; pointer-events: none; background: linear-gradient(transparent, rgba(255, 255, 255, 0.95), transparent); box-shadow: 0 0 24px 7px rgba(239, 84, 34, 0.6); }
.ip .ip-moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ip .ip-mood { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--ip-line-2); border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
.ip .ip-mood:hover { border-color: var(--ip-ink); }
.ip .ip-mood.is-on { border-color: var(--ip-orange); background: #fff6f1; }
.ip .ip-mood__sw { display: flex; flex: none; }
.ip .ip-mood__sw i { width: 22px; height: 40px; margin-right: -4px; border-radius: 11px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(18, 24, 29, 0.18); }
.ip .ip-mood__t { display: grid; gap: 3px; min-width: 0; }
.ip .ip-mood__t b { font: 400 13.5px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.ip .ip-mood__t em { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--ip-mute); }
@media (max-width: 760px) { .ip .ip-moods { grid-template-columns: 1fr; } }

/* környék és portfólió */
.ip .ip-pfcard { position: absolute; right: 12px; top: 12px; z-index: 5; width: min(260px, 52%); padding: 12px 14px; background: #fff; border: 1px solid var(--ip-orange); box-shadow: 0 18px 34px -18px rgba(18, 24, 29, 0.45); font-size: 13px; line-height: 1.45; color: var(--ip-ink-2); }
.ip .ip-pfcard b { display: block; font: 400 15px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ip-ink); font-weight: 400; margin-bottom: 4px; }
.ip .ip-pfcard span { display: block; font: 400 10.5px/1.4 var(--font-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ip-orange-ink); }

/* ------------------------------------------------------------ a 3D-ábrák belső elemei (iso.js) */
.ip .iso-f:hover { stroke: var(--ip-orange); stroke-width: 1.4; }
.ip .iso-dim { font: 400 11px 'Space Mono', monospace; fill: #1b2631; letter-spacing: 0.04em; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; }
.ip .iso-room { font: 600 11.5px 'Space Grotesk', sans-serif; fill: #1b2631; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3.5px; pointer-events: none; }
.ip .iso-area { font: 400 10px 'Space Mono', monospace; fill: #55616b; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px; pointer-events: none; }
.ip .iso-vp { cursor: grab; }
.ip .iso-vp__ring { transform-box: fill-box; transform-origin: center; animation: ip-pulse-r 2s ease-out infinite; }
.ip .iso-vis { pointer-events: none; }
.ip .iso-ring { pointer-events: none; }
.ip .iso-pin { --pc: #1c3d63; }
.ip .iso-pin--transport { --pc: #2f5f94; } .ip .iso-pin--school { --pc: #d9901a; } .ip .iso-pin--shop { --pc: #ef5422; } .ip .iso-pin--green { --pc: #1f9d63; }
.ip .iso-pin--res { --pc: #ef5422; } .ip .iso-pin--off { --pc: #2f5f94; } .ip .iso-pin--ind { --pc: #1f9d63; }
.ip .iso-pin__dot { fill: #fff; stroke: var(--pc, #1c3d63); stroke-width: 2.2; }
.ip .iso-pin__core { fill: var(--pc, #1c3d63); }
.ip .iso-pin--plan .iso-pin__dot { stroke-dasharray: 3 2; }
.ip .iso-pin--build .iso-pin__core { opacity: 0.55; }
.ip .iso-pin--pf { cursor: pointer; }
.ip .iso-pin--pf:hover .iso-pin__dot, .ip .iso-pin.is-pick .iso-pin__dot { stroke-width: 3.6; }
.ip .iso-pin__lbl rect { fill: rgba(255, 255, 255, 0.95); stroke: rgba(18, 24, 29, 0.2); }
.ip .iso-pin__lbl text { font: 400 9.5px 'Space Mono', monospace; fill: #12181d; letter-spacing: 0.03em; }
.ip .iso-me__ring { fill: none; stroke: var(--ip-orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ip-pulse-r 2.6s ease-out infinite; }