@import url('../event-kit.css');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Amiri&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* =========================================================================
   Aqiqah Garden
   Arah: kamar bayi cat air. Biru bedak, pita satin, hydrangea, keranjang rotan;
   doa diletakkan di jendela lengkung besi berlatar biru malam.
   Dial: ENERGY 1 / RHYTHM 2 / MOTION 2.
   Huruf: Cormorant Garamond (kapital ukir seperti kartu undangan cetak),
   Allura (nama anak, tulisan tangan lembut), Lora (isi), Amiri (basmalah).
   Motif identitas: bercak cat air biru (--aq-wash) di tiap halaman.
   Kontras: teks isi #3D4A5E di #F5F8FC 8.4:1; aksen #4A6FA5 untuk teks kecil 4.8:1;
   teks putih hanya di atas biru malam (--boho-dark).
   ========================================================================= */

.aq {
    --aq-wash: color-mix(in srgb, var(--secondary) 40%, transparent);
    --aq-line: color-mix(in srgb, var(--secondary) 75%, transparent);
    font-size: 15px;
}
.aq .ev-panel { background: var(--bg-color); }
.aq-page, .aq-gate {
    background:
        radial-gradient(55% 20% at 10% 6%, var(--aq-wash), transparent 72%),
        radial-gradient(45% 18% at 94% 40%, var(--aq-wash), transparent 72%),
        radial-gradient(60% 22% at 18% 92%, var(--aq-wash), transparent 72%),
        var(--bg-color);
    color: var(--text);
}
.aq .ev-title { font-family: var(--boho-font-heading), serif; font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--boho-dark); }
.aq .ev-btn { border-radius: 999px; padding-inline: 26px; background: var(--primary); }
.aq-flo { position: absolute; z-index: 1; pointer-events: none; }

/* ---------- Gerbang ----------
   Seperti referensi: gugus hydrangea besar di dua sudut atas mengapit pita,
   keranjang bayi berkanopi + kelinci di tengah, teks kapital ukir di bawahnya. */
