/* ============================================================
   MY PERTAMINA — SUBSIDI TEPAT BBM  (Modern UI Redesign)
   Design System: Poppins, clean, minimal, blue-based
   ============================================================ */

/* ===== VARIABLES ===== */
:root {
  --brand: #0f6eb5;          /* biru utama MyPertamina */
  --brand-2: #0f9eec;
  --brand-3: #0964aa;
  --brand-soft: #ebf8ff;
  --red: #ea2036;
  --green: #25d366;
  --green-dark: #17a84e;
  --dark: #25282b;
  --text: #52575c;
  --muted: #8a9199;
  --bg: #f8f9ff;
  --white: #fff;
  --border: #e6eaf1;
  --gold: #ffc248;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(15,110,181,.12);
  --shadow-lg: 0 24px 60px rgba(15,110,181,.18);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --transition: all .28s cubic-bezier(.4,0,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 clamp(20px,4vw,28px); }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5,h6 { color:var(--dark); line-height:1.3; font-weight:600; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-family:'Poppins',sans-serif;
  border-radius:12px; border:none; cursor:pointer;
  padding:13px 26px; font-size:1rem; transition:var(--transition);
  white-space:nowrap; justify-content:center;
}
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 6px 16px rgba(15,110,181,.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,110,181,.38); }
.btn-whatsapp { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; box-shadow:0 6px 16px rgba(37,211,102,.3); }
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,.4); }
.btn-outline { background:transparent; color:var(--brand); border:1.5px solid var(--brand); }
.btn-outline:hover { background:var(--brand-soft); }
.btn-sm { padding:9px 18px; font-size:.88rem; }
.btn-lg { padding:15px 32px; font-size:1.05rem; }

/* ===== NAVBAR ===== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,234,241,.7);
  transition:var(--transition);
}
.navbar.scrolled { box-shadow:var(--shadow-sm); }
.nav-container { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; gap:11px; }
.logo { width:40px; height:40px; display:inline-flex; }
.logo svg { width:100%; height:100%; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1.08rem; color:var(--dark); font-weight:700; }
.brand-text small { font-size:.7rem; color:var(--brand); font-weight:600; letter-spacing:.3px; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { font-weight:500; color:var(--dark); font-size:.93rem; transition:var(--transition); opacity:.85; }
.nav-links a:not(.btn):hover { color:var(--brand); opacity:1; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.hamburger span { width:24px; height:2.5px; background:var(--dark); border-radius:2px; transition:var(--transition); }

/* ===== HERO ===== */
.hero { position:relative; padding:150px 0 90px; overflow:hidden; }
.hero::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(15,158,236,.18), transparent 60%),
    radial-gradient(700px 380px at 0% 30%, rgba(15,110,181,.14), transparent 55%),
    linear-gradient(160deg,#ffffff 0%, #f0f7fe 100%);
}
.hero-container { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-content .badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-soft); color:var(--brand);
  padding:8px 16px; border-radius:50px; font-weight:600; font-size:.82rem; margin-bottom:22px;
  border:1px solid rgba(15,110,181,.2);
}
.hero h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:700; line-height:1.18; margin-bottom:18px; letter-spacing:-.5px; }
.highlight { position:relative; color:var(--brand); white-space:nowrap; }
.highlight::after {
  content:''; position:absolute; left:0; right:0; bottom:2px; height:9px; z-index:-1;
  background:linear-gradient(90deg,rgba(15,158,236,.25),rgba(15,110,181,.25)); border-radius:4px;
}
.hero-content > p { font-size:clamp(1rem,1.5vw,1.1rem); color:var(--muted); max-width:520px; margin-bottom:16px; }
.hero-trust { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.92rem; color:var(--dark); margin-bottom:26px; }
.hero-trust i { color:var(--gold); }
.hero-trust strong { color:var(--dark); font-weight:600; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:24px 0 0; border-top:1px solid var(--border);
}
.stat { display:flex; flex-direction:column; }
.stat strong { font-size:1.5rem; font-weight:700; color:var(--dark); }
.stat span { font-size:.82rem; color:var(--muted); }

