/* ============================================
   haziman.com/kahwin — Wedding Page CSS
   Palette: Warm cream, blush, gold
   Font: Cormorant Garamond (display) + Inter
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --kw-bg:        #faf6f0;
    --kw-bg-dark:   #f0e8dc;
    --kw-bg-doa:    #2d2018;
    --kw-text:      #2d2018;
    --kw-muted:     #7a6555;
    --kw-faint:     #b8a898;
    --kw-gold:      #b8954a;
    --kw-gold-lt:   #d4b070;
    --kw-border:    rgba(184,149,74,0.2);
    --kw-font-d:    'Cormorant Garamond', Georgia, serif;
    --kw-font-b:    'Inter', system-ui, sans-serif;
    --kw-max-w:     860px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--kw-font-b); background: var(--kw-bg); color: var(--kw-text); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }

.kw-container { max-width: var(--kw-max-w); margin: 0 auto; padding: 0 24px; }

/* ---- HERO ---- */
.kw-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    background: linear-gradient(180deg, #faf6f0 0%, #f0e8dc 100%);
    position: relative;
}
.kw-hero__bismillah { font-size: 26px; color: var(--kw-gold); margin-bottom: 48px; letter-spacing: 0.04em; }
.kw-hero__names { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; }
.kw-hero__names span { font-family: var(--kw-font-d); font-size: clamp(52px, 10vw, 96px); font-weight: 600; letter-spacing: -0.02em; color: var(--kw-text); line-height: 1; }
.kw-hero__and { font-family: var(--kw-font-d); font-size: clamp(36px, 6vw, 60px); font-style: italic; color: var(--kw-gold); }
.kw-hero__full { font-family: var(--kw-font-b); font-size: 16px; color: var(--kw-muted); margin-top: 28px; letter-spacing: 0.02em; }
.kw-hero__amp { font-family: var(--kw-font-d); font-size: 20px; font-style: italic; color: var(--kw-faint); margin: 6px 0; }
.kw-hero__date { font-family: var(--kw-font-d); font-size: 22px; font-style: italic; color: var(--kw-gold); margin-top: 28px; letter-spacing: 0.04em; }
.kw-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 20px; color: var(--kw-faint); animation: kw-bounce 2s infinite; text-decoration: none; }
@keyframes kw-bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ---- SECTIONS ---- */
.kw-section { padding: 80px 0; }
.kw-section--events { background: var(--kw-bg-dark); }
.kw-section--doa { background: var(--kw-bg-doa); }
.kw-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kw-gold); text-align: center; margin-bottom: 12px; }
.kw-section-title { font-family: var(--kw-font-d); font-size: clamp(32px, 5vw, 52px); font-weight: 600; text-align: center; letter-spacing: -0.01em; margin-bottom: 48px; }

/* ---- COUNTDOWN ---- */
.kw-countdown { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0 12px; }
.kw-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 80px; }
.kw-cd-unit span { font-family: var(--kw-font-d); font-size: clamp(52px, 8vw, 80px); font-weight: 700; color: var(--kw-text); line-height: 1; }
.kw-cd-unit label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kw-muted); }
.kw-cd-sep { font-family: var(--kw-font-d); font-size: 52px; color: var(--kw-faint); line-height: 1; padding-bottom: 28px; }
.kw-countdown__sub { text-align: center; font-size: 14px; color: var(--kw-muted); font-style: italic; }

/* ---- EVENTS ---- */
.kw-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kw-event-card { padding: 32px 28px; background: var(--kw-bg); border: 1px solid var(--kw-border); border-radius: 12px; text-align: center; }
.kw-event-card--featured { border-color: var(--kw-gold); background: linear-gradient(135deg, rgba(184,149,74,0.06) 0%, var(--kw-bg) 100%); }
.kw-event-card__num { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kw-gold); margin-bottom: 12px; }
.kw-event-card h3 { font-family: var(--kw-font-d); font-size: 32px; font-weight: 600; margin-bottom: 12px; }
.kw-event-date { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.kw-event-venue, .kw-event-dresscode { font-size: 13px; color: var(--kw-muted); margin-bottom: 4px; }

/* ---- GALLERY ---- */
.kw-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 240px 240px; gap: 12px; margin-bottom: 16px; }
.kw-gallery__item { border-radius: 10px; overflow: hidden; }
.kw-gallery__item--tall { grid-row: span 2; }
.kw-gallery__item--wide { grid-column: span 2; }
.kw-gallery__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #e8ddd0 0%, #d8cdc0 100%); }
.kw-gallery__note { text-align: center; font-size: 13px; color: var(--kw-faint); font-style: italic; }

/* ---- DOA ---- */
.kw-doa { text-align: center; padding: 40px 0; }
.kw-doa__ornament { font-size: 20px; color: var(--kw-gold); margin: 20px 0; }
.kw-doa__arabic { font-size: 26px; color: #e8c87a; letter-spacing: 0.04em; margin-bottom: 32px; line-height: 1.8; }
.kw-doa__text { font-family: var(--kw-font-d); font-size: 22px; font-style: italic; font-weight: 400; color: #e8ddd0; line-height: 1.7; max-width: 680px; margin: 0 auto 28px; }
.kw-doa__names { font-family: var(--kw-font-d); font-size: 28px; font-weight: 600; color: var(--kw-gold-lt); margin-bottom: 20px; }

/* ---- FOOTER ---- */
.kw-footer { padding: 32px 24px; text-align: center; background: var(--kw-bg-dark); border-top: 1px solid var(--kw-border); }
.kw-footer p { font-size: 13px; color: var(--kw-muted); margin-bottom: 8px; }
.kw-footer__back { font-size: 13px; color: var(--kw-gold); transition: color 0.2s; }
.kw-footer__back:hover { color: var(--kw-text); }

/* ---- RESPONSIVE ---- */
@media (max-width: 700px) {
    .kw-events-grid { grid-template-columns: 1fr; }
    .kw-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .kw-gallery__item--tall, .kw-gallery__item--wide { grid-row: unset; grid-column: unset; }
    .kw-cd-unit { min-width: 60px; }
    .kw-hero__names span { font-size: clamp(40px, 12vw, 72px); }
}