/* Stranica knjige drbalic.ba: uvijek tamna, isti sistem kao naslovna.
   Raspored: uvod sa koricom, pa sekcije koje se čitaju odozgo (O knjizi, Video, Promocija, Recenzije, Utisci). */
:root{
  --ground:#0C1E22; --ground-2:#0F272C; --surface:#143036; --surface-2:#1A3B42;
  --ink:#EDF2EF; --ink-muted:#9BB1AF; --ink-faint:#6E8A88;
  --brass:#C6A15B; --brass-bright:#E6C68C; --salt:#7FB3AE;
  --line:rgba(198,161,91,.22); --line-soft:rgba(237,242,239,.10);
  --tag:#E3B25E;
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --maxw:1180px; --gutter:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; line-height:1.08; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.primjer{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ground); background:var(--tag); padding:3px 7px 2px; vertical-align:middle; margin-left:8px; font-weight:500}


/* navigacija */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(12,30,34,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:24px; height:66px}
.brand{font-family:var(--mono); font-size:14px; letter-spacing:.32em; text-transform:uppercase; text-decoration:none; margin-right:auto}
.brand b{color:var(--brass); font-weight:400}
.nav-links{display:flex; gap:26px}
.nav-links a{text-decoration:none; font-size:14px; color:var(--ink-muted)}
.nav-links a:hover, .nav-links a.aktivan{color:var(--ink)}
.korpa{position:relative; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); color:var(--brass); background:none; cursor:pointer}
.korpa svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6}
.korpa .cnt{position:absolute; top:-8px; right:-8px; min-width:20px; height:20px; border-radius:10px; background:var(--brass); color:var(--ground); font-size:11px; font-weight:600; display:grid; place-items:center; padding:0 5px; transition:transform .25s}
.korpa .cnt.skok{transform:scale(1.35)}
@media (max-width:860px){ .nav-links{display:none} }

/* uvod */
.put{padding-top:28px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.put a{text-decoration:none; color:var(--ink-muted)} .put a:hover{color:var(--brass)}
.uvod{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center; padding-block:40px 64px}
.korica{position:relative; max-width:400px; margin:0 auto; width:100%}
.korica::before{content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--line)}
.korica img{position:relative; width:100%; box-shadow:0 30px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04)}
.uvod h1{font-size:clamp(40px,6.4vw,76px); letter-spacing:-.02em; margin:14px 0 22px}
.uvod h1 em{font-style:italic; color:var(--brass)}
.lead{font-size:18px; color:var(--ink-muted); max-width:52ch}
.kupovina{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line-soft)}
.cijena{font-family:var(--display); font-size:40px; line-height:1}
.cijena small{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 26px; font-family:var(--body); font-size:15px; font-weight:600; text-decoration:none; border:1px solid var(--brass); cursor:pointer; transition:background .2s,color .2s}
.btn-puno{background:var(--brass); color:var(--ground)} .btn-puno:hover{background:var(--brass-bright); border-color:var(--brass-bright)}
.btn-prazno{background:none; color:var(--brass)} .btn-prazno:hover{background:rgba(198,161,91,.1)}
.btn[data-u-korpi="true"]{background:none; color:var(--brass)}
.uslovi{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; font-size:13.5px; color:var(--ink-faint)}
.uslovi span::before{content:""; display:inline-block; width:5px; height:5px; background:var(--salt); border-radius:50%; margin-right:9px; vertical-align:2px}

/* trasa: tri discipline, podatak koji ima samo ova knjiga */
.trasa{border-block:1px solid var(--line-soft); background:var(--ground-2)}
.trasa-in{display:grid; grid-template-columns:repeat(var(--kol,4),minmax(0,1fr))}
.etapa{padding:26px 24px; border-left:1px solid var(--line-soft)}
.etapa:first-child{border-left:0; padding-left:0}
.etapa b{display:block; font-family:var(--display); font-size:34px; font-weight:400; line-height:1; font-variant-numeric:tabular-nums}
.etapa span{display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.etapa.ukupno b{color:var(--brass)}
@media (max-width:760px){ .trasa-in{grid-template-columns:1fr 1fr} .etapa{padding:20px 0 20px 18px} .etapa:nth-child(odd){border-left:0; padding-left:0} .etapa:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} }

