/**
 * Naselje Breza, prodajni web. Gradi se na tokenima iz assets/css/breza.css; ovdje su samo
 * komponente prodajnog weba.
 *
 * Izgled govori isti jezik kao teaser u korijenu domene: zaobljene plohe, blagi prijelazi
 * boje, tanke sjene i gumbi u obliku tablete. Teaser je taman jer stoji na jednoj slici;
 * prodajni web nosi 69 kuća, tlocrte i tablice, pa ostaje na svijetlom papiru, a tamne i
 * plave plohe su one koje nose poruku. Nijedna nova boja: svi tonovi dolaze iz breza.css.
 *
 * Redoslijed: tokeni, osnove, zaglavlje, hero, sekcije, kartice tipova, karta i kartica kuće,
 * tlocrti, iskaz, oprema, galerija, pitanja, obrazac, podnožje.
 */

/* ---------------------------------------------------------------- tokeni */

:root {
  /* Jedna ljestvica zaobljenja za cijeli web, od oznake do velike plohe. */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --r-tableta: 999px;

  /* Sjene su niske i mekane: ploha treba lebdjeti, ne vikati. */
  --sj-1: 0 1px 2px rgba(30,30,28,.04), 0 4px 12px rgba(30,30,28,.05);
  --sj-2: 0 2px 4px rgba(30,30,28,.04), 0 12px 32px rgba(30,30,28,.08);
  --sj-3: 0 10px 24px rgba(30,30,28,.10), 0 36px 80px rgba(30,30,28,.16);

  /* Plohe: blagi prijelaz umjesto pune boje, u tonovima koji već postoje. */
  --ploha-papir: linear-gradient(168deg, #FFFFFF 0%, #FCFBF8 100%);
  --ploha-tinta: linear-gradient(170deg, #FBFAF7 0%, #F1EEE7 100%);
  --ploha-plava: linear-gradient(152deg, #3A5C67 0%, #2E4A52 52%, #233B43 100%);
  --ploha-ugljen: linear-gradient(152deg, #2D2D2A 0%, #1E1E1C 55%, #161614 100%);

  /* Ritam: koliko zraka ide između sekcija i unutar njih. */
  --ritam: clamp(88px, 10vw, 160px);
  --ritam-uzak: clamp(56px, 6.5vw, 104px);

  --max-w: 1280px;
  /* Visina zaglavlja na jednom mjestu: iz nje se računa i izbornik i granica hero plohe. */
  --hdr-h: 88px;
}

/* --------------------------------------------------------------- osnove */

/*
 * Širina uključuje obrub i unutarnji razmak. Bez toga polje obrasca sa širinom 100 % i
 * razmakom naraste preko svoje plohe, pa mu desni rub strši izvan okvira obrasca.
 */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 18px; }                 /* odluka naručitelja: kupci su većinom iznad 40 godina */
body { overflow-x: hidden; background: var(--breza-bijela); }

/* Skriveno je skriveno: modal i lightbox imaju display, pa bi inače nadjačali atribut hidden. */
[hidden] { display: none !important; }

.wrap.narrow { max-width: 920px; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--plava); color: #fff; padding: 12px 18px; border-radius: var(--r-s); }
.skip:focus { left: var(--s-4); top: var(--s-4); }

.sec { padding: var(--ritam) 0; }
.sec--intro { padding-top: var(--ritam-uzak); padding-bottom: clamp(32px, 4vw, 56px); }
.sec--head { padding: clamp(124px, 14vw, 212px) 0 clamp(40px, 5vw, 72px); }
/* Naslovna ploha i prva sekcija ispod nje nose jedan razmak, ne dva zaredom. */
.sec--head + .sec { padding-top: 0; }
/* Skupine pitanja dijelovi su istog popisa, pa među njima ide pola uobičajenog razmaka. */
.sec--list { padding: var(--ritam-uzak) 0; }
.sec--list + .sec--list { padding-top: 0; }
.sec--paper { background: var(--ploha-tinta); }
.sec--dark { background: var(--ploha-ugljen); color: #fff; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: #D9D7D0; }
.sec--dark .label { color: var(--srebrna); }
.sec__lead { font-size: clamp(17px, 1.4vw, 21px); max-width: 60ch; margin-bottom: var(--s-8); }
.sec__after { margin-top: var(--s-7); }
.prose p { max-width: 68ch; }
.prose h2 { font-size: clamp(24px, 2.2vw, 30px); margin: var(--s-8) 0 var(--s-4); }

/*
 * Zrak ispod naslova. Fraunces ima duboke repove slova, pa redak koji dolazi odmah iza naslova
 * izgleda kao da mu sjedi na glavi; zato svaki naslov dobiva razmak do sljedećeg retka.
 */
h1 { line-height: 1.06; }
h2 { line-height: 1.08; }
h1 + p, h1 + .lead, h2 + p, h2 + .lead, h3 + p, h2 + .sec__lead { margin-top: var(--s-5); }
/*
 * Iza naslova nikad ne dolazi odmah ploha. Redak teksta traži 24 px, a slika, karta, kartice,
 * tablica ili popis traže puni razmak, inače se naslov zalijepi za crtež ispod sebe.
 */
/*
 * Ovo je selektor susjeda i gubi od svake klase koja sama postavi margin, pa blokovi koji
 * stoje odmah iza naslova (.steps, .std, .dist, .rows) nose razmak i sami kod sebe.
 */
h1 + *:not(p), h2 + *:not(p), .sec__lead + * { margin-top: var(--s-7); }
.roof + .label { margin-top: var(--s-4); }
.roof { display: block; width: 76px; height: auto; margin-bottom: var(--s-4); }
.center .roof { margin-left: auto; margin-right: auto; }
.label + h2 { margin-top: var(--s-3); }


/* ------------------------------------------------------- lebdeće plohe */

/*
 * Traka čiji je sadržaj zaobljena ploha: brojke (.figs), "Tko gradi" (.who) i završni poziv
 * (.cta). Sve tri nose jednak razmak i iznad i ispod sebe. Dok su imale samo donji, gornji rub
 * plohe sjedao je točno na kraj prethodne trake: obojana traka bi završila, a ploha počela bez
 * ijednog piksela razmaka i izgledale bi spojeno.
 *
 * Dodaješ li novu takvu traku, dopiši je u ovaj popis i izmjeri razmak u pregledniku; nije
 * dovoljno osloniti se na razmak prethodne sekcije, jer je on unutar njezine boje.
 */
.figs, .who, .cta { padding: var(--ritam-uzak) var(--gutter); }

a { color: var(--plava); }
.sec--dark a { color: #fff; }
.more { display: inline-block; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.more::after { content: ' ›'; }
.more--light { color: #fff; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--plava); text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- gumbi */

/*
 * Verzal nema repove slova, pa ga redak u kapsuli gura prema dolje: razmak ispod je za jedan
 * piksel manji od onoga iznad, a tekst se centrira u samoj kapsuli, ne u retku.
 */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; border-radius: var(--r-tableta); padding: 15px 26px 14px; border-width: 1.5px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--primary { box-shadow: var(--sj-1); }
.btn--primary:hover, .btn--primary:focus-visible { box-shadow: var(--sj-2); transform: translateY(-1px); }
/*
 * Zeleni gumb je jedini poziv koji nosi akciju, pa jedini i svijetli. Sjaj je zelena sjena oko
 * gumba, a preko njega svakih pet sekundi prijeđe odsjaj, kao svjetlo po staklu. Odsjaj je
 * pseudoelement iznad podloge, a ispod natpisa (negativan z-index unutar vlastitog sloja), i
 * odrezan je oblikom gumba. Pokret traje 1,4 od 5 sekundi, ostalo gumb mirno stoji.
 */
.btn--green {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, #9DB76C 0%, #8FA65B 55%, #859C53 100%);
  color: var(--ugljen); border-color: #8FA65B;
  box-shadow: 0 2px 10px rgba(143,166,91,.4);
}
.btn--green::before {
  content: ''; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.5) 50%, transparent 76%);
  transform: translateX(-130%);
}
.btn--green:hover, .btn--green:focus-visible {
  background: linear-gradient(150deg, #A8C176 0%, #9CB368 55%, #90A85E 100%);
  border-color: #9CB368; transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(143,166,91,.55);
}
@media (prefers-reduced-motion: no-preference) {
  .btn--green::before { animation: gumb-odsjaj 5s cubic-bezier(.3,0,.2,1) 1.6s infinite; }
  .btn--green:hover::before, .btn--green:focus-visible::before { animation: gumb-odsjaj-brzi .7s ease-out; }
}
@keyframes gumb-odsjaj { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes gumb-odsjaj-brzi { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/*
 * Prozirni gumb na prijelazu postaje pun. Podloga i slovo moraju se mijenjati zajedno: dok je
 * podloga postajala currentColor, a slovo ostajalo currentColor, na prijelazu su bila bijela
 * slova na bijeloj plohi i natpis bi nestao.
 */
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ugljen); color: var(--breza-bijela); border-color: var(--ugljen); }
.hero .btn--ghost, .cta .btn--ghost, .sec--dark .btn--ghost, .unit__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover, .hero .btn--ghost:focus-visible,
.cta .btn--ghost:hover, .cta .btn--ghost:focus-visible,
.sec--dark .btn--ghost:hover, .sec--dark .btn--ghost:focus-visible,
.unit__cta .btn--ghost:hover, .unit__cta .btn--ghost:focus-visible { background: #fff; color: var(--ugljen); border-color: #fff; }
.btn--small { font-size: 12px; padding: 11px 18px 10px; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* ----------------------------------------------------------- zaglavlje */

.hdr {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
  height: var(--hdr-h); padding: 0 clamp(16px, 3vw, 48px);
  background: rgba(247,245,240,.82);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(227,225,219,.9);
}


/*
 * Zajednički potpis dvaju logotipa. Breza je nositelj i veća je; RadQvist stoji uz nju u svojoj
 * najmanjoj dopuštenoj širini (150 px, priručnik). Oba znaka sjedaju na istu donju liniju, a
 * oznaka "Developer" lebdi iznad RadQvista i ne pomiče ga, inače svaki znak sjedne na svoju
 * visinu i potpis se raspadne.
 */
.lockup { display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); text-decoration: none; color: inherit; flex: 0 0 auto; }
/* Potpis se ne steže: u tijesnom zaglavlju popušta navigacija, ne logotipi. */
.lockup__breza, .lockup__div, .lockup__dev { flex: 0 0 auto; }
.lockup__breza { height: 46px; width: auto; }
.lockup__div { width: 1px; height: 36px; background: currentColor; opacity: .28; margin-bottom: 3px; }
/*
 * Širina je upisana: slika nosi max-width 100 %, a blok koji se steže na sadržaj bi tu vrijednost
 * računao iz same sebe i ispao bi nula.
 */
.lockup__dev { position: relative; display: block; width: 150px; padding-top: 13px; }
.lockup__dev > span { position: absolute; top: 0; left: 1px; font-size: 8.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .7; line-height: 1; }
.lockup__dev img { width: 150px; height: auto; display: block; }

/* Hero je sada ploha ispod zaglavlja, ne iza njega: zaglavlje je uvijek na svijetloj podlozi. */
.hdr .is-mono { display: none; }

/* Devet stavki i dva logotipa stanu u redak samo ako je razmak u samoj pločici, ne među njima. */
/* 10-11-2026, naručitelj: slova glavnog izbornika malo veća (bilo 14,5 i 13,5 px). */
.nav { display: flex; gap: 0; margin-left: auto; font-size: 16px; font-weight: 500; flex: 0 1 auto; min-width: 0; }
.nav a { color: inherit; text-decoration: none; white-space: nowrap; padding: 9px 8px; border-radius: var(--r-tableta); transition: background-color .18s ease, color .18s ease; }
.nav a:hover { background: rgba(30,30,28,.07); }
.nav a[aria-current] { background: rgba(46,74,82,.10); color: var(--plava); font-weight: 600; }
/*
 * Poziv u zaglavlju je zeleni, ne plavi: plavi se gubio među plavim oznakama navigacije i
 * tamnim logotipom. Zelena je jedina boja koja se na papiru ne pojavljuje nigdje drugdje, pa
 * oko ide ravno na nju.
 */
/* Poziv u zaglavlju nosi isti zeleni gumb; strelica se na prijelazu pomakne za tri piksela. */
.hdr__cta { white-space: nowrap; }
.hdr__cta::after { content: '›'; margin-left: .5em; font-weight: 400; transition: transform .2s ease; }
.hdr__cta:hover::after, .hdr__cta:focus-visible::after { transform: translateX(3px); }

/*
 * Prekidač jezika HR / EN (06-11-2026): vodi na parnjak iste stranice. Mala pilula, aktivni
 * jezik u plavoj; u zaglavlju je na svakoj širini, pa izbornik ne nosi drugi.
 */
.lang-sw { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--plava); text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.lang-sw span { padding: 9px 7px; border-radius: var(--r-tableta); line-height: 1; transition: background-color .18s ease; }
/* Zaglavlje je tijesno (devet stavki i dva logotipa), pa nosi samo drugi jezik: "EN" ili "HR". */
.lang-sw span.is-on { display: none; }
.lang-sw:hover span, .lang-sw:focus-visible span { background: rgba(46,74,82,.10); }
.lang-sw--menu { display: none; }

.burger { display: none; margin-left: auto; width: 46px; height: 46px; background: none; border: 0; border-radius: var(--r-tableta); cursor: pointer; color: inherit; }
.burger span, .burger span::before, .burger span::after { display: block; height: 2px; border-radius: 2px; background: currentColor; content: ''; }
.burger span { position: relative; width: 24px; margin: 0 auto; }
.burger span::before { position: absolute; top: -7px; width: 24px; }
.burger span::after { position: absolute; top: 7px; width: 24px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); top: 0; }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); top: 0; }

.menu { position: fixed; inset: var(--hdr-h) 0 0; z-index: 39; background: var(--ploha-tinta); padding: var(--s-7) var(--gutter) var(--s-8); overflow-y: auto; }
.menu nav { display: grid; gap: var(--s-2); }
.menu nav a { font-family: var(--font-serif); font-size: 30px; font-variation-settings: var(--fraunces-settings); color: var(--ugljen); text-decoration: none; padding: 6px 0; }
.menu .btn { margin: var(--s-7) 0 var(--s-8); }
.menu__dev { border-top: 1px solid var(--linija); padding-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); }
.menu__dev span { font-size: 9px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--tekst-sekundarni); max-width: 90px; }
.menu__dev img { width: 150px; }

/* Između 1481 i 1599 px puna veličina slova izbornika (16 px) ne stane uz gumb, pa je korak manja. */
@media (max-width: 1599px) {
  .nav { font-size: 15px; }
}

/* Do 1480 px zaglavlje je tijesno (s prekidačem jezika od 06-11-2026), pa se navigacija stisne umjesto da se preklopi. */
@media (max-width: 1480px) {
  .hdr { gap: 10px; }
  .nav { font-size: 14.5px; }
  .nav a { padding: 8px 5px; }
  .hdr__cta { font-size: 12px; padding: 12px 16px; }
}

/* Najuže računalo (1300 do 1365 px): hrvatski izbornik inače dodirne prekidač jezika. */
@media (max-width: 1365px) {
  .nav { font-size: 14px; }
}

/*
 * Devet stavki, dva logotipa i poziv ne stanu u jedan redak ispod 1260 px (izmjereno: na
 * 1280 ostaje 10 px zraka, na 1200 navigacija se reže). Ispod te granice ide izbornik pod
 * gumbom, u kojem RadQvist stoji na dnu, pa je i dalje na svakoj stranici.
 */
@media (max-width: 1299px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: block; margin-left: 0; }
  .lang-sw { margin-left: auto; }
  .lang-sw span { padding: 16px 12px; }
  .lockup__div, .lockup__dev { display: none; }
}

/* ---------------------------------------------------------------- hero */

/*
 * Hero je zaobljena ploha s jednakim odmakom na sve četiri strane: lijevo i desno od ruba
 * stranice, gore od zaglavlja, dolje od dna ekrana. Jedan broj, --hero-odmak, drži svo četvero,
 * pa se okvir ne može raziđi. Omjer 3:2 daje visinu iz širine, a granica po ekranu je zadnja
 * riječ, jer ploha mora stati cijela u prvi ekran.
 *
 * Odmak je ujedno i jedini pravi regulator koliko se vidi slike. Renderi su omjera 4:3, a ploha
 * koja mora stati u ekran može dobiti visinu samo tako da bude uža: na 1440 px s odmakom od
 * 36 px (širina 95 %) vidi se 72 % visine slike, sa 72 px 82 %, sa 130 px 88 %.
 */
.hero {
  position: relative; display: flex; overflow: hidden;
  background: var(--ugljen);
  --hero-odmak: max(14px, 2.5vw);
  width: calc(100% - 2 * var(--hero-odmak)); margin: var(--hero-odmak) auto 0;
  /* Ploča je stajala na samom dnu plohe; sada je u sredini, pa ispod nje ostane slike. */
  align-items: center;
  aspect-ratio: 3 / 2;
  max-height: calc(100vh - var(--hdr-h) - 2 * var(--hero-odmak));
  max-height: calc(100svh - var(--hdr-h) - 2 * var(--hero-odmak));
  min-height: 460px;
  border-radius: var(--r-xl); box-shadow: var(--sj-2);
}
.hero--tall { aspect-ratio: 29 / 20; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Video u heroju leži preko slike i pojavi se tek kad stvarno krene, kao video u plohi parka. */
.hero__img picture { display: contents; }
.hero--video .hero__img img { object-position: 50% 50%; } /* isto kao video, da se kadrovi poklope */
/* Slika ispod je prvi kadar videa, pa video smije stati preko nje gotovo odmah i bez vožnje kamere. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s linear; }
.hero__video.is-on { opacity: 1; }
.hero .hero__pauza { z-index: 3; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,26,28,.10) 25%, rgba(20,26,28,.58)); }
/* Ploča sjedi bliže lijevom rubu plohe nego što je .wrap nosi, pa ne lebdi u sredini. */
.hero__in { position: relative; z-index: 2; width: 100%; max-width: none; padding: clamp(32px, 4vw, 56px) clamp(24px, 5vw, 72px); }
.hero--desno .hero__in { display: flex; justify-content: flex-end; }

/*
 * Ploča s porukom je staklo, istog sastava kao panel na teaseru: zamućenje ide na samu ploču,
 * pa slika ispod ostaje oštra tamo gdje ploče nema, a kroz ploču se nazire.
 *
 * Tamni sloj je na 60 do 70 %, ne na 84 do 93 % kao prije, i kroz ploču se vidi što je iza nje.
 * Niže se ne ide: izmjereno na najsvjetlijem heroju (Tip S, nebo iza vrha ploče) najgora točka
 * daje 4,8:1 za oznaku mjesta, a traži se 4,5:1. Na 46 do 62 % pada na 3,3:1.
 */
.hero .plate {
  max-width: 640px; border-radius: var(--r-xl);
  padding: clamp(28px, 3.2vw, 44px) clamp(28px, 3.4vw, 48px);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(211,180,135,.07) 100%),
    linear-gradient(152deg, rgba(30,30,28,.60) 0%, rgba(22,22,20,.70) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.38);
}
.hero .plate h1 { margin: var(--s-4) 0 0; }
/*
 * Na staklu tekst mora biti svjetliji nego na punoj ploči. Izmjereno na najsvjetlijem heroju
 * (Naselje, nebo iza ploče): najgora točka podloge daje omjer 6,2:1 prema bijelom. Stari
 * #D9D7D0 bi na toj točki pao na 4,3:1, ispod traženih 4,5:1, pa paragraf ide na 94 % bijelog,
 * a oznaka mjesta na 88 %.
 */
.hero .plate p { color: rgba(255,255,255,.94); }
.hero .plate .label { color: rgba(255,255,255,.88); }
.hero__sub { margin: var(--s-5) 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/*
 * Na mobitelu je ploha uska i visoka, pa ploča s porukom pokrije gotovo cijeli render. Zato
 * hero tamo raste s porukom, a ploča se steže, da iznad nje ostane vidljiv dio slike.
 */
@media (max-width: 760px) {
  /*
   * Mobitel (naručitelj 06-11-2026): ploča preko slike pokrivala je gotovo cijeli video i
   * render. Sada je slika gore, cijela i bez ploče, a poruka ispod nje na ugljenu, u istoj
   * zaobljenoj plohi; dno slike se pretapa u ugljen. Render 4:3 vidi se cijeli, video 4:5.
   */
  .hero, .hero--tall { flex-direction: column; align-items: stretch; aspect-ratio: auto; height: auto; max-height: none; min-height: 0; }
  .hero::after { display: none; }
  .hero__img { position: relative; inset: auto; aspect-ratio: 4 / 3; flex: none; overflow: hidden; }
  /* Video naslovnice: kvadrat iz sredine izvornog kadra 2:1 (900 x 900), pa se vidi više kadra, a hero stane u prvi ekran. */
  .hero--video .hero__img { aspect-ratio: 1 / 1; }
  /*
   * Naslovnica stane cijela u vidljivi dio ekrana (naručitelj 10-11-2026: treći gumb je na iPhoneu
   * ostajao ispod ruba). Visina videa se zato računa iz visine ekrana: ekran, minus zaglavlje,
   * minus odmaci, minus sve ispod videa (natpis, naslov, tri gumba). Koliko je to "sve ispod videa"
   * mjeri ui.js i upisuje u --hero-tekst, jer ovisi o širini, jeziku i fontu; broj ovdje vrijedi
   * dok skripta ne izmjeri. Kvadrat ostaje gornja granica, a 200 px donja: na jako niskom ekranu
   * hero radije prijeđe rub nego da video postane traka. svh je visina uz vidljive trake
   * preglednika, pa se hero ne miče kad se one skupe.
   */
  .hero--video .hero__img {
    aspect-ratio: auto;
    height: clamp(200px, calc(100vh - var(--hdr-h) - 2 * var(--hero-odmak) - var(--hero-tekst, 356px)), calc(100vw - 2 * var(--hero-odmak)));
    height: clamp(200px, calc(100svh - var(--hdr-h) - 2 * var(--hero-odmak) - var(--hero-tekst, 356px)), calc(100vw - 2 * var(--hero-odmak)));
  }
  /*
   * Pretapanje dna slike u ugljen (06-11-2026). Na iPhoneu je video crtan u vlastitom sloju iznad
   * pretapanja, pa se dno videa vidjelo kao oštra crta iznad poruke. Pretapanje je sada svoj sloj
   * iznad videa (z-index, translateZ), seže piksel ispod ruba i završava punim ugljenom prije dna.
   */
  .hero__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 38%; z-index: 2; transform: translateZ(0); background: linear-gradient(rgba(30,30,28,0) 0%, rgba(30,30,28,.55) 45%, var(--ugljen) 92%); pointer-events: none; }
  .hero__video { z-index: 1; }
  .hero__in { z-index: 3; }
  .hero__in { padding: 0 clamp(16px, 4vw, 24px) clamp(20px, 5vw, 26px); margin-top: calc(var(--s-6) * -1); }
  .hero--desno .hero__in { display: block; }
  .hero .plate { max-width: none; padding: 0 var(--s-2); background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  .hero .plate h1 { margin-top: var(--s-2); }
  .hero__sub { margin-top: var(--s-3); }
  .hero__acts { margin-top: var(--s-5); gap: var(--s-2); }
}

/* spora vožnja kamere: jednom, bez vraćanja */
@media (prefers-reduced-motion: no-preference) {
  .hero__img img { animation: hero-push 16s ease-out both; }
  .hero--video .hero__img img { animation: none; }
}
@keyframes hero-push { from { transform: scale(1); } to { transform: scale(1.06); } }

/* -------------------------------------------------------------- brojke */

/*
 * Brojke stoje na plohi koja lebdi nad papirom, a ne na traci od ruba do ruba. Unutarnji
 * razmak jednak je gutteru, pa se brojke poravnaju s tekstom u sekcijama iznad i ispod.
 */
/*
 * Lebdeća ploha nosi svoj razmak sama, i iznad i ispod. Dok je imala samo donji, gornji joj je
 * rub sjedao točno na kraj prethodne trake: obojana traka bi završila, a ploha počela bez ijednog
 * piksela razmaka i izgledale bi spojeno. Isto vrijedi za .cta i .who.
 */
.figs { background: none; color: #fff; }
.figs__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-7) var(--s-6);
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) var(--gutter);
  border-radius: var(--r-xl); background: var(--ploha-plava); box-shadow: var(--sj-2);
}
.fig { display: grid; gap: var(--s-2); }
.fig__n { font-family: var(--font-serif); font-size: clamp(32px, 3.4vw, 52px); font-variation-settings: var(--fraunces-settings); line-height: 1; }
.fig__l { font-size: 14.5px; color: var(--plava-tint); line-height: 1.35; }
.figs--type { color: var(--ugljen); }
.figs--type .figs__in { background: var(--ploha-papir); border: 1px solid var(--linija); box-shadow: var(--sj-1); }
.figs--type .fig__l { color: var(--tekst-sekundarni); }

