/* PREVOZ RADOSAVLJEVIĆ · dodatak: brojke, kviz, pozovite me, galerija trake + priča, ruta po meri, SMS, Viber, kamion koji se puni, finale, dan i noć */

/* brojke */
.brojke{background:var(--asfalt);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.brojke__in{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08)}
@media(min-width:900px){.brojke__in{grid-template-columns:repeat(4,1fr)}}
.broj{background:var(--asfalt);padding:26px 18px 24px;display:grid;gap:8px}
.broj strong{font:900 clamp(64px,9vw,112px)/.85 var(--naslov);display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.broj strong small{font-size:.36em;color:var(--crvena-svetla);text-transform:uppercase;letter-spacing:.04em}
.broj>span{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(250,250,248,.7)}

/* kviz */
.kviz{background:var(--asfalt);color:#fff}
.kviz__in{display:grid;gap:30px;align-items:center}
@media(min-width:960px){.kviz__in{grid-template-columns:5fr 6fr;gap:60px}}
.kviz h2{font-size:clamp(54px,10vw,128px);margin-top:18px}
.kviz__lev p{margin-top:16px;color:rgba(250,250,248,.75);font-size:18px;max-width:28em}
.kviz__kar{background:var(--bela);color:var(--asfalt);border-radius:4px;padding:clamp(18px,3vw,30px);position:relative;overflow:hidden;min-height:400px;display:flex;flex-direction:column}
.kviz__vrh{display:flex;justify-content:space-between;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cerada-t)}
.kviz__traka{height:6px;background:var(--beton);border-radius:3px;margin:12px 0 22px;overflow:hidden}
.kviz__traka i{display:block;height:100%;width:var(--k,0%);background:var(--crvena);transition:width .5s var(--ease)}
.kviz__p{animation:kvizUlaz .45s var(--ease) both}
@keyframes kvizUlaz{from{opacity:0;transform:translateX(30px)}}
.kviz__p h3{font-size:clamp(34px,4.4vw,46px);margin-bottom:18px}
.kviz__op{display:grid;gap:10px}
.kviz__op button{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 16px;border-radius:4px;border:2px solid var(--linija);background:#fff;text-align:left;font-size:17px;font-weight:500;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.kviz__op button:hover{border-color:var(--asfalt)}
.kviz__op button:active{transform:scale(.98)}
.kviz__op button .mono{font-size:12px;color:var(--crvena);min-width:22px}
.kviz__nazad{margin-top:auto;padding-top:16px;align-self:flex-start;background:none;border:0;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cerada-t);cursor:pointer;min-height:44px}
.kviz__rez{text-align:left;display:grid;gap:14px;animation:kvizUlaz .5s var(--ease) both}
.kviz__rez .mono{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cerada-t)}
.kviz__rez h3{font-size:clamp(52px,7vw,84px);color:var(--crvena)}
.kviz__rez p{color:var(--cerada-t);font-size:17px}
.kviz__vozilo{height:90px;position:relative;margin:4px 0 6px;overflow:hidden;border-bottom:4px dashed var(--linija)}
.kviz__vozilo svg{position:absolute;bottom:2px;left:0;height:80px;color:var(--asfalt);animation:kvizKam 1s var(--ease) both}
@keyframes kvizKam{from{transform:translateX(-110%)}}
.kviz__dug{display:grid;gap:10px}
@media(min-width:560px){.kviz__dug{grid-template-columns:1fr 1fr}}
.btn--tamna{background:var(--asfalt);color:#fff}
.btn--tamna:hover{background:#000}

/* pozovite me */
.zovi{background:var(--crvena);color:#fff;padding:clamp(56px,8vw,100px) 0;position:relative;overflow:hidden}
.zovi::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.07) 0 18px,transparent 18px 36px);pointer-events:none}
.zovi__in{position:relative;display:grid;gap:28px;align-items:end}
@media(min-width:960px){.zovi__in{grid-template-columns:1fr 1fr;gap:60px}}
.zovi .km{color:#fff}
.zovi .km b{background:#fff;color:var(--crvena);border-color:#fff}
.zovi h2{font-size:clamp(54px,9vw,120px);margin-top:16px}
.zovi__f{position:relative}
.zovi__f label{display:block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;opacity:.85}
.zovi__red{display:flex;flex-wrap:wrap;gap:10px}
.zovi__red input{flex:1 1 200px;min-height:62px;border:0;border-radius:4px;padding:0 18px;font-size:22px;font-weight:600;background:#fff;color:var(--asfalt)}
.zovi__red .btn{flex:1 1 160px;min-height:62px;background:var(--asfalt);font-size:18px}
.zovi__red .btn:hover{background:#000}
.zovi__g{display:none;margin-top:8px;font-weight:600}
.zovi__f.greska .zovi__g{display:block}
.zovi__f.greska input{box-shadow:0 0 0 3px var(--asfalt)}
.zovi__nap{margin-top:10px;font-size:14px;opacity:.85}
.zovi__pecat{position:absolute;right:6px;top:-30px;border:4px solid #fff;color:#fff;font:900 30px/1 var(--naslov);padding:10px 14px 8px;border-radius:5px;text-transform:uppercase;transform:rotate(-9deg) scale(2.6);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.5,1.8,.4,1),opacity .2s;background:var(--crvena)}
.zovi__f.poslato .zovi__pecat{transform:rotate(-9deg) scale(1);opacity:1}

/* galerija: trake koje se šire */
.harm{display:flex;flex-direction:column;gap:8px;height:clamp(560px,150vw,720px)}
@media(min-width:760px){.harm{flex-direction:row;height:clamp(400px,58vh,580px)}}
.harm__k{position:relative;flex:1 1 0;min-width:0;min-height:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:#2b2e30;cursor:zoom-in;transition:flex-grow .6s var(--ease)}
.harm__k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7) contrast(1.05);transition:filter .5s,transform .8s var(--ease);transform:scale(1.06)}
.harm__k[data-aktivna]{flex-grow:5}
.harm__k[data-aktivna] img{filter:none;transform:none}
@media(hover:hover) and (min-width:760px){
  .harm:hover .harm__k[data-aktivna]:not(:hover){flex-grow:1}
  .harm:hover .harm__k[data-aktivna]:not(:hover) img{filter:grayscale(1) brightness(.7) contrast(1.05);transform:scale(1.06)}
  .harm__k:hover{flex-grow:5}
  .harm__k:hover img{filter:none;transform:none}
  .harm__k:hover .harm__opis{opacity:1;transform:none;transition-delay:.2s}
}
.harm__br{position:absolute;top:10px;left:10px;font:500 12px/1 var(--mono);background:var(--asfalt);color:#fff;padding:6px 8px;border-radius:3px;letter-spacing:.06em}
.harm__opis{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 12px;border-radius:4px;background:rgba(30,32,34,.88);color:#fff;font:500 12.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.harm__opis b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.harm__opis span{color:#ff9aa3}
.harm__k[data-aktivna] .harm__opis{opacity:1;transform:none;transition-delay:.2s}
.harm__k{opacity:0;transform:translateY(40px)}
.harm.vid .harm__k{opacity:1;transform:none;transition:flex-grow .6s var(--ease),opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.harm__dno{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:18px}
.harm__savet{color:rgba(250,250,248,.7);font-size:15px;max-width:30em}
.harm__dno .btn{color:#fff}

/* priča */
.prica{width:min(440px,100vw);height:min(820px,100dvh);max-width:100vw;max-height:100dvh;padding:0;border:0;border-radius:14px;background:#000;color:#fff;overflow:hidden}
@media(max-width:560px){.prica{border-radius:0;width:100vw;height:100dvh}}
.prica::backdrop{background:rgba(10,11,12,.92)}
.prica[open]{display:block;animation:pricaUlaz .35s var(--ease)}
@keyframes pricaUlaz{from{opacity:0;transform:scale(.94)}}
.prica img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pricaZum 4.2s linear both}
@keyframes pricaZum{from{transform:scale(1.12)}to{transform:scale(1)}}
.prica::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 22%,transparent 70%,rgba(0,0,0,.75));pointer-events:none}
.prica__trake{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.prica__trake i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.prica__trake i b{display:block;height:100%;width:0;background:#fff}
.prica__trake i.gotova b{width:100%}
.prica__trake i.tece b{animation:pricaTece 4.2s linear forwards}
@keyframes pricaTece{to{width:100%}}
.prica__vrh{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3}
.prica__vrh strong{display:block;font-size:15px}
.prica__vrh span#pricaOpis{font:500 12px var(--mono);opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.prica__x{margin-left:auto;width:46px;height:46px;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.prica__l,.prica__d{position:absolute;top:80px;bottom:100px;width:40%;border:0;background:transparent;z-index:2;cursor:pointer}
.prica__l{left:0}.prica__d{right:0}
.prica__cta{position:absolute;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;min-height:58px}

/* ruta po meri */
.ruta{margin-top:24px;display:grid;gap:10px}
.ruta label{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cerada-t)}
.ruta__red{display:flex;flex-wrap:wrap;gap:10px}
.ruta__red input{flex:1 1 180px;min-height:56px;border:2px solid var(--linija);border-radius:4px;background:#fff;padding:0 14px;font-size:18px}
.ruta__red input:focus{outline:none;border-color:var(--asfalt)}
.ruta__red .btn{flex:0 0 auto}
.ruta__rez{display:grid;gap:12px}
.ruta__rez:empty{display:none}
.ruta__rez p{font-size:18px}
.ruta__rez strong{font-family:var(--naslov);font-size:1.6em;text-transform:uppercase;color:var(--crvena);line-height:1}
.ruta__rez .btn{justify-self:start}
.mapa .moja{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:mojaR 1.2s var(--ease) forwards;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
@keyframes mojaR{to{stroke-dashoffset:0}}
.mapa .moja-t{fill:#fff;animation:mojaT .4s 1.1s both}
.mapa .moja-ime{fill:#fff;font:900 26px var(--naslov);letter-spacing:1px;text-transform:uppercase;animation:mojaT .4s 1.2s both}
@keyframes mojaT{from{opacity:0}}

/* Viber */
.kon__vib{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:4px;background:#7360f2;color:#fff;font-weight:600;text-decoration:none}
.kon__vib svg{width:22px;height:22px}
.tl__dug{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 280px}
.tl__dug .btn{flex:1 1 140px}

/* kamion koji se puni */
.mini{position:fixed;right:14px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 8px 6px;border-radius:6px;background:rgba(30,32,34,.92);color:var(--crvena-svetla);text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.mini.na{opacity:1;transform:none;pointer-events:auto}
@media(min-width:1000px){.mini{bottom:24px;right:24px}}
.mini svg{width:76px;height:43px;overflow:visible}
.mini__pr{fill:none;stroke:rgba(250,250,248,.35);stroke-width:1.5;stroke-dasharray:3 2}
.mini__k rect{fill:#E4E6E5;stroke:#1E2022;stroke-width:.8;transform-box:fill-box;transform-origin:50% 100%;animation:kutija .35s cubic-bezier(.5,1.6,.4,1) both}
@keyframes kutija{from{transform:translateY(-14px) scale(.6);opacity:0}}
.mini__p{font:500 10.5px/1 var(--mono);color:#fff;letter-spacing:.06em}
@media(max-width:999px){.mini{padding:6px 6px 4px;right:10px}.mini svg{width:58px;height:33px}.mini__p{font-size:9.5px}}

/* finale */
.fin{padding:0 0 60px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:60px}
.fin__in{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.fin__in{grid-template-columns:1fr 1fr}}
.fin h2{font-size:clamp(56px,10vw,132px);margin:16px 0 26px}
.fin h2 span{color:var(--crvena-svetla)}
.fin__kam{color:var(--crvena-svetla);overflow:hidden;padding-bottom:4px}
.fin__kam svg{width:100%;max-width:560px;display:block;overflow:visible}
.fin__cer{fill:var(--crvena);transform-origin:50% 0;transform:scaleY(0);transition:transform .9s var(--ease) .9s}
.fin.vid .fin__cer{transform:scaleY(1)}
.fin__kutije rect{fill:#E4E6E5;stroke:#1E2022;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.fin.vid .fin__kutije rect{animation:kutija .4s cubic-bezier(.5,1.6,.4,1) both;animation-delay:var(--d);opacity:1}
.fin.vid .fin__kam svg{animation:finKreni 3.2s cubic-bezier(.6,0,.4,1) 2.3s both}
@keyframes finKreni{0%{transform:none}8%{transform:translateX(-12px)}45%{transform:translateX(130%)}45.1%{transform:translateX(-130%)}100%{transform:none}}

/* dan i noć */
.far{fill:rgba(255,236,170,.0);transition:fill .6s;pointer-events:none}
html.noc .far{fill:rgba(255,236,170,.32)}
html.noc .fin__kam .far,html.noc .ikam .far,html.noc .fut__kam .far{filter:blur(3px)}
html.noc .mapa .rt{filter:drop-shadow(0 0 5px rgba(224,72,86,.9))}
html.noc .mapa .tac{filter:drop-shadow(0 0 6px #fff)}
html.noc .hero__foto img{filter:brightness(.82) saturate(.9)}
.noc-oz{display:none}
html.noc .noc-oz{display:inline-flex;align-items:center;gap:8px}
.ikam,.fut__kam{overflow:visible}

@media (prefers-reduced-motion:reduce){
  .harm__k{opacity:1;transform:none}
  .fin__cer{transform:none}
  .fin__kutije rect{opacity:1}
}