/* ==========================================================================
   JN Solutions — jn.css
   Koncept: RADNI DNEVNIK. Automatizacija se ne vidi dok radi; vidi se zapis.
   Serif = ono što piše čovek. Mono = ono što beleži mašina.
   Hladan papir, mastilo, petrol akcenat, oker samo za aktivna stanja.

   Bez inline style="" i bez <style> blokova — CSP je style-src 'self'.
   ========================================================================== */

:root{
  /* papir i mastilo */
  --paper:      #eceff0;
  --paper-2:    #e3e8ea;
  --card:       #f8fafa;
  --ink:        #14201f;
  --ink-2:      #2b3a38;
  --txt:        #3f4f4d;
  --dim:        #55656a;
  --rule:       #c6cfd1;
  --rule-soft:  #d8dfe0;

  /* akcenti */
  --petrol:     #0c5459;
  --petrol-lt:  #12757b;
  --oker:       #8a5313;
  --oker-lt:    #b87423;

  /* tipografija */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --wrap: 1080px;
  --read: 680px;
  --r:    3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--txt);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--petrol)}
a:hover{color:var(--petrol-lt)}
strong{color:var(--ink-2);font-weight:600}

h1,h2,h3,h4{color:var(--ink);font-family:var(--serif);font-weight:600;letter-spacing:-.01em}

:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.read{max-width:var(--read);margin:0 auto;padding:0 26px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- oznaka / eyebrow: mašinski registar ---------- */
.kick{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 18px;font-weight:500;
}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;flex-wrap:wrap}
.logo{text-decoration:none;white-space:nowrap;display:inline-flex;align-items:baseline;gap:7px}
.logo b{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.logo span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.nav{font-size:15px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--txt);text-decoration:none}
.nav a:hover{color:var(--petrol)}
.nav a.cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);padding:9px 16px;border-radius:var(--r);
}
.nav a.cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{padding:44px 0 8px}
.hero h1{
  font-size:2.4em;line-height:1.12;margin:0 0 .38em;max-width:16em;font-weight:600;
}
.hero .lead{font-size:1.08em;color:var(--txt);margin:0 0 1.25em;max-width:38em}
.hero-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0 14px}
.mikro{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin:0;line-height:1.6}

/* ---------- SIGNATURE: dnevnik jednog dana ---------- */
.dnevnik{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);
  margin:26px 0 0;padding:0;
}
.dnevnik-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.dnevnik ol{list-style:none;margin:0;padding:0}
.dnevnik li{
  display:grid;grid-template-columns:76px 1fr auto;gap:18px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule-soft);
}
.dnevnik li:last-child{border-bottom:0}
.dnevnik .sat{
  font-family:var(--mono);font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.dnevnik .sta{font-size:15.5px;color:var(--ink-2)}
.dnevnik .ko{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--petrol);white-space:nowrap;
}
.dnevnik .ko-covek{color:var(--oker)}
.dnevnik-foot{
  padding:13px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:1.65;
}
.dnevnik-foot b{color:var(--ink);font-weight:500}

