/* ===========================================================================
   VIDIK — stil
   Topla, papirnata osnova; ugljeni blokovi za kontrast; terakota akcent.
   Namerno bez okvira-svuda i bez sekcija-u-kutijama: ritam pravi tipografija
   i prazan prostor, ne borderi.
   =========================================================================== */

:root{
  --papir:#faf6f0;
  --papir2:#f2ebe1;
  --papir3:#e9dfd1;
  --ugalj:#171310;
  --ugalj2:#241e19;
  --linija:#e0d4c3;

  --tekst:#221d18;
  --tiho:#6f6358;
  --tise:#9a8d7f;

  --terra:#c0522c;
  --terra-tamna:#a3401f;
  --masl:#4e7c34;
  --zlato:#c99a2e;
  --indigo:#2f4858;

  --r:14px;
  --r-s:9px;
  --senka:0 1px 2px rgba(60,40,25,.05), 0 8px 30px rgba(60,40,25,.06);
  --senka-jaka:0 2px 4px rgba(60,40,25,.07), 0 24px 60px rgba(60,40,25,.12);

  --sirina:1180px;
  --prelaz:.5s cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papir);color:var(--tekst);
  font:16.5px/1.65 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

h1,h2,h3,h4{
  font-family:"Fraunces","Georgia","Times New Roman",serif;
  font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0
}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.03em}
h2{font-size:clamp(2rem,3.7vw,3rem);letter-spacing:-.02em}
h3{font-size:1.32rem}
p{margin:0 0 1.1em}
a{color:inherit}

.uvod{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--tiho);line-height:1.6}
.nadnaslov{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);margin-bottom:18px
}
.nadnaslov::before{content:"";width:26px;height:1px;background:var(--terra);opacity:.5}

.omot{max-width:var(--sirina);margin:0 auto;padding:0 28px}
.usko{max-width:760px}
section{position:relative}
.blok{padding:clamp(66px,9vw,120px) 0}
.blok-tanak{padding:clamp(44px,6vw,72px) 0}

