/* stil-4-dorada.css — stilovi sajta (index.html), deo 4 od 5: dorada: UX struktura i vizuelna dorada hero-a. Učitavaju se redom i kasniji deo preglasava raniji, kao dok su bili jedan blok; vidi docs/struktura-sajta.md. */
/* ================= UX struktura: subject + depth ================= */
.hmicro{margin-top:20px;font-size:11.5px;letter-spacing:.07em;color:var(--muted)}

/* 01 → 02 → 03 */
.flow{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.fl{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:16px 22px;min-width:180px}
.fn{display:block;font-family:var(--serif);font-size:19px;color:var(--gold);line-height:1;margin-bottom:6px}
.fl b{display:block;font-size:13px;font-weight:400;color:var(--cream)}
.fa{color:var(--gold);font-size:15px}
.whatkey{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-deep)}

/* tabela: izveštaj / svrha / šta pokriva */
.ptable{margin-top:38px;overflow-x:auto;text-align:left}
.ptable table{width:100%;border-collapse:collapse;min-width:640px;background:var(--panel)}
.ptable th{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(164,119,50,.05)}
.ptable td{padding:13px 16px;border-bottom:1px solid var(--line2);font-size:13px;color:var(--soft2);vertical-align:top}
.ptable tr td:first-child{font-family:var(--serif);font-size:16px;color:var(--cream);white-space:nowrap}
.ptable tr:last-child td{border-bottom:0}

/* dve kartice dubine */
/* 5 strana naspram 30 — debljina knjige nosi poruku */
.bk-thin{--th:5px}
.bk-thick{--th:26px;width:150px;height:212px}/* odlomak umesto izmišljenih preporuka */
.excerpt{margin:26px 0 0;padding:0;text-align:left;border-left:2px solid var(--gold);padding-left:26px}
.excerpt p{font-family:var(--serif);font-size:17.5px;line-height:1.78;color:var(--soft);margin:0 0 14px;max-width:none}
.excerpt .praksa{margin:18px 0 14px}
.excerpt .exnote{font-size:11.5px;color:var(--faint);font-style:italic;line-height:1.6;background:none;padding:0;margin-top:4px}

.hiw4{grid-template-columns:repeat(4,1fr)}

@media(max-width:1000px){ .hiw4{grid-template-columns:1fr 1fr;gap:26px} .hiw4 .hstep:nth-child(3){border-left:0;padding-left:0} }
@media(max-width:860px){
  .flow{flex-direction:column;gap:12px}
  .fa{transform:rotate(90deg)}
  .fl{width:100%;max-width:320px}
}
@media(max-width:720px){
  .hiw4{grid-template-columns:1fr}  .bk-thick{width:126px;height:178px;--th:20px}
  .excerpt{padding-left:16px}
  .excerpt p{font-size:16px}
  .ptable table{min-width:520px}
}


/* poredjenje debljine spojeno sa sekcijom o dubini */
.bk-thin{margin-top:26px}.bk-thick{width:162px;height:226px;--th:28px}@media(max-width:720px){
  .bk-thick{width:130px;height:184px;--th:20px}
  .bk-thin{margin-top:20px}
}


/* presek, prirucnik, deset stvari, dodatak sa podacima */
.glance,.manual{margin:6px 0 18px;display:grid;grid-template-columns:auto 1fr;gap:0 20px}
.glance dt,.manual dt{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);padding:12px 0 0;border-top:1px solid var(--line2);white-space:nowrap}
.glance dd,.manual dd{margin:0;padding:12px 0 14px;border-top:1px solid var(--line2);
  font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--soft)}
.ten{counter-reset:tn;list-style:none;padding:0;margin:6px 0 18px}
.ten li{counter-increment:tn;position:relative;padding:11px 0 11px 44px;border-top:1px solid var(--line2);
  font-family:var(--serif);font-size:17.5px;line-height:1.68;color:var(--soft)}
