@font-face { font-family: 'Bricolage Grotesque'; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
/* WinklaMajstor — 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+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@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+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-display: swap; src: url('/fonts/unbounded-600-latin.woff2') format('woff2'); }

: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: #e0531f;
  --akcent-tamni: #b83f12;
  --akcent-svijetli: #fdebe2;
  --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: 85rem;
  --rub: clamp(1rem, 4vw, 4rem);
  --radius: 1.375rem;
  --radius-malo: 0.875rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --zaglavlje: 5.75rem;   /* visina lebdeće kapsule + razmak (za skrolanje na sidra) */
}

*, *::before, *::after { box-sizing: border-box; }
/* Root veličina (Winkla responzivnost): 16 px normalno, uski preklopni mobiteli malo manje, na 4K blago raste. Sve mjere su u rem. */
html { font-size: 100%; }
@media (max-width: 359px) { html { font-size: 87.5%; } }
/* stranica već ima svoja pravila za 1600/1920/2400 px; root raste tek na 4K, inače bi se povećanje zbrajalo */
@media (min-width: 2600px) { html { font-size: clamp(16px, calc(16px + (min(100vw, 177.78vh) - 2560px) * .0075), 24px); } }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--zaglavlje) + 1rem); }
html.bez-skrola { overflow: hidden; }
body { margin: 0; background: var(--pozadina); color: var(--tinta); font: 1.0625rem/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: 0.1875rem; }
.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: 1rem; top: -3.75rem; z-index: 100; background: var(--tinta); color: #fff; padding: 0.625rem 1rem; border-radius: 62.4375rem; text-decoration: none; }
.preskoci:focus { top: 0.75rem; }
.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: 2.875rem; padding: 0 1.375rem; border-radius: 62.4375rem; border: 1.5px solid var(--tinta); background: var(--tinta); color: #fff; font-weight: 600; font-size: 0.96875rem; 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: color-mix(in srgb, var(--obrt) 84%, #000); border-color: color-mix(in srgb, var(--obrt) 84%, #000); color: #fff; }
.gumb-akcent:active { transform: scale(.97); }
.gumb-bijeli { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); }
.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(0.25rem); }

