:root{
  --bg:#0f2f2a;                  /* smaragdna baza */
  --fg:#eaf7f5;                  /* skoro belo */
  --muted:rgba(234,247,245,.70);
  --card:rgba(255,255,255,.08);
  --stroke:rgba(234,247,245,.18);
  --overlay:rgba(0,0,0,.45);
  --accent:#4fd1c5;              /* tirkiz akcenat */
  --radius:18px;
  --btnRadius:999px;
  --max:1100px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font:inherit}

/* background */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(79,209,197,.22), transparent 62%),
    radial-gradient(900px 520px at 82% 30%, rgba(16,185,129,.18), transparent 62%),
    linear-gradient(180deg, #123b34 0%, #0b2420 100%);
  z-index:-2;
}
.bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  z-index:-1;
}

/* TOPBAR: ne ide u beskraj, centriran u max širinu */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  pointer-events:none;
}
.topbarInner{
  pointer-events:auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* brand + menu button manji */
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  border-radius: var(--btnRadius);
  box-shadow: var(--shadow);
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.85);
}
.brand .name{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}

.hamburger{
  width:38px;
  height:38px;
  display:grid; place-items:center;
  border-radius: var(--btnRadius);
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.hamburger span{
  display:block; width:16px; height:2px;
  background:rgba(255,255,255,.9);
  position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute; left:0;
  width:16px; height:2px;
  background:rgba(255,255,255,.9);
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

/* menu (desno, ali unutar max širine) */
.menu{
  position:fixed;
  top:46px;
  left:0; right:0;
  z-index:60;
  display:none;
  pointer-events:none;
}
.menu.open{display:block}
.menuBox{
  pointer-events:auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 14px;
  display:flex;
  justify-content:flex-end;
}
.menuPanel{
  width:min(320px, calc(100vw - 28px));
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:10px;
}
.menuPanel a{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 11px;
  border-radius: 12px;
  color:var(--fg);
}
.menuPanel a:hover{background:rgba(255,255,255,.06)}
.menuPanel small{color:var(--muted)}

/* dots */
.dots{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:40;
}
.dots button{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
  padding:0;
}
.dots button.active{
  background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.9);
}

/* panels */
.snap{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type: y mandatory;
  scroll-behavior:smooth;
}
.panel{
  min-height:100vh;
  scroll-snap-align: start;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 16px 92px;
  position:relative;
}
.panel .inner{
  width:100%;
  max-width: var(--max);
}

/* HERO MEDIA region (16:9, clipped, nikad preko slova) */
.heroMedia{ position:relative;
  width:100%;
  max-width: 980px;
  margin:0 0 16px 0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.35);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
.heroMedia img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* subtle overlay only (ne preko heroMedia) */
.heroBg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.72)),
    radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 60%);
  z-index:-1;
}
.heroBg::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.06), transparent 35%);
  opacity:.8;
}

/* typography */
.h1{
  font-size: clamp(44px, 7vw, 84px);
  line-height: .95;
  margin:0 0 10px 0;
  letter-spacing:-.02em;
}
.sub{
  color:var(--muted);
  font-size: clamp(14px, 2.4vw, 18px);
  margin:0 0 18px 0;
  max-width: 58ch;
}

/* buttons smaller */
.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius: var(--btnRadius);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:var(--fg);
  min-width:150px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow: var(--shadow);
}
.btn.primary{
  background: linear-gradient(135deg, #5eead4, #34d399);
  color:#062e2a;
  border-color: transparent;
}
.btn:active{transform: translateY(1px)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: var(--btnRadius);
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  color:var(--muted);
  margin-top:14px;
  width:fit-content;
  font-size:12px;
}
.badge b{color:var(--fg)}

.card{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.grid2{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
@media(min-width:860px){
  .grid2{grid-template-columns: 1.05fr .95fr}
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.28);
}
.row .meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.row .meta b{font-size:15px}
.row .meta small{color:var(--muted)}
.row .tickets{white-space:nowrap}

.disclaimer{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
}

.embed{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.35);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* sticky CTA smaller */
.stickyCta{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 12px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75) 30%, rgba(0,0,0,.92));
  z-index:70;
}
.stickyCta .bar{
  max-width: var(--max);
  margin:0 auto;
  display:flex;
  gap:10px;
}
.stickyCta .bar a{
  flex:1;
  text-align:center;
  padding:11px 12px;
  border-radius: var(--btnRadius);
  font-weight:900;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  font-size:13px;
}
.stickyCta .bar a.primary{
  background:rgba(255,255,255,.92);
  color:#000;
  border-color:rgba(255,255,255,.92);
}
.stickyCta .note{
  max-width: var(--max);
  margin:8px auto 0;
  font-size:11px;
  color:var(--muted);
  text-align:center;
  padding:0 10px;
}

