:root{
  --bg:#0b0f14;
  --card:#111826;
  --text:#e9eef6;
  --muted:#aab6c5;
  --border:rgba(255,255,255,.10);
  --accent:#7dc4ff;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --radius:16px;

  /* UX */
  --focus: 0 0 0 3px rgba(125,196,255,.35);

  /* FORM (krem/pastel) */
  --field-bg:#f6f1e7;
  --field-bg-focus:#fffaf0;
  --field-text:#121417;
  --field-border:#cfc6b8;
  --field-border-focus:#d8a24c;
  --field-placeholder:rgba(60,55,48,.55);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(125,196,255,.20), transparent 60%),
    radial-gradient(700px 450px at 90% 15%, rgba(140,255,210,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height: 1.5;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:12px;
}

/* Skip link (ako ga imas u HTML-u) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:12px;
  z-index:9999;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(17,24,38,.95);
  color:var(--text);
}
.skip-link:focus{ left:12px; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:18px;
}

.topbar{
  position: relative;
  z-index: 99999;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(17,24,38,.75);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  min-width:260px;
}

/* ===== Tekst kao "logo" (klik na pocetnu) ===== */
.brand-link{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:10px 16px 11px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--text) !important;
  text-decoration:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 20px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.brand-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.25);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  text-decoration:none !important;
}

.brand-title{
  display:block;
  font-family: Georgia, "Times New Roman", serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:.4px;
  line-height:1.05;
  color: var(--text) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.brand-subtitle{
  display:block;
  font-size:14px;
  color:#c7d3e2 !important;
  letter-spacing:.6px;
  opacity:.9;
}

/* ===== Navigacija ===== */
.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:14px;
  text-decoration:none;
  transition: background .15s ease;
}
.nav a:hover{
  background:rgba(255,255,255,.07);
  text-decoration:none;
}

/* ===== DROPDOWN (Portal) – padajuci meni ===== */
.nav .nav-drop{
  position:relative;
  display:inline-block;
}

.nav .nav-summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:14px;
  transition: background .15s ease;
}

.nav .nav-summary::-webkit-details-marker{ display:none; }
.nav .nav-summary::marker{ content:""; }

/* strelice preko escape kodova (ne zavisi od UTF-8) */
.nav .nav-summary::after{
  content:"\25BE"; /* ▾ */
  margin-left:8px;
  font-size:12px;
  opacity:.85;
}

.nav .nav-drop:hover .nav-summary{ background:rgba(255,255,255,.07); }
.nav .nav-drop[open] .nav-summary{
  background:rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.nav .nav-drop[open] .nav-summary::after{
  content:"\25B4"; /* ▴ */
}

/* panel */
.nav .nav-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;

  display:none;
  flex-direction:column;
  gap:8px;

  min-width:220px;
  max-width:340px;
  padding:10px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(17,24,38,.98);
  box-shadow:0 20px 60px rgba(0,0,0,.60);

  z-index:100000 !important; /* KLJUCNO */
}

.nav .nav-drop[open] .nav-panel{ display:flex; }

.nav .nav-panel a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}
.nav .nav-panel a:hover{
  background:rgba(125,196,255,.12);
  border-color: rgba(125,196,255,.22);
  text-decoration:none;
}

/* da dropdown ne bude odsecan */
.topbar{ overflow: visible; }
.nav{ overflow: visible; }

/* ===== Layout ===== */
.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(17,24,38,.70);
  box-shadow:var(--shadow);
  padding:16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.card h2{
  margin:0 0 12px 0;
  font-size:18px;
}

.card-wide{ grid-column:1 / -1; }

/* ===== Player ===== */
.playerbox{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
}

audio{ width:100%; margin:4px 0 10px 0; }

.player-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(125,196,255,.18);
  color:var(--text);
  text-decoration:none;
  transition: background .15s ease, transform .15s ease;
  cursor:pointer;
}
.btn:hover{
  background:rgba(125,196,255,.26);
  text-decoration:none;
  transform: translateY(-1px);
}

.hint{ color:var(--muted); font-size:13px; }

/* ===== Status / Now playing ===== */
.split{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:10px;
}

