/* ==========================================================
   Planeta SEO, prodajni sajt

   Vizuelni koncept: alatka koja gleda ono što server stvarno
   pošalje. Zato ceo sajt izgleda kao pregled odgovora: uska
   kolona teksta, monospace tamo gde se prikazuje ono što je
   stiglo, i jedan ponavljajući element koji poredi upisano sa
   isporučenim. Taj panel je jedina glasna stvar na sajtu, sve
   ostalo je tiho namerno.
   ========================================================== */

:root{
  /* Mastilo, ne crna. Crna na ekranu izgleda kao rupa.        */
  --ink:      #0F1720;
  --ink-2:    #1B2733;
  --slate:    #4A5769;
  --slate-2:  #6E7C8F;

  --paper:    #FFFFFF;
  --mist:     #EFF3F8;
  --line:     #D9E1EB;

  /* Poklapa se, ne poklapa se. Boje su iz alatke, ne ukras.   */
  --ok:       #10693A;
  --ok-bg:    #E8F3EC;
  --bad:      #A8201A;
  --bad-bg:   #FBECEA;

  --link:     #1F4FD8;

  --sirina:   1120px;
  --tekst:    68ch;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Space Grotesk","IBM Plex Sans",sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0;
}

h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,37px);margin-bottom:16px}
h3{font-size:21px;margin-bottom:9px}
h4{font-size:16px;letter-spacing:0;margin-bottom:6px}

p{margin:0 0 17px;max-width:var(--tekst)}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}

code,kbd,.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.88em;
}

:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:3px}

.okvir{max-width:var(--sirina);margin:0 auto;padding:0 26px}
.usko{max-width:var(--tekst)}

/* ── Zaglavlje ─────────────────────────────────────────── */
.vrh{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(9px);
  border-bottom:1px solid var(--line);
}
.vrh .okvir{display:flex;align-items:center;gap:26px;height:62px}

.marka{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-0.02em;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:9px;
}
.marka .tacka{
  width:9px;height:9px;border-radius:2px;background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-bg);
}

.veze{display:flex;gap:22px;margin-left:auto;align-items:center}
.veze a{
  color:var(--slate);text-decoration:none;font-size:15px;font-weight:500;
}
.veze a:hover,.veze a[aria-current=page]{color:var(--ink)}

