@charset "utf-8";
:root{
  --bg1:#0b1020; --bg2:#0f172a; --txt:#e5e7eb; --muted:#94a3b8;
  --acc:#e11d48; --acc2:#38bdf8; --card:#111827;
  --radius:18px; --shadow:0 10px 25px rgba(0,0,0,.35);
  --fb:#1877F2; --ig:#E1306C; --yt:#FF0000;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg1);color:var(--txt);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--acc2);text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(11,16,32,.75);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(148,163,184,.15);
  transition:all .25s ease;
}
.nav.shrink{background:rgba(11,16,32,.9);padding:4px 0}
/* NAV – Chrome stabilizacija */
.nav{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: rgba(11,16,32,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148,163,184,.15);
  transition: all .25s ease;
}
.wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.menu{ margin-left:auto; display:flex; gap:26px; align-items:center; flex-wrap:nowrap; }
.menu a{ white-space:nowrap; }

/* sticky naj bo vedno viden, če kak starš ima overflow */
body{ overflow-x:hidden; }


/* HEADER LAYOUT */
.wrap{
  display:flex; align-items:center; gap:16px;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#eaf0ff;flex-shrink:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc)}
.social-inline{display:flex;gap:14px;align-items:center;margin-left:0;margin-right:8px;flex-shrink:0}

/* meni */
.menu{
  margin-left:auto;
  display:flex; gap:26px; align-items:center;
}
.pill{border:1px solid rgba(148,163,184,.25);padding:6px 12px;border-radius:999px}
.burger{display:none;border:1px solid rgba(148,163,184,.25);background:#0f1428;color:#eaf0ff;border-radius:999px;padding:6px 12px}

/* MENI HOVER */
.menu a{
  color:#e7edf7; opacity:.95;
  font-weight:700; letter-spacing:.15px;
  position:relative; padding:6px 0;
  transition:color .18s ease, text-shadow .18s ease;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--acc2),var(--acc));
  border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.menu a:hover{color:#fff; text-shadow:0 0 18px rgba(56,189,248,.25)}
.menu a:hover::after{transform:scaleX(1)}

/* ====== SOCIAL — ENOTNE IKONE + GLOW ====== */
.social-inline .slabel{display:none}
.footer-socials .slabel{display:none}

.slink{padding:0; border:none; background:transparent; display:flex}

.sicon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0f1428;
  border:1px solid rgba(148,163,184,.25);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.footer-socials .sicon{
  width:44px; height:44px;
}

.sicon svg{ width:22px; height:22px }

/* barve logotipov */
.slink.fb .sicon svg{ fill: var(--fb) }
.slink.ig .sicon svg{ fill: var(--ig) }
.slink.yt .sicon svg{ fill: var(--yt) }

/* glow animacija */
.sicon:hover{
  transform:translateY(-2px) scale(1.1);
  border-color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.15);
}

/* HERO */
.hero{
  background:
    radial-gradient(1200px 600px at 10% 5%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(225,29,72,.18), transparent 55%),
    radial-gradient(800px 600px at 50% 90%, rgba(99,102,241,.18), transparent 55%),
    linear-gradient(180deg,#0a0f1f 0%,#0b1224 100%);
  padding:80px 0 60px
}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.headline{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.1;font-weight:800;margin:0 0 14px}
.sub{color:var(--muted);font-size:1.05rem;margin:0 0 22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(148,163,184,.25);background:#0f1428;color:#eaf0ff;font-weight:600;box-shadow:var(--shadow);transition:transform .15s ease}
.btn.primary{background:var(--acc);border-color:transparent}
.btn:hover{transform:translateY(-1px)}
.now{margin-top:20px;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(225,29,72,.18),rgba(56,189,248,.14));border:1px solid rgba(148,163,184,.2);padding:12px 14px;border-radius:12px}
.hero-card{background:rgba(15,23,42,.75);border:1px solid rgba(148,163,184,.18);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.hero img{width:100%;height:auto;border-radius:var(--radius);border:1px solid rgba(148,163,184,.2)}

/* SECTIONS */
section{padding:70px 0;border-top:1px solid rgba(148,163,184,.12)}
.h2{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 14px;font-weight:800}
.lead{color:var(--muted);margin:0 0 26px}

/* ABOUT */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.box{background:var(--card);border:1px solid rgba(148,163,184,.14);border-radius:var(--radius);padding:22px}
.badge-link{
  border:1px solid rgba(148,163,184,.25);
  padding:8px 12px;
  border-radius:999px;
  background:#0f1428;
  color:#eaf0ff;
  /* + animacije za hover efekt gumbov platform */
  transition:transform .15s ease, box-shadow .2s ease, color .15s ease, background .15s ease, border-color .15s ease;
}

/* ====== POSODOBLJENO: platform hover barve ====== */
.badge-link:hover{ transform:translateY(-2px); border-color:#fff; }

/* Spotify */
.badge-link.spotify:hover{
  background:#1DB954;
  border-color:#1DB954;
  color:#0b1020;
  box-shadow:0 0 0 6px rgba(29,185,84,.15), var(--shadow);
}
/* Apple Music (gradient) */
.badge-link.apple:hover{
  background:linear-gradient(135deg,#ff3b5c 0%, #c148ff 100%);
  border-color:#ff4b6a;
  color:#ffffff;
  box-shadow:0 0 0 6px rgba(255,75,106,.18), var(--shadow);
}
/* YouTube */
.badge-link.youtube:hover{
  background:#FF0000;
  border-color:#FF0000;
  color:#ffffff;
  box-shadow:0 0 0 6px rgba(255,0,0,.18), var(--shadow);
}
/* Focus ringi */
.badge-link.spotify:focus-visible{ outline:3px solid rgba(29,185,84,.55); outline-offset:2px; }
.badge-link.apple:focus-visible  { outline:3px solid rgba(255,75,106,.55); outline-offset:2px; }
.badge-link.youtube:focus-visible{ outline:3px solid rgba(255,0,0,.55);   outline-offset:2px; }

/* TRACKS */
.tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.track{background:var(--card);border:1px solid rgba(148,163,184,.14);border-radius:var(--radius);padding:16px;display:flex;gap:14px;transition:transform .15s ease, box-shadow .15s ease}
.track:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35)}
.track img{width:80px;height:80px;border-radius:12px;object-fit:cover;border:1px solid rgba(148,163,184,.2)}
.badge{font-size:.72rem;background:rgba(225,29,72,.18);color:#ffdbe5;padding:3px 9px;border:1px solid rgba(225,29,72,.35);border-radius:999px;margin-left:6px}
.track h4{margin:0 0 6px;font-size:1.05rem}
.meta{color:var(--muted);font-size:.9rem}

/* GALLERY SCROLLER */
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.scroller::-webkit-scrollbar{height:10px}
.scroller::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:999px}
.shot{scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(148,163,184,.2)}
.shot img{width:100%;height:340px;object-fit:cover;display:block}

/* PARTNERS */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center}
.logo{background:#0f172a;border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:18px;text-align:center;opacity:.9}

/* CONTACT */
.contact-card{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.panel{background:var(--card);border:1px solid rgba(148,163,184,.14);border-radius:var(--radius);padding:22px}
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid rgba(148,163,184,.25);padding:10px 14px;border-radius:999px}

/* NEWSLETTER */
.newsletter{background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(225,29,72,.10));border-top:1px solid rgba(148,163,184,.12);border-bottom:1px solid rgba(148,163,184,.12);padding:50px 0;margin-top:30px}
.news-wrap{width:min(900px,92%);margin:0 auto;text-align:center}
.news-title{font-size:clamp(1.3rem,2.1vw,1.8rem);font-weight:800;margin:0 0 8px}
.news-lead{color:#a7b4c8;margin:0 0 18px}
.news-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.news-form input[type=email]{flex:1;min-width:260px;padding:12px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.25);background:#0f1428;color:#eaf0ff}
.news-form label{display:flex;align-items:center;gap:8px;color:#cbd5e1;font-size:.9rem;opacity:.9}
.news-form button{padding:12px 18px;border-radius:999px;background:var(--acc);border:0;color:#fff;font-weight:700;cursor:pointer}
.news-note{color:#a3afc4;font-size:.85rem;margin-top:8px}
.news-ok{display:none;margin-top:12px;color:#86efac;font-weight:600}
.news-err{display:none;margin-top:12px;color:#fca5a5;font-weight:600}

/* FOOTER */
.footer-socials{
  display:flex; justify-content:center; align-items:center;
  gap:18px; padding:22px 0 8px; border-top:1px solid rgba(148,163,184,.12);
}
footer{padding:30px 0;color:#a3afc4;text-align:center;border-top:1px solid rgba(148,163,184,.12)}

/* REVEAL */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* RESPONSIVE */
@media (max-width: 1100px){
  .menu{ gap:18px }
}
@media (max-width: 900px){
  .grid,.about,.contact-card{grid-template-columns:1fr}
  .tracks{grid-template-columns:1fr}
  .grid-gallery{grid-template-columns:repeat(2,1fr)}
  .scroller{grid-auto-columns:88%}
  .logos{grid-template-columns:repeat(3,1fr)}
  .burger{display:inline-block}
  .menu{display:none}
  .social-inline{margin-left:auto;margin-right:8px}
  .sicon{width:30px;height:30px}
  .sicon svg{width:18px;height:18px}
}
html{ scroll-behavior:smooth; }
/* da naslovi ne gredo pod sticky nav */
#domov,#omeni,#glasba,#galerija,#partnerji,#kontakt,#trgovina{
  scroll-margin-top: 90px; /* prilagodi, če boš kasneje spremenil višino menija */
}
.menu a.active{
  color:#fff;
}
.menu a.active::after{
  transform:scaleX(1);
}
.social-inline{ gap:16px; }
.logo img{
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0.95);
  transition: transform .2s ease, filter .2s ease;
}

.logo:hover img{
  transform: scale(1.06);
  filter: brightness(1.15);
}
/* =========================
   SECTION ACCENTS (pasovi)
   ========================= */

/* 1) Per-sekcija nastavimo odtenek (RGB) */
#omeni     { --sec: 225, 29, 72;   } /* rdeče-rožnat */
#glasba    { --sec:  56,189,248;   } /* cyan */
#galerija  { --sec: 168, 85,247;   } /* vijola */
#partnerji { --sec: 234,179,  8;   } /* amber */
#trgovina  { --sec:  34,197, 94;   } /* zelen */
#kontakt   { --sec:  99,102,241;   } /* indigo */

/* 2) Vsem sekcijam dodamo subtilen gradientni pas in dvobarvno ozadje */
section { position: relative; }
section > .container { position: relative; z-index: 1; }

section::before,
section::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}

/* tanek "pas" na vrhu sekcije */
section::before{
  height: 3px;
  top: 0; bottom: auto;
  background:
    linear-gradient(90deg,
      rgba(var(--sec,148,163,184),.75) 0%,
      rgba(var(--sec,148,163,184),.25) 35%,
      rgba(148,163,184,.12) 100%);
  opacity:.9;
}

/* mehka barvna meglica zadaj (very subtle) */
section::after{
  background:
    radial-gradient(900px 320px at 12% 0%,
      rgba(var(--sec,148,163,184),.12), transparent 60%),
    radial-gradient(700px 280px at 85% 12%,
      rgba(99,102,241,.10), transparent 55%);
  opacity:.7;
}

/* 3) Kartice/elementi v vsaki sekciji dobijo ujemajoč rob + rahel glow */
#omeni .box,
#omeni .panel{
  border-color: rgba(var(--sec), .28);
  box-shadow: 0 10px 25px rgba(var(--sec), .08), var(--shadow);
}

#glasba .track{
  border-color: rgba(var(--sec), .26);
  box-shadow: 0 10px 24px rgba(var(--sec), .08), var(--shadow);
}
#glasba .badge{
  background: rgba(var(--sec), .20);
  border-color: rgba(var(--sec), .45);
  color:#fff;
}

/* galerija */
#galerija .shot{
  border-color: rgba(var(--sec), .24);
  box-shadow: 0 10px 22px rgba(var(--sec), .07);
}

/* PARTNERS – robustne mere + centriranje + brez prelivanja */
.logos{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:18px; align-items:center;
}

.logo{
  display:flex; align-items:center; justify-content:center;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.18);
  border-radius:12px; padding:14px;
  text-align:center; opacity:.95;
  /* prepreči “štrlenje” zaradi paddinga */
  min-width:0; 
}

.logo img{
  width:100%;
  height:auto;
  max-height:72px;          /* ključna meja, da so vsi enako visoki */
  object-fit:contain;
  aspect-ratio:auto;        /* naj ohrani razmerje */
  filter:brightness(.98);
  transition:transform .2s ease, filter .2s ease;
}

/* Hover efekt ostane, a znotraj varnih mer */
.logo:hover img{
  transform:scale(1.05);
  filter:brightness(1.1);
}

/* Mobilno – raje 2 stolpca, da ni preozko in nič ne prekriva */
@media (max-width: 900px){
  .logos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .logo img{ max-height:60px; }
}



/* trgovina */
#trgovina .btn.primary{
  background: linear-gradient(135deg,
    rgba(var(--sec), .95), rgba(var(--sec), .75));
}

