:root{
  --bg1:#eea4c9;
  --bg2:#9784bb;

  --surface:rgba(245, 230, 230, 0.85);
  --surface-solid:#eddada;

  --text:#2b2230;
  --muted:#7a6b78;

  --accent:#c026d3;
  --accent2:#fb7185;

  --border:rgba(43,34,48,.10);
  --ring:rgba(192,38,211,.22);

  --shadow:0 20px 50px rgba(43,34,48,.12);
  --shadow-soft:0 10px 25px rgba(43,34,48,.08);

  --radius:18px;
}

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BACKGROUND SVUGDJE */
html, body{
  min-height:100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.65;

  background:
    radial-gradient(900px 500px at 15% 10%, rgba(192,38,211,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(251,113,133,.10), transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
}

/* ================================================= */
/* GLAVNI BLOK (POČETNA) */
/* ================================================= */

.glavni{
  max-width:900px;
  margin:80px auto;
  padding:50px 35px;
  text-align:center;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

#sporedni{
  margin-bottom:25px;
  text-align:center;
}

/* ================================================= */
/* GODINE – ISTI SURFACE STIL */
/* ================================================= */

.container,
main,
section,
article{
  max-width:900px;
  margin:80px auto;
  padding:50px 35px;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* unutarnje kartice ako postoje */
.box,
.card{
  background:var(--surface-solid);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  padding:25px;
  margin-top:20px;
  transition:.2s ease;
}

.box:hover,
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

/* ================================================= */
/* NASLOVI */
/* ================================================= */

h1{
  font-size:clamp(2.2rem, 2.2vw + 1.2rem, 3rem);
  font-weight:900;
  letter-spacing:-0.04em;
  margin-bottom:8px;

  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h2{
  font-size:clamp(1.05rem, .7vw + 1rem, 1.4rem);
  font-weight:600;
  color:var(--muted);
}

/* ================================================= */
/* BUTTONI I LINKOVI – radi i na 2. godini */
/* ================================================= */

/* 1) Ne diramo navigaciju */
nav a{
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: inherit;
  text-decoration: none;
  display: inline;
}

/* 2) SVE "tipke" u sadržaju: a (bez klase), a.link, button, input */
.glavni a,
.container a,
main a,
section a,
article a,
a.link,
button,
input[type="submit"],
input[type="button"]{
  display:block;
  width:min(420px, 95%);
  margin:12px auto;
  padding:13px 20px;

  border-radius:14px;
  border:none;

  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-weight:700;
  text-decoration:none;

  cursor:pointer;
  text-align:center;

  box-shadow:0 14px 30px rgba(192,38,211,.18);
  transition:.2s ease;
}

/* hover */
.glavni a:hover,
.container a:hover,
main a:hover,
section a:hover,
article a:hover,
a.link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(192,38,211,.28);
}

/* focus */
.glavni a:focus-visible,
.container a:focus-visible,
main a:focus-visible,
section a:focus-visible,
article a:focus-visible,
a.link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring), 0 18px 40px rgba(192,38,211,.18);
}

/* ================================================= */
/* FOOTER */
/* ================================================= */

footer{
  margin-top:30px;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media (max-width: 520px){
  .glavni,
  .container,
  main,
  section,
  article{
    margin:40px 14px;
    padding:32px 18px;
  }
}