/* Aleš Trbežnik – kandidat za župana Občine Polzela. Barve in pisave iz letaka Demokrati. */
:root {
  --navy: #0a1029; --navy-2: #101b48; --modra: #1a3675; --modra-2: #2e6dbb; --cian: #4bbfd2; --cian-2: #5dcbd9;
  --papir: #f3f4f6; --papir-2: #e8ebef; --crta: #d6dce6; --besedilo: #18214a; --siva: #59647f; --bela: #fff;
  --rumena: #ffd45c;
  --pisava: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ozka: 'Fira Sans Extra Condensed', 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --pol: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --copic: 'Kaushan Script', 'Brush Script MT', cursive;
  --sirina: 1200px;
  --rob: clamp(20px, 5vw, 48px);
  --r: 22px;
  --senca: 0 24px 60px -28px rgba(10, 16, 41, .45);
  --gladko: cubic-bezier(.2, .75, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--pisava); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.6; color: var(--besedilo); background: var(--papir); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
.nadnaslov, .oznaka { text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote, figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 6px; }
.ales :focus-visible, .program :focus-visible, .noga :focus-visible, .dokument :focus-visible { outline-color: var(--modra); }
.vidno-skrito { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskoci { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bela); color: var(--navy); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.preskoci:focus { top: 12px; }

/* ---------- gumbi ---------- */
.gumb { --g: linear-gradient(135deg, #1e78b4 0%, #1c66ad 50%, #1c56a6 100%);   /* bela pisava ≥ 4,5 : 1 na sredini gumba */
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .8em 1.5em; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; text-decoration: none; color: var(--bela); background: var(--g);
  box-shadow: 0 12px 30px -12px rgba(46, 109, 187, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s var(--gladko), box-shadow .25s var(--gladko), background-color .25s; -webkit-tap-highlight-color: transparent; }
.gumb:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(46, 109, 187, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gumb:active { transform: translateY(0) scale(.98); }
.gumb-obris { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.gumb-obris:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px #fff; }
.gumb-mali { min-height: 40px; padding: .5em 1.1em; font-size: .92rem; }
.gumb-velik { min-height: 64px; padding: .9em 2.2em; font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); }
.gumb svg { width: 1.3em; height: 1.3em; flex: none; }
.gumb[disabled] { opacity: .65; cursor: default; transform: none; }

/* ---------- ikone (črtne) ---------- */
.li { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---------- glava ---------- */
.glava { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 12px var(--rob); color: var(--bela);
  transition: background-color .35s, box-shadow .35s, padding .35s; }
.glava.trdna { background: rgba(10, 16, 41, .86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .6); padding-top: 9px; padding-bottom: 9px; }
.glava-ime { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.mini-znacka { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 16px;
  background: linear-gradient(180deg, var(--cian-2), #3ea3d0 52%, var(--modra-2)); box-shadow: 0 0 0 2.5px #fff; }
.glava-nav { display: none; margin-left: auto; gap: 26px; font-size: .95rem; font-weight: 600; }
.glava-nav a { text-decoration: none; opacity: .85; position: relative; padding: 6px 0; }
.glava-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cian); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--gladko); }
.glava-nav a:hover { opacity: 1; } .glava-nav a:hover::after, .glava-nav a.aktivna::after { transform: scaleX(1); }
.glava .gumb-mali { margin-left: auto; }
.napredek { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cian-2), var(--modra-2)); pointer-events: none; }
@media (min-width: 900px) { .glava-nav { display: flex; } .glava .gumb-mali { margin-left: 8px; } }

/* ---------- uvod ---------- */
.uvod { position: relative; overflow: hidden; color: var(--bela); min-height: 100svh;
  background: radial-gradient(1100px 760px at 78% 18%, rgba(46, 109, 187, .55), transparent 62%), radial-gradient(800px 600px at 8% 100%, rgba(75, 191, 210, .18), transparent 60%), linear-gradient(165deg, #0a1029 0%, #0f1c50 55%, #0a1029 100%);
  display: flex; flex-direction: column; }
.mreza { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.uvod-notranje { position: relative; z-index: 2; width: 100%; max-width: var(--sirina); margin: 0 auto; padding: 108px var(--rob) 0; display: grid; gap: 10px; flex: 1; }
.nadnaslov { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: #bfe9f0; text-transform: uppercase; }
.nadnaslov::before { content: ''; width: 28px; height: 2px; background: var(--cian); border-radius: 2px; }
.uvod-ime { font-weight: 800; font-size: clamp(2.6rem, 13vw, 7.6rem); line-height: .9; letter-spacing: -.025em; margin: 16px 0 14px; }
.uvod-ime .vrstica { display: block; overflow: hidden; padding-bottom: .06em; }
.uvod-ime .crka { display: inline-block; }
.uvod-vloga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--ozka); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.4vw, 1.95rem); text-transform: uppercase; letter-spacing: .03em; }
.vloga-tag { display: inline-block; padding: .16em .55em .12em; background: linear-gradient(90deg, #2a95c6, #1f72b2); border-radius: 6px; box-shadow: 0 10px 28px -14px rgba(75, 191, 210, .9); }
.vloga-obcina { color: #bfe9f0; letter-spacing: .06em; }
.uvod-geslo { margin-top: 22px; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); line-height: 1.35; color: #e6eefc; }
.uvod-geslo strong { font-weight: 800; color: var(--bela); }
.uvod-geslo .g { display: inline-block; }   /* stavek se ne prelomi na pol */
.uvod-gumbi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.zivo { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: .95rem; color: #dbe7fb; width: max-content; max-width: 100%; }
.zivo b { color: var(--bela); font-weight: 800; font-variant-numeric: tabular-nums; }
.zivo.prazen { visibility: hidden; }   /* prostor je rezerviran, uvod ne poskoči */
a.zivo { text-decoration: none; transition: background .2s, box-shadow .2s; } a.zivo:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.pika { width: 10px; height: 10px; border-radius: 50%; background: #39e07a; box-shadow: 0 0 0 0 rgba(57, 224, 122, .7); animation: utrip 2s 6; flex: none; }
@keyframes utrip { 0% { box-shadow: 0 0 0 0 rgba(57, 224, 122, .6); } 70% { box-shadow: 0 0 0 10px rgba(57, 224, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 224, 122, 0); } }
.uvod-slika { position: relative; align-self: end; justify-self: center; width: min(92vw, 520px); margin-top: 26px; }
.uvod-slika::before { content: ''; position: absolute; left: 8%; right: 0; top: 12%; bottom: 0; border-radius: 50% 50% 0 0;
  background: radial-gradient(closest-side, rgba(93, 203, 217, .55), rgba(46, 109, 187, .25) 55%, transparent 75%); filter: blur(6px); }
.portret { position: relative; width: 100%; height: auto; }   /* robovi so mehko porezani že v sliki (alfa) */
.znacka { --s: clamp(96px, 22vw, 168px); position: absolute; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #3ea3d0 0%, #2a7fc4 52%, #1c56a6 100%);
  box-shadow: 0 0 0 calc(var(--s) * .055) #fff, 0 22px 48px -14px rgba(0, 0, 0, .55); color: var(--bela); }
.znacka span { font-weight: 800; font-size: calc(var(--s) * .64); line-height: 1; transform: translateY(-.02em); text-shadow: calc(var(--s) * .018) calc(var(--s) * .026) 0 rgba(13, 42, 82, .45); }
.znacka::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); transform: translateX(-120%); animation: sijaj 6s 2.2s 3; }
@keyframes sijaj { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.znacka-1 { right: 2%; bottom: 16%; }
.naprej { position: relative; z-index: 2; align-self: center; margin: 8px 0 22px; width: 30px; height: 48px; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.naprej span { position: absolute; left: 50%; top: 10px; width: 4px; height: 10px; margin-left: -2px; border-radius: 2px; background: #fff; animation: kolesce 1.8s infinite; }
@keyframes kolesce { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
@media (min-width: 1024px) {
  .uvod-notranje { grid-template-columns: 1.05fr .95fr; align-items: center; padding-top: 96px; }
  .uvod-besedilo { padding-bottom: 60px; }
  .uvod-slika { width: 100%; max-width: 560px; margin: 0; justify-self: end; align-self: end; }
  .znacka-1 { right: -4%; bottom: 22%; }
}

/* telefon in pokončna tablica: fotografija zgoraj, ime in gumbi čez spodnji, zatemnjeni del fotografije */
@media (max-width: 1023.98px) and (orientation: portrait) {
  .uvod-notranje { padding-top: 56px; gap: 0; }
  .uvod-slika { order: -1; width: min(100%, 540px); margin-top: 0; justify-self: center; }
  .uvod-slika::after { content: ''; position: absolute; left: -30%; right: -30%; bottom: -2px; height: 50%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 20, 54, 0) 0%, rgba(11, 20, 54, .7) 42%, rgba(11, 20, 54, .82) 72%, rgba(11, 20, 54, 0) 100%); }
  .uvod-besedilo { position: relative; z-index: 2; margin-top: max(-46vw, -250px); }
  .uvod-ime { text-shadow: 0 6px 30px rgba(5, 10, 30, .55); }
  .nadnaslov, .vloga-obcina, .uvod-geslo { text-shadow: 0 1px 12px rgba(5, 10, 30, .9), 0 0 2px rgba(5, 10, 30, .6); }
  .znacka-1 { --s: clamp(70px, 19vw, 118px); right: 1%; bottom: auto; top: 34%; z-index: 2; }
  .uvod-gumbi { flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
  .uvod-gumbi .gumb { flex: 1 1 auto; padding-inline: .95em; }
}
@media (max-width: 379.98px) and (orientation: portrait) { .uvod-gumbi { flex-wrap: wrap; } .uvod-gumbi .gumb { flex-basis: 100%; } }

/* telefon, obrnjen na široko: ime in slika drug ob drugem */
@media (min-width: 600px) and (max-width: 1023.98px) and (max-height: 560px) and (orientation: landscape) {
  .uvod-notranje { grid-template-columns: 1.2fr .8fr; align-items: center; padding-top: 74px; }
  .uvod-ime { font-size: clamp(2.6rem, 12svh, 4.6rem); margin: 10px 0; }
  .uvod-vloga { font-size: 1.1rem; }
  .uvod-geslo { margin-top: 12px; font-size: 1.05rem; }
  .uvod-gumbi { margin-top: 16px; }
  .zivo { margin-top: 12px; }
  .uvod-slika { width: min(40vw, calc(84svh * 690 / 946)); margin: 0; justify-self: end; align-self: end; }
  .znacka-1 { --s: 78px; right: -4%; bottom: 18%; }
  .naprej { display: none; }
}

@media (max-width: 1023.98px) { .uvod-notranje { grid-template-columns: minmax(0, 1fr); } }

/* uvodne CSS animacije (brez čakanja na JavaScript) */
.ua { animation: dvig .9s var(--gladko) both; animation-delay: var(--d, 0s); }
.uvod-ime .crka { animation: crka .9s cubic-bezier(.16, .9, .2, 1) both; animation-delay: calc(.25s + var(--i) * 38ms); }
.portret-ovoj { animation: portret 1.2s var(--gladko) .15s both; }
.znacka-1 { animation: znacka 1s cubic-bezier(.34, 1.56, .64, 1) .95s both; }
@keyframes dvig { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes crka { from { opacity: 0; transform: translateY(105%) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes portret { from { opacity: .01; transform: translateY(46px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes znacka { from { opacity: 0; transform: scale(0) rotate(-120deg); } to { opacity: 1; transform: none; } }

/* ---------- skupno za razdelke ---------- */
.razdelek { position: relative; padding: clamp(72px, 10vw, 140px) var(--rob); }
.notranje { max-width: var(--sirina); margin: 0 auto; }
.oznaka { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--modra-2); }
.oznaka::before { content: ''; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.naslov { font-weight: 800; font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.8rem); letter-spacing: -.02em; margin-top: 14px; color: var(--navy); }
.podcrtano { position: relative; display: inline-block; }
.podcrtano::after { content: ''; position: absolute; left: -2%; right: -4%; bottom: -.18em; height: .2em; background: url(../img/poteza.webp) center / 100% 100% no-repeat; }
.temno { background: var(--navy); color: var(--bela); }
.temno .naslov, .ekipa .naslov, .glasovanje .naslov, .podpora .naslov { color: var(--bela); }
.temno .oznaka, .ekipa .oznaka, .glasovanje .oznaka { color: var(--cian-2); }
.citat { position: relative; padding: 4px 0 0 26px; border-left: 3px solid var(--cian); }
.citat p { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.4; font-weight: 600; color: var(--navy); }
.citat p::before { content: '»'; } .citat p::after { content: '«'; }
.citat footer { margin-top: 10px; font-size: .92rem; color: var(--siva); font-weight: 600; }
.citat footer::before { content: '– '; }

/* ---------- občina smo ljudje ---------- */
.ljudje { background: linear-gradient(180deg, #0a1029 0%, #0d1740 100%); color: var(--bela); overflow: hidden; }
.ljudje .notranje { position: relative; }
.ljudje-naslov { font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 6vw, 6.4rem); letter-spacing: -.03em; line-height: .95; }
.ljudje-naslov em { font-style: normal; color: var(--cian-2); }
.ljudje-seznam { margin-top: clamp(30px, 5vw, 56px); display: grid; gap: clamp(10px, 1.8vw, 18px); }
.ljudje-seznam li { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3.2rem); letter-spacing: -.01em; line-height: 1.1; }
.lj-ik { flex: none; width: clamp(48px, 6vw, 76px); height: clamp(48px, 6vw, 76px); padding: clamp(9px, 1.1vw, 13px); border-radius: 50%; color: var(--cian-2);
  background: rgba(93, 203, 217, .1); box-shadow: inset 0 0 0 2px rgba(93, 203, 217, .35); }
.ljudje-avtor { margin-top: clamp(28px, 4vw, 44px); color: #9fb4d6; font-weight: 600; }
.ljudje-avtor::before { content: '– '; }
@media (min-width: 900px) {
  .ljudje { min-height: 100vh; display: flex; align-items: center; } .ljudje-oder, .ljudje .notranje { width: 100%; } .ljudje-seznam { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  /* z JavaScriptom: visok razdelek, vsebina obstane na zaslonu (sticky – brez preskokov postavitve), drsenje odkriva vrstice */
  .js .ljudje { display: block; height: 370vh; padding: 0; overflow: clip; }
  .js .ljudje-oder { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 0 var(--rob); }
}

/* ---------- o Alešu ---------- */
.ales { background: var(--papir); }
.ales-mreza { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
.ales-foto { position: relative; width: min(72vw, 440px); aspect-ratio: 1; justify-self: center; }
.ales-foto::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 210deg, var(--cian-2), var(--modra-2), #0a1029, var(--cian-2)); opacity: .9; }
.ales-foto::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; box-shadow: 0 30px 70px -30px rgba(10, 16, 41, .6); pointer-events: none; }
.ales-foto img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 8px #fff; }
@media (max-height: 560px) and (orientation: landscape) { .ales-foto { width: min(44vw, 70svh); } }
.ales-uvod { margin-top: 18px; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: #2b355e; }
.dejstva { margin-top: 26px; display: grid; gap: 12px; }
.dejstva li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--bela); box-shadow: 0 10px 30px -22px rgba(10, 16, 41, .5); }
.dejstva .d-ik { flex: none; width: 46px; height: 46px; padding: 9px; border-radius: 12px; color: var(--bela); background: linear-gradient(135deg, var(--cian-2), var(--modra-2)); }
.dejstva strong { display: block; font-weight: 800; color: var(--navy); line-height: 1.2; }
.dejstva span { color: var(--siva); font-size: .97rem; line-height: 1.35; }
.nacela { margin-top: 30px; }
.nacela ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.nacela li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--navy); color: var(--bela); font-weight: 700; }
.nacela .n-ik { width: 30px; height: 30px; padding: 4px; border-radius: 50%; color: var(--cian-2); background: rgba(93, 203, 217, .14); }
.ales .citat { margin-top: 32px; }
@media (min-width: 1024px) { .ales-mreza { grid-template-columns: .9fr 1.1fr; } }

/* ---------- program ---------- */
.program { background: linear-gradient(180deg, #fff 0%, var(--papir) 100%); }
.program-glava { max-width: 860px; }
.program-naslov { font-weight: 800; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); letter-spacing: -.02em; color: var(--navy); margin-top: 14px; line-height: 1.12; }
.copic { position: relative; display: inline-block; padding: .06em .5em .12em .42em; margin: 0 .08em; color: var(--bela); font-family: var(--copic); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.copic::before { content: ''; position: absolute; inset: -6% -4% -10% -6%; z-index: -1; background: #2468b0; -webkit-mask: url(../img/copic.webp) center / 100% 100% no-repeat; mask: url(../img/copic.webp) center / 100% 100% no-repeat; }
.copic { isolation: isolate; z-index: 0; }
.program-uvod { margin-top: 26px; max-width: 760px; }
.program-mreza { margin-top: clamp(40px, 6vw, 80px); display: grid; gap: 0; }
.oder { display: none; }
.zaveze { display: grid; gap: 18px; counter-reset: z; }
.zaveza { --z: #2e6dbb; position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 16px 18px; padding: 22px 20px 24px; border-radius: var(--r); background: var(--bela);
  box-shadow: 0 16px 40px -30px rgba(10, 16, 41, .55); border-top: 5px solid var(--z); }
.zaveza[data-n="1"] { --z: #e43228; } .zaveza[data-n="2"] { --z: #53722c; } .zaveza[data-n="3"] { --z: #2353d3; } .zaveza[data-n="4"] { --z: #e87731; } .zaveza[data-n="5"] { --z: #d53178; }
.zaveza[data-n="6"] { --z: #345cbe; } .zaveza[data-n="7"] { --z: #71167d; } .zaveza[data-n="8"] { --z: #3d86b6; } .zaveza[data-n="9"] { --z: #b07a24; } .zaveza[data-n="10"] { --z: #295532; }
/* temnejši odtenki za besedilo (kontrast ≥ 4,5 : 1 na beli) */
.zaveza[data-n="1"] { --zt: #dd3026; } .zaveza[data-n="4"] { --zt: #b45c26; } .zaveza[data-n="8"] { --zt: #387ba7; } .zaveza[data-n="9"] { --zt: #9a6b1f; }
.z-ikona { width: 76px; height: 76px; }
.z-st { font-family: var(--ozka); font-weight: 800; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zt, var(--z)); }
.z-naslov { font-family: var(--pol); font-weight: 800; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; color: var(--zt, var(--z)); margin-top: 4px; }
.z-opis { grid-column: 1 / -1; font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); color: #26305a; }
.z-citat { grid-column: 1 / -1; border-left-color: var(--z); }
.z-citat p { font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem); }
@media (min-width: 640px) { .zaveza { grid-template-columns: 96px 1fr; padding: 28px 30px 30px; } .z-ikona { width: 96px; height: 96px; } }
@media (min-width: 1024px) {
  .program-mreza { grid-template-columns: minmax(320px, .8fr) 1.2fr; gap: 56px; }
  .oder { display: block; position: sticky; top: 13vh; height: 74vh; align-self: start; }
  .oder-notranje { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  .oder-sij { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--oz, #2e6dbb) 30%, transparent), transparent 72%); transition: background .6s; }
  .oder-ikone { position: relative; width: min(30vw, 330px); aspect-ratio: 1; }
  .oder-ikone > div { position: absolute; inset: 0; visibility: hidden; }
  .oder-st { position: relative; font-family: var(--ozka); font-weight: 800; font-size: 1.2rem; letter-spacing: .12em; color: var(--siva); }
  .oder-st b { font-size: 3.4rem; letter-spacing: -.01em; color: var(--oz, var(--navy)); transition: color .4s; margin-right: 8px; vertical-align: -6px; }
  .oder-tirnica { position: relative; display: flex; gap: 8px; }
  .oder-tirnica li { width: 26px; height: 6px; border-radius: 3px; background: var(--crta); transition: background .4s, width .4s; }
  .oder-tirnica li.on { background: var(--oz, var(--modra-2)); width: 44px; }
  .zaveze { gap: 26px; }
  .zaveza { min-height: 56vh; align-content: center; grid-template-columns: 1fr; padding: 40px 44px; }
  .zaveza .z-ikona { display: none; }
}

/* ---------- ekipa ---------- */
.ekipa { background: var(--navy); color: var(--bela); overflow: hidden; }
.ekipa-glava { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; }
.znacka-2 { position: relative; --s: clamp(92px, 14vw, 150px); flex: none; }
.ekipa .naslov { margin-top: 8px; }
.ekipa-stranka { margin-top: 10px; color: #b8c8e8; font-weight: 600; }
.ekipa-foto { position: relative; margin-top: clamp(30px, 5vw, 56px); border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9); background: #1c274f; aspect-ratio: 1864 / 1100; }
.ekipa-foto img { width: 100%; height: 100%; object-fit: cover; }
.ekipa-foto figcaption { position: absolute; right: 12px; bottom: 10px; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 999px; background: rgba(10, 16, 41, .62); color: #dfe8f7; font-size: .78rem; }
.imena { margin-top: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 18px; }
.imena li { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-weight: 700; line-height: 1.2; }
.imena b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .95rem; background: #2368b4; color: var(--bela); font-variant-numeric: tabular-nums; }

/* ---------- glasovanje ---------- */
.glasovanje { background: radial-gradient(900px 600px at 85% 0%, rgba(46, 109, 187, .35), transparent 60%), linear-gradient(180deg, #0d1740, #0a1029); color: var(--bela); overflow: hidden; }
.glasovnici { margin-top: clamp(34px, 5vw, 60px); display: grid; gap: 28px; }
.glasovnica { display: grid; gap: 16px; justify-items: center; text-align: center; }
.glasovnica svg { width: min(100%, 440px); height: auto; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45)); }
.glasovnica figcaption { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #dbe5f6; max-width: 420px; }
.glasovnica figcaption b { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--rumena); color: var(--navy); font-weight: 800; margin: 0 .15em; }
.gv-papir { fill: #fdfdfb; }
.gv-glava { fill: #1a2350; font: 800 15px var(--pisava); letter-spacing: .08em; }
.gv-pod { fill: #59647f; font: 600 12.5px var(--pisava); }
.gv-st { fill: #1a2350; font: 800 19px var(--pisava); }
.gv-ime { fill: #1a2350; font: 700 16px var(--pisava); }
.gv-prazno { fill: #dfe3ea; }
.gv-krog { fill: none; stroke: #e2342a; stroke-width: 3.4; stroke-linecap: round; }
.gv-crta { stroke: #e9ecf1; stroke-width: 1.5; }
.datumi { margin-top: clamp(34px, 5vw, 56px); display: grid; gap: 14px; }
.datumi li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.datumi .d-ik { flex: none; width: 48px; height: 48px; padding: 10px; border-radius: 14px; background: rgba(93, 203, 217, .14); color: var(--cian-2); }
.datumi strong { display: block; font-size: 1.15rem; }
.datumi span { color: #c4d2ea; }
.datumi a { color: var(--cian-2); font-weight: 700; }
@media (min-width: 900px) { .glasovnici { grid-template-columns: 1fr 1fr; } .datumi { grid-template-columns: 1fr 1fr; } }

/* ---------- podpora (koliko ljudi podpira Aleša) ---------- */
.podpora { background: radial-gradient(1000px 700px at 75% 20%, rgba(93, 203, 217, .30), transparent 62%), radial-gradient(800px 600px at 0% 100%, rgba(46, 109, 187, .35), transparent 60%),
  linear-gradient(170deg, #173a86 0%, #0f2160 50%, #0a1029 100%); color: var(--bela); overflow: hidden; }
.podpora-kartica { position: relative; }
.podpora-mreza { display: grid; gap: 22px; justify-items: center; text-align: center;
  grid-template-areas: "glava" "stevec" "mnozica" "mejnik" "akcija"; }
.p-glava { grid-area: glava; } .stevec { grid-area: stevec; } .mnozica { grid-area: mnozica; } .mejnik { grid-area: mejnik; } .p-akcija { grid-area: akcija; }
.zivo-oznaka { color: #d8f6e4 !important; justify-content: center; }
.zivo-oznaka::before { display: none; }
.podpora .naslov { margin-top: 12px; }
.stevec { min-height: 1.1em; }
.stevec-st { display: inline-flex; justify-content: center; font-weight: 800; font-size: clamp(4.4rem, 2.6rem + 9vw, 9.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: #fff; filter: drop-shadow(0 10px 28px rgba(93, 203, 217, .5)); }
.stevec-st .stolpec { display: inline-block; height: 1em; overflow: hidden; }
.stevec-st .stolpec > span { display: block; }
.stevec-st .stolpec > span > span { display: block; height: 1em; }
.stevec-st .lo { display: inline-block; }
.stevec-opis { margin-top: 6px; font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: #e2ecfb; font-weight: 600; }
/* množica: vsaka pika je ena izjava podpore */
.mnozica { position: relative; margin: 0; width: min(100%, 520px); aspect-ratio: 1; }
.mnozica::before { content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(93, 203, 217, .20), rgba(46, 109, 187, .10) 60%, transparent 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.mnozica canvas { position: relative; display: block; width: 100%; height: 100%; }
.mnozica { margin-bottom: 34px; }
.mnozica-napis { position: absolute; left: 0; right: 0; top: calc(100% + 12px); text-align: center; font-size: .86rem; line-height: 1.35; color: #a9bde2; }   /* pod krogom, ne v njem */
/* naslednji mejnik */
.mejnik { width: min(100%, 460px); }
.mejnik-vrh { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; color: #d3e0f6; font-weight: 600; }
.mejnik-vrh b { color: #fff; font-weight: 800; }
.mejnik-se { color: var(--rumena); font-weight: 800; white-space: nowrap; }
.mejnik-pot { margin-top: 8px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mejnik-pot i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cian-2), #8fe3ec 60%, var(--rumena));
  box-shadow: 0 0 18px rgba(93, 203, 217, .7); transition: width 1.4s cubic-bezier(.22, 1, .36, 1); }
.podpora-obrazec { display: grid; justify-items: center; gap: 14px; }
.past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.podpora-pojasnilo { max-width: 520px; font-size: .9rem; color: #b9c9e6; }
.podpora-pojasnilo a, .podpora-opomba a { color: #fff; }
.podpora-hvala { margin-top: 18px; display: grid; justify-items: center; gap: 14px; }
.hvala-naslov { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; }
.deli { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.deli a, .deli button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-weight: 700; color: var(--bela);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background .2s; font-size: 1rem; font-family: inherit; }
.deli a:hover, .deli button:hover { background: rgba(255, 255, 255, .18); }
.deli svg { width: 20px; height: 20px; }
.podpora-stanje { min-height: 1.6em; margin-top: 4px; font-weight: 600; color: #ffe7a3; }
.preklic { border: 0; background: none; padding: 6px 2px; color: #b9c9e6; font: inherit; font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.preklic:hover { color: #fff; }
/* kako deluje: trije koraki */
.koraki { margin-top: clamp(44px, 7vw, 80px); display: grid; gap: 14px; counter-reset: k; }
.koraki li { position: relative; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 4px 16px; padding: 18px 20px; border-radius: 20px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); text-align: left; }
.k-ik { grid-row: 1 / 3; width: 56px; height: 56px; padding: 12px; border-radius: 16px; background: rgba(93, 203, 217, .14); color: var(--cian-2); }
.k-st { font-family: var(--ozka); font-weight: 800; font-size: .8rem; letter-spacing: .14em; color: var(--cian-2); text-transform: uppercase; }
.k-st::before { content: 'Korak '; }
.koraki p { color: #dbe6f8; line-height: 1.45; }
.koraki strong { color: #fff; }
.podpora-opomba { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 680px; font-size: .84rem; color: #9fb2d5; text-align: center; }
.konfeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.konfeti i { position: absolute; top: 0; left: 0; width: 9px; height: 14px; border-radius: 2px; }
@media (min-width: 960px) { .koraki { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) {
  .podpora-mreza { grid-template-columns: 1fr minmax(380px, .95fr); grid-template-areas: "glava mnozica" "stevec mnozica" "mejnik mnozica" "akcija mnozica";
    grid-template-rows: auto auto auto 1fr; justify-items: start; text-align: left; column-gap: clamp(30px, 5vw, 80px); row-gap: 18px; }
  .zivo-oznaka { justify-content: flex-start; }
  .mnozica { width: 100%; max-width: 560px; justify-self: end; align-self: center; }
  .podpora-obrazec, .podpora-hvala { justify-items: start; }
  .deli { justify-content: flex-start; }
  .podpora-pojasnilo { max-width: 480px; }
}

/* ---------- noga ---------- */
.noga { background: var(--papir-2); color: #39436a; padding: 56px var(--rob) 40px; }
.noga .notranje { display: grid; gap: 18px; justify-items: start; }
.noga-logo { width: 240px; height: auto; }
.noga-ime { font-weight: 800; color: var(--navy); }
.impresum { font-size: .88rem; max-width: 820px; }
.noga-male { font-size: .82rem; color: #5a6584; }
.noga a { color: var(--modra); font-weight: 600; }

/* ---------- razkritja (JS) ---------- */
[hidden] { display: none !important; }
/* brez JavaScripta (ali če skripte odpovejo): trdna glava, brez odra z ikonami */
html:not(.js) .glava { background: rgba(10, 16, 41, .92); }
@media (min-width: 1024px) { html:not(.js) .oder { display: none; } html:not(.js) .program-mreza { grid-template-columns: minmax(0, 860px); justify-content: center; } }
html:not(.jsok) .podpora-obrazec .gumb, html:not(.jsok) [data-preklic] { display: none; }
.js [data-r] { opacity: 0; transform: translateY(26px); }
.js [data-r="levo"] { transform: translateX(-30px); }
.js [data-r="desno"] { transform: translateX(30px); }
.js [data-r="pop"] { transform: scale(.8); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ua, .uvod-ime .crka, .portret-ovoj, .znacka-1 { animation: none !important; }
  .znacka::after, .pika, .naprej span { animation: none !important; }
  .js [data-r] { opacity: 1 !important; transform: none !important; }
}

/* ---------- dokument (zasebnost) ---------- */
.dokument { background: var(--papir); }
.dok { max-width: 820px; display: grid; gap: 16px; }
.dok h2 { margin-top: 18px; font-size: 1.4rem; color: var(--navy); }
.dok ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 8px; }
.dok a { color: var(--modra); font-weight: 600; }

/* oznaka političnega oglasa (EU 2024/900): vidna že v uvodu */
.oglas-oznaka { position: relative; z-index: 2; margin-top: 18px; font-size: .78rem; line-height: 1.45; color: #a9bde2; letter-spacing: .01em; }
.oglas-oznaka strong { color: #dce7fb; letter-spacing: .06em; }
.oglas-oznaka a { color: #dce7fb; }

/* varovalka ob zelo počasnem nalaganju skripte: vsa vsebina vidna, postavitev enaka */
.razkrij [data-r] { opacity: 1 !important; transform: none !important; }
/* brez gibanja (zmanjšano gibanje ali brez JS): na širokem zaslonu ikone ob zavezah, brez visokih praznih kartic */
@media (min-width: 1024px) {
  html:not(.js) .zaveza { min-height: 0; grid-template-columns: 76px 1fr; }
  html:not(.js) .zaveza .z-ikona { display: block; }
  html:not(.js) .oder { display: none; }
}