/* ==========================================================================
   MIG99, maketa redizajna v3
   Boje su njihove, sa kartona: crvena, duboka plava, svijetla plava, mlijeko.
   Sve slike su njihove, skinute sa mi99.ba, prebačene u WebP i sa izvađenom
   pozadinom (Vision framework, lokalno na mašini).

   Odstupanja od design.md, svjesna i zapisana:
   1. Kretanja ima znatno više nego što design.md dozvoljava. Traženo je da
      bude živo. Animiraju se samo transform i opacity, i sve se gasi kad je
      uključeno smanjeno kretanje.
   2. Sjenka se koristi ispod packshota. Pakovanje sa prozirnom pozadinom
      mora imati kontaktnu sjenku, inače lebdi kao naljepnica. Nigdje na UI-u.
   3. Radijus ostaje nula. To je jedino što ovaj sistem drži da ne izgleda
      kao predložak.
   ========================================================================== */

:root{
  --ink:       #0A0F22;
  --ink-2:     #121834;
  --blue:      #1E2A78;
  --blue-2:    #141C57;
  --blue-3:    #0D1440;
  --blue-line: #2E3A8C;
  --sky:       #8FC4EE;
  --sky-soft:  #C9E2F7;
  --sky-pale:  #EAF4FC;
  /* Crvena je podijeljena na tri, jer jedna vrijednost ne moze pokriti
     i sitan akcenat i cijelu plohu.
     --red       radna crvena: dugmad, oznake, sitan tekst na svijetlom.
                 Bijelo na njoj daje 6,04.
     --red-field velike plohe. Bijelo na njoj daje 9,07, a zasicenost je
                 spustena sa 78% na 67%, pa oko ne zamara.
     --red-soft  crvena kao tekst na tamnoj plohi.
     Puna brend crvena #E01B24 ostaje na ambalazi i u logotipu, gdje i pripada. */
  --red:       #C4161D;
  --red-field: #8C1C2A;
  --red-soft:  #FF8A8F;
  --cream:     #F7F4EE;
  --cream-2:   #EDE8DF;
  --paper:     #FFFFFF;
  --ash:       #6A6A72;
  --ash-2:     #9E9EA6;
  --line:      #E0DCD4;
  --line-2:    #CFCAC0;

  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px;
  --s-5:40px; --s-6:64px; --s-7:96px; --s-8:140px;

  --pad: 40px;
  --max: 1560px;
  --hdr-h: 84px;

  /* Tri pisma, tri jasne uloge.
     Bricolage Grotesque nosi display i brend, DM Sans nosi tekst i UI,
     Space Mono ostaje samo za tehnički mikro sadržaj.
     Hijerarhija se pravi težinom, ne time da je sve najdeblje.

     Šta je stvarno učitano, i zašto tako:
       Bricolage  400..800 varijabilno, sa opsz osom
       DM Sans    400..700 varijabilno: 400 tekst, 500 UI, 700 naglasak u redu
       Space Mono 400 i 700 uspravno, plus 400 kurziv za engleski prijevod
     Težina koja nije u ovom spisku tjera pregledač da sam nakrivi ili
     podeblja rez, a to se na sitnom tekstu odmah vidi. */
  --f-disp: 'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text: 'DM Sans',system-ui,-apple-system,sans-serif;
  --f-mono: 'Space Mono',ui-monospace,'SF Mono',monospace;

  --w-hero: 800;   /* jedna izjava po stranici */
  --w-head: 700;   /* naslovi sekcija, kartica i artikala */
  --w-soft: 400;   /* topla riječ u naslovu, mala slova */

  /* Prored display pisma na bosanskom, premjeren za Bricolage Grotesque.
     Obična verzala ide 0,674em iznad linije, háček na Č Ć Š Ž ide 0,864em,
     a najdublji rep (Q) pada 0,179em ispod. Na težini 800 to daje minimalni
     prored 1,043. Uzeto 1,05 da ima zazora.
     Za Archivo Black je ista mjera bila 1,02, pa se ovo mora mijenjati
     zajedno sa pismom. */
  --lh: 1.05;

  --t-hero: clamp(44px, 6.6vw, 112px);
  --t-xl:   clamp(34px, 4.6vw, 74px);
  --t-lg:   clamp(24px, 2.8vw, 44px);
  --t-md:   clamp(17px, 1.6vw, 22px);
  --t-sm:   clamp(14px, 1.05vw, 16px);
  --t-xs:   clamp(10px, .82vw, 12px);

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* Mliječna traka je šira od ekrana da nikad ne ostavi rupu. Rez ide i na html. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }

body{
  background:var(--cream); color:var(--ink);
  font-family:var(--f-text); font-size:var(--t-sm); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.zakljucano{ overflow:hidden }

img{ max-width:100%; display:block; border:0 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--red); color:#fff }

/* Fokusni prsten mora imati bar 3:1 prema podlozi. Crvena na tamnoplavoj
   daje 2,42 i ne prolazi, zato se boja mijenja po plohi. */
:focus-visible{ outline:2px solid var(--red); outline-offset:3px }
.on-blue :focus-visible, .foot :focus-visible, .hero :focus-visible,
.on-ink :focus-visible, .pglava :focus-visible{ outline-color:var(--sky) }
.on-red :focus-visible{ outline-color:#fff }
.hdr :focus-visible{ outline-color:var(--sky) }
.hdr.solid :focus-visible{ outline-color:var(--red) }

/* --------------------------------------------------------------------------
   Zrno
   -------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Uvodna animacija: mlijeko puni čašu, pa se zavjesa digne
   Traje oko 1,7s, ide jednom po sesiji, preskače se klikom ili tipkom,
   i gasi se uz smanjeno kretanje. Duže od toga postane smetnja, ne dojam.
   -------------------------------------------------------------------------- */
.uvod{
  position:fixed; inset:0; z-index:9500;
  background:var(--blue); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-5); transition:transform .9s var(--e-io);
}
.uvod.gotov{ transform:translateY(-101%) }
.uvod[hidden]{ display:none }
.uvod svg{ width:clamp(130px, 13vw, 200px); height:auto }
.uvod__lbl{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sky);
  opacity:0; transition:opacity .6s .2s;
}
.uvod.tece .uvod__lbl{ opacity:1 }
.uvod__skip{
  position:absolute; right:var(--pad); bottom:var(--s-5);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sky); padding:10px 14px;
  border:1px solid var(--blue-line); transition:border-color .3s;
}
.uvod__skip:hover{ border-color:var(--sky) }
/* Mlijeko raste unutar čaše. clip-path se ne animira glatko, pa ide transform
   na pravougaoniku koji je maskiran oblikom čaše. */