/* fade in */
.fade{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade.in{
  opacity:1;
  transform: translateY(0);
}

.topbar .brand{display:none}

/* ===== HERO TITLE FIX ===== */
.heroMedia{
  position: relative;

  /* lep, kontrolisan format */
  width: min(100%, 1600px);
  aspect-ratio: 16 / 9;

  /* simetrican odmak */
  margin: 0 auto 16px auto;
  padding: 18px 18px 14px;

  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.35);
  box-shadow: var(--shadow);

  display: flex;
  flex-direction: column;
  gap: 10px;
}
.heroTitle{
  text-align:center;
  pointer-events:none;
}
.heroTitle .h1{
  margin:0;
  font-size: clamp(56px, 9vw, 110px);
  letter-spacing: .02em;
}
.heroTitle .sub{
  margin: 8px 0 0 0;
  color: rgba(255,255,255,.78);
}
/* ========================== */

/* HERO TITLE FIX */
.heroTitle{
  height: 140px;                 /* fiksna visina (desktop = mobilni), sprečava “skakanje” */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  pointer-events:none;
}
.heroTitle .h1,
.heroTitle h1{
  margin:0;
  white-space: nowrap;           /* nema prelamanja */
  line-height: .95;
}
/* END HERO TITLE FIX */

/* TOPBAR ALIGN FIX */
.topbar{
  pointer-events:none;
}
.topbarInner{
  pointer-events:auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px 14px;
  display:flex;
  justify-content:flex-end; /* hamburger ide desno */
  align-items:center;
}
/* END TOPBAR ALIGN FIX */

/* HERO IMAGE ZOOM */
.heroMedia img{
  transform: scale(1.08);
  transition: transform .3s ease;
}

@media (max-width: 640px){
  .heroMedia img{
    transform: scale(1.16);
  }
}

/* ===== MOBILE UI TUNING ===== */
@media (max-width: 640px){

  /* HERO TITLE */
  .heroTitle .h1,
  .heroTitle h1{
    font-size: clamp(34px, 11vw, 56px);
    letter-spacing: .01em;
  }

  .heroTitle{
    height: auto;
    padding: 6px 0;
  }

  /* BUTTONS */
  .btn{
    padding: 10px 14px;
    font-size: 13px;
    min-width: 120px;
  }

  .ctaRow{
    gap: 8px;
  }

  /* STICKY CTA */
  .stickyCta .bar a{
    padding: 10px 12px;
    font-size: 12px;
  }
}
/* ===== END MOBILE UI TUNING ===== */

/* ===== STICKY CTA SMOOTH FIX ===== */
.stickyCta .bar{
  max-width: 760px;
  margin: 0 auto;
}
.stickyCta .bar a{
  padding: 10px 14px;
  font-size: 12px;
  border-radius: 14px;
  font-weight: 700;
}
.stickyCta .bar a.primary{
  font-weight: 800;
}
/* =============================== */

/* ===== HERO IMAGE OVERFLOW +5PX ===== */
@media (max-width: 640px), (min-width: 1600px){
  .heroMedia img{
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    margin-left: -5px;
    margin-top: -5px;
  }
}
/* =================================== */

.bg-video-layer .bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-video-layer .bg-video-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Blend to match your hero gradient vibe (subtle, premium) */
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.70) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.65) 100%);
}

/* Ensure page content stays above background video */
body {
  position: relative;
}

#heroPanel{
  position: relative;
}

