/* srdjan 2026-10-24 - fontovi s vlastitog poslužitelja (bez čekanja Googlea; Lighthouse mobitel), latin + latin-ext; izvor Google Fonts (OFL) */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin-ext-450e71.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin-d42936.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext-c50079.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-bf1253.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext-796716.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-39ce20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext-796716.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-39ce20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-ext-35e12d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-357083.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-ext-35e12d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-357083.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-ext-35e12d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-normal-latin-357083.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* srdjan 2026-10-23 - Klapa Kaše. Boje iz klapske nošnje (vino prsluka, zlatni vez, crna) na dubrovačkom kamenu.
   srdjan 2026-10-24 - izgled „C" (odabrao korisnik): dosadašnji kamen/vino/Fraunces + raspored iz prijedloga „Noć"
   (uzor King's Singers, Stile Antico): fotografija preko cijelog ekrana, izmjena svijetlih i tamnih odjeljaka, sitne
   razmaknute oznake (Archivo), nastupi u redovima, nagrade uz fotografiju. Bez ukrasnih ikona; fotografije klape nose izgled.
   Stari izgled: /root/dokumentacija/klapakase/kopije/kase.css.2026-10-23 */
:root {
  --kamen: #f4efe6;       /* pozadina */
  --kamen2: #e9e1d3;      /* polja */
  --tinta: #1c1715;       /* tekst */
  --siva: #6c625b;
  --vino: #6b1424;        /* naglasak (prsluk) */
  --vino2: #8a1c30;
  --zlato: #b8893a;       /* vez — sitni naglasci */
  --noc: #15100e;         /* tamni odjeljci */
  --noc2: #1d1714;
  --svj: #efe7da;         /* tekst na tamnom */
  --crta: rgba(28,23,21,.13);
  --omot: 1240px;
  --f-nas: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-tekst: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-oznaka: 'Archivo', 'Outfit', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kamen); color: var(--tinta); font: 300 1.0625rem/1.65 var(--f-tekst); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vino); text-underline-offset: .18em; }
