/* ==========================================================================
   SOLARNO SRCE — solar.css
   Jedan stil za ceo solarni deo sajta.
   Sve boje i mere menjaš SAMO u :root ispod.
   v1.0 · 18.10.2026
   ========================================================================== */

/* --- 1. RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* --- 2. BOJE / FONTOVI / MERE -------------------------------------------- */
:root{
  /* pozadine */
  --sand:#F6F7F8;        /* osnovna — neutralna svetla siva */
  --sand-2:#ECEFF1;      /* naizmenične sekcije, malo tamnija */
  --paper:#FFFFFF;       /* kartice — čisto belo da iskoče sa sive */
  /* tekst */
  --ink:#15211B;
  --text:#31403A;
  --muted:#5E6F67;
  /* zelena */
  --green-900:#0D2A1D;
  --green-800:#123A27;
  --green-700:#1C5636;
  --green-600:#2A7548;
  --green-100:#E3EFE6;
  /* sunce */
  --sun:#E2922B;
  --sun-600:#C47816;
  --sun-100:#FBEAD3;
  /* voda */
  --water:#1B4E63;
  /* linije — hladnije, da se slažu sa sivom */
  --line:#E3E7EA;
  --line-2:#C9D0D5;

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1120px;
  --r:14px;
  --r-sm:9px;
  --sh:0 1px 2px rgba(21,33,27,.04),0 10px 24px -18px rgba(21,33,27,.35);
  --sh-lg:0 40px 70px -40px rgba(13,42,29,.45);
  --sec:clamp(3rem,7vw,5.5rem);
  --gap:clamp(1rem,2.4vw,1.6rem);
}

/* --- 3. OSNOVA ----------------------------------------------------------- */
body{
  font-family:var(--sans);
  font-size:clamp(16.5px,.5vw + 15.4px,18px);
  line-height:1.72;
  color:var(--text);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.2;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.95rem,4.2vw,3.05rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem)}