.uvod__fill{ transform:translateY(102px); transition:transform 1.25s var(--e-io) }
.uvod.tece .uvod__fill{ transform:translateY(0) }
.uvod__mlaz{ transform:scaleY(0); transform-origin:top; transition:transform .35s var(--e-out) }
.uvod.tece .uvod__mlaz{ transform:scaleY(1) }
.uvod.gotov .uvod__mlaz{ transform:scaleY(0) }

/* --------------------------------------------------------------------------
   Otkrivanje na skrol
   -------------------------------------------------------------------------- */
[data-rev]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
  transition-delay:var(--d,0ms);
}
[data-rev].in{ opacity:1; transform:none }

/* Maska reda mora imati prostora za repove (g, j, p) iz lagane, malim slovima
   pisane riječi u naslovu. Na .06em se rep od "g" u rijeci "ga." sjekao. */
.split .ln{ display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.24em }
.split .ln > i{
  display:block; font-style:inherit; transform:translateY(110%);
  transition:transform 1s var(--e-out); transition-delay:var(--d,0ms);
}
.split.in .ln > i{ transform:none }

.wipe{ position:relative; overflow:hidden }
.wipe::after{
  content:''; position:absolute; inset:0; background:var(--red-field);
  transform:scaleX(1); transform-origin:right;
  transition:transform 1.1s var(--e-io); transition-delay:var(--d,0ms);
}
.wipe.in::after{ transform:scaleX(0) }

/* --------------------------------------------------------------------------
   Tipografija
   -------------------------------------------------------------------------- */
.disp{
  font-family:var(--f-disp); font-weight:var(--w-head);
  text-transform:uppercase; letter-spacing:-.022em; line-height:var(--lh);
}
/* Hero je jedina izjava koja ide na najveću težinu. */
.disp--hero{ font-size:var(--t-hero); font-weight:var(--w-hero); letter-spacing:-.028em }
.disp--xl  { font-size:var(--t-xl) }
.disp--lg  { font-size:var(--t-lg); letter-spacing:-.015em }

/* Topla riječ u naslovu. Bila je serif kurziv, sad je isto pismo na laganoj
   težini i malim slovima. Kontrast 800 naspram 400 u istom redu nosi razliku,
   pa ne treba druga familija. Jedna riječ po naslovu, kao i prije. */
.ser{
  font-family:var(--f-disp); font-weight:var(--w-soft);
  font-style:normal; text-transform:none; letter-spacing:-.012em; font-size:1.04em;
}
.ser--sky{ color:var(--sky) }
.ser--red{ color:var(--red) }

.lead{ font-size:var(--t-md); line-height:1.5; color:var(--ash); max-width:58ch }
.on-blue .lead, .foot .lead, .hero .lead, .on-ink .lead, .pglava .lead{ color:var(--sky-soft) }
.on-red .lead{ color:#fff }

.tekst{ max-width:68ch }
.tekst p + p{ margin-top:var(--s-4) }
.on-blue .tekst, .on-ink .tekst{ color:var(--sky-soft) }

.note{
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.1em; line-height:1.3; color:var(--ash);
}
.note--cat{ text-transform:lowercase }
.note--meta{ text-transform:uppercase }
.on-blue .note, .foot .note, .hero .note, .on-ink .note, .pglava .note{ color:var(--sky) }
.on-red .note{ color:#fff }

.bar{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-3); padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line); margin-bottom:var(--s-6);
}
.on-blue .bar, .on-ink .bar, .pglava .bar{ border-bottom-color:var(--blue-line) }
.on-red .bar{ border-bottom-color:rgba(255,255,255,.35) }

/* --------------------------------------------------------------------------
   Raspored i plohe
   -------------------------------------------------------------------------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad) }
.wrap--uzak{ max-width:1160px }
.sec{ padding-block:var(--s-8) }
.sec--sm{ padding-block:var(--s-7) }

.on-blue{ background:var(--blue); color:var(--paper) }
.on-ink { background:var(--ink);  color:var(--paper) }
.on-red { background:var(--red-field); color:var(--paper) }
.on-cream{ background:var(--cream) }
.on-paper{ background:var(--paper) }
.on-sky { background:var(--sky-pale) }

.dvije{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7) }
.dvije--l{ grid-template-columns:1.15fr .85fr }
.dvije--d{ grid-template-columns:.85fr 1.15fr }

/* --------------------------------------------------------------------------
   Dugmad
   Varijante mijenjaju samo promjenljive, pa se ne mogu međusobno pregaziti.
   U prošloj verziji je .btn:hover{color:#fff} dolazilo poslije
   .btn--light:hover i pravilo bijeli tekst na bijeloj plohi.
   -------------------------------------------------------------------------- */
.btn{
  --bd:var(--ink); --fg:var(--ink); --bg:transparent; --fill:var(--ink); --fgh:#fff;
  position:relative; display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-text); font-weight:500; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  padding:16px 26px; border:1px solid var(--bd); color:var(--fg);
  background:var(--bg); overflow:hidden; isolation:isolate;
  transition:color .45s var(--e-out), border-color .45s var(--e-out);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--fill);
  transform:translateY(101%); transition:transform .45s var(--e-out);
}
.btn:hover::before{ transform:translateY(0) }
.btn:hover{ color:var(--fgh); border-color:var(--fill) }
.btn .ar{ transition:transform .45s var(--e-out) }
.btn:hover .ar{ transform:translateX(5px) }