/* ---------- ZAGLAVLJE: lebdeća kapsula */
.zaglavlje { position: sticky; top: 0; z-index: 50; padding: 0.75rem 0 0; pointer-events: none; }
.zaglavlje > .okvir { position: relative; }
.kapsula { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; height: 4.25rem; padding: 0 0.625rem 0 1.25rem; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(1.125rem); -webkit-backdrop-filter: saturate(1.6) blur(1.125rem); border: 1px solid rgba(18,20,23,.07); border-radius: 62.4375rem;
  box-shadow: 0 1px 2px rgba(18,20,23,.04), 0 0.625rem 1.875rem -1.125rem rgba(18,20,23,.25); transition: height .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.zaglavlje.skrolano .kapsula { background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 1.125rem 2.5rem -1.125rem rgba(18,20,23,.32); }
/* logo: jedna slika — 3D oblačić + „majstor“ (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: 3.5rem; width: auto; margin: -0.375rem 0 -0.375rem 0.125rem; 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: 0.25rem; height: 2.625rem; padding: 0 1rem; border: 0; border-radius: 62.4375rem; background: none; font: 550 0.96875rem 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: 1rem; height: 1rem; 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: 0.5rem; flex: none; }
.kap-ikona { width: 2.875rem; height: 2.875rem; 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: 1.25rem; height: 1.25rem; stroke-width: 2; }
.kap-cta { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.375rem 0 3.25rem; border-radius: 62.4375rem; background: var(--akcent); color: #fff; font-weight: 650; font-size: 0.96875rem; text-decoration: none; white-space: nowrap; transition: background .25s, transform .25s var(--ease); }
.kap-cta img { position: absolute; left: 0.25rem; top: 50%; width: 2.875rem; height: 2.875rem; transform: translateY(-58%) rotate(-8deg); filter: drop-shadow(0 0.375rem 0.375rem 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: 2.875rem; height: 2.875rem; border-radius: 50%; border: 0; background: var(--tinta); position: relative; }
.burger span { position: absolute; left: 0.875rem; right: 0.875rem; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 1.125rem; } .burger span:last-child { top: 1.625rem; }
.burger[aria-expanded="true"] span:first-child { top: 1.375rem; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 1.375rem; transform: rotate(-45deg); }

/* padajući izbornici */
.mega { pointer-events: auto; position: absolute; top: calc(100% + 0.625rem); left: var(--rub); right: var(--rub); background: #fff; border: 1px solid rgba(18,20,23,.07); border-radius: 1.75rem; padding: 1.125rem; box-shadow: 0 1.875rem 4.375rem -1.875rem rgba(18,20,23,.4); transform-origin: top center; animation: spusti .18s cubic-bezier(.23, 1, .32, 1) both; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -0.875rem; height: 0.875rem; } /* most da miš ne „ispadne“ */
@keyframes spusti { from { opacity: 0; transform: translateY(-0.25rem) scale(.985); } }
.mega-plocice { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.625rem; }
.mega-plocica { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 7.5rem; padding: 0.875rem; border-radius: 1.25rem; background: var(--pozadina-kruga); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .3s var(--ease); }
.mega-plocica img { position: absolute; right: -0.25rem; bottom: -0.375rem; width: 5.25rem; height: 5.25rem; z-index: -1; transition: transform .45s var(--ease); }
.mega-plocica:hover { transform: translateY(-0.1875rem); }
.mega-plocica:hover img { transform: scale(1.06); }
.mega-plocica b { display: block; font: 650 0.9375rem/1.15 var(--font-naslov); }
.mega-plocica small { font-size: 0.78125rem; color: var(--prigušeno); }
.mega-dno { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.875rem; padding: 0.25rem 0.375rem 0; font-size: 0.90625rem; color: var(--prigušeno); }
.mega-dno .poveznica { color: var(--tinta); }
.mega-uska { left: auto; right: auto; width: min(32.5rem, calc(100% - 2 * var(--rub))); }
.mega-mjesta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0.5rem; }
.mega-mjesta a { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; text-decoration: none; font-weight: 550; transition: background .2s; }
.mega-mjesta a:hover { background: var(--kamen); }
.mega-mjesta small { margin-left: auto; font-size: 0.78125rem; font-weight: 700; color: var(--prigušeno); background: var(--kamen); border-radius: 62.4375rem; padding: 1px 0.5rem; }
.mega-mjesta a:hover small { background: #fff; }
.mj-ik { width: 2.125rem; height: 2.125rem; border-radius: 0.75rem; display: grid; place-items: center; background: var(--akcent-svijetli); color: var(--akcent-tamni); }
.mj-ik .ik { width: 1.125rem; height: 1.125rem; }

/* tražilica ispod kapsule */
.h-trazilica { pointer-events: auto; position: absolute; top: calc(100% + 0.625rem); right: var(--rub); width: min(38.75rem, 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: 1.375rem; box-shadow: 0 1.875rem 4.375rem -1.875rem rgba(18,20,23,.45); }
.mala-trazilica > .ik { position: absolute; left: 1.25rem; width: 1.375rem; height: 1.375rem; color: var(--prigušeno); pointer-events: none; }
.mala-trazilica input { width: 100%; height: 4rem; padding: 0 4.375rem 0 3.375rem; border: 0; border-radius: 1.375rem; background: transparent; font: inherit; font-size: 1.0625rem; color: inherit; }
.mala-trazilica input:focus { outline: none; }
.mala-trazilica kbd { position: absolute; right: 1.125rem; font: 600 0.75rem var(--font); color: var(--prigušeno); background: var(--kamen); border-radius: 0.375rem; padding: 0.1875rem 0.4375rem; }
.mala-trazilica .padajuci { position: static; border: 0; border-top: 1px solid var(--crta); border-radius: 0 0 1.375rem 1.375rem; box-shadow: none; }
.mala-trazilica:has(.padajuci:not([hidden])) input { border-radius: 1.375rem 1.375rem 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: calc(5.75rem + var(--pomak, 0px)) var(--rub) calc(1.75rem + 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 1.75rem 1.75rem); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mob-ulaz { from { opacity: 0; transform: translateY(0.875rem); } }
.mob-unutra { display: flex; flex-direction: column; gap: 0.75rem; max-width: 35rem; 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: 1.125rem; width: 1.25rem; height: 1.25rem; color: var(--prigušeno); pointer-events: none; }
.mob-trazi input { width: 100%; height: 3.625rem; border-radius: 62.4375rem; border: 1px solid rgba(18,20,23,.06); background: #fff; padding: 0 4rem 0 3rem; font: inherit; font-size: 1rem; box-shadow: 0 0.75rem 1.875rem -1.125rem rgba(18,20,23,.35); }
.mob-trazi input:focus { outline: 2px solid var(--akcent); outline-offset: 1px; }
.mob-trazi button { position: absolute; right: 0.375rem; width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 0; background: var(--akcent); color: #fff; display: grid; place-items: center; }
.mob-trazi button .ik { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
/* blokovi */
.mob-blok { background: #fff; border-radius: 1.625rem; padding: 1rem 0.75rem 0.75rem; box-shadow: 0 1px 2px rgba(18,20,23,.04); }
.mob-red { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0.375rem 0.75rem; }
.mob-naslov { margin: 0; font: 700 0.75rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); }
.mob-red a { font-size: 0.875rem; font-weight: 600; color: var(--akcent-tamni); text-decoration: none; }
.mob-mreza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.mob-plocica { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.5rem 0.25rem 0.625rem; border-radius: 1.125rem; background: #f1efeb; text-decoration: none; text-align: center; transition: transform .2s var(--ease); }
.mob-plocica:active { transform: scale(.96); }
.mob-plocica img { width: 3.875rem; height: 3.875rem; }
.mob-plocica b { font: 650 0.78125rem/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: 0.4375rem; right: 0.5rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 62.4375rem; background: #fff; font: 700 0.6875rem/1.25rem var(--font); color: var(--prigušeno); }
.mob-mjesta { display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; margin: 0 -0.75rem; padding: 0 0.75rem 0.25rem; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 0.75rem; }
.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: 0.4375rem; height: 2.5rem; padding: 0 0.875rem; border-radius: 62.4375rem; background: #f1efeb; text-decoration: none; font-weight: 600; font-size: 0.90625rem; white-space: nowrap; }
.mob-mjesta a span { font-size: 0.71875rem; font-weight: 700; color: var(--prigušeno); background: #fff; border-radius: 62.4375rem; padding: 1px 0.4375rem; }
/* glavni linkovi */
.mob-linkovi { display: flex; flex-direction: column; background: #fff; border-radius: 1.625rem; padding: 0.25rem 1rem; }
.mob-linkovi a { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 0; font: 700 1.4375rem/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 0.75rem var(--font); letter-spacing: 0; color: var(--akcent-tamni); width: 1.125rem; }
.mob-linkovi i { margin-left: auto; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: #f1efeb; display: grid; place-items: center; }
.mob-linkovi i .ik { width: 1rem; height: 1rem; }
/* poziv obrtnicima */
.mob-cta { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0.875rem 0.875rem 0.625rem; border-radius: 1.625rem; background: var(--tinta); color: #fff; text-decoration: none; overflow: hidden; }
.mob-cta img { width: 4rem; height: 4rem; flex: none; }
.mob-cta b { display: block; font: 700 1.1875rem/1.1 var(--font-naslov); letter-spacing: -.03em; }
.mob-cta small { display: block; margin-top: 0.1875rem; font-size: 0.8125rem; line-height: 1.35; color: rgba(255,255,255,.7); }
.mob-cta i { margin-left: auto; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--akcent); display: grid; place-items: center; }
.mob-cta i .ik { width: 1.125rem; height: 1.125rem; 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: 0.875rem; padding: 0.5rem 0.625rem; border-radius: 0.75rem; 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: 3rem; height: 3rem; border-radius: 0.625rem; 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: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-str { color: var(--prigušeno); opacity: 0; transform: translateX(-0.25rem); 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: 0.875rem 0.75rem; color: var(--prigušeno); }

/* ---------- naslovna: traka za pretragu + bento kartice */
.hero { padding: clamp(1.75rem, 4vw, 3.5rem) 0 clamp(1.5rem, 4vw, 3.5rem); }
.nadnaslov { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 600; letter-spacing: .02em; color: var(--prigušeno); margin-bottom: 1.125rem; }
.hero-podnaslov { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--prigušeno); max-width: 34em; text-wrap: pretty; }

.traka { position: relative; z-index: 20; display: flex; align-items: center; max-width: 61.25rem; margin: 0 auto clamp(1.25rem, 2.4vw, 2rem); background: #fff; border: 1px solid var(--crta); border-radius: 62.4375rem; padding: 0.5rem 0.5rem 0.5rem 0.625rem; box-shadow: 0 1rem 2.75rem -1.5rem rgba(18,20,23,.3); transition: box-shadow .25s, border-color .25s; }
.traka:focus-within { border-color: #cfcac2; box-shadow: 0 0 0 0.3125rem var(--akcent-svijetli), 0 1rem 2.75rem -1.5rem rgba(18,20,23,.3); }
.traka-polje { display: flex; flex-direction: column; justify-content: center; padding: 0.25rem 1.375rem; min-width: 0; cursor: text; }
.traka-polje + .traka-polje { border-left: 1px solid var(--crta); }
.traka-polje > span { font-size: 0.8125rem; font-weight: 700; letter-spacing: .01em; }
.traka-polje input, .traka-polje select { border: 0; padding: 2px 0 0; background: none; font: inherit; font-size: 1rem; 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: 1.375rem; }
.traka-gumb { flex: none; display: inline-flex; align-items: center; gap: 0.75rem; height: 3.5rem; padding: 0 0.5rem 0 1.5rem; border: 0; border-radius: 62.4375rem; background: var(--akcent); color: #fff; font-weight: 650; font-size: 1rem; transition: background .25s; }
.traka-gumb .ik { width: 2.5rem; height: 2.5rem; padding: 0.625rem; border-radius: 50%; background: #fff; color: var(--akcent-tamni); stroke-width: 2.2; }
.traka-gumb:hover { background: var(--akcent-tamni); }

/* uvod iznad tražilice */
.hero-uvod { text-align: center; margin: 0 auto clamp(1.125rem, 2.4vw, 1.875rem); }
.hero-uvod .nadnaslov { margin-bottom: 0.875rem; }
.hero-uvod h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); 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(12.5rem, 15.625rem) minmax(0, 1fr) minmax(12.5rem, 15.625rem); gap: 1.75rem; align-items: center; margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.scena-kuca { position: relative; max-width: 48.75rem; 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: 0.625rem; position: relative; z-index: 2; }
.hk { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; background: #fff; border: 1px solid var(--crta); border-radius: 1rem; 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: 3.125rem; height: 3.125rem; border-radius: 0.6875rem; 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 0.96875rem var(--font-naslov); letter-spacing: -.01em; }
.hk-tekst small { color: var(--prigušeno); font-size: 0.78125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-str { width: 1rem; height: 1rem; 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 0.625rem 1.625rem -0.875rem rgba(224,83,31,.55); transform: translateX(var(--pomak, 0)); }
.lijevo .hk { --pomak: 0.25rem; } .desno .hk { --pomak: -0.25rem; }
.hk:hover .hk-str, .hk.aktivna .hk-str { opacity: 1; color: var(--akcent-tamni); }
/* točke */
.ht { position: absolute; width: 1.375rem; height: 1.375rem; margin: -0.6875rem 0 0 -0.6875rem; border-radius: 50%; background: var(--akcent); border: 0.1875rem solid #fff; box-shadow: 0 2px 0.5rem 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 0.6875rem var(--font); }
.ht::after { content: ''; position: absolute; inset: -0.5625rem; 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% + 0.625rem); left: 0; right: 0; display: flex; flex-direction: column; max-height: min(60vh, 35rem); background: #fff; border: 1px solid var(--crta); border-radius: var(--radius); box-shadow: 0 1.875rem 4.375rem -1.875rem 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: 0.875rem 1.25rem; border-bottom: 1px solid var(--crta); font-size: 0.875rem; color: var(--prigušeno); font-weight: 600; }
.hr-ocisti { border: 0; background: none; font-size: 0.875rem; color: var(--tinta); text-decoration: underline; text-underline-offset: 0.1875rem; }
.hr-popis { flex: 1; overflow: auto; padding: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0.5rem; align-content: start; }
.hr-popis .r-slika { width: 3.5rem; height: 3.5rem; }
.hr-popis .r-nema, .hr-popis li:has(.r-svi) { grid-column: 1 / -1; }
@keyframes pojava { from { opacity: 0; transform: translateY(0.625rem); } }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 14.75rem 14.75rem 13.5rem; gap: clamp(0.75rem, 1.4vw, 1.25rem);
  grid-template-areas: "a a b c" "a a d c" "e f d c"; }
.b-kartica { position: relative; overflow: hidden; border-radius: 1.625rem; 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: 1.125rem; left: 1.125rem; right: 4.375rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.b-cip { padding: 0.375rem 0.8125rem; border-radius: 62.4375rem; background: rgba(255,255,255,.92); color: var(--tinta); font-size: 0.84375rem; font-weight: 600; backdrop-filter: blur(0.375rem); }
.b-strelica { position: absolute; top: 1rem; right: 1rem; width: 2.875rem; height: 2.875rem; 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: 1.25rem; height: 1.25rem; 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(1.5rem, 3vw, 2.5rem); max-width: 40rem; }
.b-glavna h1 { font-size: clamp(2.375rem, 4.6vw, 4.25rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.b-glavna p { margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.15625rem); color: rgba(255,255,255,.85); max-width: 32em; }
.b-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.625rem; }
.b-potpis { font-size: 0.84375rem; 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: 1.375rem; }
.b-kat1 { grid-area: b; } .b-kat2 { grid-area: e; }
.b-kat-naziv { font: 700 clamp(1.375rem, 2vw, 1.75rem)/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: 1.5rem; transition: opacity .6s; }
.b-ist-tekst.mijenja, #b-ist-oznake.mijenja { opacity: 0; }
#b-ist-oznake { transition: opacity .6s; }
.b-nadnaslov { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.b-istaknut h2 { margin-top: 0.375rem; font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 750; letter-spacing: -.035em; }
.b-istaknut p:not(.b-nadnaslov) { margin: 0.625rem 0 1.25rem; font-size: 0.9375rem; color: rgba(255,255,255,.82); }
.b-tocke { position: absolute; top: 4.75rem; left: 1.5rem; display: flex; gap: 0.375rem; }
.b-tocke i { width: 1.125rem; height: 0.1875rem; border-radius: 2px; background: rgba(255,255,255,.4); transition: background .3s, width .3s; }
.b-tocke i.da { background: #fff; width: 1.875rem; }

.b-ljudi { grid-area: d; background: #f6eee8; color: var(--tinta); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.b-ljudi::after { display: none; }
.b-lica { position: absolute; top: 44%; left: 1.5rem; transform: translateY(-50%); display: flex; align-items: center; }
.b-lica img, .b-lica span { width: 4.625rem; height: 4.625rem; border-radius: 50%; border: 0.25rem solid #f6eee8; object-fit: cover; background: #fff; margin-left: -1rem; 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 1rem var(--font); color: var(--prigušeno); box-shadow: none; background: #fff; }
.b-ime { position: absolute; padding: 0.3125rem 0.75rem 0.3125rem 0.875rem; border-radius: 62.4375rem; background: var(--akcent); color: #fff; font-size: 0.8125rem; font-weight: 600; text-decoration: none; animation: lebdi 5s ease-in-out infinite; }
.b-ime::before { content: ''; position: absolute; left: -0.4375rem; top: -0.4375rem; border: 0.4375rem 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(-0.3125rem); } }
.b-ljudi-tekst { position: relative; }
.b-ljudi h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.b-ljudi p { margin-top: 0.5rem; font-size: 0.90625rem; 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: 1.375rem 1.5rem 1.5rem; }
.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 -0.625rem -0.875rem auto; width: 7rem; height: 7rem; object-fit: contain; z-index: -1; filter: drop-shadow(0 1.125rem 1.125rem 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: 1.875rem; max-width: 100%; }
.b-poziv .gumb { position: relative; }
.b-poziv strong { font: 650 clamp(1.1875rem, 1.6vw, 1.4375rem)/1.2 var(--font-naslov); letter-spacing: -.01em; max-width: 15em; }
.b-poziv .gumb { min-height: 2.625rem; }
.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: 1.875rem; max-width: 38.75rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 62.4375rem; padding: 0.375rem; box-shadow: 0 0.875rem 2.5rem -1.125rem rgba(18,20,23,.35); }
.velika-trazilica:focus-within { box-shadow: 0 0 0 0.3125rem var(--akcent-svijetli), 0 0.875rem 2.5rem -1.125rem rgba(18,20,23,.35); }
.velika-trazilica > .ik { margin: 0 0.25rem 0 1rem; width: 1.375rem; height: 1.375rem; color: var(--prigušeno); }
.velika-trazilica input { flex: 1; min-width: 0; height: 3.25rem; border: 0; background: none; font: inherit; font-size: 1.125rem; color: inherit; padding: 0 0.5rem; }
.velika-trazilica input:focus { outline: none; }
.velika-trazilica .gumb { min-height: 3.25rem; padding: 0 1.625rem; }

/* ---------- sekcije */
.sekcija { --sekcija-razmak: clamp(3rem, 7vw, 6rem); padding: var(--sekcija-razmak) 0; }
.sekcija-tijesna { padding-top: 0.75rem; }
.sekcija-siva { background: var(--kamen); }
.sekcija-glava { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem; margin-bottom: 1.75rem; }
.sekcija h2, .o-projektu h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.dvije { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.dvije h2 { margin-bottom: 1.375rem; }

.kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr)); gap: 1.125rem; }
.kartica { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); }
.kartica-slika { display: block; aspect-ratio: 4/5; border-radius: 1.375rem; overflow: hidden; background: var(--kamen); margin-bottom: 0.875rem; }
.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 1.1875rem/1.25 var(--font-naslov); letter-spacing: -.02em; }
.kartica small { margin-top: 2px; color: var(--prigušeno); font-size: 0.9375rem; }
.kartica:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.1875rem; }
.ist-kartice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1000px) { .ist-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

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

.o-projektu .tekst { margin-top: 1.125rem; color: #33363c; font-size: 1.125rem; }
.tekst p + p { margin-top: 1em; }
.kontakt-kartica { align-self: start; background: var(--tinta); color: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); }
.kontakt-kartica h3 { font-size: 1.875rem; }
.kontakt-kartica > p { margin-top: 0.75rem; color: rgba(255,255,255,.75); }
.kontakt-kartica ul { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 1.5rem 0 1.125rem; }
.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: 0.5rem; align-items: center; font-size: 0.9375rem; }

/* ---------- 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: 0.5rem; color: var(--prigušeno); font-size: 1rem; }
.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='%23e0531f' stroke-width='2.4'/%3E%3C/svg%3E") repeat-x 0 100% / 1.875rem 0.375rem; padding-bottom: 0.375rem; }
.krugovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.875rem; }
.krugovi a { position: relative; display: flex; flex-direction: column; min-height: 12.25rem; padding: 1.125rem 1.125rem 0; border-radius: 1.625rem; 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(-0.25rem); box-shadow: 0 1.25rem 2.5rem -1.375rem rgba(18,20,23,.4); }
.krug { position: absolute; right: -0.5rem; bottom: -0.625rem; width: 8.5rem; height: 8.5rem; z-index: -1; transition: transform .5s var(--ease); }
.krugovi a:hover .krug { transform: scale(1.06) translate(-0.1875rem, -0.1875rem); }
.krugovi strong { font: 650 1.125rem/1.15 var(--font-naslov); letter-spacing: -.015em; max-width: 9em; }
.krugovi small { color: var(--prigušeno); font-size: 0.84375rem; margin-top: 0.25rem; }
.mjesta { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--crta); }
.mjesta > span { font-weight: 600; color: var(--prigušeno); }
.sekcija-mjesta { padding: 0.5rem 0 clamp(2rem, 4vw, 3.5rem); }
.mjesta.samostalna { margin-top: 0; padding: 1.375rem 0 0; border-top: 1px solid var(--crta); justify-content: center; }
.sidro { position: absolute; top: -6.875rem; }
.mjesta .oznake a { padding: 0.375rem 0.8125rem; font-size: 0.90625rem; }
.jos-mestara { margin-bottom: 0.5rem; }
.jos-mestara h2 { margin: 0 0 1.125rem; text-align: center; font: 600 1rem var(--font); color: var(--prigušeno); }
.jos-mreza { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.jos-mreza li { flex: 0 0 8.25rem; }
.jos-mreza a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 100%; padding: 0.625rem 0.5rem 0.875rem; border-radius: 1.25rem; background: #f1efeb; text-decoration: none; text-align: center; transition: transform .3s var(--ease), background .3s; }
.jos-mreza a:hover { transform: translateY(-0.1875rem); background: #ebe8e2; }
.jos-mreza img { width: 4.5rem; height: 4.5rem; mix-blend-mode: multiply; transition: transform .4s var(--ease); }
.jos-mreza a:hover img { transform: scale(1.06); }
.jos-mreza b { font: 650 0.84375rem/1.2 var(--font-naslov); letter-spacing: -.01em; }
.jos-mreza small { position: absolute; top: 0.5rem; right: 0.5625rem; min-width: 1.375rem; height: 1.375rem; padding: 0 0.4375rem; border-radius: 62.4375rem; background: #fff; font: 700 0.71875rem/1.375rem var(--font); color: var(--prigušeno); }
.mjesta-blok, .mob-blok { scroll-margin-top: 5.625rem; }
.mjesta-blok { margin-top: 2.125rem; padding-top: 1.875rem; border-top: 1px solid var(--crta); }
.mjesta-blok h2 { margin: 0 0 1.125rem; text-align: center; font: 600 1rem var(--font); color: var(--prigušeno); }
.mj-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.mj-mreza a { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; padding: 0.625rem 0.875rem 0.625rem 0.625rem; border-radius: 1.125rem; 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: 2.625rem; height: 2.625rem; border-radius: 0.75rem; background: #fff; color: var(--akcent-tamni); flex: none; }
.mj-mreza .mj-ik .ik { width: 1.25rem; height: 1.25rem; }
.mj-mreza .mj-tekst { min-width: 0; flex: 1; }
.mj-mreza b { display: block; font: 650 1rem/1.2 var(--font-naslov); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-mreza small { font-size: 0.8125rem; color: var(--prigušeno); }
.mj-mreza a > .ik { width: 1rem; height: 1rem; color: var(--prigušeno); flex: none; }
.vise-blok { margin-top: 0.625rem; }
.vise-lista { margin-bottom: 0.625rem !important; }
.vise-lista:not([hidden]) { animation: mob-ulaz .35s var(--ease) both; }
.vise-gumb { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.25rem; border-radius: 1.125rem; border: 1px dashed #cfc9c0; background: transparent; font: 600 0.9375rem var(--font); color: var(--tinta); cursor: pointer; transition: background .2s; }
.vise-gumb:hover { background: var(--kamen); }
.vise-gumb .ik { width: 1rem; height: 1rem; 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: 0.5rem; } .mj-mreza a { gap: 0.625rem; min-height: 4.125rem; padding: 0.625rem 0.625rem 0.625rem 0.5rem; } .mj-mreza a > .ik { display: none; } .mj-mreza .mj-ik { width: 2.375rem; height: 2.375rem; } .mj-mreza b { font-size: 0.96875rem; } }

.karusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.625rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; }
.karusel::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .karusel { grid-auto-columns: calc((100% - 3rem) / 4); } }
.karusel li { scroll-snap-align: start; }
.karusel a { display: block; text-decoration: none; }
.kr-slika { display: block; aspect-ratio: 4 / 3; border-radius: 1.25rem; overflow: hidden; background: var(--crta); margin-bottom: 0.75rem; }
.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 1.0625rem/1.25 var(--font-naslov); letter-spacing: -.01em; }
.karusel small { color: var(--prigušeno); font-size: 0.875rem; }
.karusel-strelice { display: flex; gap: 0.5rem; }
.karusel-strelice button { width: 2.875rem; height: 2.875rem; 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: 1.375rem; height: 1.375rem; stroke-width: 2.2; }
.karusel-traka { position: relative; height: 0.25rem; border-radius: 2px; background: var(--crta); margin-top: 1.625rem; max-width: 32.5rem; 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: 1.125rem; list-style: none; margin: 0; padding: 0; }
.koraci > li { display: flex; flex-direction: column; background: var(--kamen); border-radius: 1.75rem; padding: 0.625rem; }
.korak-tekst { padding: 1.375rem 1.125rem 1.125rem; }
.korak-oznaka { display: inline-block; margin-bottom: 0.75rem; font: 700 0.8125rem var(--font); letter-spacing: .06em; color: var(--akcent-tamni); }
.koraci h3 { font-size: 1.4375rem; letter-spacing: -.03em; margin: 0 0 0.5rem; }
.koraci p { margin: 0; color: #45484e; font-size: 0.96875rem; }
/* mini prizori */
.korak-prizor { position: relative; height: 14.375rem; border-radius: 1.25rem; 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: 1rem 1rem; 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: 0.625rem; padding: 0 1.375rem; }
.kp-polje { display: flex; align-items: center; gap: 0.625rem; height: 3.25rem; padding: 0 1rem; border-radius: 62.4375rem; background: #fff; border: 1.5px solid var(--akcent); box-shadow: 0 0 0 0.3125rem rgba(224,83,31,.1), 0 0.875rem 1.875rem -1.125rem rgba(18,20,23,.4); font-weight: 500; }
.kp-polje .ik { width: 1.125rem; height: 1.125rem; color: var(--prigušeno); flex: none; }
.kp-upis { white-space: nowrap; }
.kp-polje i { width: 2px; height: 1.25rem; margin-left: -0.5625rem; 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: 1.125rem; background: #fff; box-shadow: 0 0.875rem 2.125rem -1.25rem rgba(18,20,23,.45); border: 1px solid var(--crta); padding: 0.375rem; transition: opacity .3s, transform .4s var(--ease); }
.kp-rezultati.skriveno { opacity: 0; transform: translateY(0.375rem); }
.kp-rezultati li { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem 0.375rem 0.375rem; border-radius: 0.75rem; }
.kp-rezultati li:first-child { background: var(--kamen); }
.kp-rezultati .r-slika { width: 2.375rem; height: 2.375rem; border-radius: 0.625rem; 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 0.84375rem/1.2 var(--font-naslov); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-rezultati small { font-size: 0.75rem; color: var(--prigušeno); }
.kp-rezultati .r-tekst { min-width: 0; flex: 1; }
.kp-rezultati .ik { width: 0.9375rem; height: 0.9375rem; color: var(--prigušeno); flex: none; }
/* 2: mini stranica obrta */
.kp-stranica { display: flex; flex-direction: column; padding: 0.75rem; gap: 0.625rem; }
.kps-glava { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 0.875rem; border-radius: 0.875rem; background: #2a2d33 center/cover; color: #fff; }
.kps-glava img, .kps-ini, .kp-tko .kps-ini { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: #fff; object-fit: contain; padding: 0.1875rem; flex: none; }
.kps-ini { display: grid; place-items: center; padding: 0; font: 700 0.875rem var(--font-naslov); color: var(--tinta); }
.kps-glava b { display: block; font: 700 0.9375rem/1.15 var(--font-naslov); letter-spacing: -.02em; }
.kps-glava small { font-size: 0.75rem; opacity: .8; }
.kps-galerija b { display: block; margin: 2px 2px 0.5rem; font: 650 0.8125rem var(--font-naslov); }
.kps-galerija div { display: flex; gap: 0.375rem; }
.kps-galerija img { flex: 1 1 0; min-width: 0; height: 5.75rem; object-fit: cover; border-radius: 0.625rem; 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 1.375rem; }
.kp-kartica { width: 100%; max-width: 18.75rem; padding: 0.875rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--crta); box-shadow: 0 1.125rem 2.25rem -1.375rem rgba(18,20,23,.5); }
.kp-tko { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.kp-tko img { width: 2.625rem; height: 2.625rem; border-radius: 0.6875rem; object-fit: contain; background: #fff; border: 1px solid var(--crta); padding: 0.1875rem; flex: none; }
.kp-tko .kps-ini { border: 1px solid var(--crta); }
.kp-tko b { display: block; font: 650 0.9375rem/1.2 var(--font-naslov); } .kp-tko small { font-size: 0.78125rem; color: var(--prigušeno); }
.kp-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.kp-gumbi span { display: flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.625rem; border-radius: 62.4375rem; font: 600 0.875rem var(--font); }
.kp-gumbi .ik { width: 1rem; height: 1rem; }
.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(224,83,31,.45); } 35% { box-shadow: 0 0 0 0.5625rem rgba(224,83,31,0); } }
.kp-nula { position: absolute; top: 0.875rem; right: 0.875rem; padding: 0.375rem 0.6875rem; border-radius: 62.4375rem; background: var(--tinta); color: #fff; font: 700 0.75rem var(--font); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .kp-polje span, .kp-polje i, .kp-nazovi { animation: none; } }

.banner { --bp: clamp(1.75rem, 4.5vw, 4rem); position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: stretch; background: radial-gradient(90% 120% at 85% 0%, #ee6a35 0%, transparent 60%), radial-gradient(80% 90% at 0% 100%, #c9430f 0%, transparent 65%), var(--akcent); color: #fff; border-radius: 2.125rem; 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: 1.375rem 1.375rem; 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: 0.375rem 0.875rem; border-radius: 62.4375rem; background: rgba(255,255,255,.18); font: 700 0.78125rem var(--font); letter-spacing: .09em; text-transform: uppercase; }
.banner h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.02; letter-spacing: -.04em; margin: 1.125rem 0 1.5rem; 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: 0.875rem; max-width: 34em; }
.b-prednosti li { display: flex; gap: 0.875rem; align-items: flex-start; font-size: 1.03125rem; line-height: 1.45; color: rgba(255,255,255,.88); }
.b-prednosti li i { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: -1px; border-radius: 50%; background: #fff; color: var(--akcent-tamni); }
.b-prednosti li i .ik { width: 1rem; height: 1rem; stroke-width: 2.6; }
.b-prednosti b { color: #fff; font-weight: 650; }
.banner-gumbi { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.875rem; }
.banner-gumbi .gumb { min-height: 3.5rem; padding: 0 1.625rem; font-size: 1.03125rem; }
.b-napomena { margin: 1rem 0 0; font-size: 0.90625rem; color: rgba(255,255,255,.78); }
.b-napomena span { display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.375rem; white-space: nowrap; }
.b-napomena .ik { width: 0.875rem; height: 0.875rem; }
/* desna strana: mobitel s pravom stranicom obrta */
.b-scena { position: relative; align-self: end; min-height: 27.5rem; display: flex; justify-content: center; }
.b-tel { position: absolute; bottom: -4.375rem; left: 50%; translate: -48% 0; width: 18.25rem; height: 31.25rem; padding: 0.625rem; border-radius: 2.625rem; background: #121417; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 2.5rem 4.375rem -1.25rem rgba(70,15,0,.65); rotate: 3deg; }
.b-tel::before { content: ''; position: absolute; top: 1.125rem; left: 50%; translate: -50% 0; width: 4.875rem; height: 1.375rem; border-radius: 62.4375rem; background: #121417; z-index: 3; }
.b-ekran { height: 100%; border-radius: 2.0625rem; background: #fff; color: var(--tinta); overflow: hidden; padding: 0 0.75rem; }
.bt-glava { margin: 0 -0.75rem; padding: 2.75rem 1rem 1rem; background: #2a2d33 center/cover; color: #fff; display: grid; justify-items: start; gap: 2px; }
.bt-glava img, .bt-glava .kps-ini { width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; background: #fff; object-fit: contain; padding: 0.1875rem; margin-bottom: 0.5rem; }
.bt-glava b { font: 700 1.0625rem/1.15 var(--font-naslov); letter-spacing: -.025em; }
.bt-glava small { font-size: 0.78125rem; opacity: .85; }
.bt-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.875rem 0; }
.bt-gumbi span { display: flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.5rem; border-radius: 62.4375rem; font: 600 0.84375rem var(--font); }
.bt-gumbi .ik { width: 0.9375rem; height: 0.9375rem; }
.bt-nazovi { color: #fff; }
.bt-wa { border: 1px solid var(--crta); }
.bt-nasl { margin: 0 2px 0.5rem; font: 650 0.8125rem var(--font-naslov); }
.bt-galerija { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.bt-galerija img { width: 100%; height: 6rem; object-fit: cover; border-radius: 0.625rem; }
.bt-galerija img:first-child { grid-column: 1 / -1; height: 7.5rem; }
/* plutajuće kartice */
.b-plutaj { position: absolute; z-index: 2; background: #fff; color: var(--tinta); border-radius: 1.125rem; box-shadow: 0 1.375rem 2.5rem -1.125rem rgba(70,15,0,.6); animation: b-lebdi 6s ease-in-out infinite; }
@keyframes b-lebdi { 50% { transform: translateY(-0.5rem); } }
.bp-poziv { right: 0; top: 3.375rem; display: flex; align-items: center; gap: 0.6875rem; padding: 0.6875rem 1rem 0.6875rem 0.6875rem; }
.bp-poziv .bp-ik { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #1f9d55; color: #fff; animation: kp-zvoni 2.4s var(--ease) infinite; }
.bp-poziv .bp-ik .ik { width: 1.125rem; height: 1.125rem; }
.bp-poziv b { display: block; font: 650 0.90625rem/1.2 var(--font-naslov); } .bp-poziv small { font-size: 0.78125rem; color: var(--prigušeno); }
.bp-broj { left: 0; bottom: 1.125rem; padding: 0.875rem 1.125rem; max-width: 14.5rem; animation-delay: -3s; }
.bp-broj strong { display: block; margin-top: 0.5rem; font: 650 1rem/1.25 var(--font-naslov); }
.bp-broj > span { font-size: 0.84375rem; color: var(--prigušeno); }
.b-lica.mala { position: static; transform: none; }
.b-lica.mala img { width: 2.125rem; height: 2.125rem; border-width: 2px; border-color: #fff; margin-left: -0.625rem; 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(1.75rem, 5vw, 4rem) 0 1.75rem; }
.popis-glava h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.03em; }
.pretraga-broj { margin-top: 0.875rem; color: var(--prigušeno); font-weight: 600; font-size: 0.9375rem; min-height: 1.5em; }
.mrvice { font-size: 0.875rem; color: var(--prigušeno); margin-bottom: 1.125rem; }
.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(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 3.75rem); min-height: clamp(23.75rem, 52vh, 35rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.obrt-hero .mrvice { color: rgba(255,255,255,.75); }
.obrt-identitet { display: flex; align-items: end; gap: 1.375rem; }
.obrt-logo { width: clamp(4.75rem, 9vw, 7rem); height: clamp(4.75rem, 9vw, 7rem); border-radius: 1.5rem; background: #fff; object-fit: contain; padding: 0.625rem; flex: none; box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.25); }
.obrt-logo-inicijali { display: grid; place-items: center; font: 800 clamp(1.875rem, 3.4vw, 2.625rem) var(--font-naslov); color: var(--obrt); padding: 0; }
.obrt-identitet h1 { font-size: clamp(2.125rem, 5.4vw, 4.5rem); font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.obrt-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; margin-top: 0.625rem; font-size: 1.03125rem; color: rgba(255,255,255,.85); }
.obrt-meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.obrt-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.obrt-mreza { display: grid; grid-template-columns: minmax(17.5rem, 25rem) 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 7vw, 6rem); align-items: start; }
.obrt-info { display: flex; flex-direction: column; gap: 1.125rem; }
.obrt-portret { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.obrt-uvod { font: 600 1.3125rem/1.35 var(--font-naslov); letter-spacing: -.01em; }
.obrt-info .tekst { color: #33363c; }
.mali-naslov { font-family: var(--font); font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); margin-top: 0.5rem; }
.usluge { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.usluge li { padding: 0.375rem 0.75rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.90625rem; }
.kontakti { display: flex; flex-direction: column; gap: 0.625rem; }
.kontakti li { display: flex; align-items: center; gap: 0.75rem; }
.kontakti .ik { color: var(--obrt); width: 1.25rem; height: 1.25rem; }
.kontakti a { text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.kontakti a:hover { text-decoration: underline; }
.mreze { display: flex; gap: 0.5rem; }
.mreze a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; 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: 1.25rem; height: 1.25rem; }
.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: 0.625rem; }
.karta-gumb { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--tinta); background: #fff; border-radius: 62.4375rem; padding: 0.625rem 1.125rem; font-weight: 600; }
.karta-gumb:hover { background: var(--tinta); color: #fff; }
.karta-link { font-size: 0.875rem; 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(1.5rem, 2.6vw, 2.125rem); margin-bottom: 1.25rem; display: flex; align-items: baseline; gap: 0.625rem; }
.sekcija-naslov span { font: 700 0.875rem var(--font); color: var(--prigušeno); background: var(--kamen); border-radius: 62.4375rem; padding: 0.1875rem 0.625rem; }
.obrt-sadrzaj { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.galerija { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.galerija li:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.galerija a { position: relative; display: block; height: 100%; border-radius: 1rem; 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: 1.75rem 0.75rem 0.625rem; color: #fff; font-size: 0.84375rem; 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(20rem, 100%), 1fr)); gap: 0.875rem; }
.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: 40rem; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s; }
.video button { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 0; background: var(--obrt); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease); }
.video button .ik { width: 1.875rem; height: 1.875rem; margin-left: 0.25rem; }
.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: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); 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: 3.125rem; font-size: 1rem; }
  .gumb-wa { background: #25d366; border-color: #25d366; color: #fff; }
  .str-obrt .podnozje { padding-bottom: 6.25rem; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,11,13,.94); display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; animation: pojava .25s ease both; }
.lightbox figure { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 0.875rem; max-height: 100vh; padding: 3.5rem 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 10rem); object-fit: contain; border-radius: 0.625rem; transition: opacity .2s; }
.lightbox img.mijenja { opacity: .3; }
.lightbox figcaption { color: #fff; font-size: 1rem; text-align: center; max-width: 60ch; }
.lightbox button { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 3.25rem; height: 3.25rem; 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: 1.625rem; height: 1.625rem; }
.lb-zatvori { position: absolute; top: 1rem; right: 1rem; }
.lb-brojac { position: absolute; top: 1.75rem; left: 1.5rem; color: rgba(255,255,255,.7); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ---------- PODNOŽJE: kratka tamna ploča (marka + kontakt | tri stupca) s velikim blijedim potpisom */
.podnozje { padding: clamp(1.5rem, 4vw, 3.5rem) 0 1rem; background: #fff; }
.pod-ploca { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; border-radius: 2.25rem; padding: clamp(1.75rem, 4.5vw, 4rem) clamp(1.5rem, 4.5vw, 4rem) 0; color: rgba(255,255,255,.72);
  background: radial-gradient(70% 90% at 100% 0%, rgba(224,83,31,.22), transparent 60%), var(--tinta); }
.pod-gore { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 6rem); }
.pod-logo img { display: block; width: auto; height: 3rem; }
.pod-slogan { margin: 1.25rem 0 1.375rem; max-width: 18em; font: 650 clamp(1.375rem, 2.2vw, 1.75rem)/1.15 var(--font-naslov); letter-spacing: -.03em; color: #fff; }
.pod-trazi { position: relative; display: flex; align-items: center; max-width: 23.75rem; height: 3.25rem; padding: 0 0.375rem 0 1.25rem; border-radius: 62.4375rem; 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: 0.9375rem; }
.pod-trazi input::placeholder { color: rgba(255,255,255,.5); }
.pod-trazi input:focus { outline: none; }
.pod-trazi button { flex: none; width: 2.5rem; height: 2.5rem; 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: 1.125rem; height: 1.125rem; stroke-width: 2.1; }
.pod-kontakt { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.pod-kontakt a, .pod-kontakt span { display: inline-flex; align-items: center; gap: 0.625rem; color: rgba(255,255,255,.82); text-decoration: none; font-size: 0.96875rem; }
.pod-kontakt a:hover { color: #fff; }
.pod-kontakt .ik { width: 1.125rem; height: 1.125rem; color: var(--akcent-tamni); flex: none; }
.pod-kontakt .pod-tel { font: 700 1.375rem var(--font-naslov); letter-spacing: -.02em; color: #fff; }
.pod-stupci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.pod-ploca h3 { margin: 0 0 1rem; font: 700 0.75rem 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: 0.6875rem; }
.pod-stupci a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 0.96875rem; 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: 0.375rem; margin-top: 0.25rem; color: var(--akcent-tamni); font-weight: 600; background: none; }
.pod-stupci a.pod-sve:hover { color: #ff7a47; }
.pod-sve .ik { width: 0.9375rem; height: 0.9375rem; transition: transform .25s var(--ease); }
.pod-sve:hover .ik { transform: translateX(0.1875rem); }
.pod-dno { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: clamp(2.25rem, 5vw, 4rem); padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.875rem; 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-tamni); }
.pod-rijec { display: block; margin-top: 0.25rem; 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: 0.5rem; }
  .banner-valovi { width: 100%; }
  .banner-tekst { padding-bottom: 0; }
  .b-scena { min-height: 29.375rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 26.25rem 15rem 15rem 16.25rem; grid-template-areas: "a a" "b e" "c d" "c f"; }
}
@media (max-width: 960px) {
  .glavni-nav, .kap-cta, .kap-obrtnici { display: none; }
  .burger { display: block; }
  .kapsula-desno { margin-left: auto; }
  .kapsula { height: 3.875rem; padding: 0 0.5rem 0 1rem; }
  /* zaglavlje se pri skrolanju ne smanjuje (logo i gumbi bi izašli iz kapsule) */
  .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: 1.03125rem; }
  .velika-trazilica { margin-top: 1.5rem; }
  .velika-trazilica input { height: 3rem; font-size: 1.03125rem; }
  .velika-trazilica .gumb { min-height: 3rem; padding: 0 1.125rem; }
  .traka { flex-wrap: wrap; border-radius: 1.5rem; padding: 0.5rem; }
  .traka-polje { flex: 1 1 100%; padding: 0.5rem 0.875rem; }
  .traka-polje + .traka-polje { border-left: 0; border-top: 1px solid var(--crta); }
  .traka-gumb { flex: 1 1 100%; justify-content: space-between; height: 3.25rem; margin-top: 0.25rem; }
  .traka-polje input, .traka-polje select { font-size: 1rem; }
  .hero-rezultati { max-height: 70vh; }
  .hr-popis { grid-template-columns: 1fr; }
  .bento { grid-template-rows: 28.75rem 11.875rem 23.75rem 13.75rem 12.5rem; grid-template-areas: "a a" "b e" "c c" "d d" "f f"; gap: 0.625rem; }
  .b-kartica { border-radius: 1.25rem; }
  .b-kat { padding: 1rem; } .b-kat .b-cip { font-size: 0.75rem; padding: 0.25rem 0.625rem; }
  .b-kat .b-strelica { width: 2.375rem; height: 2.375rem; top: 0.75rem; right: 0.75rem; }
  .b-oznake { top: 0.875rem; left: 0.875rem; }
  .b-kat-naziv { font-size: 1.1875rem; }
  .b-tocke { top: 3.875rem; }
  /* djelatnosti: vodoravni red pločica koji se lista prstom */
  .krugovi { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 8rem; gap: 0.625rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--rub) * -1); padding: 0.25rem var(--rub) 0.625rem; scroll-padding: 0 var(--rub); scrollbar-width: none; }
  .krugovi::-webkit-scrollbar { display: none; }
  .krugovi li { scroll-snap-align: start; }
  .krugovi { grid-auto-columns: 9rem; }
  .krugovi a { min-height: 10.25rem; padding: 0.875rem 0.875rem 0; border-radius: 1.25rem; }
  .krug { width: 6.75rem; height: 6.75rem; right: -0.75rem; bottom: -0.75rem; }
  .krugovi strong { font-size: 1rem; }
  .mjesta { margin-top: 1.375rem; padding-top: 1.125rem; }
  .karusel { grid-auto-columns: 78%; margin: 0 calc(var(--rub) * -1); padding: 0 var(--rub) 0.25rem; scroll-padding: 0 var(--rub); }
  .karusel-strelice { display: none; }
  .koraci { grid-template-columns: 1fr; gap: 0.75rem; }
  .korak-prizor { height: 13.125rem; }
  .korak-tekst { padding: 1.125rem 0.75rem 0.75rem; }
  .banner { grid-template-columns: 1fr; border-radius: 1.5rem; }
  .banner { --bp: 1.375rem; }
  .b-scena { min-height: 26.875rem; }
  .b-tel { width: 16.375rem; height: 29.375rem; bottom: -3.75rem; }
  .bp-poziv { right: -0.25rem; top: 1.875rem; }
  .bp-broj { left: -0.25rem; bottom: 0.875rem; max-width: 12.5rem; }
  .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: 0.25rem var(--rub) 0.75rem; 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: 3.625rem; height: 3.625rem; margin-left: -0.75rem; border-width: 0.1875rem; }
  .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: 0.375rem; }
  .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: 1rem; }
  .obrt-akcije .gumb { flex: 1 1 auto; }
  .lightbox { grid-template-columns: 1fr; }
  .lightbox figure { grid-column: 1; grid-row: 1; padding: 3.75rem 0.5rem; }
  .lb-str { position: absolute; bottom: 1.25rem; }
  .lb-lijevo { left: 1.25rem; } .lb-desno { right: 1.25rem; }
}
@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: 0.5rem; }
  .logo-img { height: 3rem; margin: -0.375rem 0 -0.5rem -0.375rem; }
}

/* podnožje: tablet i mobitel */
@media (max-width: 1000px) {
  .pod-gore { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 720px) {
  .pod-ploca { border-radius: 1.75rem; }
  .pod-stupci { grid-template-columns: 1fr 1fr; gap: 1.875rem 1.25rem; }
  .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: 0.625rem; }
  .scena-kuca { grid-column: 1 / -1; order: -1; margin-bottom: 0.875rem; }
  .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: 1.125rem; }
  .scena-kartice, .scena-linije { display: none; }
  .scena-kuca { margin: 0 -0.375rem 4.625rem; }
  .ht { width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem; border-width: 0.15625rem; }
  .ht::before { content: ''; position: absolute; inset: -0.75rem; }               /* veća površina za prst */
  .jos-mestara { display: none !important; }
  .ht.aktivna { transform: scale(1.35); box-shadow: 0 0 0 0.375rem rgba(224,83,31,.25), 0 2px 0.5rem rgba(0,0,0,.25); }
  .ht-kartica:not([hidden]) { display: flex; position: absolute; left: 0.625rem; right: 0.625rem; top: calc(100% + 0.375rem); z-index: 5; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem;
    background: rgba(255,255,255,.96); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: 1px solid var(--crta); border-radius: 1rem;
    box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(18,20,23,.45); text-decoration: none; animation: kartica-ulaz .35s var(--ease) both; }
  @keyframes kartica-ulaz { from { opacity: 0; transform: translateY(0.5rem); } }
  .ht-kartica img { width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background: #f1efeb; mix-blend-mode: multiply; flex: none; }
  .ht-kartica .hk-tekst b { font-size: 0.96875rem; }
  .ht-kartica-str { margin-left: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--akcent); color: #fff; display: grid; place-items: center; flex: none; }
  .ht-kartica-str .ik { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
  .scena-traka { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0.75rem calc(var(--rub) * -1) 0; padding: 2px var(--rub) 0.375rem; scroll-padding: 0 var(--rub); }
  .scena-traka::-webkit-scrollbar { display: none; }
  .scena-traka .hk { flex: none; scroll-snap-align: start; width: 42%; min-width: 9.25rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem 0.875rem; border-radius: 1.125rem; }
  .scena-traka .hk img { width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; }
  .scena-traka .hk-tekst b { font-size: 1rem; }
  .scena-traka .hk-tekst small { font-size: 0.78125rem; }
  .scena-traka .hk img { background: none; }
  .traka-kontrole { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
  .traka-napredak { position: relative; flex: 1; height: 0.25rem; 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: 0.5rem; flex: none; }
  .traka-strelice button { width: 2.5rem; height: 2.5rem; 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: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
  .scena-traka .hk.aktivna { border-color: var(--akcent); background: #fff8f4; transform: none; }
  .hero-uvod h1 { font-size: 2.125rem; }
  .hero-uvod .nadnaslov { font-size: 0.78125rem; margin-bottom: 0.625rem; }
  /* kompaktna tražilica: polje + okrugli gumb u jednom redu, „Gdje?“ tanko ispod */
  .traka { flex-wrap: wrap; align-items: center; border-radius: 1.375rem; padding: 0.375rem; }
  .traka-polje { padding: 0.375rem 0.75rem; }
  .traka-sto { flex: 1 1 0; order: 1; }
  .traka-sto > span { font-size: 0.75rem; }
  .traka-gumb { order: 2; flex: none; width: 3.25rem; height: 3.25rem; padding: 0; margin: 0; justify-content: center; border-radius: 1rem; }
  .traka-gumb span { display: none; }
  .traka-gumb .ik { width: 1.5rem; height: 1.5rem; padding: 0; background: none; color: #fff; }
  .traka-gdje { order: 3; flex: 1 1 100% !important; flex-direction: row; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0.5rem 0.75rem 0.25rem; border-left: 0 !important; border-top: 1px solid var(--crta) !important; }
  .traka-gdje > span { font-size: 0.75rem; color: var(--prigušeno); font-weight: 600; flex: none; }
  .traka-gdje select { font-size: 0.90625rem; font-weight: 600; flex: 1; }
}

/* ---------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 6vw, 6rem); align-items: start; }
.faq-uvod { position: sticky; top: 6.875rem; }
.faq-oznaka { display: inline-flex; margin: 0 0 1rem; padding: 0.375rem 0.875rem; border-radius: 62.4375rem; background: var(--kamen); font: 700 0.78125rem var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--prigušeno); }
.faq-uvod h2 { font-size: clamp(1.875rem, 3.6vw, 3.125rem); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 0.875rem; text-wrap: balance; }
.faq-uvod .podnaslov { margin: 0; max-width: 26em; }
.faq-kontakt { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
.faq-lista { display: grid; gap: 0.625rem; }
.faq-stavka { background: var(--kamen); border-radius: 1.375rem; 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: 1rem; padding: 1.25rem 1.375rem; cursor: pointer; font: 650 clamp(1.0625rem, 1.5vw, 1.25rem)/1.3 var(--font-naslov); letter-spacing: -.02em; min-height: 4rem; }
.faq-stavka summary::-webkit-details-marker { display: none; }
.faq-stavka summary i { position: relative; flex: none; width: 2.125rem; height: 2.125rem; 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: 0.75rem; height: 2px; margin: -1px 0 0 -0.375rem; 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, #fdebe2); }
.faq-stavka p { margin: 0; padding: 0 1.375rem 1.375rem; max-width: 46em; color: #45484e; font-size: 1.03125rem; line-height: 1.6; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 1.5rem; } .faq-uvod { position: static; } }
@media (max-width: 480px) { .faq-stavka summary { padding: 1rem 1rem 1rem 1.125rem; } .faq-stavka p { padding: 0 1.125rem 1.125rem; font-size: 1rem; } }

/* ======================================================================
   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: 97.5rem; --rub: 3.5rem; --zaglavlje: 6.25rem; }
  body { font-size: 1.125rem; }
  .kapsula { height: 4.625rem; padding: 0 0.75rem 0 1.5rem; }
  .logo-img { height: 3.875rem; }
  .nav-link { height: 2.875rem; padding: 0 1.125rem; font-size: 1.0625rem; }
  .kap-cta { height: 3.25rem; font-size: 1.0625rem; }
  .hero-uvod h1 { font-size: clamp(4.25rem, 4.4vw, 8rem); }
  .traka { max-width: 70rem; }
  .scena { grid-template-columns: minmax(15.625rem, 19.375rem) minmax(0, 1fr) minmax(15.625rem, 19.375rem); gap: 2.25rem; }
  .scena-kuca { max-width: 57.5rem; }
  .hk { padding: 0.5rem 1rem 0.5rem 0.5rem; gap: 0.875rem; border-radius: 1.125rem; }
  .hk img { width: 3.75rem; height: 3.75rem; border-radius: 0.8125rem; }
  .hk-tekst b { font-size: 1.09375rem; } .hk-tekst small { font-size: 0.875rem; }
  .sekcija h2, .o-projektu h2 { font-size: clamp(2.75rem, 2.8vw, 4.75rem); }
  .banner h2 { font-size: clamp(3.25rem, 3.2vw, 5.5rem); }
  .faq-uvod h2 { font-size: clamp(3.125rem, 3vw, 5rem); }
  .sekcija-naslov { font-size: clamp(2.125rem, 2vw, 3.125rem); }
  .popis-glava h1 { font-size: clamp(4rem, 3.6vw, 6rem); }
  .podnaslov { font-size: 1.1875rem; }
  .b-prednosti li { font-size: 1.125rem; }
  .b-scena { min-height: 32.5rem; }
  .b-tel { width: 21.25rem; height: 36.25rem; }
  .bt-gumbi span { height: 2.75rem; font-size: 0.9375rem; } .bt-glava b { font-size: 1.1875rem; }
  .korak-prizor { height: 16.875rem; }
  .koraci h3 { font-size: 1.625rem; } .koraci p { font-size: 1.0625rem; }
  .faq-stavka summary { font-size: 1.3125rem; padding: 1.5rem 1.75rem; } .faq-stavka p { padding: 0 1.75rem 1.625rem; font-size: 1.125rem; }
  .mj-mreza a { min-height: 4.625rem; } .mj-mreza b { font-size: 1.125rem; }
  .jos-mreza li { flex-basis: 9.75rem; } .jos-mreza img { width: 5.25rem; height: 5.25rem; } .jos-mreza b { font-size: 0.96875rem; }
  .pod-slogan { font-size: 2rem; } .pod-stupci a, .pod-kontakt a, .pod-kontakt span { font-size: 1.0625rem; }
  .kartice { gap: 1.375rem; }
}
@media (min-width: 1920px) {
  :root { --sirina: 113.75rem; --rub: 4.5rem; --zaglavlje: 6.75rem; }
  body { font-size: 1.1875rem; }
  .kapsula { height: 5rem; }
  .logo-img { height: 4.25rem; }
  .nav-link { height: 3.125rem; padding: 0 1.375rem; font-size: 1.125rem; }
  .kap-cta { height: 3.5rem; font-size: 1.125rem; padding-left: 3.625rem; }
  .hero-uvod h1 { font-size: clamp(5rem, 4.5vw, 9.375rem); }
  .traka { max-width: 80rem; }
  .scena { grid-template-columns: minmax(18.75rem, 22.5rem) minmax(0, 1fr) minmax(18.75rem, 22.5rem); gap: 2.75rem; }
  .scena-kuca { max-width: 67.5rem; }
  .hk img { width: 4.25rem; height: 4.25rem; }
  .hk-tekst b { font-size: 1.21875rem; } .hk-tekst small { font-size: 0.9375rem; }
  .b-tel { width: 23.75rem; height: 40rem; }
  .korak-prizor { height: 18.75rem; }
  .jos-mreza li { flex-basis: 11rem; } .jos-mreza img { width: 5.75rem; height: 5.75rem; }
  .mj-mreza a { min-height: 5rem; } .mj-mreza .mj-ik { width: 3rem; height: 3rem; }
}
@media (min-width: 2400px) {
  :root { --sirina: 137.5rem; --rub: 6rem; --zaglavlje: 7.5rem; }
  body { font-size: 1.375rem; }
  .kapsula { height: 5.75rem; } .logo-img { height: 4.875rem; }
  .nav-link { height: 3.5rem; font-size: 1.25rem; } .kap-cta { height: 3.875rem; font-size: 1.25rem; }
  .traka { max-width: 93.75rem; }
  .scena { grid-template-columns: minmax(21.25rem, 26.875rem) minmax(0, 1fr) minmax(21.25rem, 26.875rem); gap: 3.5rem; }
  .scena-kuca { max-width: 81.25rem; }
  .hk img { width: 5rem; height: 5rem; } .hk-tekst b { font-size: 1.4375rem; } .hk-tekst small { font-size: 1.0625rem; }
  .b-tel { width: 27.5rem; height: 46.25rem; } .b-scena { min-height: 38.75rem; }
  .korak-prizor { height: 21.25rem; }
  .jos-mreza li { flex-basis: 12.5rem; } .jos-mreza img { width: 6.75rem; height: 6.75rem; } .jos-mreza b { font-size: 1.125rem; }
}

/* ======================================================================
   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: 1rem; --bp: 2.25rem; }
  .banner-tekst { padding-bottom: var(--bp); }
  .b-scena { min-height: 25rem; }
  .b-tel { width: 14.875rem; height: 26.875rem; bottom: -3rem; translate: -44% 0; }
  .bp-poziv { right: -0.875rem; top: 1rem; padding: 0.5625rem 0.75rem 0.5625rem 0.5625rem; }
  .bp-broj { left: -1.625rem; bottom: 0.875rem; max-width: 11rem; padding: 0.6875rem 0.8125rem; }
  .b-prednosti li { font-size: 0.96875rem; }
  .banner-gumbi .gumb { min-height: 3.25rem; padding: 0 1.25rem; font-size: 0.96875rem; }
}

/* ======================================================================
   JAKO UZAK EKRAN: vanjski ekrani preklopnih telefona (Z Flip ~260 px, Z Fold ~280–344 px)
   ====================================================================== */
@media (max-width: 359px) {
  :root { --rub: 0.875rem; }
  body { font-size: 1rem; }
  .kapsula { height: 3.5rem; padding: 0 0.375rem 0 0.625rem; }
  .logo-img { height: 2.75rem; }
  .burger { width: 2.625rem; height: 2.625rem; }
  .hero-uvod h1 { font-size: 1.875rem; }
  .traka { padding: 0.375rem; border-radius: 1.375rem; }
  .sekcija h2, .banner h2, .faq-uvod h2 { font-size: 1.625rem; }
  .banner { --bp: 1.125rem; border-radius: 1.5rem; }
  .b-prednosti li { font-size: 0.9375rem; }
  .b-tel { width: 14.125rem; height: 26.25rem; }
  .bp-poziv { right: -0.5rem; } .bp-poziv small { display: none; }
  .bp-broj { max-width: 10.625rem; left: -0.5rem; }
  .mj-mreza { gap: 0.375rem; } .mj-mreza a { padding: 0.5rem 0.5rem 0.5rem 0.375rem; gap: 0.5rem; } .mj-mreza .mj-ik { width: 2rem; height: 2rem; } .mj-mreza b { font-size: 0.90625rem; } .mj-mreza small { font-size: 0.75rem; }
  .jos-mreza li { flex-basis: calc(50% - 0.3125rem); }
  .pod-stupci { grid-template-columns: 1fr; } .pod-stupci > nav:last-child ul { grid-template-columns: 1fr; }
  .pod-ploca { padding-left: 1.125rem; padding-right: 1.125rem; border-radius: 1.375rem; }
  .mob-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .korak-prizor { height: 12.5rem; }
  .kp-polje { height: 2.875rem; font-size: 0.875rem; }
  .faq-stavka summary { padding: 0.875rem 0.75rem 0.875rem 0.875rem; font-size: 1rem; }
  .faq-stavka summary i { width: 1.875rem; height: 1.875rem; }
  .gumb { padding: 0 1rem; }
}

/* ======================================================================
   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(0.625rem, env(safe-area-inset-bottom)); }
@media (pointer: coarse) {
  .nav-link, .kap-ikona, .burger { min-height: 2.75rem; }
  .pod-stupci a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .mj-mreza a { min-height: 3.5rem; }
  .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: calc(5rem + var(--pomak, 0px)); }
  .hero-uvod h1 { font-size: clamp(1.875rem, 6vw, 3rem); }
}

/* 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: 15.625rem; } .koraci h3 { font-size: 1.25rem; } .koraci p { font-size: 0.9375rem; } .korak-tekst { padding: 1.125rem 0.75rem 0.875rem; } }
.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: 0.5rem 1rem; }
@media (max-width: 359px) { .sekcija-glava .poveznica { font-size: 0.875rem; } }
.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 0.875rem; min-height: 3.125rem; font-size: 0.9375rem; } }
.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: 0.5rem; } .obrt-akcije .gumb { flex: 1 1 100%; white-space: normal; min-width: 0; }
  .poziv-traka .gumb { min-width: 0; padding: 0 0.75rem; font-size: 0.9375rem; }
  .obrt-identitet { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* „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(9.375rem, 1fr)); justify-content: stretch; gap: 0.625rem; }
.jos-mreza li { flex: none; }
@media (min-width: 1600px) { .jos-mreza { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } }
@media (max-width: 480px) { .jos-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- PRIJAVA OBRTA (dijalog) */
.prijava { width: min(35rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; border: 0; border-radius: 1.875rem; background: #fff; color: var(--tinta); box-shadow: 0 2.5rem 6.25rem -1.875rem 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(0.375rem); -webkit-backdrop-filter: blur(0.375rem); animation: pr-pozadina .3s both; }
@keyframes pr-ulaz { from { opacity: 0; transform: translateY(1.125rem) scale(.97); } }
@keyframes pr-pozadina { from { opacity: 0; } }
.pr-okvir { position: relative; max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: clamp(1.5rem, 4vw, 2.25rem); }
.pr-zatvori { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; place-items: center; width: 2.625rem; height: 2.625rem; 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: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
.pr-okvir h2 { margin: 0 0 0.5rem; font-size: clamp(1.625rem, 3.4vw, 2.125rem); letter-spacing: -.035em; line-height: 1.05; padding-right: 3rem; }
.pr-uvod { margin: 0 0 1.375rem; color: var(--prigušeno); font-size: 0.96875rem; }
.pr-forma { display: grid; gap: 0.875rem; }
.pr-red { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.pr-polje { display: grid; gap: 0.375rem; min-width: 0; }
.pr-polje > span { font: 600 0.84375rem var(--font); }
.pr-polje input, .pr-polje textarea { width: 100%; min-width: 0; padding: 0.875rem 1rem; border: 1.5px solid var(--crta); border-radius: 0.875rem; background: #fff; font: inherit; font-size: 1rem; 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 0.25rem var(--akcent-svijetli); }
.pr-polje [aria-invalid="true"] { border-color: #c62f22; box-shadow: 0 0 0 0.25rem rgba(198,47,34,.1); }
.pr-med { position: absolute; left: -624.938rem; width: 1px; height: 1px; opacity: 0; }
.pr-greska { margin: 0; padding: 0.75rem 0.875rem; border-radius: 0.75rem; background: #fdecea; color: #a02318; font-size: 0.90625rem; }
.pr-posalji { min-height: 3.5rem; font-size: 1.03125rem; }
.pr-napomena { margin: 0; color: var(--prigušeno); font-size: 0.8125rem; line-height: 1.45; }
.pr-uspjeh { display: grid; justify-items: start; gap: 0.5rem; padding: 0.75rem 0 0.25rem; }
.pr-kvacica { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 0.625rem; border-radius: 50%; background: #e6f5ec; color: #1f8a4c; }
.pr-kvacica .ik { width: 1.875rem; height: 1.875rem; stroke-width: 2.6; }
.pr-uspjeh p { margin: 0 0 0.875rem; color: var(--prigušeno); }
@media (max-width: 520px) { .pr-red { grid-template-columns: 1fr; } .prijava { border-radius: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .prijava[open], .prijava::backdrop { animation: none; } }

/* ---------- PRAVNE STRANICE */
.pravno { padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(3rem, 7vw, 6.25rem); }
.pravno-glava { max-width: 52em; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.pravno-glava h1 { font-size: clamp(2.375rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 0.875rem; }
.pravno-datum { display: inline-flex; margin: 0 0 0.875rem; padding: 0.3125rem 0.75rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.84375rem; font-weight: 600; color: var(--prigušeno); }
.pravno-uvod { margin: 0; max-width: 36em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--prigušeno); }
.pravno-mreza { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pravno-uski .pravno-mreza { grid-template-columns: minmax(0, 1fr); }
.pravno-toc { position: sticky; top: 6.875rem; }
.pravno-toc p { margin: 0 0 0.75rem; font: 700 0.75rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); }
.pravno-toc ol { list-style: none; margin: 0; padding: 0 0 0 0.875rem; border-left: 1.5px solid var(--crta); display: grid; gap: 0.25rem; }
.pravno-toc a { display: block; padding: 0.3125rem 0; color: var(--prigušeno); text-decoration: none; font-size: 0.9375rem; 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: 2.125rem; margin-bottom: 2.125rem; border-bottom: 1px solid var(--crta); }
.pravno-tijelo section:last-of-type { border-bottom: 0; }
.pravno-tijelo h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -.03em; margin: 0 0 1rem; }
.pravno-tijelo p, .pravno-tijelo li { font-size: 1.0625rem; line-height: 1.65; color: #34373d; }
.pravno-tijelo p { margin: 0 0 0.875rem; }
.pravno-tijelo ul { margin: 0 0 0.875rem; padding-left: 1.2em; display: grid; gap: 0.625rem; }
.pravno-tijelo a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1.5px; text-underline-offset: 0.1875rem; }
.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 1rem; font-size: 1rem; }
.pravno-tablica th, .pravno-tablica td { padding: 0.75rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--crta); }
.pravno-tablica thead th { font: 700 0.75rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); background: var(--kamen); }
.pravno-tablica code { padding: 2px 0.4375rem; border-radius: 0.375rem; background: var(--kamen); font-size: .92em; }
.pravno-podaci th { width: 34%; font-weight: 600; color: var(--prigušeno); }
.pravno-ostalo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin-top: 0.625rem; padding: 1.125rem 1.25rem; border-radius: 1.25rem; background: var(--kamen); }
.pravno-ostalo span { margin-right: 0.375rem; font: 700 0.75rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--prigušeno); }
.pravno-ostalo a { padding: 0.4375rem 0.875rem; border-radius: 62.4375rem; background: #fff; text-decoration: none; font-size: 0.90625rem; font-weight: 600; }
.pravno-ostalo a:hover { color: var(--akcent-tamni); }
@media (max-width: 960px) { .pravno-mreza { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .pravno-toc { position: static; } .pravno-toc ol { grid-template-columns: 1fr 1fr; border-left: 0; padding-left: 0; gap: 2px 1rem; } }
@media (max-width: 560px) { .pravno-toc ol { grid-template-columns: 1fr; } .pravno-podaci th, .pravno-podaci td { display: block; width: 100%; } .pravno-podaci th { padding-bottom: 0; border-bottom: 0; } }
/* obrazac suglasnosti */
.suglasnost { padding: clamp(1.375rem, 4vw, 2.5rem); border: 1.5px solid var(--tinta); border-radius: 1.375rem; background: #fff; }
.suglasnost h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-bottom: 1.25rem; }
.crta { display: inline-block; min-width: 5.625rem; border-bottom: 1.5px solid #34373d; height: 1.2em; vertical-align: bottom; }
.crta-duga { min-width: min(16.25rem, 60%); } .crta-srednja { min-width: 11.25rem; }
.kvacice { list-style: none; padding: 0 !important; }
.kvacice li { display: flex; align-items: center; gap: 0.75rem; }
.kocka { flex: none; width: 1.25rem; height: 1.25rem; border: 1.5px solid #34373d; border-radius: 0.25rem; }
.potpis-red { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.75rem; margin-top: 2.25rem; }
.ispis-gumb { margin-top: 1.25rem; }
/* podnožje: pravne poveznice */
.pod-pravno { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.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; }
.pr-napomena a { color: inherit; text-decoration: underline; }
@media print {
  .zaglavlje, .podnozje, .mrvice, .pravno-ostalo, .ispis-gumb, .prijava, .skip, .preskoci, .poziv-traka, .pravno-glava .pravno-uvod { display: none !important; }
  body { background: #fff; } .pravno { padding: 0; } .pravno-glava h1 { font-size: 1.375rem; }
  .suglasnost { border: 0; padding: 0; } .pravno-tijelo p, .pravno-tijelo li { font-size: 13pt; color: #000; }
}

/* ---------- 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: -0.75rem; }
.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: 0.5rem; }
  .mj-mreza a { align-items: center; gap: 0.625rem; min-height: 3.75rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem; border-radius: 1rem; }
  .mj-mreza .mj-ik { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; }
  .mj-mreza .mj-ik .ik { width: 1.125rem; height: 1.125rem; }
  .mj-mreza b { font-size: 0.96875rem; line-height: 1.15; }
  .mj-mreza small { font-size: 0.78125rem; }
}

/* ---------- 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(1.75rem, 4vw, 3rem); }
.kako-glava h2 { margin: 0; }
.koraci { gap: clamp(1.25rem, 3vw, 2.75rem); }
.koraci > li { background: none; border-radius: 0; padding: 0; }
.koraci .korak-prizor { height: 15.625rem; border: 1px solid var(--crta); border-radius: 1.625rem; box-shadow: 0 1.5rem 3.125rem -2.125rem rgba(18,20,23,.35); }
.korak-naslov { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1.375rem 0 0; font: 700 clamp(1.25rem, 1.9vw, 1.5625rem)/1.15 var(--font-naslov); letter-spacing: -.03em; text-align: center; }
.korak-br { flex: none; display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--akcent); color: #fff; font: 700 1.125rem var(--font-naslov); letter-spacing: 0; }
.kako-traka { display: grid; justify-items: center; gap: 1.375rem; margin-top: clamp(2rem, 4.5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem; border-radius: 1.75rem; background: var(--kamen); }
.kako-prednosti { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem clamp(1.25rem, 4vw, 3.5rem); list-style: none; margin: 0; padding: 0; }
.kako-prednosti li { display: inline-flex; align-items: center; gap: 0.625rem; font: 600 clamp(1rem, 1.4vw, 1.1875rem) var(--font); color: var(--tinta); }
.kako-prednosti .ik { width: 1.375rem; height: 1.375rem; color: var(--akcent-tamni); stroke-width: 2.6; flex: none; }
.kako-gumb { min-height: 3.375rem; padding: 0 1.875rem; font-size: 1.03125rem; }
@media (max-width: 1000px) { .koraci .korak-prizor { height: 14.375rem; } }
@media (max-width: 720px) { .kako-prednosti { flex-direction: column; align-items: flex-start; } .kako-gumb { width: 100%; } .koraci { gap: 1.875rem; } }

/* 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: 7.8125rem; right: calc(clamp(1.25rem, 3vw, 2.75rem) / -2 - 1.25rem); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff var(--strelica-uk, none) center / 1.125rem no-repeat; border: 1.5px solid var(--crta); box-shadow: 0 0.5rem 1.25rem -0.625rem 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='%23e0531f' 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: 2.75rem; height: 2.75rem; font-size: 1.25rem; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(224,83,31,.7); }
.korak-naslov { gap: 0.875rem; margin-top: 1.625rem; font-size: clamp(1.3125rem, 2vw, 1.75rem); }
.kako-traka { grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; gap: 1.5rem 2.5rem; padding: clamp(1.375rem, 2.6vw, 2rem) clamp(1.375rem, 3vw, 2.5rem); }
.kako-prednosti { justify-content: flex-start; }
.kako-prednosti li { gap: 0.75rem; }
.kako-prednosti li i { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--akcent); }
.kako-prednosti li i .ik { width: 0.9375rem; height: 0.9375rem; 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: 1.625rem; height: 1.625rem; } }
@media (min-width: 1600px) { .koraci > li:not(:last-child)::after { top: 8.4375rem; } }

/* ---- Kako do meštra: dorada */
.koraci .korak-naslov { margin: 1.75rem 0 0; color: var(--tinta); font: 700 clamp(1.375rem, 2.1vw, 1.8125rem)/1.15 var(--font-naslov); letter-spacing: -.035em; }
.koraci .korak-prizor { background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%); height: 16.875rem; }
.kp-tel { display: flex; align-items: center; gap: 0.5rem; margin: 2px 0 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: var(--kamen); font-size: 0.9375rem; }
.kp-tel .ik { width: 1rem; height: 1rem; color: var(--akcent-tamni); flex: none; }
.kp-tel b { font: 700 1rem var(--font); letter-spacing: .01em; }
.kp-poziv .kp-kartica { max-width: 20.625rem; padding: 1rem; }
.koraci > li:not(:last-child)::after { top: 8.4375rem; }
.kako-traka { background: linear-gradient(135deg, #f4f2ee 0%, #efece6 100%); }
/* postupno otkrivanje pri skrolanju */
.js-anim .koraci > li { opacity: 0; transform: translateY(1.375rem); 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(1.125rem); 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: 15rem; } }
@media (min-width: 1600px) { .koraci .korak-prizor { height: 19.375rem; } .koraci > li:not(:last-child)::after { top: 9.6875rem; } }


/* ======================================================================
   PODNOŽJE (nova verzija): cijelom širinom, mirno, svijetli kamen — nije još jedna kartica
   ====================================================================== */
.podnozje { margin-top: clamp(0.5rem, 2vw, 1.75rem); padding: 0; background: transparent; }
.str-naslovna .podnozje { margin-top: 0; }
.pod-ploca { border-radius: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem) 0 0; padding: clamp(2.75rem, 6vw, 5.5rem) 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: 1.375rem 0 1.625rem; color: var(--tinta); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.pod-kontakt { margin: 0; gap: 0.875rem; }
.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: 1.5rem; }
.pod-ploca h3 { color: #8a8d93; margin-bottom: 1.125rem; }
.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-tamni); }
.pod-dno { margin-top: clamp(2.75rem, 6vw, 5.25rem); padding: 1.375rem 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-tamni); }
.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: 2.5rem; } .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: 2.625rem; height: 2.625rem; 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: 1.125rem; height: 1.125rem; transform: rotate(-90deg); stroke-width: 2.2; }
.pod-vrh:hover { transform: translateY(-0.1875rem); 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: 2.5rem; }
  .pod-stupci { gap: 1.375rem 1rem; }
  .pod-ploca h3 { margin-bottom: 0.5rem; }
  .pod-slogan { margin: 1.125rem 0 1.25rem; font-size: 1.5rem; }
  .pod-dno { margin-top: 2rem; padding: 1.125rem 0; gap: 0.375rem 1rem; }
}

.pod-ploca { padding-bottom: 0.5rem; }
.pod-dno { padding-bottom: 1.25rem; }

/* 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: 1.5rem; }
.pod-kontakt-gumb { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.375rem; height: 3rem; padding: 0 1.5rem; border: 1.5px solid var(--tinta); border-radius: 62.4375rem; color: var(--tinta); font-weight: 650; font-size: 1rem; text-decoration: none; transition: background .25s, color .25s; }
.pod-kontakt-gumb .ik { width: 1.0625rem; height: 1.0625rem; transition: transform .3s var(--ease); }
.pod-kontakt-gumb:hover { background: var(--tinta); color: #fff; }
.pod-kontakt-gumb:hover .ik { transform: translateX(0.1875rem); }
.pod-bez-kolacica { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: #6e7178; font-size: 0.875rem; text-decoration: none; }
.pod-bez-kolacica i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #e6f5ec; color: #1f8a4c; flex: none; }
.pod-bez-kolacica i .ik { width: 0.75rem; height: 0.75rem; 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: 1.375rem 1rem; }
  .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: 0.5rem; }
.str-popis .jos-mreza.indeks-mreza { grid-template-columns: repeat(auto-fill, minmax(10rem, 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(72.5rem, 100%); padding: 1.5rem 1.75rem 1.125rem; max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
.mdj-trazi { position: relative; display: flex; align-items: center; margin-bottom: 1.375rem; }
.mdj-trazi .ik { position: absolute; left: 1.125rem; width: 1.25rem; height: 1.25rem; color: var(--prigušeno); pointer-events: none; }
.mdj-trazi input { width: 100%; height: 3.375rem; padding: 0 1.125rem 0 3rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: var(--kamen); font: inherit; font-size: 1.03125rem; 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 0.25rem var(--akcent-svijetli); }
.mdj-naslov { margin: 0 0 0.75rem; font: 700 0.75rem 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: 0.75rem; }
.mdj-plocica { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.875rem 0.5rem 0.875rem; border-radius: 1.25rem; 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: 5.25rem; height: 5.25rem; mix-blend-mode: multiply; transition: transform .45s var(--ease); }
.mdj-plocica b { font: 700 1rem/1.2 var(--font-naslov); letter-spacing: -.02em; }
.mdj-plocica:hover, .mdj-plocica:focus-visible { transform: translateY(-0.1875rem); border-color: var(--akcent); box-shadow: 0 1.125rem 1.875rem -1.25rem rgba(224,83,31,.6); outline: none; }
.mdj-plocica:hover img, .mdj-plocica:focus-visible img { transform: scale(1.08) rotate(-2deg); }
.mdj-desno { margin-top: 1.375rem; padding-top: 1.125rem; border-top: 1px solid var(--crta); }
.mdj-popis { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 0.5rem; }
.mdj-popis li { break-inside: avoid; }
.mdj-popis li[hidden] { display: none; }
.mdj-popis a { display: block; padding: 0.4375rem 0.75rem; border-radius: 0.625rem; font-size: 0.96875rem; 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: 0.625rem 0.25rem 0; color: var(--prigušeno); font-size: 0.9375rem; }
.mdj-prazno a { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--tinta); font-weight: 650; }
.mdj-prazno .ik { width: 0.9375rem; height: 0.9375rem; }
.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: 0.875rem; padding: 0.75rem 0.25rem 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: 4.5rem; height: 4.5rem; } }
@media (max-height: 820px) { .mega-dj { padding-top: 1.125rem; } .mdj-trazi { margin-bottom: 1rem; } .mdj-plocica img { width: 4.25rem; height: 4.25rem; } .mdj-plocica { padding: 0.625rem 0.375rem; } .mdj-popis a { padding: 0.3125rem 0.75rem; } .mdj-desno { margin-top: 1rem; padding-top: 0.875rem; } }
@media (min-width: 1600px) { .mega-dj { width: min(85rem, 100%); padding: 1.875rem 2.125rem 1.375rem; } .mdj-trazi input { height: 3.75rem; font-size: 1.125rem; } .mdj-plocica img { width: 6.5rem; height: 6.5rem; } .mdj-plocica b { font-size: 1.125rem; } .mdj-popis a { font-size: 1.0625rem; padding: 0.5rem 0.875rem; } }
@media (min-width: 1920px) { .mega-dj { width: min(97.5rem, 100%); } .mdj-plocica img { width: 7.5rem; height: 7.5rem; } .mdj-plocica b { font-size: 1.21875rem; } .mdj-popis a { font-size: 1.125rem; } }

/* ---- 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: 4rem; }
  .koraci > li { display: flex; flex-direction: column; }
  .koraci .korak-naslov { order: -1; justify-content: flex-start; margin: 0 0 0.875rem; font-size: 1.375rem; text-align: left; }
  .korak-br { width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; }
  .koraci .korak-prizor { height: auto; min-height: 13.75rem; }
  .koraci > li:not(:last-child)::after { display: block !important; top: auto; right: auto; left: 50%; bottom: -3.25rem; width: 2.375rem; height: 2.375rem; 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(14.375rem, 24vw, 21.25rem)); gap: clamp(0.625rem, 1.2vw, 1.125rem); }
.mz { position: relative; display: block; overflow: hidden; border-radius: clamp(1.25rem, 2vw, 1.875rem); 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(1rem, 1.8vw, 1.625rem); right: 4rem; bottom: clamp(1rem, 1.8vw, 1.625rem); display: grid; gap: 0.1875rem; }
.mz-tekst strong { font: 700 clamp(1.125rem, 1.6vw, 1.4375rem)/1.15 var(--font-naslov); letter-spacing: -.025em; }
.mz-tekst small { font-size: clamp(0.875rem, 1.1vw, 0.96875rem); color: rgba(255,255,255,.82); }
.mz-velika .mz-tekst strong { font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.035em; }
.mz-velika .mz-tekst small { font-size: clamp(0.9375rem, 1.25vw, 1.0625rem); }
.mz-str { position: absolute; right: clamp(0.875rem, 1.6vw, 1.375rem); bottom: clamp(0.875rem, 1.6vw, 1.375rem); display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); transition: background .3s, transform .45s var(--ease); }
.mz-str .ik { width: 1.125rem; height: 1.125rem; 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: 0.1875rem solid var(--akcent); outline-offset: 0.1875rem; }
/* 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: 11.25rem; 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(1rem, 2.5vw, 2rem); }
.ist-glava { margin-bottom: clamp(1.25rem, 2.6vw, 2.125rem); }
/* 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(17.5rem, 52vw, 26.25rem) repeat(2, clamp(12.5rem, 34vw, 17.5rem)); }
  .mz-velika { grid-row: auto; grid-column: 1 / -1; }
}
/* mobitel: listanje, kartice u 4:5 */
@media (max-width: 720px) {
  .ist-mozaik { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--rub) * -1); padding: 0 var(--rub) 0.25rem; 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: 1.5rem; }
}
/* postupno otkrivanje */
.js-anim .ist-mozaik > .mz { opacity: 0; transform: translateY(1.25rem); 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, 23.75rem); } }

/* =====================================================================
   HITNO — traka, gumbi, obrazac, praćenje, odgovor obrtnika, dežurstvo
   ===================================================================== */
:root { --hitno: #d4261c; --hitno-tamni: #b01c13; --hitno-svijetli: #fdecea; }
.hitna-tocka { position: relative; flex: none; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--hitno); }
.hitna-tocka::after { content: ''; position: absolute; inset: -0.25rem; border-radius: 50%; border: 2px solid var(--hitno); opacity: 0; animation: hitno-puls 1.8s ease-out infinite; }
.hitna-tocka.ugasena { background: #b9b5ad; } .hitna-tocka.ugasena::after { display: none; }
@keyframes hitno-puls { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }


.kap-hitno { display: inline-flex; align-items: center; gap: 0.5625rem; height: 3rem; padding: 0 1.25rem; border-radius: 62.4375rem; background: var(--hitno); color: #fff; font-weight: 700; font-size: 0.96875rem; text-decoration: none; transition: background .25s, transform .25s var(--ease); }
.kap-hitno:hover { background: var(--hitno-tamni); } .kap-hitno:active { transform: scale(.97); }
.kap-hitno .hitna-tocka { background: #fff; } .kap-hitno .hitna-tocka::after { border-color: #fff; }
@media (max-width: 960px) { .kap-hitno { height: 2.625rem; padding: 0 1rem; font-size: 0.90625rem; } }
@media (max-width: 380px) { .kap-hitno { padding: 0 0.75rem; } }

.mob-hitno { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.125rem; padding: 1rem 1.125rem; border-radius: 1.125rem; background: var(--hitno); color: #fff; text-decoration: none; }
.mob-hitno > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mob-hitno b { font-family: var(--font-naslov); font-size: 1.125rem; line-height: 1.2; } .mob-hitno small { opacity: .85; font-size: 0.84375rem; }
.mob-hitno .hitna-tocka { background: #fff; } .mob-hitno .hitna-tocka::after { border-color: #fff; }
.mob-hitno i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }


/* stranica /hitno */
.hitno-sekcija { padding: clamp(1.75rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem); }
.okvir.hitno-okvir { max-width: 47.5rem; }
.hitno-oznaka { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.84375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hitno); }
.hitno-glava { display: grid; gap: 0.875rem; margin-bottom: 1.75rem; }
.hitno-glava h1, .hitno-status h1, .ho h1, .dez h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); }
.hitno-uvod { color: var(--prigušeno); font-size: clamp(1.03125rem, 2vw, 1.1875rem); max-width: 56ch; }
.hitno-uvod b { color: var(--tinta); }

.hitno-forma { display: grid; gap: 0.875rem; }
.hf-korak { margin: 0; padding: clamp(1.125rem, 3vw, 1.75rem); border: 1px solid var(--crta); border-radius: 1.5rem; background: #fff; display: grid; gap: 0.875rem; min-width: 0; }
.hf-korak legend { float: left; width: 100%; padding: 0; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-naslov); font-weight: 700; font-size: 1.3125rem; letter-spacing: -.01em; }
.hf-korak legend + * { clear: both; }
.hf-br { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--tinta); color: #fff; font: 700 0.875rem var(--font); flex: none; }

.hv-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.625rem; }
.hv-plocica { position: relative; display: block; cursor: pointer; }
.hv-plocica input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hv-kutija { display: grid; justify-items: center; align-content: start; gap: 0.25rem; height: 100%; padding: 0.875rem 0.625rem 0.875rem; border-radius: 1.125rem; border: 2px solid var(--crta); background: var(--kamen); text-align: center; transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s; }
.hv-kutija img { width: 4.75rem; height: 4.75rem; object-fit: contain; mix-blend-mode: multiply; }
.hv-kutija b { font-family: var(--font-naslov); font-size: 1.1875rem; line-height: 1.1; }
.hv-kutija small { font-size: 0.8125rem; line-height: 1.3; color: var(--prigušeno); }
.hv-plocica:hover .hv-kutija { border-color: #cfcac1; transform: translateY(-2px); }
.hv-plocica input:checked + .hv-kutija { border-color: var(--hitno); background: var(--hitno-svijetli); box-shadow: 0 0.625rem 1.625rem -0.875rem rgba(212,38,28,.55); }
.hv-plocica input:focus-visible + .hv-kutija { outline: 2px solid var(--hitno); outline-offset: 0.1875rem; }
.hv-upozorenje { padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: #fff4d6; color: #5c4200; font-size: 0.9375rem; }

.hf-lokacija { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.5rem; padding: 0 1.25rem; border-radius: 1rem; border: 2px dashed #cfcac1; background: var(--kamen); font-weight: 650; font-size: 1.03125rem; transition: border-color .2s, background .2s; }
.hf-lokacija:hover { border-color: var(--tinta); }
.hf-lokacija.gotovo { border-style: solid; border-color: #1f8f4e; background: #eaf7ef; color: #14673a; }
.hf-ili { display: flex; align-items: center; gap: 0.75rem; color: var(--prigušeno); font-size: 0.875rem; }
.hf-ili::before, .hf-ili::after { content: ''; flex: 1; height: 1px; background: var(--crta); }
.hf-polje { display: grid; gap: 0.375rem; font-size: 0.90625rem; font-weight: 600; }
.hf-polje em { font-style: normal; font-weight: 400; color: var(--prigušeno); }
.hf-polje input, .hf-polje textarea { width: 100%; min-height: 3.375rem; padding: 0 1rem; border: 1.5px solid var(--crta); border-radius: 0.875rem; background: #fff; font: 500 1.0625rem var(--font); color: var(--tinta); }
.hf-polje textarea { padding: 0.875rem 1rem; min-height: 0; resize: vertical; }
.hf-polje input:focus, .hf-polje textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 0.25rem rgba(18,20,23,.08); }
.hf-stanje { font-size: 0.875rem; color: var(--prigušeno); }
.hf-napomena { font-size: 0.84375rem; color: var(--prigušeno); text-align: center; }
.hf-napomena a { text-underline-offset: 0.1875rem; }

.hitno-gumb { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.875rem; padding: 0 1.875rem; border: 0; border-radius: 62.4375rem; background: var(--hitno); color: #fff; font: 700 1.1875rem var(--font-naslov); letter-spacing: -.005em; text-decoration: none; cursor: pointer; box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(212,38,28,.7); transition: background .25s, transform .25s var(--ease), box-shadow .25s; }
.hitno-gumb:hover { background: var(--hitno-tamni); } .hitno-gumb:active { transform: scale(.98); }
.hitno-gumb:disabled { opacity: .6; cursor: wait; }
.hitno-gumb .hitna-tocka { background: #fff; } .hitno-gumb .hitna-tocka::after { border-color: #fff; }
.hitno-gumb.mali { min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; box-shadow: none; }
.hitno-112 { margin-top: 1.75rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--kamen); color: var(--prigušeno); font-size: 0.9375rem; text-align: center; }
.hitno-112 a { color: var(--tinta); font-weight: 700; }

/* praćenje */
.hitno-status { display: grid; gap: 1.125rem; justify-items: center; text-align: center; }
.hs-trazi, .hs-ok, .hs-nitko { display: grid; justify-items: center; gap: 1rem; width: 100%; }
.hs-pod { color: var(--prigušeno); font-size: 1.125rem; max-width: 46ch; }
.hs-odbrojavanje { min-height: 1.5em; font-size: 0.90625rem; color: var(--prigušeno); font-variant-numeric: tabular-nums; }
.hs-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-top: 0.375rem; }
.radar { position: relative; width: 9.375rem; height: 9.375rem; margin: 0.5rem 0 0.375rem; }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hitno); opacity: 0; animation: radar 2.7s cubic-bezier(.2,.6,.3,1) infinite; }
.radar i:nth-child(2) { animation-delay: .9s; } .radar i:nth-child(3) { animation-delay: 1.8s; }
.radar span { position: absolute; inset: 3.125rem; border-radius: 50%; background: var(--hitno); box-shadow: 0 0 0 0.625rem var(--hitno-svijetli); }
@keyframes radar { 0% { transform: scale(.34); opacity: .85; } 100% { transform: scale(1); opacity: 0; } }
.hs-kvacica { display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: #1f8f4e; color: #fff; box-shadow: 0 0 0 0.75rem #e3f4ea; animation: hs-pop .5s var(--ease); }
.hs-kvacica svg { width: 2.625rem; height: 2.625rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hs-pop { from { transform: scale(.4); opacity: 0; } }
.hs-majstor { display: grid; gap: 2px; padding: 1rem 1.75rem; border-radius: 1.25rem; background: var(--kamen); }
.hs-majstor b { font-family: var(--font-naslov); font-size: 1.5rem; } .hs-majstor span { color: var(--prigušeno); }
.hs-rezerva { display: grid; gap: 0.625rem; width: 100%; text-align: left; }
.hs-rezerva li { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--crta); border-radius: 1.125rem; background: #fff; }
.hs-rezerva li > div { display: grid; min-width: 0; } .hs-rezerva b { font-size: 1.0625rem; } .hs-rezerva span { font-size: 0.875rem; color: var(--prigušeno); }

/* obrtnik */
.ho, .dez { display: grid; gap: 1.25rem; }
.ho-poziv-blok, .ho-ok, .ho-info { display: grid; gap: 1.125rem; }
.ho-podaci { display: grid; gap: 0; border: 1px solid var(--crta); border-radius: 1.25rem; overflow: hidden; }
.ho-podaci li { display: grid; grid-template-columns: 5.25rem 1fr; gap: 0.875rem; padding: 0.875rem 1.125rem; border-top: 1px solid var(--crta); }
.ho-podaci li:first-child { border-top: 0; } .ho-podaci span { color: var(--prigušeno); font-size: 0.90625rem; padding-top: 2px; } .ho-podaci b { font-weight: 600; }
.ho-akcije { display: grid; grid-template-columns: 2fr 1fr; gap: 0.625rem; } .ho-akcije .gumb { min-height: 3.875rem; font-size: 1.0625rem; }
.ho-poziv { width: 100%; font-size: 1.5rem; }
.ho-ok .pr-kvacica { width: 4rem; height: 4rem; } .ho-ok .pr-kvacica .ik { width: 1.875rem; height: 1.875rem; }
.dez-natpis { font-weight: 700; margin-top: 0.375rem; }
.dez-tipke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; } .dez-tipke .gumb { min-height: 3.75rem; font-size: 1.125rem; padding: 0; }
.dez-gasi { justify-self: start; }

@media (max-width: 480px) {
  .hv-mreza { grid-template-columns: 1fr 1fr; } .hv-kutija { padding: 0.75rem 0.5rem; } .hv-kutija img { width: 4rem; height: 4rem; }
  .hitno-gumb { width: 100%; } .hs-akcije .hitno-gumb { width: 100%; } .ho-akcije { grid-template-columns: 1fr; }
  .ho-podaci li { grid-template-columns: 1fr; gap: 2px; } .hs-rezerva li { flex-wrap: wrap; } .hs-rezerva .hitno-gumb { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hitna-tocka::after, .radar i { animation: none; } .radar i { opacity: .35; } }
@media (max-width: 480px) {
  .hv-plocica:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hv-plocica:last-child:nth-child(odd) .hv-kutija { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 0.875rem; align-items: center; padding: 0.625rem 0.875rem; }
  .hv-plocica:last-child:nth-child(odd) .hv-kutija img { grid-row: span 2; width: 3.5rem; height: 3.5rem; }
}
@media (max-width: 340px) { .kap-hitno { height: 2.375rem; padding: 0 0.6875rem; font-size: 0.84375rem; gap: 0.375rem; } }  /* Hitno je uvijek vidljivo (crne trake više nema) */

.nav-link { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1200px) {
  .logo-img { height: 2.875rem; margin-top: -0.25rem; margin-bottom: -0.375rem; }
  .glavni-nav { gap: 0; } .nav-link { padding-left: 0.625rem; padding-right: 0.625rem; font-size: 0.9375rem; }
  .kap-hitno { padding: 0 0.875rem; font-size: 0.90625rem; } .kap-cta { padding: 0 1rem 0 2.875rem; font-size: 0.90625rem; }
}

/* =====================================================================
   O NAMA
   ===================================================================== */
.on-hero { padding: clamp(2.5rem, 8vw, 6.5rem) 0 clamp(1.75rem, 5vw, 3.5rem); }
.on-hero .okvir { display: grid; gap: 1.25rem; justify-items: start; }
.on-hero h1 { font-size: clamp(2.375rem, 6.6vw, 5.25rem); max-width: 16ch; line-height: 1.02; }
.on-hero h1 span { color: var(--prigušeno); }
.on-uvod { max-width: 58ch; font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: var(--prigušeno); }
.on-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.375rem; }

.on-brojke ul { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--crta); }
.on-brojke li { display: grid; gap: 0.25rem; padding: clamp(1.25rem, 3vw, 2.125rem) clamp(0.875rem, 2vw, 1.75rem); border-left: 1px solid var(--crta); }
.on-brojke li:first-child { border-left: 0; padding-left: 0; }
.on-brojke b { font-family: var(--font-naslov); font-size: clamp(2.375rem, 5vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.on-brojke span { color: var(--prigušeno); font-size: 0.9375rem; }

.on-misija, .on-obrtnici { padding: clamp(3rem, 8vw, 7rem) 0; }
.on-dvije { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 6vw, 6rem); align-items: start; }
.on-dvije h2 { font-size: clamp(1.75rem, 4vw, 2.875rem); margin-top: 0.75rem; max-width: 18ch; }
.on-tekst { display: grid; gap: 1.125rem; font-size: clamp(1.03125rem, 1.6vw, 1.1875rem); color: #3b3f46; }
.on-tekst .gumb { margin-top: 0.25rem; }

.on-nacela { padding-bottom: clamp(3rem, 8vw, 7rem); }
.on-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; margin-top: 1.5rem; }
.on-kartice li { display: grid; align-content: start; gap: 0.625rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--kamen); }
.on-br { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--tinta); color: #fff; font: 700 0.9375rem var(--font); margin-bottom: 0.5rem; }
.on-kartice h3 { font-size: 1.4375rem; } .on-kartice p { color: var(--prigušeno); }

.on-hitno-kutija { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem); border-radius: 2rem; background: var(--hitno-svijetli); }
.on-hitno { padding-bottom: clamp(3rem, 8vw, 7rem); }
.on-hitno-kutija > div { display: grid; gap: 1rem; justify-items: start; }
.on-hitno-kutija h2 { font-size: clamp(1.875rem, 4.2vw, 3.125rem); } .on-hitno-kutija p { color: #5b2c27; max-width: 50ch; }
.on-koraci { display: grid; gap: 0.625rem; counter-reset: k; }
.on-koraci li { counter-increment: k; display: grid; grid-template-columns: 2.75rem 1fr; align-items: center; column-gap: 0.875rem; padding: 0.875rem 1.125rem; border-radius: 1.125rem; background: #fff; }
.on-koraci li::before { content: counter(k); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--hitno); color: #fff; font: 700 0.9375rem var(--font); }
.on-koraci b { font-family: var(--font-naslov); font-size: 1.1875rem; } .on-koraci li { color: var(--prigušeno); font-size: 0.9375rem; }

.on-obrtnici { background: var(--kamen); }
.on-kontakt { padding: clamp(3rem, 8vw, 6rem) 0; }
.on-kontakti { display: flex; flex-wrap: wrap; gap: 0.625rem 1.75rem; margin-top: 1.125rem; font-size: 1.125rem; }
.on-kontakti li { display: inline-flex; align-items: center; gap: 0.625rem; } .on-kontakti a { text-underline-offset: 0.1875rem; }
.on-pravno { margin-top: 1.125rem; color: var(--prigušeno); font-size: 0.90625rem; } .on-pravno a { text-underline-offset: 0.1875rem; }

@media (max-width: 860px) {
  .on-brojke ul { grid-template-columns: 1fr 1fr; } .on-brojke li:nth-child(3) { border-left: 0; padding-left: 0; } .on-brojke li:nth-child(n+3) { border-top: 1px solid var(--crta); }
  .on-dvije, .on-hitno-kutija { grid-template-columns: 1fr; } .on-kartice { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .on-akcije .gumb, .on-hitno-kutija .hitno-gumb { width: 100%; } .on-brojke li { padding-inline: 0.75rem; } .on-brojke b { font-size: 2.25rem; } }

@media (max-width: 520px) { .kap-ikona { display: none; } }  /* traži se u hamburger izborniku; novi logo je širi */

/* Hitno uz narančasti CTA: tamna ispuna s crvenom točkom, da se jasno razlikuje od narančaste */
.kap-hitno { background: var(--tinta); } .kap-hitno:hover { background: #000; }
.kap-hitno .hitna-tocka { background: #ff4a3d; } .kap-hitno .hitna-tocka::after { border-color: #ff6b5f; }

/* =====================================================================
   V2: tri staze, oznake majstora, filtri, projekti (ponude), stranica majstora
   ===================================================================== */
:root { --zeleno: #1f8f4e; --zeleno-tamno: #14673a; --zeleno-svijetlo: #e3f4ea; }
.tekst-gumb { padding: 0; border: 0; background: none; color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; cursor: pointer; }
.tekst-gumb:hover { color: var(--akcent-tamni); }
.sivo-tekst { color: var(--prigušeno); }
.ucitava { color: var(--prigušeno); }

/* ---------- oznake (dostupnost, dežurstvo, odaziv, cijena dolaska) */
.znacke { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.znacka-dost { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 1.625rem; padding: 2px 0.625rem; border-radius: 62.4375rem; font-size: 0.8125rem; font-weight: 650; line-height: 1.2; background: var(--kamen); color: #3b3f46; white-space: nowrap; }
.znacka-dost.slobodan { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.znacka-dost.slobodan::before { content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--zeleno); flex: none; }
.znacka-dost.zauzet { background: #f1efeb; color: var(--prigušeno); }
.znacka-dost.hitno { background: var(--hitno-svijetli); color: #8a160e; }
.znacka-dost.hitno .hitna-tocka { width: 0.4375rem; height: 0.4375rem; }
.znacka-dost.hitno .hitna-tocka::after { inset: -0.1875rem; }
.znacka-dost.nepoznato { background: #f1efeb; color: var(--prigušeno); }
.znacka-dost.info { background: #fff; color: #3b3f46; box-shadow: inset 0 0 0 1px var(--crta); }
.kartica .znacke { margin-top: 0.625rem; }
.obrt-hero .znacke { margin-top: 0.875rem; }
.obrt-hero .znacka-dost { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); }
.obrt-hero .znacka-dost.slobodan { background: rgba(31,143,78,.9); }
.obrt-hero .znacka-dost.slobodan::before { background: #b8f5cf; }
.obrt-hero .znacka-dost.hitno { background: rgba(212,38,28,.88); color: #fff; }
.obrt-hero .znacka-dost.hitno .hitna-tocka { background: #fff; } .obrt-hero .znacka-dost.hitno .hitna-tocka::after { border-color: #fff; }
.kartica-slika { position: relative; }
.kartica-km { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 62.4375rem; background: rgba(18,20,23,.82); color: #fff; font-size: 0.8125rem; font-weight: 650; }

/* ---------- filtri na popisima */
.filtri { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }
.filtar { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.625rem; padding: 0 1rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: #fff; font-size: 0.90625rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.filtar small { min-width: 1.375rem; padding: 1px 0.4375rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.78125rem; text-align: center; }
.filtar:hover:not(:disabled) { border-color: var(--tinta); }
.filtar[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtar[aria-pressed="true"] small { background: rgba(255,255,255,.18); }
.filtar:disabled { opacity: .45; cursor: not-allowed; }
.filtar .ik { width: 1.0625rem; height: 1.0625rem; }
.filtar .hitna-tocka { width: 0.5rem; height: 0.5rem; }
.filtar-tocka { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; flex: none; display: inline-block; }
.filtar-tocka.slobodan { background: var(--zeleno); box-shadow: 0 0 0 0.1875rem var(--zeleno-svijetlo); }
.filtri-stanje { min-height: 1.4em; margin-top: 0.625rem; color: var(--prigušeno); font-size: 0.90625rem; }
#filtri-prazno { margin-top: 0.5rem; }

/* ---------- naslovna: tri staze */
.staze { padding: clamp(0.5rem, 2vw, 1.25rem) 0 clamp(2.25rem, 6vw, 4.5rem); }
.staze-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.staza { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.5rem; height: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--radius); text-decoration: none; color: var(--tinta); background: var(--kamen); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.staza:hover { transform: translateY(-0.1875rem); box-shadow: 0 1.125rem 2.5rem -1.5rem rgba(18,20,23,.45); }
.staza-oznaka { display: inline-flex; align-items: center; gap: 0.5625rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.staza-oznaka .ik { width: 1rem; height: 1rem; }
.staza b { font: 700 clamp(1.375rem, 2.3vw, 1.75rem)/1.1 var(--font-naslov); letter-spacing: -.02em; }
.staza-tekst { color: var(--prigušeno); font-size: 0.96875rem; }
.staza-dno { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-top: 0.75rem; padding-top: 0.875rem; border-top: 1px solid rgba(18,20,23,.1); font-weight: 650; font-size: 0.9375rem; }
.staza-dno i { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--tinta); color: #fff; transition: transform .35s var(--ease); }
.staza:hover .staza-dno i { transform: translateX(0.1875rem); }
.staza-hitno { background: var(--tinta); color: #fff; }
.staza-hitno .staza-tekst { color: rgba(255,255,255,.72); }
.staza-hitno .staza-oznaka { color: #ff8a80; }
.staza-hitno .hitna-tocka { background: #ff4a3d; } .staza-hitno .hitna-tocka::after { border-color: #ff6b5f; }
.staza-hitno .staza-dno { border-color: rgba(255,255,255,.14); }
.staza-hitno .staza-dno i { background: var(--hitno); }
.staza-tjedan .staza-oznaka { color: var(--zeleno-tamno); }
.staza-projekt { background: var(--akcent-svijetli); }
.staza-projekt .staza-oznaka { color: var(--akcent-tamni); }
.staza-projekt .staza-dno { border-color: rgba(184,63,18,.16); }
.staza-projekt .staza-dno i { background: var(--akcent); }
@media (max-width: 860px) { .staze-mreza { grid-template-columns: 1fr; gap: 0.625rem; } .staza { grid-template-rows: none; } }

/* ---------- stranica obrta: poziv na ponude */
.obrt-ponude { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.375rem; padding: 1rem 1.125rem; border-radius: 1.125rem; background: var(--akcent-svijetli); text-decoration: none; color: var(--tinta); transition: background .2s; }
.obrt-ponude:hover { background: #fbdccd; }
.obrt-ponude > span { display: grid; gap: 0.1875rem; flex: 1; min-width: 0; }
.obrt-ponude b { font-family: var(--font-naslov); font-size: 1.125rem; }
.obrt-ponude small { color: #6b3b25; font-size: 0.875rem; line-height: 1.4; }
.obrt-ponude > .ik { flex: none; width: 1.375rem; height: 1.375rem; color: var(--akcent-tamni); }

/* ---------- zajedničko za tokove (projekt, stranica majstora) */
.tok-sekcija { padding: clamp(1.75rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem); }
.okvir.tok-okvir { max-width: 48.75rem; }
.tok-oznaka { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.84375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akcent-tamni); }
.tok-glava { display: grid; gap: 0.875rem; margin-bottom: 1.75rem; }
.tok-glava h1, .pjk-glava h1, .pjm h1, .mp-glava h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); text-wrap: balance; }
.tok-glava h1 span { color: var(--prigušeno); }
.tok-uvod { color: var(--prigušeno); font-size: clamp(1.03125rem, 2vw, 1.1875rem); max-width: 58ch; }
.tok-uvod a { color: var(--tinta); text-underline-offset: 0.1875rem; }
.tok-uvod .ik { width: 0.9375rem; height: 0.9375rem; vertical-align: -2px; }
.tok-koraci { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.tok-koraci li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.90625rem; font-weight: 600; }
.tok-koraci b { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--akcent); color: #fff; font-size: 0.8125rem; }
.tok-hitno { margin-top: 1.625rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--hitno-svijetli); color: #5b2c27; font-size: 0.9375rem; text-align: center; }
.tok-hitno a { color: var(--hitno-tamni); font-weight: 700; text-underline-offset: 0.1875rem; white-space: nowrap; }
.tok-hitno .ik { width: 0.9375rem; height: 0.9375rem; vertical-align: -2px; }

/* ---------- obrazac „Zatraži ponude“ */
.pj-forma .hf-br { background: var(--akcent); }
.pj-brzi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.pj-brzi-gumb { display: grid; justify-items: center; gap: 0.25rem; padding: 0.625rem 0.375rem; border: 2px solid var(--crta); border-radius: 1rem; background: var(--kamen); font-size: 0.84375rem; font-weight: 600; line-height: 1.2; text-align: center; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.pj-brzi-gumb img { width: 2.75rem; height: 2.75rem; object-fit: contain; mix-blend-mode: multiply; }
.pj-brzi-gumb:hover { border-color: #cfcac1; transform: translateY(-1px); }
.pj-brzi-gumb.odabrano { border-color: var(--akcent); background: var(--akcent-svijetli); }
.hf-polje select { width: 100%; min-height: 3.375rem; padding: 0 2.75rem 0 1rem; border: 1.5px solid var(--crta); border-radius: 0.875rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121417' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.125rem; font: 500 1.0625rem var(--font); color: var(--tinta); -webkit-appearance: none; appearance: none; }
.hf-polje select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 0.25rem rgba(18,20,23,.08); }
.hf-polje small { font-weight: 400; color: var(--prigušeno); font-size: 0.84375rem; }
.pj-brojac.dovoljno { color: var(--zeleno-tamno); }
.pj-slike { display: grid; gap: 0.625rem; }
.pj-slike-naslov { font-size: 0.90625rem; font-weight: 600; }
.pj-slike-naslov em { font-style: normal; font-weight: 400; color: var(--prigušeno); }
.pj-slike-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: 0.5rem; }
.pj-slike-mreza:empty { display: none; }
.pj-slike-mreza li { position: relative; aspect-ratio: 1; border-radius: 0.875rem; overflow: hidden; background: var(--kamen); }
.pj-slike-mreza img { width: 100%; height: 100%; object-fit: cover; }
.pj-slike-mreza button { position: absolute; top: 0.375rem; right: 0.375rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 0; border-radius: 50%; background: rgba(18,20,23,.75); color: #fff; }
.pj-slike-mreza button .ik { width: 1rem; height: 1rem; }
.pj-dodaj { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.75rem; padding: 0.875rem 1.125rem; border: 2px dashed #cfcac1; border-radius: 1rem; background: var(--kamen); cursor: pointer; transition: border-color .2s; }
.pj-dodaj:hover { border-color: var(--tinta); }
.pj-dodaj .ik { grid-row: span 2; width: 1.625rem; height: 1.625rem; }
.pj-dodaj span { font-weight: 650; }
.pj-dodaj small { color: var(--prigušeno); font-size: 0.84375rem; }
.pj-dodaj.radi { opacity: .6; pointer-events: none; }
.pj-dostupni { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; font-size: 0.9375rem; }
.pj-dostupni.ima { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.pj-dostupni.nema { background: #fff4d6; color: #5c4200; }
.pj-dostupni .ik { margin-top: 2px; }
.pj-grupa { display: grid; gap: 0.5rem; border: 0; }
.pj-grupa-naslov { font-size: 0.90625rem; font-weight: 600; }
.pj-izbor { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pj-pil { position: relative; display: block; cursor: pointer; }
.pj-pil input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pj-pil span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: #fff; font-size: 0.9375rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.pj-pil:hover span { border-color: #bdb8ae; }
.pj-pil input:checked + span { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.pj-pil input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
.pj-izbor-mali .pj-pil span { min-height: 2.375rem; padding: 0 0.8125rem; font-size: 0.875rem; }
.pj-red { gap: 0.75rem; }
.pj-privola { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--kamen); font-size: 0.90625rem; line-height: 1.45; cursor: pointer; }
.pj-privola input { width: 1.25rem; height: 1.25rem; margin: 1px 0 0; accent-color: var(--tinta); }
.pj-privola a { text-underline-offset: 0.1875rem; }
.greska-polje input, .greska-polje select, .greska-polje textarea, input.greska-polje { border-color: var(--hitno) !important; }
.pj-grupa.greska-polje .pj-pil span, .pj-privola.greska-polje, .pj-slike.greska-polje .pj-dodaj { border-color: var(--hitno); box-shadow: inset 0 0 0 1.5px var(--hitno); }
.pj-posalji { min-height: 3.875rem; font-size: 1.125rem; font-family: var(--font-naslov); }

/* ---------- korisnik: ponude */
.pjk { display: grid; gap: 0.875rem; }
.pjk-glava { display: grid; gap: 0.75rem; margin-bottom: 0.375rem; }
.pjk-napredak { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pjk-napredak li { padding: 0.5rem 0.875rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.90625rem; color: var(--prigušeno); }
.pjk-napredak b { color: var(--tinta); font-size: 1rem; }
.pjk-val { color: var(--prigušeno); font-size: 0.90625rem; }
.pjk-spremi { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.125rem; flex-wrap: wrap; margin: 0.375rem 0; padding: 0.875rem 1.125rem; border-radius: 1.125rem; border: 1px dashed #cfcac1; }
.pjk-spremi div { display: grid; gap: 2px; } .pjk-spremi small { color: var(--prigušeno); font-size: 0.875rem; }
.pjk-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.625rem; font-size: 0.90625rem; color: var(--prigušeno); }
.pjk-sort button { min-height: 2.25rem; padding: 0 0.875rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: #fff; font-size: 0.875rem; font-weight: 600; }
.pjk-sort button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pjk-ponude { display: grid; gap: 0.75rem; }
.pjk-ponuda { position: relative; display: grid; gap: 0.875rem; padding: clamp(1.125rem, 3vw, 1.625rem); border: 1px solid var(--crta); border-radius: 1.5rem; background: #fff; }
.pjk-ponuda.izabrana { border: 2px solid var(--zeleno); box-shadow: 0 1rem 2.5rem -1.75rem rgba(31,143,78,.7); }
.pjk-ponuda.prigusena { opacity: .55; }
.pjk-izabrana { position: absolute; top: -0.75rem; left: 1.25rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 62.4375rem; background: var(--zeleno); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.pjk-izabrana .ik { width: 0.9375rem; height: 0.9375rem; }
.pjk-tko { display: flex; align-items: center; gap: 0.875rem; }
.pjk-lice { display: grid; place-items: center; flex: none; width: 3.375rem; height: 3.375rem; border-radius: 1rem; overflow: hidden; background: var(--kamen); font: 700 1.125rem var(--font-naslov); }
.pjk-lice img { width: 100%; height: 100%; object-fit: cover; }
.pjk-tko > div { display: grid; gap: 2px; min-width: 0; }
.pjk-tko a { color: var(--tinta); text-decoration: none; }
.pjk-tko a:hover b { text-decoration: underline; text-underline-offset: 0.1875rem; }
.pjk-tko b { font-family: var(--font-naslov); font-size: 1.25rem; letter-spacing: -.01em; }
.pjk-tko small { color: var(--prigušeno); font-size: 0.875rem; }
.pjk-ponuda .znacke { margin-top: -0.25rem; }
.pjk-cijena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--kamen); }
.pjk-cijena b { font: 800 clamp(1.625rem, 4vw, 2.125rem)/1 var(--font-naslov); letter-spacing: -.03em; }
.pjk-cijena span { color: var(--prigušeno); font-size: 0.90625rem; }
.pjk-detalji { display: grid; gap: 0.5rem; margin: 0; }
.pjk-detalji > div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; }
.pjk-detalji dt { color: var(--prigušeno); font-size: 0.90625rem; }
.pjk-detalji dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.pjk-poruka { margin: 0; padding: 0.25rem 0 0.25rem 0.875rem; border-left: 0.1875rem solid var(--akcent); color: #3b3f46; font-style: italic; white-space: pre-line; }
.pjk-akcije { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pjk-cekanje { display: grid; justify-items: center; gap: 0.75rem; padding: 1.875rem 1.125rem; border-radius: 1.5rem; background: var(--kamen); text-align: center; color: var(--prigušeno); }
.pjk-tockice { display: flex; gap: 0.4375rem; }
.pjk-tockice i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--akcent); animation: pjk-skok 1.2s ease-in-out infinite; }
.pjk-tockice i:nth-child(2) { animation-delay: .15s; } .pjk-tockice i:nth-child(3) { animation-delay: .3s; }
@keyframes pjk-skok { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-0.4375rem); opacity: 1; } }
.pjk-upit { border: 1px solid var(--crta); border-radius: 1.125rem; padding: 0 1.125rem; }
.pjk-upit summary { padding: 0.875rem 0; font-weight: 650; cursor: pointer; }
.pjk-upit[open] { padding-bottom: 1.125rem; }
.pjk-upit .pjm-slike { margin-top: 0.875rem; }
.pjk-dno { display: flex; justify-content: center; padding-top: 0.5rem; }

/* ---------- majstor: upit i ponuda */
.pjm .ho-poziv-blok, .pjm .ho-info { gap: 1rem; }
.pjm-mjesta { padding: 0.625rem 0.875rem; border-radius: 0.75rem; background: var(--kamen); color: #3b3f46; font-size: 0.90625rem; }
.pjm-opis { white-space: pre-line; overflow-wrap: anywhere; }
.pjm-slike { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.875rem, 1fr)); gap: 0.5rem; }
.pjm-slike a { display: block; aspect-ratio: 1; border-radius: 0.875rem; overflow: hidden; background: var(--kamen); }
.pjm-slike img { width: 100%; height: 100%; object-fit: cover; }
.pjm-forma { display: grid; gap: 0.875rem; padding: clamp(1.125rem, 3vw, 1.625rem); border: 1px solid var(--crta); border-radius: 1.5rem; background: #fff; }
.pjm-forma h2 { font-size: 1.5rem; }
.pjm-cijena { display: grid; gap: 0.75rem; }
.pjm-euro { position: relative; display: block; }
.pjm-euro input { padding-right: 2.75rem !important; font-size: 1.375rem !important; font-weight: 700 !important; }
.pjm-euro i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--prigušeno); }
.hf-polje.ugaseno { opacity: .45; }
.pjm-posalji { min-height: 3.5rem; font-size: 1.0625rem; }
.pjm-drugo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.pjm-drugo .gumb.aktivno { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pjm-ploca { display: grid; gap: 0.75rem; padding: 1.125rem; border-radius: 1.25rem; background: var(--kamen); }
.pjm-poslana { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 1.125rem; background: var(--zeleno-svijetlo); }
.pjm-poslana > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pjm-poslana small { color: var(--zeleno-tamno); }
.pjm-kvacica { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--zeleno); color: #fff; flex: none; }
.pjm-izabran { justify-items: center; text-align: center; }
.pjm-izabran .ho-podaci { text-align: left; width: 100%; }
.pjm-panel { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.625rem; padding: 0.875rem 1.125rem; border: 1px solid var(--crta); border-radius: 1.125rem; text-decoration: none; color: var(--tinta); transition: border-color .2s; }
.pjm-panel:hover { border-color: var(--tinta); }
.pjm-panel > .ik { order: 2; margin-left: auto; }
.pjm-panel span { display: grid; gap: 2px; } .pjm-panel small { color: var(--prigušeno); font-size: 0.875rem; }
.kolege { display: grid; gap: 0.5rem; }
.kolege li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: #fff; }
.kolege li > span { display: grid; gap: 2px; min-width: 0; }
.kolege small { color: var(--prigušeno); font-size: 0.84375rem; }
.kolege .gumb { min-height: 2.5rem; padding: 0 1rem; flex: none; }
.ho-kolega-gumb { justify-self: start; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; }
.ho-kolega-gumb .ik { width: 0.9375rem; height: 0.9375rem; }

/* ---------- hitno: potvrda dogovora */
.ho-dogovor { display: grid; gap: 0.75rem; width: 100%; padding: clamp(1.125rem, 3vw, 1.5rem); border-radius: 1.375rem; background: var(--kamen); text-align: left; }
.ho-dogovor h2 { font-size: 1.375rem; }
.ho-dogovor.poslan p { color: #3b3f46; }
.ho-potvrda { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--prigušeno); font-weight: 600; }
.ho-potvrda.da { color: var(--zeleno-tamno); }
.hs-dogovor { display: grid; gap: 0.625rem; width: 100%; max-width: 32.5rem; padding: 1.125rem 1.25rem; border-radius: 1.25rem; border: 2px solid var(--tinta); background: #fff; text-align: left; }
.hs-dogovor.potvrden { border-color: var(--zeleno); }
.hs-dogovor-naslov { font-weight: 700; }
.hs-dogovor dl { display: grid; gap: 0.375rem; margin: 0; }
.hs-dogovor dl > div { display: grid; grid-template-columns: 5.625rem 1fr; gap: 0.625rem; }
.hs-dogovor dt { color: var(--prigušeno); } .hs-dogovor dd { margin: 0; font-weight: 600; }
.hs-potvrdjeno { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--zeleno-tamno); font-weight: 700; }

/* ---------- stranica majstora /m/:token */
.okvir.mp-okvir { max-width: 53.75rem; }
.mp { display: grid; gap: 0.875rem; }
.mp-glava { display: grid; gap: 0.75rem; margin-bottom: 0.625rem; }
.mp-kartica { display: grid; gap: 0.875rem; padding: clamp(1.125rem, 3vw, 1.75rem); border: 1px solid var(--crta); border-radius: 1.5rem; background: #fff; }
.mp-kartica.mp-ugaseno { background: var(--kamen); border-color: transparent; }
.mp-kartica-glava { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.875rem; }
.mp-kartica-glava h2 { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.4375rem; }
.mp-opis { color: var(--prigušeno); font-size: 0.96875rem; max-width: 64ch; }
.mp-opis.malo { font-size: 0.84375rem; }
.mp-sad { color: var(--tinta); }
.mp-tipke { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0.625rem; }
.mp-tipka { display: grid; align-content: center; gap: 0.1875rem; min-height: 4.75rem; padding: 0.75rem 1rem; border: 2px solid var(--crta); border-radius: 1.125rem; background: var(--kamen); text-align: left; transition: border-color .2s, background .2s; }
button.mp-tipka:hover { border-color: #bdb8ae; }
.mp-tipka b { font-family: var(--font-naslov); font-size: 1.09375rem; line-height: 1.15; }
.mp-tipka small { color: var(--prigušeno); font-size: 0.8125rem; }
.mp-tipka.aktivno { border-color: var(--zeleno); background: var(--zeleno-svijetlo); }
.mp-zauzet.aktivno { border-color: var(--tinta); background: #f1efeb; }
.mp-zauzet-red { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }
.mp-zauzet-red button { min-height: 2.125rem; padding: 0 0.75rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: #fff; font-size: 0.84375rem; font-weight: 600; }
.mp-zauzet-red button:hover { border-color: var(--tinta); }
.mp-ukloni { justify-self: start; font-size: 0.90625rem; }
.mp-forma { display: grid; gap: 0.75rem; }
.mp-forma .gumb { justify-self: start; }
.mp-red { display: grid; grid-template-columns: 12.5rem 1fr; gap: 0.75rem; }
.mp-upiti { display: grid; gap: 0.5rem; }
.mp-upiti a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--kamen); color: var(--tinta); text-decoration: none; }
.mp-upiti a > span:first-child { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mp-upiti small { color: var(--prigušeno); font-size: 0.84375rem; }
.mp-stanje { flex: none; padding: 0.1875rem 0.625rem; border-radius: 62.4375rem; background: #fff; font-size: 0.8125rem; font-weight: 650; color: var(--prigušeno); }
.mp-stanje.ceka { background: #fff4d6; color: #5c4200; } .mp-stanje.ok { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); } .mp-stanje.info { background: #fff; color: var(--tinta); }
.mp-brojke { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--crta); border-left: 1px solid var(--crta); border-radius: 1.125rem; overflow: hidden; }
.mp-brojke li { display: grid; gap: 2px; padding: 1rem 1.125rem; border-right: 1px solid var(--crta); border-bottom: 1px solid var(--crta); }
.mp-brojke b { font: 800 2rem/1 var(--font-naslov); letter-spacing: -.03em; }
.mp-brojke b small { font-size: 1.125rem; color: var(--prigušeno); font-weight: 700; }
.mp-brojke span { color: var(--prigušeno); font-size: 0.875rem; }
.mp-graf { width: 100%; height: 4.5rem; }
.mp-graf rect { fill: var(--akcent); } .mp-graf rect.nula { fill: var(--crta); }
.mp-odaziv { display: grid; gap: 0.375rem; }
.mp-odaziv p { display: grid; grid-template-columns: 8.125rem 1fr; gap: 0.75rem; font-size: 0.9375rem; }
.mp-odaziv p > span:first-child { color: var(--prigušeno); }
.mp-odaziv small { color: var(--prigušeno); }

@media (max-width: 640px) {
  .pj-brzi { grid-template-columns: repeat(2, 1fr); }
  .pj-brzi-gumb { grid-template-columns: 2.5rem 1fr; justify-items: start; align-items: center; text-align: left; padding: 0.5rem 0.625rem; column-gap: 0.5rem; }
  .pj-brzi-gumb img { width: 2.25rem; height: 2.25rem; }
  .pjk-detalji > div, .hs-dogovor dl > div { grid-template-columns: 1fr; gap: 0; }
  .pjk-akcije .gumb { flex: 1 1 100%; }
  .pjm-drugo { grid-template-columns: 1fr; }
  .mp-tipke { grid-template-columns: 1fr 1fr; } .mp-zauzet { grid-column: 1 / -1; }
  .mp-red { grid-template-columns: 1fr; }
  .mp-brojke { grid-template-columns: 1fr 1fr; }
  .mp-odaziv p { grid-template-columns: 1fr; gap: 0; }
  .pj-pil span { min-height: 2.625rem; padding: 0 0.875rem; font-size: 0.90625rem; }
  .kolege li { flex-wrap: wrap; } .kolege .gumb { width: 100%; }
}
@media (max-width: 380px) {
  .pj-brzi { grid-template-columns: 1fr 1fr; gap: 0.375rem; } .pj-brzi-gumb { font-size: 0.78125rem; grid-template-columns: 1.875rem 1fr; } .pj-brzi-gumb img { width: 1.875rem; height: 1.875rem; }
  .mp-tipke { grid-template-columns: 1fr; }
  .filtar { padding: 0 0.75rem; font-size: 0.84375rem; }
}
@media (prefers-reduced-motion: reduce) { .pjk-tockice i { animation: none; opacity: .7; } .staza:hover { transform: none; } }
@media (max-width: 640px) {
  .filtri { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--rub) * -1); padding: 2px var(--rub) 0.375rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filtri::-webkit-scrollbar { display: none; }
  .filtar { flex: none; }
  .filtri-stanje:empty { display: none; }
  .staza { padding: 1.125rem 1.25rem; gap: 0.375rem; } .staza-dno { margin-top: 0.375rem; padding-top: 0.75rem; }
}
.polje-poruka { grid-column: 1 / -1; margin: 0.375rem 0 0; color: #a02318; font-size: 0.875rem; font-weight: 600; }
.pj-privola .polje-poruka { margin-top: 0; }
@media (max-width: 420px) { .pjk-sort { gap: 0.3125rem; } .pjk-sort > span { display: none; } .pjk-sort button { padding: 0 0.6875rem; font-size: 0.84375rem; } }
.mp-brojke { gap: 1px; border: 1px solid var(--crta); background: var(--crta); }
.mp-brojke li { border: 0; background: #fff; align-content: space-between; gap: 0.375rem; }
.mp-brojke span { line-height: 1.3; } .mp-brojke em { display: block; font-style: normal; font-size: 0.78125rem; }
.mp-graf-okvir { display: grid; gap: 0.375rem; margin: 0; } .mp-graf-okvir figcaption { color: var(--prigušeno); font-size: 0.84375rem; }
.mp-odaziv p > span:last-child { min-width: 0; }
.mp-graf { border-bottom: 1px solid var(--crta); }
.pj-brzi-gumb { min-width: 0; } .pj-brzi-gumb span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 300px) {
  .pj-brzi { grid-template-columns: 1fr; }
  .hf-korak { padding: 0.875rem; }
  .tok-koraci li { font-size: 0.8125rem; }
}
.hitno-forma > *, .mp > *, .pjk > *, .ho > *, .ho-poziv-blok > * { min-width: 0; }
.pj-posalji, .pjm-posalji, .hitno-gumb, .pjk-akcije .gumb, .pjm-drugo .gumb, .pjm-panel { white-space: normal; text-align: center; }
@media (max-width: 300px) {
  .dez-tipke { grid-template-columns: 1fr 1fr; }
  .mp-brojke { grid-template-columns: 1fr; }
  .mp-kartica { padding: 1rem; }
}
.mp-kartica > *, .mp-upiti li { min-width: 0; }
.mp-upiti a { flex-wrap: wrap; } .mp-upiti a > .ik { margin-left: auto; }
@media (max-width: 300px) { .mp-upiti a > span:first-child { flex-basis: 100%; } }

/* =====================================================================
   ZA OBRTNIKE (/za-obrtnike)
   ===================================================================== */
.gumb-prozirni { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.gumb-prozirni:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.zo-hero { padding: clamp(2.25rem, 7vw, 6rem) 0 clamp(2.25rem, 6vw, 5rem); overflow: hidden; }
.zo-hero-mreza { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.75rem, 6vw, 6rem); align-items: center; }
.zo-hero-tekst { display: grid; gap: 1.375rem; justify-items: start; }
.zo-hero h1 { font-size: clamp(2.375rem, 6vw, 5rem); line-height: 1.02; max-width: 15ch; }
.zo-hero h1 span { display: block; margin-top: 0.625rem; color: var(--prigušeno); font-size: .52em; line-height: 1.15; letter-spacing: -.01em; max-width: 26ch; }
.zo-uvod { max-width: 56ch; font-size: clamp(1.0625rem, 1.9vw, 1.25rem); color: #3b3f46; }
.zo-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.zo-traka { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; font-size: 0.9375rem; font-weight: 600; color: #3b3f46; }
.zo-traka li { display: inline-flex; align-items: center; gap: 0.5rem; }
.zo-traka .ik, .zo-popis .ik, .zo-bez .ik { width: 1.25rem; height: 1.25rem; color: var(--zeleno); stroke-width: 2.4; flex: none; }
.zo-hero-slika { position: relative; justify-self: center; width: min(20rem, 100%); }
.zo-tel { margin: 0; display: grid; gap: 0.625rem; justify-items: center; }
.zo-tel img { width: 100%; height: auto; border-radius: 2.375rem; border: 0.625rem solid var(--tinta); box-shadow: 0 1.875rem 3.75rem -1.75rem rgba(18,20,23,.55); background: #fff; }
.zo-tel figcaption { font-size: 0.84375rem; color: var(--prigušeno); text-align: center; }
.zo-oblacic { position: absolute; left: -3rem; bottom: 18%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 1.125rem; background: #fff; box-shadow: 0 1.125rem 2.5rem -1.125rem rgba(18,20,23,.45); }
.zo-oblacic > span:last-child { display: grid; } .zo-oblacic b { font-size: 0.9375rem; } .zo-oblacic small { font-size: 0.8125rem; color: var(--prigušeno); }

.zo-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; counter-reset: none; }
.zo-k { display: grid; align-content: start; gap: 0.625rem; padding: clamp(1.375rem, 3vw, 2rem); border-radius: var(--radius); background: var(--kamen); }
.zo-k h3 { font-size: 1.5rem; } .zo-k p { color: var(--prigušeno); }
.zo-k-oznaka { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zeleno-tamno); }
.zo-k-hitno { background: var(--tinta); color: #fff; } .zo-k-hitno p { color: rgba(255,255,255,.72); } .zo-k-hitno .zo-k-oznaka { color: #ff8a80; }
.zo-k-hitno .hitna-tocka { background: #ff4a3d; } .zo-k-hitno .hitna-tocka::after { border-color: #ff6b5f; }
.zo-k-projekt { background: var(--akcent-svijetli); } .zo-k-projekt .zo-k-oznaka { color: var(--akcent-tamni); }

.zo-mob-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 6vw, 6rem); align-items: center; }
.zo-mob-tekst { display: grid; gap: 1.125rem; align-content: center; }
.zo-mob-tekst h2 { font-size: clamp(1.875rem, 4vw, 3rem); max-width: 16ch; }
.zo-popis { display: grid; gap: 0.75rem; }
.zo-popis li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 1.03125rem; line-height: 1.45; }
.zo-popis .ik { margin-top: 2px; }
.zo-mob-slike { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 35rem; justify-self: center; width: 100%; }
.zo-mob-slike.zo-jedna { grid-template-columns: 1fr; max-width: 18.125rem; }
.zo-obrnuto .zo-mob-slike { order: -1; }

.zo-koraci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.zo-koraci li { display: grid; align-content: start; gap: 0.625rem; padding: clamp(1.375rem, 3vw, 2rem); border-radius: var(--radius); background: #fff; }
.zo-koraci h3 { font-size: 1.4375rem; } .zo-koraci p { color: var(--prigušeno); } .zo-koraci a { color: var(--tinta); text-underline-offset: 0.1875rem; white-space: nowrap; }
.zo-br { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--akcent); color: #fff; font: 700 0.9375rem var(--font); margin-bottom: 0.25rem; }

.zo-paketi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; max-width: 61.25rem; }
.zo-paket { display: grid; align-content: start; gap: 0.875rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--kamen); }
.zo-paket h3 { font-size: 2rem; }
.zo-paket-oznaka { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); }
.zo-paket-pro { background: var(--tinta); color: #fff; } .zo-paket-pro .zo-paket-oznaka { color: #f28a5e; } .zo-paket-pro .zo-popis .ik { color: #8fe0ae; }
.zo-napomena { font-size: 0.875rem; color: rgba(255,255,255,.7); line-height: 1.45; }
.zo-bez { display: flex; align-items: flex-start; gap: 0.625rem; margin-top: 1.125rem; font-size: 1.03125rem; }
.zo-bez .ik { margin-top: 2px; }

.zo-kraj-kutija { display: grid; gap: 0.875rem; justify-items: start; padding: clamp(1.75rem, 5vw, 4rem); border-radius: 2rem; background: radial-gradient(90% 120% at 85% 0%, #ee6a35 0%, transparent 60%), var(--akcent); color: #fff; }
.zo-kraj-kutija h2 { font-size: clamp(1.75rem, 4vw, 3rem); max-width: 18ch; } .zo-kraj-kutija p { opacity: .9; max-width: 50ch; }

@media (max-width: 960px) {
  .zo-hero-mreza, .zo-mob-mreza { grid-template-columns: 1fr; }
  .zo-hero-slika { width: min(16.25rem, 70%); }
  .zo-oblacic { left: -1.5rem; }
  .zo-obrnuto .zo-mob-slike { order: 0; }
  .zo-kartice, .zo-koraci { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zo-paketi { grid-template-columns: 1fr; }
  .zo-akcije .gumb { width: 100%; }
  .zo-mob-slike { gap: 0.75rem; }
  .zo-tel img { border-width: 0.4375rem; border-radius: 1.75rem; }
  .zo-oblacic { left: 50%; transform: translateX(-50%); bottom: 8%; white-space: nowrap; }
}
.zo-oblacic { bottom: auto; top: 24%; }
@media (max-width: 640px) { .zo-oblacic { top: auto; bottom: -0.875rem; } .zo-hero-slika { margin-bottom: 1.125rem; } }
@media (max-width: 640px) { .zo-akcije { width: 100%; } }

/* ---------- potvrda broja kodom */
.kod-blok { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32.5rem; margin: 0 auto; text-align: center; }
.kod-ikona { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: var(--akcent-svijetli); color: var(--akcent-tamni); }
.kod-ikona svg { width: 2.25rem; height: 2.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kod-blok h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); }
.kod-demo { padding: 0.625rem 1rem; border-radius: 0.75rem; background: #fff4d6; color: #5c4200; font-size: 0.9375rem; }
.kod-demo-broj { font-size: 1.125rem; letter-spacing: .15em; }
.kod-forma { display: flex; gap: 0.625rem; width: 100%; max-width: 22.5rem; }
.kod-unos { flex: 1; min-width: 0; height: 4rem; border: 2px solid var(--crta); border-radius: 1rem; background: #fff; text-align: center; font: 700 1.875rem var(--font); letter-spacing: .4em; padding-left: .4em; color: var(--tinta); }
.kod-unos:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 0.25rem rgba(18,20,23,.08); }
.kod-forma .gumb { min-height: 4rem; padding: 0 1.5rem; }
.kod-dno { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.625rem; font-size: 0.9375rem; color: var(--prigušeno); }
.kod-dno a { color: var(--tinta); text-underline-offset: 0.1875rem; }
.kod-dno .tekst-gumb:disabled { color: var(--prigušeno); text-decoration: none; cursor: default; }
.kod-zasto { font-size: 0.84375rem; color: var(--prigušeno); max-width: 40ch; }
.kod-blok .pr-greska { width: 100%; max-width: 22.5rem; }
@media (max-width: 340px) { .kod-forma { flex-direction: column; } }
#hs-sadrzaj, #pjk-sadrzaj { width: 100%; min-width: 0; } .kod-unos { width: 0; }

/* =====================================================================
   SAVJETI (blog)
   ===================================================================== */
.sv-rubrike { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }
.sv-rubrike a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; font-size: 0.90625rem; font-weight: 600; text-decoration: none; color: var(--tinta); background: #fff; }
.sv-rubrike a:hover { border-color: var(--tinta); }
.sv-rubrike a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.sv-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr)); gap: 1.375rem; }
.sv-prvi { margin-bottom: 1.75rem; }
.sv-k { display: grid; gap: 0.875rem; text-decoration: none; color: var(--tinta); }
.sv-k-slika { display: block; aspect-ratio: 16 / 10; border-radius: 1.25rem; overflow: hidden; background: var(--kamen); }
.sv-k-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sv-k:hover .sv-k-slika img { transform: scale(1.04); }
.sv-k-bez { display: grid; place-items: center; width: 100%; height: 100%; background: #f1efeb; }
.sv-k-bez img { width: 34%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.sv-k-tekst { display: grid; gap: 0.375rem; }
.sv-k-tekst small { font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akcent-tamni); }
.sv-k-tekst strong { font: 700 1.3125rem/1.2 var(--font-naslov); letter-spacing: -.015em; }
.sv-k:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.1875rem; }
.sv-k-velika { grid-template-columns: 1.2fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.sv-k-velika .sv-k-slika { aspect-ratio: 16 / 10; }
.sv-k-velika strong { font-size: clamp(1.625rem, 3.2vw, 2.375rem); }

.sv-c-glava { display: grid; gap: 1rem; padding-top: clamp(1.5rem, 5vw, 3.5rem); padding-bottom: 1.5rem; max-width: 62.5rem; }
.sv-c-glava h1 { font-size: clamp(2rem, 5vw, 3.625rem); line-height: 1.05; text-wrap: balance; }
.sv-c-uvod { font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: #3b3f46; max-width: 60ch; }
.sv-c-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; color: var(--prigušeno); font-size: 0.90625rem; }
.sv-c-slika { margin: 0.5rem auto 0; } .sv-c-slika img { width: 100%; height: auto; max-height: 32.5rem; object-fit: cover; border-radius: 1.5rem; }
.sv-c-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; padding-top: 1.75rem; padding-bottom: clamp(3rem, 8vw, 6rem); }
.sv-c-tijelo { display: grid; gap: 1.75rem; max-width: 45rem; min-width: 0; }
.sv-ukratko { padding: 1.5rem 1.625rem; border-radius: 1.375rem; background: var(--akcent-svijetli); }
.sv-ukratko h2 { font-size: 1.375rem; margin-bottom: 0.75rem; }
.sv-ukratko ul { display: grid; gap: 0.5rem; }
.sv-ukratko li { position: relative; padding-left: 1.625rem; line-height: 1.5; }
.sv-ukratko li::before { content: ''; position: absolute; left: 0.25rem; top: .6em; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--akcent); }
.sv-tekst { display: grid; gap: 1rem; font-size: 1.09375rem; line-height: 1.7; color: #262a30; }
.sv-tekst h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-top: 1.125rem; scroll-margin-top: calc(var(--zaglavlje) + 1rem); }
.sv-tekst h3 { font-size: 1.3125rem; margin-top: 0.5rem; }
.sv-tekst ul, .sv-tekst ol { display: grid; gap: 0.5rem; padding-left: 1.5rem; }
.sv-tekst ul { list-style: disc; } .sv-tekst ol { list-style: decimal; }
.sv-tekst li::marker { color: var(--akcent-tamni); font-weight: 700; }
.sv-tekst a { color: var(--akcent-tamni); text-underline-offset: 0.1875rem; }
.sv-napomena { padding: 1rem 1.25rem; border-radius: 1rem; background: var(--kamen); border-left: 0.25rem solid var(--zeleno); }
.sv-napomena.upozorenje { background: var(--hitno-svijetli); border-left-color: var(--hitno); color: #5b2c27; }
.sv-faq { display: grid; gap: 0.625rem; } .sv-faq h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: 0.375rem; }
.sv-odricanje { font-size: 0.875rem; color: var(--prigušeno); } .sv-odricanje a { color: var(--tinta); }
.sv-c-strana { position: sticky; top: calc(var(--zaglavlje) + 1rem); display: grid; gap: 1rem; }
.sv-toc { padding: 1.25rem 1.375rem; border: 1px solid var(--crta); border-radius: 1.25rem; }
.sv-toc > p { font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); margin-bottom: 0.625rem; }
.sv-toc ol { display: grid; gap: 0.5rem; counter-reset: t; }
.sv-toc li { counter-increment: t; display: grid; grid-template-columns: 1.375rem 1fr; font-size: 0.9375rem; line-height: 1.35; }
.sv-toc li::before { content: counter(t); color: var(--prigušeno); font-weight: 600; }
.sv-toc a { color: var(--tinta); text-decoration: none; } .sv-toc a:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
.sv-toc-mob { display: none; }
.sv-cta { display: grid; gap: 0.625rem; justify-items: start; padding: 1.375rem; border-radius: 1.25rem; background: var(--kamen); }
.sv-cta p { color: #3b3f46; font-size: 0.96875rem; }
.sv-cta-oznaka { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78125rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akcent-tamni) !important; }
.sv-cta-naslov { font: 700 1.3125rem/1.2 var(--font-naslov) !important; color: var(--tinta) !important; }
.sv-cta-hitno { background: var(--tinta); } .sv-cta-hitno p { color: rgba(255,255,255,.75); } .sv-cta-hitno .sv-cta-naslov { color: #fff !important; } .sv-cta-hitno .sv-cta-oznaka { color: #ff8a80 !important; }
.sv-cta-hitno .hitna-tocka { background: #ff4a3d; } .sv-cta-hitno .hitna-tocka::after { border-color: #ff6b5f; }
.sv-cta-projekt { background: var(--akcent-svijetli); }
.sv-cta-dno { display: none; }
.sv-majstori { display: grid; gap: 0.625rem; padding: 1.25rem 1.375rem; border: 1px solid var(--crta); border-radius: 1.25rem; }
.sv-majstori ul { display: grid; gap: 0.25rem; }
.sv-majstori a { display: grid; padding: 0.5rem 0; text-decoration: none; color: var(--tinta); border-top: 1px solid var(--crta); }
.sv-majstori li:first-child a { border-top: 0; }
.sv-majstori small { color: var(--prigušeno); font-size: 0.84375rem; }

@media (max-width: 960px) {
  .sv-c-mreza { grid-template-columns: minmax(0, 1fr); }
  .sv-c-strana { position: static; }
  .sv-c-strana .sv-toc, .sv-c-strana > .sv-cta { display: none; }
  .sv-toc-mob { display: block; border: 1px solid var(--crta); border-radius: 1.125rem; }
  .sv-toc-mob summary { padding: 0.875rem 1.125rem; font-weight: 650; cursor: pointer; }
  .sv-toc-mob .sv-toc { border: 0; padding-top: 0; }
  .sv-cta-dno { display: grid; }
  .sv-k-velika { grid-template-columns: 1fr; }
}
.sv-c-glava { max-width: var(--sirina); } .sv-c-glava h1 { max-width: 24ch; } .sv-c-glava .sv-c-uvod { max-width: 62ch; }
.sv-toc ol { list-style: none; } .sv-toc li { display: block; } .sv-toc li::before { content: none; }
.sv-toc li { padding-left: 0.875rem; position: relative; } .sv-toc li::after { content: ''; position: absolute; left: 0; top: .55em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--akcent); }

/* ---------- QR naljepnica: stranica /q/:kod i oznaka izvora na obrascima */
.qr-str { display: grid; gap: 0.875rem; max-width: 35rem; margin: 0 auto; }
.qr-naslov { font-size: clamp(2.125rem, 7vw, 3.25rem); }
.qr-majstor { display: grid; gap: 0.875rem; padding: clamp(1.25rem, 4vw, 1.75rem); border: 1px solid var(--crta); border-radius: 1.5rem; background: #fff; }
.qr-tko { display: flex; align-items: center; gap: 0.875rem; }
.qr-tko h1 { font-size: clamp(1.625rem, 5vw, 2.125rem); line-height: 1.1; }
.qr-tko p { color: var(--prigušeno); }
.qr-majstor .znacke { margin-top: 0; }
.qr-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.qr-gumbi .gumb { min-height: 3.5rem; font-size: 1.0625rem; }
.qr-gumbi .gumb:only-child { grid-column: 1 / -1; }
.qr-hitno, .qr-ponude { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; border-radius: 1.25rem; text-decoration: none; }
.qr-hitno { background: var(--tinta); color: #fff; }
.qr-hitno .hitna-tocka { background: #ff4a3d; } .qr-hitno .hitna-tocka::after { border-color: #ff6b5f; }
.qr-hitno small { color: rgba(255,255,255,.75); }
.qr-ponude { background: var(--akcent-svijetli); color: var(--tinta); }
.qr-tjedan { background: var(--kamen); }
.qr-hitno > span:nth-child(2), .qr-ponude > span:first-child { display: grid; gap: 0.1875rem; flex: 1; min-width: 0; }
.qr-hitno b, .qr-ponude b { font: 700 1.1875rem/1.2 var(--font-naslov); }
.qr-hitno small, .qr-ponude small { font-size: 0.90625rem; line-height: 1.4; }
.qr-ponude small { color: #6b3b25; }
.qr-hitno > .ik, .qr-ponude > .ik { flex: none; width: 1.375rem; height: 1.375rem; }
.hitno-izvor { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.875rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--hitno-svijetli); color: #5b2c27; font-size: 0.96875rem; }
.hitno-izvor .hitna-tocka { margin-top: 0.375rem; }
.pj-izvor { background: var(--akcent-svijetli); color: #6b3b25; }
.mp-brojke-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .mp-brojke-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 340px) { .qr-gumbi { grid-template-columns: 1fr; } }
.qr-str > *, .qr-tko > div { min-width: 0; } .qr-tko h1 { overflow-wrap: anywhere; }
@media (max-width: 360px) { .qr-tko { flex-direction: column; align-items: flex-start; } .qr-majstor { padding: 1rem; } .qr-hitno, .qr-ponude { padding: 0.875rem 1rem; } }

/* ---------- „Napiši kako ti je“ */
.rz { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0.625rem; margin-bottom: 1.125rem; padding: clamp(1.125rem, 3vw, 1.625rem); border-radius: var(--radius); background: #fff; border: 1.5px solid var(--crta); box-shadow: 0 1.125rem 2.5rem -1.875rem rgba(18,20,23,.35); }
.rz-naslov { font: 700 clamp(1.375rem, 2.6vw, 1.75rem)/1.15 var(--font-naslov); letter-spacing: -.015em; }
.rz-uvod { color: var(--prigušeno); font-size: 0.96875rem; margin-top: -0.25rem; }
.rz-red { display: flex; gap: 0.625rem; align-items: stretch; }
.rz-red textarea { flex: 1; width: 100%; min-width: 0; min-height: 3.625rem; padding: 0.9375rem 1rem; border: 1.5px solid var(--crta); border-radius: 1rem; font: 500 1.0625rem/1.4 var(--font); color: var(--tinta); resize: vertical; background: var(--kamen); }
.rz-red textarea:focus { outline: none; border-color: var(--tinta); background: #fff; box-shadow: 0 0 0 0.25rem rgba(18,20,23,.08); }
.rz-red .gumb { min-height: 3.625rem; flex: none; }
.rz-rezultat { display: grid; gap: 0.75rem; padding-top: 0.375rem; }
.rz-glava { display: flex; align-items: center; gap: 0.875rem; }
.rz-glava img { width: 3.5rem; height: 3.5rem; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.rz-glava p { font-size: 1.125rem; line-height: 1.4; }
.rz-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.rz-akcije .gumb, .rz-akcije .hitno-gumb { white-space: normal; text-align: center; }
.rz-hitno { color: var(--hitno-tamni); }
.rz-opasnost { padding: 0.75rem 1rem; border-radius: 0.875rem; background: var(--hitno-svijetli); color: #5b2c27; border-left: 0.25rem solid var(--hitno); }
.rz-opasnost a { color: var(--hitno-tamni); font-weight: 700; white-space: nowrap; }
.rz-nije { color: #3b3f46; } .rz-nije a { color: var(--tinta); font-weight: 600; text-underline-offset: 0.1875rem; }
.rz-nije .ik { width: 0.9375rem; height: 0.9375rem; vertical-align: -2px; }
.rz-popunjeno { padding: 0.75rem 1rem; border-radius: 0.875rem; background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.rz-izbor { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.5rem; }
.rz-izbor a { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.875rem; background: var(--kamen); color: var(--tinta); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.rz-izbor img { width: 2.5rem; height: 2.5rem; object-fit: contain; mix-blend-mode: multiply; }
.rz-popuni { margin-bottom: 1.375rem; background: var(--kamen); border-color: transparent; box-shadow: none; }
.rz-popuni .rz-red textarea { background: #fff; }
@media (max-width: 640px) { .rz-red { flex-direction: column; } .rz { padding: 1rem; } .rz-red .gumb { width: 100%; } .rz-akcije > * { flex: 1 1 100%; } }

/* ---------- Podsjetnici „Moj dom“ (PLAN.md 23.4) */
#moj-dom { width: 100%; min-width: 0; text-align: left; justify-self: stretch; }
.md-ponuda { display: grid; gap: 0.875rem; margin-top: 0.375rem; padding: clamp(1.125rem, 3vw, 1.5rem); border-radius: var(--radius); background: var(--kamen); }
.md-glava { display: flex; gap: 0.875rem; align-items: flex-start; }
.md-ik { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #fff; }
.md-ik svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--akcent-tamni); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.md-glava h2 { font-size: 1.3125rem; line-height: 1.2; }
.md-glava p { margin-top: 0.25rem; color: #3b3f46; font-size: 0.96875rem; line-height: 1.45; }
.md-popis { display: grid; gap: 0.5rem; }
.md-red { padding: 0.75rem 0.875rem; border-radius: 1rem; background: #fff; min-width: 0; }
.md-red form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; }
.md-red form > b { flex: 1 1 8.75rem; font-size: 1.03125rem; }
.md-mjesec { display: flex; align-items: center; gap: 0.5rem; color: var(--prigušeno); font-size: 0.90625rem; }
.md-mjesec select, .pd-mjesec select { min-height: 2.75rem; padding: 0 0.75rem; border: 1.5px solid var(--crta); border-radius: 0.75rem; background: #fff; font: 600 0.96875rem var(--font); color: var(--tinta); }
.md-red .gumb { min-height: 2.75rem; white-space: normal; }
.md-ok { display: flex; gap: 0.75rem; align-items: flex-start; }
.md-ok > .ik { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 2px; color: var(--zeleno); }
.md-ok > span { display: grid; gap: 2px; min-width: 0; }
.md-ok small { color: var(--prigušeno); font-size: 0.90625rem; } .md-ok a { color: var(--tinta); font-weight: 600; text-underline-offset: 0.1875rem; }

.pd { display: grid; gap: 1rem; max-width: 38.75rem; margin: 0 auto; }
.pd-naslov { font-size: clamp(1.875rem, 6vw, 2.75rem); line-height: 1.08; }
.pd-majstor { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.pd-majstor > div { display: grid; gap: 2px; min-width: 0; }
.pd-majstor b { font: 700 1.1875rem/1.2 var(--font-naslov); } .pd-majstor small { color: var(--prigušeno); font-size: 0.90625rem; }
.pd-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.pd-akcije .gumb { white-space: normal; text-align: center; }
.pd-kartica { display: grid; gap: 0.875rem; padding: clamp(1.125rem, 4vw, 1.625rem); border: 1px solid var(--crta); border-radius: var(--radius); background: #fff; }
.pd-kartica h2 { font-size: 1.3125rem; }
.pd-postavke { background: var(--kamen); border-color: transparent; }
.pd-mjesec { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.pd-mjesec label { display: grid; gap: 0.375rem; font-size: 0.90625rem; color: var(--prigušeno); }
.pd-odjava { justify-self: start; color: var(--prigušeno); font-size: 0.9375rem; }
.pd-poslano { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); font-weight: 600; }
.pd-poslano .ik { flex: none; width: 1.25rem; height: 1.25rem; }
.pd-sitno { color: var(--prigušeno); font-size: 0.875rem; }

.mp-red-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.mp-red-3 select { width: 100%; }
.mp-pd-ok { padding: 0.625rem 0.875rem; border-radius: 0.75rem; background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); font-weight: 600; }
.mp-brojke-4 { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.mp-pd-kad { margin-bottom: -0.25rem; font-weight: 600; color: var(--tinta); }
.mp-pd-popis summary { cursor: pointer; font-weight: 650; padding: 0.25rem 0; }
.mp-pd-popis[open] summary { margin-bottom: 0.625rem; }
.mp-pd-red { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--kamen); }
.mp-pd-red > span:first-child { display: grid; gap: 2px; flex: 1 1 10rem; min-width: 0; }
@media (max-width: 640px) {
  .mp-red-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mp-red-3 > :first-child { grid-column: 1 / -1; }
  .pd-akcije > * { flex: 1 1 100%; }
}
@media (max-width: 360px) { .mp-red-3 { grid-template-columns: minmax(0, 1fr); } }
.md-mjesec select, .pd-mjesec select { padding-right: 2.375rem; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121417' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem; }

/* ---------- /m/: opis i fotografije, uklanjanje stranice */
.mp-galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.mp-galerija li { position: relative; aspect-ratio: 1; border-radius: 0.875rem; overflow: hidden; background: var(--kamen); }
.mp-galerija img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-prva, .mp-sl-gumb { position: absolute; left: 0.375rem; bottom: 0.375rem; padding: 0.1875rem 0.5625rem; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 650; }
.mp-prva { background: var(--tinta); color: #fff; }
.mp-sl-gumb { border: 0; background: rgba(255,255,255,.92); color: var(--tinta); cursor: pointer; }
.mp-sl-x { position: absolute; top: 0.375rem; right: 0.375rem; width: 2.125rem; height: 2.125rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); font-size: 1.3125rem; line-height: 1; cursor: pointer; }
.mp-dodaj { cursor: pointer; }
.mp-dodaj.ucitava-gumb { opacity: .7; pointer-events: none; }
.mp-slike { display: grid; gap: 0.25rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--crta); }
.mp-ukloni-str { margin-top: 0.5rem; padding: 0.875rem 0.25rem; color: var(--prigušeno); }
.mp-ukloni-str summary { cursor: pointer; font-size: 0.90625rem; text-decoration: underline; text-underline-offset: 0.1875rem; }
.mp-povuci { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; margin-top: 0.625rem; }
.mp-povuci .hf-polje { flex: 1 1 12.5rem; }
.mp-povuceno { padding: 0.875rem 1rem; border-radius: 1rem; background: var(--hitno-svijetli); color: #5b2c27; }

/* ponuda: količina i jedinica */
.pjm-kolicina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.125rem); gap: 0.625rem; align-items: end; }
.pjk-cijena .pjk-jedinica { flex-basis: 100%; font-weight: 650; color: var(--tinta); }

/* ---------- Ocjene */
#ocjena { width: 100%; min-width: 0; text-align: left; justify-self: stretch; }
.oc { display: grid; gap: 0.875rem; margin-top: 0.375rem; padding: clamp(1.125rem, 3vw, 1.5rem); border-radius: var(--radius); border: 1.5px solid var(--crta); background: #fff; }
.oc h2 { font-size: 1.375rem; line-height: 1.2; }
.oc-ishod { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oc-izbor { min-height: 2.875rem; padding: 0.5rem 1rem; border-radius: 62.4375rem; border: 1.5px solid var(--crta); background: #fff; font: 600 0.96875rem var(--font); color: var(--tinta); cursor: pointer; text-align: center; }
.oc-izbor:hover { border-color: var(--tinta); }
.oc-izbor[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.oc-forma { display: grid; gap: 0.75rem; }
.oc-zvjezdice { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border: 0; padding: 0; margin: 0; }
.oc-zvjezdice legend { font-weight: 650; margin-bottom: 0.25rem; padding: 0; }
.oc-zvjezdice label { position: relative; cursor: pointer; }
.oc-zvjezdice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.oc-zvjezdice label > span { display: block; font-size: 2.5rem; line-height: 1; padding: 2px 0.1875rem; color: #d9d5ce; transition: color .15s, transform .15s var(--ease); }
.oc-zvjezdice label.puna > span { color: #e8a317; }
.oc-zvjezdice label:hover > span { transform: scale(1.12); }
.oc-zvjezdice input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 0.375rem; }
.oc-opis { margin-left: 0.625rem; font-weight: 650; color: var(--prigušeno); }
.oc-napomena { color: var(--prigušeno); font-size: 0.875rem; }
.oc-forma .gumb { justify-self: start; white-space: normal; }
.oc-hvala p { display: flex; gap: 0.625rem; align-items: flex-start; }
.oc-hvala .ik { flex: none; width: 1.375rem; height: 1.375rem; color: var(--zeleno); margin-top: 2px; }
.znacka-dost.ocjena { background: #fff4d6; color: #5c4200; }
.znacka-dost.ocjena > span { color: #c98a0b; }
.znacka-dost.ocjena small { font-size: 0.75rem; opacity: .8; }
.zvjezdice { color: #e8a317; letter-spacing: 1px; white-space: nowrap; }
.zvjezdice > span { color: #d9d5ce; }
.ocjene { display: grid; gap: 0.625rem; margin: 0.375rem 0 1.125rem; }
.ocjene-sazetak { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; font-size: 1.0625rem; }
.ocjene-sazetak b { font: 800 1.875rem/1 var(--font-naslov); }
.ocjene-sazetak > span:last-child { color: var(--prigušeno); font-size: 0.9375rem; }
.ocjene-napomena { color: var(--prigušeno); font-size: 0.875rem; }
.ocjene-popis { display: grid; gap: 0.625rem; }
.ocjene-popis li { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--kamen); }
.ocjene-popis small { color: var(--prigušeno); font-size: 0.84375rem; }
@media (max-width: 640px) { .oc-ishod .oc-izbor { flex: 1 1 100%; } .oc-zvjezdice label > span { font-size: 2.75rem; } }
.znacka-dost.provjeren { background: #e3eefc; color: #12417a; }
.znacka-dost.provjeren .ik { width: 0.875rem; height: 0.875rem; }
.provjeren-blok { display: grid; gap: 0.25rem; margin: 0.375rem 0 1.125rem; padding: 0.875rem 1rem; border-radius: 1rem; background: #eef4fd; color: #1d3550; font-size: 0.9375rem; }
.provjeren-blok b { color: #12417a; }

/* ---------- lokalne stranice „djelatnost + mjesto“ */
.lk-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.125rem; }
.lk-akcije .hitno-gumb, .lk-akcije .gumb { white-space: normal; text-align: center; }
.lk-cinjenice { margin-top: 0.875rem; }
.lk-dno { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.lk-pitanja { display: grid; gap: 0.75rem; }
.lk-pitanja h2, .lk-susjedi h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-bottom: 0.25rem; }
.lk-pitanje { padding: 1rem 1.125rem; border-radius: 1.125rem; background: var(--kamen); }
.lk-pitanje h3 { font-size: 1.09375rem; line-height: 1.3; margin-bottom: 0.375rem; }
.lk-pitanje p { color: #3b3f46; font-size: 0.96875rem; line-height: 1.55; }
.lk-susjedi { display: grid; gap: 0.75rem; }
.lk-susjedi ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lk-susjedi a:not(.poveznica) { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.375rem 0.875rem; border-radius: 62.4375rem; border: 1.5px solid var(--crta); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.lk-susjedi a:not(.poveznica):hover { border-color: var(--tinta); }
.lk-susjedi small { color: var(--prigušeno); font-weight: 600; }
@media (max-width: 860px) { .lk-dno { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .lk-akcije > * { flex: 1 1 100%; } }
.popis-glava h1 { overflow-wrap: break-word; }
@media (max-width: 340px) { .popis-glava h1 { font-size: 1.875rem; } }
.rz-pitanje { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rz-izbor-gumb { min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 62.4375rem; border: 1.5px solid var(--crta); background: #fff; font: 600 0.9375rem var(--font); color: var(--tinta); cursor: pointer; text-align: left; }
.rz-izbor-gumb:hover { border-color: var(--tinta); }
@media (max-width: 480px) { .rz-izbor-gumb { flex: 1 1 100%; } }
/* tablice u savjetima */
.sv-tablica { overflow-x: auto; margin: 1.125rem 0; border: 1px solid var(--crta); border-radius: 1rem; }
.sv-tablica table { width: 100%; border-collapse: collapse; font-size: 0.96875rem; line-height: 1.45; }
.sv-tablica th, .sv-tablica td { padding: 0.625rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--crta); }
.sv-tablica thead th { background: var(--kamen); font-weight: 700; white-space: nowrap; }
.sv-tablica tbody th { font-weight: 650; }
.sv-tablica tbody tr:last-child > * { border-bottom: 0; }
.sv-c-tijelo, .sv-c-tijelo > * { min-width: 0; }
.sv-c-tijelo { overflow-wrap: break-word; }
.sv-c-tijelo, .sv-tekst { grid-template-columns: minmax(0, 1fr); }
.sv-majstori { min-width: 0; } .sv-majstori .sv-cta-oznaka { white-space: normal; overflow-wrap: break-word; }
/* tablice u savjetima na mobitelu: svaki redak je kartica, uz vrijednost piše naziv stupca */
@media (max-width: 560px) {
  .sv-tablica { overflow: visible; border: 0; border-radius: 0; }
  .sv-tablica table, .sv-tablica tbody, .sv-tablica tr, .sv-tablica th, .sv-tablica td { display: block; width: auto; }
  .sv-tablica thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-tablica tr { margin-bottom: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--crta); border-radius: 0.875rem; }
  .sv-tablica tbody th { padding: 0 0 0.375rem; border: 0; font-size: 1.03125rem; }
  .sv-tablica td { padding: 0.25rem 0; border: 0; }
  .sv-tablica td::before { content: attr(data-stupac); display: block; font-size: 0.78125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--prigušeno); }
}

/* ---------- Hitni poziv uživo: karta, tijek, dok čekate */
.hs-karta, .hs-tijek-okvir, .hs-dok { width: 100%; min-width: 0; text-align: left; justify-self: stretch; }
.hs-karta { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--crta); background: var(--kamen); }
.hs-karta-mapa { height: clamp(16.25rem, 52vw, 23.75rem); background: #e9e6e0; }
.hs-karta .leaflet-container { font: inherit; }
.hs-legenda { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: var(--prigušeno); background: #fff; border-top: 1px solid var(--crta); }
.hs-legenda li { display: inline-flex; align-items: center; gap: 0.375rem; }
.hs-legenda i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; display: inline-block; }
.hl-vi { background: var(--hitno); box-shadow: 0 0 0 0.1875rem var(--hitno-svijetli); }
.hl-krug { border: 2px solid var(--hitno); background: rgba(212, 38, 28, .12); }
.hl-poslano { background: #f2a33a; } .hl-otvorio { background: #2f6fd6; } .hl-prihvatio { background: var(--zeleno); }
/* krugovi */
.hk-krug { fill: transparent; stroke: #9aa0a8; stroke-width: 1.5; stroke-dasharray: 5 6; }
.hk-krug.hk-prosli { stroke: var(--hitno); stroke-opacity: .45; fill: rgba(212, 38, 28, .05); stroke-dasharray: 3 5; }
.hk-krug.hk-aktivni { stroke: var(--hitno); stroke-width: 2.5; stroke-dasharray: none; fill: rgba(212, 38, 28, .11); }
.hk-krug.hk-buduci { stroke-opacity: .55; }
.hk-linija { stroke: var(--zeleno); stroke-width: 3; stroke-dasharray: 6 6; fill: none; animation: hk-linija 1.2s linear infinite; }
@keyframes hk-linija { to { stroke-dashoffset: -24; } }
/* vi */
.hk-vi { position: relative; }
.hk-vi .hk-tocka { position: absolute; inset: 0.3125rem; border-radius: 50%; background: var(--hitno); border: 2px solid #fff; box-shadow: 0 1px 0.25rem rgba(0,0,0,.35); }
.hk-vi .hk-val { position: absolute; inset: -0.875rem; border-radius: 50%; border: 2px solid var(--hitno); opacity: 0; animation: radar 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.hk-vi b { position: absolute; left: 1.625rem; top: 2px; padding: 1px 0.4375rem; border-radius: 62.4375rem; background: var(--tinta); color: #fff; font-size: 0.75rem; white-space: nowrap; }
/* majstori */
.hk-majstor { position: relative; }
.hk-m { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 0.1875rem rgba(0,0,0,.35); transition: background .3s; }
.hk-m-poslano { background: #f2a33a; }
.hk-m-otvorio { background: #2f6fd6; animation: hk-puls 1.6s ease-in-out infinite; }
.hk-m-ne, .hk-m-kasno { background: #b9b5ad; }
.hk-m-prihvatio { background: var(--zeleno); inset: -2px; }
.hk-majstor b { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); padding: 2px 0.5rem; border-radius: 62.4375rem; background: var(--zeleno-tamno); color: #fff; font-size: 0.78125rem; white-space: nowrap; }
@keyframes hk-puls { 50% { box-shadow: 0 0 0 0.375rem rgba(47,111,214,.25); } }
@media (prefers-reduced-motion: reduce) { .hk-vi .hk-val, .hk-m-otvorio, .hk-linija { animation: none; } }
/* tijek */
.hs-tijek-okvir { display: grid; gap: 0.625rem; padding: clamp(1rem, 3vw, 1.375rem); border-radius: var(--radius); background: #fff; border: 1px solid var(--crta); }
.hs-tijek-okvir h2, .hs-dok h2 { font-size: 1.25rem; }
.hs-tijek { display: grid; gap: 0; }
.hs-tijek li { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: start; padding: 0.5rem 0; position: relative; }
.hs-tijek li + li::before { content: ''; position: absolute; left: 0.875rem; top: -0.5rem; height: 1rem; border-left: 2px solid var(--crta); }
.ht-ik { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--kamen); }
.ht-ik svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ht-ok .ht-ik { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.ht-poslano .ht-ik { background: #fff1dc; color: #9a5b00; }
.ht-oko .ht-ik { background: #e6efff; color: #2457ad; }
.ht-ne .ht-ik { background: var(--kamen); color: var(--prigušeno); }
.ht-siri .ht-ik { background: var(--hitno-svijetli); color: var(--hitno-tamni); }
.ht-tekst { padding-top: 0.25rem; line-height: 1.4; }
.ht-glavno .ht-tekst { font-weight: 700; }
.hs-tijek time { padding-top: 0.3125rem; font-size: 0.84375rem; color: var(--prigušeno); font-variant-numeric: tabular-nums; }
.ht-novo { animation: ht-ulaz .5s var(--ease) both; }
@keyframes ht-ulaz { from { opacity: 0; transform: translateY(-0.375rem); } }
.ht-sada { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: var(--kamen); color: #3b3f46; font-size: 0.9375rem; }
.ht-tockice { display: inline-flex; gap: 0.25rem; flex: none; }
.ht-tockice i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--hitno); animation: ht-tocka 1.2s ease-in-out infinite; }
.ht-tockice i:nth-child(2) { animation-delay: .2s; } .ht-tockice i:nth-child(3) { animation-delay: .4s; }
@keyframes ht-tocka { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ht-cekanje { font-size: 0.875rem; color: var(--prigušeno); }
/* dok čekate */
.hs-dok { display: grid; gap: 0.625rem; padding: clamp(1rem, 3vw, 1.375rem); border-radius: var(--radius); background: var(--kamen); }
.hs-dok ol { display: grid; gap: 0.5rem; padding-left: 1.375rem; list-style: decimal; }
.hs-dok li { line-height: 1.45; }
.hd-opasnost { padding: 0.625rem 0.875rem; border-radius: 0.75rem; background: var(--hitno-svijetli); color: #5b2c27; border-left: 0.25rem solid var(--hitno); }
.hf-pokrivenost { display: grid; gap: 0.625rem; margin-top: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; font-size: 0.96875rem; text-align: left; }
.hf-pokrivenost p { display: block; line-height: 1.45; }
.hf-pk-ima { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.hf-pk-ima .hitna-tocka { display: inline-block; vertical-align: middle; margin: -2px 0.5rem 0 2px; background: var(--zeleno); } .hf-pk-ima .hitna-tocka::after { border-color: var(--zeleno); }
.hf-pk-nema { background: var(--hitno-svijetli); color: #5b2c27; }
.hf-pk-nema .hs-rezerva { margin: 0; }
.hf-pk-112 a { color: var(--hitno-tamni); font-weight: 700; }
#hf-posalji:disabled { opacity: .45; cursor: not-allowed; }
.hitno-status { grid-template-columns: minmax(0, 1fr); }
.hs-dok .poveznica { white-space: normal; }

/* ---------- Naslovna v3 (docs/NASLOVNA-PREGLED.md): jedno polje, kvarovi, staze u heroju, „u vašem kraju“ */
.traka-jedna .traka-sto { flex: 1 1 auto; }
.traka-jedna .traka-polje > span { color: var(--prigušeno); font-weight: 650; }
.traka-gumb:disabled { opacity: .7; cursor: progress; }
.hero-razumi { position: relative; max-width: 61.25rem; margin: -0.625rem auto 1.125rem; padding: clamp(1rem, 2.6vw, 1.375rem); padding-right: clamp(1rem, 2.6vw, 1.375rem); border-radius: var(--radius); background: #fff; border: 1.5px solid var(--crta); box-shadow: 0 1.125rem 2.5rem -1.875rem rgba(18,20,23,.35); text-align: left; }
.hero-razumi[hidden] { display: none; }
.hero-razumi .rz-zatvori { justify-self: start; }
.hero-pomoc { max-width: 61.25rem; margin: 0 auto clamp(1.375rem, 3vw, 2.25rem); }
.kvarovi { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.kvar { min-height: 2.75rem; padding: 0.5625rem 1rem; border-radius: 62.4375rem; border: 1px solid var(--crta); background: #fff; color: var(--tinta); font: 600 0.9375rem var(--font); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.kvar:hover { border-color: var(--tinta); }
.kvar:active { transform: scale(.97); }
.kvar:focus-visible, .kraj-lokacija:focus-visible { outline: 0.1875rem solid var(--akcent); outline-offset: 2px; }

.staze-hero { margin: 0 auto clamp(1.75rem, 4vw, 3.25rem); }
.kraj-red { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.875rem; margin-bottom: 0.625rem; }
.kraj-red h2 { font: 600 1rem/1.3 var(--font); color: var(--prigušeno); letter-spacing: 0; }
.kraj-red h2 b { color: var(--tinta); font-weight: 700; }
.kraj-gumbi { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.875rem; }
.kraj-iskljuci { font-size: 0.875rem; color: var(--prigušeno); min-height: 2.5rem; }
.kraj-lokacija, .kraj-iskljuci { font-size: 0.90625rem; min-height: 2.5rem; color: var(--prigušeno); }
.kraj-lokacija:hover, .kraj-iskljuci:hover { color: var(--tinta); }
.staze-hero .staza { text-align: left; }

/* kuća: na mobitelu bez trake ispod (djelatnosti su u mreži niže); kartica preko kuće ostaje */
.scena-traka[hidden] { display: none !important; }

/* Vaši majstori */
.sekcija-moji { padding: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.sekcija-moji[hidden] { display: none; }
.moji { padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: var(--radius); background: var(--kamen); }
.moji h2 { font: 700 clamp(1.1875rem, 2vw, 1.375rem)/1.2 var(--font-naslov); letter-spacing: -.01em; margin-bottom: 0.75rem; }
.moji-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.moj { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.625rem 0.625rem 0.625rem 0.75rem; border-radius: 1.125rem; background: #fff; }
.moj-tko { flex: 1; display: flex; align-items: center; gap: 0.75rem; min-width: 0; color: var(--tinta); text-decoration: none; }
.moj-tko img, .moj-ini { flex: none; width: 3rem; height: 3rem; border-radius: 0.875rem; object-fit: contain; background: #f1efeb; }
.moj-tko > span { display: grid; min-width: 0; }
.moj-tko small { font-size: 0.78125rem; font-weight: 650; color: var(--akcent-tamni); }
.moj-tko b { font: 650 1.03125rem/1.25 var(--font-naslov); overflow-wrap: anywhere; }
.moj-tko em { font-style: normal; font-size: 0.875rem; color: var(--prigušeno); overflow-wrap: anywhere; }
.moj-tko:hover b { text-decoration: underline; text-underline-offset: 0.1875rem; }
.moj-nazovi { flex: none; min-height: 2.75rem; padding: 0 1rem; }
.moji-napomena { margin-top: 0.625rem; font-size: 0.84375rem; color: var(--prigušeno); }
.moji-napomena .tekst-gumb { font-size: 0.84375rem; }

/* Zašto nama vjerovati */
.povjerenje { padding: 0 0 clamp(1.75rem, 4vw, 3.5rem); }
.povjerenje-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.povjerenje-lista li { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; padding: 1rem; border-radius: 1.125rem; border: 1px solid var(--crta); }
.povjerenje-lista i { flex: none; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.povjerenje-lista i .ik { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.4; }
.povjerenje-lista span { display: grid; gap: 2px; min-width: 0; }
.povjerenje-lista b { font: 650 0.96875rem/1.3 var(--font-naslov); }
.povjerenje-lista small { font-size: 0.875rem; line-height: 1.4; color: var(--prigušeno); }
@media (max-width: 1000px) { .povjerenje-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .povjerenje-lista { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .povjerenje-lista li { padding: 0.75rem 0.875rem; } }

#djelatnosti { scroll-margin-top: 5.625rem; }

/* majstori i mjesta u blizini */
.blizu-uvod { margin: -1.125rem 0 1.375rem; }
.blizu-mreza { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.blizu-mreza .kartica-slika { aspect-ratio: 1; border-radius: 1.125rem; margin-bottom: 0.625rem; }
.blizu-mreza .kartica strong { font-size: 1.0625rem; }
.blizu-mreza .kartica small { font-size: 0.875rem; }
@media (max-width: 1200px) { .blizu-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* mobitel: isti vodoravni niz kao ostale .kartice na stranici, samo uže kartice */
@media (max-width: 720px) { .str-naslovna .blizu-mreza { grid-template-columns: none; grid-auto-columns: minmax(9.375rem, 44%); gap: 0.75rem; } }
.blizu-mreza .kartica, .blizu-mreza .kartica > * { min-width: 0; }
.blizu-mreza .kartica strong, .blizu-mreza .kartica small { overflow-wrap: anywhere; }
#u-blizini .mjesta-blok h3 { margin: 0 0 0.875rem; font: 600 1rem var(--font); color: var(--prigušeno); }
#u-blizini .mjesta-blok > .poveznica { display: inline-flex; margin-top: 0.875rem; }

/* sezona */
.sezona-glava { max-width: 47.5rem; margin-bottom: 1.625rem; }
.sezona-glava h2 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.sezona-glava .podnaslov { margin-top: 0.625rem; }
.sezona-gumbi { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sezona-gumbi .gumb { gap: 0.5rem; background: #fff; white-space: normal; }
.sezona-gumbi .gumb:hover { background: #fff; color: var(--tinta); border-color: var(--tinta); box-shadow: 0 0.5rem 1.25rem -0.875rem rgba(18,20,23,.5); }
.sezona-gumbi img { width: 1.75rem; height: 1.75rem; object-fit: contain; mix-blend-mode: multiply; }
.sezona-svi { display: inline-flex; margin-top: 1.25rem; }

/* Kako radi: jedna traka */
.kako-naslov { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin-bottom: 1.125rem; }
.kako-kratko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.kako-kratko li { display: flex; gap: 0.875rem; align-items: flex-start; min-width: 0; padding: 1.125rem; border-radius: var(--radius); background: var(--kamen); }
.kako-kratko .korak-br { width: 2.375rem; height: 2.375rem; font-size: 1.125rem; box-shadow: none; }
.kako-kratko li > span:last-child { display: grid; gap: 0.25rem; min-width: 0; }
.kako-kratko b { font: 650 1.125rem/1.25 var(--font-naslov); }
.kako-kratko small { font-size: 0.9375rem; line-height: 1.45; color: var(--prigušeno); }
@media (max-width: 860px) { .kako-kratko { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .kako-kratko li { padding: 0.875rem 1rem; } }

/* stranica majstora: Spremi */
.spremi-majstora .ik { fill: none; transition: fill .2s, transform .25s var(--ease); }
.spremi-majstora[aria-pressed="true"] .ik { fill: var(--akcent); stroke: var(--akcent); transform: scale(1.08); }

@media (max-width: 720px) {
  .hero-razumi { margin: -0.375rem 0 0.875rem; }
  .kvarovi { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--rub) * -1); padding: 2px var(--rub) 0.25rem; }
  .kvarovi::-webkit-scrollbar { display: none; }
  .kvarovi li { flex: none; }
  .kvar { font-size: 0.90625rem; padding: 0.5rem 0.875rem; }
  .kraj-red h2 { font-size: 0.9375rem; }
}
@media (max-width: 359px) { .moj { flex-wrap: wrap; } .moj-nazovi { width: 100%; justify-content: center; } }
@media (max-width: 720px) {
  .dj-mreza li:nth-child(n+13) { display: none; }
  #sezona .sv-mreza { gap: 0.625rem; }
  #sezona .sv-k { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.875rem; align-items: center; }
  #sezona .sv-k-slika { aspect-ratio: 1; height: auto; margin: 0; border-radius: 0.875rem; }
  #sezona .sv-k-tekst > span { display: none; }
  #sezona .sv-k-tekst strong { font-size: 1.03125rem; line-height: 1.3; }
  .povjerenje-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .povjerenje-lista li { flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
  .povjerenje-lista small { display: none; }
  .povjerenje-lista b { font-size: 0.90625rem; }
}

/* kuća bez bočnih kartica (2026-10-30): samo slika s točkama, jedna kartica ispod */
.scena { display: block; position: relative; margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.scena-kuca { max-width: 51.25rem; margin: 0 auto 5.25rem; }
.ht-kartica:not([hidden]) { display: flex; position: absolute; left: 50%; transform: translateX(-50%); width: min(25rem, calc(100% - 1.25rem)); top: calc(100% + 0.625rem); z-index: 5; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem;
  background: #fff; border: 1px solid var(--crta); border-radius: 1rem; box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(18,20,23,.45); text-decoration: none; color: var(--tinta); animation: kartica-ulaz2 .3s var(--ease) both; }
@keyframes kartica-ulaz2 { from { opacity: 0; transform: translate(-50%, 0.5rem); } }
.ht-kartica img { width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background: #f1efeb; mix-blend-mode: multiply; flex: none; }
.ht-kartica .hk-tekst { display: grid; min-width: 0; }
.ht-kartica .hk-tekst b { font: 650 1rem/1.2 var(--font-naslov); }
.ht-kartica .hk-tekst small { font-size: 0.84375rem; color: var(--prigušeno); }
.ht-kartica-str { margin-left: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--akcent); color: #fff; display: grid; place-items: center; flex: none; }
.ht-kartica-str .ik { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
.scena-uputa { position: absolute; left: 0; right: 0; bottom: 1.75rem; text-align: center; font-size: 0.9375rem; color: var(--prigušeno); }
.scena-uputa[hidden] { display: none; }
@media (max-width: 720px) { .scena-kuca { margin: 0 -0.375rem 4.875rem; } .ht-kartica:not([hidden]) { left: 50%; right: auto; } }
@media (min-width: 1600px) { .scena-kuca { max-width: 60rem; } }
#faq .povjerenje-lista { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* ---------- Zaglavlje v3 (2026-10-30): Majstori ▾ · Zatraži ponude · Savjeti | traži · Za obrtnike · Hitno */
.nav-link:active, .kap-hitno:active, .kap-ikona:active, .kap-cta:active { transform: scale(.97); }
.nav-link { transition: background .2s, color .2s, transform .16s ease-out; }
.mega-dj .mega-dno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.mdj-mjesta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; min-width: 0; }
.mdj-mjesta-naslov { display: inline-flex; align-items: center; gap: 0.375rem; font: 700 0.75rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); margin-right: 0.25rem; }
.mdj-mjesta-naslov .ik { width: 0.9375rem; height: 0.9375rem; color: var(--akcent-tamni); }
.mdj-mjesta ul { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.mdj-mjesta ul a { display: inline-flex; align-items: center; height: 2.125rem; padding: 0 0.8125rem; border-radius: 62.4375rem; background: var(--kamen); font-size: 0.90625rem; font-weight: 600; color: var(--tinta); text-decoration: none; transition: background .15s, color .15s; }
.mdj-mjesta ul a:hover, .mdj-mjesta ul a:focus-visible { background: var(--akcent-svijetli); color: var(--akcent-tamni); outline: none; }
.mdj-brzo { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; }
.mdj-brzo .poveznica { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }
/* mobilni izbornik: mjesta kao čipovi koji se lome u redove (6 komada, bez vodoravnog listanja) */
.mob-izbornik .mob-mjesta { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.mob-linkovi a { min-height: 3.5rem; }
@media (max-width: 300px) { .kap-hitno { width: 2.375rem; padding: 0; justify-content: center; gap: 0; font-size: 0; } .kap-hitno .hitna-tocka { width: 0.625rem; height: 0.625rem; } }
@media (max-width: 290px) { .logo-img { height: 2.125rem !important; margin: -2px 0 -0.25rem -0.25rem !important; } .kapsula { gap: 0.375rem; padding-left: 0.75rem; } .kapsula-desno { gap: 0.375rem; } }

/* ---------- Moj obrt (ulaz za postojeće obrtnike: broj + kod) */
.mo { padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(3rem, 8vw, 6rem); }
.mo-okvir { max-width: 35rem; }
.mo-kartica { display: grid; gap: 1rem; padding: clamp(1.375rem, 4vw, 2.25rem); border-radius: 1.75rem; background: #fff; border: 1px solid var(--crta); box-shadow: 0 1.875rem 3.75rem -2.5rem rgba(18,20,23,.35); }
.mo-kartica h1 { font-size: clamp(1.875rem, 5vw, 2.625rem); letter-spacing: -.03em; }
.mo-ikona img { width: 4.5rem; height: 4.5rem; filter: drop-shadow(0 0.5rem 0.625rem rgba(0,0,0,.18)); }
.mo-uvod { color: var(--prigušeno); font-size: 1.03125rem; line-height: 1.5; }
.mo-forma { display: grid; gap: 0.75rem; }
.mo-forma input { font-size: 1.125rem; letter-spacing: .02em; }
.mo-gumb { justify-self: stretch; justify-content: center; min-height: 3.375rem; }
.mo-gumb:active { transform: scale(.97); }
.mo-gumb:disabled { opacity: .6; cursor: progress; }
.mo-zasto { display: grid; gap: 0.375rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.90625rem; color: var(--prigušeno); }
.mo-zasto li::before { content: '✓'; margin-right: 0.5rem; color: var(--zeleno-tamno); font-weight: 700; }
.mo-novi { margin-top: 1.125rem; text-align: center; color: var(--prigušeno); }
.mo-novi a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--tinta); font-weight: 650; }
.mo-novi .ik { width: 1rem; height: 1rem; }
.mo-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.mo-akcije .gumb { flex: 1 1 11.25rem; justify-content: center; }
.mo-popis { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.mo-popis a { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 1rem; border: 1.5px solid var(--crta); text-decoration: none; color: var(--tinta); transition: border-color .2s; }
.mo-popis a:hover { border-color: var(--akcent); }
.mo-popis span { display: grid; min-width: 0; } .mo-popis b { overflow-wrap: anywhere; } .mo-popis small { color: var(--prigušeno); }
.mo-popis .ik { margin-left: auto; flex: none; width: 1.125rem; height: 1.125rem; }
.mo-kartica .kod-blok { max-width: none; }
.mob-moj { display: flex; align-items: center; justify-content: center; gap: 0.375rem; flex-wrap: wrap; min-height: 3rem; padding: 0.375rem 0.75rem; border-radius: 1.125rem; color: var(--prigušeno); font-size: 0.9375rem; text-decoration: none; text-align: center; }
.mob-moj b { color: var(--tinta); }
.mob-moj .ik { width: 1rem; height: 1rem; color: var(--tinta); }
.zo-postojeci { margin-top: 0.875rem; color: var(--prigušeno); font-size: 0.9375rem; }
.zo-postojeci a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--tinta); font-weight: 650; }
.zo-postojeci .ik { width: 0.9375rem; height: 0.9375rem; }

/* povuci i ispusti (public/js/ispusti.js): zona iznad koje se vuče datoteka */
label.iznad { outline: 2px dashed var(--akcent); outline-offset: 0.1875rem; background-color: #fdebe2 !important; transition: background-color .15s, outline-color .15s; }
label.odbijeno { outline: 2px dashed #c62f22; outline-offset: 0.1875rem; animation: odbijeno .3s ease-out; }
@keyframes odbijeno { 25% { transform: translateX(-0.1875rem); } 75% { transform: translateX(0.1875rem); } }
@media (prefers-reduced-motion: reduce) { label.odbijeno { animation: none; } }
/* Winkla na stranici majstora: tiha kartica, bez skočnih prozora */
.mp-winkla { border-style: dashed; }
.mp-winkla-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.125rem; margin-top: 0.25rem; }
.mp-winkla-akcije .poveznica { display: inline-flex; align-items: center; gap: 0.375rem; }
.mp-winkla-hvala { padding: 0.625rem 0.875rem; border-radius: 0.75rem; background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); font-weight: 600; }
.mp-winkla-makni { font-size: 0.875rem; color: var(--prigušeno); }

/* ================= Moj obrt v3 (2026-10-30) =================
   Ideja: obrtnik u 5 sekundi vidi kako ga ljudi vide, što mu fali i je li stranica radi.
   Lijevo ono što mijenja (Danas, stranica, poslovi), desno ono što ga vodi (dovršite, statistika). */
.mp-str { background: #f3f1ed; }
.mp-str .mp-sekcija { padding-top: clamp(0.875rem, 2.6vw, 2rem); }
.mp { --mp: var(--obrt, var(--akcent)); --mp-blago: color-mix(in srgb, var(--mp) 11%, #fff); --mp-srednje: color-mix(in srgb, var(--mp) 22%, #fff); --mp-tamno: color-mix(in srgb, var(--mp) 75%, #000); gap: 1rem; }
.mp .mp-kartica { gap: 1rem; border: 0; border-radius: 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 0.75rem 2rem -1.625rem rgba(18,20,23,.4); scroll-margin-top: 7rem; }
.mp .mp-kartica-glava { min-height: 2.375rem; }
.mp .mp-kartica-glava h2 { gap: 0.75rem; font-size: 1.25rem; letter-spacing: -.02em; }
.mp-ik { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.6875rem; background: var(--mp-blago); color: var(--mp-tamno); }
.mp-ik .ik { width: 1.1875rem; height: 1.1875rem; stroke-width: 1.9; }
.mp-ik.mini { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; } .mp-ik.mini .ik { width: 1rem; height: 1rem; }
.mp-veza { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.90625rem; font-weight: 600; color: var(--tinta); text-decoration: none; border-radius: 0.5rem; }
.mp-veza .ik { width: 0.9375rem; height: 0.9375rem; }
.mp-veza:hover { color: var(--mp-tamno); }
.mp-opis { font-size: 0.9375rem; line-height: 1.5; }
.mp-opis.malo { font-size: 0.84375rem; }
.mp-prazno { padding: 0.875rem 1rem; border-radius: 0.875rem; background: #f6f4f0; color: var(--prigušeno); font-size: 0.90625rem; }
.mp-istakni { animation: mp-istakni 1.4s ease-out; border-radius: 1.125rem; }
@keyframes mp-istakni { 0%, 40% { box-shadow: 0 0 0 0.25rem var(--mp-srednje); } 100% { box-shadow: 0 0 0 0.25rem transparent; } }

/* ---- vrh: identitet + „Ovako vas vide“ */
.mp-hero { display: grid; gap: 1.375rem; padding: clamp(1.25rem, 3vw, 1.875rem); border-radius: 1.75rem; background: radial-gradient(120% 140% at 0% 0%, var(--mp-blago) 0%, #fff 55%); box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 1.125rem 2.75rem -2rem rgba(18,20,23,.45); }
.mp-hero-lijevo { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.mp-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.mp-avatar { display: grid; place-items: center; flex: none; width: 4.75rem; height: 4.75rem; border-radius: 1.375rem; background: #fff; box-shadow: 0 0 0 1px rgba(18,20,23,.06), 0 0.625rem 1.375rem -0.75rem rgba(18,20,23,.45); overflow: hidden; }
.mp-avatar img { width: 100%; height: 100%; object-fit: contain; }
.mp-avatar .mp-avatar-ikona { padding: 0.5rem; mix-blend-mode: multiply; }
.mp-avatar b { font: 800 1.75rem var(--font-naslov); color: var(--mp-tamno); }
.mp-id-tekst { display: grid; gap: 0.1875rem; min-width: 0; }
.mp-nad { font: 700 0.71875rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-tamno); }
.mp-hero h1 { font-size: clamp(1.625rem, 4vw, 2.375rem); line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mp-meta { color: var(--prigušeno); font-size: 0.96875rem; }
.mp-cipovi { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.mp-cipovi li { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 62.4375rem; background: #fff; box-shadow: inset 0 0 0 1px var(--crta); font-size: 0.84375rem; font-weight: 650; }
.mp-cipovi li.ok { background: var(--zeleno-svijetlo); box-shadow: none; color: var(--zeleno-tamno); }
.mp-cipovi li.ceka { background: #fff4d6; box-shadow: none; color: #5c4200; }
.mp-cipovi li.hitno { background: #fff1ef; box-shadow: none; color: #9d1f17; }
.mp-cipovi .ik { width: 0.9375rem; height: 0.9375rem; stroke-width: 2.4; }
.mp-cipovi .hitna-tocka { width: 0.5rem; height: 0.5rem; }
.mp-hero-akcije { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.mp-hero-akcije:empty { display: none; }
.mp-hero-akcije .gumb { gap: 0.5rem; }
.mp-hero-akcije .gumb .ik { width: 1.0625rem; height: 1.0625rem; }
.gumb-obrub .ik { stroke-width: 2; }
.mp .gumb-obrub { background: #fff; }
.mp .gumb-obrub:hover { background: var(--tinta); color: #fff; }
.mp .gumb:active { transform: scale(.97); }

.mp-prikaz { display: grid; gap: 0.625rem; align-content: start; margin: 0; padding: 1rem; border-radius: 1.375rem; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(18,20,23,.06); }
.mp-prikaz figcaption { font: 700 0.71875rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); }
.mp-prikaz-kartica { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 0.625rem; border-radius: 1.125rem; background: #fff; box-shadow: 0 0.625rem 1.5rem -1.125rem rgba(18,20,23,.5); }
.mp-prikaz-slika { display: block; aspect-ratio: 1; border-radius: 0.8125rem; overflow: hidden; background: #f1efeb; }
.mp-prikaz-slika img { width: 100%; height: 100%; object-fit: cover; }
.mp-prikaz-slika img.bez { object-fit: contain; padding: 0.875rem; mix-blend-mode: multiply; }
.mp-prikaz-tekst { display: grid; gap: 0.25rem; min-width: 0; }
.mp-prikaz-tekst b { font: 650 1.0625rem/1.2 var(--font-naslov); overflow-wrap: anywhere; }
.mp-prikaz-tekst small { color: var(--prigušeno); font-size: 0.875rem; }
.mp-prikaz-tekst .znacke { margin-top: 0.25rem; }
.mp-prikaz-prazno { font-size: 0.8125rem; color: var(--prigušeno); font-style: italic; }
.mp-prikaz-nap { font-size: 0.8125rem; color: var(--prigušeno); }
.mp-prikaz-nap a { color: var(--tinta); font-weight: 650; }

/* ---- navigacija (samo mobitel i tablet) */
.mp-nav { position: sticky; top: 5.375rem; z-index: 5; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding: 0.3125rem; border-radius: 62.4375rem; background: rgba(255,255,255,.9); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); box-shadow: 0 0.5rem 1.625rem -1.25rem rgba(18,20,23,.55); }
.mp-nav::-webkit-scrollbar { display: none; }
.mp-nav a { flex: none; display: inline-flex; align-items: center; min-height: 2.375rem; padding: 0 0.875rem; border-radius: 62.4375rem; font-size: 0.90625rem; font-weight: 600; color: var(--tinta); text-decoration: none; transition: background .15s; }
.mp-nav a:hover { background: #f1efeb; }

/* ---- Danas */
.mp-sada { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 62.4375rem; font-size: 0.84375rem; font-weight: 700; background: #f1efeb; color: var(--prigušeno); }
.mp-sada i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.mp-sada-slobodan { background: var(--zeleno-svijetlo); color: var(--zeleno-tamno); }
.mp-sada-zauzet { background: #fff4d6; color: #7a5600; }
.mp-segment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border-radius: 1.125rem; background: #f1efeb; }
.mp-seg { display: grid; gap: 0.1875rem; min-height: 4rem; padding: 0.6875rem 0.75rem; border: 0; border-radius: 0.875rem; background: none; text-align: left; color: var(--tinta); cursor: pointer; transition: background .18s ease-out, box-shadow .18s ease-out, transform .16s ease-out; }
.mp-seg > span { display: flex; align-items: center; gap: 0.5rem; font: 700 0.9375rem/1.15 var(--font-naslov); white-space: nowrap; }
.mp-seg i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #c4bfb6; transition: background .18s, box-shadow .18s; }
.mp-seg small { padding-left: 1rem; font-size: 0.78125rem; color: var(--prigušeno); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .mp-seg:hover { background: rgba(255,255,255,.65); } }
.mp-seg:active { transform: scale(.97); }
.mp-seg.aktivno { background: #fff; box-shadow: 0 1px 2px rgba(18,20,23,.08), 0 0.5rem 1.125rem -0.625rem rgba(18,20,23,.35); }
.mp-seg.aktivno i.z { background: var(--zeleno); box-shadow: 0 0 0 0.1875rem var(--zeleno-svijetlo); }
.mp-seg.aktivno i.n { background: #e3a008; box-shadow: 0 0 0 0.1875rem #fff4d6; }
.mp-seg.aktivno i.s { background: var(--tinta); }
.mp-zauzet-izbor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: 1rem; background: #fff8e6; animation: spusti .18s cubic-bezier(.23, 1, .32, 1) both; }
.mp-zauzet-izbor[hidden] { display: none; }
.mp-zauzet-izbor span { font-weight: 650; font-size: 0.90625rem; margin-right: 2px; }
.mp-zauzet-izbor button, .mp-dez-tipke button { min-height: 2.5rem; padding: 0 1rem; border: 1.5px solid var(--crta); border-radius: 62.4375rem; background: #fff; font: 650 0.90625rem var(--font); color: var(--tinta); cursor: pointer; transition: border-color .15s, transform .16s ease-out; }
.mp-zauzet-izbor button:hover, .mp-dez-tipke button:hover { border-color: var(--tinta); }
.mp-zauzet-izbor button:active, .mp-dez-tipke button:active { transform: scale(.96); }
.mp-dezurstvo { display: grid; gap: 0.625rem; padding: 1rem 1.125rem; border-radius: 1.125rem; background: #f6f4f0; }
.mp-dezurstvo.ukljuceno { background: #fff3f1; box-shadow: inset 0 0 0 1.5px rgba(214,48,39,.22); }
.mp-dez-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.mp-dez-glava b { font: 700 1.03125rem var(--font-naslov); }
.mp-dez-do { margin-left: auto; padding: 0.1875rem 0.625rem; border-radius: 62.4375rem; background: var(--hitno); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.mp-dez-tipke { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mp-dez-tipke > span { font-size: 0.875rem; font-weight: 600; color: var(--prigušeno); margin-right: 2px; }
.mp-dez-kraj { border-color: transparent !important; background: var(--tinta) !important; color: #fff !important; }

/* ---- stranica: opis i fotografije */
.mp .hf-polje textarea[data-raste] { min-height: 8.75rem; resize: none; overflow: hidden; line-height: 1.55; }
.mp-forma-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; }
.mp-brojac { font-size: 0.8125rem; color: var(--prigušeno); font-variant-numeric: tabular-nums; }
.mp-sad-tekst { font-size: 0.90625rem; color: var(--prigušeno); } .mp-sad-tekst b { color: var(--tinta); }
.mp .mp-slike { display: grid; gap: 0.75rem; }
.mp .mp-podnaslov { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.375rem; padding-top: 1.25rem; border-top: 1px solid var(--crta); }
.mp .mp-podnaslov h3 { font: 700 1.0625rem var(--font-naslov); }
.mp .mp-galerija { margin: 0; grid-template-columns: repeat(auto-fill, minmax(7.375rem, 1fr)); gap: 0.625rem; }
.mp-gal-dodaj { background: none !important; }
.mp-gal-dodaj label { display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; height: 100%; border: 2px dashed #d3cec5; border-radius: 0.875rem; background: #faf9f6; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.mp-gal-dodaj label:hover { border-color: var(--mp); background: var(--mp-blago); }
.mp-gal-dodaj .ik { width: 1.5rem; height: 1.5rem; color: var(--mp-tamno); stroke-width: 2; }
.mp-gal-dodaj b { font-size: 0.875rem; } .mp-gal-dodaj small { font-size: 0.75rem; color: var(--prigušeno); }
.mp-prazne-slike { display: grid; justify-items: center; gap: 0.375rem; padding: 1.875rem 1.25rem; border: 2px dashed #d3cec5; border-radius: 1.25rem; background: #faf9f6; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.mp-prazne-slike:hover { border-color: var(--mp); background: var(--mp-blago); }
.mp-prazne-slike .mp-ik { width: 3rem; height: 3rem; border-radius: 0.9375rem; margin-bottom: 0.25rem; } .mp-prazne-slike .mp-ik .ik { width: 1.5rem; height: 1.5rem; }
.mp-prazne-slike b { font: 700 1.0625rem var(--font-naslov); } .mp-prazne-slike small { max-width: 42ch; color: var(--prigušeno); font-size: 0.875rem; line-height: 1.45; }

/* ---- prekidači */
.mp-prekidac { position: relative; display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 1rem; background: #f6f4f0; cursor: pointer; }
.mp-prekidac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-sw { position: relative; flex: none; width: 2.875rem; height: 1.75rem; margin-top: 1px; border-radius: 62.4375rem; background: #cfcac2; transition: background .18s ease-out; }
.mp-sw::after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 0.375rem rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.mp-prekidac input:checked + .mp-sw { background: var(--zeleno); }
.mp-prekidac input:checked + .mp-sw::after { transform: translateX(1.125rem); }
.mp-prekidac input:focus-visible + .mp-sw { outline: 0.1875rem solid var(--akcent); outline-offset: 2px; }
.mp-prekidac > span:last-child { display: grid; gap: 2px; }
.mp-prekidac b { font: 700 0.96875rem var(--font-naslov); }
.mp-prekidac small { color: var(--prigušeno); font-size: 0.875rem; line-height: 1.4; }

/* ---- Dovršite stranicu */
.mp-dovrsi { background: linear-gradient(180deg, var(--mp-blago), #fff 70%) !important; }
.mp-dovrsi-glava { display: flex; align-items: center; gap: 0.875rem; }
.mp-dovrsi-glava h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.mp-krug { flex: none; width: 3.5rem; height: 3.5rem; transform: rotate(-90deg); }
.mp-krug circle { fill: none; stroke-width: 6; }
.mp-krug .pod { stroke: #fff; }
.mp-krug .nap { stroke: var(--mp); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.23, 1, .32, 1); }
.mp-krug text { transform: rotate(90deg); transform-origin: 28px 28px; font: 800 13px var(--font-naslov); fill: var(--tinta); }   /* px namjerno: unutar SVG-a to su jedinice viewBoxa (56×56), ne rem */
.mp-zadaci { display: grid; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.mp-zadaci a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 0.75rem; border-radius: 0.875rem; background: #fff; color: var(--tinta); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(18,20,23,.07); transition: box-shadow .15s, transform .16s ease-out; }
.mp-zadaci a:hover { box-shadow: inset 0 0 0 1.5px var(--mp); }
.mp-zadaci a:active { transform: scale(.98); }
.mp-zadaci a > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.mp-zadaci b { font-size: 0.90625rem; } .mp-zadaci small { font-size: 0.78125rem; color: var(--prigušeno); }
.mp-zadaci a > .ik { width: 1rem; height: 1rem; color: var(--prigušeno); flex: none; }
.mp-kv { display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; box-shadow: inset 0 0 0 2px #d3cec5; }
.mp-kv .ik { width: 0.8125rem; height: 0.8125rem; stroke-width: 3; color: #fff; }
.mp-zadaci li.gotov a { background: transparent; box-shadow: none; }
.mp-zadaci li.gotov .mp-kv { background: var(--zeleno); box-shadow: none; }
.mp-zadaci li.gotov b { color: var(--prigušeno); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---- Statistika */
.mp-brojevi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.mp-brojevi li { display: grid; gap: 2px; padding: 0.75rem 0.875rem; border-radius: 1rem; background: #f6f4f0; min-width: 0; }
.mp-brojevi b { font: 800 1.625rem/1 var(--font-naslov); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mp-brojevi span { font-size: 0.78125rem; color: var(--prigušeno); line-height: 1.3; }
.mp-brojevi.mali b { font-size: 1.25rem; }
.mp-stat-prazno { display: grid; gap: 0.75rem; justify-items: start; padding: 1rem; border-radius: 1rem; background: var(--mp-blago); }
.mp-stat-prazno p { font-size: 0.90625rem; line-height: 1.5; color: #3b3f46; }
.mp-stat-prazno .gumb { gap: 0.5rem; } .mp-stat-prazno .gumb .ik { width: 1rem; height: 1rem; }
.mp-odaziv-lista { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.mp-odaziv-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: center; padding: 0.75rem 0.875rem; border-radius: 1rem; background: #f6f4f0; }
.mp-odaziv-lista li > span:nth-child(2) { display: grid; gap: 1px; }
.mp-odaziv-lista b { font-size: 0.90625rem; } .mp-odaziv-lista small { font-size: 0.8125rem; color: var(--prigušeno); }
.mp-odaziv-lista em { grid-column: 2; font-style: normal; font-size: 0.8125rem; font-weight: 600; }
.mp .mp-graf-okvir { margin: 0; }

/* ---- dno */
.mp-dno { display: grid; gap: 0.75rem; padding: 0.25rem 0.375rem; }
.mp-dno > p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; font-size: 0.84375rem; color: var(--prigušeno); line-height: 1.45; }
.mp-dno > p > .ik { width: 1.125rem; height: 1.125rem; flex: none; }
.mp-dno > p > span { flex: 1 1 16.25rem; }
.mp-dno .tekst-gumb { font-size: 0.84375rem; }
.mp-dno .mp-ukloni-str summary { font-size: 0.84375rem; color: var(--prigušeno); }

/* ---- raspored: mobitel redom, računalo dva stupca */
.mp-raspored, .mp-glavno, .mp-strana { display: contents; }
.mp-danas { order: 1; } #mp-dovrsi { order: 2; } .mp-nav { order: 3; }
#mp-s-stranica { order: 4; } #mp-s-posao { order: 5; } #mp-s-upiti { order: 6; } #mp-s-kupci { order: 7; }
#mp-s-stat { order: 8; } #mp-s-qr { order: 9; } #mp-s-ocjene { order: 10; } #mp-winkla { order: 11; } .mp-dno { order: 12; }
.mp-hero { order: 0; } .mp-povuceno { order: 0; }
@media (min-width: 900px) {
  .mp-hero { grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 25rem); align-items: stretch; }
}
@media (min-width: 1100px) {
  .okvir.mp-okvir { max-width: 82.5rem; }
  .mp-nav { display: none; }
  .mp-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 1rem; align-items: start; }
  .mp-glavno, .mp-strana { display: grid; gap: 1rem; align-content: start; min-width: 0; }
  .mp-strana { position: sticky; top: 6.5rem; max-height: calc(100dvh - 7.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 0.25rem; }
  .mp-strana::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .mp-segment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-nav { top: 4.75rem; }
  .mp-avatar { width: 4rem; height: 4rem; border-radius: 1.125rem; }
}
@media (max-width: 420px) {
  .mp-brojevi { grid-template-columns: 1fr 1fr; } .mp-brojevi li:first-child { grid-column: 1 / -1; }
  .mp-prikaz-kartica { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .mp-hero-akcije .gumb { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 340px) { .mp-seg > span { white-space: normal; } .mp-dez-do { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-seg, .mp-sw, .mp-sw::after, .mp-krug .nap, .mp-zadaci a { transition: none; } .mp-istakni, .mp-zauzet-izbor { animation: none; } }
.kartica-bez.s-logom img { width: 56%; border-radius: 1.125rem; mix-blend-mode: normal; }
.mp > *, .mp-hero > * { min-width: 0; }
@media (max-width: 340px) { .mp-id { display: grid; gap: 0.625rem; } .mp-hero { padding: 1rem; } .mp-hero h1 { font-size: 1.5rem; } }
.mp-prikaz-tekst .znacke { display: flex; flex-wrap: wrap; gap: 0.3125rem; min-width: 0; }
.mp-prikaz-tekst .znacka-dost { white-space: normal; }
@media (max-width: 340px) { .mp-prikaz-kartica { grid-template-columns: 1fr; } .mp-prikaz-slika { aspect-ratio: 16 / 9; } .mp .gumb { white-space: normal; text-align: center; height: auto; min-height: 2.875rem; padding-block: 0.625rem; } .mp-dno > p { display: grid; } .mp-dno > p > span { flex: none; } }

/* ================================================================ Stranica obrta v2
   Naslovnica (slika ili boja obrta) + logo koji prelazi njen rub; ime i gumbi na svijetloj podlozi (nikad tekst preko slike).
   Ispod: široki glavni stupac (opis, usluge, galerija, ocjene) + kontakt kartica desno (ljepljiva na visokim zaslonima). */
.zaglavlje.skrolano .kapsula { background: #fff; }   /* tekst stranice se ne smije nazirati kroz zaglavlje */

.ov-vrh { padding-top: clamp(0.5rem, 1.6vw, 1.25rem); }
.ov-vrh .mrvice { margin-bottom: 0.875rem; }
.ov-naslovnica { position: relative; height: clamp(10.625rem, 24vw, 21.25rem); border-radius: clamp(1.25rem, 2.4vw, 2rem); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--obrt) 55%, #fff) 0%, transparent 55%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--obrt) 70%, #000) 0%, transparent 60%),
    var(--obrt); }
/* bez slike: tanka mreža točkica + velika ikona djelatnosti, tiho u kutu */
.ov-naslovnica:not(.ima-sliku)::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.22) 1.2px, transparent 1.3px); background-size: 1.375rem 1.375rem; -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 80%); mask-image: linear-gradient(100deg, transparent 20%, #000 80%); }
.ov-ikona-dj { position: absolute; right: clamp(0.75rem, 5vw, 5rem); bottom: -14%; width: clamp(9.375rem, 20vw, 17.5rem); height: auto; opacity: .95; filter: drop-shadow(0 1.25rem 1.875rem rgba(0,0,0,.25)); transform: rotate(-6deg); }
.ov-pozadina { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; animation: polako 18s ease-out both; }
.ov-naslovnica.ima-sliku::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,11,13,.18)); }

.ov-glava { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0.5rem 1.5rem; padding: 0 clamp(0.25rem, 2vw, 2rem); }
.ov-logo.obrt-logo { position: relative; z-index: 1; width: clamp(6rem, 10vw, 8.5rem); height: clamp(6rem, 10vw, 8.5rem); margin-top: calc(clamp(6rem, 10vw, 8.5rem) / -2); border-radius: 1.75rem; padding: 0.625rem; background: #fff; box-shadow: 0 0 0 0.3125rem #fff, 0 0.875rem 1.875rem -0.625rem rgba(18,20,23,.3); object-fit: contain; }
.ov-logo.obrt-logo-inicijali { padding: 0; }
.ov-ime { min-width: 0; padding-top: 1.125rem; }
.ov-ime h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; }
.ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: 1rem; color: var(--prigušeno); }
.ov-meta > * { display: inline-flex; align-items: center; gap: 0.375rem; }
.ov-meta .ik { width: 1.0625rem; height: 1.0625rem; color: var(--obrt); }
.ov-ocjena { color: var(--tinta); font-weight: 650; text-decoration: none; } .ov-ocjena small { color: var(--prigušeno); font-weight: 500; }
.ov-ime .znacke { margin-top: 0.75rem; }
.obrt-v2 .obrt-akcije { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-bottom: 0.25rem; }
.obrt-v2 .obrt-akcije .gumb { min-height: 3rem; }
.obrt-v2 .obrt-akcije .gumb-obrub { background: #fff; }
.obrt-v2 .obrt-akcije .gumb-obrub:hover { border-color: var(--tinta); background: #fff; color: var(--tinta); }
.obrt-v2 .gumb-akcent:hover { background: color-mix(in srgb, var(--obrt) 84%, #000); border-color: color-mix(in srgb, var(--obrt) 84%, #000); }
.obrt-v2 .gumb { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s cubic-bezier(.23,1,.32,1); }
.obrt-v2 .gumb:active { transform: scale(.97); }

.ov-mreza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 23.75rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-top: clamp(2.25rem, 5vw, 4rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.ov-glavno { display: flex; flex-direction: column; gap: clamp(2.25rem, 4vw, 3.5rem); min-width: 0; }
.ov-glavno > .obrt-uvod { font: 600 clamp(1.3125rem, 1.9vw, 1.6875rem)/1.35 var(--font-naslov); letter-spacing: -.015em; max-width: 34ch; text-wrap: pretty; margin-bottom: calc(clamp(2.25rem, 4vw, 3.5rem) * -.5); }
.ov-tekst { max-width: 66ch; font-size: 1.09375rem; line-height: 1.65; color: #33363c; text-wrap: pretty; }
.ov-naslov { display: flex; align-items: baseline; gap: 0.625rem; margin-bottom: 1.125rem; font-size: clamp(1.375rem, 2vw, 1.75rem); }
.ov-naslov span { font: 700 0.84375rem var(--font); color: var(--prigušeno); background: var(--kamen); border-radius: 62.4375rem; padding: 0.1875rem 0.625rem; }
.obrt-v2 .usluge { gap: 0.5rem; }
.obrt-v2 .usluge li { padding: 0.5625rem 1rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--obrt) 8%, #fff); color: var(--tinta); font-size: 0.96875rem; font-weight: 550; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--obrt) 16%, transparent); }
.obrt-v2 .ocjene { margin: 0; }

.ov-strana { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.ov-kartica { display: flex; flex-direction: column; gap: 1rem; padding: 1.375rem; border-radius: 1.5rem; background: #fff; box-shadow: 0 0 0 1px rgba(18,20,23,.07), 0 2px 0.25rem rgba(18,20,23,.03), 0 1.125rem 2.5rem -1.5rem rgba(18,20,23,.28); }
.ov-vlasnik { display: flex; align-items: center; gap: 0.875rem; padding-bottom: 1rem; border-bottom: 1px solid var(--crta); }
.ov-vlasnik img, .ov-vlasnik > span { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 1.125rem; object-fit: cover; }
.ov-vlasnik > span { display: grid; place-items: center; background: color-mix(in srgb, var(--obrt) 12%, #fff); color: var(--obrt); font: 800 1.25rem var(--font-naslov); }
.ov-vlasnik p { display: grid; gap: 1px; margin: 0; min-width: 0; } .ov-vlasnik b { font-size: 1.03125rem; } .ov-vlasnik small { color: var(--prigušeno); font-size: 0.875rem; }
.ov-naslov-mali { font: 700 0.8125rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--prigušeno); margin: 0 0 -0.25rem; }
.obrt-v2 .kontakti { gap: 0.25rem; }
.obrt-v2 .kontakti li { gap: 0.75rem; min-height: 2.5rem; font-size: 1rem; line-height: 1.35; }
.obrt-v2 .kontakti li .ik { flex: none; }
.obrt-v2 .karta { aspect-ratio: 16/10; border-radius: 1rem; }
.obrt-v2 .obrt-ponude { margin-top: 0; }
.obrt-v2 .provjeren-blok { margin: 0; }

@media (min-width: 961px) and (min-height: 820px) { .ov-strana { position: sticky; top: calc(var(--zaglavlje) + 0.75rem); } }
@media (max-width: 1100px) {
  .ov-glava { grid-template-columns: auto minmax(0, 1fr); }
  .obrt-v2 .obrt-akcije { grid-column: 1 / -1; justify-content: flex-start; padding-top: 0.75rem; }
}
@media (max-width: 960px) {
  .ov-mreza { grid-template-columns: minmax(0, 1fr); }
  .ov-strana { max-width: 35rem; }
}
@media (max-width: 640px) {
  .ov-glava { grid-template-columns: minmax(0, 1fr); padding: 0 0.25rem; gap: 0.25rem; }
  .ov-logo.obrt-logo { width: 5.5rem; height: 5.5rem; margin-top: -2.75rem; border-radius: 1.375rem; padding: 0.5rem; }
  .ov-ime { padding-top: 0.625rem; }
  .obrt-v2 .obrt-akcije { display: grid; grid-template-columns: 1fr 1fr; padding-top: 0.875rem; }
  .obrt-v2 .obrt-akcije .gumb { min-width: 0; padding: 0 0.75rem; white-space: nowrap; }
  .obrt-v2 .obrt-akcije .gumb-akcent { grid-column: 1 / -1; min-height: 3.25rem; font-size: 1.0625rem; }
  .ov-ikona-dj { width: 8.125rem; right: 0.875rem; }
  .ov-kartica { padding: 1.125rem; border-radius: 1.25rem; }
}
@media (max-width: 340px) {
  .obrt-v2 .obrt-akcije { grid-template-columns: minmax(0, 1fr); }
  .obrt-v2 .obrt-akcije .gumb { white-space: normal; }
  .ov-logo.obrt-logo { width: 4.75rem; height: 4.75rem; margin-top: -2.375rem; border-radius: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { .ov-pozadina { animation: none; } .obrt-v2 .gumb:active { transform: none; } }
@media (max-width: 640px) { .obrt-v2 .obrt-akcije .gumb-akcent:first-child ~ .gumb:last-child:nth-child(even) { grid-column: 1 / -1; } }
.ov-glava .ov-logo { align-self: start; } .ov-glava .obrt-akcije { align-self: end; }
.ov-ikona-dj { mix-blend-mode: multiply; filter: none; }

/* Moj obrt: obavijest nakon dodavanja fotografija (odbijene / slabije kvalitete) */
.mp-sl-obavijest { display: grid; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.90625rem; line-height: 1.45; }
.mp-sl-obavijest > div { padding: 0.75rem 0.875rem; border-radius: 0.875rem; }
.mp-sl-obavijest ul { margin: 0.375rem 0 0; padding-left: 1.125rem; list-style: disc; display: grid; gap: 0.25rem; }
.mp-sl-obavijest li { overflow-wrap: anywhere; }
.mp-sl-obavijest small { display: block; margin-top: 0.5rem; opacity: .85; }
.mp-sl-ne { background: #fdecea; color: #8a160e; }
.mp-sl-upoz { background: #fff4d6; color: #5c4200; }

/* ================================================================ Kartice savjeta v2
   Prava kartica: bijela površina s mekom sjenom, slika uvučena (unutarnji radijus = vanjski − razmak),
   rubrika s točkom u boji, naslov, sažetak u 2 retka i dno s vremenom čitanja i strelicom.
   Na hover se kartica lagano podigne, strelica krene naprijed; tekst i dno poravnati kroz cijeli red. */
.str-savjeti .sv-glava, .sv-popis { background: var(--kamen); }
.sv-popis { padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.str-savjeti .sv-rubrike a:not([aria-current]) { border-color: transparent; box-shadow: 0 0 0 1px rgba(18,20,23,.08); }

.sv-mreza { grid-template-columns: repeat(auto-fill, minmax(min(19.375rem, 100%), 1fr)); gap: clamp(0.875rem, 1.8vw, 1.5rem); }
.sv-k { --r: 1.5rem; --uvuci: 0.5rem; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 0; padding: var(--uvuci); border-radius: var(--r); background: #fff; color: var(--tinta); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(18,20,23,.06), 0 1px 2px rgba(18,20,23,.04), 0 0.5rem 1.5rem -1rem rgba(18,20,23,.18);
  transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s cubic-bezier(.23,1,.32,1); }
.sv-k-slika { aspect-ratio: 16 / 10; border-radius: calc(var(--r) - var(--uvuci)); background: #f1efeb; overflow: hidden; }
.sv-k-slika img { transition: transform .6s cubic-bezier(.23,1,.32,1); }
.sv-k:hover .sv-k-slika img { transform: scale(1.035); }
.sv-k-tekst { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0.75rem 0.25rem; min-width: 0; }
.sv-k-rubrika { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78125rem; font-weight: 650; letter-spacing: .02em; color: var(--prigušeno); }
.sv-k-rubrika::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sv-boja, var(--akcent)); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--sv-boja, var(--akcent)) 18%, transparent); }
.sv-r-kvarovi { --sv-boja: #d4261c; } .sv-r-popravci { --sv-boja: #1f8f4e; } .sv-r-obnova { --sv-boja: #e0531f; } .sv-r-suradnja { --sv-boja: #2f6fd6; } .sv-r-za-obrtnike { --sv-boja: #7a5af0; }
.sv-k-tekst strong { font: 700 clamp(1.1875rem, 1.5vw, 1.3125rem)/1.22 var(--font-naslov); letter-spacing: -.015em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sv-k:hover strong { text-decoration: none; }
.sv-k-tekst .sv-k-sazetak { color: var(--prigušeno); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-k-dno { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.75rem 0.75rem 0.375rem; padding-top: 0.75rem; border-top: 1px solid #efece7; font-size: 0.84375rem; font-weight: 550; color: var(--prigušeno); }
.sv-k-strelica { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--kamen); color: var(--tinta); transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.23,1,.32,1); }
.sv-k-strelica .ik { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .sv-k:hover { transform: translateY(-0.1875rem); box-shadow: 0 0 0 1px rgba(18,20,23,.07), 0 2px 0.25rem rgba(18,20,23,.04), 0 1.375rem 2.5rem -1.25rem rgba(18,20,23,.32); }
  .sv-k:hover .sv-k-strelica { background: var(--tinta); color: #fff; transform: translateX(0.1875rem); }
}
.sv-k:active { transform: scale(.985); transition-duration: .12s; }
.sv-k:focus-visible { outline: 2px solid var(--akcent); outline-offset: 0.1875rem; }

/* istaknuti (prvi) savjet: vodoravno, veća slika, više teksta */
.sv-k-velika { --r: 1.75rem; --uvuci: 0.625rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(1.25rem, 3.5vw, 3rem); align-items: stretch; }
.sv-k-velika .sv-k-slika { grid-row: 1 / span 2; aspect-ratio: 16 / 10; height: 100%; }
.sv-k-velika .sv-k-tekst { justify-content: center; gap: 0.75rem; padding: clamp(1rem, 3vw, 2.25rem) clamp(0.25rem, 1vw, 1rem) 0.5rem 0; }
.sv-k-velika .sv-k-tekst strong { font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.08; -webkit-line-clamp: 4; }
.sv-k-velika .sv-k-tekst .sv-k-sazetak { font-size: 1.0625rem; -webkit-line-clamp: 4; }
.sv-k-velika .sv-k-dno { margin: 0 clamp(0.25rem, 1vw, 1rem) clamp(0.625rem, 2vw, 1.375rem) 0; }
.sv-prvi { margin-bottom: clamp(0.875rem, 1.8vw, 1.5rem); }

@media (max-width: 760px) {
  .sv-k-velika { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .sv-k-velika .sv-k-slika { grid-row: auto; height: auto; }
  .sv-k-velika .sv-k-tekst { padding: 1rem 0.75rem 0.25rem; gap: 0.5rem; }
  .sv-k-velika .sv-k-tekst strong { font-size: clamp(1.4375rem, 6vw, 1.75rem); }
  .sv-k-velika .sv-k-tekst .sv-k-sazetak { font-size: 0.96875rem; -webkit-line-clamp: 3; }
  .sv-k-velika .sv-k-dno { margin: 0.75rem 0.75rem 0.375rem; }
}
@media (max-width: 340px) { .sv-k { --r: 1.25rem; --uvuci: 0.375rem; } .sv-k-tekst { padding: 0.875rem 0.5rem 2px; } .sv-k-dno { margin: 0.625rem 0.5rem 0.25rem; } }
@media (prefers-reduced-motion: reduce) { .sv-k, .sv-k-slika img, .sv-k-strelica { transition: none; } .sv-k:hover, .sv-k:active { transform: none; } }

/* ======================================================================
   MOJ OBRT v4 (13. 11. 2026): kartice Danas · Poslovi · Moja stranica · Više
   Širina kao zaglavlje; računalo: kartice gore i dva stupca; mobitel: traka za palac na dnu.
   ====================================================================== */
.okvir.mp-okvir { max-width: var(--sirina); }
.mp { gap: 1rem; }
.mp .mp-ploca > *, .mp .mp-stupac > * { order: 0; }
.mp-zag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .875rem 1.5rem; padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.75rem); border-radius: 1.5rem; background: radial-gradient(120% 160% at 0% 0%, var(--mp-blago, #fdebe2) 0%, #fff 60%); box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 1.125rem 2.75rem -2rem rgba(18,20,23,.35); }
.mp-zag .mp-id { gap: .875rem; flex: 1 1 18rem; }
.mp-zag .mp-avatar { width: 3.75rem; height: 3.75rem; border-radius: 1.125rem; }
.mp-zag h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mp-zag .mp-cipovi { flex: 0 1 auto; }

/* kartice: na računalu traka ispod zaglavlja */
.mp-kartice { display: none; }
.mp-s-karticama .mp-kartice { position: sticky; top: var(--zaglavlje); z-index: 6; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; padding: .3125rem; border-radius: 62.4375rem; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.5) blur(.875rem); backdrop-filter: saturate(1.5) blur(.875rem); box-shadow: 0 0 0 1px rgba(18,20,23,.06), 0 .75rem 2rem -1.25rem rgba(18,20,23,.35); }
.mp-kartice a { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; min-height: 3rem; padding: 0 1rem; border-radius: 62.4375rem; color: var(--tinta); font-weight: 650; font-size: 1rem; text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .16s var(--ease); }
.mp-kartice a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-kartice .ik { flex: none; width: 1.25rem; height: 1.25rem; }
.mp-kartice a:hover { background: #f1efeb; }
.mp-kartice a:active { transform: scale(.97); }
.mp-kartice a[aria-current] { background: var(--tinta); color: #fff; }
.mp-kartica-broj { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; border-radius: 62.4375rem; background: var(--akcent); color: #fff; font: 700 .75rem/1 var(--font); font-style: normal; }

/* ploče */
.mp-ploca { display: grid; gap: 1rem; align-items: start; min-width: 0; }
.mp-s-karticama .mp-ploca:not(.aktivna) { display: none; }
.mp-stupac { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.mp-ploca > *, .mp-stupac > * { min-width: 0; }
@media (min-width: 900px) {
  .mp-ploca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ploca-stranica { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  #ploca-vise .mp-dno { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {
  #ploca-danas { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  #ploca-poslovi, #ploca-vise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-kartice a { min-height: 3.5rem; font-size: 1.125rem; }
}

/* Danas: čeka odgovor, brze radnje, dovrši, mala statistika */
.mp-broj-veliki { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 62.4375rem; background: var(--akcent); color: #fff; font: 800 1rem/1 var(--font-naslov); }
.mp-mali-naslov { font: 700 .75rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--prigušeno); }
.mp-brze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.mp-brzo { display: grid; align-content: start; gap: .25rem; min-width: 0; min-height: 7rem; padding: 1rem; border: 0; border-radius: 1.125rem; background: var(--kamen); color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .16s var(--ease); }
.mp-brzo:hover { background: #fff; box-shadow: 0 0 0 1px var(--crta), 0 .5rem 1.25rem -.75rem rgba(18,20,23,.3); }
.mp-brzo:active { transform: scale(.97); }
.mp-brzo .mp-ik { margin-bottom: .375rem; }
.mp-brzo b { font: 650 1.0625rem/1.2 var(--font-naslov); overflow-wrap: anywhere; }
.mp-brzo small { color: var(--prigušeno); font-size: .8125rem; line-height: 1.3; }
.mp-traka-dovrsi, .mp-traka-stat { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--crta); color: var(--tinta); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.mp-traka-dovrsi:hover, .mp-traka-stat:hover { border-color: #cfcac1; box-shadow: 0 .5rem 1.25rem -.875rem rgba(18,20,23,.35); }
.mp-traka-dovrsi .mp-krug { flex: none; width: 3.25rem; height: 3.25rem; }
.mp-traka-dovrsi > span { display: grid; gap: .125rem; flex: 1 1 auto; min-width: 0; }
.mp-traka-dovrsi b { font: 650 1.0625rem/1.2 var(--font-naslov); }
.mp-traka-dovrsi small { color: var(--prigušeno); font-size: .8125rem; }
.mp-traka-dovrsi > .ik { flex: none; }
.mp-traka-stat { flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; color: var(--prigušeno); }
.mp-traka-stat b { font: 800 1.25rem/1 var(--font-naslov); color: var(--tinta); margin-right: .125rem; }
.mp-traka-stat small { margin-left: auto; font-size: .8125rem; }
.mp-prikaz-akcije { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .25rem; }
.mp-prikaz-akcije .gumb { gap: .5rem; }
.mp-prikaz-akcije .ik { width: 1.0625rem; height: 1.0625rem; }
.mp-dno { gap: .75rem; }

/* mobitel i tablet uspravno: kartice kao traka za palac na dnu */
@media (max-width: 899px) {
  .mp-s-karticama .mp-kartice { position: fixed; top: auto; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); z-index: 60; gap: .125rem; padding: .375rem; border-radius: 1.375rem; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(18,20,23,.07), 0 .75rem 2rem -.75rem rgba(18,20,23,.35); }
  .mp-kartice a { flex-direction: column; gap: .1875rem; min-height: 3.5rem; padding: .375rem .125rem; border-radius: 1rem; font-size: .75rem; }
  .mp-kartice .ik { width: 1.375rem; height: 1.375rem; }
  .mp-kartice a[aria-current] { background: rgba(18,20,23,.07); color: var(--tinta); }
  .mp-kartice a[aria-current] .ik { color: var(--akcent); }
  .mp-kartica-broj { position: absolute; top: .25rem; left: calc(50% + .375rem); min-width: 1.125rem; height: 1.125rem; font-size: .6875rem; }
  .mp-s-karticama { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .mp-zag .mp-avatar { width: 3.25rem; height: 3.25rem; border-radius: 1rem; }
  .mp-zag .mp-cipovi { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .mp-brze { gap: .5rem; }
  .mp-brzo { min-height: 6.25rem; padding: .75rem; }
  .mp-brzo b { font-size: .9375rem; }
  .mp-traka-dovrsi { padding: .875rem; gap: .625rem; }
  .mp-traka-stat small { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 300px) {
  .mp-zag { padding: .875rem; }
  .mp-zag .mp-id { display: flex; flex-basis: 100%; }
  .mp-zag .mp-avatar { width: 2.75rem; height: 2.75rem; }
  .mp-brze { grid-template-columns: minmax(0, 1fr); }
  .mp-brzo { min-height: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: center; }
  .mp-brzo .mp-ik { grid-row: span 2; margin: 0; }
  .mp-kartice a { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-kartice a, .mp-brzo { transition: none; } }
.mp-traka-dovrsi .mp-krug .pod { stroke: #f1efeb; }
.mp-kartica.mp-dno { padding: clamp(1.125rem, 3vw, 1.75rem); }
.mp-ploca .mp-segment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-brze { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr)); }

/* ---- Upis koda (Moj obrt, Hitno, ponude): polje i gumb jedan ispod drugog, da se kod nikad ne odreže
   (gumb „Provjeravam…“ je širi od „Potvrdi“ i prije je stiskao polje). Kartica Moj obrt šira na velikim ekranima. */
.kod-forma { flex-direction: column; gap: .625rem; max-width: 22.5rem; }
.kod-unos { width: 100%; flex: none; height: 4.25rem; font-size: 2rem; letter-spacing: .5em; padding: 0 0 0 .5em; }
.kod-forma .gumb { width: 100%; min-height: 3.5rem; justify-content: center; }
.mo-okvir { max-width: calc(36rem + 2 * var(--rub)); }
@media (min-width: 1600px) { .mo-okvir { max-width: calc(40rem + 2 * var(--rub)); } }
@media (max-width: 340px) { .kod-unos { font-size: 1.75rem; letter-spacing: .35em; padding-left: .35em; } }

/* ---- Podnožje: do 1280 px marka gore, poveznice ispod preko cijele širine (na 1024 px su 4 stupca bila stisnuta) */
@media (max-width: 1279px) {
  .pod-gore { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pod-marka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .pod-logo { grid-area: 1 / 1; } .pod-slogan { grid-area: 2 / 1; }
  .pod-kontakt-gumb { grid-area: 3 / 1; justify-self: start; } .pod-bez-kolacica { grid-area: 4 / 1; }
  .pod-marka > .pod-kontakt { grid-area: 1 / 2 / 5 / 3; align-self: center; }
}
@media (max-width: 720px) {
  .pod-marka { display: block; }
}

/* Moj obrt: kartice na računalu nisu prilijepljene ispod zaglavlja (na mobitelu ostaju traka na dnu) */
@media (min-width: 900px) { .mp-s-karticama .mp-kartice { position: static; } }

/* ---- Moj obrt: usluge, kontakt, područje rada, logo i fotografija, opis fotografije (13. 11. 2026) */
.mp-cipovi-izbor { display: flex; flex-wrap: wrap; gap: .5rem; }
.mp-cip { position: relative; display: inline-flex; min-width: 0; max-width: 100%; cursor: pointer; }
.mp-cip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-cip span { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; max-width: 100%; padding: .375rem .9375rem; border-radius: 999px; border: 1.5px solid var(--crta); background: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.mp-cip span::before { content: '+'; font-weight: 700; color: var(--prigušeno); }
.mp-cip:hover span { border-color: #bdb8ae; }
.mp-cip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.mp-cip input:checked + span::before { content: '✓'; color: #fff; }
.mp-cip input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
.mp-dodaj-red { display: flex; align-items: flex-end; gap: .625rem; }
.mp-dodaj-red .hf-polje { flex: 1 1 auto; min-width: 0; }
.mp-dodaj-red .gumb { flex: none; min-height: 3.375rem; gap: .375rem; }
.mp-dodaj-red .gumb .ik { width: 1.125rem; height: 1.125rem; }
.mp-rv-brzo { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: -.25rem; }
.mp-rv-brzo button { min-height: 2.5rem; padding: 0 .875rem; border: 1.5px solid var(--crta); border-radius: 999px; background: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.mp-rv-brzo button:hover { border-color: var(--tinta); }
.mp-km { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: 1.125rem; background: #f1efeb; }
.mp-km .mp-seg { text-align: center; justify-items: center; }
.mp-km .mp-seg span { font-size: 1.0625rem; }
.mp-lice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.mp-lice-stavka { display: flex; align-items: center; gap: .875rem; min-width: 0; padding: .75rem; border-radius: 1.125rem; background: var(--kamen); }
.mp-lice-stavka.ucitava-gumb { opacity: .6; pointer-events: none; }
.mp-lice-stavka > div { display: grid; gap: .125rem; min-width: 0; }
.mp-lice-stavka b { font: 650 1rem/1.2 var(--font-naslov); }
.mp-lice-stavka small { color: var(--prigušeno); font-size: .8125rem; }
.mp-lice-slika { flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1rem; border: 2px dashed #d3cec5; background: #fff; overflow: hidden; cursor: pointer; }
.mp-lice-slika.ima { border: 0; box-shadow: 0 0 0 1px rgba(18,20,23,.08); }
.mp-lice-slika img { width: 100%; height: 100%; object-fit: cover; }
.mp-lice-gumbi { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .25rem; }
.mp-lice-gumbi .tekst-gumb { min-height: 2.75rem; display: inline-flex; align-items: center; cursor: pointer; font-size: .875rem; color: var(--tinta); }
.mp-sl-opis { position: absolute; left: .375rem; top: .375rem; right: 2.875rem; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .25rem .5625rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--tinta); font: 600 .75rem/1.3 var(--font); cursor: pointer; }
.mp-sl-opis:not(.ima) { color: var(--prigušeno); }
.mp-sl-opis.ima { background: rgba(18,20,23,.78); color: #fff; }
@media (max-width: 420px) {
  .mp-km { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-dodaj-red { flex-wrap: wrap; } .mp-dodaj-red .gumb { width: 100%; justify-content: center; }
}
.kontakti .kontakt-oznaka { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--prigušeno); }
/* stara pravila „order“ (iz rasporeda prije kartica) ne smiju mijenjati redoslijed unutar kartica */
#mp .mp-ploca > *, #mp .mp-stupac > * { order: 0; }

/* ===== Moj obrt: raspored za sljedeća dva tjedna (13. 11. 2026) ===== */
.mp-raspored .mp-opis b { color: var(--tinta); }
.mp-dani { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; margin-top: .875rem; }
.mp-dan { display: grid; justify-items: center; align-content: center; gap: .0625rem; min-width: 0; min-height: 4.25rem; padding: .375rem .125rem; border: 1.5px solid var(--crta, #e4e1db); border-radius: .875rem; background: #fff; color: var(--tinta); font: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1); -webkit-tap-highlight-color: transparent; }
.mp-dan:active { transform: scale(.95); }
.mp-dan small { font-size: .6875rem; font-weight: 600; color: var(--siva, #5f636b); text-transform: lowercase; }
.mp-dan b { font: 700 1.125rem/1.1 'Bricolage Grotesque', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.mp-dan em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .625rem; font-style: normal; font-weight: 700; color: #a3a7ad; }
.mp-dan.vikend { background: #faf9f7; }
.mp-dan.danas { border-color: var(--tinta); }
.mp-dan.dezurstvo { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.mp-dan.dezurstvo small, .mp-dan.dezurstvo em { color: rgba(255,255,255,.9); }
.mp-dan.ne_radi { background: repeating-linear-gradient(135deg, #ecebe8 0 .25rem, #f8f7f5 .25rem .5rem); border-color: #d9d6d0; }
.mp-dan.ne_radi b { color: #8a8d93; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mp-dan.ne_radi em { color: #6b6e74; }
.mp-dan:disabled { opacity: .6; }
.mp-rasp-leg { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin: .75rem 0 0; font-size: .8125rem; color: var(--siva, #5f636b); }
.mp-rasp-leg span { display: inline-flex; align-items: center; gap: .375rem; }
.mp-rasp-leg i { width: .875rem; height: .875rem; border-radius: .25rem; }
.mp-rasp-leg .dez { background: var(--akcent); }
.mp-rasp-leg .ne { background: repeating-linear-gradient(135deg, #d9d6d0 0 2px, #f8f7f5 2px 4px); box-shadow: inset 0 0 0 1px #d9d6d0; }
.mp-rasp-stanje { margin-left: auto; color: var(--zeleno-tamno, #14673a); font-weight: 650; }
@media (max-width: 359px) { .mp-dani { gap: .25rem; } .mp-dan { min-height: 3.75rem; border-radius: .625rem; } .mp-dan em { font-size: .5625rem; } }

/* ===== Moj obrt: plan dana, radnici, radovi; javna galerija po radovima ===== */
.mp-upozorenje { margin: 0; padding: .75rem .875rem; border-radius: 1rem; background: #fff4e5; color: #6e3d00; font-size: .875rem; }
.pd-dan { display: grid; gap: .5rem; }
.pd-dan-naslov { margin: .5rem 0 0; font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--siva, #6b6b6b); }
.pd-dan-naslov.kasni { color: #a1180f; }
.pd-lista, .pd-radnici { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pd-posao { display: grid; gap: .375rem; min-width: 0; padding: .875rem 1rem; border: 1px solid var(--crta, #e7e3dc); border-radius: 1.125rem; background: #fff; }
.pd-posao.st-gotovo { background: #f3f7f3; } .pd-posao.st-gotovo b { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }
.pd-posao.st-stigao { border-color: #e0531f; box-shadow: inset .25rem 0 0 #e0531f; }
.pd-vrh { display: flex; align-items: baseline; gap: .625rem; min-width: 0; }
.pd-vrh b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-sat { flex: none; min-width: 3rem; font-variant-numeric: tabular-nums; font-weight: 700; color: #e0531f; }
.pd-stanje { flex: none; font-style: normal; font-size: .75rem; font-weight: 700; color: var(--siva, #6b6b6b); }
.pd-izvor { margin: 0; font-size: .75rem; font-weight: 700; color: #17643a; }
.pd-red, .pd-napomena { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.pd-napomena { color: var(--siva, #6b6b6b); }
.pd-alati, .pd-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pd-alati select, .pd-alati input { min-height: 2.75rem; padding: 0 .625rem; border: 1px solid var(--crta, #e7e3dc); border-radius: .75rem; background: #fff; font: inherit; font-size: .875rem; max-width: 100%; }
.pd-gumbi .gumb { flex: 1 1 8rem; }
.pd-radnici li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.pd-radnici small { display: block; color: var(--siva, #6b6b6b); }
.tekst-gumb.crveno { color: #a1180f; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp-radovi { display: grid; gap: .75rem; margin-top: 1rem; }
.mp-rad { display: grid; gap: .625rem; padding: .875rem; border-radius: 1.125rem; background: var(--kamen, #f4f1ec); min-width: 0; }
.mp-rad-glava { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.mp-rad-glava small { display: block; color: var(--siva, #6b6b6b); font-size: .8125rem; }
.mp-rad-gumbi { display: flex; flex-wrap: wrap; gap: .75rem; }
.mp-rad-slike { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .375rem; margin: 0; padding: 0; list-style: none; }
.mp-rad-slike li { position: relative; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; background: #fff; }
.mp-rad-slike img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-rad-makni { position: absolute; top: .25rem; right: .25rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.mp-rad-uzmi { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
.mp-rad-uzmi:hover img { opacity: .75; }
.mp-rad-dodaj label { display: grid; place-content: center; height: 100%; text-align: center; cursor: pointer; border: 1.5px dashed var(--crta, #d9d3c9); border-radius: .75rem; }
.mp-rad-dodaj span { font-size: 1.5rem; line-height: 1; } .mp-rad-dodaj small { font-size: .75rem; }
.mp-rad-iz summary { cursor: pointer; font-size: .875rem; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.rad-blok { display: grid; gap: .625rem; margin-bottom: 1.5rem; }
.rad-naslov { margin: 0; font-size: 1.125rem; } .rad-naslov small { font-weight: 500; color: var(--siva, #6b6b6b); font-size: .875rem; }
.rad-opis { margin: 0; color: var(--siva, #6b6b6b); }
#galerija > .rad-naslov { margin-bottom: .625rem; }

/* ===== Pomoć i podrška (/pomoc) ===== */
.pm-okvir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-block: clamp(2rem, 6vw, 5rem); }
.pm-nad { margin: 0; color: #c2501f; font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.pm-uvod h1 { margin: .5rem 0 .75rem; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; }
.pm-opis { margin: 0; font-size: 1.125rem; color: var(--siva, #5f5852); max-width: 34rem; }
.pm-brzo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.pm-brzo a { display: grid; gap: .125rem; min-height: 2.75rem; padding: .875rem 1rem; border-radius: 1.125rem; background: #fff; border: 1px solid var(--crta, #e7e3dc); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.pm-brzo a:hover { border-color: #e0531f; transform: translateY(-.125rem); }
.pm-brzo small { color: var(--siva, #6b6b6b); }
.pm-forma { display: grid; gap: 1rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.75rem; background: #fff; border: 1px solid var(--crta, #e7e3dc); box-shadow: 0 1.5rem 3rem -2rem rgba(60,30,10,.35); }
.pm-vrste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.pm-vrste legend { margin-bottom: .5rem; font-weight: 700; }
.pm-vrsta input { position: absolute; opacity: 0; pointer-events: none; }
.pm-vrsta span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--crta, #e7e3dc); font-weight: 600; cursor: pointer; }
.pm-vrsta input:checked + span { background: #1d1b19; border-color: #1d1b19; color: #fff; }
.pm-vrsta input:focus-visible + span { outline: 2px solid #e0531f; outline-offset: 2px; }
.pm-red { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pm-skriveno { display: none; }
.pm-hvala { padding: 1.25rem; border-radius: 1.25rem; background: #eef7f0; color: #17643a; }
.pm-hvala p { margin: .25rem 0 0; }
@media (max-width: 900px) { .pm-okvir { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pm-red { grid-template-columns: minmax(0, 1fr); } }
.mp-pitaj-popis { margin-top: .25rem; }

/* ===== Alati majstora: fotografije, potpis, kalendar, glas, ponude, izvještaj ===== */
.pd-dodaci { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.pd-dod { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--crta, #e7e3dc); border-radius: 999px; background: #fff; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.pd-dod.ok { border-color: #bfe3cb; background: #eef8f1; color: #17643a; cursor: default; }
.pd-slike { display: flex; flex-wrap: wrap; gap: .25rem; } .pd-slike a { position: relative; display: block; width: 3rem; height: 3rem; border-radius: .5rem; overflow: hidden; }
.pd-slike img { width: 100%; height: 100%; object-fit: cover; } .pd-slike em { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-style: normal; font-size: .5625rem; text-align: center; }
.pp-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(20,18,16,.6); }
.pp-kar { display: grid; gap: .75rem; width: min(100%, 36rem); padding: 1.25rem; border-radius: 1.5rem; background: #fff; }
.pp-kar h2 { margin: 0; font-size: 1.25rem; } .pp-kar p { margin: 0; color: #6b625b; }
.pp-platno { width: 100%; height: 14rem; border-radius: 1rem; background: #faf8f5; box-shadow: inset 0 0 0 1.5px #e6dfd8; touch-action: none; }
.pp-ime { display: grid; gap: .25rem; font-size: .875rem; font-weight: 600; } .pp-ime input { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid #e2ddd6; border-radius: .75rem; font: inherit; }
.pp-gumbi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.pp-gumbi button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid #e2ddd6; border-radius: 999px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; } .pp-gumbi .pp-spremi { background: #1d1b19; border-color: #1d1b19; color: #fff; }
.mp-kal-veza { margin: 0; font-size: .875rem; } .mp-kal-veza a { font-weight: 700; }
.pd-glas-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.pd-glas { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: #fff3ea; font-size: 1.125rem; cursor: pointer; } .pd-glas.slusa { background: #e0531f; color: #fff; animation: kljuc-puls 1.2s ease-out infinite; }
.dk-stavke { display: grid; gap: .375rem; }
.dk-st { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 5rem 6rem 2.25rem; gap: .375rem; align-items: center; }
.dk-st input, .dk-st select { min-width: 0; min-height: 2.75rem; padding: 0 .625rem; border: 1px solid var(--crta, #e7e3dc); border-radius: .75rem; background: #fff; font: inherit; font-size: .875rem; }
.dk-st-gl span { font-size: .75rem; font-weight: 700; color: #8a8178; }
.dk-st-x { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: #f4f1ec; cursor: pointer; }
.dk-ukupno { margin: 0; text-align: right; font-size: 1.0625rem; }
.dk-lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dk-lista li { display: grid; gap: .375rem; padding: .75rem .875rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.dk-l-gl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .dk-l-gl span { color: #6b625b; } .dk-l-iz { margin-left: auto; font-variant-numeric: tabular-nums; }
.dk-l-st { padding: .0625rem .5rem; border-radius: 999px; background: #fff; font-style: normal; font-size: .75rem; font-weight: 700; } .dk-l-st.st-prihvaceno, .dk-l-st.st-placeno { background: #e3f3e8; color: #17643a; } .dk-l-st.st-odbijeno { background: #fdecea; color: #a1180f; }
.dk-l-ak { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .8125rem; }
.mp-izvj-brojke { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mp-izvj-brojke li { display: grid; gap: .125rem; padding: .875rem 1rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.mp-izvj-brojke b { font-size: 1.625rem; letter-spacing: -.03em; } .mp-izvj-brojke span { font-weight: 600; font-size: .875rem; } .mp-izvj-brojke small { color: #8a8178; font-size: .75rem; }
.mp-izvj-h { margin: .75rem 0 .25rem; font-size: .9375rem; }
/* dokument za kupca /d/ */
.dk-okvir { max-width: 52rem; padding-block: clamp(2rem, 5vw, 4rem); }
.dk { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 1.75rem; background: #fff; border: 1px solid var(--crta, #e7e3dc); box-shadow: 0 2rem 4rem -3rem rgba(60,30,10,.35); }
.dk-glava { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.dk-nad { margin: 0; color: #c2501f; font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.dk-glava h1 { margin: .25rem 0; font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -.02em; } .dk-meta { margin: 0; color: #6b625b; }
.dk-kupac { display: grid; gap: .125rem; text-align: right; } .dk-kupac small { color: #8a8178; }
.dk-tab { width: 100%; border-collapse: collapse; } .dk-tab th, .dk-tab td { padding: .625rem .375rem; border-bottom: 1px solid #f0ece7; text-align: left; font-size: .9375rem; }
.dk-tab th:not(:first-child), .dk-tab td:not(:first-child) { text-align: right; white-space: nowrap; }
.dk-tab tfoot td { border-bottom: 0; } .dk-uk td { font-size: 1.25rem; font-weight: 800; } .dk-uk small { font-size: .75rem; font-weight: 500; color: #8a8178; }
.dk-napomena { margin: 0; padding: .875rem 1rem; border-radius: 1rem; background: #faf8f5; }
.dk-akcije { display: flex; flex-wrap: wrap; gap: .5rem; } .dk-stanje { margin: 0; padding: .875rem 1rem; border-radius: 1rem; background: #f4f1ec; font-weight: 600; } .dk-stanje.ok { background: #eef8f1; color: #17643a; }
.dk-sitno { margin: 0; color: #8a8178; font-size: .8125rem; } .dk-ispis { justify-self: start; }
@media (max-width: 560px) { .dk-st { grid-template-columns: minmax(0, 1fr) 3.5rem 4.5rem; } .dk-st input[name=opis] { grid-column: 1 / -1; } .dk-st-gl { display: none; } .dk-st input[name=cijena] { grid-column: 1 / 3; } .dk-kupac { text-align: left; } .dk-tab th:nth-child(2), .dk-tab td:nth-child(2), .dk-tab th:nth-child(3), .dk-tab td:nth-child(3) { display: none; } .dk-tab tfoot td[colspan] { } }
@media print { .zaglavlje, .podnozje, .dk-akcije, .dk-ispis { display: none !important; } .dk { box-shadow: none; border: 0; } }
/* ===== firma: materijal, kontrolne liste, tim ===== */
.pd-ekstra { display: grid; gap: .5rem; }
.pd-lista-k { display: grid; gap: .25rem; padding: .625rem .75rem; border-radius: .875rem; background: #f3f7ff; }
.pd-lista-k b small { color: #6b7a99; font-weight: 600; } .pd-lista-k label { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; font-size: .875rem; }
.pd-lista-k input { width: 1.125rem; height: 1.125rem; accent-color: #1f8a4c; }
.pd-lista-izbor { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; } .pd-lista-izbor select { min-height: 2.5rem; padding: 0 .5rem; border: 1px solid var(--crta, #e7e3dc); border-radius: .625rem; font: inherit; }
.pd-mat summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; font-size: .8125rem; font-weight: 700; }
.pd-mat ul { display: grid; gap: .25rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.pd-mat li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; font-size: .8125rem; } .pd-mat li small { color: #8a8178; }
.pd-mat li button { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: #f4f1ec; cursor: pointer; }
.pd-mat-f { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem 4.5rem auto; gap: .25rem; }
.pd-mat-f input, .pd-mat-f button { min-width: 0; min-height: 2.5rem; padding: 0 .5rem; border: 1px solid var(--crta, #e7e3dc); border-radius: .625rem; font: inherit; font-size: .8125rem; background: #fff; } .pd-mat-f button { background: #1d1b19; border-color: #1d1b19; color: #fff; font-weight: 700; cursor: pointer; }
.rd-lok { margin-top: .75rem; }
.tm { display: grid; gap: .5rem; margin-top: .5rem; } .tm h3 { margin: .75rem 0 .25rem; font-size: .9375rem; }
.tm-ljudi { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.tm-ljudi li { display: grid; gap: .125rem; padding: .625rem .75rem; border-radius: .875rem; background: var(--kamen, #f4f1ec); font-size: .875rem; } .tm-ljudi small { color: #8a8178; }
.tm-karta { height: 16rem; border-radius: 1rem; overflow: hidden; }
.tm-sati { width: 100%; border-collapse: collapse; font-size: .8125rem; } .tm-sati th, .tm-sati td { padding: .375rem .25rem; border-bottom: 1px solid #f0ece7; text-align: left; } .tm-sati small { color: #8a8178; }
.tm-liste { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; } .tm-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .tm-liste small { color: #8a8178; }
@media (max-width: 480px) { .pd-mat-f { grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem; } .pd-mat-f input[name=opis] { grid-column: 1 / -1; } }

/* ===== hitno uživo i fotografija kvara ===== */
.ho-uzivo { display: grid; gap: .375rem; margin: .75rem 0; } .ho-uzivo small { color: #8a8178; }
.ho-slika { margin: .75rem 0; } .ho-slika img { width: 100%; max-height: 18rem; object-fit: cover; border-radius: 1rem; } .ho-slika figcaption { color: #8a8178; font-size: .8125rem; margin-top: .25rem; }
.hs-uzivo { display: flex; align-items: center; gap: .75rem; margin: .75rem 0; padding: .875rem 1rem; border-radius: 1rem; background: #eef5ff; color: #1d4b8f; text-align: left; }
.hs-uzivo b { display: block; } .hs-uzivo small { color: #4a6795; }
.hs-uzivo-tocka { flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: #3d7be0; box-shadow: 0 0 0 0 rgba(61,123,224,.5); animation: hs-puls 1.6s ease-out infinite; }
@keyframes hs-puls { to { box-shadow: 0 0 0 .875rem rgba(61,123,224,0); } }
@media (prefers-reduced-motion: reduce) { .hs-uzivo-tocka { animation: none; } }

.hs-foto { display: flex; align-items: center; gap: .75rem; margin: 1rem auto 0; max-width: 32rem; padding: .875rem 1rem; border-radius: 1rem; border: 1.5px dashed #e2d6cc; background: #fff; cursor: pointer; text-align: left; }
.hs-foto > span:first-of-type { font-size: 1.5rem; } .hs-foto b { display: block; } .hs-foto small { color: #8a8178; }
.hs-foto.ok { border-style: solid; border-color: #bfe3cb; background: #eef8f1; }

/* ===== termin na stranici obrta ===== */
.tr { margin-top: 1.375rem; border-radius: 1.125rem; background: #fff; border: 1px solid var(--crta); }
.tr-gumb { display: flex; align-items: center; gap: .875rem; min-height: 2.75rem; padding: 1rem 1.125rem; cursor: pointer; list-style: none; }
.tr-gumb::-webkit-details-marker { display: none; }
.tr-gumb b { display: block; } .tr-gumb small { color: #8a8178; }
.tr-ik { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .875rem; background: var(--akcent-svijetli); color: var(--akcent); }
.tr-ik .ik { width: 1.25rem; height: 1.25rem; }
.tr[open] .tr-gumb { border-bottom: 1px solid var(--crta); }
.tr-forma { display: grid; gap: .875rem; padding: 1rem 1.125rem 1.25rem; min-width: 0; }
.tr fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .tr legend { font-weight: 600; font-size: .875rem; margin-bottom: .5rem; }
.tr-dani-lista { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; scroll-snap-type: x mandatory; }
.tr-dan { flex: none; scroll-snap-align: start; }
.tr-dan input, .tr-dijelovi input { position: absolute; opacity: 0; pointer-events: none; }
.tr-dan span { display: grid; justify-items: center; gap: .0625rem; width: 3.5rem; padding: .5rem 0; border-radius: .875rem; border: 1px solid var(--crta); cursor: pointer; transition: border-color .15s, background .15s; }
.tr-dan b { font-size: 1.125rem; } .tr-dan small { font-size: .6875rem; color: #8a8178; }
.tr-dan input:checked + span { border-color: var(--akcent); background: var(--akcent-svijetli); }
.tr-dan input:focus-visible + span, .tr-dijelovi input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
.tr-dan.zauzet span { opacity: .45; cursor: not-allowed; }
.tr-dijelovi { display: flex; flex-wrap: wrap; gap: .375rem; }
.tr-dijelovi legend { width: 100%; }
.tr-dijelovi span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 62rem; border: 1px solid var(--crta); cursor: pointer; }
.tr-dijelovi input:checked + span { border-color: var(--akcent); background: var(--akcent-svijetli); font-weight: 600; }
.tr-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .75rem; }
.tr-sitno, .tr-ucitava { color: #8a8178; font-size: .8125rem; margin: 0; }
.tr-hvala { padding: 1rem 1.125rem 1.25rem; } .tr-hvala p { margin: .25rem 0 0; color: #5c544c; }

/* ===== Moj obrt: zahtjevi za termin ===== */
.mp-prekidac { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.mp-prekidac input { width: 1.125rem; height: 1.125rem; accent-color: var(--akcent); }
.tz-lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tz { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; align-items: center; gap: .75rem 1rem; padding: .875rem 1rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.tz-kad b, .tz-sto b { display: block; } .tz small { color: #8a8178; font-size: .8125rem; }
.tz-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 47.99rem) { .tz { grid-template-columns: minmax(0, 1fr); } }

/* ===== Moj dom ===== */
.md-okvir { max-width: 56rem; }
.md-uvod h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -.03em; margin: .25rem 0 .75rem; }
.md-prijava { margin-top: 1.75rem; max-width: 26rem; }
.md-forma { display: grid; gap: .75rem; padding: 1.25rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--crta); }
.md-gumbi { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.md-sitno { color: #8a8178; font-size: .8125rem; margin: 0; }
.md-sadrzaj { display: grid; gap: 1rem; margin-top: 1.75rem; }
.md-traka { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; color: #5c544c; }
.md-kartica { display: grid; gap: .875rem; padding: clamp(1.125rem, 3vw, 1.75rem); border-radius: 1.5rem; background: #fff; border: 1px solid var(--crta); min-width: 0; }
.md-kartica h2 { font-size: 1.375rem; margin: 0; }
.md-uredaji, .md-povijest { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.md-uredaji li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .875rem; padding: .75rem 1rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.md-ur-ik { font-size: 1.5rem; } .md-uredaji b, .md-povijest b { display: block; } .md-uredaji small, .md-povijest small { color: #8a8178; font-size: .8125rem; }
.md-uredaji em { color: var(--akcent); font-style: normal; font-weight: 600; }
.md-dodaj { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; align-items: end; }
.md-povijest li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .875rem 1rem; border-radius: 1rem; border: 1px solid var(--crta); }
.md-povijest li > div:first-child { min-width: 0; flex: 1 1 14rem; }
.md-stanje { display: inline-block; margin-top: .25rem; font-size: .75rem; padding: .125rem .5rem; border-radius: 62rem; background: var(--kamen, #f4f1ec); }
.md-maj { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .md-maj a:first-child { font-weight: 600; }
.md-prazno { color: #8a8178; margin: 0; }

/* ===== jamstvo ===== */
.jm-koraci { display: grid; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: jm; }
.jm-koraci li { counter-increment: jm; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.jm-koraci li::before { content: counter(jm); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--akcent-svijetli); color: var(--akcent); font-weight: 700; }
.jm-koraci span { color: #8a8178; font-size: .875rem; }
.jm-napomena { margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); font-size: .875rem; color: #5c544c; }
.ov-glavno, .ov-strana, .tr, .tr-forma { min-width: 0; }
.ho-uzivo .gumb { white-space: normal; height: auto; min-height: 2.75rem; padding-top: .625rem; padding-bottom: .625rem; text-align: center; }
.tr-dan, .tr-dijelovi label { position: relative; } .tr-dani-lista { position: relative; }
.tz-gumbi input[type=time] { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--crta); border-radius: .75rem; background: #fff; font: inherit; }

/* ===== preporuke, provjeren dodatno, najbolje ocijenjeni ===== */
.mp-prep-veza { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; }
.mp-prep-veza input { min-width: 0; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--crta); border-radius: .875rem; background: var(--kamen, #f4f1ec); font: inherit; font-size: .875rem; }
@media (max-width: 30rem) { .mp-prep-veza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mp-prep-veza input { grid-column: 1 / -1; } }
.provjeren-dodatno { margin: .5rem 0 0; padding-left: 1.125rem; font-size: .875rem; }
.provjeren-dodatno li { margin: .125rem 0; }
.lk-najbolji { display: grid; gap: .75rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.5rem; background: #fff; border: 1px solid var(--crta); }
.lk-najbolji h2 { margin: 0; font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.lk-nb-uvod { margin: 0; color: #8a8178; font-size: .875rem; }
.lk-nb-lista { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.lk-nb-lista li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: 1rem; background: var(--kamen, #f4f1ec); }
.lk-nb-mj { font-weight: 800; font-size: 1.125rem; color: var(--akcent); }
.lk-nb-lista a { display: grid; min-width: 0; color: inherit; text-decoration: none; min-height: 2.75rem; align-content: center; }
.lk-nb-lista a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-nb-lista a small { color: #8a8178; }
.lk-nb-ocj { font-weight: 700; white-space: nowrap; } .lk-nb-ocj small { font-weight: 400; color: #8a8178; }

/* ===== zaštita: nova poveznica, izostanak ===== */
.mp-nova-veza { margin-top: .5rem; } .mp-nova-veza summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: #8a8178; font-size: .875rem; }
.mp-nova-veza .gumb { margin-top: .5rem; }
.pd-izostanak { margin: .375rem 0 0; padding: .375rem .75rem; border-radius: .75rem; background: #fdecec; color: #a3332a; font-size: .8125rem; font-weight: 600; }
@media (max-width: 30rem) { .pravno-tablica { font-size: .875rem; } .pravno-tablica th, .pravno-tablica td { padding: .5rem .375rem; overflow-wrap: anywhere; } .pravno-tablica code { word-break: break-all; } }

/* Moj dom kao mjesto za sve: trag na stranicama hitnog poziva, upita i ocjene */
.md-trag { margin: 1.25rem 0 0; padding: .875rem 1rem; border-radius: 1rem; background: rgba(224,83,31,.07); font-size: .9375rem; line-height: 1.5; color: inherit; overflow-wrap: anywhere; }
.md-trag a { font-weight: 700; }
.oc-stranica { display: grid; gap: 1rem; max-width: 40rem; }
.oc-stranica h1 { margin: 0; }
/* zahtjev za termin: majstor može predložiti drugi slobodan dan */
.tz-drugi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; grid-column: 1 / -1; }
.tz-drugi .pd-radnik { display: grid; gap: .25rem; min-width: 0; flex: 1 1 12rem; }
.tz-drugi .pd-radnik span { font-size: .8125rem; color: var(--sivo, #6b6b6b); }
.tz-drugi select { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--crta); border-radius: .75rem; background: #fff; font: inherit; max-width: 100%; }
.tr-dijelovi label.zauzet { opacity: .4; }
/* zahtjev za termin: tekst gore u dva stupca, radnje ispod preko cijele širine (u uskoj kartici tekst više ne puca po riječima) */
.tz { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
.tz-gumbi { grid-column: 1 / -1; }
.tz-sto small { overflow-wrap: anywhere; }
@media (max-width: 22.5rem) { .tz { grid-template-columns: minmax(0, 1fr); } }

/* ======================= RAZGOVOR kupac–majstor ======================= */
.rz { display: grid; gap: .875rem; min-width: 0; }
.rz-stranica { display: grid; gap: 1rem; max-width: 46rem; }
.rz-stranica .natrag { justify-self: start; }
.rz-glava { display: grid; gap: .25rem; }
.rz-nad { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--naglasak, #e0531f); }
.rz-naslov { margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.2; overflow-wrap: anywhere; }
h3.rz-naslov { font-size: 1.0625rem; }
.rz-tko { margin: 0; color: var(--sivo, #6b6b6b); font-size: .9375rem; }
.rz-uvod { margin: 0; font-size: .9375rem; }
.rz-info { margin: 0; padding: .75rem 1rem; border-radius: .875rem; background: rgba(47,158,91,.09); color: #1f5f3a; font-size: .875rem; line-height: 1.45; }
.rz-poruke { display: grid; gap: .5rem; margin: 0; padding: .75rem; list-style: none; max-height: min(60vh, 32rem); min-height: 6rem; overflow-y: auto; border-radius: 1rem; background: var(--kamen, #f4f1ec); overscroll-behavior: contain; }
.rz-p { display: grid; gap: .1875rem; max-width: min(85%, 34rem); padding: .625rem .875rem; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(22,24,28,.06); }
.rz-p p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.rz-p time { font-size: .6875rem; color: var(--sivo, #8a8178); }
.rz-p.ja { justify-self: end; background: #e0531f; color: #fff; border-bottom-right-radius: .375rem; }
.rz-p.ja time { color: rgba(255,255,255,.82); }
.rz-p.oni { justify-self: start; border-bottom-left-radius: .375rem; }
.rz-p.sustav { justify-self: center; background: transparent; box-shadow: none; text-align: center; font-size: .8125rem; color: var(--sivo, #6b6b6b); }
.rz-prazno { padding: 1rem .5rem; text-align: center; color: var(--sivo, #6b6b6b); font-size: .9375rem; }
.rz-forma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.rz-forma textarea { width: 100%; min-height: 2.75rem; max-height: 10rem; padding: .625rem .875rem; border: 1px solid var(--crta, #ddd6cd); border-radius: 1rem; font: inherit; resize: vertical; box-sizing: border-box; }
.rz-forma .gumb { min-height: 2.75rem; }
.rz-greska { grid-column: 1 / -1; margin: 0; color: #b42318; font-size: .875rem; }
.rz-zatvoreno { margin: 0; color: var(--sivo, #6b6b6b); font-size: .9375rem; }
.rz-dno { margin: 0; text-align: right; }
.rz-dno .tekst-gumb { font-size: .8125rem; color: var(--sivo, #6b6b6b); }
.rz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 22.5rem) { .rz-forma { grid-template-columns: minmax(0, 1fr); } .rz-p { max-width: 92%; } }
/* Moj obrt: popis razgovora */
.rz-lista { display: grid; gap: .375rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.rz-stavka { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.25rem; padding: .625rem .875rem; border: 0; border-radius: .875rem; background: var(--kamen, #f4f1ec); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rz-stavka[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #e0531f; }
.rz-stavka.ima-novo b { font-weight: 800; }
.rz-st-t { display: grid; gap: .125rem; flex: 1 1 auto; min-width: 0; }
.rz-st-t b, .rz-st-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-st-t small { color: var(--sivo, #6b6b6b); font-size: .8125rem; }
.rz-st-d { display: grid; justify-items: end; gap: .25rem; flex: none; }
.rz-st-d time { font-size: .75rem; color: var(--sivo, #8a8178); }
.rz-novo { padding: .125rem .5rem; border-radius: 999px; background: #e0531f; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; }
.rz-u-kartici { padding-top: .75rem; border-top: 1px solid var(--crta, #e8e2da); }
.pjm-razgovor { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--crta, #e8e2da); }
/* stranica upita: gumb „Poruke majstoru“ s brojem novih */
.pjk-pitaj { position: relative; }
.pjk-nove { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: .375rem; padding: 0 .3125rem; border-radius: 999px; background: #e0531f; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; }
.tr-poruka { display: grid; gap: .375rem; justify-items: start; margin: .75rem 0 0; }
.tr-poruka small { color: var(--sivo, #6b6b6b); }
/* Moj dom: sezonski savjet i „Opet ovaj majstor“ */
.md-sezona { background: linear-gradient(135deg, rgba(224,83,31,.08), rgba(224,83,31,.02)); }
.md-sez-nad { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c2461a; }
.md-sezona h2 { margin: .25rem 0 .5rem; }
.md-sez-clanci { display: grid; gap: .375rem; margin: 0; padding-left: 1.125rem; }
.md-sez-clanci a { overflow-wrap: anywhere; }
.md-maj { flex-wrap: wrap; }
/* pristupačnost: vidljiv fokus u malom polju za pretragu i traci filtera (tipkovnica) */
.mala-trazilica:focus-within, .traka-polje:focus-within { outline: 2px solid #e0531f; outline-offset: 2px; }