/* podmeni sekcija */
.podmeni{position:sticky; top:calc(env(safe-area-inset-top,0px) + 66px); z-index:15; background:rgba(12,30,34,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.podmeni .wrap{display:flex; gap:28px; overflow-x:auto; scrollbar-width:none}
.podmeni .wrap::-webkit-scrollbar{display:none}
.podmeni a{flex:none; text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding-block:16px 14px; border-bottom:2px solid transparent}
.podmeni a:hover{color:var(--ink)}
.podmeni a.aktivan{color:var(--brass); border-bottom-color:var(--brass)}
.podmeni sup{font-size:9px; color:var(--salt); margin-left:3px}

/* sekcije */
section{padding-block:88px 20px; scroll-margin-top:120px}
.sek-glava{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 40px; margin-bottom:40px}
.sek-glava h2{font-size:clamp(32px,4.6vw,52px); letter-spacing:-.015em; margin-top:12px}
.sek-glava > p{max-width:44ch; color:var(--ink-muted); font-style:italic; font-family:var(--display); font-size:18px}

/* o knjizi */
.o-knjizi{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:64px}
.o-knjizi .tekst{font-size:17.5px; line-height:1.85; color:var(--ink-muted); max-width:64ch}
.o-knjizi .tekst p + p{margin-top:20px}
.o-knjizi .tekst p:first-child::first-letter{font-family:var(--display); float:left; font-size:74px; line-height:.8; padding:8px 12px 0 0; color:var(--brass)}
.podaci{align-self:start; border:1px solid var(--line-soft); padding:26px 26px 10px}
.podaci dl{margin:0}
.podaci div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:14.5px}
.podaci div:first-of-type{border-top:0}
.podaci dt{color:var(--ink-faint)} .podaci dd{margin:0; text-align:right}
.podaci .eyebrow{margin-bottom:8px}

/* video */
.video-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px}
.video{position:relative; display:block; width:100%; aspect-ratio:16/9; background:var(--surface); border:0; padding:0; cursor:pointer; overflow:hidden; color:var(--ink); text-align:left}
.video img{width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .3s, transform .6s}
.video:hover img{opacity:.8; transform:scale(1.03)}
.video .igraj{position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; background:var(--brass); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.video .igraj svg{width:22px; height:22px; fill:var(--ground); margin-left:4px}
.video .opis{position:absolute; left:0; right:0; bottom:0; padding:48px 22px 18px; background:linear-gradient(transparent, rgba(12,30,34,.95))}
.video .opis b{display:block; font-family:var(--display); font-weight:400; font-size:21px}
.video .opis span{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass)}
.video-sporedni{display:grid; gap:18px; grid-template-rows:1fr 1fr}
.video-sporedni .video{aspect-ratio:auto; min-height:140px}
.video-sporedni .video .igraj{width:48px; height:48px; margin:-24px 0 0 -24px}
.video-sporedni .video .igraj svg{width:15px; height:15px}
.video-sporedni .video .opis b{font-size:16px}
.video.prazno{background:repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--ground-2) 12px 24px); border:1.5px dashed var(--line)}
.video.prazno .igraj{background:var(--surface-2); border:1px solid var(--line)}
.video.prazno .igraj svg{fill:var(--brass)}
.napomena-video{margin-top:14px; min-height:22px; font-size:13.5px; color:var(--salt)}
@media (max-width:760px){ .video-grid{grid-template-columns:1fr} .video-sporedni{grid-template-columns:1fr 1fr; grid-template-rows:none} .video-sporedni .video{aspect-ratio:16/10; min-height:0} }

