/* Позивница — дизајн 3 „Романтична".
   Прашњава ружа и жалфија, меки облици, цветна гранчица као SVG орнамент.
   Без фотографија — портфолио се шаље јавно.
   Фонтови: Cormorant Garamond + Commissioner, оба проверена за ћирилицу (gotcha #54). */

:root {
  --papir: #fdf6f3;
  --papir-2: #f7ece8;
  --ruza: #c2766c;
  --ruza-tamna: #9a4f45;
  --zalfija: #6f8a6b;
  --zalfija-tamna: #4d6349;
  --zalfija-blago: #e8efe6;
  --ruza-blago: #fbe9e5;
  --mastilo: #4a3b39;
  --tiho: #8a7975;
  --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(--mastilo);
  font-family: var(--sans); font-weight: 300; line-height: 1.76;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.18; }

.uze { max-width: 880px; margin: 0 auto; padding: 0 26px; }
.uze-usko { max-width: 540px; margin: 0 auto; padding: 0 26px; }

section { padding: 96px 0; }

.nadred {
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ruza-tamna); margin: 0 0 22px; font-weight: 400;
}
.nadred.sred { text-align: center; }

.ornament { color: var(--zalfija); display: block; margin: 0 auto; }
.poziv .ornament, .podnozje .ornament { color: var(--ruza); }
.ornament.dole { transform: scaleY(-1); }
.ornament.sred-o { margin: 0 auto 20px; }

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

.naslovna {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 72px 26px; overflow: hidden; text-align: center;
  background:
    radial-gradient(760px 480px at 78% 8%, rgba(194,118,108,.22), transparent 66%),
    radial-gradient(680px 460px at 18% 92%, rgba(111,138,107,.20), transparent 66%),
    linear-gradient(170deg, #fdeeea 0%, var(--papir) 55%, #f2f0e9 100%);
}
/* два меко обојена круга уместо фотографије — дају дубину без иједног пиксела слике */
.krug {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(194,118,108,.28), transparent 66%);
  width: 640px; height: 640px; top: -190px; right: -200px;
}
.krug-2 {
  background: radial-gradient(circle, rgba(111,138,107,.26), transparent 66%);
  width: 560px; height: 560px; top: auto; right: auto; bottom: -180px; left: -170px;
}

.sadrzaj { position: relative; max-width: 620px; }

.imena { display: grid; gap: 2px; margin: 18px 0 30px; }
.ime {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.1rem, 11vw, 5.6rem); color: #43302e; letter-spacing: .01em;
}
.i {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--ruza); line-height: 1;
}

.datum {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 3vw, 1.45rem);
  color: var(--zalfija-tamna); margin: 0 0 6px;
}
.mesto {
  margin: 0 0 28px; font-size: .74rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--tiho);
}

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

.poziv { text-align: center; background: var(--ruza-blago); }
.veliki-kurziv {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.42rem, 3.8vw, 2.05rem); line-height: 1.56;
  color: var(--mastilo); margin: 0 auto 22px; max-width: 28ch;
}
.ispod { color: var(--tiho); margin: 0 auto 26px; max-width: 46ch; font-size: 1.02rem; }
.para {
  margin: 0; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ruza-tamna);
}

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

.brojcanik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 640px; margin: 0 auto; }
.latica {
  text-align: center; padding: 28px 8px;
  background: var(--zalfija-blago);
  border-radius: 50% 50% 46% 46% / 34% 34% 62% 62%;   /* меки, латичасти облик */
}
.cifra {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 5.6vw, 2.7rem); line-height: 1; color: var(--ruza-tamna);
  font-variant-numeric: lining-nums tabular-nums;
}
.jedinica {
  display: block; margin-top: 8px; font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tiho);
}

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

.zaglavlje { text-align: center; margin-bottom: 46px; }
.zaglavlje h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-top: 10px; }

.kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.kartica {
  background: var(--ruza-blago); border-radius: 20px; padding: 34px 28px; text-align: center;
}
.kartica:nth-child(2) { background: var(--zalfija-tamna); color: #fff; }
.kartica:nth-child(2) .sat { color: #fff; }
.kartica:nth-child(2) h3 { color: #fff; }
.kartica:nth-child(2) .opis { color: rgba(255,255,255,.92); }
.kartica .sat {
  font-family: var(--serif); font-size: 1.7rem; color: var(--ruza); margin: 0 0 8px;
  font-variant-numeric: lining-nums;
  font-variant-numeric: lining-nums tabular-nums;
}
.kartica h3 { font-size: 1.3rem; margin-bottom: 8px; }
.kartica .opis { margin: 0; color: var(--tiho); font-size: .94rem; }

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

.lokacije { background: var(--zalfija-blago); }
.dve { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.mesto-k {
  background: var(--papir); border-radius: 20px; padding: 36px 30px; text-align: center;
}
.mesto-k h3 { font-size: 1.6rem; margin-bottom: 6px; }
.kada {
  margin: 0 0 14px; font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--zalfija-tamna);
}
.mesto-k .opis { color: var(--tiho); font-size: .94rem; margin: 0 0 22px; }
.dugme-meko {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  background: var(--zalfija-tamna); color: #fff; cursor: pointer;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background .18s ease;
}
.dugme-meko:hover { background: #3c4e39; }

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

.prijava { text-align: center; background: var(--zalfija-tamna); color: #fff; }
.prijava .ornament { color: rgba(255,255,255,.55); }
.prijava h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 10px; color: #fff; }
.prijava .podnaslov { color: rgba(255,255,255,.74); margin: 0 0 34px; font-size: .98rem; }
.prijava .labela { color: rgba(255,255,255,.8); }
.prijava .labela .tiho { color: rgba(255,255,255,.55); }
.prijava .forma input,
.prijava .forma select,
.prijava .forma textarea { background: rgba(255,255,255,.94); color: var(--mastilo); }
.prijava .forma input:focus,
.prijava .forma select:focus,
.prijava .forma textarea:focus { border-color: #fff; background: #fff; }
.prijava .dugme-glavno { background: var(--ruza-tamna); }
.prijava .dugme-glavno:hover { background: #7f3f36; }
.prijava .hvala { background: rgba(255,255,255,.1); }
.prijava .hvala-naslov { color: #fff; }
.prijava .hvala-tiho { color: rgba(255,255,255,.7); }

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

.dugme-glavno {
  margin-top: 6px; padding: 16px 30px; border-radius: 999px; font: inherit;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ruza-tamna); color: #fff; border: none; cursor: pointer;
  transition: background .18s ease;
}
.dugme-glavno:hover { background: #85534e; }

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

.hvala { background: var(--papir-2); border-radius: 20px; padding: 40px 30px; }
.hvala-naslov { font-family: var(--serif); font-size: 2rem; color: var(--ruza-tamna); margin: 0 0 10px; }
.hvala-red { margin: 0 0 6px; }
.hvala-tiho { margin: 0; color: var(--tiho); font-size: .92rem; }

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

.podnozje { background: var(--ruza-blago); text-align: center; padding: 72px 26px 60px; }
.kurziv-veliki {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); color: var(--mastilo); margin: 16px 0 18px;
}
.potpis {
  margin: 0; font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tiho);
}

@media (max-width: 640px) {
  section { padding: 72px 0; }
  .brojcanik { grid-template-columns: repeat(2, 1fr); }
}

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