/* Strana Reference: projekti u okviru računara i telefona, filter, uvećan prikaz i prikaz aplikacije (03.11.2026). */
.ref-hero{padding-bottom:28px}
.ref-hero h1{max-width:16ch}
.filt{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.filt button{font:600 14px "Montserrat",sans-serif;color:var(--mut2);background:transparent;border:1px solid var(--line);border-radius:40px;padding:10px 17px;cursor:pointer;transition:.25s}
.filt button:hover{color:var(--fg);border-color:rgba(232,183,100,.5)}
.filt button.on{background:var(--acc);border-color:var(--acc);color:#0A0E13}

.radovi{padding-bottom:30px}
.pr{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line);transition:opacity .45s,transform .45s}
.pr:nth-of-type(even) .pr__txt{order:2}
.pr.skriven,.app.skriven{display:none}
.pr__br{font:700 clamp(54px,7vw,92px)/.9 "Space Grotesk",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);margin-bottom:14px}
.tagovi{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tagovi span{font:700 11px "Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent);border-radius:30px;padding:6px 10px}
.pr h2{margin-bottom:6px}
.pr .gde{font:600 13px "Montserrat",sans-serif;color:var(--acc);margin-bottom:14px}
.pr .btns{margin-top:24px}
.pr .btn{border:0;cursor:pointer}
.pr .btn--g{background:transparent;border:1px solid var(--line);color:var(--fg)}

/* scena sa uređajima */
.sc{position:relative;perspective:1400px;transform-style:preserve-3d;min-height:200px}
.sc:before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),transparent);filter:blur(40px);z-index:0;pointer-events:none}
.sc>*{position:relative;z-index:1}
.sc [data-t]{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pc{background:#11161d;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pc__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#161c24;border-bottom:1px solid rgba(255,255,255,.06)}
.pc__bar i{width:10px;height:10px;border-radius:50%;background:#2a313b}
.pc__bar i:nth-child(1){background:#ff5f57}.pc__bar i:nth-child(2){background:#febc2e}.pc__bar i:nth-child(3){background:#28c840}
.pc__bar span{margin-inline-start:12px;flex:1;max-width:260px;font:500 12px "Inter",sans-serif;color:var(--mut);background:#0d1117;border-radius:6px;padding:4px 10px;direction:ltr;text-align:start}
.pc__ekran{display:block;position:relative;width:100%;aspect-ratio:16/10;padding:0;border:0;background:#0b0f14;cursor:zoom-in;overflow:hidden}
.pc__ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 4s ease}
.pc__ekran img.on{opacity:1;transform:scale(1)}
.pc__tacke{position:absolute;bottom:12px;inset-inline-start:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
[dir=rtl] .pc__tacke{transform:translateX(50%)}
.pc__tacke button{width:22px;height:4px;border-radius:4px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:.3s}
.pc__tacke button.on{background:var(--c);width:34px}
.pc{position:relative}
.tel{position:absolute;width:23%;min-width:110px;aspect-ratio:390/844;bottom:-9%;inset-inline-end:-3%;border-radius:26px;padding:7px;background:#0d1117;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:3}
.tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;display:block}
.tel:before{content:"";position:absolute;top:13px;left:50%;width:30%;height:8px;transform:translateX(-50%);background:#0d1117;border-radius:10px;z-index:2}

/* brending */
.sc--brand{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:16/11}
.br{border-radius:18px;overflow:hidden;cursor:zoom-in;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.br:hover{transform:translateY(-4px)}
.br img{width:100%;height:100%;object-fit:cover;display:block}
.br--zel{grid-row:1/3;background:#1A3022}
.br--krem{background:#F3EBDD;padding:10%}
.br--krem img{object-fit:contain}
.br--viz{background:#1A3022}

/* katalog */
.sc--kat{aspect-ratio:16/11}
.kat{position:absolute;border-radius:6px;overflow:hidden;cursor:zoom-in;box-shadow:0 30px 60px -25px rgba(0,0,0,.85);transition:transform .5s cubic-bezier(.2,.7,.2,1);background:#fff}
.kat img{display:block;width:100%;height:100%;object-fit:cover}
.kat--a{width:70%;top:2%;inset-inline-start:0;aspect-ratio:1280/906;transform:rotate(-3deg)}
.kat--b{width:70%;bottom:2%;inset-inline-end:0;aspect-ratio:1280/906;transform:rotate(2deg)}
.kat--c{width:30%;top:12%;inset-inline-end:4%;aspect-ratio:640/906;transform:rotate(5deg);z-index:2}
.kat:hover{transform:rotate(0) scale(1.03);z-index:4}
.znak{position:absolute;bottom:6%;inset-inline-start:4%;z-index:5;font:700 13px "Montserrat",sans-serif;letter-spacing:.14em;background:var(--c);color:#fff;border-radius:30px;padding:8px 14px;direction:ltr}

/* aplikacija */
.app{padding:clamp(56px,7vw,100px) 0;margin:0 calc(-1 * var(--pad));padding-inline:var(--pad);background:linear-gradient(180deg,rgba(61,220,74,.06),transparent 60%),var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);--c:#3DDC4A}
.app>.wrap{padding:0}
.app h2{margin-top:12px}
.app__mreza{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(30px,5vw,70px);align-items:start;margin-top:40px}
.app__tel{position:sticky;top:92px;text-align:center}
.app__tel small{display:block;margin-top:14px;color:var(--mut);font-size:12.5px}
.tel--vel{position:relative;width:100%;min-width:0;bottom:auto;inset-inline-end:auto;border-radius:44px;padding:10px;box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(61,220,74,.15),0 0 80px -20px rgba(61,220,74,.25)}
.tel--vel img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:34px;opacity:0;transition:opacity .6s ease}
.tel--vel img.on{opacity:1}
.tel--vel:before{top:20px;height:12px}
.app__koraci h3{font:700 12px "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin:6px 0 12px}
.app__koraci h3:not(:first-child){margin-top:28px}
.korak{position:relative;display:flex;gap:16px;width:100%;text-align:start;background:transparent;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:10px;color:var(--fg);cursor:pointer;overflow:hidden;transition:.3s;font:inherit}
.korak:hover{border-color:rgba(255,255,255,.2)}
.korak.on{background:var(--bg3);border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.korak b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px "Montserrat",sans-serif;background:rgba(255,255,255,.06);color:var(--mut2);transition:.3s}
.korak.on b{background:var(--c);color:#06210b}
.korak strong{display:block;font:600 17px "Space Grotesk",sans-serif;margin-bottom:3px}
.korak em{font-style:normal;color:var(--mut2);font-size:15px;line-height:1.55}
.korak .traka{position:absolute;bottom:0;inset-inline-start:0;height:2px;width:0;background:var(--c)}
.korak.on .traka{animation:traka 5s linear forwards}
.app.pauza .korak.on .traka{animation-play-state:paused}
@keyframes traka{to{width:100%}}
.app__fh{margin-top:56px;font-size:22px}
.funk{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:16px}
.fn{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.fn b{font:700 13px "Montserrat",sans-serif;color:var(--c)}
.fn p{margin-top:8px;font-size:15px;line-height:1.55}

/* logotipi */
.lg__h{text-align:center}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:28px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.lg{background:var(--bg);display:grid;place-items:center;padding:28px 18px;transition:background .3s}
.lg img{max-width:120px;max-height:52px;object-fit:contain;opacity:.62;transition:opacity .3s,transform .3s}
.lg:hover{background:var(--bg2)}
.lg:hover img{opacity:1;transform:scale(1.05)}

/* uvećan prikaz */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(5,7,10,.94);display:none;align-items:center;justify-content:center}
.lb[open]{display:flex}
.lb img{max-width:min(92vw,1400px);max-height:86vh;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.lb button{position:absolute;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);width:48px;height:48px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.16)}
.lb__x{top:20px;inset-inline-end:20px}
.lb__p{inset-inline-start:20px;top:50%;margin-top:-24px}
.lb__n{inset-inline-end:20px;top:50%;margin-top:-24px}
[dir=rtl] .lb__p,[dir=rtl] .lb__n{transform:scaleX(-1)}

/* pojavljivanje pri skrolovanju */
.rv{opacity:0;transform:translateY(34px)}
.rv.vid{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.pc__ekran img{transition:opacity .3s}.korak.on .traka{animation:none;width:100%}}

@media(max-width:900px){
 .pr{grid-template-columns:1fr;gap:30px}
 .pr:nth-of-type(even) .pr__txt{order:0}
 .sc{margin-bottom:24px}
 .tel:not(.tel--vel){width:26%;bottom:-12%;inset-inline-end:-1%}
 .app__mreza{grid-template-columns:1fr}
 .app__tel{position:relative;top:0;max-width:290px;margin:0 auto}
 .logos{grid-template-columns:repeat(2,1fr)}
}
html[dir=rtl] .tagovi span,html[dir=rtl] .korak strong,html[dir=rtl] .filt button,html[dir=rtl] .app__koraci h3,html[dir=rtl] .pr .gde,html[dir=rtl] .znak{font-family:"Noto Kufi Arabic","Montserrat",sans-serif;letter-spacing:0}
.app{border-radius:28px;border:1px solid var(--line)}
@media(max-width:900px){.app{border-radius:0;border-inline:0}}
/* aplikacija bez posebne pozadine, kao sekcije na naslovnoj */
.app{background:transparent;border-radius:0;border-inline:0;margin:0;padding-inline:0}