/* promocija */
.dogadjaj{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line-soft)}
.dogadjaj h3{font-size:26px}
.dogadjaj span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.galerija{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:170px; gap:10px}
.galerija .foto{position:relative; overflow:hidden; background:var(--surface); border:0; padding:0; cursor:zoom-in}
.galerija .foto img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.galerija .foto:hover img{transform:scale(1.05)}
.galerija .veliko{grid-column:span 2; grid-row:span 2}
.galerija .foto.prazno{cursor:default; border:1.5px dashed var(--line); background:transparent; display:grid; place-items:center; align-content:center; gap:8px}
.galerija .foto.prazno svg{width:26px; height:26px; stroke:var(--ink-faint); fill:none; stroke-width:1.3}
.galerija .foto.prazno span{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:760px){ .galerija{grid-template-columns:1fr 1fr; grid-auto-rows:130px} }

/* recenzije */
.recenzije{display:grid; gap:28px}
.recenzija{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:48px; padding:44px; background:var(--surface); border:1px solid var(--line-soft)}
.recenzija blockquote{margin:0; position:relative; font-family:var(--display); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.35; color:var(--ink)}
.recenzija blockquote::before{content:"“"; position:absolute; left:-6px; top:-54px; font-size:120px; line-height:1; color:var(--brass); opacity:.55; font-style:normal}
.recenzent{margin-top:26px; display:flex; gap:14px; align-items:center}
.recenzent .inicijali{width:46px; height:46px; border-radius:50%; border:1px solid var(--brass); display:grid; place-items:center; font-family:var(--display); font-size:17px; color:var(--brass); flex:none}
.recenzent b{display:block; font-weight:600; font-size:15px}
.recenzent small{display:block; color:var(--ink-faint); font-size:13px}
.odlomak{position:relative; color:var(--ink-muted); font-size:15.5px; line-height:1.8; max-height:220px; overflow:hidden}
.odlomak::after{content:""; position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(transparent, var(--surface))}
.odlomak p + p{margin-top:14px}
.rec-dugmad{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:18px}
.link-dugme{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--brass); cursor:pointer; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.link-dugme:hover{color:var(--brass-bright)}
.rec-dugmad small{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:860px){ .recenzija{grid-template-columns:1fr; gap:28px; padding:32px 24px} }

