/* =========================================================
   SAI — LP Jasa Funnel Umroh
   Tema: elegant, mewah — charcoal + gold + emerald
   Font: Poppins (single family, hierarki lewat weight & size)
   ========================================================= */
:root{
  --ink:#12130F;
  --panel:#1B1C16;
  --panel-2:#22241C;
  --gold:#C9A227;
  --gold-light:#E6C767;
  --emerald:#3A5A48;
  --emerald-light:#5C8A70;
  --cream:#F5F1E6;
  --muted:#B8B2A0;
  --line:rgba(245,241,230,0.12);
  --danger:#B4552F;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  line-height:1.25;
  color:var(--cream);
  letter-spacing:-0.01em;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
p{max-width:62ch;}

/* ---------- Eyebrow / label utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--gold-light); margin-bottom:18px; font-weight:600;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--gold);}

/* ---------- Geometric divider (signature element) ---------- */
.geo-divider{
  height:34px; width:100%;
  background-repeat:repeat-x;
  background-position:center;
  background-size:34px 34px;
  opacity:0.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1'%3E%3Cpath d='M17 1 L33 17 L17 33 L1 17 Z'/%3E%3Cpath d='M17 9 L25 17 L17 25 L9 17 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(18,19,15,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
.logo{font-family:'Poppins', sans-serif; font-size:26px; font-weight:700; letter-spacing:0.01em;}
.logo span{color:var(--gold);}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold-light); padding:11px 24px;
  border-radius:2px; font-size:14.5px; font-weight:500; letter-spacing:0.02em;
  transition:all 0.2s ease;
}
.nav-cta:hover{background:var(--gold); color:var(--ink);}

/* ---------- HERO ---------- */
.hero{padding:100px 0 60px; text-align:center; position:relative;}
.hero h1{
  font-size:clamp(32px,5.4vw,56px);
  max-width:840px; margin:0 auto 24px;
}
.hero h1 em{font-style:normal; color:var(--gold-light);}
.hero p.lead{
  font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:600px; margin:0 auto 36px;
}
.btn-gold{
  background:var(--gold); color:var(--ink); padding:17px 38px;
  border-radius:2px; font-weight:600; font-size:16px; letter-spacing:0.02em;
  display:inline-block; border:1px solid var(--gold);
  transition:transform 0.15s ease;
}
.btn-gold:hover{transform:translateY(-2px);}
.btn-outline{
  border:1px solid var(--line); color:var(--cream); padding:16px 30px;
  border-radius:2px; font-size:16px; display:inline-block;
}

/* ---------- SECTION GENERIC ---------- */
section{padding:80px 0;}
.section-head{max-width:640px; margin:0 auto 50px; text-align:center;}
.section-head h2{font-size:clamp(27px,3.8vw,40px);}
.section-head p{color:var(--muted); margin:14px auto 0; font-size:17px; max-width:52ch;}

/* ---------- AGITATE cards ---------- */
.testi-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:30px 26px;
}
.testi-card p{font-size:15.5px; max-width:none;}
.testi-avatar{
  width:56px; height:56px; border-radius:50%; overflow:hidden; margin-bottom:18px;
  background:var(--panel-2); border:1px solid var(--line); position:relative;
}
.testi-avatar img{width:100%; height:100%; object-fit:cover;}
.testi-quote{font-size:17.5px; color:var(--cream); margin-bottom:20px; max-width:none;}
.testi-name{font-size:15px; font-weight:600; color:var(--gold-light);}
.testi-role{font-size:13.5px; color:var(--muted);}
@media(max-width:800px){.testi-cards{grid-template-columns:1fr;}}

/* ---------- BRIDGE (mekanisme unik) ---------- */
.bridge-box{
  max-width:720px; margin:0 auto; text-align:center;
}
.bridge-box p{
  font-size:18px; color:var(--cream); margin:0 auto 20px; max-width:56ch;
}
.bridge-box p:last-child{margin-bottom:0;}
.bridge-box strong{color:var(--gold-light); font-weight:600;}

/* ---------- TRANSFORMASI (sebelum/sesudah) ---------- */
.transform-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:840px; margin:0 auto;}
.transform-col{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:30px 28px;
}
.transform-col.after{border-color:var(--gold);}
.transform-label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em; font-weight:600;
  margin-bottom:18px; color:var(--muted);
}
.transform-col.after .transform-label{color:var(--gold-light);}
.transform-list{list-style:none;}
.transform-list li{
  font-size:15.5px; padding:10px 0; border-top:1px solid var(--line);
  padding-left:24px; position:relative; color:var(--cream);
}
.transform-list li:first-child{border-top:none;}
.transform-col.before .transform-list li::before{content:'—'; position:absolute; left:0; color:var(--muted);}
.transform-col.after .transform-list li::before{content:'✓'; position:absolute; left:0; color:var(--gold);}
@media(max-width:700px){.transform-grid{grid-template-columns:1fr;}}

/* ---------- TESTIMONI: WA screenshots grid ---------- */
.wa-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:56px;
}
.wa-shot{
  aspect-ratio:9/16; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; position:relative;
}
.wa-shot img{width:100%; height:100%; object-fit:cover;}
@media(max-width:900px){.wa-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.wa-grid{grid-template-columns:repeat(2,1fr); gap:10px;}}