/* ispisivanje reda po red — jedan orkestriran trenutak */
@media (prefers-reduced-motion:no-preference){
  .dnevnik li{opacity:0;animation:upis .5s ease-out forwards}
  .dnevnik li:nth-child(1){animation-delay:.15s}
  .dnevnik li:nth-child(2){animation-delay:.35s}
  .dnevnik li:nth-child(3){animation-delay:.5s}
  .dnevnik li:nth-child(4){animation-delay:.75s}
  .dnevnik li:nth-child(5){animation-delay:.95s}
  .dnevnik li:nth-child(6){animation-delay:1.15s}
  .dnevnik-foot{opacity:0;animation:upis .5s ease-out 1.45s forwards}
}
@keyframes upis{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- dugmad ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:14px 26px;border-radius:var(--r);text-decoration:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--ink);cursor:pointer;text-align:center;line-height:1.3;
}
.btn:hover{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-full{width:100%}

/* ---------- sekcije ---------- */
section{padding:66px 0}
section.alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
h2{font-size:1.85em;line-height:1.22;margin:0 0 .45em}
h3{font-size:1.12em;margin:0 0 .35em}
p{margin:1em 0}
.sub{color:var(--dim);max-width:38em;margin-top:-.2em;font-size:1.02em}
.sec-head{max-width:40em;margin-bottom:6px}

/* ---------- kartice ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:1px;margin-top:32px;background:var(--rule)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{background:var(--card);padding:26px 24px;display:flex;flex-direction:column}
section.alt .card{background:var(--paper)}
.card h3{font-size:17px;margin-bottom:9px}
.card p{font-size:.95em;margin:0 0 13px}
.card p:last-child{margin-bottom:0}
.card .vise{
  margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
}
.card .vise:hover{text-decoration:underline}

/* ---------- usluge: lista, ne kartice (pet stavki ne staje ravnomerno u red) ---------- */
.usluge{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--ink)}
.usluge li{
  display:grid;grid-template-columns:minmax(190px,.9fr) 2fr auto;gap:28px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule-soft);
}
.usluge h3{font-size:18px;margin:0;line-height:1.3}
.usluge p{margin:0;font-size:.95em}
.usluge .vise{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.usluge .vise:hover{text-decoration:underline}

/* ---------- koraci: numerisano jer JESTE sekvenca ---------- */
.koraci{counter-reset:k;margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.koraci li{
  counter-increment:k;display:grid;grid-template-columns:56px 1fr;gap:22px;
  padding:22px 0;border-bottom:1px solid var(--rule-soft);
}
.koraci li::before{
  content:counter(k,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--petrol);letter-spacing:.06em;padding-top:3px;
}
.koraci li strong{grid-column:2;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:4px;font-weight:600}
.koraci li span{grid-column:2;font-size:.97em;display:block}

/* ---------- liste ---------- */
.check,.cross{list-style:none;padding:0;margin:18px 0}
.check li,.cross li{padding:7px 0 7px 26px;position:relative;font-size:.97em}
.check li::before{
  content:"+";position:absolute;left:0;top:7px;color:var(--petrol);
  font-family:var(--mono);font-weight:600;
}
.cross li::before{
  content:"−";position:absolute;left:0;top:7px;color:var(--dim);
  font-family:var(--mono);font-weight:600;
}

/* ---------- istaknuti blokovi ---------- */
.kutija{
  background:var(--card);border-left:2px solid var(--petrol);
  padding:20px 24px;margin:1.9em 0;font-size:.98em;
}
.kutija p:first-child{margin-top:0}
.kutija p:last-child{margin-bottom:0}
.kutija h3{font-size:16px;margin-bottom:6px}

.iskreno{
  background:var(--card);border:1px solid var(--rule);
  padding:26px;margin:30px 0 0;
}
.iskreno h3{font-size:17px;margin-bottom:12px}
.iskreno ul{margin:.4em 0 0;padding-left:1.15em;font-size:.96em}
.iskreno li{margin:.5em 0}
.iskreno li:last-child{margin-bottom:0}

.vazno{
  background:var(--card);border:1px solid var(--rule);border-top:2px solid var(--oker);
  padding:22px 24px;margin:1.9em 0;font-size:.98em;
}
.vazno h3{color:var(--oker);font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px}
.vazno p:first-of-type{margin-top:0}
.vazno p:last-child{margin-bottom:0}

/* ---------- uslovi naplate ---------- */
.naplata-blok{border:1px solid var(--ink);margin:34px 0;background:var(--card)}
.naplata-blok .naslov{
  background:var(--ink);color:var(--paper);padding:13px 24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.naplata-blok dl{margin:0;padding:6px 24px 22px}
.naplata-blok dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--petrol);margin-top:20px;
}
.naplata-blok dd{margin:4px 0 0;font-size:.98em;color:var(--ink-2)}

/* ---------- cena ---------- */
.cena-blok{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:32px 0;margin:34px 0;text-align:center}
.cena-blok .oznaka{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
.cena-blok .iznos{font-family:var(--serif);font-size:2.9em;line-height:1.1;margin:.14em 0;color:var(--ink);font-weight:600}
.cena-blok .iznos small{font-family:var(--mono);font-size:.26em;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:400}
.cena-blok .ispod{font-family:var(--mono);font-size:12px;color:var(--dim);margin:12px 0 0;line-height:1.75}

/* ---------- tabela ---------- */
.tabela-omot{overflow-x:auto;margin:1.9em 0}
table{width:100%;border-collapse:collapse;font-size:.94em;min-width:480px}
th{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--ink);vertical-align:bottom;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);font-weight:500;
}
td{padding:13px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- FAQ ---------- */
.faq{margin-top:32px;max-width:var(--read);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  cursor:pointer;padding:17px 34px 17px 0;font-family:var(--serif);font-size:17.5px;
  list-style:none;position:relative;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:17px;font-family:var(--mono);
  font-size:17px;color:var(--petrol);line-height:1;
}
.faq details[open] summary::after{content:"−"}
.faq .odg{padding:0 0 20px;font-size:.97em}
.faq .odg p:first-child{margin-top:0}
.faq .odg p:last-child{margin-bottom:0}

/* ---------- članak / pravne stranice ---------- */
.clanak{padding:52px 0 26px}
.clanak h1{font-size:2.2em;line-height:1.18;margin:0 0 .28em}
.clanak .dek{font-size:1.07em;color:var(--dim);margin:0 0 1.7em}
.clanak .meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  margin-bottom:1.7em;border-bottom:1px solid var(--rule);padding-bottom:1.1em;
}
.clanak h2{font-size:1.32em;margin:2.3em 0 .45em}
.clanak h3{font-size:1.06em;margin:1.7em 0 .3em}
.clanak ul,.clanak ol{margin:1em 0;padding-left:1.3em}
.clanak li{margin:.5em 0}