#heroPanel::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-46vh;              /* startuje u video zoni */
  height: calc(46vh + 120px); /* do sredine naslova (fino se dotera) */
  pointer-events:none;
  z-index:-1;             /* iza hero sadržaja, iznad pozadine */
  background:
    linear-gradient(to top,
      var(--emeraldPanel) 0%,
      var(--emeraldPanel) 45%,
      rgba(15,47,42,0.00) 100%);
}
/* ============================= */

.emerald-divider{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3; /* sits above video, below content */
  background: linear-gradient(
    to top,
    rgba(15,47,42,0.40) 0%,
    rgba(15,47,42,0.40) 35%,
    rgba(15,47,42,0.00) 70%,
    rgba(15,47,42,0.00) 100%
  );
}

/* Force content above overlay */
header, nav, main, footer, .dots{ position:relative; z-index:1; }
body{ position:relative; }

#heroPanel .heroBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#heroPanel .inner {
  position: relative;
  z-index: 2;
}

#heroPanel .heroBg::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 70%;              /* panel zona (podešeno da dođe do sredine H1) */
  pointer-events:none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 60, 54, 0.40) 0%,     /* smaragd/tirkiz 40% */
    rgba(15, 60, 54, 0.34) 25%,
    rgba(15, 60, 54, 0.18) 45%,
    rgba(15, 60, 54, 0.00) 70%,
    rgba(15, 60, 54, 0.00) 100%
  );
}

#heroPanel .heroBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#heroPanel .inner {
  position: relative;
  z-index: 2;
}

/* Blur zona: od dna do "oko" sredine H1 */
#heroPanel .heroBg::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 72%;
  pointer-events:none;
  z-index: 1;

  /* blur 75% feel = veći blur + jači tint */
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);

  /* smaragd/tirkiz ~40% + fade ka gore */
  background: linear-gradient(
    to top,
    rgba(15, 60, 54, 0.40) 0%,
    rgba(15, 60, 54, 0.40) 28%,
    rgba(15, 60, 54, 0.22) 52%,
    rgba(15, 60, 54, 0.00) 78%,
    rgba(15, 60, 54, 0.00) 100%
  );
}

/* 2) Blur samo gornje polovine naslova (polovina slova) */
#heroPanel .heroTitle {
  position: relative;
}

#heroPanel .heroTitle::before {
  content:"";
  position:absolute;
  left:-6vw;
  right:-6vw;
  top:0;
  height: 50%;
  pointer-events:none;
  z-index: 3;

  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);

  /* blaga tamna traka da blur “uhvati” podlogu */
  background: rgba(15, 60, 54, 0.22);
}

/* sigurnost: naslov i dalje iznad svega */
#heroPanel .heroTitle h1,
#heroPanel .heroTitle {
  z-index: 4;
}

/* HERO: card stack behind content (video card + glass card) */
#heroPanel {
  position: relative;
  padding: clamp(14px, 3.2vw, 28px);
}

#heroPanel .heroCardStack {
  position: absolute;
  top: clamp(10px, 2.8vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 2*clamp(14px, 3.2vw, 28px)));
  height: clamp(300px, 46vh, 560px);
  z-index: 0;
  pointer-events: none;
  border-radius: 28px;
}

#heroPanel .heroVideoCard {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 26px 70px rgba(0,0,0,0.35);
}

#heroPanel .heroCardVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

#heroPanel .heroGlassCard {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  z-index: 1;

  /* “90% blur emerald glasses” feel */
  -webkit-backdrop-filter: blur(34px) saturate(1.25);
  backdrop-filter: blur(34px) saturate(1.25);

  background: linear-gradient(
    to bottom,
    rgba(15, 60, 54, 0.18) 0%,
    rgba(15, 60, 54, 0.32) 30%,
    rgba(15, 60, 54, 0.42) 100%
  );
}

#heroPanel .inner {
  position: relative;
  z-index: 2;

  /* Content card sits comfortably away from edges */
  width: min(1120px, calc(100vw - 2*clamp(14px, 3.2vw, 28px)));
  margin: 0 auto;

  /* align content within the card height without breaking layout */
  padding-top: clamp(10px, 1.6vw, 18px);
}

/* HERO: card stack behind content (video card + glass card) */
#heroPanel {
  position: relative;
  padding: clamp(14px, 3.2vw, 28px);
}