/* ---------- GALERI SLIDER ---------- */
.slider{position:relative; max-width:760px; margin:0 auto;}
.slider-track{
  position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:8px;
  border:1px solid var(--line); background:var(--panel);
}
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 0.5s ease; pointer-events:none;
}
.slide.active{opacity:1; visibility:visible; pointer-events:auto;}
.slide img{width:100%; height:100%; object-fit:cover; display:block;}
.slider-controls{display:flex; justify-content:center; gap:10px; margin-top:18px;}
.slider-dot{
  width:9px; height:9px; border-radius:50%; background:var(--line); border:none; cursor:pointer;
}
.slider-dot.active{background:var(--gold);}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(18,19,15,0.7); border:1px solid var(--line); color:var(--cream);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; z-index:2;
}
.slider-arrow.prev{left:-19px;}
.slider-arrow.next{right:-19px;}
@media(max-width:560px){.slider-arrow{display:none;}}

/* ---------- PRICING (satu paket) ---------- */
.price-single{
  max-width:520px; margin:0 auto; background:var(--panel); border:1px solid var(--gold);
  border-radius:10px; padding:44px 38px; text-align:center;
  background:linear-gradient(180deg,#22241C 0%, #1B1C16 100%);
}
.price-badge{
  display:inline-block; background:var(--gold); color:var(--ink);
  font-size:12px; font-weight:700; letter-spacing:0.05em; padding:6px 16px; border-radius:20px;
  text-transform:uppercase; margin-bottom:18px;
}
.price-title{font-family:'Poppins', sans-serif; font-size:26px; font-weight:700; margin-bottom:8px;}
.price-sub{color:var(--muted); font-size:15px; margin-bottom:22px;}
.price-normal{color:var(--muted); font-size:17px; text-decoration:line-through; margin-bottom:2px;}
.price-amount{font-size:44px; color:var(--gold-light); font-weight:700; margin-bottom:24px;}
.price-amount small{font-size:15px; color:var(--muted); font-weight:400;}
.price-list{list-style:none; margin-bottom:28px; text-align:left;}
.price-list li{
  font-size:15.5px; padding:11px 0; border-top:1px solid var(--line);
  padding-left:26px; position:relative; color:var(--cream);
}
.price-list li:first-child{border-top:none;}
.price-list li::before{content:'✓'; position:absolute; left:0; color:var(--gold);}
.price-note{font-size:14px; color:var(--muted); margin:18px auto 0; max-width:none;}
.price-quota{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--gold-light);
  margin-top:16px; font-weight:500;
}

/* ---------- GARANSI ---------- */
.garansi-box{
  max-width:640px; margin:0 auto; background:var(--panel-2); border:1px solid var(--emerald-light);
  border-radius:10px; padding:38px 34px; text-align:center;
}
.garansi-box p{font-size:17px; margin:0 auto; max-width:52ch; color:var(--cream);}
.garansi-icon{font-size:28px; margin-bottom:16px;}
.garansi-headline{font-size:22px; font-weight:700; color:var(--gold-light); margin-bottom:14px;}
.garansi-note{font-size:13.5px !important; color:var(--muted) !important; margin-top:14px !important;}

