/* Позивница — дизајн 2 „Модерна".
   Светло, минимално, асиметрично. Типографија носи све; ниједна фотографија.
   Фонтови: Commissioner (носилац) + Cormorant Garamond (имена) — оба проверена
   за ћирилицу (gotcha #54). */

:root {
  --papir: #fbfaf8;
  --papir-2: #f3f1ed;
  --mastilo: #14161a;
  --tekst: #33383f;
  --tiho: #7c848e;
  --linija: #ddE3e2;
  --akcenat: #0f5c5e;        /* дубока петролеј — потпис овог дизајна */
  --akcenat-tamni: #0a4547;
  --akcenat-blago: #e8f0ef;  /* иста боја разблажена, за подлоге */
  --bronza: #8a7a5c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--papir); color: var(--tekst);
  font-family: var(--sans); font-weight: 300; line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.14; color: var(--mastilo); }

.uze { max-width: 940px; margin: 0 auto; padding: 0 28px; }
.uze-usko { max-width: 560px; margin: 0 auto; padding: 0 28px; }

section { padding: 104px 0; }

.oznaka {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--akcenat); margin: 0 0 26px; font-weight: 400;
}

/* ── насловна ───────────────────────────────────────────────────────────── */

.naslovna { min-height: 100svh; display: grid; align-items: center; padding: 72px 0; }
.mreza {
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}

.imena { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 30px; }
.ime {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 8vw, 5.4rem); letter-spacing: -.01em;
}
.spona {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--akcenat); margin: 2px 0 2px 4px;
}

.linija { width: 68px; height: 1px; background: var(--mastilo); margin-bottom: 30px; }

.podaci { display: grid; gap: 18px; margin: 0 0 38px; }
.podaci dt {
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tiho); margin-bottom: 3px;
}
.podaci dd { margin: 0; font-size: 1.04rem; color: var(--mastilo); }

