/* ═══════════════════════════════════════════════════════════════════════
   PixStoryFrame · SKUPNI SLOG JAVNIH STRANI
   -----------------------------------------------------------------------
   Uporabljajo: index.html, vprasalnik.html, pogoji.html

   Svetla, topla in prijazna podlaga. Ta je privzeta za VSE obiskovalce,
   tudi za tiste, ki imajo napravo v temnem načinu. Topel papir je del
   tega, kar prodajamo, zato o njem ne odloča nastavitev telefona.

   Kdor želi temno, jo vklopi s stikalom v glavi strani. Izbira se
   shrani in ostane ob naslednjem obisku. Za to poskrbi tema.js.

   Vsa imena razredov so ostala enaka kot prej, spremenil se je samo
   videz. Tako se ni bilo treba dotakniti nobene vrstice kode v straneh.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* podlaga in besedilo */
  --papir:#FCF7F0;      --papir2:#F5EDE1;     --bel:#FFFFFF;
  --crn:#2B2320;        --siv:#6E6459;        --siv2:#A2978C;
  --rob:#EFE5D7;        --rob2:#E2D5C2;

  /* poudarek */
  --zar:#F07E38;        --zar2:#FFA469;       --zar-t:#CF6320;
  --zar-m:#FFF1E6;

  /* pomen */
  --zel:#4E9A6B;        --zel-m:#E9F5ED;      --zel-rob:#BFDFC9;
  --rdec:#D2543F;       --rdec-m:#FCEDEA;

  /* okvir za slike: svetlejši rob lesa, telo, temnejši rob, paspartu */
  --les1:#EBDCC2;       --les2:#BE9668;       --les3:#8C6941;
  --paspartu:#FFFFFF;   --stena:rgba(43,35,32,.30);

  /* oblika */
  --r-s:16px;  --r-m:26px;  --r-l:38px;  --r-pill:999px;
  --sen-1:0 1px 2px rgba(43,35,32,.05), 0 4px 10px rgba(43,35,32,.04);
  --sen-2:0 2px 4px rgba(43,35,32,.05), 0 14px 34px rgba(43,35,32,.08);
  --sen-3:0 4px 8px rgba(43,35,32,.06), 0 28px 60px rgba(43,35,32,.12);
  --sen-zar:0 10px 26px rgba(240,126,56,.28);

  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:'Fraunces',Georgia,"Times New Roman",serif;
  --mono:ui-monospace,Consolas,monospace;
}

/* Temna različica se vklopi SAMO, kadar jo obiskovalec izbere s stikalom.
   Takrat tema.js zapiše na koren strani  data-tema="temno". */
:root[data-tema="temno"]{
    --papir:#161119;     --papir2:#1D1620;    --bel:#241C27;
    --crn:#F0E7E1;       --siv:#B9ABA3;       --siv2:#8B7D76;
    --rob:#32262F;       --rob2:#45333F;
    --zar:#E88E52;       --zar2:#F7B98F;      --zar-t:#D0752F;
    --zar-m:#2C1D16;
    --zel:#82B56C;       --zel-m:#1B2418;     --zel-rob:#33502F;
    --rdec:#E0705C;      --rdec-m:#2A1815;
    --les1:#5C4733;      --les2:#3A2B1E;      --les3:#221913;
    --paspartu:#2E2534;  --stena:rgba(0,0,0,.55);
    --sen-1:0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.25);
    --sen-2:0 2px 4px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.35);
    --sen-3:0 4px 8px rgba(0,0,0,.35), 0 28px 60px rgba(0,0,0,.45);
    --sen-zar:0 10px 26px rgba(232,142,82,.22);
}

/* ── stikalo za svetlo in temno ─────────────────────────────────────── */
.tema{
  margin-left:14px;flex:0 0 auto;width:40px;height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bel);border:1.5px solid var(--rob2);border-radius:var(--r-pill);
  color:var(--siv);font-size:1.05rem;line-height:1;cursor:pointer;
  box-shadow:var(--sen-1);transition:border-color .18s,color .18s,transform .18s}
.tema:hover{border-color:var(--zar);color:var(--crn);transform:translateY(-1px)}
.tema:focus-visible{outline:2px solid var(--zar);outline-offset:2px}
/* v vprašalniku je glava sredinska, zato stikalo postavimo v kot */
header .tema{position:absolute;top:0;right:0;margin:0}
header{position:relative}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papir);color:var(--crn);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 90% 60% at 8% -5%, color-mix(in srgb,var(--zar) 9%,transparent), transparent 62%),
    radial-gradient(ellipse 70% 50% at 100% 22%, color-mix(in srgb,var(--zel) 7%,transparent), transparent 65%);
  background-attachment:fixed;
}
/* drobno zrno, da papir ni pust */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(43,35,32,.014) 0 1px,transparent 1px 3px);
}
.ovoj{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:0}
p{margin:0 0 15px}
a{color:var(--zar-t);text-decoration-color:color-mix(in srgb,var(--zar) 45%,transparent);
  text-underline-offset:3px}
a:hover{color:var(--zar)}
b,strong{font-weight:650}
img{max-width:100%}

/* ── naslovne slike, ki se menjujejo ────────────────────────────────
   Klemnovo naročilo 23. 8. 2026: "Začetno sliko naredi tako, da lahko
   dodam več slik in se menjujejo."

   ⚠ Višina je določena z razmerjem, ne s sliko. Brez tega stran ob
   prihodu prve slike poskoči in človeku odnese besedilo izpod oči. */
.vrtiljak{position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-l);background:var(--papir2)}
.vrtiljak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.vrtiljak img.vid{opacity:1}
.vrtiljakPike{display:flex;justify-content:center;gap:8px;margin-top:14px}
.vrtiljakPike button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:none;background:var(--rob2);transition:background .2s,transform .2s}
.vrtiljakPike button.tu{background:var(--zar);transform:scale(1.25)}
.vrtiljakPike button:hover{background:var(--zar2)}
/* Kdor ne mara gibanja, ga ne dobi. */
@media (prefers-reduced-motion: reduce){
  .vrtiljak img{transition:none}
}

/* ── zaščita slik ───────────────────────────────────────────────────
   Klemnovo naročilo 23. 8. 2026: slik naj se ne da prenesti.

   ⚠ To ustavi desni klik, vlečenje in dolg pritisk na telefonu. NE ustavi
   posnetka zaslona in orodij za razvijalce; popolne zaščite ni. Prava
   zaščita je, da so slike na strani majhne in za tisk neuporabne.

   Zastavic in ikon ne varujemo: niso naše delo. */
.slogk img, .vzorec img, .galerija img, .velikaslika img,
#uvodnaSlika img, .naslovnaSlika img, .predogledM img{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; pointer-events:none}
/* Kjer je slika del gumba ali povezave, mora klik še vedno delovati. */
a img, button img{pointer-events:auto}

/* ── glava ─────────────────────────────────────────────────────────── */
.glava{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb,var(--papir) 82%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--rob) 70%,transparent)}
/* stranski odmik mora ostati, sicer se vsebina glave dotika roba zaslona */
.glava .v{display:flex;align-items:center;gap:20px;padding:14px 22px}
.znak{font-family:var(--serif);font-size:1.24rem;font-weight:800;text-decoration:none;
  color:var(--crn);letter-spacing:-.02em;white-space:nowrap}
