/* ══════════════════════════════════════════════════════════════════════════
   LAKER DETAILING — POČETNA STRANA
   Učitava se SAMO na `/`. Zajednički deo je u laker.css i ide pre ovog fajla.
   Izvučeno iz <style> bloka u index.html (renoviranje, faza 1).
   U fazi 5 su odavde iseljena pravila za pakete, Loyalty, cenovnik i modal za
   prijavu — sada su u cenovnik.css. Sekcije #proc, #srv i #book su obrisane.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sekcije se skrivaju iz CSS-a, ne iz JS-a — pre je klasu `.reveal` dodavala
   inline skripta pri dnu <body>. Specifičnost je namerno najniža moguća
   (html:where(.js-ready) = 0,0,1) da bi ostala pravila bila jača.
   Kašnjenje po elementu (--reveal-delay) i klasu `.in` postavlja laker-ui.js. */
html:where(.js-ready) :where(#phi .sl,#phi .sh,#phi .sd,#phi .pv,#cs .sl,#cs .sh,.faq-item){
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
@media (prefers-reduced-motion: reduce){
  html:where(.js-ready) :where(#phi .sl,#phi .sh,#phi .sd,#phi .pv,#cs .sl,#cs .sh,.faq-item){
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

body.light .hbg-img img{filter:brightness(.5) saturate(.75)}
body.light .hbg-ov{background:linear-gradient(to bottom,rgba(244,242,238,.25) 0%,rgba(244,242,238,.2) 40%,rgba(244,242,238,.75) 75%,var(--black) 100%)}
/* hero fotka je uvek tamna — tekst preko nje ostaje svetao i u light temi */
body.light .he-h1{color:#F4F4F4}
body.light .he-sub{color:#C4C4C4}
body.light .faq-item{border-color:rgba(0,0,0,.08)}
@media(hover:none){
  /* Reset cursor:none so touch devices (Brave, iOS, PWA) register taps correctly */
  .faq-q{
    cursor:pointer!important;
    touch-action:manipulation
  }}

/* HERO */
#hero{height:100vh;min-height:100svh;min-height:100dvh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hbg-img{position:absolute;inset:0}
.hbg-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:brightness(.45) saturate(.8)}
.hbg-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,8,.2) 0%,rgba(8,8,8,.15) 40%,rgba(8,8,8,.7) 75%,var(--black) 100%)}
.hc{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 30px}
.he-eyebrow{display:inline-flex;align-items:center;gap:18px;margin-bottom:44px;opacity:0;animation:fup .9s .3s forwards}
.he-line{width:45px;height:1px;background:var(--gold)}
.he-txt{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);font-weight:500}
.he-h1{font-family:var(--serif);font-size:clamp(34px,4.5vw,64px);font-weight:300;line-height:.9;letter-spacing:-3px;margin-bottom:28px;opacity:0;animation:fup .9s .5s forwards;text-wrap:balance}
.he-h1 em{font-style:italic;color:var(--gold);display:block}
.he-sub{font-size:12px;letter-spacing:6px;text-transform:uppercase;color:var(--mgray);margin-bottom:56px;opacity:0;animation:fup .9s .7s forwards;font-weight:300}
.he-cta{opacity:0;animation:fup .9s .9s forwards;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.he-scroll{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;opacity:0;animation:fup .9s 1.4s forwards}
.hs-line{width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,42,42,0),var(--gold));animation:sc 2s infinite}
.hs-t{font-size:8.5px;letter-spacing:4px;text-transform:uppercase;color:var(--gray)}
@keyframes sc{0%,100%{opacity:.4;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}
@keyframes fup{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}

/* MARQUEE */
.mq{background:var(--gold);padding:16px 0;overflow:hidden;position:relative;z-index:1;transform:translateZ(0);-webkit-transform:translateZ(0);clip-path:inset(0);width:100%;max-width:100vw;contain:layout paint}
.mq-t{display:flex;animation:mqs 25s linear infinite;will-change:transform}
.mq-t.paused{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq-t{animation-play-state:paused}}
.mq-i{font-size:10.5px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--black);padding:0 44px;display:flex;align-items:center;gap:22px;white-space:nowrap}
.mq-d{width:3px;height:3px;background:rgba(0,0,0,.35);border-radius:50%;flex-shrink:0}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* PHILOSOPHY */
#phi{background:var(--black)}
.phi-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}
/* Logo je providan PNG/WebP — bez pozadine i bez filtera, da se ne vidi
   pravougaonik oko njega ni razlika u tonu prema pozadini sekcije.
   Obe teme koriste isti kadar i istu veličinu; razlikuje ih samo boja u fajlu. */