/* kontakt */
#kontakt .panel{
  border-color: rgba(var(--sec), .26);
  box-shadow: 0 10px 24px rgba(var(--sec), .08), var(--shadow);
}

/* malo manj intenzivno na zelo majhnih zaslonih */
@media (max-width: 900px){
  section::after{ opacity:.55; }
  section::before{ opacity:.8; }
}
/* Ločeno ime v hero naslovu */
.highlight-name{
  display:block;                 /* nova vrstica */
  margin-top:6px;                /* razmik od prve vrstice */
  font-weight:900;
  background:linear-gradient(90deg,#38bdf8,#e11d48);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  /* zelo subtilen sij */
  text-shadow:0 0 18px rgba(56,189,248,.15), 0 0 10px rgba(225,29,72,.12);
}
.event-info {
  background: rgba(255,255,255,0.05);
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.25);
  margin-top: 10px;
}

.event-list li {
  margin-bottom: 6px;
}
/* ===== Modal (Kontakt) ===== */
.modal{position:fixed;inset:0;display:none;z-index:1000}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,15,30,.6);backdrop-filter:blur(8px)}
.modal__dialog{
  position:relative; margin:8vh auto; width:min(680px,92%);
  background:var(--card); border:1px solid rgba(148,163,184,.14);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}