/* --- tamni blokovi --- */
.mrak{background:var(--ugalj);color:#f0e7da}
.mrak h1,.mrak h2,.mrak h3{color:#fdfaf5}
.mrak .uvod,.mrak p{color:#b9ac9c}
.mrak .nadnaslov{color:#e08a5f}
.mrak .nadnaslov::before{background:#e08a5f}

/* ===========================  NAVIGACIJA  ============================= */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,240,.82);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s
}
.nav.zalepljen{border-bottom-color:var(--linija);box-shadow:0 6px 24px rgba(60,40,25,.05)}
.nav-red{display:flex;align-items:center;gap:36px;height:74px}

.znak{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
/* znak „V u dolini" (15.10.2026): slovo V od dve padine, sunce u useku -
   vidik = pogled do horizonta. Isti crtez kao kokpit public/znak.svg. */
.znak-ikona{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23c0522c'/%3E%3Cpath d='M5.5 11.5 16 24.5 26.5 11.5' fill='none' stroke='%23fbf3e8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='10.6' r='3.3' fill='%23fbf3e8'/%3E%3C/svg%3E") center/100% 100% no-repeat
}
.znak-ime{font-family:"Fraunces",Georgia,serif;font-size:1.32rem;font-weight:600;letter-spacing:-.02em}
.znak-ime span{color:var(--terra)}

.nav-veze{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-veze a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tiho);
  padding:9px 14px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap
}
.nav-veze a:hover{color:var(--tekst);background:var(--papir2)}
.nav-veze a.tu{color:var(--tekst);font-weight:600}
.nav-veze a.nav-ulaz{margin-left:10px}   /* odvaja akcije od menija */
.nav-veze a.tu::after{
  content:"";display:block;height:2px;background:var(--terra);
  border-radius:2px;margin:5px 2px -6px
}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:10px;border:1px solid transparent;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform .18s,box-shadow .25s,background .2s,color .2s;font-family:inherit
}
.dugme-glavni{background:var(--terra);color:#fff;box-shadow:0 2px 14px rgba(192,82,44,.3)}
.dugme-glavni:hover{background:var(--terra-tamna);transform:translateY(-2px);box-shadow:0 8px 26px rgba(192,82,44,.38)}
.dugme-tihi{background:transparent;color:var(--tekst);border-color:var(--linija)}
.dugme-tihi:hover{background:var(--papir2);border-color:var(--tise);transform:translateY(-2px)}
.dugme-svetli{background:#fdfaf5;color:var(--ugalj)}
.dugme-svetli:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dugme-obrub-svetli{background:transparent;color:#f0e7da;border-color:rgba(240,231,218,.28)}
.dugme-obrub-svetli:hover{background:rgba(240,231,218,.09);border-color:rgba(240,231,218,.5)}
.dugme-mali{padding:10px 18px;font-size:14px}

.meni-dugme{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.meni-dugme span{display:block;width:22px;height:2px;background:var(--tekst);border-radius:2px;margin:4px 0;transition:.3s}

/* ===============================  HERO  ============================== */
.hero{padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,110px);position:relative;overflow:hidden}
.hero-mreza{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.hero h1{margin-bottom:22px}
/* podvlaka je pozadina, ne ::after — tako se lomi zajedno sa tekstom i
   naslov nikad ne ulazi u mokap (ranije je white-space:nowrap guralo red preko) */
.hero h1 em{font-style:normal;color:var(--terra);
  background:linear-gradient(transparent 78%,rgba(192,82,44,.18) 78%,rgba(192,82,44,.18) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .uvod{max-width:30em;margin-bottom:30px}
.hero-akcije{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.hero-sitno{font-size:13.5px;color:var(--tise);display:flex;align-items:center;gap:8px}

/* aureola iza hera */
.aureola{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:-1
}
.aureola-1{width:520px;height:520px;background:#f0cdb8;top:-180px;right:-120px}
.aureola-2{width:380px;height:380px;background:#d9e3c9;bottom:-160px;left:-140px;opacity:.4}

/* ==========================  PANEL / MOKAP  ========================== */
.panel{
  background:#fffdfa;border:1px solid var(--linija);border-radius:var(--r);
  box-shadow:var(--senka-jaka);overflow:hidden
}
.panel-traka{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:var(--papir2);border-bottom:1px solid var(--linija)
}
.tacka{width:9px;height:9px;border-radius:50%;background:var(--papir3)}
.tacka:first-child{background:#e0a89a}
.panel-naslov{
  margin-left:8px;font-size:12px;color:var(--tise);font-weight:500;
  font-family:"JetBrains Mono",ui-monospace,Consolas,monospace
}
.panel-telo{padding:20px}

.kpi-red{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--papir2);border-radius:var(--r-s);padding:13px 14px}
.kpi-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tise);margin-bottom:5px}
.kpi-val{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.kpi-pod{font-size:11.5px;margin-top:3px;font-weight:600}
.rast{color:var(--masl)}
.pad{color:var(--terra)}

.graf-okvir{background:var(--papir2);border-radius:var(--r-s);padding:15px 14px 10px}
.graf-vrh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.graf-vrh b{font-size:13px}
.graf-vrh span{font-size:11.5px;color:var(--tise)}

/* ==========================  BROJEVI (count-up)  ===================== */
.brojke{border-top:1px solid var(--linija);border-bottom:1px solid var(--linija);background:var(--papir2)}
.brojke-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.brojka{padding:34px 26px;text-align:center;border-right:1px solid var(--linija)}
.brojka:last-child{border-right:0}
.brojka-val{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(2.1rem,3.6vw,2.9rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--terra)
}
.brojka-lab{font-size:13.5px;color:var(--tiho);margin-top:9px;line-height:1.45}
.mrak .brojka{border-color:rgba(240,231,218,.12)}
.mrak .brojka-val{color:#e08a5f}
.mrak .brojka-lab{color:#b9ac9c}

/* ==============================  KARTICE  ============================ */
.mreza{display:grid;gap:22px}
.m-2{grid-template-columns:repeat(2,1fr)}
.m-3{grid-template-columns:repeat(3,1fr)}
.m-4{grid-template-columns:repeat(4,1fr)}

.kartica{
  background:#fffdfa;border:1px solid var(--linija);border-radius:var(--r);
  padding:28px 26px;transition:transform var(--prelaz),box-shadow var(--prelaz),border-color .3s
}
.kartica:hover{transform:translateY(-4px);box-shadow:var(--senka);border-color:var(--papir3)}
.kartica h3{margin-bottom:9px}
.kartica p{color:var(--tiho);font-size:15px;margin:0}
.kartica-ikona{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--papir2);margin-bottom:17px;color:var(--terra)
}
.kartica-ikona svg{width:21px;height:21px;stroke-width:1.6}

.mrak .kartica{background:var(--ugalj2);border-color:rgba(240,231,218,.1)}
.mrak .kartica:hover{border-color:rgba(240,231,218,.22)}
.mrak .kartica-ikona{background:rgba(240,231,218,.07);color:#e08a5f}

/* nabrajanje sa kvačicom */
.spisak{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.spisak li{display:flex;gap:12px;align-items:flex-start;font-size:15.3px;color:var(--tiho)}
.spisak li::before{
  content:"";flex-shrink:0;width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:rgba(78,124,52,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e7c34' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat
}
.mrak .spisak li{color:#b9ac9c}

/* ==========================  PRE / POSLE  ============================ */
.uporedo{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center}
.strana{border-radius:var(--r);padding:26px;border:1px solid var(--linija);background:#fffdfa}
.strana-lose{background:var(--papir2);border-style:dashed}
.strana-oznaka{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;margin-bottom:15px
}
.oznaka-lose{background:rgba(192,82,44,.12);color:var(--terra-tamna)}
.oznaka-dobro{background:rgba(78,124,52,.14);color:var(--masl)}
.strelica{color:var(--tise);display:grid;place-items:center}
.strelica svg{width:30px;height:30px}

.korak{display:flex;gap:12px;align-items:flex-start;font-size:14.6px;color:var(--tiho);margin-bottom:11px}
.korak:last-child{margin-bottom:0}
.korak-br{
  flex-shrink:0;width:21px;height:21px;border-radius:6px;display:grid;place-items:center;
  background:var(--papir3);font-size:11.5px;font-weight:700;color:var(--tiho);margin-top:1px
}
.strana:not(.strana-lose) .korak-br{background:rgba(78,124,52,.15);color:var(--masl)}

/* ==========================  VAGA (kontrole)  ======================== */
.vaga{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:14px}
.tas{background:var(--papir2);border:1px solid var(--linija);border-radius:var(--r-s);padding:15px;text-align:center}
.tas.star{border-color:var(--terra);background:rgba(192,82,44,.07)}
.tas-ime{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tise)}
.tas-broj{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tas-sub{font-size:11.5px;color:var(--tise)}
.tas-datum{font-size:11.5px;color:var(--tiho);margin-top:5px}
.znak-star{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:99px;background:var(--terra);color:#fff;font-size:10px;font-weight:700}
.vaga-razlika{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:76px}
.vaga-razlika b{font-size:1.5rem;color:var(--terra);font-weight:700}
.vaga-razlika span{font-size:10.5px;color:var(--tise);text-transform:uppercase;letter-spacing:.06em}
.nalaz{
  padding:15px;border-radius:var(--r-s);text-align:center;
  background:rgba(192,82,44,.1);border:1px solid rgba(192,82,44,.28)
}
.nalaz b{display:block;font-size:1.72rem;color:var(--terra);font-weight:700;letter-spacing:-.02em}
.nalaz span{font-size:12.5px;color:var(--tiho)}

.tab-kontrola{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px}
.tab-kontrola th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tise);font-weight:600;padding:0 8px 7px;border-bottom:1px solid var(--linija)
}
.tab-kontrola td{padding:8px;border-bottom:1px solid var(--papir2)}
.tab-kontrola .desno{text-align:right;font-variant-numeric:tabular-nums}
.kljuc{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:11.5px}
.mat{display:inline-flex;gap:3px}
.c{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700}
.c.ima{background:rgba(78,124,52,.18);color:var(--masl)}
.c.nema{background:rgba(192,82,44,.18);color:var(--terra)}

/* ==============================  CENE  =============================== */
.cene{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.cena{
  background:#fffdfa;border:1px solid var(--linija);border-radius:var(--r);
  padding:32px 28px;position:relative;transition:transform var(--prelaz),box-shadow var(--prelaz)
}
.cena:hover{transform:translateY(-5px);box-shadow:var(--senka)}
.cena.istaknuta{border-color:var(--terra);box-shadow:var(--senka-jaka)}
.cena-znacka{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--terra);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:99px;white-space:nowrap
}
.cena-ime{font-size:1.16rem;font-weight:700;margin-bottom:5px}
.cena-opis{font-size:13.5px;color:var(--tise);margin-bottom:20px;min-height:2.9em}
.cena-iznos{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.cena-iznos b{font-family:"Fraunces",Georgia,serif;font-size:2.9rem;font-weight:600;letter-spacing:-.03em}
.cena-iznos span{color:var(--tise);font-size:14px}
.cena-nota{font-size:12.5px;color:var(--tise);margin-bottom:22px}
.cena .spisak{margin-bottom:24px}
.cena .spisak li{font-size:14.2px}

/* ==============================  PITANJA  ============================ */
.pitanje{border-bottom:1px solid var(--linija)}
.pitanje summary{
  cursor:pointer;padding:21px 40px 21px 0;font-weight:600;font-size:16.5px;
  list-style:none;position:relative;transition:color .2s
}
.pitanje summary::-webkit-details-marker{display:none}
.pitanje summary:hover{color:var(--terra)}
.pitanje summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--tise);border-bottom:2px solid var(--tise);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s
}
.pitanje[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pitanje-telo{padding:0 40px 23px 0;color:var(--tiho);font-size:15.3px}
.pitanje-telo p:last-child{margin-bottom:0}

/* ==============================  CITAT  ============================== */
.citat{max-width:830px;margin:0 auto;text-align:center}
.citat blockquote{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.3rem,2.5vw,1.85rem);
  line-height:1.42;margin:0 0 26px;letter-spacing:-.015em
}
.citat-ko{display:flex;align-items:center;justify-content:center;gap:13px}
.citat-slovo{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--terra),#e08a5f);color:#fff;
  font-weight:700;font-size:16px
}
.citat-ime{text-align:left;font-size:14.4px}
.citat-ime b{display:block}
.citat-ime span{color:var(--tise);font-size:13px}

/* ===============================  CTA  =============================== */
.cta{text-align:center;max-width:680px;margin:0 auto}
.cta h2{margin-bottom:16px}
.cta-akcije{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ==============================  FORMA  ============================== */
.polje{margin-bottom:17px}
.polje label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.polje input,.polje textarea,.polje select{
  width:100%;padding:12px 14px;border:1px solid var(--linija);border-radius:var(--r-s);
  font:15px/1.5 inherit;background:#fffdfa;color:var(--tekst);transition:border-color .2s,box-shadow .2s
}
.polje input:focus,.polje textarea:focus,.polje select:focus{
  outline:0;border-color:var(--terra);box-shadow:0 0 0 3px rgba(192,82,44,.12)
}
.polje textarea{resize:vertical;min-height:120px}
.forma-poruka{
  margin-top:15px;padding:13px 16px;border-radius:var(--r-s);font-size:14.3px;
  background:rgba(78,124,52,.12);border:1px solid rgba(78,124,52,.3);color:#3d6228
}

/* ==============================  PODNOŽJE  =========================== */
.podnozje{background:var(--ugalj);color:#9c8f80;padding:60px 0 32px;font-size:14.3px}
.podnozje-mreza{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:44px}
.podnozje h4{color:#fdfaf5;font-family:inherit;font-size:12px;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:17px;font-weight:700}
.podnozje a{color:#9c8f80;text-decoration:none;display:block;padding:5px 0;transition:color .2s}
.podnozje a:hover{color:#e08a5f}
.podnozje .znak-ime{color:#fdfaf5}
.podnozje-o{max-width:29em;line-height:1.6;margin-top:15px;color:#7f7365}
.podnozje-dno{
  border-top:1px solid rgba(240,231,218,.11);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#6f6458
}

/* =========================  ANIMACIJA NA SKROL  ====================== */
.pojava{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.pojava.vidljiv{opacity:1;transform:none}
.pojava.k1{transition-delay:.08s}
.pojava.k2{transition-delay:.16s}
.pojava.k3{transition-delay:.24s}
.pojava.k4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .pojava{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==============================  ZAGLAVLJE STRANE  =================== */
.strana-vrh{padding:clamp(48px,6vw,80px) 0 clamp(34px,4vw,54px)}
.strana-vrh h1{max-width:16em;margin-bottom:18px}
.strana-vrh .uvod{max-width:44em}

/* ==============================  RESPONZIVNO  ======================== */
@media (max-width:1000px){
  .hero-mreza{grid-template-columns:1fr;gap:44px}
  .m-4{grid-template-columns:repeat(2,1fr)}
  .brojke-mreza{grid-template-columns:repeat(2,1fr)}
  .brojka:nth-child(2){border-right:0}
  .brojka:nth-child(-n+2){border-bottom:1px solid var(--linija)}
  .podnozje-mreza{grid-template-columns:1fr 1fr;gap:32px}
  .cene{grid-template-columns:1fr;max-width:460px;margin:0 auto}
}
@media (max-width:820px){
  .nav-veze{
    position:fixed;inset:74px 0 auto;flex-direction:column;gap:0;
    background:var(--papir);border-bottom:1px solid var(--linija);
    padding:12px 22px 22px;display:none;box-shadow:0 14px 30px rgba(60,40,25,.09)
  }
  .nav-veze.otvoren{display:flex}
  .nav-veze a{padding:13px 4px;font-size:16px;width:100%}
  .nav-veze a.tu::after{display:none}
  .nav-veze .dugme{margin-top:10px;width:100%}
  .meni-dugme{display:block}
  .m-2,.m-3{grid-template-columns:1fr}
  .uporedo{grid-template-columns:1fr;gap:18px}
  .strelica{transform:rotate(90deg)}
  .vaga{grid-template-columns:1fr}
  .tab-okvir{overflow-x:auto}
}
@media (max-width:560px){
  .m-4{grid-template-columns:1fr}
  .kpi-red{grid-template-columns:1fr 1fr}
  .kpi-red .kpi:last-child{grid-column:1/-1}
  .podnozje-mreza{grid-template-columns:1fr}
  .omot{padding:0 20px}
}

/* --- ispravke ---------------------------------------------------------
   `.nav-veze a` je specifičniji od `.dugme-glavni`, pa je jeo belu boju
   teksta na dugmetu u navigaciji.                                       */
.nav-veze a.dugme-glavni{color:#fff}
.nav-veze a.dugme-glavni:hover{color:#fff;background:var(--terra-tamna)}
.nav-veze a.dugme{border-radius:10px}

/* stubići u mokapu ne smeju da prelaze preko ivice panela */
.panel-telo .stub{min-height:3px}

/* Stavka spiska mora da teče kao običan tekst: sa `display:flex` svaki <b>
   postaje zaseban flex-item, pa se podebljani početak lomi u svoj red.     */
.spisak li{display:block;position:relative;padding-left:31px}
.spisak li::before{position:absolute;left:0;top:3px;margin:0}

/* Odakle brojevi u mokapu — sitno ispod panela, da ilustracija ne izgleda
   kao izmišljena. */
.mokap-izvor{
  margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--tise);text-align:center;
}
.mokap-izvor a{color:var(--terra);text-decoration:none;font-weight:600}
.mokap-izvor a:hover{text-decoration:underline}

/* =======================================================================
   TELEFON — sadrzaj ne sme da izlazi iz ekrana
   -----------------------------------------------------------------------
   Mereno 25.09.2026 na sirini 320 px: sadrzaj je bio 375 px sirok, a 76
   elemenata je izlazilo van ekrana. Kako se ne bi videlo, `body` je imao
   `overflow-x:hidden` — to je sakrivalo posledicu, ne uzrok: tekst je
   ostajao odsecen, a covek nije mogao ni da doskroluje do njega.

   Tri uzroka, svaki resen ispod:

     1. grid i flex stavke se po standardu NE skupljaju ispod svog sadrzaja
        (`min-width:auto`), pa jedno dugme ili duga rec izgura celu mrezu
     2. dekorativni krugovi su fiksnih 520 px
     3. `clamp()` za naslove ima FIKSNU donju granicu (2.6rem = 41.6px),
        pa ispod ~740 px sirine `vw` deo vise ne radi nista
   ======================================================================= */

/* --- 1. stavke smeju da se skupe ------------------------------------- */
.hero-mreza > *, .m-2 > *, .m-3 > *, .m-4 > *,
.uporedo > *, .podnozje-mreza > *, .kpi-red > *,
.contact-layout > *, .vaga > * { min-width: 0 }

@media (max-width:560px){
  /* --- 2. dekoracija se sklanja, nije sadrzaj --- */
  .aureola { display: none }

  /* --- 3. naslovi srazmerni ekranu --- */
  h1 { font-size: clamp(1.95rem, 8.2vw, 4.4rem) }
  h2 { font-size: clamp(1.55rem, 6.4vw, 3rem) }
  h3 { font-size: clamp(1.15rem, 4.8vw, 1.6rem) }

  /* --- 4. dugmad preko cele sirine umesto da izlaze --- */
  .hero-akcije { flex-direction: column; align-items: stretch }
  .hero-akcije .dugme { width: 100%; text-align: center }

  /* --- 5. duge reci (sifre, adrese, nazivi kolona) se lome --- */
  h1, h2, h3, p, li, td, th { overflow-wrap: break-word }

  /* Kod i oznake dokumenata ne smeju da nose ceo red van ekrana. */
  code, .oznaka { overflow-wrap: anywhere }
}

/* --- 6. sto nikad ne staje, dobija svoj skrol ----------------------- */
.tab-okvir, .tabela-okvir { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* „Preuzmi konektor" u meniju: da se ne traži po podnožju */
.nav-veze a.nav-preuzmi{display:inline-flex;align-items:center;gap:6px}
.nav-veze a.nav-preuzmi::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3v12M7 10l5 5 5-5M5 21h14%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3v12M7 10l5 5 5-5M5 21h14%27/%3E%3C/svg%3E") center/contain no-repeat}
.nav-veze a.nav-preuzmi[hidden]{display:none}
/* između 821 i 1180px nema mesta za ceo natpis — ostaje samo strelica */
@media (min-width:821px) and (max-width:1180px){
  .nav-veze a.nav-preuzmi{font-size:0;gap:0;padding-left:8px;padding-right:8px}
  .nav-veze a.nav-preuzmi::before{width:17px;height:17px}
}

/* mrlja iza naslova podstrane virila je 120px van ekrana */
.strana-vrh{overflow-x:clip}
.hero{overflow-x:clip}
@media (min-width:821px) and (max-width:920px){
  .nav-veze{gap:2px}
  .nav-veze a{padding-left:7px;padding-right:7px}
}

/* ---------- prodavnica: koraci „napravite je sami" ---------- */
.koraci-shop{list-style:none;counter-reset:k;margin:0;padding:0;display:grid;gap:14px}
.koraci-shop > li{counter-increment:k;position:relative;padding:22px 24px 20px 78px;background:var(--papir);border:1px solid var(--linija);border-radius:var(--r)}
.koraci-shop > li::before{content:counter(k);position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:50%;
  background:var(--terra);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.koraci-shop h3{margin:4px 0 8px;font-size:19px}
.koraci-shop p{margin:0 0 10px;color:var(--tiho);line-height:1.65}
.koraci-shop p:last-child{margin-bottom:0}
.koraci-shop .spisak{margin:6px 0 12px;gap:8px}
.koraci-shop code{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:.92em;background:var(--papir2);padding:1px 6px;border-radius:5px}
.koraci-shop a{color:var(--terra-tamna)}
.tiho-red{font-size:14px;color:var(--tise) !important}
@media (max-width:640px){
  .koraci-shop > li{padding:60px 18px 18px}
  .koraci-shop > li::before{left:18px;top:16px}
}
/* znak Izloga (15.10.2026) - ista porodica kao Vidikov, skriljac umesto terakote */
.nadnaslov:has(.znak-izlog)::before{display:none}
.znak-izlog{flex:none;border-radius:6px}