/* Hero visual — kartu handal modern */
.hero-visual { display:flex; justify-content:center; }
.phone-card {
  width:300px; background:var(--white); border-radius:30px; box-shadow:var(--shadow-lg);
  overflow:hidden; border:1px solid var(--border); animation:float 5s ease-in-out infinite;
  position:relative;
}
.phone-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--red),var(--brand),var(--green));
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.phone-top { display:flex; gap:6px; padding:15px 18px; background:#f3f6fb; }
.dot { width:10px; height:10px; border-radius:50%; }
.dot.red { background:var(--red); }
.dot.white { background:#cbd5e1; }
.dot.blue { background:var(--brand); }
.phone-body { padding:22px; }
.app-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.app-header img { width:42px; height:42px; border-radius:12px; }
.app-header strong { display:block; color:var(--dark); font-size:.95rem; }
.app-header small { color:var(--muted); font-size:.78rem; }
.phone-card-info { background:var(--bg); border-radius:16px; padding:18px; margin-bottom:20px; border:1px solid var(--border); }
.info-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.info-row:last-child { margin-bottom:0; }
.info-row i { font-size:1.25rem; color:var(--brand); width:28px; text-align:center; }
.info-row span { display:block; font-size:.75rem; color:var(--muted); }
.info-row strong { font-size:.92rem; color:var(--dark); }
.status-ok { color:var(--green-dark); }
.progress { height:8px; background:#e8eef5; border-radius:50px; overflow:hidden; margin-bottom:16px; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:50px; }
.phone-btn { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; text-align:center; padding:14px; border-radius:14px; font-weight:600; box-shadow:0 8px 18px rgba(15,110,181,.3); }

/* ===== LOGO RESMI ===== */
.official-logo-section { background:var(--bg); border-bottom:1px solid var(--border); padding:44px 0; }
.official-logo-card {
  display:flex; align-items:center; justify-content:center; gap:36px;
  max-width:900px; margin:0 auto; background:var(--white);
  border:1px solid var(--border); border-radius:20px; padding:28px 36px;
  box-shadow:var(--shadow-sm); flex-wrap:wrap;
}
.official-logo-badge { flex-shrink:0; }
.official-logo-badge img { width:200px; height:auto; object-fit:contain; }
.official-logo-text { max-width:420px; }
.official-logo-tag {
  display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft);
  color:var(--brand); padding:6px 14px; border-radius:50px; font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:14px;
}
.official-logo-text h2 { font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:700; color:var(--dark); margin-bottom:12px; }
.official-logo-text p { color:var(--muted); font-size:.96rem; line-height:1.7; }

/* ===== SECTIONS ===== */
.section { padding:88px 0; }
.section.alt { background:var(--white); }
.section-head { text-align:center; max-width:680px; margin:0 auto 52px; }
.section-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--brand-soft); color:var(--brand); border:1px solid rgba(15,110,181,.16);
  padding:7px 18px; border-radius:50px; font-weight:600; font-size:.8rem; margin-bottom:18px;
  text-transform:uppercase; letter-spacing:1.2px;
}
.section-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.section-head h2 { font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:700; color:var(--dark); margin-bottom:14px; letter-spacing:-.4px; }
.section-head p { color:var(--muted); font-size:clamp(.95rem,1.4vw,1.03rem); }