/* ---------- impressum ---------- */
.podaci{margin:1.7em 0;border:1px solid var(--rule);background:var(--card)}
.podaci dl{margin:0;display:grid;grid-template-columns:minmax(160px,250px) 1fr}
.podaci dt{
  padding:12px 16px;border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.podaci dd{padding:12px 16px;margin:0;border-bottom:1px solid var(--rule-soft);font-size:.96em;color:var(--ink-2)}
.podaci dt:last-of-type,.podaci dd:last-of-type{border-bottom:0}

/* ---------- kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:44px;margin-top:34px;align-items:start}
.kontakt-linija{
  display:inline-block;font-family:var(--mono);font-size:1.06em;color:var(--petrol);
  text-decoration:none;margin:6px 0 2px;word-break:break-word;
  border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.kontakt-linija:hover{border-bottom-color:var(--petrol)}

.forma{margin-top:8px}
.polje{margin-bottom:17px}
.polje label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px;
}
.polje input,.polje textarea,.polje select{
  width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:var(--r);
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);line-height:1.5;
}
.polje input:focus,.polje textarea:focus,.polje select:focus{outline:2px solid var(--petrol);outline-offset:0;border-color:var(--petrol)}
.polje textarea{min-height:135px;resize:vertical}
.polje .pomoc{font-size:.85em;color:var(--dim);margin:6px 0 0}
.medonja{position:absolute;left:-9999px}

/* ---------- kartice / plaćanje ---------- */
.kartice{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:15px 0 0}
.kartice svg{display:block}
.kartice-tekst{font-family:var(--mono);font-size:12px;color:var(--dim);margin:9px 0 0;line-height:1.7}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--ink);background:var(--paper);padding:52px 0 34px;font-size:14.5px;color:var(--dim);margin-top:26px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:32px}
.site-foot h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 13px;font-weight:500;
}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:8px 0}
.site-foot a{color:var(--dim);text-decoration:none}
.site-foot a:hover{color:var(--petrol)}
.site-foot .o-nama-tekst{margin:0;font-size:13.5px;line-height:1.7}
.sitno-pravno{border-top:1px solid var(--rule);margin-top:34px;padding-top:20px;font-size:12.5px;line-height:1.75}
.sitno-pravno p{margin:0 0 7px}
.sitno-pravno p:last-child{margin-bottom:0}

/* ---------- 404 ---------- */
.greska{padding:96px 0;text-align:center}
.greska h1{font-family:var(--mono);font-size:2.6em;margin:0;color:var(--petrol);letter-spacing:.06em}
.greska p{font-size:1.08em;max-width:31em;margin:.7em auto 1.7em}

/* ---------- mobile ---------- */
@media(max-width:760px){
  body{font-size:16.5px}
  .site-head .wrap{min-height:auto;padding-top:14px;padding-bottom:14px;gap:12px}
  .nav{font-size:13.5px;gap:12px;width:100%}
  .nav a.cta{
    margin-left:auto;padding:0;border:0;border-radius:0;
    font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--petrol);
  }
  .nav a.cta:hover{background:none;color:var(--petrol-lt)}
  .hero{padding:48px 0 6px}
  .hero h1{font-size:2em}
  .hero .lead{font-size:1.05em}
  section{padding:46px 0}
  h2{font-size:1.5em}
  .clanak{padding:36px 0 18px}
  .clanak h1{font-size:1.7em}
  .clanak h2{font-size:1.2em}
  .dnevnik li{grid-template-columns:66px 1fr;gap:12px;row-gap:3px}
  .dnevnik .ko{grid-column:2;font-size:10.5px}
  .dnevnik .sta{font-size:15px}
  .usluge li{grid-template-columns:1fr;gap:7px;padding:17px 0}
  .usluge .vise{justify-self:start}
  .koraci li{grid-template-columns:34px 1fr;gap:12px}
  .cena-blok .iznos{font-size:2.2em}
  .naplata-blok dl{padding:6px 18px 18px}
  .podaci dl{grid-template-columns:1fr}
  .podaci dt{border-bottom:0;padding-bottom:2px}
  .podaci dd{padding-top:2px}
  .kontakt-grid{gap:34px}
  .btn{display:block}
  .hero-row .btn{width:100%}
}