.aq-gate { text-align: center; }
.aq-flo-tl, .aq-flo-tr { width: 74%; max-width: 360px; top: -6%; }
.aq-flo-tl { left: -28%; transform: rotate(-8deg); }
.aq-flo-tr { right: -28%; transform: scaleX(-1) rotate(-8deg); }
.aq-flo-bl, .aq-flo-br { width: 44%; max-width: 210px; bottom: -6%; }
.aq-flo-bl { left: -14%; transform: rotate(186deg); }
.aq-flo-br { right: -14%; transform: scaleX(-1) rotate(186deg); }
.aq-bow-top { position: absolute; z-index: 3; top: 1.5%; left: 50%; width: min(46%, 200px); margin-left: calc(min(46%, 200px) / -2); transform: rotate(-4deg); }
.aq-gate-copy { position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 17vh 26px 7vh; padding-top: max(120px, 17vh); }
.aq-nursery { position: relative; }
.aq-nursery .aq-bassinet { display: block; width: 100%; }
.aq-nursery .aq-bunny { position: absolute; width: 38%; left: -8%; bottom: -4%; }
.aq-nursery-gate { width: min(64cqw, 290px); margin-bottom: 18px; }
.aq-kicker, .aq-eyebrow { font-family: var(--boho-font-heading), serif; font-size: 19px; font-weight: 600; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; color: color-mix(in srgb, var(--boho-dark) 82%, var(--text)); }
.aq-kicker { margin-top: 6px !important; }
/* Nama muncul seperti ditulis tangan (kiri ke kanan). */
.ev-js:not(.boho-editor-mode) .aq-write { clip-path: inset(-20% 100% -20% 0); animation: aqWrite 2.2s cubic-bezier(.45,.05,.35,1) forwards; animation-delay: var(--d, .2s); }
.ev-js:not(.boho-editor-mode) .aq-hero .aq-write { animation-play-state: paused; }
.ev-js:not(.boho-editor-mode).is-opened .aq-hero .aq-write { animation-play-state: running; animation-delay: .9s; }
@keyframes aqWrite { to { clip-path: inset(-20% -4% -20% 0); } }
.aq .aq-name { margin-top: 6px !important; font-family: 'Allura', cursive; font-weight: 400; font-size: clamp(34px, 10cqw, 50px); line-height: 1.2; color: var(--boho-dark); overflow-wrap: anywhere; }
.aq-datestrip { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px !important; font-family: var(--boho-font-heading), serif; color: var(--primary); }
.aq-datestrip span { min-width: 92px; padding: 3px 0; border-block: 1px solid var(--aq-line); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.aq-datestrip strong { font-size: 46px; font-weight: 600; line-height: 1; color: var(--boho-dark); }
.aq-guest { margin: 16px 0 12px; font-size: 14px; }
.aq-guest-name { font-family: var(--boho-font-heading), serif; font-size: 23px; font-weight: 700; color: var(--boho-dark); }

/* ---------- Pembuka ---------- */
.aq-hero .ev-inner { padding-top: 26px; padding-bottom: 20px; }
.aq-nursery-hero { width: min(62cqw, 270px); margin: 0 auto 10px; }
.aq-sprig { width: 34%; max-width: 160px; top: 40px; opacity: .9; }
.aq-sprig-l { left: -14%; transform: rotate(-70deg); }
.aq-sprig-r { right: -14%; transform: scaleX(-1) rotate(-70deg); }
.aq-photo { width: min(56%, 220px); margin: 0 auto 22px; aspect-ratio: 4 / 5; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 1px var(--aq-line), 0 14px 30px rgba(40, 55, 85, .14); }
.aq-arabic { font-family: 'Amiri', serif; font-size: 27px; line-height: 1.8; color: var(--primary); }
.aq-salam { font-weight: 600; }
.aq-intro { max-width: 380px; margin: 10px auto 0 !important; white-space: pre-line; }
.aq .aq-fullname { margin-top: 18px !important; font-family: 'Allura', cursive; font-weight: 400; font-size: clamp(36px, 10.5cqw, 52px); line-height: 1.15; color: var(--boho-dark); overflow-wrap: anywhere; }
.aq-parents { margin-top: 4px !important; font-family: var(--boho-font-heading), serif; font-size: 19px; font-weight: 600; }
.aq-birth { margin-top: 4px !important; font-size: 14px; font-style: italic; }
.aq-date-edit { margin-top: 16px; }

/* ---------- Waktu & tempat ----------
   Menyambung dari pembuka seperti satu kartu: pita judul tipis lalu kotak
   dua kolom (tanggal | jam & tempat), bukan section berjudul besar. */
.aq-event-sec .ev-inner { padding-top: 8px; }
.aq-band { padding: 7px 12px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--secondary) 26%, #fff); font-family: var(--boho-font-heading), serif; font-size: 17px; font-weight: 700; color: var(--boho-dark); }
.aq-band + .aq-event { margin-top: 0; border-radius: 0 0 6px 6px; }
.aq-event { margin-top: 16px; padding: 16px 16px 18px; border: 1px solid color-mix(in srgb, var(--secondary) 34%, transparent); border-radius: 6px; background: rgba(255, 255, 255, .62); }
.aq .aq-event-title { font-family: var(--boho-font-heading), serif; font-weight: 700; font-size: 24px; color: var(--boho-dark); }
.aq-event-grid { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; margin-top: 14px; text-align: left; }
.aq-event-date { display: flex; flex-direction: column; align-items: center; padding-right: 14px; border-right: 1px solid var(--aq-line); font-family: var(--boho-font-heading), serif; color: var(--primary); }
.aq-event-date span { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.2; }
.aq-event-date strong { font-size: 48px; font-weight: 600; line-height: 1.05; color: var(--boho-dark); }
.aq-event-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.aq-event-info li { display: flex; gap: 8px; }
.aq-event-info svg { width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
.aq-btn-map { margin-top: 18px; }
.aq-countdown { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.aq .ev-count { width: 66px; height: 66px; display: flex; flex-direction: column; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--aq-line); }
.aq .ev-count strong { font-family: var(--boho-font-heading), serif; font-size: 24px; font-weight: 700; line-height: 1; color: var(--boho-dark); }
.aq .ev-count span { font-size: 12px; }
.aq-calendar { display: inline-block; margin-top: 14px; padding: 10px 6px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Doa di jendela lengkung ----------
   Pemandangan senja berkabut terlihat lewat jendela besi tempa. Tirai gelap
   >= 60% di atas langit paling terang (#D8DEE0) menjaga teks putih ~5.7:1. */
.aq-window {
    color: #fff;
    background:
        linear-gradient(180deg, rgba(24, 34, 52, .64), rgba(24, 34, 52, .6) 60%, rgba(18, 26, 40, .74)),
        radial-gradient(70% 18% at 30% 72%, #5E7468, transparent 70%),
        radial-gradient(80% 16% at 78% 76%, #6C8274, transparent 70%),
        linear-gradient(180deg, #B9C8D6 0%, #D8DEE0 40%, #A7B6B0 62%, #55675D 78%, #33413A 100%);
}
.aq-window-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #26324A; }
.aq-window .ev-inner { padding: 150px 40px 0; }
.aq-window-title { font-family: var(--boho-font-heading), serif; font-weight: 600; font-size: 22px; }
.aq-doa { margin-top: 14px !important; line-height: 1.85; white-space: pre-line; }
.aq-doa-source { margin-top: 12px !important; font-size: 14px; }
.aq-nursery-window { width: min(62cqw, 260px); margin: 30px auto 0; }
.aq-nursery-window .aq-bunny { left: auto; right: -12%; transform: scaleX(-1); }
.aq-flo-window { width: 58%; max-width: 260px; left: -12%; bottom: -8%; z-index: 3; transform: rotate(190deg); }

/* ---------- Galeri, kartu, penutup ---------- */
.aq-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.aq-gallery-item { aspect-ratio: 4 / 5; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 10px 22px rgba(40, 55, 85, .12); }
.aq-gallery-item:first-child, .aq-gallery-item:nth-child(even):last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.aq-card { padding: 32px 22px; border: 1px solid var(--aq-line); border-radius: 22px; background: rgba(255, 255, 255, .78); }
.aq-gift { margin-top: 18px; }
.aq .ev-gift-card { background: #fff; border: 1px solid var(--aq-line); }
.aq .ev-input { border-color: var(--aq-line); }
.aq-closing .ev-inner { padding-bottom: 20px; }
.aq-bow-small { width: 150px; margin: 0 auto 18px; }
.aq-closing-msg { white-space: pre-line; }
.aq-closing .aq-salam { margin-top: 16px !important; }
.aq-by { margin-top: 14px !important; font-size: 14px; }
.aq-sign { font-family: 'Allura', cursive; font-size: 38px; line-height: 1.2; color: var(--boho-dark); }
.aq-flo-closing { position: static; display: block; width: 58%; max-width: 220px; margin: 18px auto 0; }

@media (prefers-reduced-motion: reduce) {
    .ev-js .aq-write { clip-path: none !important; animation: none !important; }
}

/* ---------- Panel foto layar lebar ---------- */
.aq .ev-side-name { font-family: 'Allura', cursive; font-size: clamp(56px, 6vw, 84px); }