/* stil-3-profil.css — stilovi sajta (index.html), deo 3 od 5: profil: privatna biblioteka. Učitavaju se redom i kasniji deo preglasava raniji, kao dok su bili jedan blok; vidi docs/struktura-sajta.md. */
/* ===== PROFIL: PRIVATNA BIBLIOTEKA =====
Brif „Profile Dashboard — Premium Editorial" (25.09.2026) i Petrove makete
za desktop, iPad i iPhone. Profil nije prodavnica: izvestaji su junak,
savetnik i nalog stoje sa strane, preporuka je jedna.
Boje su iz postojeceg sistema: slonovaca, maslina, terakota za Signature i
nadogradnju, bronza za sitnice. Senki skoro nema (samo korica, jer je
knjiga) — dubina dolazi iz razmaka, tipografije i tona. Naslovi su
Playfair, isti kao na koricama; telo je Montserrat. */
#profile{--pd-bg:#F4F0E7;--pd-kar:#FAF7F1;--pd-lin:rgba(41,41,32,.12);--pd-lin2:rgba(41,41,32,.075);
--pd-sage:#E7E6D8;--pd-ter:#A5563E;--pd-ter-h:#8E4633;--pd-ter-bg:#F6ECE5;--pd-zel:#3C8A66;
--pd-mas:#4F5845;--pd-mas-h:#414937;--pd-pesak:#ECE3D5;--pd-sir:clamp(16px,3.6vw,56px);
background:var(--pd-bg);color:var(--os-ink)}
/* `section{padding:76px 0}` sa pocetne strane ne sme da udje u profil. */
#profile section{padding:0}
#profile .pd-shell,#profile .pf-nav,.pd-meni{font-weight:400}
#profile .pd-str{width:16px;height:16px;flex:0 0 auto}
.pd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#profile .pd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:0 24px;
border:0;border-radius:5px;background:var(--pd-mas);color:#F7F2E8;cursor:pointer;
font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:.01em;
white-space:nowrap;transition:background .18s}
#profile .pd-btn:hover{background:var(--pd-mas-h)}
#profile .pd-btn:disabled{opacity:.6;cursor:default}
#profile .pd-btn.ter{background:var(--pd-ter)}
#profile .pd-btn.ter:hover{background:var(--pd-ter-h)}
#profile .pd-btn i,#profile .pd-obrub i{font-style:normal;font-size:15px;line-height:1}
#profile .pd-obrub{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:0 20px;
background:transparent;border:1px solid var(--pd-lin);border-radius:5px;cursor:pointer;color:var(--os-ink);
font-family:var(--sans);font-size:13.5px;font-weight:400;white-space:nowrap;transition:.18s}
#profile .pd-obrub:hover{border-color:var(--pd-mas);color:var(--pd-mas)}
#profile .pd-obrub.ter{border-color:rgba(165,86,62,.42);color:var(--pd-ter)}
#profile .pd-obrub.ter:hover{border-color:var(--pd-ter);background:var(--pd-ter-bg)}
#profile .pd-lnk{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:6px 0;cursor:pointer;
color:var(--os-ink);font-family:var(--sans);font-size:14px;font-weight:400;white-space:nowrap}
#profile .pd-lnk:hover{color:var(--pd-mas)}
#profile .pd-lnk svg{width:18px;height:18px;flex:0 0 auto}
/* ---- zaglavlje ---- */
.pf-nav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
height:64px;padding:0 var(--pd-sir);background:rgba(244,240,231,.95);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--pd-lin2)}
.pf-nav .pd-nl{display:flex;align-items:center;gap:6px;justify-self:start;min-width:0}
.pf-nav .logo{display:flex;align-items:center;cursor:pointer}
.pf-nav .nlinks{display:flex;gap:46px;margin:0}
.pf-nav .nlink{font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:.01em;
text-transform:none;color:var(--os-ink-soft);padding:8px 0}
.pf-nav .nlink:hover{color:var(--os-ink)}
.pd-nr{justify-self:end;display:flex;align-items:center;gap:8px}
.pd-ikona{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:0;
cursor:pointer;color:var(--os-ink);border-radius:6px;padding:0;margin-left:-8px}
.pd-ikona svg{width:23px;height:23px}
.pd-av{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:3px;border-radius:999px;
color:var(--os-ink-soft)}
.pd-av b{width:36px;height:36px;border-radius:50%;background:var(--pd-mas);color:#F6F1E6;display:flex;
align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:17px}
.pd-av svg{width:15px;height:15px}
.pd-av:hover b{background:var(--pd-mas-h)}
.pd-prijava{background:none;border:1px solid var(--pd-lin);border-radius:5px;min-height:36px;padding:0 16px;cursor:pointer;
font-family:var(--sans);font-size:13px;color:var(--os-ink)}
.pd-prijava:hover{border-color:var(--pd-mas);color:var(--pd-mas)}
/* padajuci meni: navigacija na telefonu, nalog, „…" kod osobe */
.pd-meni{position:fixed;z-index:120;min-width:224px;max-width:calc(100vw - 24px);background:var(--pd-kar);
border:1px solid var(--pd-lin);border-radius:8px;box-shadow:0 14px 34px rgba(50,40,25,.12);padding:6px;display:none}
.pd-meni.on{display:block}
.pd-mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:5px;
min-height:44px;padding:0 12px;cursor:pointer;font-family:var(--sans);font-size:14px;color:var(--os-ink)}
.pd-mi:hover,.pd-mi:focus-visible{background:var(--pd-pesak);outline:0}
.pd-mi span{margin-left:auto;color:var(--os-muted);font-size:12.5px}
.pd-msep{height:1px;background:var(--pd-lin2);margin:4px 6px}
.pd-mh{padding:10px 12px 9px;font-size:12.5px;color:var(--os-muted);border-bottom:1px solid var(--pd-lin2);
margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- kostur: glavna kolona ~74 %, strana ~26 % (§1) ---- */
.pd-shell{max-width:1560px;margin:0 auto;padding:0 var(--pd-sir) 88px;display:grid;
grid-template-columns:minmax(0,1fr) clamp(256px,23vw,340px);column-gap:clamp(24px,2.2vw,32px);align-items:start}
.pd-main{min-width:0}
/* ---- hero: ciji je ovo profil (§3) ---- */
.pd-hero{position:relative;min-height:226px;padding:26px 0 24px;border-bottom:1px solid var(--pd-lin);
display:flex;flex-direction:column;justify-content:center}
.pd-luk{position:absolute;right:0;top:0;bottom:0;width:min(34%,380px);pointer-events:none;overflow:hidden}
.pd-luk img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.pf-hl{position:relative;z-index:1;max-width:64%}
.pd-id{display:flex;align-items:center;gap:28px}
.pd-it{min-width:0}
.pf-av2{flex:0 0 auto;width:92px;height:92px;border-radius:50%;background:var(--pd-mas);color:#F6F1E6;
display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:42px;font-weight:400}
.pf-nm2{font-family:var(--serif);font-size:42px;line-height:1.08;font-weight:400;color:var(--os-ink);
margin:0;overflow-wrap:anywhere}
.pd-meta{font-size:15px;color:var(--os-ink-soft);margin-top:8px;line-height:1.5}
.pd-meta span+span:before,.pf-fakti span+span:before{content:"·";margin:0 9px;color:var(--os-muted)}
.pf-fakti{font-size:15px;color:var(--os-ink-soft);line-height:1.5;margin-top:2px}
.pd-gost-h{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--os-ink);margin:0 0 4px}
/* menjac osoba: male pilule, ne velike kartice (§3) */
.pf-osobe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pf-os,.pf-dodaj{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 8px;border-radius:999px;
border:1px solid transparent;background:var(--pd-pesak);color:var(--os-ink);cursor:pointer;
font-family:var(--sans);font-size:14px;font-weight:400;transition:border-color .18s,background .18s}
/* Inicijal je u ::before, pa `textContent` pilule ostaje samo ime. */
.pf-os:before{content:attr(data-i);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
justify-content:center;background:#D5A48E;color:#FBF6EE;font-family:var(--serif);font-size:14px}
.pf-os.act{background:var(--pd-kar);border-color:var(--pd-mas)}
.pf-os.act:before{background:var(--pd-mas)}
.pf-os:not(.act):hover{border-color:rgba(79,88,69,.45)}
.pf-dodaj{background:transparent;border-color:var(--pd-lin);padding:0 20px}
.pf-dodaj:hover{border-color:var(--pd-mas);color:var(--pd-mas)}
.pf-dodaj i{font-style:normal;font-size:20px;line-height:1;font-weight:300}
.pd-hakc{display:none}
.pf-noacc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;max-width:640px;
background:var(--pd-kar);border:1px solid var(--pd-lin2);border-radius:8px;padding:13px 16px}
.pf-nt{font-size:13px;color:var(--os-ink-soft);line-height:1.5;flex:1 1 240px}
.pf-nb{display:flex;gap:8px;flex:0 0 auto}
.pf-nb .seg{font-size:11.5px;padding:7px 13px}
/* ---- Tvoji izvestaji (§4, §5) ---- */
.pd-lh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 0 16px}
.pd-h2{font-family:var(--serif);font-size:40px;line-height:1.1;font-weight:400;color:var(--os-ink);margin:0}
.pd-sort{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.pd-sort select{appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;width:auto;
font-family:var(--sans);font-size:14px;color:var(--os-ink);padding:8px 24px 8px 4px;margin:0}
.pd-sort:after{content:"";position:absolute;right:7px;top:50%;width:6px;height:6px;margin-top:-5px;
border-right:1.3px solid var(--os-ink-soft);border-bottom:1.3px solid var(--os-ink-soft);transform:rotate(45deg);pointer-events:none}
/* Kartica se prilagodjava sirini SPISKA, ne ekrana: isti spisak je
sirok na desktopu, uzan kraj strane na iPad-u i ceo ekran na telefonu.
Od 29.09.2026. (brif „Editorial Redesign" §10.6, šesti panel rendera)
kartice stoje u MREŽI kao u biblioteci: korica gore levo, ispod naziv,
nivo, stanje i poziv na dnu kartice. Na uskom spisku (telefon) ostaje
zbijen red: korica levo, tekst desno, dugmad ispod. */
.pd-karte{container-type:inline-size;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pd-k{display:flex;flex-direction:column;position:relative;
background:var(--pd-kar);border:1px solid var(--pd-lin2);border-radius:8px;padding:22px 22px 20px;overflow:hidden;
transition:border-color .18s}
.pd-k:hover{border-color:rgba(79,88,69,.32)}
.pd-k.act{border-color:rgba(79,88,69,.55)}
.pd-kor{align-self:flex-start;line-height:0;border-radius:1px;
box-shadow:0 1px 2px rgba(40,30,15,.10),0 6px 16px rgba(40,30,15,.10)}
.pd-kor .covmini{--k:.118}
.pd-inf{min-width:0;display:flex;flex-direction:column;padding-top:18px}
.nm3{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--os-essential);margin:0;line-height:1.4}
/* Signature bez glasne pilule (§5): tipografija, a oznaka proizvoda u
terakoti — iste boje kao traka na njegovoj korici. */
.pd-k.sig .nm3{color:var(--pd-ter)}
.tg2{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:400;color:var(--os-ink);margin:3px 0 0}
.pd-par{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:400;color:var(--os-ink);margin:3px 0 0}
.pd-par + .tg2{font-size:21px;margin-top:0}
.st2{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;font-size:14px;color:var(--os-ink);margin-top:7px}
.st2:before{content:"";width:9px;height:9px;border-radius:50%;background:#A8A294;flex:0 0 auto}
.st2.ok:before{background:var(--pd-zel)}
.st2.radi:before{background:#B9B1A0}
.st2.pao:before{background:#C8902F}
.st2.nov:before{background:transparent;box-shadow:inset 0 0 0 1.3px #A8A294}
.st2 em{font-style:normal;color:var(--os-muted)}
.st2 em:before{content:"·";margin-right:8px}
/* u kartici mreže datum stoji u svom redu, ispod stanja (render: „Završeno /
7. jun"), pa se tačka između njih nikad ne prelomi na početak reda */
.pd-k .st2 em{flex-basis:100%;padding-left:17px}
.pd-k .st2 em:before{display:none}
.op2{font-size:14px;line-height:1.5;color:var(--os-ink-soft);margin:8px 0 0;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pd-akt{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;margin-top:14px}
/* poziv na dnu kartice, preko cele širine; kartice u istom redu su iste
visine, pa dugmad stoje u istoj liniji */
.pd-k > .pd-akt{margin-top:auto;padding-top:20px;min-width:0;flex-direction:column;align-items:stretch;gap:4px}
.pd-k > .pd-akt .pd-btn{width:100%;justify-content:center}
.pd-k > .pd-akt .pd-lnk{align-self:center;min-height:44px}
/* gotov izveštaj: „Otvori" je miran obrub (render); nenapisan zadržava pun poziv */
#profile .pd-k.rdy > .pd-akt .pd-btn.go2{background:transparent;color:var(--pd-mas);box-shadow:inset 0 0 0 1px rgba(79,88,69,.42)}
#profile .pd-k.rdy > .pd-akt .pd-btn.go2:hover{background:rgba(79,88,69,.06);box-shadow:inset 0 0 0 1px var(--pd-mas)}
.pd-priprema{font-size:14px;color:var(--os-muted);text-align:center}
/* nadogradnja u ISTOJ kartici (§7) — samo kad je server potvrdi (§8) */
.pd-nad{margin:18px -22px -20px;padding:18px 22px 20px;
background:var(--pd-ter-bg);border-top:1px solid rgba(165,86,62,.16);display:flex;flex-direction:column;justify-content:center}
.pd-nad h4{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--pd-ter);margin:0}
.pd-nad p{font-size:13px;line-height:1.45;color:var(--os-ink-soft);margin:6px 0 10px}
.pd-cene{font-size:13.5px;color:var(--os-ink)}
.pd-cene div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.pd-cene .kr{color:var(--os-muted);border-bottom:1px solid rgba(41,41,32,.14);padding-bottom:7px}
.pd-cene .uk{padding-top:7px;font-size:15px;color:var(--pd-ter)}
.pd-cene .uk b{font-weight:500}
.pd-nad .pd-btn{width:100%;margin-top:12px}
/* ---- nalog bez osobe (brif „Auth / Moj profil / Odjava“ §3, §11) ----
Ispravno stanje naloga, ne nedovršena registracija: mirna kolona, bez
greške, bez praznih kartica i bez bočne kolone koja bez osobe nema šta da
pokaže. Luk iz heroja ostaje — ista strana, samo još bez osobe. */
#profile.pd-prazan .pd-shell{grid-template-columns:minmax(0,1fr)}
#profile.pd-prazan .pd-lib,#profile.pd-prazan .pf-side,#profile.pd-prazan .pd-hakc{display:none}
#profile.pd-prazan .pd-hero{border-bottom:0;min-height:0;padding:clamp(36px,7vh,80px) 0 40px}
.pd-pn{max-width:560px}
.pd-pn-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-muted)}
.pd-pn-mejl{font-size:15px;color:var(--os-ink-soft);margin-top:10px;overflow-wrap:anywhere}
.pd-pn-h{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);line-height:1.15;font-weight:400;
color:var(--os-ink);margin:32px 0 0}
.pd-pn-p{font-size:15px;line-height:1.6;color:var(--os-ink-soft);margin:12px 0 0;max-width:46ch}
.pd-pn-akc{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
#profile .pd-pn-odj{background:none;border:0;padding:8px 0;cursor:pointer;font-family:var(--sans);
font-size:14px;color:var(--os-ink-soft);text-decoration:underline;text-underline-offset:4px;
text-decoration-color:rgba(41,41,32,.3)}
#profile .pd-pn-odj:hover{color:var(--pd-mas)}
@media(max-width:560px){
.pd-pn-akc{flex-direction:column;align-items:stretch}
#profile .pd-pn-odj{align-self:center}
}
/* prazno stanje (§15): bez laznih kartica */
.pd-prazno{padding:30px 0 8px;grid-column:1/-1}
.pd-prazno h3{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--os-ink);margin:0}
.pd-prazno p{font-size:15px;color:var(--os-ink-soft);margin:10px 0 20px;max-width:52ch}
.pd-prazno .pd-akt{margin-top:0}
#profOut:empty{display:none}
#profile .quota.dvojnik{display:none}
/* ---- strana (§10–§13) ---- */
.pf-side{display:flex;flex-direction:column;gap:22px;padding-top:20px}
.pd-akc{display:flex;justify-content:flex-end;gap:12px}
#profile .pd-vise{width:48px;padding:0}
.pd-vise svg{width:18px;height:18px}
.pd-sav{background:var(--pd-sage);border-radius:10px;padding:26px 28px 28px}
.pd-sav h3,.pd-nalog h3,.pd-prep h3{font-family:var(--serif);font-weight:400;color:var(--os-ink);margin:0}
.pd-sav h3{display:flex;align-items:center;gap:14px;font-size:28px;line-height:1.15}
.pd-sav h3 svg{width:28px;height:28px;flex:0 0 auto;color:var(--pd-mas)}
.pd-sav > p{font-size:15px;line-height:1.5;color:var(--os-ink-soft);margin:12px 0 0}
.pd-kv{display:flex;align-items:center;gap:12px;margin-top:18px}
.pd-kv svg{width:24px;height:24px;flex:0 0 auto;color:var(--os-ink)}
.pf-kvota{font-size:15px;color:var(--os-ink)}
#chatWrap{margin-top:16px}
#profile .sav-red{display:block;padding:0;margin:0;border:0;background:none;border-radius:0}
#profile .sav-red.drugi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;
margin-top:12px;padding-top:12px;border-top:1px solid rgba(41,41,32,.10)}
#profile .sav-ko{font-family:var(--sans);font-size:14px;color:var(--os-ink)}
#profile .sav-iz{display:block;font-size:12px;color:var(--os-muted);margin:1px 0 0}
#profile .sav-red .pd-o{display:block;margin-bottom:10px}
.pd-sav .lock{margin-top:14px;border:0;border-radius:0;padding:12px 0 0;text-align:left;background:none;
border-top:1px solid rgba(41,41,32,.10)}
.pd-sav .lock p{font-size:13.5px;color:var(--os-ink-soft)!important}
.pd-sav-n{font-size:14px;color:var(--os-ink-soft);margin:14px 0 0;line-height:1.5}
.pd-nalog{background:var(--pd-kar);border:1px solid var(--pd-lin2);border-radius:10px;padding:22px 24px 12px}
.pd-nalog h3{font-size:23px;margin-bottom:8px}
.side-rows{display:flex;flex-direction:column}
.side-r{display:flex;align-items:center;gap:16px;min-height:44px;padding:8px 0;background:none;border:0;width:100%;
text-align:left;cursor:pointer;font-family:var(--sans);font-size:14.5px;color:var(--os-ink)}
.side-r.ne{cursor:default}
.side-r svg{width:20px;height:20px;flex:0 0 auto;color:var(--os-ink-soft)}
.side-r:not(.ne):hover{color:var(--pd-mas)}
.side-r > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-r .rv{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--os-ink-soft);flex:0 0 auto}
.side-r .rv svg{width:14px;height:14px}
.pd-prep{border-top:1px solid var(--pd-lin);padding:22px 12px 0}
.pd-prep h3{font-size:20px;margin-bottom:16px}
#upsellGrid{display:block}
.ups2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.ups2 .covmini{--k:.112}
.ups2 h4{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--os-ink);margin:2px 0 6px}
.ups2 p{font-size:13.5px;color:var(--os-ink-soft);line-height:1.45;margin:0 0 14px}
/* ---- kartica po sirini spiska ----
Uzak spisak (telefon, jedna kartica u redu): zbijen red kao na maketi za
iPhone — korica levo, tekst desno, dugmad ispod preko cele kartice. */
@container (max-width:520px){
.pd-k{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:12px 14px;
grid-template-areas:"kor inf" "akt akt" "nad nad";grid-template-rows:auto auto auto}
.pd-k > .pd-kor{grid-area:kor;align-self:start}
.pd-kor .covmini{--k:.124}
.pd-inf{grid-area:inf;align-self:center;padding:0}
.nm3{font-size:10.5px;letter-spacing:.14em}
.tg2,.pd-par{font-size:25px}
.pd-par + .tg2{font-size:19px}
.st2{font-size:13.5px}
.st2 em{flex-basis:100%;padding-left:17px}
.st2 em:before{display:none}
.op2{font-size:14px;-webkit-line-clamp:3}
.pd-k > .pd-akt{grid-area:akt;flex-direction:row;align-items:center;gap:10px 22px;margin:14px 0 2px;padding-top:0}
.pd-k > .pd-akt .pd-btn{width:auto}
.pd-k > .pd-akt .pd-lnk{align-self:auto}
.pd-nad{grid-area:nad;margin:14px -14px -12px -14px;padding:16px}
.pd-nad-in{max-width:none}
}
@media(max-width:640px){ .pd-karte{gap:12px} }
/* izbor po izveštaju (§10.6): tanki jezičci, kao na strani proizvoda */
.pd-uvod{font-size:15px;line-height:1.5;color:var(--os-ink-soft);margin:8px 0 0}
.pd-tabovi{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid var(--pd-lin2);margin:14px 0 24px}
.pd-tabovi[hidden]{display:none}
.pd-tab{background:none;border:0;border-bottom:2px solid transparent;margin:0 0 -1px;padding:12px 1px 11px;min-height:44px;
font-family:var(--sans);font-size:14px;color:var(--os-ink-soft);cursor:pointer;transition:color .15s,border-color .15s}
.pd-tab:hover{color:var(--os-ink)}
.pd-tab.act{color:var(--os-ink);border-bottom-color:var(--pd-mas)}
.pd-tab:focus-visible{outline:2px solid var(--pd-mas);outline-offset:2px}
/* iPad polozeno i uzi laptop: ista dva stuba, zbijenije */
@media(max-width:1279px){
.pd-id{gap:22px}
.pf-av2{width:80px;height:80px;font-size:36px}
.pf-nm2{font-size:38px}
.pd-meta,.pf-fakti{font-size:13.5px}
.pf-hl{max-width:68%}
.pd-luk{width:31%}
.pd-sav{padding:22px 22px 24px}
.pd-sav h3{font-size:25px;gap:12px}
.pd-sav h3 svg{width:24px;height:24px}
.pd-sav > p{font-size:14px}
.pd-nalog{padding:20px 20px 10px}
.pd-h2{font-size:36px}
}
/* iPad uspravno i uze: jedna kolona, redosled iz §20 */
@media(max-width:959px){
.pd-shell{grid-template-columns:minmax(0,1fr)}
.pf-side{padding-top:28px}
.pd-akc{display:none}
.pd-hakc{display:flex;position:relative;z-index:1;gap:10px;margin-top:16px}
.pd-luk{width:32%}
.pd-sav{order:1} .pd-prep{order:2} .pd-nalog{order:3}
.pf-hl{max-width:66%}
}
/* telefon */
@media(max-width:640px){
.pf-nav{height:58px;grid-template-columns:auto 1fr auto}
.pf-nav .nlinks{display:none}
.pd-ikona{display:flex}
.pf-nav .logo svg{width:126px!important;height:auto!important}
.pd-hero{min-height:0;padding:20px 0}
.pd-luk{width:56%;opacity:.38;-webkit-mask-image:linear-gradient(to right,transparent,#000 70%);mask-image:linear-gradient(to right,transparent,#000 70%)}
.pf-hl{max-width:none}
.pd-id{gap:16px;align-items:flex-start}
.pf-av2{width:62px;height:62px;font-size:28px}
.pf-nm2{font-size:31px}
.pd-meta,.pf-fakti{font-size:13px}
.pd-meta{margin-top:4px}
.pf-osobe{margin-top:16px;gap:8px}
.pf-os{min-height:40px;font-size:13.5px;padding:0 16px 0 6px}
.pf-dodaj{min-height:40px;padding:0;width:40px;justify-content:center}
.pf-dodaj span{display:none}
/* Na telefonu samo „…" (u njemu je i „Izmeni podatke"), u visini pilula. */
.pd-hakc{position:absolute;right:0;bottom:20px;margin:0}
#profile .pd-hakc .pd-iz{display:none}
.pf-osobe{padding-right:56px}
.pd-h2{font-size:30px}
.pd-lh{margin:18px 0 12px}
.pd-sav{padding:22px 20px}
.pd-sav h3{font-size:25px}
.pd-nalog{padding:18px 18px 8px}
.pd-prep{padding:20px 4px 0}
.pf-nb{flex:1 1 100%}
.pf-nb .seg{flex:1 1 auto;text-align:center}
}
/* --- FAQ i futer u toploj paleti --- */
.rcard{background:var(--panel)}
footer{background:var(--foot)}
@media(max-width:1100px){
.hcov-a .covmini{--k:.38}
.hcov-b .covmini{--k:.33}
.hcov-a{margin-left:-176px} .pgrid2{grid-template-columns:1fr;gap:26px}
.nlinks{gap:22px}
.nlink{font-size:12.5px}
}
@media(max-width:900px){
.hgrid{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:40px}
.hbtns{gap:10px}
.hbtns .btn{flex:1 1 100%;justify-content:center;text-align:center}
/* Na mobilnom tekst ide prvi, korice ispod — ne obrnuto. */
.hart{order:2;max-width:100%;margin:0 auto;min-height:0}
.hcov-b{transform:translate(0,12px) rotate(-1.2deg)}
.hcov-a{margin-left:-145px}
.hcov-a .covmini{--k:.30}
.hcov-b .covmini{--k:.26}
.bookband{grid-template-columns:1fr;padding:26px 24px;gap:24px}
.packs{grid-template-columns:1fr}
.tgrid{grid-template-columns:1fr 1fr;gap:18px}
.tgrid > div:nth-child(3){padding-left:0;border-left:0}
}
.stx{flex:1;min-width:0;display:flex;flex-direction:column}
@media(max-width:720px){
.hprops{gap:14px}
.hprops span{padding:0;border-left:0;flex:0 0 auto}
.nav-in{padding:11px 16px}
.nright .btn{padding:10px 14px;font-size:11.5px}
/* Ikonica profila se na telefonu ne prikazuje, ali „Prijava" mora — to je
jedina kontrola naloga koju gost tamo ima. */
.acct{display:none}
.nlogin{font-size:12.5px;padding:8px 2px}
/* Zaglavlje na telefonu je: ☰ OWN SKY Prijava. Veliko dugme „Pogledaj
izvestaje" se gasi da „Prijava" ne bi bila stisnuta uz ivicu — do
izvestaja se ide iz menija i iz hero-a odmah ispod. */
#navCta{display:none}
.tgrid{grid-template-columns:1fr}
.tgrid > div{padding-left:0;border-left:0}
}
.packs.sigrow .packc{border-color:var(--gold);box-shadow:0 10px 30px rgba(120,88,40,.10)}
.packs.sigrow .pbody{background:linear-gradient(180deg,rgba(164,119,50,.05),transparent)}
/* ---- telefon i tablet: poslednja rec, posle svih ranijih pravila ---- */
@media(max-width:960px){
nav .nlinks{display:none!important}
nav .nright .nlink{display:none!important}
.burger{display:block!important;order:-1;margin-left:0}
.nav-in{flex-wrap:nowrap}
.logo{margin-right:auto}
}
@media(max-width:720px){
.hart{max-width:100%!important}
.hcopy h1{font-size:clamp(30px,8vw,40px)}
.hprops{margin-top:24px;gap:16px}
.hprops b{font-size:10.5px}
.bookband{padding:22px 18px}
.pgrid2{gap:22px}
.ctrh{font-size:27px}
}
/* --- dva nivoa jedan ispod drugog, nista skriveno --- */
.tierblock{margin-top:26px}
.tierblock + .tierblock{margin-top:44px}
.tierhead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.th-l{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;min-width:0}
.tname{font-family:var(--serif);font-size:26px;color:var(--cream);line-height:1}
.tierblock.sig .tname{color:var(--gold-deep)}
.tdesc{font-size:12.5px;color:var(--muted);line-height:1.5}
.tfrom{font-size:12px;color:var(--gold-deep);white-space:nowrap;letter-spacing:.04em}
.tierblock.sig .tierhead{border-bottom-color:var(--gold)}
/* cena na kartici usluge */
.tierhint{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
margin:30px 0 0;font-size:13px;color:var(--soft2);text-align:center}
/* Signature u padajucem meniju */
.svcm-pack.sigp{border-color:var(--gold);background:linear-gradient(180deg,rgba(164,119,50,.10),transparent)}
.svcm-pack.sigp .pn{color:var(--gold-deep)}
@media(max-width:720px){
.tierhead{gap:8px}
.tname{font-size:22px}
.tierhint{flex-direction:column;gap:8px}
}
/* --- prekidac dubine, odmah ispod navigacije --- */
.tierbar{background:var(--band);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.tb-in{max-width:1240px;margin:0 auto;padding:9px 30px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.tb-lab{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tswitch{position:relative;display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;margin:0}
.tsl{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--gold);border-radius:999px;transition:transform .34s cubic-bezier(.4,0,.2,1);z-index:0}
.tbtn{position:relative;z-index:1;background:none;border:0;border-radius:999px;padding:9px 22px;min-width:132px;
font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);cursor:pointer;transition:color .25s}
.tbtn.act{color:#fff;background:none}
.tbtn:not(.act):hover{color:var(--gold-deep)}
.tb-note{font-size:11.5px;color:var(--muted)}.tierblock.sig .tname{color:var(--gold-deep)}
@media(max-width:720px){
.tb-in{padding:8px 16px;gap:9px}
.tb-lab,.tb-note{display:none}
.tbtn{min-width:0;flex:1;padding:9px 14px;font-size:9.5px;letter-spacing:.1em}
.tswitch{width:100%;max-width:340px}
}
/* --- kartica „izvestaj je spreman" --- */
.done{border:1px solid var(--line);background:var(--panel);padding:34px 30px 30px;text-align:center;
max-width:520px;margin:22px auto 0;border-radius:3px;box-shadow:0 18px 40px rgba(90,68,40,.08)}
.done-ic{width:56px;height:56px;margin:0 auto 16px}
.done-ic svg{width:100%;height:100%}
.done h3{font-family:var(--serif);font-size:25px;font-weight:400;margin:0 0 6px;color:var(--cream)}
.done-m{font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:22px}
.done-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.done-b .btn{min-width:190px}
.done-b .btn:disabled{opacity:.42;cursor:not-allowed}
.done-n{font-size:11.5px;color:var(--faint);margin-top:16px;line-height:1.6}
.done .lnk{color:var(--muted)}
.done .lnk:hover{color:var(--gold-deep)}
@media(max-width:560px){ .done{padding:26px 18px 22px} .done-b .btn{min-width:0;width:100%} }
/* logo u navigaciji */
.logo .oslogo{display:block;height:auto}
.logo{padding:2px 0}
/* Mini brif §6: na uzem ekranu se zadrzava ISTI vodoravni sklop, samo manji.
104px je bila mera za uspravni sklop, koji je na toj sirini bio visok 40px;
vodoravni je na njoj visok 16px i razmak zvezda-natpis padne na 11px, ispod
donje granice iz §3. Na 122px razmak je 13px, a logo i dalje staje pored
dugmadi na 390px sirine — mereno, ne procenjeno. */
@media(max-width:720px){ .logo .oslogo{width:122px!important} }