.btn--red  { --bg:var(--red);  --bd:var(--red);  --fg:#fff; --fill:var(--ink);  --fgh:#fff }
.btn--light{ --bd:#fff; --fg:#fff; --fill:#fff; --fgh:var(--blue) }
.btn--onred{ --bd:#fff; --fg:#fff; --fill:#fff; --fgh:var(--red-field) }
.btn--sm{ padding:12px 18px }

/* --------------------------------------------------------------------------
   Zaglavlje
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:400;
  border-bottom:1px solid transparent;
  transition:background .45s var(--e-out), border-color .45s var(--e-out);
}
/* Zastor iza prozirnog zaglavlja. Bez njega bijela navigacija nestane
   čim ispod nje prođe svijetla ploha. */
.hdr::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,15,34,.6), rgba(10,15,34,.15) 62%, transparent);
  transition:opacity .45s var(--e-out);
}
.hdr.solid{
  background:rgba(247,244,238,.94); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line);
}
.hdr.solid::before{ opacity:0 }

.hdr__in{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  height:var(--hdr-h); display:flex; align-items:center; gap:var(--s-5);
}
.brand{ display:flex; align-items:center; gap:var(--s-3) }
.brand img{ width:auto; height:42px }
.brand__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sky); line-height:1.3;
  border-left:1px solid rgba(255,255,255,.3); padding-left:var(--s-3);
}
.hdr.solid .brand__t{ color:var(--ash); border-left-color:var(--line) }

/* Omotač je na širokom ekranu proziran za raspored, pa nav, jezik i dugme
   stoje direktno u traci kao i prije. Ispod 1100px postaje panel. */
.hdr__meni{ display:contents }
.hdr__kraj{ display:contents }

.nav{ display:flex; gap:var(--s-5); margin-left:auto }
.nav a{
  position:relative; font-family:var(--f-text); font-weight:500; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.07em; color:#fff; padding-block:4px;
}
.hdr.solid .nav a{ color:var(--ink) }
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav a:hover::after, .nav a[aria-current]::after{ transform:scaleX(1); transform-origin:left }
.hdr.solid .nav a[aria-current]{ color:var(--red) }

.lang{
  display:flex; gap:6px; font-family:var(--f-text); font-weight:500; font-size:var(--t-xs);
  letter-spacing:.07em; color:rgba(255,255,255,.75);
  padding-left:var(--s-4); border-left:1px solid rgba(255,255,255,.3);
}
.hdr.solid .lang{ color:var(--ash); border-left-color:var(--line) }
.lang a[aria-current]{ color:#fff }
.hdr.solid .lang a[aria-current]{ color:var(--ink) }
.lang a:hover{ color:var(--red-soft) }
.hdr.solid .lang a:hover{ color:var(--red) }

.hdr .btn{ --bd:#fff; --fg:#fff; --fill:#fff; --fgh:var(--blue); padding:13px 20px }
.hdr.solid .btn{ --bd:var(--red); --bg:var(--red); --fg:#fff; --fill:var(--ink); --fgh:#fff }

.burger{
  display:none; margin-left:auto; width:46px; height:46px;
  border:1px solid currentColor; color:#fff; position:relative;
}
.hdr.solid .burger{ color:var(--ink) }
.burger i{
  position:absolute; left:13px; right:13px; height:1px; background:currentColor;
  transition:transform .4s var(--e-out), opacity .3s;
}
.burger i:nth-child(1){ top:18px }
.burger i:nth-child(2){ top:23px }
.burger i:nth-child(3){ top:28px }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  --milk-h: clamp(110px, 17vh, 210px);
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--blue); color:#fff; overflow:hidden;
  padding-block:calc(var(--hdr-h) + var(--s-6)) calc(var(--milk-h) + var(--s-6));
}
.hero__ghost{
  position:absolute; left:0; right:0; top:16%;
  font-family:var(--f-disp); font-weight:var(--w-hero); font-size:26vw; line-height:.8;
  color:rgba(255,255,255,.035); white-space:nowrap; user-select:none;
  pointer-events:none; text-transform:uppercase; letter-spacing:-.05em;
  will-change:transform;
}
.hero__in{
  position:relative; z-index:3; width:100%; max-width:var(--max); margin:0 auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr auto; gap:var(--s-6); align-items:end;
}
.hero__acts{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6) }

/* Pakovanje lebdi. Sad ima prozirnu pozadinu pa mu treba kontaktna sjenka. */
.hero__pack{ position:relative; justify-self:end; text-align:center }
.hero__pack img{
  width:clamp(150px, 17vw, 260px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 40px 46px rgba(0,0,0,.5));
  animation:lebdi 7s ease-in-out infinite; will-change:transform;
}
.hero__pack figcaption{
  margin-top:var(--s-4); font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--sky); line-height:1.7;
}
.hero__pack b{ display:block; color:#fff; font-weight:700 }
@keyframes lebdi{
  0%,100%{ transform:translateY(0) rotate(-1.5deg) }
  50%    { transform:translateY(-16px) rotate(1deg) }
}

/* Mliječna traka.
   Ne slaže se od pojedinačnih slika nego se pločica ponavlja preko cijelog
   elementa (repeat-x). Element je već za dvije pločice širi od heroja i
   počinje jednu pločicu lijevo od njega, pa pomak za tačno jednu pločicu
   ne može otkriti ivicu. Nema računanja sa vw, nema ovisnosti o širini
   ekrana, nema rupe.

   Pločica je milk.webp plus njena zrcaljena kopija, pa joj je desna ivica
   identična lijevoj i spoj se ne vidi ni unutar pločice ni na ponavljanju.
   Odnos stranica pločice je 3788/400 = 9,47, odatle množilac ispod. */
.hero__milk{
  --tile: calc(var(--milk-h) * 9.47);
  position:absolute; bottom:-2px; z-index:2;
  left:calc(-1 * var(--tile));
  width:calc(100% + 2 * var(--tile));
  height:var(--milk-h);
  background:url("../img/milk-tile.webp") repeat-x left bottom;
  background-size:var(--tile) 100%;
  pointer-events:none;
  animation:tece 34s linear infinite;
}
@keyframes tece{ from{ transform:translateX(0) } to{ transform:translateX(var(--tile)) } }

/* Stoji na sredini, između dugmadi lijevo i pakovanja desno.
   Uz lijevu ivicu je na niskim ekranima udarao u dugme. */
.scroller{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--milk-h) + var(--s-3)); z-index:5;
  display:flex; align-items:center; gap:var(--s-3);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sky);
}
.scroller i{ width:1px; height:44px; background:linear-gradient(var(--sky),transparent); animation:kap 2s ease-in-out infinite }
@keyframes kap{ 0%,100%{ transform:scaleY(.3); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* Kraće zaglavlje za podstranice */
.pglava{
  background:var(--blue); color:#fff; position:relative; overflow:hidden;
  padding-block:calc(var(--hdr-h) + var(--s-7)) var(--s-7);
}
.pglava__ghost{
  position:absolute; right:-4%; bottom:-20%;
  font-family:var(--f-disp); font-weight:var(--w-hero); font-size:20vw; line-height:.8;
  color:rgba(255,255,255,.04); white-space:nowrap; user-select:none;
  pointer-events:none; text-transform:uppercase; letter-spacing:-.05em;
}
.pglava .wrap{ position:relative; z-index:2 }
.krug{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-5) }
/* Podrazumijevano stoje na svijetloj plohi. Svijetloplava na krem daje 1,69. */
.krug, .krug a{ font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ash) }
.krug a:hover{ color:var(--red) }
.pglava .krug, .pglava .krug a{ color:var(--sky) }
.pglava .krug a:hover{ color:#fff }

/* --------------------------------------------------------------------------
   Brojke
   -------------------------------------------------------------------------- */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--blue-line) }