.znak span{color:var(--zar)}
.meni{margin-left:auto;display:flex;gap:26px;font-size:.94rem}
.meni a{color:var(--siv);text-decoration:none;font-weight:500;position:relative;padding:4px 0}
.meni a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--zar);border-radius:2px;transition:right .25s}
.meni a:hover{color:var(--crn)}
.meni a:hover::after{right:0}
.nazaj{margin-left:auto;font-size:.92rem;color:var(--siv);text-decoration:none;font-weight:500}
.nazaj:hover{color:var(--crn)}
/* Na ozkem zaslonu meni odpade, zato desni rob drži gumb Začni. */
@media(max-width:820px){.meni{display:none}.glava .v .gumb{margin-left:auto}}
/* ══════════════════════════════════════════════════════════════════════
   GLAVA NA TELEFONU

   ⚠ 23. 8. 2026, izmerjeno na 375 px: znak, gumb Začni, stikalo za temo in
   izbira jezika skupaj niso šli v eno vrsto. Vrstica se ni lomila, zato je
   jezikovni gumb gledal 50 pikslov čez rob in CELA stran se je dala
   potegniti v stran. Takrat sem vrstico dal lomiti.

   ⚠ SPREMENJENO 8. 9. 2026, Klemnovo naročilo:
   "Zgornja vrstica je prevelika. Malo pomanjšaj naslov strani, vse mora
    biti v eni vrstici, gumb lahko malo zmanjšaš, med gumbom in lunico naj
    bo možnost izbira države."

   Lomljenje je odpadlo. Namesto tega sta znak in gumb manjša, razmiki
   krajši, vrstni red pa je predpisan z lastnostjo order, ker zastavo in
   luno v glavo doda JavaScript (jezik.js in tema.js) in je njun vrstni red
   odvisen od tega, kateri se izvede prej.

   IZMERJENO pri 375 px: 12 + znak 118 + 8 + gumb 66 + 8 + zastava 52 + 8
   + luna 30 + 12 = 314 pikslov. Ostane 61 pikslov zraka.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:430px){
  .glava .v{flex-wrap:nowrap;gap:8px;padding:8px 12px}
  .glava .v .znak{font-size:1.02rem}
  /* Ista teža kot doslej, samo ožji gumb. Pisave ne manjšam pod .8rem,
     ker gumb takrat ni več videti kot gumb. */
  .glava .v .gumb{padding:8px 14px;font-size:.82rem}
  .tema{width:30px;height:30px;margin-left:0;flex:0 0 auto}
  .psfJezik{margin-left:0;flex:0 0 auto}
  /* Vrstni red: znak, gumb, izbira države, luna. */
  .glava .v .znak{order:1}
  .glava .v .meni{order:2}
  .glava .v .gumb,.glava .v .nazaj{order:3}
  .glava .v .psfJezik{order:4}
  .glava .v .tema{order:5}
}
/* Še ožji telefoni (360 in 320 px). Znak sme postati manjši, da vrstica
   ostane ena sama tudi tam. */
@media(max-width:365px){
  .glava .v{gap:6px;padding:8px 10px}
  .glava .v .znak{font-size:.94rem}
  .glava .v .gumb{padding:8px 12px;font-size:.78rem}
}

/* ── gumbi ─────────────────────────────────────────────────────────── */
.gumb,.gl{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;text-align:center;
  background:linear-gradient(180deg,var(--zar2),var(--zar));
  color:#fff;font-family:var(--sans);font-weight:700;font-size:1.02rem;
  padding:17px 34px;border-radius:var(--r-pill);box-shadow:var(--sen-zar);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s}
.gumb:hover,.gl:hover{transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 16px 34px rgba(240,126,56,.34);color:#fff}
.gumb:active,.gl:active{transform:translateY(0)}
.gl:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.3)}
.gumb.tih,.gd{
  background:var(--bel);border:1.5px solid var(--rob2);color:var(--siv);
  box-shadow:var(--sen-1);font-weight:600;padding:15px 26px;border-radius:var(--r-pill);
  font-size:.98rem;cursor:pointer;font-family:var(--sans)}
.gumb.tih:hover,.gd:hover{border-color:var(--zar);color:var(--crn);transform:translateY(-1px)}
.gm{background:var(--bel);border:1.5px solid var(--rob2);color:var(--siv);
  padding:9px 17px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;
  cursor:pointer;font-family:var(--sans);box-shadow:var(--sen-1)}
.gm:hover{border-color:var(--zar);color:var(--crn)}
.gx{background:var(--rdec-m);border:1.5px solid color-mix(in srgb,var(--rdec) 35%,transparent);
  color:var(--rdec);padding:7px 14px;border-radius:var(--r-pill);font-size:.84rem;
  font-weight:600;cursor:pointer;font-family:var(--sans)}
.gx:hover{border-color:var(--rdec)}

/* ── uvod ──────────────────────────────────────────────────────────── */
.uvod{padding:76px 0 64px;text-align:center}
.uvod .nad{display:inline-block;font-size:.8rem;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zar-t);background:var(--zar-m);
  padding:8px 18px;border-radius:var(--r-pill);margin-bottom:26px}
.uvod h1{font-size:clamp(2.4rem,6.2vw,4.1rem);margin-bottom:22px}
.uvod h1 em{font-style:normal;color:var(--zar);
  background:linear-gradient(180deg,transparent 66%,color-mix(in srgb,var(--zar) 22%,transparent) 66%)}
.uvod .pod{font-size:clamp(1.06rem,2.3vw,1.28rem);color:var(--siv);max-width:640px;margin:0 auto 34px}
.uvod .pod b{color:var(--crn);font-weight:650}
.uvod .drobno{font-size:.9rem;color:var(--siv2);margin-top:18px}
.velikaslika{margin:52px auto 0;max-width:900px;transform:rotate(-.45deg)}
.velikaslika:hover{transform:rotate(0deg) translateY(-5px)}

/* ══════════════════════════════════════════════════════════════════════
   UVOD NA TELEFONU

   ⚠ Klemnovo naročilo 8. 9. 2026:
   "Med unikatna osebna ilustracija in glave strani je preveč prostora, po
    tem pa se ostalo pojavi nižje. Teksti so lahko malenkost manjši. Da
    pride vse na en zaslon."
   "Vse življenje na 1 sliki, po tem morajo biti slika, po tem tekst v
    nadaljevanju."

   IZMERJENO na 375 krat 812 pikslov, PREJ: glava 102 (dve vrstici),
   nato 52 pikslov praznega, naslov šele pri 217, slika pa pri 674 in je
   segala 113 pikslov čez rob zaslona.

   ZDAJ: glava 52, oznaka pri 60, naslov pri 105, slika takoj za njim,
   besedilo in gumb pod sliko. Vse gre na en zaslon.

   Vrstni red menja lastnost order, zato v index.html ni bilo treba
   premikati ničesar. Na širokem zaslonu ostane vse, kot je bilo.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .uvod{padding:22px 0 40px;display:flex;flex-direction:column;align-items:center}
  .uvod .nad{font-size:.72rem;letter-spacing:.1em;padding:6px 14px;margin-bottom:14px;order:1}
  /* Spodnja meja naslova je manjša, sicer vzame dve vrstici in pol. */
  .uvod h1{font-size:clamp(1.95rem,8.6vw,2.4rem);margin-bottom:16px;order:2}
  /* Slika takoj za naslovom, kot je naročil Klemen. */
  .uvod .velikaslika{margin:0 auto 12px;width:100%;order:3}
  /* Pike vrtiljaka sodijo pod sliko. Brez tega imajo order 0 in skočijo
     na sam vrh strani, nad oznako. */
  .uvod .vrtiljakPike{margin:0 0 16px;order:3}
  .uvod .pod{font-size:1rem;margin:0 auto 20px;width:100%;order:4}
  .uvod .gumb{order:5}
  .uvod .drobno{font-size:.82rem;margin-top:12px;width:100%;order:6}
}

/* ── slike v okvirju, kot da visijo na steni ───────────────────────
   Zgradba je iz treh plasti: leseni okvir je podlaga elementa, bel
   paspartu je rob same slike, tanka vrezana črta okoli slike pa je
   plast ::after. Zato v strani ni bilo treba dodati nobene značke. */