a:hover { color: var(--vino2); }
h1, h2, h3 { font-family: var(--f-nas); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
h3 { font-size: 1.25rem; }
b, strong { font-weight: 500; }
.omot { width: 100%; max-width: var(--omot); margin: 0 auto; padding: 0 24px; }
.omot-uski { max-width: 780px; }
.omot-srednji { max-width: 980px; }
.vidljivo-samo-citacu, .preskoci:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskoci:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: #fff; padding: 8px 12px; }
/* sitna razmaknuta oznaka (izbornik, gumbi, „sve vijesti") */
.oznaka, .gumb, .vise, .glavni-izbornik a, .jezici, .dno h2 { font-family: var(--f-oznaka); font-stretch: 125%; font-weight: 500; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.oznaka { display: block; }
.nad { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.nad::before { content: ""; width: 44px; height: 1px; background: var(--zlato); }

/* tamni odjeljci */
.tamno { background: var(--noc); color: var(--svj); --crta: rgba(239,231,218,.14); --siva: #a39887; }
.tamno2 { background: var(--noc2); }
.tamno a { color: var(--svj); }

/* gumbi */
.gumb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border: 1px solid var(--vino);
        background: var(--vino); color: #fff; line-height: 1; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gumb:hover { background: var(--noc); border-color: var(--noc); color: #fff; }
.gumb-obrub { background: transparent; border-color: currentColor; color: var(--tinta); }
.gumb-obrub:hover { background: var(--noc); border-color: var(--noc); color: #fff; }
.tamno .gumb:hover, .hero .gumb:hover, .poziv .gumb:hover { background: var(--kamen); border-color: var(--kamen); color: var(--noc); }
.tamno .gumb-obrub, .hero .gumb-obrub, .poziv .gumb-obrub { color: var(--svj); }
.gumb-svijetli, .tamno a.gumb-svijetli { background: var(--kamen); border-color: var(--kamen); color: var(--vino); }
.gumb-mali { padding: 10px 16px; }

/* zaglavlje: tamna traka; na naslovnici leži na fotografiji */
.vrh { position: sticky; top: 0; z-index: 20; background: var(--noc); color: var(--svj); border-bottom: 1px solid rgba(239,231,218,.14); }
.vrh-red { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.znak { display: block; width: 92px; color: var(--svj); flex: none; }
.znak svg { width: 100%; height: auto; display: block; }
.znak:hover { color: #fff; }
.glavni-izbornik { margin-left: auto; }
.glavni-izbornik ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.glavni-izbornik a { display: block; padding: 8px 0; color: var(--svj); opacity: .82; text-decoration: none; border-bottom: 1px solid transparent; }
.glavni-izbornik a:hover, .glavni-izbornik .aktivna > a { opacity: 1; color: #fff; border-color: var(--zlato); }
.glavni-izbornik ul ul { display: none; }
.vrh-desno { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid rgba(239,231,218,.18); }
.jezici { display: flex; gap: 2px; }
.jezici a { padding: 6px; color: var(--svj); opacity: .6; text-decoration: none; }
.jezici a.aktivan, .jezici a:hover { opacity: 1; color: #fff; }
.vrh-izb { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.vrh-izb span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--svj); transition: transform .2s; }
.vrh-izb span:first-child { top: 18px; } .vrh-izb span:last-child { top: 26px; }
.vrh-izb[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.vrh-izb[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.je-naslovnica .vrh { position: absolute; left: 0; right: 0; background: transparent; }

/* naslovnica: fotografija preko cijelog ekrana */
/* srdjan 2026-10-24 - hero preko cijelog ekrana i na visokim ekranima (bez gornje granice) */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: flex-end; color: #f4efe6; background: var(--noc); overflow: hidden; }
.hero-slika { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.66); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,16,14,.55) 0, rgba(21,16,14,0) 22%, rgba(21,16,14,0) 52%, rgba(21,16,14,.85) 100%); }
.hero-sadrzaj { position: relative; z-index: 1; padding-bottom: 11vh; }
.hero-naslov { margin: 0; width: clamp(230px, 28vw, 420px); color: #f6efe2; }
.hero-naslov svg { width: 100%; height: auto; display: block; }
.hero-pod { font: italic 400 clamp(1.3rem, 2vw, 1.75rem)/1.35 var(--f-nas); max-width: 30em; margin: 22px 0 34px; color: #efe4d0; }
.hero-gumbi { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }

/* glazbeni servisi ispod fotografije — srdjan 2026-10-24 */
.servisi { border-bottom: 1px solid rgba(239,231,218,.1); }
.servisi-red { display: flex; align-items: center; gap: 36px; min-height: 84px; }
.servisi .oznaka { color: var(--zlato); flex: none; }
.servisi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 34px; }
.servisi a { display: inline-flex; align-items: center; gap: 10px; font: 400 1.15rem/1.2 var(--f-nas); text-decoration: none; color: var(--svj); padding: 6px 0; }
.servisi a svg { width: 22px; height: 22px; flex: none; opacity: .9; transition: color .2s; }
.servisi a span { border-bottom: 1px solid transparent; }
.servisi a:hover { color: #fff; }
.servisi a:hover svg { color: var(--zlato); opacity: 1; }
.servisi a:hover span { border-color: var(--zlato); }

/* odjeljci */
.odjeljak { padding: clamp(72px, 9vw, 112px) 0; }
.omot.odjeljak { padding-left: 24px; padding-right: 24px; }   /* album, članak: odjeljak je ujedno omot */
.odjeljak-glava { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--crta); padding-bottom: 20px; }
.odjeljak-glava h2 { margin: 0; }
.vise { white-space: nowrap; text-decoration: none; color: var(--vino); }
.vise::after { content: " →"; }
.vise:hover { color: var(--zlato); }
.tamno .vise { color: var(--zlato); }
.tamno .vise:hover { color: var(--svj); }
.prazno-tekst { color: var(--siva); margin: 24px 0 0; }

/* nastupi: redovi kao koncertni program */
.nastupi-popis { list-style: none; margin: 0; padding: 0; }
.nastup { display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--crta); }
.nastup-datum { display: flex; align-items: baseline; gap: 12px; line-height: 1; }
.nastup-datum b { font: 600 2.75rem/1 var(--f-nas); color: var(--vino); }
.nastup-datum span { color: var(--siva); line-height: 1.5; }
.nastup-naziv b { display: block; font-weight: 500; font-size: 1.15rem; line-height: 1.35; }
.nastup-opis { display: block; color: var(--siva); margin-top: 4px; }
.nastup-mjesto { color: var(--siva); }
.nastup.otkazano .nastup-naziv b { text-decoration: line-through; }
.nastup em { color: var(--vino); font-style: normal; font-weight: 500; }
.nastup-veze { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.nastup-kalendar { font: 500 .72rem/1.2 var(--f-oznaka); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--vino); border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.nastup-kalendar::before { content: "+ "; }
.nastup-kalendar:hover { color: var(--zlato); }
details.godina { border-bottom: 1px solid var(--crta); }
details.godina summary { cursor: pointer; padding: 16px 0; font: 600 1.5rem var(--f-nas); list-style: none; }
details.godina summary::-webkit-details-marker { display: none; }
details.godina summary span { font: 400 .9rem var(--f-tekst); color: var(--siva); margin-left: 8px; }
details.godina .nastup:last-child { border-bottom: 0; }
.podnaslov { margin-top: 1.4em; }

/* o klapi na naslovnici */
.o-klapi { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.o-klapi-slika img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.o-klapi-tekst p { font: 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.55 var(--f-nas); margin: 22px 0 34px; }

/* vijesti */
.vijest a { display: block; color: inherit; text-decoration: none; }
.vijest-slika { display: block; aspect-ratio: 3 / 2; background: var(--kamen2); overflow: hidden; }
.vijest-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vijest a:hover .vijest-slika img { transform: scale(1.03); }
.vijest-tekst { display: block; padding-top: 16px; }
.vijest time { display: block; font-size: .875rem; color: var(--siva); margin-bottom: 4px; }
.vijest b { display: block; font: 600 1.35rem/1.22 var(--f-nas); }
.vijest a:hover b { color: var(--vino); }
.vijest-uvod { display: block; margin-top: 8px; color: var(--siva); }
.na-jeziku { display: inline-block; margin-top: 6px; font-size: .78rem; color: var(--siva); border: 1px solid var(--crta); padding: 1px 6px; }
.vijesti-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
.vijesti-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; margin-top: 8px; }
.vijesti-mreza .vijest-velika { grid-column: span 2; }
.vijesti-mreza .vijest-velika b { font-size: 1.85rem; }
.listanje { display: flex; justify-content: center; gap: 24px; align-items: center; margin: 56px 0 0; }

/* diskografija */
.albumi-traka { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 44px; }
.albumi-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; }
.album-kartica { display: block; text-decoration: none; color: inherit; }
.album-omot { display: block; aspect-ratio: 1; background: #2a2220; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.28); transition: transform .3s; }
.tamno .album-omot { box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.album-omot img { width: 100%; height: 100%; object-fit: cover; }
.album-kartica:hover .album-omot { transform: translateY(-6px); }
.album-kartica b { display: block; margin-top: 18px; font: 600 1.2rem/1.2 var(--f-nas); }
.album-kartica small { display: block; color: var(--siva); font-size: .88rem; margin-top: 2px; }
/* srdjan 2026-10-24 - kartica albuma izgleda klikljivo: natpis na omotu pri prelasku i trajna poveznica ispod */
.album-omot { position: relative; }
.album-omot::after { content: attr(data-otvori); position: absolute; inset: auto 0 0 0; padding: 14px 16px; background: rgba(21,16,14,.82); color: #f4efe6;
  font: 500 .72rem/1 var(--f-oznaka); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.album-kartica:hover .album-omot::after, .album-kartica:focus-visible .album-omot::after { transform: none; }
.album-otvori { display: inline-block; margin-top: 12px; color: var(--vino); padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.album-otvori::after { content: " →"; display: inline-block; transition: transform .25s; }
.album-kartica:hover .album-otvori::after { transform: translateX(5px); }
.album-kartica:hover b { color: var(--vino); }
.tamno .album-kartica:hover b { color: var(--zlato); }
.album-red { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); padding-top: 56px; padding-bottom: 24px; align-items: start; }
.album-velika img { width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.album-meta { color: var(--siva); margin-top: -.3em; }
.slusaj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; }
/* srdjan 2026-10-24 - znakovi servisa na albumu: jednobojni, tanki obrub u boji teksta; vino tek pri prelasku (boje servisa bile prešarene) */
.slusaj-znak { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(28,23,21,.28); color: var(--tinta);
  transition: background .25s, border-color .25s, color .25s, transform .25s cubic-bezier(.2,.7,.2,1); }
.slusaj-znak svg { width: 22px; height: 22px; }
.slusaj-znak:hover { background: var(--vino); border-color: var(--vino); color: #fff; transform: translateY(-3px); }
.pjesme { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: pj; border-top: 1px solid var(--crta); }
.pjesme li { counter-increment: pj; display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--crta); }
.pjesme li::before { content: counter(pj); width: 1.8em; flex: none; color: var(--siva); font-variant-numeric: tabular-nums; text-align: right; }

/* nagrade na naslovnici: fotografija lijevo, broj i popis desno */
.nagrade-blok { display: grid; grid-template-columns: 1fr 1fr; }
.nagrade-blok > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.nagrade-blok-tekst { padding: 90px max(24px, calc((100vw - var(--omot)) / 2 + 24px)) 90px clamp(24px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.nagrade-broj { font: 600 clamp(6rem, 11vw, 10rem)/.8 var(--f-nas); color: var(--zlato); }
.nagrade-blok-tekst .oznaka { margin: 20px 0 38px; }
.nagrade-zadnje { list-style: none; padding: 0; margin: 0 0 34px; }
.nagrade-zadnje li { display: grid; grid-template-columns: 60px 1fr; padding: 13px 0; border-bottom: 1px solid var(--crta); }
.nagrade-zadnje span { color: var(--zlato); }
.nagrade-blok-tekst .gumb { align-self: flex-start; }

/* video na naslovnici: veliki + popis */
.video-blok { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 44px; }
.video-blok .yt-glavni { max-width: none; margin: 0; }
.yt-popis { display: grid; gap: 22px; align-content: start; }
.yt-popis .yt { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.yt-popis .yt-tekst { padding-top: 0; }
.yt-popis .yt-tekst b { font-size: 1rem; }
.yt-popis .yt-play { transform: scale(.55); }

/* poziv */
.poziv { background: var(--vino); color: #fff; }
.poziv-red { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 80px; padding-bottom: 80px; flex-wrap: wrap; }
.poziv h2 { margin: 0 0 10px; }
.poziv p { margin: 0; opacity: .88; }
.poziv-kontakt { display: flex; gap: 12px; flex-wrap: wrap; }

/* stranice */
.glava-stranice { padding: clamp(56px, 8vw, 100px) 0 clamp(24px, 3vw, 40px); }
.glava-stranice h1 { margin: 0; }
.glava-skrivena { padding: 56px 0 0; }
.glava-skrivena h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.glava-pod, .glava-pod-tekst { color: var(--siva); margin: 12px 0 0; }
.glava-pod-tekst { margin-bottom: 24px; }
.glava-sa-slikom { position: relative; padding: 0; min-height: 56vh; display: flex; align-items: flex-end; color: #fff; background: var(--noc); margin-bottom: 48px; }
.glava-sa-slikom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.glava-sa-slikom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,16,14,.75), rgba(21,16,14,0) 60%); }
.glava-sa-slikom .omot { position: relative; z-index: 1; padding-bottom: 40px; }
.tekst { font-size: 1.1rem; }
.tekst p { margin: 0 0 1.15em; }
.tekst h2 { margin-top: 1.4em; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tekst img { margin: 1.4em 0; }
.tekst blockquote { margin: 1.5em 0; padding: 0; font: italic 400 1.35rem/1.5 var(--f-nas); color: var(--tinta); }
.uvod { font-size: 1.25rem; color: var(--tinta); }
.stranica { padding-bottom: 88px; }
.clanak-glava { padding-top: 56px; }
.clanak-glava time { color: var(--siva); }
.clanak-glava h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: .2em; }
.natrag { margin: 0 0 10px; font-size: .95rem; }
.natrag a { text-decoration: none; }
.clanak-slika { margin: 28px auto 40px; }
.clanak-slika img { width: 100%; max-height: 78vh; object-fit: cover; }
/* srdjan 2026-10-27 - uspravna glavna slika: cijela, centrirana, ne viša od prozora (prije se rezala na 78vh) */
.clanak-slika.uspravna img { width: auto; max-width: 100%; height: auto; max-height: 85vh; object-fit: contain; margin: 0 auto; display: block; }
.clanak-slika img { height: auto; }
.clanak-slika figcaption { color: var(--siva); font-size: .88rem; margin-top: 8px; }
.cms-video { margin: 1.6em 0; }
.cms-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.cms-galerija { margin: 1.6em 0; }

/* video (YouTube kanal) */
.yt { display: block; align-self: start; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.yt-slika { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--noc); overflow: hidden; }
.yt-slika img, .yt-slika iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 1px solid #efe7da; border-radius: 50%; background: rgba(21,16,14,.35); transition: background .2s, border-color .2s; }
.yt-play::after { content: ""; position: absolute; left: 34px; top: 29px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #efe7da; }
.yt:hover .yt-play { background: var(--vino); border-color: var(--vino); }
.yt-tekst { display: block; padding-top: 12px; }
.yt-tekst b { display: block; font: 600 1.1rem/1.3 var(--f-nas); }
.yt-tekst time { display: block; color: var(--siva); font-size: .85rem; margin-top: 2px; }
.yt-velika .yt-tekst b { font-size: 1.5rem; }
.yt-glavni { max-width: 980px; margin: 0 auto 44px; scroll-margin-top: 100px; }
.yt-mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 22px; }
.yt-kanal { text-align: center; margin-top: 44px; }
.yt.svira .yt-tekst { color: var(--vino); }
.tamno .yt.svira .yt-tekst { color: var(--zlato); }

/* članovi klape (stranica Klapa) — srdjan 2026-10-24 */
.clanovi { padding-top: 48px; }
.clanovi-mreza { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 36px 24px; }
.clan-slika { display: block; aspect-ratio: 2 / 3; background: var(--kamen2); overflow: hidden; margin-bottom: 14px; }
.clan-slika img { width: 100%; height: 100%; object-fit: cover; }
a.clan-slika { cursor: zoom-in; }   /* srdjan 2026-10-26 - otvara se u povećalu */
.clanovi-mreza b { display: block; font: 600 1.15rem/1.25 var(--f-nas); }
.clanovi-mreza span:not(.clan-slika) { display: block; color: var(--siva); font-size: .95rem; margin-top: 2px; }

/* srdjan 2026-10-24 - stranica Kontakt: fotografija lijevo, podaci desno */
.kontakt-str { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.kontakt-slika { overflow: hidden; }
.kontakt-slika img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kontakt-tekst .tekst { font-size: 1.15rem; }
.kontakt-tekst .tekst p { font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.45 var(--f-nas); margin: 0; }
.kontakt-tekst .tekst strong { font-weight: 600; }
.kontakt-tekst .tekst p + p { margin-top: .7em; }   /* srdjan 2026-10-27 - razmak između kontakata (Vicko / Luka) */
.kontakt-tekst .tekst a { color: var(--vino); text-decoration: none; border-bottom: 1px solid rgba(107,20,36,.3); }
.kontakt-tekst .tekst a:hover { border-color: var(--vino); }
.kontakt-pod { color: var(--siva); margin: 26px 0 30px; max-width: 30em; }
.kontakt-gumbi { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 34px; }
.kontakt-mreze { display: flex; gap: 10px; margin: 0; }
.kontakt-mreze a { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(28,23,21,.28); color: var(--tinta); transition: background .25s, color .25s, border-color .25s, transform .25s; }
.kontakt-mreze a svg { width: 19px; height: 19px; }
.kontakt-mreze a:hover { background: var(--vino); border-color: var(--vino); color: #fff; transform: translateY(-3px); }

/* srdjan 2026-10-24 - obrazac za upit (Kontakt) */
.upit-odjeljak { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 88px); margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--crta); }
.upit-uvod p { color: var(--siva); max-width: 26em; }
.upit { display: grid; gap: 18px; }
.upit-red { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.upit-polje { display: grid; gap: 6px; }
.upit-polje span { font: 500 .72rem/1.2 var(--f-oznaka); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--siva); }
.upit-polje input, .upit-polje textarea { width: 100%; font: 300 1.05rem/1.5 var(--f-tekst); color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid rgba(28,23,21,.3); padding: 10px 0; border-radius: 0; transition: border-color .2s; }
.upit-polje textarea { resize: vertical; min-height: 120px; }
.upit-polje input:focus, .upit-polje textarea:focus { outline: none; border-color: var(--vino); }
.upit-privola { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--siva); }
.upit-privola input { margin-top: 5px; accent-color: var(--vino); }
.upit .gumb { justify-self: start; }
.upit-zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upit-poruka { padding: 16px 18px; margin: 0 0 20px; }
.upit-ok { background: var(--noc); color: var(--svj); font: 400 1.25rem/1.4 var(--f-nas); }
.upit-greska { background: rgba(107,20,36,.08); color: var(--vino); }
/* srdjan 2026-10-24 - Nagrade: broj nagrada na vrhu (naslov skriven) */
.nagrade-ukupno { color: var(--vino); margin: 0 0 28px; }
/* srdjan 2026-10-24 - prijava za obavijesti o nastupima (stranica Nastupi) */
.obavijesti-blok { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin: clamp(40px, 5vw, 64px) 0; padding: clamp(28px, 4vw, 44px); background: var(--noc); color: var(--svj); }
.obavijesti-blok h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.obavijesti-blok p { margin: 0; color: rgba(244,239,230,.72); }
.obavijesti { display: grid; gap: 14px; }
.obavijesti-red { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.obavijesti-blok .upit-polje span, .obavijesti-blok .upit-privola { color: rgba(244,239,230,.66); }
.obavijesti-blok .upit-polje input { color: var(--svj); border-color: rgba(244,239,230,.35); }
.obavijesti-blok .upit-polje input:focus { border-color: var(--zlato); }
.obavijesti-blok .upit-privola { font-size: .88rem; }
.obavijesti-blok .upit-privola input { accent-color: var(--zlato); }
.obavijesti-blok .upit-ok { background: transparent; padding: 0; color: var(--svj); }
.obavijesti-blok .upit-greska { background: rgba(244,239,230,.1); color: var(--svj); }
@media (max-width: 720px) { .obavijesti-blok { grid-template-columns: 1fr; } .obavijesti-red { display: contents; } .obavijesti .upit-polje { order: 1; } .obavijesti .upit-privola { order: 2; } .obavijesti-red .gumb { order: 3; justify-self: start; } }

/* srdjan 2026-10-24 - press kit */
.press { padding-top: clamp(48px, 7vw, 88px); }
.press-glava { padding-bottom: 28px; border-bottom: 1px solid var(--crta); }
.press-glava h1 { margin: 0 0 22px; }
.press-sadrzaj { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.press-sadrzaj a { color: var(--vino); text-decoration: none; }
.press-sadrzaj a:hover { color: var(--zlato); }
.press-dio { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 56px 0; border-bottom: 1px solid var(--crta); scroll-margin-top: 100px; }
.press-dio > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.press-bio { margin-bottom: 34px; }
.press-bio-glava { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--siva); }
.press-kopiraj { background: none; border: 1px solid var(--crta); padding: 8px 14px; color: var(--vino); cursor: pointer; transition: background .2s, color .2s; }
.press-kopiraj:hover, .press-kopiraj.gotovo { background: var(--vino); color: #fff; border-color: var(--vino); }
.press-kratka { font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.5 var(--f-nas); margin: 0; }
.press-cinjenice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 10px 0 30px; }
.press-cinjenice dt { color: var(--siva); margin-bottom: 6px; }
.press-cinjenice dd { margin: 0; font: 600 1.6rem/1.1 var(--f-nas); color: var(--vino); }
.press-clanovi { list-style: none; margin: 0; padding: 0; columns: 2; color: var(--siva); }
.press-clanovi li { padding: 4px 0; break-inside: avoid; }
.press-clanovi b { color: var(--tinta); }
.press-fotke { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.press-fotke figure, .press-logo figure { margin: 0; }
.press-fotke img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
.press-fotke a:first-child { display: block; overflow: hidden; }
.press-fotke a:hover img { transform: scale(1.03); }
.press-fotke figcaption, .press-logo figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; color: var(--siva); }
.press-preuzmi { color: var(--vino); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.press-preuzmi::before { content: "↓ "; }
.press-preuzmi:hover { color: var(--zlato); }
.press-logo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.press-logo-slika { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 28px; border: 1px solid var(--crta); }
.press-logo-svijetli .press-logo-slika { background: var(--noc); border-color: var(--noc); }
.press-logo-slika img { width: 78%; height: auto; }
.press-albumi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.press-albumi a { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.press-albumi img { width: 72px; height: 72px; object-fit: cover; }
.press-albumi b { display: block; font: 600 1.1rem/1.25 var(--f-nas); }
.press-albumi a:hover b { color: var(--vino); }
.press-albumi small { color: var(--siva); }
.press-veze { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.press-veze a { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.press-veze svg { width: 20px; height: 20px; }
.press-veze a:hover { color: var(--vino); }
.press-kontakt p { font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.5 var(--f-nas); margin: 0; }
.press-kontakt a { color: var(--vino); }
.kontakt-press { margin: 0 0 26px; }
.dno-press { margin: 14px 0 0; }
.dno-press a { color: var(--zlato); }

/* nagrade (stranica) */
.nagrade-godine { list-style: none; padding: 0; margin: 0; }
.nagrade-godine > li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--crta); }
.nagrade-godine h2 { font-size: 1.75rem; color: var(--vino); margin: 0; }
.nagrade-godine ul { margin: 0; padding: 0; list-style: none; }
.nagrade-godine ul li { padding: 3px 0 9px; }

/* podnožje */
.dno { background: var(--noc); color: #d9cebd; padding: 80px 0 0; font-size: .98rem; border-top: 1px solid rgba(239,231,218,.1); }
.dno a { color: #c9bdad; text-decoration: none; }
.dno a:hover { color: var(--svj); }
.dno h2 { color: var(--zlato); margin: 0 0 16px; line-height: 1.2; }
.dno-red { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr .8fr; gap: 40px; }
.dno-mreze a { display: block; padding: 4px 0; }
.dno-znak svg { width: 150px; height: auto; color: var(--svj); display: block; }
.dno-znak p { margin: 16px 0 0; color: #a39887; }
.dno-kontakt p { color: #a39887; margin: 0; }
.dno-veze ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.dno-veze a { display: inline-block; padding: 4px 0; }
.dno-prava { border-top: 1px solid rgba(255,255,255,.1); margin-top: 60px; padding-top: 22px; padding-bottom: 26px; font-size: .85rem; color: #8c7e70; }
.dno-prava { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }   /* srdjan 2026-10-26 - © lijevo, potpis izrade desno */
.dno-izrada a { color: #b9ab98; text-decoration: underline; text-underline-offset: 3px; }
.dno-izrada a:hover { color: #efe7da; }

/* tablet */
@media (max-width: 1100px) {
  .vrh-izb { display: block; }
  .vrh-desno { margin-left: auto; border: 0; padding: 0; }
  .glavni-izbornik { display: none; position: fixed; inset: 0; background: var(--noc); padding: 100px 24px 40px; overflow-y: auto; z-index: -1; }
  .glavni-izbornik.otvoren { display: block; }
  .glavni-izbornik ul { flex-direction: column; gap: 0; }
  .glavni-izbornik a { padding: 14px 0; font: 600 1.6rem/1.2 var(--f-nas); letter-spacing: 0; text-transform: none; border-bottom: 1px solid rgba(239,231,218,.12); opacity: 1; }
  .glavni-izbornik .aktivna > a { color: var(--zlato); border-color: rgba(239,231,218,.12); }
  body.izbornik-otvoren { overflow: hidden; }
  .je-naslovnica.izbornik-otvoren .vrh { position: fixed; }
  /* srdjan 2026-10-27 - naslovnica na mobitelu/tabletu: zaglavlje ostaje na vrhu dok se lista (prije absolute → nestalo); prozirno nad fotkom, tamno čim se pomakne (kase.js) */
  .je-naslovnica .vrh { position: fixed; transition: background-color .25s; }
  .je-naslovnica .vrh.pomaknuto { background: var(--noc); }
  .albumi-traka { grid-template-columns: repeat(3, 1fr); }
  .yt-mreza { grid-template-columns: repeat(3, 1fr); }
  .dno-red { grid-template-columns: 1fr 1fr; }
  .nastup { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); }
  .nastup > .gumb, .nastup > .nastup-veze { grid-column: 2 / -1; justify-self: start; justify-content: flex-start; }
  .video-blok { grid-template-columns: 1fr; }
  .yt-popis { grid-template-columns: 1fr 1fr; }
}
/* mobitel */
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .omot { padding: 0 16px; }
  .vrh-red { min-height: 68px; gap: 12px; }
  .glavni-izbornik { padding-top: 88px; }
  .znak { width: 76px; }
  .hero { min-height: 520px; }
  .hero-sadrzaj { padding-bottom: 56px; }
  .nastup { grid-template-columns: 70px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
  .nastup-datum { flex-direction: column; gap: 4px; grid-row: span 3; }
  .nastup-datum b { font-size: 2.3rem; }
  .nastup-datum span { font-size: .7rem; }
  .nastup-mjesto, .nastup > .gumb, .nastup > .nastup-veze { grid-column: 2; }
  .nastup > .gumb, .nastup > .nastup-veze { margin-top: 8px; }
  .o-klapi { grid-template-columns: 1fr; }
  .o-klapi-slika img { aspect-ratio: 4 / 3; }
  .vijesti-tri, .vijesti-mreza { grid-template-columns: 1fr; gap: 36px; }
  .vijesti-mreza .vijest-velika { grid-column: auto; }
  .vijesti-mreza .vijest-velika b { font-size: 1.5rem; }
  .albumi-traka { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .albumi-mreza { grid-template-columns: 1fr; gap: 44px; }   /* srdjan 2026-10-24 - na mobitelu jedan ispod drugog */
  .album-red { grid-template-columns: 1fr; padding-top: 32px; }
  .nagrade-blok { grid-template-columns: 1fr; }
  .nagrade-blok > img { min-height: 0; aspect-ratio: 4 / 3; }
  .nagrade-blok-tekst { padding: 60px 16px; }
  .yt-mreza { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .yt-popis { grid-template-columns: 1fr; }
  .yt-popis .yt { grid-template-columns: 120px 1fr; }
  .nagrade-godine > li { grid-template-columns: 1fr; gap: 6px; }
  .dno-red { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dno-znak { grid-column: 1 / -1; }
  .odjeljak-glava { flex-wrap: wrap; }
  .poziv-red { padding-top: 60px; padding-bottom: 60px; }
  .clanovi-mreza { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .kontakt-str { grid-template-columns: 1fr; }
  .press-dio { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .press-cinjenice { grid-template-columns: 1fr 1fr; }
  .press-clanovi { columns: 1; }
  .press-fotke, .press-logo, .press-albumi { grid-template-columns: 1fr; }
  .upit-odjeljak, .upit-red { grid-template-columns: 1fr; }
  .kontakt-slika img { aspect-ratio: 4 / 3; }
  .album-otvori { font-size: .64rem; letter-spacing: .1em; font-stretch: 100%; }
  .servisi-red { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 26px; padding-bottom: 26px; }
  .servisi ul { gap: 8px 22px; }
  .servisi a { font-size: 1.05rem; }
  .omot.odjeljak { padding: 72px 16px; }
}
/* srdjan 2026-10-24 - animacije (kase.js): pojavljivanje pri listanju, kartice i redovi jedan za drugim; hero se polako približava */
@keyframes kase-hero-slika { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes kase-gore { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* srdjan 2026-10-24 - natpis na fotografiji kreće od .01, ne od 0: preglednik ga tad odmah broji kao iscrtan (LCP na mobitelu bio 6,9 s) */
@keyframes kase-hero-gore { from { opacity: .01; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kase-crta { from { width: 0; } to { width: 44px; } }
.hero-slika { animation: kase-hero-slika 2.8s cubic-bezier(.2,.6,.2,1) both; }
.hero-sadrzaj > * { animation: kase-hero-gore .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-sadrzaj > :nth-child(1) { animation-delay: .35s; }
.hero-sadrzaj > :nth-child(2) { animation-delay: .5s; }
.hero-sadrzaj > :nth-child(3) { animation-delay: .7s; }
.hero-sadrzaj > :nth-child(4) { animation-delay: .85s; }
.hero .nad::before { animation: kase-crta .8s .6s ease-out both; }
/* zaglavlje se NE animira (transform na .vrh lomi izbornik na mobitelu: position:fixed postane unutar zaglavlja) */
html.js-anim .anim { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k, 0) * 70ms); }
html.js-anim .anim.vidi { opacity: 1; transform: none; }
html.js-anim .nagrade-blok > img.anim, html.js-anim .o-klapi-slika.anim, html.js-anim .clanak-slika.anim { transform: scale(.97); }
html.js-anim .nagrade-blok > img.anim.vidi, html.js-anim .o-klapi-slika.anim.vidi, html.js-anim .clanak-slika.anim.vidi { transform: none; }
.odjeljak-glava { position: relative; }
html.js-anim .odjeljak-glava.anim { border-bottom-color: transparent; transform: none; }
html.js-anim .odjeljak-glava.anim::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--crta); transition: width 1.1s .2s cubic-bezier(.2,.7,.2,1); }
html.js-anim .odjeljak-glava.anim.vidi::after { width: 100%; }
html.js-anim .odjeljak-glava.anim h2 { transform: translateY(20px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
html.js-anim .odjeljak-glava.anim.vidi h2 { transform: none; }
.nastup { transition: background .25s; }
.nastup-datum b { transition: transform .3s; display: inline-block; }
.nastup:hover .nastup-datum b { transform: translateX(4px); }
.vise::after { display: inline-block; transition: transform .25s; }
.vise:hover::after { transform: translateX(4px); }
.clan-slika img, .o-klapi-slika img, .nagrade-blok > img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.clanovi-mreza li:hover .clan-slika img { transform: scale(1.05); }
.o-klapi-slika { overflow: hidden; }
.o-klapi:hover .o-klapi-slika img { transform: scale(1.03); }
.yt-slika img { transition: transform .5s; }
.yt:hover .yt-slika img { transform: scale(1.04); }
/* srdjan 2026-10-26 - slider na vrhu naslovnice: pretapanje 1,8 s, svaka fotka se 9 s polako približava; crtice dolje desno pokazuju koliko je ostalo */
.hero-slajdovi { position: absolute; inset: 0; overflow: hidden; }
.hero-slajdovi .hero-slika { opacity: 0; transition: opacity 1.8s ease; animation: none; object-position: var(--pol, 50% 50%); will-change: transform, opacity; }   /* vlastiti sloj: približavanje bez ponovnog iscrtavanja */
.hero-slajdovi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,16,14,.5) 0, rgba(21,16,14,0) 55%); }   /* logo čitljiv i kad su ljudi lijevo */
.hero-slajdovi .hero-slika.je-aktivan { opacity: 1; animation: kase-hero-plovi 9s linear both; }
@keyframes kase-hero-plovi { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero-tocke { position: absolute; left: 0; right: 0; bottom: 11vh; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; pointer-events: none; }
.hero-tocke button { pointer-events: auto; position: relative; width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-tocke button::before, .hero-tocke button::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(246, 239, 226, .35); }
.hero-tocke button::after { background: #f6efe2; transform: scaleX(0); transform-origin: left; }
.hero-tocke button[aria-current]::after { transform: scaleX(1); animation: kase-hero-crtica 7s linear both; }
.hero-tocke button:focus-visible { outline: 2px solid #f6efe2; outline-offset: 2px; }
@keyframes kase-hero-crtica { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 720px) {
  /* mobitel: fotka u gornjem dijelu (ljudi iznad natpisa), natpis na tamnom ispod */
  .hero-slajdovi { bottom: 36%; }
  .hero-slajdovi .hero-slika { object-position: var(--pol-m, 50% 50%); }
  .hero-slajdovi::after { background: linear-gradient(180deg, rgba(21,16,14,0) 55%, var(--noc) 100%); }
  .hero-tocke { bottom: auto; top: 96px; justify-content: flex-start; } .hero-tocke button { width: 32px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* srdjan 2026-10-23 - galerija (blok kostura .b-galerija) i povećalo */
.b-galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 1.5em; }
.b-galerija .g-stavka { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kamen2); }
.b-galerija img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .35s; }
.b-galerija .g-stavka:hover img { transform: scale(1.04); }
.stranica .omot-uski .b-galerija { margin-left: calc(50% - min(50vw, 620px) + 24px); margin-right: calc(50% - min(50vw, 620px) + 24px); }
.povecalo { position: fixed; inset: 0; z-index: 60; background: rgba(15,11,10,.96); display: flex; align-items: center; justify-content: center; }
.povecalo[hidden] { display: none; }
.povecalo img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; margin: 0; }
.povecalo button { position: absolute; border: 0; background: rgba(255,255,255,.08); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.povecalo button:hover { background: rgba(255,255,255,.18); }
.povecalo .pv-zatvori { top: 16px; right: 16px; }
.povecalo .pv-prije { left: 16px; top: 50%; margin-top: -26px; }
.povecalo .pv-poslije { right: 16px; top: 50%; margin-top: -26px; }
.povecalo .pv-broj { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #bfb3a5; font-size: .9rem; }
/* srdjan 2026-10-24 - stranica Galerija: pločice različitih veličina (široke, visoke, velike), popunjava rupe */
.galerija-str .b-galerija { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 12px; margin: 0; }
.galerija-str .g-stavka { aspect-ratio: auto; position: relative; }
.galerija-str .g-stavka:nth-child(10n + 1) { grid-column: span 2; grid-row: span 2; }
.galerija-str .g-stavka:nth-child(10n + 4), .galerija-str .g-stavka:nth-child(10n + 8) { grid-column: span 2; }
.galerija-str .g-stavka:nth-child(10n + 6) { grid-row: span 2; }
.galerija-str .g-stavka::after { content: ""; position: absolute; inset: 0; background: rgba(21,16,14,0); transition: background .35s; }
.galerija-str .g-stavka:hover::after { background: rgba(21,16,14,.18); }
.galerija-str .g-stavka img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.galerija-str .g-stavka:hover img { transform: scale(1.06); }
html.js-anim .galerija-str .g-stavka.anim { transform: translateY(30px) scale(.96); }
html.js-anim .galerija-str .g-stavka.anim.vidi { transform: none; }
@media (max-width: 1100px) { .galerija-str .b-galerija { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; } }
@media (max-width: 720px) {
  .galerija-str .b-galerija { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 6px; }
  .galerija-str .g-stavka:nth-child(10n + 4), .galerija-str .g-stavka:nth-child(10n + 8) { grid-column: span 2; }
}
@media (max-width: 720px) { .b-galerija { grid-template-columns: 1fr 1fr; gap: 6px; } .stranica .omot-uski .b-galerija { margin-left: 0; margin-right: 0; } .povecalo .pv-prije, .povecalo .pv-poslije { display: none; } }

/* srdjan 2026-10-27 - traka za kolačiće (modul kostura) u fontu weba */
.cms-privola, .cms-privola-ponovno { font-family: var(--f-tekst); }
.cms-privola b { font-family: var(--f-nas); font-weight: 600; }

/* srdjan 2026-10-27 - dijeljenje nastupa: male ikone uz „Dodaj u kalendar"; na mobitelu samo jedna (sustavni izbornik), na računalu WhatsApp / Facebook / kopiraj */
.nastup-dijeli { display: inline-flex; align-items: center; gap: 4px; }
.nastup-dijeli a, .nastup-dijeli button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--crta); border-radius: 50%; background: none; color: var(--vino); cursor: pointer; transition: color .2s, border-color .2s; }
.nastup-dijeli a:hover, .nastup-dijeli button:hover { color: var(--zlato); border-color: currentColor; }
.nastup-dijeli svg { width: 16px; height: 16px; }
.nastup-dijeli .nd-sustav { display: none; }
html.ima-dijeljenje .nastup-dijeli .nd-sustav { display: inline-grid; }
html.ima-dijeljenje .nastup-dijeli .nd-mreza { display: none; }
.nastup-dijeli .nd-kopiraj.gotovo { color: var(--zlato); border-color: currentColor; }
.nastup:target { background: linear-gradient(90deg, rgba(176,138,74,.10), transparent 70%); }
@media (max-width: 720px) { .nastup-dijeli a, .nastup-dijeli button { width: 44px; height: 44px; } }