/* ----------------------------------------------------- uredničke plohe */

/*
 * Ploha sa slikom preko cijele širine i jednim retkom na njoj. Ista zaobljena ploha s odmakom
 * kao hero, pa naslovnica čita kao jedna površina; natpis stoji na istom staklu kao ploča u
 * heroju. Visina ide iz širine, u omjeru 21:9, do granice ekrana.
 */
.band { position: relative; width: calc(100% - 2 * max(14px, 2.5vw)); margin: var(--ritam-uzak) auto; aspect-ratio: 21 / 9; max-height: 82svh; min-height: 420px; border-radius: var(--r-xl); overflow: hidden; background: var(--ugljen); box-shadow: var(--sj-2); display: flex; align-items: flex-end; }
.band__img { position: absolute; inset: 0; }
.band__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Video leži točno preko slike i pojavi se tek kad stvarno krene (`is-on`), da nema crnog bljeska. */
.band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease-out; }
.band__video.is-on { opacity: 1; }
.band__pauza { position: absolute; top: var(--s-5); right: var(--s-5); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-tableta); color: #fff; cursor: pointer; background: rgba(20,26,28,.45); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .18s ease; }
.band__pauza:hover, .band__pauza:focus-visible { background: rgba(20,26,28,.7); color: #fff; }
.band__pauza .i-play { display: none; }
.band__pauza[aria-pressed="true"] .i-play { display: block; }
.band__pauza[aria-pressed="true"] .i-pauza { display: none; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,26,28,0) 45%, rgba(20,26,28,.55)); pointer-events: none; }
.band__cap {
  position: relative; z-index: 2; margin: clamp(24px, 3.5vw, 56px); max-width: 560px;
  padding: clamp(22px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px); border-radius: var(--r-l); color: #fff;
  background: linear-gradient(152deg, rgba(30,30,28,.60) 0%, rgba(22,22,20,.70) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 30px 80px rgba(0,0,0,.38);
}
.band__cap .label { color: rgba(255,255,255,.88); margin: 0 0 var(--s-3); }
.band__cap h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.band__cap p { color: rgba(255,255,255,.94); margin: var(--s-4) 0 0; }
.band__cap p:last-child { margin-bottom: 0; }
/*
 * Mobitel (naručitelj 06-11-2026): staklena ploča preko slike pokrivala je gotovo cijeli kadar.
 * Sada je kao hero: slika ili video gore, cijeli i bez ploče (4:3), a natpis ispod na ugljenu,
 * u istoj zaobljenoj plohi; dno slike se pretapa u ugljen.
 */
@media (max-width: 760px) {
  .band { flex-direction: column; align-items: stretch; aspect-ratio: auto; min-height: 0; max-height: none; }
  .band::after { display: none; }
  .band__img { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 3; overflow: hidden; }
  .band__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 38%; z-index: 2; transform: translateZ(0); background: linear-gradient(rgba(30,30,28,0) 0%, rgba(30,30,28,.55) 45%, var(--ugljen) 92%); pointer-events: none; }
  .band__video { z-index: 1; }
  .band__pauza { top: var(--s-4); right: var(--s-4); z-index: 3; }
  .band__cap {
    position: relative; z-index: 3; max-width: none; margin: calc(var(--s-6) * -1) 0 0;
    padding: 0 clamp(20px, 5.5vw, 28px) clamp(26px, 7vw, 34px);
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .band__cap h2 { font-size: clamp(28px, 8vw, 34px); }
}

/*
 * Tri slike u redu s kratkim natpisom ispod svake. Natpis nosi tvrdnju, slika je dokaz. Slike
 * su kvadratne, jer su i renderi interijera kvadratni; vanjske scene se izrežu na kvadrat.
 */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.strip__i { margin: 0; }
.strip__btn { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; border-radius: var(--r-l); box-shadow: var(--sj-1); background: var(--linija); transition: box-shadow .3s ease-out, transform .3s ease-out; }
.strip__btn:hover { box-shadow: var(--sj-2); transform: translateY(-4px); }
.strip__btn img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease-out; }
.strip__btn:hover img { transform: scale(1.05); }
.strip figcaption { margin-top: var(--s-4); font-size: 15px; color: var(--tekst-sekundarni); line-height: 1.5; }
.strip--wide .strip__btn img { aspect-ratio: 4 / 3; }
/* Naslov etaže iznad trake interijera (stranica Kuće, 06-11-2026). */
.strip__naslov { margin: var(--s-7) 0 var(--s-4); }
.sec__lead + .strip__naslov { margin-top: var(--s-6); }
@media (max-width: 760px) {
  .strip { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ------------------------------------------------------- slika i tekst */

.split__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.split--rev .split__in { direction: rtl; }
.split--rev .split__in > * { direction: ltr; }
.split__text p { max-width: 54ch; }
.split__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--sj-2); }

/*
 * Atributi width i height na slici su prezentacijski savjet i nadjačali bi aspect-ratio, pa
 * visina svugdje ide na auto; atributi ostaju zbog rezerviranog prostora dok se slika učitava.
 */
/* Slika koja se ne smije rezati (presjek, uređaj) zadržava vlastiti omjer. */
.split__img--prirodno img { aspect-ratio: auto; }
.split__img--map { background: var(--ploha-papir); padding: var(--s-5); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); }
.split__img--map img { box-shadow: none; border-radius: var(--r-s); }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.cols2--form { align-items: start; }