.slikaOvoj,.velikaslika{
  position:relative;padding:15px;border-radius:5px;background:var(--papir2);
  background-image:linear-gradient(135deg,
    var(--les1) 0%, var(--les2) 26%, var(--les3) 58%, var(--les2) 82%, var(--les1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(43,35,32,.30),          /* zunanji rob okvirja */
    inset 0 2px 2px rgba(255,255,255,.38),       /* svetloba z vrha     */
    inset 0 -3px 4px rgba(43,35,32,.22),         /* senca spodaj        */
    0 2px 3px rgba(43,35,32,.12),
    0 24px 40px -14px var(--stena);              /* senca na steno      */
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.slikaOvoj img,.velikaslika img{
  width:100%;display:block;border:16px solid var(--paspartu);border-radius:1px}
/* vrezana črta med paspartujem in sliko, da slika ni prilepljena */
.slikaOvoj::after,.velikaslika::after{
  content:"";position:absolute;inset:31px;pointer-events:none;border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(43,35,32,.18),inset 0 3px 9px rgba(43,35,32,.16)}
.slikaOvoj:hover,.velikaslika:hover{
  box-shadow:
    inset 0 0 0 1px rgba(43,35,32,.30),
    inset 0 2px 2px rgba(255,255,255,.38),
    inset 0 -3px 4px rgba(43,35,32,.22),
    0 3px 5px rgba(43,35,32,.14),
    0 34px 54px -16px var(--stena)}
@media(max-width:600px){
  .slikaOvoj,.velikaslika{padding:10px}
  .slikaOvoj img,.velikaslika img{border-width:11px}
  .slikaOvoj::after,.velikaslika::after{inset:21px}
}

/* prazno mesto namesto zlomljene slike */
.prazno{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--siv2);text-align:center;padding:30px;
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--rob) 55%,transparent) 0 14px,transparent 14px 28px),
    var(--papir2)}
.prazno.siroko{aspect-ratio:3/2}
.prazno .ikona{font-size:2.2rem;opacity:.45}
.prazno code{font-family:var(--mono);font-size:.82rem;color:var(--zar-t);
  background:var(--zar-m);padding:5px 11px;border-radius:9px}

/* ── odseki ────────────────────────────────────────────────────────── */
section{padding:78px 0;border-top:1px solid color-mix(in srgb,var(--rob) 65%,transparent)}
.naslovOdseka{text-align:center;max-width:680px;margin:0 auto 50px}
.naslovOdseka .nad{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--zar-t);margin-bottom:14px}
.naslovOdseka h2{font-size:clamp(1.85rem,4.2vw,2.6rem);margin-bottom:16px}
.naslovOdseka p{color:var(--siv);font-size:1.06rem}

/* ── kartice s tremi poudarki ──────────────────────────────────────── */
.trije{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}
.trije .k{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-m);
  padding:34px 30px;box-shadow:var(--sen-1);transition:transform .22s,box-shadow .22s}
.trije .k:hover{transform:translateY(-4px);box-shadow:var(--sen-2)}
.trije .k .ik{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:18px;background:var(--zar-m);font-size:1.6rem;margin-bottom:18px}
.trije .k h3{font-size:1.22rem;margin-bottom:10px}
.trije .k p{color:var(--siv);font-size:.98rem;margin:0}

/* ⚠ Klemnova pripomba 17. 8. 2026: cetrti kvadratek je ostal sam v
   drugi vrsti in je bil videti odvecen. Stirje ozki stolpci bi stisnili
   besedilo (ovoj je 1120 px, stiri kartice po 268 px se ne izidejo),
   zato gre cetrti CEZ VSO SIRINO pod tremi. To je hkrati najmocnejsa
   obljuba, ki jo damo, in prostor ji pristoji. */
/* ⚠ Klemnovo naročilo 23. 8. 2026: "Vaša slika je unikat, to okence mora
   biti obkroženo, da izstopa." To je največja obljuba, ki jo damo, zato
   dobi zelen okvir in podlago, kot jo ima razdelek o zasebnosti. */
.trije .k.sirok{grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;gap:30px;align-items:start;
  background:var(--zel-m);border:2px solid var(--zel-rob);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--zel) 12%,transparent), var(--sen-2)}
.trije .k.sirok:hover{transform:none;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--zel) 18%,transparent), var(--sen-3)}
.trije .k.sirok .levo{display:flex;flex-direction:column}
/* Ikona ima svoj rob; border-color sam ne naredi nic, ker .trije .k .ik
   nima border-style. */
.trije .k.sirok .ik{background:var(--bel);border:1px solid var(--zel-rob);margin-bottom:14px}
.trije .k.sirok h3{margin-bottom:0}
.trije .k.sirok p{margin:0}
.trije .k.sirok p + p{margin-top:10px}
@media (max-width:760px){
  .trije .k.sirok{grid-template-columns:1fr;gap:0}
  .trije .k.sirok h3{margin-bottom:10px}
}

/* ── galerija primerov ─────────────────────────────────────────────── */
.galerija{display:flex;flex-direction:column;gap:64px}
.primer{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.primer:nth-child(even) .slikaOvoj{order:2}
@media(max-width:880px){.primer{grid-template-columns:1fr;gap:28px}
  .primer:nth-child(even) .slikaOvoj{order:0}}
.slikaOvoj{cursor:zoom-in}
/* nagib je izmenično na eno in na drugo stran, kot slike na steni */
.primer:nth-child(odd)  .slikaOvoj{transform:rotate(-.75deg)}
.primer:nth-child(even) .slikaOvoj{transform:rotate(.75deg)}
/* ob dotiku se slika poravna in malo dvigne
   (izbirnik mora biti enako natančen kot zgornja dva, sicer ne prevlada) */
.primer .slikaOvoj:hover{transform:rotate(0deg) translateY(-5px)}
.primer .besedilo h3{font-size:clamp(1.5rem,3vw,1.95rem);margin-bottom:10px}
.primer .besedilo .slogznak{display:inline-block;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--zar-t);background:var(--zar-m);
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.primer .besedilo p{color:var(--siv)}
.detajli{margin-top:22px;background:var(--papir2);border-radius:var(--r-s);padding:20px 22px}
.detajli div{font-size:.95rem;color:var(--siv);padding:6px 0 6px 26px;position:relative}
.detajli div::before{content:"✦";position:absolute;left:0;color:var(--zar);font-size:.9rem}

/* ── koraki ────────────────────────────────────────────────────────── */
.koraki{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:24px}
.koraki .korak{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-m);
  padding:34px 28px;position:relative;box-shadow:var(--sen-1)}
.koraki .korak .st{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;font-family:var(--sans);font-size:1.15rem;font-weight:800;
  color:#fff;background:linear-gradient(180deg,var(--zar2),var(--zar));
  box-shadow:var(--sen-zar);margin-bottom:18px;opacity:1;line-height:1}
.koraki .korak h3{font-size:1.14rem;margin-bottom:10px}
.koraki .korak p{color:var(--siv);font-size:.96rem;margin:0}

/* ── slogi ─────────────────────────────────────────────────────────── */
/* ⚠ Popravek po pregledu 20. 8. 2026: "When the user clicks the light
   bulb for one window, only that specific window should expand."
   V mreži so vrstice enako visoke, zato je odprta žarnica pri eni
   kartici raztegnila vse sosede. align-items:start jim pusti svojo
   višino, zato se razširi samo tista, ki jo je človek odprl. */
/* ⚠ Klemnova prijava 23. 8. 2026: "Ko izklopim slog, naredi da se na
   spletni strani poravnajo ostali, ki ostanejo vklopljeni, ne da samo
   ugasne."

   Vzrok je bil auto-FILL: ta naredi toliko stolpcev, kolikor jih gre v
   širino, tudi če so prazni. Ob treh slogih je zato ostala prazna četrtina.
   auto-FIT prazne stolpce zloži skupaj in kartice se raztegnejo čez vso
   širino. Enako je že pri paketih in pri treh obljubah zgoraj. */