.dugme-linija {
  display: inline-block; padding: 15px 30px;
  border: 1px solid var(--akcenat); color: var(--akcenat); text-decoration: none;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.dugme-linija:hover { background: var(--akcenat); color: #fff; }

/* десна страна: датум као графички елемент, замена за фотографију */
.desno { display: grid; place-items: center; }
.veliki-datum {
  display: grid; justify-items: center; gap: 2px;
  padding: 60px 48px; border: none; background: var(--akcenat); color: #fff;
}
.veliki-datum .dan {
  font-family: var(--serif); font-size: clamp(5rem, 13vw, 9rem); line-height: .9;
  color: #fff; font-weight: 300;
  font-variant-numeric: lining-nums;   /* без овога „12" изгледа као „I2" */
}
.veliki-datum .mesec {
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin-top: 14px;
}
.veliki-datum .godina {
  font-size: .72rem; letter-spacing: .28em; color: rgba(255,255,255,.6); margin-top: 4px;
}

@media (max-width: 860px) {
  .mreza { grid-template-columns: 1fr; gap: 44px; }
  .desno { justify-items: start; }
  .veliki-datum { padding: 40px 34px; }
}

/* ── позив ──────────────────────────────────────────────────────────────── */

.poziv { background: var(--akcenat-blago); }
.veliki-tekst {
  font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.5;
  color: var(--mastilo); margin: 0 0 26px; max-width: 26ch;
}
.potpis-para {
  margin: 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tiho);
}

/* ── одбројавање ────────────────────────────────────────────────────────── */

.odbrojavanje { background: var(--akcenat); color: #fff; padding: 76px 0; }
.brojcanik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.jedan { text-align: center; padding: 0 8px; border-right: 1px solid rgba(255,255,255,.12); }
.jedan:last-child { border-right: none; }
.cifra {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.jedinica {
  display: block; margin-top: 10px; font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.62);
}

/* ── програм ────────────────────────────────────────────────────────────── */

.redovi { border-top: 1px solid var(--linija); }
.red {
  display: grid; grid-template-columns: 130px 1fr; gap: 24px;
  padding: 30px 0; border-bottom: 1px solid var(--linija); align-items: baseline;
}
.sat {
  font-family: var(--serif); font-size: 2rem; color: var(--akcenat); font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
.opis-red h3 { font-size: 1.28rem; margin-bottom: 4px; }
.opis-red p { margin: 0; color: var(--tiho); font-size: .96rem; }

@media (max-width: 600px) {
  .red { grid-template-columns: 1fr; gap: 6px; }
}

/* ── локације ───────────────────────────────────────────────────────────── */

.lokacije { background: var(--papir-2); }
.dve { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--linija); }
.lokacija { background: var(--papir); padding: 40px 34px; }
.lokacija:nth-child(2) { background: var(--akcenat); color: rgba(255,255,255,.8); }
.lokacija:nth-child(2) h3 { color: #fff; }
.lokacija:nth-child(2) .kada { color: rgba(255,255,255,.75); }
.lokacija:nth-child(2) .opis { color: rgba(255,255,255,.72); }
.lokacija:nth-child(2) .veza { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.lokacija h3 { font-family: var(--serif); font-size: 1.85rem; font-weight: 300; margin-bottom: 8px; }
.kada {
  margin: 0 0 16px; font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--akcenat);
}
.lokacija .opis { color: var(--tiho); font-size: .96rem; margin: 0 0 22px; }
.veza {
  font-size: .78rem; letter-spacing: .1em; color: var(--mastilo);
  border-bottom: 1px solid var(--mastilo); padding-bottom: 3px; cursor: pointer;
}

/* ── пријава ────────────────────────────────────────────────────────────── */

.prijava h2 { font-family: var(--serif); font-size: clamp(2rem, 5.4vw, 3rem); font-weight: 300; margin-bottom: 10px; }
.podnaslov { color: var(--tiho); margin: 0 0 36px; font-size: .98rem; }

.forma { display: grid; gap: 20px; }
.mamac { position: absolute; left: -9999px; }
.labela {
  display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tiho); margin-bottom: 8px;
}
.labela .tiho { letter-spacing: .04em; text-transform: none; }
.forma input, .forma select, .forma textarea {
  width: 100%; padding: 0 0 12px; font: inherit; font-size: 1.02rem;
  background: transparent; color: var(--mastilo);
  border: none; border-bottom: 1px solid var(--linija); border-radius: 0;
}
.forma input::placeholder, .forma textarea::placeholder { color: #b9bec5; }
.forma input:focus, .forma select:focus, .forma textarea:focus {
  outline: none; border-bottom-color: var(--mastilo);
}
.forma select { appearance: none; }
.forma textarea { resize: vertical; }

.dugme-puno {
  margin-top: 10px; padding: 17px 30px; font: inherit;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  background: var(--akcenat); color: #fff; border: none; cursor: pointer;
  transition: background .18s ease;
}
.dugme-puno:hover { background: var(--akcenat-tamni); }

.greska { color: #b04242; font-size: .88rem; margin: 0; }
.greska[hidden], .hvala[hidden] { display: none; }

.hvala { border: 1px solid var(--linija); padding: 40px 32px; background: var(--papir-2); }
.hvala-naslov { font-family: var(--serif); font-size: 2rem; font-weight: 300; color: var(--mastilo); margin: 0 0 10px; }
.hvala-red { margin: 0 0 6px; }
.hvala-tiho { margin: 0; color: var(--tiho); font-size: .92rem; }

/* ── подножје ───────────────────────────────────────────────────────────── */

.podnozje { background: var(--akcenat-blago); padding: 80px 0 64px; text-align: center; }
.veliki-potpis {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--mastilo); margin: 0 0 14px;
}
.potpis-datum {
  margin: 0; font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tiho);
}

@media (max-width: 640px) {
  section { padding: 74px 0; }
  .brojcanik { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .jedan:nth-child(2) { border-right: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }