/* =====================================================================
   ARXO početna stranica — izbornik kalkulatora (isporučeni 3D demo ugrađen u #kalkulatori)
   Markup: index.html (#izb-app) · ikone: js/izbornik/ikone.js · ponašanje: js/izbornik/izbornik.js ·
   3D: js/izbornik/scena/ · posteri: img/izbornik/ · povezivanje s aplikacijom: js/naslovna.js
   ===================================================================== */


@property --akcent { syntax: '<color>'; inherits: true; initial-value: #e0874a; }
@property --j { syntax: '<number>'; inherits: true; initial-value: 1; }

.izb3d {
  --tinta: #17213b;
  --tinta2: #56617d;
  --tinta3: #8a93aa;
  --ljub: #7846dc;
  --indigo: #4c65e2;
  --cijan: #13c4d9;
  --pozadina: #f6f7fc;
  --ik: 78px;
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.izb3d, .izb3d * { box-sizing: border-box; }
.izb3d { font-family: var(--font); color: var(--tinta); background: var(--pozadina); -webkit-font-smoothing: antialiased; text-align: left; line-height: normal; }
.izb3d button { font: inherit; color: inherit; cursor: pointer; margin: 0; }
.izb3d :focus-visible { outline: 2.5px solid #8b6cf0; outline-offset: 4px; }
.izb3d .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.izb3d svg { overflow: visible; display: inline; max-width: none; }
.izb3d img { max-width: none; }
.izb3d h1, .izb3d h2, .izb3d p { font-family: inherit; }

/* ───────── okvir aplikacije (jedan kontekst slaganja: pozadina < stražnje ikone < platno < prednje ikone < UI) ───────── */
.izb3d {
  --akcent: #e0874a;
  position: relative; isolation: isolate;
  height: 100vh; height: 100dvh; min-height: 560px;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  transition: --akcent .8s ease;
}

/* ───────── pozadina po temi ───────── */
.izb3d .pozadina { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #fbfbfe 0%, #f3f4fa 100%); }
.izb3d .poz-sloj {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background:
    radial-gradient(52% 46% at 50% 47%, var(--sjaj, #ffe1c7) 0%, color-mix(in srgb, var(--sjaj, #ffe1c7) 35%, transparent) 45%, transparent 72%),
    radial-gradient(40% 46% at 6% 96%, var(--sjaj2, #ffeede) 0%, transparent 70%),
    radial-gradient(36% 40% at 96% 6%, var(--hlad, #e6e4ff) 0%, transparent 70%),
    radial-gradient(70% 22% at 50% 82%, color-mix(in srgb, var(--sjaj, #ffe1c7) 50%, transparent) 0%, transparent 70%);
}
.izb3d .poz-sloj::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: var(--uzorak, none); background-size: var(--uzorak-vel, 64px);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, transparent 35%, #000 100%);
  mask-image: radial-gradient(75% 70% at 50% 50%, transparent 35%, #000 100%);
}
.izb3d .poz-sloj.vidljiv { opacity: 1; }
.izb3d .poz-zrno {
  position: absolute; inset: 0; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .55 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── zaglavlje ───────── */
.izb3d .zaglavlje { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 3vw, 40px) 0; }
.izb3d .logo { display: flex; flex-direction: column; line-height: 1; }
.izb3d .logo-znak { font-size: 28px; font-weight: 800; letter-spacing: -1.6px; background: linear-gradient(110deg, #00bde6, #7637ed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.izb3d .logo small { font-size: 8.5px; letter-spacing: 3px; color: var(--tinta3); margin: 4px 0 0 2px; font-weight: 600; }

.izb3d .gumb-staklo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px;
  border: 0; border-radius: 22px; font-size: 13px; font-weight: 600; color: var(--tinta2);
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(120,130,170,.14), 0 6px 16px -8px rgba(23,33,59,.25);
  transition: transform .2s ease, box-shadow .2s ease, color .2s;
}
.izb3d .gumb-staklo:hover { color: var(--ljub); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(120,70,220,.22), 0 10px 22px -10px rgba(100,70,220,.4); }
.izb3d .gumb-staklo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── uvod ───────── */
.izb3d .izb-uvod { position: relative; z-index: 6; text-align: center; padding: 4px 16px 0; pointer-events: none; }
.izb3d .nadnaslov { font-size: 10px; letter-spacing: 3px; color: #7b78a6; font-weight: 700; }
.izb3d .izb-uvod h2 { font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -1.2px; margin: 8px 0 0; font-weight: 750; }

/* ───────── pozornica i orbita ───────── */
.izb3d .izb-pozornica { position: relative; min-height: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.izb3d .izb-pozornica.vuce { cursor: grabbing; }
.izb3d .orbita { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.izb3d .orbita path { fill: none; stroke: url(#orbitaGrad); stroke-width: 1.2; }

.izb3d .model-okvir { position: absolute; left: 0; top: 0; width: 10px; height: 10px; }
.izb3d .poster { position: absolute; z-index: 2; pointer-events: none; transition: opacity .45s ease, filter .45s ease; }
.izb3d .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.izb3d .poster img.na { opacity: 1; }
.izb3d .poster.duh { opacity: .42; filter: saturate(.55) blur(.6px); }
.izb3d .poster.skriven { opacity: 0; }
.izb3d .ulaz-zona { position: absolute; inset: 0; z-index: 3; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 40%; }
.izb3d .ulaz-zona:focus-visible { outline-offset: -8px; }

.izb3d .platno { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .22s ease; display: block; }
.izb3d[data-nacin="posteri"] .platno { display: none; }

.izb3d .napomena-nacin {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; line-height: 1.4; color: var(--tinta2); text-align: center; padding: 6px 14px; border-radius: 16px;
  background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(120,130,170,.14);
}
.izb3d[data-nacin="posteri"] .podnozje { visibility: hidden; }
@media (max-width: 700px) { .izb3d .napomena-nacin { white-space: normal; bottom: auto; top: 6px; } }

/* ───────── staklene ikone ───────── */
.izb3d .ikone { position: absolute; inset: 0; pointer-events: none; } /* namjerno bez z-indexa: ikone se slažu u .app */
.izb3d .ikona {
  position: absolute; left: 0; top: 0; width: var(--ik); height: var(--ik); padding: 0; border: 0; background: none;
  border-radius: 50%; pointer-events: auto; will-change: transform; z-index: 4;
  transform-origin: 50% 50%; -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.izb3d .ikona.straga { z-index: 1; }
.izb3d .ikona.skrivena { visibility: hidden; pointer-events: none; }
.izb3d .ik-tijelo { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.izb3d .ikona:hover .ik-tijelo { transform: translateY(-3px); }
.izb3d .ikona.pritisak .ik-tijelo { transform: scale(.9); transition-duration: .12s; }

.izb3d .ik-sjena {
  position: absolute; left: 4%; right: 4%; top: 88%; height: 28%; border-radius: 50%;
  /* sjena + obojena kaustika: svjetlo koje se kroz debelo staklo skupi u svijetlu, blago obojenu mrlju */
  background:
    radial-gradient(24% 30% at 56% 44%, color-mix(in srgb, var(--akcent) 38%, rgba(255,255,255,.9)), rgba(255,255,255,0) 100%),
    radial-gradient(40% 36% at 44% 52%, rgba(120,220,240,.22), transparent 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(28,36,70,.30), rgba(28,36,70,.12) 56%, transparent 76%);
  transition: opacity .35s;
}
.izb3d .ikona:hover .ik-sjena { filter: brightness(1.08); }

/* Tijelo stakla: gotovo prozirno (pozadina se vidi kroz staklo, zamućena i zasićena), debeli rub
 * lomi tamniju okolinu u tamniji prsten, s tankom svijetlom linijom s unutarnje i vanjske strane. */
.izb3d .ik-staklo {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  color: #26304f;
  background:
    radial-gradient(86% 44% at 46% -2%, rgba(255,255,255,.6), rgba(255,255,255,.08) 62%, rgba(255,255,255,0) 78%),
    radial-gradient(78% 46% at 54% 110%, color-mix(in srgb, var(--akcent) 34%, transparent), transparent 74%),
    radial-gradient(closest-side, rgba(255,255,255,0) 62%, rgba(255,255,255,.34) 69.5%, rgba(255,255,255,0) 73%, rgba(58,70,118,.08) 80%, rgba(40,50,96,.23) 91.5%, rgba(40,50,96,.10) 97.5%, rgba(255,255,255,.55) 100%),
    rgba(250,251,255,.02);
  -webkit-backdrop-filter: blur(2.2px) saturate(165%) brightness(1.02);
  backdrop-filter: blur(2.2px) saturate(165%) brightness(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 2px 0 2px -1px rgba(19,196,217,.42),
    inset -2px 0 2px -1px rgba(255,112,92,.30),
    inset 0 -7px 10px -6px color-mix(in srgb, var(--akcent) 55%, transparent),
    0 0 0 .5px rgba(36,46,88,.30),
    0 1px 2px rgba(23,33,59,.10),
    0 12px 20px -12px rgba(23,33,59,.42);
  transition: box-shadow .4s ease, background .4s ease;
}
/* unutarnji svijetli luk dolje desno: svjetlo prelomljeno kroz debeli rub (kaustika u staklu) */
.izb3d .ik-staklo::after {
  content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  border: 2px solid transparent; border-bottom-color: color-mix(in srgb, var(--akcent) 25%, rgba(255,255,255,.95)); border-right-color: rgba(255,255,255,.3);
  transform: rotate(-24deg); filter: blur(.6px);
}
/* rub: tanki obrub čija svjetlina varira po opsegu (debljina stakla hvata okolinu) */
.izb3d .ik-rub {
  position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(255,255,255,.98), rgba(80,92,140,.38) 15%, rgba(255,255,255,.3) 30%, rgba(60,72,124,.46) 47%, rgba(255,255,255,.92) 64%, rgba(80,92,140,.34) 82%, rgba(255,255,255,.98));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* zrcalni odsjaj: oštar luk uz gornji lijevi rub + mali sekundarni odsjaj dolje desno + iskra */
.izb3d .ik-odsjaj {
  position: absolute; inset: 5.5%; border-radius: 50%; pointer-events: none;
  border: 2px solid transparent; border-top-color: rgba(255,255,255,.98); border-left-color: rgba(255,255,255,.4);
  transform: rotate(-14deg); filter: blur(.25px);
}
.izb3d .ik-odsjaj::before { content: ""; position: absolute; left: 15%; top: 9%; width: 9%; height: 6%; border-radius: 50%; background: #fff; filter: blur(.4px); transform: rotate(-40deg); }
.izb3d .ik-odsjaj::after { content: ""; position: absolute; right: 13%; bottom: 13%; width: 17%; height: 5%; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(.7px); transform: rotate(-42deg); }
/* lom: zamućena, povećana kopija piktograma pomaknuta prema dnu (svjetlo kroz debelo staklo) */
.izb3d .ik-lom { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.izb3d .ik-lom-svg { width: 52%; height: 52%; color: var(--akcent); opacity: .2; filter: blur(1.2px); transform: translate(3%, 10%) scale(1.32); }
/* zamućena kopija piktograma za stražnje ikone (pretapanje samo prozirnošću — bez filtra po kadru) */
.izb3d .ik-mutno { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.izb3d .ik-mutno-svg { width: 50%; height: 50%; filter: blur(1.6px); }
.izb3d .ik-mutno-svg * { animation: none !important; }

.izb3d .ik-piktogram, .izb3d .ik-lom-svg, .izb3d .ik-mutno-svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.izb3d .ik-piktogram { position: relative; width: 50%; height: 50%; will-change: transform; }
.izb3d .ik-piktogram .pl, .izb3d .ik-lom-svg .pl, .izb3d .ik-mutno-svg .pl { fill: currentColor; fill-opacity: .1; }
.izb3d .ik-piktogram .ispuna, .izb3d .ik-mutno-svg .ispuna { fill: currentColor; stroke: none; }

.izb3d .ik-naziv {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; color: var(--tinta2); pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  transition: color .35s;
}

/* odabrana ikona: ARXO plavo-ljubičasti naglasak */
.izb3d .ikona.odabrana .ik-staklo {
  color: var(--ljub);
  background:
    radial-gradient(86% 44% at 46% -2%, rgba(255,255,255,.62), rgba(255,255,255,.09) 62%, rgba(255,255,255,0) 78%),
    radial-gradient(82% 50% at 58% 110%, rgba(120,70,220,.34), transparent 74%),
    radial-gradient(60% 56% at 6% 84%, rgba(19,196,217,.22), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,0) 62%, rgba(255,255,255,.36) 69.5%, rgba(255,255,255,0) 73%, rgba(96,72,190,.08) 81%, rgba(76,60,170,.22) 92%, rgba(76,60,170,.10) 97.5%, rgba(255,255,255,.6) 100%),
    rgba(248,246,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 2.5px 0 2.5px -1px rgba(19,196,217,.5),
    inset -2.5px 0 2.5px -1px rgba(236,96,150,.32),
    inset 0 -8px 12px -6px rgba(120,70,220,.55),
    0 0 0 1px rgba(120,70,220,.32),
    0 0 26px -2px rgba(76,101,226,.36),
    0 16px 28px -14px rgba(100,70,220,.62);
}
.izb3d .ikona.odabrana .ik-rub {
  padding: 2px;
  background: conic-gradient(from 200deg, #ffffff, #13c4d9 16%, #4c65e2 34%, rgba(120,70,220,.55) 50%, #7846dc 64%, #ffffff 76%, #8c6cf2 90%, #ffffff);
}
.izb3d .ikona.odabrana .ik-piktogram { stroke: url(#ikGrad); }
.izb3d .ikona.odabrana .ik-piktogram .pl { fill: url(#ikGrad); fill-opacity: .14; }
.izb3d .ikona.odabrana .ik-piktogram .ispuna { fill: url(#ikGrad); }
.izb3d .ikona.odabrana .ik-lom-svg { color: #7846dc; opacity: .22; }
.izb3d .ikona.odabrana .ik-naziv { color: #3a2a6e; }
.izb3d .ikona.odabrana .ik-sjena {
  background:
    radial-gradient(24% 30% at 56% 44%, rgba(214,200,255,.85), rgba(255,255,255,0) 100%),
    radial-gradient(36% 34% at 40% 54%, rgba(19,196,217,.26), transparent 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(80,50,170,.32), rgba(80,50,170,.11) 55%, transparent 75%);
}

/* ───────── mini animacije (samo .ziva; --j = jačina, hover je pojačava) ───────── */
.izb3d .ikona:hover { --j: 1.7; }
.izb3d .ikona { transition: --j .4s ease; }
.izb3d .ik-piktogram * { transform-box: fill-box; transform-origin: 50% 50%; }
.izb3d .ik-piktogram .tok { stroke-dasharray: 2.2 3.2; opacity: .7; }
.izb3d .ikona:hover .ik-piktogram .tok { opacity: 1; }
.izb3d .ik-piktogram .crtaj { stroke-dasharray: 30; stroke-dashoffset: 0; }
.izb3d .ik-piktogram .impuls { stroke-dasharray: 3 60; stroke-dashoffset: 3; stroke-width: 2.4; opacity: 0; }
.izb3d .ik-piktogram .sjaj { fill: #ffd25e; stroke: none; opacity: 0; }

.izb3d .ikona.ziva .ik-piktogram .m1, .izb3d .ikona.ziva .ik-piktogram .m2, .izb3d .ikona.ziva .ik-piktogram .m3, .izb3d .ikona.ziva .ik-piktogram .m4 {
  animation-duration: var(--tr, 4s); animation-iteration-count: infinite; animation-delay: calc(var(--pomak, 0s) + var(--kas, 0s));
  animation-timing-function: ease-in-out; animation-fill-mode: both;
}

@keyframes izb-ik-toplina { 0% { opacity: 0; transform: translateY(2.5px); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateY(calc(-3.2px * var(--j))); } }
@keyframes izb-ik-kap { 0% { opacity: 0; transform: translateY(-1px) scale(.6); } 15% { opacity: 1; transform: none; } 55% { transform: translateY(0) scaleY(1.12); } 85% { opacity: 0; transform: translateY(calc(5px * var(--j))); } 100% { opacity: 0; } }
@keyframes izb-ik-tok { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -10.8; } }
@keyframes izb-ik-lamela { 0%, 100% { transform: scaleY(.4); } 35%, 75% { transform: scaleY(1) skewX(calc(-8deg * var(--j))); } }
@keyframes izb-ik-svjetlo { 0%, 28% { opacity: 0; transform: scale(.7); } 34% { opacity: .55; } 38% { opacity: .28; } 46%, 84% { opacity: calc(.42 * var(--j)); transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes izb-ik-impuls { 0% { stroke-dashoffset: -21; opacity: 0; } 4% { opacity: 1; } 30% { stroke-dashoffset: 1; opacity: 1; } 33%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes izb-ik-ulet-x { 0% { opacity: 0; transform: translateX(calc(6px * var(--j))); } 28% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes izb-ik-pojava { 0%, 30% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.15); } 46% { transform: none; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes izb-ik-spust { 0% { opacity: 0; transform: translateY(calc(-6px * var(--j))); } 18% { opacity: 1; } 38% { transform: translateY(.7px); } 46% { transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes izb-ik-crtaj { 0% { stroke-dashoffset: 30; opacity: 1; } 22% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes izb-ik-matica { 0% { transform: rotate(calc(-120deg * var(--j))) scale(1.28); opacity: .35; } 34% { transform: rotate(0deg) scale(1); opacity: 1; } 40% { transform: scale(.94); } 46%, 88% { transform: none; opacity: 1; } 100% { transform: none; opacity: .35; } }
@keyframes izb-ik-sloj { 0% { opacity: 0; transform: translateX(-3px); } 18% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes izb-ik-plocica { 0% { opacity: 0; transform: translateY(calc(-4px * var(--j))) scale(1.18); } 26% { opacity: 1; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes izb-ik-krilo { 0%, 14% { transform: none; } 42%, 62% { transform: scaleX(.56) skewY(calc(-7deg * var(--j))); } 90%, 100% { transform: none; } }
@keyframes izb-ik-oluk { 0%, 70% { opacity: .4; } 85% { opacity: 1; } 100% { opacity: .4; } }

/* Grijanje i voda */
.izb3d .ikona.ziva[data-ik="grijanje"] .m1, .izb3d .ikona.ziva[data-ik="grijanje"] .m2, .izb3d .ikona.ziva[data-ik="grijanje"] .m3 { animation-name: izb-ik-toplina; --tr: 2.8s; }
.izb3d [data-ik="grijanje"] .m2 { --kas: .45s; } .izb3d [data-ik="grijanje"] .m3 { --kas: .9s; }
.izb3d .ikona.ziva[data-ik="grijanje"] .m4 { animation-name: izb-ik-kap; --tr: 3.4s; --kas: .3s; animation-timing-function: ease-in; transform-origin: 50% 0; }
/* Ventilacija i klime */
.izb3d .ikona.ziva[data-ik="ventilacija"] .m1 { animation-name: izb-ik-lamela; --tr: 4.4s; transform-origin: 50% 0; }
.izb3d .ikona.ziva[data-ik="ventilacija"] .tok { animation-name: izb-ik-tok; --tr: 1.3s; animation-timing-function: linear; }
.izb3d [data-ik="ventilacija"] .m3 { --kas: .2s; } .izb3d [data-ik="ventilacija"] .m4 { --kas: .4s; }
/* Kanali */
.izb3d .ikona.ziva[data-ik="kanali"] .tok { animation-name: izb-ik-tok; --tr: 1.1s; animation-timing-function: linear; }
.izb3d [data-ik="kanali"] .m2 { --kas: .3s; } .izb3d [data-ik="kanali"] .m3 { --kas: .15s; }
/* Elektro */
.izb3d .ikona.ziva[data-ik="elektro"] .m1 { animation-name: izb-ik-svjetlo; --tr: 4s; }
.izb3d .ikona.ziva[data-ik="elektro"] .m2 { animation-name: izb-ik-impuls; --tr: 4s; animation-timing-function: linear; }
/* Suhomontaža */
.izb3d .ikona.ziva[data-ik="suhomontaza"] .m1 { animation-name: izb-ik-ulet-x; --tr: 4.6s; }
.izb3d .ikona.ziva[data-ik="suhomontaza"] .m2 { animation-name: izb-ik-pojava; --tr: 4.6s; }
/* Zidanje */
.izb3d .ikona.ziva[data-ik="zidanje"] .m1 { animation-name: izb-ik-spust; --tr: 3.8s; }
/* Betonaža */
.izb3d .ikona.ziva[data-ik="betonaza"] .m1, .izb3d .ikona.ziva[data-ik="betonaza"] .m2 { animation-name: izb-ik-crtaj; --tr: 5.2s; }
.izb3d [data-ik="betonaza"] .m1.d2 { --kas: .18s; } .izb3d [data-ik="betonaza"] .m1.d3 { --kas: .36s; } .izb3d [data-ik="betonaza"] .m1.d4 { --kas: .54s; }
.izb3d [data-ik="betonaza"] .m2 { --kas: .8s; } .izb3d [data-ik="betonaza"] .m2.d2 { --kas: .98s; } .izb3d [data-ik="betonaza"] .m2.d3 { --kas: 1.16s; } .izb3d [data-ik="betonaza"] .m2.d4 { --kas: 1.34s; }
/* Čelik */
.izb3d .ikona.ziva[data-ik="celik"] .m1, .izb3d .ikona.ziva[data-ik="celik"] .m2 { animation-name: izb-ik-matica; --tr: 3.6s; }
.izb3d [data-ik="celik"] .m2 { --kas: .5s; }
/* Čelične konstrukcije */
.izb3d .ikona.ziva[data-ik="konstrukcije"] .m1 { animation-name: izb-ik-ulet-x; --tr: 4.2s; }
.izb3d .ikona.ziva[data-ik="konstrukcije"] .m2 { animation-name: izb-ik-pojava; --tr: 4.2s; }
/* Fasade */
.izb3d .ikona.ziva[data-ik="fasade"] .m1, .izb3d .ikona.ziva[data-ik="fasade"] .m2, .izb3d .ikona.ziva[data-ik="fasade"] .m3 { animation-name: izb-ik-sloj; --tr: 5s; }
.izb3d [data-ik="fasade"] .m2 { --kas: .55s; } .izb3d [data-ik="fasade"] .m3 { --kas: 1.1s; }
/* Keramika */
.izb3d .ikona.ziva[data-ik="keramika"] .m1 { animation-name: izb-ik-plocica; --tr: 3.6s; }
/* Krovovi */
.izb3d .ikona.ziva[data-ik="krovovi"] .m1, .izb3d .ikona.ziva[data-ik="krovovi"] .m2, .izb3d .ikona.ziva[data-ik="krovovi"] .m3 { animation-name: izb-ik-crtaj; --tr: 4.6s; }
.izb3d [data-ik="krovovi"] .m2 { --kas: .35s; } .izb3d [data-ik="krovovi"] .m3 { --kas: .7s; }
.izb3d .ikona.ziva[data-ik="krovovi"] .m4 { animation-name: izb-ik-oluk; --tr: 4.6s; }
/* Ograde */
.izb3d .ikona.ziva[data-ik="ograde"] .m1 { animation-name: izb-ik-krilo; --tr: 5s; transform-origin: 0 50%; }
/* Projekat objekta */
.izb3d .ikona.ziva[data-ik="kuca"] .m1 { animation-name: izb-ik-spust; --tr: 4.2s; }

/* ───────── detalji ispod ───────── */
.izb3d .detalji { position: relative; z-index: 6; text-align: center; padding: 0 16px 6px; }
.izb3d .naslov-red { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 36px); }
.izb3d .naslov-red h3 { margin: 0; font-size: clamp(22px, 2.1vw, 29px); letter-spacing: -.7px; font-weight: 750; min-width: min(360px, 60vw); }
.izb3d .strelica {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #5f5a96;
  background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.4));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(120,130,170,.16), 0 6px 14px -8px rgba(23,33,59,.3);
  transition: transform .2s ease, color .2s;
}
.izb3d .strelica:hover { color: var(--ljub); transform: scale(1.06); }
.izb3d .strelica svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.izb3d .opis { margin: 8px auto 10px; max-width: 620px; font-size: 14px; line-height: 1.45; color: var(--tinta2); min-height: 20px; }
.izb3d .uputa {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 12px; border-radius: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px; color: #7a72b4; opacity: .85; transition: opacity .2s, background .2s, color .2s;
}
.izb3d .uputa:hover { opacity: 1; color: var(--ljub); background: rgba(255,255,255,.55); }
.izb3d .uputa svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.izb3d .zamjena { animation: izb-zamjena .38s ease both; }
@keyframes izb-zamjena { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.izb3d .podnozje { position: relative; z-index: 6; text-align: center; font-size: 10.5px; color: #9aa2b6; padding: 4px 16px 12px; letter-spacing: .2px; }

/* ───────── ulazak: veo (scena ispuni odjeljak, zatim navigacija u kalkulator) ───────── */
.izb3d .veo {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--sjaj-ulaz, #fff) 25%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--akcent) 10%, rgba(246,247,252,.55)), color-mix(in srgb, var(--akcent) 16%, rgba(240,242,250,.65)));
}

/* ───────── stanja ulaska ───────── */
.izb3d[data-stanje="unutra"] .izb-pozornica, .izb3d[data-stanje="ulazak"] .izb-pozornica, .izb3d[data-stanje="izlazak"] .izb-pozornica { pointer-events: none; }

/* ───────── mobitel ───────── */
@media (max-width: 700px) {
  .izb3d { --ik: 64px; }
  .izb3d .zaglavlje { padding-top: 14px; }
  .izb3d .logo-znak { font-size: 24px; }
  .izb3d .gumb-staklo span { display: none; }
  .izb3d .gumb-staklo { padding: 9px 12px; min-width: 44px; min-height: 44px; justify-content: center; }
  .izb3d .izb-uvod { padding-top: 0; }
  .izb3d .izb-uvod h2 { font-size: 21px; letter-spacing: -.6px; margin-top: 6px; }
  .izb3d .nadnaslov { font-size: 9px; }
  .izb3d .ik-naziv { display: none; }
  .izb3d .naslov-red { gap: 10px; }
  .izb3d .naslov-red h3 { font-size: 21px; min-width: 0; flex: 1; }
  .izb3d .strelica { width: 46px; height: 46px; }
  .izb3d .opis { font-size: 13px; margin: 6px auto 6px; }
  .izb3d .uputa { min-height: 44px; margin: -9px 0; padding: 6px 16px; } /* dodirna meta 44 px bez promjene rasporeda */
  .izb3d .podnozje { display: none; }
  .izb3d .detalji { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-height: 700px) and (min-width: 701px) {
  .izb3d .izb-uvod h2 { font-size: 22px; }
  .izb3d .podnozje { display: none; }
}

/* ───────── smanjeno kretanje ───────── */
@media (prefers-reduced-motion: reduce) {
  .izb3d .ikona .ik-piktogram * { animation: none !important; }
  .izb3d .poz-sloj, .izb3d .poster, .izb3d .poster img, .izb3d .platno { transition-duration: .2s; }
  .izb3d .zamjena { animation-duration: .15s; }
}

/* =====================================================================
   ARXO web — ugradnja dema u početnu stranicu (#kalkulatori)
   Sve iznad je CSS isporučenog dema (izbornik-demo/css/izbornik.css) u imenskom prostoru .izb3d
   (generirano skriptom; nema globalnih pravila — ni :root, *, body, button, svg izvan izbornika).
   Ispod su samo dodaci aplikacije: veličina odjeljka, oznaka „Beta verzija", lokot, stanje pristupa,
   gumb „Otvori kalkulator" na mobitelu i zaustavljanje animacija izvan zaslona.
   ===================================================================== */
.izb30-odj { position: relative; padding: 0; background: #f6f7fc; } /* odmak ispod zaglavlja daje html { scroll-padding-top } */
.izb30-odj .izb3d { height: calc(100vh - 72px); height: calc(100svh - 72px); min-height: 600px; max-height: 1040px; }
@media (max-width: 760px) { .izb30-odj .izb3d { height: calc(100svh - 64px); min-height: 560px; } }
.izb3d .zaglavlje { justify-content: flex-end; }
.izb3d .izb-uvod h2 { font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -1.2px; margin: 8px 0 0; font-weight: 750; line-height: 1.15; }
.izb3d .naslov-red h3 { margin: 0; font-size: clamp(22px, 2.1vw, 29px); letter-spacing: -.7px; font-weight: 750; min-width: min(360px, 60vw); }
.izb3d .izb-uvod { margin-top: -40px; } /* naslov u istoj visini kao gumb „Svi kalkulatori" (kao u demu, gdje je lijevo logotip) */
@media (max-width: 700px) { .izb3d .izb-uvod { margin-top: -38px; padding: 0 64px; } .izb3d .izb-uvod h2 { font-size: 21px; letter-spacing: -.6px; margin-top: 6px; } }

/* oznaka „Beta verzija" — ispod naziva ikone (izvan stakla) i uz naslov odabranog kalkulatora */
.izb3d .ik-naziv { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.izb3d .ik-naziv .arxo-beta { pointer-events: none; transform: scale(.92); transform-origin: 50% 0; }
.izb3d .izb-oznake { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 18px; margin: 6px 0 0; }
.izb3d .izb-stanje { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(90,100,140,.25); color: #4a5470; background: rgba(255,255,255,.6); }
.izb3d .izb-stanje.akt { color: #0b7c62; border-color: rgba(11,124,98,.35); background: rgba(11,124,98,.07); }
.izb3d .izb-stanje.proba, .izb3d .izb-stanje.pregled { color: #8a5a00; border-color: rgba(200,140,20,.45); background: rgba(242,178,51,.1); }
.izb3d .izb-stanje.zak { color: #2c5f8f; border-color: rgba(44,95,143,.3); background: rgba(44,95,143,.06); }

/* lokot (zaključan program — stanje iz js/ulaz.js; gost ne vidi lokote, nego pri ulazu dobije prijavu) */
.izb3d .ik-lokot {
  position: absolute; right: -2%; bottom: 4%; width: 30%; height: 30%; border-radius: 50%; display: none; place-items: center; z-index: 2;
  color: #5a4fb8; background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(236,236,250,.9));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(90,80,170,.22), 0 4px 10px -4px rgba(23,33,59,.4);
}
.izb3d .ik-lokot svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.izb3d .ikona.zakljucana .ik-lokot { display: grid; }
.izb3d.gost .ik-lokot { display: none !important; }

/* „Klikni za ulazak" (miš) / „Otvori kalkulator" (mobitel — dodir na ikonu samo odabire, ulaz je ovim gumbom ili dodirom odabrane) */
.izb3d .uputa .u-m { display: none; }
@media (max-width: 700px) {
  .izb3d .uputa .u-d { display: none; }
  .izb3d .uputa .u-m { display: inline; }
  .izb3d .uputa { margin: 0; min-height: 44px; padding: 10px 20px; border-radius: 22px; opacity: 1; color: #fff; font-size: 13.5px;
    background: linear-gradient(110deg, #03b9e2, #6d4ae7 70%, #943df0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -10px rgba(103,89,219,.7); }
  .izb3d .uputa:hover { color: #fff; background: linear-gradient(110deg, #03b9e2, #6d4ae7 70%, #943df0); }
  .izb3d .izb-oznake { margin-top: 4px; }
}

/* izvan zaslona: mini animacije ikona stoje (3D petlju zaustavlja izbornik.js) */
.izb3d.izb-mirno .ik-piktogram *, .izb3d.izb-mirno .zamjena { animation-play-state: paused !important; }
.izb3d .napomena-nacin[hidden] { display: none; }

/* dodatni elementi odjeljka (traka paketa, zajednički objekt) ispod izbornika */
.izb30-odj .izb-dodatak { padding: 10px 0 40px; text-align: center; color: #4a5470; }
.izb30-odj .izb-dodatak:not(:has(> .omot > :not([hidden]))) { padding: 0; }
.izb30-odj .izb-dodatak .paket-traka { text-align: left; }
.izb30-odj .glava-k-t { margin: 4px auto 0; text-align: center; font-size: 13px; }
.izb30-odj .zaj-pocetna { display: flex; width: fit-content; margin: 14px auto 0; }
.izb3d .nadnaslov { text-transform: uppercase; }
.izb30-odj .paket-traka { max-width: 960px; margin: 18px auto 4px; }

/* tamna tema stranice: izbornik ostaje svijetao (jedna svijetla tema dema); prijelaz iz tamnog junaka (#0d1230) i natrag
   u tamnu stranicu ide mekim prelaskom umjesto oštrog ruba */
:root[data-tema="tamna"] .izb30-odj { background: var(--bg, #0b1026); padding-top: 96px; }
:root[data-tema="tamna"] .izb30-odj::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(180deg, #0d1230, #f6f7fc); pointer-events: none; }
:root[data-tema="tamna"] .izb30-odj .izb-dodatak { padding-top: 96px; background: linear-gradient(180deg, #f6f7fc 0, var(--bg, #0b1026) 90px); }
/* pozadina (gradijenti + šum) na vlastitom sloju: ne iscrtava se ponovno dok se ikone i scena animiraju */
.izb3d .pozadina { will-change: transform; contain: strict; }
/* dok izbornik samo proviruje (ili je prekriven uvodom / dijalogom) staklo ne zamućuje pozadinu: backdrop-filter se
   inače preračunava pri svakom iscrtavanju stranice (skupo bez GPU-a); čim je izbornik na zaslonu, staklo je puno */
.izb3d.izb-mirno .ik-staklo, .izb3d.izb-mirno .gumb-staklo { -webkit-backdrop-filter: none; backdrop-filter: none; }