/* ⚠ Izmerjeno 23. 8. 2026 v pravem brskalniku. auto-fit zloži prazne
   stolpce, a ZADNJE VRSTE ne poravna: pri treh slogih v vprašalniku je
   zadnja kartica ostala levo, desno pa 366 pikslov luknje.

   Upogljiva vrsta s sredinjenjem poravna tudi zadnjo vrsto. Zgornja meja
   380 px je nujna: brez nje se en sam vklopljen slog raztegne čez vso
   širino in njegova slika postane višja od zaslona. */
.slogi{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px}
.slogi > .slogk{flex:1 1 250px;max-width:380px;min-width:0}
.slogk{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-m);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sen-1);transition:transform .22s,box-shadow .22s}
.slogk:hover{transform:translateY(-4px);box-shadow:var(--sen-2)}
.slogk .vzorec{aspect-ratio:4/5;background:var(--papir2);overflow:hidden}
.slogk .vzorec img{width:100%;height:100%;object-fit:cover;display:block}
.slogk .t{padding:20px 22px 24px}
.slogk h3{font-size:1.18rem;margin-bottom:9px}
.slogk p{font-size:.94rem;color:var(--siv);margin:0}

/* ── kartica sloga v vprašalniku ────────────────────────────────────
   Klemnovo naročilo 19. 8. 2026: "raje bi videl, da piše zraven sloga
   slika in zraven slike žarnica z opisom." Prej je bil na kartici
   naslov in pod njim cel odstavek, torej stena besedila brez slike. */
/* ⚠ Klemnov nalog 7. 9. 2026, točka 1a: "Klikljiva mora biti CELA
   kartica, vključno z besedilom, robom in praznim prostorom v njej."
   Zato je kazalec na celi kartici, ne le na imenu in sliki, in fokus s
   tipkovnico je viden. Prej se je kartica ob prehodu miške dvignila za
   štiri pike, kliku pa se je odzval samo del nje; to je zavajalo. */
.slogk{cursor:pointer}
.slogk:focus-visible{outline:3px solid var(--zar);outline-offset:2px}
.slogk .slogVrh{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
.slogk .slogVrh b{font-size:1.08rem;flex:1}
/* Žarnica ima svoj klik in ga ustavi, zato mora biti vidno svoj gumb. */
.slogk .slogVrh .zg{flex:0 0 auto;cursor:help}
.slogk .slogSlika{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--papir2)}
/* Trije slogi slike še nimajo. Namesto praznega okvirja pošteno pove,
   da je v pripravi, in ostane enako visok, da se mreža ne trga. */
.slogk .slogBrezSlike{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;background:var(--papir2);color:var(--siv2);
  font-size:.88rem;text-align:center;padding:0 18px;cursor:pointer}
.slogk .zgled{margin:0;border-radius:0;border-left:none;border-right:none;
  border-bottom:none}
.slogk.izbran{border-color:var(--zel);box-shadow:0 0 0 2px var(--zel-m)}
.slogk .zn{display:block;font-size:.8rem;color:var(--siv2);margin-top:14px}

/* ── cenik ─────────────────────────────────────────────────────────── */
/* Zgornja meja sirine: brez nje se ob dveh paketih vsak raztegne cez pol
   zaslona in slika v njem postane visja od zaslona. */
.paketi{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px}
.paketi > .paket{flex:1 1 272px;max-width:400px;min-width:0}
.paket{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-l);
  padding:36px 30px;position:relative;box-shadow:var(--sen-1)}
.paket.izpostavljen{border-color:var(--zar);box-shadow:var(--sen-2);transform:translateY(-6px)}
.paket .znacka{position:absolute;top:-14px;left:30px;background:linear-gradient(180deg,var(--zar2),var(--zar));
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--r-pill);box-shadow:var(--sen-zar)}
.paket h3{font-size:1.4rem;margin-bottom:8px}
.paket .povz{font-size:.96rem;color:var(--siv);margin-bottom:20px}
.paket .cena{font-family:var(--serif);font-size:2.3rem;font-weight:800;color:var(--crn);
  letter-spacing:-.02em;margin-bottom:6px}
.paket .cena.napovprasevanje{font-size:1.06rem;color:var(--siv);font-family:var(--sans);font-weight:600}
.paket ul{list-style:none;padding:0;margin:22px 0 0}
.paket li{font-size:.95rem;color:var(--siv);padding:11px 0 11px 30px;position:relative;
  border-top:1px solid var(--rob)}
.paket li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--zel);font-weight:800}
.placilo{margin-top:36px;text-align:center;font-size:1rem;color:var(--siv)}
.placilo b{color:var(--crn)}
.doplacila{max-width:430px;margin:0 auto 26px;background:var(--bel);border:1px solid var(--rob);
  border-radius:var(--r-m);padding:22px 26px;box-shadow:var(--sen-1);text-align:left}
.doplacila h3{font-size:1.06rem;margin:0 0 12px;text-align:center}

/* ── izbira države z zastavo ────────────────────────────────────────
   Klemnovo naročilo 23. 8. 2026: država naj se IZBERE, ne tipka, lahko
   pa se tudi tipka in takrat naj se predlogi pokažejo spodaj.
   Uporabljata vprasalnik.html in moje.html. */
.drzPolje{position:relative}
.drzPolje > input{padding-right:44px}
.drzPolje .drzGumb{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--siv2);font-size:.8rem;cursor:pointer;
  border-radius:8px}
.drzPolje .drzGumb:hover{background:var(--papir2);color:var(--crn)}
.drzPredlogi{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
  max-height:280px;overflow-y:auto;background:var(--bel);border:1px solid var(--rob2);
  border-radius:14px;box-shadow:var(--sen-2);padding:6px}
.drzPredlogi.vid{display:block}
.drzPredlogi button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;padding:9px 10px;border-radius:9px;cursor:pointer;
  font-family:var(--sans);font-size:.96rem;color:var(--crn)}
.drzPredlogi button:hover,.drzPredlogi button.tu{background:var(--papir2)}
.drzPredlogi .cena{margin-left:auto;font-size:.86rem;color:var(--siv2);white-space:nowrap}
.drzPredlogi .prazno{padding:12px 10px;color:var(--siv2);font-size:.9rem}
.drzZastava{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);
  flex:0 0 auto;user-select:none;-webkit-user-drag:none}
.drzZnak{display:inline-flex;align-items:center;justify-content:center;min-width:24px;
  height:16px;padding:0 4px;border:1px solid var(--rob2);border-radius:3px;
  font-size:.62rem;letter-spacing:.5px;color:var(--siv2);flex:0 0 auto}
.drzIzbrana{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.92rem;
  color:var(--siv)}
/* ⚠ Klemnovo naročilo 23. 8. 2026: "Okenca na sliki malo raztegni, da
   zavzameta manj strani." Poštnina in Kako se plača gresta zdaj vzporedno
   in sta širši. auto-fit pomeni, da se na telefonu sami postavita ena pod
   drugo, brez posebnega pravila za ozke zaslone. */
.dvoje2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:22px;align-items:stretch;margin:0 auto 26px;max-width:940px}
.dvoje2 .doplacila{max-width:none;margin:0;height:100%}
.vrsticaDop{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-top:1px solid var(--rob);font-size:.96rem}
.vrsticaDop:first-of-type{border-top:none}
.vrsticaDop b{color:var(--crn);white-space:nowrap}
.drobno2{font-size:.86rem;color:var(--siv2);margin:14px 0 0;text-align:center}

