/* Graf Residence. Dan: kost i tamna šuma; veče: duboka šuma i kost; akcenat ćilibar u dve svetline. */

@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/albert-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/albert-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --kost: #EDE7DD;  --kost-2: #E3DBCE;  --suma: #121915;  --suma-2: #1A231E;
  --sc-canvas: var(--kost);  --sc-surface: #F5F1EA;
  --sc-ink: #1B241E;  --sc-ink-soft: #55605A;
  --sc-accent: #8C4F25;  --sc-accent-ink: #FBF6EE;
  --sc-font-display: "Instrument Serif", "Times New Roman", serif;
  --sc-font-text: "Albert Sans", system-ui, sans-serif;
  --sc-shadow-color: 30 25% 18%;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;
  --traka-h: 3.75rem;
  --linija: color-mix(in oklab, var(--sc-ink) 16%, transparent);
}
.tamno, .sobe, .rituali, .dolazak, .upit {
  --sc-canvas: var(--suma); --sc-surface: var(--suma-2);
  --sc-ink: #ECE4D6; --sc-ink-soft: #A9B2A7;
  --sc-accent: #DDA26A; --sc-accent-ink: #121915;
  --linija: color-mix(in oklab, #ECE4D6 16%, transparent);
  background: var(--sc-canvas); color: var(--sc-ink);
}
body { background: var(--kost); font-feature-settings: "ss01" 0; }

/* ------------------------------------------------------------- osnove -- */
.meta { margin: 0; font: 600 0.72rem/1.3 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.naslov { margin: 0; font: 400 var(--sc-t-2xl)/1.02 var(--sc-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.naslov--veliki { font-size: var(--sc-t-3xl); }
.naslov em, .etiketa__naslov em { font-style: italic; }
p { text-wrap: pretty; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.9rem;
  padding: 0.7em 1.25em; border: 1px solid currentColor; border-radius: 2px; background: transparent; color: var(--sc-ink);
  font: 500 0.95rem/1 var(--sc-font-text); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.dugme:active { transform: translateY(1px) scale(0.985); }
.dugme--puno, .dugme--upit { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); }
.tamno .dugme--puno, .tamno .dugme--upit, .sobe .dugme--upit, .rituali .dugme--puno, .upit .dugme--puno { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .dugme:hover { background: var(--sc-ink); color: var(--sc-canvas); }
  .dugme--puno:hover, .dugme--upit:hover { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
  .upit .dugme--puno:hover, .sobe .dugme--upit:hover { background: #ECE4D6; border-color: #ECE4D6; color: var(--suma); }
}
.preskoci { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--sc-ink); color: var(--kost); }
.preskoci:focus { top: 1rem; }

/* -------------------------------------------------------------- traka -- */
.traka {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome); height: var(--traka-h);
  display: flex; align-items: center; gap: 1.25rem; padding: env(safe-area-inset-top) var(--sc-gutter) 0;
  color: var(--sc-ink); transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.traka:not(.traka--puna):not(.traka--tamna) .traka__ime:not(:focus-visible) { opacity: 0; }
.traka--puna { background: color-mix(in oklab, var(--kost) 92%, transparent); box-shadow: 0 1px 0 var(--linija); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
/* telefon: bez zamućenja ispod trake (i ispod natpisa plana i kartice): pozadina je ionako skoro
   puna, a zamućenje Chrome prvi put sprema oko 0,1 s (trzaj pri prvom skrolu u 3D plan) i posle
   ga ponavlja u svakoj sličici preko 3D prikaza */
.mobilno .traka--puna { background: var(--kost); backdrop-filter: none; -webkit-backdrop-filter: none; }
.traka--tamna { --sc-ink: #ECE4D6; --sc-canvas: var(--suma); --sc-accent: #DDA26A; --sc-accent-ink: #121915; color: #ECE4D6; background: color-mix(in oklab, var(--suma) 90%, transparent); box-shadow: 0 1px 0 rgba(236,228,214,.12); }
.mobilno .traka--tamna { background: var(--suma); }
.traka__ime { transition: opacity 240ms var(--sc-ease-out); font: 500 1.06rem/1 var(--sc-font-text); letter-spacing: -0.01em; text-decoration: none; color: inherit; margin-right: auto; white-space: nowrap; }
.traka__indeks, .traka__veze { display: none; }
.traka .dugme--upit { min-height: 2.5rem; padding: 0.55em 1em; font-size: 0.88rem; }
/* poziv prodaje: na telefonu samo slušalica, na širokom ekranu i broj */
.traka__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem;
  margin-right: -0.55rem; border: 1px solid color-mix(in oklab, currentColor 32%, transparent); border-radius: 2px;
  color: inherit; text-decoration: none; font: 500 0.88rem/1 var(--sc-font-text); white-space: nowrap;
  transition: background-color 150ms var(--sc-ease-out);
}
.traka__tel svg { width: 1.1rem; height: 1.1rem; flex: none; }
.traka__tel span { display: none; }
.traka__tel:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .traka__tel:hover { background: color-mix(in oklab, currentColor 12%, transparent); } }
@media (min-width: 1200px) { .traka__tel span { display: inline; } }
.traka--tamna .dugme--upit { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
@media (min-width: 900px) {
  .traka__indeks { display: flex; align-items: center; gap: 0.25rem; }
  .traka__oznaka { margin-right: 0.5rem; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
  .traka__indeks button { width: 2rem; height: 2rem; border: 1px solid var(--linija); border-radius: 2px; background: none; color: inherit; font: 500 0.85rem/1 var(--sc-font-text); cursor: pointer; transition: background-color 150ms, color 150ms; }
  .traka__indeks button:hover { background: currentColor; }
  .traka__indeks button:hover { color: inherit; background: color-mix(in oklab, currentColor 12%, transparent); }
  .traka__veze { display: flex; gap: 1.5rem; margin-left: 1.5rem; }
  .traka__veze a { font: 500 0.92rem/1 var(--sc-font-text); text-decoration: none; color: inherit; opacity: 0.85; }
  .traka__veze a:hover { opacity: 1; text-decoration: underline; }
}

/* --------------------------------------------------------------- uvod -- */
/* Ceo niz od pet kuća (slika 3122 x 1338). Platno ima tačan odnos slike, pa slojevi i polja kuća
   dele iste koordinate. Telefon i uži ekrani: platno je visoko koliko kadar i prevlači se levo-desno,
   sa zaustavljanjem na sredini svake kuće. Širok ekran: platno pokriva kadar, izbor kuće mišem. */
.uvod { position: relative; --u: 0; --mx: 0; --my: 0; --etiketa-h: 11.5rem; background: var(--kost); }
.uvod__kadar {
  position: relative; overflow: hidden; height: calc(100svh - var(--etiketa-h)); min-height: 26rem; background: #cfe0f0;
  container-type: size; --kh: calc(100svh - var(--etiketa-h));
}
/* telefon: etiketa ima i red sa uputstvom za prevlačenje, pa je viša (dugme ostaje na ekranu) */
@media (pointer: coarse) and (max-width: 760px) { .uvod { --etiketa-h: 13.4rem; } }
/* vodoravni pokret prstom vodi skripta (jedan pokret = jedna kuća); uspravni ostaje skrol strane */
.uvod__panorama {
  position: absolute; inset: 0; z-index: 0; isolation: isolate;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
}
.uvod__panorama::-webkit-scrollbar { display: none; }
.uvod__platno { position: relative; height: 100%; width: calc(100cqh * 3122 / 1338); }
.uvod__sloj { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; will-change: transform; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.uvod__sloj--nebo { z-index: 0; transform: translate3d(0, calc(var(--u) * var(--kh) * 0.3), 0); }
.uvod__sloj--niz { z-index: 2; }
/* polja za izbor kuće putuju tačno kao sloj sa kućama */
.uvod__sloj--niz, .uvod__kuce { transform: translate3d(0, calc(var(--u) * var(--kh) * 0.06), 0); }
/* ime stoji u čistom nebu iznad krošnji (lepljivo levo, pa ne putuje sa panoramom), u jednom redu
   da bude čitljivo i na malom telefonu; pri skrolu tone iza krošnji */
.uvod__ime {
  position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 100cqw; margin: 0;
  padding: calc(var(--traka-h) + 0.35rem) var(--sc-gutter) 0;
  display: flex; flex-direction: row; justify-content: center; gap: 0.22em; color: #1B241E;
  font: 500 clamp(2.2rem, min(10.8vw, 6.4svh), 9.5rem)/0.86 var(--sc-font-text); letter-spacing: -0.04em;
  transform: translate3d(0, calc(var(--u) * var(--kh) * 0.5), 0);
  will-change: transform; text-wrap: nowrap;
}
.uvod__svetlo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(70% 55% at 88% 8%, rgba(255, 214, 160, 0.75), transparent 70%),
              linear-gradient(180deg, transparent 65%, rgba(40, 30, 10, 0.12));
  opacity: calc(1 - var(--u) * 0.8);
}
.uvod__etiketa {
  position: relative; z-index: 2; min-height: var(--etiketa-h); display: grid; align-content: center; gap: 0.6rem;
  padding: 1.1rem var(--sc-gutter) 1.25rem; background: var(--kost); border-top: 1px solid var(--linija);
}
.uvod__tekst { margin: 0; font: 400 var(--sc-t-lg)/1.3 var(--sc-font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); max-width: 28ch; }
.uvod__opis { display: grid; gap: 0.3rem; }
.uvod__savet { display: none; margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); }
@media (pointer: coarse) { .uvod__savet--dodir { display: block; } }

/* polja kuća (u pikselima slike) i sidro na sredini fasade, na kome panorama staje */
.uvod__kuce { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; }
.uvod__kuca {
  position: absolute; pointer-events: auto; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer;
  left: calc(var(--x0) / 3122 * 100%); width: calc((var(--x1) - var(--x0)) / 3122 * 100%);
  top: calc(450 / 1338 * 100%); height: calc(585 / 1338 * 100%);
  transition: box-shadow 240ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out);
}
.uvod__sidro {
  position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none;
  left: calc((var(--cx) - var(--x0)) / (var(--x1) - var(--x0)) * 100%);
}
.uvod__kuca:focus-visible { outline: none; }
/* miš: kuća pod mišem je označena (samo gde ima miša; na telefonu bi „lepljivi" hover ostao posle
   dodira); telefon: kuća koju je posetilac dodirnuo (je-izabrana), drugi dodir otvara karticu */
@media (hover: hover) {
  .uvod__kuca:hover {
    z-index: 1; background: rgba(255, 238, 214, 0.07);
    box-shadow: 0 0 0 1.5px rgba(251, 247, 240, 0.95), 0 0 0 200vmax rgba(16, 13, 9, 0.38);
  }
  .uvod__kuca:hover .uvod__kuca-oznaka { opacity: 1; transform: translate(-50%, 0); }
}
.uvod__kuca:focus-visible, .uvod__kuca.je-izabrana {
  z-index: 1; background: rgba(255, 238, 214, 0.07);
  box-shadow: 0 0 0 1.5px rgba(251, 247, 240, 0.95), 0 0 0 200vmax rgba(16, 13, 9, 0.38);
}
.uvod__kuca-oznaka {
  position: absolute; left: calc((var(--cx) - var(--x0)) / (var(--x1) - var(--x0)) * 100%); top: calc(100% + 0.85rem);
  display: grid; gap: 0.2rem; padding: 0.6rem 0.85rem 0.65rem; min-width: 8.5rem; text-align: left;
  background: #FBF7F0; color: #1B241E; border-radius: 2px; box-shadow: var(--sc-e2);
  opacity: 0; transform: translate(-50%, -6px); pointer-events: none; white-space: nowrap;
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.uvod__kuca-oznaka::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.uvod__kuca-oznaka strong { font: 400 1.45rem/1 var(--sc-font-display); }
.uvod__kuca-oznaka span { font: 500 0.8rem/1.2 var(--sc-font-text); color: #55605A; }
.uvod__kuca:focus-visible .uvod__kuca-oznaka, .uvod__kuca.je-izabrana .uvod__kuca-oznaka { opacity: 1; transform: translate(-50%, 0); }
.uvod__kuca-dalje { display: none; margin-top: 0.2rem; font: italic 400 1rem/1.2 var(--sc-font-display); color: #8C4F25; }
.uvod__kuca.je-izabrana .uvod__kuca-dalje { display: block; }
/* strelice levo i desno (panorama), na visini kuća */
.uvod__strelica {
  position: absolute; z-index: 2; top: calc(742 / 1338 * 100%); transform: translateY(-50%);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(251, 247, 240, 0.9); color: #1B241E; box-shadow: var(--sc-e2); font: 500 1.05rem/1 var(--sc-font-text); cursor: pointer;
  transition: opacity 220ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.uvod__strelica:active { transform: translateY(-50%) scale(0.94); }
.uvod__strelica--levo { left: 0.6rem; }
.uvod__strelica--desno { right: 0.6rem; }
.uvod__strelica:disabled { opacity: 0; pointer-events: none; }
.uvod__etiketa .dugme { justify-self: start; margin-top: 0.3rem; }
@media (min-width: 761px) {
  .uvod { --etiketa-h: 7.5rem; }
  .uvod__ime { align-items: baseline; font-size: clamp(3.4rem, min(8.4vw, 6.4svh), 9.5rem); }
  .uvod__etiketa { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 3rem; }
  .uvod__etiketa .dugme { margin: 0; }
  .uvod__strelica--levo { left: 1.25rem; }
  .uvod__strelica--desno { right: 1.25rem; }
}
/* širok ekran: platno pokriva kadar (kao object-fit: cover), ime u sredini neba, izbor kuće mišem */
@media (min-width: 761px) and (min-aspect-ratio: 3/2) {
  .uvod__panorama { overflow: hidden; touch-action: auto; }
  .uvod__platno {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100cqw, 100cqh * 3122 / 1338); height: max(100cqh, 100cqw * 1338 / 3122);
  }
  .uvod__sloj--nebo { transform: translate3d(calc(var(--mx) * -5px), calc(var(--u) * var(--kh) * 0.62 + var(--my) * -4px), 0) scale(1.04); }
  .uvod__sloj--niz, .uvod__kuce { transform: translate3d(calc(var(--mx) * -14px), calc(var(--u) * var(--kh) * 0.1 + var(--my) * -7px), 0) scale(calc(1.015 + var(--u) * 0.05)); transform-origin: 50% 72%; }
  .uvod__ime {
    position: absolute; left: calc(50% - 50cqw); width: 100cqw; top: calc(50% - 50cqh + var(--kh) * 0.235 - 0.8em);
    padding: 0 var(--sc-gutter); justify-content: center; font-size: clamp(3.4rem, 7.2vw, 9.5rem);
    transform: translate3d(calc(var(--mx) * -10px), calc(var(--u) * var(--kh) * 0.5 + var(--my) * -6px), 0);
  }
  .uvod__strelica { display: none; }
}
@media (min-width: 761px) and (min-aspect-ratio: 3/2) and (hover: hover) and (pointer: fine) {
  .uvod__savet--mis { display: block; }
}
@media (min-width: 761px) and (min-aspect-ratio: 3/2) { .uvod__savet--dodir { display: none; } }
/* tablet (dodir, uži od 3:2): uz tekst stoji i uputstvo za prevlačenje, pa je etiketa viša */
@media (pointer: coarse) and (min-width: 761px) and (max-aspect-ratio: 3/2) { .uvod { --etiketa-h: 9.5rem; } }

/* --------------------------------------------------------------- plan -- */
.plan { background: var(--kost); }
.plan__scena { height: 100svh; overflow: hidden; background: var(--kost); }
/* telefon: deo nije zakačen (bez .sc-stage), pa scena sama drži platno, oznake i natpis u sebi */
.mobilno .plan__scena, .plan-slobodan .plan__scena { position: relative; }
.plan__platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.plan__oznake { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.plan__oznaka {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  min-width: 2.6rem; height: 2.6rem; padding: 0 0.85rem; border: 0; border-radius: 2px; cursor: pointer;
  background: #FBF7F0; color: #1B241E; box-shadow: var(--sc-e2); font: 600 0.95rem/1 var(--sc-font-text);
  opacity: 0; visibility: hidden; transition: opacity 260ms var(--sc-ease-out), background-color 160ms, color 160ms, visibility 0s 260ms;
}
.plan__oznaka::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.plan__oznaka.je-vidljiva { opacity: 1; visibility: visible; transition-delay: 0s; }
.plan__oznaka-tekst { display: none; font-weight: 500; }
.plan__oznaka.je-aktivna { background: var(--sc-accent); color: var(--sc-accent-ink); }
.plan__oznaka.je-aktivna .plan__oznaka-tekst { display: inline; }
.plan__oznaka.je-aktivna .plan__oznaka-br { display: none; }
.plan__etiketa {
  position: absolute; z-index: 3; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom));
  padding: 1.1rem 1.15rem 1rem; background: color-mix(in oklab, #FBF8F2 94%, transparent); border: 1px solid var(--linija); border-radius: 2px;
  box-shadow: var(--sc-e2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* telefon: puna podloga i oštra senka bez zamućenja (meka senka i zamućenje iza su pri prvom ulasku
   u 3D plan pravili trzaj od oko 0,1 do 0,27 s dok Chrome sprema njihovo crtanje) */
.mobilno .plan__etiketa { background: #FAF7F1; box-shadow: 0 2px 0 hsl(220 40% 2% / 0.07); backdrop-filter: none; -webkit-backdrop-filter: none; }
.plan__etiketa-sadrzaj { display: grid; gap: 0.35rem; min-height: 8.9rem; align-content: start; }
.plan__etiketa-sadrzaj.je-uslo > * { animation: etiketa-ulaz 520ms var(--sc-ease-out) both; }
.plan__etiketa-sadrzaj.je-uslo > *:nth-child(2) { animation-delay: 40ms; }
.plan__etiketa-sadrzaj.je-uslo > *:nth-child(3) { animation-delay: 80ms; }
.plan__etiketa-sadrzaj.je-uslo > *:nth-child(4) { animation-delay: 120ms; }
.plan__etiketa-sadrzaj.je-uslo > *:nth-child(5) { animation-delay: 160ms; }
@keyframes etiketa-ulaz { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.etiketa__naslov { margin: 0; font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.9rem)/1 var(--sc-font-display); letter-spacing: -0.01em; }
.etiketa__tekst { margin: 0; color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.45; max-width: 34ch; }
.etiketa__stavke { margin: 0.1rem 0 0; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; }
.etiketa__dno { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.35rem; }
.etiketa__cena { font: italic 400 1.15rem/1 var(--sc-font-display); color: var(--sc-ink-soft); }
.etiketa__dno .dugme { min-height: 2.6rem; padding: 0.6em 1em; font-size: 0.9rem; }
/* telefon: u natpisu kuće „Ceo niz" vraća 3D pregled svih pet kuća */
.etiketa__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.etiketa__ceo {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin: -0.8rem -0.4rem -0.8rem 0; padding: 0 0.4rem;
  border: 0; background: none; color: var(--sc-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.etiketa__ceo::before { content: ""; width: 0.8rem; height: 0.55rem; border: 1.5px solid currentColor; border-radius: 1px; opacity: 0.8; }
.plan__indeks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--linija); }
/* povratak na vrh (telefon i računar): svetao krug, vidi se i na svetloj i na tamnoj podlozi;
   pojavi se ispod uvoda (je-vidljiva postavlja sajt.js) */
.na-vrh {
  position: fixed; z-index: calc(var(--sc-z-chrome) - 1);
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(251, 247, 240, 0.94); color: #1B241E; text-decoration: none;
  box-shadow: var(--sc-e2), 0 0 0 1px rgba(27, 36, 30, 0.08);
  opacity: 0; visibility: hidden; transform: translateY(0.75rem);
  /* telefon preko 3D plana: iznad natpisa sa brojevima kuća (--dizi postavlja sajt.js) */
  translate: 0 calc(-1 * var(--dizi, 0px));
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), translate 200ms var(--sc-ease-out), visibility 0s linear 260ms;
}
.na-vrh svg { width: 1.3rem; height: 1.3rem; }
.na-vrh.je-vidljiva { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), translate 200ms var(--sc-ease-out), visibility 0s; }
@media (min-width: 861px) { .podnozje__vrh { margin-left: auto; } }
.na-vrh:active { transform: scale(0.94); }
.na-vrh:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) { .na-vrh:hover { background: #FFFDF9; } .na-vrh:hover svg { transform: translateY(-2px); } .na-vrh svg { transition: transform 200ms var(--sc-ease-out); } }
@media (min-width: 861px) { .na-vrh { right: 2rem; bottom: 2rem; width: 3.25rem; height: 3.25rem; } }
@media print { .na-vrh { display: none; } }

/* telefon: kroz kuće se ide prevlačenjem levo-desno ili strelicama (uspravno ide skrol strane) */
.plan__strelica { display: none; }
.mobilno .plan__scena, .plan-slobodan .plan__scena { touch-action: pan-y; }
.mobilno .plan__strelica, .plan-slobodan .plan__strelica {
  position: absolute; z-index: 4; top: 30%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(251, 247, 240, 0.92); color: #1B241E; box-shadow: var(--sc-e2); font: 500 1.05rem/1 var(--sc-font-text); cursor: pointer;
  transition: opacity 220ms var(--sc-ease-out);
}
.mobilno .plan__strelica--levo, .plan-slobodan .plan__strelica--levo { left: 0.6rem; }
.mobilno .plan__strelica--desno, .plan-slobodan .plan__strelica--desno { right: 0.6rem; }
.mobilno .plan__strelica:disabled, .plan-slobodan .plan__strelica:disabled { opacity: 0; pointer-events: none; }
/* računar: strelice uz levu ivicu i levo od natpisa, na sredini visine */
@media (min-width: 861px) {
  .plan-slobodan .plan__strelica { top: 50%; width: 3rem; height: 3rem; }
  .plan-slobodan .plan__strelica--levo { left: 1.5rem; }
  .plan-slobodan .plan__strelica--desno { right: calc(min(25rem, 31vw) + max(2.5rem, 4vw) + 1.25rem); }
}
@media (hover: hover) and (pointer: fine) { .plan-slobodan .plan__strelica:hover { background: #1B241E; color: #FBF6EE; } }
.plan__indeks button {
  height: 2.75rem; border: 1px solid var(--linija); border-radius: 2px; background: transparent; color: var(--sc-ink);
  font: 500 1rem/1 var(--sc-font-text); cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms;
}
.plan__indeks button.je-aktivna { background: var(--sc-ink); color: var(--kost); border-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .plan__indeks button:hover { border-color: var(--sc-ink); } }
.plan__rezerva { display: none; position: absolute; inset: 0; padding: calc(var(--traka-h) + 1rem) 0.75rem 22rem; place-items: center; }
.bez-3d .plan__rezerva { display: grid; }
.bez-3d .plan__platno, .bez-3d .plan__oznake { display: none; }
.plan__rezerva-okvir { position: relative; width: 100%; max-width: 70rem; }
.plan__rezerva-okvir img { width: 100%; height: auto; border-radius: 2px; }
.plan__tacka { position: absolute; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; border: 0; border-radius: 2px; background: #FBF7F0; color: #1B241E; font: 600 1rem/1 var(--sc-font-text); box-shadow: var(--sc-e2); cursor: pointer; }
@media (min-width: 861px) {
  .plan__etiketa { left: auto; right: max(2.5rem, 4vw); bottom: auto; top: 50%; transform: translateY(-50%); width: min(25rem, 31vw); padding: 1.6rem 1.6rem 1.3rem; }
  .plan__etiketa-sadrzaj { min-height: 12rem; gap: 0.5rem; }
  .plan__rezerva { padding: calc(var(--traka-h) + 2rem) calc(min(25rem, 31vw) + 6vw) 2rem 4vw; }
}

/* ----------------------------------------------- svetlo: dan u veče -- */
.svetlo { --q: 0; --sumrak: 0; --vece: 0; background: var(--kost); }
/* podloga i tekst prelaze iz dana u veče postepeno, zajedno sa slikom (--vece klizi 0..1) */
.svetlo__scena {
  height: 100svh; display: grid; grid-template-rows: 66svh 1fr; overflow: hidden;
  background: color-mix(in oklab, var(--suma) calc(var(--vece) * 100%), var(--kost));
}
.svetlo__kadar { position: relative; margin: 0; overflow: hidden; background: #2a2219; container-type: size; }
/* platno = slika 1199 x 1312 kao object-fit: cover (62 % 50 %); uveče kadar blago prilazi vatri i svećama */
.svetlo__platno {
  --pw: max(100cqw, 100cqh * 1199 / 1312); --ph: max(100cqh, 100cqw * 1312 / 1199);
  position: absolute; width: var(--pw); height: var(--ph);
  left: calc((100cqw - var(--pw)) * 0.62); top: calc((100cqh - var(--ph)) * 0.5);
  transform: scale(calc(1.02 + var(--q) * 0.04 + var(--vece) * 0.1)); transform-origin: 68% 62%;
}
.svetlo__slika { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.svetlo__slika--sumrak { opacity: var(--sumrak); }
.svetlo__slika--vece { opacity: var(--vece); }
/* živi plamen preko svih slika na kojima nešto gori (vatra.js postavlja mesto i veličinu) */
.plamen { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.svetlo__tekst {
  position: relative; display: grid; align-content: start; gap: 0.75rem; padding: 1.6rem var(--sc-gutter) 1.4rem;
  color: color-mix(in oklab, #ECE4D6 calc(var(--vece) * 100%), var(--sc-ink));
}
.svetlo.je-vece .svetlo__tekst { --sc-ink-soft: #A9B2A7; --linija: rgba(236,228,214,.18); }
.svetlo__faze { position: relative; display: grid; }
.svetlo__faza { grid-area: 1 / 1; margin: 0; max-width: 36ch; color: inherit; opacity: 0; transform: translateY(6px); transition: opacity 900ms var(--sc-ease-out), transform 900ms var(--sc-ease-out); }
.svetlo[data-faza="0"] .svetlo__faza[data-f="0"], .svetlo[data-faza="1"] .svetlo__faza[data-f="1"], .svetlo[data-faza="2"] .svetlo__faza[data-f="2"] { opacity: 1; transform: none; }
.svetlo__sat { display: flex; gap: 1.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.svetlo__sat button {
  padding: 0.7rem 0 0.45rem; border: 0; border-bottom: 1px solid transparent; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; opacity: 0.45;
  transition: opacity 700ms, border-color 700ms;
}
.svetlo__sat button:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 3px; }
.svetlo__savet { display: none; margin: 0; font-size: 0.85rem; opacity: 0.72; }
/* telefon: doba dana se bira prevlačenjem po slici levo-desno (uspravno ide skrol strane) */
.mobilno .svetlo__savet, .svetlo-slobodno .svetlo__savet { display: block; }
.mobilno .svetlo__kadar, .svetlo-slobodno .svetlo__kadar { touch-action: pan-y; }
/* telefon: providne strelice na slici, jedva primetne (Markov zahtev): tanka svetla linija sa
   tamnim obodom, da se vidi i na danu i uveče, bez zamućenja i senki (bez trzaja na prvom prikazu) */
.svetlo__strelica { display: none; }
.mobilno .svetlo__strelica, .svetlo-slobodno .svetlo__strelica {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 252, 245, 0.34); background: rgba(18, 14, 10, 0.16); color: rgba(255, 252, 245, 0.92);
  opacity: 0.85; cursor: pointer; transition: opacity 400ms var(--sc-ease-out), background-color 160ms;
}
.mobilno .svetlo__strelica--levo, .svetlo-slobodno .svetlo__strelica--levo { left: 0.6rem; }
.mobilno .svetlo__strelica--desno, .svetlo-slobodno .svetlo__strelica--desno { right: 0.6rem; }
.mobilno .svetlo__strelica svg, .svetlo-slobodno .svetlo__strelica svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mobilno .svetlo__strelica svg .senka, .svetlo-slobodno .svetlo__strelica svg .senka { stroke: rgba(20, 16, 12, 0.28); stroke-width: 3.4; }
.mobilno .svetlo__strelica:active, .svetlo-slobodno .svetlo__strelica:active { background: rgba(255, 252, 245, 0.22); }
.mobilno .svetlo__strelica:disabled, .svetlo-slobodno .svetlo__strelica:disabled { opacity: 0; pointer-events: none; }
.svetlo[data-faza="0"] .svetlo__sat [data-f="0"], .svetlo[data-faza="1"] .svetlo__sat [data-f="1"], .svetlo[data-faza="2"] .svetlo__sat [data-f="2"] { opacity: 1; border-color: currentColor; }
/* računar: veće strelice dalje od ivice slike, jasnije pod mišem; slika se može prevući mišem */
@media (min-width: 861px) {
  .svetlo-slobodno .svetlo__strelica { width: 3.25rem; height: 3.25rem; }
  .svetlo-slobodno .svetlo__strelica--levo { left: 1.5rem; }
  .svetlo-slobodno .svetlo__strelica--desno { right: 1.5rem; }
  .svetlo-slobodno .svetlo__strelica svg { width: 1.4rem; height: 1.4rem; }
  .svetlo-slobodno .svetlo__kadar { cursor: grab; user-select: none; }
}
@media (hover: hover) and (pointer: fine) {
  .svetlo-slobodno .svetlo__strelica:hover { opacity: 1; background: rgba(18, 14, 10, 0.32); border-color: rgba(255, 252, 245, 0.6); }
}
@media (min-width: 861px) {
  .svetlo__scena { grid-template-rows: 1fr; grid-template-columns: 58vw 1fr; }
  .svetlo__tekst { padding: 0 6vw 0 4.5vw; gap: 1.2rem; align-content: center; }
  .svetlo__tekst .naslov { font-size: var(--sc-t-3xl); }
  .svetlo__faza { font-size: 1.1rem; line-height: 1.55; }
}

/* ----------------------------------------------------------- sobe pan -- */
.sobe__scena { height: 100svh; display: flex; align-items: center; overflow: hidden; }
.sobe__sina { display: flex; align-items: flex-end; gap: 5vw; padding: calc(var(--traka-h) + 1rem) var(--sc-gutter) 0; will-change: transform; }
.sobe__uvod, .sobe__kraj { flex: 0 0 auto; width: min(76vw, 22rem); display: grid; gap: 1rem; align-self: center; }
.sobe__uvod p, .sobe__kraj p { margin: 0; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.55; }
.sobe__uvod .naslov { font-size: var(--sc-t-3xl); }
.sobe__kraj .dugme { justify-self: start; }
.soba { flex: 0 0 auto; margin: 0; width: 76vw; }
.soba img { width: 100%; height: 54svh; object-fit: cover; border-radius: 2px; box-shadow: var(--sc-e3); }
.soba figcaption, .ritual figcaption { display: grid; gap: 0.2rem; padding-top: 0.9rem; border-top: 0; }
.soba figcaption strong, .ritual figcaption strong { font: 400 1.6rem/1.05 var(--sc-font-display); }
.soba figcaption span, .ritual figcaption span { color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.45; max-width: 34ch; }
@media (min-width: 861px) {
  /* natpisi ispod slika (Markov zahtev 12.11.2026: na računaru „premali i neupečatljivi"): krupniji
     naziv, svetliji i veći opis, tanka bakarna crta iznad naziva kao znak sajta */
  .soba figcaption, .ritual figcaption { gap: 0.4rem; padding-top: 1.2rem; }
  .soba figcaption::before, .ritual figcaption::before { content: ""; width: 2.2rem; height: 1px; margin-bottom: 0.45rem; background: var(--sc-accent); }
  .soba figcaption strong, .ritual figcaption strong { font-size: clamp(1.9rem, 1.2rem + 1vw, 2.4rem); }
  .soba figcaption span, .ritual figcaption span { font-size: 1.08rem; line-height: 1.5; max-width: 38ch; color: color-mix(in oklab, var(--sc-ink) 80%, transparent); }
  .sobe__sina { gap: 3.5vw; }
  .soba { width: auto; }
  /* širina iz width/height slike i pre učitavanja (bez nje je traka skakala ~125 px u stranu) */
  .soba img { width: auto; height: 62svh; max-height: 46rem; }
  .soba--siroka img { width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .sobe .soba { opacity: calc(0.82 + 0.18 * min(1, max(0, var(--sc-p, 0) * 6 - var(--i, 0) * 0.9))); }
}
/* telefon: sobe su obična vodoravna traka telefona, bez zakačinjanja i bez pomeranja iz skripte
   (to je seckalo): klizi izvorno i staje na svakoj sobi */
.mobilno .sobe__scena {
  position: relative; height: auto; display: block; padding: 2.5rem 0 2.5rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sc-gutter); scrollbar-width: none;
}
.mobilno .sobe__scena::-webkit-scrollbar { display: none; }
.mobilno .sobe__sina { width: max-content; padding: 0 var(--sc-gutter); transform: none !important; will-change: auto; }
.mobilno .sobe__sina > * { scroll-snap-align: center; }
.mobilno .sobe .soba { opacity: 1; }

/* -------------------------------------------- bazen, sauna, đakuzi -- */
.rituali { padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem); }
.rituali__glava { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.rituali__glava p { margin: 0; max-width: 30ch; color: var(--sc-ink-soft); font-size: 1.1rem; }
.rituali__kadrovi { display: grid; gap: clamp(3rem, 8vw, 6rem); padding: 0 var(--sc-gutter); }
.ritual { margin: 0; }
.ritual__slika { overflow: hidden; border-radius: 2px; }
.ritual__slika img { width: 100%; height: auto; display: block; }
.ritual--bazen { width: 100%; }
.ritual--sauna { width: 82%; justify-self: end; }
.ritual--dzakuzi { width: 92%; }
@media (min-width: 861px) {
  .rituali__kadrovi { grid-template-columns: repeat(12, 1fr); align-items: start; column-gap: 2vw; row-gap: 4rem; }
  .ritual--bazen { grid-column: 1 / span 6; width: auto; }
  /* puna širina kolona od početka: uz „end" je slika bila uska dok se ne učita, pa se deo produžavao
     tokom skrola i dugmad za upit su stajala ~150 px pre forme */
  .ritual--sauna { grid-column: 8 / span 4; width: auto; margin-top: 18vw; justify-self: stretch; }
  .ritual--dzakuzi { grid-column: 3 / span 5; width: auto; margin-top: -8vw; }
}

/* ------------------------------------------------------------ dolazak -- */
.dolazak { padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 10vw, 8rem); border-top: 1px solid var(--linija); }
.dolazak__tekst { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.dolazak__tekst > p { margin: 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.6; color: var(--sc-ink-soft); }
.cinjenice { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0.5rem 0 0; border-top: 1px solid var(--linija); max-width: 46rem; }
.cinjenice div { padding: 0.9rem 0.25rem 0.9rem 0; border-bottom: 1px solid var(--linija); }
.cinjenice dt { font: 600 0.7rem/1.3 var(--sc-font-text); letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-ink-soft); }
.cinjenice dd { margin: 0.3rem 0 0; font: 400 1.3rem/1.15 var(--sc-font-display); }
.dolazak__slike { display: grid; gap: 1.5rem; padding: 0 var(--sc-gutter); }
.dolazak__slika { margin: 0; }
.dolazak__slika img { width: 100%; height: auto; border-radius: 2px; }
.dolazak__slika figcaption { padding-top: 0.6rem; font-size: 0.88rem; color: var(--sc-ink-soft); }
@media (min-width: 861px) {
  .dolazak__slike { grid-template-columns: 1.6fr 1fr; align-items: end; gap: 2.5vw; }
  .cinjenice { grid-template-columns: repeat(4, 1fr); }
}

.vizuelno-skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------- mapa -- */
/* Lokacija: Google mapa se učitava tek na klik (do tada nema poziva ka Google-u ni kolačića) */
.mapa { display: grid; gap: 0.6rem; max-width: 46rem; margin-top: 0.4rem; }
.mapa__okvir { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--linija); border-radius: 2px; overflow: hidden; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.mapa__okvir iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.mapa__zamena {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.75rem; padding: 1rem; text-align: center;
  background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
}
.mapa__ikona { width: 2rem; height: 2rem; color: var(--sc-accent); }
.mapa__adresa { margin: 0; display: grid; gap: 0.2rem; }
.mapa__adresa strong { font: 400 1.6rem/1.1 var(--sc-font-display); }
.mapa__adresa span { color: var(--sc-ink-soft); font-size: 0.9rem; }
.mapa__napomena { margin: 0; font-size: 0.82rem; color: var(--sc-ink-soft); }
.mapa__napomena a { color: var(--sc-ink); text-underline-offset: 0.18em; }

/* --------------------------------------------------------------- cene -- */
/* svetla traka između lokacije i upita; računar: tabela, telefon: svaka kuća je kartica */
.cene { padding: clamp(4rem, 10vw, 7rem) 0; background: var(--kost); color: var(--sc-ink); }
.cene__sadrzaj { display: grid; gap: 1.6rem; max-width: 74rem; margin: 0 auto; padding: 0 var(--sc-gutter); }
.cene__glava { display: grid; gap: 0.9rem; }
.cene__glava p { margin: 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.55; color: var(--sc-ink-soft); }
.cene table { width: 100%; border-collapse: collapse; }
.cene th, .cene td { text-align: left; vertical-align: top; }
.cene thead th { padding: 0 0.8rem 0.75rem 0; font: 600 0.7rem/1.3 var(--sc-font-text); letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-ink-soft); border-bottom: 1px solid var(--linija); }
.cene tbody th, .cene tbody td { padding: 1.05rem 0.8rem 1.05rem 0; border-bottom: 1px solid var(--linija); font-size: 1rem; font-weight: 400; }
.cene small { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--sc-ink-soft); }
.cene__kuca { display: block; font: 400 1.55rem/1.05 var(--sc-font-display); }
.cene__tip { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--sc-ink-soft); }
.cene__cena { font: 400 1.4rem/1.1 var(--sc-font-display) !important; white-space: nowrap; }
.cene__radnje { white-space: nowrap; text-align: right; }
.cene__radnje .dugme { min-height: 2.5rem; padding: 0.5em 0.95em; font-size: 0.86rem; }
.cene__radnje .dugme + .dugme { margin-left: 0.4rem; }
.cene__sve { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cene__sve li { padding: 0.45rem 0.75rem; border: 1px solid var(--linija); border-radius: 2px; font-size: 0.9rem; }
.cene__napomena { margin: 0; max-width: 72ch; font-size: 0.85rem; line-height: 1.5; color: var(--sc-ink-soft); }
.cene__dugmad { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 860px) {
  .cene thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cene table, .cene tbody { display: block; }
  .cene tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--linija); }
  .cene tbody th, .cene tbody td { padding: 0; border: 0; }
  .cene tbody th { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 0.6rem; }
  .cene__tip { margin: 0; }
  /* cena gore desno, pored naziva kuće (kartica je niža za jedan red) */
  .cene tbody .cene__cena { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .cene tbody td.cene__cena::before { content: none; }
  .cene tbody td.cene__cena::after { content: "bez PDV-a"; display: block; margin-top: 0.2rem; font: 400 0.72rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
  .cene td[data-o]::before { content: attr(data-o); display: block; margin-bottom: 0.15rem; font: 600 0.66rem/1.3 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
  .cene__radnje { grid-column: 1 / -1; text-align: left; }
}

/* --------------------------------------------------------------- upit -- */
.upit { position: relative; }
.upit__scena { position: relative; display: grid; min-height: 100svh; }
.upit__pozadina { position: relative; height: 40svh; overflow: hidden; }
.upit__pozadina img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.upit__pozadina::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--suma)); }
.upit__ploca { position: relative; z-index: 1; display: grid; gap: 1rem; padding: 0.5rem var(--sc-gutter) 2rem; max-width: 40rem; }
.upit__ploca .naslov { font-size: var(--sc-t-3xl); }
.upit__uvod { margin: 0; color: var(--sc-ink-soft); font-size: 1.05rem; max-width: 40ch; }
.upit__forma { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.polje { display: grid; gap: 0.4rem; }
.polje span { font: 600 0.7rem/1.2 var(--sc-font-text); letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-ink-soft); }
.polje i { font-style: normal; letter-spacing: 0.02em; text-transform: none; font-weight: 500; opacity: 0.8; }
.polje input, .polje select, .polje textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(236,228,214,.28); border-radius: 2px;
  background: rgba(236,228,214,.05); color: #ECE4D6; font-size: 1rem; line-height: 1.4;
  transition: border-color 160ms, background-color 160ms;
}
/* poruka raste sa tekstom; bez ugla za razvlačenje: Chrome ga crta posebnim programom koji se
   prevodi tek kad forma prvi put uđe u ekran, pa je skrol tu zastajao oko 0,13 s */
.polje textarea { resize: none; field-sizing: content; min-height: 5.6rem; max-height: 14rem; }
/* polje sa greškom staje ispod trake, sa svojim natpisom (pregledač ga skroluje u vidno polje) */
.polje input, .polje select, .polje textarea { scroll-margin-top: calc(var(--traka-h) + 2.4rem); }
.polje select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ECE4D6 50%), linear-gradient(135deg, #ECE4D6 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.polje select option { color: #1B241E; background: #F5F1EA; }
.polje input:focus-visible, .polje select:focus-visible, .polje textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); background: rgba(236,228,214,.08); }
.polje input:user-invalid { border-color: #E08A6A; }
.upit__dno { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.4rem; }
.upit__napomena { margin: 0; flex: 1 1 13rem; font-size: 0.8rem; line-height: 1.45; color: var(--sc-ink-soft); }
.upit__napomena a, .upit__poruka a, .podnozje a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.dugme[disabled] { opacity: 0.65; cursor: progress; }
/* zamka za robote: polje je van ekrana i van redosleda tastature */
.upit__zamka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.upit__poruka { margin: 0; min-height: 1.4em; font-size: 0.95rem; line-height: 1.45; }
.upit__poruka.je-ok { color: #B9D3A6; }
.upit__poruka.je-greska { color: #F0B48C; }
.upit__kontakt { display: grid; gap: 0.55rem; padding-top: 1.1rem; border-top: 1px solid var(--linija); }
.upit__brojevi { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.upit__brojevi li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.upit__broj, .upit__mejl { font: 400 1.3rem/1.3 var(--sc-font-display); color: var(--sc-ink); text-decoration: none; white-space: nowrap; }
.upit__mejl { justify-self: start; }
.upit__app { font-size: 0.86rem; color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 0.18em; }
.upit__broj:hover, .upit__mejl:hover, .upit__app:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.upit__poruka a[href^="tel:"] { white-space: nowrap; }
.podnozje { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline; padding: 1.5rem var(--sc-gutter) calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linija); color: var(--sc-ink-soft); font-size: 0.82rem; }
.podnozje__ime { font: 500 1rem/1 var(--sc-font-text); color: var(--sc-ink); }
@media (min-width: 861px) {
  .upit__scena { grid-template-columns: 52vw 1fr; grid-template-rows: 1fr auto; }
  .upit__pozadina { grid-row: 1 / span 2; height: auto; min-height: 100svh; }
  .upit__pozadina::after { inset: 0 0 0 auto; width: 40%; height: auto; background: linear-gradient(to right, transparent, var(--suma)); }
  .upit__ploca { align-content: center; padding: calc(var(--traka-h) + 2rem) 5vw 2rem 4vw; }
  .upit__forma { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .polje--kuca, .polje--siroko, .upit__dno, .upit__poruka { grid-column: 1 / -1; }
  .podnozje { grid-column: 2; }
}

/* ------------------------------------------------------ kartica kuće -- */
.kartica { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: #1B241E; overflow: hidden; }
.kartica::backdrop { background: rgba(14, 19, 16, 0.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mobilno .kartica::backdrop { background: rgba(14, 19, 16, 0.8); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kartica[open] .kartica__okvir { animation: kartica-ulaz 360ms var(--sc-ease-drawer) both; }
@keyframes kartica-ulaz { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.kartica__okvir { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #F5F1EA; display: grid; grid-template-rows: auto 1fr; }
.kartica__galerija-okvir { position: relative; background: #2a2620; }
.kartica__galerija { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 56svh; }
.kartica__galerija::-webkit-scrollbar { display: none; }
.kartica__slika { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.kartica__slika picture { display: contents; }
.kartica__slika img { width: 100%; height: 100%; object-fit: cover; }
.kartica__slika figcaption { position: absolute; left: 0.9rem; bottom: 3.6rem; right: 4rem; padding: 0.35rem 0.6rem; background: rgba(245,241,234,.92); color: #1B241E; font-size: 0.8rem; line-height: 1.35; border-radius: 2px; justify-self: start; width: fit-content; max-width: calc(100% - 5rem); }
.kartica__kontrole { position: absolute; left: 0; right: 0; bottom: 0.75rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; pointer-events: none; }
.kartica__kontrole > * { pointer-events: auto; }
.kartica__strelica { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 2px; background: rgba(245,241,234,.92); color: #1B241E; font-size: 1.1rem; cursor: pointer; }
.kartica__strelica:disabled { opacity: 0.4; cursor: default; }
.kartica__brojac { min-width: 4rem; text-align: center; padding: 0.55rem 0.6rem; background: rgba(20,24,21,.6); color: #F5F1EA; font: 500 0.82rem/1 var(--sc-font-text); border-radius: 2px; font-variant-numeric: tabular-nums; }
.kartica__telo { display: grid; align-content: start; gap: 0.7rem; padding: 1.4rem var(--sc-gutter) 2rem; --sc-ink: #1B241E; --sc-ink-soft: #55605A; --sc-canvas: #F5F1EA; --linija: rgba(27,36,30,.16); --sc-accent: #8C4F25; --sc-accent-ink: #FBF6EE; }
.kartica__naslov { margin: 0; font: 400 clamp(2.6rem, 2rem + 2vw, 3.6rem)/0.95 var(--sc-font-display); letter-spacing: -0.015em; }
.kartica__kratko { margin: 0; font-size: 1.05rem; color: #3F4A43; max-width: 34ch; }
.kartica__stavke { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; border-top: 1px solid var(--linija); }
.kartica__stavke li { padding: 0.7rem 0; border-bottom: 1px solid var(--linija); font-weight: 500; }
.kartica__mapa { margin: 0.4rem 0; }
.kartica__mapa-okvir { position: relative; aspect-ratio: 1200 / 410; border-radius: 2px; overflow: hidden; background: url(../slike/plan-1600.webp) no-repeat; background-size: 133.33% auto; background-position: 25% 47.3%; }
.kartica__mapa-kuca { position: absolute; left: var(--mx0); top: var(--my0); width: var(--mw); height: var(--mh); outline: 2px solid #C47A35; outline-offset: 0; background: rgba(196,122,53,.22); border-radius: 1px; }
.kartica__cena { margin: 0.2rem 0 0; font: 400 1.5rem/1 var(--sc-font-display); color: #1B241E; }
.kartica__cena small, .etiketa__cena small { font: 400 0.78rem/1.2 var(--sc-font-text); font-style: normal; color: #55605A; }
.kartica__kontakt { margin: 0; font-size: 0.85rem; color: #55605A; }
.kartica__kontakt a { color: #1B241E; text-underline-offset: 0.18em; }
.kartica__upit { justify-self: start; margin-top: 0.3rem; }
.kartica__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linija); }
.kartica__nav button { border: 0; background: none; padding: 0.6rem 0; color: #1B241E; font: 500 0.95rem/1 var(--sc-font-text); cursor: pointer; min-height: 2.75rem; }
.kartica__nav button:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.kartica__zatvori { position: absolute; top: calc(0.6rem + env(safe-area-inset-top)); right: 0.6rem; z-index: 2; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 2px; background: rgba(245,241,234,.94); color: #1B241E; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--sc-e1); }
html.ima-karticu { overflow: hidden; }
/* deo sa koracima (kuće, doba dana) drži skrol: na dodirnim ekranima strana ne klizi sama */
html.ima-korake--dodir { overflow: hidden; }
@media (min-width: 861px) {
  .kartica__okvir { inset: 4vh 3vw; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.75fr) minmax(22rem, 1fr); overflow: hidden; box-shadow: var(--sc-e3); border-radius: 2px; }
  .kartica__galerija-okvir, .kartica__telo { min-height: 0; }
  .kartica__galerija { height: 100%; }
  .kartica__galerija-okvir { height: 100%; background: #1d1a16; }
  .kartica__slika img { object-fit: contain; }
  .kartica__telo { overflow-y: auto; padding: 2.4rem 2.4rem 2rem; }
  .kartica__slika figcaption { bottom: 4rem; }
}

/* ----------------------------------------------------- manje pokreta -- */
@media (prefers-reduced-motion: reduce) {
  .uvod__sloj, .uvod__ime, .uvod__kuce { transform: none !important; }
  .plan__etiketa-sadrzaj.je-uslo > * { animation: none; }
  .svetlo__platno { transform: none; }
  .kartica[open] .kartica__okvir { animation: none; }
}

/* -------------------------------------------- otvorena kuća (maketa) -- */
/* Ceo ekran: maketa jedne kuće po tlocrtu; gore naslov i „Ceo niz", dole prizemlje/sprat i radnje. */
html.ima-maketu { overflow: hidden; }
.maketa { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--kost); color: #1B241E; overflow: hidden; }
.maketa::backdrop { background: var(--kost); }
.maketa[open] { animation: maketa-ulaz 420ms var(--sc-ease-out, ease-out) both; }
@keyframes maketa-ulaz { from { opacity: 0; } to { opacity: 1; } }
.maketa__scena { position: absolute; inset: 0; }
.maketa__platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.maketa__platno:active { cursor: grabbing; }
.maketa__oznake { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.maketa__soba {
  position: absolute; left: 0; top: 0; padding: 0.3rem 0.55rem; border: 0; border-radius: 2px;
  background: rgba(250, 247, 241, 0.94); color: #1B241E; font: 500 0.74rem/1.1 var(--sc-font-text); white-space: nowrap;
  box-shadow: 0 1px 0 hsl(30 25% 18% / 0.12); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.maketa__soba.je-vidljiva { opacity: 1; visibility: visible; transition-delay: 0s; }
.maketa__soba.ima-sliku { pointer-events: auto; cursor: pointer; }
.maketa__soba.ima-sliku::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border-radius: 50%; background: #B8712F; vertical-align: 0.05em; }
.maketa__soba.je-izabrana { background: #1B241E; color: #FBF6EE; }
.maketa__glava { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: max(0.9rem, env(safe-area-inset-top)) var(--sc-gutter, 1rem) 0; pointer-events: none; }
.maketa__glava > * { pointer-events: auto; }
/* naslov na svetloj podlozi: iza makete je sada pravo okruženje (livada, ulica, drveće), ne bež */
.maketa__glava > div { padding: 0.55rem 0.85rem 0.6rem; border-radius: 2px; background: rgba(250,247,241,.9); }
.maketa__naslov { margin: 0.15rem 0 0; font: 400 clamp(2.2rem, 1.8rem + 2vw, 3.4rem)/0.95 var(--sc-font-display); letter-spacing: -0.015em; }
.maketa__zatvori { min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgba(27,36,30,.22); border-radius: 2px; background: rgba(250,247,241,.94); color: #1B241E; font: 500 0.9rem/1 var(--sc-font-text); cursor: pointer; }
.maketa__dno { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.6rem; justify-items: center; padding: 0 var(--sc-gutter, 1rem) max(0.9rem, env(safe-area-inset-bottom)); pointer-events: none; }
.maketa__dno > * { pointer-events: auto; }
.maketa__nivoi { display: inline-flex; padding: 3px; border-radius: 2px; background: rgba(250,247,241,.94); box-shadow: 0 1px 0 hsl(30 25% 18% / 0.12); }
.maketa__nivoi button { min-height: 2.75rem; min-width: 7.5rem; padding: 0 1rem; border: 0; border-radius: 2px; background: transparent; color: #1B241E; font: 500 0.92rem/1 var(--sc-font-text); cursor: pointer; }
.maketa__nivoi button[aria-pressed="true"] { background: #1B241E; color: #FBF6EE; }
.maketa__savet { margin: 0; max-width: 34rem; padding: 0.3rem 0.6rem; border-radius: 2px; background: rgba(250,247,241,.88); text-align: center; font-size: 0.78rem; line-height: 1.35; color: #3F4A43; pointer-events: none; }
.maketa__radnje { display: flex; gap: 0.5rem; }
.maketa__radnje .dugme { min-height: 2.75rem; }
/* „Fotografije" stoji preko 3D travnjaka: svetla podloga kao ostali natpisi makete */
.maketa__radnje .dugme:not(.dugme--puno) { background: rgba(250,247,241,.94); border-color: rgba(27,36,30,.22); color: #1B241E; }
.maketa__zatvori { white-space: nowrap; }
/* telefon: fotografija sobe iznad dugmadi Prizemlje/Sprat, napomena ispod naslova (ne preko njega) */
@media (max-width: 860px) {
  .maketa .maketa__slika { bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 10.4rem); }
  .maketa .maketa__napomena { left: var(--sc-gutter, 1rem); right: auto; top: calc(max(0.9rem, env(safe-area-inset-top)) + 5.6rem); }
}
.maketa__napomena { position: absolute; right: var(--sc-gutter, 1rem); top: calc(max(0.9rem, env(safe-area-inset-top)) + 3.4rem); margin: 0; padding: 0.25rem 0.5rem; border-radius: 2px; background: rgba(250,247,241,.85); font-size: 0.7rem; color: #4F5A53; pointer-events: none; text-align: right; max-width: 12rem; }
.maketa__slika { position: absolute; left: var(--sc-gutter, 1rem); right: var(--sc-gutter, 1rem); bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 8.6rem); margin: 0; background: #F5F1EA; border-radius: 2px; overflow: hidden; box-shadow: 0 10px 30px hsl(30 25% 18% / 0.22); animation: maketa-slika 300ms var(--sc-ease-out, ease-out) both; }
.maketa__slika[hidden] { display: none; }
@keyframes maketa-slika { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.maketa__slika img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #2a2620; }
.maketa__slika figcaption { padding: 0.6rem 2.8rem 0.7rem 0.8rem; font-size: 0.82rem; line-height: 1.35; }
.maketa__slika-zatvori { position: absolute; right: 0.4rem; top: 0.4rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 2px; background: rgba(245,241,234,.92); color: #1B241E; font-size: 1.3rem; cursor: pointer; }
@media (min-width: 861px) {
  .maketa__glava { padding: 1.6rem 2.5rem 0; }
  .maketa__dno { padding-bottom: 1.6rem; }
  .maketa__napomena { right: 2.5rem; top: auto; bottom: 1.8rem; }
  .maketa__slika { left: auto; right: 2.5rem; top: 6.5rem; bottom: auto; width: min(26rem, 32vw); }
  .maketa__slika img { aspect-ratio: 4 / 3; }
  .maketa__soba { font-size: 0.8rem; }
}
@media (hover: hover) and (pointer: fine) {
  .maketa__zatvori:hover, .maketa__soba.ima-sliku:hover { background: #1B241E; color: #FBF6EE; }
}
@media (prefers-reduced-motion: reduce) { .maketa[open], .maketa__slika { animation: none; } }
.maketa__naslov:focus { outline: none; }   /* fokus pri otvaranju ide na naslov, ne na dugme */
.maketa__ucitava { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; padding: 0.6rem 1rem; border-radius: 2px; background: rgba(250,247,241,.94); font: 500 0.9rem/1 var(--sc-font-text); color: #1B241E; pointer-events: none; }
.maketa__ucitava[hidden] { display: none; }