#heroPanel .heroCardStack {
  position: absolute;
  top: clamp(10px, 2.8vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 2*clamp(14px, 3.2vw, 28px)));
  height: clamp(300px, 46vh, 560px);
  z-index: 0;
  pointer-events: none;
  border-radius: 28px;
}

#heroPanel .heroVideoCard {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 26px 70px rgba(0,0,0,0.35);
}

#heroPanel .heroCardVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

#heroPanel .heroGlassCard {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  z-index: 1;

  /* “90% blur emerald glasses” feel */
  -webkit-backdrop-filter: blur(34px) saturate(1.25);
  backdrop-filter: blur(34px) saturate(1.25);

  background: linear-gradient(
    to bottom,
    rgba(15, 60, 54, 0.18) 0%,
    rgba(15, 60, 54, 0.32) 30%,
    rgba(15, 60, 54, 0.42) 100%
  );
}

#heroPanel .inner {
  position: relative;
  z-index: 2;

  /* Content card sits comfortably away from edges */
  width: min(1120px, calc(100vw - 2*clamp(14px, 3.2vw, 28px)));
  margin: 0 auto;

  /* align content within the card height without breaking layout */
  padding-top: clamp(10px, 1.6vw, 18px);
}

/* Only fullscreen background is .bg (already exists) */
.bg{ z-index:-10; }

/* HERO: disable extra hero overlay layer just for hero panel (prevents “nepotrebni slojevi”) */
#heroPanel .heroBg{ display:none !important; }

/* 4 layers inside heroPanel:
   1) .bg (fullscreen)
   2) .heroVideoCard (video card)
   3) .heroGlassCard (emerald glass)
   4) .inner (content)
*/
#heroPanel{ position:relative; }

#heroPanel .heroCardStack{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-55%); /* slightly higher for nicer composition */
  width:min(1120px, calc(100vw - 32px));
  height:clamp(300px, 46vh, 560px);
  border-radius:28px;
  pointer-events:none;
  z-index:0;
}

#heroPanel .heroVideoCard{
  position:absolute;
  inset:0;
  border-radius:28px;
  overflow:hidden;
  z-index:0;
  box-shadow:0 26px 70px rgba(0,0,0,0.38);
}

#heroPanel .heroCardVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
}

#heroPanel .heroGlassCard{
  position:absolute;
  inset:0;
  border-radius:28px;
  z-index:1;

  -webkit-backdrop-filter: blur(34px) saturate(1.25);
  backdrop-filter: blur(34px) saturate(1.25);

  background: rgba(15, 60, 54, 0.42);
}

#heroPanel .inner{
  position:relative;
  z-index:2; /* content above glass */
  width:min(1100px, calc(100vw - 32px));
  margin:0 auto;
}

/* 1) POZADINA */
.bg {
  position: fixed;
  inset: 0;
  z-index: -10;
}

/* HERO PANEL */
#heroPanel {
  position: relative;
  min-height: 100vh;
}

/* CARD STACK */
#heroPanel .heroCardStack {
  position: absolute;
  left: 50%;
  top: 6vh;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 32px));
  height: 62vh;
  border-radius: 28px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* VIDEO */
#heroPanel .heroVideoCard {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  z-index: 0;
}
#heroPanel .heroCardVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* GLASS — SAMO DONJI DEO */
#heroPanel .heroGlassCard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;

  -webkit-backdrop-filter: blur(40px) saturate(1.3);
  backdrop-filter: blur(40px) saturate(1.3);
  background: rgba(14, 58, 52, 0.38);
}

/* CONTENT — PODIGNUT */
#heroPanel .inner {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100vw - 32px));
  margin: 0 auto;
  padding-top: 12vh;
  border: none !important;
  box-shadow: none !important;
}

/* NASLOV U CISTOM DELU */
#heroPanel h1,
#heroPanel .heroTitle {
  margin-top: 0;
}

/* GASIMO SVE STARE LINIJE */
#heroPanel::before,
#heroPanel::after,
#heroPanel .inner::before,
#heroPanel .inner::after,
#heroPanel h1::before,
#heroPanel h1::after {
  display: none !important;
  content: none !important;
}