.phi-left .phi-img{position:relative;height:620px;display:flex;align-items:center;justify-content:center}
.phi-img picture{display:block;width:100%;height:100%}
.phi-img img{width:100%;height:100%;object-fit:contain;transition:transform .9s ease}
.phi-img:hover img{transform:scale(1.04)}
/* selektori moraju biti bar iste specifičnosti kao `.phi-left .phi-img` iznad,
   inače display:flex odatle nadjača skrivanje i obe varijante se prikažu */
.phi-left .phi-img-light{display:none}
body.light .phi-left .phi-img-dark{display:none}
body.light .phi-left .phi-img-light{display:flex}
.phi-vals{display:flex;flex-direction:column;gap:0;margin-top:52px}
.pv{display:flex;gap:26px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.light .pv{border-bottom-color:rgba(0,0,0,.06)}
.pv:first-child{border-top:1px solid rgba(255,255,255,.06)}
body.light .pv:first-child{border-top-color:rgba(0,0,0,.06)}
.pv-n{font-family:var(--serif);font-size:52px;font-weight:300;color:rgba(255,42,42,.15);line-height:1;flex-shrink:0;width:52px;font-style:italic}
.pv-t h3{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:9px}
.pv-t p{font-size:13.5px;color:var(--mgray);line-height:1.75;font-weight:300}

/* CASE STUDIES */
#cs{background:var(--d1)}
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px}
/* ── GALERIJA — IZLOG ─────────────────────────────────────────────
   Jedna velika slika + slicice ispod. Okvir NEMA svoju podlogu ni ivicu:
   njegov odnos JESTE odnos same slike, pa oko slike nema nimalo praznine —
   vidi se cista pozadina sajta.

   --arn = sirina/visina slike, kao BROJ. Za prvu sliku ga upisuje
   tools-galerija.js pravo u markup (da okvir ima tacnu visinu i pre nego sto
   se JS ucita, bez poskakivanja rasporeda), dalje ga menja main.js pri svakoj
   promeni slike.

   VISINA je ista za sve slike, menja se samo SIRINA — zato se slicice ispod
   i ostatak stranice NE pomeraju kad se prelazi kroz slike. Visina je manje od:
   78vh, 700px i visine koju bi slika imala na punoj raspolozivoj sirini
   (900px okvir, ili sirina ekrana minus padding sekcije + rezerva za skrolbar).
   Na telefonu je to nemoguce — slika je vec preko cele sirine, pa tamo visina
   prati sliku (vidi @media max-width:768px).

   Markup izmedju markera galerije pise tools-galerija.js.
   Ponasanje je u main.js, blok "GALERIJA — IZLOG". */
.cs-grid{display:block}
.izl{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.izl-frame{position:relative;overflow:hidden;margin:0 auto;width:auto;max-width:100%;
  aspect-ratio:var(--arn,1.3333);
  height:min(78vh, 700px, calc(min(900px, 100vw - 160px) / var(--arn,1.3333)))}
.izl-slides{position:absolute;inset:0}
/* visibility, ne display:none — tako se i neaktivne slike ucitaju unapred,
   pa je prelaz izmedju njih trenutan */
.izl-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.izl-slide.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.izl-slide img{width:100%;height:100%;object-fit:contain;display:block}
/* ceo okvir je dugme: klik otvara pregled preko celog ekrana */
.izl-open{position:absolute;inset:0;z-index:2;background:none;border:none;padding:0;cursor:none;-webkit-tap-highlight-color:transparent}
.izl-zoom{position:absolute;top:14px;right:14px;z-index:4;pointer-events:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:13px;line-height:1;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.izl-frame:hover .izl-zoom,.izl-open:focus-visible~.izl-zoom{opacity:1;transform:none}
.izl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:18px;line-height:1;cursor:none;font-family:var(--sans);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .3s,border-color .3s}
.izl-nav:hover{background:var(--gold);border-color:var(--gold)}
.izl-prev{left:16px}
.izl-next{right:16px}
.izl-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:64px 22px 16px;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.45) 42%,transparent);font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:#E6E3DE;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.izl-cap-t{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.izl-num{flex-shrink:0;color:#B9B5B0;font-variant-numeric:tabular-nums;letter-spacing:1.5px}
/* width:fit-content + margin:auto — slicice su centrirane dok staju u red, a
   kad ih bude previse traka se skroluje bez secenja prve (justify-content
   :center bi u tom slucaju odsekao pocetak trake) */