/* ══════════════════════════════════════════════════════════════════
   KALKULATOR POŠTNINE

   ⚠ Klemnovo naročilo 4. 9. 2026 (naloga 3): na naslovnici, pod
   poštnino, izbereš državo in ti izračuna znesek. Razlog: "Trenutno se
   poštnina obračuna šele na koncu, kar je pogost razlog za opustitev
   nakupa."

   Videza plošče ne spreminjamo (pravilo R3); to je samo vrstica z
   izbirnikom v isti plošči, po istih barvah in robovih kot vse drugo.
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   ⚠ SPREMENJENO 4. 9. 2026, Klemnovo naročilo: "Ta del naj se izpiše pod
   izborom države." Prej sta izbirnik in izid stala DRUG OB DRUGEM v
   vrstici postKalkVr; na ozkem zaslonu se je izid stisnil v en stolpec
   ob izbirniku in bil komaj berljiv. Odslej je izid pod izbirnikom,
   vrstice postKalkVr ni več.

   Izbirnik je odslej isti kot v vprašalniku (.drzPolje z .drzPredlogi),
   ker mora imeti zastave, teh pa v <select> ni mogoče postaviti.
   ══════════════════════════════════════════════════════════════════ */
.postKalk{margin-top:16px;padding-top:16px;border-top:1px solid var(--rob);
  max-width:420px;margin-left:auto;margin-right:auto}
.postKalk label{display:block;text-align:center;margin:0 0 10px}
.postKalk .drzPolje > input{width:100%;box-sizing:border-box;padding:10px 44px 10px 12px;
  border:1px solid var(--rob);border-radius:var(--r-s);background:var(--bel);
  font:inherit;font-size:.95rem;color:var(--crn)}
.postKalk .drzPolje > input:focus{outline:none;border-color:var(--zar);
  box-shadow:0 0 0 3px rgba(240,126,56,.14)}
/* Izid stoji POD izbirnikom in ima svojo vrstico, da je znesek viden. */
.postKalkIzid{margin-top:12px;text-align:center;font-size:.96rem}
.postKalkIzid:empty{margin-top:0}
.kalkDrzavaVr{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:6px}
.kalkDrzavaVr .kalkIme{font-weight:650;color:var(--crn)}
.kalkZnesek{font-size:1.06rem;margin-bottom:4px}
.postKalkIzid b{color:var(--crn);white-space:nowrap}
.postKalkIzid .drobno2{display:block;margin:0;font-size:.85rem;line-height:1.5}

/* ── zasebnost ─────────────────────────────────────────────────────── */
.zasebnost{background:var(--zel-m);border:1px solid var(--zel-rob);border-radius:var(--r-l);
  padding:52px 44px;text-align:center;box-shadow:var(--sen-1)}
.zasebnost .ik{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:20px;background:var(--bel);font-size:1.8rem;margin-bottom:18px;box-shadow:var(--sen-1)}
.zasebnost h2{font-size:clamp(1.6rem,3.4vw,2.05rem);margin-bottom:18px}
.zasebnost p{color:var(--siv);max-width:660px;margin:0 auto 14px}
.zasebnost b{color:var(--zel)}

/* ── pogosta vprašanja ─────────────────────────────────────────────── */
.vprasanja{max-width:790px;margin:0 auto}

/* ── zložljiv odsek (Klemnovo naročilo 19. 8. 2026) ──────────────────
   Cel odsek z vprašanji je zaprt; viden je samo naslov. Tako je stran
   krajša, vprašanja pa so še vedno tu, en klik stran.                */
.odsekZlozljiv{border:0;background:transparent;border-radius:0;margin:0}
.odsekZlozljiv > summary.naslovOdseka{
  padding:0;cursor:pointer;list-style:none;font-weight:inherit;font-size:inherit;
  display:block;text-align:center;position:relative}
.odsekZlozljiv > summary.naslovOdseka::-webkit-details-marker{display:none}
.odsekZlozljiv > summary.naslovOdseka::before{content:none}
/* puščica pod naslovom pove, da se odpre */
/* ⚠ Klemnovo naročilo 20. 8. 2026: "gumb za razširitev naredi bolj
   opazen in barven, da bodo ljudje videli." Prej je bil siv obroček
   s tanko črto in se je izgubil. Zdaj je poln, v barvi znamke, z
   rahlo senco in večjo puščico. */
.odsekZlozljiv > summary.naslovOdseka::after{
  content:"\25BE";display:block;margin:18px auto 0;width:46px;height:46px;
  line-height:46px;border-radius:50%;border:0;
  background:var(--zar,#F07E38);color:#fff;font-size:1.25rem;font-weight:700;
  box-shadow:0 6px 18px rgba(240,126,56,.38);
  transition:transform .18s ease, box-shadow .18s ease}
.odsekZlozljiv[open] > summary.naslovOdseka::after{transform:rotate(180deg)}
.odsekZlozljiv > summary.naslovOdseka:hover::after{
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,126,56,.5)}
.odsekZlozljiv[open] > summary.naslovOdseka:hover::after{
  transform:rotate(180deg) translateY(2px)}
/* Kdor ne mara gibanja, ga ne dobi. */
@media (prefers-reduced-motion:reduce){
  .odsekZlozljiv > summary.naslovOdseka::after{transition:none}
}
.odsekZlozljiv > .vprasanja{margin-top:26px}
details{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-s);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--sen-1)}
details[open]{border-color:var(--rob2)}
summary{padding:20px 24px;cursor:pointer;font-weight:650;font-size:1.02rem;list-style:none;
  display:flex;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--zar-m);color:var(--zar-t);
  font-size:1.15rem;flex-shrink:0;transition:transform .2s}
details[open] summary::before{content:"−";transform:rotate(180deg)}
details .vsebina{padding:0 24px 22px 64px;color:var(--siv);font-size:.99rem}

/* ── zaključek ─────────────────────────────────────────────────────── */
.zakljucek{text-align:center;padding:96px 0}
.zakljucek h2{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-bottom:20px}
.zakljucek p{color:var(--siv);max-width:540px;margin:0 auto 32px;font-size:1.06rem}

/* ── noga ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rob);padding:40px 0 56px;font-size:.92rem;color:var(--siv2)}
footer .v{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:var(--siv);text-decoration:none}
footer a:hover{color:var(--crn)}
footer .desno{margin-left:auto}

/* ── povečava slike ────────────────────────────────────────────────── */
dialog{border:none;background:transparent;max-width:96vw;max-height:96vh;padding:0}
dialog img{max-width:94vw;max-height:90vh;border-radius:var(--r-m);display:block;box-shadow:var(--sen-3)}
dialog::backdrop{background:rgba(28,22,20,.86);backdrop-filter:blur(4px)}

/* ═══════════════════════════════════════════════════════════════════
   VPRAŠALNIK
   ═══════════════════════════════════════════════════════════════════ */
.ovoj.vprasalnik{max-width:800px;padding-bottom:130px}
header{padding:34px 0 12px;text-align:center}
header .znak{font-size:1.5rem}
header .pod{font-size:.78rem;color:var(--siv2);letter-spacing:.18em;
  text-transform:uppercase;margin-top:6px;font-weight:600}

.napredek{position:sticky;top:0;z-index:20;padding:14px 0 16px;
  background:linear-gradient(180deg,var(--papir) 74%,transparent)}
.napredek .crta{height:10px;background:var(--papir2);border:1px solid var(--rob);
  border-radius:var(--r-pill);overflow:hidden}
.napredek .crta i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  transition:width .5s cubic-bezier(.2,.8,.2,1),background .5s}
.napredek .oznaka{display:flex;justify-content:space-between;font-size:.82rem;
  color:var(--siv2);margin-top:9px;font-weight:600}

.korak{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-l);
  padding:38px 36px;box-shadow:var(--sen-2)}
.korak h2{font-size:clamp(1.5rem,3.6vw,1.95rem);margin:0 0 10px}
.nagovor{color:var(--siv);font-size:1.04rem;margin-bottom:26px}
.nagovor b{color:var(--zar-t);font-weight:650}

