/* CARS24.ba V97 – samo animacije i 3D efekti. Ne mijenja sadržaj, raspored, boje stranica ni funkcije.
   Ako se ukloni ova datoteka, sajt izgleda tačno kao prije.
   Animacije su uvijek uključene (želja vlasnika), i kad je u sistemu isključeno kretanje. */
:root{
  --c24x-ease-out:cubic-bezier(.23,1,.32,1);
  --c24x-ease-enter:cubic-bezier(.16,1,.3,1);
  --c24x-ease-drawer:cubic-bezier(.32,.72,0,1);
  --c24x-accent:#f5a916;
  --c24x-ring:0 0 0 3px rgba(245,169,22,.26);
  --c24x-lift:0 18px 40px -22px rgba(0,0,0,.75),0 0 0 1px rgba(245,169,22,.28);
}
html[data-c24-theme="light"]{--c24x-lift:0 18px 34px -20px rgba(27,38,49,.28),0 0 0 1px rgba(214,138,4,.35)}
html{-webkit-tap-highlight-color:transparent}

/* 1 · Prijelaz između stranica (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:c24x-page-out 160ms ease-in both}
::view-transition-new(root){animation:c24x-page-in 420ms var(--c24x-ease-enter) both}
@keyframes c24x-page-out{to{opacity:0}}
html.c24x-theme-vt::view-transition-old(root),html.c24x-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
@keyframes c24x-page-in{from{opacity:0;transform:translateY(10px)}}

/* 2 · Sadržaj ulazi kad se pojavi na ekranu (klasu dodaje JS; bez JS sve je vidljivo) */
.c24x-r{opacity:0;transform:perspective(1000px) translateY(48px) rotateX(9deg) scale(.97);transform-origin:50% 100%;transition:opacity 700ms var(--c24x-ease-enter),transform 950ms var(--c24x-ease-enter);transition-delay:var(--c24x-d,0ms)}
.c24x-r.c24x-on{opacity:1;transform:none}

/* 3 · Dugmad: jasan odziv na pritisak */
:is(.btn,button.primary,.c24p-all,.back,.c24-v56-picker-button,.filter-chip,.c24-category-item,.c24-popular__brand,.c24-promo a,.c24-slot a,.actions a,.pill,.pills button,.language-nav a,.language-nav button){transition:transform 160ms var(--c24x-ease-out),background-color .16s,border-color .16s,color .16s,box-shadow .2s}
:is(.btn,button.primary,.c24p-all,.back,.c24-v56-picker-button,.filter-chip,.c24-promo a,.actions a,.pills button,.language-nav a,.language-nav button):active{transform:scale(.97)}
.btn.primary,button.primary{position:relative;overflow:hidden}
.btn.primary::after,button.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover::after,button.primary:hover::after{transform:translateX(120%);transition:transform 700ms var(--c24x-ease-out)}
  .btn.primary:hover,button.primary:hover{box-shadow:0 10px 24px -12px rgba(245,169,22,.75)}
}

/* 4 · Kartice: lagano podizanje (samo miš), pritisak na telefonu */
:is(.card,.c24p-card,.summary-card,.c24-ad-infeed,.document-card,.benefit,.public-ad-card,.c24-promo-card){transition:transform 320ms var(--c24x-ease-out),box-shadow 320ms var(--c24x-ease-out),border-color .2s}
@media (hover:hover) and (pointer:fine){
  :is(.card,.c24p-card,.summary-card):hover{box-shadow:var(--c24x-lift)}
  .c24-category-item:hover,.c24-popular__brand:hover{transform:translateY(-2px)}
  .card .card-img img{transition:transform 900ms var(--c24x-ease-out)}
  .card:hover .card-img img{transform:scale(1.04)}
}
:is(.card,.c24p-card,.c24-category-item,.c24-popular__brand):active{transform:scale(.985)}
.c24-category-item svg{transition:transform 380ms var(--c24x-ease-out),color .16s}
.c24-category-item.is-active svg,.c24-category-item[aria-pressed="true"] svg{transform:scale(1.08)}