.izl-strip{position:relative;display:flex;gap:10px;width:fit-content;max-width:100%;margin:0 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.izl-strip::-webkit-scrollbar{display:none}
.izl-thumb{flex:0 0 auto;width:118px;aspect-ratio:1/1;position:relative;overflow:hidden;border:none;padding:0;background:var(--d3);cursor:none;opacity:.42;transition:opacity .3s}
.izl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.izl-thumb::after{content:'';position:absolute;inset:0;border:2px solid transparent;transition:border-color .3s}
.izl-thumb:hover{opacity:.8}
.izl-thumb.on{opacity:1}
.izl-thumb.on::after{border-color:var(--gold)}
@media(hover:none){.izl-zoom{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.izl-slide,.izl-slide.on{transition:none}}

/* ── PREGLED SLIKE PREKO CELOG EKRANA ───────────────────────────────
   Namerno BEZ backdrop-filter-a: zamucenje preko celog ekrana je bas ono sto
   je pravilo seckanje misa na 144Hz (vidi "Performanse" u CLAUDE.md). Ovde je
   pozadina skoro neprozirna, pa se iza ionako nista ne nazire. */
.gv{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(3,3,3,.988);touch-action:pan-y}
.gv.open{display:flex}
.gv-img{max-width:calc(100vw - 104px);max-height:calc(100vh - 132px);width:auto;height:auto;object-fit:contain;box-shadow:0 40px 110px rgba(0,0,0,.85);user-select:none;-webkit-user-drag:none}
.gv-x{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#F4F4F4;font-size:17px;line-height:1;cursor:none;font-family:var(--sans);transition:background .3s,border-color .3s}
.gv-x:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.gv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#F4F4F4;font-size:19px;line-height:1;cursor:none;font-family:var(--sans);transition:background .3s,border-color .3s}
.gv-nav:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.gv-prev{left:18px}
.gv-next{right:18px}
.gv-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px calc(20px + env(safe-area-inset-bottom));font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:#8A8A8A}
.gv-cap{color:#C4C4C4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-num{flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:1.5px}

/* FAQ */
#faq{background:var(--black)}
.faq-layout{display:grid;grid-template-columns:420px 1fr;gap:100px;align-items:start}
.faq-sticky{position:sticky;top:130px}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
body.light .faq-item{border-bottom-color:rgba(0,0,0,.08)}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,.06)}
body.light .faq-item:first-child{border-top-color:rgba(0,0,0,.08)}
.faq-q{width:100%;background:none;border:none;color:var(--white);font-family:var(--sans);font-size:15px;font-weight:500;text-align:left;padding:26px 0;cursor:none;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .3s;line-height:1.4}
.faq-q:hover{color:var(--gold)}
.faq-icon{width:28px;height:28px;border:1px solid rgba(255,42,42,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;color:var(--gold);transition:all .35s;line-height:1}
.faq-item.open .faq-icon{background:var(--gold);color:var(--black);border-color:var(--gold);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease,padding .35s}
.faq-a-inner{padding:0 0 26px 0;font-size:14px;color:var(--mgray);line-height:1.85;font-weight:300}
.faq-item.open .faq-a{max-height:340px}

/* TESTIMONIALS */

/* LOKACIJA / MAPA */
#loc{background:var(--d1);padding:120px 70px}
.loc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;max-width:1220px;margin:0 auto}
.loc-info .sd{max-width:none}
.loc-meta{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.loc-item{display:grid;grid-template-columns:106px 1fr;gap:18px;align-items:start}
.loc-k{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:700;padding-top:4px}
.loc-v{font-size:14px;color:var(--lgray);line-height:1.75;font-weight:300}
.loc-v a{color:inherit;text-decoration:none;transition:color .3s}
.loc-v a:hover{color:var(--gold)}
.loc-v small{display:block;font-size:12.5px;color:var(--gray);margin-top:3px}
.loc-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:42px}
.loc-btn{display:inline-flex;align-items:center;gap:11px;padding:16px 32px;font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;transition:all .35s;cursor:none;border:1px solid transparent}
.loc-btn.pri{background:var(--gold);color:#fff}
.loc-btn.pri:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 18px 48px rgba(255,42,42,.25)}
.loc-btn.sec{color:var(--white);border-color:rgba(255,255,255,.14)}
body.light .loc-btn.sec{border-color:rgba(0,0,0,.12)}
.loc-btn.sec:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.loc-map{position:relative;aspect-ratio:4/3;background:var(--d3);border:1px solid rgba(255,255,255,.08);overflow:hidden}
body.light .loc-map{border-color:rgba(0,0,0,.08)}
/* mapa je namerno neinteraktivna — ceo blok je link ka Google Mapama, pa scroll strane ne upada u mapu */
/* BEZ transition na filteru: Chrome na Maps iframe-u zaglavi CSSTransition na currentTime 0
   i mapa zauvek ostane u tamnoj varijanti posle prebacivanja na svetlu temu. */
.loc-map iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;filter:invert(92%) hue-rotate(180deg) brightness(.94) contrast(.92)}
body.light .loc-map iframe{filter:none}
/* sopstveni marker: Google embed prikazuje svoj pin nedosledno (isti URL nekad da, nekad ne),
   pa mapa ide bez pretrage (ll=) i pin crtamo sami — uvek tu i u brend boji */
.loc-pin{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,42,42,.22),0 3px 14px rgba(0,0,0,.55);pointer-events:none;z-index:2}
.loc-pin::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,42,42,.55);animation:locPulse 2.8s ease-out infinite}
@keyframes locPulse{0%{transform:scale(.65);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.loc-pin::after{animation:none}}
.loc-hit{position:absolute;inset:0;z-index:3;display:block}
/* hint stoji GORE desno — dole je Google atribucija koja ne sme da se prekriva */
.loc-hit::after{content:'Otvori u Google Mapama ↗';position:absolute;right:14px;top:14px;padding:10px 17px;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;white-space:nowrap;background:rgba(8,8,8,.85);color:var(--white);border:1px solid rgba(255,255,255,.13);opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
body.light .loc-hit::after{background:rgba(244,242,238,.92);border-color:rgba(0,0,0,.1)}
.loc-map:hover .loc-hit::after{opacity:1;transform:none}
@media(hover:none){.loc-hit::after{opacity:1;transform:none}}
.faq-q{
  border-radius:3px;
}
.faq-item{
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.05);
}
.faq-item{
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.faq-item:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 80px rgba(0,0,0,.32);
}
.rm-box,#reviewModal{
  backdrop-filter:blur(16px) saturate(1.05);
}
/* ── UKRASNE ANIMACIJE SE PAUZIRAJU KAD IH NIKO NE GLEDA ──────────────────
   Modali preko celog ekrana imaju backdrop-filter (zamucenje). Dok se BILO STA
   iza njih pomera, Chrome mora ponovo da izracuna zamucenje CELOG ekrana u
   svakom frejmu. Na 144Hz monitoru to je bilo vidljivo seckanje misa dok je
   "Prijava" otvorena. Kad se pozadina smiri, zamucenje se izracuna jednom.
   Izgled se ne menja: sve ovo je ionako iza zamucenja, ili van ekrana.
   Mereno na zivom sajtu (1924x915, 144Hz), modal otvoren:
     pre  — 135.0 fps, najduzi frejm 34.8 ms, 1 preskocen frejm
     posle — 144.0 fps, najduzi frejm  7.1 ms, 0 preskocenih
   Klase postavlja main.js (blok "MIROVANJE UKRASNIH ANIMACIJA").
   .mq-t vec ima isti obrazac preko .paused — ovde se samo prosiruje. */