@media (max-width: 900px) {
  .split__in, .cols2 { grid-template-columns: 1fr; }
  .split--rev .split__in { direction: ltr; }
}

/* ------------------------------------------------------- kartice tipova */

.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.tcard { position: relative; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sj-1); display: flex; flex-direction: column; transition: transform .3s ease-out, box-shadow .3s ease-out; }
.tcard:hover { transform: translateY(-5px); box-shadow: var(--sj-2); }
.tcard__img { display: block; overflow: hidden; }
.tcard__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease-out; }
.tcard:hover .tcard__img img { transform: scale(1.04); }
.tcard__body { padding: var(--s-5) var(--s-5) var(--s-6); display: grid; gap: var(--s-2); }
.tcard__name { font-family: var(--font-serif); font-size: 26px; font-weight: 400; font-variation-settings: var(--fraunces-settings); }
.tcard__name a { text-decoration: none; color: inherit; }
.tcard__name a::after { content: ''; position: absolute; inset: 0; }
.tcard__tag { margin: 0; color: var(--tekst-sekundarni); }
.tcard__row { margin: 0; font-weight: 600; font-size: 15.5px; }
.tcard__count { margin: 0; font-size: 14px; color: var(--tekst-sekundarni); }

/* --------------------------------------------------------- ikone opreme */

/* Osam pločica u dva stupca, ikona lijevo od naziva: naziv tako nikad ne lomi u tri retka. */
.icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-4); }
.icons__i { display: flex; align-items: center; gap: var(--s-4); min-height: 72px; text-align: left; font-size: 14.5px; line-height: 1.3; color: #D9D7D0; padding: var(--s-4) var(--s-5); border-radius: var(--r-m); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .3s ease-out, background-color .25s ease, border-color .25s ease, box-shadow .3s ease-out; }
.sec--dark a.icons__i { color: #E6E4DD; text-decoration: none; }
a.icons__i:hover, a.icons__i:focus-visible { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(143,166,91,.65); box-shadow: 0 14px 34px rgba(0,0,0,.35); text-decoration: none; }

/*
 * Scena: sekcija čija pozadina prati pokazivač. Slike leže jedna preko druge iza cijele sekcije,
 * vidljiva je samo ona s `is-on`; prelazak preko pločice (ui.js) pali njezinu sliku, odlazak
 * vraća prvu. Tamni veo je jači lijevo, gdje stoji tekst, i popušta prema pločicama.
 */
/*
 * Safari (05-11-2026): s pozadinom na z-indexu -1 unutar `isolation` i staklenim pločicama
 * (backdrop-filter) iznad nje Safari nije iscrtavao promjenu slike: pločica se označila, a pozadina
 * je ostala stara, sa zaostalim mrljama u staklu. Pozadina je sada običan sloj ispod sadržaja, a
 * svaka slika svoj sloj (`will-change`), pa promjena prozirnosti uvijek ide do ekrana.
 */
.scena { position: relative; overflow: hidden; }
.scena__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scena > .wrap { position: relative; z-index: 1; }
.scena__img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease-out; will-change: opacity; transform: translateZ(0); }
.scena__img.is-on { opacity: 1; }
.scena__img img { width: 100%; height: 100%; object-fit: cover; }
.scena__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(30,30,28,.95) 0%, rgba(30,30,28,.84) 36%, rgba(30,30,28,.44) 66%, rgba(30,30,28,.28) 100%); }
.sec--dark .scena__hint { font-size: 14px; color: #B9B7B0; }
/* Bez miša nema prelaska, pa uputa ne vrijedi: na dodirnim ekranima stoji samo prva slika. */
@media (hover: none) { .scena__hint { display: none; } }
@media (max-width: 900px) {
  .scena__bg::after { background: linear-gradient(rgba(30,30,28,.95) 0%, rgba(30,30,28,.88) 40%, rgba(30,30,28,.5) 100%); }
}
@media (max-width: 560px) { .icons { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .scena__img, .icons__i { transition: none; } }

/*
 * Scena na mobitelu (naručitelj 06-11-2026, po uzoru na Apple): popis pločica pokrivao je cijelu
 * sliku, pa se promjena nije vidjela. Sada je redom: tekst, slika u okviru 4:3, vodoravni niz
 * gumba koji se lista prstom, i ispod opis odabrane opreme sa strelicama. Dodir na gumb mijenja
 * sliku i opis (ui.js), a "Više o opremi" vodi na stranicu opreme.
 */
.scena__cap { display: none; }
@media (max-width: 900px) {
  .scena { display: flex; flex-direction: column; }
  .scena > .wrap.split__in { display: contents; }
  .scena .split__text { order: 1; padding: 0 var(--gutter); }
  .scena__bg { order: 2; position: relative; inset: auto; aspect-ratio: 4 / 3; margin: var(--s-6) var(--gutter) 0; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
  .scena__bg::after { display: none; }
  .scena .icons {
    order: 3; display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding: var(--s-4) var(--gutter) 2px; margin: 0;
    scroll-padding-inline: var(--gutter);
  }
  .scena .icons::-webkit-scrollbar { display: none; }
  .scena .icons__i {
    flex: none; min-height: 44px; padding: 9px 16px 9px 12px; gap: var(--s-2); border-radius: 999px; white-space: nowrap;
    scroll-snap-align: start; font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.07);
  }
  .scena .icons__i .ico { width: 22px; height: 22px; }
  .scena .icons__i.is-on { background: rgba(143,166,91,.22); border-color: rgba(143,166,91,.9); color: #fff; }
  .scena .icons__i:hover { transform: none; box-shadow: none; }
  .scena__cap {
    order: 4; min-height: 190px; display: flex; align-items: flex-start; gap: var(--s-4); margin: var(--s-3) var(--gutter) 0;
    padding: var(--s-5); border-radius: var(--r-l); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  }
  .scena__cap-txt { flex: 1; min-width: 0; }
  .scena__cap h3 { margin: 0; color: #fff; font-size: 19px; }
  .scena__cap p { margin: var(--s-2) 0 var(--s-3); color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.5; }
  .scena__cap-nav { display: flex; gap: var(--s-2); flex: none; }
  .scena__strelica { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
  .scena__strelica:active { background: rgba(255,255,255,.18); }
  .scena .scena__hint { display: none; }
}
.ico { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.icons__i .ico { flex: 0 0 auto; width: 30px; height: 30px; color: var(--zelena); }

/* ---------------------------------------------------- tehnologije (05) */

/*
 * Svaka tehnologija je svoj blok: slika uz svoj tekst, naizmjence lijevo i desno. Prije je slika
 * stajala u ljepljivom stupcu i mijenjala se pri pomicanju, ali je trčala ispred teksta i na
 * mobitelu je nije bilo. Ovako nema ni praga ni promatrača: slika je uz tekst na koji se odnosi.
 *
 * Slika zadržava vlastiti omjer (height: auto), pa se dijagram zida i presjek prozora vide
 * cijeli. Stupac slike je nešto širi od stupca teksta, jer dijagrami nose sitne natpise.
 */
.teh__popis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ritam-uzak); }
.teh__i { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Kad slika prijeđe desno, širi stupac ide s njom, inače bi svaka druga slika bila uža. */
.teh__i:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.teh__i:nth-child(even) .teh__slika { order: 2; }
.teh__slika { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sj-2); }
.teh__slika img { display: block; width: 100%; height: auto; }
.teh__tekst { max-width: 56ch; }
.tech__n { font-family: var(--font-serif); font-size: 46px; font-variation-settings: var(--fraunces-settings); color: var(--zelena); margin: 0 0 var(--s-2); }
.tech__short { font-size: 19px; }
.is-zoom { cursor: zoom-in; }
.is-zoom:focus-visible { outline: 2px solid var(--zelena); outline-offset: 4px; }
/*
 * Oba selektora, i .teh__i i .teh__i:nth-child(even): pravilo za parne retke iznad je za jednu
 * klasu specifičnije, pa bi inače preživjelo medijski upit i parni redak bi na mobitelu ostao u
 * dva stupca sa slikom od 148 px.
 */
@media (max-width: 900px) {
  .teh__popis { gap: var(--s-9); }
  .teh__i, .teh__i:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-6); }
  .teh__i:nth-child(even) .teh__slika { order: 0; }
}

.tech-mini { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-2); }
.tech-mini li { font-weight: 600; }
.tech-mini__n { font-family: var(--font-serif); color: var(--zelena); margin-right: var(--s-2); }

/* ------------------------------------------------------------ situacija */

.situacija { background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); padding: var(--s-5); margin-bottom: var(--s-7); }
.situacija img { width: 100%; height: auto; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); margin: 0; }
.blocks dt { font-weight: 600; margin-bottom: var(--s-1); }
.blocks dd { margin: 0; color: var(--tekst-sekundarni); }