.num{ background:var(--blue); padding:var(--s-6) var(--s-5) var(--s-5); container-type:inline-size }
.num__v{ font-family:var(--f-disp); font-weight:var(--w-head); font-size:clamp(30px,7cqw,80px); line-height:1; letter-spacing:-.04em; color:#fff; display:flex; align-items:baseline }
.num__v em{ font-style:normal; color:var(--red-soft); font-size:.55em; margin-left:.06em }
.num__l{ margin-top:var(--s-3); font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--sky) }

/* --------------------------------------------------------------------------
   Traka proizvoda i kartica pakovanja
   -------------------------------------------------------------------------- */
.rail{ position:relative; background:var(--cream) }
.rail__pin{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden }
.rail__head{ max-width:var(--max); margin:0 auto var(--s-5); padding-inline:var(--pad); width:100% }
.rail__track{ display:flex; gap:var(--s-3); padding-inline:var(--pad); will-change:transform }

.pk{
  flex:0 0 auto; width:clamp(200px,20vw,290px); height:clamp(400px,60vh,640px);
  background:var(--paper); border:1px solid var(--line);
  padding:var(--s-4); display:flex; flex-direction:column;
  transition:background .5s var(--e-out), border-color .5s var(--e-out), color .5s var(--e-out);
}
.pk__im{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s-4); overflow:hidden;
}
.pk__im img{
  max-height:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(10,15,34,.18));
  transition:transform .6s var(--e-out), filter .6s var(--e-out);
}
.pk:hover{ background:var(--blue); border-color:var(--blue); color:#fff }
.pk:hover .pk__im img{ transform:translateY(-10px) scale(1.07); filter:drop-shadow(0 30px 30px rgba(0,0,0,.45)) }
.pk__b{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); transition:color .5s }
.pk:hover .pk__b{ color:var(--red-soft) }
.pk__n{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:15px; letter-spacing:-.02em; line-height:1.12; margin-top:var(--s-2) }
.pk__m{
  margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--ash);
  display:flex; justify-content:space-between; transition:border-color .5s, color .5s;
}
.pk:hover .pk__m{ border-top-color:var(--blue-line); color:var(--sky) }

/* --------------------------------------------------------------------------
   Anatomija artikla
   -------------------------------------------------------------------------- */
.anat{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s-8) }
.anat__l{ position:sticky; top:calc(var(--hdr-h) + var(--s-5)); align-self:start }
.anat__im{
  background:linear-gradient(170deg, var(--sky-pale), var(--paper));
  border:1px solid var(--line);
  padding:var(--s-6); display:flex; justify-content:center;
}
.anat__im img{ max-height:420px; width:auto; filter:drop-shadow(0 30px 34px rgba(10,15,34,.22)) }

.rows{ border-top:1px solid var(--line) }
.row{ display:grid; grid-template-columns:1fr auto; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); align-items:baseline }
.row dt{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ash) }
/* Isto pravilo kao kod nutritivne tablice: pravi kurziv Space Mono postoji
   samo na 400, pa se težina drži na 400. */
.row dt small{ display:block; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; opacity:.7; margin-top:2px }
.row dd{ font-family:var(--f-mono); font-size:15px; font-weight:700; text-align:right }
.row--big dd{ font-family:var(--f-disp); font-weight:var(--w-head); font-size:clamp(20px,2.4vw,34px); letter-spacing:-.015em; line-height:1 }
.on-blue .rows, .on-blue .row{ border-color:var(--blue-line) }
.on-blue .row dt{ color:var(--sky) }

/* --------------------------------------------------------------------------
   Kartice
   -------------------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.cards--2{ grid-template-columns:repeat(2,1fr) }
.cards--4{ grid-template-columns:repeat(4,1fr) }
.cards--wide{ grid-template-columns:1.4fr 1fr }

.card{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:var(--paper);
  padding:var(--s-5); min-height:440px;
  display:flex; flex-direction:column; container-type:inline-size;
  transition:color .55s var(--e-out), border-color .55s var(--e-out);
}
.card--low{ min-height:380px }
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--blue);
  transform:translateY(101%); transition:transform .6s var(--e-out);
}
.card:hover::before{ transform:translateY(0) }
.card:hover{ color:#fff; border-color:var(--blue) }
.card__n{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; color:var(--ash); transition:color .55s }
.card:hover .card__n{ color:var(--sky) }
.card__h{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; letter-spacing:-.02em; line-height:var(--lh); font-size:clamp(22px,9cqw,42px); margin-top:auto }
.card__h--sm{ font-size:clamp(20px,5.5cqw,42px) }
.card__t{ margin-top:var(--s-3); color:var(--ash); transition:color .55s }
.card:hover .card__t{ color:var(--sky-soft) }
.card__go{ margin-top:var(--s-4); display:inline-flex; gap:var(--s-2); font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--red); transition:color .55s }
.card:hover .card__go{ color:#fff }
.card__go .ar{ transition:transform .45s var(--e-out) }
.card:hover .card__go .ar{ transform:translateX(6px) }

.card--red{ background:var(--red-field); border-color:var(--red-field); color:#fff }
.card--red .card__n, .card--red .card__t, .card--red .card__go{ color:#fff }
.card--red::before{ background:var(--ink) }
.card--red:hover{ border-color:var(--ink) }

.card--blue{ background:var(--blue); border-color:var(--blue); color:#fff }
.card--blue .card__n{ color:var(--sky) }
.card--blue .card__t{ color:var(--sky-soft) }
.card--blue .card__go{ color:var(--red-soft) }
.card--blue::before{ background:var(--red-field) }
.card--blue:hover{ border-color:var(--red-field) }
.card--blue:hover .card__n, .card--blue:hover .card__t, .card--blue:hover .card__go{ color:#fff }

.plist{ list-style:none; margin-top:var(--s-4); display:grid; gap:10px }
.plist li{ display:grid; grid-template-columns:16px 1fr; gap:var(--s-2); font-size:var(--t-sm) }
.plist li::before{ content:'+'; font-family:var(--f-mono); color:var(--red) }
.on-blue .plist li::before, .on-red .plist li::before, .on-ink .plist li::before{ color:currentColor }

/* --------------------------------------------------------------------------
   Tabela opreme
   -------------------------------------------------------------------------- */
