/* Royal Haramain - Public (dominan putih seperti royalharamain.id) */
:root {
  --emerald: #046a38;
  --emerald-dark: #023d1f;
  --emerald-light: #089752;
  --gold: #d4af37;
  --gold-light: #f3e5ab;
  --cream: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --white: #ffffff;
  --border: #e5e7eb;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; line-height:1.6; }
h1,h2,h3,h4 { font-family:'Cinzel',serif; line-height:1.25; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { border:0; cursor:pointer; }
img { max-width:100%; }
.container { max-width:1180px; margin:0 auto; padding:0 22px; }
.gold-text { color:var(--gold); }

/* Header — putih seperti royalharamain.id */
header.site { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #e5e7eb; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:1180px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; color:var(--emerald-dark); }
.brand img { width:46px; height:46px; object-fit:contain; border-radius:8px; }
.brand strong { font-family:'Cinzel',serif; letter-spacing:.5px; font-size:17px; display:block; color:var(--emerald-dark); }
nav.main-nav { display:flex; gap:22px; align-items:center; }
nav.main-nav a { color:#374151; font-size:14px; font-weight:600; transition:color .15s; }
nav.main-nav a:hover { color:var(--emerald); }
.mobile-menu { display:none; background:none; color:var(--emerald-dark); font-size:26px; }

/* Buttons */
.gold-button, .gradient-button { padding:13px 24px; border-radius:50px; font-weight:700; font-size:14px; transition:transform .15s, box-shadow .15s; }
.gold-button { background:linear-gradient(135deg,#d4af37,#b8860b); color:#fff; box-shadow:0 6px 18px rgba(212,175,55,.35); }
.gradient-button { background:linear-gradient(135deg,var(--emerald-light),var(--emerald)); color:#fff; }
.gold-button:hover, .gradient-button:hover { transform:translateY(-2px); }

/* Hero */
.hero { position:relative; background:
  linear-gradient(rgba(2,36,18,.86),rgba(2,36,18,.78)),
  var(--hero-bg, url('https://images.unsplash.com/photo-1591604466107-ec97de577aff?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80')) center/cover no-repeat;
  color:#fff; }
.hero-grid { padding:70px 22px; }
.eyebrow { display:inline-block; padding:6px 14px; border-radius:30px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.hero h1 { font-size:56px; margin:20px 0 18px; line-height:1.12; }
.hero p.lead { font-size:18px; color:#dcebe3; max-width:640px; }
.hero-quote { margin:24px auto; padding:18px 24px; border-left:3px solid var(--gold); background:rgba(255,255,255,.06); border-radius:0 12px 12px 0; font-size:16px; font-style:italic; color:var(--gold-light); max-width:640px; text-align:left; }
.hero-quote cite { display:block; margin-top:8px; font-style:normal; font-size:13px; color:#9db5ac; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-actions .gold-button, .hero-actions .gradient-button { padding:15px 30px; font-size:16px; }
.stats { display:flex; gap:40px; margin-top:38px; }
.stats strong { display:block; font-size:34px; font-family:'Cinzel',serif; color:var(--gold); }
.stats span { font-size:13px; color:#9db5ac; }

/* Badges strip — putih */
.badges-strip { background:#fff; padding:16px 0; border-bottom:1px solid var(--border); }
.badges-strip .container { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }
.badges-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.badges-cta .gold-button { padding:12px 22px; }
.badge-item { padding:7px 16px; border-radius:30px; background:rgba(4,106,56,.08); color:var(--emerald-dark); font-size:12px; font-weight:700; letter-spacing:.5px; }

/* Sections */
section { padding:64px 0; }
.section-heading { text-align:center; max-width:640px; margin:0 auto 40px; }
.section-heading h2 { font-size:32px; color:var(--emerald-dark); margin:12px 0 10px; }
.section-heading p { color:var(--muted); }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px; }
.feature-icon { width:46px; height:46px; border-radius:12px; background:rgba(212,175,55,.18); color:var(--emerald); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.card h3 { font-size:18px; margin-bottom:8px; color:var(--emerald-dark); }
.card p { color:var(--muted); font-size:14px; }

/* Packages */
.packages { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.card.package { display:flex; flex-direction:column; justify-content:space-between; }
.card.package h3 { font-size:21px; margin:10px 0; }
.price { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; margin:14px 0; }
.price small { display:block; color:var(--muted); font-size:12px; }
.price strong { display:block; font-size:24px; color:var(--emerald); }
.package ul { list-style:none; margin-bottom:18px; }
.package ul li { padding:7px 0 7px 24px; position:relative; font-size:14px; color:#22352a; }
.package ul li::before { content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; }
.card.package .gradient-button { width:100%; }
.card.popular { border:2px solid var(--gold); position:relative; }
.popular-label { position:absolute; top:-14px; left:20px; background:linear-gradient(135deg,#d4af37,#b8860b); color:#fff; padding:5px 14px; border-radius:30px; font-size:11px; font-weight:800; letter-spacing:.6px; }

/* About */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about-grid img { border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.15); }
.about-list li { list-style:none; padding:8px 0 8px 28px; position:relative; color:#22352a; }
.about-list li::before { content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; }

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.testimonial { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px; }
.testimonial .stars { color:var(--gold); margin-bottom:12px; }
.testimonial p { font-style:italic; color:var(--text); font-size:14px; margin-bottom:16px; }
.testimonial .person { display:flex; align-items:center; gap:12px; }
.testimonial .person img { width:44px; height:44px; border-radius:50%; }
.testimonial .person strong { display:block; font-size:14px; }
.testimonial .person span { font-size:12px; color:var(--muted); }

/* News */
.news { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.news article { background:var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.news img { width:100%; height:170px; object-fit:cover; }
.news .news-body { padding:20px; }
.news .news-date { font-size:12px; color:var(--gold); font-weight:700; }
.news h3 { font-size:17px; margin:8px 0; }
.news p { font-size:14px; color:var(--muted); }

/* Offices */
.offices { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.office { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:22px; }
.office h3 { font-size:16px; color:var(--emerald-dark); margin-bottom:10px; }
.office p { font-size:13px; color:var(--muted); margin-bottom:6px; }
.office a { color:var(--emerald); font-weight:600; }

/* Gallery / Dokumentasi */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery-grid figure { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--border); background:#fff; }
.gallery-grid figure img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .3s; }
.gallery-grid figure:hover img { transform:scale(1.06); }
.gallery-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(transparent,rgba(1,20,11,.85)); color:#fff; font-size:12.5px; font-weight:600; }
.gallery-ig { text-align:center; margin-top:22px; }
.gallery-ig .ig-follow { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:30px; background:linear-gradient(135deg,#d4af37,#b8860b); color:#fff; font-size:14px; font-weight:700; }

/* Lightbox */
.lightbox[hidden] { display:none!important; }
.lightbox { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:20px; }
.lightbox-inner { max-width:90vw; max-height:86vh; text-align:center; }
.lightbox-inner img { max-width:100%; max-height:78vh; border-radius:10px; box-shadow:0 10px 50px rgba(0,0,0,.5); }
.lightbox-cap { color:#e6e6e6; margin-top:14px; font-size:14px; }
.lightbox-close { position:absolute; top:18px; right:22px; background:rgba(255,255,255,.15); color:#fff; border:0; width:42px; height:42px; border-radius:50%; font-size:20px; cursor:pointer; }
.lightbox-close:hover { background:rgba(255,255,255,.3); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0; width:52px; height:52px; border-radius:50%; font-size:30px; cursor:pointer; line-height:1; }
.lightbox-nav:hover { background:rgba(255,255,255,.3); }
.lightbox-nav.prev { left:20px; }
.lightbox-nav.next { right:20px; }

/* Contact — putih */
.contact-wrap { display:grid; grid-template-columns:1fr 1.2fr; gap:26px; align-items:start; }
.contact-info { background:#fff; color:var(--text); border:1px solid var(--border); border-radius:16px; padding:28px; }
.contact-info h3 { font-size:19px; margin-bottom:20px; color:var(--emerald-dark); }
.contact-info .ci { display:flex; gap:14px; margin-bottom:18px; }
.contact-info .ci i { color:var(--emerald); font-size:20px; margin-top:3px; width:22px; text-align:center; }
.contact-info .ci strong { display:block; font-size:14px; color:var(--emerald-dark); }
.contact-info .ci span { font-size:13px; color:var(--muted); }
.contact-info .gradient-button { margin-top:8px; }
.contact-form { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px; }
.contact-form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.contact-form textarea { min-height:110px; }

/* Form (di dalam modal booking) */
.form-card { background:#fff; color:var(--text); border-radius:18px; padding:30px; border:1px solid var(--border); }
.form-card h3 { color:var(--emerald-dark); margin-bottom:18px; }
.fm { margin-bottom:16px; }
.fm label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.fm input, .fm select, .fm textarea { width:100%; padding:11px 14px; border:1px solid #cfdfd4; border-radius:9px; font-size:14px; }
.fm input:focus, .fm select:focus, .fm textarea:focus { outline:none; border-color:var(--emerald); }
.form-msg { margin-top:12px; padding:11px 14px; border-radius:9px; font-size:14px; }
.form-msg.ok { background:#d1e7dd; color:#0f5132; }
.form-msg.err { background:#f8d7da; color:#842029; }

/* Popup booking: form di dalam modal */
.modal-card-lg { max-width:520px; max-height:92vh; overflow-y:auto; }
.modal-card-lg .modal-body { padding:26px; }
.modal-card-lg h3 { color:var(--emerald-dark); margin:6px 0 14px; }

/* Footer — gelap */
footer.site { background:var(--emerald-dark); color:#9db5ac; padding:44px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
footer.site h4 { color:#fff; font-size:15px; margin-bottom:14px; }
footer.site a { display:block; color:#9db5ac; font-size:13px; margin-bottom:8px; }
footer.site a:hover { color:var(--gold); }
footer.site .brand-text { color:#fff; font-family:'Cinzel',serif; margin-bottom:10px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:18px; text-align:center; font-size:12px; }

/* Modal (popup promo) */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.show { display:flex; }
.modal-card { background:#fff; border-radius:18px; max-width:440px; width:100%; overflow:hidden; position:relative; }
.modal-card img { width:100%; height:auto; display:block; }
.modal-card .modal-body { padding:24px; }
.modal-card h3 { color:var(--emerald-dark); margin-bottom:10px; }
.modal-card p { color:var(--muted); font-size:14px; margin-bottom:16px; }
.modal-close { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.5); color:#fff; width:30px; height:30px; border-radius:50%; }

/* Popup promo: tampilkan foto sesuai rasio aslinya (tanpa crop) — hanya berlaku untuk #promoModal.
   Kartu dibatasi tinggi viewport dan bisa di-scroll bila foto sangat tinggi.
   Tombol ✕ dibuat "sticky" agar tetap terlihat & bisa diklik saat konten di-scroll
   (margin-bottom negatif menjaga foto tetap menempel di tepi atas kartu, seperti tampilan aslinya). */
#promoModal .modal-card { max-height:90vh; overflow-y:auto; overflow-x:hidden; }
#promoModal .modal-card:has(img) .modal-close { position:sticky; right:auto; top:12px; display:block; width:30px; height:30px; margin:12px 12px -42px auto; z-index:5; }

/* Popup booking: kartu dibuat flex column, lalu .modal-body yang scroll sendiri.
   Ini mengalahkan .modal-card{overflow:hidden} (baris 186) tanpa mengubahnya, sehingga
   tinggi kartu tetap dibatasi 92vh (.modal-card-lg) tapi isi form tidak pernah terpotong.
   Tombol ✕ (absolute, relatif ke kartu) tetap terlihat & bisa diklik saat form di-scroll.
   Khusus #bookModal — aturan popup promo di atas tidak diubah. */
#bookModal .modal-card { display:flex; flex-direction:column; }
#bookModal .modal-card .modal-body { overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; }

/* responsive */
@media (max-width:900px) {
  nav.main-nav { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:14px 22px; gap:14px; border-bottom:1px solid var(--border); }
  nav.main-nav.open { display:flex; }
  .mobile-menu { display:block; }
  .about-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:32px; }
  .hero-grid { padding:12px 22px 40px; }
  .hero h1 { margin:10px 0 8px; }
  .hero p.lead { font-size:15px; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-actions .gold-button, .hero-actions .gradient-button { text-align:center; }
  .stats { gap:18px; flex-wrap:wrap; margin-top:16px; }
  .card.package { text-align:center; align-items:center; }
  .card.package h3 { font-size:19px; }
  .card.package .eyebrow { margin:0 auto; }
  .price strong { font-size:21px; white-space:nowrap; }
  .price small { display:inline-block; margin:0 2px; }
  .popular-label { left:50%; transform:translateX(-50%); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-wrap { grid-template-columns:1fr; }
  .contact-form .grid2 { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }

@media (max-width:600px) {
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .lightbox-nav.prev { left:8px; }
  .lightbox-nav.next { right:8px; }
}
}

/* Testimonials — band krem lembut agar beda dari section putih di sekitarnya */
.section-cream { background:#f8fbf9; }
.testimonial { box-shadow:0 6px 20px rgba(2,61,31,.06); }
.testimonial .stars { font-size:15px; letter-spacing:2px; }
.testimonial .person strong { color:var(--emerald-dark); }
.testimonial .person span { color:var(--muted); }
/* Slot foto jamaah: avatar bulat; monogram inisial tampil otomatis bila foto kosong/gagal dimuat */
.testimonial .person .avatar { position:relative; flex:0 0 64px; width:64px; height:64px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--emerald-light),var(--emerald)); box-shadow:0 6px 16px rgba(2,61,31,.18); }
.testimonial .person .avatar .avatar-mono { color:#fff; font-family:'Cinzel',serif; font-weight:700; font-size:24px; line-height:1; }
.testimonial .person .avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* FAQ — akordeon native <details>/<summary>, tanpa JS */
.faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details { background:var(--white); border:1px solid var(--border); border-radius:14px; transition:border-color .2s, box-shadow .2s; }
.faq details[open] { border-color:rgba(4,106,56,.35); box-shadow:0 10px 26px rgba(2,61,31,.07); }
.faq summary { list-style:none; cursor:pointer; position:relative; padding:18px 56px 18px 20px; font-family:'Cinzel',serif; font-weight:600; font-size:16px; color:var(--emerald-dark); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(4,106,56,.08); color:var(--emerald); font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700; line-height:1; transition:transform .25s, background .25s, color .25s; }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); background:var(--emerald); color:#fff; }
.faq .faq-a { padding:0 20px 20px; color:var(--muted); font-size:14px; }
.faq-cta { text-align:center; margin-top:28px; }

@media (max-width:600px) {
  .faq summary { font-size:15px; padding:15px 50px 15px 16px; }
  .faq .faq-a { padding:0 16px 16px; }
}