.ten li:before{content:counter(tn,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--gold)}
.iza{margin:6px 0 10px}
.iza-g{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.iza h4{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin:16px 0 8px}
.iza-t{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.iza-t td{padding:5px 0;border-bottom:1px solid var(--line2);color:var(--soft2)}
.iza-t td:first-child{color:var(--cream)}
.iza-t td:last-child{text-align:right;color:var(--muted)}
.iza-a{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.iza-a b{display:block;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.iza-a ul{list-style:none;padding:0;margin:0}
.iza-a li{font-size:12.5px;color:var(--soft2);padding:3px 0;line-height:1.5}
.iza-a li span{color:var(--faint)}
.iza-a li.no{color:var(--faint)}
.iza-n{font-size:12px;color:var(--muted);margin-top:16px;font-style:italic}
@media(max-width:720px){ .iza-g,.iza-a{grid-template-columns:1fr} .glance,.manual{grid-template-columns:1fr;gap:0}
  .glance dd,.manual dd{border-top:0;padding-top:4px} }


/* „U praksi" — otvorena beleska, bez kutije */
.praksa{border:0!important;background:none!important;padding:0!important;margin:26px 0 30px;text-align:center}
.praksa .pk{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:9px;
  font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
.praksa .pk:before,.praksa .pk:after{content:"";display:block;width:44px;height:1px;background:var(--gold);opacity:.45}
.praksa p{margin:0 auto 10px!important;max-width:82%;text-align:left;font-style:italic;
  font-size:17px!important;line-height:1.8;color:var(--soft)!important}
.pend{display:block;width:26px;height:1px;background:var(--gold);opacity:.4;margin:4px auto 0}
.keep{display:block}
@media(max-width:720px){ .praksa p{max-width:100%;font-size:16px!important} .praksa .pk:before,.praksa .pk:after{width:22px} }

/* ================= HERO — vizuelna dorada (brif 26.09.2026.) =================
 * Samo izgled. Nijedan tekst, font, token palete ni dizajn korica nije
 * promenjen; blok stoji na kraju stila i preglasava ranije slojeve hero-a
 * (`.hero ...` ima jaču specifičnost od starih `.hcopy ...` pravila).
 * Mereno pre i posle na 1886, 1440, 1280, 1101, 1024, 960, 901, 820, 768,
 * 390, 375 i 360px širine, srpski i engleski.
 *
 * Zaglavlje (§13): meni i „Prijava" u --os-ink (bili --os-ink-soft), razmak
 * u meniju 36 -> 40px. Svi elementi zaglavlja su i pre bili na istoj sredini
 * (31px, a 33px kad je korisnik prijavljen) — to je provereno, ne dirano.
 * Pravila su vezana za `nav`, pa zaglavlje profila (`.pf-nav`) ostaje svoje.
 *
 * Tekst: naslov u --os-ink (tamno toplo mastilo) i tracking -0,01em, iste
 * veličine; podnaslov i prednosti --os-muted -> --os-ink-soft (postojeći
 * token, ≈12% tamnije, nije crno); pomoćna linija 11,5 -> 11px i ton između
 * ta dva tokena — čitljivija nego pre (kontrast 4,0 -> 4,7), a i dalje lakša
 * od prednosti, pa im ne konkuriše (§8).
 *
 * CTA (§6): visina 46 -> 50px, bočno 26 -> 28px, zaobljenje ostaje 4px kao
 * na svim dugmadima sajta. Strelica je CRTEŽ (maska, currentColor), isti
 * oblik kao `_PD_IK.str` u profilu — Montserrat nema „→", pa bi znak skakao
 * po visini. Tekst dugmeta se ne dira. Drugi CTA: topliji, tanji okvir.
 *
 * Korice (§9–§12): +6,1% (--k .49 -> .52 i .425 -> .451), grupa 16px ulevo.
 * Terakota (Signature) korica — opcija A: vidi se 157px umesto 123 (+20%
 * posle uvećanja), pa se čita kao druga knjiga, a ne kao traka. Na tabletu
 * i telefonu je ranije virila SAMO terakota traka; sada svuda ista srazmera
 * (≈44% širine zadnje korice). Stara senka na `.cov` se nije ni videla
 * (`.covmini` ima overflow:hidden), pa tanka senka ide na `.covmini`.
 *
 * Visina (§14): korice su veće, a hero NIJE viši (649px kao i pre) — gornji
 * razmak 52 -> 38, donji 46 -> 26. Sledeća sekcija počinje na istom mestu.
 * Levi blok (§3) je 24px iznad sredine korica (ranije tačno u sredini).    */

/* --- zaglavlje --- */
nav .nlink,nav .nlogin{color:var(--os-ink)}
#langBtn{color:var(--os-ink-soft)}
@media(min-width:1101px){ nav .nlinks{gap:40px} }
@media(min-width:961px) and (max-width:1100px){ nav .nlinks{gap:26px} }

/* --- tekst (§4, §5, §8, §15, §16) --- */
.hero .hcopy h1{color:var(--os-ink);letter-spacing:-.01em;line-height:1.1}
.hero .hcopy .sub{color:var(--os-ink-soft);line-height:1.7;margin:18px 0 32px}
.hero .hmicro{margin-top:16px;font-size:11px;color:color-mix(in srgb,var(--os-muted) 65%,var(--os-ink-soft))}

/* --- CTA (§6) --- */
.hero .hbtns{gap:12px}
.hero .hbtns .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:50px;padding:15px 28px;line-height:1.2}
.hero .hbtns .btn:after{content:"";flex:0 0 17px;width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4.5 12h14M13.5 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4.5 12h14M13.5 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.hero .hbtns .btn.ghost{border-color:rgba(164,119,50,.24);color:var(--os-ink)}
.hero .hbtns .btn.ghost:hover{border-color:var(--gold);color:var(--gold-deep)}

/* --- prednosti (§7): +1,5px, tamnije, ikonice bronzane i pune, razdelnici
       kraći (68% visine) umesto preko cele visine --- */
.hero .hprops{margin-top:36px}
.hero .hprops span{gap:12px;padding:0 22px;border-left:0;position:relative}
.hero .hprops span:first-child{padding-left:0}
.hero .hprops span+span:before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line2)}
.hero .hprops svg{width:21px;height:21px;flex:0 0 21px;opacity:1;color:var(--os-bronze);stroke-width:1.2}
.hero .hprops b{font-size:12.5px;line-height:1.45;color:var(--os-ink-soft)}

/* --- korice (§10, §12): prednja jasno ispred, zadnja tiša --- */
.hero .hcov-a .covmini{box-shadow:0 0 0 1px rgba(41,41,32,.05),0 2px 5px rgba(60,52,38,.07),0 18px 32px -16px rgba(60,52,38,.28)}
.hero .hcov-b .covmini{box-shadow:0 12px 24px -16px rgba(60,52,38,.24)}

/* --- široki ekran (§3, §9, §11, §14) --- */
@media(min-width:1101px){
  .hero .hgrid{padding-top:38px;padding-bottom:26px}
  .hero .hcopy{position:relative;top:-24px}
  .hero .hart{transform:translateX(-16px)}
  .hero .hcov-a .covmini{--k:.52}
  .hero .hcov-b .covmini{--k:.451}
  .hero .hcov-a{margin-left:-201px}
}

/* --- tablet položeno, dve kolone (§17). 901–980 je do sada imao korice
       centrirane i razmak 40 — sada isto kao ostale dve kolone. --- */
@media(min-width:901px) and (max-width:1100px){
  .hero .hgrid{gap:30px;padding-top:34px;padding-bottom:26px}
  .hero .hcopy{position:relative;top:-12px}
  .hero .hart{justify-content:flex-start;transform:translateX(-8px)}
  .hero .hcov-a .covmini{--k:.40}
  .hero .hcov-b .covmini{--k:.347}
  .hero .hcov-a{margin-left:-154px}
  .hero .hbtns .btn{padding:15px 18px;gap:10px}
  .hero .hprops span{padding:0 14px;gap:10px}
  .hero .hprops b{font-size:12px}
  .hero .hprops svg{width:20px;height:20px;flex-basis:20px}
}
/* Ispod 1011px dva CTA-a ne staju u red: idu jedan ispod drugog, puna širina
   kolone (ne uska). Prednosti bez razdelnika, da prelom u 2 + 1 ne ostavi
   crtu na početku reda. */
@media(min-width:901px) and (max-width:1010px){
  .hero .hgrid{padding-top:40px}
  .hero .hcopy{top:0}
  .hero .hart{transform:none}
  .hero .hbtns .btn{flex:1 1 100%}
  .hero .hprops{gap:10px 18px}
  .hero .hprops span{padding:0}
  .hero .hprops span+span:before{display:none}
}

/* --- jedna kolona: tablet uspravno i telefon (§17, §18). Red ostaje:
       nadnaslov, naslov, tekst, CTA, CTA, prednosti, korice. minmax(0,…) da
       šire korice ne rašire kolonu (i dugmad sa njom) preko ekrana — korice
       se tada seku po ivici, kontrolisano (§18). --- */
@media(max-width:900px){
  .hero .hgrid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero .hcov-b{transform:translate(0,14px) rotate(-1.2deg)}
}
@media(min-width:721px) and (max-width:900px){
  .hero .hbtns .btn{flex:0 0 auto}
  .hero .hcov-a .covmini{--k:.38}
  .hero .hcov-b .covmini{--k:.329}
  .hero .hcov-a{margin-left:-146px}
}
@media(max-width:720px){
  .hero .hcopy .sub{margin-bottom:28px}
  .hero .hprops{margin-top:24px;gap:10px 18px}
  .hero .hprops span{padding:0;gap:9px}
  .hero .hprops span+span:before{display:none}
  .hero .hprops svg{width:19px;height:19px;flex-basis:19px}
  .hero .hprops b{font-size:11.5px}
  .hero .hcov-a .covmini{--k:.33}
  .hero .hcov-b .covmini{--k:.286}
  .hero .hcov-a{margin-left:-127px}
}
@media(max-width:380px){
  .hero .hcov-a .covmini{--k:.32}
  .hero .hcov-b .covmini{--k:.277}
  .hero .hcov-a{margin-left:-123px}
  .hero .hprops{column-gap:12px}
  .hero .hprops span{gap:8px}
  .hero .hprops svg{width:18px;height:18px;flex-basis:18px}
  .hero .hprops b{font-size:11px}
}