.specs{ width:100%; border-collapse:collapse }
.specs th, .specs td{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em;
  text-align:left; padding:16px 0; border-bottom:1px solid var(--line);
}
.specs th{ color:var(--ash); font-weight:400; text-transform:uppercase }
.specs td{ text-align:right; color:var(--ink); font-weight:700; font-size:15px; white-space:nowrap }
.on-blue .specs th, .on-blue .specs td{ border-bottom-color:var(--blue-line) }
.on-blue .specs th{ color:var(--sky) }
.on-blue .specs td{ color:#fff }

/* --------------------------------------------------------------------------
   Galerija pogona
   -------------------------------------------------------------------------- */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.gal figure{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--blue-2) }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-out) }
.gal figure:hover img{ transform:scale(1.06) }
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:var(--s-3) var(--s-4);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:linear-gradient(transparent, rgba(10,15,34,.88));
}

/* --------------------------------------------------------------------------
   Sertifikati
   -------------------------------------------------------------------------- */
.certs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.cert{ border:1px solid var(--line); background:var(--paper); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3) }
.cert__t{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:var(--t-lg); letter-spacing:-.02em; line-height:var(--lh) }
.cert__d{ color:var(--ash); font-size:var(--t-sm); flex:1 }
.cert__im{ background:var(--cream); border:1px solid var(--line); padding:var(--s-4); display:flex; justify-content:center }
.cert__im img{ max-height:300px; width:auto }

/* --------------------------------------------------------------------------
   Katalog: bočna navigacija i mreža
   -------------------------------------------------------------------------- */
.kat{ display:grid; grid-template-columns:250px 1fr; gap:var(--s-6); align-items:start }
.side{ position:sticky; top:calc(var(--hdr-h) + var(--s-5)) }
.side h3{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ash); font-weight:400; margin-bottom:var(--s-3) }
.side ul{ list-style:none; border-top:1px solid var(--line) }
.side li a, .side li button{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-3);
  width:100%; text-align:left; padding:14px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; transition:color .3s, padding-left .3s;
}
.side li a:hover, .side li button:hover{ color:var(--red); padding-left:6px }
.side li [aria-current], .side li [aria-pressed="true"]{ color:var(--red); font-weight:700 }
.side li em{ font-style:normal; color:var(--ash) }
/* Blok je plav a nije .on-blue, pa mu notacija mora dobiti svoju boju.
   Siva na plavoj daje 2,36 i pada. */
