/**
 * POT: GLOBALNO/vmesnik/slogi/lepota.css  (2026-10-16, Damir: »izboljšaj dizajn, ful«)
 * NAMEN: dodatna vizualna plast (ozadje z meglicami in zvezdami, steklene kartice,
 *   zlati robovi, mehko razkrivanje, boljši gumbi in fokus). Samo DODAJA; naloži se
 *   zadnja, uporablja obstoječe tokene (--zlata, --rob, --povrsina ...), zato velja za vse teme.
 * IZKLOP: odstrani <link> v glavna.php (nič drugega ni odvisno od te datoteke).
 */

/* ---- ozadje: tiha nebula + zvezdni prah (samo temne teme) ---- */
html[data-tema="kozmicna"] body,html[data-tema="nocna"] body,html[data-tema="zora"] body,html[data-tema="gozd"] body{
  background:
    radial-gradient(1100px 620px at 12% -8%,color-mix(in srgb,var(--zlata) 13%,transparent),transparent 62%),
    radial-gradient(900px 560px at 108% 12%,color-mix(in srgb,var(--vijola) 16%,transparent),transparent 60%),
    radial-gradient(1000px 700px at 50% 118%,color-mix(in srgb,var(--turkiz) 10%,transparent),transparent 65%),
    var(--ozadje);
  background-attachment:fixed}
html[data-tema="kozmicna"] body:before,html[data-tema="nocna"] body:before,html[data-tema="zora"] body:before,html[data-tema="gozd"] body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 22%,#fff,transparent 60%),radial-gradient(1px 1px at 23% 68%,#fff9,transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 12%,#fff,transparent 60%),radial-gradient(1px 1px at 57% 83%,#fff8,transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 37%,#fff,transparent 60%),radial-gradient(1px 1px at 88% 74%,#fff9,transparent 60%),
    radial-gradient(1px 1px at 33% 45%,#fff7,transparent 60%),radial-gradient(1.2px 1.2px at 94% 8%,#fff,transparent 60%),
    radial-gradient(1px 1px at 15% 90%,#fff8,transparent 60%),radial-gradient(1.1px 1.1px at 64% 56%,#fff7,transparent 60%);
  animation:lepota-utrip 7s ease-in-out infinite alternate}
@keyframes lepota-utrip{from{opacity:.35}to{opacity:.7}}

/* ---- tipografija: zlati naslovi, mirnejše besedilo ---- */
.hero h1,.odsek h1,.dashboard-uvod h1,.otroski-hero h1{
  background:linear-gradient(180deg,var(--zlata2),var(--zlata) 70%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-wrap:balance}
html[data-tema="svetla"] .hero h1,html[data-tema="svetla"] .odsek h1{background:none;-webkit-text-fill-color:currentColor;color:var(--zlata)}
h2,h3{text-wrap:balance}p{text-wrap:pretty}
.oznaka{letter-spacing:.2em;font-weight:800}

/* ---- kartice: steklo, tanek zlat rob, dvig ob dotiku ---- */
.kartica,.panel,.modul-kartica,.knjiznica-kartica,.svet-kartica,.orodje-kartica,.razisci-kartica,.aktivni-kartica,.moja-pot-kartica,.senzor-kartica{
  position:relative;border:1px solid var(--rob);border-radius:calc(var(--radius) + 2px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--zlata) 7%,var(--povrsina)),var(--povrsina) 55%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--senca),inset 0 1px 0 color-mix(in srgb,var(--zlata2) 18%,transparent);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s}
@media (hover:hover){
  .kartica:hover,.panel:hover,.modul-kartica:hover,.knjiznica-kartica:hover,.svet-kartica:hover,.orodje-kartica:hover,.razisci-kartica:hover{
    transform:translateY(-4px);border-color:color-mix(in srgb,var(--zlata) 55%,var(--rob));
    box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--zlata) 22%,transparent),inset 0 1px 0 color-mix(in srgb,var(--zlata2) 30%,transparent)}}

/* ---- gumbi ---- */
.gumb{transition:transform .2s,box-shadow .25s,filter .2s;letter-spacing:.02em}
.gumb.primarni{background:linear-gradient(135deg,var(--zlata2),var(--zlata));color:#1a120a;border-color:transparent;
  box-shadow:0 8px 26px color-mix(in srgb,var(--zlata) 38%,transparent)}
.gumb.primarni:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 12px 34px color-mix(in srgb,var(--zlata) 52%,transparent)}
.gumb:active{transform:translateY(0) scale(.98)}

/* ---- fokus in izbor ---- */
:focus-visible{outline:2px solid var(--zlata2);outline-offset:3px;border-radius:8px}
::selection{background:color-mix(in srgb,var(--zlata) 45%,transparent);color:var(--besedilo)}

/* ---- glava: rahlo steklo ---- */
.glava{-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rob)}

/* ---- mehko razkrivanje ob nalaganju (samo kjer ni »manj gibanja«) ---- */
@media (prefers-reduced-motion:no-preference){
  .glavna>*,.hero>*{animation:lepota-vstop .7s cubic-bezier(.2,.8,.2,1) both}
  .glavna>*:nth-child(2),.hero>*:nth-child(2){animation-delay:.08s}
  .glavna>*:nth-child(3){animation-delay:.16s}.glavna>*:nth-child(4){animation-delay:.24s}
  .kartice-3>*,.kartice-4>*{animation:lepota-vstop .6s cubic-bezier(.2,.8,.2,1) both}
  .kartice-3>*:nth-child(2),.kartice-4>*:nth-child(2){animation-delay:.07s}
  .kartice-3>*:nth-child(3),.kartice-4>*:nth-child(3){animation-delay:.14s}
  .kartice-4>*:nth-child(4){animation-delay:.21s}
}
@keyframes lepota-vstop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body:before{animation:none!important}}

/* ---- telefon: večje tipke, manj praznine ---- */
@media(max-width:650px){
  .gumb,button,.racun-povezava{min-height:46px}
  .odsek{padding:3rem 0}
  .kartica,.panel{border-radius:18px}
  body{background-attachment:scroll}
}

/* 2026-10-17: svetla tema - bel napis na temnem zlatem gumbu (kontrast) */
html[data-tema="svetla"] .gumb.primarni{color:#fffaf0;text-shadow:0 1px 0 rgba(0,0,0,.25)}