/* stil-2-makete.css — stilovi sajta (index.html), deo 2 od 5: makete OWN SKY: početna, kartice, cene, česta pitanja, Signature, levak i kasa. Učitavaju se redom i kasniji deo preglasava raniji, kao dok su bili jedan blok; vidi docs/struktura-sajta.md. */
/* ================= OWN SKY ================= */
.wrap{max-width:1120px}
section{padding:84px 0}
.band{background:var(--band)}
.ctr{text-align:center}
.ctr .lead{margin-left:auto;margin-right:auto}
.klabel{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.ctr .klabel{justify-content:center}
.klabel .st{color:var(--gold);font-size:12px;line-height:1}

/* --- NAV --- */
nav{background:rgba(251,250,249,.93);border-bottom:1px solid var(--line2)}
.nav-in{max-width:1180px;padding:15px 26px;gap:20px}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer;flex:0 0 auto}
.logo .lm{width:21px;height:21px;flex:0 0 21px;color:var(--gold)}
.logo .lw{font-family:var(--serif);font-size:19px;letter-spacing:.3em;color:var(--cream);padding-left:3px;white-space:nowrap}
.nlinks{display:flex;gap:34px;margin-left:auto}
.nlink{background:none;border:0;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--soft2);cursor:pointer;padding:8px 0;transition:color .18s}
.nlink:hover{color:var(--gold-deep)}
.nright{display:flex;align-items:center;gap:18px}
.nav-r{gap:18px}
.nright .btn{padding:11px 20px;font-size:9.5px;letter-spacing:.15em}
#langBtn{border:0;padding:6px 4px!important;font-size:14px!important;background:none;color:var(--soft2)}
#langBtn:hover{background:none;color:var(--gold-deep)}

/* --- HERO --- */
.hero{padding:0;text-align:left;position:relative;overflow:hidden;border-bottom:1px solid var(--line2)}
.hgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:28px;align-items:center;min-height:min(70vh,600px);padding-top:56px;padding-bottom:60px}
.hcopy{display:flex;flex-direction:column;align-items:flex-start}
.hcopy h1{font-size:clamp(36px,5vw,60px);line-height:1.1;max-width:11ch;margin:20px 0 0}
.hcopy .sub{font-size:14.5px;color:var(--soft2);max-width:33ch;margin:20px 0 32px;line-height:1.8}
.hart{position:relative;justify-self:end;width:100%;display:flex;justify-content:center;
  align-items:flex-start;min-height:420px}
.hart svg{width:100%;height:auto;display:block;overflow:visible}
/* Dve prave korice: Essential ispred, Signature blago iza i nize.
   Bez preterane perspektive i bez sjajnog e-commerce prikaza. */
.hcov{position:relative}
.hcov-b{transform:translate(0,20px) rotate(-1.2deg);z-index:1}
.hcov-a{margin-left:-214px;z-index:2}
.hcov-a .covmini{--k:.46}
.hcov-b .covmini{--k:.40}
.hcov .cov{box-shadow:0 26px 60px rgba(60,52,38,.20),0 3px 10px rgba(60,52,38,.10)}
.hcov-b .cov{box-shadow:0 18px 44px rgba(60,52,38,.16)}
.covmini .cov{border-radius:2px}
.hart .l1{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.55}
.hart .l2{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.34}
.hart .l3{fill:none;stroke:var(--gold);stroke-width:.5;opacity:.3}
.hart .orb{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.42}
.hart .ray{stroke:var(--gold);stroke-width:.5;opacity:.4}
.hart .gl{fill:var(--gold-deep);font-family:serif;font-size:15px;text-anchor:middle;opacity:.85}
.hart .dot{fill:var(--gold)}
.hart .sp{fill:var(--gold)}
.hart .sp2{fill:var(--gold);opacity:.8}

/* --- KARTICE IZVESTAJA --- */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.rcard{border:1px solid var(--line2);background:var(--panel);padding:34px 22px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.rcard:hover{border-color:var(--line);box-shadow:0 16px 36px rgba(60,45,25,.07);transform:translateY(-2px)}
.rcard .ic{width:60px;height:60px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1}
.rcard h3{font-family:var(--serif);font-size:21px;font-weight:400;margin:16px 0 10px}
.rcard p{font-size:12.5px;color:var(--muted);line-height:1.75;flex:1;margin:0}
.rcard .more{margin-top:18px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;display:flex;align-items:center;gap:7px}

/* --- TRAKA SA PRIMEROM --- */
.bgrid{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center}
.book{display:grid;grid-template-columns:.82fr 1fr 1fr;background:#fffefc;box-shadow:0 26px 60px rgba(60,45,25,.14);font-size:0;line-height:0}
.pg{padding:22px 18px;border-left:1px solid rgba(20,16,12,.07);position:relative;font-size:11px;line-height:1.6;min-height:250px}
.pg:first-child{border-left:0;background:linear-gradient(120deg,#fdfbf7,#f7f2e9)}
.pg .bk{font-size:6.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.pg .bt{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--cream);margin:auto 0 6px;text-transform:uppercase}
.pg .bs{font-size:7.5px;color:var(--muted);font-style:italic}
.pgc{display:flex;flex-direction:column;height:100%;text-align:center;align-items:center;justify-content:space-between}
.pg h4{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.15;margin:6px 0 8px}
.pg .bp{font-family:var(--serif);font-size:7.4px;line-height:1.62;color:#6e675d;text-align:justify}
.pg .bsun{margin-top:10px;font-family:var(--serif);font-size:11px;color:var(--cream)}
.pg .bsun span{display:block;font-family:var(--sans);font-size:7px;color:var(--muted);letter-spacing:.06em}
.pg .kp{width:100%;border-collapse:collapse;font-size:6.6px;color:#6e675d;margin-top:10px}
.pg .kp td{padding:2.4px 0;border:0;font-variant-numeric:tabular-nums}
.pg .kp td:nth-child(2){text-align:center}
.pg .kp td:last-child{text-align:right}
.pg .kph{font-size:6px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid rgba(20,16,12,.1);padding-bottom:4px}
.pgw{width:82%;margin:0 auto;display:block}
.pgw .a{fill:none;stroke:var(--gold-deep);stroke-width:.8;opacity:.55}
.pgw .b{fill:none;stroke:#b8b0a2;stroke-width:.6}
.pgw text{fill:#8a8275;font-size:7px;font-family:var(--sans)}

/* --- KAKO RADI --- */
.hiw{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px}
.hstep{display:flex;gap:16px;align-items:flex-start;padding:4px 26px;border-left:1px solid var(--line2)}
.hstep:first-child{border-left:0;padding-left:0}
.hstep .n{font-family:var(--serif);font-size:36px;color:var(--gold);line-height:.95;font-weight:400;flex:0 0 auto}
.hstep h3{font-size:14.5px;font-family:var(--sans);font-weight:500;color:var(--cream);margin:0 0 5px;letter-spacing:.01em}
.hstep p{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0}

/* --- CENE --- */
.packs{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;align-items:start}
.packc{border:1px solid var(--line2);background:var(--panel);border-radius:0;padding:0;text-align:center;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.packc:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 16px 36px rgba(60,45,25,.08)}
.packc.feat{border-color:var(--gold)}
.pbar{background:var(--gold);color:#fff;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:6px 0;line-height:1.6}
.pbody{padding:26px 22px 24px;display:flex;flex-direction:column;flex:1}
.ptier{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.packc h4{font-family:var(--serif);font-size:25px;font-weight:400;margin:8px 0 6px;color:var(--cream)}
.packc .pd{font-size:12.5px;color:var(--muted);margin:0 0 16px;min-height:34px}
.packc .pr{font-family:var(--serif);font-size:34px;color:var(--cream);line-height:1;margin-bottom:4px}
.packc .pr s{font-size:15px;color:var(--faint);margin-right:9px}
.packc .sv{font-size:11px;color:var(--gold-deep);margin-bottom:18px}
.packc .btn{width:100%}
.packc.feat .btn{background:var(--gold);color:#fff}
.packc:not(.feat) .btn{background:none;color:var(--gold-deep);border-color:var(--gold)}
.packc:not(.feat) .btn:hover{background:var(--gold);color:#fff}
.packc .inc{font-size:10.5px;letter-spacing:.06em;color:var(--faint);margin-top:14px}
.packc ul{list-style:none;margin:0 0 16px;padding:0;flex:1;text-align:left}
.packc li{font-size:12.5px;color:var(--muted);padding:4px 0 4px 16px;position:relative}
.packc li:before{content:'✦';position:absolute;left:0;top:5px;color:var(--gold);font-size:8px}

/* --- ČESTA PITANJA (brif „Homepage FAQ Redesign“, 26.09.2026.) ---
   Šest kartica, 2 × 3 na desktopu, jedna kolona od 860px nadole (postojeća
   granica). Redosled u kodu je 1..6, pa mreža po redovima sama daje levu
   kolonu 1, 3, 5 i desnu 2, 4, 6 — a telefon 1..6, bez preslagivanja.
   Kartice u istom redu su iste visine, kao na mockup-u.
   Pitanje je serif, odgovor Montserrat 15px (bio je 13px) u boji
   --os-ink-soft: --os-muted je na ovoj pozadini ispod 4,5 : 1. */
.faq-glava{position:relative}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;text-align:left}
.faq-i{border:1px solid var(--line);background:var(--panel);padding:24px 28px 26px;cursor:pointer;
  transition:border-color .2s ease}
/* :hover samo gde postoji miš — na telefonu bi posle dodira ostao „zalepljen“.
   Otvorena kartica ima isti rub u posebnom pravilu: pregledač bez :has()
   odbacuje ceo red u kome se nađe. */
@media(hover:hover){.faq-i:hover{border-color:rgba(41,41,32,.24)}}
.faq-i:has(.faq-q[aria-expanded=true]){border-color:rgba(41,41,32,.24)}
.faq-h{margin:0;font-size:inherit;font-weight:400;line-height:inherit}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;width:100%;
  margin:0;padding:0;background:none;border:0;border-radius:1px;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.3;color:var(--os-ink)}
.faq-q:focus-visible{outline:1px solid var(--os-essential-dark);outline-offset:6px}
/* „+“ i „−“ su dve tanke linije, ne slova: znak iz fonta bi skakao po visini. */
.faq-z{position:relative;flex:0 0 14px;width:14px;height:14px;margin-top:6px}
.faq-z:before,.faq-z:after{content:'';position:absolute;left:0;top:6.5px;width:14px;height:1px;
  background:var(--os-ink-soft);transition:transform .22s ease,opacity .22s ease}
.faq-z:after{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .faq-z:after{transform:rotate(0deg);opacity:0}
.faq-a{margin:10px 0 0;max-width:62ch;font-size:15px;line-height:1.7;color:var(--os-ink-soft)}
.faq-o{cursor:auto;animation:faqPojava .24s ease}
.faq-o[hidden]{display:none}
@keyframes faqPojava{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.faq-o{animation:none}.faq-z:before,.faq-z:after{transition:none}}
/* Tanka nebeska linija: ista porodica kao crtež na hrbatu Essential korice
   u hero-u (linija, krug, mesec, zvezda). Samo na širokom ekranu. */
.faq-ukras{display:none;position:absolute;right:24px;bottom:-40px;width:136px;height:160px;
  color:var(--os-bronze);opacity:.75;pointer-events:none}
@media(min-width:1001px){.faq-ukras{display:block}}
/* Zatvorene kartice u redu su iste visine. Kad se jedna otvori, njena
   komšinica u redu se NE razvlači za njom (ostala bi kartica sa praznim
   dnom) — ostaje svoje visine. Važi samo dok su dve kolone. */
@media(min-width:861px){
  .faq-i:nth-child(odd):has(.faq-q[aria-expanded=true]) + .faq-i{align-self:start}
  .faq-i:nth-child(odd):has(+ .faq-i .faq-q[aria-expanded=true]){align-self:start}
}
@media(max-width:860px){.faq{grid-template-columns:1fr;gap:12px;margin-top:32px}}
@media(max-width:720px){.faq-i{padding:20px 20px 22px}.faq-q{font-size:19px;gap:18px}.faq-z{margin-top:5px}}

/* --- FUTER --- */
footer{background:var(--foot);border-top:1px solid var(--line2);padding:54px 0 26px;color:var(--muted);font-size:12.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.25fr 1.5fr;gap:28px;align-items:start}
.fbrand{display:flex;gap:14px;align-items:center}
.fseal{width:56px;height:56px;flex:0 0 56px;color:var(--gold)}
.fbrand .lw{font-family:var(--serif);font-size:17px;letter-spacing:.28em;color:var(--cream)}
.fbrand .ft{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.fcol h5{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin:0 0 12px}
.fcol a{display:block;font-size:12.5px;color:var(--soft2);padding:4px 0;cursor:pointer;transition:color .16s}
.fcol a:hover{color:var(--gold-deep)}
.fnews{display:flex;border:1px solid var(--line);background:#fff;margin-top:12px}
.fnews input{border:0;background:none;padding:10px 12px;font-size:12.5px}
.fnews input:focus{box-shadow:none;background:none}
.fnews button{flex:0 0 40px;background:var(--gold);border:0;color:#fff;cursor:pointer;font-size:14px}
.fbottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--faint)}
.disc{font-style:normal;max-width:78ch;margin:0;line-height:1.7;font-size:11px}

/* --- MODAL SA PODACIMA --- */
.modal{border-radius:0;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(40,30,18,.22);text-align:left;padding:34px}
.modal h3{font-family:var(--serif);font-size:27px;font-weight:400;text-align:center}
.modal p{text-align:center}
#birthBox{max-width:520px}
#birthBox .card-form{background:none;border:0;box-shadow:none;padding:0;margin:0;max-width:none}
.mclose{position:absolute;top:10px;right:14px;background:none;border:0;font-size:24px;line-height:1;color:var(--faint);cursor:pointer}
.mclose:hover{color:var(--cream)}
input[type=date],input[type=time]{font-family:var(--sans)}

/* --- TELEFON --- */
@media(max-width:1000px){
  .rgrid{grid-template-columns:1fr 1fr}
  .hgrid{grid-template-columns:1fr;gap:10px;min-height:0;padding-top:40px;padding-bottom:44px}
  .hart{max-width:520px;margin:0 auto;justify-self:center}
  .hcopy{align-items:flex-start}
  .bgrid{grid-template-columns:1fr;gap:30px}
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .fbrand{grid-column:1/-1}
}
@media(max-width:860px){
  .packs{grid-template-columns:1fr;gap:14px}
  .hiw{grid-template-columns:1fr;gap:22px}
  .hstep{border-left:0;padding:0}
}
@media(max-width:720px){
  .nlinks{display:none}
  .nav-in{padding:11px 16px}
  .logo .lw{font-size:16px;letter-spacing:.22em;display:inline!important}
  .nright{gap:10px}
  .nright .btn{padding:10px 13px;font-size:8.5px;letter-spacing:.12em}
  section{padding:54px 0}
  .rgrid{grid-template-columns:1fr;gap:12px}
  .rcard{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:20px}
  .rcard .ic{width:40px;height:40px;flex:0 0 40px;margin-top:2px}
  .rcard h3{margin:0 0 6px;font-size:19px}
  .rcard .more{margin-top:10px}
  .book{grid-template-columns:1fr}
  .pg:first-child{display:none}
  .pg{border-left:0;border-top:1px solid rgba(20,16,12,.07);min-height:0}
  .fgrid{grid-template-columns:1fr 1fr}
  .modal{padding:26px 20px}
}
@media(max-width:400px){ .logo .lw{font-size:14px;letter-spacing:.18em} }


/* --- dopune po drugoj maketi --- */
.btn.arw i,.rcard .more i,.lnk i{font-style:normal;display:inline-block;transition:transform .2s}
.btn.arw:hover i,.rcard:hover .more i,.lnk:hover i{transform:translateX(4px)}
.lnk{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;gap:9px;align-items:center}
.lnk:hover{color:var(--cream)}

.hart .l1{stroke-width:.8;opacity:.6}
.hart .l2{stroke-width:.6;opacity:.42}
.hart .l3{fill:none;stroke:var(--gold);stroke-width:.45;opacity:.34}
.hart .asp{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.34}
.hart .gl{font-size:13px;opacity:.8}
.hart .pl{fill:var(--gold-deep);font-family:serif;font-size:13px;text-anchor:middle;opacity:.9}
.hart .dg{fill:var(--faint);font-family:var(--sans);font-size:7.5px;text-anchor:middle;letter-spacing:.03em}
.hart .sp{fill:var(--gold)}
.hart .sp2{fill:var(--gold);opacity:.7}

/* kartice izvestaja: levo poravnate, kao na maketi */
.rcard{text-align:left;align-items:flex-start;background:#fdfbf8;padding:26px 24px 22px}
.rcard .ic{width:74px;height:74px;stroke-width:.9;opacity:.85;margin:0 0 14px -6px}
.rcard h3{font-size:20px;margin:0 0 8px}
.rcard .more{margin-top:20px;font-size:9.5px}

/* tamna traka: kako radi */
.dark{background:#191612;color:#cfc7ba}
.dark .klabel{color:var(--gold-soft)}
.dark .klabel .st{color:var(--gold-soft)}
.dark .hstep{border-left-color:rgba(255,255,255,.13)}
.dark .hstep h3{color:#f4efe6}
.dark .hstep p{color:#a29889}
.dark .hstep .n{color:var(--gold-soft)}

/* hamburger */
.burger{display:none;background:none;border:0;font-size:19px;line-height:1;color:var(--cream);cursor:pointer;padding:6px 4px;margin-left:auto}
.bmenu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line2);box-shadow:0 18px 40px rgba(60,45,25,.12);padding:6px 0;z-index:55}
.bmenu.on{display:block}
.bitem{display:block;width:100%;text-align:left;background:none;border:0;padding:14px 22px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--soft2);cursor:pointer}
.bitem:hover{background:rgba(181,149,109,.08);color:var(--gold-deep)}
/* Odjava je uvek tu za prijavljenog, ali tiša od ostalih i odvojena linijom:
   sekundarna radnja, ne sakrivena (brif „Auth / Moj profil / Odjava“ §1). */
.bitem.bm-odj{border-top:1px solid var(--line2);margin-top:6px;color:var(--muted)}
.bitem.bm-odj[hidden]{display:none}
nav{position:sticky}
.nav-in{position:relative}

@media(max-width:900px){
  .burger{display:block}
  .nlinks{display:none}
  .nright .nlink{display:none}
}
@media(max-width:720px){
  .rcard{flex-direction:column;text-align:left;padding:22px 20px}
  .rcard .ic{width:56px;height:56px;flex:0 0 56px;margin:0 0 12px -4px}
  .hart{max-width:440px}
}


/* --- doterivanje posle prvog pregleda --- */
section{padding:76px 0}
.hcopy h1{font-size:clamp(36px,4.6vw,58px);max-width:14ch;line-height:1.12}
.hero h1 em,.shead em{font-style:normal;color:inherit}
.hgrid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px}
.hart{max-width:700px}
.packs{align-items:stretch}
.packc{height:100%}#sampleSec{padding-top:82px}
.rcard{padding:28px 24px 24px}
.rcard p{min-height:0}

@media(max-width:720px){
  .nright .btn{padding:9px 11px;font-size:8px;letter-spacing:.1em;white-space:nowrap}
  .logo .lw{font-size:14px;letter-spacing:.2em}
  .burger{font-size:17px;padding:6px 2px}
  .nright{gap:8px}
  /* kartice: ikona levo, tekst desno — kao na maketi za telefon */
  .rcard{flex-direction:row;align-items:flex-start;gap:16px;padding:20px 18px}
  .rcard .ic{width:46px;height:46px;flex:0 0 46px;margin:2px 0 0 0}
  .rcard .rtxt{flex:1;min-width:0}
  .rcard h3{font-size:18px;margin:0 0 6px}
  .rcard p{font-size:12.5px}
  .rcard .more{margin-top:12px}
  .hcopy h1{font-size:clamp(32px,8.6vw,44px);max-width:16ch}
  .hgrid{padding-top:34px;padding-bottom:30px}
}


/* ===================== SIGNATURE + CRTEZI ===================== */
.tswitch{display:inline-flex;border:1px solid var(--line);background:var(--panel);margin-top:26px}
.tbtn{background:none;border:0;font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:11px 26px;cursor:pointer;transition:.18s}
.tbtn.act{background:var(--gold);color:#fff}
.tbtn:not(.act):hover{color:var(--gold-deep)}

/* Signature kartice — tamne, jasno premium naspram zlatnog Essential */
.packc.sigc{background:#191612;border-color:#2c2620}
.packc.sigc:hover{box-shadow:0 22px 50px rgba(25,22,18,.28)}
.packc.sigc.feat{border-color:var(--gold)}
.packc.sigc .ptier{color:var(--gold-soft)}
.packc.sigc h4{color:#f4efe6}
.packc.sigc .pd{color:#9a9083}
.packc.sigc .pr{color:#f4efe6}
.packc.sigc .pr s{color:#6d6459}
.packc.sigc .sv{color:var(--gold-soft)}
.packc.sigc li{color:#a79d8f}
.packc.sigc li:before{color:var(--gold-soft)}
.packc.sigc .inc{color:#6d6459}
.packc.sigc .btn{background:var(--gold);color:#fff;border-color:var(--gold)}
.packc.sigc .btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:#191612}
.packc.sigc .pbar{background:var(--gold);color:#191612}

/* „U praksi" blok na kraju poglavlja */
/* Oznaka dela knjige — bez posebnih strana, samo naziv iznad prvog poglavlja. */
.reading h3[data-deo]{margin-top:46px!important}
.reading h3[data-deo]:before{content:attr(data-deo);display:block;font-family:var(--sans);
  font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.praksa{border-left:2px solid var(--gold);background:rgba(181,149,109,.07);padding:14px 18px 12px;margin:16px 0 26px}
.praksa .pk{display:block;font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.praksa p{font-size:15px!important;color:var(--soft)!important;margin-bottom:8px!important}
.praksa p:last-child{margin-bottom:0!important}

.sigprog{height:2px;background:var(--line2);margin-top:12px;max-width:340px}
.sigprog i{display:block;height:100%;background:var(--gold);transition:width .4s}

/* crtezi */
.viz{margin:22px 0 28px;border:1px solid var(--line2);background:var(--panel);padding:18px 20px 16px}
.viz figcaption{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
.vnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.vbars{display:flex;flex-direction:column;gap:8px}
.vrow{display:grid;grid-template-columns:78px 1fr 24px;align-items:center;gap:12px}
.vk{font-size:12px;color:var(--soft2)}
.vv{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.vbar{display:block;height:7px;background:var(--line2)}
.vbar i{display:block;height:100%;transition:width .5s}
.vstack{display:flex;height:9px;overflow:hidden}
.vstack i{display:block;height:100%}
.vleg{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--muted)}
.vleg span{display:inline-flex;align-items:center;gap:7px}
.vleg b{width:9px;height:9px;display:inline-block;border-radius:50%}
.vwheel{width:180px;height:180px;display:block;margin:0 auto}
.vwheel .wc{fill:none;stroke:var(--line);stroke-width:.8}
.vwheel .ws{stroke:var(--line);stroke-width:.6}
.vwheel .wg{fill:rgba(181,149,109,.2);stroke:var(--gold);stroke-width:.8}
.vwheel .wp{fill:var(--faint);font-family:serif;font-size:11px;text-anchor:middle}
.vwheel .wp.hi{fill:var(--gold-deep);font-size:14px}
.vtl{position:relative;height:26px;margin-top:4px}
.vln{position:absolute;top:12px;left:0;right:0;height:1px;background:var(--line)}
.vtl i{position:absolute;top:8px;width:7px;height:7px;border-radius:50%;transform:translateX(-50%)}
.vmn{position:relative;height:14px;font-size:9px;color:var(--faint);letter-spacing:.05em}
.vmn span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* red sa Signature paketima na tamnoj podlozi sekcije */
#packSec .packs.sigrow{align-items:stretch}

/* traka sa tvrdnjom */
.claim{background:#191612;color:#e8e1d4;text-align:center;padding:74px 0}
.claim .cq{font-family:var(--serif);font-size:clamp(28px,4vw,46px);line-height:1.18;color:#f6f1e7;max-width:16ch;margin:0 auto;text-wrap:balance}
.claim .cs{font-size:14px;color:#a29889;max-width:52ch;margin:20px auto 0;line-height:1.8}
.claim .klabel{justify-content:center;color:var(--gold-soft);margin-bottom:22px}
@media(max-width:720px){ .claim{padding:52px 0} .viz{padding:15px 14px} .vrow{grid-template-columns:64px 1fr 20px;gap:9px} }


/* tekst za citanje: serif, kao u stampanom izvestaju */
.reading p,.praksa p,.freetext p,.sample p,#learnBody p,.lme{
  font-family:var(--serif);font-size:18px;line-height:1.78;color:var(--soft);max-width:68ch}
.reading h2,.reading h3{max-width:34ch}
.viz{max-width:72ch}
.reading p b,#learnBody p b,.freetext p b{color:var(--gold-deep);font-weight:600}
.reading h2{font-size:32px}
.msg{font-family:var(--serif);font-size:16.5px}
@media(max-width:720px){ .reading p,.praksa p,.freetext p,.sample p,#learnBody p{font-size:16.5px} }


/* ================= MAKETA 3: topla paleta, foto-hero, kartice u boji ================= */
body{background:var(--ink)}
.wrap{max-width:1180px}
section{padding:78px 0}
.ctrh{font-size:clamp(28px,3.6vw,40px);max-width:none;margin:0 auto 8px;text-align:center}
.ctrl{text-align:center;margin:0 auto;font-size:14.5px;max-width:56ch}
.rule{display:block;width:54px;height:2px;background:var(--gold);margin:16px 0 18px}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:7px}
.ticks li{font-size:13.5px;color:var(--soft2);padding-left:22px;position:relative}
.ticks li:before{content:'✓';position:absolute;left:0;top:0;color:var(--gold);font-size:12px}

/* --- NAV ---
 * Mini brif o zaglavlju §2: visina 72-78px na desktopu.
 *
 * Visina se NE PISE nego izlazi iz najviseg elementa plus ispuna, pa je ovde
 * merena a ne pogodjena. Do 22.09.2026. je zaglavlje bilo 86px i visinu mu je
 * davao logo: uspravni sklop (zvezda IZNAD natpisa) bio je na sirini od 138px
 * visok 57px. Vodoravni sklop je visok 29px, pa je ista ispuna od 14px dala
 * zaglavlje od 60px — ispod donje granice iz brifa.
 *
 * SIRINA SE NE MERI KONTEJNEROM NEGO PRAZNINOM. To je ono sto je dva puta
 * promaklo: sirina je spustana 1240 -> 1180, oba puta u rasponu iz §1, a Petar
 * je i dalje video sirok header. Mereno na 1440px ekrana, pri kontejneru od
 * 1180:
 *
 *   logo 162px + meni 215px + kontrole 97px = 474px STVARNOG sadrzaja
 *   praznina logo->meni   323px
 *   praznina meni->kontrole 323px
 *
 * Dakle dve trecine zaglavlja su bile prazan prostor, i nikakvo spustanje
 * unutar 1180-1240 to nije moglo da promeni. Kontejner od 980px svodi svaku
 * prazninu na ~223px — trecinu manje — i tek se to vidi.
 *
 * 980 je IZVAN raspona iz §1 (1180-1240), kao sto je i 62px izvan §2 (72-78).
 * Oba su Petrove ispravke donesene pred stranom, a raspon je pisan bez nje.
 * Tvrdnje u testu su pomerene zajedno sa tim i tamo pise zasto — da se sledeci
 * put ne procita kao da je brif ispunjen a nije.
 *
 * Visina: 15 + 30 (najvisi element su kontrole desno) + 15 + 1 (linija) = 61px. */
nav{background:rgba(243,235,226,.94);border-bottom:1px solid var(--line2)}
.nav-in{max-width:980px;padding:15px 30px;gap:18px}
.logo .lw{font-family:var(--serif);font-size:23px;letter-spacing:.24em;color:var(--gold-deep);font-weight:400}
.nlinks{display:flex;gap:36px;margin:0 auto}
.nlink{font-size:13.5px;font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--soft);display:inline-flex;align-items:center;gap:6px}
.nlink i{font-style:normal;font-size:11px;opacity:.6}
.nlink:hover{color:var(--gold-deep)}
.nright{gap:12px}
.nright .btn{padding:12px 22px;font-size:12.5px;letter-spacing:.01em;text-transform:none;border-radius:4px;font-weight:500}
.acct{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--soft2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nacct{display:flex;align-items:center;flex:0 0 auto}
.nlogin{background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;font-weight:500;color:var(--os-ink-soft);padding:8px 6px;white-space:nowrap}
.nlogin:hover{color:var(--os-essential-dark)}
.acct svg{width:19px;height:19px}
.acct:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn{border-radius:4px;text-transform:none;letter-spacing:.01em;font-size:13.5px;font-weight:500;padding:14px 26px}
.btn:hover{background:#8f6729;border-color:#8f6729}
.btn.ghost{border-color:var(--line);color:var(--soft)}
.btn.ghost:hover{background:rgba(164,119,50,.07);border-color:var(--gold);color:var(--gold-deep)}
.klabel{letter-spacing:.16em;font-size:10.5px;color:var(--gold-deep)}

/* --- HERO sa fotografijom --- */
.hero{border-bottom:1px solid var(--line2);background:linear-gradient(160deg,#f6efe6,#f1e6da)}
.hgrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px;align-items:center;padding-top:52px;padding-bottom:46px;min-height:0}
.hcopy h1{font-size:clamp(34px,4.5vw,53px);line-height:1.13;max-width:none;margin:16px 0 0}
.hcopy h1 em{font-style:italic;color:var(--gold)}
.hcopy .sub{font-size:14.5px;color:var(--soft2);max-width:40ch;margin:18px 0 26px;line-height:1.75}
.hbtns{display:flex;gap:12px;flex-wrap:wrap}
.hprops{display:flex;gap:0;margin-top:36px;flex-wrap:wrap}
.hprops span{display:flex;gap:9px;align-items:center;padding:0 20px;border-left:1px solid var(--line2)}
.hprops span:first-child{padding-left:0;border-left:0}
.hprops svg{width:19px;height:19px;color:var(--gold);flex:0 0 19px;opacity:.8}
.hprops b{font-weight:400;font-size:11px;line-height:1.4;color:var(--soft2)}
.hart{max-width:none;justify-self:stretch}
.hart img{width:100%;height:auto;display:block;border-radius:2px}

/* --- HERO §8: maketa blize tekstu -----------------------------------------
 *
 * Brif trazi manji razmak izmedju leve kopije i desne slike. Mereno pre
 * izmene, taj razmak NIJE bio 40px koliko kaze `gap` u resetki, nego 149px, i
 * to iz dva razloga koja se u CSS-u ne vide:
 *
 *   tekst se zavrsava na 604, a leva kolona tek na 656 — najduzi red je kraci
 *     od kolone, pa 52px praznine dolazi odatle
 *   korice su bile CENTRIRANE u svojoj koloni (`justify-content:center`), pa
 *     je levo od njih stajalo jos 57px
 *
 * Zato se ne dira `gap` nego poravnanje: korice se vezuju za levu ivicu svoje
 * kolone. Time razmak pada sa 149 na ~92px, a da se nijedna kolona nije
 * pomerila. Resetka se skracuje sa 40 na 30 — ostatak razlike.
 *
 * Uvecanje je +6,5% (§8 dozvoljava 5-8%): `--k` je faktor razmere korica, pa
 * .46 -> .49 i .40 -> .425. Raste udesno, jer su korice sada leve — dakle ne
 * jede razmak koji je upravo dobijen.
 *
 * Sve ovo vazi SAMO na sirokom ekranu. Na uzem se hero ionako slaze u jednu
 * kolonu (§6 mobilnog preloma), gde centriranje i jeste ispravno.            */
@media(min-width:981px){
  .hart{justify-content:flex-start}
  .hgrid{gap:30px}
  .hcov-a .covmini{--k:.49}
  .hcov-b .covmini{--k:.425}
}

/* --- PET KARTICA U BOJI --- */
/* Pet proizvoda NE idu u pet uskih kolona. Tri u prvom redu, dva
   centrirana u drugom — cetvrta i peta kartica preskacu po jedno polje
   mreze od sest, pa ostaju iste sirine kao gornje tri. */
/* Podizanje 3px i tiha senka — bez SaaS skakanja. */
/* --- TRAKA SA KNJIGOM --- */
.bookband{display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;align-items:center;
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:38px 40px}
.bookband .lead{font-size:13.5px;max-width:42ch}
.bb-img img{width:100%;height:auto;display:block;border-radius:2px}

/* --- CENE --- */
.pgrid2{display:grid;grid-template-columns:.78fr 2.22fr;gap:40px;align-items:start}
.pgrid2 .lead{font-size:13.5px;max-width:34ch}
.tswitch{margin-top:22px;border-radius:3px}
.tbtn{padding:10px 20px;font-size:9.5px}
.packs{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0;align-items:stretch}
.packc{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:0;text-align:left;overflow:hidden;display:flex;flex-direction:column}
.packc:hover{transform:none;box-shadow:0 18px 38px rgba(90,68,40,.12)}
.phead{background:var(--ph);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.phead h4{font-family:var(--serif);font-size:21px;font-weight:400;margin:0;color:#fff}
.phead span{display:block;font-size:11px;color:rgba(255,255,255,.8);margin-top:2px}
.pmk{width:30px;height:30px;flex:0 0 30px;color:rgba(255,255,255,.75)}
.pbody{padding:20px 18px 20px;display:flex;flex-direction:column;flex:1}
.packc .pr{font-family:var(--serif);font-size:31px;color:var(--cream);line-height:1;margin:0 0 4px;display:flex;align-items:baseline;gap:10px}
.packc .pr em{font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--muted)}
.packc .sv{font-size:11.5px;color:var(--gold-deep);margin:0 0 14px}
.packc .sv s{color:var(--faint);margin-right:5px}
.packc ul{list-style:none;margin:0 0 18px;padding:0;flex:1;display:flex;flex-direction:column;gap:6px}
.packc li{font-size:12.5px;color:var(--soft2);padding:0 0 0 20px;position:relative}
.packc li:before{content:'✓';position:absolute;left:0;top:0;color:var(--gold);font-size:11px}
.packc .btn{width:100%}
/* Nadnaslov grupe u paketu za dve osobe (§44) — jedan po grupi, ne uz svaku
   stavku. Prvi ne nosi gornju marginu, da spisak ne odskoči od naslova. */
.rp-inc .rp-ko{display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-bronze);margin:10px 0 2px}
.rp-inc .rp-ko:first-child{margin-top:0}
/* Traka: cuvanje na server nije proslo. Stoji dole, preko svega, jer je to
   podatak koji covek mora da vidi bez obzira gde je na strani. */
.saveerr{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;
  align-items:flex-start;gap:12px;max-width:620px;margin:0 auto;padding:13px 16px;
  border:1px solid var(--os-signature);border-left-width:3px;border-radius:3px;
  background:var(--os-panel);box-shadow:0 6px 24px rgba(41,41,32,.12);
  font-size:13.5px;line-height:1.5;color:var(--os-ink)}
.saveerr button{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:18px;
  line-height:1;color:var(--os-muted);padding:0 2px}
.saveerr button:hover{color:var(--os-ink)}

/* --- TRAKA POVERENJA --- */
.trust{background:var(--foot);padding:34px 0;border-top:1px solid var(--line2)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tgrid > div{display:flex;gap:13px;align-items:flex-start;padding-left:24px;border-left:1px solid var(--line2)}
.tgrid > div:first-child{padding-left:0;border-left:0}
.tgrid svg{width:24px;height:24px;flex:0 0 24px;color:var(--gold);opacity:.85;margin-top:2px}
.tgrid b{display:block;font-size:12.5px;font-weight:500;color:var(--cream);margin-bottom:3px}
.tgrid span{display:block;font-size:11.5px;color:var(--muted);line-height:1.55}

/* --- KAKO RADI ostaje tamna traka, ali toplija --- */
.dark{background:#2a221a}
.claim{background:#2a221a}

/* „Preciznost na drugom nivou" — mirna sekcija, bez isticanja i bez
   poredjenja sa ljudima. */
.scale{background:var(--os-paper-2);padding:74px 0 78px}
.scale .shead{font-size:34px;margin-bottom:14px}
.scale .lead{font-size:15.5px;line-height:1.85;color:var(--os-ink-soft)}

/* Upsell u profilu: imena onoga sto jos nije otkljucano i jedan poziv —
   bez cena, jer cene zive samo u Izvestajima. */
.ups{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:3px;padding:18px 20px}
.ups-l{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 260px}
.ups-l span{font-size:13px;color:var(--os-ink-soft);padding-left:13px;position:relative}
.ups-l span:before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--os-bronze)}
@media(max-width:620px){ .ups .btn{width:100%;justify-content:center;text-align:center} }

/* Poziv umesto mreze cena posle besplatne karte. */
.pricing-cta{text-align:center;padding:40px 0 10px;border-top:1px solid var(--os-line-soft);margin-top:34px}
.pricing-cta .lead{margin:0 auto 20px;max-width:52ch}

/* ===== IZVESTAJI: levak (dubina -> ponuda) ===== */
.rep-h{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--os-ink);
  margin:0 0 8px;line-height:1.15}
.rep-h2{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--os-ink);
  margin:54px 0 6px}
.rep-lead{font-size:14.5px;color:var(--os-ink-soft);margin:0 0 30px;max-width:60ch;line-height:1.7}
/* Razlog dolaska na ponudu (vidi `_repDubina`). Nije upozorenje i ne sme da
   izgleda kao greska — ovo je objasnjenje, pa nosi istu zlatnu liniju kao
   ostali mirni naglasci na strani, a ne crvenu. */
.rep-zasto{font-size:14.5px;color:var(--os-ink);margin:0 0 18px;max-width:60ch;line-height:1.7;
  border-left:2px solid var(--gold);padding:2px 0 2px 14px}
/* Probni kod: tih red na dnu ponude. Ne sme da izgleda kao ponuda — ko kod
   nema, treba da ga jedva primeti. */
.probaw{margin:26px 0 0;text-align:center}
.proba-link{background:none;border:0;padding:4px;cursor:pointer;font:inherit;
  font-size:13px;color:var(--os-muted);border-bottom:1px solid var(--os-line)}
.proba-link:hover{color:var(--os-ink-soft)}
.proba-box{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
/* `hidden` JE ATRIBUT, A `display:flex` IZNAD GA NADJACAVA.
   Bez ovog reda polje stoji otvoreno od prvog trenutka, a link „Imaš kod?"
   ne radi ništa — klikne se i ne promeni se ništa vidljivo. Tako je i bilo od
   23.09. do 24.09.2026, na strani sa dubinom; nisam taj ekran nijednom
   narenderovao, pa se nije videlo. Prvi snimak ga je pokazao odmah. */
.proba-box[hidden]{display:none}
/* `flex:0 0 auto` + `width`: bez toga polje uzme ceo red i dugme se prelomi
   ispod njega — provereno na snimku, izgledalo je kao kvar, ne kao polje.
   `.ka input{width:100%}` je specificnosti (0,1,1) kao i `.proba-box input`, a
   stoji NIZE u fajlu, pa je pobedjivao — zato `.probaw` ispred: (0,2,1). */
.probaw .proba-box input{font:inherit;font-size:14px;padding:11px 14px;flex:0 0 auto;width:210px;
  border:1px solid var(--os-line);border-radius:8px;background:var(--os-cream);color:var(--os-ink)}
.proba-box .btn{padding:11px 20px}
.proba-msg{flex:0 0 100%;margin:8px 0 0;font-size:13px;color:var(--os-ink-soft);min-height:18px}
.rep-same{font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--os-essential-dark);text-align:center;margin:38px 0 0}
.rep-note{font-size:12.5px;color:var(--os-muted);margin:26px 0 0;font-style:italic}
.rep-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rep-sw{display:flex;gap:6px;flex:0 0 auto}

/* gostinski link — ekran posle kupovine (brif „Purchase Confirmation UX“,
   26.09.2026.). Redom: naslov, rečenica o stanju, kartica proizvoda, „Šta se
   sada dešava“ (tri koraka), blok naloga za gosta, „Nazad na početnu“.
   Kolona ostaje 720px. Prateći tekst je --os-ink-soft (6,4 : 1 na papiru),
   ne --os-muted, koji se na ovoj pozadini gubi. */
.wrap.kup-wrap{max-width:720px;padding-top:44px;padding-bottom:80px}
.rep-h.kup-h{font-size:38px;margin:0 0 10px}
.rep-lead.kup-lead{font-size:16.5px;color:var(--os-ink-soft);margin:0 0 30px;line-height:1.6}
.kup-sta{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:3px;
  padding:20px 24px;margin:0}
.kup-sta-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.kup-sta b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--os-ink);line-height:1.25}
.kup-sta em{font-style:normal;font-size:13.5px;color:var(--os-ink-soft)}
.kup-sta span{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--os-ink-soft)}
.kup-ceka{font-size:13.5px;color:var(--os-muted);margin:16px 0 0;font-style:italic}
.kup-h3{font-family:var(--serif);font-size:23px;font-weight:400;color:var(--os-ink);
  margin:0 0 18px;line-height:1.25}
/* Koraci: krug + tanka isprekidana spojnica do sledećeg kruga. Gotov korak je
   pun maslinast krug sa kvačicom, tekući ima malu tačku, zastoj tanak rub boje
   Signature. Bez procenata i bez trake napretka — stvarnog napretka nema. */
.kup-tok{margin:38px 0 0}
.kup-koraci{list-style:none;margin:0;padding:0}
.kup-k{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:18px;padding:0 0 22px}
.kup-k:last-child{padding-bottom:0}
.kup-k:not(:last-child)::before{content:'';position:absolute;left:13.5px;top:34px;bottom:6px;
  border-left:1px dashed rgba(41,41,32,.22)}
.kup-k>i{position:relative;display:block;width:28px;height:28px;border-radius:50%;background:var(--os-paper-2);margin-top:1px}
.kup-k.gotov>i{background:var(--os-essential-dark)}
.kup-k.gotov>i::after{content:'';position:absolute;left:10px;top:6px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kup-k.sada>i::after{content:'';position:absolute;left:10px;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--os-essential)}
.kup-k.zastoj>i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--os-signature)}
.kup-k b{display:block;font-family:var(--serif);font-size:18px;font-weight:400;
  color:var(--os-ink);line-height:1.35}
.kup-k p{margin:4px 0 0;font-size:14px;color:var(--os-ink-soft);line-height:1.6}
.kup-nalog{margin:36px 0 0;background:rgba(41,41,32,.035);border:1px solid var(--os-line-soft);border-radius:3px;
  padding:26px 28px 28px}
.kup-nalog .kup-h3{margin:0 0 8px}
.kup-akcija{margin:30px 0 0}
.kup-akcija .btn{width:100%;justify-content:center;text-align:center}
.kup-akcija .btn{font-size:14.5px;padding-top:16px;padding-bottom:16px}
.kup-nalog .kup-akcija{margin-top:22px}
.kup-zasto{font-size:14px;color:var(--os-ink-soft);margin:0;line-height:1.6}
/* Mesto za poruku o neuspelom prenosu: prazno ne zauzima prostor. */
.kup-wrap .ka-err{margin:12px 0 0;min-height:0}
.kup-wrap .ka-err:empty{display:none}
.kup-dno{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--os-line-soft);text-align:center}
.kup-nazad{background:none;border:0;padding:6px 4px;cursor:pointer;font:inherit;font-size:14px;
  color:var(--os-ink-soft);text-decoration:underline;text-underline-offset:3px}
.kup-nazad:hover{color:var(--os-ink)}
/* `.kup-dno .kup-podrska`: `p` u ovoj strani inace nosi tudje razmake. */
.kup-dno .kup-podrska{font-size:12.5px;line-height:1.6;color:var(--os-muted);margin:14px 0 0;text-align:center}
.kup-dno .kup-podrska a{color:var(--os-essential-dark);text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){ .rep-h.kup-h{font-size:34px} }
@media(max-width:620px){
  .wrap.kup-wrap{padding-top:30px;padding-bottom:48px}
  .rep-h.kup-h{font-size:30px}
  .rep-lead.kup-lead{font-size:15.5px;margin-bottom:24px}
  .kup-sta{padding:16px 18px}
  .kup-sta b{font-size:20px}
  .kup-tok{margin-top:32px}
  .kup-h3{font-size:21px}
  .kup-nalog{padding:22px 18px 20px;margin-top:30px}
  .kup-dno{margin-top:32px}
}

/* korak „za koga je ovo citanje" — isti jezik oblika kao kartice dubine */
.ko-sta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--os-ink-soft);margin:0 0 18px}
.kogrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.kocard{background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:4px;
  padding:26px;display:flex;flex-direction:column;gap:10px}
.kocard-fali{border-style:dashed}
.ko-lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--os-ink-soft)}
.ko-nm{font-family:var(--serif);font-size:22px;color:var(--os-ink)}
.ko-prazno{color:var(--os-ink-soft);font-size:17px}
.ko-meta{font-size:13.5px;line-height:1.7;color:var(--os-ink-soft)}
.ko-rod{font-size:12.5px}
.ko-edit{width:100%;justify-content:center;text-align:center;margin-top:auto}
.ko-dno{margin-top:28px;display:flex;justify-content:flex-end}
.ko-dalje{min-width:240px;justify-content:center;text-align:center}
.ko-dalje[disabled]{opacity:.45;cursor:not-allowed}
/* Signature Lični nacrt bez tačnog sata: umesto zaključanog dugmeta, razlog i
   dva puta dalje. Boja Signature-a samo na ivici — ovo je obaveštenje, ne greška. */
.ko-sat{margin-top:22px;background:var(--os-panel);border:1px solid var(--os-line-soft);
  border-left:3px solid var(--os-signature);border-radius:4px;padding:20px 24px}
.ko-sat p{font-size:14px;line-height:1.7;color:var(--os-ink-soft);margin:0 0 16px}
.ko-sat-dug{display:flex;gap:12px;flex-wrap:wrap}
.ko-sat-dug .btn{min-width:220px;justify-content:center;text-align:center}
.ko-dno-sat{display:none}
@media(max-width:760px){
  .kogrid{grid-template-columns:1fr;gap:18px}
  .ko-dno{justify-content:stretch}
  .ko-dalje{width:100%}
  .ko-sat{padding:18px}
  .ko-sat-dug{flex-direction:column}
  .ko-sat-dug .btn{width:100%;min-width:0}
}

/* korak 1: dve dubine, prava korica u svakoj */
.rdgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.rdcard{background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:4px;
  padding:26px;display:flex;flex-direction:column;gap:20px}
.rd-signature{background:linear-gradient(180deg,rgba(141,81,64,.05),transparent),var(--os-panel)}
.rd-cov{display:flex;justify-content:center}
.rd-cov .covmini{--k:.30}
.rd-cov .cov{box-shadow:0 18px 40px rgba(60,52,38,.16)}
.rd-tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--os-essential-dark);margin-bottom:10px}
.rd-signature .rd-tag{color:var(--os-signature-dark)}
.rdcard h3{font-family:var(--serif);font-size:22px;font-weight:400;
  color:var(--os-ink);margin:0 0 6px;line-height:1.25}
.rd-len{font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-muted);margin-bottom:12px}
.rdcard p{font-size:13.5px;line-height:1.7;color:var(--os-ink-soft);margin:0 0 14px}
.rdcard ul{margin:0 0 16px;padding-left:0;list-style:none}
.rdcard li{font-size:13px;color:var(--os-ink-soft);padding:4px 0 4px 16px;position:relative}
.rdcard li:before{content:"";position:absolute;left:0;top:11px;width:5px;height:1px;background:var(--os-bronze)}
.rd-fit{font-size:12.5px;color:var(--os-muted);border-top:1px solid var(--os-line-soft);
  padding-top:12px;margin-bottom:18px}
.rd-fit b{color:var(--os-ink-soft);font-weight:500}
.rd-tx{display:flex;flex-direction:column;flex:1}
.rdcard .btn{width:100%;justify-content:center;text-align:center;margin-top:auto}
.rd-signature .btn{background:var(--os-signature-dark);border-color:var(--os-signature-dark)}

/* korak 2: pet izvestaja */
.rgrid2{display:grid;gap:12px;margin-top:6px}
.rcard2{display:grid;grid-template-columns:44px 1fr 190px;gap:20px;align-items:center;
  background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:3px;padding:16px 22px}
.rc-gl{font-family:var(--serif);font-size:26px;color:var(--os-bronze);text-align:center}
.rc-tx h3{font-family:var(--serif);font-size:19px;font-weight:400;
  color:var(--os-ink);margin:0 0 4px}
.rc-tx p{font-size:12.8px;line-height:1.6;color:var(--os-ink-soft);margin:0}
.rc-buy{text-align:right}
.rc-p{font-family:var(--serif);font-size:23px;color:var(--os-ink);margin-bottom:8px}
.rc-buy .btn{width:100%;justify-content:center;text-align:center}
.rc-more{background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--os-muted);
  margin-top:8px;padding:4px 0}
.rc-more:hover{color:var(--os-essential-dark)}

/* korak 2: paketi — mirna cena, bez uzvika i bez precrtanog dzumbusa */
.rpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.rpack{background:var(--os-panel);border:1px solid var(--os-line-soft);border-radius:3px;
  padding:24px 22px;display:flex;flex-direction:column}
.rpack.feat{border-color:var(--os-essential);background:linear-gradient(180deg,rgba(102,112,90,.06),transparent),var(--os-panel)}
.rp-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rp-gl{font-family:var(--serif);font-size:22px;color:var(--os-bronze)}
.rpack h3{font-family:var(--serif);font-size:19px;font-weight:400;
  color:var(--os-ink);margin:0}
.rp-inc{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;flex:1}
.rp-inc span{font-size:12.5px;color:var(--os-ink-soft);padding-left:14px;position:relative}
.rp-inc span:before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--os-bronze)}
.rp-num{border-top:1px solid var(--os-line-soft);padding-top:12px;margin-bottom:16px}
.rp-r{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
  color:var(--os-muted);padding:3px 0}
.rp-r s{color:var(--os-muted)}
.rp-big{color:var(--os-ink)}
.rp-big b{font-family:var(--serif);font-size:26px;font-weight:400}
.rp-save em{font-style:normal;color:var(--os-essential-dark)}
.rpack .btn{width:100%;justify-content:center;text-align:center}
/* Signature nije drugi dizajn — samo druga boja u istoj porodici (brief 4). */
.rg-sig .btn:not(.ghost){background:var(--os-signature-dark);border-color:var(--os-signature-dark)}
.rg-sig .rc-gl,.rg-sig .rp-gl{color:var(--os-signature)}

/* ===== KASA ===== */
.modal.ka{max-width:440px}
.ka h3{font-family:var(--serif);font-size:24px;font-weight:400;
  color:var(--os-ink);margin:18px 0 6px}
.ka-p{font-size:13.5px;line-height:1.65;color:var(--os-ink-soft);margin:0 0 16px}
.ka-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;
  color:var(--os-ink-soft);border:1px solid var(--os-line-soft);border-radius:3px;
  padding:12px 14px;background:var(--os-paper-2)}
.ka-sum b{margin-left:auto;font-family:var(--serif);font-size:20px;
  font-weight:400;color:var(--os-ink)}
.ka-t{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--os-muted)}
.ka input{width:100%;font-size:15px;padding:13px 14px;border:1px solid var(--os-line);
  border-radius:3px;background:#fff;color:var(--os-ink);margin-bottom:6px}
.ka input:focus{outline:none;border-color:var(--os-essential)}
.ka-err{font-size:12px;color:var(--os-signature-dark);min-height:16px;margin-bottom:8px}
.ka-note{font-size:11.5px;color:var(--os-muted);margin-top:14px;line-height:1.55}
/* `.ka .ka-sat`, ne samo `.ka-sat`: `.modal p{text-align:center}` je jaci. */
.ka .ka-sat{font-size:12.5px;line-height:1.6;color:var(--os-ink-soft);margin:-4px 0 16px;text-align:left;
  padding:10px 12px;border-left:3px solid var(--os-signature);background:var(--os-paper-2)}
/* Saglasnost (Legal Pack 5.1). Čekboks je svoj red, levo: `.modal p`
   centrira, a `.ka input` bi ga razvukao na celu širinu kao polje za mejl. */
.ka .ka-sag{display:flex;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;
  font-size:12.5px;line-height:1.55;color:var(--os-ink-soft);margin:2px 0 4px;
  text-transform:none;letter-spacing:0}   /* opšti `label` je verzal, za natpise polja */
/* Sam čekboks saglasnosti: stil-5-urednicki.css (pravi čekboks pregledača, 20 px). */
.ka .ka-sag-err:empty{display:none}
.ka .ka-prih{font-size:11.5px;line-height:1.55;color:var(--os-muted);text-align:left;margin:6px 0 14px}
.ka .ka-prih a{color:var(--os-essential-dark);text-decoration:underline;text-underline-offset:2px}
.ka-note+.ka-note{margin-top:6px}

@media(max-width:900px){
  .rdgrid{grid-template-columns:1fr;gap:18px}
  .rpgrid{grid-template-columns:1fr}
  .rep-h{font-size:27px}
}
@media(max-width:720px){
  /* Jedan izvestaj u redu, cena i dugme pod tekstom — bez vodoravnog klizanja. */
  .rcard2{grid-template-columns:34px 1fr;gap:14px;padding:18px}
  .rc-buy{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    border-top:1px solid var(--os-line-soft);padding-top:12px}
  .rc-p{margin:0}
  .rc-buy .btn{width:auto;flex:1 1 auto}
  .rc-more{margin:0}
  .rep-top{flex-direction:column;gap:14px}
  #reports .p-top .btn.ghost{padding:7px 11px;font-size:11px}
}