label.p{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--siv);
  font-weight:650;letter-spacing:.02em;margin:22px 0 8px;text-transform:none}
label.p .zg{background:var(--zar-m);border:1px solid color-mix(in srgb,var(--zar) 28%,transparent);
  color:var(--zar-t);border-radius:var(--r-pill);padding:2px 10px;font-size:.92rem;
  cursor:pointer;line-height:1.5}
label.p .zg:hover{background:var(--zar);color:#fff;border-color:var(--zar)}
.zgled{display:none;background:var(--zar-m);border-radius:var(--r-s);
  padding:14px 18px;margin:0 0 10px;font-size:.94rem;color:var(--siv)}
.zgled.vid{display:block}
.zgled b{color:var(--zar-t)}

/* zaklenjeno polje, dokler naročnik ne odpre prve žarnice */
.zaklep{display:flex;gap:16px;align-items:flex-start;background:var(--papir2);
  border:2px dashed var(--rob2);border-radius:var(--r-m);padding:20px 22px;margin-top:6px;
  color:var(--siv);font-size:.97rem}
.zaklep .pusc{font-size:1.7rem;color:var(--zar);line-height:1;animation:kaziGor 1.4s ease-in-out infinite}
.zaklep b{color:var(--zar-t)}
@keyframes kaziGor{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

input[type=text],input[type=tel],input[type=email],input[type=date],textarea,select{
  width:100%;background:var(--papir2);color:var(--crn);border:1.5px solid var(--rob2);
  border-radius:var(--r-s);padding:15px 17px;font-family:var(--sans);font-size:1.02rem;line-height:1.5;
  transition:border-color .15s,box-shadow .15s,background .15s}
textarea{resize:vertical;min-height:96px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--zar);background:var(--bel);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--zar) 16%,transparent)}
::placeholder{color:var(--siv2)}
.namig{font-size:.87rem;color:var(--siv2);margin-top:7px}

.skupina{border:1px solid var(--rob);border-radius:var(--r-m);padding:22px 24px 26px;
  margin-top:20px;background:var(--papir2)}
.skupina .glava{display:flex;align-items:center;gap:12px}
.skupina .glava b{font-family:var(--serif);font-size:1.15rem;flex:1}
.dvojni{display:flex;gap:16px;flex-wrap:wrap}
.dvojni>div{flex:1;min-width:158px}

.krmilo{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.raztegni{flex:1}

/* auto-fit, ne auto-fill: prazni stolpci se zlozijo, izbire se poravnajo.
   Ista tezava kot pri slogih, prijavljeno 23. 8. 2026. */
.izbire{display:grid;grid-template-columns:repeat(auto-fit,minmax(164px,1fr));gap:12px;margin-top:10px}
.izbira{border:1.5px solid var(--rob2);border-radius:var(--r-m);padding:18px 14px;cursor:pointer;
  background:var(--papir2);text-align:center;font-size:.97rem;font-weight:600;color:var(--siv);
  transition:transform .18s,border-color .18s,background .18s,color .18s}
.izbira:hover{transform:translateY(-3px);border-color:var(--zar2);color:var(--crn)}
/* ⚠ Klemnov nalog 7. 9. 2026, točka 1a: viden fokus za tipkovnico.
   Kartice so divi z onclick; brez tega jih človek, ki ne uporablja miške,
   ne more ne najti ne izbrati. Klik po celi kartici je bil tu že prej. */
.izbira:focus-visible,.nacin:focus-visible{outline:3px solid var(--zar);
  outline-offset:2px}
.izbira.izbran{border-color:var(--zar);background:var(--zar-m);color:var(--crn);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--zar) 18%,transparent)}
.izbira .ik{display:block;font-size:1.8rem;margin-bottom:8px}

.slikepolje{border:2px dashed var(--rob2);border-radius:var(--r-m);padding:22px;margin-top:20px;
  background:var(--papir2);transition:border-color .18s}
.slikepolje:hover{border-color:var(--zar2)}
.slikepolje .vrh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slikepolje .vrh b{font-size:.98rem;flex:1}
.slikeseznam{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}
.slika{width:186px;border:1px solid var(--rob);border-radius:var(--r-s);overflow:hidden;
  background:var(--bel);box-shadow:var(--sen-1)}
.slika img{width:100%;height:116px;object-fit:cover;display:block;background:var(--papir2)}
.slika .sp{padding:10px}
.slika .sp input,.slika .sp textarea{padding:9px 11px;font-size:.87rem;border-radius:11px;margin-bottom:8px}
.slika .sp textarea{min-height:56px}
.slika .vr2{display:flex;justify-content:space-between;align-items:center;padding:0 10px 11px;gap:8px}
.slika .vel{font-size:.74rem;color:var(--siv2)}

.opomba{background:var(--zar-m);border:1px solid color-mix(in srgb,var(--zar) 22%,transparent);
  border-radius:var(--r-m);padding:18px 22px;margin:20px 0;font-size:.97rem;color:var(--siv)}
.opomba b{color:var(--zar-t)}
.opomba.varno{background:var(--zel-m);border-color:var(--zel-rob)}
.opomba.varno b{color:var(--zel)}
/* opozorilo, ki ga naročnik ne sme spregledati */
.opomba.opoz{background:var(--rdec-m);border-color:color-mix(in srgb,var(--rdec) 40%,transparent)}
.opomba.opoz b{color:var(--rdec)}
#zapora{margin:0 0 18px}
.zeleno{color:var(--zel);font-weight:650}

.stik{display:flex;gap:14px;align-items:flex-start;margin-top:16px;font-size:.99rem;
  color:var(--siv);cursor:pointer;background:var(--papir2);border:1.5px solid var(--rob2);
  border-radius:var(--r-m);padding:16px 18px;transition:border-color .18s,background .18s}
.stik:hover{border-color:var(--zar2)}
.stik:has(input:checked){border-color:var(--zel);background:var(--zel-m)}
.stik input{margin-top:2px;width:22px;height:22px;accent-color:var(--zar);flex-shrink:0}
.stik.neobvezno{opacity:.92}

.vmesna{text-align:center;padding:20px 0 6px}
.vmesna .ik{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;
  border-radius:28px;background:var(--zar-m);font-size:2.8rem;margin-bottom:18px}
.vmesna h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:18px}
.vmesna p{color:var(--siv);max-width:540px;margin:0 auto 14px;font-size:1.04rem}

.pregled h3{font-family:var(--serif);color:var(--zar-t);margin:26px 0 8px;font-size:1.16rem}
.pregled .vr{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--rob)}
.pregled .vr .k{color:var(--siv2);min-width:188px;font-size:.9rem;font-weight:600}
.pregled .vr .v{flex:1;white-space:pre-wrap;color:var(--crn)}

.koncano{text-align:center;padding:34px 0}
.koncano .ik{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;
  border-radius:32px;background:var(--zel-m);font-size:3rem;margin-bottom:20px}
.koncano h2{font-size:clamp(1.7rem,4.2vw,2.3rem);margin-bottom:16px}
.koncano p{color:var(--siv);max-width:540px;margin:0 auto 14px}

.sporocilo{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(10px);
  background:var(--crn);color:var(--papir);padding:15px 26px;border-radius:var(--r-pill);z-index:60;
  font-size:.95rem;font-weight:500;box-shadow:var(--sen-3);opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;max-width:90vw;text-align:center}
