/* ===========================================================================
   SajtPro — početna kuće (uz css/stil.css i css/zivo.css), 26.10.2026.
   Boje proizvoda: Vidik terakota, Izlog škriljac, Fioka zelena — iste kao
   njihovi znakovi.
   =========================================================================== */
:root{ --vidik:#c0522c; --izlog:#2f4858; --fioka:#1f6f5c }

/* ---------- šema u heroju: baza -> konektor -> tri proizvoda ---------- */
.sema{display:flex;flex-direction:column;align-items:center;max-width:460px;margin-left:auto;width:100%}
.sema-baza,.sema-konektor{width:100%;border-radius:var(--r);padding:16px 18px;text-align:center}
.sema-baza{background:#fff;border:1px solid var(--linija);box-shadow:var(--senka)}
.sema-baza small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tise)}
.sema-baza b{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:600;margin:2px 0}
.sema-baza span,.sema-konektor span{font-size:13.5px;color:var(--tiho)}
.sema-veza{height:34px;display:flex;justify-content:center}
.sema-veza i{width:2px;background:repeating-linear-gradient(to bottom,var(--tise) 0 5px,transparent 5px 10px);animation:sema-tok 1.2s linear infinite}
.sema-konektor{background:var(--ugalj);color:#fdfaf5;box-shadow:var(--senka-jaka)}
.sema-konektor b{display:block;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:1rem;margin-bottom:2px}
.sema-konektor span{color:rgba(240,231,218,.65)}
.sema-grane{position:relative;width:100%;height:34px}
.sema-grane i{position:absolute;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--tise) 0 5px,transparent 5px 10px);animation:sema-tok 1.2s linear infinite}
.sema-grane i:nth-child(1){left:16.6%}
.sema-grane i:nth-child(2){left:50%}
.sema-grane i:nth-child(3){left:83.3%}
.sema-grane::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:2px;background:var(--linija)}
@keyframes sema-tok{to{background-position:0 10px}}
.sema-proizvodi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.sema-p{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:var(--r);
  background:#fff;border:1px solid var(--linija);border-top:3px solid var(--boja);text-decoration:none;color:var(--tekst);
  box-shadow:var(--senka);transition:transform var(--prelaz),box-shadow var(--prelaz)}
.sema-p:hover{transform:translateY(-3px);box-shadow:var(--senka-jaka)}
.sema-p svg{width:30px;height:30px;margin-bottom:2px}
.sema-p b{font-family:"Fraunces",Georgia,serif;font-size:1.08rem;font-weight:600}
.sema-p small{font-size:12.5px;color:var(--tiho);text-align:center;line-height:1.3}
.sema-p.vidik{--boja:var(--vidik)} .sema-p.izlog{--boja:var(--izlog)} .sema-p.fioka{--boja:var(--fioka)}

/* ---------- kartice proizvoda ---------- */
.proizvodi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px}
.proizvod{background:#fff;border:1px solid var(--linija);border-top:4px solid var(--boja);border-radius:var(--r);
  padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--senka)}
.proizvod.vidik{--boja:var(--vidik)} .proizvod.izlog{--boja:var(--izlog)} .proizvod.fioka{--boja:var(--fioka)}
.proizvod-vrh{display:flex;align-items:center;gap:12px}
.proizvod-znak svg{width:40px;height:40px;display:block}
.proizvod h3{margin:0;font-size:1.45rem}
.proizvod-pod{font-size:13.5px;color:var(--boja);font-weight:600}
.proizvod p{margin:0;color:var(--tiho)}
.proizvod .spisak{margin:0;flex-grow:1}
.proizvod .spisak li{font-size:15px}
.proizvod-akcije{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

@media (max-width:900px){
  .proizvodi{grid-template-columns:minmax(0,1fr)}
  .sema{margin:10px auto 0}
}
@media (max-width:420px){
  .sema-p small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sema-veza i,.sema-grane i{animation:none}
}