/* =====================================================================
   ARXO naslovnica v32 — „Kako radi" (#kako). Zajednički tokeni: css/naslovna-v32.css
   Logika: js/naslovna-kako.js (koraci, tlocrt, kartice, ponuda), js/naslovna-kako-3d.js (3D)
   ===================================================================== */
.kk {
  --kk-zid: #283056; --kk-zid-2: #48507a; --kk-gk: #e3e5f0; --kk-et: #dcdfeb; --kk-crta: #2a3157; --kk-crta-2: #8a90ab; --kk-tanko: #a5aac0;
  --kk-papir: #f6f5f2; --kk-nm: #a7acc2; --kk-nm-f: #eceef5; --kk-tekst-plan: #3a4064; --kk-ok: #b9bdd0;
  --kk-h: clamp(560px, 74vh, 760px);
  padding: clamp(64px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); overflow: clip;
}
:root[data-tema="tamna"] .kk {
  --kk-zid: #c9cff5; --kk-zid-2: #9aa2d6; --kk-gk: #2b3363; --kk-et: #253063; --kk-crta: #c9cff5; --kk-crta-2: #7c84b4; --kk-tanko: #5d6696;
  --kk-papir: #0d1230; --kk-nm: #59628f; --kk-nm-f: #1a2150; --kk-tekst-plan: #c3c8ea; --kk-ok: #3d4678;
}
.kk-u { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px); display: grid; grid-template-columns: minmax(300px, 470px) minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
.kk .v32-h2 { font-size: clamp(34px, 4.1vw, 62px); }
.kk-lijevo { padding-top: clamp(0px, 2vw, 28px); }
.kk .v32-pod { margin-bottom: clamp(22px, 2.4vw, 34px); }
.kk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* ---------- koraci (lijevo) ---------- */
.kk-koraci { position: relative; display: grid; gap: 14px; }
.kk-koraci::before { content: ''; position: absolute; left: 23px; top: 30px; bottom: 30px; width: 1px; background: var(--v32-crta-2); }
.kk-korak { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.kk-br { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--v32-f); color: var(--v32-tinta);
  background: var(--v32-staklo-jako); border: 1px solid var(--v32-rub); box-shadow: var(--v32-sjena); transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--v32-ease); }
.kk-kart { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 16px; align-items: center; padding: 15px 18px 15px 20px; border-radius: var(--v32-r);
  background: var(--v32-staklo); border: 1px solid var(--v32-staklo-rub); box-shadow: var(--v32-sjena), inset 0 0 0 1px var(--v32-rub); -webkit-backdrop-filter: var(--v32-blur); backdrop-filter: var(--v32-blur);
  transition: box-shadow .3s, background .3s, transform .35s var(--v32-ease); }
.kk-ik { width: 32px; height: 32px; fill: none; stroke: var(--v32-tinta); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; }
.kk-tx { display: grid; gap: 4px; min-width: 0; }
.kk-tx b { font: 700 19px/1.2 var(--v32-f); letter-spacing: -.01em; color: var(--v32-tinta); transition: color .3s; }
.kk-tx span { font: 400 14.5px/1.45 var(--v32-f); color: var(--v32-siva); }
.kk-str { width: 16px; height: 16px; fill: none; stroke: var(--v32-nagl); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--v32-ease); }
.kk-korak:hover .kk-kart { transform: translateX(2px); box-shadow: var(--v32-sjena-jaka), inset 0 0 0 1px var(--v32-rub); }
.kk-korak:hover .kk-str { opacity: .6; transform: none; }
.kk-korak[aria-selected="true"] .kk-br { background: var(--v32-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(91, 79, 224, .8), 0 0 0 5px var(--v32-nagl-meko); }
.kk-korak[aria-selected="true"] .kk-kart { background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(246, 244, 255, .8)); box-shadow: 0 0 0 1.5px var(--v32-nagl-rub), 0 18px 40px -18px rgba(91, 79, 224, .45), var(--v32-sjena); }
:root[data-tema="tamna"] .kk-korak[aria-selected="true"] .kk-kart { background: linear-gradient(180deg, rgba(40, 44, 96, .9), rgba(32, 36, 84, .86)); }
.kk-korak[aria-selected="true"] .kk-tx b { color: var(--v32-nagl); }
.kk-korak[aria-selected="true"] .kk-ik { stroke: var(--v32-nagl); }
.kk-korak[aria-selected="true"] .kk-str { opacity: 1; transform: none; }
.kk-korak:focus { outline: none; }
.kk-korak:focus-visible .kk-kart { box-shadow: var(--v32-fokus), var(--v32-sjena); }