/* 5 · Slike: blago pojavljivanje kad se učitaju */
img.c24x-img{opacity:0;transition:opacity 420ms ease}
img.c24x-img.c24x-loaded{opacity:1}

/* 6 · Polja: mekani fokus */
:is(.input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){transition:border-color .16s,box-shadow .2s var(--c24x-ease-out),background-color .16s}
:is(.input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus{box-shadow:var(--c24x-ring)}

/* 7 · Padajući izbornici (jezik, izgled) */
.c24-v56-options:not([hidden]){animation:c24x-pop 200ms var(--c24x-ease-out) both;transform-origin:top right}
@keyframes c24x-pop{from{opacity:0;transform:scale(.95) translateY(-4px)}}
.c24-v56-caret{transition:transform 200ms var(--c24x-ease-out)}
.c24-v56-picker-button[aria-expanded="true"] .c24-v56-caret{transform:rotate(225deg) translateY(-1px)}

/* 9 · Obavijesti i poruke */
.notice.show,.msg:not(:empty),.warn,.caution{animation:c24x-note 520ms var(--c24x-ease-enter) both}
@keyframes c24x-note{from{opacity:0;transform:translateY(-6px)}}

/* 10 · Zaglavlje: blaga sjena kad se stranica pomjeri */
.top,header.top,.mast,header.header{transition:box-shadow .3s,background-color .3s}
html.c24x-scrolled :is(.top,.mast){box-shadow:0 1px 0 rgba(245,169,22,.22),0 10px 30px -18px rgba(0,0,0,.7)}

/* 11 · Vrijeme: živa tačka */
.c24-weather-v54-dot{animation:c24x-live 2.4s ease-in-out infinite}
@keyframes c24x-live{0%,100%{box-shadow:0 0 0 0 rgba(245,169,22,.55)}60%{box-shadow:0 0 0 7px rgba(245,169,22,0)}}

/* 12 · Tabele cijena: red se istakne pod mišem */
@media (hover:hover) and (pointer:fine){
  .data-table tbody tr{transition:background-color .16s}
  .data-table tbody tr:hover{background:rgba(245,169,22,.07)}
}

/* 13 · Ugodniji izgled skrol trake i označenog teksta */
::selection{background:rgba(245,169,22,.35)}

/* 15 · 3D: kartice se lagano naginju prema mišu (samo računar s mišem) */
@media (hover:hover) and (pointer:fine){
  html .c24x-tilt.c24x-tilt{transform:perspective(900px) rotateX(var(--c24x-rx,0deg)) rotateY(var(--c24x-ry,0deg)) translateY(var(--c24x-ty,0px));will-change:transform}
  html .c24x-tilt.c24x-tilting{transition:transform 120ms linear,box-shadow 320ms var(--c24x-ease-out),border-color .2s;box-shadow:var(--c24x-lift)}
}

/* 16 · 3D ulaz glavnog naslova (jednom, pri otvaranju stranice) */
.c24x-hero3d{animation:c24x-hero3d 1300ms var(--c24x-ease-enter) 100ms both;transform-origin:50% 100%}
@keyframes c24x-hero3d{from{opacity:0;transform:perspective(900px) rotateX(48deg) translateY(70px);filter:blur(6px)}}

/* 17 · Odbrojavanje: svaki broj se okrene u 3D kad se promijeni */
.c24-countdown-item{perspective:500px}
.c24-countdown-number{display:inline-block;transform-origin:50% 50%}
.c24-countdown-number.c24x-flip{animation:c24x-flip 560ms var(--c24x-ease-out)}
@keyframes c24x-flip{0%{transform:rotateX(-100deg);opacity:.2;text-shadow:0 0 0 rgba(245,169,22,0)}55%{text-shadow:0 0 18px rgba(245,169,22,.9)}100%{transform:none;opacity:1;text-shadow:0 0 0 rgba(245,169,22,0)}}
.c24-countdown-item{animation:c24x-drop 900ms var(--c24x-ease-enter) backwards}
.c24-countdown-item:nth-child(2){animation-delay:90ms}.c24-countdown-item:nth-child(3){animation-delay:180ms}.c24-countdown-item:nth-child(4){animation-delay:270ms}
@keyframes c24x-drop{from{opacity:0;transform:perspective(600px) rotateY(-70deg) translateX(-20px)}}

/* 18 · Glavna dugmad: odsjaj svjetla prelazi preko dugmeta svakih nekoliko sekundi */
:is(.c24-promo-btn.primary,.c24-early-btn,.c24-v58-btn,.ad-contact-main,.btn.primary,button.primary,.primary-btn){position:relative;overflow:hidden;isolation:isolate}
:is(.c24-promo-btn.primary,.c24-early-btn,.c24-v58-btn,.ad-contact-main,.btn.primary,button.primary,.primary-btn)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none;z-index:1;animation:c24x-shine 4.2s ease-in-out infinite}
@keyframes c24x-shine{0%,62%{left:-60%}100%{left:130%}}
:is(.c24-promo-btn.primary,.c24-early-btn,.c24-v58-btn,.ad-contact-main):active{transform:scale(.96)}