.side__blok{ margin-top:var(--s-6); background:var(--blue); color:#fff; padding:var(--s-4) }
.side__blok .note{ color:var(--sky) }
.side__blok p{ color:var(--sky-soft); margin-block:var(--s-2) var(--s-4); font-size:var(--t-sm) }

/* Broj kolona ide kroz klasu, ne kroz ugrađeni stil. Ugrađeni stil pobjeđuje
   svaki upit u ovom fajlu, pa su četiri kolone ostajale i na telefonu. */
.mreza{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.mreza--4{ grid-template-columns:repeat(4,1fr) }
.mreza .gh{ grid-column:1/-1; padding-top:var(--s-5) }
.mreza .gh:first-child{ padding-top:0 }
.mreza .pk{ width:auto; height:clamp(360px,46vh,470px) }

/* --------------------------------------------------------------------------
   Stranica artikla
   -------------------------------------------------------------------------- */
.art{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:var(--s-7) }
.art__vizual{ position:sticky; top:calc(var(--hdr-h) + var(--s-5)); align-self:start }
.art__glavna{
  background:linear-gradient(170deg, var(--sky-pale), var(--paper));
  border:1px solid var(--line);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:var(--s-6);
}
.art__glavna img{ max-height:100%; width:auto; filter:drop-shadow(0 34px 40px rgba(10,15,34,.25)) }
/* minmax(0,1fr) umjesto 1fr. Kolona sa 1fr ne smije biti uža od sadržaja,
   pa je vlastita širina sličice gurala cijelu mrežu preko ekrana na 320px. */
.art__male{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:6px }
.art__male button{
  border:1px solid var(--line); background:var(--paper); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; padding:var(--s-2);
  transition:border-color .3s;
}
.art__male button:hover, .art__male button[aria-pressed="true"]{ border-color:var(--red) }
.art__male img{ max-height:100%; width:auto }

.znacke{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-4) }
.znacka{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 12px; border:1px solid var(--line-2); color:var(--ash);
}
.znacka--red{ background:var(--red); border-color:var(--red); color:#fff }
.znacka--blue{ background:var(--blue); border-color:var(--blue); color:#fff }

.tabovi{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-top:var(--s-6); flex-wrap:wrap }
.tabovi button{
  font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:14px 20px; border:1px solid var(--line); border-bottom:0; color:var(--ash);
  transition:color .3s, background .3s, border-color .3s;
}
.tabovi button[aria-selected="true"]{ background:var(--blue); border-color:var(--blue); color:#fff }
.tabovi button:hover{ color:var(--ink) }
.tabovi button[aria-selected="true"]:hover{ color:#fff }
.panel[hidden]{ display:none }
.panel{ padding-top:var(--s-5) }

.nutri{ width:100%; border-collapse:collapse }
.nutri th, .nutri td{ padding:14px var(--s-3); border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.04em; text-align:left }
.nutri thead th{ background:var(--blue); color:#fff; text-transform:uppercase; border-bottom-color:var(--blue) }
.nutri td:last-child, .nutri thead th:last-child{ text-align:right }
.nutri td:last-child{ font-weight:700; font-size:14px; white-space:nowrap; color:var(--ink) }
.nutri tbody th{ font-weight:400; color:var(--ash) }
/* Engleski prijevod ispod bosanske oznake. Space Mono ima pravi kurziv samo
   na težini 400, pa se težina mora spustiti i kad je nadređeni <th> masan.
   Bez ovoga pregledač crta nakrivljenu kopiju uspravnog reza. */
.nutri th small{ display:block; font-style:italic; font-weight:400; opacity:.75 }

/* --------------------------------------------------------------------------
   Novosti
   -------------------------------------------------------------------------- */
.vijesti{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.vijest{ border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; overflow:hidden; transition:border-color .4s }
.vijest:hover{ border-color:var(--blue) }
.vijest__im{ aspect-ratio:16/10; overflow:hidden; background:var(--sky-pale) }
.vijest__im img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-out) }
.vijest:hover .vijest__im img{ transform:scale(1.05) }
.vijest__in{ padding:var(--s-4); display:flex; flex-direction:column; flex:1 }
.vijest__d{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--red) }
.vijest__h{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:19px; letter-spacing:-.02em; line-height:1.14; margin-top:var(--s-2) }
.vijest__t{ margin-top:var(--s-3); color:var(--ash); font-size:var(--t-sm); flex:1 }
.vijest__go{ margin-top:var(--s-4); font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--red) }
.vijest--velika{ grid-column:span 2 }
.vijest--velika .vijest__im{ aspect-ratio:16/9 }
.vijest--velika .vijest__h{ font-size:clamp(22px,2.4vw,34px) }

/* --------------------------------------------------------------------------
   Forma
   -------------------------------------------------------------------------- */
.forma{ display:grid; gap:var(--s-4) }
.polje{ display:grid; gap:var(--s-2) }
.polje > span{ font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ash) }
.polje input, .polje select, .polje textarea{
  font-family:var(--f-text); font-size:var(--t-sm); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); padding:15px 16px;
  width:100%; transition:border-color .3s;
}
.polje textarea{ min-height:150px; resize:vertical }
.polje input:focus, .polje select:focus, .polje textarea:focus{ border-color:var(--blue) }
.polje--par{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) }
.polje small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ash) }
.polje small b{ color:var(--red) }
/* Zamka za robote. Čovjek je ne vidi, pa ostaje prazna. */
.med{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.forma__nog{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-2) }
.poruka-ok{
  border:1px solid var(--blue); background:var(--sky-pale); padding:var(--s-4);
  font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.06em; color:var(--blue); line-height:1.7;
}
.poruka-ok[hidden]{ display:none }

/* --------------------------------------------------------------------------
   Kontakt, ljudi i mapa
   -------------------------------------------------------------------------- */
.routes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--blue-line); border:1px solid var(--blue-line) }
.route{ background:var(--blue); padding:var(--s-5); transition:background .5s var(--e-out) }
.route:hover{ background:var(--blue-2) }
.route__h{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:var(--t-lg); letter-spacing:-.02em; line-height:var(--lh); margin-top:var(--s-3) }
.route__l{ margin-top:var(--s-4); display:grid; gap:6px; font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.04em; color:var(--sky) }
.route__l a{ color:#fff; border-bottom:1px solid var(--blue-line); width:fit-content; transition:border-color .3s, color .3s }
.route__l a:hover{ color:var(--red-soft); border-bottom-color:var(--red-soft) }

.ljudi{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.osoba{ border:1px solid var(--line); background:var(--paper); padding:var(--s-4); transition:border-color .3s }
.osoba:hover{ border-color:var(--blue) }
.osoba__f{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--red) }
.osoba__i{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:18px; letter-spacing:-.02em; line-height:1.14; margin-top:var(--s-2) }
.osoba__k{ margin-top:var(--s-3); display:grid; gap:4px; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ash) }
.osoba__k a{ color:var(--ink); border-bottom:1px solid var(--line-2); width:fit-content }
.osoba__k a:hover{ color:var(--red); border-bottom-color:var(--red) }

.mapa{ border:1px solid var(--line); background:var(--sky-pale); aspect-ratio:16/9; width:100% }
.mapa iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.06); transition:filter .5s }
.mapa:hover iframe{ filter:none }


/* --------------------------------------------------------------------------
   Karta tržišta
   Granice su iz Natural Earth 50m, projicirane Merkatorom i pojednostavljene.
   Nisu crtane od oka, jer bi svaki čovjek iz regiona odmah vidio grešku.
   -------------------------------------------------------------------------- */
.trziste{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--s-6); align-items:start }

.karta__okvir{ position:relative; background:var(--sky-pale); border:1px solid var(--line); padding:var(--s-4) }
.karta{ width:100%; height:auto; display:block }

.z{ stroke:var(--sky-pale); stroke-width:1.2; vector-effect:non-scaling-stroke }
.z--okolina{ fill:var(--cream-2); pointer-events:none }
.z--izvoz{ fill:var(--sky); cursor:pointer; transition:fill .3s var(--e-out) }
.z--domace{ fill:var(--blue); cursor:pointer; transition:fill .3s var(--e-out) }
.z--izvoz:hover, .z--izvoz.aktivna{ fill:var(--red) }
.z--domace:hover, .z--domace.aktivna{ fill:var(--red-field) }
.z:focus-visible{ outline:none; stroke:var(--ink); stroke-width:2.5 }

.karta__tacka{ fill:var(--red); stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke }
.karta__puls{ fill:var(--red); transform-origin:center; animation:puls 2.4s ease-out infinite }
@keyframes puls{
  0%  { transform:scale(1);   opacity:.55 }
  70% { transform:scale(3.4); opacity:0 }
  100%{ transform:scale(3.4); opacity:0 }
}