/* ---------- pozornica (desno) ---------- */
.kk-desno { position: relative; min-width: 0; }
.kk-pozornica { position: relative; height: var(--kk-h); outline: none; }
.kk-pogled { position: absolute; inset: 0; }
.kk-plan, .kk-3d { position: absolute; inset: 0; }
.kk-plan { will-change: opacity; }
.kk-svg { position: absolute; inset: 0 0 44px 0; width: 100%; height: calc(100% - 44px); overflow: visible; }
.kk-3d { will-change: opacity; }
.kk-platno, .kk-platno canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kk-platno canvas { touch-action: pan-y; cursor: grab; outline: none; }
.kk-platno canvas.vuce { cursor: grabbing; }
.kk-platno canvas:focus-visible { box-shadow: inset var(--v32-fokus); border-radius: var(--v32-r-l); }
.kk-slika { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* etaže */
.kk-katovi { position: absolute; z-index: 3; left: 4px; top: 0; display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--v32-staklo-jako); border: 1px solid var(--v32-rub); box-shadow: var(--v32-sjena); }
.kk-katovi button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: 600 13px/1 var(--v32-f); color: var(--v32-siva); cursor: pointer; }
.kk-katovi button[aria-pressed="true"] { background: var(--v32-tinta); color: var(--v32-pod-2); }
.kk-katovi button:disabled { cursor: default; opacity: .6; }
.kk-katovi button:focus-visible { outline: none; box-shadow: var(--v32-fokus); }

/* ---------- tlocrt (SVG) ---------- */
.kk-svg text { font-family: var(--v32-f); }
.kk-zs { fill: var(--kk-zid); transition: fill .35s, opacity .35s; cursor: pointer; }
.kk-z-pregradni { fill: var(--kk-zid-2); }
.kk-z-gk { fill: var(--kk-gk); stroke: var(--kk-zid-2); stroke-width: 1.4; }
.kk-et { fill: var(--kk-et); }
.kk-ot { cursor: pointer; }
.kk-ot-p { fill: var(--kk-papir); stroke: none; }
.kk-pz { stroke: var(--kk-crta); stroke-width: 1.6; }
.kk-pz-t { stroke: var(--kk-crta); stroke-width: 1.1; }
.kk-prolaz { stroke: var(--kk-crta-2); stroke-width: 1.4; stroke-dasharray: 8 6; }
.kk-vr-l { stroke: var(--kk-crta); stroke-width: 2.6; stroke-linecap: round; }
.kk-vr { fill: none; stroke: var(--kk-crta-2); stroke-width: 1.3; stroke-dasharray: 6 5; }
.kk-dm { fill: var(--kk-zid); }
.kk-dm-c { fill: var(--kk-papir); }
.kk-dim { cursor: pointer; }
.kk-st-g { stroke: var(--kk-crta-2); stroke-width: 1.3; }
.kk-st-o { fill: none; stroke: var(--kk-crta); stroke-width: 1.6; }
.kk-st-otv { fill: none; stroke: var(--kk-crta-2); stroke-width: 1.2; stroke-dasharray: 10 7; }
.kk-st-s { fill: none; stroke: var(--v32-nagl); stroke-width: 2.4; }
.kk-str-m { fill: var(--v32-nagl); }
.kk-stube { cursor: pointer; }
.kk-nm { fill: none; stroke: var(--kk-nm); stroke-width: 1.3; }
.kk-nm-f { fill: var(--kk-nm-f); }
.kk-so { font-size: 21px; font-weight: 700; letter-spacing: .06em; fill: var(--kk-tekst-plan); text-anchor: middle; }
.kk-so-p { font-size: 19px; font-weight: 500; fill: var(--v32-siva); text-anchor: middle; }
.kk-so-m { font-size: 17px; font-weight: 700; letter-spacing: .08em; fill: var(--v32-siva); text-anchor: middle; }
.kk-ko, .kk-ko-p { stroke: var(--kk-crta-2); stroke-width: 1.2; }
.kk-ko-k { stroke: var(--kk-crta); stroke-width: 2.2; }
.kk-ko-t { font-size: 18px; font-weight: 600; fill: var(--kk-tekst-plan); text-anchor: middle; }
.kk-kote { cursor: pointer; }
.kk-ok { fill: none; stroke: var(--kk-ok); stroke-width: 1.4; stroke-dasharray: 9 7; }
.kk-sj-k { fill: var(--v32-staklo-jako); stroke: var(--kk-crta-2); stroke-width: 1.4; }
.kk-sj { fill: var(--v32-nagl); }
.kk-mj-1 { fill: var(--kk-crta); } .kk-mj-2 { fill: var(--kk-et); stroke: var(--kk-crta); stroke-width: 1; }
.kk-sraf-p { fill: var(--kk-et); } .kk-sraf-c { stroke: var(--kk-crta-2); stroke-width: 1.2; }