/* ── Dugmad ────────────────────────────────────────────── */
.dugme{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 21px;border-radius:7px;
  font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;transition:transform .12s ease,background .18s ease;
}
.dugme:hover{transform:translateY(-1px)}
.dugme.puno{background:var(--ink);color:#fff}
.dugme.puno:hover{background:var(--ink-2);color:#fff}
.dugme.prazno{background:var(--paper);color:var(--ink);border-color:var(--line)}
.dugme.prazno:hover{border-color:var(--slate-2);color:var(--ink)}
.dugme.malo{padding:9px 15px;font-size:14px}

/* ── Odeljci ───────────────────────────────────────────── */
.odeljak{padding:82px 0}
.odeljak.tesno{padding:56px 0}
.odeljak.mrk{background:var(--mist);border-block:1px solid var(--line)}
.odeljak.tamno{background:var(--ink);color:#DCE4EE}
.odeljak.tamno h2,.odeljak.tamno h3{color:#fff}
.odeljak.tamno p{color:#A9B6C6}

.natpis{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:13px;display:block;
}

.uvodni{font-size:19px;color:var(--slate);max-width:var(--tekst)}

/* ── Prigovor kupca ────────────────────────────────────────
   Rečenica koju je stvarno neko rekao, stavljena na početak
   odeljka. Nosi je isti levi rub kao primer iz prakse, da se
   odmah vidi da to nije naš tekst nego tuđa rečenica.     */
.prigovor{
  border-left:3px solid var(--ink);
  padding:2px 0 2px 20px;margin:0 0 22px;
  max-width:var(--tekst);
  font-family:"Space Grotesk","IBM Plex Sans",sans-serif;
  font-size:22px;line-height:1.4;letter-spacing:-0.01em;
  color:var(--ink);
}
.odeljak.tamno .prigovor{border-left-color:#4A5769;color:#fff}

/* ══════════════════════════════════════════════════════════
   POTPISNI ELEMENT: panel poređenja

   Ceo proizvod stoji na razlici između onoga što je upisano i
   onoga što je stiglo. Zato se ta razlika ponavlja kao vizuelni
   obrazac kroz ceo sajt, umesto ikonica.
   ══════════════════════════════════════════════════════════ */
.panel{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(15,23,32,.04),0 12px 28px -18px rgba(15,23,32,.35);
}
.panel-vrh{
  display:flex;align-items:center;gap:9px;
  padding:10px 15px;background:var(--mist);border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate);
}
.panel-vrh .adresa{margin-left:auto;color:var(--slate-2)}

.red{
  display:grid;grid-template-columns:118px 1fr;
  gap:14px;padding:13px 15px;border-bottom:1px solid var(--line);
  align-items:start;
}
.red:last-child{border-bottom:0}
.red .oznaka{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--slate-2);padding-top:2px;
}
.red .vrednost{font-size:14.5px;line-height:1.55;word-break:break-word}

.red.stiglo{background:var(--ok-bg)}
.red.nije{background:var(--bad-bg)}
.red.nije .vrednost{color:var(--bad)}

.znak{
  display:inline-block;width:16px;text-align:center;font-weight:700;
  margin-right:6px;
}
.znak.da{color:var(--ok)}
.znak.ne{color:var(--bad)}

.nalaz{
  padding:13px 15px;border-top:1px solid var(--line);
  background:var(--paper);font-size:14.5px;color:var(--ink);
}
.nalaz strong{color:var(--bad)}

/* ── Baner ─────────────────────────────────────────────────
   Jedina slika na sajtu. Ide od ivice do ivice ekrana, pa
   nema okvir sa ograničenom širinom, nema ram, poluprečnik ni
   senku: sve troje ima smisla samo dok slika stoji unutar
   kolone, a preko cele širine izgleda kao greška.
   Pozadina je boje mastila, da se ne blesne belina dok se
   slika učitava, jer je baner taman.
   Kada baner stoji, uvodni ekran dobija manji razmak odozgo,
   jer bi inače između slike i naslova zjapila rupa.        */
.baner{padding:0;line-height:0}
.baner-slika{
  display:block;width:100%;height:auto;
  background:var(--ink);
}
.baner + .uvod{padding-top:48px}

/* ── Uvodni ekran ──────────────────────────────────────── */
.uvod{padding:74px 0 66px}
.uvod-mreza{
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
}
.uvod h1{margin-bottom:20px}

/* Naslov je pitanje pa odgovor. Pitanje opisuje stanje čitaoca i zato ide
   tiše i manje, odgovor nosi tvrdnju i zato ostaje krupan. Oba dela stoje
   unutar istog H1, jer je ceo naslov jedna misao i tako ga vide i
   pretraživači.

   Border i padding se ovde izričito gase. Klasa .pitanje se dole koristi
   i za stavku u spisku čestih pitanja, gde nosi liniju iznad i razmak od
   24 piksela. Bez ovog gašenja bi se ta linija pojavila i unutar naslova,
   na svakoj strani koja naslov piše kao pitanje pa odgovor.             */
h1 .pitanje{
  display:block;
  font-size:.58em;line-height:1.25;font-weight:500;
  color:var(--slate);margin-bottom:12px;
  border:0;padding:0;
}
.uvod .podnaslov{font-size:19.5px;color:var(--slate);margin-bottom:26px}
.uvod-akcije{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.uvod-sitno{
  margin-top:16px;font-size:14px;color:var(--slate-2);
  font-family:"IBM Plex Mono",monospace;
}

/* ── Kartice ───────────────────────────────────────────── */
.mreza{display:grid;gap:20px}
.mreza.dve{grid-template-columns:repeat(2,1fr)}
.mreza.tri{grid-template-columns:repeat(3,1fr)}

.kartica{
  border:1px solid var(--line);border-radius:10px;padding:26px 24px;
  background:var(--paper);
}
.kartica p:last-child{margin-bottom:0}
.kartica .broj{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate-2);
  display:block;margin-bottom:10px;
}

.stavka{padding:30px 0;border-top:1px solid var(--line)}
.stavka:first-of-type{border-top:0}
.stavka-mreza{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* ── Primer iz prakse ──────────────────────────────────── */
.primer{
  border-left:3px solid var(--ink);padding:2px 0 2px 20px;margin:0 0 20px;
  max-width:var(--tekst);
}
.primer .naziv{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);
  display:block;margin-bottom:7px;
}
.primer p{margin-bottom:0;font-size:16px;color:var(--slate)}

/* ── Cene ──────────────────────────────────────────────── */
.cene{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.paket{
  border:1px solid var(--line);border-radius:11px;padding:28px 24px;
  display:flex;flex-direction:column;min-height:100%;
}
.paket.istaknut{
  border-color:var(--ink);border-width:2px;padding:27px 23px;
  position:relative;
}
.paket.istaknut::after{
  content:attr(data-oznaka);
  position:absolute;top:-11px;left:23px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;
}
.paket h3{margin-bottom:4px}
.paket .kome{font-size:14px;color:var(--slate-2);margin-bottom:18px;min-height:40px}
.paket .cena{
  font-family:"Space Grotesk",sans-serif;font-size:38px;font-weight:600;
  letter-spacing:-0.03em;line-height:1;
}
.paket .period{font-size:14px;color:var(--slate-2);margin:6px 0 20px}
.paket ul{list-style:none;padding:0;margin:0 0 22px;font-size:14.5px}
.paket li{padding:6px 0 6px 22px;position:relative;color:var(--slate)}
.paket li::before{
  content:"";position:absolute;left:0;top:13px;
  width:9px;height:9px;border-radius:2px;background:var(--ok-bg);
  border:1px solid var(--ok);
}
.paket li.nema{color:var(--slate-2)}
.paket li.nema::before{background:transparent;border-color:var(--line)}
.paket .dugme{margin-top:auto;justify-content:center}

/* ── Pitanja ───────────────────────────────────────────── */
.pitanje{border-top:1px solid var(--line);padding:24px 0;max-width:var(--tekst)}
.pitanje:last-child{border-bottom:1px solid var(--line)}
.pitanje h3{margin-bottom:8px}
.pitanje p:last-child{margin-bottom:0}

/* ── Tabela ────────────────────────────────────────────── */
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th{
  text-align:left;padding:11px 14px;border-bottom:2px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:500;
}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}

/* ── Podnožje ──────────────────────────────────────────── */
.dno{
  border-top:1px solid var(--line);padding:44px 0 54px;
  font-size:14.5px;color:var(--slate-2);
}
.dno-mreza{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.dno a{color:var(--slate);text-decoration:none;display:block;padding:4px 0}
.dno a:hover{color:var(--ink)}
.dno h4{color:var(--ink);margin-bottom:8px}

/* ── Sitno ─────────────────────────────────────────────── */
.spisak-tacaka{list-style:none;padding:0;margin:0 0 18px;max-width:var(--tekst)}
.spisak-tacaka li{
  padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--line);
}
.spisak-tacaka li:last-child{border-bottom:0}
.spisak-tacaka li::before{
  content:"";position:absolute;left:2px;top:16px;
  width:7px;height:7px;border-radius:50%;background:var(--slate-2);
}

.traka{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mist);border:1px solid var(--line);border-radius:99px;
  padding:6px 14px;font-size:13.5px;color:var(--slate);margin-bottom:22px;
}
.traka .tacka{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* ── Mobilni ───────────────────────────────────────────── */
@media (max-width:960px){
  .uvod-mreza,.stavka-mreza,.mreza.dve,.mreza.tri{grid-template-columns:1fr}
  .cene{grid-template-columns:repeat(2,1fr)}
  .dno-mreza{grid-template-columns:1fr 1fr}
  .veze{gap:14px}
  .veze a.sakrij{display:none}
}
@media (max-width:640px){
  .odeljak{padding:56px 0}
  .baner + .uvod{padding-top:34px}
  .cene{grid-template-columns:1fr}
  .dno-mreza{grid-template-columns:1fr}
  .red{grid-template-columns:1fr;gap:4px}
  .red .oznaka{padding-top:0}
}

/* ── Prekidač jezika ──────────────────────────────────────
   Bio je nenametljiv do te mere da se nije primećivao.
   Sada je pravi prekidač sa klizačem, jer se sa dva jezika
   ne bira sa spiska nego se prebacuje.                     */
.jezik{
  position:relative;display:inline-flex;gap:0;
  border:1px solid var(--line);border-radius:99px;
  padding:3px;background:var(--mist);
}
.jezik a{
  position:relative;z-index:2;
  padding:5px 14px;border-radius:99px;
  font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--slate-2);text-decoration:none;
  transition:color .2s ease;
}
.jezik a.aktivan{background:var(--ink);color:#fff}
.jezik a:not(.aktivan):hover{color:var(--ink)}

/* ── Načini plaćanja ──────────────────────────────────── */
.placanje{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.nacin{
  border:1px solid var(--line);border-radius:10px;padding:26px 24px;
  background:var(--paper);
}
.nacin.priprema{background:var(--mist)}
.nacin h3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.stanje{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:4px;font-weight:500;
}
.stanje.radi{background:var(--ok-bg);color:var(--ok)}
.stanje.uskoro{background:var(--mist);color:var(--slate-2);border:1px solid var(--line)}

.podaci{
  font-family:"IBM Plex Mono",monospace;font-size:13.5px;line-height:1.9;
  background:var(--mist);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;margin:14px 0 0;
}
.podaci dt{color:var(--slate-2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.podaci dd{margin:0 0 10px;color:var(--ink)}
.podaci dd:last-child{margin-bottom:0}

/* ── Pravne strane ────────────────────────────────────── */
.pravno{max-width:var(--tekst)}
.pravno h2{font-size:22px;margin:34px 0 12px}
.pravno h2:first-child{margin-top:0}
.pravno ol,.pravno ul{margin:0 0 17px 20px}
.pravno li{margin-bottom:7px;line-height:1.6}
.pravno .datum{
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--slate-2);
  padding-top:16px;border-top:1px solid var(--line);margin-top:34px;
}

@media (max-width:640px){
  .placanje{grid-template-columns:1fr}
}

/* ── Traka o kolačićima ───────────────────────────────────
   Stoji u uglu, ne preko sadržaja. Traka koja zaklanja tekst
   dok se ne klikne nije pitanje nego iznuda.                */
.kolacici{
  position:fixed;left:22px;bottom:22px;z-index:100;
  width:min(400px,calc(100vw - 44px));
  background:var(--paper);
  border:1px solid var(--line);border-radius:12px;
  padding:22px 22px 18px;
  box-shadow:0 2px 6px rgba(15,23,32,.06),0 22px 48px -20px rgba(15,23,32,.45);
  transform:translateY(14px);opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.kolacici.vidi{transform:translateY(0);opacity:1}
.kolacici.odlazi{transform:translateY(10px);opacity:0}

.kolacici h4{
  font-size:15px;margin:0 0 8px;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:9px;
}
.kolacici h4::before{
  content:"";width:8px;height:8px;border-radius:2px;
  background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);flex:none;
}
.kolacici p{
  font-size:13.5px;line-height:1.6;color:var(--slate);
  margin:0 0 16px;max-width:none;
}
.kolacici-dugmad{display:flex;gap:9px;flex-wrap:wrap}
.kolacici-dugmad .dugme{cursor:pointer;font-family:inherit}
.kolacici-veza{
  display:inline-block;margin-top:13px;
  font-size:12.5px;color:var(--slate-2);
}
.kolacici-veza:hover{color:var(--ink)}

@media (max-width:520px){
  .kolacici{left:14px;right:14px;bottom:14px;width:auto;padding:20px 18px 16px}
  .kolacici-dugmad .dugme{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .kolacici{transition:none;transform:none;opacity:1}
}

/* ══════════════════════════════════════════════════════════
   NALOG KUPCA

   Traka stoji ispod dva načina plaćanja, u odeljku .mrk, i
   obraća se čoveku koji je već platio. Zato je bela na sivoj
   pozadini, kao sestra kartica .nacin iznad nje, a ne poseban
   ukras. Tekst je poravnat levo kao i sve ostalo na sajtu:
   centrirani blok bi bio jedini takav i vukao bi pogled jače
   nego što ova poruka zaslužuje.
   ══════════════════════════════════════════════════════════ */
.nalog-traka{
  margin-top:20px;
  padding:26px 24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
}
.nalog-traka strong{
  display:block;
  margin-bottom:9px;
  font-family:"Space Grotesk","IBM Plex Sans",sans-serif;
  font-size:19px;font-weight:600;letter-spacing:-0.02em;
  color:var(--ink);
}
.nalog-traka p{
  margin-bottom:16px;
  font-size:15.5px;line-height:1.65;
  color:var(--slate);
}
.nalog-traka p:last-child{margin-bottom:0}

/* Ako traku prenesete na svetlu podlogu, van odeljka .mrk,
   beli okvir na beloj pozadini se izgubi, pa dobija sivu.   */
.odeljak:not(.mrk) .nalog-traka{background:var(--mist)}

@media (max-width:640px){
  .nalog-traka{padding:22px 18px}
  .nalog-traka .dugme{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════
   KUPOVINA

   Formular narudžbine i stranica potvrde. Sve stoji na istim
   promenljivama kao ostatak sajta, pa se boje i tipografija
   menjaju na jednom mestu.
   ══════════════════════════════════════════════════════════ */

.kupovina-mreza{
  display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;
  margin-top:8px;
}

/* ── Formular ──────────────────────────────────────────── */
.forma{max-width:none}
.forma .polje{margin-bottom:18px}
.forma .dva{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.forma label{
  display:block;margin-bottom:5px;
  font-size:14.5px;font-weight:600;color:var(--ink);
}

.forma input[type=text],
.forma input[type=email],
.forma textarea{
  width:100%;padding:11px 13px;
  font:inherit;font-size:15.5px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;
}
.forma textarea{resize:vertical;min-height:78px}

.forma input:focus,.forma textarea:focus{
  outline:2px solid var(--link);outline-offset:1px;border-color:var(--link);
}

.forma .pomoc{
  display:block;margin-top:5px;
  font-size:13.5px;line-height:1.55;color:var(--slate-2);
}

.losa-poruka{
  display:block;margin-top:5px;
  font-size:13.5px;color:var(--bad);font-weight:500;
}

/* Fizičko ili pravno lice */
.izbor{
  border:0;padding:0;margin:0 0 20px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.izbor legend{
  padding:0;margin-bottom:7px;
  font-size:14.5px;font-weight:600;color:var(--ink);float:left;width:100%;
}
.izbor label{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  padding:10px 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);cursor:pointer;font-weight:500;
}
.izbor label:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}

/* Saglasnosti */
.pristanak{
  margin-top:22px;padding:16px 18px;
  background:var(--mist);border:1px solid var(--line);border-radius:9px;
}
.pristanak label{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;
  font-weight:400;font-size:14.5px;line-height:1.55;color:var(--slate);
}
.pristanak label:last-of-type{margin-bottom:0}
.pristanak input{margin-top:3px;flex:none}

/* Polje koje vidi samo automat */
.skriveno{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Sažetak sa strane ─────────────────────────────────── */
.sazetak{
  border:1px solid var(--line);border-radius:11px;
  padding:22px 22px 18px;background:var(--mist);
  position:sticky;top:82px;
}
.sazetak h3{font-size:15px;margin-bottom:14px;color:var(--slate-2);
  font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.sazetak-red{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.sazetak-red strong{
  font-family:"Space Grotesk",sans-serif;font-size:22px;
  letter-spacing:-0.02em;white-space:nowrap;
}
.sazetak .sitno{margin:12px 0 0}
.sazetak-dno{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.valute{display:flex;gap:6px;margin-top:14px}
.valute a{
  padding:6px 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--paper);color:var(--slate-2);
  font-size:13px;font-weight:600;text-decoration:none;
}
.valute a.aktivna{background:var(--ink);color:#fff;border-color:var(--ink)}

.sitno{font-size:13.5px;line-height:1.6;color:var(--slate-2)}

/* ── Poruke ────────────────────────────────────────────── */
.poruka{
  padding:13px 16px;border-radius:9px;margin-bottom:20px;
  font-size:15px;max-width:var(--tekst);
}
.poruka.losa{background:var(--bad-bg);border:1px solid #f0bdb8;color:var(--bad)}
.poruka.dobra{background:var(--ok-bg);border:1px solid #a9d6bb;color:var(--ok)}

/* ── Potvrda narudžbine ────────────────────────────────── */
.uplata{
  border:1px solid var(--line);border-radius:11px;
  padding:22px 24px;background:var(--mist);margin-top:8px;
}
.uplata .podaci{margin:0;background:var(--paper)}

.kljuc-kutija{
  border:2px solid var(--ink);border-radius:11px;
  padding:20px 22px;background:var(--paper);margin:8px 0 4px;
}
.kljuc-kutija code{
  display:block;font-size:22px;letter-spacing:.06em;
  font-family:"IBM Plex Mono",monospace;word-break:break-all;
}

.koraci{margin:0;padding-left:22px;max-width:var(--tekst)}
.koraci li{margin-bottom:11px;line-height:1.65}

/* ── Mobilni ───────────────────────────────────────────── */
@media (max-width:900px){
  .kupovina-mreza{grid-template-columns:1fr}
  .sazetak{position:static;order:-1}
}
@media (max-width:560px){
  .forma .dva{grid-template-columns:1fr}
  .izbor label{flex:1;justify-content:center}
  .kljuc-kutija code{font-size:17px}
}