.modal__close{
  position:absolute; top:10px; right:12px; background:transparent; border:0;
  color:#cbd5e1; font-size:26px; line-height:1; cursor:pointer
}
body.modal-open{overflow:hidden}
#toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #0f1428; color:#eaf0ff; border:1px solid rgba(148,163,184,.25);
  padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(-4px); pointer-events:auto }
#toast.hide{ opacity:0; transform: translateX(-50%) translateY(0) }
#toast.success{ border-color: rgba(34,197,94,.35) }
#toast.error{ border-color: rgba(239,68,68,.35) }
.news-ok, .news-err{
  margin-top:12px; font-weight:600;
}
.news-ok{ color:#86efac }
.news-err{ color:#fca5a5 }
.socials a:hover {
  color: #fff !important;
}

/* Posamezne barve */
.socials a:nth-child(1):hover { /* Spotify */
  background: #1DB954 !important;
}

.socials a:nth-child(2):hover { /* Apple Music */
  background: #FA2D48 !important;
}

.socials a:nth-child(3):hover { /* YouTube */
  background: #FF0000 !important;
}
.badge-link.yt:hover {
  background: #FF0000 !important;
  color: #fff !important;
}
.hero .sub {
  color: #f3f6ff;
}
.headline span {
  -webkit-text-stroke: 2px rgba(255,255,255,0.6);
}
/* ===== GALERIJA ===== */

.gallery-page { padding-top: 40px; }
.gallery-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* enotne kartice, ne glede na velikost originala */
.tile{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  background: #0f172a;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  /* enoten format: 4:3; po želji 1/1 (kvadrat) ali 16/9 */
  aspect-ratio: 4 / 3;
}
.tile img{
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.02);
}
.tile:hover img{ transform: scale(1.05); filter: saturate(1.1); }

/* ===== LIGHTBOX ===== */

.lightbox{
  position: fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background: rgba(10,15,30,.85);
  backdrop-filter: blur(6px);
  z-index: 2000;
}
.lightbox.is-open{ display:flex; }
.lb-img{
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow: 0 18px 38px rgba(0,0,0,.45);
  background:#0b1020;
}
.lb-close{
  position:absolute; top:16px; right:18px;
  width:42px; height:42px; border-radius:50%;
  background:#0f1428; color:#eaf0ff; border:1px solid rgba(148,163,184,.35);
  cursor:pointer; font-size:24px; line-height:1;
}
.lb-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:#0f1428; color:#eaf0ff; border:1px solid rgba(148,163,184,.35);
  cursor:pointer; font-size:22px;
}
.lb-nav.prev{ left:16px; }
.lb-nav.next{ right:16px; }
.lb-counter{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#cbd5e1; font-weight:600; background:#0f1428;
  border:1px solid rgba(148,163,184,.25);
  padding:6px 10px; border-radius:999px; font-size:.9rem;
}

/* bolj udobno na malih zaslonih */
@media (max-width: 600px){
  .gallery-grid{ gap:10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .lb-nav{ width:40px; height:40px; font-size:20px; }
  .lb-close{ width:40px; height:40px; font-size:22px; }
}
/* Burger drop-down meni (mobile) */
@media (max-width: 900px){
  .nav{ --navH: 64px; } /* približna višina bara; lahko prilagodiš */

  .menu{
    display:none;
    position:fixed;
    top: var(--navH);
    left:0; right:0;
    background: rgba(11,16,32,.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148,163,184,.18);
    padding: 14px 16px 18px;
    flex-direction: column;
    gap: 14px;
    z-index: 999;      /* preko vsega */
  }
  .menu.open{ display:flex; }

  /* ko je meni odprt, onemogoči scroll body-ja */
  body.nav-open{ overflow:hidden; }
}