/* odabir (korak 1) i isticanje (korak 2) */
.kk-zs.odab, .kk-dim.odab .kk-dm { fill: var(--v32-nagl); }
.kk-ot.odab .kk-ot-p { fill: var(--v32-nagl-meko); stroke: var(--v32-nagl); stroke-width: 2; }
.kk-stube.odab .kk-st-o, .kk-kote.odab .kk-ko { stroke: var(--v32-nagl); stroke-width: 3; }
.kk-ist .kk-zs:not(.ist), .kk-ist .kk-dm { opacity: .38; }
.kk-ist .kk-et { opacity: .6; }
.kk-ist .kk-zs.ist { fill: var(--v32-nagl); opacity: 1; }
.kk-ist .kk-ot.ist .kk-ot-p { fill: rgba(91, 79, 224, .22); stroke: var(--v32-nagl); stroke-width: 2.4; }

/* iscrtavanje tlocrta (jednom, kad se odjeljak prvi put vidi) */
.kk-prije .kk-zs, .kk-prije .kk-ot, .kk-prije .kk-dim, .kk-prije .kk-stube, .kk-prije .kk-oprema, .kk-prije .kk-sobe, .kk-prije .kk-kote, .kk-prije .kk-znak, .kk-prije .kk-etics, .kk-prije .kk-okolis { opacity: 0; }
.kk-crta .kk-zs { transform-box: fill-box; animation: kkRastX .5s var(--v32-ease) var(--d, 0s) both; transform-origin: 0 50%; }
.kk-crta .kk-zs.v { animation-name: kkRastY; transform-origin: 50% 0; }
.kk-crta .kk-ot, .kk-crta .kk-dim, .kk-crta .kk-stube, .kk-crta .kk-oprema, .kk-crta .kk-sobe, .kk-crta .kk-znak, .kk-crta .kk-etics, .kk-crta .kk-okolis, .kk-crta .kk-kote text { animation: kkPojava .55s ease var(--d, 0s) both; }
.kk-crta .kk-vr, .kk-crta .kk-ko { stroke-dasharray: 1 1; animation: kkCrta .8s ease var(--d, 0s) both; }
.kk-crta .kk-kote .kk-ko-k, .kk-crta .kk-kote .kk-ko-p { animation: kkPojava .4s ease var(--d, 0s) both; }
@keyframes kkRastX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes kkRastY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes kkPojava { from { opacity: 0; } to { opacity: 1; } }
@keyframes kkCrta { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- oznake dijelova (tlocrt i 3D) ---------- */
.kk-tocke { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kk-tocka { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: auto; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.kk-tocka i { position: absolute; left: 7px; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--v32-nagl), 0 4px 10px -2px rgba(30, 30, 90, .4); transition: transform .25s var(--v32-ease), background .25s; }
.kk-tocka i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--v32-nagl-rub); animation: kkPuls 2.6s ease-out infinite; }
.kk-tocka span { position: absolute; white-space: nowrap; padding: 6px 11px; border-radius: 999px; font: 600 12.5px/1.2 var(--v32-f); color: var(--v32-tinta);
  background: var(--v32-staklo-jako); border: 1px solid var(--v32-rub); box-shadow: var(--v32-sjena); transition: background .25s, color .25s, box-shadow .25s; }