/* === HERO CLEAN 4 LAYERS (V5) === */

/* 1) POZADINA (fullscreen) */
.bg {
  position: fixed;
  inset: 0;
  z-index: -10;
}

/* HERO PANEL */
#heroPanel {
  position: relative;
  min-height: 100vh;
}

/* HARD KILL: sve pseudo trake u hero zoni */
#heroPanel::before, #heroPanel::after,
#heroPanel .inner::before, #heroPanel .inner::after,
#heroPanel .heroTitle::before, #heroPanel .heroTitle::after,
#heroPanel h1::before, #heroPanel h1::after,
#heroPanel .heroMedia::before, #heroPanel .heroMedia::after,
#heroPanel .badge::before, #heroPanel .badge::after {
  content: none !important;
  display: none !important;
}

/* Neutralize any backgrounds that can look like “pseudo trake” */
#heroPanel .heroTitle, #heroPanel h1 {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* (ako original ima heroBg) drži ga skroz iza i bez efekata */
#heroPanel .heroBg {
  position: absolute;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  filter: none !important;
}

/* 2+3) VIDEO CARD ide do ivica sajta gore/dole/levo/desno (isti inset kao sa strana) */
#heroPanel .heroCardStack {
  position: absolute;
  inset: clamp(14px, 3vw, 28px);   /* ISTO gore/dole/levo/desno */
  border-radius: 28px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

#heroPanel .heroVideoCard {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#heroPanel .heroCardVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 3) GLASS samo DONJI DEO (ne prekriva naslov) */
#heroPanel .heroGlassCard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: 1;

  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;

  -webkit-backdrop-filter: blur(40px) saturate(1.3);
  backdrop-filter: blur(40px) saturate(1.3);
  background: rgba(14, 58, 52, 0.36);
}

/* 4) CONTENT podignut (da naslov ne “pliva” u glass) */
#heroPanel .inner {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100vw - 2*clamp(14px, 3vw, 28px)));
  margin: 0 auto;
  padding-top: 6vh;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* === TOPHUD OVERRIDE START === */
:root{ --hudCircle:38px; --hudExtra:3px; }

.topbar{
  left:auto !important;
  right:12px !important;
  top:12px !important;
  bottom:auto !important;
  width: calc(var(--hudCircle) + var(--hudExtra)) !important;
  height: calc(var(--hudCircle) + var(--hudExtra)) !important;
}

.topbarInner{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.topbar .brand{ display:none !important; }

.hamburger{
  width: var(--hudCircle) !important;
  height: var(--hudCircle) !important;
  margin:0 !important;
}
/* === TOPHUD OVERRIDE END === */

/* === TOPHUD BAR FIX START === */
/* kill full-width header bar + shrink to hamburger circle + 3px */
:root{ --hudCircle:38px; --hudExtra:3px; }

.tophud, .topHud, #topHud, .topbar{
  width: fit-content !important;
  max-width: none !important;
  height: fit-content !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tophud::before, .topHud::before, #topHud::before, .topbar::before,
.tophud::after,  .topHud::after,  #topHud::after,  .topbar::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.tophud, .topHud, #topHud, .topbar{
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  padding: 1.5px !important; /* ukupno +3px */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}

.topbarInner, .tophudInner, .topHudInner{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hamburger{
  width: var(--hudCircle) !important;
  height: var(--hudCircle) !important;
  margin: 0 !important;
}
/* === TOPHUD BAR FIX END === */

/* === HERO TOP STRIP FIX START === */
/* uklanja “zelenu gredu” tako sto skida veliki top-gap u HERO */
#heroPanel.panel{ padding-top: 24px !important; }
#heroPanel .inner{ padding-top: 0 !important; }

/* ako i dalje ostaje traka iz pseudo/overlay slojeva */
#heroPanel::before, #heroPanel::after{ display:none !important; content:none !important; }
/* === HERO TOP STRIP FIX END === */

/* === AUTO TOPBAR THIN OVERRIDE === */
.topbarInner{
  padding: 2px 14px !important;   /* ultra tanko */
  align-items: center !important;
}
/* dropdown menu ispod topbara */
.menu{
  top: 44px !important;
}
/* panel content da ne upada pod topbar */
.panel{
  padding-top: 64px !important;
}
/* brand da ne diže visinu (ako je vidljiv na nekim page-ovima) */
.brand{
  padding: 6px 10px !important;
}
/* === END AUTO TOPBAR THIN OVERRIDE === */



/* === AUTO HERO VIDEO OPTION A CSS === */
/* HERO video background layer */
#heroPanel {
  position: relative;
  overflow: hidden;
}