.rows { display: grid; gap: 0; margin: var(--s-7) 0 0; }
.rows > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-4); padding: var(--s-5) var(--s-4); border-bottom: 1px solid var(--linija); border-radius: var(--r-s); transition: background-color .18s ease; }
.rows > div:hover { background: rgba(255,255,255,.72); }
.rows dt { font-weight: 600; }
.rows dd { margin: 0; }
@media (max-width: 640px) { .rows > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ------------------------------------------------------------ tko gradi */

.who__in { max-width: var(--max-w); margin: 0 auto; padding: clamp(40px, 5vw, 76px) var(--gutter); border-radius: var(--r-xl); background: var(--ploha-papir); border: 1px solid var(--linija); box-shadow: var(--sj-1); display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.who__logo { width: 220px; height: auto; }
.who__link { color: var(--tekst-sekundarni); font-size: 15px; }
@media (max-width: 760px) { .who__in { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- karta */

/*
 * Karta je alat, ne ilustracija, pa dobiva širi stupac od ostatka weba: na 1440 px to je
 * 1296 px umjesto 1136, a kuće su za sedminu veće. Zaglavlje i filtri idu s njom.
 */
.sec--map { padding-top: clamp(32px, 5vw, 64px); }
.sec--map > .wrap { max-width: 1600px; }
.map__head { max-width: 760px; margin-bottom: var(--s-7); }
.map__head h1 { font-size: clamp(34px, 4.4vw, 60px); }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5); padding: var(--s-5) clamp(16px, 2vw, 28px); background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); margin-bottom: var(--s-5); }
.filters__g { display: grid; gap: var(--s-2); }
.filters__types, .filters__beds { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; background: #fff; border: 1.5px solid var(--linija); border-radius: var(--r-tableta); cursor: pointer; color: var(--ugljen); transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.chip:hover { border-color: #CFCCC3; }
/* Boja tipa je točka u pločici: lijevi rub u boji ne preživi zaobljenje. */
.chip[data-filter-type] { padding-left: 12px; display: inline-flex; align-items: center; gap: 8px; }
.chip[data-filter-type]::before { content: ''; width: 10px; height: 10px; border-radius: var(--r-tableta); background: var(--c, var(--linija)); }
.chip[aria-pressed="true"] { background: var(--ugljen); color: #fff; border-color: var(--ugljen); }
.filters__g--area { min-width: 240px; }
.filters__g--area input { width: 100%; accent-color: var(--plava); }
.filters__count { margin: 0 0 0 auto; font-size: 14.5px; color: var(--tekst-sekundarni); }

.map { position: relative; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); overflow: hidden; touch-action: none; }
.map__stage { width: 100%; }
.map__stage svg { width: 100%; height: auto; display: block; }
.map__stage .unit { cursor: pointer; transition: fill-opacity .15s ease-out, stroke-width .15s ease-out; fill-opacity: .7; }
.map__stage .unit:hover, .map__stage .unit.is-on { fill-opacity: 1; stroke: #1E1E1C; stroke-width: .4; }
.map__stage .unit.is-off { fill-opacity: .18; }
.map__stage .plot { transition: fill-opacity .15s ease-out; }
.map__stage .plot.excluded { pointer-events: none; }
.map__stage #labels text { pointer-events: none; }
.map__zoom { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 6px; }

/*
 * Snimka iz zraka ispod karte (map.js). Kad je uključena, nacrtane podloge (ceste, nogostupi,
 * vrtovi, parkirališta, terase) se skrivaju i pod kućama ostaje snimka; kuće su poluprozirne u bojama
 * tipova, međe tanke i bijele, a oznake dobivaju bijeli rub da se čitaju na fotografiji. Čestice
 * izvan obuhvata ostaju prekrivene: render je iz verzije u kojoj na GČ-11 još stoji zgrada.
 */
.map__snimka { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; font-size: 13.5px; font-weight: 600; color: var(--ugljen); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linija); border-radius: var(--r-tableta); box-shadow: var(--sj-1); cursor: pointer; transition: background-color .18s ease; }
.map__snimka:hover, .map__snimka:focus-visible { background: #fff; color: var(--ugljen); }
.map__snimka-sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #CFCCC3; transition: background-color .2s ease; flex: 0 0 auto; }
.map__snimka-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.map__snimka[aria-pressed="true"] .map__snimka-sw { background: var(--plava); }
.map__snimka[aria-pressed="true"] .map__snimka-sw::after { transform: translateX(14px); }
.map__stage .snimka { display: none; }
.map--snimka .map__stage .snimka { display: inline; }
.map--snimka .map__stage svg > rect,
.map--snimka .map__stage #sidewalk, .map--snimka .map__stage #road, .map--snimka .map__stage #garden,
.map--snimka .map__stage #paved, .map--snimka .map__stage #parking, .map--snimka .map__stage #terrace_rear,
.map--snimka .map__stage #terrace_front, .map--snimka .map__stage #plato, .map--snimka .map__stage #kerb,
.map--snimka .map__stage #park, .map--snimka .map__stage #house_upper { display: none; }
.map--snimka .map__stage .plot { fill-opacity: 0; stroke: #fff; stroke-opacity: .75; stroke-width: .25; }
.map--snimka .map__stage .plot.excluded { fill: #F7F5F0; fill-opacity: .86; stroke-opacity: 0; }
.map--snimka .map__stage .unit { fill-opacity: .62; stroke: #fff; stroke-width: .3; }
.map--snimka .map__stage .unit:hover, .map--snimka .map__stage .unit.is-on { fill-opacity: .95; stroke: #fff; stroke-width: .55; }
.map--snimka .map__stage .unit.is-off { fill-opacity: .12; stroke-opacity: .35; }
.map--snimka .map__stage #labels text, .map--snimka .map__stage #north, .map--snimka .map__stage #scale { paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: .7px; stroke-linejoin: round; }
/* Na mobitelu je karta niska, pa gumb ostaje samo prekidač; natpis čuvaju čitači ekrana. */
@media (max-width: 760px) {
  .map__snimka { left: 8px; bottom: 8px; padding: 6px; gap: 0; }
  .map__snimka-sw { width: 30px; height: 18px; }
  .map__snimka-sw::after { width: 14px; height: 14px; }
  .map__snimka[aria-pressed="true"] .map__snimka-sw::after { transform: translateX(12px); }
  .map__snimka-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.map__zoom button { width: 42px; height: 42px; font-size: 18px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linija); border-radius: var(--r-s); box-shadow: var(--sj-1); cursor: pointer; }
.map__zoom button:hover { background: #fff; }
.map__tip { position: absolute; z-index: 5; background: var(--ugljen); color: #fff; font-size: 13.5px; padding: 9px 14px; border-radius: var(--r-s); box-shadow: var(--sj-2); pointer-events: none; white-space: nowrap; }

.leg { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); list-style: none; margin: var(--s-5) 0 var(--s-3); padding: 0; font-size: 14.5px; }
.leg li { display: flex; align-items: center; gap: var(--s-2); }
.leg__sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.leg__sw--park { background: #DCE8CF; }
.leg__sw--ex { background: #ECECEA; border: 1px solid #9A988F; }
.leg__n { color: var(--tekst-sekundarni); }
.map__note { font-size: 14px; color: var(--tekst-sekundarni); }

/* kartica kuće kao panel s desne strane, na mobitelu odozdo */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); z-index: 60; background: var(--breza-bijela); border-left: 1px solid var(--linija); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--sj-3); overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.panel.is-open { transform: none; }
.panel__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: rgba(247,245,240,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linija); border-radius: var(--r-xl) 0 0 0; }
.panel__nav, .panel__close { width: 42px; height: 42px; font-size: 20px; background: #fff; border: 1px solid var(--linija); border-radius: var(--r-tableta); cursor: pointer; transition: background-color .18s ease; }
.panel__nav:hover, .panel__close:hover { background: var(--linija); }
.panel__close { margin-left: auto; }
.panel__link { margin-left: var(--s-3); font-size: 14px; }
.panel__body { padding: var(--s-6) var(--s-5) var(--s-8); }
.panel__body .wrap { padding: 0; max-width: none; }
.panel__body .crumbs, .panel__body .unit__near { display: none; }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
@media (max-width: 760px) {
  .panel { top: auto; width: 100%; height: 88vh; transform: translateY(100%); border-left: 0; border-top: 1px solid var(--linija); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .panel.is-open { transform: none; }
  .panel__bar { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* --------------------------------------------------------- kartica kuće */

.unit { padding: clamp(104px, 11vw, 148px) 0 var(--ritam-uzak); }
.p-unit .unit { padding-top: var(--ritam-uzak); }
.crumbs { font-size: 14px; color: var(--tekst-sekundarni); margin-bottom: var(--s-5); }
.unit__title { font-size: clamp(30px, 3.6vw, 48px); }
.unit__where { color: var(--tekst-sekundarni); margin-top: var(--s-3); }
/*
 * Brojke kuće (10-11-2026): jedna ploha, pet polja. Razmak od 1 px na podlozi boje linije crta
 * tanke razdjelnice kako god se polja prelomila; prvo polje (prodajna površina) je tamna ploha.
 */
.unit__figs { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--s-7) 0 var(--s-6); padding: 0; overflow: hidden; background: var(--linija); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-2); }
.ufig { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 26px); background: var(--ploha-papir); }
.ufig .ico { width: 26px; height: 26px; margin-bottom: 14px; color: var(--zelena); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ufig__n { margin: 0; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-size: clamp(30px, 2.7vw, 42px); font-weight: 400; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; color: var(--ugljen); white-space: nowrap; }
.ufig__n i { margin-left: .22em; font-family: var(--font-sans); font-style: normal; font-size: .44em; font-weight: 500; letter-spacing: 0; color: var(--tekst-sekundarni); }
.ufig__n em { margin: 0 .2em; font-family: var(--font-sans); font-style: normal; font-size: .44em; font-weight: 500; letter-spacing: 0; color: var(--tekst-sekundarni); }
.ufig--glavna .ufig__n em { color: rgba(255,255,255,.72); }
/* Stranica tipa: ista ploha u traci brojki; raspon površine traži šire prvo polje i nema vlastitih margina. */
.unit__figs--tip { margin: 0; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); }
.ufig__l { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.35; color: var(--tekst-sekundarni); }
.ufig__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ufig__tags span { padding: 3px 10px; font-size: 13px; line-height: 1.4; white-space: nowrap; color: var(--plava); background: rgba(46,74,82,.07); border: 1px solid rgba(46,74,82,.14); border-radius: var(--r-tableta); }
.ufig--glavna { background: var(--ploha-plava); }
.ufig--glavna .ico { color: #C9D99B; }
.ufig--glavna .ufig__n { color: #fff; font-size: clamp(34px, 3.2vw, 50px); }
.ufig--glavna .ufig__n i { color: rgba(255,255,255,.72); }
.ufig--glavna .ufig__l { color: rgba(255,255,255,.78); }
/* Uže od pet polja u redu: prodajna površina preko cijele širine, ostala četiri dva po dva. */
@media (max-width: 1000px) {
  .unit__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ufig--glavna { grid-column: 1 / -1; }
}
.panel .unit__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel .ufig--glavna { grid-column: 1 / -1; }
.panel .ufig__n { font-size: 30px; }
.panel .ufig--glavna .ufig__n { font-size: 36px; }
/* Kratki putokaz ispod brojki: kartica je duga, a oprema je ono zbog čega se kuća otvara. */
.unit__jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-8); font-size: 15px; }
.unit__jump a { font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: var(--r-tableta); background: rgba(46,74,82,.08); color: var(--plava); transition: background-color .18s ease; }
.unit__jump a:hover { background: rgba(46,74,82,.16); }
.unit__jump a::after { content: ' ↓'; }

.unit__cta { background: var(--ploha-plava); color: #fff; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-l); box-shadow: var(--sj-2); margin: var(--s-9) 0 var(--s-7); }
.unit__cta h3 { color: #fff; }
.unit__cta p { color: var(--plava-tint); }
.unit__cta .btn { margin-top: var(--s-5); }
.unit__near { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--linija); font-size: 15px; }

/* --------------------------------------------------------------- tlocrti */

.plan { margin: var(--s-9) 0; }
.plan__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.plan__tab { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; background: #fff; border: 1.5px solid var(--linija); border-radius: var(--r-tableta); cursor: pointer; color: var(--ugljen); display: inline-flex; align-items: center; gap: 8px; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.plan__tab:hover { border-color: #CFCCC3; }
.plan__tab.is-on { background: var(--ugljen); color: #fff; border-color: var(--ugljen); }
.plan__opt { display: inline-flex; align-items: center; line-height: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px 4px; border-radius: var(--r-tableta); background: var(--drvo); color: var(--ugljen); }
.plan__fig { margin: 0; }
.plan__stage { position: relative; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); padding: clamp(20px, 2.4vw, 32px); min-height: 220px; }
/*
 * Crtež je ograničen visinom, inače tlocrt u punoj širini kartice zauzme cijeli ekran i
 * konfigurator ispod njega nitko ne nađe. Okvir jedinice se mjeri prema crtežu (plan.js).
 */
.plan__svg { margin: 0 auto; transition: opacity .2s ease-out; }
.plan__svg svg { width: 100%; height: auto; }
.plan__svg.is-fading { opacity: 0; }
.plan__box { position: absolute; border: 2px solid var(--plava); border-radius: 4px; background: rgba(46,74,82,.12); pointer-events: none; }
.plan__box.is-approx { background: none; }
.plan__fig figcaption { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; font-size: 14.5px; color: var(--tekst-sekundarni); margin-top: var(--s-4); }
.plan__acts { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.plan__note { font-size: 14px; color: var(--tekst-sekundarni); margin-top: var(--s-3); }

/* ----------------------------------------------------------------- iskaz */

.iskaz { margin: var(--s-9) 0; }
.iskaz__t { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: 15.5px; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-m); overflow: hidden; }
.iskaz__t th, .iskaz__t td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--linija); }
.iskaz__t .num { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.iskaz__t thead th { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-sekundarni); }
.iskaz__floor th, .iskaz__floor td { background: rgba(46,74,82,.05); font-weight: 600; padding-top: 16px; }
.iskaz__sum tr td:first-child { color: var(--tekst-sekundarni); }
.iskaz__coef { color: var(--tekst-sekundarni); font-size: 13.5px; }
.iskaz__total td { font-weight: 600; font-size: 17px; color: var(--ugljen); border-top: 2px solid var(--ugljen); border-bottom: 0; }
.iskaz__note { font-size: 14px; color: var(--tekst-sekundarni); max-width: 70ch; }

/* --------------------------------------------------------------- oprema */

.opr { margin: var(--s-9) 0; scroll-margin-top: 110px; }
/*
 * Konfigurator stoji i na stranici tipa i na kartici kuće. Tamo gdje je on cijela sekcija
 * naslov mu mora nositi težinu sekcije, pa dobiva isto pismo i isto mjerilo kao h2.
 */
.sec > .wrap > .opr { margin: 0; }
.sec > .wrap > .opr > h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); font-optical-sizing: none; font-variation-settings: var(--fraunces-settings); letter-spacing: -0.012em; line-height: 1.08; }
.opr > h3 + .opr__lead { margin-top: var(--s-5); }
.opr__lead { max-width: 60ch; font-size: clamp(16.5px, 1.3vw, 19px); }
.opr__grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 3.4vw, 56px); align-items: start; margin-top: var(--s-7); }
.opr__std { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; gap: var(--s-3); }
.opr__std li { padding-left: 32px; position: relative; font-size: 15.5px; color: var(--tekst-sekundarni); }
.opr__std li strong { color: var(--ugljen); }
.opr__std li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 9px; border-left: 2px solid var(--zelena); border-bottom: 2px solid var(--zelena); transform: rotate(-45deg); }

.opr fieldset { border: 0; padding: 0; margin: 0 0 var(--s-8); }
.opr legend { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-sekundarni); padding: 0; margin-bottom: var(--s-3); }
/* Napomena o prilagodbi za osobe s invaliditetom, na kraju konfiguratora (10-11-2026). */
.opr__pristup { display: flex; gap: 12px; align-items: flex-start; margin: var(--s-6) 0 0; padding: 14px 16px; max-width: 70ch; font-size: 15px; line-height: 1.5; color: var(--tekst-sekundarni); background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-m, 12px); }
.opr__pristup .ico { flex: none; margin-top: 1px; color: var(--plava); }
.opr__pristup strong { color: var(--ugljen); font-weight: 600; }
.opr__intro { font-size: 15px; color: var(--tekst-sekundarni); max-width: 58ch; margin-bottom: var(--s-5); }
.opr__attics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }

/*
 * Pločica opreme: odabrana dobiva plavi prsten, blagu plavu podlogu i kvačicu u kutu, a na
 * prijelazu se lagano podigne. Prsten ide kroz box-shadow, da se obrub ne deblja i ne pomiče
 * sadržaj pločice.
 */
