@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2212; }
/* Fontovi su smanjeni na znakove stranice (latinica + hrvatska slova + tipografski znakovi); naslovni font samo 600–800.
   Izvornici: ~/Projekti/.alati/kopije/fontovi-prije-smanjivanja/. Novo slovo izvan popisa preglednik prikaže sistemskim fontom. */
/* Alo Meštre — stil po uzoru na Elektron: čisto bijelo, veliki zaobljeni rubovi,
   Bricolage Grotesque za naslove, Instrument Sans za tekst. Akcent: toplo narančasta (radna kaciga). */
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-display: swap; src: url('/fonts/unbounded-600-winkla.woff2') format('woff2'); } /* samo slova riječi „Winkla“ u podnožju */

:root {
  --pozadina: #ffffff;
  --kamen: #f4f2ee;          /* sive sekcije: topla boja dalmatinskog kamena */
  --crta: #e7e4de;
  --tinta: #121417;
  --prigušeno: #5f636b;      /* ≥ 4.5:1 na bijeloj i na kamenu */
  --akcent: #0f5fa8;
  --akcent-tamni: #0b4a85;
  --akcent-svijetli: #e3eefa;
  --obrt: var(--akcent);
  /* pločice djelatnosti: jedan neutralni topli sivi ton (ozbiljnije od pastela) */
  --pastel-0: #f1efeb; --pastel-1: #f1efeb; --pastel-2: #f1efeb; --pastel-3: #f1efeb; --pastel-4: #f1efeb; --pastel-5: #f1efeb;     /* stranica obrta može imati svoju boju */

  --font-naslov: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sirina: 1360px;
  --rub: clamp(16px, 4vw, 64px);
  --radius: 6px; --r: 6px;
  --radius-malo: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --zaglavlje: 92px;   /* visina lebdeće kapsule + razmak (za skrolanje na sidra) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--zaglavlje) + 16px); }
html.bez-skrola { overflow: hidden; }
body { margin: 0; background: var(--pozadina); color: var(--tinta); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-naslov); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--akcent); color: #fff; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.ik { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.okvir { max-width: var(--sirina); margin: 0 auto; padding: 0 var(--rub); }
.preskoci { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.preskoci:focus { top: 12px; }
.prigušeno { color: var(--prigušeno); }
.vizualno-skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- gumbi */
.gumb { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--tinta); color: #fff; font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.gumb:hover { background: var(--akcent); border-color: var(--akcent); }
.gumb:active { transform: scale(.97); }
.gumb-obrub { background: transparent; color: var(--tinta); border-color: var(--crta); }
.gumb-obrub:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.gumb-akcent { background: var(--obrt); border-color: var(--obrt); color: #fff; }
.gumb-akcent:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.gumb-bijeli { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gumb-bijeli:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.poveznica { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; white-space: nowrap; }
.poveznica .ik { transition: transform .3s var(--ease); }
.poveznica:hover .ik { transform: translateX(4px); }

/* ---------- ZAGLAVLJE: lebdeća kapsula */
.zaglavlje { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; pointer-events: none; }
.zaglavlje > .okvir { position: relative; }
.kapsula { pointer-events: auto; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 10px 0 20px; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border: 1px solid rgba(18,20,23,.07); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(18,20,23,.04), 0 10px 30px -18px rgba(18,20,23,.25); transition: height .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.zaglavlje.skrolano .kapsula { height: 60px; background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 18px 40px -18px rgba(18,20,23,.32); }
/* logo: jedna slika — 3D oblačić „alo“ + „meštre“ (public/brand/logo-cjelina-*.webp, složi scripts/brand.js) */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo-img { display: block; height: 56px; width: auto; margin: -8px 0 -10px -8px; transition: transform .5s var(--ease); }
.logo:hover .logo-img { transform: rotate(-2deg) scale(1.03); }
.glavni-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-stavka { position: static; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 550 15.5px var(--font); color: var(--tinta); text-decoration: none; transition: background .2s; cursor: pointer; }
.nav-link:hover, .nav-stavka.otvoren .nav-link { background: rgba(18,20,23,.06); }
.nav-str { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.nav-stavka.otvoren .nav-str { transform: rotate(180deg); }

.kapsula-desno { display: flex; align-items: center; gap: 8px; flex: none; }
.kap-ikona { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(18,20,23,.06); display: grid; place-items: center; transition: background .2s; }
.kap-ikona:hover, .kap-ikona[aria-expanded="true"] { background: rgba(18,20,23,.12); }
.kap-ikona .ik { width: 20px; height: 20px; stroke-width: 2; }
.kap-cta { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px 0 52px; border-radius: 999px; background: var(--akcent); color: #fff; font-weight: 650; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background .25s, transform .25s var(--ease); }
.kap-cta img { position: absolute; left: 4px; top: 50%; width: 46px; height: 46px; transform: translateY(-58%) rotate(-8deg); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); transition: transform .45s var(--ease); }
.kap-cta:hover { background: var(--akcent-tamni); }
.kap-cta:hover img { transform: translateY(-66%) rotate(4deg) scale(1.08); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--tinta); position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* padajući izbornici */
.mega { pointer-events: auto; position: absolute; top: calc(100% + 10px); left: var(--rub); right: var(--rub); background: #fff; border: 1px solid rgba(18,20,23,.07); border-radius: var(--r); padding: 18px; box-shadow: 0 30px 70px -30px rgba(18,20,23,.4); animation: spusti .3s var(--ease) both; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* most da miš ne „ispadne“ */
@keyframes spusti { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
.mega-plocice { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mega-plocica { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 120px; padding: 14px; border-radius: var(--r); background: var(--pozadina-kruga); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .3s var(--ease); }
.mega-plocica img { position: absolute; right: -4px; bottom: -6px; width: 84px; height: 84px; z-index: -1; transition: transform .45s var(--ease); }
.mega-plocica:hover { transform: translateY(-3px); }
.mega-plocica:hover img { transform: scale(1.06); }
.mega-plocica b { display: block; font: 650 15px/1.15 var(--font-naslov); }
.mega-plocica small { font-size: 13px; color: var(--prigušeno); }
.mega-dno { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 4px 6px 0; font-size: 14.5px; color: var(--prigušeno); }
.mega-dno .poveznica { color: var(--tinta); }
.mega-uska { left: auto; right: auto; width: min(520px, calc(100% - 2 * var(--rub))); }
.mega-mjesta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.mega-mjesta a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); text-decoration: none; font-weight: 550; transition: background .2s; }
.mega-mjesta a:hover { background: var(--kamen); }
.mega-mjesta small { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--prigušeno); background: var(--kamen); border-radius: 999px; padding: 1px 8px; }
.mega-mjesta a:hover small { background: #fff; }
.mj-ik { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; background: var(--akcent-svijetli); color: var(--akcent); }
.mj-ik .ik { width: 18px; height: 18px; }

/* tražilica ispod kapsule */
.h-trazilica { pointer-events: auto; position: absolute; top: calc(100% + 10px); right: var(--rub); width: min(620px, calc(100% - 2 * var(--rub))); animation: spusti .25s var(--ease) both; }
.mala-trazilica { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid rgba(18,20,23,.08); border-radius: var(--r); box-shadow: 0 30px 70px -30px rgba(18,20,23,.45); }
.mala-trazilica > .ik { position: absolute; left: 20px; width: 22px; height: 22px; color: var(--prigušeno); pointer-events: none; }
.mala-trazilica input { width: 100%; height: 64px; padding: 0 70px 0 54px; border: 0; border-radius: var(--r); background: transparent; font: inherit; font-size: 17px; color: inherit; }
.mala-trazilica input:focus { outline: none; }
.mala-trazilica kbd { position: absolute; right: 18px; font: 600 12px var(--font); color: var(--prigušeno); background: var(--kamen); border-radius: 6px; padding: 3px 7px; }
.mala-trazilica .padajuci { position: static; border: 0; border-top: 1px solid var(--crta); border-radius: 0 0 var(--r) var(--r); box-shadow: none; }
.mala-trazilica:has(.padajuci:not([hidden])) input { border-radius: var(--r) var(--r) 0 0; }
.mala-trazilica:has(.padajuci:not([hidden])) { flex-wrap: wrap; }
.mala-trazilica:has(.padajuci:not([hidden])) .padajuci { flex: 1 1 100%; }

/* mobilni izbornik */
.mob-izbornik { pointer-events: auto; position: fixed; inset: 0; z-index: -1; background: var(--kamen); overflow-y: auto; overscroll-behavior: contain; padding: 92px var(--rub) calc(28px + env(safe-area-inset-bottom)); animation: izbornik .4s var(--ease) both; }
@keyframes izbornik { from { opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 28px 28px); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mob-ulaz { from { opacity: 0; transform: translateY(14px); } }
.mob-unutra { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.mob-unutra > * { animation: mob-ulaz .5s var(--ease) both; }
.mob-unutra > :nth-child(1) { animation-delay: .06s; } .mob-unutra > :nth-child(2) { animation-delay: .11s; } .mob-unutra > :nth-child(3) { animation-delay: .16s; }
.mob-unutra > :nth-child(4) { animation-delay: .21s; } .mob-unutra > :nth-child(5) { animation-delay: .26s; }
/* tražilica */
.mob-trazi { position: relative; display: flex; align-items: center; }
.mob-trazi > .ik { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--prigušeno); pointer-events: none; }
.mob-trazi input { width: 100%; height: 58px; border-radius: 999px; border: 1px solid rgba(18,20,23,.06); background: #fff; padding: 0 64px 0 48px; font: inherit; font-size: 16px; box-shadow: 0 12px 30px -18px rgba(18,20,23,.35); }
.mob-trazi input:focus { outline: 2px solid var(--akcent); outline-offset: 1px; }
.mob-trazi button { position: absolute; right: 6px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--akcent); color: #fff; display: grid; place-items: center; }
.mob-trazi button .ik { width: 18px; height: 18px; stroke-width: 2.2; }
/* blokovi */
.mob-blok { background: #fff; border-radius: var(--r); padding: 16px 12px 12px; box-shadow: 0 1px 2px rgba(18,20,23,.04); }
.mob-red { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 12px; }
.mob-naslov { margin: 0; font: 700 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); }
.mob-red a { font-size: 14px; font-weight: 600; color: var(--akcent); text-decoration: none; }
.mob-mreza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mob-plocica { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border-radius: var(--r); background: #f1efeb; text-decoration: none; text-align: center; transition: transform .2s var(--ease); }
.mob-plocica:active { transform: scale(.96); }
.mob-plocica img { width: 62px; height: 62px; }
.mob-plocica b { font: 650 13px/1.15 var(--font-naslov); letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.3em; }
.mob-plocica small { position: absolute; top: 7px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; font: 700 11px/20px var(--font); color: var(--prigušeno); }
.mob-mjesta { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 4px; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
.mob-mjesta::-webkit-scrollbar { display: none; }
.mob-mjesta li { flex: none; scroll-snap-align: start; }
.mob-mjesta a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; background: #f1efeb; text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.mob-mjesta a span { font-size: 11.5px; font-weight: 700; color: var(--prigušeno); background: #fff; border-radius: 999px; padding: 1px 7px; }
/* glavni linkovi */
.mob-linkovi { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); padding: 4px 16px; }
.mob-linkovi a { display: flex; align-items: center; gap: 14px; padding: 16px 0; font: 700 23px/1.1 var(--font-naslov); letter-spacing: -.035em; text-decoration: none; }
.mob-linkovi a + a { border-top: 1px solid var(--crta); }
.mob-linkovi small { font: 600 12px var(--font); letter-spacing: 0; color: var(--akcent); width: 18px; }
.mob-linkovi i { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: #f1efeb; display: grid; place-items: center; }
.mob-linkovi i .ik { width: 16px; height: 16px; }
/* poziv obrtnicima */
.mob-cta { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 10px; border-radius: var(--r); background: var(--tinta); color: #fff; text-decoration: none; overflow: hidden; }
.mob-cta img { width: 64px; height: 64px; flex: none; }
.mob-cta b { display: block; font: 700 19px/1.1 var(--font-naslov); letter-spacing: -.03em; }
.mob-cta small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.7); }
.mob-cta i { margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--akcent); display: grid; place-items: center; }
.mob-cta i .ik { width: 18px; height: 18px; stroke-width: 2.2; }
@media (prefers-reduced-motion: reduce) { .mob-izbornik, .mob-unutra > * { animation: none; } }
html.mob-otvoren .kapsula { background: #fff; }
/* retci rezultata (zaglavlje i naslovna) */
.padajuci a, .hr-popis a { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--r); text-decoration: none; transition: background .15s; }
.padajuci a:hover, .padajuci a.aktivno, .hr-popis a:hover, .hr-popis a.aktivno { background: var(--kamen); }
.r-slika { width: 48px; height: 48px; border-radius: var(--r); overflow: hidden; background: var(--kamen); flex: none; }
.r-slika img { width: 100%; height: 100%; object-fit: cover; }
.r-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.r-tekst strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tekst small { color: var(--prigušeno); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-str { color: var(--prigušeno); opacity: 0; transform: translateX(-4px); transition: .2s var(--ease); }
a:hover > .r-str, a.aktivno > .r-str { opacity: 1; transform: none; }
.r-svi { justify-content: center; font-weight: 600; color: var(--akcent-tamni); }
.r-nema { padding: 14px 12px; color: var(--prigušeno); }

/* ---------- naslovna: traka za pretragu + bento kartice */
.hero { padding: clamp(28px, 4vw, 56px) 0 clamp(24px, 4vw, 56px); }
.nadnaslov { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--prigušeno); margin-bottom: 18px; }
.hero-podnaslov { margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); color: var(--prigušeno); max-width: 34em; text-wrap: pretty; }

.traka { position: relative; z-index: 20; display: flex; align-items: center; max-width: 980px; margin: 0 auto clamp(20px, 2.4vw, 32px); background: #fff; border: 1px solid var(--crta); border-radius: 999px; padding: 8px 8px 8px 10px; box-shadow: 0 16px 44px -24px rgba(18,20,23,.3); transition: box-shadow .25s, border-color .25s; }
.traka:focus-within { border-color: #cfcac2; box-shadow: 0 0 0 5px var(--akcent-svijetli), 0 16px 44px -24px rgba(18,20,23,.3); }
.traka-polje { display: flex; flex-direction: column; justify-content: center; padding: 4px 22px; min-width: 0; cursor: text; }
.traka-polje + .traka-polje { border-left: 1px solid var(--crta); }
.traka-polje > span { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.traka-polje input, .traka-polje select { border: 0; padding: 2px 0 0; background: none; font: inherit; font-size: 16px; color: var(--tinta); min-width: 0; }
.traka-polje input::placeholder { color: #8b8f96; }
.traka-polje input:focus, .traka-polje select:focus { outline: none; }
.traka-polje input::-webkit-search-cancel-button { display: none; }
.traka-sto { flex: 1.6; }
.traka-gdje { flex: 1; cursor: pointer; }
.traka-gdje select { cursor: pointer; appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235f636b' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center; padding-right: 22px; }
.traka-gumb { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 24px; border: 0; border-radius: 999px; background: var(--akcent); color: #fff; font-weight: 650; font-size: 16px; transition: background .25s; }
.traka-gumb .ik { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #fff; color: var(--akcent); stroke-width: 2.2; }
.traka-gumb:hover { background: var(--akcent-tamni); }

/* uvod iznad tražilice */
.hero-uvod { text-align: center; margin: 0 auto clamp(18px, 2.4vw, 30px); }
.hero-uvod .nadnaslov { margin-bottom: 14px; }
.hero-uvod h1 { font-size: clamp(36px, 5vw, 68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; text-wrap: balance; }

/* scena: kuća s točkama, kartice djelatnosti lijevo i desno, linije između */
.scena { position: relative; display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(200px, 250px); gap: 28px; align-items: center; margin-top: clamp(20px, 3vw, 40px); }
.scena-kuca { position: relative; max-width: 780px; width: 100%; margin: 0 auto; }
.scena-kuca > img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.scena-kartice { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.hk { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: #fff; border: 1px solid var(--crta); border-radius: var(--r); text-decoration: none; box-shadow: 0 1px 2px rgba(18,20,23,.04); transition: border-color .25s, box-shadow .25s, transform .3s var(--ease); }
.hk img { width: 50px; height: 50px; border-radius: var(--r); background: #f1efeb; mix-blend-mode: multiply; flex: none; }
.hk-br { display: none; }
.hk-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.hk-tekst b { font: 650 15.5px var(--font-naslov); letter-spacing: -.01em; }
.hk-tekst small { color: var(--prigušeno); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-str { width: 16px; height: 16px; color: var(--prigušeno); stroke-width: 2; opacity: 0; transition: opacity .2s, transform .3s var(--ease); }
.hk:hover, .hk.aktivna { border-color: var(--akcent); box-shadow: 0 10px 26px -14px rgba(15, 95, 168,.55); transform: translateX(var(--pomak, 0)); }
.lijevo .hk { --pomak: 4px; } .desno .hk { --pomak: -4px; }
.hk:hover .hk-str, .hk.aktivna .hk-str { opacity: 1; color: var(--akcent); }
/* točke */
.ht { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--akcent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 3; display: grid; place-items: center; text-decoration: none; transition: transform .25s var(--ease); }
.ht span { display: none; color: #fff; font: 700 11px var(--font); }
.ht::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--akcent); opacity: 0; animation: puls 2.6s ease-out infinite; }
.ht:nth-of-type(3n+1)::after { animation-delay: -.9s; } .ht:nth-of-type(3n+2)::after { animation-delay: -1.7s; }
@keyframes puls { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.ht:hover, .ht.aktivna { transform: scale(1.3); }
/* linije (crta ih js/naslovna.js) */
.scena-linije { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.scena-linije path { fill: none; stroke: #cfc9c0; stroke-width: 1.3; stroke-dasharray: 3 4; transition: stroke .2s; }
.scena-linije path.aktivna { stroke: var(--akcent); stroke-width: 1.8; stroke-dasharray: none; }
.scena-linije circle { fill: #cfc9c0; } .scena-linije circle.aktivna { fill: var(--akcent); }
.scena-traka, .ht-kartica, .traka-kontrole { display: none; }

/* rezultati kao panel ispod trake */
.hero-rezultati { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: flex; flex-direction: column; max-height: min(60vh, 560px); background: #fff; border: 1px solid var(--crta); border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(18,20,23,.45); overflow: hidden; animation: pojava .25s var(--ease) both; }
.hr-glava { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--crta); font-size: 14px; color: var(--prigušeno); font-weight: 600; }
.hr-ocisti { border: 0; background: none; font-size: 14px; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.hr-popis { flex: 1; overflow: auto; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start; }
.hr-popis .r-slika { width: 56px; height: 56px; }
.hr-popis .r-nema, .hr-popis li:has(.r-svi) { grid-column: 1 / -1; }
@keyframes pojava { from { opacity: 0; transform: translateY(10px); } }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 236px 236px 216px; gap: clamp(12px, 1.4vw, 20px);
  grid-template-areas: "a a b c" "a a d c" "e f d c"; }
.b-kartica { position: relative; overflow: hidden; border-radius: var(--r); background: var(--kamen); color: #fff; text-decoration: none; isolation: isolate; }
.b-kartica > img, .b-slike img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.b-slike { position: absolute; inset: 0; z-index: -2; }
.b-slike img { opacity: 0; transition: opacity 1.6s ease, transform 8s ease-out; transform: scale(1.06); }
.b-slike img.aktivna { opacity: 1; transform: scale(1); }
.b-kartica::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,13,.18) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,.68) 100%); pointer-events: none; }
a.b-kartica:hover > img { transform: scale(1.05); }
.b-oznake { position: absolute; top: 18px; left: 18px; right: 70px; display: flex; flex-wrap: wrap; gap: 6px; }
.b-cip { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--tinta); font-size: 13.5px; font-weight: 600; backdrop-filter: blur(6px); }
.b-strelica { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; transition: transform .35s var(--ease), background .25s, color .25s; }
.b-strelica .ik { width: 20px; height: 20px; stroke-width: 2; }
.b-kartica:hover .b-strelica, .b-strelica:hover { transform: rotate(45deg); background: var(--akcent); color: #fff; }
.gumb-svijetli { background: #fff; color: var(--tinta); border-color: #fff; }
.gumb-svijetli:hover { background: var(--akcent); color: #fff; border-color: var(--akcent); }

.b-glavna { grid-area: a; display: flex; align-items: flex-end; }
.b-glavna::after { background: linear-gradient(90deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.1) 100%), linear-gradient(0deg, rgba(10,11,13,.45), transparent 50%); }
.b-glavna-tekst { padding: clamp(24px, 3vw, 40px); max-width: 640px; }
.b-glavna h1 { font-size: clamp(38px, 4.6vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.b-glavna p { margin-top: 16px; font-size: clamp(16px, 1.3vw, 18.5px); color: rgba(255,255,255,.85); max-width: 32em; }
.b-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.b-potpis { font-size: 13.5px; color: rgba(255,255,255,.8); text-decoration: none; transition: opacity .6s; }
.b-potpis:hover { color: #fff; text-decoration: underline; }
.b-potpis.mijenja { opacity: 0; }

.b-kat { display: flex; align-items: flex-end; padding: 22px; }
.b-kat1 { grid-area: b; } .b-kat2 { grid-area: e; }
.b-kat-naziv { font: 700 clamp(22px, 2vw, 28px)/1.05 var(--font-naslov); letter-spacing: -.02em; }
.b-prazna { background: var(--kamen); }
.b-prazna::after { display: none; }

.b-istaknut { grid-area: c; display: flex; align-items: flex-end; }
.b-istaknut::after { background: linear-gradient(180deg, rgba(10,11,13,.2) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,.85) 100%); }
.b-ist-tekst { padding: 24px; transition: opacity .6s; }
.b-ist-tekst.mijenja, #b-ist-oznake.mijenja { opacity: 0; }
#b-ist-oznake { transition: opacity .6s; }
.b-nadnaslov { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.b-istaknut h2 { margin-top: 6px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 750; letter-spacing: -.035em; }
.b-istaknut p:not(.b-nadnaslov) { margin: 10px 0 20px; font-size: 15px; color: rgba(255,255,255,.82); }
.b-tocke { position: absolute; top: 76px; left: 24px; display: flex; gap: 6px; }
.b-tocke i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); transition: background .3s, width .3s; }
.b-tocke i.da { background: #fff; width: 30px; }

.b-ljudi { grid-area: d; background: #eaf1f8; color: var(--tinta); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.b-ljudi::after { display: none; }
.b-lica { position: absolute; top: 44%; left: 24px; transform: translateY(-50%); display: flex; align-items: center; }
.b-lica img, .b-lica span { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #eaf1f8; object-fit: cover; background: #fff; margin-left: -16px; box-shadow: 0 0 0 2px var(--akcent); }
.b-lica img:first-child { margin-left: 0; }
.b-lica span { display: grid; place-items: center; font: 700 16px var(--font); color: var(--prigušeno); box-shadow: none; background: #fff; }
.b-ime { position: absolute; padding: 5px 12px 5px 14px; border-radius: 999px; background: var(--akcent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; animation: lebdi 5s ease-in-out infinite; }
.b-ime::before { content: ''; position: absolute; left: -7px; top: -7px; border: 7px solid transparent; border-left-color: var(--akcent); transform: rotate(-135deg); transform-origin: center; }
.b-ime:nth-of-type(2n) { background: var(--tinta); animation-delay: -2.5s; } .b-ime:nth-of-type(2n)::before { border-left-color: var(--tinta); }
.b-ime.p1 { top: 14%; left: 8%; } .b-ime.p2 { top: 10%; right: 12%; } .b-ime.p3 { top: 62%; left: 10%; } .b-ime.p4 { top: 60%; right: 10%; }
@keyframes lebdi { 50% { transform: translateY(-5px); } }
.b-ljudi-tekst { position: relative; }
.b-ljudi h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.b-ljudi p { margin-top: 8px; font-size: 14.5px; color: var(--prigušeno); }

.b-poziv { grid-area: f; background: var(--akcent); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 22px 24px 24px; }
.b-poziv::after { background: radial-gradient(120% 100% at 100% 100%, rgba(255,255,255,.18), transparent 60%); }
.b-kartica > .b-poziv-ikona { position: absolute; inset: auto -10px -14px auto; width: 112px; height: 112px; object-fit: contain; z-index: -1; filter: drop-shadow(0 18px 18px rgba(90,25,0,.35)); transition: transform .5s var(--ease); }
.b-poziv:hover .b-poziv-ikona { transform: scale(1.05); }
.b-poziv strong { margin-top: 30px; max-width: 100%; }
.b-poziv .gumb { position: relative; }
.b-poziv strong { font: 650 clamp(19px, 1.6vw, 23px)/1.2 var(--font-naslov); letter-spacing: -.01em; max-width: 15em; }
.b-poziv .gumb { min-height: 42px; }
.b-poziv:hover .gumb { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* velika tražilica (stranica pretrage, 404) */
.velika-trazilica { position: relative; display: flex; align-items: center; margin-top: 30px; max-width: 620px; background: #fff; border: 1.5px solid var(--tinta); border-radius: 999px; padding: 6px; box-shadow: 0 14px 40px -18px rgba(18,20,23,.35); }
.velika-trazilica:focus-within { box-shadow: 0 0 0 5px var(--akcent-svijetli), 0 14px 40px -18px rgba(18,20,23,.35); }
.velika-trazilica > .ik { margin: 0 4px 0 16px; width: 22px; height: 22px; color: var(--prigušeno); }
.velika-trazilica input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font: inherit; font-size: 18px; color: inherit; padding: 0 8px; }
.velika-trazilica input:focus { outline: none; }
.velika-trazilica .gumb { min-height: 52px; padding: 0 26px; }

/* ---------- sekcije */
.sekcija { --sekcija-razmak: clamp(48px, 7vw, 96px); padding: var(--sekcija-razmak) 0; }
.sekcija-tijesna { padding-top: 12px; }
.sekcija-siva { background: var(--kamen); }
.sekcija-glava { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.sekcija h2, .o-projektu h2 { font-size: clamp(28px, 3.4vw, 44px); }
.dvije { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.dvije h2 { margin-bottom: 22px; }

.kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.kartica { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); }
.kartica-slika { display: block; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; background: var(--kamen); margin-bottom: 14px; }
.kartica-slika > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.kartica:hover .kartica-slika > img { transform: scale(1.04); }
.kartica-bez { display: grid; place-items: center; width: 100%; height: 100%; background: #f1efeb; }
.kartica-bez img { width: 50%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.kartica:hover .kartica-bez img { transform: scale(1.05); }
.kartica strong { font: 650 19px/1.25 var(--font-naslov); letter-spacing: -.02em; }
.kartica small { margin-top: 2px; color: var(--prigušeno); font-size: 15px; }
.kartica:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ist-kartice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .ist-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.oznake { display: flex; flex-wrap: wrap; gap: 8px; }
.oznake a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--crta); text-decoration: none; font-weight: 500; transition: .2s; }
.oznake a span { font-size: 13px; font-weight: 700; color: var(--prigušeno); background: var(--kamen); border-radius: 999px; padding: 1px 8px; }
.oznake a:hover { border-color: var(--tinta); }

.o-projektu .tekst { margin-top: 18px; color: #33363c; font-size: 18px; }
.tekst p + p { margin-top: 1em; }
.kontakt-kartica { align-self: start; background: var(--tinta); color: #fff; border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.kontakt-kartica h3 { font-size: 30px; }
.kontakt-kartica > p { margin-top: 12px; color: rgba(255,255,255,.75); }
.kontakt-kartica ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.kontakt-kartica .gumb { background: var(--akcent); border-color: var(--akcent); }
.kontakt-kartica .gumb:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.kontakt-kartica .gumb-obrub { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.kontakt-kartica .prigušeno { color: rgba(255,255,255,.65); display: flex; gap: 8px; align-items: center; font-size: 15px; }

/* ---------- ikone djelatnosti: realistični renderi na bijeloj pozadini — stapaju se s podlogom (bijelo nestane, sjena ostane) */
.krug, .mega-plocica img, .mob-plocica img, .pod-polica img, .b-kartica > .b-poziv-ikona, .dj-plocica img { mix-blend-mode: multiply; filter: none !important; }

/* ---------- naslovna: krugovi djelatnosti, radovi, koraci, banner */
.podnaslov { margin-top: 8px; color: var(--prigušeno); font-size: 16px; }
.podcrtano { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 5c10-5 20 5 30 0s20 5 30 0' fill='none' stroke='%230f5fa8' stroke-width='2.4'/%3E%3C/svg%3E") repeat-x 0 100% / 30px 6px; padding-bottom: 6px; }
.krugovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.krugovi a { position: relative; display: flex; flex-direction: column; min-height: 196px; padding: 18px 18px 0; border-radius: var(--r); text-decoration: none; overflow: hidden; isolation: isolate;
  background: var(--pozadina-kruga); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.krugovi a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(18,20,23,.4); }
.krug { position: absolute; right: -8px; bottom: -10px; width: 136px; height: 136px; z-index: -1; transition: transform .5s var(--ease); }
.krugovi a:hover .krug { transform: scale(1.06) translate(-3px, -3px); }
.krugovi strong { font: 650 18px/1.15 var(--font-naslov); letter-spacing: -.015em; max-width: 9em; }
.krugovi small { color: var(--prigušeno); font-size: 13.5px; margin-top: 4px; }
.mjesta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--crta); }
.mjesta > span { font-weight: 600; color: var(--prigušeno); }
.sekcija-mjesta { padding: 8px 0 clamp(32px, 4vw, 56px); }
.mjesta.samostalna { margin-top: 0; padding: 22px 0 0; border-top: 1px solid var(--crta); justify-content: center; }
.sidro { position: absolute; top: -110px; }
.mjesta .oznake a { padding: 6px 13px; font-size: 14.5px; }
.jos-mestara { margin-bottom: 8px; }
.jos-mestara h2 { margin: 0 0 18px; text-align: center; font: 600 16px var(--font); color: var(--prigušeno); }
.jos-mreza { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.jos-mreza li { flex: 0 0 132px; }
.jos-mreza a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 10px 8px 14px; border-radius: var(--r); background: #f1efeb; text-decoration: none; text-align: center; transition: transform .3s var(--ease), background .3s; }
.jos-mreza a:hover { transform: translateY(-3px); background: #ebe8e2; }
.jos-mreza img { width: 72px; height: 72px; mix-blend-mode: multiply; transition: transform .4s var(--ease); }
.jos-mreza a:hover img { transform: scale(1.06); }
.jos-mreza b { font: 650 13.5px/1.2 var(--font-naslov); letter-spacing: -.01em; }
.jos-mreza small { position: absolute; top: 8px; right: 9px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #fff; font: 700 11.5px/22px var(--font); color: var(--prigušeno); }
.mjesta-blok, .mob-blok { scroll-margin-top: 90px; }
.mjesta-blok { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--crta); }
.mjesta-blok h2 { margin: 0 0 18px; text-align: center; font: 600 16px var(--font); color: var(--prigušeno); }
.mj-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.mj-mreza a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--kamen); text-decoration: none; transition: background .2s, transform .25s var(--ease); }
.mj-mreza a:hover { background: #ebe8e2; transform: translateY(-2px); }
.mj-mreza a:active { transform: scale(.98); }
.mj-mreza .mj-ik { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r); background: #fff; color: var(--akcent); flex: none; }
.mj-mreza .mj-ik .ik { width: 20px; height: 20px; }
.mj-mreza .mj-tekst { min-width: 0; flex: 1; }
.mj-mreza b { display: block; font: 650 16px/1.2 var(--font-naslov); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-mreza small { font-size: 13px; color: var(--prigušeno); }
.mj-mreza a > .ik { width: 16px; height: 16px; color: var(--prigušeno); flex: none; }
.vise-blok { margin-top: 10px; }
.vise-lista { margin-bottom: 10px !important; }
.vise-lista:not([hidden]) { animation: mob-ulaz .35s var(--ease) both; }
.vise-gumb { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: var(--r); border: 1px dashed #cfc9c0; background: transparent; font: 600 15px var(--font); color: var(--tinta); cursor: pointer; transition: background .2s; }
.vise-gumb:hover { background: var(--kamen); }
.vise-gumb .ik { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.vise-gumb[aria-expanded="true"] .ik { transform: rotate(180deg); }
@media (max-width: 960px) { .mj-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .mj-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mj-mreza a { gap: 10px; min-height: 66px; padding: 10px 10px 10px 8px; } .mj-mreza a > .ik { display: none; } .mj-mreza .mj-ik { width: 38px; height: 38px; } .mj-mreza b { font-size: 15.5px; } }

.karusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.karusel::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .karusel { grid-auto-columns: calc((100% - 48px) / 4); } }
.karusel li { scroll-snap-align: start; }
.karusel a { display: block; text-decoration: none; }
.kr-slika { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--crta); margin-bottom: 12px; }
.kr-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.karusel a:hover .kr-slika img { transform: scale(1.05); }
.karusel strong { display: block; font: 650 17px/1.25 var(--font-naslov); letter-spacing: -.01em; }
.karusel small { color: var(--prigušeno); font-size: 14px; }
.karusel-strelice { display: flex; gap: 8px; }
.karusel-strelice button { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--akcent); color: #fff; transition: background .2s, opacity .2s; }
.karusel-strelice .ks-lijevo { background: #b9b5ae; }
.karusel-strelice button:hover { background: var(--tinta); }
.karusel-strelice button:disabled { opacity: .35; pointer-events: none; }
.karusel-strelice .ik { width: 22px; height: 22px; stroke-width: 2.2; }
.karusel-traka { position: relative; height: 4px; border-radius: 2px; background: var(--crta); margin-top: 26px; max-width: 520px; overflow: hidden; }
.karusel-traka i { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; border-radius: 2px; background: var(--akcent); transition: transform .15s linear; }

.koraci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.koraci > li { display: flex; flex-direction: column; background: var(--kamen); border-radius: var(--r); padding: 10px; }
.korak-tekst { padding: 22px 18px 18px; }
.korak-oznaka { display: inline-block; margin-bottom: 12px; font: 700 13px var(--font); letter-spacing: .06em; color: var(--akcent); }
.koraci h3 { font-size: 23px; letter-spacing: -.03em; margin: 0 0 8px; }
.koraci p { margin: 0; color: #45484e; font-size: 15.5px; }
/* mini prizori */
.korak-prizor { position: relative; height: 230px; border-radius: var(--r); background: #fff; overflow: hidden; isolation: isolate; }
.korak-prizor::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(18,20,23,.07) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); }
/* 1: tražilica */
.kp-trazi { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 22px; }
.kp-polje { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--akcent); box-shadow: 0 0 0 5px rgba(15, 95, 168,.1), 0 14px 30px -18px rgba(18,20,23,.4); font-weight: 500; }
.kp-polje .ik { width: 18px; height: 18px; color: var(--prigušeno); flex: none; }
.kp-upis { white-space: nowrap; }
.kp-polje i { width: 2px; height: 20px; margin-left: -9px; background: var(--akcent); animation: kp-kursor 1s steps(2) infinite; }
@keyframes kp-kursor { 50% { opacity: 0; } }
.kp-rezultati { list-style: none; margin: 0; border-radius: var(--r); background: #fff; box-shadow: 0 14px 34px -20px rgba(18,20,23,.45); border: 1px solid var(--crta); padding: 6px; transition: opacity .3s, transform .4s var(--ease); }
.kp-rezultati.skriveno { opacity: 0; transform: translateY(6px); }
.kp-rezultati li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: var(--r); }
.kp-rezultati li:first-child { background: var(--kamen); }
.kp-rezultati .r-slika { width: 38px; height: 38px; border-radius: var(--r); overflow: hidden; background: var(--kamen); flex: none; }
.kp-rezultati .r-slika img { width: 100%; height: 100%; object-fit: cover; }
.kp-rezultati strong { display: block; font: 650 13.5px/1.2 var(--font-naslov); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-rezultati small { font-size: 12px; color: var(--prigušeno); }
.kp-rezultati .r-tekst { min-width: 0; flex: 1; }
.kp-rezultati .ik { width: 15px; height: 15px; color: var(--prigušeno); flex: none; }
/* 2: mini stranica obrta */
.kp-stranica { display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.kps-glava { display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-radius: var(--r); background: #2a2d33 center/cover; color: #fff; }
.kps-glava img, .kps-ini, .kp-tko .kps-ini { width: 40px; height: 40px; border-radius: var(--r); background: #fff; object-fit: contain; padding: 3px; flex: none; }
.kps-ini { display: grid; place-items: center; padding: 0; font: 700 14px var(--font-naslov); color: var(--tinta); }
.kps-glava b { display: block; font: 700 15px/1.15 var(--font-naslov); letter-spacing: -.02em; }
.kps-glava small { font-size: 12px; opacity: .8; }
.kps-galerija b { display: block; margin: 2px 2px 8px; font: 650 13px var(--font-naslov); }
.kps-galerija div { display: flex; gap: 6px; }
.kps-galerija img { flex: 1 1 0; min-width: 0; height: 92px; object-fit: cover; border-radius: var(--r); transition: transform .5s var(--ease); }
.koraci > li:hover .kps-galerija img:first-child { transform: scale(1.04); }
/* 3: poziv */
.kp-poziv { display: grid; place-items: center; padding: 0 22px; }
.kp-kartica { width: 100%; max-width: 300px; padding: 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--crta); box-shadow: 0 18px 36px -22px rgba(18,20,23,.5); }
.kp-tko { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kp-tko img { width: 42px; height: 42px; border-radius: var(--r); object-fit: contain; background: #fff; border: 1px solid var(--crta); padding: 3px; flex: none; }
.kp-tko .kps-ini { border: 1px solid var(--crta); }
.kp-tko b { display: block; font: 650 15px/1.2 var(--font-naslov); } .kp-tko small { font-size: 13px; color: var(--prigušeno); }
.kp-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kp-gumbi span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 999px; font: 600 14px var(--font); }
.kp-gumbi .ik { width: 16px; height: 16px; }
.kp-nazovi { background: var(--akcent); color: #fff; animation: kp-zvoni 2.4s var(--ease) infinite; }
.kp-wa { background: #fff; color: var(--tinta); border: 1px solid var(--crta); }
@keyframes kp-zvoni { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(15, 95, 168,.45); } 35% { box-shadow: 0 0 0 9px rgba(15, 95, 168,0); } }
.kp-nula { position: absolute; top: 14px; right: 14px; padding: 6px 11px; border-radius: 999px; background: var(--tinta); color: #fff; font: 700 12px var(--font); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .kp-polje span, .kp-polje i, .kp-nazovi { animation: none; } }

.banner { --bp: clamp(28px, 4.5vw, 64px); position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; background: var(--more); color: #fff; border-radius: var(--r); padding: var(--bp) var(--bp) 0; overflow: hidden; isolation: isolate; }
.banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(100deg, transparent 35%, #000 90%); -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 90%); }
.banner-valovi { position: absolute; right: 0; bottom: 0; width: 55%; height: 100%; z-index: -1; fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.6; }
.banner-tekst { align-self: center; padding-bottom: var(--bp); }
.b-nadnaslov { display: inline-flex; align-items: center; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font: 700 13px var(--font); letter-spacing: .09em; text-transform: uppercase; }
.banner h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.02; letter-spacing: -.04em; margin: 18px 0 24px; text-wrap: balance; }
.banner .podcrtano { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 5c10-5 20 5 30 0s20 5 30 0' fill='none' stroke='%23ffffff' stroke-width='2.4'/%3E%3C/svg%3E"); }
.b-prednosti { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 34em; }
.b-prednosti li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.b-prednosti li i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; background: #fff; color: var(--akcent); }
.b-prednosti li i .ik { width: 16px; height: 16px; stroke-width: 2.6; }
.b-prednosti b { color: #fff; font-weight: 650; }
.banner-gumbi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.banner-gumbi .gumb { min-height: 56px; padding: 0 26px; font-size: 16.5px; }
.b-napomena { margin: 16px 0 0; font-size: 14.5px; color: rgba(255,255,255,.78); }
.b-napomena span { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; white-space: nowrap; }
.b-napomena .ik { width: 14px; height: 14px; }
/* desna strana: mobitel s pravom stranicom obrta */
.b-scena { position: relative; align-self: end; min-height: 440px; display: flex; justify-content: center; }
.b-tel { position: absolute; bottom: -70px; left: 50%; translate: -48% 0; width: 292px; height: 500px; padding: 10px; border-radius: var(--r); background: #121417; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 40px 70px -20px rgba(70,15,0,.65); rotate: 3deg; }
.b-tel::before { content: ''; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 78px; height: 22px; border-radius: 999px; background: #121417; z-index: 3; }
.b-ekran { height: 100%; border-radius: var(--r); background: #fff; color: var(--tinta); overflow: hidden; padding: 0 12px; }
.bt-glava { margin: 0 -12px; padding: 44px 16px 16px; background: #2a2d33 center/cover; color: #fff; display: grid; justify-items: start; gap: 2px; }
.bt-glava img, .bt-glava .kps-ini { width: 46px; height: 46px; border-radius: var(--r); background: #fff; object-fit: contain; padding: 3px; margin-bottom: 8px; }
.bt-glava b { font: 700 17px/1.15 var(--font-naslov); letter-spacing: -.025em; }
.bt-glava small { font-size: 13px; opacity: .85; }
.bt-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.bt-gumbi span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; font: 600 13.5px var(--font); }
.bt-gumbi .ik { width: 15px; height: 15px; }
.bt-nazovi { color: #fff; }
.bt-wa { border: 1px solid var(--crta); }
.bt-nasl { margin: 0 2px 8px; font: 650 13px var(--font-naslov); }
.bt-galerija { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bt-galerija img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--r); }
.bt-galerija img:first-child { grid-column: 1 / -1; height: 120px; }
/* plutajuće kartice */
.b-plutaj { position: absolute; z-index: 2; background: #fff; color: var(--tinta); border-radius: var(--r); box-shadow: 0 22px 40px -18px rgba(70,15,0,.6); animation: b-lebdi 6s ease-in-out infinite; }
@keyframes b-lebdi { 50% { transform: translateY(-8px); } }
.bp-poziv { right: 0; top: 54px; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 11px; }
.bp-poziv .bp-ik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: #1f9d55; color: #fff; animation: kp-zvoni 2.4s var(--ease) infinite; }
.bp-poziv .bp-ik .ik { width: 18px; height: 18px; }
.bp-poziv b { display: block; font: 650 14.5px/1.2 var(--font-naslov); } .bp-poziv small { font-size: 13px; color: var(--prigušeno); }
.bp-broj { left: 0; bottom: 18px; padding: 14px 18px; max-width: 232px; animation-delay: -3s; }
.bp-broj strong { display: block; margin-top: 8px; font: 650 16px/1.25 var(--font-naslov); }
.bp-broj > span { font-size: 13.5px; color: var(--prigušeno); }
.b-lica.mala { position: static; transform: none; }
.b-lica.mala img { width: 34px; height: 34px; border-width: 2px; border-color: #fff; margin-left: -10px; box-shadow: none; }
.b-lica.mala img:first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .b-plutaj, .bp-poziv .bp-ik { animation: none; } }

/* ---------- popis / pretraga */
.popis-glava { padding: clamp(28px, 5vw, 64px) 0 28px; }
.popis-glava h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em; }
.pretraga-broj { margin-top: 14px; color: var(--prigušeno); font-weight: 600; font-size: 15px; min-height: 1.5em; }
.mrvice { font-size: 14px; color: var(--prigušeno); margin-bottom: 18px; }
.mrvice a { text-decoration: none; }
.mrvice a:hover { text-decoration: underline; }
.prazno { color: var(--prigušeno); }

/* ---------- stranica obrta */
.obrt-hero { position: relative; color: #fff; background: var(--tinta); overflow: hidden; isolation: isolate; }
.obrt-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--obrt) 55%, transparent), transparent 60%); }
.obrt-hero.ima-sliku::before { background: linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.88) 100%); }
.obrt-pozadina { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: polako 18s ease-out both; }
@keyframes polako { from { transform: scale(1.08); } }
.obrt-hero-sadrzaj { padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(32px, 5vw, 60px); min-height: clamp(380px, 52vh, 560px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.obrt-hero .mrvice { color: rgba(255,255,255,.75); }
.obrt-identitet { display: flex; align-items: end; gap: 22px; }
.obrt-logo { width: clamp(76px, 9vw, 112px); height: clamp(76px, 9vw, 112px); border-radius: var(--r); background: #fff; object-fit: contain; padding: 10px; flex: none; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.obrt-logo-inicijali { display: grid; place-items: center; font: 800 clamp(30px, 3.4vw, 42px) var(--font-naslov); color: var(--obrt); padding: 0; }
.obrt-identitet h1 { font-size: clamp(34px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.obrt-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 16.5px; color: rgba(255,255,255,.85); }
.obrt-meta span { display: inline-flex; align-items: center; gap: 6px; }
.obrt-akcije { display: flex; flex-wrap: wrap; gap: 10px; }

.obrt-mreza { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(28px, 5vw, 72px); padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 96px); align-items: start; }
.obrt-info { display: flex; flex-direction: column; gap: 18px; }
.obrt-portret { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.obrt-uvod { font: 600 21px/1.35 var(--font-naslov); letter-spacing: -.01em; }
.obrt-info .tekst { color: #33363c; }
.mali-naslov { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); margin-top: 8px; }
.usluge { display: flex; flex-wrap: wrap; gap: 6px; }
.usluge li { padding: 6px 12px; border-radius: 999px; background: var(--kamen); font-size: 14.5px; }
.kontakti { display: flex; flex-direction: column; gap: 10px; }
.kontakti li { display: flex; align-items: center; gap: 12px; }
.kontakti .ik { color: var(--obrt); width: 20px; height: 20px; }
.kontakti a { text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.kontakti a:hover { text-decoration: underline; }
.mreze { display: flex; gap: 8px; }
.mreze a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--crta); transition: .2s; }
.mreze a:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.mreze .ik { width: 20px; height: 20px; }
.karta { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--kamen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e2ded6' stroke-width='1'/%3E%3C/svg%3E"); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.karta-gumb { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--tinta); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.karta-gumb:hover { background: var(--tinta); color: #fff; }
.karta-link { font-size: 14px; color: var(--prigušeno); }
.karta iframe, .video iframe, .tura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sekcija-naslov { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 20px; display: flex; align-items: baseline; gap: 10px; }
.sekcija-naslov span { font: 700 14px var(--font); color: var(--prigušeno); background: var(--kamen); border-radius: 999px; padding: 3px 10px; }
.obrt-sadrzaj { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.galerija { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galerija li:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.galerija a { position: relative; display: block; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--kamen); aspect-ratio: 1; }
.galerija li:nth-child(7n+1) a { aspect-ratio: auto; min-height: 100%; }
.galerija img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.galerija a:hover img { transform: scale(1.05); }
.galerija-opis { position: absolute; inset: auto 0 0; padding: 28px 12px 10px; color: #fff; font-size: 13.5px; line-height: 1.3; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: 0; transition: opacity .3s; }
.galerija a:hover .galerija-opis, .galerija a:focus-visible .galerija-opis { opacity: 1; }
@media (hover: none) { .galerija-opis { opacity: 1; } }

.videi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; }
.video.okomit { aspect-ratio: 9/16; max-height: 640px; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s; }
.video button { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--obrt); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease); }
.video button .ik { width: 30px; height: 30px; margin-left: 4px; }
.video:hover button { transform: scale(1.08); }
.tura { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--tinta); display: grid; place-items: center; }
.tura > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8); }
.tura > .gumb { position: relative; }
.tura.ucitano { background: #000; }

/* traka za poziv na dnu ekrana — samo mobitel, pojavi se kad gumbi u zaglavlju odu s ekrana */
.poziv-traka { display: none; }
@media (max-width: 720px) {
  .poziv-traka { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--crta); transform: translateY(110%); transition: transform .35s var(--ease); }
  .poziv-traka.vidljiva { transform: none; }
  .poziv-traka .gumb { flex: 1; min-height: 50px; font-size: 16px; }
  .gumb-wa { background: #0f7f43; border-color: #0f7f43; color: #fff; }
  .str-obrt .podnozje { padding-bottom: 100px; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,11,13,.94); display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; animation: pojava .25s ease both; }
.lightbox figure { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100vh; padding: 56px 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: var(--r); transition: opacity .2s; }
.lightbox img.mijenja { opacity: .3; }
.lightbox figcaption { color: #fff; font-size: 16px; text-align: center; max-width: 60ch; }
.lightbox button { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; justify-self: center; transition: background .2s; }
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox button .ik { width: 26px; height: 26px; }
.lb-zatvori { position: absolute; top: 16px; right: 16px; }
.lb-brojac { position: absolute; top: 28px; left: 24px; color: rgba(255,255,255,.7); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- PODNOŽJE: kratka tamna ploča (marka + kontakt | tri stupca) s velikim blijedim potpisom */
.podnozje { padding: clamp(24px, 4vw, 56px) 0 16px; background: #fff; }
.pod-ploca { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); padding: clamp(28px, 4.5vw, 64px) clamp(24px, 4.5vw, 64px) 0; color: rgba(255,255,255,.72);
  background: radial-gradient(70% 90% at 100% 0%, rgba(15, 95, 168,.22), transparent 60%), var(--tinta); }
.pod-gore { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); }
.pod-logo img { display: block; width: auto; height: 48px; }
.pod-slogan { margin: 20px 0 22px; max-width: 18em; font: 650 clamp(22px, 2.2vw, 28px)/1.15 var(--font-naslov); letter-spacing: -.03em; color: #fff; }
.pod-trazi { position: relative; display: flex; align-items: center; max-width: 380px; height: 52px; padding: 0 6px 0 20px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, background .2s; }
.pod-trazi:focus-within { border-color: var(--akcent); background: rgba(255,255,255,.12); }
.pod-trazi input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; }
.pod-trazi input::placeholder { color: rgba(255,255,255,.5); }
.pod-trazi input:focus { outline: none; }
.pod-trazi button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--akcent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease); }
.pod-trazi button:hover { transform: scale(1.08); }
.pod-trazi button .ik { width: 18px; height: 18px; stroke-width: 2.1; }
.pod-kontakt { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.pod-kontakt a, .pod-kontakt span { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); text-decoration: none; font-size: 15.5px; }
.pod-kontakt a:hover { color: #fff; }
.pod-kontakt .ik { width: 18px; height: 18px; color: var(--akcent); flex: none; }
.pod-kontakt .pod-tel { font: 700 22px var(--font-naslov); letter-spacing: -.02em; color: #fff; }
.pod-stupci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pod-ploca h2 { margin: 0 0 16px; font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.pod-stupci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pod-stupci a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 15.5px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.pod-stupci a:hover { color: #fff; background-size: 100% 1px; }
.pod-stupci a.pod-sve { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--akcent); font-weight: 600; background: none; }
.pod-stupci a.pod-sve:hover { color: #4b9be0; }
.pod-sve .ik { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.pod-sve:hover .ik { transform: translateX(3px); }
.pod-dno { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(36px, 5vw, 64px); padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.5); }
.pod-ploca .winkla { font-family: 'Unbounded', var(--font-naslov); font-weight: 600; color: #fff; text-decoration: none; }
.pod-ploca .winkla:hover { color: var(--akcent); }
.pod-rijec { display: block; margin-top: 4px; font: 800 17.5cqw/.8 var(--font-naslov); letter-spacing: -.055em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.02) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(.2em); }

/* ---------- mobitel i tablet */
@media (max-width: 1100px) {
  .mega-plocice { grid-template-columns: repeat(4, 1fr); }
  .banner { grid-template-columns: 1fr; gap: 8px; }
  .banner-valovi { width: 100%; }
  .banner-tekst { padding-bottom: 0; }
  .b-scena { min-height: 470px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 420px 240px 240px 260px; grid-template-areas: "a a" "b e" "c d" "c f"; }
}
@media (max-width: 960px) {
  .glavni-nav, .kap-cta { display: none; }
  .burger { display: block; }
  .kapsula-desno { margin-left: auto; }
  .kapsula { height: 62px; padding: 0 8px 0 16px; }
  .zaglavlje.skrolano .kapsula { height: 58px; }
  .h-trazilica { left: var(--rub); width: auto; }
  .dvije, .obrt-mreza { grid-template-columns: 1fr; }
  .obrt-info { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .velika-trazilica { margin-top: 24px; }
  .velika-trazilica input { height: 48px; font-size: 16.5px; }
  .velika-trazilica .gumb { min-height: 48px; padding: 0 18px; }
  .traka { flex-wrap: wrap; border-radius: var(--r); padding: 8px; }
  .traka-polje { flex: 1 1 100%; padding: 8px 14px; }
  .traka-polje + .traka-polje { border-left: 0; border-top: 1px solid var(--crta); }
  .traka-gumb { flex: 1 1 100%; justify-content: space-between; height: 52px; margin-top: 4px; }
  .traka-polje input, .traka-polje select { font-size: 16px; }
  .hero-rezultati { max-height: 70vh; }
  .hr-popis { grid-template-columns: 1fr; }
  .bento { grid-template-rows: 460px 190px 380px 220px 200px; grid-template-areas: "a a" "b e" "c c" "d d" "f f"; gap: 10px; }
  .b-kartica { border-radius: var(--r); }
  .b-kat { padding: 16px; } .b-kat .b-cip { font-size: 12px; padding: 4px 10px; }
  .b-kat .b-strelica { width: 38px; height: 38px; top: 12px; right: 12px; }
  .b-oznake { top: 14px; left: 14px; }
  .b-kat-naziv { font-size: 19px; }
  .b-tocke { top: 62px; }
  /* djelatnosti: vodoravni red pločica koji se lista prstom */
  .krugovi { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--rub) * -1); padding: 4px var(--rub) 10px; scroll-padding: 0 var(--rub); scrollbar-width: none; }
  .krugovi::-webkit-scrollbar { display: none; }
  .krugovi li { scroll-snap-align: start; }
  .krugovi { grid-auto-columns: 144px; }
  .krugovi a { min-height: 164px; padding: 14px 14px 0; border-radius: var(--r); }
  .krug { width: 108px; height: 108px; right: -12px; bottom: -12px; }
  .krugovi strong { font-size: 16px; }
  .mjesta { margin-top: 22px; padding-top: 18px; }
  .karusel { grid-auto-columns: 78%; margin: 0 calc(var(--rub) * -1); padding: 0 var(--rub) 4px; scroll-padding: 0 var(--rub); }
  .karusel-strelice { display: none; }
  .koraci { grid-template-columns: 1fr; gap: 12px; }
  .korak-prizor { height: 210px; }
  .korak-tekst { padding: 18px 12px 12px; }
  .banner { grid-template-columns: 1fr; border-radius: var(--r); }
  .banner { --bp: 22px; }
  .b-scena { min-height: 430px; }
  .b-tel { width: 262px; height: 470px; bottom: -60px; }
  .bp-poziv { right: -4px; top: 30px; }
  .bp-broj { left: -4px; bottom: 14px; max-width: 200px; }
  .banner-gumbi .gumb { width: 100%; }
  /* istaknuti obrtnici: karusel prstom */
  .str-naslovna .kartice { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--rub) * -1); padding: 4px var(--rub) 12px; scroll-padding: 0 var(--rub); scrollbar-width: none; }
  .str-naslovna .kartice::-webkit-scrollbar { display: none; }
  .str-naslovna .kartica { scroll-snap-align: start; }
  .b-lica { top: 46%; }
  .b-lica img, .b-lica span { width: 58px; height: 58px; margin-left: -12px; border-width: 3px; }
  .b-ime.p1 { top: 9%; } .b-ime.p2 { top: 7%; } .b-ime.p3, .b-ime.p4 { display: none; }
  .galerija { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .galerija li:nth-child(7n+1) { grid-column: span 2; grid-row: auto; }
  .galerija li:nth-child(7n+1) a { aspect-ratio: 4/3; }
  .obrt-identitet { flex-direction: column; align-items: start; gap: 16px; }
  .obrt-akcije .gumb { flex: 1 1 auto; }
  .lightbox { grid-template-columns: 1fr; }
  .lightbox figure { grid-column: 1; grid-row: 1; padding: 60px 8px; }
  .lb-str { position: absolute; bottom: 20px; }
  .lb-lijevo { left: 20px; } .lb-desno { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* mobitel: zaglavlje i podnožje (na kraju datoteke da nadjača pravila za tablet) */
@media (max-width: 720px) {
  .zaglavlje { padding-top: 8px; }
  .logo-img { height: 48px; margin: -6px 0 -8px -6px; }
}

/* podnožje: tablet i mobitel */
@media (max-width: 1000px) {
  .pod-gore { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .pod-ploca { border-radius: var(--r); }
  .pod-stupci { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .pod-stupci > nav:last-child { grid-column: 1 / -1; }
  .pod-stupci > nav:last-child ul { grid-template-columns: 1fr 1fr; }
  .pod-trazi { max-width: none; }
  .pod-dno { flex-direction: column; }
}

/* scena s kućom: tablet — kuća preko cijele širine, kartice u dva stupca ispod (bez linija) */
@media (max-width: 1100px) and (min-width: 721px) {
  .scena { grid-template-columns: 1fr 1fr; gap: 10px; }
  .scena-kuca { grid-column: 1 / -1; order: -1; margin-bottom: 14px; }
  .scena-linije { display: none; }
}

/* scena s kućom: MOBITEL — kuća se „pali“ točku po točku, kartica plovi preko kuće, ispod traka koja se lista prstom */
@media (max-width: 720px) {
  .scena { display: block; margin-top: 18px; }
  .scena-kartice, .scena-linije { display: none; }
  .scena-kuca { margin: 0 -6px 74px; }
  .ht { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-width: 2.5px; }
  .ht::before { content: ''; position: absolute; inset: -12px; }               /* veća površina za prst */
  .jos-mestara { display: none !important; }
  .ht.aktivna { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(15, 95, 168,.25), 0 2px 8px rgba(0,0,0,.25); }
  .ht-kartica:not([hidden]) { display: flex; position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); z-index: 5; align-items: center; gap: 10px; padding: 8px 10px 8px 8px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--crta); border-radius: var(--r);
    box-shadow: 0 14px 30px -14px rgba(18,20,23,.45); text-decoration: none; animation: kartica-ulaz .35s var(--ease) both; }
  @keyframes kartica-ulaz { from { opacity: 0; transform: translateY(8px); } }
  .ht-kartica img { width: 44px; height: 44px; border-radius: var(--r); background: #f1efeb; mix-blend-mode: multiply; flex: none; }
  .ht-kartica .hk-tekst b { font-size: 15.5px; }
  .ht-kartica-str { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--akcent); color: #fff; display: grid; place-items: center; flex: none; }
  .ht-kartica-str .ik { width: 18px; height: 18px; stroke-width: 2.2; }
  .scena-traka { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 12px calc(var(--rub) * -1) 0; padding: 2px var(--rub) 6px; scroll-padding: 0 var(--rub); }
  .scena-traka::-webkit-scrollbar { display: none; }
  .scena-traka .hk { flex: none; scroll-snap-align: start; width: 42%; min-width: 148px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px 14px; border-radius: var(--r); }
  .scena-traka .hk img { width: 76px; height: 76px; border-radius: var(--r); }
  .scena-traka .hk-tekst b { font-size: 16px; }
  .scena-traka .hk-tekst small { font-size: 13px; }
  .scena-traka .hk img { background: none; }
  .traka-kontrole { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
  .traka-napredak { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--crta); overflow: hidden; }
  .traka-napredak i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--akcent); transition: transform .12s linear; }
  .traka-strelice { display: flex; gap: 8px; flex: none; }
  .traka-strelice button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--akcent); color: #fff; transition: opacity .2s, background .2s; }
  .traka-strelice .ts-lijevo { background: #b9b5ae; }
  .traka-strelice button:disabled { opacity: .35; }
  .traka-strelice .ik { width: 20px; height: 20px; stroke-width: 2.2; }
  .scena-traka .hk.aktivna { border-color: var(--akcent); background: #f5f9fd; transform: none; }
  .hero-uvod h1 { font-size: 34px; }
  .hero-uvod .nadnaslov { font-size: 13px; margin-bottom: 10px; }
  /* kompaktna tražilica: polje + okrugli gumb u jednom redu, „Gdje?“ tanko ispod */
  .traka { flex-wrap: wrap; align-items: center; border-radius: var(--r); padding: 6px; }
  .traka-polje { padding: 6px 12px; }
  .traka-sto { flex: 1 1 0; order: 1; }
  .traka-sto > span { font-size: 12px; }
  .traka-gumb { order: 2; flex: none; width: 52px; height: 52px; padding: 0; margin: 0; justify-content: center; border-radius: var(--r); }
  .traka-gumb span { display: none; }
  .traka-gumb .ik { width: 24px; height: 24px; padding: 0; background: none; color: #fff; }
  .traka-gdje { order: 3; flex: 1 1 100% !important; flex-direction: row; align-items: center; gap: 8px; margin: 4px 0 0; padding: 8px 12px 4px; border-left: 0 !important; border-top: 1px solid var(--crta) !important; }
  .traka-gdje > span { font-size: 12px; color: var(--prigušeno); font-weight: 600; flex: none; }
  .traka-gdje select { font-size: 14.5px; font-weight: 600; flex: 1; }
}

/* ---------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq-uvod { position: sticky; top: 110px; }
.faq-oznaka { display: inline-flex; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: var(--kamen); font: 700 13px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--prigušeno); }
.faq-uvod h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 14px; text-wrap: balance; }
.faq-uvod .podnaslov { margin: 0; max-width: 26em; }
.faq-kontakt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.faq-lista { display: grid; gap: 10px; }
.faq-stavka { background: var(--kamen); border-radius: var(--r); transition: background .3s, box-shadow .3s; }
.faq-stavka { overflow: hidden; }
.faq-stavka.otv { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.faq-stavka summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font: 650 clamp(17px, 1.5vw, 20px)/1.3 var(--font-naslov); letter-spacing: -.02em; min-height: 64px; }
.faq-stavka summary::-webkit-details-marker { display: none; }
.faq-stavka summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; transition: background .25s, transform .35s var(--ease); }
.faq-stavka.otv summary i { background: var(--tinta); transform: rotate(45deg); }
.faq-stavka summary i::before, .faq-stavka summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--tinta); transition: background .25s; }
.faq-stavka summary i::after { transform: rotate(90deg); }
.faq-stavka.otv summary i::before, .faq-stavka.otv summary i::after { background: #fff; }
.faq-stavka summary:hover i { background: var(--akcent-svijetli, #e3eefa); }
.faq-stavka p { margin: 0; padding: 0 22px 22px; max-width: 46em; color: #45484e; font-size: 16.5px; line-height: 1.6; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 24px; } .faq-uvod { position: static; } }
@media (max-width: 480px) { .faq-stavka summary { padding: 16px 16px 16px 18px; } .faq-stavka p { padding: 0 18px 18px; font-size: 16px; } }

/* ======================================================================
   VELIKI EKRANI: sadržaj se širi i raste, da na 24" i većim monitorima ne ostane uska traka usred praznine
   ====================================================================== */
@media (min-width: 1600px) {
  :root { --sirina: 1560px; --rub: 56px; --zaglavlje: 100px; }
  body { font-size: 18px; }
  .kapsula { height: 74px; padding: 0 12px 0 24px; }
  .logo-img { height: 62px; }
  .nav-link { height: 46px; padding: 0 18px; font-size: 17px; }
  .kap-cta { height: 52px; font-size: 17px; }
  .hero-uvod h1 { font-size: clamp(68px, 4.4vw, 128px); }
  .traka { max-width: 1120px; }
  .scena { grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(250px, 310px); gap: 36px; }
  .scena-kuca { max-width: 920px; }
  .hk { padding: 8px 16px 8px 8px; gap: 14px; border-radius: var(--r); }
  .hk img { width: 60px; height: 60px; border-radius: var(--r); }
  .hk-tekst b { font-size: 17.5px; } .hk-tekst small { font-size: 14px; }
  .sekcija h2, .o-projektu h2 { font-size: clamp(44px, 2.8vw, 76px); }
  .banner h2 { font-size: clamp(52px, 3.2vw, 88px); }
  .faq-uvod h2 { font-size: clamp(50px, 3vw, 80px); }
  .sekcija-naslov { font-size: clamp(34px, 2vw, 50px); }
  .popis-glava h1 { font-size: clamp(64px, 3.6vw, 96px); }
  .podnaslov { font-size: 19px; }
  .b-prednosti li { font-size: 18px; }
  .b-scena { min-height: 520px; }
  .b-tel { width: 340px; height: 580px; }
  .bt-gumbi span { height: 44px; font-size: 15px; } .bt-glava b { font-size: 19px; }
  .korak-prizor { height: 270px; }
  .koraci h3 { font-size: 26px; } .koraci p { font-size: 17px; }
  .faq-stavka summary { font-size: 21px; padding: 24px 28px; } .faq-stavka p { padding: 0 28px 26px; font-size: 18px; }
  .mj-mreza a { min-height: 74px; } .mj-mreza b { font-size: 18px; }
  .jos-mreza li { flex-basis: 156px; } .jos-mreza img { width: 84px; height: 84px; } .jos-mreza b { font-size: 15.5px; }
  .pod-slogan { font-size: 32px; } .pod-stupci a, .pod-kontakt a, .pod-kontakt span { font-size: 17px; }
  .kartice { gap: 22px; }
}
@media (min-width: 1920px) {
  :root { --sirina: 1820px; --rub: 72px; --zaglavlje: 108px; }
  body { font-size: 19px; }
  .kapsula { height: 80px; }
  .logo-img { height: 68px; }
  .nav-link { height: 50px; padding: 0 22px; font-size: 18px; }
  .kap-cta { height: 56px; font-size: 18px; padding-left: 58px; }
  .hero-uvod h1 { font-size: clamp(80px, 4.5vw, 150px); }
  .traka { max-width: 1280px; }
  .scena { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px); gap: 44px; }
  .scena-kuca { max-width: 1080px; }
  .hk img { width: 68px; height: 68px; }
  .hk-tekst b { font-size: 19.5px; } .hk-tekst small { font-size: 15px; }
  .b-tel { width: 380px; height: 640px; }
  .korak-prizor { height: 300px; }
  .jos-mreza li { flex-basis: 176px; } .jos-mreza img { width: 92px; height: 92px; }
  .mj-mreza a { min-height: 80px; } .mj-mreza .mj-ik { width: 48px; height: 48px; }
}
/* (≥2400 px: vidi „VELIKI EKRANI“ na dnu — cijela stranica raste preko zoom) */

/* ======================================================================
   TABLETI I OTVORENI PREKLOPNI TELEFONI (Fold ~ 840–900 px, iPad mini/Air, Surface Duo)
   ====================================================================== */
@media (min-width: 761px) and (max-width: 1000px) {
  .banner { grid-template-columns: 1.15fr .85fr; gap: 16px; --bp: 36px; }
  .banner-tekst { padding-bottom: var(--bp); }
  .b-scena { min-height: 400px; }
  .b-tel { width: 238px; height: 430px; bottom: -48px; translate: -44% 0; }
  .bp-poziv { right: -14px; top: 16px; padding: 9px 12px 9px 9px; }
  .bp-broj { left: -26px; bottom: 14px; max-width: 176px; padding: 11px 13px; }
  .b-prednosti li { font-size: 15.5px; }
  .banner-gumbi .gumb { min-height: 52px; padding: 0 20px; font-size: 15.5px; }
}

/* ======================================================================
   JAKO UZAK EKRAN: vanjski ekrani preklopnih telefona (Z Flip ~260 px, Z Fold ~280–344 px)
   ====================================================================== */
@media (max-width: 359px) {
  :root { --rub: 14px; }
  body { font-size: 16px; }
  .kapsula { height: 56px; padding: 0 6px 0 10px; }
  .logo-img { height: 44px; }
  .burger { width: 42px; height: 42px; }
  .hero-uvod h1 { font-size: 30px; }
  .traka { padding: 6px; border-radius: var(--r); }
  .sekcija h2, .banner h2, .faq-uvod h2 { font-size: 26px; }
  .banner { --bp: 18px; border-radius: var(--r); }
  .b-prednosti li { font-size: 15px; }
  .b-tel { width: 226px; height: 420px; }
  .bp-poziv { right: -8px; } .bp-poziv small { display: none; }
  .bp-broj { max-width: 170px; left: -8px; }
  .mj-mreza { gap: 6px; } .mj-mreza a { padding: 8px 8px 8px 6px; gap: 8px; } .mj-mreza .mj-ik { width: 32px; height: 32px; } .mj-mreza b { font-size: 14.5px; } .mj-mreza small { font-size: 12px; }
  .jos-mreza li { flex-basis: calc(50% - 5px); }
  .pod-stupci { grid-template-columns: 1fr; } .pod-stupci > nav:last-child ul { grid-template-columns: 1fr; }
  .pod-ploca { padding-left: 18px; padding-right: 18px; border-radius: var(--r); }
  .mob-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .korak-prizor { height: 200px; }
  .kp-polje { height: 46px; font-size: 14px; }
  .faq-stavka summary { padding: 14px 12px 14px 14px; font-size: 16px; }
  .faq-stavka summary i { width: 30px; height: 30px; }
  .gumb { padding: 0 16px; }
}

/* ======================================================================
   SKLOPIVI EKRANI s dva zaslona (Surface Duo, Galaxy Fold u tabletop načinu): sadržaj ne prelazi preko šarke
   ====================================================================== */
@media (horizontal-viewport-segments: 2) {
  .okvir { padding-left: max(var(--rub), env(viewport-segment-width 0 0, 0px)); }
}

/* ======================================================================
   NAČIN RADA: dodir, usjeci i sigurna područja
   ====================================================================== */
.zaglavlje { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.poziv-traka { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
@media (pointer: coarse) {
  .nav-link, .kap-ikona, .burger { min-height: 44px; }
  .pod-stupci a { min-height: 44px; display: inline-flex; align-items: center; }
  .mj-mreza a { min-height: 56px; }
  .pod-stupci li { margin: 0; }
}
/* niski ekrani u horizontalnom položaju (preklopni telefon polu-otvoren, telefon na boku) */
@media (max-height: 520px) and (orientation: landscape) {
  .mob-izbornik { padding-top: 80px; }
  .hero-uvod h1 { font-size: clamp(30px, 6vw, 48px); }
}

/* sprječava da dugi sadržaj (tipkanje, nowrap) raširi mrežu na uskim ekranima */
.koraci { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .koraci { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 1000px) { .koraci { grid-template-columns: repeat(3, minmax(0, 1fr)); } .korak-prizor { height: 250px; } .koraci h3 { font-size: 20px; } .koraci p { font-size: 15px; } .korak-tekst { padding: 18px 12px 14px; } }
.koraci > li, .kp-trazi > *, .faq-lista > *, .mj-mreza > li, .jos-mreza > li { min-width: 0; }
.kp-upis { min-width: 0; overflow: hidden; text-overflow: clip; }
.kp-polje { min-width: 0; }
.sekcija-glava { flex-wrap: wrap; gap: 8px 16px; }
@media (max-width: 359px) { .sekcija-glava .poveznica { font-size: 14px; } }
.banner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .banner { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 1000px) { .banner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.banner > *, .faq > * { min-width: 0; }
.banner-gumbi .gumb, .faq-kontakt .gumb { white-space: normal; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.b-napomena span { white-space: normal; }
@media (max-width: 359px) { .banner-gumbi .gumb { padding: 0 14px; min-height: 50px; font-size: 15px; } }
.pod-gore { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr); }
@media (max-width: 1000px) { .pod-gore { grid-template-columns: minmax(0, 1fr); } }
.pod-marka, .pod-stupci { min-width: 0; }
.pod-slogan { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .obrt-akcije { gap: 8px; } .obrt-akcije .gumb { flex: 1 1 100%; white-space: normal; min-width: 0; }
  .poziv-traka .gumb { min-width: 0; padding: 0 12px; font-size: 15px; }
  .obrt-identitet { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* „Još meštara“ i „Obrtnici po mjestu“: lijevo poravnanje, pločice ispunjavaju širinu u urednoj mreži */
.jos-mestara h2, .mjesta-blok h2 { text-align: left; }
.jos-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); justify-content: stretch; gap: 10px; }
.jos-mreza li { flex: none; }
@media (min-width: 1600px) { .jos-mreza { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
@media (max-width: 480px) { .jos-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- PRIJAVA OBRTA (dijalog) */
.prijava { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--r); background: #fff; color: var(--tinta); box-shadow: 0 40px 100px -30px rgba(18,20,23,.6); overflow: hidden; }
.prijava[open] { animation: pr-ulaz .4s var(--ease) both; }
.prijava::backdrop { background: rgba(18,20,23,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: pr-pozadina .3s both; }
@keyframes pr-ulaz { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes pr-pozadina { from { opacity: 0; } }
.pr-okvir { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; padding: clamp(24px, 4vw, 36px); }
.pr-zatvori { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--kamen); color: var(--tinta); cursor: pointer; transition: background .2s; }
.pr-zatvori:hover { background: #ebe8e2; } .pr-zatvori .ik { width: 18px; height: 18px; stroke-width: 2.2; }
.pr-okvir h2 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.035em; line-height: 1.05; padding-right: 48px; }
.pr-uvod { margin: 0 0 22px; color: var(--prigušeno); font-size: 15.5px; }
.pr-forma { display: grid; gap: 14px; }
.pr-red { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-polje { display: grid; gap: 6px; min-width: 0; }
.pr-polje > span { font: 600 13.5px var(--font); }
.pr-polje input, .pr-polje textarea { width: 100%; min-width: 0; padding: 14px 16px; border: 1.5px solid var(--crta); border-radius: var(--r); background: #fff; font: inherit; font-size: 16px; color: var(--tinta); transition: border-color .2s, box-shadow .2s; resize: vertical; }
.pr-polje input::placeholder, .pr-polje textarea::placeholder { color: #a3a6ab; }
.pr-polje input:focus, .pr-polje textarea:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-svijetli); }
.pr-polje [aria-invalid="true"] { border-color: #c62f22; box-shadow: 0 0 0 4px rgba(198,47,34,.1); }
.pr-med { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pr-greska { margin: 0; padding: 12px 14px; border-radius: var(--r); background: #fdecea; color: #a02318; font-size: 14.5px; }
.pr-posalji { min-height: 56px; font-size: 16.5px; }
.pr-uspjeh { display: grid; justify-items: start; gap: 8px; padding: 12px 0 4px; }
.pr-kvacica { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%; background: #e6f5ec; color: #1f8a4c; }
.pr-kvacica .ik { width: 30px; height: 30px; stroke-width: 2.6; }
.pr-uspjeh p { margin: 0 0 14px; color: var(--prigušeno); }
@media (max-width: 520px) { .pr-red { grid-template-columns: 1fr; } .prijava { border-radius: var(--r); } }
@media (prefers-reduced-motion: reduce) { .prijava[open], .prijava::backdrop { animation: none; } }

/* ---------- PRAVNE STRANICE */
.pravno { padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 7vw, 100px); }
.pravno-glava { max-width: 52em; margin-bottom: clamp(28px, 4vw, 48px); }
.pravno-glava h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; }
.pravno-datum { display: inline-flex; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: var(--kamen); font-size: 13.5px; font-weight: 600; color: var(--prigušeno); }
.pravno-uvod { margin: 0; max-width: 36em; font-size: clamp(17px, 1.5vw, 20px); color: var(--prigušeno); }
.pravno-mreza { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pravno-uski .pravno-mreza { grid-template-columns: minmax(0, 1fr); }
.pravno-toc { position: sticky; top: 110px; }
.pravno-toc p { margin: 0 0 12px; font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); }
.pravno-toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1.5px solid var(--crta); display: grid; gap: 4px; }
.pravno-toc a { display: block; padding: 5px 0; color: var(--prigušeno); text-decoration: none; font-size: 15px; line-height: 1.35; transition: color .2s; }
.pravno-toc a:hover { color: var(--tinta); }
.pravno-tijelo { max-width: 46em; }
.pravno-tijelo section { scroll-margin-top: 0; padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--crta); }
.pravno-tijelo section:last-of-type { border-bottom: 0; }
.pravno-tijelo h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; margin: 0 0 16px; }
.pravno-tijelo p, .pravno-tijelo li { font-size: 17px; line-height: 1.65; color: #34373d; }
.pravno-tijelo p { margin: 0 0 14px; }
.pravno-tijelo ul { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 10px; }
.pravno-tijelo a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pravno-tijelo a:hover { color: var(--akcent-tamni); }
.pravno-tijelo strong { color: var(--tinta); font-weight: 650; }
.pravno-tablica { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 16px; }
.pravno-tablica th, .pravno-tablica td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--crta); }
.pravno-tablica thead th { font: 700 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); background: var(--kamen); }
.pravno-tablica code { padding: 2px 7px; border-radius: 6px; background: var(--kamen); font-size: .92em; }
.pravno-podaci th { width: 34%; font-weight: 600; color: var(--prigušeno); }
@media (max-width: 960px) { .pravno-mreza { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pravno-toc { position: static; } }
@media (max-width: 560px) { .pravno-podaci th, .pravno-podaci td { display: block; width: 100%; } .pravno-podaci th { padding-bottom: 0; border-bottom: 0; } }
/* obrazac suglasnosti: upute + list A4 */
.sg-koraci { list-style: none; margin: 0 0 22px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; }
.sg-koraci li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: var(--kamen); font-size: 15.5px !important; line-height: 1.45 !important; }
.sg-koraci b, .sg-dio h3 b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--akcent); color: #fff; font: 800 14px var(--font-naslov, inherit); }
.sg-koraci a { overflow-wrap: anywhere; }
.sg-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.sg-gumbi .gumb { display: inline-flex; align-items: center; gap: 9px; }
.sg-gumbi .ik { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sg-gumbi span { font-size: 14.5px; color: var(--prigušeno); }
.sg-list { position: relative; padding: clamp(22px, 5vw, 56px) clamp(20px, 5vw, 60px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--crta), 0 30px 60px -30px rgba(18, 20, 23, .28); color: #121417; }
.sg-vrh { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid #121417; }
.sg-vrh img { height: 30px; width: auto; }
.sg-vrh span { font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; text-align: right; line-height: 1.35; color: var(--prigušeno); }
.pravno-tijelo .sg-naslov { margin: 22px 0 6px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.sg-dio { margin-top: 26px; }
.pravno-tijelo .sg-dio h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; letter-spacing: -.01em; }
.sg-dio h3 b { width: 24px; height: 24px; font-size: 13px; }
.pravno-tijelo .sg-list p, .pravno-tijelo .sg-list li { font-size: 15.5px; line-height: 1.55; }
.sg-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.sg-puno { grid-column: span 2; }
.sg-polje { display: grid; gap: 5px; min-width: 0; }
.sg-crta { display: block; height: 30px; border-bottom: 1.5px solid #34373d; }
.sg-polje small { font-size: 13px; color: var(--prigušeno); }
.kvacice { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 24px !important; }
.kvacice li { display: flex; align-items: flex-start; gap: 11px; }
.kocka { flex: none; width: 19px; height: 19px; margin-top: 2px; border: 1.5px solid #34373d; border-radius: 4px; }
.sg-potpis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 34px; }
.sg-potpis .sg-crta { height: 46px; }
.sg-dno { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--crta); font-size: 12px; line-height: 1.5; color: var(--prigušeno); }
@media (max-width: 760px) { .sg-koraci { grid-template-columns: 1fr; } }
.pravno-tijelo:has(.sg-raspored) { max-width: none; }
.sg-raspored { max-width: 980px; }
@media (min-width: 761px) {
  .sg-stol { padding: clamp(20px, 3.5vw, 64px); border-radius: var(--r); background: var(--kamen); }
  .sg-list { max-width: 860px; margin-inline: auto; }
}
@media (min-width: 1100px) {
  .sg-raspored { max-width: none; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .sg-upute { position: sticky; top: calc(var(--zaglavlje, 80px) + 24px); }
  .sg-koraci { grid-template-columns: 1fr; }
  .sg-gumbi { flex-direction: column; align-items: stretch; }
  .sg-gumbi .gumb { justify-content: center; }
}
@media (max-width: 560px) {
  .sg-polja, .kvacice, .sg-potpis { grid-template-columns: 1fr; }
  .sg-puno { grid-column: auto; }
  .sg-vrh img { height: 24px; }
}
/* podnožje: pravne poveznice */
.pod-pravno { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pod-pravno a { color: rgba(255,255,255,.62); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.pod-pravno a:hover { color: #fff; background-size: 100% 1px; }
@page { size: A4; margin: 0; }
@media print {
  .zaglavlje, .podnozje, .mrvice, .pravno-ostalo, .pravno-glava, .sg-koraci, .sg-gumbi, .prijava, .skip, .preskoci, .poziv-traka, .mob-cta { display: none !important; }
  html, body { background: #fff !important; zoom: 1 !important; }
  .pravno { padding: 0; } .pravno .okvir { max-width: none; padding: 0; } .pravno-tijelo { max-width: none; }
  .pravno-tijelo section { padding: 0; margin: 0; border: 0; } .sg-dio { margin-top: 6mm; } .sg-upute { display: none !important; } .sg-raspored { display: block; max-width: none; } .sg-stol { padding: 0 !important; background: none !important; } .sg-list { max-width: none !important; }
  .sg-list { box-shadow: none; border-radius: 0; padding: 14mm 16mm 12mm; min-height: 296mm; box-sizing: border-box; display: flex; flex-direction: column; }
  .sg-dno { margin-top: auto; }
  .sg-list a { color: inherit; text-decoration: none; }
  .pravno-tijelo .sg-list p, .pravno-tijelo .sg-list li { font-size: 11pt; color: #000; }
  .sg-crta { height: 8mm; } .sg-potpis .sg-crta { height: 13mm; } .sg-potpis { margin-top: 9mm; } .sg-dno { padding-top: 3mm; }
  .sg-dio h3 b { background: #fff !important; color: #000; border: 1.5px solid #000; }
  .sg-polja, .kvacice, .sg-potpis { grid-template-columns: 1fr 1fr !important; } .sg-puno { grid-column: span 2 !important; }
}

/* ---------- SKOK NA SIDRO: sadržaj sekcije sleti odmah ispod zaglavlja (bez unutarnjeg razmaka sekcije) */
.sekcija[id] { scroll-margin-top: calc(var(--sekcija-razmak) * -1); }
.sekcija-tijesna[id] { scroll-margin-top: -12px; }
.mjesta-blok, .mob-blok { scroll-margin-top: 0; }

/* mjesta na mobitelu: pločice uvijek ispunjavaju svoju ćeliju, isti razmak i visina */
.mj-mreza a { display: flex; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .mj-mreza { gap: 8px; }
  .mj-mreza a { align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px 8px 8px; border-radius: var(--r); }
  .mj-mreza .mj-ik { width: 36px; height: 36px; border-radius: var(--r); }
  .mj-mreza .mj-ik .ik { width: 18px; height: 18px; }
  .mj-mreza b { font-size: 15.5px; line-height: 1.15; }
  .mj-mreza small { font-size: 13px; }
}

/* ---------- IZBORNIK DJELATNOSTI: 6 velikih ikona + abecedni popis svih + filtar */
/* dok se tipka: ostaje samo popis, preko cijele širine */

/* ---------- KAKO DO MEŠTRA: jednostavno — tri koraka (slika, broj, kratki naslov) i traka s prednostima */
.kako-glava { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.kako-glava h2 { margin: 0; }
.koraci { gap: clamp(20px, 3vw, 44px); }
.koraci > li { background: none; border-radius: 0; padding: 0; }
.koraci .korak-prizor { height: 250px; border: 1px solid var(--crta); border-radius: var(--r); box-shadow: 0 24px 50px -34px rgba(18,20,23,.35); }
.korak-naslov { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0; font: 700 clamp(20px, 1.9vw, 25px)/1.15 var(--font-naslov); letter-spacing: -.03em; text-align: center; }
.korak-br { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--akcent); color: #fff; font: 700 18px var(--font-naslov); letter-spacing: 0; }
.kako-traka { display: grid; justify-items: center; gap: 22px; margin-top: clamp(32px, 4.5vw, 56px); padding: clamp(24px, 3vw, 36px) 20px; border-radius: var(--r); background: var(--kamen); }
.kako-prednosti { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 4vw, 56px); list-style: none; margin: 0; padding: 0; }
.kako-prednosti li { display: inline-flex; align-items: center; gap: 10px; font: 600 clamp(16px, 1.4vw, 19px) var(--font); color: var(--tinta); }
.kako-prednosti .ik { width: 22px; height: 22px; color: var(--akcent); stroke-width: 2.6; flex: none; }
.kako-gumb { min-height: 54px; padding: 0 30px; font-size: 16.5px; }
@media (max-width: 1000px) { .koraci .korak-prizor { height: 230px; } }
@media (max-width: 720px) { .kako-prednosti { flex-direction: column; align-items: flex-start; } .kako-gumb { width: 100%; } .koraci { gap: 30px; } }

/* poboljšanja: tok između koraka, veći brojevi, traka u jednom redu */
.koraci > li { position: relative; }
.koraci > li:not(:last-child)::after { content: ''; position: absolute; z-index: 2; top: 125px; right: calc(clamp(20px, 3vw, 44px) / -2 - 20px); width: 40px; height: 40px; border-radius: 50%; background: #fff var(--strelica-uk, none) center / 18px no-repeat; border: 1.5px solid var(--crta); box-shadow: 0 8px 20px -10px rgba(18,20,23,.35); }
.koraci > li:not(:last-child)::after { --strelica-uk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5fa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.korak-br { width: 44px; height: 44px; font-size: 20px; box-shadow: 0 8px 18px -8px rgba(15, 95, 168,.7); }
.korak-naslov { gap: 14px; margin-top: 26px; font-size: clamp(21px, 2vw, 28px); }
.kako-traka { grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; gap: 24px 40px; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); }
.kako-prednosti { justify-content: flex-start; }
.kako-prednosti li { gap: 12px; }
.kako-prednosti li i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--akcent); }
.kako-prednosti li i .ik { width: 15px; height: 15px; color: #fff; }
.kako-gumb { white-space: nowrap; }
@media (max-width: 1000px) { .koraci > li::after { display: none !important; } .kako-traka { grid-template-columns: minmax(0, 1fr); } .kako-gumb { justify-self: stretch; } }
@media (max-width: 720px) { .kako-prednosti li i { width: 26px; height: 26px; } }
@media (min-width: 1600px) { .koraci > li:not(:last-child)::after { top: 135px; } }

/* ---- Kako do meštra: dorada */
.koraci .korak-naslov { margin: 28px 0 0; color: var(--tinta); font: 700 clamp(22px, 2.1vw, 29px)/1.15 var(--font-naslov); letter-spacing: -.035em; }
.koraci .korak-prizor { background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%); height: 270px; }
.kp-tel { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--kamen); font-size: 15px; }
.kp-tel .ik { width: 16px; height: 16px; color: var(--akcent); flex: none; }
.kp-tel b { font: 700 16px var(--font); letter-spacing: .01em; }
.kp-poziv .kp-kartica { max-width: 330px; padding: 16px; }
.koraci > li:not(:last-child)::after { top: 135px; }
.kako-traka { background: linear-gradient(135deg, #f4f2ee 0%, #efece6 100%); }
/* postupno otkrivanje pri skrolanju */
.js-anim .koraci > li { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js-anim .koraci > li:nth-child(2) { transition-delay: .14s; } .js-anim .koraci > li:nth-child(3) { transition-delay: .28s; }
.js-anim .koraci.vidljivo > li { opacity: 1; transform: none; }
.js-anim .kako-traka { opacity: 0; transform: translateY(18px); transition: opacity .7s .45s var(--ease), transform .8s .45s var(--ease); }
.js-anim .koraci.vidljivo ~ .kako-traka { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .koraci > li, .js-anim .kako-traka { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1000px) { .koraci .korak-prizor { height: 240px; } }
@media (min-width: 1600px) { .koraci .korak-prizor { height: 310px; } .koraci > li:not(:last-child)::after { top: 155px; } }


/* ======================================================================
   PODNOŽJE (nova verzija): cijelom širinom, mirno, svijetli kamen — nije još jedna kartica
   ====================================================================== */
.podnozje { margin-top: clamp(8px, 2vw, 28px); padding: 0; background: transparent; }
.str-naslovna .podnozje { margin-top: 0; }
.pod-ploca { border-radius: var(--r) var(--r) 0 0; padding: clamp(44px, 6vw, 88px) 0 0; background: var(--kamen); color: var(--prigušeno); }
.pod-ploca > .okvir { position: relative; z-index: 1; }
.pod-gore { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.pod-slogan { margin: 22px 0 26px; color: var(--tinta); font-size: clamp(24px, 2.4vw, 32px); }
.pod-kontakt { margin: 0; gap: 14px; }
.pod-kontakt a, .pod-kontakt span { color: #45484e; }
.pod-kontakt a:hover { color: var(--akcent-tamni); }
.pod-kontakt .pod-tel { color: var(--tinta); font-size: 24px; }
.pod-ploca h2 { color: #8a8d93; margin-bottom: 18px; }
.pod-stupci a { color: var(--tinta); font-weight: 500; }
.pod-stupci a:hover { color: var(--akcent-tamni); }
.pod-stupci a.pod-sve { color: var(--akcent-tamni); font-weight: 650; }
.pod-stupci a.pod-sve:hover { color: var(--akcent); }
.pod-dno { margin-top: clamp(44px, 6vw, 84px); padding: 22px 0; border-top: 1px solid rgba(18,20,23,.1); color: #6e7178; }
.pod-pravno a { color: #6e7178; }
.pod-pravno a:hover { color: var(--tinta); }
.pod-ploca .winkla { color: var(--tinta); }
.pod-ploca .winkla:hover { color: var(--akcent); }
.pod-rijec { margin: 0; padding: 0 0 0 0; line-height: .74; text-align: center; transform: translateY(.14em);
  background: linear-gradient(180deg, rgba(18,20,23,.11) 0%, rgba(18,20,23,.02) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 1000px) { .pod-gore { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .pod-ploca { padding-top: 40px; } .pod-ploca .okvir { padding-left: var(--rub); padding-right: var(--rub); } }

.pod-rijec { font-size: 22.5cqw; }
.pod-dno { align-items: center; }
.pod-vrh { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid rgba(18,20,23,.1); color: var(--tinta); transition: transform .3s var(--ease), background .2s, color .2s; }
.pod-vrh .ik { width: 18px; height: 18px; transform: rotate(-90deg); stroke-width: 2.2; }
.pod-vrh:hover { transform: translateY(-3px); background: var(--akcent); color: #fff; border-color: var(--akcent); }
@media (max-width: 720px) { .pod-dno { align-items: flex-start; } .pod-vrh { align-self: flex-end; } }
@media (max-width: 720px) {
  .pod-stupci ul { gap: 0; }
  .pod-stupci a { min-height: 40px; }
  .pod-stupci { gap: 22px 16px; }
  .pod-ploca h2 { margin-bottom: 8px; }
  .pod-slogan { margin: 18px 0 20px; font-size: 24px; }
  .pod-dno { margin-top: 32px; padding: 18px 0; gap: 6px 16px; }
}

.pod-ploca { padding-bottom: 8px; }
.pod-dno { padding-bottom: 20px; }

/* nema skrolanja/odskakanja iznad vrha i ispod dna stranice */
html, body { overscroll-behavior-y: none; }

/* ---- podnožje: četiri stupca, stalni Kontakt, redak o kolačićima */
.pod-gore { grid-template-columns: minmax(0, .9fr) minmax(0, 1.9fr); }
.pod-stupci { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pod-kontakt-gumb { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; height: 48px; padding: 0 24px; border: 1.5px solid var(--tinta); border-radius: 999px; color: var(--tinta); font-weight: 650; font-size: 16px; text-decoration: none; transition: background .25s, color .25s; }
.pod-kontakt-gumb .ik { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.pod-kontakt-gumb:hover { background: var(--tinta); color: #fff; }
.pod-kontakt-gumb:hover .ik { transform: translateX(3px); }
.pod-bez-kolacica { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #6e7178; font-size: 14px; text-decoration: none; }
.pod-bez-kolacica i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e6f5ec; color: #1f8a4c; flex: none; }
.pod-bez-kolacica i .ik { width: 12px; height: 12px; stroke-width: 3; }
.pod-bez-kolacica:hover { color: var(--tinta); text-decoration: underline; }
@media (max-width: 1000px) { .pod-gore { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .pod-stupci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .pod-stupci > nav:last-child { grid-column: auto; }
  .pod-stupci > nav:last-child ul { grid-template-columns: 1fr; }
  .pod-kontakt-gumb { width: 100%; justify-content: center; }
}
@media (max-width: 359px) { .pod-stupci { grid-template-columns: 1fr; } }
/* stranice sa svim djelatnostima / mjestima */
.indeks-mreza { margin-top: 8px; }
.str-popis .jos-mreza.indeks-mreza { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }


/* ---------- IZBORNIK DJELATNOSTI (v3): filtar gore, 6 ikona u redu, abecedni popis u 4 stupca — kompaktno i uravnoteženo */
.mega-dj { left: var(--rub); right: var(--rub); margin-inline: auto; width: min(1160px, 100%); padding: 24px 28px 18px; max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
.mdj-trazi { position: relative; display: flex; align-items: center; margin-bottom: 22px; }
.mdj-trazi .ik { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--prigušeno); pointer-events: none; }
.mdj-trazi input { width: 100%; height: 54px; padding: 0 18px 0 48px; border: 1.5px solid var(--crta); border-radius: 999px; background: var(--kamen); font: inherit; font-size: 16.5px; color: var(--tinta); transition: border-color .2s, background .2s, box-shadow .2s; }
.mdj-trazi input:focus { outline: none; background: #fff; border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-svijetli); }
.mdj-naslov { margin: 0 0 12px; font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); }
.mdj-top { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mdj-plocica { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 14px; border-radius: var(--r); background: #fff; border: 1.5px solid var(--crta); text-decoration: none; text-align: center; transition: transform .3s var(--ease), border-color .2s, box-shadow .3s; }
.mdj-plocica img { width: 84px; height: 84px; mix-blend-mode: multiply; transition: transform .45s var(--ease); }
.mdj-plocica b { font: 700 16px/1.2 var(--font-naslov); letter-spacing: -.02em; }
.mdj-plocica:hover, .mdj-plocica:focus-visible { transform: translateY(-3px); border-color: var(--akcent); box-shadow: 0 18px 30px -20px rgba(15, 95, 168,.6); outline: none; }
.mdj-plocica:hover img, .mdj-plocica:focus-visible img { transform: scale(1.08) rotate(-2deg); }
.mdj-desno { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--crta); }
.mdj-popis { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 8px; }
.mdj-popis li { break-inside: avoid; }
.mdj-popis li[hidden] { display: none; }
.mdj-popis a { display: block; padding: 7px 12px; border-radius: var(--r); font-size: 15.5px; font-weight: 550; color: var(--tinta); text-decoration: none; transition: background .15s, color .15s; }
.mdj-popis a:hover, .mdj-popis a:focus-visible { background: var(--akcent-svijetli); color: var(--akcent-tamni); outline: none; }
.mdj-prazno { margin: 10px 4px 0; color: var(--prigušeno); font-size: 15px; }
.mdj-prazno a { display: inline-flex; align-items: center; gap: 5px; color: var(--tinta); font-weight: 650; }
.mdj-prazno .ik { width: 15px; height: 15px; }
.mega-dj.filtrira .mdj-lijevo { display: none; }
.mega-dj.filtrira .mdj-desno { margin-top: 0; padding-top: 0; border-top: 0; }
.mega-dj .mega-dno { justify-content: space-between; margin-top: 14px; padding: 12px 4px 0; border-top: 1px solid var(--crta); }
@media (max-width: 1100px) { .mdj-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mdj-popis { columns: 3; } .mdj-plocica img { width: 72px; height: 72px; } }
@media (max-height: 820px) { .mega-dj { padding-top: 18px; } .mdj-trazi { margin-bottom: 16px; } .mdj-plocica img { width: 68px; height: 68px; } .mdj-plocica { padding: 10px 6px; } .mdj-popis a { padding: 5px 12px; } .mdj-desno { margin-top: 16px; padding-top: 14px; } }
@media (min-width: 1600px) { .mega-dj { width: min(1360px, 100%); padding: 30px 34px 22px; } .mdj-trazi input { height: 60px; font-size: 18px; } .mdj-plocica img { width: 104px; height: 104px; } .mdj-plocica b { font-size: 18px; } .mdj-popis a { font-size: 17px; padding: 8px 14px; } }
@media (min-width: 1920px) { .mega-dj { width: min(1560px, 100%); } .mdj-plocica img { width: 120px; height: 120px; } .mdj-plocica b { font-size: 19.5px; } .mdj-popis a { font-size: 18px; } }

/* ---- Kako do meštra na užim ekranima: naslov koraka IZNAD svoje kartice, lijevo uz broj; strelica prema dolje vodi na idući korak */
@media (max-width: 760px) {
  .koraci { gap: 64px; }
  .koraci > li { display: flex; flex-direction: column; }
  .koraci .korak-naslov { order: -1; justify-content: flex-start; margin: 0 0 14px; font-size: 22px; text-align: left; }
  .korak-br { width: 36px; height: 36px; font-size: 17px; }
  .koraci .korak-prizor { height: auto; min-height: 220px; }
  .koraci > li:not(:last-child)::after { display: block !important; top: auto; right: auto; left: 50%; bottom: -52px; width: 38px; height: 38px; transform: translateX(-50%) rotate(90deg); }
}


/* ======================================================================
   ISTAKNUTI OBRTNICI (mozaik): jedna visoka fotografija + četiri manje; naziv uklopljen u fotografiju, bez dodataka
   ====================================================================== */
.ist-mozaik { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(230px, 24vw, 340px)); gap: clamp(10px, 1.2vw, 18px); }
.mz { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--kamen); color: #fff; text-decoration: none; isolation: isolate; }
.mz-velika { grid-row: 1 / span 2; }
.mz-slika { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mz::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,13,0) 42%, rgba(10,11,13,.78) 100%); transition: opacity .5s; }
.mz:hover .mz-slika { transform: scale(1.05); }
.mz-tekst { position: absolute; left: clamp(16px, 1.8vw, 26px); right: 64px; bottom: clamp(16px, 1.8vw, 26px); display: grid; gap: 3px; }
.mz-tekst strong { font: 700 clamp(18px, 1.6vw, 23px)/1.15 var(--font-naslov); letter-spacing: -.025em; }
.mz-tekst small { font-size: clamp(14px, 1.1vw, 15.5px); color: rgba(255,255,255,.82); }
.mz-velika .mz-tekst strong { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.035em; }
.mz-velika .mz-tekst small { font-size: clamp(15px, 1.25vw, 17px); }
.mz-str { position: absolute; right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .45s var(--ease); }
.mz-str .ik { width: 18px; height: 18px; stroke-width: 2.1; transform: rotate(-45deg); transition: transform .45s var(--ease); }
.mz:hover .mz-str, .mz:focus-visible .mz-str { background: var(--akcent); border-color: var(--akcent); }
.mz:hover .mz-str .ik, .mz:focus-visible .mz-str .ik { transform: rotate(0); }
.mz:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }
/* bez fotografije: topla kamena podloga s ikonom djelatnosti, tamni tekst */
.mz-bez { background: #f1efeb; color: var(--tinta); }
.mz-bez::after { display: none; }
.mz-ikona { position: absolute; inset: 0 0 28%; display: grid; place-items: center; }
.mz-ikona img { width: 46%; max-width: 180px; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.mz-bez:hover .mz-ikona img { transform: scale(1.06); }
.mz-bez .mz-tekst small { color: #5f636b; }
.mz-bez .mz-str { background: #fff; border-color: var(--crta); color: var(--tinta); }
/* manje praznine ispod sekcije */
.sekcija-tijesna { padding-bottom: clamp(16px, 2.5vw, 32px); }
.ist-glava { margin-bottom: clamp(20px, 2.6vw, 34px); }
/* tablet: velika preko cijele širine, četiri ispod u 2 × 2 */
@media (max-width: 1000px) {
  .ist-mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(280px, 52vw, 420px) repeat(2, clamp(200px, 34vw, 280px)); }
  .mz-velika { grid-row: auto; grid-column: 1 / -1; }
}
/* mobitel: listanje, kartice u 4:5 */
@media (max-width: 720px) {
  .ist-mozaik { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--rub) * -1); padding: 0 var(--rub) 4px; scroll-padding: 0 var(--rub); }
  .ist-mozaik::-webkit-scrollbar { display: none; }
  .mz, .mz-velika { flex: 0 0 78%; aspect-ratio: 4 / 5; scroll-snap-align: start; grid-column: auto; }
  .mz-velika .mz-tekst strong { font-size: 24px; }
}
/* postupno otkrivanje */
.js-anim .ist-mozaik > .mz { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js-anim .ist-mozaik > .mz:nth-child(2) { transition-delay: .08s; } .js-anim .ist-mozaik > .mz:nth-child(3) { transition-delay: .16s; }
.js-anim .ist-mozaik > .mz:nth-child(4) { transition-delay: .24s; } .js-anim .ist-mozaik > .mz:nth-child(5) { transition-delay: .32s; }
.js-anim .ist-mozaik.vidljivo > .mz { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .ist-mozaik > .mz { opacity: 1; transform: none; transition: none; } }
@media (min-width: 1600px) { .ist-mozaik { grid-template-rows: repeat(2, 380px); } }

/* ===== Naslovna po Igorovoj skici (2026-11-04): lijevo opis + tražilica + kontakt, desno mreža 3×3 meštara.
   Pločice se polako mijenjaju jedna po jedna; kad se tipka, mreža se na istom mjestu pretvori u popis obrta. */
.hv { padding: clamp(20px, 4vw, 56px) 0 clamp(36px, 5vw, 80px); }
.hv-mreza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-areas: "uvod panel" "trazi panel" "kontakt panel"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 88px); align-items: start; }
.hv-uvod { grid-area: uvod; padding-top: clamp(4px, 3vw, 44px); }
.hv-uvod h1 { font-size: clamp(34px, 5.2vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.hv-opis { margin-top: 20px; font-size: clamp(16px, 1.4vw, 20px); color: var(--prigušeno); max-width: 30em; text-wrap: pretty; }

.hv-trazi { grid-area: trazi; position: relative; margin-top: clamp(22px, 3vw, 36px); }
.hv-polje { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 128px 0 22px; background: #fff; border: 1px solid var(--crta); border-radius: 999px; box-shadow: 0 16px 44px -26px rgba(18,20,23,.35); cursor: text; transition: border-color .2s, box-shadow .2s; }
.hv-polje:focus-within { border-color: #cfcac2; box-shadow: 0 0 0 5px var(--akcent-svijetli), 0 16px 44px -26px rgba(18,20,23,.35); }
.hv-polje .ik { flex: none; width: 22px; height: 22px; color: var(--prigušeno); }
.hv-polje input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; color: var(--tinta); outline: none; }
.hv-polje input::placeholder { color: #8b8f96; }
.hv-polje input::-webkit-search-cancel-button { display: none; }
.hv-gumb { position: absolute; top: 8px; right: 8px; height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--akcent); color: #fff; font: inherit; font-weight: 650; font-size: 16px; cursor: pointer; transition: background .2s, transform .16s var(--ease); }
.hv-gumb:hover { background: var(--akcent-tamni); }
.hv-gumb:active { transform: scale(.97); }
.hv-primjeri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-left: 4px; font-size: 14px; color: var(--prigušeno); }
.hv-primjeri button { border: 1px solid var(--crta); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 14px; color: var(--tinta); cursor: pointer; transition: border-color .2s, transform .16s var(--ease); }
.hv-primjeri button:hover { border-color: var(--tinta); }
.hv-primjeri button:active { transform: scale(.96); }

.hv-kontakt { grid-area: kontakt; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(24px, 3.2vw, 44px); }
.hv-k { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.hv-k .ik { flex: none; width: 18px; height: 18px; color: var(--akcent); }
.hv-k:hover { text-decoration: underline; text-underline-offset: 3px; }

.hv-panel { grid-area: panel; position: relative; aspect-ratio: 1; }
.hv-mestri { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: clamp(8px, 1vw, 14px); height: 100%; transition: opacity .3s ease, transform .3s var(--ease), visibility .3s; }
.hv-panel.trazi .hv-mestri { opacity: 0; transform: scale(.98); visibility: hidden; }
.hv-mestri li { min-width: 0; min-height: 0; }
.hv-m { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--kamen); text-decoration: none; isolation: isolate; }
.hv-sl { position: absolute; inset: 0; }
.hv-sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease, transform 6s ease-out; }
.hv-sl img.aktivna { opacity: 1; transform: scale(1); }
.hv-l .hv-sl { background: #fff; box-shadow: inset 0 0 0 1px var(--crta); border-radius: inherit; }
.hv-l .hv-sl img { object-fit: contain; padding: 16%; }
.hv-ime { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(18,20,23,.78)); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s var(--ease); }
.hv-ime b, .hv-ime small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-ime b { font-size: 14px; line-height: 1.25; }
.hv-ime small { font-size: 12px; opacity: .85; }
.hv-m:hover .hv-ime, .hv-m:focus-visible .hv-ime { opacity: 1; transform: none; }
.hv-m.mijenja .hv-ime { opacity: 0 !important; }
.hv-m:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
@media (hover: none) { .hv-ime { opacity: 1; transform: none; padding: 22px 8px 7px; } .hv-ime small { display: none; } .hv-ime b { font-size: 13px; } }

.hv-panel .hero-rezultati { position: absolute; inset: 0; top: 0; max-height: none; }
.hv-panel .hr-popis { grid-template-columns: 1fr; }

.sekcija-kuca { padding-top: clamp(32px, 5vw, 64px); }
.kuca-glava { text-align: center; }
.kuca-glava .podnaslov { margin-top: 10px; }

@media (max-width: 900px) {
  .hv-mreza { grid-template-columns: minmax(0, 1fr); grid-template-areas: "uvod" "trazi" "panel" "kontakt"; grid-template-rows: none; }
  .hv-uvod { padding-top: 0; }
  .hv-panel { margin-top: 22px; width: 100%; max-width: 560px; justify-self: center; }
  .hv-panel.trazi { aspect-ratio: auto; }
  .hv-panel.trazi .hv-mestri { display: none; }
  .hv-panel.trazi .hero-rezultati { position: relative; inset: auto; top: auto; max-height: 70vh; }
  .hv-kontakt { margin-top: 24px; }
}
@media (max-width: 480px) {
  .hv-polje { height: 56px; padding: 0 92px 0 16px; gap: 10px; }
  .hv-polje input { font-size: 16px; }
  .hv-gumb { top: 6px; right: 6px; height: 44px; padding: 0 18px; }
  .hv-kontakt .gumb { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 340px) { .hv-polje .ik { display: none; } .hv-polje { padding-left: 18px; } }
@media (prefers-reduced-motion: reduce) { .hv-sl img, .hv-mestri, .hv-ime { transition: none; } }
.hv-znak { position: absolute; top: clamp(6px, .8vw, 10px); left: clamp(6px, .8vw, 10px); z-index: 2; width: clamp(28px, 3.2vw, 44px); height: clamp(28px, 3.2vw, 44px); border-radius: var(--r); object-fit: cover; background: #fff; box-shadow: 0 0 0 2px #fff, 0 6px 16px -6px rgba(18,20,23,.5); transition: opacity .25s ease; }
.hv-m.mijenja .hv-znak { opacity: 0; }

/* ===== Djelatnosti umjesto kuće (2026-11-04): jednostavna mreža, ikona + naziv + broj, klik vodi na popis */
.sekcija-djelatnosti { padding-top: clamp(28px, 4vw, 56px); }
.dj-glava { margin-bottom: clamp(18px, 2.4vw, 28px); }
.dj-glava .podnaslov { margin-top: 10px; }
.dj-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.dj-mreza a { display: flex; align-items: center; gap: 14px; height: 100%; min-height: 84px; padding: 10px 16px 10px 10px; border-radius: var(--r); background: var(--kamen); text-decoration: none; transition: background .2s ease, transform .25s var(--ease); }
.dj-mreza a:hover { background: #ebe8e2; transform: translateY(-2px); }
.dj-mreza a:active { transform: scale(.98); }
.dj-mreza a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.dj-mreza img { flex: none; width: 64px; height: 64px; mix-blend-mode: multiply; }
.dj-tekst { min-width: 0; }
.dj-mreza b { display: block; font: 650 17px/1.2 var(--font-naslov); letter-spacing: -.02em; overflow-wrap: anywhere; }
.dj-mreza small { font-size: 13.5px; color: var(--prigušeno); }
.sekcija-djelatnosti .mjesta-blok { margin-top: clamp(32px, 4vw, 48px); }
.sekcija-djelatnosti .mjesta-blok h2 { text-align: left; font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--font-naslov); color: var(--tinta); letter-spacing: -.02em; }
@media (max-width: 1100px) { .dj-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dj-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .dj-mreza a { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px; }
  .dj-mreza img { width: 52px; height: 52px; }
  .dj-mreza b { font-size: 15px; }
}

/* ===== Ravni 2D logo (2026-11-04): vektorski oblačić „alo“ + „meštre“ (public/brand/logo.svg, složi scripts/logo.js) */
.logo-img { height: 34px; width: auto; margin: 0; }
.logo:hover .logo-img { transform: none; }
.pod-logo img { height: 40px; width: auto; }
.kap-cta { padding: 0 22px 0 8px; }
.kap-plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); }
.kap-plus .ik { width: 18px; height: 18px; stroke-width: 2.4; }
.kap-cta:active { transform: scale(.97); }
.mob-plus { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--r); background: rgba(255,255,255,.12); }
.mob-plus .ik { width: 24px; height: 24px; stroke-width: 2.2; }
@media (max-width: 480px) { .logo-img { height: 30px; } }
/* stupci se ne smiju širiti prema stvarnoj širini fotke (inače galerija izlazi iz ekrana na ~1024 px) */
.obrt-mreza { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); }
.galerija { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .obrt-mreza { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) {
  .dj-mreza { grid-template-columns: minmax(0, 1fr); }
  .dj-mreza a { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 8px; }
  .dj-mreza img { width: 48px; height: 48px; }
}
.galerija a { width: 100%; }

/* ===== Stranica obrta v2 (2026-11-04): fotka od samog vrha (zaglavlje lebdi preko nje), visoka umjesto uske trake;
   ime i gumbi pri dnu fotke; lijevo opis + kartica s kontaktom i kartom, desno ujednačena galerija 3×3 (Igorova skica). */
.str-obrt .zaglavlje { position: fixed; left: 0; right: 0; top: 0; }
.oh2 { display: flex; min-height: min(88svh, 880px); }
.oh2:not(.ima-sliku) { min-height: clamp(440px, 58svh, 600px); }
.oh2 .obrt-hero-sadrzaj { width: 100%; min-height: 0; justify-content: flex-start; gap: 22px; padding-top: calc(80px + clamp(14px, 2.4vw, 32px)); padding-bottom: clamp(28px, 4.4vw, 60px); }
.oh2.ima-sliku::before { background: linear-gradient(180deg, rgba(10,11,13,.5) 0%, rgba(10,11,13,0) 26%, rgba(10,11,13,.08) 48%, rgba(10,11,13,.82) 100%); }
.oh2 .obrt-pozadina { object-position: center 42%; }
.oh2 .mrvice { margin: 0; font-size: 14px; }
.oh2 .mrvice a { color: #fff; }
.oh2 .obrt-identitet { margin-top: auto; align-items: center; gap: clamp(14px, 2vw, 24px); }
.oh2 .obrt-logo { width: clamp(68px, 8vw, 104px); height: clamp(68px, 8vw, 104px); border-radius: var(--r); }
.oh2 .obrt-identitet h1 { font-size: clamp(34px, 6vw, 84px); line-height: .96; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.oh2 .obrt-meta { margin-top: 12px; }
.oh2 .obrt-akcije { align-items: center; }
.oh2 .obrt-akcije .gumb { min-height: 52px; }
.oh2 .gumb:active { transform: scale(.97); }
.oh2-galerija { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 4px; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; opacity: .92; }
.oh2-galerija .ik { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .25s var(--ease); }
.oh2-galerija:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.oh2-galerija:hover .ik { transform: rotate(90deg) translateX(3px); }

.obrt-mreza { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(36px, 5vw, 72px); }
.obrt-info { gap: 22px; }
.obrt-uvod { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; }
.obrt-info .tekst { font-size: 16.5px; line-height: 1.65; }
.obrt-info .mali-naslov { margin: 0 0 10px; }
.obrt-kartica { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2vw, 24px); border-radius: var(--r); background: var(--kamen); }
.obrt-kartica .mali-naslov { margin: 0; }
.ok-vlasnik { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--crta); }
.ok-vlasnik img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ok-vlasnik small { display: block; font-size: 13px; color: var(--prigušeno); }
.ok-vlasnik b { font: 650 17px/1.2 var(--font-naslov); }
.obrt-kartica .kontakti a, .obrt-kartica .kontakti span { font-size: 16px; }
.obrt-kartica .mreze a { background: #fff; border-color: #fff; }
.obrt-kartica .mreze a:hover { background: var(--tinta); border-color: var(--tinta); }
.obrt-kartica .karta { aspect-ratio: 16/11; border-radius: var(--r); background-color: #fff; }

/* galerija: sve pločice iste veličine (bez velike prve), tekst ispod fotke vidi se na dodir */
.galerija { gap: clamp(8px, 1vw, 12px); }
.galerija li:nth-child(7n+1) { grid-column: auto; grid-row: auto; }
.galerija li:nth-child(7n+1) a, .galerija a { aspect-ratio: 1; min-height: 0; border-radius: var(--r); }
.galerija a:active { transform: scale(.98); }
@media (hover: none) { .galerija-opis { opacity: 1; font-size: 13px; padding: 22px 10px 8px; } }

@media (max-width: 960px) {
  .obrt-mreza { grid-template-columns: minmax(0, 1fr); }
  .obrt-sadrzaj { order: -1; }   /* na mobitelu galerija odmah ispod fotke, opis i kontakt nakon nje */
}
@media (max-width: 720px) {
  .oh2 { min-height: min(80svh, 720px); }
  .oh2 .obrt-hero-sadrzaj { padding-top: calc(76px + 14px); }
  .oh2 .obrt-identitet { flex-direction: column; align-items: flex-start; }
  .oh2 .obrt-akcije { display: grid; grid-template-columns: 1fr 1fr; }
  .oh2 .obrt-akcije .gumb { justify-content: center; padding: 0 12px; }
  .oh2 .obrt-akcije .gumb:first-child:last-of-type { grid-column: 1 / -1; }
  .oh2-galerija { grid-column: 1 / -1; margin: 2px 0 0; justify-self: start; }
}
@media (max-width: 480px) { .galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== „Kako radi?“ (2026-11-04): jednostavno — naslov lijevo, tri koraka kao tekst s velikim brojevima desno */
.kr-mreza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.kr-uvod h2 { font-size: clamp(30px, 3.6vw, 48px); }
.kr-uvod .podnaslov { margin: 14px 0 26px; max-width: 26em; font-size: 17px; }
.kr-uvod .gumb:active { transform: scale(.97); }
.kr-koraci { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.kr-koraci li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); padding: clamp(18px, 2.2vw, 28px) 0; border-top: 1px solid var(--crta); }
.kr-koraci li:last-child { border-bottom: 1px solid var(--crta); }
.kr-br { font: 800 clamp(34px, 4vw, 56px)/.9 var(--font-naslov); letter-spacing: -.04em; color: var(--akcent); min-width: 1.6em; }
.kr-koraci h3 { font-size: clamp(19px, 1.8vw, 24px); }
.kr-koraci p { margin-top: 6px; color: var(--prigušeno); font-size: 16px; max-width: 34em; }
@media (max-width: 860px) { .kr-mreza { grid-template-columns: minmax(0, 1fr); } .kr-uvod .podnaslov { margin-bottom: 20px; } }
@media (max-width: 340px) { .kr-koraci li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ======================================================================
   NASLOVNA v3 (2026-11-05): mozaik, poravnanje, razmaci, veliki ekrani
   ====================================================================== */
/* lijevi stupac uvijek po sredini visine mozaika */
@media (min-width: 901px) {
  .hv-mreza { grid-template-areas: ". panel" "uvod panel" "trazi panel" "kontakt panel" ". panel"; grid-template-rows: 1fr auto auto auto 1fr; }
  .hv-uvod { padding-top: 0; }
}
/* poveznica za obrtnike umjesto drugog narančastog gumba */
.hv-obrt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--prigušeno); cursor: pointer; text-align: left; }
.hv-obrt b { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); font-weight: 650; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color .2s; }
.hv-obrt b .ik { width: 17px; height: 17px; color: var(--akcent); transition: transform .2s var(--ease); }
.hv-obrt:hover b { color: var(--akcent-tamni); }
.hv-obrt:hover b .ik { transform: translateX(3px); }
.hv-obrt:focus-visible { outline: 3px solid var(--akcent); outline-offset: 4px; border-radius: 6px; }
/* imena na pločicama čitljivija */
.hv-ime { padding: 34px 14px 12px; }
.hv-ime b { font-size: 15px; }
.hv-ime small { font-size: 13px; }
@media (hover: none) { .hv-ime { padding: 26px 9px 8px; } .hv-ime b { font-size: 13px; } }
@media (max-width: 340px) { .hv-ime b { font-size: 13px; } }
/* pločica sa samim logom: bez sivog pojasa */
.hv-l .hv-ime { background: linear-gradient(rgba(255,255,255,0), #fff 70%); color: var(--tinta); }
/* jedan stupac (mobitel, Fold, tablet): mozaik široko kao tražilica */
@media (max-width: 900px) {
  .hv-panel { max-width: none; justify-self: stretch; }
  .hv-kontakt { margin-top: 20px; }
}
/* manje praznine između sekcija */
.sekcija { --sekcija-razmak: clamp(44px, 5.5vw, 84px); }
.sekcija-istaknuti { padding-top: clamp(8px, 2vw, 24px); }
.sekcija-istaknuti .sekcija-glava { margin-bottom: clamp(18px, 2vw, 28px); }

/* VELIKI EKRANI. Do 2200 px sadržaj se širi (pravila iznad); od 2200 px cijela stranica raste
   s ekranom (zoom), pa i na 2560, ultrawide 3440 i 4K izgleda kao na 1920, samo veće, bez praznih rubova.
   Visine prema ekranu (vh) dijele se s --z jer ih zoom inače poveća. */
:root { --z: 1; }
@media (min-width: 2200px) {
  :root { --z: 1.15; --sirina: 100%; --rub: 72px; --zaglavlje: 108px; }
  body { zoom: var(--z); font-size: 19px; }
  .kapsula { height: 80px; } .logo-img { height: 40px; }
  .nav-link { height: 50px; font-size: 18px; } .kap-cta { height: 56px; font-size: 18px; }
  .b-tel { width: 380px; height: 640px; } .b-scena { min-height: 520px; }
  .korak-prizor { height: 300px; }
  .jos-mreza li { flex-basis: 176px; } .jos-mreza img { width: 92px; height: 92px; } .jos-mreza b { font-size: 15.5px; }
  .hk img { width: 68px; height: 68px; } .hk-tekst b { font-size: 19.5px; } .hk-tekst small { font-size: 15px; }
  .lightbox figure { max-height: calc(100vh / var(--z)); }
  .lightbox img { max-height: calc(100vh / var(--z) - 160px); }
  .prijava, .pr-okvir { max-height: calc(100dvh / var(--z) - 24px); }
  .mega-dj { max-height: calc(100dvh / var(--z) - 112px); }
  .hero-rezultati { max-height: min(calc(60vh / var(--z)), 560px); }
  .oh2 { min-height: min(calc(88svh / var(--z)), 880px); }
  .oh2:not(.ima-sliku) { min-height: clamp(440px, calc(58svh / var(--z)), 600px); }
  .obrt-hero-sadrzaj { min-height: clamp(380px, calc(52vh / var(--z)), 560px); }
}
@media (min-width: 2560px) { :root { --z: 1.33; } }
@media (min-width: 3200px) { :root { --z: 1.6; } }
@media (min-width: 3840px) { :root { --z: 1.85; } }
@media (min-width: 5120px) { :root { --z: 2.5; } }
/* mozaik nikad viši od ekrana (laptop 768 px visine, ultrawide 1440 px) */
@media (min-width: 901px) {
  .hv-panel { width: min(100%, calc(100svh / var(--z) - var(--zaglavlje) - 96px)); min-width: 380px; justify-self: end; }
}
@media (min-width: 1600px) {
  .hv-uvod h1 { font-size: clamp(76px, 4.4vw, 100px); }
  .hv-opis { font-size: 21px; }
  .hv-polje { height: 70px; } .hv-polje input { font-size: 18px; } .hv-gumb { height: 54px; font-size: 17px; }
  .hv-primjeri, .hv-primjeri button, .hv-obrt { font-size: 16px; }
}

/* ======================================================================
   STRANICA OBRTA v3 (2026-11-05): lijevo sadržaj (o nama, galerija, video, tura, lokacija),
   desno tamna kartica s kontaktom koja prati skrolanje. Nema praznih stupaca ni s 0 fotki.
   ====================================================================== */
.gumb-wa { background: #0f7f43; border-color: #0f7f43; color: #fff; }
.gumb-wa:hover { background: #0b6a37; border-color: #0b6a37; }
.str-obrt .gumb-akcent { color: var(--obrt-tekst, #fff); }
.oh2 { min-height: min(78svh, 820px); }
.oh2:not(.ima-sliku) { min-height: clamp(380px, 50svh, 520px); }

.ob3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: clamp(32px, 5vw, 96px); padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 112px); align-items: start; }
.ob3 > section { grid-column: 1; min-width: 0; }
.ob3 > section + section, .ob3 > aside + section { margin-top: clamp(48px, 5.5vw, 88px); }
.ob3-kontakt { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--zaglavlje) + 8px); align-self: start; }

.ob3-oznaka { margin: 0 0 14px; font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--obrt); }
.ob3-uvod { max-width: 22em; font: 680 clamp(25px, 2.5vw, 40px)/1.12 var(--font-naslov); letter-spacing: -.025em; color: var(--tinta); text-wrap: balance; }
.ob3-tekst { margin-top: clamp(18px, 2vw, 26px); max-width: 64ch; font-size: clamp(16.5px, 1.15vw, 18.5px); line-height: 1.65; color: #3a3d43; }
.ob3-usluge { margin-top: clamp(22px, 2.4vw, 32px); }
.ob3-mali { margin: 0 0 12px; font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); }
.ob3 .usluge { gap: 8px; }
.ob3 .usluge li { padding: 9px 16px; background: #fff; border: 1px solid var(--crta); font-size: 15.5px; font-weight: 500; }
.ob3-naslov { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 1.8vw, 24px); font: 800 clamp(26px, 2.6vw, 42px)/1.05 var(--font-naslov); letter-spacing: -.03em; }
.ob3-naslov span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; background: var(--kamen); font: 700 15px var(--font); letter-spacing: 0; color: var(--prigušeno); }

/* galerija: redovi uvijek puni (6-stupčana mreža; 3 po redu, ostatak se rastegne) */
.galerija.g3 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px); }
.galerija.g3 li, .galerija.g3 li:nth-child(7n+1) { grid-column: span 2; grid-row: auto; }
.galerija.g3 li a, .galerija.g3 li:nth-child(7n+1) a { aspect-ratio: 1; min-height: 0; border-radius: var(--r); }
.galerija.g3 li.g-pola { grid-column: span 3; } .galerija.g3 li.g-pola a { aspect-ratio: 3 / 2; }
.galerija.g3 li.g-siroka { grid-column: span 6; } .galerija.g3 li.g-siroka a { aspect-ratio: 3 / 1; }
.galerija.g3-jedna li { grid-column: span 6; } .galerija.g3-jedna li a { aspect-ratio: 16 / 9; }
.galerija.g3 a { cursor: zoom-in; }
.galerija.g3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(18,20,23,.06); pointer-events: none; }

/* kontakt kartica */
.ob3-kartica { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2vw, 28px); border-radius: var(--r); background: var(--tinta); color: #fff; box-shadow: 0 30px 60px -36px rgba(18,20,23,.55); }
.ob3-kartica .ok-vlasnik { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ob3-kartica .ok-vlasnik img { width: 56px; height: 56px; border-radius: var(--r); object-fit: cover; background: #fff; }
.ob3-kartica .ok-vlasnik img.ok-logo { object-fit: contain; padding: 5px; }
.ok-ini { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--r); background: var(--obrt); color: var(--obrt-tekst, #fff); font: 800 20px var(--font-naslov); }
.ob3-kartica .ok-vlasnik small { color: rgba(255,255,255,.6); font-size: 13px; }
.ob3-kartica .ok-vlasnik b { color: #fff; font-size: 19px; }
.ob3-gumbi { display: grid; gap: 10px; }
.ob3-gumbi .gumb { justify-content: flex-start; min-height: 60px; padding: 0 20px; border-radius: var(--r); font-size: 17px; }
.ob3-gumbi .gumb .ik { width: 22px; height: 22px; flex: none; }
.ob3-gumbi .gumb span { display: flex; flex-direction: column; line-height: 1.15; }
.ob3-gumbi .gumb small { font-size: 14px; font-weight: 500; opacity: .85; }
.ob3-gumbi .gumb:active { transform: scale(.98); }
.ob3-kartica .kontakti { gap: 12px; }
.ob3-kartica .kontakti .ik { color: rgba(255,255,255,.55); }
.ob3-kartica .kontakti a { color: #fff; font-size: 16px; }
.ob3-kartica .mreze a { border-color: rgba(255,255,255,.18); color: #fff; background: transparent; }
.ob3-kartica .mreze a:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.ob3-napomena { margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: rgba(255,255,255,.6); }

/* video i tura */
.ob3 .videi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.ob3 .videi-jedan { grid-template-columns: minmax(0, 1fr); }
.ob3 .video { border-radius: var(--r); }
.ob3 .tura { width: 100%; max-height: min(72svh, 640px); border-radius: var(--r); }

/* lokacija */
.ob3-karta { aspect-ratio: 21 / 9; min-height: 300px; border-radius: var(--r); background-color: var(--kamen); }
.ob3-karta-sadrzaj { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.ob3-pin { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--obrt); color: var(--obrt-tekst, #fff); box-shadow: 0 0 0 10px color-mix(in srgb, var(--obrt) 18%, transparent), 0 14px 30px -12px rgba(18,20,23,.5); }
.ob3-pin .ik { width: 28px; height: 28px; }
.ob3-karta-sadrzaj b { font: 700 clamp(18px, 1.6vw, 22px)/1.25 var(--font-naslov); letter-spacing: -.01em; }
.ob3-karta .karta-gumb { margin-top: 4px; min-height: 48px; padding: 0 22px; cursor: pointer; }
.ob3-karta .karta-link { display: inline-flex; align-items: center; gap: 4px; }
.ob3-karta .karta-link .ik { width: 14px; height: 14px; }
.ob3-lokacija > .karta-link { display: inline-flex; margin-top: 12px; }

/* tablet i mobitel: jedan stupac; redoslijed: o nama, galerija, kontakt, video, tura, lokacija */
@media (max-width: 960px) {
  .ob3 { grid-template-columns: minmax(0, 1fr); }
  .ob3-kontakt { grid-column: 1; grid-row: auto; position: static; margin-top: clamp(40px, 6vw, 56px); }
  .ob3-kartica { max-width: 560px; }
  .ob3-karta { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 600px) {
  .galerija.g3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .galerija.g3 li, .galerija.g3 li.g-pola, .galerija.g3 li.g-siroka { grid-column: span 2; }
  .galerija.g3 li a, .galerija.g3 li.g-pola a, .galerija.g3 li.g-siroka a { aspect-ratio: 1; border-radius: var(--r); }
  .galerija.g3 li:last-child:nth-child(odd) { grid-column: span 4; }
  .galerija.g3 li:last-child:nth-child(odd) a { aspect-ratio: 2 / 1; }
  .galerija.g3-jedna li a { aspect-ratio: 4 / 3; }
  .ob3 .videi { grid-template-columns: minmax(0, 1fr); }
  .ob3-kartica { border-radius: var(--r); }
}
@media (min-width: 1600px) {
  .ob3 { grid-template-columns: minmax(0, 1fr) 420px; }
  .ob3 .usluge li { font-size: 17px; }
}
.poziv-traka .gumb-akcent { color: var(--obrt-tekst, #fff); }
@media (max-width: 600px) {
  .str-obrt .sekcija-siva .kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .str-obrt .sekcija-siva .kartica-slika, .str-obrt .sekcija-siva .kartica img { aspect-ratio: 1; }
}
@media (max-width: 340px) { .str-obrt .sekcija-siva .kartice { grid-template-columns: minmax(0, 1fr); } }

/* ---------- STRANICE S POPISOM v2 (tražilica, djelatnost, mjesto): kartice s opisom i pozivom, čipovi, blok ispod */
.pg-red { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.pg-tekst { min-width: 0; }
.pg-tekst h1 { margin: 0; }
.pg-tekst .hero-podnaslov { margin-top: 12px; }
.pg-ikona { flex: none; display: grid; place-items: center; width: clamp(68px, 8vw, 112px); aspect-ratio: 1; border-radius: var(--r); background: var(--kamen); }
.pg-ikona img { width: 82%; height: auto; mix-blend-mode: multiply; }
.pg-nad { margin: 0 0 8px; font: 700 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--akcent-tamni); }
.kp-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cip { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--crta); border-radius: 999px; background: #fff; font: 600 15px var(--font); color: var(--tinta); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cip small { font-size: 13px; font-weight: 600; color: var(--prigušeno); }
.cip:hover { border-color: var(--tinta); }
.cip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cip[aria-pressed="true"] small { color: rgba(255,255,255,.7); }

.kp-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
/* 3–6 rezultata: svi u jednom redu kad ima mjesta (bez jedne kartice same u drugom redu) */
.kp-srednje { grid-template-columns: repeat(auto-fit, minmax(max(min(240px, 100%), calc((100% - (var(--n, 4) - 1) * 22px) / var(--n, 4))), 1fr)); }
.kp { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--crta); border-radius: var(--r); background: #fff; overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.kp[hidden], .kp-prijava[hidden] { display: none !important; }
.kp:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 22px 44px -26px rgba(18, 20, 23, .35); }
.kp-slika { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kamen); }
.kp-slika > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.kp:hover .kp-slika > img { transform: scale(1.05); }
.kp-bez { display: grid; place-items: center; background: #f1efeb; }
.kp-bez > img { width: 46%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.kp-tijelo { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; min-width: 0; }
.kp-dj { margin: 0 0 4px; font: 700 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--akcent-tamni); }
.kp .kp-naziv { margin: 0; font: 650 19px/1.22 var(--font-naslov); letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
.kp-naziv a { color: var(--tinta); text-decoration: none; }
.kp-naziv a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.kp:hover .kp-naziv a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.kp-mj { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; font-size: 14.5px; color: var(--prigušeno); }
.kp-mj .ik { flex: none; width: 15px; height: 15px; }
.kp-opis { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: #4a4e55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-radnje { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.kp-zovi { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--akcent); color: #fff; font: 600 15px var(--font); text-decoration: none; transition: background .2s, transform .16s; }
.kp-zovi:hover { background: var(--akcent-tamni); }
.kp-zovi:active { transform: scale(.97); }
.kp-zovi .ik { width: 17px; height: 17px; }
.kp-vise { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 14.5px var(--font); color: var(--tinta); text-decoration: none; }
.kp-vise .ik { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.kp:hover .kp-vise .ik { transform: translateX(3px); }
/* jedan ili dva rezultata: vodoravne kartice preko cijele širine */
@media (min-width: 701px) {
  .kp-malo { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
  .kp-malo .kp { flex-direction: row; min-height: 280px; }
  .kp-malo .kp-slika { flex: none; width: min(46%, 560px); aspect-ratio: auto; }
  .kp-malo .kp-tijelo { padding: clamp(20px, 2.4vw, 34px); }
  .kp-malo .kp .kp-naziv { font-size: clamp(22px, 2vw, 28px); }
  .kp-malo .kp-opis { -webkit-line-clamp: 5; font-size: 15.5px; }
}
.kp-prijava { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: clamp(24px, 3vw, 40px); padding: 20px 24px; border-radius: var(--r); background: var(--akcent-svijetli); }
.kp-prijava b { display: block; font: 700 19px/1.2 var(--font-naslov); letter-spacing: -.02em; }
.kp-prijava span { display: block; margin-top: 3px; color: #3c4047; font-size: 15px; }
.sekcija-ostalo .sekcija-glava { margin-bottom: 22px; }

/* mobitel: kompaktni redovi (slika lijevo, tekst i poziv desno) */
@media (max-width: 600px) {
  .kp-mreza, .kp-srednje { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kp, .kp-malo .kp { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--crta); border-radius: 0; background: none; overflow: visible; }
  .kp:first-child { padding-top: 4px; }
  .kp:hover { transform: none; box-shadow: none; }
  .kp-slika { aspect-ratio: 1; border-radius: var(--r); }
  .kp-tijelo { padding: 0; }
  .kp .kp-naziv { font-size: 17px; }
  .kp-mj { font-size: 14px; margin-top: 3px; }
  .kp-opis { margin-top: 6px; font-size: 14px; }
  .kp-radnje { padding-top: 10px; justify-content: flex-start; }
  .kp-zovi { min-height: 38px; font-size: 14.5px; padding: 0 15px 0 12px; }
  .kp-filtri { flex-wrap: nowrap; overflow-x: auto; margin: 20px calc(var(--rub) * -1) 0; padding: 0 var(--rub) 4px; scrollbar-width: none; }
  .kp-filtri::-webkit-scrollbar { display: none; }
  .cip { flex: none; min-height: 40px; }
  .kp-prijava { padding: 18px; }
  .kp-prijava .gumb { width: 100%; justify-content: center; }
}
@media (max-width: 340px) {
  .kp, .kp-malo .kp { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .kp-slika { border-radius: var(--r); }
  .kp-vise { display: none; }
  .pg-red { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1600px) { .kp-srednje .kp-slika { aspect-ratio: 16 / 10; } }
/* privola u prijavi obrta (kad šalje u Winkla CMS) */
.pr-privola { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: #3c4047; cursor: pointer; }
.pr-privola input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akcent); }
.pr-privola a { color: inherit; text-decoration: underline; }
.pr-privola input[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 2px; }

/* ---------- PRISTUPAČNOST: ciljevi dodira na mobitelu (glavne radnje ≥ 44 px, poveznice u tekstu ≥ 24 px) */
@media (max-width: 600px) {
  .kp-zovi, .cip, .hv-primjeri button { min-height: 44px; }
  .kp-vise { min-height: 44px; padding-inline: 6px; margin-right: -6px; }
  .hv-primjeri button { padding: 0 14px; }
  .oh2-galerija { min-height: 44px; }
  .hv-obrt, .karta-link, .sekcija-glava .poveznica { display: inline-flex; align-items: center; min-height: 32px; }
  .mrvice a { display: inline-block; padding: 4px 0; }
  .logo { min-height: 44px; }
}

/* gumb virtualne ture: na najužim mobitelima (260–300 px) tekst ide u dva reda umjesto da strši */
.tura .gumb { max-width: calc(100% - 24px); white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }

/* ================= SVE DJELATNOSTI / SVA MJESTA (2026-11-09) ================= */
.ix-glava-red { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.ix-glava-red .pg-tekst { flex: 1 1 520px; min-width: 0; }
.ix-glava .pg-nad { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--prigušeno); }
.ix-filtar { flex: 0 1 380px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border: 1.5px solid var(--crta); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ix-filtar:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 5px var(--akcent-svijetli); }
.ix-filtar .ik { width: 20px; height: 20px; color: var(--prigušeno); }
.ix-filtar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 16.5px; color: inherit; }
.ix-filtar input:focus { outline: none; }

.ix-dj-mreza, .ix-mj-mreza { display: grid; gap: 12px; }
.ix-dj-mreza { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.ix-mj-mreza { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ix-dj-mreza > li, .ix-mj-mreza > li { min-width: 0; }

.ix-dj { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: var(--radius); background: var(--kamen); text-decoration: none; transition: background .25s, transform .3s var(--ease); }
.ix-dj:hover { background: #ebe8e2; transform: translateY(-3px); }
.ix-dj:active { transform: scale(.985); }
.ix-dj-slika { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #e9e6e0; }
.ix-dj-foto { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ix-dj:hover .ix-dj-foto { transform: scale(1.04); }
.ix-dj-ik { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r); background: #fff; box-shadow: 0 8px 22px -10px rgba(18,20,23,.45); }
.ix-dj-ik img { width: 50px; height: 50px; mix-blend-mode: multiply; }
.ix-bez { display: grid; place-items: center; background: #f1efeb; }
.ix-dj-veliko { width: 46%; height: auto; aspect-ratio: 1; mix-blend-mode: multiply; transition: transform .4s var(--ease); }
.ix-dj:hover .ix-dj-veliko { transform: scale(1.06) rotate(-3deg); }
.ix-dj-dno { display: flex; align-items: center; gap: 12px; padding: 12px 10px 6px; }
.ix-dj-tekst { flex: 1; min-width: 0; }
.ix-dj-tekst b { display: block; font: 700 19px/1.15 var(--font-naslov); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ix-dj-tekst small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--prigušeno); }
.ix-dj-dno > .ik, .ix-mj-glava > .ik { width: 18px; height: 18px; flex: none; color: var(--prigušeno); transition: transform .3s var(--ease), color .2s; }
.ix-dj:hover .ix-dj-dno > .ik, .ix-mj:hover .ix-mj-glava > .ik { transform: translateX(3px); color: var(--akcent); }

.ix-mj { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 12px 16px 14px 12px; border-radius: var(--radius); background: var(--kamen); text-decoration: none; transition: background .25s, transform .3s var(--ease); }
.ix-mj:hover { background: #ebe8e2; transform: translateY(-3px); }
.ix-mj:active { transform: scale(.985); }
.ix-mj-glava { display: flex; align-items: center; gap: 12px; }
.ix-mj .mj-ik { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r); background: #fff; color: var(--akcent); }
.ix-mj .mj-ik .ik { width: 22px; height: 22px; }
.ix-mj-tekst { flex: 1; min-width: 0; }
.ix-mj-tekst b { display: block; font: 700 19px/1.15 var(--font-naslov); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ix-mj-tekst small { font-size: 14px; color: var(--prigušeno); }
.ix-mj-dj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--crta); }
.ix-mj-dj img { width: 46px; height: 46px; padding: 2px; border-radius: var(--r); background: #fff; mix-blend-mode: multiply; }
.ix-mj-vise { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: var(--r); background: #fff; font: 700 13px var(--font); color: var(--prigušeno); }
.ix-mj-nazivi { flex-basis: 100%; font-size: 13.5px; line-height: 1.35; color: var(--prigušeno); }

.ix-prazno { margin: 8px 0 0; padding: 22px 24px; border-radius: var(--radius); border: 1.5px dashed var(--crta); color: var(--prigušeno); }
.ix-prazno a { display: inline-flex; align-items: center; gap: .35em; margin-left: 4px; color: var(--tinta); font-weight: 600; }
.str-indeks .kp-prijava { margin-top: clamp(28px, 3.5vw, 48px); }

@media (max-width: 720px) {
  .ix-filtar { flex-basis: 100%; height: 50px; }
  .ix-dj-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ix-dj { padding: 6px; border-radius: var(--r); }
  .ix-dj-slika { border-radius: var(--r); }
  .ix-dj-ik { left: 6px; bottom: 6px; width: 44px; height: 44px; border-radius: var(--r); } .ix-dj-ik img { width: 36px; height: 36px; }
  .ix-dj-dno { padding: 10px 6px 4px; gap: 6px; }
  .ix-dj-dno > .ik { display: none; }
  .ix-dj-tekst b, .ix-mj-tekst b { font-size: 16.5px; }
  .ix-dj-tekst small, .ix-mj-tekst small { font-size: 13px; }
}
@media (max-width: 340px) {
  .ix-dj-mreza { grid-template-columns: minmax(0, 1fr); }
  .ix-mj-glava > .ik { display: none; }
  .ix-mj .mj-ik { width: 40px; height: 40px; }
  .ix-mj-dj img, .ix-mj-vise { width: 34px; min-width: 34px; height: 34px; }
}
@media (min-width: 1600px) {
  .ix-dj-mreza { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .ix-dj-ik { width: 68px; height: 68px; } .ix-dj-ik img { width: 58px; height: 58px; }
  .ix-dj-tekst b, .ix-mj-tekst b { font-size: 21px; }
}

/* ================= PRAVNE STRANICE: numerirani odjeljci, sadržaj prati čitanje, kartice dokumenata (2026-11-09) ================= */
.pravno-toc summary { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); list-style: none; cursor: default; pointer-events: none; }
.pravno-toc summary::-webkit-details-marker { display: none; }
.pravno-toc summary small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--kamen); font-size: 11.5px; letter-spacing: 0; }
.pravno-toc ol { list-style: none; margin: 0; padding: 0; border-left: 0; display: grid; gap: 2px; }
.pravno-toc a { position: relative; display: flex; gap: 10px; padding: 7px 10px 7px 14px; border-radius: var(--r); color: var(--prigušeno); text-decoration: none; font-size: 15px; line-height: 1.35; transition: color .2s, background .2s; }
.pravno-toc a::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--crta); transition: background .2s; }
.pravno-toc a span { flex: none; font: 600 12px/1.6 var(--font); color: #9a9da3; font-variant-numeric: tabular-nums; }
.pravno-toc a:hover { color: var(--tinta); background: var(--kamen); }
.pravno-toc a[aria-current="true"] { color: var(--tinta); font-weight: 600; background: var(--kamen); }
.pravno-toc a[aria-current="true"]::before { background: var(--akcent); }
.pravno-toc a[aria-current="true"] span { color: var(--akcent); }
.pravno-tijelo h2 { display: flex; align-items: baseline; gap: 12px; }
.pravno-br { flex: none; font: 700 14px var(--font); letter-spacing: 0; color: var(--akcent); font-variant-numeric: tabular-nums; transform: translateY(-3px); }

.pravno-ostalo { margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--crta); }
.pravno-ostalo h2 { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.pravno-ostalo ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.pravno-ostalo li { min-width: 0; }
.pravno-ostalo a { position: relative; display: block; height: 100%; padding: 18px 48px 18px 20px; border-radius: var(--r); background: var(--kamen); text-decoration: none; transition: background .2s, transform .25s var(--ease); }
.pravno-ostalo a:hover { background: #ebe8e2; transform: translateY(-2px); }
.pravno-ostalo a:active { transform: scale(.98); }
.pravno-ostalo b { display: block; font: 700 17px/1.2 var(--font-naslov); letter-spacing: -.02em; }
.pravno-ostalo small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--prigušeno); }
.pravno-ostalo .ik { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--prigušeno); transition: transform .25s var(--ease), color .2s; }
.pravno-ostalo a:hover .ik { transform: translateX(3px); color: var(--akcent); }

@media (max-width: 960px) {
  .pravno-toc details { border-radius: var(--r); background: var(--kamen); }
  .pravno-toc summary { pointer-events: auto; cursor: pointer; justify-content: space-between; min-height: 52px; margin: 0; padding: 0 18px; }
  .pravno-toc summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
  .pravno-toc details[open] summary::after { transform: rotate(-135deg) translateX(-2px); }
  .pravno-toc summary small { margin-right: auto; background: #fff; }
  .pravno-toc ol { padding: 0 8px 10px; }
  .pravno-toc a { min-height: 44px; align-items: center; }
  .pravno-toc a::before { display: none; }
  .pravno-toc a:hover, .pravno-toc a[aria-current="true"] { background: #fff; }
}
@media (max-width: 480px) { .pravno-tijelo h2 { gap: 8px; } .pravno-br { font-size: 13px; } }

/* ================= 404: oblačić „alo?“ bez odgovora + prečaci (2026-11-09) ================= */
.g404 { padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.g404-red { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.g404 .pg-nad { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--prigušeno); }
.g404 h1 { font-size: clamp(40px, 5.5vw, 76px); font-weight: 800; letter-spacing: -.035em; }
.g404 .hero-podnaslov { max-width: 34em; margin-top: 14px; }
.g404-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.g404-gumbi .gumb { min-height: 44px; padding: 0 18px; font-size: 15px; }
.g404-slika { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; border-radius: 50%; background: var(--kamen); }
.g404-oblacic { width: 58%; height: auto; overflow: visible; transform: rotate(-6deg); animation: g404-zvoni 3.2s var(--ease) infinite; transform-origin: 30% 90%; }
.g404-oblacic path { fill: var(--akcent); }
.g404-oblacic text { font: 800 30px var(--font-naslov); letter-spacing: -.03em; fill: #fff; }
.g404-broj { position: absolute; right: 8%; bottom: 10%; padding: 8px 16px; border-radius: 999px; background: #fff; font: 800 clamp(20px, 2vw, 28px) var(--font-naslov); letter-spacing: -.02em; color: var(--tinta); box-shadow: 0 10px 30px -14px rgba(18,20,23,.4); }
@keyframes g404-zvoni { 0%, 70%, 100% { transform: rotate(-6deg); } 76% { transform: rotate(4deg); } 82% { transform: rotate(-10deg); } 88% { transform: rotate(2deg); } 94% { transform: rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) { .g404-oblacic { animation: none; } }
.g404-dj { margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--crta); }
.g404-dj h2 { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
@media (max-width: 760px) {
  .g404-red { grid-template-columns: minmax(0, 1fr); }
  .g404-slika { order: -1; max-width: 220px; justify-self: start; }
}
@media (max-width: 480px) {
  .g404-slika { max-width: 170px; }
  .g404-gumbi .gumb { flex: 1 1 auto; }
}

/* ================= Za obrtnike: kartica s radovima, čitljivija napomena, uži razmak na širokim ekranima (2026-11-09) ================= */
.bp-broj { padding: 14px 18px 16px; }
.bp-radovi { display: flex; align-items: center; }
.bp-radovi img, .bp-radovi span { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; background: var(--kamen); }
.bp-radovi img:first-child { margin-left: 0; }
.bp-radovi span { display: grid; place-items: center; background: var(--akcent-svijetli); color: var(--akcent-tamni); font: 700 13px var(--font); }
.bp-broj strong { margin-top: 10px; font-size: 16.5px; }
.b-napomena { font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
@media (min-width: 1280px) {
  .banner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
  .b-scena { width: 100%; max-width: 620px; justify-self: start; }
}

/* Česta pitanja kao zasebna stranica: jedan stupac, kontakt gumbi iznad pitanja */
.faq.faq-puna { grid-template-columns: minmax(0, 1fr); max-width: 900px; gap: 16px; }
.faq-puna .faq-uvod:not(:has(.faq-kontakt)) { display: none; }
.faq-puna .faq-kontakt { margin-top: 0; }

/* ================= ZAGLAVLJE: puna bijela traka uz vrh umjesto plutajuće kapsule (2026-11-09) =================
   Iznad trake nema razmaka pa sadržaj ne viri; pri skrolanju dobije tanku crtu i blagu sjenu. */
:root { --zaglavlje: 72px; }
.zaglavlje { padding: 0; background: #fff; pointer-events: auto; border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.zaglavlje.skrolano { border-bottom-color: var(--crta); box-shadow: 0 10px 28px -24px rgba(18,20,23,.45); }
.kapsula, .zaglavlje.skrolano .kapsula, html.mob-otvoren .kapsula { height: 72px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega, .h-trazilica { top: calc(100% + 8px); }
.mob-izbornik { padding-top: 84px; }
@media (max-width: 760px) {
  :root { --zaglavlje: 62px; }
  .kapsula, .zaglavlje.skrolano .kapsula, html.mob-otvoren .kapsula { height: 62px; }
  .mob-izbornik { padding-top: 74px; }
}
@media (max-width: 340px) {
  .kapsula, .zaglavlje.skrolano .kapsula, html.mob-otvoren .kapsula { height: 58px; }
}
@media (min-width: 1600px) {
  :root { --zaglavlje: 80px; }
  .kapsula, .zaglavlje.skrolano .kapsula, html.mob-otvoren .kapsula { height: 80px; }
}
@media (min-width: 2200px) {
  :root { --zaglavlje: 76px; }
  .kapsula, .zaglavlje.skrolano .kapsula, html.mob-otvoren .kapsula { height: 76px; }
}
/* stranica obrta: traka je fiksna preko fotografije, pa naziv i mrvice počinju ispod nje */
.str-obrt .zaglavlje { border-bottom-color: var(--crta); }

/* ================= STRANICA OBRTA v4 (2026-11-09): vrh s imenom i fotografijama radova, svijetla kartica za kontakt,
   ujednačena galerija, lokacija kao kartica, slični obrtnici kao na popisima ================= */
.str-obrt .zaglavlje { position: sticky; }
.ob4 .gumb-akcent:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ob4-hero { padding: clamp(18px, 3vw, 36px) 0 clamp(32px, 4.5vw, 64px); background: linear-gradient(180deg, #fff 0%, var(--kamen) 100%); }
.ob4-hero .mrvice { margin-bottom: clamp(16px, 2.4vw, 28px); }
.ob4-hero-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ob4-id { min-width: 0; }
.ob4-znak { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ob4-logo { flex: none; width: 72px; height: 72px; border-radius: var(--r); object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--crta), 0 12px 28px -18px rgba(18,20,23,.4); }
.ob4-ini { display: grid; place-items: center; background: var(--obrt); color: var(--obrt-tekst, #fff); font: 800 26px var(--font-naslov); letter-spacing: -.02em; box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--obrt) 70%, transparent); }
.ob4-dj { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ob4-dj a { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--crta); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: box-shadow .2s; }
.ob4-dj a:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.ob4-dj .ik { width: 15px; height: 15px; color: var(--prigušeno); }
.ob4-id h1 { font-size: clamp(38px, 5vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: .98; text-wrap: balance; overflow-wrap: anywhere; }
.ob4-uvod { margin-top: 16px; max-width: 32em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: #3c4047; text-wrap: pretty; }
.ob4-akcije { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.6vw, 30px); }
.ob4-akcije .gumb { min-height: 56px; padding: 0 24px; font-size: 16.5px; }
.ob4-akcije .gumb > span, .ob4-k-gumbi .gumb > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ob4-akcije small, .ob4-k-gumbi small { font-size: 13px; font-weight: 500; opacity: .85; }
.ob4-cinjenice { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(22px, 2.6vw, 32px); padding-top: 18px; border-top: 1px solid var(--crta); }
.ob4-cinjenice li { min-width: 0; }
.ob4-cinjenice small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); }
.ob4-cinjenice b { display: block; margin-top: 3px; font: 650 16.5px/1.25 var(--font-naslov); }

.ob4-mozaik { position: relative; display: grid; gap: 10px; aspect-ratio: 5 / 4; min-width: 0; }
.ob4-mozaik.m3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ob4-mozaik.m3 > a:first-child { grid-row: 1 / 3; }
.ob4-mozaik.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob4-mozaik > a, .ob4-mozaik > span { position: relative; display: block; min-width: 0; min-height: 0; border-radius: var(--r); overflow: hidden; background: #e9e6e0; }
.ob4-mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ob4-mozaik > a:hover img { transform: scale(1.04); }
.ob4-jos { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18,20,23,.48); color: #fff; font: 800 clamp(26px, 2.6vw, 38px) var(--font-naslov); letter-spacing: -.02em; }
.ob4-sve { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 600; font-size: 14.5px; text-decoration: none; box-shadow: 0 10px 26px -14px rgba(18,20,23,.55); transition: transform .2s var(--ease); }
.ob4-sve:hover { transform: translateY(-2px); }
.ob4-sve .ik { width: 18px; height: 18px; }
.ob4-bez { place-items: center; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--crta); }
.ob4-bez img { width: 46%; height: auto; mix-blend-mode: multiply; }

.ob4-tijelo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }
.ob4-glavno { min-width: 0; display: grid; gap: clamp(40px, 5vw, 64px); }
.ob4-blok { min-width: 0; scroll-margin-top: calc(var(--zaglavlje) + 16px); }
.ob4-naslov { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; }
.ob4-naslov span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--kamen); font: 700 14px var(--font); letter-spacing: 0; color: var(--prigušeno); }
.ob4-tekst { max-width: 40em; font-size: 17.5px; line-height: 1.65; color: #34373d; }
.ob4-mali { margin: 26px 0 12px; font: 700 13px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); }
.ob4-usluge { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.ob4-usluge li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: var(--r); background: var(--kamen); font-weight: 550; line-height: 1.3; }
.ob4-usluge .ik { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--obrt); color: var(--obrt-tekst, #fff); stroke-width: 3; }

.ob4-galerija { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob4-galerija li { min-width: 0; }
.ob4-galerija a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #e9e6e0; }
.ob4-galerija img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ob4-galerija a:hover img { transform: scale(1.05); }
.ob4-galerija a:hover .galerija-opis, .ob4-galerija a:focus-visible .galerija-opis { opacity: 1; }

.ob4-lok { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--kamen); }
.ob4-lok-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 2.4vw, 32px); }
.ob4-pin { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: var(--obrt); color: var(--obrt-tekst, #fff); }
.ob4-pin .ik { width: 22px; height: 22px; }
.ob4-lok-tekst b { font: 700 clamp(19px, 1.6vw, 22px)/1.25 var(--font-naslov); letter-spacing: -.02em; }
.ob4-lok-tekst p { font-size: 14.5px; color: var(--prigušeno); }
.ob4-lok-tekst .gumb { margin-top: 6px; min-height: 46px; background: #fff; }
.ob4-karta { aspect-ratio: auto; min-height: 260px; border-radius: 0; display: grid; place-items: center; }
.ob4-karta .karta-gumb { min-height: 46px; }

.ob4-kontakt { position: sticky; top: calc(var(--zaglavlje) + 20px); }
.ob4-kartica { padding: 22px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--crta), 0 30px 60px -36px rgba(18,20,23,.35); }
.ob4-k-glava { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--crta); }
.ob4-k-glava img { width: 56px; height: 56px; border-radius: var(--r); object-fit: cover; }
.ob4-k-glava .ok-logo { object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--crta); }
.ob4-k-ini { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--r); background: var(--obrt); color: var(--obrt-tekst, #fff); font: 800 20px var(--font-naslov); }
.ob4-k-glava small { display: block; font-size: 13px; color: var(--prigušeno); }
.ob4-k-glava b { display: block; font: 700 19px/1.2 var(--font-naslov); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ob4-k-gumbi { display: grid; gap: 8px; }
.ob4-k-gumbi .gumb { justify-content: flex-start; min-height: 58px; padding: 0 20px; font-size: 16.5px; border-radius: var(--r); }
.ob4-k-popis { display: grid; gap: 4px; margin-top: 16px; }
.ob4-k-popis li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; min-width: 0; }
.ob4-k-popis .ik { flex: none; width: 18px; height: 18px; color: var(--prigušeno); }
.ob4-k-popis a { min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.ob4-k-popis a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob4-mreze { margin-top: 12px; }
.ob4-k-napomena { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--crta); font-size: 13.5px; color: var(--prigušeno); }

@media (max-width: 1100px) {
  .ob4-tijelo { grid-template-columns: minmax(0, 1fr) 320px; }
  .ob4-galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ob4-hero-red { grid-template-columns: minmax(0, 1fr); }
  .ob4-mozaik { aspect-ratio: 4 / 3; }
  .ob4-tijelo { grid-template-columns: minmax(0, 1fr); }
  .ob4-kontakt { position: static; grid-row: 2; }
  .ob4-lok { grid-template-columns: minmax(0, 1fr); }
  .ob4-karta { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .ob4-akcije .gumb { flex: 1 1 100%; justify-content: center; }
  .ob4-mozaik { gap: 6px; }
  .ob4-mozaik > a, .ob4-mozaik > span { border-radius: var(--r); }
  .ob4-mozaik.m3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ob4-galerija { gap: 6px; }
  .ob4-galerija a { border-radius: var(--r); }
  .ob4-cinjenice { gap: 10px 20px; }
  .ob4-kartica { padding: 18px; }
}
@media (max-width: 340px) {
  .ob4-galerija { grid-template-columns: minmax(0, 1fr); }
  .ob4-logo { width: 60px; height: 60px; border-radius: var(--r); }
  .ob4-sve { left: 8px; bottom: 8px; padding: 0 12px; font-size: 13.5px; }
}
@media (min-width: 1600px) {
  .ob4-tijelo { grid-template-columns: minmax(0, 1fr) 400px; }
  .ob4-tekst { font-size: 19px; }
}
.ob4-mozaik > a.ob4-sve { position: absolute; left: 14px; bottom: 14px; display: inline-flex; border-radius: 999px; background: #fff; overflow: visible; }
@media (max-width: 340px) { .ob4-mozaik > a.ob4-sve { left: 8px; bottom: 8px; } }
.ob4 .videi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob4 .videi-jedan { grid-template-columns: minmax(0, 1fr); }
.ob4 .video { border-radius: var(--r); }
@media (max-width: 600px) { .ob4 .videi { grid-template-columns: minmax(0, 1fr); } }
.ob4-mozaik > button.ob4-sve { position: absolute; left: 14px; bottom: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; }
@media (max-width: 340px) { .ob4-mozaik > button.ob4-sve { left: 8px; bottom: 8px; font-size: 13.5px; } }

/* =====================================================================================================
   SMJER „KLESARSKI ZNAK“ (2026-11-09, vidi DIZAJN-SMJER.md)
   Vapnenac i žbuka umjesto sivih kartica sa sjenom, tanke crte, manji radijusi (kameni blokovi s fugama),
   jadransko plava samo za radnje, veliki zbijeni naslovi, klesarski znakovi umjesto 3D ikona,
   podnožje boje dubokog mora s frizom znakova.
   ===================================================================================================== */
:root {
  --kamen: #F4F1EA; --zbuka: #E3DDD1; --crta: #E3DDD1; --more: #0A2F4F; --prigušeno: #625E57;
  --radius: 6px; --radius-malo: 6px; --r: 6px;
}
body { background: #fff; }
.sekcija-siva { background: var(--kamen); }

/* gumbi: pravokutniji, bez skakanja */
.gumb { border-radius: var(--r); }
.kap-cta { border-radius: var(--r); }
.gumb-obrub { border-color: var(--zbuka); background: #fff; }

/* naslovi sekcija: veći skok veličine */
.sekcija h2, .sekcija-glava h2 { font-weight: 800; letter-spacing: -.035em; }
.sekcija-glava h2 { font-size: clamp(30px, 3.4vw, 52px); }

/* --- naslovna: tražilica kao rečenica „Trebam …“ */
.hv-polje { border-radius: var(--r); border: 1.5px solid var(--tinta); box-shadow: none; padding-left: 20px; }
.hv-polje:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 5px var(--akcent-svijetli); }
.hv-rec { flex: none; font: 800 19px var(--font-naslov); letter-spacing: -.02em; color: var(--tinta); }
.hv-polje input { font-size: 18px; }
.hv-gumb { border-radius: var(--r); }
.hv-primjeri button { border-radius: var(--r); border-color: var(--zbuka); }
.hv-m { border-radius: var(--r); }

/* --- pločice djelatnosti: kameni blokovi sa znakom */
.dj-mreza { gap: 0; border-top: 1px solid var(--zbuka); border-left: 1px solid var(--zbuka); }
.dj-mreza a, .dj-mreza a:hover { border-radius: 0; background: #fff; border-right: 1px solid var(--zbuka); border-bottom: 1px solid var(--zbuka); transform: none; min-height: 88px; padding: 14px 18px; }
.dj-mreza a:hover { background: var(--kamen); }
.dj-mreza a:hover b { color: var(--akcent-tamni); }
.dj-mreza img { width: 44px; height: 44px; mix-blend-mode: normal; transition: transform .3s var(--ease); }
.dj-mreza a:hover img { transform: translateY(-2px); }
.mj-mreza a, .ix-mj, .ix-dj { border-radius: var(--r); }
.mj-mreza a { background: #fff; border: 1px solid var(--zbuka); }
.mj-mreza a:hover { background: var(--kamen); transform: none; }
.mj-mreza .mj-ik { border-radius: var(--r); background: var(--kamen); }
.jos-mreza a { border-radius: var(--r); background: #fff; border: 1px solid var(--zbuka); }
.jos-mreza a:hover { background: var(--kamen); transform: none; }
.jos-mreza img { width: 48px; height: 48px; margin: 10px 0 6px; mix-blend-mode: normal; }
.jos-mreza small { background: var(--kamen); }

/* --- Sve djelatnosti / Sva mjesta */
.ix-dj { background: #fff; border: 1px solid var(--zbuka); }
.ix-dj:hover { background: #fff; border-color: var(--tinta); transform: none; }
.ix-dj-slika { border-radius: var(--r); }
.ix-dj-ik { border-radius: var(--r); box-shadow: none; border: 1px solid var(--zbuka); }
.ix-dj-ik img { width: 38px; height: 38px; mix-blend-mode: normal; }
.ix-bez { background: var(--kamen); }
.ix-dj-veliko { width: 34%; mix-blend-mode: normal; }
.ix-mj { background: #fff; border: 1px solid var(--zbuka); }
.ix-mj:hover { background: #fff; border-color: var(--tinta); transform: none; }
.ix-mj .mj-ik { border-radius: var(--r); background: var(--kamen); }
.ix-mj-dj img { border-radius: var(--r); background: var(--kamen); mix-blend-mode: normal; padding: 7px; }
.ix-mj-vise { border-radius: var(--r); background: var(--kamen); }
.ix-mj-dj { border-top-color: var(--zbuka); }
.ix-filtar { border-radius: var(--r); border-color: var(--zbuka); }

/* --- istaknuti mozaik, kartice popisa */
.b-kartica { border-radius: var(--r); }
.b-strelica { border-radius: var(--r); }
.kp { border-radius: var(--r); border: 1px solid var(--zbuka); box-shadow: none; }
.kp:hover { border-color: var(--tinta); }
.kp-slika, .kp-slika img { border-radius: var(--r); }
.kp-bez img { mix-blend-mode: normal; width: 34%; height: auto; }
.kp-zovi, .kp-vise { border-radius: var(--r); }
.kp-prijava { border-radius: var(--r); background: var(--kamen); border: 1px solid var(--zbuka); }
.cip { border-radius: var(--r); }
.pg-ikona { border-radius: var(--r); background: #fff; border: 1px solid var(--zbuka); box-shadow: none; }
.pg-ikona img { mix-blend-mode: normal; width: 64px; height: 64px; }

/* --- kako radi, česta pitanja, za obrtnike */
.faq-stavka { border-radius: var(--r); background: #fff; border: 1px solid var(--zbuka); }
.faq-stavka[open] { border-color: var(--tinta); }
.banner { border-radius: var(--r); }
.b-plutaj { border-radius: var(--r); }

/* --- izbornici */
.mega { border-radius: var(--r); box-shadow: 0 24px 60px -34px rgba(18,20,23,.45); }
.mdj-plocica, .mega-plocica { border-radius: var(--r); }
.mdj-plocica img, .mega-plocica img, .mob-plocica img { mix-blend-mode: normal; }
.mob-plocica { border-radius: var(--r); }

/* --- stranica obrta: kameni ton i jedna galerija */
.ob4-hero { background: var(--kamen); }
.ob4-logo { border-radius: var(--r); box-shadow: 0 0 0 1px var(--zbuka); }
.ob4-ini { box-shadow: none; }
.ob4-dj a { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--zbuka); }
.ob4-akcije .gumb, .ob4-k-gumbi .gumb { border-radius: var(--r); }
.ob4-cinjenice { border-top-color: var(--zbuka); }
.ob4-kartica { border-radius: var(--r); box-shadow: 0 0 0 1px var(--zbuka); }
.ob4-k-glava img, .ob4-k-ini { border-radius: var(--r); }
.ob4-usluge li { border-radius: var(--r); background: #fff; border: 1px solid var(--zbuka); }
.ob4-galerija a, .ob4-lok { border-radius: var(--r); }
.ob4-lok { background: var(--kamen); border: 1px solid var(--zbuka); }
.ob4-pin { border-radius: var(--r); }

.ob4-film-okvir { position: relative; min-width: 0; }
.ob4-film { display: grid; gap: 8px; aspect-ratio: 5 / 4; }
.ob4-film > li { min-width: 0; min-height: 0; }
.ob4-film a, .ob4-film span { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--zbuka); }
.ob4-film img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ob4-film a:hover img { transform: scale(1.035); }
.ob4-film.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob4-film.m3 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ob4-film.m4 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ob4-film.m5 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ob4-film.m3 > li:first-child, .ob4-film.m5 > li:first-child { grid-row: 1 / 3; }
.ob4-film.m4 > li:first-child { grid-row: 1 / 4; }
.ob4-film > li:nth-child(n+6) { display: none; }
.ob4-jos { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,47,79,.55); color: #fff; font: 800 clamp(24px, 2.4vw, 36px) var(--font-naslov); }
.ob4-brojac { display: none; }
.ob4-film-okvir > .ob4-sve { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: #fff; color: var(--tinta); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; box-shadow: 0 8px 22px -12px rgba(18,20,23,.5); }
.ob4-film-okvir > .ob4-sve .ik { width: 18px; height: 18px; }
.ob4-film-okvir.ob4-bez { display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: var(--r); background: #fff; border: 1px solid var(--zbuka); }
.ob4-film-okvir.ob4-bez img { width: 34%; height: auto; }
@media (max-width: 900px) {
  /* mobitel i tablet: klizač kroz sve fotografije s brojačem, sljedeća viri s desne strane */
  .ob4-film, .ob4-film.m2, .ob4-film.m3, .ob4-film.m4, .ob4-film.m5 { display: flex; aspect-ratio: auto; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--rub)); padding: 0 var(--rub); scroll-padding: 0 var(--rub); }
  .ob4-film::-webkit-scrollbar { display: none; }
  .ob4-film > li, .ob4-film > li:nth-child(n+6) { display: block; flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .ob4-film.m1 > li { flex-basis: 100%; }
  .ob4-jos { display: none; }
  .ob4-brojac { display: block; position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: var(--r); background: rgba(18,20,23,.7); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .ob4-film-okvir > .ob4-sve { left: 10px; bottom: 10px; }
}

/* --- podnožje: duboko more i friz klesarskih znakova */
.pod-ploca { background: var(--more); color: rgba(244,241,234,.75); }
.pod-slogan, .pod-kontakt .pod-tel, .pod-ploca .winkla { color: #fff; }
.pod-kontakt a, .pod-kontakt span { color: rgba(244,241,234,.82); }
.pod-kontakt a:hover, .pod-stupci a:hover { color: #fff; }
.pod-kontakt .ik { color: #7DB4EA; }
.pod-ploca h2 { color: rgba(244,241,234,.5); }
.pod-stupci a { color: rgba(244,241,234,.9); }
.pod-stupci a.pod-sve, .pod-stupci a.pod-sve:hover { color: #7DB4EA; }
.pod-kontakt-gumb { color: #fff; border-color: rgba(244,241,234,.35); }
.pod-kontakt-gumb:hover { background: #fff; color: var(--more); }
.pod-bez-kolacica { color: rgba(244,241,234,.7); }
.pod-dno { border-top-color: rgba(244,241,234,.16); color: rgba(244,241,234,.6); }
.pod-pravno a { color: rgba(244,241,234,.7); }
.pod-pravno a:hover { color: #fff; }
.pod-vrh { background: transparent; border-color: rgba(244,241,234,.3); color: #fff; }
.pod-friz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(244,241,234,.16); }
.pod-friz img { width: 36px; height: 36px; opacity: .8; }
@media (max-width: 720px) { .pod-friz { justify-content: flex-start; gap: 14px; } .pod-friz img { width: 30px; height: 30px; } }
.pod-ploca { border-radius: var(--r) var(--r) 0 0; }
@media (max-width: 720px) { .pod-ploca { border-radius: var(--r) var(--r) 0 0; } }
@media (max-width: 720px) {
  .dj-mreza a, .dj-mreza a:hover { flex-direction: row; align-items: center; min-height: 62px; padding: 10px 12px; gap: 10px; }
  .dj-mreza img { width: 30px; height: 30px; }
  .dj-mreza b { font-size: 15.5px; }
  .dj-mreza small { font-size: 13px; }
}
@media (max-width: 340px) { .dj-mreza img { width: 26px; height: 26px; } .dj-mreza a, .dj-mreza a:hover { padding: 8px; gap: 8px; } .dj-mreza b { font-size: 14.5px; } }

/* Hover u tamnom podnožju (duboko more): svijetle boje umjesto tamnih iz svijetle inačice */
.pod-bez-kolacica:hover, .pod-bez-kolacica:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pod-ploca .winkla:hover, .pod-ploca .winkla:focus-visible { color: #7DB4EA; }
.pod-stupci a.pod-sve:hover { color: #fff; }
.pod-vrh:hover { background: #fff; color: var(--more); border-color: #fff; }
.pod-ploca a:focus-visible, .pod-ploca button:focus-visible { outline: 2px solid #7DB4EA; outline-offset: 3px; }
/* „Upute u Google Maps“: bijela podloga gumba ne smije pregaziti tamni hover */
.ob4-lok-tekst .gumb:hover, .ob4-lok-tekst .gumb:focus-visible { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* brojevi poglavlja u sadržaju pravnih stranica: čitljivi i na kamenoj podlozi hovera */
.pravno-toc a span { color: var(--prigušeno); }

/* Jedan ili dva rezultata (računalo): fotografija u stalnom omjeru 4:3, ne smije rastegnuti karticu;
   jedan rezultat ne ide preko cijele širine nego stoji kao mirna vodoravna kartica */
@media (min-width: 701px) {
  .kp-malo .kp { min-height: 0; }
  .kp-malo .kp-slika { position: relative; width: clamp(240px, 40%, 420px); aspect-ratio: auto; align-self: stretch; min-height: 210px; }
  .kp-malo .kp-slika > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .kp-malo .kp-tijelo { justify-content: center; gap: 2px; }
  .kp-malo .kp-radnje { margin-top: 18px; }
  /* samo jedna vidljiva kartica (i kad pretraga skriva ostale atributom hidden) */
  .kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) { grid-template-columns: minmax(0, 880px); }
}

/* ================= PREGLED 10. 11. 2026: dovršetak „Klesarskog znaka“ i popravci iz pregleda ================= */
/* podloga stranice: vapnenac, kartice ostaju bijele */
:root { --pozadina: var(--kamen); }
body { background: var(--kamen); }

/* radnja ima jednu boju: Nazovi, kvačice usluga i gumb za video plavi su na svakom obrtu (boja obrta ostaje samo u inicijalima) */
.str-obrt .gumb-akcent, .poziv-traka .gumb-akcent, .ob4 .gumb-akcent { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.str-obrt .gumb-akcent:hover, .poziv-traka .gumb-akcent:hover { background: var(--akcent-tamni); border-color: var(--akcent-tamni); }
.ob4-usluge .ik { background: var(--akcent); color: #fff; }
.str-obrt .video button { background: var(--akcent); color: #fff; }
.ob4-dijeli { gap: 8px; }
.ob4-dijeli .ik { width: 18px; height: 18px; }
.ob4-napomena { margin: 10px 0 0; font-size: 13.5px; color: var(--prigušeno); }
.ob4-napomena a { color: inherit; }

/* tražilica u zaglavlju: povećalo i Esc u visini polja, ne na sredini cijelog panela */
.mala-trazilica { align-items: flex-start; border: 1px solid var(--zbuka); border-radius: var(--r); box-shadow: 0 24px 48px -32px rgba(10,47,79,.45); }
.mala-trazilica > .ik { top: 21px; }
.mala-trazilica kbd { top: 20px; }
.mala-trazilica input, .mala-trazilica:has(.padajuci:not([hidden])) input { border-radius: var(--r) var(--r) 0 0; }
.mala-trazilica .padajuci { border-radius: 0 0 var(--r) var(--r); }
@media (hover: none), (max-width: 760px) { .mala-trazilica kbd { display: none; } .mala-trazilica input { padding-right: 18px; } }
/* naslovna: povećalo u zaglavlju tek kad velika tražilica ode s ekrana */
[data-nakon-heroja] { display: none; }
html.heroj-van [data-nakon-heroja] { display: grid; }

/* mobilni izbornik počinje ispod trake, pa sadržaj ne klizi ispod loga */
.mob-izbornik { top: var(--zaglavlje); padding-top: 18px; }
@media (max-width: 760px) { .mob-izbornik { padding-top: 16px; } }
@media (max-width: 340px) { .mob-izbornik { top: 58px; } }
.mob-blok { border-radius: var(--r); box-shadow: none; border: 1px solid var(--zbuka); }
.mob-trazi input { border-radius: var(--r); border-color: var(--zbuka); }
.mob-trazi button { border-radius: var(--r); }
.mob-cta { border-radius: var(--r); background: var(--more); }
.mob-red a { display: inline-flex; align-items: center; min-height: 44px; }
.vise-gumb { border: 1px solid var(--zbuka); border-radius: var(--r); background: #fff; }

/* banner „Imate obrt?“: tamnoplava kamena ploča s nekoliko fotografija radova, bez mobitela, valova i teških sjena */
.banner { background: var(--more); border-radius: var(--r); box-shadow: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: clamp(28px, 4.5vw, 64px); gap: clamp(24px, 4vw, 64px); }
.banner::before, .banner-valovi, .b-scena { display: none; }
.banner-tekst { padding-bottom: 0; }
.banner .podcrtano { background-image: none; color: #7DB4EA; }
.b-prednosti li i { background: rgba(244,241,234,.12); color: #7DB4EA; }
.b-radovi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.b-radovi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; }
.b-radovi-broj { grid-column: 1 / -1; margin: 8px 0 0; color: rgba(244,241,234,.75); font-size: 15px; }
.b-radovi-broj b { font: 800 22px var(--font-naslov); color: #fff; margin-right: 2px; }
.gumb-svijetli:hover { background: #7DB4EA; border-color: #7DB4EA; color: var(--more); }
@media (max-width: 1000px) { .banner { grid-template-columns: minmax(0, 1fr); } .b-radovi { max-width: 520px; } }
@media (max-width: 720px) { .banner { border-radius: var(--r); padding: 24px 18px; } }

/* istaknuti obrtnici: bez tamnog prijelaza preko fotografije; naziv na bijeloj pločici kao natpis uz rad */
.mz::after { display: none; }
.mz { border-radius: var(--r); }
.mz-tekst { left: 12px; right: auto; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 14px; border-radius: var(--r); background: #fff; color: var(--tinta); }
.mz-tekst small { color: var(--prigušeno); }
.mz-str { display: none; }
.mz:hover .mz-tekst strong { color: var(--akcent); }

/* prozor „Prijavite obrt“: manji radijusi i blaga sjena */
.prijava { border-radius: var(--r); box-shadow: 0 40px 80px -40px rgba(10,47,79,.55); }
.prijava input, .prijava textarea, .prijava select { border-radius: var(--r); }

/* velika tražilica (/trazi, 404) kao na naslovnoj: kamen, tanka crta, plavi gumb */
.velika-trazilica { border: 1px solid var(--zbuka); border-radius: var(--r); box-shadow: none; }
.velika-trazilica:focus-within { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-svijetli); }
.velika-trazilica .gumb { background: var(--akcent); border-color: var(--akcent); color: #fff; border-radius: var(--r); }

/* česta pitanja: otvoreno pitanje samo s tankom crtom, bez debelog okvira */
.faq-stavka.otv { box-shadow: none; }
.faq-stavka[open] { border-color: var(--zbuka); }

/* podnožje: ravni kameni blok, bez zaobljenih kutova */
.pod-ploca { border-radius: 0; }

/* nazivi djelatnosti se ne lome usred riječi („Automehaniča / r“) */
.dj-mreza b { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 420px) { .dj-mreza b { font-size: 14.5px; } }

/* najuži mobiteli: mjesta u jednom stupcu, kraći natpis u tražilici */
@media (max-width: 360px) {
  .mj-mreza { grid-template-columns: minmax(0, 1fr); }
  .hv-trazi input::placeholder { font-size: 14px; }
  .mz-tekst small { display: none; }
}

/* popis obrtnika na mobitelu: fotografija rada 4:3 iznad teksta (fotografije prodaju, ne sličica od 70 px) */
@media (max-width: 600px) {
  .kp-mreza, .kp-srednje { gap: 14px; }
  .kp, .kp-malo .kp { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--zbuka); border-radius: var(--r); background: #fff; overflow: hidden; }
  .kp-slika, .kp-slika img { border-radius: 0; }
  .kp-slika { width: 100%; aspect-ratio: 4 / 3; }
  .kp-bez { aspect-ratio: 16 / 7; display: grid; place-items: center; }
  .kp-bez img { width: 72px; height: 72px; object-fit: contain; }
  .kp-tijelo { padding: 14px 16px 16px; }
  .kp .kp-naziv { font-size: 19px; }
  .kp-radnje { justify-content: space-between; }
}
@media (max-width: 760px) {
  .ob4-akcije .ob4-dijeli { width: auto; min-height: 44px; align-self: flex-start; padding: 0 4px; background: none; border: 0; color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
}

/* ================= „KASNIJE“ (10. 11. 2026.) ================= */

/* potpisi fotografija: „Sl. 03 — Kamena ograda, Primošten“ (isti font kao tekst) */
.lightbox figcaption { font: 500 clamp(15px, 1.2vw, 17px)/1.4 var(--font); color: rgba(255,255,255,.92); }
.lb-sl, .rd-sl { font-style: normal; font-family: var(--font); font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* najnoviji radovi na naslovnoj: mreža fotografija istog reza s potpisom ispod */
.sekcija-radovi .sekcija-glava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.sekcija-radovi .podnaslov { margin: 0; color: var(--prigušeno); }
.radovi-mreza { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.radovi-mreza a { display: block; text-decoration: none; color: var(--tinta); }
.rd-slika { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--zbuka); }
.rd-slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.radovi-mreza a:hover .rd-slika img { transform: scale(1.04); }
.rd-potpis { display: block; margin-top: 10px; font: 600 15.5px/1.35 var(--font); letter-spacing: -.005em; }
.rd-sl { color: var(--prigušeno); margin-right: 2px; font-size: 13px; }
.rd-potpis small { display: block; margin-top: 2px; font: 600 13.5px var(--font); color: var(--prigušeno); }
.radovi-mreza a:hover .rd-potpis { color: var(--akcent-tamni); }
@media (max-width: 900px) { .radovi-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .radovi-mreza { grid-template-columns: minmax(0, 1fr); } }

/* tražilica iz dva dijela: „Trebam [što]“ + [mjesto] + Traži, u jednom okviru */
.hv-red { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--tinta); border-radius: var(--r); padding: 6px; }
.hv-red:focus-within { box-shadow: 0 0 0 5px var(--akcent-svijetli); }
.hv-red .hv-polje, .hv-red .hv-polje:focus-within { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 10px 0 14px; border: 0; border-radius: var(--r); background: none; box-shadow: none; }
.hv-gdje { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 14px; border-left: 1px solid var(--zbuka); color: var(--prigušeno); cursor: pointer; }
.hv-gdje .ik { width: 18px; height: 18px; flex: none; }
.hv-gdje select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: 600 16px var(--font); color: var(--tinta); padding: 8px 22px 8px 0; max-width: 12em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23625E57' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.hv-gdje select:focus { outline: none; }
.hv-gdje:focus-within { color: var(--akcent); }
.hv-red .hv-gumb { position: static; flex: none; height: 52px; margin-left: 6px; }
@media (max-width: 640px) {
  .hv-red { flex-wrap: wrap; }
  .hv-red .hv-polje { flex: 1 1 100%; }
  .hv-gdje { flex: 1 1 auto; height: 48px; border-left: 0; border-top: 1px solid var(--zbuka); margin-top: 4px; padding-left: 12px; }
  .hv-gdje select { max-width: none; flex: 1; }
  .hv-red .hv-gumb { height: 48px; margin-top: 4px; }
}

/* zaglavlje: „Prijavite obrt“ je obrubljen gumb; glavna radnja stranice je traženje meštra */
.kap-cta { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); padding-left: 46px; }
.kap-cta:hover { background: var(--tinta); color: #fff; }
.kap-plus { background: var(--kamen); color: var(--tinta); width: 30px; height: 30px; }
.kap-cta:hover .kap-plus { background: rgba(255,255,255,.18); color: #fff; }

/* mozaik u heroju: samo fotografije, bez znaka s inicijalima u kutu */
.hv-znak { display: none; }

/* sitni tekst najmanje 13 px */
.mob-naslov, .faq-oznaka, .pg-nad, .kp-dj, .ob4-cinjenice small, .pod-ploca h2, .b-nadnaslov { font-size: 13px; }
.mob-mjesta a span { font-size: 13px; }

/* dodirni ciljevi na mobitelu najmanje 44 px */
@media (max-width: 760px) {
  .hv-primjeri button { min-height: 44px; padding: 0 14px; }
  .mob-mjesta a { height: 44px; }
}
.jos-mreza small, .pravno-toc summary small { font-size: 13px; }

/* Istaknuti: samo označeni obrti, pa ih može biti 1–5 — raspored se prilagodi broju */
@media (min-width: 1001px) {
  .ist-mozaik.n1 { grid-template-columns: 1fr; grid-template-rows: clamp(300px, 34vw, 480px); }
  .ist-mozaik.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(300px, 32vw, 460px); }
  .ist-mozaik.n1 .mz-velika, .ist-mozaik.n2 .mz-velika { grid-row: auto; }
  .ist-mozaik.n3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ist-mozaik.n4 > .mz:last-child { grid-column: 2 / span 2; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .ist-mozaik.n1, .ist-mozaik.n2 { grid-template-rows: clamp(280px, 52vw, 420px); }
  .ist-mozaik.n2 .mz-velika { grid-column: auto; }
  .ist-mozaik.n1 .mz-velika { grid-column: 1 / -1; }
  .ist-mozaik.n3 { grid-template-rows: clamp(280px, 52vw, 420px) clamp(200px, 34vw, 280px); }
  .ist-mozaik.n4 > .mz:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ist-mozaik.n1 > .mz { flex-basis: 100%; aspect-ratio: 4 / 3; }
}

/* Naslovna, rezultati pretrage: kad je obrta 1–4, velike kartice ispune panel (umjesto sitnih redaka i praznine) */
.hr-popis.hr-velike { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 10px; padding: 12px; overflow: auto; }
.hr-popis.hr-velike.n3, .hr-popis.hr-velike.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-popis.hr-velike.n3 > li:first-child { grid-column: 1 / -1; }
.hr-velike > li { min-height: 0; display: flex; }
.hr-popis.hr-velike a.hr-k { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; border: 1px solid var(--crta); border-radius: var(--r); overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .25s; }
.hr-popis.hr-velike a.hr-k:hover, .hr-popis.hr-velike a.hr-k.aktivno { background: #fff; border-color: #c9c5bd; box-shadow: 0 14px 34px -22px rgba(18,20,23,.5); }
.hr-k-slika { position: relative; flex: 1 1 auto; min-height: 90px; background: var(--kamen); overflow: hidden; }
.hr-k-slika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hr-k-slika img.hr-k-logo { object-fit: contain; padding: 18%; mix-blend-mode: multiply; }
.hr-k:hover .hr-k-slika img { transform: scale(1.04); }
.hr-k-tekst { flex: 0 0 auto; display: grid; gap: 5px; padding: 14px 16px 16px; }
.hr-k-tekst small { font-size: 13px; color: var(--prigušeno); font-weight: 600; }
.hr-k-tekst strong { font: 700 clamp(18px, 1.5vw, 22px)/1.15 var(--font-naslov); letter-spacing: -.02em; color: var(--tinta); }
.hr-k-opis { font-size: 14.5px; line-height: 1.45; color: #4a4e55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-k-usluge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.hr-k-usluge i { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 99px; background: var(--kamen); color: var(--tinta); }
.hr-k-gumb { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--akcent); }
.hr-k-gumb .ik { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hr-k:hover .hr-k-gumb .ik { transform: translateX(3px); }
/* dvije: fotografija lijevo, tekst desno */
.hr-popis.hr-velike.n2 a.hr-k { flex-direction: row; }
.hr-popis.hr-velike.n2 .hr-k-slika { flex: 0 0 44%; }
.hr-popis.hr-velike.n2 .hr-k-tekst { flex: 1 1 auto; align-content: center; }
/* tri i četiri: manje kartice, bez usluga, opis u jednom retku */
.hr-velike.n3 > li:not(:first-child) .hr-k-usluge, .hr-velike.n4 .hr-k-usluge { display: none; }
.hr-velike.n4 .hr-k-opis, .hr-velike.n3 > li:not(:first-child) .hr-k-opis { -webkit-line-clamp: 1; }
.hr-velike.n4 .hr-k-tekst, .hr-velike.n3 > li:not(:first-child) .hr-k-tekst { padding: 10px 12px 12px; gap: 3px; }
.hr-velike.n4 .hr-k-tekst strong, .hr-velike.n3 > li:not(:first-child) .hr-k-tekst strong { font-size: 17px; }
/* mobitel / uski: panel nema stalnu visinu, kartice jedna ispod druge */
@media (max-width: 900px) {
  .hr-popis.hr-velike, .hr-popis.hr-velike.n3, .hr-popis.hr-velike.n4 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hr-popis.hr-velike.n3 > li:first-child { grid-column: auto; }
  .hr-k-slika { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .hr-popis.hr-velike.n2 a.hr-k { flex-direction: column; }
  .hr-popis.hr-velike.n2 .hr-k-slika { flex: 0 0 auto; }
  .hr-velike > li { display: block; min-height: auto; }
  .hr-popis.hr-velike a.hr-k { min-height: auto; height: 100%; }
  /* tri i četiri na mobitelu: kompaktni retci, fotografija lijevo */
  .hr-popis.hr-velike.n3 a.hr-k, .hr-popis.hr-velike.n4 a.hr-k { flex-direction: row; }
  .hr-velike.n3 .hr-k-slika, .hr-velike.n4 .hr-k-slika { flex: 0 0 34%; aspect-ratio: auto; min-height: 104px; }
  .hr-velike.n3 .hr-k-tekst, .hr-velike.n4 .hr-k-tekst { flex: 1 1 auto; padding: 10px 12px 12px; gap: 3px; min-width: 0; }
  .hr-velike.n3 .hr-k-usluge { display: none; }
  .hr-velike.n3 .hr-k-opis, .hr-velike.n4 .hr-k-opis { -webkit-line-clamp: 2; font-size: 13.5px; }
  .hr-velike.n3 .hr-k-tekst strong, .hr-velike.n4 .hr-k-tekst strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .hr-k-slika img, .hr-k-gumb .ik { transition: none; } }

/* Galerija u vrhu stranice obrta: redovi po stvarnom omjeru fotki (vodoravna ostaje vodoravna, okomita okomita).
   Raspored (koliko fotki, gdje novi red) računa lib/views.js → rasporedVrha(); omjer svake fotke je --ar. */
.ob4-film.ob4-redovi { display: flex; flex-wrap: wrap; gap: 8px; aspect-ratio: auto; }
.ob4-film.ob4-redovi > li:not(.ob4-izvan) { display: block; flex: var(--ar) 1 0%; aspect-ratio: var(--ar); min-width: 0; }
.ob4-film.ob4-redovi > li.ob4-prijelom { flex: 0 0 100%; height: 0; aspect-ratio: auto; margin-top: -8px; }
.ob4-film.ob4-redovi > li.ob4-izvan { display: none; }
/* „Sve fotografije“ gore desno na glavnoj fotki (dolje bi pokrio male fotke u drugom redu) */
@media (min-width: 901px) { .ob4-film-okvir:has(.ob4-redovi) > .ob4-sve { left: auto; right: 12px; bottom: auto; top: 12px; } }
/* samo jedna fotka: okomita ne smije biti viša od ekrana, pa je uža i centrirana */
.ob4-film.ob4-redovi > li:only-child { flex: 0 1 auto; width: min(100%, calc(var(--ar) * min(78vh, 720px))); margin: 0 auto; }
@media (max-width: 900px) {
  /* klizač: sve fotke iste visine, svaka u svom omjeru; sljedeća viri s desne strane */
  .ob4-film.ob4-redovi { flex-wrap: nowrap; }
  .ob4-film.ob4-redovi > li:not(.ob4-izvan), .ob4-film.ob4-redovi > li.ob4-izvan { display: block; flex: 0 0 auto; height: clamp(220px, 58vw, 440px); aspect-ratio: var(--ar); max-width: 88%; }
  .ob4-film.ob4-redovi > li.ob4-prijelom { display: none; }
  .ob4-film.ob4-redovi > li:only-child { flex: 0 0 auto; width: min(100%, calc(var(--ar) * 70vh)); max-width: 100%; height: auto; margin: 0 auto; }
}

/* ======================================================================
   SUSTAV (redizajn 10. 11. 2026.): jedan oblik, dvije vrste gumba, jedna boja radnje
   Zaobljenje: --r (6 px) za sve plohe i fotke, 999 px samo za male oznake.
   ====================================================================== */
.gumb { min-height: 48px; padding: 0 20px; border-radius: var(--r); border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font-weight: 650; font-size: 15.5px; letter-spacing: -.005em; }
.gumb:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.gumb-obrub, .ob4 .gumb-obrub { background: transparent; border-color: rgba(18,20,23,.28); color: var(--tinta); }
.gumb-obrub:hover, .ob4 .gumb-obrub:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.gumb-akcent, .str-obrt .gumb-akcent, .poziv-traka .gumb-akcent, .ob4 .gumb-akcent { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.gumb-akcent:hover, .str-obrt .gumb-akcent:hover, .poziv-traka .gumb-akcent:hover, .ob4 .gumb-akcent:hover { background: var(--akcent-tamni); border-color: var(--akcent-tamni); color: #fff; }
/* WhatsApp: sporedna radnja, obrub i zelena ikona (zelena se ne natječe s plavom) */
.gumb-wa, .ob4 .gumb-wa { background: transparent; border-color: rgba(18,20,23,.28); color: var(--tinta); }
.gumb-wa .ik { color: #12893f; }
.gumb-wa:hover, .ob4 .gumb-wa:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.gumb-wa:hover .ik { color: #4fd17f; }
/* na tamnoj plohi (ploča „Imate obrt?“, kontakt kartica) */
.gumb-svijetli { background: #fff; border-color: #fff; color: var(--more, #0a2f4f); }
.gumb-svijetli:hover { background: transparent; border-color: #fff; color: #fff; }
.gumb-prozirni, .gumb-bijeli, .kontakt-kartica .gumb-obrub { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gumb-prozirni:hover, .gumb-bijeli:hover, .kontakt-kartica .gumb-obrub:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.gumb:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }
/* oznake i placeholderi: dovoljan kontrast */
::placeholder { color: #75716a; opacity: 1; }
.pr-polje input::placeholder, .pr-polje textarea::placeholder, #vt-unos::placeholder { color: #75716a; }
::selection { background: #cfe0f3; color: var(--tinta); }
/* inicijali obrta: tinta na kamenu, bez boje obrta */
.ob4-logo.ob4-ini, .ob4-ini { background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px var(--zbuka); font-family: var(--font-naslov); }
.ob4-k-ini { background: var(--kamen); color: var(--tinta); }
/* podnožje: nadnaslovi stupaca dovoljno svijetli na dubokom moru */
.pod-ploca h2 { color: rgba(244,241,234,.66); }
/* ploča „Imate obrt?“: umjesto kolaža fotki mirne brojke, urezane kao u kamen */
.b-brojke { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); align-content: center; }
.b-brojke li { display: flex; align-items: baseline; gap: 14px; padding-bottom: clamp(12px, 1.6vw, 18px); border-bottom: 1px solid rgba(244,241,234,.18); }
.b-brojke li:last-child { border-bottom: 0; padding-bottom: 0; }
.b-brojke b { font: 800 clamp(56px, 7vw, 104px)/.9 var(--font-naslov); letter-spacing: -.045em; color: #F4F1EA; font-variant-numeric: tabular-nums; min-width: 1.4ch; }
.b-brojke span { font: 600 clamp(15px, 1.3vw, 18px)/1.2 var(--font); color: rgba(244,241,234,.78); }
/* podatak ispod naslova (umjesto nadnaslova iznad) */
.pg-meta { margin: 10px 0 0; font: 600 15px var(--font); color: var(--prigušeno); }
.ob4-c-usluge b { font-weight: 550; max-width: 28ch; }
/* ploča: bez druge plave; isticanje je bijela podcrta, kvačice u boji vapnenca */
.banner .podcrtano { color: #fff; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .14em; text-decoration-color: rgba(244,241,234,.45); }
.b-prednosti li i { background: rgba(244,241,234,.1); color: #F4F1EA; }
@media (max-width: 1000px) { .b-brojke { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .b-brojke li { flex-direction: column; gap: 4px; border-bottom: 0; border-left: 1px solid rgba(244,241,234,.18); padding: 0 0 0 12px; } .b-brojke li:first-child { border-left: 0; padding-left: 0; } }

/* ---------- naslovna: mirni podatak ispod uvoda (umjesto nadnaslova iznad naslova) */
.hv-meta { margin: 14px 0 0; font: 600 14.5px var(--font); color: var(--prigušeno); letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* ---------- KATALOG djelatnosti i mjesta: kazalo kao u muzejskom katalogu, s klesarskim znakovima */
.katalog .kt-glava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.katalog .kt-glava h2 { margin: 0; }
.katalog .kt-glava .podnaslov { margin: 0; color: var(--prigušeno); max-width: 46ch; }
.kt-stupci { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.kt-stupci h3 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1.5px solid var(--tinta); font: 700 13px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
.kt-stupci ul { list-style: none; margin: 0; padding: 0; }
.kt-dj ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); }
.kt-stupci li { border-bottom: 1px solid var(--zbuka); min-width: 0; }
.kt-stupci a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 2px; color: var(--tinta); text-decoration: none; font: 650 clamp(17px, 1.35vw, 20px)/1.15 var(--font-naslov); letter-spacing: -.015em; transition: color .2s; }
.kt-stupci a span { min-width: 0; overflow-wrap: anywhere; }
.kt-znak { flex: none; width: 34px; height: 34px; stroke-width: 2.4; }
.kt-znak .z-t { stroke: var(--tinta); }
.kt-znak .z-p { stroke: var(--akcent); }
img.kt-znak { object-fit: contain; }
.kt-mj a { justify-content: space-between; }
.kt-mj small { font: 600 14px var(--font); color: var(--prigušeno); font-variant-numeric: tabular-nums; }
.kt-stupci a:hover, .kt-stupci a:focus-visible { color: var(--akcent); }
.kt-stupci a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: var(--r); }
/* potpis Winkle: kad prijeđete preko djelatnosti, znak se ponovno „ureže“ dlijetom */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kt-dj a:hover .z-t, .kt-dj a:hover .z-p { stroke-dasharray: 1; animation: urezi .55s cubic-bezier(.65, 0, .35, 1) both; }
  .kt-dj a:hover .z-p { animation-delay: .32s; }
}
@keyframes urezi { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 1100px) { .kt-dj ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .kt-stupci { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .kt-dj ul { grid-template-columns: minmax(0, 1fr); } .kt-stupci a { min-height: 54px; } }
.kt-stupci { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.kt-mj ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); }
.kt-mj a { font-weight: 600; }
@media (max-width: 1100px) { .kt-mj ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kt-mj ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- KARTICA OBRTA u popisima (kp2): bez kutije, fotografija + potpis na kamenu; cijela kartica je poveznica */
.kp-mreza { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.kp-mreza .kp.kp2 { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; min-height: 0; grid-template-columns: none; }
.kp-mreza .kp.kp2 .kp-slika { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--zbuka); }
.kp-mreza .kp.kp2 .kp-slika > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.kp-mreza .kp.kp2 .kp-bez { background: #fff; box-shadow: inset 0 0 0 1px var(--zbuka); }
.kp-znak { width: 30%; max-width: 120px; height: auto; stroke-width: 2.4; }
.kp-znak .z-t { stroke: var(--tinta); } .kp-znak .z-p { stroke: var(--akcent); }
.kp-mreza .kp.kp2 .kp-tijelo { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 0; }
.kp-mreza .kp.kp2 .kp-naziv { margin: 0; font: 700 clamp(19px, 1.5vw, 22px)/1.15 var(--font-naslov); letter-spacing: -.02em; }
.kp-mreza .kp.kp2 .kp-naziv a { color: var(--tinta); text-decoration: none; }
.kp-mreza .kp.kp2 .kp-naziv a::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* cijela kartica vodi na obrt */
.kp-gdje { margin: 0; font: 600 14.5px var(--font); color: var(--prigušeno); }
.kp-mreza .kp.kp2 .kp-opis { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: #45484e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-mreza .kp.kp2 .kp-radnje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--zbuka); }
.kp-mreza .kp.kp2 .kp-zovi { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--tinta); font: 650 15px var(--font); font-variant-numeric: tabular-nums; text-decoration: none; }
.kp-mreza .kp.kp2 .kp-zovi .ik { width: 17px; height: 17px; color: var(--akcent); }
.kp-mreza .kp.kp2 .kp-zovi:hover, .kp-mreza .kp.kp2 .kp-zovi:focus-visible { color: var(--akcent); }
.kp-mreza .kp.kp2 .kp-zovi span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.kp-mreza .kp.kp2 .kp-zovi:hover span { text-decoration-color: currentColor; }
.kp-vise { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px var(--font); color: var(--prigušeno); transition: color .2s; }
.kp-vise .ik { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.kp-mreza .kp.kp2:hover .kp-slika > img { transform: scale(1.035); }
.kp-mreza .kp.kp2:hover .kp-vise { color: var(--tinta); }
.kp-mreza .kp.kp2:hover .kp-vise .ik { transform: translateX(3px); }
.kp-mreza .kp.kp2:has(.kp-naziv a:focus-visible) .kp-slika { outline: 3px solid var(--akcent); outline-offset: 3px; }
.kp-mreza .kp.kp2 .kp-naziv a:focus-visible { outline: none; }
/* jedan obrt: izdvojeni prikaz (fotografija 7 / tekst 5 stupaca), ne jedna kartica nasukana u praznoj mreži */
@media (min-width: 761px) {
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) .kp.kp2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) .kp.kp2 .kp-tijelo { padding: 0; }
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) .kp.kp2 .kp-naziv { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; }
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) .kp.kp2 .kp-gdje { font-size: 16px; }
  .kp-mreza.kp-malo:not(:has(> .kp:not([hidden]) ~ .kp:not([hidden]))) .kp.kp2 .kp-opis { -webkit-line-clamp: 5; font-size: 17px; max-width: 42ch; }
  /* dva obrta: dvije velike kartice jedna uz drugu */
  .kp-mreza.kp-malo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* zaglavlje djelatnosti: klesarski znak umjesto 3D ikone */
.pg-ikona.pg-znak { flex: none; display: grid; place-items: center; width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); padding: 0; background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--zbuka); }
.pg-znak-svg { width: 62%; height: 62%; stroke-width: 2.4; }
.pg-znak-svg .z-t { stroke: var(--tinta); } .pg-znak-svg .z-p { stroke: var(--akcent); }
@media (prefers-reduced-motion: no-preference) { .pg-znak-svg .z-t, .pg-znak-svg .z-p { stroke-dasharray: 1; animation: urezi .9s cubic-bezier(.65, 0, .35, 1) .15s both; } .pg-znak-svg .z-p { animation-delay: .7s; } }
.sekcija-ostalo.katalog { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--zbuka); }
.sekcija-ostalo .kt-glava { align-items: center; }
/* stranica obrta na mobitelu: prvo radovi (klizač), zatim ime i kontakt; Nazovi je i u traci pri dnu */
@media (max-width: 900px) {
  .ob4-hero-red > .ob4-film-okvir { order: -1; margin-bottom: 4px; }
}

/* ======================================================================
   FAZA 4: tipografska skala, koraci, pitanja, zaglavlje, podnožje
   ====================================================================== */
/* skala: veliki zbijeni naslovi, mirni sitni podaci, ništa između */
.hv h1 { font-size: clamp(46px, 7vw, 96px); line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.sekcija h2, .banner h2, .katalog .kt-glava h2, .sekcija-glava h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.popis-glava h1, .ob4-id h1 { letter-spacing: -.045em; text-wrap: balance; }
.hv-opis, .podnaslov, .hero-podnaslov { text-wrap: pretty; }

/* „Kako radi“: urezani znakovi koraka umjesto velikih plavih brojeva */
.kr-br { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font: 700 13px var(--font); color: var(--prigušeno); letter-spacing: .08em; }
.kr-znak { width: clamp(40px, 3.6vw, 52px); height: auto; stroke-width: 2.4; }
.kr-znak .z-t { stroke: var(--tinta); } .kr-znak .z-p { stroke: var(--akcent); }
.kr-br small { font: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .kr-koraci li:hover .z-t, .kr-koraci li:hover .z-p { stroke-dasharray: 1; animation: urezi .55s cubic-bezier(.65, 0, .35, 1) both; }
  .kr-koraci li:hover .z-p { animation-delay: .3s; }
}

/* česta pitanja: crtani redovi na kamenu umjesto bijelih kutija */
.faq-lista { gap: 0; }
.faq-stavka, .faq-stavka.otv, .faq-stavka[open] { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--zbuka); box-shadow: none; }
.faq-stavka:last-child { border-bottom: 1px solid var(--zbuka); }
.faq-stavka summary { padding-left: 0; padding-right: 0; }
.faq-stavka summary:hover span { color: var(--akcent); }

/* zaglavlje: „Prijavite obrt“ tiši od navigacije (vidi .kapsula-desno .kap-cta niže) */

/* podnožje: niže, friz od znakova djelatnosti koje su na stranici */
.pod-ploca { padding-top: clamp(48px, 6vw, 88px); }
.pod-rijec { display: none; }
.pod-friz { justify-content: flex-start; gap: clamp(18px, 2.6vw, 36px); margin-top: clamp(32px, 4vw, 48px); }
.pod-friz li { display: block; }
.friz-znak { width: 34px; height: 34px; stroke-width: 2.2; }
.friz-znak .z-t { stroke: rgba(244,241,234,.55); } .friz-znak .z-p { stroke: #7DB4EA; }
.pod-dno { margin-top: clamp(20px, 2.6vw, 32px); }
.pod-ploca .winkla { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(244,241,234,.35); text-underline-offset: 4px; }
.pod-ploca .winkla:hover { text-decoration-color: #fff; }
.kapsula-desno .kap-cta { border-color: transparent; background: none; box-shadow: none; color: var(--tinta); }
/* zaglavlje: svi hoveri isti (tiha siva podloga, tekst ostaje taman), isti oblik */
.nav-link, .kap-ikona, .kapsula-desno .kap-cta { border-radius: var(--r); transition: background .2s, color .2s; }
.nav-link:hover, .nav-stavka.otvoren .nav-link, .nav-link:focus-visible,
.kap-ikona:hover, .kap-ikona[aria-expanded="true"],
.kapsula-desno .kap-cta:hover, .kapsula-desno .kap-cta:focus-visible { background: rgba(18,20,23,.07); color: var(--tinta); }
.kapsula-desno .kap-cta .kap-plus { background: var(--tinta); color: #fff; transition: transform .3s var(--ease); }
.kapsula-desno .kap-cta:hover .kap-plus { background: var(--akcent); color: #fff; transform: rotate(90deg); }
.nav-link:focus-visible, .kap-ikona:focus-visible, .kapsula-desno .kap-cta:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kapsula-desno .kap-cta:hover .kap-plus { transform: none; } }
@media (min-width: 1001px) { .pod-stupci { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .pod-stupci > nav:first-child { grid-column: auto; } .pod-stupci > nav:first-child ul { columns: 2; column-gap: 28px; } .pod-stupci > nav:first-child li { break-inside: avoid; } }

.pod-kontakt-gumb { border-radius: var(--r); }