.heroVideoBg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroBgVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.heroVideoOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(3, 8, 7, 0.92) 0%,       /* skoro crno */
    rgba(0, 28, 22, 0.85) 10%,    /* tamni smaragd */
    rgba(0, 70, 60, 0.55) 24%,    /* smaragd */
    rgba(0, 150, 160, 0.28) 42%,  /* tirkiz */
    rgba(0, 150, 160, 0.00) 54%   /* fade-out */
  );
}

/* Sadržaj preko videa */
#heroPanel > *:not(.heroVideoBg) {
  position: relative;
  z-index: 1;
}

.heroSubtitle {
  margin-top: 6px;
  opacity: 0.9;
  font-size: 14px;
  letter-spacing: 0.6px;
}

/* Samo JEDAN CTA: sakrij sve posle prvog dugmeta u hero području */
#heroPanel .btnRow > *:not(:first-child),
#heroPanel .heroBtns > *:not(:first-child),
#heroPanel .heroButtons > *:not(:first-child) {
  display: none !important;
}
/* === END AUTO HERO VIDEO OPTION A CSS === */

/* === HERO OFFSET FINAL START === */
:root {
  --hero-offset-y: -100px;
}
#heroPanel .inner {
  transform: translateY(var(--hero-offset-y)) !important;
  transition: transform 0.18s ease !important;
}
/* === HERO OFFSET FINAL END === */

/* === HOMEPAGE CONTROLLER START === */
:root {
  --hero-offset-y: -100px;
}

#heroPanel .inner {
  transform: translateY(var(--hero-offset-y)) !important;
  transition: transform 0.18s ease !important;
}
/* === HOMEPAGE CONTROLLER END === */

/* === MENU UX FIX START === */
/* 1) centriraj dropdown panel (ne desno) */
.menuBox{ justify-content:center !important; }

/* 2) dupli tekst: sakrij subtitle (<small>) u meniju */
.menuPanel small{ display:none !important; }

/* 3) vizuelno centriraj stavke */
.menuPanel{ text-align:center !important; }
.menuPanel a{ justify-content:center !important; gap:10px !important; }
.menuPanel a span{ display:inline-block !important; text-align:center !important; }

/* 4) da klik/tap “pored” radi zatvaranje (menu treba da prima evente kad je open) */
.menu.open{ pointer-events:auto !important; }
/* === MENU UX FIX END === */

/* === LANG SWITCH CONTROLLER START === */
:root {
  --lang-d-left: 16px;
  --lang-d-top:  16px;
  --lang-d-z:    2147483000;

  --lang-m-left: 16px;
  --lang-m-top:  16px;
  --lang-m-z:    2147483000;
}

.langSwitch {
  position: fixed !important;
  left: var(--lang-d-left) !important;
  top:  var(--lang-d-top) !important;
  z-index: var(--lang-d-z) !important;
}

@media (max-width: 900px) {
  .langSwitch {
    left: var(--lang-m-left) !important;
    top:  var(--lang-m-top) !important;
    z-index: var(--lang-m-z) !important;
  }
}
/* === LANG SWITCH CONTROLLER END === */

/* === LANG SWITCH STYLE (AUTO) === */
.langSwitch{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px !important;
  line-height:1 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  cursor:pointer !important;
  user-select:none !important;
}
.langSwitch:hover{ transform: translateY(-1px); }
/* === END LANG SWITCH STYLE (AUTO) === */