.anim-pauza,.anim-pauza::after{animation-play-state:paused}
body.bg-freeze .hs-line,body.bg-freeze .mq-t,body.bg-freeze .loc-pin::after{animation-play-state:paused}
.faq-q{
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.faq-q:hover{
  transform:translateY(-2px);
}
.he-h1{
  text-wrap:balance;
}

/* RESPONSIVE */
@media(max-width:1100px){
  /* padding sekcije je ovde 30px, ne 70px — pa okvir galerije sme da bude siri */
  .izl-frame{height:min(78vh, 700px, calc(min(900px, 100vw - 80px) / var(--arn,1.3333)))}
  .phi-grid,.faq-layout{grid-template-columns:1fr;gap:50px}
  .faq-sticky{position:static}
  #loc{padding:80px 30px}
  .loc-grid{grid-template-columns:1fr;gap:46px}
  .loc-map{aspect-ratio:1/1}}
@media(max-width:768px){
  .hc{padding:0 18px;max-width:100%}
  .he-eyebrow{gap:10px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}
  .he-line{width:24px}
  .he-txt{font-size:8.5px;letter-spacing:3px;line-height:1.4;text-align:center}
  .he-h1{font-size:clamp(21px,8vw,36px);letter-spacing:-1.8px;line-height:.92;margin-bottom:18px;max-width:10ch;margin-left:auto;margin-right:auto}
  .he-sub{font-size:9px;letter-spacing:3px;line-height:1.7;margin-bottom:24px;max-width:24ch;margin-left:auto;margin-right:auto}
  .he-cta{flex-direction:column;gap:10px;width:min(100%,320px);margin:0 auto}
  .he-scroll{bottom:18px}
  .hs-line{height:34px}
  .hs-t{font-size:7.5px;letter-spacing:3px}
  .cs-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px}
  .cs-head p{text-align:left!important;max-width:100%!important}
  .izl{gap:12px}
  /* Telefon: slika je vec preko cele sirine, pa se ista visina za sve slike ne
     moze imati bez praznine oko slike. Biramo da praznine nema — visina prati
     sliku. max-height je samo kocnica za ekstremno uspravnu fotku; ako se
     ukljuci, oko slike ostane pozadina sajta (nikad siva kutija). */
  .izl-frame{width:100%;height:auto;max-height:82vh}
  .izl-nav{width:38px;height:38px;font-size:15px}
  .izl-prev{left:10px}
  .izl-next{right:10px}
  .izl-cap{padding:44px 14px 12px;font-size:9px;letter-spacing:1.8px}
  .izl-thumb{width:62px}
  .gv-img{max-width:calc(100vw - 20px);max-height:calc(100vh - 150px)}
  .gv-nav{display:none}
  .gv-x{top:12px;right:12px;width:40px;height:40px}
  .cs-info{padding:22px 20px}
  .phi-grid,.faq-layout{gap:28px}
  .phi-left .phi-img{height:clamp(280px,72vw,420px)}
  .he-scroll{display:none}}