.karta__legenda{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-4) }
.karta__legenda span{ display:flex; align-items:center; gap:var(--s-2); font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ash) }
.karta__legenda i{ width:14px; height:14px; display:block }

/* Ploča sa podacima o izabranom tržištu */
.trziste__panel{ border:1px solid var(--line); background:var(--paper); padding:var(--s-5); position:sticky; top:calc(var(--hdr-h) + var(--s-5)) }
.trziste__naslov{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:var(--t-lg); letter-spacing:-.02em; line-height:var(--lh); margin-top:var(--s-2) }
.trziste__lista{ list-style:none; display:grid; gap:0; margin-top:var(--s-4); border-top:1px solid var(--line) }
.trziste__lista li{ display:flex; justify-content:space-between; gap:var(--s-3); padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.04em; color:var(--ash) }
.trziste__lista b{ color:var(--ink); font-weight:700; text-align:right }
.trziste__savjet{ margin-top:var(--s-4); font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ash); letter-spacing:.04em }

/* --------------------------------------------------------------------------
   Kalkulator palete
   Sve brojke izvedene iz njihovih stvarnih logističkih podataka.
   Ništa nije procijenjeno, sve se množi iz jedne palete.
   -------------------------------------------------------------------------- */
.kalk{ border:1px solid var(--blue-line); background:var(--blue); color:#fff; padding:var(--s-5) }
.kalk__vrh{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; padding-bottom:var(--s-3); border-bottom:1px solid var(--blue-line) }
.kalk__h{ font-family:var(--f-disp); font-weight:var(--w-head); text-transform:uppercase; font-size:var(--t-lg); letter-spacing:-.02em; line-height:var(--lh) }
.kalk .note{ color:var(--sky) }

.kalk__ulaz{ display:grid; grid-template-columns:1fr auto; gap:var(--s-4); align-items:end; margin-top:var(--s-5) }
.kalk__ulaz label{ display:grid; gap:var(--s-2) }
.kalk__ulaz span{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--sky) }
.kalk__broj{
  font-family:var(--f-disp); font-weight:var(--w-head); font-size:clamp(38px,5vw,64px); letter-spacing:-.03em; line-height:1;
  background:transparent; border:0; border-bottom:2px solid var(--blue-line); color:#fff;
  width:100%; padding:0 0 8px; -moz-appearance:textfield;
}
.kalk__broj::-webkit-outer-spin-button, .kalk__broj::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.kalk__broj:focus{ border-bottom-color:var(--red-soft); outline:none }
.kalk__dugmad{ display:flex; gap:6px }
.kalk__dugmad button{
  width:52px; height:52px; border:1px solid var(--blue-line); color:#fff;
  font-family:var(--f-text); font-size:20px; line-height:1; transition:background .3s, border-color .3s;
}
.kalk__dugmad button:hover{ background:var(--red-field); border-color:var(--red-field) }

.kalk__klizac{ width:100%; margin-top:var(--s-5); -webkit-appearance:none; appearance:none; height:2px; background:var(--blue-line); cursor:pointer }
.kalk__klizac::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; background:var(--red); border:0; cursor:grab }
.kalk__klizac::-moz-range-thumb{ width:20px; height:20px; background:var(--red); border:0; cursor:grab }

.kalk__izlaz{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--blue-line); margin-top:var(--s-5); border:1px solid var(--blue-line) }
.kalk__stavka{ background:var(--blue); padding:var(--s-4); container-type:inline-size }
.kalk__v{ font-family:var(--f-disp); font-weight:var(--w-head); font-size:clamp(22px,8cqw,38px); letter-spacing:-.03em; line-height:1 }
.kalk__l{ margin-top:var(--s-2); font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky) }

/* Red paleta koji raste, da se količina i vidi a ne samo pročita */
.kalk__slika{ display:flex; flex-wrap:wrap; gap:4px; margin-top:var(--s-5); min-height:34px }
.kalk__paleta{ width:22px; height:30px; background:var(--sky); opacity:.35; transition:opacity .25s var(--e-out), background .25s }
.kalk__paleta.puna{ opacity:1 }
.kalk__paleta.preko{ background:var(--red-soft); opacity:1 }