h3{font-size:clamp(1.12rem,1.5vw,1.28rem)}
p+p{margin-top:.9em}
strong,b{color:var(--ink);font-weight:600}
a.link{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.link:hover{color:var(--sun-600)}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- 4. RASPORED --------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(2rem,4vw,3rem)}
.section--alt{background:var(--sand-2)}
.section--dark{background:var(--green-900);color:#D9E4DC}
.section--dark h2,.section--dark h3{color:#FBF7EF}
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.sec-head{max-width:62ch;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:.7rem;color:var(--muted)}
.section--dark .sec-head p{color:#A9BDB1}

/* --- 5. GORNJA TRAKA ----------------------------------------------------- */
.topbar{background:var(--green-900);color:#A9BDB1;font-size:.79rem;letter-spacing:.02em}
.topbar__in{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-block:.5rem;flex-wrap:wrap}
.topbar a{color:#D9E4DC}
.topbar a:hover{color:var(--sun)}

/* --- 6. HEDER + NAVIGACIJA ---------------------------------------------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.65rem}
.brand__mark{width:44px;height:44px;flex:none;color:var(--green-800)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--serif);font-weight:700;font-size:1.12rem;letter-spacing:.04em;color:var(--green-900)}
.brand__name em{font-style:normal;color:var(--sun-600)}
.brand__sub{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:.22rem}

.nav-cb{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:none;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-burger i{display:block;width:20px;height:2px;background:var(--green-900);border-radius:2px}

.nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.nav__a{padding:.55rem .72rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap}
.nav__a:hover{background:var(--green-100);color:var(--green-800)}
.nav__a.is-active{color:var(--green-800);font-weight:600;box-shadow:inset 0 -2px 0 var(--sun)}
.nav__a--cross{margin-left:.4rem;background:var(--sun);color:#3A2506;font-weight:600}
.nav__a--cross:hover{background:var(--sun-600);color:#fff}

@media (max-width:900px){
  .nav-burger{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
       border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
       padding:.6rem clamp(1rem,4vw,2rem) 1rem;box-shadow:var(--sh)}
  .nav-cb:checked ~ .nav{display:flex}
  .nav__a{padding:.7rem .5rem;font-size:1rem}
  .nav__a--cross{margin-left:0;text-align:center;margin-top:.4rem}
}

/* --- 7. DUGMAD ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.82rem 1.4rem;border-radius:999px;
     font-weight:600;font-size:.95rem;border:1.5px solid transparent;transition:.15s ease;cursor:pointer}
.btn--primary{background:var(--green-700);color:#fff}
.btn--primary:hover{background:var(--green-800);transform:translateY(-1px)}
.btn--sun{background:var(--sun);color:#3A2506}
.btn--sun:hover{background:var(--sun-600);color:#fff;transform:translateY(-1px)}
.btn--ghost{border-color:rgba(251,247,239,.38);color:#FBF7EF}
.btn--ghost:hover{border-color:var(--sun);color:var(--sun)}
.btn--sm{padding:.6rem 1.05rem;font-size:.86rem}

/* --- 8. HERO ------------------------------------------------------------- */
.hero{background:var(--green-900);color:#D9E4DC;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(226,146,43,.16),transparent 62%);pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.8rem)}
.eyebrow{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--sun)}
h1{color:#FBF7EF}
.hero__lead{margin-top:1rem;font-size:clamp(1rem,1.3vw,1.12rem);color:#B9CCC2;max-width:52ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.hero__note{margin-top:1.1rem;font-size:.88rem;color:#93A89C}
.hero__note a{color:var(--sun);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.hero__in{grid-template-columns:1fr}}

/* --- 9. KARTICE ---------------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,2vw,1.5rem);box-shadow:var(--sh)}
.card--dark{background:rgba(251,247,239,.055);border-color:rgba(251,247,239,.14);color:#C3D4C9;box-shadow:none}

/* --- 10. INFOGRAFIKA: tok struje (hero) --------------------------------- */
.flow__title{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sun);margin-bottom:1rem;font-family:var(--sans);font-weight:600}
.flow li{display:flex;gap:.85rem;align-items:flex-start;padding:.62rem 0;position:relative}
.flow li+li{border-top:1px dashed rgba(251,247,239,.15)}
.flow__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun);color:#3A2506;
  font-size:.8rem;font-weight:700;display:grid;place-items:center;margin-top:.12rem}
.flow b{display:block;color:#FBF7EF;font-size:.97rem;font-weight:600}
.flow small{display:block;font-size:.83rem;color:#93A89C;line-height:1.45}
.flow__foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(251,247,239,.14);font-size:.84rem;color:var(--sun);font-weight:500}

/* --- 11. PLOČICE (kome je namenjeno / komponente) ------------------------ */
.tile{display:flex;flex-direction:column;gap:.55rem;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--green-600);border-radius:var(--r);padding:clamp(1.1rem,2vw,1.5rem);
  box-shadow:var(--sh);transition:.18s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-top-color:var(--sun)}
.tile__icon{width:34px;height:34px;color:var(--green-700)}
.tile h3{font-size:1.06rem}
.tile p{font-size:.92rem;color:var(--muted);flex:1}
.tile__link{font-size:.85rem;font-weight:600;color:var(--green-700)}
.tile:hover .tile__link{color:var(--sun-600)}

/* --- 12. KORACI ---------------------------------------------------------- */
.step{position:relative;padding-left:3.1rem}
.step__n{position:absolute;left:0;top:-.15rem;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--green-100);color:var(--green-800);border:1px solid var(--green-600);
  display:grid;place-items:center;font-weight:700;font-size:.92rem;font-family:var(--serif)}
.step h3{margin-bottom:.35rem}
.step p{font-size:.93rem;color:var(--muted)}

/* --- 13. ŠEME (galerija) ------------------------------------------------- */
.scheme{display:flex;flex-direction:column;gap:.6rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1rem,2vw,1.35rem);box-shadow:var(--sh);transition:.18s ease}
.scheme:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.scheme__chain{display:flex;align-items:center;gap:.45rem;color:var(--green-700);flex-wrap:wrap}
.scheme__chain svg{width:22px;height:22px;flex:none}
.scheme__chain span[aria-hidden]{color:var(--line-2);font-size:.9rem;line-height:1}
.scheme h3{font-size:1.03rem}
.scheme p{font-size:.9rem;color:var(--muted);flex:1}
.scheme__chips{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.15rem}
.chip{font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:.2rem .55rem;border-radius:999px;
  background:var(--green-100);color:var(--green-800)}
.chip--sun{background:var(--sun-100);color:var(--sun-600)}

/* --- 14. MIT / ISTINA (LiFePO4 blok) ------------------------------------ */
.myth{display:flex;gap:.9rem;padding:1rem 0}
.myth+.myth{border-top:1px solid rgba(251,247,239,.13)}
.myth__x,.myth__v{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.86rem;margin-top:.1rem}
.myth__x{background:rgba(226,146,43,.16);color:var(--sun)}
.myth__v{background:rgba(163,214,180,.16);color:#A8D8B8}
.myth b{display:block;color:#FBF7EF;font-size:.97rem}
.myth p{font-size:.9rem;color:#A9BDB1;margin-top:.15rem}

/* --- 15. O NAMA ---------------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:800px){.about{grid-template-columns:1fr}}
.about__facts{list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,2vw,1.4rem);box-shadow:var(--sh)}
.about__facts li{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;font-size:.9rem}
.about__facts li+li{border-top:1px solid var(--line)}
.about__facts b{color:var(--green-800);font-family:var(--serif);font-size:1rem}

/* --- 16. CTA ------------------------------------------------------------- */
.cta{background:var(--green-800);color:#C3D4C9;border-radius:var(--r);padding:clamp(1.6rem,4vw,2.8rem);text-align:center}
.cta h2{color:#FBF7EF}
.cta p{max-width:56ch;margin:.7rem auto 0}
.cta__btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}

/* --- 17. OBRAZAC ČLANKA (koristićeš u svakoj strani) -------------------- */
.prose{max-width:70ch}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.7em}
.prose p{margin-top:.85em}
.prose ul,.prose ol{margin-top:.9em;padding-left:1.2rem}
.prose ul li{list-style:none;position:relative;padding-left:1.1rem;margin-top:.45em}
.prose ul li::before{content:"•";position:absolute;left:0;color:var(--sun);font-weight:700}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:1.6rem;margin-top:.5em}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:.15em;
  width:1.25rem;height:1.25rem;border-radius:50%;background:var(--green-100);color:var(--green-800);
  font-size:.72rem;font-weight:700;display:grid;place-items:center}
.prose a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px}

/* --- 18. TABELA (infografika za poređenja) ------------------------------ */
.table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.table{min-width:520px;font-size:.9rem}
.table th,.table td{padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.table thead th{background:var(--green-900);color:#FBF7EF;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;white-space:nowrap}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:nth-child(even){background:var(--sand)}
.table strong{color:var(--green-800)}
.table .yes{color:var(--green-700);font-weight:700}
.table .no{color:#B4442B;font-weight:700}

/* --- 19. NAPOMENE / UPOZORENJA ------------------------------------------ */
.note{background:var(--green-100);border-left:3px solid var(--green-600);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.2rem;margin:1.5rem 0;font-size:.93rem}
.note b{display:block;margin-bottom:.2rem;color:var(--green-800)}
.note--warn{background:var(--sun-100);border-left-color:var(--sun)}
.note--warn b{color:var(--sun-600)}

/* --- 20. FUTER ----------------------------------------------------------- */
.site-foot{background:var(--green-900);color:#93A89C;padding-block:clamp(2.2rem,5vw,3.4rem) 1.4rem;font-size:.88rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.4rem,4vw,2.6rem)}
.site-foot h4{color:#FBF7EF;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem}
.site-foot a{color:#C3D4C9}
.site-foot a:hover{color:var(--sun)}
.site-foot li+li{margin-top:.42rem}
.foot__brand p{max-width:38ch;margin-top:.7rem;line-height:1.65}
.foot__bottom{margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.1rem;border-top:1px solid rgba(251,247,239,.13);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.79rem;color:#7B8E85}
  /* ==========================================================================
   DODACI ZA UNUTRAŠNJE STRANE
   21. Zaglavlje strane  22. Kalkulator  23. Šema/figura
   24. Bilans (trake)    25. Savet u rezultatu
   ========================================================================== */

/* --- 21. ZAGLAVLJE UNUTRAŠNJE STRANICE ---------------------------------- */
.page-head{background:var(--green-900);color:#C3D4C9;padding-block:clamp(1.8rem,4.5vw,3.2rem)}
.page-head h1{color:#FBF7EF;margin-top:.4rem}
.page-head__lead{margin-top:.9rem;max-width:60ch;color:#A9BDB1;font-size:clamp(.98rem,1.2vw,1.08rem)}
.crumbs{font-size:.8rem;color:#7B8E85}
.crumbs a{color:#A9BDB1}
.crumbs a:hover{color:var(--sun)}
.crumbs em{font-style:normal;margin-inline:.45rem;opacity:.45}
.page-next{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--line)}

/* --- 22. KALKULATOR ------------------------------------------------------ */
.calc-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(1.2rem,3vw,2rem);align-items:start;margin-top:2rem}
@media (max-width:900px){.calc-layout{grid-template-columns:1fr}}

.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.calc__table{width:100%}
.calc__table th{padding:.7rem .8rem;text-align:left;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:#D9E4DC;background:var(--green-900);font-weight:600;white-space:nowrap}
.calc__table th:nth-child(2),.calc__table th:nth-child(3){width:110px}
.calc__table th:nth-child(4){width:112px;text-align:right}
.calc__table th:last-child{width:38px}
.calc__table td{padding:.45rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.calc__table tbody tr:last-child td{border-bottom:none}
.calc__table input{width:100%;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font-size:.95rem;font-variant-numeric:tabular-nums;transition:.12s}
.calc__table input:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100)}
.calc__table input[type="number"]{text-align:right;font-weight:600;color:var(--green-900)}
.calc__out{text-align:right;font-weight:700;color:var(--green-800);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__x{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:none;
  color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.calc__x:hover{border-color:#B4442B;color:#B4442B;background:#FBEDEA}
.calc__foot{display:flex;gap:.6rem;flex-wrap:wrap;padding:.9rem 1rem;background:var(--sand-2);
  border-top:1px solid var(--line)}
.btn--plain{border-color:var(--line-2);color:var(--green-800);background:var(--paper)}

@media (max-width:700px){
  .calc__table thead{display:none}
  .calc__table,.calc__table tbody,.calc__table tr,.calc__table td{display:block;width:auto}
  .calc__table tr{padding:.85rem 1rem;border-bottom:1px solid var(--line);position:relative}
  .calc__table td{border:none;padding:.22rem 0;display:flex;align-items:center;
    justify-content:space-between;gap:1rem}
  .calc__table td::before{content:attr(data-label);font-size:.71rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);font-weight:600}
  .calc__table td:first-child{display:block;padding-right:2.2rem}
  .calc__table td:first-child::before{display:none}
  .calc__table td:first-child input{text-align:left}
  .calc__table td:last-child{position:absolute;top:.6rem;right:.6rem;padding:0}
  .calc__table td:last-child::before{display:none}
  .calc__table td:nth-child(2) input,.calc__table td:nth-child(3) input{max-width:9rem}
}

.calc-res{background:var(--green-900);color:#C3D4C9;border-radius:var(--r);
  padding:clamp(1.2rem,2.5vw,1.7rem);position:sticky;top:92px;box-shadow:var(--sh-lg)}
@media (max-width:900px){.calc-res{position:static}}
.calc-res__lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sun);font-weight:600}
.calc-res__big{font-family:var(--serif);font-size:clamp(2.1rem,4vw,2.7rem);line-height:1.1;
  color:#FBF7EF;margin-top:.4rem;font-variant-numeric:tabular-nums}
.calc-res__big small{font-size:.9rem;font-family:var(--sans);font-weight:500;color:#93A89C;
  letter-spacing:.04em;margin-left:.25rem}
.calc-res__sub{font-size:.86rem;color:#93A89C;margin-top:.2rem}
.calc-res__list{margin-top:1.1rem;border-top:1px solid rgba(251,247,239,.14)}
.calc-res__list li{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;
  font-size:.87rem;border-bottom:1px solid rgba(251,247,239,.09)}
.calc-res__list b{color:#FBF7EF;font-weight:600;white-space:nowrap}
.calc-res__days{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.85rem}
.calc-res__days select{background:rgba(251,247,239,.08);border:1px solid rgba(251,247,239,.25);
  color:#FBF7EF;border-radius:var(--r-sm);padding:.32rem .5rem;font-size:.85rem}
.calc-res__days select option{color:#15211B;background:#fff}
.calc-res__note{font-size:.78rem;color:#7B8E85;margin-top:1rem;line-height:1.55}

/* --- 23. FIGURA / ŠEMA --------------------------------------------------- */
.figure{margin:2rem 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(.7rem,2vw,1.3rem);box-shadow:var(--sh)}
.figure__scroll{overflow-x:auto}
.figure svg{display:block;width:100%;min-width:760px;height:auto}
.figure figcaption{margin-top:.9rem;font-size:.85rem;color:var(--muted);max-width:72ch;
  border-top:1px solid var(--line);padding-top:.8rem}

/* --- 24. BILANS: traka u tabeli ----------------------------------------- */
.meter{position:relative;height:20px;min-width:130px;background:var(--sand-2);
  border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.meter i{position:absolute;top:0;bottom:0;left:0;border-radius:4px 0 0 4px}
.meter i.ok{background:linear-gradient(90deg,#2A7548,#4A9C68)}
.meter i.low{background:linear-gradient(90deg,#C47816,#E2922B)}
.meter i.bad{background:linear-gradient(90deg,#A83A22,#CE5A3C)}
.meter span{position:absolute;left:.5rem;top:50%;transform:translateY(-50%);
  font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums}
.meter--empty span{color:var(--muted);text-shadow:none}
.bilans{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bilans.up{color:var(--green-700)}
.bilans.down{color:#B4442B}

/* --- 25. SAVET U REZULTATU KALKULATORA ---------------------------------- */
.calc-res__hint{margin-top:1rem;padding:.75rem .85rem;border-radius:var(--r-sm);
  background:rgba(226,146,43,.14);border-left:3px solid var(--sun);
  font-size:.83rem;line-height:1.55;color:#F0E3D2}
 /* --- 26. STRANA SISTEMI: galerija šema ---------------------------------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.scheme--live{border-color:var(--green-600)}
.scheme--soon{border-style:dashed;box-shadow:none}
.scheme--soon:hover{transform:none;box-shadow:none}
.scheme--soon .scheme__chain{color:var(--muted)}
.scheme h3 a:hover{color:var(--green-700)}
.scheme__link{font-size:.85rem;font-weight:600;color:var(--green-700)}
.scheme__link:hover{color:var(--sun-600)}
.scheme__state{font-size:.75rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}

/* brend u futeru — futer je tamnozelen, ime mora svetlo */
.site-foot .brand__mark{color:#FBF7EF}
.site-foot .brand__name{color:#FBF7EF}
.site-foot .brand__name em{color:var(--sun)}
.site-foot .brand__sub{color:#93A89C}

/* ==========================================================================
   26. DODACI ZA UNUTRAŠNJE STRANE — KONAČAN BLOK, VIŠE SE NE MENJA
   Sve strane koriste samo klase iz blokova 1–26.
   ========================================================================== */

/* --- 26.1 Galerija šema: gotovo / u pripremi ---------------------------- */
.scheme--live{border-color:var(--green-600)}
.scheme--soon{border-style:dashed;box-shadow:none}
.scheme--soon:hover{transform:none;box-shadow:none}
.scheme--soon .scheme__chain{color:var(--muted)}
.scheme h3 a:hover{color:var(--green-700)}
.scheme__link{font-size:.85rem;font-weight:600;color:var(--green-700)}
.scheme__link:hover{color:var(--sun-600)}
.scheme__state{font-size:.75rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}

/* --- 26.2 Brend u futeru (futer je tamnozelen) -------------------------- */
.site-foot .brand__mark{color:#FBF7EF}
.site-foot .brand__name{color:#FBF7EF}
.site-foot .brand__name em{color:var(--sun)}
.site-foot .brand__sub{color:#93A89C}

/* --- 26.3 Brojevi (KPI) ------------------------------------------------- */
.kpis{display:grid;gap:var(--gap);margin:1.6rem 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;box-shadow:var(--sh);border-top:3px solid var(--green-600)}
.kpi b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.15;color:var(--green-800)}
.kpi span{display:block;font-size:.8rem;line-height:1.45;color:var(--muted);margin-top:.3rem}

/* --- 26.4 Grafikon: SVG u figuri sme da se skupi ------------------------ */
.figure svg.chart{min-width:0;width:100%;max-width:640px;margin-inline:auto}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.8rem;
  font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:.4rem;vertical-align:-1px}

/* --- 26.5 Zaštita od horizontalnog skrola (mobilni) --------------------- */
html{overflow-x:hidden}
body{overflow-x:clip}
.grid{min-width:0}
.grid > *{min-width:0}
.scheme{min-width:0}
.scheme h3,.scheme p,.scheme__chips,.scheme__link{min-width:0;overflow-wrap:anywhere}
.figure{max-width:100%;min-width:0}

@media (max-width:560px){
  .site-head__in{gap:.7rem}
  .brand__mark{width:36px;height:36px}
  .brand__name{font-size:1rem;letter-spacing:.02em}
  .brand__sub{font-size:.61rem;letter-spacing:.07em;margin-top:.15rem}
  .page-head{padding-block:1.5rem}
  .page-head h1{font-size:clamp(1.45rem,6.2vw,1.85rem);line-height:1.22}
  .nav{max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
  .scheme__chips{gap:.28rem}
  .chip{font-size:.69rem;padding:.18rem .48rem}
  .cta__btns .btn{width:100%;justify-content:center}
  .foot__bottom{flex-direction:column;gap:.45rem}
  .kpis{grid-template-columns:1fr 1fr}
}
/* --- 26.6 Privremeni alias: stare strane koriste .flowtxt, sad .prose --- */
.flowtxt{max-width:70ch}
.flowtxt > * + *{margin-top:1em}
.flowtxt ul{padding-left:1.2rem}
.flowtxt ul li{list-style:none;position:relative;padding-left:1.1rem;margin-top:.4em}
.flowtxt ul li::before{content:"•";position:absolute;left:0;color:var(--sun);font-weight:700}


/* --- 27. POPRAVKA: strong/b i linkovi na tamnim površinama --------------- */
.section--dark strong,
.section--dark b,
.card--dark strong,
.card--dark b,
.hero strong,
.hero b,
.page-head strong,
.page-head b,
.cta strong,
.cta b,
.site-foot strong,
.site-foot b,
.calc-res strong,
.calc-res b {
  color: #FBF7EF;
}

/* naslovi u tamnoj kartici koja stoji van .section--dark (npr. hero) */
.card--dark h3 { color: #FBF7EF; }

/* linkovi u tekstu na tamnoj površini — zeleni bi se izgubili */
.section--dark .prose a,
.card--dark a,
.hero__lead a,
.calc-res a {
  color: var(--sun);
}

.section--dark .prose a:hover,
.card--dark a:hover,
.hero__lead a:hover,
.calc-res a:hover {
  color: #F7D9B0;
}
/* --- 28. TABELE I NAPOMENE U TAMNIM SEKCIJAMA --------------------------- */
.section--dark .table-wrap{
  background:rgba(251,247,239,.045);
  border-color:rgba(251,247,239,.20);
}
.section--dark .table{
  color:#D9E4DC;
}
.section--dark .table th,
.section--dark .table td{
  color:#D9E4DC;
  border-bottom-color:rgba(251,247,239,.14);
}
.section--dark .table thead th{
  background:rgba(251,247,239,.10);
  color:#FBF7EF;
}
.section--dark .table tbody tr:nth-child(even){
  background:rgba(251,247,239,.05);
}
.section--dark .table tbody tr:last-child td{
  border-bottom:none;
}
.section--dark .table strong{
  color:#FBF7EF;
}
.section--dark .table .yes{ color:#8FD3A8; }
.section--dark .table .no{ color:#F0A48E; }

/* napomene u tamnoj sekciji — bez svetlosive ploče */
.section--dark .note{
  background:rgba(251,247,239,.07);
  border-left-color:var(--sun);
  color:#D9E4DC;
}
.section--dark .note b{ color:#FBF7EF; }
.section--dark .note a.link{ color:var(--sun); }

/* --- 29. DUGMAD I LINKOVI NA TAMNIM POVRŠINAMA — finalno ---------------- */

/* Jantarno dugme: taman tekst na jantaru, beli samo na hover */
a.btn--sun,
.hero a.btn--sun,
.hero__btns a.btn--sun,
.section--dark a.btn--sun,
.card--dark a.btn--sun,
.cta a.btn--sun,
.calc-res a.btn--sun {
  background-color: var(--sun);
  border-color: var(--sun);
  color: #1A0F02;
  font-weight: 700;
}
a.btn--sun:hover,
.hero a.btn--sun:hover,
.hero__btns a.btn--sun:hover,
.section--dark a.btn--sun:hover,
.card--dark a.btn--sun:hover,
.cta a.btn--sun:hover,
.calc-res a.btn--sun:hover {
  background-color: var(--sun-600);
  border-color: var(--sun-600);
  color: #FFFFFF;
}

/* Ghost dugme na tamnom: okvir 55 % umesto 38 %, tekst svetli */
.hero a.btn--ghost,
.section--dark a.btn--ghost,
.card--dark a.btn--ghost,
.cta a.btn--ghost,
.calc-res a.btn--ghost {
  background-color: transparent;
  border-color: rgba(251, 247, 239, 0.55);
  color: #FBF7EF;
}
.hero a.btn--ghost:hover,
.section--dark a.btn--ghost:hover,
.card--dark a.btn--ghost:hover,
.cta a.btn--ghost:hover,
.calc-res a.btn--ghost:hover {
  border-color: var(--sun);
  color: var(--sun);
}

/* Link u tekstu na tamnom — jantar, ne zelena */
.hero__lead a,
.hero__note a,
.section--dark .prose a,
.card--dark a,
.calc-res a {
  color: var(--sun);
}
.hero__lead a:hover,
.hero__note a:hover,
.section--dark .prose a:hover,
.card--dark a:hover,
.calc-res a:hover {
  color: #F7D9B0;
}

/* strong / b na tamnom — svetlo, ne crno */
.hero strong,
.hero b,
.section--dark strong,
.section--dark b,
.card--dark strong,
.card--dark b,
.cta strong,
.cta b,
.calc-res strong,
.calc-res b,
.site-foot strong,
.site-foot b {
  color: #FBF7EF;
}