.opr__attic-tile, .opr__tile {
  position: relative; font: inherit; text-align: left; padding: var(--s-5);
  background: var(--ploha-papir); border: 1.5px solid var(--linija); border-radius: var(--r-m);
  box-shadow: var(--sj-1); cursor: pointer; display: grid; gap: var(--s-2); color: var(--ugljen);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.opr__attic-tile:hover, .opr__tile:hover { transform: translateY(-2px); box-shadow: var(--sj-2); border-color: #CFCCC3; }
.opr__attic-tile.is-on, .opr__tile[aria-pressed="true"] {
  border-color: var(--plava);
  background: linear-gradient(168deg, rgba(46,74,82,.08) 0%, rgba(46,74,82,.03) 100%);
  box-shadow: inset 0 0 0 1px var(--plava), var(--sj-1);
}
/*
 * Glava pločice: sličica onoga što se bira, kao u konfiguratorima automobila. Slika ide do
 * ruba pločice, pa joj negativni razmak poništi unutarnji razmak pločice. Gdje rendera još
 * nema, ikona drži isti okvir, da pločice u retku ostanu jednake visine.
 */
.opr__tile-img, .opr__tile-ikona {
  display: block; margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
  border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; overflow: hidden;
}
.opr__tile-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease-out; }
.opr__tile:hover .opr__tile-img img { transform: scale(1.04); }
.opr__tile-ikona { display: grid; place-items: center; aspect-ratio: 3 / 2; background: linear-gradient(168deg, rgba(46,74,82,.07) 0%, rgba(46,74,82,.02) 100%); }
.opr__tile-ikona .ico { width: 34px; height: 34px; color: #8A8A87; }
.opr__tile[aria-pressed="true"] .opr__tile-ikona .ico { color: var(--plava); }
.opr__attic-tile.is-on::after, .opr__tile[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 10px; left: 12px;
  width: 22px; height: 22px; border-radius: var(--r-tableta);
  background: var(--plava); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.opr__attic-name, .opr__tile-name { font-weight: 600; padding-right: 26px; }
/* Pločice u redu su jednako visoke, pa oznaka sjeda na njihov donji rub i sve se poravnaju. */
.opr__badge { justify-self: start; align-self: end; display: inline-flex; align-items: center; line-height: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px 5px; border-radius: var(--r-tableta); background: var(--linija); color: var(--tekst-sekundarni); }
.opr__badge--opt { background: var(--drvo); color: var(--ugljen); }

/*
 * auto-fill, ne auto-fit: skupina s jednom pločicom (Krov) inače razvuče tu pločicu preko
 * cijelog retka i ispadne veća od svih ostalih. Ovako su sve pločice jednake širine.
 */
.opr__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
/* Povećalo stoji uz pločicu, a ne u njoj: gumb u gumbu nije ispravan zapis. */
.opr__okvir { position: relative; display: grid; }
.opr__okvir .opr__tile { height: 100%; }
.opr__lupa {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--r-tableta); color: var(--ugljen);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sj-1); opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.opr__okvir:hover .opr__lupa, .opr__lupa:focus-visible { opacity: 1; transform: none; }
.opr__lupa:hover { background: #fff; }
/* Na dodir nema prijelaza mišem, pa povećalo tamo stoji stalno. */
@media (hover: none) { .opr__lupa { opacity: 1; transform: none; } }
.opr__tile-short { font-size: 14px; color: var(--tekst-sekundarni); }

/*
 * Sažetak odabira stoji uz pločice koje se biraju, na istoj svijetloj plohi. Dok je bio
 * ugljen, na svijetloj je stranici djelovao kao tamna rupa i gurao oko s onoga što se bira.
 * Težinu mu daju obrub, sjena i plavi gumb, ne tamna podloga.
 */
/*
 * Sažetak odabira. Gornji dio je kuća, donji je ono što se bira, a razdvaja ih tanka linija:
 * dok je sve stajalo u jednom nizu jednakih razmaka, ploha je bila zbijena i nije se vidjelo
 * što je naslov, a što popis.
 */
.opr__sum { position: sticky; top: 118px; background: var(--ploha-papir); color: var(--ugljen); border: 1px solid var(--linija); padding: var(--s-7) var(--s-6) var(--s-6); border-radius: var(--r-l); box-shadow: var(--sj-2); display: grid; gap: var(--s-4); }
.opr__sum .label { color: var(--tekst-sekundarni); margin: 0; }
.opr__sum-unit { font-family: var(--font-serif); font-weight: 400; font-variation-settings: var(--fraunces-settings); font-size: 28px; line-height: 1.1; margin: calc(var(--s-4) * -1) 0 0; }
.opr__sum-attic { margin: 0; color: var(--plava); font-weight: 600; font-size: 15px; }
.opr__sum-list { list-style: none; margin: 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--linija); display: grid; gap: 9px; font-size: 15px; color: var(--ugljen); }
.opr__sum-list li { padding-left: 24px; position: relative; }
.opr__sum-list li::before { content: ''; position: absolute; left: 1px; top: .34em; width: 12px; height: 7px; border-left: 2px solid var(--zelena); border-bottom: 2px solid var(--zelena); transform: rotate(-45deg); }
.opr__sum-empty { color: var(--tekst-sekundarni); padding-left: 0; }
.opr__sum-empty::before { display: none; }
.opr__sum-note { font-size: 13.5px; color: var(--tekst-sekundarni); margin: 0; }
.opr__sum-more { margin: 0; font-size: 14px; }
.opr__sum .btn--primary, .opr__sum .btn--green { margin-top: var(--s-3); }
.opr__sum-more { padding-top: var(--s-2); }

@media (max-width: 900px) {
  .opr__grid { grid-template-columns: 1fr; }
  /* Zatvorena traka pokazuje samo kuću i glavni gumb, da ne pojede pola ekrana. */
  /*
   * Traka je plutajuća kartica sa zaobljenim kutovima i odmakom od rubova (06-11-2026); prije je
   * bila prilijepljena za dno, a na iPhoneu je ispod nje ostajao prostor alatne trake, pa je
   * izgledala odrezano. Oznaka i kuća više se ne preklapaju.
   */
  .opr__sum {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); top: auto; z-index: 50;
    border-radius: var(--r-l); border-width: 1px;
    box-shadow: 0 12px 40px rgba(30,30,28,.24);
    gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-3);
    max-height: calc(100svh - 120px); overflow-y: auto;
  }
  .opr__sum .label { font-size: 11px; }
  .opr__sum-unit { margin: 0; font-size: 23px; }
  .opr__sum .btn--primary, .opr__sum .btn--green { margin-top: var(--s-2); width: 100%; padding-inline: var(--s-3); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
  .opr__sum-list, .opr__sum-note, .opr__sum-more, .opr__sum .btn--ghost { display: none; }
  .opr__sum-attic { font-size: 13.5px; }
  .opr__sum.is-open .opr__sum-list, .opr__sum.is-open .opr__sum-note, .opr__sum.is-open .opr__sum-more { display: grid; }
  .opr__sum.is-open .opr__sum-attic, .opr__sum.is-open .opr__sum .btn--ghost { display: block; }
  .opr__sum::after { content: 'Dodirnite za popis opreme  \2303'; justify-self: center; font-size: 12.5px; color: var(--tekst-sekundarni); }
  .opr__sum.is-open::after { content: 'Dodirnite za zatvaranje  \2304'; }
  /* Engleska verzija (06-11-2026). */
  :lang(en) .opr__sum::after { content: 'Tap for the list of options  \2303'; }
  :lang(en) .opr__sum.is-open::after { content: 'Tap to close  \2304'; }
}

/*
 * U panelu na karti kartica je široka 640 px, a prozor je širok; medijski upit to ne vidi, pa
 * se stupci ovdje slažu jedan ispod drugoga neovisno o širini prozora.
 */
.panel .opr__grid { grid-template-columns: 1fr; }
.panel .opr__sum { position: static; }
.panel .opr__tiles, .panel .opr__attics { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* stranica Oprema */
.std { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.std li { padding-left: 32px; position: relative; }
.std li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 9px; border-left: 2px solid var(--zelena); border-bottom: 2px solid var(--zelena); transform: rotate(-45deg); }
.std__only { font-size: 13px; color: var(--tekst-sekundarni); }
.ocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.ocard { background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sj-1); display: flex; flex-direction: column; transition: transform .3s ease-out, box-shadow .3s ease-out; }
.ocard:hover { transform: translateY(-4px); box-shadow: var(--sj-2); }
.ocard__img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--linija); cursor: zoom-in; overflow: hidden; }
.ocard__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease-out; }
.ocard__img:hover img, .ocard__img:focus-visible img { transform: scale(1.05); }
/* Isti znak povećala kao u galeriji tipa (.tgal__lupa): pojavi se tek na prijelazu mišem ili fokusu. */
.ocard__img:hover .tgal__lupa, .ocard__img:focus-visible .tgal__lupa { opacity: 1; transform: none; }
.ocard__body { padding: var(--s-5) var(--s-5) var(--s-6); display: grid; gap: var(--s-2); }
.ocard__body .ico { color: var(--plava); }
.ocard__for { font-size: 13.5px; color: var(--tekst-sekundarni); margin: 0; }
.opr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.opr-list__i { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4); padding: var(--s-5); background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-m); box-shadow: var(--sj-1); }
.opr-list__i .ico { color: var(--plava); }
.opr-list__i p { margin: 4px 0 0; color: var(--tekst-sekundarni); font-size: 15px; }
.attics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.attics__i { margin: 0; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-m); box-shadow: var(--sj-1); padding: var(--s-5); }
.attics__svg svg { width: 100%; height: auto; }
/* 3D tlocrti (06-11-2026): cijeli crtež bez rezanja, prozirna pozadina na papiru, povećalo u kutu. */
.p3d { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.p3d__i { margin: 0; }
.p3d__btn { position: relative; display: block; width: 100%; padding: var(--s-3); border: 1px solid var(--linija); border-radius: var(--r-m); background: var(--ploha-papir); box-shadow: var(--sj-1); cursor: zoom-in; transition: box-shadow .3s ease-out, transform .3s ease-out; }
.p3d__btn:hover { box-shadow: var(--sj-2); transform: translateY(-4px); }
.p3d__btn img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.p3d__btn:hover .tgal__lupa, .p3d__btn:focus-visible .tgal__lupa { opacity: 1; }
.p3d figcaption { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: 15px; }
.p3d__note { margin-top: var(--s-5); font-size: 14px; color: var(--tekst-sekundarni); }
/* Pet tlocrta: prizemlje i kat veći u prvom redu, tri izvedbe potkrovlja u drugom. */
.p3d--5 { grid-template-columns: repeat(6, 1fr); }
.p3d--5 > :nth-child(-n+2) { grid-column: span 3; }
.p3d--5 > :nth-child(n+3) { grid-column: span 2; }
/* Potkrovlje je široko i nisko: izrez 3:2 uzima samo prazan papir iznad i ispod crteža. */
.p3d__i--pot .p3d__btn img { aspect-ratio: 3 / 2; object-fit: cover; }
.p3d--5 > :nth-child(-n+2) .p3d__btn img { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .p3d--5 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .p3d--5 > :nth-child(n) { grid-column: span 1; }
  .p3d--5 > :nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-4) / 2); }
  .p3d figcaption { font-size: 14px; }
}
.panel .p3d--5 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.panel .p3d--5 > :nth-child(n) { grid-column: span 1; }
.panel .p3d--5 > :nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-4) / 2); }
.u3d { margin-top: var(--s-8); }
/* Vila (06-11-2026): tri uspravna tlocrta u istom mjerilu; okvir prati crtež, ne kvadrat. */
/* 3D tlocrti S (jedna kuća, uspravni) i cijelog niza S (široki, jedan ispod drugog), 08-11-2026. */
.p3d--s { grid-template-columns: 1fr 1fr; max-width: 980px; }
.p3d--s .p3d__btn img { aspect-ratio: 1972 / 2560; }
.p3d--niz { grid-template-columns: 1fr; }
.p3d--niz .p3d__btn img { aspect-ratio: 2560 / 1258; }
.p3d--vila { grid-template-columns: repeat(3, 1fr); }
.p3d--vila .p3d__btn img { aspect-ratio: 2031 / 3603; }
@media (max-width: 760px) {
  .p3d--vila { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .p3d--vila > :nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-4) / 2); }
}
.panel .p3d--vila { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.panel .p3d--vila > :nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-4) / 2); }
/* 3D tlocrt potkrovlja u pločici izvedbe: cijeli crtež na papiru, ne izrez kao fotografija. */
.opr__tile-img--3d { background: var(--ploha-papir); border-bottom: 1px solid var(--linija); }
.opr__tile-img--3d img { object-fit: contain; padding: var(--s-2); }
.opr__attic-tile:hover .opr__tile-img--3d img { transform: none; }
.opr__okvir .opr__attic-tile { height: 100%; align-content: start; }
.attics figcaption { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: 15px; }
/* Koraci su bili zbijeni: broj uz sam tekst, redak uz redak. Sada svaki korak diše za sebe. */
.steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-7); counter-reset: s; max-width: 72ch; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-5); align-items: start; font-size: 18px; line-height: 1.55; }
.steps li span { font-family: var(--font-serif); font-size: 40px; font-variation-settings: var(--fraunces-settings); color: var(--zelena); line-height: .9; }
.steps__note { font-size: 14px; color: #A9A7A0; margin: var(--s-7) 0 0; }

/* --------------------------------------------------------------- karusel */

/*
 * Traka kartica koja se pomiče prstom ili strelicama; ništa se ne vrti samo od sebe. Kartice
 * se zaustavljaju na rubu (scroll-snap), a klizač je skriven jer posao rade strelice.
 */
.karusel { margin: var(--s-9) 0 0; }
/*
 * Puna širina: traka izlazi iz stupca i ide od ruba do ruba ekrana, a unutarnji razmak joj je
 * jednak odmaku stupca, pa prva kartica i dalje stoji u liniji s tekstom iznad. Mjeri se u
 * postotku stranice, ne u vw, da klizač ne pomakne poravnanje.
 */
.karusel--pun { margin-left: 0; margin-right: 0; }
.karusel--pun .karusel__head { max-width: var(--max-w); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
.karusel--pun .karusel__track { padding-left: max(var(--gutter), calc(50% - var(--max-w) / 2 + var(--gutter))); padding-right: var(--gutter); scroll-padding-left: max(var(--gutter), calc(50% - var(--max-w) / 2 + var(--gutter))); }
.karusel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.karusel__head .label { margin: 0; }
.karusel__nav { display: none; gap: var(--s-2); }
.karusel.is-ready .karusel__nav { display: flex; }
.karusel.is-static .karusel__nav { display: none; }
.karusel__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--r-tableta); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background-color .18s ease, border-color .18s ease, opacity .18s ease; }
.karusel__btn:hover:not([disabled]) { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.karusel__btn[disabled] { opacity: .3; cursor: default; }
.karusel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 23vw, 300px);
  gap: var(--s-5); margin: 0; padding: 0 0 var(--s-3); list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.karusel__track::-webkit-scrollbar { display: none; }
.karusel__i { scroll-snap-align: start; }

.kcard { display: grid; gap: 0; height: 100%; text-decoration: none; color: inherit; border-radius: var(--r-l); overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: transform .3s ease-out, background-color .18s ease, border-color .18s ease; }
.kcard:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); text-decoration: none; }
.kcard__img { display: block; overflow: hidden; }
.kcard__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease-out; }
.kcard:hover .kcard__img img { transform: scale(1.04); }
.kcard__body { display: grid; gap: 6px; padding: var(--s-5); align-content: start; }
.kcard__name { font-family: var(--font-serif); font-size: 24px; font-variation-settings: var(--fraunces-settings); color: #fff; line-height: 1.1; }
.kcard__row { font-size: 14.5px; color: #B9B7B0; }
.kcard__go { margin-top: var(--s-3); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zelena); }

/*
 * Kartice tehnologija: uspravna slika, broj gore na staklu, naziv i rečenica dolje na staklu.
 * Isti karusel kao tipovi, samo kartica nosi sliku preko cijele plohe.
 */
.karusel--teh { margin-top: var(--s-8); }
.karusel--teh .karusel__track { grid-auto-columns: clamp(280px, 29vw, 420px); }
.tkard { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--ugljen); box-shadow: var(--sj-1); color: #fff; text-decoration: none; transition: transform .3s ease-out, box-shadow .3s ease-out; }
.tkard:hover, .tkard:focus-visible { transform: translateY(-6px); box-shadow: var(--sj-3); text-decoration: none; color: #fff; }
.tkard__img { position: absolute; inset: 0; }
.tkard__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kadar, 50% 50%); transition: transform .7s ease-out; }
.tkard:hover .tkard__img img { transform: scale(1.05); }
.tkard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,26,28,0) 45%, rgba(20,26,28,.6)); pointer-events: none; }
.tkard__n { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 1; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-size: 26px; line-height: 1; padding: 11px 16px 8px; border-radius: var(--r-tableta); background: rgba(20,26,28,.5); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tkard__cap { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 1; display: grid; gap: 6px; padding: var(--s-5); border-radius: var(--r-m); background: rgba(20,26,28,.64); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); transition: transform .3s ease-out; }
.tkard__name { font-weight: 600; font-size: 20px; line-height: 1.2; }
.tkard__text { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.9); }
.tkard__go { margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zelena); }
@media (max-width: 760px) { .karusel--teh .karusel__track { grid-auto-columns: 82vw; } }
@media (prefers-reduced-motion: reduce) { .tkard, .tkard__img img { transition: none; } }
/*
 * Mobitel (06-11-2026): staklena ploča pokrivala je donju polovicu slike tehnologije. Sada je
 * slika gore (4:3), a naziv i opis ispod nje na ugljenu, kao kod ploha i heroja.
 */
@media (max-width: 760px) {
  .tkard { display: flex; flex-direction: column; aspect-ratio: auto; height: 100%; }
  .tkard::after { display: none; }
  .tkard__img { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 3; overflow: hidden; }
  .tkard__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%; background: linear-gradient(rgba(30,30,28,0), var(--ugljen)); pointer-events: none; }
  .tkard__cap { position: relative; inset: auto; flex: 1; margin-top: calc(var(--s-3) * -1); padding: 0 var(--s-5) var(--s-5); background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Na svijetloj plohi karusel nosi iste kartice kao i ostatak weba. */
.karusel:not(.karusel--dark) .karusel__btn { background: #fff; border-color: var(--linija); color: var(--ugljen); box-shadow: var(--sj-1); }
.karusel:not(.karusel--dark) .karusel__btn:hover:not([disabled]) { background: var(--linija); border-color: #CFCCC3; }
.karusel:not(.karusel--dark) .kcard { background: var(--ploha-papir); border-color: var(--linija); box-shadow: var(--sj-1); }
.karusel:not(.karusel--dark) .kcard:hover { box-shadow: var(--sj-2); }
.karusel:not(.karusel--dark) .kcard__name { color: var(--ugljen); }
.karusel:not(.karusel--dark) .kcard__row { color: var(--tekst-sekundarni); }
.karusel:not(.karusel--dark) .kcard__go { color: var(--plava); }

/* ---------------------------------------------------- galerija tipa kuće */

/*
 * Mozaik: prvi kadar nosi dva stupca i dva retka, ostala četiri stoje uz njega. Visina retka
 * ide iz širine ekrana, pa su sve pločice istog omjera na svakoj veličini.
 */
.tgal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 15vw, 220px); gap: var(--s-3); }
.tgal__i {
  position: relative; margin: 0; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  border-radius: var(--r-m); box-shadow: var(--sj-1); background: var(--linija);
  transition: box-shadow .3s ease-out, transform .3s ease-out;
}
.tgal__i:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--r-l); }
/*
 * Raspored po broju kadrova, da mreža od četiri stupca nikad ne ostane s rupom: tipovi imaju
 * od četiri (RL) do osam (M) kadrova. Pet je osnovni mozaik (velika i četiri male).
 */