.mini{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.03);
}
.mini .k{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.mini .v{ font-size:14px; }
.now{ font-weight:600; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
}

/* ===== Recently played ===== */
.recent{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.recent-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.sub{ font-size:13px; }
.muted{ color:var(--muted); }

.recent-body{ padding:10px 12px; }
.recent-body img{ border-radius:10px; }
.recent-body *{ max-width:100%; }

/* ===== Tekst / linkovi ===== */
.text{
  margin:0;
  color:var(--text);
  line-height:1.55;
}

.links{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.linkchip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  transition: background .15s ease;
}
.linkchip:hover{
  background:rgba(255,255,255,.07);
  text-decoration:none;
}

/* ===== Baneri ===== */
.banners{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.banner{
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.banner img{
  display:block;
  width:100%;
  height:70px;
  object-fit:cover;
}

/* ===== Footer ===== */
.footer{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(17,24,38,.70);
}
.footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-links a{
  color:var(--muted);
  font-size:14px;
}
.footer-links a:hover{
  color:var(--text);
  text-decoration:none;
}

/* ===== CLS FIX: rezervisi prostor da ne skace ===== */
.now, .mini .v.now{ min-height:44px; }
.recent-body{ min-height:330px; }
.recent-body img{
  width:56px !important;
  height:56px !important;
  object-fit:cover;
  border-radius:10px;
}
.recent-body > div{ min-height:60px; }

/* ===== CONTACT FORM (upristojeno) ===== */
.contact-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  margin-top:12px;
}

.form-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px 0;
}

.field{ display:grid; gap:6px; }

.label{
  font-size:13px;
  color:var(--muted);
}

.input, .textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.textarea{ resize:vertical; min-height:160px; }

.input::placeholder, .textarea::placeholder{
  color: var(--field-placeholder);
}

.input:focus, .textarea:focus{
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px rgba(216,162,76,.28), inset 0 1px 0 rgba(255,255,255,.35);
  border-color: var(--field-border-focus);
  outline:none;
}

/* Autofill (Chrome) da ne pravi belo/zuto */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--field-text) !important;
  box-shadow: 0 0 0px 1000px var(--field-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.note{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.contact-box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
}

.contact-box .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.contact-box .big{
  font-size:16px;
  font-weight:600;
}

.hr{
  height:1px;
  background:var(--border);
  border:0;
  margin:14px 0;
}

.success{
  padding:12px 12px;
  border:1px solid rgba(140,255,210,.20);
  background:rgba(140,255,210,.08);
  border-radius:14px;
}

.error{
  padding:12px 12px;
  border:1px solid rgba(255,140,140,.25);
  background:rgba(255,140,140,.08);
  border-radius:14px;
}

/* ===== MOBILNI MENI – lep 2x2 raspored + responsive layout ===== */
@media (max-width: 600px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .brand{
    min-width:0;
    width:100%;
  }

  .brand-link{
    width:100%;
    padding:12px 14px;
  }

  .nav{
    width:100%;
    justify-content:flex-start;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }

  .nav a{
    text-align:center;
    padding:12px 10px;
    border-radius:14px;
  }

  /* dropdown na mobilnom: blok u gridu */
  .nav .nav-drop{ width:100%; }
  .nav .nav-summary{
    width:100%;
    text-align:center;
    padding:12px 10px;
    border-radius:14px;
  }

  /* dropdown panel na mobilnom kao blok */
  .nav .nav-panel{
    position:static;
    display:none;
    min-width:0;
    max-width:none;
    width:100%;
    margin-top:10px;
    box-shadow:none;
  }
  .nav .nav-drop[open] .nav-panel{ display:flex; }
  .nav .nav-panel a{
    text-align:center;
    white-space:normal;
  }

  .grid{ grid-template-columns: 1fr; }
  .banners{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1fr; }

  .brand-title{ font-size:24px; }

  .contact-grid{ grid-template-columns: 1fr; }
}

/* Manje animacija ako korisnik tako trazi */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}

/* Fallback za blur (stariji browseri) */
@supports not (backdrop-filter: blur(1px)){
  .topbar, .card{
    background: rgba(17,24,38,.92);
  }
}

/* ===== HARD FIX ZA SVE FORME (kontakt + muzicke zelje) ===== */
.form .field{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.form .label,
.form label{
  display:block !important;
  margin:0 !important;
}

.form input,
.form select,
.form textarea,
.input,
.textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;

  font-size:16px;
  line-height:1.25;
  min-height:44px;
}

.form textarea,
.textarea{
  min-height:160px;
}

.form select,
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  padding-right:36px !important;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(20,18,16,.70) 50%),
    linear-gradient(135deg, rgba(20,18,16,.70) 50%, transparent 50%),
    linear-gradient(180deg, var(--field-bg), var(--field-bg));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:6px 6px, 6px 6px, auto;
  background-repeat:no-repeat;
}

.form-actions{
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:12px !important;
}

.mini .form{
  gap:12px;
}

/* ===== DROPDOWN LAYER HARD FIX (da nikad ne ide ispod kartica) ===== */
main, .grid, .card, .card-wide, .recent, .playerbox{
  position: relative;
  z-index: 0;
}
.wrap{
  position: relative;
  z-index: 0;
}
.topbar{
  overflow: visible;
}
.nav{
  overflow: visible;
}
.nav .nav-panel{
  z-index: 100000 !important;
}
/* MOBILE PLAYER FIX */
@media (max-width:768px){

.playerbox div[style*="display:flex"]{
flex-direction:column !important;
align-items:center !important;
}

.playerbox img{
max-width:260px !important;
height:auto !important;
}

.playerbox button{
width:100%;
max-width:220px;
}

}