/* 19 · Vrijeme: ikone se blago kreću */
.c24-v58-weather svg{animation:c24x-float 3.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes c24x-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-4deg)}}

/* 20 · Odsjaj na karticama koji prati miš */
.c24x-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity 300ms;background:radial-gradient(420px circle at var(--c24x-gx,50%) var(--c24x-gy,50%),rgba(255,255,255,.16),transparent 45%)}
.c24x-tilting>.c24x-glare{opacity:1}
html[data-c24-theme="light"] .c24x-glare{background:radial-gradient(420px circle at var(--c24x-gx,50%) var(--c24x-gy,50%),rgba(245,169,22,.16),transparent 45%)}

/* 21 · Pozadina: blaga zlatna svjetla koja se polako kreću + fina mreža */
.c24x-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.c24x-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 25%,transparent 75%);animation:c24x-grid 24s linear infinite}
.c24x-bg.light::before{background-image:linear-gradient(rgba(20,35,51,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,35,51,.055) 1px,transparent 1px)}
@keyframes c24x-grid{to{background-position:0 64px,64px 0}}
.c24x-bg i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(245,169,22,.9) 0%,rgba(245,169,22,0) 62%);opacity:.22;animation:c24x-drift 26s ease-in-out infinite alternate;will-change:transform}
.c24x-bg i:nth-child(1){left:-18vmax;top:-26vmax}
.c24x-bg i:nth-child(2){right:-24vmax;top:18vh;opacity:.15;animation-duration:33s;animation-delay:-9s;background:radial-gradient(circle,rgba(255,122,26,.9) 0%,rgba(255,122,26,0) 62%)}
.c24x-bg i:nth-child(3){left:18vw;bottom:-34vmax;opacity:.13;animation-duration:39s;animation-delay:-17s}
.c24x-bg.light i{opacity:.24}
.c24x-bg.light i:nth-child(2){opacity:.16}
.c24x-bg.light i:nth-child(3){opacity:.14}
@keyframes c24x-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.18)}100%{transform:translate3d(-7vw,12vh,0) scale(.88)}}

/* 22 · Telefon: ispravke rasporeda (listing cijena: izbornici u jednom redu; prijava: bez izlaska iz ekrana) */
@media (max-width:600px){
 .auth-layout{grid-template-columns:minmax(0,1fr)!important}
 header>.inner:has(>.header-actions .c24-v582-picker){flex-wrap:wrap;row-gap:10px}
 header>.inner>.header-actions:has(.c24-v582-picker){flex:1 1 100%;min-width:0}
 header>.inner>.header-actions .c24-v582-picker{flex:1 1 0;min-width:0;width:auto!important}
 header>.inner>.header-actions .c24-v582-trigger{width:100%!important;min-width:0}
 header>.inner>.header-actions .c24-v582-selected{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}