/* utisci */
.utisci-glava{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.utisci{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.utisak{padding:26px; border:1px solid var(--line-soft); background:var(--ground-2); display:flex; flex-direction:column; gap:18px}
.utisak p{font-size:15.5px; color:var(--ink-muted); line-height:1.75}
.utisak footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:12px; font-size:13px}
.utisak footer b{font-weight:600} .utisak footer span{color:var(--ink-faint)}
@media (max-width:860px){ .utisci{grid-template-columns:1fr} }

.forma-okvir{margin-top:44px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; padding:44px; border:1px solid var(--line)}
.forma-okvir h3{font-size:32px; margin:10px 0 14px}
.forma-okvir .uvodni{color:var(--ink-muted); font-size:15.5px}
.forma-okvir .uvodni + .uvodni{margin-top:12px; font-size:13.5px; color:var(--ink-faint)}
form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.polje{display:flex; flex-direction:column; gap:7px; min-width:0}
.polje.puno{grid-column:1 / -1}
label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
input, textarea{width:100%; background:var(--ground-2); border:1px solid var(--line-soft); color:var(--ink); font:inherit; font-size:15.5px; padding:13px 14px; border-radius:0}
input:focus, textarea:focus{outline:none; border-color:var(--brass)}
textarea{min-height:150px; resize:vertical; line-height:1.6}
.brojac{align-self:flex-end; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.slanje{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.slanje small{color:var(--ink-faint); font-size:13px; max-width:40ch}
.greska{grid-column:1 / -1; color:#E59A8F; font-size:14px}
.hvala{grid-column:1 / -1; padding:26px; border:1px solid var(--salt); color:var(--ink)}
.hvala b{display:block; font-family:var(--display); font-weight:400; font-size:24px; margin-bottom:6px}
.hvala span{color:var(--ink-muted)}
@media (max-width:860px){ .forma-okvir{grid-template-columns:1fr; gap:28px; padding:30px 22px} form{grid-template-columns:1fr} }

/* ostale knjige */
.police{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); gap:22px; overflow-x:auto; padding-bottom:14px; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.polica-knjiga{text-decoration:none; display:flex; flex-direction:column; gap:12px}
.polica-knjiga img{aspect-ratio:583/640; object-fit:cover; width:100%; box-shadow:0 14px 30px -18px rgba(0,0,0,.9); transition:transform .35s}
.polica-knjiga:hover img{transform:translateY(-6px)}
.polica-knjiga b{font-family:var(--display); font-weight:400; font-size:16px; line-height:1.25}
.polica-knjiga span{font-size:13px; color:var(--ink-faint)}

/* podnožje */
.podnozje{margin-top:96px; border-top:1px solid var(--line-soft); background:var(--ground-2); padding-block:44px 40px}
.podnozje .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px; font-size:14px; color:var(--ink-muted)}
.podnozje .brand{margin:0}

/* traka za kupovinu na telefonu */
.mobilna{position:fixed; left:0; right:0; bottom:0; z-index:25; background:rgba(15,39,44,.97); border-top:1px solid var(--line); padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px)); display:none; align-items:center; justify-content:space-between; gap:14px; transform:translateY(110%); transition:transform .3s}
.mobilna.vidljiva{transform:none}
.mobilna b{font-family:var(--display); font-weight:400; font-size:24px}
.mobilna small{display:block; font-size:12px; color:var(--ink-faint)}
.mobilna .btn{min-height:46px}
@media (max-width:760px){ .mobilna{display:flex} }

/* čitač recenzije i galerija preko cijelog ekrana */
.preko{position:fixed; inset:0; z-index:50; background:rgba(6,16,18,.96); display:none; overflow-y:auto}
.preko[data-otvoreno="true"]{display:block}
.preko-traka{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 14px; background:rgba(6,16,18,.9); border-bottom:1px solid var(--line-soft)}
.zatvori{width:44px; height:44px; border:1px solid var(--line); background:none; color:var(--ink); font-size:24px; line-height:1; cursor:pointer}
.clanak{max-width:680px; margin:0 auto; padding:56px var(--gutter) 96px}
.clanak .eyebrow{display:block; margin-bottom:16px}
.clanak h2{font-size:clamp(30px,5vw,44px); margin-bottom:26px}
.clanak .potpis-gore{display:flex; gap:14px; align-items:center; padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--line-soft)}
.clanak p.t{font-size:18px; line-height:1.9; color:var(--ink-muted)}
.clanak p.t + p.t{margin-top:22px}
.clanak p.t:first-of-type::first-letter{font-family:var(--display); float:left; font-size:70px; line-height:.8; padding:7px 12px 0 0; color:var(--brass)}
.clanak .istaknuto{margin:40px 0; padding:6px 0 6px 26px; border-left:2px solid var(--brass); font-family:var(--display); font-style:italic; font-size:25px; line-height:1.4; color:var(--ink)}
.clanak .kraj{margin-top:48px; padding-top:26px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between}
.lightbox{display:none; position:fixed; inset:0; z-index:60; background:rgba(4,10,12,.96); align-items:center; justify-content:center; padding:calc(70px + env(safe-area-inset-top,0px)) 16px calc(70px + env(safe-area-inset-bottom,0px))}
.lightbox[data-otvoreno="true"]{display:flex}
.lightbox img{max-height:100%; max-width:100%; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .zatvori{position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px}
.lightbox .strelica{position:absolute; top:50%; width:48px; height:48px; margin-top:-24px; border:1px solid var(--line); background:rgba(12,30,34,.7); color:var(--ink); font-size:22px; cursor:pointer}
.lightbox .lijevo{left:16px} .lightbox .desno{right:16px}
.lightbox figcaption{position:absolute; left:0; right:0; bottom:calc(22px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:14px; color:var(--ink-muted)}

@media (max-width:860px){
  :root{--gutter:18px}
  .uvod{grid-template-columns:1fr; gap:40px; padding-block:28px 48px}
  .korica{max-width:290px}
  .o-knjizi{grid-template-columns:1fr; gap:36px}
  section{padding-block:64px 12px}
  .etapa b{font-size:28px}
}

/* ---- dodaci za stranicu sa pravim sadržajem ---- */
.korica{max-width:440px}
.korica img{height:auto}
.korica::before{inset:16px -16px -16px 16px}
.moto{margin-top:26px; padding-left:18px; border-left:2px solid var(--brass); font-family:var(--display); font-style:italic; font-size:17px; line-height:1.5; color:var(--ink-muted); max-width:48ch}
.moto small{display:block; margin-top:6px; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

.hvala-supruzi{margin-top:18px; padding:18px 20px; background:var(--ground-2); border:1px solid var(--line-soft); font-family:var(--display); font-style:italic; font-size:16.5px; line-height:1.55; color:var(--ink-muted)}
.hvala-supruzi small{display:block; margin-top:8px; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* odlomak iz knjige */
.odlomak-sek{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; align-items:start}
.odlomak-meta{position:sticky; top:150px}
.odlomak-meta .mjesto{font-family:var(--display); font-size:clamp(34px,4.4vw,52px); line-height:1.05}
.odlomak-meta .mjesto em{display:block; font-style:italic; color:var(--brass)}
.odlomak-meta p{margin-top:18px; color:var(--ink-muted); font-size:15px; max-width:34ch}
.kilometri{display:flex; gap:6px; margin-top:22px; flex-wrap:wrap}
.kilometri span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; padding:5px 8px; border:1px solid var(--line-soft); color:var(--ink-faint)}
.kilometri span.kljuc{border-color:var(--brass); color:var(--brass)}
.odlomak-tekst{position:relative; font-family:var(--display); font-size:21px; line-height:1.7; color:var(--ink); max-height:430px; overflow:hidden}
.odlomak-tekst::after{content:""; position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(transparent, var(--ground))}
.odlomak-tekst p + p{margin-top:18px}
.odlomak-tekst p:first-child::first-letter{float:left; font-size:78px; line-height:.8; padding:8px 12px 0 0; color:var(--brass)}
@media (max-width:860px){ .odlomak-sek{grid-template-columns:1fr; gap:26px} .odlomak-meta{position:static} .odlomak-tekst{font-size:18.5px; max-height:380px} }

/* dvanaest albuma */
.albumi{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 300px); gap:18px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.album{scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; background:none; border:0; padding:0; text-align:left; color:var(--ink); cursor:zoom-in; font:inherit}
.album .okvir{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface)}
.album img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.album:hover img{transform:scale(1.05)}
.album .br{position:absolute; left:12px; top:10px; font-family:var(--display); font-size:34px; line-height:1; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.album b{font-family:var(--display); font-weight:400; font-size:19px; line-height:1.25; text-wrap:balance}
.album small{font-size:13px; color:var(--ink-faint); line-height:1.5}
.albumi-nav{display:flex; gap:10px}
.albumi-nav button{width:46px; height:46px; border:1px solid var(--line); background:none; color:var(--brass); font-size:20px; cursor:pointer}
.albumi-nav button:hover{background:rgba(198,161,91,.1)}

/* rekli su */
.rekli-uvod{font-family:var(--display); font-style:italic; font-size:19px; line-height:1.55; color:var(--ink-muted); max-width:56ch; margin-bottom:40px}
.rekli{columns:3 300px; column-gap:22px}
.izjava{break-inside:avoid; margin:0 0 22px; padding:28px 28px 24px; background:var(--surface); border:1px solid var(--line-soft)}
.izjava blockquote{margin:0; font-family:var(--display); font-size:19px; line-height:1.55; color:var(--ink)}
.izjava blockquote::before{content:"„"; color:var(--brass)}
.izjava blockquote::after{content:"“"; color:var(--brass)}
.izjava figcaption{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:14px}
.izjava figcaption b{display:block; font-weight:600}
.izjava figcaption span{color:var(--ink-faint); font-size:13px}
.izjava.istaknuta{background:transparent; border-color:var(--brass)}
.izjava.istaknuta blockquote{font-size:22px; font-style:italic}
.zadnja{display:flex; gap:18px; align-items:center; margin-top:10px; color:var(--ink-faint); font-size:13.5px}
.zadnja button{padding:0; border:0; background:none; cursor:zoom-in}
.zadnja img{width:64px; height:64px; object-fit:cover; border:1px solid var(--line-soft)}

/* promocija */
.promo-uvod{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:end; margin-bottom:28px}
.promo-uvod blockquote{margin:0; font-family:var(--display); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.35}
.promo-uvod blockquote small{display:block; margin-top:10px; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass)}
.promo-meta{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:14.5px; padding:20px 22px; border:1px solid var(--line-soft)}
.promo-meta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding-top:3px}
.promo-meta dd{margin:0}
.galerija{grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:190px}
.galerija .siroko{grid-column:span 2}
.galerija .foto figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 12px 10px; background:linear-gradient(transparent, rgba(6,16,18,.85)); font-size:12.5px; color:var(--ink); text-align:left; opacity:0; transition:opacity .3s}
.galerija .foto:hover figcaption, .galerija .foto:focus-visible figcaption{opacity:1}
.jos-foto{margin-top:16px; font-size:13.5px; color:var(--ink-faint)}
@media (max-width:860px){ .promo-uvod{grid-template-columns:1fr; gap:22px} .galerija{grid-template-columns:1fr 1fr; grid-auto-rows:140px} .galerija .siroko{grid-column:span 2} .galerija .foto figcaption{opacity:1; font-size:11px} }