/* ---------- FAQ (accordion pakai <details>/<summary> — tanpa JS) ---------- */
.faq-list{max-width:680px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item:first-child{padding-top:0;}
.faq-item summary, .faq-q{
  font-size:17.5px; font-weight:600; color:var(--gold-light); max-width:none;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-icon{font-size:20px; color:var(--gold); font-weight:400; transition:transform 0.2s ease; flex-shrink:0;}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-a{font-size:15.5px; color:var(--cream); max-width:none; padding-top:12px;}

/* ---------- AGITATE FOLLOW-UP (di bawah 3 card masalah) ---------- */
.agitate-followup{max-width:600px; margin:40px auto 0; text-align:center;}
.agitate-followup p{font-size:16.5px; color:var(--cream); margin:0 auto 16px; max-width:none;}
.agitate-followup p:last-child{color:var(--gold-light); font-size:18px; font-weight:600; margin-bottom:0;}
.agitate-list{list-style:none; text-align:left; max-width:420px; margin:0 auto 20px;}
.agitate-list li{padding:7px 0 7px 26px; position:relative; font-size:15.5px; color:var(--cream);}
.agitate-list li::before{content:'✕'; position:absolute; left:0; color:var(--danger); font-size:13px;}

/* ---------- BRIDGE: sub-label & feature box ---------- */
.bridge-sub-label{
  text-align:center; font-size:15px; font-weight:600; color:var(--muted);
  margin:36px 0 20px; text-transform:uppercase; letter-spacing:0.05em;
}
.bridge-feature-box{
  max-width:560px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 30px;
}
.bridge-feature-list{list-style:none;}
.bridge-feature-list li{
  font-size:15.5px; padding:14px 0; border-top:1px solid var(--line);
  padding-left:28px; position:relative; color:var(--cream);
}
.bridge-feature-list li:first-child{border-top:none;}
.bridge-feature-list li::before{content:'✓'; position:absolute; left:0; color:var(--gold);}
.bridge-closing-note{
  text-align:center; font-size:16px; color:var(--muted); max-width:56ch;
  margin:26px auto 0;
}

/* ---------- BONUS STACK (section Investasi) ---------- */
.bonus-stack{
  margin:22px 0 26px; padding-top:22px; border-top:1px dashed var(--gold);
}
.bonus-stack-label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em; font-weight:700;
  color:var(--gold-light); margin-bottom:14px; text-align:center;
}
.bonus-list li{padding-left:26px;}
.bonus-value{display:block; font-size:13px; color:var(--emerald-light); margin-top:3px; font-weight:500;}

/* ---------- SECTION NOTE (paragraf penutup di bawah blok konten) ---------- */
.section-note{
  max-width:600px; margin:28px auto 0; text-align:center; font-size:15px;
  color:var(--muted); max-width:56ch;
}

/* ---------- FORM PEMESANAN ---------- */
.form-panel{
  max-width:600px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:44px 38px;
}
.form-group{margin-bottom:22px;}
.form-group label{display:block; font-size:14.5px; color:var(--muted); margin-bottom:9px; letter-spacing:0.02em;}
.form-group input[type="text"], .form-group input[type="tel"]{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--cream);
  padding:15px 16px; border-radius:4px; font-family:'Poppins',sans-serif; font-size:16.5px;
}
.form-group input:focus{outline:none; border-color:var(--gold);}
.form-group input.invalid{border-color:var(--danger);}
.btn-submit{
  width:100%; background:var(--gold); color:var(--ink); padding:18px; border:none;
  border-radius:4px; font-weight:700; font-size:16.5px; cursor:pointer; letter-spacing:0.01em;
  font-family:'Poppins',sans-serif;
}
.btn-submit:hover{background:var(--gold-light);}
.form-note{font-size:13.5px; color:var(--muted); text-align:center; margin-top:16px; max-width:none;}
.form-error{color:var(--danger); font-size:14px; margin-top:7px; display:none; max-width:none;}

footer{
  border-top:1px solid var(--line); padding:34px 24px; text-align:center;
  color:var(--muted); font-size:14px;
}

/* ---------- HALAMAN PEMBAYARAN (cadangan, tidak ditautkan) ---------- */
.pay-wrap{max-width:520px; margin:60px auto; padding:0 24px;}
.pay-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:38px 32px;
}
.pay-headline{
  font-size:23px; text-align:center; color:var(--gold-light);
  text-transform:uppercase; letter-spacing:0.02em; margin-bottom:22px; line-height:1.35;
}
.pay-greet{font-size:16.5px; margin-bottom:26px; color:var(--cream); max-width:none;}
.pay-greet strong{color:var(--gold-light);}
.pay-section-title{
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted);
  margin-bottom:10px; margin-top:22px;
}
.pay-detail-box{
  background:var(--ink); border:1px solid var(--line); border-radius:6px; padding:20px;
}
.pay-row{display:flex; justify-content:space-between; padding:9px 0; font-size:15.5px; border-bottom:1px solid var(--line);}
.pay-row:last-child{border-bottom:none;}
.pay-row .label{color:var(--muted);}
.pay-total{font-size:32px; color:var(--gold-light); text-align:center; margin:22px 0 4px; font-weight:700;}
.pay-total-label{text-align:center; font-size:13.5px; color:var(--muted); margin-bottom:14px;}
.copy-btn{
  display:block; margin:0 auto; background:transparent; border:1px solid var(--gold);
  color:var(--gold-light); font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:20px; cursor:pointer; transition:all 0.15s ease; letter-spacing:0.02em;
}
.copy-btn:hover{background:var(--gold); color:var(--ink);}
.copy-btn.copied{background:var(--emerald); border-color:var(--emerald); color:var(--cream);}
.copy-btn-nominal{margin-bottom:6px;}
.rekening-options{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px;}
.rekening-box{
  background:var(--ink); border:1px dashed var(--gold); border-radius:6px; padding:18px; text-align:center;
  display:flex; flex-direction:column; gap:4px;
}
.rekening-box .bank{font-size:13.5px; color:var(--muted);}
.rekening-box .norek{font-size:22px; color:var(--gold-light); margin:4px 0; word-break:break-all; font-weight:700;}
.rekening-box .copy-btn{margin-top:10px; font-size:12.5px; padding:8px 14px;}
@media(max-width:520px){.rekening-options{grid-template-columns:1fr;}}
.countdown{
  text-align:center; font-size:14px; color:var(--danger); margin-bottom:22px; letter-spacing:0.02em;
}
.countdown strong{font-size:16px;}

/* ---------- MOBILE: pastikan teks tetap besar & mudah dibaca ---------- */
@media(max-width:640px){
  body{font-size:16.5px;}
  .hero{padding:70px 0 46px;}
  section{padding:60px 0;}
  .section-head{margin-bottom:38px;}
  .form-panel, .price-single, .garansi-box{padding:32px 24px;}
}