.tgal--n4 .tgal__i:nth-child(2) { grid-column: span 2; }
.tgal--n6 .tgal__i:nth-child(2) { grid-column: span 2; grid-row: span 2; border-radius: var(--r-l); }
.tgal--n7 .tgal__i:nth-child(6), .tgal--n7 .tgal__i:nth-child(7) { grid-column: span 2; }
.tgal--n8 .tgal__i:nth-child(6) { grid-column: span 2; }
.tgal__i:hover { box-shadow: var(--sj-2); transform: translateY(-3px); }
.tgal__i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease-out; }
.tgal__i:hover img { transform: scale(1.06); }
.tgal__lupa {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-tableta); color: var(--ugljen);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sj-1); opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease;
}
.tgal__i:hover .tgal__lupa, .tgal__i:focus-visible .tgal__lupa { opacity: 1; transform: none; }
@media (hover: none) { .tgal__lupa { opacity: 1; transform: none; } }
.tgal__note { margin-top: var(--s-5); font-size: 14.5px; color: var(--tekst-sekundarni); max-width: 78ch; }
/* Galerija na kartici kuće: isti mozaik, samo s razmakom kakav nose i ostali blokovi kartice. */
.ugal { margin: var(--s-9) 0; }
/* Naslov je h2 radi redoslijeda naslova (07-11-2026), a izgleda kao h3. */
.ugal__naslov { font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1.25; font-variation-settings: normal; letter-spacing: 0; margin: 0; }
.ugal__naslov + .tgal { margin-top: var(--s-5); }
/* U panelu na karti ploha je uska, pa mozaik ide na dva stupca bez obzira na širinu prozora. */
.panel .tgal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 12vw, 150px); }
.panel .tgal__i:first-child { grid-column: span 2; grid-row: span 1; }
.panel .tgal .tgal__i:nth-child(n+2) { grid-column: span 1; grid-row: span 1; border-radius: var(--r-m); }
.panel .tgal.tgal--n4 .tgal__i:last-child, .panel .tgal.tgal--n6 .tgal__i:last-child, .panel .tgal.tgal--n8 .tgal__i:last-child { grid-column: span 2; }

@media (max-width: 760px) {
  .tgal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 30vw, 170px); }
  .tgal__i:first-child { grid-column: span 2; grid-row: span 1; }
  .tgal .tgal__i:nth-child(n+2) { grid-column: span 1; grid-row: span 1; border-radius: var(--r-m); }
  .tgal.tgal--n4 .tgal__i:last-child, .tgal.tgal--n6 .tgal__i:last-child, .tgal.tgal--n8 .tgal__i:last-child { grid-column: span 2; }
}

/* ------------------------------------------------------- mala karta tipa */

/*
 * Sve što nije taj tip stišava se, a oznake čestica ostaju čitljive samo tamo gdje kuća tog
 * tipa stoji. Dok je ovdje bila slika cijele situacije, položaj se čitao iz popisa čestica
 * ispod crteža, a ne s crteža.
 */
.minimap { margin: 0; }
.minimap__stage { background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); padding: clamp(14px, 1.6vw, 24px); }
.minimap__stage img, .minimap__stage svg { width: 100%; height: auto; display: block; }
.minimap__stage .unit { transition: fill-opacity .3s ease-out; }
.minimap__stage .unit.is-off { fill-opacity: .14; stroke-opacity: .2; }
.minimap__stage .unit.is-mine { fill-opacity: 1; stroke: #1E1E1C; stroke-width: .5; }
.minimap__stage .plot { fill-opacity: .45; }
.minimap__stage .plot.is-mine { fill-opacity: 1; }
.minimap__stage #labels text { opacity: .22; }
/*
 * Oznaka čestice crtana je za kartu u punoj širini; ovdje je crtež manji, pa istaknute oznake
 * dobivaju veće pismo. Mjera je u jedinicama crteža (viewBox), ne u pikselima ekrana.
 */
.minimap__stage #labels text.is-mine { opacity: 1; font-weight: 700; font-size: 3.4px; }
.minimap__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); font-size: 15px; }
.minimap__key { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.minimap__key i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; }

/*
 * Situacija je omjera 3 naprama 1. Stisnuta na širinu mobitela kuće postanu točke, pa se crtež
 * tamo prikazuje u većem mjerilu i pomiče prstom.
 */
@media (max-width: 760px) {
  .minimap__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
  .minimap__stage img, .minimap__stage svg { width: 900px; max-width: none; }
  .minimap__cap::after { content: 'Povucite crtež prstom'; flex-basis: 100%; font-size: 13.5px; color: var(--tekst-sekundarni); }
  :lang(en) .minimap__cap::after { content: 'Drag the drawing with your finger'; }
}

/* ------------------------------------------------------------ opis opreme */

.opis__g { margin-bottom: var(--s-6); }
.opis__g .label { margin: 0 0 var(--s-3); }
.opis { display: grid; gap: var(--s-3); margin: 0; }
.opis > div { display: grid; gap: 6px; padding: var(--s-4) var(--s-5); background: rgba(255,255,255,.75); border: 1px solid var(--linija); border-radius: var(--r-m); }
.opis dt { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.opis dt .ico { color: var(--plava); flex: 0 0 24px; }
.opis dd { margin: 0; color: var(--tekst-sekundarni); font-size: 15px; }
.opis__note { font-size: 14px; color: var(--tekst-sekundarni); margin: 0; }

/* -------------------------------------------------------------- lokacija */

.dist { list-style: none; margin: var(--s-7) 0 0; padding: 0; }
.dist li { display: grid; grid-template-columns: 70px 1fr auto; gap: var(--s-3); align-items: baseline; padding: 14px var(--s-4); border-bottom: 1px solid var(--linija); border-radius: var(--r-s); transition: background-color .18s ease; }
.dist li:hover { background: rgba(255,255,255,.72); }
.dist li b { font-family: var(--font-serif); font-weight: 400; font-size: 24px; font-variation-settings: var(--fraunces-settings); }
.dist li small { color: var(--tekst-sekundarni); font-size: 14px; }
.gmap { position: relative; background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-1); overflow: hidden; }
.gmap img { width: 100%; height: auto; opacity: .5; }
.gmap .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gmap__note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--s-4); background: rgba(247,245,240,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13.5px; text-align: center; }
/* Karta se učitava odmah, satelitski s nazivima ulica, zoom 17 (naručitelj 06-11-2026). */
.gmap iframe { width: 100%; height: clamp(360px, 42vw, 560px); border: 0; display: block; }

/* -------------------------------------------------------------- galerija */

.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.gal__i { margin: 0; cursor: zoom-in; overflow: hidden; border-radius: var(--r-m); box-shadow: var(--sj-1); }
.gal__i img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease-out; }
.gal__i:hover img { transform: scale(1.04); }
.gal__g { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 0; }
.gal__g:last-of-type { padding-bottom: var(--ritam-uzak); }

.lb { position: fixed; inset: 0; z-index: 95; background: rgba(20,26,28,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; padding: var(--s-7); }
.lb img { max-width: min(1400px, 94vw); max-height: 82vh; object-fit: contain; border-radius: var(--r-m); box-shadow: var(--sj-3); }
.lb__close, .lb__nav { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-tableta); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background-color .18s ease; }
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.22); }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb__cap { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #D9D7D0; font-size: 14.5px; margin: 0; padding: 0 var(--s-7); }
.lb__cap:empty { display: none; }
/* Uvećani tlocrt: papirnata ploha kao na stranici, širinu crteža računa plan.js. */
.lb__plan { background: var(--ploha-papir); border-radius: var(--r-l); box-shadow: var(--sj-3); padding: 16px; max-width: 94vw; max-height: 88vh; overflow: auto; }
.lb__crtez { position: relative; max-width: 100%; }
.lb__crtez svg { display: block; width: 100%; height: auto; }
/* Pri listanju nova slika se pojavi tek kad se učita, da se ne vidi kako se crta odozgo. */
.lb > img { opacity: 0; transition: opacity .25s ease-out; }
.lb > img.is-in { opacity: 1; }
.lb [data-lb-img] { opacity: 1; }
@media (max-width: 760px) {
  .lb { padding: var(--s-4); }
  .lb__nav { top: auto; bottom: 56px; transform: none; width: 46px; height: 46px; }
  .lb__cap { bottom: 18px; font-size: 13.5px; padding: 0 70px; }
}
@media (prefers-reduced-motion: reduce) { .lb > img { transition: none; } }

/* --------------------------------------------------------------- pitanja */

/* Svako pitanje je svoja ploha, pa se otvoreni odgovor jasno odvoji od sljedećeg pitanja. */
.faq { display: grid; gap: var(--s-3); }
.faq__q { background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-m); box-shadow: var(--sj-1); padding: 0 clamp(20px, 2.4vw, 32px); transition: box-shadow .2s ease; }
.faq__q[open] { box-shadow: var(--sj-2); }
.faq__q summary { list-style: none; cursor: pointer; padding: var(--s-5) 48px var(--s-5) 0; position: relative; }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary h3 { font-size: 19px; font-weight: 600; display: inline; }
.faq__q summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-tableta); background: rgba(46,74,82,.08); font-size: 20px; line-height: 1; color: var(--plava); }
.faq__q[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); background: rgba(46,74,82,.14); }
.faq__q summary::after { transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .2s ease; }
.faq__q summary:hover::after { background: rgba(46,74,82,.14); }
.faq__a { padding: 0 0 var(--s-5); max-width: 72ch; color: var(--tekst-sekundarni); }

/* -------------------------------------------------------------- obrazac */

.frm { display: grid; gap: var(--s-5); }
.frm__box { background: var(--ploha-papir); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-2); padding: clamp(28px, 3.4vw, 48px); }
.frm__row { display: grid; gap: 8px; }
.frm label { font-size: 14px; font-weight: 600; }
.frm input[type="text"], .frm input[type="email"], .frm input[type="tel"], .frm select, .frm textarea {
  font: inherit; font-size: 16.5px; padding: 13px 16px; background: #fff; border: 1.5px solid var(--linija);
  border-radius: var(--r-s); color: var(--ugljen); width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.frm input:hover, .frm select:hover, .frm textarea:hover { border-color: #CFCCC3; }
.frm input:focus, .frm select:focus, .frm textarea:focus { outline: none; border-color: var(--plava); box-shadow: 0 0 0 3px rgba(46,74,82,.16); }
.frm select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232E4A52' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.frm textarea { min-height: 120px; resize: vertical; }
.frm__check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-weight: 400; font-size: 15px; line-height: 1.45; cursor: pointer; }
.frm__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--plava); }
.frm__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-3) var(--s-5); }
/* Slika opreme u obrascu (06-11-2026): na računalu kartica pri prijelazu (form.js), na dodir sličica u redu. */
.frm__opt { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.frm__opt .frm__check { flex: 1; min-width: 0; }
/* Oprema koje odabrani tip nema: siva, ne može se označiti, uz kratku napomenu (form.js). */
.frm__nema { display: none; margin-left: 6px; font-size: 12.5px; color: var(--tekst-sekundarni); }
.is-nema .frm__check { color: var(--tekst-sekundarni); opacity: .55; cursor: not-allowed; }
.is-nema .frm__nema { display: inline; }
.is-nema .frm__thumb { opacity: .5; }
.frm__thumb { display: none; }
@media (hover: none), (pointer: coarse) {
  .frm__thumb { display: block; flex: 0 0 auto; width: 66px; height: 44px; padding: 0; border: 1px solid var(--linija); border-radius: var(--r-xs); overflow: hidden; background: var(--breza-bijela); cursor: zoom-in; }
  .frm__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .frm__opt[data-opt-plan] .frm__thumb img { object-fit: contain; padding: 2px; }
}
.frm__pregled { position: fixed; left: 0; top: 0; z-index: 96; width: 300px; padding: 8px; background: #fff; border: 1px solid var(--linija); border-radius: var(--r-m); box-shadow: var(--sj-3); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: 30px 100%; transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s; pointer-events: none; }
.frm__pregled.is-dolje { transform: translateY(-6px) scale(.98); transform-origin: 30px 0; }
.frm__pregled.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.frm__pregled img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); background: var(--linija); }
.frm__pregled.is-plan img { object-fit: contain; background: var(--breza-bijela); }
.frm__pregled span { display: block; padding: 8px 4px 2px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ugljen); }
@media (prefers-reduced-motion: reduce) { .frm__pregled, .frm__pregled.is-dolje { transform: none; transition: none; } }
.frm__opts-box { border: 0; padding: 0; margin: 0; }
.frm__opts-box legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: var(--s-3); }
.frm__consent { margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-s); background: rgba(46,74,82,.05); }
.frm__err { margin: 0; font-size: 14px; color: #A4503C; }
.frm__err:empty { display: none; }
.frm__hp { position: absolute; left: -9999px; }
.frm__send { justify-self: start; margin-top: var(--s-2); }
.frm__state { margin: 0; font-size: 14.5px; color: var(--tekst-sekundarni); }
.frm__unit { background: rgba(46,74,82,.06); border-left: 3px solid var(--plava); border-radius: var(--r-s); padding: var(--s-4) var(--s-5); }
.frm__unit p { margin: 0; }
.frm__opts { font-size: 14.5px; color: var(--tekst-sekundarni); }
.frm__change { background: none; border: 0; padding: 0 0 0 8px; font: inherit; font-size: 14px; color: var(--plava); text-decoration: underline; cursor: pointer; }
.frm__ok { background: var(--ploha-papir); border: 1px solid var(--zelena); border-radius: var(--r-l); box-shadow: var(--sj-1); padding: clamp(28px, 3.4vw, 48px); }
.frm__ok-act { margin: var(--s-5) 0 0; }
.kont { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--linija); display: grid; gap: var(--s-3); justify-items: start; }

/*
 * Obrazac u prozorčiću zna biti viši od ekrana. Zato se pomiče cijela prekrivka, a ne ploha u
 * njoj: dok je ploha bila centrirana u mreži i ograničena visinom, vrh joj je izlazio iznad
 * ekrana i gornja polovica obrasca nije se mogla doseći.
 */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(20,26,28,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; padding: clamp(16px, 5vh, 72px) var(--s-4); }
.modal__box { position: relative; margin: 0 auto; background: var(--ploha-tinta); border-radius: var(--r-xl); box-shadow: var(--sj-3); padding: clamp(28px, 4vw, 52px); max-width: 680px; width: 100%; }
.modal__box h2 { margin-bottom: var(--s-6); padding-right: 56px; }
.modal__close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 42px; height: 42px; background: rgba(30,30,28,.06); border: 0; border-radius: var(--r-tableta); font-size: 26px; line-height: 1; cursor: pointer; transition: background-color .18s ease; }
.modal__close:hover { background: rgba(30,30,28,.14); }

/* ------------------------------------------------------------------ cta */