/* ===== FEATURES ===== */
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:34px 26px; text-align:center; transition:var(--transition); box-shadow:var(--shadow-sm);
}
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.feature-icon {
  width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-size:1.4rem;
}
.feature-icon.red { background:#ffebef; color:var(--red); }
.feature-icon.blue { background:var(--brand-soft); color:var(--brand); }
.feature-icon.green { background:#e7ffe8; color:var(--green-dark); }
.feature-icon.orange { background:#fff3d6; color:#f59f00; }
.feature-card h3 { color:var(--dark); margin-bottom:9px; font-size:1.08rem; font-weight:600; }
.feature-card p { color:var(--muted); font-size:.9rem; }

/* ===== SERVICES ===== */
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.service-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px 26px; text-align:center; transition:var(--transition); position:relative; box-shadow:var(--shadow-sm);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.service-card.featured { border:2px solid var(--brand); }
.service-card.featured::after {
  content:'POPULER'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  padding:4px 14px; border-radius:50px; font-size:.66rem; font-weight:700; letter-spacing:1px;
}
.service-icon { font-size:2.2rem; color:var(--brand); margin-bottom:18px; }
.service-card h3 { color:var(--dark); font-size:1.22rem; margin-bottom:12px; font-weight:600; }
.service-card p { color:var(--muted); margin-bottom:20px; font-size:.92rem; }
.service-tag {
  display:inline-block; background:var(--brand-soft); color:var(--brand);
  padding:6px 16px; border-radius:50px; font-size:.82rem; font-weight:600;
}

/* ===== STEPS ===== */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step { text-align:center; padding:24px; position:relative; }
.step-num {
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; box-shadow:0 10px 22px rgba(15,110,181,.32);
}
.step h3 { color:var(--dark); margin-bottom:9px; font-weight:600; }
.step p { color:var(--muted); font-size:.9rem; }

/* ===== SYARAT ===== */
.syarat-container { max-width:900px; }
.syarat-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.syarat-card { background:var(--white); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.syarat-card h3 { color:var(--dark); margin-bottom:20px; display:flex; align-items:center; gap:10px; font-weight:600; }
.syarat-card h3 i { color:var(--brand); }
.syarat-card ul li {
  padding:10px 0 10px 28px; position:relative; color:var(--text); border-bottom:1px dashed var(--border); font-size:.92rem;
}
.syarat-card ul li:last-child { border-bottom:none; }
.syarat-card ul li::before {
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; color:var(--green-dark); font-size:.85rem;
}

/* ===== FORMS ===== */
.form-section { background:linear-gradient(150deg,var(--dark) 0%, #3a4a63 55%, var(--brand-3) 100%); }
.form-section .section-head h2 { color:#fff; }
.form-section .section-head p { color:#cbd5e1; }
.form-section .section-tag { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.25); }
.daftar-form { background:var(--white); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-lg); max-width:900px; margin:0 auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; }
.form-group.full { grid-column:span 2; }
.form-group label { font-weight:600; color:var(--dark); margin-bottom:8px; font-size:.88rem; }
.form-group .req { color:var(--red); }
.form-group input, .form-group select, .form-group textarea {
  padding:14px 16px; border:1.5px solid var(--border); border-radius:12px;
  font-size:15px; transition:var(--transition); background:var(--bg); font-family:'Poppins',sans-serif;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(15,110,181,.1);
}
.form-group textarea { resize:vertical; }

/* Upload */
.upload-wrapper { position:relative; }
.upload-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.upload-label {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:26px 16px; border:2px dashed var(--border); border-radius:12px; background:var(--bg);
  cursor:pointer; transition:var(--transition); text-align:center;
}
.upload-label:hover { border-color:var(--brand); background:var(--brand-soft); }
.upload-label i { font-size:1.7rem; color:var(--brand); }
.upload-text { font-size:.88rem; color:var(--muted); font-weight:500; }
.upload-name { font-size:.84rem; color:var(--green-dark); font-weight:600; word-break:break-all; }
.upload-label.has-file { border-style:solid; border-color:var(--green); background:#f0fcf3; }
.field-hint { display:block; margin-top:8px; font-size:.8rem; color:var(--muted); }
.field-hint i { margin-right:4px; color:var(--brand); }
.upload-preview { width:100%; max-height:180px; object-fit:cover; border-radius:12px; margin-top:12px; border:1px solid var(--border); }
.upload-msg { margin-top:10px; padding:10px 14px; border-radius:10px; font-size:.85rem; font-weight:600; }
.upload-msg.error { background:#ffebef; color:var(--red); border:1px solid #ffd4da; }
.upload-msg.success { background:#f0fcf3; color:var(--green-dark); border:1px solid #cdeeda; }
.form-actions { margin-top:28px; text-align:center; }
.form-note { margin-top:14px; color:var(--muted); font-size:.84rem; }
.form-note i { color:var(--green-dark); }

/* Sanggah */
.sanggah-section { background:linear-gradient(150deg,var(--brand-3) 0%,var(--brand) 55%,#117ec9 100%); }
.sanggah-section .section-head h2 { color:#fff; }
.sanggah-section .section-head p { color:#e6f0fa; }
.sanggah-section .section-tag { background:rgba(255,255,255,.16); color:#fff; }
.sanggah-section .daftar-form { box-shadow:0 20px 50px rgba(0,0,0,.25); }

/* ===== STATUS ===== */
.status-section { background:var(--white); }
.status-card { background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:32px; max-width:760px; margin:0 auto; box-shadow:var(--shadow-sm); }
.status-form { display:flex; gap:12px; }
.status-input-group { position:relative; flex:1; display:flex; align-items:center; }
.status-input-group i { position:absolute; left:16px; color:var(--muted); font-size:1rem; }
.status-input-group input {
  width:100%; padding:16px 16px 16px 44px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:var(--white); transition:var(--transition); font-family:'Poppins',sans-serif;
}
.status-input-group input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(15,110,181,.1); }
.status-form .btn { white-space:nowrap; }
.status-help { display:flex; align-items:center; gap:10px; margin-top:16px; padding:14px 16px; background:var(--white); border-radius:12px; color:var(--muted); font-size:.86rem; border:1px solid var(--border); }
.status-help i { color:var(--brand); font-size:1.1rem; }
.status-help a { color:var(--brand); font-weight:600; }

.status-result { background:var(--white); border-radius:20px; padding:32px; box-shadow:var(--shadow-lg); max-width:760px; margin:32px auto 0; border:1px solid var(--border); animation:fadeInUp .4s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.result-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.result-label { display:block; font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.result-header strong { font-size:1.12rem; color:var(--dark); }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:50px; font-weight:600; font-size:.84rem; color:#fff; }
.badge-new { background:linear-gradient(135deg,#ffc248,#f59f00); }
.badge-proses { background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.badge-revisi { background:linear-gradient(135deg,#ff8c42,#f76707); }
.badge-aktif { background:linear-gradient(135deg,var(--green),var(--green-dark)); }
.result-data { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:28px; }
.result-data-item { background:var(--bg); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--border); }
.result-data-item span { font-size:.76rem; color:var(--muted); }
.result-data-item strong { font-size:.96rem; color:var(--dark); }
.status-stepper { display:flex; justify-content:space-between; gap:8px; margin:8px 0 28px; position:relative; }
.status-stepper::before { content:''; position:absolute; top:20px; left:12%; right:12%; height:3px; background:var(--border); z-index:0; }
.stepper-item { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; text-align:center; position:relative; z-index:1; }
.stepper-dot { width:40px; height:40px; border-radius:50%; background:var(--border); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:var(--transition); }
.stepper-item span { font-size:.76rem; color:var(--muted); font-weight:500; line-height:1.3; }
.stepper-item.done .stepper-dot { background:linear-gradient(135deg,var(--green),var(--green-dark)); }
.stepper-item.active .stepper-dot { background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 0 0 6px rgba(15,110,181,.15); }
.stepper-item.active .stepper-dot .fa-spinner { animation:spin 1s linear infinite; }
.stepper-item.active span { color:var(--brand); font-weight:600; }
.stepper-item.done span { color:var(--green-dark); }
@keyframes spin { to{transform:rotate(360deg)} }
.result-message { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.result-message p { color:var(--text); font-size:.93rem; }
.result-message .btn { width:auto; }

/* ===== FAQ ===== */
.faq-container { max-width:800px; }
.faq-item { background:var(--white); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:var(--transition); margin-bottom:14px; }
.faq-item.active { box-shadow:var(--shadow); border-color:transparent; }
.faq-question {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 24px; background:none; border:none; text-align:left;
  font-size:1rem; font-weight:600; color:var(--dark); font-family:'Poppins',sans-serif;
}
.faq-question i { transition:var(--transition); color:var(--muted); }
.faq-item.active .faq-question i { transform:rotate(180deg); color:var(--brand); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { padding:0 24px 20px; color:var(--muted); font-size:.92rem; }

/* ===== LIVECOUNTER ===== */
.livecounter-section { background:linear-gradient(150deg,var(--dark) 0%, #33465e 55%, var(--brand-3) 100%); }
.livecounter-section .section-head h2 { color:#fff; }
.livecounter-section .section-head p { color:#cbd5e1; }
.livecounter-icon {
  width:80px; height:80px; border-radius:50%; margin:0 auto 24px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.4); animation:blink 2.2s infinite;
}
.livecounter-count span { display:block; font-size:4.2rem; font-weight:700; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.livecounter-count small { display:block; margin-top:10px; color:#cbd5e1; font-size:1.05rem; }
.livecounter-note { display:inline-flex; align-items:center; gap:8px; margin-top:28px; background:rgba(37,211,102,.16); color:var(--green); padding:10px 20px; border-radius:50px; font-size:.88rem; font-weight:600; }
.livecounter-note i { font-size:.6rem; animation:blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ===== TESTIMONI BERGULIR ===== */
.testimoni-live { display:inline-flex; align-items:center; gap:8px; margin-top:16px; background:#f0fcf3; color:var(--green-dark); padding:8px 18px; border-radius:50px; font-size:.84rem; font-weight:600; }
.testimoni-live i { font-size:.6rem; animation:blink 1.2s infinite; }
.testimoni-marquee { overflow:hidden; padding:12px 0; position:relative; }
.testimoni-marquee::before, .testimoni-marquee::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.testimoni-marquee::before { left:0; background:linear-gradient(to right,var(--bg),transparent); }
.testimoni-marquee::after { right:0; background:linear-gradient(to left,var(--bg),transparent); }
.testimoni-track { display:flex; gap:24px; width:max-content; animation:marquee 120s linear infinite; }
.testimoni-track:hover { animation-play-state:paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.testimoni-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 24px; width:330px; flex-shrink:0; display:flex; flex-direction:column;
  transition:var(--transition); box-shadow:var(--shadow-sm);
}
.testimoni-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.testimoni-stars { color:#ffc248; margin-bottom:14px; font-size:.9rem; letter-spacing:2px; }
.testimoni-card p { color:var(--text); font-size:.93rem; font-style:italic; flex:1; margin-bottom:18px; }
.testimoni-user { display:flex; align-items:center; gap:12px; }
.avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.85rem; flex-shrink:0; }
.av-red { background:linear-gradient(135deg,var(--red),#b3060b); }
.av-blue { background:linear-gradient(135deg,var(--brand),var(--brand-3)); }
.av-green { background:linear-gradient(135deg,var(--green),var(--green-dark)); }
.testimoni-user strong { display:block; color:var(--dark); font-size:.93rem; font-weight:600; }
.testimoni-user span { color:var(--muted); font-size:.78rem; }

/* ===== BUKTI NYATA / FOTO ===== */
.testimonifoto-section { background:var(--white); }
.testimonifoto-hint { text-align:center; color:var(--muted); font-size:.88rem; margin:-32px 0 32px; }
.testimonifoto-hint i { color:var(--brand); margin-right:6px; }
.testimonifoto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.testimonifoto-item {
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:zoom-in;
  border:1px solid var(--border); background:var(--white); box-shadow:var(--shadow-sm);
  transition:var(--transition); aspect-ratio:3/4;
}
.testimonifoto-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.testimonifoto-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.testimonifoto-item:hover img { transform:scale(1.08); }
.testimonifoto-item::after {
  content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(15,110,181,.5); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; opacity:0; transition:var(--transition);
}
.testimonifoto-item:hover::after { opacity:1; }

/* ===== LIGHTBOX ===== */
.lightbox { position:fixed; inset:0; z-index:300; background:rgba(15,18,38,.92); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-figure { max-width:90vw; max-height:85vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox-figure img { max-width:90vw; max-height:78vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.lightbox-figure figcaption { color:#cbd5e1; font-size:.9rem; }
.lightbox-close, .lightbox-nav { position:absolute; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:var(--transition); cursor:pointer; }
.lightbox-close:hover, .lightbox-nav:hover { background:var(--brand); transform:scale(1.05); }
.lightbox-close { top:20px; right:20px; }
.lightbox-nav { top:50%; transform:translateY(-50%); }
.lightbox-prev { left:20px; } .lightbox-next { right:20px; }

/* ===== CTA ===== */
.cta { background:linear-gradient(135deg,var(--brand),var(--brand-2)); padding:80px 0; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; inset:0; background:radial-gradient(500px 220px at 20% 0%,rgba(255,255,255,.12),transparent 70%); }
.cta-container { max-width:700px; position:relative; }
.cta h2 { color:#fff; font-size:2.1rem; font-weight:700; margin-bottom:16px; }
.cta p { color:rgba(255,255,255,.92); margin-bottom:32px; font-size:1.08rem; }
.cta .btn-whatsapp { background:#fff; color:var(--brand); }
.cta .btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.22); }

/* ===== FOOTER ===== */
.footer { background:var(--dark); color:#b8c0ca; padding:64px 0 0; }
.footer-container { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-brand .brand-text strong { color:#fff; }
.footer-brand p { margin-top:16px; font-size:.9rem; max-width:330px; }
.footer-col h4 { color:#fff; margin-bottom:20px; font-size:1rem; font-weight:600; }
.footer-col a { display:block; padding:6px 0; color:#b8c0ca; transition:var(--transition); font-size:.9rem; }
.footer-col a:hover { color:#fff; padding-left:4px; }
.footer-col a i { margin-right:8px; color:var(--green); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; }
.footer-bottom .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:.84rem; }

/* ===== FLOATING WHATSAPP ===== */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:200; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-dark)); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.7rem; box-shadow:0 8px 24px rgba(37,211,102,.4); transition:var(--transition);
  animation:pulse 2s infinite;
}
.wa-float:hover { transform:scale(1.1); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

/* ===== STICKY CTA ===== */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--border); padding:12px 16px; box-shadow:0 -8px 30px rgba(15,18,38,.12); display:none;
}
.sticky-cta-btn { width:100%; justify-content:center; padding:15px; font-size:1.05rem; border-radius:14px; }
.sticky-cta.hidden { transform:translateY(100%); }

/* ===== RESPONSIVE ===== */
input, select, textarea { font-size:16px; }

@media (max-width:768px) {
  .nav-links {
    position:fixed; top:70px; left:0; right:0; background:#fff; flex-direction:column; gap:0;
    padding:16px 24px; box-shadow:var(--shadow); transform:translateY(-150%); transition:var(--transition);
    border-bottom:1px solid var(--border); max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:14px 0; width:100%; border-bottom:1px solid var(--border); }
  .nav-links a:last-child { border-bottom:none; }
  .nav-links .btn-sm { margin-top:8px; justify-content:center; }
  .hamburger { display:flex; }
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .section { padding:60px 0; }
  .section-head { margin-bottom:38px; }
  .hero { padding:118px 0 56px; }
  .hero-container { grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:16px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); gap:20px; }
  .service-grid { grid-template-columns:repeat(2,1fr); max-width:560px; margin:0 auto; }
  .syarat-grid, .footer-container { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:span 1; }
  .daftar-form { padding:24px 20px; }
  .result-data { grid-template-columns:1fr; }
  .status-stepper { flex-direction:column; gap:16px; }
  .status-stepper::before { display:none; }
  .stepper-item { flex-direction:row; justify-content:flex-start; text-align:left; }
  .result-header { flex-direction:column; align-items:flex-start; }
  .status-form { flex-direction:column; }
  .status-form .btn { width:100%; }
  .status-card, .status-result { padding:24px 20px; }
  .testimonifoto-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .lightbox-nav { width:40px; height:40px; font-size:1rem; }
  .lightbox-prev { left:10px; } .lightbox-next { right:10px; }
  .lightbox-close { top:12px; right:12px; width:40px; height:40px; }
  .cta h2 { font-size:1.7rem; }
  .footer-bottom .container { flex-direction:column; text-align:center; }
  .sticky-cta { display:block; transition:transform .3s ease; }
  .wa-float { bottom:84px; right:18px; }
  body { padding-bottom:76px; }
  .livecounter-count span { font-size:3rem; }
  .testimoni-card { width:290px; }
  .testimoni-marquee::before, .testimoni-marquee::after { width:40px; }
}

@media (max-width:480px) {
  .feature-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; }
  .btn-lg { width:100%; }
  .hero-buttons .btn { width:100%; }
  .phone-card { width:100%; max-width:280px; }
  .official-logo-card { flex-direction:column; text-align:center; padding:22px 18px; gap:20px; }
  .official-logo-text { text-align:center; }
  .syarat-card { padding:24px 20px; }
  .brand-text small { display:none; }
}



/* ===== MODAL SUKSES SUBMIT ===== */
.success-modal {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10,10,20,.75);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    backdrop-filter: blur(4px);
}
.success-modal.open { opacity: 1; visibility: visible; }
.success-modal-box {
    background: #fff; border-radius: 20px;
    max-width: 440px; width: 100%;
    padding: 36px 30px; text-align: center;
    box-shadow: 0 24px 60px rgba(15,18,38,.2);
    transform: translateY(20px);
    transition: transform .3s ease;
}
.success-modal.open .success-modal-box { transform: translateY(0); }
.success-modal-icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #17a84e);
    color: #fff; font-size: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 10px 30px rgba(37,211,102,.4);
}
.success-modal-box h3 {
    font-size: 1.5rem; font-weight: 800; color: #0f1226;
    margin-bottom: 10px;
}
.success-modal-box > p { color: #5b6472; font-size: .95rem; margin-bottom: 20px; }
.success-steps {
    text-align: left; margin: 0 0 22px;
    padding: 16px 18px;
    background: #f6f8fc; border-radius: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.success-steps li {
    display: flex; align-items: flex-start; gap: 10px;
    color: #1f2430; font-size: .88rem; line-height: 1.5;
}
.success-steps li i { color: #17a84e; margin-top: 3px; }
.success-modal-box .btn { width: 100%; justify-content: center; }

/* ===== TOGGLE FORM (COLLAPSE/EXPAND) ===== */
.btn-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-soft); color: var(--brand);
    border: 1.5px solid var(--brand);
    padding: 10px 20px; border-radius: 8px;
    font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: var(--transition);
    margin-top: 12px;
}
.btn-toggle:hover {
    background: var(--brand); color: #fff;
}
.btn-toggle i {
    transition: transform 0.3s ease;
}
.btn-toggle.active i {
    transform: rotate(180deg);
}

.form-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.form-collapsible.collapsed {
    margin-top: 0;
}
.form-collapsible.expanded {
    max-height: 5000px;
    opacity: 1;
    margin-top: 20px;
}

@media (max-width:480px) {
  .success-modal-box { padding: 28px 20px; }
  .success-modal-icon { width: 64px; height: 64px; font-size: 1.8rem; }
}