/* Milliy — to'q ko'k, oltin va anor ranglari, atlas/ikat motivlari */

:root {
  --bg: #16294d;
  --bg-soft: #1d3560;
  --ink: #f3ead7;
  --gold: #d9a441;
  --anor: #a4322f;
  --anor-light: #c85450;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Lora", serif;
  font-size: 1.05rem;
}

/* Ikat naqsh lentalari */
.ikat-band {
  height: 26px;
  background:
    linear-gradient(135deg, transparent 40%, var(--gold) 40%, var(--gold) 60%, transparent 60%),
    linear-gradient(45deg, transparent 40%, var(--anor) 40%, var(--anor) 60%, transparent 60%),
    var(--bg-soft);
  background-size: 26px 26px;
}
.ikat-band.top { border-bottom: 2px solid var(--gold); }
.ikat-band.bottom { border-top: 2px solid var(--gold); margin-top: -60px; position: relative; }

/* Overlay */
.invite-overlay { background: var(--bg); }
.overlay-pattern {
  width: 120px; height: 14px; margin-bottom: 22px;
  background:
    linear-gradient(135deg, transparent 40%, var(--gold) 40%, var(--gold) 60%, transparent 60%),
    linear-gradient(45deg, transparent 40%, var(--anor) 40%, var(--anor) 60%, transparent 60%);
  background-size: 14px 14px;
}
.overlay-kicker {
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem;
  color: var(--gold); margin-bottom: 14px;
}
.overlay-names {
  font-family: "Playfair Display", serif; font-weight: 500;
  font-size: clamp(1.9rem, 8vw, 2.8rem); color: var(--ink);
}
.overlay-names em { font-style: italic; color: var(--gold); font-size: 0.6em; }
.overlay-open-btn { background: var(--gold); color: #241a05; }

/* Hero */
.hero { text-align: center; padding-top: 54px; }
.suzani { display: flex; justify-content: center; margin-bottom: 20px; }
.suzani svg { animation: slow-spin 24s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.kicker { color: var(--gold); font-style: italic; font-size: 1rem; }
.names {
  font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(2rem, 8.5vw, 3.1rem); line-height: 1.25; margin: 14px 0 10px;
}
.names .amp { display: block; font-weight: 500; font-style: italic; font-size: 0.5em; color: var(--gold); }
.date-line { letter-spacing: 0.05em; opacity: 0.9; }

/* Matn */
.msg-card {
  background: var(--bg-soft); border: 1px solid rgba(217, 164, 65, 0.45);
  border-radius: 16px; padding: 30px 24px; position: relative;
}
.msg-card::before, .msg-card::after {
  content: "❖"; position: absolute; color: var(--gold); font-size: 0.9rem;
  left: 50%; transform: translateX(-50%);
}
.msg-card::before { top: -11px; background: var(--bg); padding: 0 10px; }
.msg-card::after { bottom: -11px; background: var(--bg); padding: 0 10px; }
.invite-text { text-align: center; font-style: italic; line-height: 1.9; }

/* Countdown */
.section-heading {
  font-family: "Playfair Display", serif; font-weight: 500;
  font-size: 1.3rem; color: var(--gold);
}
.cd-item { background: var(--bg-soft); border: 1px solid rgba(217, 164, 65, 0.45); }
.cd-item span { color: var(--gold); font-family: "Playfair Display", serif; }
.cd-item small { color: var(--ink); opacity: 0.75; }
.countdown-done { color: var(--gold); }

/* Manzil */
.venue-address { opacity: 0.8; }
.map-wrap { border: 1px solid rgba(217, 164, 65, 0.45); }
.btn-directions { background: var(--gold); color: #241a05; }
.contact-line a { color: var(--gold); }

/* Tabriklar */
.greet-form input, .greet-form textarea {
  background: var(--bg-soft); border-color: rgba(217, 164, 65, 0.4);
  color: var(--ink);
}
.greet-form input::placeholder, .greet-form textarea::placeholder { color: rgba(243, 234, 215, 0.5); }
.greet-form input:focus, .greet-form textarea:focus { border-color: var(--gold); }
.greet-form button { background: var(--anor); color: #fff; }
.greet-item { background: var(--bg-soft); border: 1px solid rgba(217, 164, 65, 0.25); }
.greet-item b { color: var(--gold); }

/* Musiqa */
.music-btn { background: var(--anor); color: #fff; }