.kk-tocka.sm-n span { left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); }
.kk-tocka.sm-s span { left: 50%; top: calc(100% - 2px); transform: translateX(-50%); }
.kk-tocka.sm-e span { left: calc(100% - 2px); top: 50%; transform: translateY(-50%); }
.kk-tocka.sm-w span { right: calc(100% - 2px); top: 50%; transform: translateY(-50%); }
.kk-tocka:hover i, .kk-tocka:focus-visible i { transform: scale(1.18); }
.kk-tocka:hover span { box-shadow: var(--v32-sjena-jaka); }
.kk-tocka[aria-pressed="true"] i { background: var(--v32-nagl); }
.kk-tocka[aria-pressed="true"] span { background: var(--v32-nagl); color: #fff; border-color: transparent; }
.kk-tocka:focus { outline: none; }
.kk-tocka:focus-visible span { box-shadow: var(--v32-fokus), var(--v32-sjena); }
.kk-tocka.skriv { visibility: hidden; }
.kk-plan[style*="opacity: 0"] .kk-tocka { pointer-events: none; }
@keyframes kkPuls { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.kk-oznaka { position: absolute; z-index: 5; max-width: 300px; padding: 12px 14px; pointer-events: none; font: 400 13px/1.45 var(--v32-f); color: var(--v32-tekst); background: var(--v32-staklo-jako); }
.kk-oznaka b { display: block; font: 700 14.5px/1.3 var(--v32-f); color: var(--v32-tinta); margin-bottom: 3px; }
.kk-oznaka span { display: block; color: var(--v32-siva); }
.kk-oznaka dl, .kk-info-k { margin: 8px 0 0; display: grid; gap: 3px; }
.kk-oznaka dl div, .kk-info-k div { display: flex; justify-content: space-between; gap: 14px; }
.kk-oznaka dt, .kk-info-k dt { color: var(--v32-siva); }
.kk-oznaka dd, .kk-info-k dd { margin: 0; font-weight: 700; color: var(--v32-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- paneli ---------- */
.kk-panel { position: absolute; z-index: 4; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--v32-ease), visibility 0s linear .5s; }
.kk-panel.vid { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .08s, transform .55s var(--v32-ease) .08s, visibility 0s; }
.kk-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; font: 400 20px/1 var(--v32-f); color: var(--v32-siva); cursor: pointer; }
.kk-x:hover { background: var(--v32-nagl-meko); color: var(--v32-tinta); }
.kk-x:focus-visible { outline: none; box-shadow: var(--v32-fokus); }

.kk-info { left: 6px; bottom: 56px; width: min(360px, 52%); padding: 16px 44px 16px 18px; background: var(--v32-staklo-jako); }
.kk-info-n { margin: 0 0 4px; font: 700 15.5px/1.3 var(--v32-f); color: var(--v32-tinta); }
.kk-info-o { margin: 0; font: 400 13.5px/1.5 var(--v32-f); color: var(--v32-tekst); }
.kk-info-k { font: 400 13px/1.4 var(--v32-f); }
.kk-info-i { margin: 8px 0 0; font: 400 11.5px/1.3 var(--v32-f); color: var(--v32-siva); }

.kk-mat { right: 0; top: 0; width: min(350px, 46%); padding: 18px 18px 14px; background: var(--v32-staklo-jako); }
.kk-mat-g { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.kk-mat-g svg { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: var(--v32-tinta); stroke-width: 1.6; stroke-linejoin: round; }
.kk-mat-g b { display: block; font: 700 17px/1.2 var(--v32-f); color: var(--v32-tinta); }
.kk-mat-g small { display: block; font: 500 12px/1.35 var(--v32-f); color: var(--v32-siva); margin-top: 2px; }
.kk-mat-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kk-mat-l li { opacity: 0; transform: translateY(6px); transition: opacity .35s ease calc(.12s + var(--i) * .05s), transform .45s var(--v32-ease) calc(.12s + var(--i) * .05s); }
.kk-mat.vid .kk-mat-l li { opacity: 1; transform: none; }
.kk-mat-l button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font: 500 13.5px/1.3 var(--v32-f); color: var(--v32-tekst); }
.kk-mat-l button b { font-weight: 700; color: var(--v32-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-mat-l button:hover { background: var(--v32-nagl-meko); }
.kk-mat-l button[aria-pressed="true"] { background: var(--v32-nagl-meko); box-shadow: inset 3px 0 0 var(--v32-nagl); color: var(--v32-tinta); }
.kk-mat-l button:focus-visible { outline: none; box-shadow: var(--v32-fokus); }
.kk-mat-c { padding: 8px 10px; color: var(--v32-siva); font-size: 13px; }
.kk-mat-d { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v32-rub); display: grid; gap: 3px; font: 500 13px/1.4 var(--v32-f); color: var(--v32-siva); }
.kk-mat-d div { display: flex; justify-content: space-between; gap: 10px; padding: 0 10px; }
.kk-mat-d b { color: var(--v32-tinta); font-variant-numeric: tabular-nums; }
.kk-mat-uk { margin-top: 4px; font-size: 14px; }
.kk-mat-uk b { color: var(--v32-nagl); font-size: 15px; }
.kk-mat-d p { margin: 6px 10px 0; font-size: 11.5px; }
.kk-veza { border: 0; background: none; padding: 0; font: 600 11.5px var(--v32-f); color: var(--v32-nagl); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.kk-dok { right: 0; top: 18px; width: min(350px, 42%); }
.kk-dok-l { padding: 22px 22px 16px; border-radius: 14px; background: #fff; color: #1d2240; box-shadow: 0 1px 2px rgba(20, 24, 60, .06), 0 30px 70px -30px rgba(20, 24, 60, .45); border: 1px solid rgba(32, 38, 80, .08); }
:root[data-tema="tamna"] .kk-dok-l { background: #f7f7fb; }
.kk-dok-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.kk-dok-h h3 { margin: 6px 0 0; font: 800 24px/1.1 var(--v32-f); letter-spacing: -.02em; color: #10133a; }
.kk-dok-logo, .kk-pd-logo { font: 800 15px/1 var(--v32-f); letter-spacing: .26em; color: #10133a; text-align: center; }
.kk-dok-logo small, .kk-pd-logo small { display: block; font: 600 6.5px/1 var(--v32-f); letter-spacing: .5em; margin-top: 3px; color: #5d6178; }
.kk-dok-m { margin: 0 0 10px; display: grid; gap: 2px; font: 400 11.5px/1.4 var(--v32-f); }
.kk-dok-m div { display: grid; grid-template-columns: 72px 1fr; gap: 6px; }
.kk-dok-m dt { color: #6a6f86; } .kk-dok-m dd { margin: 0; color: #1d2240; }
.kk-dok-t { width: 100%; border-collapse: collapse; font: 400 10.5px/1.35 var(--v32-f); color: #2a2e4d; font-variant-numeric: tabular-nums; }
.kk-dok-t th { font-weight: 600; color: #6a6f86; text-align: left; padding: 6px 3px; border-bottom: 1px solid #e4e5ee; }
.kk-dok-t td { padding: 5px 3px; border-bottom: 1px solid #f0f0f5; vertical-align: top; }
.kk-dok-t td:first-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-dok-t .n { text-align: right; white-space: nowrap; }
.kk-dok-ost td { color: #6a6f86; font-style: italic; }
.kk-dok-z { margin-top: 10px; display: grid; gap: 4px; font: 400 12px/1.3 var(--v32-f); }
.kk-dok-z div { display: flex; justify-content: space-between; gap: 10px; }
.kk-dok-z b { font-variant-numeric: tabular-nums; color: #1d2240; }
.kk-dok-sv { margin-top: 4px; padding: 9px 10px; border-radius: 9px; background: #f2f0ff; font-size: 14px; }
.kk-dok-sv span { font-weight: 700; color: #3a2fb8; } .kk-dok-sv b { color: #3a2fb8; font-size: 16px; }
.kk-dok-c { margin: 0; color: #6a6f86; font-size: 13px; }
.kk-dok-g { display: block; width: 100%; margin-top: 10px; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--v32-nagl-rub); background: var(--v32-staklo-jako); font: 600 13.5px/1 var(--v32-f); color: var(--v32-nagl); cursor: pointer; box-shadow: var(--v32-sjena); }
.kk-dok-g:hover { background: var(--v32-nagl); color: #fff; }
.kk-dok-g:focus-visible { outline: none; box-shadow: var(--v32-fokus); }

/* ---------- uputa, učitavanje, alati 3D ---------- */
.kk-uputa { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; max-width: 92%; text-align: center; font: 500 13px/1.35 var(--v32-f); color: var(--v32-siva); pointer-events: none; }
.kk-ucitava { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; font: 600 13.5px/1 var(--v32-f); color: var(--v32-tinta);
  background: var(--v32-staklo-jako); border: 1px solid var(--v32-rub); box-shadow: var(--v32-sjena-jaka); }
.kk-ucitava span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--v32-nagl-meko); border-top-color: var(--v32-nagl); animation: kkVrti .8s linear infinite; }
@keyframes kkVrti { to { transform: rotate(360deg); } }
.kk-alati { position: absolute; z-index: 4; right: 4px; bottom: 44px; display: flex; gap: 6px; }
.kk-alati button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--v32-rub); background: var(--v32-staklo-jako); box-shadow: var(--v32-sjena); cursor: pointer; color: var(--v32-tinta); }
.kk-alati button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kk-alati button:hover { color: var(--v32-nagl); }
.kk-alati button:focus-visible { outline: none; box-shadow: var(--v32-fokus); }
.kk[data-korak="4"] .kk-alati { right: calc(min(350px, 42%) + 18px); }

/* ---------- traka napretka ispod pozornice ---------- */
.kk-traka { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px auto 0; max-width: 760px; }
.kk-traka::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 1px; background: var(--v32-crta-2); }
.kk-traka button { position: relative; display: grid; justify-items: center; gap: 12px; padding: 0 4px 4px; border: 0; background: none; cursor: pointer; font: 500 14px/1.2 var(--v32-f); color: var(--v32-siva); }
.kk-traka i { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: #c9cbd9; box-shadow: 0 0 0 4px var(--v32-pod); transition: background .3s, transform .3s var(--v32-ease), box-shadow .3s; }
.kk-traka button.gotov i { background: var(--v32-nagl-rub); }
.kk-traka button.akt { color: var(--v32-nagl); font-weight: 700; }
.kk-traka button.akt i { background: var(--v32-nagl); transform: scale(1.35); box-shadow: 0 0 0 4px var(--v32-pod), 0 0 0 7px var(--v32-nagl-meko), 0 0 14px rgba(91, 79, 224, .55); }

/* ---------- uvećani primjer ponude ---------- */
.kk-dlg { width: min(940px, calc(100% - 32px)); max-height: min(90vh, 1100px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: #1d2240; box-shadow: 0 40px 120px -30px rgba(10, 14, 40, .6); overflow: hidden; }
.kk-dlg::backdrop { background: rgba(16, 19, 58, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kk-dlg-u { position: relative; max-height: min(90vh, 1100px); overflow: auto; overscroll-behavior: contain; }
.kk-dlg .kk-x { z-index: 2; position: sticky; float: right; top: 10px; right: 10px; margin: 10px 10px 0 0; background: #fff; box-shadow: 0 2px 8px rgba(20, 24, 60, .15); color: #1d2240; }
.kk-pd { position: relative; padding: 34px clamp(18px, 4vw, 48px) 30px; font-family: var(--v32-f); }
.kk-pd-vod { position: absolute; left: 50%; top: 340px; transform: translate(-50%, -50%) rotate(-24deg); font: 800 clamp(70px, 14vw, 150px)/1 var(--v32-f); letter-spacing: .12em; color: rgba(91, 79, 224, .06); pointer-events: none; user-select: none; }
.kk-pd-h { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid #10133a; }
.kk-pd-h h2 { margin: 8px 0 4px; font: 800 clamp(22px, 3vw, 30px)/1.1 var(--v32-f); letter-spacing: -.02em; color: #10133a; }
.kk-pd-h p { margin: 0; color: #5d6178; font-size: 14px; }
.kk-pd-logo { font-size: 20px; }
.kk-pd-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; margin: 16px 0 18px; font-size: 13px; }
.kk-pd-m dt { color: #6a6f86; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.kk-pd-m dd { margin: 2px 0 0; color: #1d2240; }
.kk-pd-tw { overflow-x: auto; }
.kk-pd-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kk-pd-t th { text-align: left; font-weight: 600; color: #5d6178; padding: 8px 6px; border-bottom: 1px solid #d9dbe6; white-space: nowrap; }
.kk-pd-t td { padding: 6px; border-bottom: 1px solid #eff0f5; vertical-align: top; }
.kk-pd-t .n { text-align: right; white-space: nowrap; }
.kk-pd-g td { padding-top: 14px; font-weight: 800; color: #10133a; letter-spacing: .02em; border-bottom: 1px solid #d9dbe6; }
.kk-pd-zb td { font-weight: 700; color: #10133a; background: #f7f7fb; }
.kk-pd-z { margin: 18px 0 0 auto; max-width: 360px; display: grid; gap: 6px; font-size: 14px; }
.kk-pd-z div { display: flex; justify-content: space-between; gap: 16px; }
.kk-pd-z b { font-variant-numeric: tabular-nums; }
.kk-pd-sv { padding: 10px 12px; border-radius: 10px; background: #f2f0ff; color: #3a2fb8; font-size: 16px; }
.kk-pd-sv span { font-weight: 800; }
.kk-pd-nap { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: #5d6178; }
.kk-nojs { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---------- uži zasloni ---------- */
@media (max-width: 1180px) {
  .kk-u { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .kk-tx span { font-size: 13.5px; }
  .kk-mat { width: min(320px, 52%); }
  .kk-dok { width: min(320px, 48%); }
}
@media (max-width: 900px) {
  .kk-u { grid-template-columns: minmax(0, 1fr); }
  .kk-lijevo { padding-top: 0; }
  .kk-koraci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kk-koraci::before { display: none; }
  .kk-korak { grid-template-columns: 1fr; gap: 0; }
  .kk-br { position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; font-size: 11.5px; box-shadow: none; }
  .kk-korak[aria-selected="true"] .kk-br { box-shadow: none; }
  .kk-kart { grid-template-columns: 1fr; gap: 6px; padding: 44px 12px 12px; height: 100%; align-content: start; }
  .kk-ik { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; }
  .kk-tx b { font-size: 16px; }
  .kk-tx span { font-size: 12.5px; }
  .kk-str { display: none; }
  .kk-pozornica { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .kk-pogled { position: relative; inset: auto; height: clamp(340px, 96vw, 520px); }
  .kk-panel { position: relative; inset: auto; width: auto; transform: none; }
  .kk-panel:not(.vid) { display: none; }
  .kk-info { padding-right: 44px; }
  .kk-dok { width: auto; }
  .kk-alati { bottom: 40px; }
  .kk[data-korak="4"] .kk-alati { right: 4px; }
  .kk-traka { display: none; }
  .kk-tocka span { font-size: 11.5px; padding: 5px 9px; }
  /* na mobitelu samo točke; naziv odabrane točke ostaje vidljiv (tekst je i dalje dostupan čitačima) */
  .kk-tocka:not([aria-pressed="true"]) span { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; white-space: nowrap; }
  .kk-svg { top: 46px; height: calc(100% - 82px); }
  .kk-so { font-size: 34px; } .kk-so-p { font-size: 29px; } .kk-ko-t { font-size: 30px; } .kk-so-m { font-size: 27px; }
  .kk-katovi button { padding: 6px 11px; font-size: 12px; }
  .kk-oznaka { max-width: 240px; font-size: 12.5px; }
  .kk-uputa { font-size: 12px; }
}
@media (max-width: 420px) {
  .kk-tocka span { font-size: 11px; }
  .kk-dok-t td:first-child { max-width: 96px; }
}

/* ---------- smanjeno kretanje ---------- */
@media (prefers-reduced-motion: reduce) {
  .kk-tocka i::after { animation: none; display: none; }
  .kk-panel, .kk-panel.vid, .kk-mat-l li, .kk-kart, .kk-br, .kk-str, .kk-traka i { transition: none !important; }
  .kk-crta .kk-zs, .kk-crta .kk-ot, .kk-crta .kk-vr, .kk-crta .kk-ko { animation: none !important; }
  .kk-ucitava span { animation-duration: 2s; }
}
.kk-info-n small { margin-left: 6px; font: 700 10.5px/1 var(--v32-f); letter-spacing: .08em; text-transform: uppercase; color: var(--v32-siva); }

/* popis dijelova 3D modela (tipkovnica / dodir) */
.kk-dijelovi { position: absolute; z-index: 5; left: 4px; bottom: 44px; }
.kk-dij-g { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--v32-rub); background: var(--v32-staklo-jako); box-shadow: var(--v32-sjena); font: 600 13px/1 var(--v32-f); color: var(--v32-tinta); cursor: pointer; }
.kk-dij-g svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kk-dij-g[aria-expanded="true"] { color: var(--v32-nagl); border-color: var(--v32-nagl-rub); }
.kk-dij-g:focus-visible { outline: none; box-shadow: var(--v32-fokus); }
.kk-dij-l { position: absolute; left: 0; bottom: calc(100% + 8px); width: 250px; max-height: min(360px, 60vh); overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--v32-staklo-jako); }
.kk-dij-l button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: 500 13px/1.3 var(--v32-f); color: var(--v32-tekst); cursor: pointer; }
.kk-dij-l button small { color: var(--v32-siva); font-size: 11.5px; }
.kk-dij-l button:hover, .kk-dij-l button:focus-visible { background: var(--v32-nagl-meko); color: var(--v32-tinta); outline: none; }
@media (max-width: 900px) { .kk-dijelovi { bottom: 40px; } .kk-dij-l { width: min(250px, 70vw); max-height: 260px; } }
@media (max-width: 900px) {
  .kk[data-korak="3"] .kk-uputa, .kk[data-korak="4"] .kk-uputa { display: none; }
  .kk-dijelovi, .kk-alati { bottom: 10px; }
}
/* oznake u 3D-u: manje točke (opis na prijelaz, fokus ili dodir) */
.kk-t3 i { left: 9px; top: 9px; width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--v32-nagl), 0 3px 8px -2px rgba(30, 30, 90, .45); }
.kk-t3[aria-describedby]:focus-visible i { box-shadow: var(--v32-fokus), 0 0 0 2px var(--v32-nagl); }

/* v34 (3d34): napomena kad uređaj stvarno ne može 3D (statična slika, nije interaktivna) */
.kk-bez3d { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4;
  color: var(--v32-tekst, #2a2f45); background: var(--v32-staklo-jako, rgba(255,255,255,.92)); border: 1px solid var(--v32-rub, rgba(20,30,80,.12)); pointer-events: none; }