.kalk__nota{ margin-top:var(--s-4); font-family:var(--f-text); font-size:var(--t-xs); letter-spacing:.04em; color:var(--sky); line-height:1.7 }
.kalk__nota b{ color:#fff }

/* --------------------------------------------------------------------------
   Podnožje
   -------------------------------------------------------------------------- */
.foot{ background:var(--ink); color:#fff; padding-top:var(--s-7) }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-5) }
.foot h3{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ash-2); font-weight:400; margin-bottom:var(--s-4) }
.foot ul{ list-style:none; display:grid; gap:10px }
.foot a{ transition:color .3s }
.foot a:hover{ color:var(--red-soft) }
.foot__big{
  font-family:var(--f-disp); font-weight:var(--w-hero); font-size:clamp(70px,17vw,270px); line-height:.82;
  letter-spacing:-.05em; color:#141a30; margin-top:var(--s-7);
  text-align:center; user-select:none; overflow:hidden;
}
.foot__bar{
  border-top:1px solid #1c2238; padding-block:var(--s-4);
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; color:var(--ash-2);
}

/* --------------------------------------------------------------------------
   Prelomne tačke
   -------------------------------------------------------------------------- */
@media (max-width:1240px){
  .nums{ grid-template-columns:repeat(2,1fr) }
  .mreza, .mreza--4, .cards--4, .certs, .gal, .vijesti, .ljudi{ grid-template-columns:repeat(2,1fr) }
  .foot__grid{ grid-template-columns:1fr 1fr }
}

@media (max-width:1100px){
  :root{ --hdr-h:72px }
  .burger{ display:block }

  /* Panel ide preko cijele visine ispod trake. Ranije je stajao do pola ekrana,
     pa se hero probijao ispod zadnje stavke, a donji rub je izgledao kao greška. */
  .hdr__meni{
    display:flex; flex-direction:column;
    position:fixed; inset:var(--hdr-h) 0 0 0;
    background:var(--blue); color:#fff;
    padding:var(--s-5) var(--pad) calc(var(--s-5) + env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
  }
  .hdr__meni[hidden]{ display:none }

  /* Dok je meni otvoren, traka i panel moraju biti ista ploha. Bez ovoga na
     skrolovanoj stranici krem traka stoji nad plavim panelom. */
  .hdr.otvoren{
    background:var(--blue); border-bottom-color:var(--blue-line);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .hdr.otvoren::before{ opacity:0 }
  .hdr.otvoren .burger{ color:#fff }
  .hdr.otvoren .brand__t{ color:var(--sky); border-left-color:rgba(255,255,255,.3) }

  .nav{ flex-direction:column; gap:0; margin-left:0 }
  .nav a{
    padding:18px 0; border-bottom:1px solid var(--blue-line);
    font-size:15px; letter-spacing:.05em; color:#fff;
  }
  .hdr.solid .nav a, .hdr.otvoren .nav a{ color:#fff }
  .hdr.solid .nav a[aria-current], .hdr.otvoren .nav a[aria-current]{ color:var(--red-soft) }
  .nav a::after{ display:none }

  /* Jezik i poziv na akciju silaze na dno panela. U traci su na mobilnom samo
     gurali burger u sredinu i trošili najskuplji red ekrana. */
  .hdr__kraj{
    display:flex; flex-direction:column; gap:var(--s-4);
    margin-top:auto; padding-top:var(--s-6);
  }
  .lang, .hdr.solid .lang{
    margin:0; padding:0; border-left:0; gap:var(--s-3);
    font-size:13px; color:rgba(255,255,255,.75);
  }
  .lang a[aria-current], .hdr.solid .lang a[aria-current]{ color:#fff }
  .hdr .btn, .hdr.solid .btn{
    display:inline-flex; justify-content:center; width:100%;
    --bd:#fff; --bg:transparent; --fg:#fff; --fill:#fff; --fgh:var(--blue);
    padding:18px 26px; font-size:12px;
  }

  .anat, .art, .kat, .dvije, .dvije--l, .dvije--d, .trziste{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .anat__l, .art__vizual, .side, .trziste__panel{ position:static }
  .anat__im img{ max-height:320px }
  .side ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s-4) }
  .rail__pin{ position:static; height:auto; padding-block:var(--s-7) }
  .rail__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; transform:none !important; max-width:var(--max); margin:0 auto }
  .rail__track .pk{ width:auto; height:clamp(360px,46vh,470px) }
  .rail__sp{ display:none }
}

/* Na tabletu panel ne smije izgledati kao razvučen telefon. Jezik i dugme idu
   u red, dugme se vraća na svoju širinu, stavke dobiju nešto veće slovo. */
@media (min-width:600px) and (max-width:1100px){
  .nav a{ font-size:17px }
  .hdr__kraj{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-5) }
  .hdr .btn, .hdr.solid .btn{ width:auto }
}

@media (max-height:740px){ .scroller{ display:none } }

@media (max-width:900px){
  :root{ --pad:20px; --s-8:96px; --s-7:72px }
  .scroller{ display:none }
  .cards, .cards--wide, .cards--2, .cards--4{ grid-template-columns:1fr }
  .kalk__izlaz{ grid-template-columns:1fr }
  .kalk__ulaz{ grid-template-columns:1fr }
  .routes{ grid-template-columns:1fr }
  .mreza, .mreza--4, .rail__track{ grid-template-columns:repeat(2,1fr) }
  .hero__in{ grid-template-columns:1fr }
  .hero__pack{ display:none }
  .card{ min-height:340px }
  .art__glavna{ aspect-ratio:4/3 }
  .vijest--velika{ grid-column:span 2 }
}

@media (max-width:600px){
  /* Mono notacija na telefonu. Deset piksela je na ruci premalo, a razmak
     slova od .12em do .22em to još pogorša. Jedanaest je najmanje što se
     pouzdano čita, i ne mijenja nijedan raspored jer su svi ti redovi kratki. */
  :root{ --t-xs: clamp(11px, .82vw, 12px) }
  .pk__b, .pk__m, .gal figcaption, .vijest__d, .kalk__l, .scroller,
  .uvod__skip, .cert .note, .side__blok .note{ font-size:11px }

  /* Tablica sa podacima ima svoju najmanju širinu i na 320px ne staje.
     Prvo se skrati unutrašnji razmak, a ako i to ne bude dosta, tablica
     dobija vlastiti vodoravni skrol umjesto da bude odsječena. */
  .nutri th, .nutri td{ padding:12px 8px }
  .panel{ overflow-x:auto }

  .brand__t{ display:none }
  .nums{ grid-template-columns:1fr }
  .num{ padding:var(--s-5) var(--s-4) }
  .mreza, .mreza--4, .rail__track, .certs, .gal, .vijesti, .ljudi{ grid-template-columns:1fr }
  .vijest--velika{ grid-column:span 1 }
  .foot__grid{ grid-template-columns:1fr }
  .row{ grid-template-columns:1fr; gap:var(--s-1) }
  .row dd{ text-align:left }
  .bar{ flex-direction:column; gap:var(--s-2) }
  .side ul{ grid-template-columns:1fr }
  .polje--par{ grid-template-columns:1fr }
  /* Oznaka i vrijednost u istom redu se na uskom ekranu obje prelome i red
     se raspadne. Ispod 600px idu jedna ispod druge, kao i .row. */
  .trziste__lista li{ flex-direction:column; gap:var(--s-1) }
  .trziste__lista b{ text-align:left }
  .osoba__k{ word-break:break-word }
}

/* --------------------------------------------------------------------------
   Smanjeno kretanje. Sve ostaje vidljivo, ništa se ne pomjera.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-rev]{ opacity:1 !important; transform:none !important }
  .split .ln > i{ transform:none !important }
  .wipe::after{ transform:scaleX(0) !important }
  .uvod{ display:none !important }
  .hero__pack img, .hero__milk, .scroller i, .karta__puls{ animation:none !important }
  .rail__pin{ position:static; height:auto; padding-block:var(--s-7) }
  .rail__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; transform:none !important }
  .rail__track .pk{ width:auto; height:clamp(360px,46vh,470px) }
  .rail__sp{ display:none }
}