/* === LANG SWITCH STYLE (AUTO / DE-EN) === */
.langSwitch{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;

  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  font-size:18px;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
.langSwitch:hover{ transform: translateY(-1px); }
/* === END LANG SWITCH STYLE === */

/* === LANG SWITCH VISUAL (AUTO DE/EN) === */
.langSwitch{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  cursor:pointer !important;
  user-select:none !important;
}
.langSwitch:hover{ transform: translateY(-1px); }
/* === END LANG SWITCH VISUAL (AUTO DE/EN) === */


/* === LANG SWITCH VISUAL (AUTO) === */
.langSwitch{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9999;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:700;
  letter-spacing:.05em;
  cursor:pointer;
}
.langSwitch:hover{transform:translateY(-1px)}
/* === END LANG SWITCH VISUAL === */

/* === NEXT PANEL FONT SIZES (AUTO) === */
:root {
  --fs_nextShowLine: 12px;
  --fs_nextShowCardTitle: 18px;
  --fs_nextShowCardSub: 13px;
  --fs_leftDisclaimer: 11px;
  --fs_rightCardTitle: 16px;
  --fs_tourTitle: 15px;
  --fs_tourSub: 12px;
  --fs_pressTitle: 15px;
  --fs_pressSub: 12px;
  --fs_donateTitle: 15px;
  --fs_donateSub: 12px;
  --fs_donateBtn: 13px;
  --fs_rightDisclaimer: 11px;
  --fs_stickyPrimary: 13px;
  --fs_stickyDonate: 13px;
  --fs_stickyNote: 11px;
}

#nextShowLine { font-size: var(--fs_nextShowLine) !important; }
#nextShowCardTitle { font-size: var(--fs_nextShowCardTitle) !important; }
#nextShowCardSub { font-size: var(--fs_nextShowCardSub) !important; }

#nextPanel .grid2 > div .disclaimer { font-size: var(--fs_leftDisclaimer) !important; }
#nextPanel .grid2 > .card > b { font-size: var(--fs_rightCardTitle) !important; }

#nextPanel .grid2 > .card .list .row:nth-of-type(1) .meta b { font-size: var(--fs_tourTitle) !important; }
#nextPanel .grid2 > .card .list .row:nth-of-type(1) .meta small { font-size: var(--fs_tourSub) !important; }

#nextPanel .grid2 > .card .list .row:nth-of-type(2) .meta b { font-size: var(--fs_pressTitle) !important; }
#nextPanel .grid2 > .card .list .row:nth-of-type(2) .meta small { font-size: var(--fs_pressSub) !important; }

#nextPanel .grid2 > .card .list .row:nth-of-type(3) .meta b { font-size: var(--fs_donateTitle) !important; }
#nextPanel .grid2 > .card .list .row:nth-of-type(3) .meta small { font-size: var(--fs_donateSub) !important; }
#nextPanel .grid2 > .card .list .row:nth-of-type(3) a.btn { font-size: var(--fs_donateBtn) !important; }

#nextPanel .grid2 > .card .disclaimer { font-size: var(--fs_rightDisclaimer) !important; }

footer.stickyCta .bar a.primary { font-size: var(--fs_stickyPrimary) !important; }
footer.stickyCta .bar a[data-donate] { font-size: var(--fs_stickyDonate) !important; }
footer.stickyCta .note { font-size: var(--fs_stickyNote) !important; }
/* === END NEXT PANEL FONT SIZES (AUTO) === */

/* --- auto-added by pit.py patch: heroMedia video sizing --- */
.heroMedia video,
.heroMedia .panelVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}


#tourPanel .heroMedia .panelVideo{
  transform: translate(var(--tourVideoX, 0px), var(--tourVideoY, 0px)) scale(var(--tourVideoScale, 1));
  transform-origin: center center;
}

/* video2_kontrol BEGIN */
#tourPanel{ --tourVideoScale: 1.55; --tourVideoX: 70px; --tourVideoY: 0px; }
/* video2_kontrol END */

/* video2_kontrol HOOK */
#tourPanel{
  --tourVideoScale: 1;
  --tourVideoX: 0px;
  --tourVideoY: 0px;
}
#tourPanel .heroMedia .panelVideo{
  /* zoom */
  transform: scale(var(--tourVideoScale, 1));
  transform-origin: center center;
  will-change: transform, object-position;

  /* PAN: radi kao kod <img> */
  object-position: calc(50% + var(--tourVideoX, 0px)) calc(50% + var(--tourVideoY, 0px));
}