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

/* =========================================================================
   Pengajian Nur
   Arah: naskah Islami. Gerbang kubah bawang hijau tua berlis emas dengan
   lentera, lalu isi di lembar perkamen berbingkai ganda + ornamen sudut.
   Dial: ENERGY 2 / RHYTHM 2 / MOTION 2 (masuk bertahap di gerbang, reveal saat scroll).
   Huruf: Amiri (naskh, menyambung heading Latin dengan tradisi mushaf),
   Aref Ruqaa (kaligrafi basmalah), Lora (isi, tetap terbaca di 15px).
   Kontras: teks di atas hijau selalu krem; emas hanya untuk ornamen dan teks
   besar di atas hijau tua (>= 4.5:1), teks emas di perkamen digelapkan 45%.
   ========================================================================= */

.pj {
    --pj-cream: #FBF1DC;
    --pj-gold-ink: color-mix(in srgb, var(--secondary), #000 45%);
    --pj-gold-line: color-mix(in srgb, var(--secondary), #000 12%);
    --pj-paper: color-mix(in srgb, var(--bg-color), #fff 40%);
    --pj-arch-fill: color-mix(in srgb, var(--primary) 88%, #000);
    font-size: 15px;
}
.pj .ev-panel { background: var(--bg-color); }
.pj .pj-arabic { font-family: 'Aref Ruqaa', 'Amiri', serif; font-size: 28px; line-height: 1.6; color: var(--secondary); }
.pj .pj-arabic-ink { color: var(--text); }
/* Sub-judul tulisan tangan miring seperti "Link Google Maps" di referensi. */
.pj .ev-title { font-family: 'Parisienne', cursive; font-weight: 400; font-size: 34px; line-height: 1.25; color: var(--text); }
/* Tombol pil gelap berikon (referensi), tombol emas hanya di gerbang hijau. */
.pj .ev-btn { border-radius: 999px; background: #262019; color: #FBF1DC; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0; box-shadow: 0 4px 10px rgba(38, 32, 25, .25); }
.pj .pj-btn-gold { background: var(--secondary); color: var(--boho-dark); font-weight: 700; }
.pj-star { display: block; width: 58px; height: 16px; margin: 0 auto 14px; color: var(--text); }

/* ---------- Gerbang ---------- */
.pj-gate {
    background:
        radial-gradient(ellipse 80% 50% at 50% 42%, color-mix(in srgb, var(--primary), #fff 14%), transparent 72%),
        linear-gradient(180deg, var(--boho-dark), var(--primary) 50%, var(--boho-dark));
    color: var(--pj-cream);
    text-align: center;
}
.pj-lanterns { position: absolute; inset: 0 0 auto; height: 200px; z-index: 3; pointer-events: none; }
.pj-lantern { position: absolute; top: 0; width: 30px; color: var(--secondary); }
.pj-lantern svg { width: 100%; height: auto; display: block; }
.pj-lantern-l { left: 5%; }
.pj-lantern-r { right: 5%; width: 26px; transform: scaleY(1.25); transform-origin: top; }
.pj-lantern-glow { fill: color-mix(in srgb, var(--secondary), #fff 55%); }

.pj-arch { position: relative; z-index: 2; width: min(86%, 380px); margin: 0 auto; display: flex; flex-direction: column; }
.pj-gate .pj-arch { min-height: calc(100% - 40px); margin-top: 40px; }
.pj-dome { display: block; width: 100%; height: auto; color: var(--secondary); overflow: visible; }
.pj-dome-fill { fill: var(--pj-arch-fill); }
.pj-dome-band { fill: none; }
.pj-arch-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
    margin-top: -1px; padding: 0 12% 48px;
    background:
        linear-gradient(var(--secondary), var(--secondary)) 2.5% 0 / 2px 100% no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 6.875% 0 / 2px 100% no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 93.125% 0 / 2px 100% no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 97.5% 0 / 2px 100% no-repeat,
        linear-gradient(90deg, transparent 6.875%, var(--pj-arch-fill) 6.875% 93.125%, transparent 93.125%);
}
.pj-gate-copy { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: -64px; }
.pj-gate-eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.pj .pj-gate-title { font-family: var(--boho-font-heading), serif; font-weight: 700; font-size: clamp(30px, 9cqw, 42px); line-height: 1.15; color: var(--pj-cream); overflow-wrap: anywhere; }
.pj-gate-date { font-style: italic; }
.pj-gate-guest { margin-top: 10px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--secondary) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--secondary) 60%, transparent); width: 100%; font-size: 14px; }
.pj-guest-name { font-family: var(--boho-font-heading), serif; font-size: 22px; font-weight: 700; margin-top: 2px !important; }
.pj-gate .ev-btn { margin-top: 6px; }

/* ---------- Halaman perkamen & panel naskah ----------
   Kertas oranye muda dengan tekstur arabesque samar; panel = halaman kitab:
   garis ganda tinta cokelat, mahkota renda berlengkung di atas, sulur di sudut
   bawah, dan hasyiyah (tulisan Arab kecil) di margin kiri. */
.pj { --pj-ink: var(--text); --pj-ink-soft: color-mix(in srgb, var(--text) 55%, transparent); }
.pj-page {
    color: var(--text);
    background-color: var(--bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237A5A3A' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M60 10c20 20 20 30 0 50-20-20-20-30 0-50zM60 60c20 20 20 30 0 50-20-20-20-30 0-50zM10 60c20-20 30-20 50 0-20 20-30 20-50 0zM60 60c20-20 30-20 50 0-20 20-30 20-50 0z'/%3E%3Ccircle cx='60' cy='60' r='8'/%3E%3C/g%3E%3C/svg%3E");
}
.pj-page + .pj-page .ev-inner { padding-top: 8px; }
.pj-band {
    height: 26px; margin: 18px 22px 0; border-block: 1.5px solid var(--pj-ink-soft);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22'%3E%3Cg fill='none' stroke='%233E3226' stroke-opacity='.7' stroke-width='1.2'%3E%3Cpath d='M1 21C1 9 7 3 13 3s12 6 12 18'/%3E%3Cpath d='M6 21c0-8 3-12 7-12s7 4 7 12'/%3E%3Ccircle cx='13' cy='15' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center / 26px 22px repeat-x;
}
.pj-panel {
    position: relative; padding: 118px 28px 46px 40px;
    background: color-mix(in srgb, var(--bg-color), #fff 18%);
    color: var(--text);
}
/* Garis ganda sisi & bawah; sisi atas milik .pj-crown. */
.pj-panel::before { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--pj-ink-soft); border-top: 0; pointer-events: none; }
.pj-panel::after { content: ''; position: absolute; inset: 0 7px 7px; border: 1px solid var(--pj-ink-soft); border-top: 0; pointer-events: none; }
.pj-panel > * { position: relative; }
.pj-crown { position: absolute !important; top: 0; left: 0; width: 100%; height: auto; color: var(--pj-ink); opacity: .85; pointer-events: none; }
.pj-corner { position: absolute !important; width: 48px; height: 48px; color: var(--pj-ink-soft); pointer-events: none; }
.pj-corner-bl { bottom: 2px; left: 2px; }
.pj-corner-br { bottom: 2px; right: 2px; transform: scaleX(-1); }
.pj-hasyiyah { position: absolute !important; left: 11px; top: 26%; bottom: 60px; width: 22px; overflow: hidden; margin: 0 !important; font-family: 'Amiri', serif; font-size: 7px; line-height: 1.5; color: var(--pj-ink-soft); text-align: justify; pointer-events: none; }
.pj-divider { width: 60%; height: 12px; margin: 22px auto 16px !important; background: linear-gradient(var(--pj-ink-soft), var(--pj-ink-soft)) center / 100% 1px no-repeat, radial-gradient(circle, var(--pj-ink) 3px, transparent 3.5px) center / 12px 12px no-repeat; }

.pj-salam { margin-top: 18px !important; font-weight: 600; }
.pj-intro { margin: 10px auto 0 !important; max-width: 360px; white-space: pre-line; }
/* Judul acara tebal bergradasi emas tua (referensi "Pengajian Umum"); titik
   paling terang #8A6424 tetap 3.8:1 di kertas (diukur), cukup untuk teks besar. */
.pj .pj-title {
    margin-top: 22px !important; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(32px, 9.5cqw, 44px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere;
    color: #7A5520; background: linear-gradient(180deg, #6E4A1A 0%, #8A6424 45%, #5E3F14 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}
.pj-topic { margin-top: 10px !important; font-style: italic; font-size: 17px; color: var(--pj-gold-ink); }
.pj-photo { width: 62%; max-width: 230px; aspect-ratio: 3 / 4; margin: 24px auto 0; border-radius: 999px 999px 6px 6px; border: 2px solid var(--pj-gold-line); outline: 1px solid var(--pj-gold-line); outline-offset: 5px; }
.pj-with { margin-top: 22px !important; font-style: italic; }
/* Pita nama penceramah: gradasi cokelat memudar di kedua ujung, huruf putih tebal. */
.pj-ribbon {
    display: block; margin: 8px -28px 0 -40px !important; padding: 10px 24px;
    background: linear-gradient(90deg, transparent, #7A5A40 18%, #5A3F2A 50%, #7A5A40 82%, transparent);
    color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
}
.pj-host { margin-top: 14px !important; font-size: 14px; }
.pj-date { margin: 0 0 14px !important; font-family: var(--boho-font-heading), serif; font-size: 20px; font-weight: 700; color: var(--primary); }

/* ---------- Ayat & penutup (hijau) ---------- */
.pj-green { background: radial-gradient(ellipse 90% 60% at 50% 50%, color-mix(in srgb, var(--primary), #fff 10%), transparent 75%), var(--primary); color: var(--pj-cream); }
.pj-green .pj-star { color: var(--secondary); }
.pj-quote-text { font-family: var(--boho-font-heading), serif; font-style: italic; font-size: 20px; line-height: 1.6; white-space: pre-line; }
.pj-quote-source { margin-top: 14px !important; font-size: 14px; letter-spacing: .06em; }
.pj-closing .ev-inner { padding: 56px 24px; }
.pj-arch-closing { width: min(100%, 380px); }
.pj-arch-closing .pj-arch-body { padding: 0 13% 44px; }
.pj-arch-closing .pj-arch-body > :first-child { margin-top: -70px; }
.pj-closing-msg { white-space: pre-line; }
.pj-closing-salam { font-style: italic; }
.pj-closing-by { font-size: 14px; }
.pj .pj-closing-name { font-family: var(--boho-font-heading), serif; font-size: 24px; font-weight: 700; margin-top: -8px !important; }

/* ---------- Waktu & tempat ---------- */
.pj-subtle { margin: 8px 0 22px !important; font-style: italic; }
.pj-event-card { margin-top: 18px; }
.pj-event-card:first-of-type { margin-top: 0; }
.pj .pj-event-title { font-family: var(--boho-font-heading), serif; font-weight: 700; font-size: 25px; color: var(--primary); }
.pj-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 14px; border-block: 1px solid var(--pj-gold-line); }
.pj-facts > div { padding: 12px 8px; }
.pj-facts > div + div { border-left: 1px solid var(--pj-gold-line); }
.pj-facts > .pj-facts-wide { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--pj-gold-line); }
.pj-facts > .pj-facts-wide:first-child { border-top: 0; }
.pj-facts dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pj-gold-ink); }
.pj-facts dd { margin: 4px 0 0; font-weight: 600; line-height: 1.4; }
.pj-address { font-size: 14px; }
.pj-btn-map { margin-top: 16px; }
.pj-count-label { margin-top: 34px !important; font-style: italic; }
.pj-countdown { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.pj-count-label { font-family: 'Parisienne', cursive; font-style: normal !important; font-size: 28px; }
.pj .ev-count { width: 60px; padding: 8px 0 6px; border-radius: 6px; background: #7A5A40; color: #fff; }
.pj .ev-count strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2; color: #fff; }
.pj .ev-count span { font-size: 12px; }

/* ---------- Galeri: bingkai mihrab ---------- */
.pj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pj-gallery-item { aspect-ratio: 3 / 4; border-radius: 999px 999px 4px 4px; border: 2px solid var(--pj-gold-line); }
.pj-gallery-item:nth-child(odd):last-child { grid-column: 1 / -1; width: 50%; justify-self: center; }

/* ---------- Komponen bersama dalam warna perkamen ---------- */
.pj .ev-gift-card { background: var(--bg-color); border: 1px solid var(--pj-gold-line); border-radius: 4px; }
.pj .ev-comment { background: var(--bg-color); border-radius: 4px; }
.pj .ev-input { border-color: var(--pj-gold-line); border-radius: 4px; }
.pj-gift { margin-top: 18px; }

/* ---------- Panel foto layar lebar ---------- */
.pj .ev-side { background: radial-gradient(ellipse 70% 50% at 50% 50%, color-mix(in srgb, var(--primary), #fff 12%), transparent 70%), var(--boho-dark); }
.pj .ev-side-name { font-weight: 700; }