/* =====================================================
   SIAKS-AL KAHFI — GLOBAL THEME (Seragam Semua Halaman)
===================================================== */
:root {
    --sk-green: #1B5E20;
    --sk-green-light: #2E7D32;
    --sk-gold: #D4AF37;
    --sk-green-soft: #E8F5E9;
    --sk-cream: #FDF6E3;
    --sk-text: #374151;
    --sk-muted: #6b7280;
}

/* Ukuran dasar diperkecil agar semua halaman smooth & elegan */
html { font-size: 14px; }

body {
    font-family: 'Poppins', sans-serif !important;
    color: var(--sk-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.2px; color: #1a1a1a; }

small, .small { font-size: .78rem; }

/* ===== FORM ===== */
.form-control, .form-select {
    font-size: .85rem;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    padding: .55rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sk-green);
    box-shadow: 0 0 0 .2rem rgba(27, 94, 32, .08);
}
.form-label { font-size: .78rem; font-weight: 600; color: #4b5563; }

/* ===== TOMBOL ===== */
.btn { font-size: .85rem; border-radius: 10px; }
.btn-lg { font-size: .95rem; }
.btn-sm { font-size: .75rem; }

/* ===== TABEL ===== */
.table { font-size: .82rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; }

/* ===== BADGE & ALERT ===== */
.badge { font-size: .68rem; }
.alert { font-size: .82rem; border-radius: 12px; }

/* ===== CARD ===== */
.card { border-radius: 16px; }

/* ===== LINK ===== */
a { text-decoration: none; }

/* ===== HEADER STICKY SPMB ===== */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: .7rem 0; }
.brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sk-gold); }
.brand-name { font-weight: 800; color: var(--sk-green); font-size: 1.05rem; line-height: 1.1; display: block; }
.brand-tag { font-size: .66rem; color: var(--sk-muted); }
.back-link { color: #374151; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.back-link:hover { color: var(--sk-green); }

/* ===== WELCOME ===== */
.welcome-title { font-size: 1.75rem; font-weight: 800; color: #111827; text-align: left; line-height: 1.3; }
.welcome-text { font-size: .9rem; color: #4b5563; text-align: left; }

/* ===== TOMBOL GOOGLE (TEKS BESAR, RATA KIRI) ===== */
.btn-google { width: 100%; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: .85rem 1.2rem; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; transition: all .3s; color: #111827; }
.btn-google:hover { border-color: #4285F4; box-shadow: 0 6px 16px rgba(66,133,244,.15); }

/* ===== SECTION TAHAPAN ===== */
.tahapan-section { background: var(--sk-green); padding: 4rem 0; }
.section-title { font-weight: 800; font-size: 1.5rem; }
.section-sub { font-size: .88rem; opacity: .85; }
.step-card { background: #fff; border-radius: 16px; padding: 1.5rem; position: relative; height: 100%; transition: all .3s; }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.step-num { position: absolute; top: 1rem; right: 1.25rem; font-size: 1.7rem; font-weight: 800; color: #e5e7eb; }
.step-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--sk-green-soft); color: var(--sk-green); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 1rem; }
.step-card h6 { font-weight: 700; color: #111827; }
.step-card p { font-size: .78rem; color: #6b7280; margin: 0; }

/* ===== SECTION DOKUMEN ===== */
.docs-section { padding: 4rem 0; background: #fafafa; }
.doc-card { background: #fff; border-radius: 16px; border: 1px solid #eee; padding: 1.75rem; height: 100%; }
.doc-card h5 { color: var(--sk-green); font-weight: 700; font-size: 1.05rem; }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { padding: .5rem 0; border-bottom: 1px dashed #e5e7eb; font-size: .84rem; display: flex; gap: .5rem; align-items: flex-start; }
.doc-list li i { color: var(--sk-gold); margin-top: .1rem; }

/* ===== FOOTER ===== */
.site-footer { background: #0D3B13; color: #d1d5db; padding: 2.75rem 0 1.25rem; }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .9rem; }
.site-footer a { color: #d1d5db; font-size: .82rem; }
.site-footer a:hover { color: var(--sk-gold); }
.footer-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sk-gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1rem; font-size: .72rem; color: #9ca3af; }

/* =====================================================
   SPMB PAGES — DESAIN SERAGAM (Poppins + Baloo 2, hijau-emas)
===================================================== */
.spmb-page { background:#fafafa; min-height:100vh; }
.spmb-wrap { padding:2.5rem 0 4rem; }

/* Step indicator */
.stepbar { display:flex; justify-content:center; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:.5rem; }
.stepbar .st { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:#9ca3af; }
.stepbar .st .n { width:34px; height:34px; border-radius:50%; background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; font-weight:700; }
.stepbar .st.done .n { background:var(--sk-green); color:#fff; }
.stepbar .st.active .n { background:var(--sk-gold); color:#1a1a1a; }
.stepbar .st.done, .stepbar .st.active { color:#1a1a1a; }
.stepbar .line { width:56px; height:2px; background:#e5e7eb; margin:0 .6rem; }

/* Kartu */
.spmb-card { background:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.07); padding:1.75rem; height:100%; }
.spmb-card h5 { font-family:'Baloo 2',cursive; font-weight:800; color:var(--sk-green); }

/* Rincian */
.rincian-row { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px dashed #e5e7eb; font-size:.85rem; }
.rincian-row .v { font-weight:600; text-align:right; }
.total-row { display:flex; justify-content:space-between; padding:.9rem 0 0; font-weight:800; font-size:1.05rem; color:var(--sk-green); font-family:'Baloo 2',cursive; }
.badge-diskon { background:var(--sk-gold); color:#fff; border-radius:50px; padding:.3rem 1rem; font-size:.7rem; font-weight:700; }

/* Pilihan bank */
.bank-opt { border:2px solid #e5e7eb; border-radius:14px; padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem; cursor:pointer; transition:all .2s; font-weight:700; font-size:.85rem; }
.bank-opt:hover { border-color:var(--sk-green); }
.bank-opt.selected { border-color:var(--sk-green); background:#E8F5E9; }
.bank-opt input { display:none; }
.bank-logo { width:52px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.5px; }

/* Virtual Account */
.va-box { background:#FDF6E3; border:2px dashed var(--sk-gold); border-radius:14px; padding:1.2rem; text-align:center; }
.va-num { font-family:'Baloo 2',cursive; font-size:1.45rem; font-weight:800; letter-spacing:2px; color:#1a1a1a; }
.pay-steps { font-size:.8rem; color:#4b5563; }
.pay-steps li { margin-bottom:.35rem; }

/* Tombol seragam SPMB */
.btn-spmb { background:var(--sk-green); color:#fff; border:none; border-radius:50px; padding:.7rem 1.8rem; font-weight:700; font-size:.88rem; transition:all .3s; }
.btn-spmb:hover { background:var(--sk-green-light, #2E7D32); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(27,94,32,.3); }
.btn-spmb-line { background:transparent; color:var(--sk-green); border:2px solid var(--sk-green); border-radius:50px; padding:.7rem 1.8rem; font-weight:700; font-size:.88rem; transition:all .3s; }
.btn-spmb-line:hover { background:#E8F5E9; color:var(--sk-green); }