.video .ceka{position:absolute; right:12px; top:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); border:1px solid var(--line); padding:4px 7px; background:rgba(12,30,34,.7)}

/* ---- živa stranica ---- */
.video .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-grid.jedan{grid-template-columns:1fr}
.video-sporedni.jedan{grid-template-rows:1fr}
.brand{color:var(--ink)}
.greska-poruka{color:#E59A8F}
.prazni-utisci{padding:26px; border:1px dashed var(--line); color:var(--ink-muted); font-size:15px}
.recenzija .odlomak{max-height:220px}
.zamka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* dodaci za živu stranicu */
.video.pusta{cursor:default}
.video.pusta img{opacity:1}
.clanak .potpis-gore .inicijali{width:46px; height:46px; border-radius:50%; border:1px solid var(--brass); display:grid; place-items:center; font-family:var(--display); font-size:17px; color:var(--brass); flex:none}
.clanak .potpis-gore b{display:block; font-weight:500; color:var(--ink)}
.clanak .potpis-gore small{display:block; font-size:13.5px; color:var(--ink-muted); margin-top:2px}
.clanak .potpis-dolje{font-family:var(--display); font-style:italic; font-size:22px; color:var(--brass)}
.clanak .kraj-dugmad{display:flex; flex-wrap:wrap; gap:10px}
.lightbox .strelica[hidden]{display:none}
.btn[disabled]{opacity:.6; cursor:wait}

.paketi-knjige{margin:16px 0 0; font-size:15px; color:var(--ink)}
.paketi-knjige b{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ground); background:var(--brass); padding:3px 8px; border-radius:2px; margin-right:8px; vertical-align:2px}