.sporocilo.vid{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════════════════════════════════════════════════════════════
   POGOJI
   ═══════════════════════════════════════════════════════════════════ */
.ovoj.pogoji{max-width:780px;padding-bottom:100px}
.ovoj.pogoji h1{font-size:clamp(2rem,5vw,2.7rem);margin:0 0 12px}
.ovoj.pogoji h2{font-size:1.4rem;margin:44px 0 14px}
.ovoj.pogoji p,.ovoj.pogoji li{color:var(--siv)}
.ovoj.pogoji b{color:var(--crn)}
.ovoj.pogoji ul{padding-left:24px}
.ovoj.pogoji li{margin-bottom:9px}
.pod{color:var(--siv2);font-size:.94rem;margin-bottom:40px}
.poudarek{background:var(--zel-m);border:1px solid var(--zel-rob);border-radius:var(--r-l);
  padding:32px 34px;margin:32px 0}
.poudarek h2{margin-top:0}
.poudarek b{color:var(--zel)}
.vrzel{background:var(--zar-m);border:1px dashed color-mix(in srgb,var(--zar) 40%,transparent);
  border-radius:var(--r-m);padding:20px 24px;margin:26px 0;color:var(--zar-t);font-size:.95rem}
.podjetje{background:var(--bel);border:1px solid var(--rob);border-radius:var(--r-m);
  padding:24px 26px;margin:26px 0;font-size:.99rem;line-height:1.9;color:var(--siv);box-shadow:var(--sen-1)}
.podjetje b{color:var(--crn)}

/* ── mehko pojavljanje ob drsenju ──────────────────────────────────── */
.pojav{opacity:0;transform:translateY(22px)}
.pojav.vidno{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pojav{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media(max-width:600px){
  body{font-size:16px}
  .korak{padding:26px 20px;border-radius:var(--r-m)}
  .zasebnost{padding:36px 24px}
  .paket{padding:30px 24px}
  .pregled .vr{flex-direction:column;gap:3px}
  .pregled .vr .k{min-width:0}
  .slika{width:100%}
  /* ⚠ 8. 9. 2026: odmik uvoda je zgoraj, pri ostalih pravilih za uvod na
     telefonu. Tu je stal še en zapis in je tistega povozil, ker je nižje
     v datoteki. Klemen je videl 52 pikslov praznine, čeprav je zgoraj
     pisalo 22. Ne vračaj ga sem. */
  section{padding:58px 0}
  details .vsebina{padding-left:24px}
}


/* ── izbira jezika ob prihodu ───────────────────────────────────────
   Klemnovo naročilo 19. 8. 2026. Zaslon pride PRED vsem drugim, zato je
   slog tu in ne čaka na nič. */
#psfIzbiraJezikaOkno{position:fixed;inset:0;z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:24px}
.psfIzbiraOzadje{position:absolute;inset:0;background:var(--papir,#1a1518);
  opacity:.98}
.psfIzbiraOkvir{position:relative;max-width:620px;width:100%;text-align:center;
  max-height:100%;overflow:auto}
.psfIzbiraZnak{font-family:var(--serif,Georgia,serif);font-weight:800;
  letter-spacing:.08em;font-size:clamp(1.5rem,5vw,2.3rem);color:var(--zar,#F07E38);
  margin-bottom:10px}
.psfIzbiraPod{font-family:var(--serif,Georgia,serif);font-size:clamp(1.15rem,3.4vw,1.7rem);
  line-height:1.25;margin-bottom:18px}
.psfIzbiraVabilo{color:var(--siv2,#9b8f8a);font-size:.98rem;margin-bottom:26px}
.psfIzbiraSeznam{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px}
.psfJezikGumb{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--rob2,#3a3033);border-radius:14px;background:var(--bel,#241d21);
  color:inherit;font-size:1rem;cursor:pointer;text-align:left;
  transition:border-color .15s,transform .15s}
.psfJezikGumb:hover{border-color:var(--zar,#F07E38);transform:translateY(-2px)}
/* zastava v izbirniku ob prihodu: slika, ne znak iz pisave */
.psfJezikGumb img.z{width:28px;height:20px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);flex:0 0 auto;display:block}
.psfJezikGumb .z{flex:0 0 auto}
/* kratica pred imenom, enako kot na gumbu v glavi (19. 8. 2026) */
.psfJezikGumb .k{flex:0 0 auto;min-width:26px;font-size:.8rem;font-weight:700;
  letter-spacing:.03em;opacity:.7}
.psfJezikGumb .i{flex:1}

/* ══════════════════════════════════════════════════════════════════════
   STIKALO ZA JEZIK (Klemnovo naročilo 19. 8. 2026)
   Prej je bilo tu široko polje <select> z imenom jezika in je vzelo pol
   glave. Odslej je gumb velik toliko kot zastava in kratica, ime jezika
   pa se vidi šele v seznamu, ki se odpre pod njim.
   ══════════════════════════════════════════════════════════════════════ */
.psfJezik{position:relative;margin-left:10px;display:inline-block}
.psfJezikGumb2{display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;border:1px solid var(--rob);border-radius:8px;
  background:transparent;color:inherit;cursor:pointer;line-height:1;
  font-size:.82rem;font-weight:650}
.psfJezikGumb2:hover{border-color:var(--rob2)}
/* ⚠ 20. 8. 2026: zastavica iz pisave se v Windows Chromu ne izriše,
   zato je tu slika. Rob in zaobljenost, da bela zastava ne izgine
   v beli podlagi. */
img.zst{width:20px;height:14px;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:0 0 auto;display:block}
.psfJezik .krt{letter-spacing:.03em}
.psfJezik .pusc{font-size:.62rem;opacity:.65;margin-left:1px}
.psfJezik.odprt .pusc{transform:rotate(180deg)}

/* ══════════════════════════════════════════════════════════════════════
   ZASTAVICA OPOZARJA, DA SE DA JEZIK ZAMENJATI

   ⚠ Klemnovo naročilo 8. 9. 2026: "naj se pa na vsakih 20 sekund v
   zgornji vrstici za 2x poveča in zmanjša zastavica, da opozarja, da se
   da jezik zamenjati. V primeru, da je poslan iz linka ali nastavljen na
   angleščino."

   Krog traja 20 sekund. Prvi dve gresta na utrip, gor in dol dvakrat,
   preostalih osemnajst zastavica miruje. Razred opozarja postavi
   jezik.js in samo tedaj, kadar jezika ni izbral obiskovalec sam.

   Povečava je transform, ne širina: transform ne premakne ničesar v
   vrstici, zato se glava strani ob utripu ne trese. */
@keyframes psfZastavaOpozori{
  0%    {transform:scale(1)}
  2.5%  {transform:scale(1.5)}
  5%    {transform:scale(1)}
  7.5%  {transform:scale(1.5)}
  10%   {transform:scale(1)}
  100%  {transform:scale(1)}
}
.psfJezikGumb2.opozarja img.zst,
.psfJezikGumb2.opozarja .krt{
  animation:psfZastavaOpozori 20s ease-in-out infinite;
  transform-origin:center center;
  will-change:transform}
.psfJezikGumb2.opozarja .krt{display:inline-block}
/* Kdor ne mara gibanja, utripa ne dobi. */
@media (prefers-reduced-motion:reduce){
  .psfJezikGumb2.opozarja img.zst,
  .psfJezikGumb2.opozarja .krt{animation:none}
}

.psfJezikSeznam{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:190px;padding:6px;border:1px solid var(--rob);border-radius:12px;
  background:var(--bel);box-shadow:0 12px 30px rgba(0,0,0,.16);
  max-height:min(70vh,420px);overflow-y:auto}
.psfJezikSeznam[hidden]{display:none}
.psfJezikVrstica{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;
  color:inherit;cursor:pointer;font-size:.9rem;text-align:left}
.psfJezikVrstica:hover{background:var(--bez,rgba(0,0,0,.05))}
.psfJezikVrstica.tu{font-weight:700}
.psfJezikVrstica .krt{min-width:24px;opacity:.7;font-size:.78rem;font-weight:650}
.psfJezikVrstica .ime{flex:1}

/* Na telefonu je glava ožja: seznam naj se ne razlije čez rob. */
@media (max-width:640px){
  /* ══════════════════════════════════════════════════════════════════
     ⚠ KLEMNOVA PRIJAVA 4. 9. 2026: "Na mobilni strani sem zaznal, da ko
     želim spremeniti jezik, se mi možnosti odprejo izven zaslona."

     IZMERIL SEM, kaj se zgodi, in prejšnji popravek je ciljal napačno
     stran. Pri širini 375 pikslov stoji gumb za jezik na levi, od 26 do
     78 piksla. Seznam je bil pripet z right:0 NA GUMB, torej se je
     razprostrl od −92 do 78: dvaindevetdeset pikslov je viselo čez LEVI
     rob zaslona. Prejšnje pravilo je varovalo desni rob, ki ni bil
     težava, in max-width tega ni moglo popraviti, ker je bila težava
     položaj, ne širina.

     ODSLEJ je seznam na telefonu pripet na ZASLON in ne na gumb:
     position:fixed z levim in desnim robom. Tako ne more uiti na nobeno
     stran, pa naj gumb stoji kjerkoli v glavi.

     ⚠ position:fixed namenoma, ne absolute: glava je position:relative
     in vsak nov ovoj v njej bi absolute spet pripel drugam.
     ══════════════════════════════════════════════════════════════════ */
  .psfJezik{position:static}
  /* Vrh postavi jezik.js, ko se seznam odpira: izmeri, kje se konča gumb.
     Rezerva 64px velja samo, če bi se meritev iz kakršnegakoli razloga
     ne posrečila; takrat seznam ni na pravi višini, je pa na zaslonu. */
  .psfJezikSeznam{position:fixed;left:10px;right:10px;
    top:var(--psfJezikVrh,64px);
    min-width:0;max-width:none;width:auto;
    max-height:min(60vh,380px)}
  .psfJezikGumb2{padding:5px 7px}
}

/* ══════════════════════════════════════════════════════════════════════
   POTRDITEV SLOGA IN NAČINI PLAČILA (Klemen, 20. 8. 2026)
   "SLOG JE NAPISAN V KVADRATKU IN JE ZELO SLABO BERLJIV. Več mu daj
   prostora, oblikuj, da bo lepo." Zato tu ni mreže s kvadratki, ampak
   ena široka plošča z velikim imenom in celim opisom.
   ══════════════════════════════════════════════════════════════════════ */
.slogPotrjen{border:1px solid var(--rob);border-radius:var(--r-s);
  background:var(--bel);padding:26px 28px;margin-top:6px}
.slogPotrjenIme{font-family:Georgia,"Times New Roman",serif;font-size:1.7rem;
  font-weight:700;line-height:1.2}
.slogPotrjenOpis{margin:12px 0 0;font-size:1.02rem;line-height:1.65;color:var(--siv)}
.slogPotrjenNosilec{margin-top:14px;padding-top:14px;border-top:1px solid var(--rob);
  font-size:.94rem;color:var(--siv)}
@media (max-width:640px){ .slogPotrjen{padding:20px} .slogPotrjenIme{font-size:1.4rem} }

/* Načini plačila: vsak svoja plošča, kartica je vidna in zatemnjena. */
.nacini{display:grid;gap:12px}
.nacin{border:1px solid var(--rob);border-radius:var(--r-s);background:var(--bel);
  padding:16px 18px;cursor:pointer;transition:border-color .15s}
.nacin:hover{border-color:var(--rob2)}
.nacin.izbran{border-color:var(--zar);box-shadow:0 0 0 2px rgba(240,126,56,.18)}
.nacin.caka{opacity:.55;cursor:default}
.nacin.caka:hover{border-color:var(--rob)}
.nacinVrh{display:flex;align-items:center;gap:10px;justify-content:space-between}
.nacin .znacka{background:var(--rob);color:var(--siv);border-radius:99px;
  padding:3px 10px;font-size:.78rem;font-weight:650}
.nacin .namig{margin-top:6px}

/* ── plačilni nalog za nakazilo (Klemen, 20. 8. 2026) ─────────────── */
.nalog{width:100%;border-collapse:collapse;margin-top:10px;font-size:.95rem}
.nalog td{padding:6px 8px;border-bottom:1px solid var(--rob);vertical-align:top}
.nalog td:first-child{color:var(--siv);width:38%}
/* Prostor za kodo QR. Prazen ostane, dokler ni podatkov računa. */
.qrProstor{margin-top:12px;display:flex;justify-content:center}
.qrProstor canvas,.qrProstor img{width:180px;height:180px;image-rendering:pixelated}
/* ⚠ 21. 8. 2026: kodo QR rišemo kot svg, ne kot sliko. Brez te vrstice
   se raztegne čez vso širino in je na telefonu neuporabna. Bela podlaga
   je del kode: bralnik rabi svetel rob. */
.qrProstor svg{width:200px;height:200px;display:block;background:#fff;
 border-radius:8px;padding:6px;box-sizing:content-box}

/* ⚠ 21. 8. 2026: izbirnik obdobja pri fotografiji otroka. Brez svojega
   sloga se stisne ob besedilo in ga nihče ne opazi. */
.obdSlike{width:100%;margin-top:6px;padding:7px 9px;border-radius:9px;
 border:1px solid var(--line2);background:var(--bg2);color:var(--txt);font-size:.85rem}

/* ══════════════════════════════════════════════════════════════════════
   PASICA O MERJENJU (Klemnova naloga 9.7, 4. 9. 2026)

   Google Consent Mode v2: merjenje se sme sprozit sele po privolitvi.
   Pasica se pokaze SAMO takrat, ko je merjenje res vklopljeno; dokler
   oznake GTM ni, je na strani ni.

   Sedi na dnu, ne cez sredino strani: bralca ne sme ustaviti pri branju.
   ══════════════════════════════════════════════════════════════════════ */
#psfSoglasje{position:fixed;left:0;right:0;bottom:0;z-index:9000;
 background:var(--bel,#fff);border-top:1px solid var(--rob,#e6e0d8);
 box-shadow:0 -8px 24px rgba(0,0,0,.10);padding:14px 16px}
.psfSoglasjeVsebina{max-width:1080px;margin:0 auto;display:flex;gap:16px;
 align-items:center;flex-wrap:wrap;justify-content:space-between}
.psfSoglasjeBes{flex:1;min-width:260px;font-size:.88rem;line-height:1.5;
 color:var(--siv,#5b5b5b)}
.psfSoglasjeBes b{color:var(--crn,#221f1c)}
.psfSoglasjeGumbi{display:flex;gap:8px;flex-wrap:wrap}
.psfSoglasjeGl,.psfSoglasjeGd{border-radius:10px;padding:9px 16px;
 font-size:.88rem;font-weight:600;cursor:pointer;border:1px solid var(--rob,#e6e0d8)}
.psfSoglasjeGl{background:var(--crn,#221f1c);color:#fff;border-color:var(--crn,#221f1c)}
/* ⚠ Klemnov nalog "merjenje", 7. 9. 2026, poglavje 9a: "Gumba naj bosta
   enako velika in enako vidna. Če je eden siv in majhen, je privolitev
   pravno sporna in jo nadzorni organ lahko razveljavi."
   Zato ima zavrnitev isto velikost, isto pisavo in isto obliko; loči se
   samo po barvi ozadja, kar je dovoljeno in potrebno, da se gumba ločita. */
.psfSoglasjeNe{background:transparent;color:var(--crn,#221f1c);
  border-color:var(--crn,#221f1c)}
.psfSoglasjeGl:hover{opacity:.9}
.psfSoglasjeGd{background:transparent;color:var(--siv,#5b5b5b)}
.psfSoglasjeGd:hover{color:var(--crn,#221f1c)}
@media (max-width:560px){
  .psfSoglasjeVsebina{flex-direction:column;align-items:stretch}
  .psfSoglasjeGumbi{justify-content:stretch}
  .psfSoglasjeGl,.psfSoglasjeGd{flex:1;text-align:center}
}