@media(max-width:480px){
  #hero{min-height:100svh;min-height:100dvh}
  .hc{
    max-width:calc(100vw - 28px);
    padding:18px 14px 20px;
    background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 100%);
    border:1px solid rgba(255,255,255,.05);
    border-radius:24px;
    backdrop-filter:blur(2px);
    box-shadow:0 18px 44px rgba(0,0,0,.18);
  }
  .hbg-img img{object-position:center 32%}
  .hc{padding:0 16px}
  .he-eyebrow{margin-bottom:20px}
  .he-h1{font-size:clamp(19px,8vw,31px);max-width:11ch;text-shadow:0 8px 28px rgba(0,0,0,.55)}
  .he-sub{font-size:8.5px;letter-spacing:2.5px;max-width:26ch;color:#D7D4CF}
  .he-cta{width:100%}
  .mq{padding:13px 0}
  .mq-i{font-size:9px;letter-spacing:3px;padding:0 28px;gap:14px}
  .phi-left .phi-img{height:280px}
  .phi-grid,.faq-layout{gap:24px}
  .cs-head{margin-bottom:30px}}
@media(max-width:430px){
  .hbg-img img{object-position:center 30%}
  .hc{padding:0 14px}
  .he-eyebrow{gap:8px;margin-bottom:18px}
  .he-line{width:18px}
  .he-txt{font-size:8px;letter-spacing:2.5px}
  .he-h1{font-size:clamp(18px,7.5vw,28px);line-height:.9;max-width:11ch}
  .he-sub{font-size:8px;letter-spacing:2.2px;max-width:28ch;margin-bottom:18px}
  .mq-i{font-size:8.5px;padding:0 22px;gap:12px}
  .phi-left .phi-img{height:260px}}
@media(max-width:390px){
  .hbg-img img{object-position:center 28%}
  .he-eyebrow{margin-bottom:16px}
  .he-h1{font-size:clamp(17px,7vw,26px);max-width:12ch;text-shadow:0 8px 26px rgba(0,0,0,.58)}
  .he-sub{font-size:7.8px;letter-spacing:2px;max-width:30ch;color:#D7D4CF}
  .he-cta{max-width:100%}
  .mq{padding:11px 0}
  .mq-i{padding:0 18px}
  .phi-left .phi-img{height:245px}}

/* ── NAJMANJA SLOVA NA TELEFONU (2026-09-23) — isto pravilo kao na kraju laker.css ── */
@media(max-width:768px){
  .he-txt{font-size:10px;letter-spacing:2.5px}
  .he-sub{font-size:10px;letter-spacing:1.8px;max-width:none}
  .hs-t{font-size:10px}
  .mq-i{font-size:10.5px}
  .sl{font-size:10.5px}
  .loc-k{font-size:10.5px}
  .loc-btn{font-size:11px}
  .izl-num,.izl-cap-t{font-size:10.5px}
}