.cta__in { max-width: var(--max-w); margin: 0 auto; padding: clamp(44px, 5.5vw, 88px) var(--gutter); border-radius: var(--r-xl); background: var(--ploha-plava); box-shadow: var(--sj-2); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 72px); align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: var(--plava-tint); max-width: 60ch; margin-top: var(--s-4); }
.cta__acts { display: grid; gap: var(--s-3); }
@media (max-width: 760px) { .cta__in { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- podnožje */

/*
 * Podnožje (preuređeno 04-11-2026). Gore završna poruka i kontakt velikim slovima, pa linija krova
 * kao razdjelnik (priručnik je predviđa upravo za podnožje), pa izbornik u tri skupine i staklena
 * kartica investitora, pa potpisi autora kao pločice i pravni redak. Ugljen s blagim plavim sjajem
 * odozgo, iz tona nordijske plave; nijedna nova boja.
 */
.ftr {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(76,117,131,.22) 0%, rgba(76,117,131,0) 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(143,166,91,.08) 0%, rgba(143,166,91,0) 60%),
    var(--ploha-ugljen);
  padding: clamp(72px, 8vw, 128px) 0 var(--s-6);
}
.ftr a { color: inherit; }
.ftr .label { color: var(--srebrna); margin: 0 0 var(--s-4); }

.ftr__top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
.ftr__logo { width: 200px; height: auto; display: block; }
.ftr__slogan { margin: var(--s-6) 0 0; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.01em; color: #fff; max-width: 13ch; text-wrap: balance; }
.ftr__place { margin: var(--s-5) 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--srebrna); }

.ftr__kontakt { display: grid; justify-items: start; gap: 6px; }
.ftr__big { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; text-decoration: none; background-image: linear-gradient(var(--zelena), var(--zelena)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease-out, color .18s ease; padding-bottom: 2px; }
.ftr__big:hover, .ftr__big:focus-visible { background-size: 100% 2px; color: #fff; text-decoration: none; }
.ftr__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.ftr__acts .social { margin: 0; }

.ftr__krov { display: flex; align-items: flex-end; gap: 0; margin: clamp(56px, 6vw, 88px) 0 clamp(40px, 4.5vw, 64px); }
.ftr__krov::before, .ftr__krov::after { content: ''; flex: 1; height: 1px; background: var(--linija-tamna); margin-bottom: 1px; }
.ftr__krov img { display: block; width: 120px; height: auto; flex: 0 0 auto; opacity: .9; }

.ftr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__col a { font-size: 15.5px; color: #D9D7D0; text-decoration: none; transition: color .18s ease, transform .18s ease; display: inline-block; }
.ftr__col a:hover, .ftr__col a:focus-visible { color: #fff; transform: translateX(3px); text-decoration: none; }
.ftr__rq {
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-l);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.ftr__rq img { width: 150px; height: auto; display: block; margin-bottom: var(--s-4); }
.ftr__rq p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #D9D7D0; }
.ftr__ext { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: border-color .18s ease; }
.ftr__ext:hover, .ftr__ext:focus-visible { border-color: var(--zelena); text-decoration: none; color: #fff; }

.ftr__credits { list-style: none; margin: clamp(40px, 4.5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ftr__credits a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: var(--r-tableta); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.ftr__credits a:hover, .ftr__credits a:focus-visible { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); text-decoration: none; color: #fff; }
.ftr__uloga { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--srebrna); }
.ftr__ime { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; }
/* Dva autora u jednoj pilulici (arhitektura): pilula je li, a svako ime je svoja poveznica. */
.ftr__credits .ftr__par { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: var(--r-tableta); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ftr__imena { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ftr__credits .ftr__par a { display: inline-flex; flex-direction: row; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; }
.ftr__credits .ftr__par a:hover .ftr__ime, .ftr__credits .ftr__par a:focus-visible .ftr__ime { text-decoration: underline; text-decoration-color: var(--zelena); text-underline-offset: 4px; }
.ftr__credits .ftr__par a:hover, .ftr__credits .ftr__par a:focus-visible { background: none; }
.ftr__i { font-size: 14.5px; line-height: 1; color: var(--srebrna); }

.ftr__legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linija-tamna); display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-6); font-size: 13px; line-height: 1.6; color: #A9A7A0; }
.ftr__legal p { margin: 0; }
.ftr__legal .ftr__registar { grid-column: 1; color: #8E8C86; }
.ftr__copy { grid-column: 2; grid-row: 1 / span 2; align-self: end; white-space: nowrap; }

@media (max-width: 1080px) {
  .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__rq { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-6); align-items: center; }
  .ftr__rq .label { grid-column: 1 / -1; }
  .ftr__rq img { grid-row: span 2; margin: 0; }
}
@media (max-width: 760px) {
  .ftr__top { grid-template-columns: 1fr; align-items: start; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__col:nth-child(3) { grid-column: 1 / -1; }
  .ftr__rq { display: block; }
  .ftr__rq img { margin-bottom: var(--s-4); }
  .ftr__legal { grid-template-columns: 1fr; }
  .ftr__copy { grid-column: 1; grid-row: auto; }
  .ftr__credits { flex-direction: column; }
  .ftr__credits a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; border-radius: var(--r-m); }
  .ftr__credits .ftr__par { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 18px 4px; border-radius: var(--r-m); }
  .ftr__imena { flex-wrap: nowrap; gap: 10px; margin-top: -6px; }
  .ftr__credits .ftr__par a { min-height: 44px; }
}

/* Znakovi društvenih mreža: krug jednake veličine kao gumbi u karti, bez natpisa. */
.social { display: flex; gap: var(--s-3); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-tableta); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.social a:hover, .social a:focus-visible { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-2px); text-decoration: none; }
.social svg { display: block; fill: currentColor; }
.social--light { margin: var(--s-7) 0 var(--s-6); }
.social--light a { background: rgba(30,30,28,.05); border-color: var(--linija); color: var(--ugljen); }
.social--light a:hover, .social--light a:focus-visible { background: rgba(30,30,28,.12); border-color: #CFCCC3; }
/* Stranica 404: čestica GČ-404 nacrtana kao izuzeta čestica na karti, uz putove na postojeće stranice. */
.nf { align-items: center; }
.nf__cestica { margin: 0; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-xl); background: var(--ploha-papir); border: 1px solid var(--linija); box-shadow: var(--sj-1); }
.nf__cestica svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); transform: rotate(-2deg); transition: transform .5s ease-out; }
.nf__cestica:hover svg { transform: rotate(0deg) scale(1.02); }
.nf__cestica figcaption { margin-top: var(--s-4); font-size: 14px; color: var(--tekst-sekundarni); text-align: center; }
.nf__putevi { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nf__putevi a { display: inline-flex; padding: 10px 18px; border-radius: var(--r-tableta); background: rgba(46,74,82,.08); color: var(--plava); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.nf__putevi a:hover, .nf__putevi a:focus-visible { background: rgba(46,74,82,.16); color: var(--plava); transform: translateY(-2px); text-decoration: none; }
.nf + .karusel { margin-top: var(--ritam-uzak); }
@media (prefers-reduced-motion: reduce) { .nf__cestica svg, .nf__putevi a { transition: none; } }

/* ------------------------------------------------------ ulazak elemenata */

@media (prefers-reduced-motion: no-preference) {
  [data-in] { opacity: 0; transform: translateY(16px); }
  [data-in].is-in { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .55s ease-out; }
}

/* Zašto Breza (04-11-2026): slika breze uz naslov, ispod tri značenja s velikim brojem (tools/lib/prica.js). */
.zb__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.zb__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--r-l); box-shadow: var(--sj-2); display: block; }
.zb__head .sec__lead { margin-bottom: 0; }
.zb__vr { display: flex; flex-wrap: wrap; gap: 0 .35em; margin-top: var(--s-7) !important; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; color: var(--plava); }
.zb__vr span:nth-child(2) { color: var(--zelena); }
.zb__vr span:nth-child(3) { color: #B39363; }
.zb__cols { list-style: none; padding: 0; margin: clamp(56px, 7vw, 104px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zb__cols li { padding: 0 clamp(20px, 3vw, 44px); border-left: 1px solid var(--linija); }
.zb__cols li:first-child { padding-left: 0; border-left: 0; }
.zb__n { display: block; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-size: clamp(56px, 6vw, 88px); line-height: 1; color: var(--zelena); margin-bottom: var(--s-5); }
.zb__cols h3 { color: var(--plava); }
.zb__cols h3 + p { margin-top: var(--s-3); }
.zb__mali { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linija); font-size: 15px; color: var(--tekst-sekundarni); }

/* Katalog za preuzimanje (05-11-2026, P.katalog): plava ploha, mockup lijevo izlazi do ruba plohe. */
.kat { padding: var(--ritam-uzak) var(--gutter); }
.kat .wrap { padding: 0; }
.kat__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; border-radius: var(--r-xl); background: var(--ploha-plava); box-shadow: var(--sj-2); overflow: hidden; color: #fff; }
.kat__img { display: block; align-self: stretch; overflow: hidden; }
.kat__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kat__img:hover img { transform: scale(1.03); }
.kat__txt { padding: clamp(32px, 4vw, 64px); }
.kat__txt h2 { color: #fff; }
.kat__txt .label { color: rgba(255,255,255,.8); }
.kat__txt p:not(.label):not(.kat__act) { color: rgba(255,255,255,.92); }
.kat__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-7) !important; }
.kat__meta { font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.72); }
/* Virtualna šetnja (06-11-2026): ista ploha kao katalog, u ugljenu i zrcaljena (slika desno). */
.kat--setnja .kat__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--ploha-ugljen); }
.kat--setnja .kat__img { position: relative; }
.kat__360 { position: absolute; top: var(--s-5); right: var(--s-5); padding: 8px 14px 7px; border-radius: var(--r-tableta); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: #fff; background: rgba(20,26,28,.45); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Lokacija na naslovnici (05-11-2026): tri brojke i kolaž, zračni pogled i ulica preklopljeni. */
.lok__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.lok__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-7) 0 var(--s-6); }
.lok__figs div { border-top: 2px solid var(--zelena); padding-top: var(--s-4); }
.lok__figs dt { font-family: var(--font-sans); font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--plava); font-variant-numeric: lining-nums; white-space: nowrap; }
.lok__figs dd { margin: var(--s-2) 0 0; font-size: 15px; line-height: 1.4; color: var(--tekst-sekundarni); }
.lok__kolaz { position: relative; padding: 0 0 clamp(48px, 6vw, 88px) clamp(40px, 6vw, 96px); }
.lok__a img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sj-2); }
.lok__b { position: absolute; left: 0; bottom: 0; width: 46%; }
.lok__b img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); border: 6px solid var(--breza-bijela); box-shadow: var(--sj-3); }
.lok__pin { position: absolute; top: var(--s-5); right: var(--s-5); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: var(--r-tableta);
  background: rgba(20,26,28,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.lok__pin span { width: 10px; height: 10px; border-radius: 50%; background: var(--zelena); box-shadow: 0 0 0 5px rgba(143,166,91,.35); }

/* Karta na naslovnici (05-11-2026): plava ploha, karta iz zraka preko cijele širine, legenda tipova. */
.kn { padding: var(--ritam-uzak) var(--gutter); }
.kn .wrap { padding: 0; }
.kn__in { border-radius: var(--r-xl); background: var(--ploha-plava); box-shadow: var(--sj-2); color: #fff; padding: clamp(32px, 4.5vw, 72px); overflow: hidden; }
.kn__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 88px); align-items: end; }
.kn__head h2 { color: #fff; }
.kn__head .label { color: rgba(255,255,255,.8); }
.kn__head p:not(.label) { color: rgba(255,255,255,.92); margin: 0; }
/* Mora biti jači od ".kn__head p:not(.label)", koji svim odlomcima briše razmak. */
.kn__head p.kn__act { margin-top: var(--s-7); }
.kn__map { display: block; margin-top: clamp(32px, 4vw, 56px); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.kn__map img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.kn__map:hover img { transform: scale(1.02); }
.kn__leg { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; font-size: 15px; }
.kn__leg li { display: inline-flex; align-items: center; gap: 8px; }
.kn__leg b { font-weight: 600; color: rgba(255,255,255,.65); }
.kn__sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.6); }
.kn__sum { margin-left: auto; color: rgba(255,255,255,.75); }

/* ======================================================================
 * Mobitel (pregled 04-11-2026, 390 px). Sve mobilne prilagodbe na jednom mjestu, na kraju datoteke,
 * da nadjačaju opća pravila iste jačine. Načela: ništa ne izlazi iz ekrana, sve što se dodiruje ima
 * barem 44 px, dugi popisi istih stvari idu u vodoravni niz koji se povlači prstom umjesto da se
 * stranica rasteže, a trake zalijepljene za ekran pojavljuju se samo dok su potrebne.
 * ==================================================================== */

/* Traka sažetka konfiguratora: skrivena ispod ruba dok konfigurator nije u ekranu (oprema.js). */
@media (max-width: 900px) {
  .opr__sum { transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .opr__sum.is-u-vidu { transform: none; }
  .opr { padding-bottom: 150px; }
  .panel .opr { padding-bottom: 0; }
  .panel .opr__sum { transform: none; }
}

@media (max-width: 760px) {
  /* Brojke u dva stupca umjesto šest redova jedan ispod drugoga. */
  .figs__in { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding: var(--s-7) var(--s-5); }
  .fig__n { font-size: 34px; }
  .fig__l { font-size: 14px; }

  /* Tipovi na naslovnici i trake slika: vodoravni niz s rubom sljedeće kartice. */
  .tgrid--niz, .strip {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%;
    gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--s-4); scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }
  .tgrid--niz::-webkit-scrollbar, .strip::-webkit-scrollbar { display: none; }
  .tgrid--niz > *, .strip > * { scroll-snap-align: start; }
  .tgrid--niz .tcard:hover, .strip__btn:hover { transform: none; }
  .tgrid--niz::after, .strip::after { content: ''; width: 1px; }

  /* Kartice etaža iznad tlocrta: jedan red koji se povlači, bez lomljenja natpisa. */
  .plan__tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .plan__tabs::-webkit-scrollbar { display: none; }
  .plan__tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

  /* Konfigurator: oprema u dva stupca, kao kod konfiguratora automobila. */
  .opr__tiles { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .opr__tile { padding: var(--s-4); gap: 6px; }
  .opr__tile-img, .opr__tile-ikona { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0; }
  .opr__tile-name { font-size: 15px; line-height: 1.3; padding-right: 0; }
  .opr__tile-short { font-size: 13px; line-height: 1.4; }
  .opr__tile[aria-pressed="true"]::after { top: 8px; left: 8px; }
  .opr__lupa { width: 40px; height: 40px; top: 6px; right: 6px; }
  .opr__attics { grid-template-columns: 1fr; }
  .opr__attic-tile { padding: var(--s-4) var(--s-5); }
  .opr__attic-tile .opr__tile-img--3d { margin-top: calc(var(--s-4) * -1); }
  .opr__attics { grid-template-columns: 1fr 1fr; }
  .opr__okvir:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .opr__badge, .plan__opt { font-size: 11.5px; }

  /* Karta naselja: najprije karta, pa legenda, pa filteri. Karta je šira od ekrana i klizi. */
  .sec--map > .wrap { display: flex; flex-direction: column; }
  .sec--map .map { order: 1; touch-action: pan-x pan-y; }
  .sec--map .leg { order: 2; }
  .sec--map .filters { order: 3; margin: var(--s-6) 0 0; }
  .sec--map .map__note { order: 4; }
  .map__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .map__stage::-webkit-scrollbar { display: none; }
  .map__stage svg { width: 1150px; max-width: none; }
  .map__zoom { display: none; }
  .map::after {
    content: 'Povucite kartu lijevo i desno'; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 3; pointer-events: none; white-space: nowrap; font-size: 13px; font-weight: 600; color: #fff;
    padding: 7px 14px; border-radius: var(--r-tableta); background: rgba(20,26,28,.62);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: map-uputa .6s ease-out 4s forwards;
  }
  :lang(en) .map::after { content: 'Drag the map left and right'; }
  @keyframes map-uputa { to { opacity: 0; visibility: hidden; } }

  /* Dodir: poveznice i putokazi barem 44 px visoki. */
  .ftr__col ul { gap: 0; }
  .ftr__col a { display: block; padding: 11px 0; }
  .more { padding-top: 8px; padding-bottom: 6px; }
  .crumbs a { display: inline-block; padding: 12px 0; }
  .unit__near a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr__ext { padding-top: 10px; }
  .linklike { min-height: 44px; }
  .filters .btn--small { min-height: 44px; }
  /* Kartica kuće u panelu na karti: bez velikog razmaka između trake i naslova. */
  .panel .unit { padding-top: var(--s-6); }

  /* Galerija naselja u dva stupca; dodir svejedno otvara sliku preko cijelog ekrana. */
  .gal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal__i { border-radius: var(--r-s); }
  .gal__g h2 { margin-bottom: var(--s-5); }

  /* Kvačice opreme u obrascu: cijeli redak je meta za prst. */
  .frm__checks { gap: 6px 0; }
  .frm__checks .frm__check { min-height: 44px; align-items: center; padding: 6px 0; }
  .frm__checks .frm__check input { width: 22px; height: 22px; margin: 0; }

  /* Zadnje mete ispod 44 px: veliki kontakt u podnožju, gumbi uz tlocrt, prekidač snimke. */
  .ftr__big { padding: 6px 0 8px; }
  .btn { min-height: 44px; }
  .map__snimka { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .map::after { animation: none; display: none; } }

/* Zašto Breza na uskom ekranu: slika iznad naslova, značenja jedno ispod drugog. */
@media (max-width: 900px) {
  .zb__top { grid-template-columns: 1fr; }
  .zb__img img { aspect-ratio: 4 / 3; }
  .zb__cols { grid-template-columns: 1fr; gap: var(--s-7); }
  .zb__cols li, .zb__cols li:first-child { padding: var(--s-6) 0 0; border-left: 0; border-top: 1px solid var(--linija); }
  .zb__n { font-size: 52px; margin-bottom: var(--s-3); }
}

/* Katalog na uskom ekranu: mockup iznad teksta. */
@media (max-width: 900px) {
  .kat__in { grid-template-columns: 1fr; }
  .kat__img img { aspect-ratio: 16 / 10; height: auto; }
  .kat--setnja .kat__in { grid-template-columns: 1fr; }
  .kat--setnja .kat__img { order: -1; }
  .kat--setnja .kat__img img { aspect-ratio: 4 / 3; }
}

/* Lokacija i karta na naslovnici, uski ekran. */
@media (max-width: 900px) {
  .lok__in, .kn__head { grid-template-columns: 1fr; }
  .lok__kolaz { padding-left: 24px; }
  .kn__map img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 56% 50%; }
  .kn__sum { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .lok__figs { gap: var(--s-3); }
  .lok__figs dt { font-size: 26px; }
  .lok__figs dd { font-size: 13px; }
}

/* Traka privole (07-11-2026, consent.js): staklo u ugljenu dolje lijevo, na mobitelu preko širine. */
.privola { position: fixed; left: max(16px, 2.5vw); bottom: max(16px, 2.5vw); z-index: 92; max-width: 440px; padding: var(--s-5); color: #fff; border-radius: var(--r-l); background: rgba(30,30,28,.86); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--sj-3); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out; }
.privola.is-in { opacity: 1; transform: none; }
.privola[hidden] { display: none; }
.privola__naslov { margin: 0 0 var(--s-2); font-weight: 600; font-size: 17px; }
.privola__tekst { margin: 0 0 var(--s-4); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.9); }
.privola__tekst a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.privola__gumbi { display: flex; gap: var(--s-3); }
.privola__gumbi .btn { flex: 1 1 0; min-height: 48px; }
.privola .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.privola .btn--ghost:hover, .privola .btn--ghost:focus-visible { background: #fff; color: var(--ugljen); border-color: #fff; }
@media (max-width: 560px) {
  .privola { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .privola { transition: none; transform: none; } }

/* ------------------------------------------------------------- chatbot */
/*
 * Chatbot (07-11-2026, assets/js/chat.js). Gumb dolje desno; na stranici kuće na mobitelu ide
 * iznad trake konfiguratora (--chat-dno računa chat.js). Na mobitelu razgovor zauzme cijeli ekran.
 */
.chat { --chat-dno: 0px; position: fixed; right: max(16px, 2vw); bottom: calc(max(16px, 2vw) + var(--chat-dno) + env(safe-area-inset-bottom)); z-index: 91; font-family: var(--font-sans); }
.chat__btn { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 6px 22px 6px 6px; border: 1px solid var(--linija); border-radius: var(--r-tableta); background: #fff; color: var(--tekst); cursor: pointer; box-shadow: 0 10px 30px rgba(30,30,28,.18); transition: transform .18s ease, box-shadow .18s ease; }
.chat__btn:hover, .chat__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(30,30,28,.24); }
.chat__btn-txt { display: grid; gap: 3px; text-align: left; }
.chat__btn-txt b { font: 600 16px/1.1 var(--font-sans); color: var(--plava); }
.chat__btn-txt small { font: 500 13px/1.1 var(--font-sans); color: var(--tekst-sekundarni); }
.chat.is-open .chat__btn { display: none; }

/* Lice: krug s tankim zelenim prstenom i točkom "na vezi". */
.chat__lice { position: relative; flex: none; display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--breza-bijela); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--zelena); }
.chat__lice img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.chat__online { position: absolute; right: -1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #5FB44E; border: 2.5px solid #fff; }
.chat__lice--head { width: 48px; height: 48px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.chat__lice--head .chat__online { border-color: #2E4A52; }

/* Oblačić kojim se Jakov javi jednom po posjetu. */
.chat__mami { position: absolute; right: 0; bottom: calc(100% + 14px); display: flex; align-items: flex-start; gap: 4px; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 12px 8px 12px 16px; background: #fff; border: 1px solid var(--linija); border-radius: 18px 18px 6px 18px; box-shadow: var(--sj-2); animation: chat-mami .35s cubic-bezier(.2,.7,.2,1); }
.chat__mami-txt { padding: 0; border: 0; background: none; text-align: left; font: 15px/1.4 var(--font-sans); color: var(--tekst); cursor: pointer; }
.chat__mami-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tekst-sekundarni); font-size: 18px; line-height: 1; cursor: pointer; }
.chat__mami-x:hover { background: var(--breza-bijela); }
@keyframes chat-mami { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat.is-open .chat__mami { display: none; }

.chat__panel { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); background: var(--breza-bijela); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sj-3); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; background: var(--ploha-plava); color: #fff; }
.chat__head-txt { flex: 1; min-width: 0; }
.chat__head h2 { margin: 0; font-family: var(--font-serif); font-variation-settings: var(--fraunces-settings); font-weight: 400; font-size: 22px; line-height: 1.15; color: #fff; }
.chat__head p { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--plava-tint); }
.chat__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-tableta); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.chat__close:hover, .chat__close:focus-visible { background: rgba(255,255,255,.22); }

.chat__log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__msg { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.chat__msg p, .chat__msg ul, .chat__msg ol { margin: 0; }
.chat__msg p + p, .chat__msg p + ul, .chat__msg p + ol, .chat__msg ul + p, .chat__msg ol + p { margin-top: 8px; }
.chat__msg ul, .chat__msg ol { padding-left: 20px; }
.chat__msg li + li { margin-top: 3px; }
.chat__red { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; max-width: 94%; }
.chat__mini { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--linija); }
.chat__red .chat__msg { max-width: none; }
.chat__msg--bot { background: #fff; border: 1px solid var(--linija); border-bottom-left-radius: 6px; color: var(--tekst); }
.chat__msg--bot a { color: var(--plava); text-decoration: underline; text-decoration-color: var(--zelena); text-underline-offset: 3px; }
.chat__msg--user { align-self: flex-end; background: var(--plava); color: #fff; border-bottom-right-radius: 6px; }
.chat__msg.is-err { background: #FBF6EC; border-color: var(--drvo); }
/* Poziv na društvene mreže: dvije velike ikone, lako za dodir. */
.chat__mreze { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat__msg--bot a.chat__mreza { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: var(--r-tableta); color: #fff; font: 600 14px/1 var(--font-sans); text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.chat__msg--bot a.chat__mreza:hover, .chat__msg--bot a.chat__mreza:focus-visible { transform: translateY(-1px); filter: brightness(1.08); }
.chat__mreza--facebook { background: #1877F2; }
.chat__mreza--instagram { background: radial-gradient(circle at 30% 107%, #FDCB52 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }

.chat__dots { display: inline-flex; gap: 5px; padding: 4px 0; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--srebrna); animation: chat-tocka 1.2s infinite ease-in-out; }
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-tocka { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.chat__chips:empty { display: none; }
.chat__chips button { padding: 8px 14px; border: 1px solid var(--linija); border-radius: var(--r-tableta); background: #fff; color: var(--plava); font: 500 14px/1.2 var(--font-sans); cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.chat__chips button:hover, .chat__chips button:focus-visible { border-color: var(--zelena); background: #F4F6EE; }

.chat__form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--linija); border-radius: 24px; }
.chat__form:focus-within { border-color: var(--plava); box-shadow: 0 0 0 3px rgba(46,74,82,.12); }
.chat__form textarea { flex: 1; min-height: 24px; max-height: 140px; margin: 0 0 8px; padding: 0; border: 0; outline: 0; resize: none; background: none; font: 16px/1.45 var(--font-sans); color: var(--tekst); }
.chat__send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--plava); color: #fff; cursor: pointer; }
.chat__send:disabled { opacity: .45; cursor: default; }
.chat__note { margin: 0; padding: 8px 18px 12px; font-size: 11.5px; line-height: 1.4; color: var(--tekst-sekundarni); }
.chat__note a { color: inherit; }

@media (max-width: 600px) {
  /* Na mobitelu samo lice, da gumb ne zaklanja sadržaj. */
  .chat__btn { padding: 4px; }
  .chat__btn-txt { display: none; }
  .chat__btn .chat__lice { width: 56px; height: 56px; }
  .chat__mami { max-width: 240px; padding: 10px 6px 10px 14px; }
  .chat__mami-txt { font-size: 14.5px; }
  .chat.is-open { inset: 0; }
  .chat__panel { position: fixed; inset: 0; width: auto; height: 100%; height: 100dvh; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .chat__head { padding-top: calc(16px + env(safe-area-inset-top)); }
  html.chat-otvoren, html.chat-otvoren body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .chat__dots i, .chat__mami { animation: none; } .chat__btn { transition: none; } }
@media print { .chat { display: none; } }

/*
 * Film o naselju (naručitelj 08-11-2026: "baš vidljivo i upečatljivo"). Filmska ploha: šira od obične
 * (2,2 : 1), u pozadini tiha petlja iz filma, tekst i velik gumb u sredini, valovi oko gumba kao poziv.
 * Klik otvara film preko cijelog ekrana (.filmbox, ui.js); YouTube se učitava tek tada.
 */
.film { aspect-ratio: 2.2 / 1; min-height: 560px; max-height: 88svh; align-items: center; justify-content: center; }
.film::after { background: radial-gradient(ellipse 70% 75% at 50% 52%, rgba(14,18,20,.42) 0%, rgba(14,18,20,.18) 55%, rgba(14,18,20,.5) 100%), linear-gradient(rgba(14,18,20,.15), rgba(14,18,20,.35)); }
.film__in { position: relative; z-index: 2; max-width: 780px; padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.film__in .label { color: rgba(255,255,255,.9); margin: 0 0 var(--s-4); }
.film__in h2 { color: #fff; text-wrap: balance; font-size: clamp(38px, 5.2vw, 76px); text-shadow: 0 2px 40px rgba(0,0,0,.3); }
.film__in > p:not(.label) { color: rgba(255,255,255,.94); margin: var(--s-5) 0 0; max-width: 580px; font-size: clamp(16px, 1.25vw, 19px); text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.film__play { margin-top: var(--s-7); display: inline-flex; align-items: center; gap: var(--s-5); padding: 0; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.film__krug { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,.3); transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .25s ease, color .25s ease; }
.film__krug svg { margin-left: 4px; }
.film__krug::before, .film__krug::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); animation: filmVal 3s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.film__krug::after { animation-delay: 1.5s; }
@keyframes filmVal { from { transform: scale(1); opacity: .75; } to { transform: scale(1.75); opacity: 0; } }
.film__play:hover .film__krug, .film__play:focus-visible .film__krug { transform: scale(1.08); background: #fff; color: var(--ugljen); }
.film__play:focus-visible { outline: none; }
.film__play:focus-visible .film__krug { box-shadow: 0 0 0 3px var(--zelena), 0 18px 50px rgba(0,0,0,.3); }
.film__txt b { display: block; font-size: 19px; font-weight: 600; line-height: 1.3; }
.film__txt small { display: block; margin-top: 2px; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.btn--film { gap: 10px; }
.btn--film svg { flex: none; margin-left: -4px; }
@media (prefers-reduced-motion: reduce) { .film__krug::before, .film__krug::after { animation: none; opacity: 0; } }
@media (max-width: 760px) {
  .film { aspect-ratio: auto; min-height: 0; max-height: none; }
  .film__in { margin-top: calc(var(--s-6) * -1); z-index: 3; padding: 0 clamp(20px, 5.5vw, 28px) clamp(30px, 8vw, 40px); }
  .film__in h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .film__krug { width: 76px; height: 76px; }
  .film__krug svg { width: 26px; height: 26px; }
}

/* Prozor s filmom: preko cijelog ekrana, film 16 : 9 što veći, zatvara se s Esc, X ili klikom izvan filma. */
.filmbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  background: rgba(10,13,14,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s ease; }
.filmbox.is-on { opacity: 1; }
.filmbox__okvir { position: relative; width: min(100%, calc((100svh - 2 * clamp(16px, 4vw, 56px) - 64px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: var(--r-l); overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(.96); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.filmbox.is-on .filmbox__okvir { transform: none; }
.filmbox__okvir iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.filmbox__zatvori { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); cursor: pointer; transition: background-color .2s ease; }
.filmbox__zatvori:hover, .filmbox__zatvori:focus-visible { background: rgba(255,255,255,.28); }
html.film-otvoren { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .filmbox, .filmbox__okvir { transition: none; } }