/* DOK Meta (dokcreative.me/meta/ i /meta/vodic/). Izgled prati glavni sajt (dok OS): isti tonovi, Tahoma u prozoru, ivice u reljefu, oštri uglovi.
   CSS i JS su u posebnim fajlovima jer pravila sajta (CSP u objava\_headers) ne dozvoljavaju ugrađeni <style> i <script>.
   Poslije izmjene povećaj ?v= u meta/index.html i meta/vodic/index.html. */
:root{
  --navy:#10263D; --navy-2:#0b1a2b; --orange:#E97600; --paper:#F7F4EE;
  --muted:#5b6b7d; --text:#22303f; --g98:#c9c6bd; --ink:#0b0b0b; --line:#9c998f;
  --ui:Tahoma,"Segoe UI",Verdana,system-ui,sans-serif;
  --pix:"DotGothic16",Tahoma,ui-monospace,monospace;
  --bevel:inset -1px -1px #0b0b0b,inset 1px 1px #fff,inset -2px -2px #7d7a72,inset 2px 2px #e9e6dd;
  --bevel-in:inset 1px 1px #0b0b0b,inset -1px -1px #fff,inset 2px 2px #7d7a72,inset -2px -2px #e9e6dd;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);font-size:15.5px;line-height:1.6;color:var(--text);background:var(--navy-2);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--navy)}
button{font:inherit;color:inherit;border:0;border-radius:0;background:none;cursor:pointer}
svg{display:block}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.titlebar :focus-visible,.toast :focus-visible{outline-color:var(--paper)}
.sprite{position:absolute;width:0;height:0}

[hidden]{display:none!important}

/* stanje poslije slanja forme */
.done{padding:16px;background:#fff;box-shadow:var(--bevel-in)}
.done:focus{outline:none}
.done-t{margin-bottom:4px;font:700 18px/1.3 var(--ui);color:var(--navy)}
.done .btn{margin-top:16px;width:100%}
.lnk{padding:0;font:inherit;color:var(--navy);text-decoration:underline}
.btn[disabled]{opacity:.6;cursor:default}

/* prozor */
.win{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--paper)}
.titlebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 4px 0 16px;padding-top:env(safe-area-inset-top);box-sizing:content-box;background:linear-gradient(90deg,var(--navy),#2c5a8c);color:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;min-height:48px;padding-right:8px;color:var(--paper);text-decoration:none}
.brand svg{width:60px;height:24px;flex:none}
.brand span{font:400 15px/1 var(--pix);letter-spacing:.03em;opacity:.8;padding-top:5px}
.tb-link{flex:none;display:inline-flex;align-items:center;height:48px;padding:0 14px;background:var(--g98);color:var(--ink);box-shadow:var(--bevel);font:700 13.5px var(--ui);text-decoration:none;white-space:nowrap}
.tb-link:active{box-shadow:var(--bevel-in)}
.paper{flex:1;padding:24px 16px 32px}

/* tekst */
.lbl{display:flex;align-items:center;gap:8px;font:700 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lbl::before{content:"";flex:none;width:7px;height:7px;background:var(--orange)}
h1{margin-top:12px;font:700 clamp(32px,9.4vw,46px)/1.12 var(--ui);letter-spacing:-.01em;color:var(--navy)}
h1 em{font-style:italic;border-bottom:3px solid var(--orange)}
h2{margin-top:8px;font:700 24px/1.2 var(--ui);letter-spacing:-.01em;color:var(--navy);max-width:24ch}
p{max-width:64ch}
.lead{margin-top:16px;font-size:16.5px;line-height:1.5;max-width:50ch}
.after{margin-top:24px}

/* dugmad */
.cta{display:grid;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:8px 20px;background:var(--g98);color:var(--ink);box-shadow:var(--bevel);font:700 15.5px/1.2 var(--ui);text-align:center;text-decoration:none}
.btn:hover{outline:1px dotted var(--ink);outline-offset:-6px}
.btn:active{box-shadow:var(--bevel-in)}
.btn-pri{box-shadow:inset 0 0 0 1px var(--ink),var(--bevel)}
.btn-pri:active{box-shadow:inset 0 0 0 1px var(--ink),var(--bevel-in)}
.sq{flex:none;width:8px;height:8px;background:var(--orange)}
.note{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* mejl */
.akcije{margin-top:24px}
.gate label{display:block;margin-bottom:4px;font:700 13px/1.3 var(--ui);color:var(--navy)}
.gate-row{display:grid;gap:8px}
.gate input[type=email]{width:100%;min-width:0;height:48px;padding:0 12px;border:0;border-radius:0;background:#fff;box-shadow:var(--bevel-in);font:16px var(--ui);color:var(--ink)}
.gate input[type=email]::placeholder{color:#8a94a0}
.gate-err{margin-top:8px;font-weight:700;font-size:14px;line-height:1.4;color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dl{margin-top:8px;width:100%}

/* sekcije */
.sec{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);box-shadow:inset 0 1px #fff}

/* koraci */
.steps{display:grid;gap:8px;margin-top:24px}
.step{padding:16px;background:var(--g98);box-shadow:var(--bevel);font-size:15px;line-height:1.5;color:#33404d}
.step small{display:block;margin-bottom:4px;font:400 14px/1.2 var(--pix);color:var(--ink);opacity:.7}
.step b{color:var(--ink)}

/* sklopivi dio sa tekstom vodiča */
.tree{margin-top:16px;padding:2px 12px;background:#fff;box-shadow:var(--bevel-in)}
.tree summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:48px;font:700 15.5px/1.3 var(--ui);color:var(--navy);cursor:pointer}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"+";flex:none;display:grid;place-items:center;width:18px;height:18px;border:1px solid #7d7a72;background:#fff;font:400 14px/1 var(--ui);color:var(--ink)}
.tree[open] summary::before{content:"\2212"}
.tree-body{padding:4px 0 12px}
.tree-btns{display:flex;flex-wrap:wrap;gap:8px}
.manual-note{margin-bottom:12px;font-weight:700;color:var(--navy)}
#vodic{margin-top:12px;max-height:320px;overflow:auto;padding:12px;border:1px solid var(--line);background:var(--paper);font:13.5px/1.55 var(--ui);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
#vodic.manual{-webkit-user-select:all;user-select:all}

/* meta */
.meta-grid{display:grid;gap:24px;margin-top:24px}
.target{width:100%;max-width:328px;height:auto}
.target text{font:700 13px var(--ui);fill:var(--navy)}
.tbl{padding:2px;background:#fff;box-shadow:var(--bevel-in)}
.tr{display:grid;grid-template-columns:32px 1fr;gap:2px 8px;align-items:baseline;padding:12px;border-bottom:1px solid #e4e1d8}
.tr:last-child{border-bottom:0}
.tr .n{font:400 15px/1 var(--pix);color:var(--muted)}
.tr b{color:var(--navy)}
.tr .v{grid-column:2;font-size:14.5px;color:#4a5a6c}

/* primjer */
.mini{margin-top:24px;padding:3px;background:var(--g98);box-shadow:var(--bevel),8px 8px 0 rgba(16,38,61,.2)}
.mini-bar{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:32px;padding:6px 8px;background:linear-gradient(90deg,var(--navy),#2c5a8c);color:var(--paper);font-size:13px;line-height:1.3}
.mini-bar b{font-size:12px;letter-spacing:.08em}
.mini-body{margin-top:2px;padding:16px;background:#fff;box-shadow:var(--bevel-in)}
.mini-body p b{color:var(--navy)}
.toc{counter-reset:t;margin-top:8px}
.toc li{counter-increment:t;display:grid;grid-template-columns:36px 1fr;align-items:center;padding:12px 0;border-bottom:1px dotted var(--line);font-weight:700;line-height:1.4;color:var(--navy)}
.toc li:last-child{border-bottom:0;padding-bottom:0}
.toc li::before{content:counter(t);display:grid;place-items:center;width:24px;height:24px;background:var(--g98);box-shadow:var(--bevel);font:700 12px var(--ui);color:var(--ink)}

/* tačke i pitanja */
.bul{display:grid;gap:16px;margin-top:24px}
.bul li{position:relative;padding-left:20px;max-width:64ch}
.bul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--orange)}
.faq{margin-top:24px;padding:2px 12px;background:#fff;box-shadow:var(--bevel-in)}
.faq div{padding:14px 0;border-bottom:1px dotted var(--line)}
.faq div:last-child{border-bottom:0}
.faq dt{font-weight:700;line-height:1.35;color:var(--navy)}
.faq dd{margin-top:4px}

/* poziv i podnožje */
.wcta p{margin-top:12px}
.wcta .btn{margin-top:24px;width:100%}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);box-shadow:inset 0 1px #fff;font-size:13.5px;color:var(--muted)}
.foot .logo{display:block;padding:8px 8px 8px 0;color:var(--navy)}
.foot .logo svg{width:50px;height:20px}
.foot p{flex:1 1 200px}
.foot a.ep{display:inline-flex;align-items:center;min-height:48px;font-weight:700}

/* statusna traka: uvijek vidljiv poziv kad polje za mejl ili dugmad iz vrha odu sa ekrana */
.statusbar{position:-webkit-sticky;position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:6px;padding:4px 6px;padding-bottom:calc(4px + env(safe-area-inset-bottom));background:var(--g98);box-shadow:inset 0 1px #fff;font-size:12.5px;color:var(--ink);visibility:hidden}
.statusbar.on{visibility:visible}
.statusbar span{flex:1;min-width:0;padding:6px 8px;box-shadow:inset 1px 1px #7d7a72,inset -1px -1px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px;background:var(--g98);box-shadow:inset 0 0 0 1px var(--ink),var(--bevel);font:700 15px var(--ui);color:var(--ink)}
.sb-btn:active{box-shadow:inset 0 0 0 1px var(--ink),var(--bevel-in)}

/* poruka o kopiranju */
.toast{position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:10;max-width:420px;margin:0 auto;padding:14px 16px;background:var(--navy);color:var(--paper);border:1px solid var(--paper);box-shadow:4px 4px 0 rgba(0,0,0,.4);font-weight:700;font-size:15px;line-height:1.4;visibility:hidden}
.toast.on{visibility:visible}
.toast a{display:inline-block;margin-top:6px;padding:6px 0;color:var(--paper)}

@media (min-width:560px){
  .cta{grid-template-columns:auto auto;justify-content:start;gap:12px}
  .gate-row{grid-template-columns:minmax(0,320px) auto;justify-content:start;gap:12px}
  .dl{width:auto;margin-top:12px}
  .tr{grid-template-columns:32px 1fr auto}
  .tr .v{grid-column:auto;text-align:right}
  .wcta .btn{width:auto}
}
@media (min-width:760px){
  body{padding:48px 24px 64px;font-size:15px}
  .win{max-width:880px;min-height:0;margin:0 auto;padding:3px;background:var(--g98);box-shadow:var(--bevel),12px 14px 0 rgba(0,0,0,.35)}
  .titlebar{height:48px;padding:0 4px 0 16px}
  .tb-link{height:36px}
  .paper{margin:2px 0;padding:40px 48px 40px;background:var(--paper);box-shadow:var(--bevel-in)}
  h2{font-size:28px}
  .lead{font-size:17px}
  .sec{margin-top:64px;padding-top:40px}
  .steps{grid-template-columns:repeat(3,1fr);gap:12px}
  .meta-grid{grid-template-columns:328px 1fr;gap:48px;align-items:center}
  .tr{grid-template-columns:32px 1fr}
  .tr .v{grid-column:2;text-align:left}
  .statusbar{padding:3px 2px}
  .sb-btn{height:36px;font-size:13.5px}
  .toast{bottom:64px}
}