
body{margin:0;background:#0C0C0E;font-synthesis:none}
a{color:#ECECF0}a:hover{color:#F95151}
.marble{background-image:linear-gradient(90deg,rgba(12,12,14,0.95) 0%,rgba(12,12,14,0.72) 50%,rgba(12,12,14,0.55) 100%),url(img/mramor.webp);background-size:cover;background-position:center}
.marble2{background-image:linear-gradient(rgba(12,12,14,0.55),rgba(12,12,14,0.85)),url(img/mramor.webp);background-size:cover;background-position:center}
@keyframes spin{to{transform:rotate(360deg)}}
.wheel{position:relative;width:680px;height:680px;margin:0 auto}
.spin{position:absolute;inset:0;animation:spin 90s linear infinite}
.up{animation:spin 90s linear infinite reverse}
.wheel:hover .spin,.wheel:hover .up,.wheel:focus-within .spin,.wheel:focus-within .up,.wheel:hover .orbit{animation-play-state:paused}
.it{position:absolute;left:50%;top:50%;width:160px;height:180px;margin:-90px 0 0 -80px;transform:rotate(var(--a)) translateY(-250px) rotate(calc(-1 * var(--a)));text-decoration:none;color:#ECECF0;outline:none}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.it:hover,.it:focus-visible{z-index:5}
.it:hover .tile,.it:focus-visible .tile{transform:scale(1.2)}
.it:hover .nm,.it:focus-visible .nm{color:#FFFFFF}
.nm,.lab{text-shadow:0 2px 10px #0C0C0E,0 0 18px #0C0C0E}
.disc{width:112px;height:112px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #34343C;box-shadow:0 14px 34px rgba(0,0,0,.6);transition:border-color .4s,box-shadow .4s}
.it:hover .disc,.it:focus-visible .disc{border-color:#F95151;box-shadow:0 0 0 4px rgba(249,81,81,.15),0 0 40px rgba(249,81,81,.4)}
.disc img{max-width:78%;max-height:80%;width:auto;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.7))}
.lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F95151}
.nm{font-family:'Bebas Neue',sans-serif;font-size:23px;line-height:.95;max-width:150px}
.pn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:0 34px;opacity:0;transition:opacity .35s}
.p0{opacity:1}
.wheel:has(.it:hover) .p0,.wheel:has(.it:focus-visible) .p0{opacity:0}
.wheel:has(.i1:hover) .p1,.wheel:has(.i2:hover) .p2,.wheel:has(.i3:hover) .p3,.wheel:has(.i4:hover) .p4,.wheel:has(.i5:hover) .p5,.wheel:has(.i6:hover) .p6,.wheel:has(.i7:hover) .p7,.wheel:has(.i8:hover) .p8,
.wheel:has(.i1:focus-visible) .p1,.wheel:has(.i2:focus-visible) .p2,.wheel:has(.i3:focus-visible) .p3,.wheel:has(.i4:focus-visible) .p4,.wheel:has(.i5:focus-visible) .p5,.wheel:has(.i6:focus-visible) .p6,.wheel:has(.i7:focus-visible) .p7,.wheel:has(.i8:focus-visible) .p8{opacity:1}
@keyframes words{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-1.18em)}40%,56%{transform:translateY(-2.36em)}60%,76%{transform:translateY(-3.54em)}80%,96%{transform:translateY(-4.72em)}100%{transform:translateY(-5.9em)}}
.words{display:inline-flex;flex-direction:column;animation:words 11s cubic-bezier(.7,0,.2,1) infinite}
@keyframes beam{0%,100%{opacity:.5}50%{opacity:.85}}
.beam{animation:beam 6s ease-in-out infinite}
@keyframes orbit{to{stroke-dashoffset:-400}}
.orbit{animation:orbit 14s linear infinite}
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(249,81,81,.6)!important;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 36px rgba(249,81,81,.14)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.wslot{display:inline-block;height:1.18em;overflow:hidden;vertical-align:bottom}
.wslot .words>span{display:block;height:1.18em;line-height:1.18em}
.ov{position:absolute;left:0;right:0;top:0;height:100vh;max-height:940px;z-index:30;display:flex;flex-direction:column;transition:opacity .45s ease,visibility .45s}
.ovin{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.exit{position:absolute;top:24px;right:28px;z-index:2;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,20,24,.8);border:1px solid rgba(249,81,81,.55);color:#ECECF0;cursor:pointer;box-shadow:0 0 30px rgba(249,81,81,.18);transition:background .25s,transform .25s,color .25s}
.exit:hover,.exit:focus-visible{background:#D63C3C;color:#FFFFFF;transform:scale(1.08)}
.xbtn{min-height:48px;padding:0 18px;display:flex;align-items:center;gap:10px;background:rgba(20,20,24,.75);border:1px solid #34343C;border-radius:12px;color:#ECECF0;font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:border-color .25s,background .25s}
.xbtn:hover,.xbtn:focus-visible{border-color:#F95151;background:rgba(214,60,60,.16)}
.wheel.big{width:680px;height:680px}
.step{display:flex;flex-direction:column;gap:10px;padding:22px;background:#141418;border:1px solid #2C2C33;border-radius:18px}
.ex{font-size:15px;color:#ECECF0;border-left:2px solid #D63C3C;padding-left:12px;font-style:italic}
/* --- Koordinator · znak savjetnika · animacija 16 s --- */
.kz .pair,.kz .ta,.kz .tb,.kz .fa,.kz .fb{transform-box:view-box;transform-origin:50px 50px}
.kz .pair{animation:kzPair 16s cubic-bezier(.65,0,.35,1) infinite}
.kz .ta{animation:kzTa 16s cubic-bezier(.65,0,.35,1) infinite}
.kz .tb{animation:kzTb 16s cubic-bezier(.65,0,.35,1) infinite}
.kz .fa{animation:kzFa 16s ease-in-out infinite}
.kz .fb{animation:kzFb 16s ease-in-out infinite}
@keyframes kzTa{0%,3%{transform:translate(0,0)}9%,11%{transform:translate(0,3px)}16%,72%{transform:translate(0,0)}76%{transform:translate(16px,19px)}80%,100%{transform:translate(0,38px)}}
@keyframes kzTb{0%,3%{transform:translate(0,0)}9%,11%{transform:translate(0,-3px)}16%,72%{transform:translate(0,0)}76%{transform:translate(-16px,-19px)}80%,100%{transform:translate(0,-38px)}}
@keyframes kzFa{0%,18%{opacity:1}25%,28%{opacity:0}35%,100%{opacity:1}}
@keyframes kzFb{0%,37%{opacity:1}44%,47%{opacity:0}54%,100%{opacity:1}}
@keyframes kzPair{0%,56%{transform:rotate(0deg)}62%,64%{transform:rotate(180deg)}70%,82%{transform:rotate(0deg)}88%,90%{transform:rotate(-180deg)}96%,100%{transform:rotate(0deg)}}
@media (prefers-reduced-motion: reduce){.kz *{animation:none!important}}
/* znak: povećanje i napomena pri prelasku mišem */
.kzb{position:relative;display:inline-flex;flex:none;cursor:pointer;text-decoration:none;border-radius:20px;outline:none}
.kzb>svg{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s}
.kzb:hover>svg,.kzb:focus-visible>svg,.kzb.show>svg{transform:scale(1.2);filter:drop-shadow(0 0 22px rgba(249,81,81,.6))}
.kzb .tip{position:absolute;z-index:3;white-space:nowrap;pointer-events:none;opacity:0;padding:10px 14px;background:#ECECF0;color:#141416;border-radius:10px;font:600 14px/1.2 'Barlow',sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:opacity .25s,transform .25s}
.kzb .tip::after{content:"";position:absolute;width:10px;height:10px;background:#ECECF0;transform:rotate(45deg)}
.kzb .tip-t{left:-4px;bottom:calc(100% + 16px);transform:translateY(6px)}
.kzb .tip-t::after{left:22px;bottom:-5px}
.kzb .tip-l{right:calc(100% + 18px);top:50%;transform:translate(6px,-50%)}
.kzb .tip-l::after{right:-5px;top:calc(50% - 5px)}
.kzb:hover .tip,.kzb:focus-visible .tip,.kzb.show .tip{opacity:1}
.kzb:hover .tip-t,.kzb:focus-visible .tip-t,.kzb.show .tip-t{transform:translateY(0)}
.kzb:hover .tip-l,.kzb:focus-visible .tip-l,.kzb.show .tip-l{transform:translate(0,-50%)}
/* proizvođači: karta i pločice */
@keyframes flow{to{stroke-dashoffset:-48}}
@keyframes pulse{0%{r:5;opacity:.6}100%{r:16;opacity:0}}
@keyframes kog{0%,100%{opacity:.6}50%{opacity:1}}
.sup .trunk{animation:flow 2.4s linear infinite}
.sup .rt{animation:flow 3.2s linear infinite;transition:stroke-opacity .3s,stroke-width .3s}
.sup .pulse{animation:pulse 2.6s ease-out infinite}
.sup .m2 .pulse,.sup .m6 .pulse{animation-delay:-.6s}.sup .m3 .pulse,.sup .m7 .pulse{animation-delay:-1.3s}.sup .m4 .pulse,.sup .m8 .pulse{animation-delay:-1.9s}
.sup .kog{animation:kog 3s ease-in-out infinite}
.sup .fp circle:last-of-type{transition:r .3s}
.sup .fl{opacity:0;transition:opacity .3s}
.sup .fp{transition:opacity .3s}
.sup:has(.st:hover) .fp,.sup:has(.st:focus-visible) .fp{opacity:.3}
.sup:has(.st:hover) .rt,.sup:has(.st:focus-visible) .rt{stroke-opacity:.12}
.sup:has(.t1:hover) .m1,.sup:has(.t1:focus-visible) .m1,
.sup:has(.t2:hover) .m2,.sup:has(.t2:focus-visible) .m2,
.sup:has(.t3:hover) .m3,.sup:has(.t3:focus-visible) .m3,
.sup:has(.t4:hover) .m4,.sup:has(.t4:focus-visible) .m4,
.sup:has(.t5:hover) .m5,.sup:has(.t5:focus-visible) .m5,
.sup:has(.t6:hover) .m6,.sup:has(.t6:focus-visible) .m6,
.sup:has(.t7:hover) .m7,.sup:has(.t7:focus-visible) .m7,
.sup:has(.t8:hover) .m8,.sup:has(.t8:focus-visible) .m8{opacity:1}
.sup:has(.st:hover) .fp .fl{opacity:0}
.sup:has(.t1:hover) .m1 .fl,.sup:has(.t1:focus-visible) .m1 .fl,
.sup:has(.t2:hover) .m2 .fl,.sup:has(.t2:focus-visible) .m2 .fl,
.sup:has(.t3:hover) .m3 .fl,.sup:has(.t3:focus-visible) .m3 .fl,
.sup:has(.t4:hover) .m4 .fl,.sup:has(.t4:focus-visible) .m4 .fl,
.sup:has(.t5:hover) .m5 .fl,.sup:has(.t5:focus-visible) .m5 .fl,
.sup:has(.t6:hover) .m6 .fl,.sup:has(.t6:focus-visible) .m6 .fl,
.sup:has(.t7:hover) .m7 .fl,.sup:has(.t7:focus-visible) .m7 .fl,
.sup:has(.t8:hover) .m8 .fl,.sup:has(.t8:focus-visible) .m8 .fl{opacity:1}
.sup:has(.t1:hover) .r1,.sup:has(.t1:focus-visible) .r1,
.sup:has(.t2:hover) .r2,.sup:has(.t2:focus-visible) .r2,
.sup:has(.t3:hover) .r3,.sup:has(.t3:focus-visible) .r3,
.sup:has(.t4:hover) .r4,.sup:has(.t4:focus-visible) .r4,
.sup:has(.t5:hover) .r5,.sup:has(.t5:focus-visible) .r5,
.sup:has(.t6:hover) .r6,.sup:has(.t6:focus-visible) .r6,
.sup:has(.t7:hover) .r7,.sup:has(.t7:focus-visible) .r7,
.sup:has(.t8:hover) .r8,.sup:has(.t8:focus-visible) .r8{stroke-opacity:1;stroke-width:2.4}
.st{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:rgba(20,20,24,.85);border:1px solid #2C2C33;border-radius:14px;text-decoration:none;color:#ECECF0;outline:none;transition:border-color .3s,transform .3s,background .3s}
.st:hover,.st:focus-visible{border-color:rgba(249,81,81,.7);background:rgba(214,60,60,.1);transform:translateY(-3px)}
/* niz tvornica u zaglavlju */
@keyframes tvup{to{transform:translateY(calc(-50% - 6px))}}
.tvw{height:540px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.tvl{display:flex;flex-direction:column;gap:12px;animation:tvup 40s linear infinite}
.tvw:hover .tvl,.tvw:focus-within .tvl{animation-play-state:paused}
.tvk{display:flex;align-items:center;gap:16px;padding:14px 16px;background:rgba(20,20,24,.82);border:1px solid #2C2C33;border-radius:16px;text-decoration:none;color:#ECECF0;transition:border-color .3s,transform .3s,background .3s}
.tvk:hover,.tvk:focus-visible{border-color:rgba(249,81,81,.7);background:rgba(214,60,60,.1);transform:translateX(-6px)}
/* dobavljači: okomiti niz logotipa, 5 vidljivih */
@keyframes lgup{to{transform:translateY(calc(-50% - 7px))}}
.lgw{height:556px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.lgl{display:flex;flex-direction:column;gap:14px;animation:lgup 70s linear infinite}
.lgw:hover .lgl{animation-play-state:paused}
.lgk{height:100px;flex:none;display:flex;align-items:center;justify-content:center;background:#141418;border:1px solid #2C2C33;border-radius:16px;transition:border-color .3s,transform .3s,background .3s}
.lgk:hover{border-color:rgba(249,81,81,.7);background:#1A1A1F;transform:scale(1.03)}
.soc{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#18181C;border:1px solid #34343C;color:#ECECF0;text-decoration:none;transition:color .25s,border-color .25s,background .25s,transform .25s}
.soc:hover,.soc:focus-visible{color:#FFFFFF;background:#D63C3C;border-color:#D63C3C;transform:translateY(-2px)}
/* izlaz: crvena traka s lijeve strane */
.xbar{position:absolute;left:0;top:0;bottom:0;z-index:5;border:0;padding:0;margin:0;cursor:pointer;background:linear-gradient(180deg,#F95151,#D63C3C 55%,#B92E2E);box-shadow:0 0 40px rgba(249,81,81,.35);transition:width 2.6s cubic-bezier(.6,0,.2,1),filter .25s;overflow:visible}
.xbar:hover,.xbar:focus-visible{filter:brightness(1.12)}
.xdoor{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex}
.xman{position:absolute;top:50%;margin-top:-20px;display:flex;transition:left 2.6s cubic-bezier(.6,0,.2,1);animation-duration:.32s;animation-iteration-count:8;animation-timing-function:ease-in-out}
@keyframes xrun{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-5deg)}}
.xtip{position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;padding:9px 13px;background:#ECECF0;color:#141416;border-radius:10px;font:600 14px/1.2 'Barlow',sans-serif;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.xbar:hover .xtip,.xbar:focus-visible .xtip{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion: reduce){.xbar,.xman{transition:none!important}}
/* ---- tablet i mobitel ---- */
.mnav{display:none}
@media (max-width: 1024px){
  .kw{margin-left:auto;margin-right:auto}
  .dnav{display:none!important}
  .mnav{display:flex}
}
@media (max-width: 760px){
  div[style*="max-width: 1320px"]{padding-left:16px!important;padding-right:16px!important}
  header div[style*="max-width: 1320px"]{padding-top:12px!important;padding-bottom:12px!important}
  header img[alt="Koordinator"]{height:48px!important}
  .hrb,.luT{display:none}
  .kw{zoom:.52;flex-basis:auto!important;margin:8px auto 24px}
  .lgw{height:338px}
  .lgk{height:90px}
  .xbar{top:auto!important;right:0;bottom:0;width:100%!important;height:64px}
  .xbar .xman{top:50%}
  .xtip{display:none}
  .kzb[style*="position: fixed"]{right:16px!important;bottom:16px!important}
  .kzb[style*="position: fixed"] svg{width:56px;height:56px}
}
/* koraci: crveni okvir putuje 1 → 4, 1,5 s po koraku */
@keyframes stepOn{0%,22%{border-color:rgba(249,81,81,.85);box-shadow:0 0 0 1px rgba(249,81,81,.35),0 18px 40px rgba(0,0,0,.45),0 0 34px rgba(249,81,81,.16)}27%,96%{border-color:#2C2C33;box-shadow:none}100%{border-color:rgba(249,81,81,.85);box-shadow:0 0 0 1px rgba(249,81,81,.35),0 18px 40px rgba(0,0,0,.45),0 0 34px rgba(249,81,81,.16)}}
@keyframes stepNum{0%,22%{background:#D63C3C;border-color:#F95151;transform:scale(1.12)}27%,96%{background:#1C1C21;border-color:#34343C;transform:scale(1)}100%{background:#D63C3C;border-color:#F95151;transform:scale(1.12)}}
.step{animation:stepOn 6s ease-in-out infinite}
.step .stn{border:1px solid #34343C;background:#1C1C21;animation:stepNum 6s ease-in-out infinite}
.step.s1,.step.s1 .stn{animation-delay:0s}
.step.s2,.step.s2 .stn{animation-delay:-4.5s}
.step.s3,.step.s3 .stn{animation-delay:-3s}
.step.s4,.step.s4 .stn{animation-delay:-1.5s}
@media (prefers-reduced-motion: reduce){.step.s1{border-color:rgba(249,81,81,.85)}.step.s1 .stn{background:#D63C3C;border-color:#F95151}}
/* stranica dobavljača */
.dmap .pin{cursor:pointer;outline:none}
.dmap .pp{transition:transform .25s;transform-box:fill-box;transform-origin:50% 100%}
.dmap .tip{opacity:0;transition:opacity .2s}
.dmap .pin:hover .pp,.dmap .pin:focus .pp{transform:scale(1.35)}
.dmap .pin:hover .tip,.dmap .pin:focus .tip{opacity:1}
.dmap .pin:hover,.dmap .pin:focus{}
.dobp:has(.c-giorik:hover) .p-giorik .pp,.dobp:has(.c-giorik:focus-visible) .p-giorik .pp,.dobp:has(.c-tecnodom:hover) .p-tecnodom .pp,.dobp:has(.c-tecnodom:focus-visible) .p-tecnodom .pp,.dobp:has(.c-sistema:hover) .p-sistema .pp,.dobp:has(.c-sistema:focus-visible) .p-sistema .pp,.dobp:has(.c-dihr:hover) .p-dihr .pp,.dobp:has(.c-dihr:focus-visible) .p-dihr .pp,.dobp:has(.c-prisma:hover) .p-prisma .pp,.dobp:has(.c-prisma:focus-visible) .p-prisma .pp,.dobp:has(.c-everlasting:hover) .p-everlasting .pp,.dobp:has(.c-everlasting:focus-visible) .p-everlasting .pp,.dobp:has(.c-meatico:hover) .p-meatico .pp,.dobp:has(.c-meatico:focus-visible) .p-meatico .pp,.dobp:has(.c-coldmark:hover) .p-coldmark .pp,.dobp:has(.c-coldmark:focus-visible) .p-coldmark .pp,.dobp:has(.c-casta:hover) .p-casta .pp,.dobp:has(.c-casta:focus-visible) .p-casta .pp,.dobp:has(.c-metaltecnica:hover) .p-metaltecnica .pp,.dobp:has(.c-metaltecnica:focus-visible) .p-metaltecnica .pp,.dobp:has(.c-fimar:hover) .p-fimar .pp,.dobp:has(.c-fimar:focus-visible) .p-fimar .pp,.dobp:has(.c-italforni:hover) .p-italforni .pp,.dobp:has(.c-italforni:focus-visible) .p-italforni .pp,.dobp:has(.c-iceteam:hover) .p-iceteam .pp,.dobp:has(.c-iceteam:focus-visible) .p-iceteam .pp,.dobp:has(.c-icb:hover) .p-icb .pp,.dobp:has(.c-icb:focus-visible) .p-icb .pp,.dobp:has(.c-gelmatic:hover) .p-gelmatic .pp,.dobp:has(.c-gelmatic:focus-visible) .p-gelmatic .pp,.dobp:has(.c-rocam:hover) .p-rocam .pp,.dobp:has(.c-rocam:focus-visible) .p-rocam .pp,.dobp:has(.c-daint:hover) .p-daint .pp,.dobp:has(.c-daint:focus-visible) .p-daint .pp,.dobp:has(.c-gelita:hover) .p-gelita .pp,.dobp:has(.c-gelita:focus-visible) .p-gelita .pp{transform:scale(1.45);fill:#FFFFFF}
.dobp:has(.c-giorik:hover) .p-giorik .tip,.dobp:has(.c-giorik:focus-visible) .p-giorik .tip,.dobp:has(.c-tecnodom:hover) .p-tecnodom .tip,.dobp:has(.c-tecnodom:focus-visible) .p-tecnodom .tip,.dobp:has(.c-sistema:hover) .p-sistema .tip,.dobp:has(.c-sistema:focus-visible) .p-sistema .tip,.dobp:has(.c-dihr:hover) .p-dihr .tip,.dobp:has(.c-dihr:focus-visible) .p-dihr .tip,.dobp:has(.c-prisma:hover) .p-prisma .tip,.dobp:has(.c-prisma:focus-visible) .p-prisma .tip,.dobp:has(.c-everlasting:hover) .p-everlasting .tip,.dobp:has(.c-everlasting:focus-visible) .p-everlasting .tip,.dobp:has(.c-meatico:hover) .p-meatico .tip,.dobp:has(.c-meatico:focus-visible) .p-meatico .tip,.dobp:has(.c-coldmark:hover) .p-coldmark .tip,.dobp:has(.c-coldmark:focus-visible) .p-coldmark .tip,.dobp:has(.c-casta:hover) .p-casta .tip,.dobp:has(.c-casta:focus-visible) .p-casta .tip,.dobp:has(.c-metaltecnica:hover) .p-metaltecnica .tip,.dobp:has(.c-metaltecnica:focus-visible) .p-metaltecnica .tip,.dobp:has(.c-fimar:hover) .p-fimar .tip,.dobp:has(.c-fimar:focus-visible) .p-fimar .tip,.dobp:has(.c-italforni:hover) .p-italforni .tip,.dobp:has(.c-italforni:focus-visible) .p-italforni .tip,.dobp:has(.c-iceteam:hover) .p-iceteam .tip,.dobp:has(.c-iceteam:focus-visible) .p-iceteam .tip,.dobp:has(.c-icb:hover) .p-icb .tip,.dobp:has(.c-icb:focus-visible) .p-icb .tip,.dobp:has(.c-gelmatic:hover) .p-gelmatic .tip,.dobp:has(.c-gelmatic:focus-visible) .p-gelmatic .tip,.dobp:has(.c-rocam:hover) .p-rocam .tip,.dobp:has(.c-rocam:focus-visible) .p-rocam .tip,.dobp:has(.c-daint:hover) .p-daint .tip,.dobp:has(.c-daint:focus-visible) .p-daint .tip,.dobp:has(.c-gelita:hover) .p-gelita .tip,.dobp:has(.c-gelita:focus-visible) .p-gelita .tip{opacity:1}
.dmap .kog{animation:kog 3s ease-in-out infinite}
@keyframes kog{0%,100%{opacity:.6}50%{opacity:1}}
.dk{display:flex;flex-direction:column;background:#141418;border:1px solid #2C2C33;border-radius:18px;overflow:hidden;outline:none;transition:border-color .3s,transform .3s}
.dk:hover,.dk:focus-visible{border-color:rgba(249,81,81,.7);transform:translateY(-3px)}
@media (max-width: 900px){.dobp>div:first-child{grid-template-columns:1fr!important}}
.dkl{height:96px;display:flex;align-items:center;justify-content:center;background:#1A1A1F;border-bottom:1px solid #2C2C33}
/* prava karta */
@keyframes arcflow{to{stroke-dashoffset:-40}}
.dmap .arc{animation:arcflow 3s linear infinite;transition:stroke-opacity .3s,stroke-width .3s}
.dobp:has(.c-giorik:hover) .a-giorik,.dmap:has(.p-giorik:hover) .a-giorik,.dobp:has(.c-tecnodom:hover) .a-tecnodom,.dmap:has(.p-tecnodom:hover) .a-tecnodom,.dobp:has(.c-sistema:hover) .a-sistema,.dmap:has(.p-sistema:hover) .a-sistema,.dobp:has(.c-dihr:hover) .a-dihr,.dmap:has(.p-dihr:hover) .a-dihr,.dobp:has(.c-prisma:hover) .a-prisma,.dmap:has(.p-prisma:hover) .a-prisma,.dobp:has(.c-everlasting:hover) .a-everlasting,.dmap:has(.p-everlasting:hover) .a-everlasting,.dobp:has(.c-meatico:hover) .a-meatico,.dmap:has(.p-meatico:hover) .a-meatico,.dobp:has(.c-coldmark:hover) .a-coldmark,.dmap:has(.p-coldmark:hover) .a-coldmark,.dobp:has(.c-casta:hover) .a-casta,.dmap:has(.p-casta:hover) .a-casta,.dobp:has(.c-metaltecnica:hover) .a-metaltecnica,.dmap:has(.p-metaltecnica:hover) .a-metaltecnica,.dobp:has(.c-fimar:hover) .a-fimar,.dmap:has(.p-fimar:hover) .a-fimar,.dobp:has(.c-italforni:hover) .a-italforni,.dmap:has(.p-italforni:hover) .a-italforni,.dobp:has(.c-iceteam:hover) .a-iceteam,.dmap:has(.p-iceteam:hover) .a-iceteam,.dobp:has(.c-icb:hover) .a-icb,.dmap:has(.p-icb:hover) .a-icb,.dobp:has(.c-gelmatic:hover) .a-gelmatic,.dmap:has(.p-gelmatic:hover) .a-gelmatic,.dobp:has(.c-rocam:hover) .a-rocam,.dmap:has(.p-rocam:hover) .a-rocam,.dobp:has(.c-daint:hover) .a-daint,.dmap:has(.p-daint:hover) .a-daint,.dobp:has(.c-gelita:hover) .a-gelita,.dmap:has(.p-gelita:hover) .a-gelita{stroke-opacity:1;stroke-width:2.2}
.dmap:has(.p-giorik:hover) .t-giorik,.dmap:has(.p-giorik:focus) .t-giorik,.dobp:has(.c-giorik:hover) .t-giorik,.dobp:has(.c-giorik:focus-visible) .t-giorik,.dmap:has(.p-tecnodom:hover) .t-tecnodom,.dmap:has(.p-tecnodom:focus) .t-tecnodom,.dobp:has(.c-tecnodom:hover) .t-tecnodom,.dobp:has(.c-tecnodom:focus-visible) .t-tecnodom,.dmap:has(.p-sistema:hover) .t-sistema,.dmap:has(.p-sistema:focus) .t-sistema,.dobp:has(.c-sistema:hover) .t-sistema,.dobp:has(.c-sistema:focus-visible) .t-sistema,.dmap:has(.p-dihr:hover) .t-dihr,.dmap:has(.p-dihr:focus) .t-dihr,.dobp:has(.c-dihr:hover) .t-dihr,.dobp:has(.c-dihr:focus-visible) .t-dihr,.dmap:has(.p-prisma:hover) .t-prisma,.dmap:has(.p-prisma:focus) .t-prisma,.dobp:has(.c-prisma:hover) .t-prisma,.dobp:has(.c-prisma:focus-visible) .t-prisma,.dmap:has(.p-everlasting:hover) .t-everlasting,.dmap:has(.p-everlasting:focus) .t-everlasting,.dobp:has(.c-everlasting:hover) .t-everlasting,.dobp:has(.c-everlasting:focus-visible) .t-everlasting,.dmap:has(.p-meatico:hover) .t-meatico,.dmap:has(.p-meatico:focus) .t-meatico,.dobp:has(.c-meatico:hover) .t-meatico,.dobp:has(.c-meatico:focus-visible) .t-meatico,.dmap:has(.p-coldmark:hover) .t-coldmark,.dmap:has(.p-coldmark:focus) .t-coldmark,.dobp:has(.c-coldmark:hover) .t-coldmark,.dobp:has(.c-coldmark:focus-visible) .t-coldmark,.dmap:has(.p-casta:hover) .t-casta,.dmap:has(.p-casta:focus) .t-casta,.dobp:has(.c-casta:hover) .t-casta,.dobp:has(.c-casta:focus-visible) .t-casta,.dmap:has(.p-metaltecnica:hover) .t-metaltecnica,.dmap:has(.p-metaltecnica:focus) .t-metaltecnica,.dobp:has(.c-metaltecnica:hover) .t-metaltecnica,.dobp:has(.c-metaltecnica:focus-visible) .t-metaltecnica,.dmap:has(.p-fimar:hover) .t-fimar,.dmap:has(.p-fimar:focus) .t-fimar,.dobp:has(.c-fimar:hover) .t-fimar,.dobp:has(.c-fimar:focus-visible) .t-fimar,.dmap:has(.p-italforni:hover) .t-italforni,.dmap:has(.p-italforni:focus) .t-italforni,.dobp:has(.c-italforni:hover) .t-italforni,.dobp:has(.c-italforni:focus-visible) .t-italforni,.dmap:has(.p-iceteam:hover) .t-iceteam,.dmap:has(.p-iceteam:focus) .t-iceteam,.dobp:has(.c-iceteam:hover) .t-iceteam,.dobp:has(.c-iceteam:focus-visible) .t-iceteam,.dmap:has(.p-icb:hover) .t-icb,.dmap:has(.p-icb:focus) .t-icb,.dobp:has(.c-icb:hover) .t-icb,.dobp:has(.c-icb:focus-visible) .t-icb,.dmap:has(.p-gelmatic:hover) .t-gelmatic,.dmap:has(.p-gelmatic:focus) .t-gelmatic,.dobp:has(.c-gelmatic:hover) .t-gelmatic,.dobp:has(.c-gelmatic:focus-visible) .t-gelmatic,.dmap:has(.p-rocam:hover) .t-rocam,.dmap:has(.p-rocam:focus) .t-rocam,.dobp:has(.c-rocam:hover) .t-rocam,.dobp:has(.c-rocam:focus-visible) .t-rocam,.dmap:has(.p-daint:hover) .t-daint,.dmap:has(.p-daint:focus) .t-daint,.dobp:has(.c-daint:hover) .t-daint,.dobp:has(.c-daint:focus-visible) .t-daint,.dmap:has(.p-gelita:hover) .t-gelita,.dmap:has(.p-gelita:focus) .t-gelita,.dobp:has(.c-gelita:hover) .t-gelita,.dobp:has(.c-gelita:focus-visible) .t-gelita{opacity:1}
.dmap .pp{transition:transform .25s,fill .25s}
/* ---- koreografija pokreta ---- */
@property --r{syntax:'<length>';inherits:false;initial-value:-250px}
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.rv.pre:not(.in){opacity:0;transform:translateY(28px)}
.rv.pre.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.kw .wheel.inl .it{transform:rotate(var(--a)) translateY(var(--r)) rotate(calc(-1 * var(--a)))}
.kw.pre:not(.in) .wheel.inl .it{--r:0px;opacity:0}
.kw.pre.in .wheel.inl .it{transition:--r 1.15s var(--ease),opacity .6s ease;transition-delay:calc(.35s + var(--i) * 80ms)}
.kw.pre:not(.in) .wheel.inl .pn.p0{opacity:0;transform:scale(.85)}
.kw.pre.in .wheel.inl .pn.p0{transition:opacity .8s ease 1.2s,transform .8s var(--ease) 1.2s}
.kw.pre:not(.in) .wheel.inl svg .orbit{opacity:0}
@keyframes pinDrop{0%{opacity:0;transform:translateY(-34px)}60%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}
.dmap.pre:not(.in) .pin{opacity:0}
.dmap.pre.in .pin{animation:pinDrop .7s var(--ease) both;animation-delay:calc(.25s + var(--i) * 70ms)}
.dmap.pre:not(.in) .arc{opacity:0}
.dmap.pre.in .arc{opacity:1;transition:opacity 1.2s ease 1.6s}
.cnt{font-variant-numeric:tabular-nums}
.rv.pre.in.card{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,opacity .9s ease}
@media (prefers-reduced-motion: reduce){.rv.pre,.kw.pre .wheel.inl .it,.dmap.pre .pin,.dmap.pre .arc{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.kw .wheel.inl .it{--r:-250px}}
/* stranica kategorije */
.ksw{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 16px;text-decoration:none;color:#E2E1EA;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.kswr{display:flex;gap:4px;border-top:1px solid rgba(174,173,191,.14)}
.kswd{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #34343C;transition:border-color .25s,transform .3s var(--ease),box-shadow .25s}
.kswd img{max-width:76%;max-height:78%;width:auto;height:auto;display:block}
.kswn{font-family:'Bebas Neue',sans-serif;font-size:17px;line-height:1;text-align:center}
.ksw:hover{color:#ECECF0}.ksw:hover .kswd{transform:translateY(-3px);border-color:#AEADBF}
.ksw.on{color:#FFFFFF;border-bottom-color:#F95151}.ksw.on .kswd{border-color:#F95151;box-shadow:0 0 0 3px rgba(249,81,81,.18),0 0 24px rgba(249,81,81,.35)}
.gk{display:flex;flex-direction:column;background:#141418;border:1px solid #2C2C33;border-radius:20px;overflow:hidden;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.gk:hover{border-color:rgba(249,81,81,.6);transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.5),0 0 34px rgba(249,81,81,.12)}
.gkm{height:210px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.gkm img{max-height:88%;max-width:86%;width:auto;height:auto;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.65));transition:transform .6s var(--ease)}
.gk:hover .gkm img{transform:scale(1.06) translateY(-4px)}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#1C1C21;border:1px solid #34343C;color:#ECECF0;font-size:13px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:#F95151;color:#FFFFFF;background:rgba(214,60,60,.14)}
.gkl{margin-top:auto;padding-top:8px;align-self:flex-start;text-decoration:none;color:#ECECF0;font-weight:700;font-size:15px}
.gkl span{color:#F95151;display:inline-block;transition:transform .25s}.gk:hover .gkl span{transform:translateX(4px)}
.brl{display:inline-flex;height:52px;padding:0 10px;align-items:center;background:#1A1A1F;border:1px solid #2C2C33;border-radius:10px}.brl img{max-height:34px;width:auto;display:block;border-radius:4px}
@media (max-width: 1024px){.gk{}}
/* poruka savjetnika (jednom po posjetu) */
.nudge{position:fixed;right:28px;bottom:112px;z-index:26;width:340px;display:flex;flex-direction:column;gap:12px;padding:18px 18px 18px;background:#ECECF0;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(249,81,81,.25);transform-origin:90% 100%;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s}
.nudge::after{content:"";position:absolute;right:26px;bottom:-8px;width:16px;height:16px;background:#ECECF0;transform:rotate(45deg);border-radius:3px}
.nux{position:absolute;top:10px;right:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:8px;color:#5A5966;cursor:pointer}
.nux:hover{background:rgba(20,20,22,.08);color:#141416}
.nuc{min-height:36px;padding:0 12px;background:#FFFFFF;border:1px solid #D7D6DE;border-radius:999px;color:#2A2A30;font:500 14px/1 'Barlow',sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.nuc:hover{border-color:#D63C3C;color:#D63C3C}
.nup{min-height:46px;background:#D63C3C;border:0;border-radius:12px;color:#FFFFFF;font:700 16px/1 'Barlow',sans-serif;cursor:pointer}
.nup:hover{background:#C13434}
@media (max-width: 760px){.nudge{right:16px;left:16px;width:auto;bottom:88px}}
/* popis uređaja i stranica proizvoda */
.ptab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid #34343C;background:#141418;color:#ECECF0;text-decoration:none;font-weight:600;font-size:15px;transition:border-color .2s,color .2s,background .2s}
.ptab small{font:400 12px/1 'IBM Plex Mono',monospace;color:#D4D3DE}
.ptab:hover{border-color:#AEADBF;color:#FFFFFF}
.ptab.on{border-color:#F95151;background:rgba(214,60,60,.14);color:#FFFFFF}.ptab.on small{color:#F3C2C2}
.fp{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px;padding:22px;background:#141418;border:1px solid #2C2C33;border-radius:20px}
.fg{display:flex;flex-direction:column;gap:9px;border:0;margin:0;padding:0}
.fg legend{padding:0;margin-bottom:9px;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#D4D3DE}
.fo{display:flex;flex-wrap:wrap;gap:6px}
.fc{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #34343C;background:#1C1C21;color:#ECECF0;font:500 14px/1 'Barlow',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .2s,color .2s,background .2s}
.fc:hover{border-color:#AEADBF;color:#FFFFFF}
.fc[aria-pressed="true"]{border-color:#F95151;background:rgba(214,60,60,.18);color:#FFFFFF}
.fc .n{font:400 11px/1 'IBM Plex Mono',monospace;color:#D4D3DE}.fc[aria-pressed="true"] .n{color:#F3C2C2}
.fc[disabled]{opacity:.35;cursor:not-allowed}
.fbar{position:relative;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:#141418;border:1px solid #2C2C33;border-radius:18px}
.dd{position:relative}
.dd summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #34343C;background:#1C1C21;color:#ECECF0;font:600 15px/1 'Barlow',sans-serif;cursor:pointer;user-select:none;transition:border-color .2s,background .2s}
.dd summary::-webkit-details-marker{display:none}
.dd summary:hover{border-color:#AEADBF}
.dd[open] summary{border-color:#F95151}
.dd.has summary{border-color:#F95151;background:rgba(214,60,60,.16)}
.ddc:empty{display:none}.ddc{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#D63C3C;color:#FFFFFF;font:600 12px/20px 'Barlow',sans-serif;text-align:center}
.ddi{color:#D4D3DE;transition:transform .25s}.dd[open] .ddi{transform:rotate(180deg)}
.ddp{position:absolute;left:0;top:calc(100% + 8px);z-index:30;min-width:260px;display:flex;flex-direction:column;gap:10px;padding:14px;background:#18181C;border:1px solid #34343C;border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.6)}
.ddt{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#D4D3DE}
.ddp .fo{flex-direction:column;align-items:stretch}.ddp .fc{justify-content:space-between}
.fside{position:sticky;top:20px;display:flex;flex-direction:column;gap:7px;padding:14px 10px;background:#141418;border:1px solid #2C2C33;border-radius:20px}
.fside .dd summary{display:flex;width:100%;box-sizing:border-box;justify-content:flex-start;min-height:42px;padding:0 12px;font-size:14px}
.fside .dd summary .ddi{margin-left:auto}
.fside .ddp{position:static;min-width:0;margin-top:6px;padding:6px;box-shadow:none;background:#111114}
.fside .ddt{display:none}
.fside .fc{font-size:13px;padding:0 9px;min-height:34px;gap:4px}
.fclr{min-height:44px;padding:0 10px;background:transparent;border:0;color:#E6E5EE;font:600 14px/1 'Barlow',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk{display:flex;flex-direction:column;background:#141418;border:1px solid #2C2C33;border-radius:20px;overflow:hidden;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s,opacity .3s}
.pk:hover{border-color:rgba(249,81,81,.6);transform:translateY(-4px);box-shadow:0 22px 46px rgba(0,0,0,.5)}
.pk.off{display:none}
.pkm{position:relative;height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none}
.pkm img{max-width:88%;max-height:84%;width:auto;height:auto;display:block;filter:drop-shadow(0 16px 20px rgba(0,0,0,.7));transition:transform .6s var(--ease)}
.pk:hover .pkm img{transform:scale(1.05)}
.pkb{position:absolute;left:12px;top:12px;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#FFFFFF;background:rgba(12,12,14,.75);border:1px solid #34343C;border-radius:999px;padding:7px 10px}
.pkv{position:absolute;right:12px;top:12px;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#ECECF0;background:rgba(12,12,14,.75);border:1px solid #34343C;border-radius:999px;padding:7px 10px}
.noph{display:flex;flex-direction:column;align-items:center;gap:8px;color:#BEBDCA;font:500 11px/1.3 'IBM Plex Mono',monospace;letter-spacing:.1em;text-align:center}
.spc{display:flex;flex-wrap:wrap;gap:6px}
.spc span{font-size:13px;color:#ECECF0;background:#1C1C21;border:1px solid #2C2C33;border-radius:8px;padding:5px 9px}
.add{min-height:42px;padding:0 14px;border-radius:12px;border:1px solid #34343C;background:transparent;color:#ECECF0;font:600 14px/1 'Barlow',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s,color .2s}
.add:hover{border-color:#F95151}
.add[aria-pressed="true"]{background:#1F3A2A;border-color:#3FA86B;color:#DFF5E8}
.go{min-height:42px;padding:0 16px;border-radius:12px;background:#D63C3C;color:#FFFFFF;text-decoration:none;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.go:hover{background:#C13434;color:#FFFFFF}
.sbar{position:sticky;bottom:18px;z-index:20;margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 104px 14px 22px;background:rgba(20,20,24,.94);border:1px solid rgba(249,81,81,.5);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.tagx{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#F3C2C2;background:rgba(214,60,60,.16);border:1px solid rgba(249,81,81,.45);border-radius:999px;padding:5px 10px}
.empty{display:none;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border:1px dashed rgba(249,81,81,.5);border-radius:20px;background:#141418}
.empty.show{display:flex}
.vb{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid #34343C;background:#141418;color:#ECECF0;font:600 15px/1 'Barlow',sans-serif;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.vb:hover{border-color:#AEADBF;color:#FFFFFF}
.vb[aria-pressed="true"]{border-color:#F95151;background:rgba(214,60,60,.16);color:#FFFFFF}
.thumb{width:96px;height:72px;border-radius:12px;border:1px solid #34343C;background:#1A1A1F;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;padding:0}
.thumb img{max-width:90%;max-height:86%;display:block}
.thumb[aria-pressed="true"]{border-color:#F95151;box-shadow:0 0 0 3px rgba(249,81,81,.18)}
.tdt{width:100%;border-collapse:collapse;font-size:16px}
.tdt th{text-align:left;font-weight:500;color:#E2E1EA;padding:12px 16px 12px 0;border-bottom:1px solid #2C2C33;width:44%;vertical-align:top}
.tdt td{padding:12px 0;border-bottom:1px solid #2C2C33;color:#ECECF0;vertical-align:top}
.bx{display:flex;flex-direction:column;gap:10px;padding:22px;background:#141418;border:1px solid #2C2C33;border-radius:18px}
.sim{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:12px 12px 16px;min-width:0;background:#141418;border:1px solid #2C2C33;border-radius:16px;text-decoration:none;color:#ECECF0;transition:border-color .25s,transform .3s var(--ease)}
.sim:hover{border-color:rgba(249,81,81,.6);transform:translateY(-3px);color:#FFFFFF}
.sim .si{height:130px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sim .si img{max-width:88%;max-height:84%;display:block;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.simg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.pimg{transition:opacity .35s ease}

/* izlaz: mala ikona u zaglavlju umjesto crvene trake */
.xwrap{position:relative;flex:none}
.xb2{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid #34343C;background:#141418;color:#ECECF0;text-decoration:none;transition:border-color .25s,color .25s,background .25s}
.xb2:hover,.xb2:focus-visible{border-color:#F95151;color:#FFFFFF;background:rgba(214,60,60,.14)}
.xbm{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.xb2:hover .xbm,.xb2:focus-visible .xbm{transform:translateX(4px)}
.xb2t{position:absolute;left:0;top:calc(100% + 10px);white-space:nowrap;padding:8px 12px;background:#ECECF0;color:#141416;border-radius:9px;font:600 13px/1.2 'Barlow',sans-serif;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s;z-index:20}
.xb2:hover .xb2t,.xb2:focus-visible .xb2t{opacity:1;transform:none}
.xpop{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:300px;display:none;flex-direction:column;gap:8px;padding:14px;background:#ECECF0;color:#141416;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);font-size:14px;line-height:1.4}
.xpop.show{display:flex}
.xpp{min-height:38px;padding:0 14px;border:0;border-radius:10px;background:#D63C3C;color:#fff;font:700 14px/1 'Barlow',sans-serif;cursor:pointer}
.xps{display:inline-flex;align-items:center;padding:0 10px;color:#141416;font-weight:600;font-size:14px}

/* lista upita: poveznica u zaglavlju i potvrda dodavanja */
a.lub{text-decoration:none;transition:border-color .2s,background .2s}
a.lub:hover,a.lub:focus-visible{border-color:#ECECF0!important;background:#202026!important}
.luN.bump{animation:lubump .5s cubic-bezier(.2,.7,.2,1)}
@keyframes lubump{0%{transform:scale(1)}40%{transform:scale(1.6);color:#F95151}100%{transform:scale(1)}}
.ltoast{position:fixed;top:86px;right:32px;z-index:40;width:380px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 14px 14px 16px;background:#ECECF0;color:#141416;border-radius:16px;box-shadow:0 22px 50px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s,transform .22s}
.ltoast.show{opacity:1;transform:none;pointer-events:auto}
.ltoast b{display:block;font-size:15px}
.ltoast .ltn{display:block;font-size:14px;color:#4A4A55;line-height:1.35;margin-top:2px}
.ltoast .ltgo{display:inline-flex;margin-top:10px;min-height:38px;align-items:center;padding:0 14px;border-radius:10px;background:#D63C3C;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.ltoast .ltc{border:0;background:none;font-size:20px;line-height:1;color:#4A4A55;cursor:pointer;padding:2px 4px}

.lqwrap{max-width:1320px;margin:0 auto;padding:40px 32px 90px;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:28px;align-items:start}
.lqbox{background:rgba(20,20,24,.72);border:1px solid #2C2C33;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:16px}
.lqh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lqh b{font-size:19px}
.lqh a{color:#E6E5EE;font-size:14px}
.lqk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;color:#D4D3DE}
.lqit{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:18px;align-items:start;padding:18px 0;border-top:1px solid #26262C}
.lqit:first-of-type{border-top:0;padding-top:4px}
.lqim{width:112px;height:96px;border-radius:14px;border:1px solid #2C2C33;background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(150,190,255,.10),rgba(12,12,14,0) 70%),#141418;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lqim img{max-width:92%;max-height:80%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.lqtx{display:flex;flex-direction:column;gap:7px;min-width:0}
.lqtx b{font-size:17px;line-height:1.25}
.lqm{font-size:14px;color:#E2E1EA;line-height:1.45}
.lqsif{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#ECECF0}
.lqo{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em}
.lqo.kat{background:rgba(174,173,191,.12);color:#ECECF0}
.lqo.sav{background:rgba(214,60,60,.16);color:#FF8A8A}
.lqo.par{background:rgba(242,179,107,.14);color:#F2B36B}
.lqsel{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.lqsel label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#D4D3DE}
.lqsel select{height:38px;padding:0 10px;border-radius:10px;border:1px solid #34343C;background:#141418;color:#ECECF0;font:500 14px 'Barlow',sans-serif}
.lqtags{display:flex;flex-wrap:wrap;gap:6px}
.lqtag{padding:5px 10px;border-radius:999px;border:1px solid #3A3A43;font-size:13px;color:#ECECF0}
.lqact{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.lqq{display:flex;align-items:center;border:1px solid #34343C;border-radius:10px;overflow:hidden}
.lqq button{width:34px;height:34px;border:0;background:#18181C;color:#ECECF0;font-size:17px;cursor:pointer}
.lqq span{min-width:34px;text-align:center;font-weight:700}
.lqrm{border:0;background:none;color:#E6E5EE;text-decoration:underline;font:500 14px 'Barlow',sans-serif;cursor:pointer;padding:0}
.lqsub{margin:4px 0 0;padding:12px 14px;border-radius:14px;background:#141418;border:1px solid #26262C;display:flex;flex-direction:column;gap:10px}
.lqsr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.lqsr b{font-size:15px}
.lqopen{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(242,179,107,.08);border:1px solid rgba(242,179,107,.35);color:#F2D2A8;font-size:14px;line-height:1.45}
.lqfld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#E2E1EA}
.lqfld input,.lqfld textarea{border:1px solid #34343C;background:#0F0F12;color:#ECECF0;border-radius:12px;padding:12px;font:500 16px 'Barlow',sans-serif}
.lqfld input{height:50px}
.lqfld textarea{min-height:92px;resize:vertical}
.lqfld input:focus,.lqfld textarea:focus{outline:none;border-color:#ECECF0}
#lcon[aria-invalid="true"]{border-color:#F2B36B}
.kh{font-size:12.5px;color:#D4D3DE;margin-top:-4px;line-height:1.4}
.kh.kok{color:#5FD08F;font-family:'IBM Plex Mono',monospace;font-size:13px}
.kh.kerr{color:#F2B36B}
.lqcons{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#ECECF0;line-height:1.45}
.lqcons input{width:20px;height:20px;margin-top:1px;accent-color:#D63C3C;flex:none}
.lqsend{min-height:56px;border:0;border-radius:14px;background:#D63C3C;color:#fff;font:700 18px 'Barlow',sans-serif;cursor:pointer;box-shadow:0 14px 34px rgba(214,60,60,.35);display:flex;align-items:center;justify-content:center;gap:10px}
.lqsend:disabled{background:#3A2426;color:#8E6F72;box-shadow:none;cursor:not-allowed}
.lqsum{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:#ECECF0}
.lqsum b{color:#fff}
.lqnote{font-size:12.5px;color:#D4D3DE;line-height:1.5}
.lqsav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;border:1px solid rgba(249,81,81,.45);background:linear-gradient(110deg,rgba(214,60,60,.14),rgba(20,20,24,.6) 60%)}
.lqsav a.b{min-height:46px;padding:0 18px;border-radius:12px;background:#ECECF0;color:#141416;font-weight:700;text-decoration:none;display:flex;align-items:center;white-space:nowrap}
.lqkz{width:46px;height:46px;border-radius:12px;background:#D63C3C;display:flex;align-items:center;justify-content:center}
.lqempty{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:70px 20px}
.lqempty.show{display:flex}
.lqbtn{min-height:48px;padding:0 20px;border-radius:12px;border:1px solid #34343C;color:#ECECF0;text-decoration:none;display:inline-flex;align-items:center;font-weight:600}
.lqbtn.p{background:#D63C3C;border-color:#D63C3C;color:#fff}
.lqok{display:none;max-width:760px;margin:0 auto;padding:70px 32px 110px;flex-direction:column;gap:18px;align-items:flex-start}
.lqok.show{display:flex}
.lqtl{display:flex;flex-direction:column;gap:0;margin-top:8px;border-left:2px solid #2C2C33;padding-left:22px}
.lqtl div{position:relative;padding:0 0 18px}
.lqtl div::before{content:'';position:absolute;left:-29px;top:4px;width:12px;height:12px;border-radius:50%;background:#2C2C33;border:2px solid #0C0C0E}
.lqtl div.dn::before{background:#5FD08F}
.lqtl b{display:block;font-size:16px}
.lqtl span{font-size:14px;color:#E2E1EA}
.lqfacts{display:flex;flex-wrap:wrap;gap:8px}
.lqfacts span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(20,20,24,.7);border:1px solid #2C2C33;font-size:14px;color:#ECECF0}
.lqfacts span::before{content:'';width:6px;height:6px;border-radius:50%;background:#5FD08F}







/* MOBILNI PRIKAZ — početak */
@media (max-width:760px){
  [style*="max-width: 1320px"]{padding-left:16px!important;padding-right:16px!important}
  h1{font-size:46px!important;line-height:.95!important}
  .xb2t{display:none}
  .xb2{width:40px;height:40px}
  .kzb{right:14px!important;bottom:14px!important}
  .kzb svg{width:56px;height:56px}
  .ltoast{left:12px;right:12px;width:auto;top:auto;bottom:86px}
  [style*="padding: 32px 36px"]{padding:22px 16px!important;gap:18px!important}
  [style*="flex: 1 1 460px"]{flex-wrap:wrap!important}
  [style*="flex: 1 1 460px"] > input{flex:1 1 100%!important}
  [style*="flex: 1 1 460px"] > button,[style*="flex: 1 1 460px"] > a{flex:1 1 100%!important;justify-content:center}
}
@media (max-width:760px){
  .lqwrap{grid-template-columns:1fr;padding:18px 16px 60px;gap:16px}
  #lside{position:static!important}
  .lqbox{padding:16px}
  .lqit{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .lqim{width:64px;height:56px}
  .lqim svg{width:30px;height:30px}
  .lqact{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .lqsr{grid-template-columns:1fr;gap:8px}
  .lqsav{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .lqsav a.b{grid-column:1/-1;justify-content:center}
  .lqok{padding:40px 16px 70px}
}
/* MOBILNI PRIKAZ — kraj */
