:root{--blue:#1747a6;--blue2:#0f2f73;--sky:#eaf2ff;--ink:#10213a;--muted:#61708a;--line:#e3e8ef;--bg:#f6f8fc;--white:#fff;--green:#15803d;--red:#b42318;--amber:#b45309;--shadow:0 14px 45px rgba(19,47,91,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--white)}a{color:inherit;text-decoration:none}.container{width:min(1160px,92%);margin:auto}.site-header,.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.navwrap,.topbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar{padding:0 3vw}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:18px}.brandmark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#4b8cff);color:white;box-shadow:0 8px 20px rgba(23,71,166,.24)}nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}nav a{font-size:14px;color:#34445f}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:white;border:0;border-radius:12px;padding:12px 18px;font-weight:750;cursor:pointer}.btn:hover{background:var(--blue2)}.btn.secondary{background:white;color:var(--blue);border:1px solid #bfd0f5}.btn.ghost{background:#eef3fb;color:var(--ink)}.btn.danger{background:#b42318}.btn.small{padding:9px 13px;border-radius:10px}.hero{background:radial-gradient(circle at 80% 10%,#dce9ff 0,transparent 38%),linear-gradient(180deg,#f8fbff,#fff);padding:86px 0 70px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}.eyebrow{display:inline-flex;padding:7px 10px;border-radius:999px;background:var(--sky);color:var(--blue);font-weight:800;font-size:13px}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:18px 0 18px;letter-spacing:-2px}.hero h1 span{color:var(--blue)}.hero p{font-size:19px;line-height:1.7;color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-card{background:white;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.mini-stat{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mini-stat div{padding:16px;border-radius:16px;background:var(--bg)}.mini-stat strong{display:block;font-size:22px;color:var(--blue)}section{padding:72px 0}.section-title{text-align:center;max-width:800px;margin:0 auto 34px}.section-title h2{font-size:36px;margin:0 0 10px}.section-title p{color:var(--muted);line-height:1.65}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 26px rgba(14,35,67,.04)}.card h3{margin:8px 0}.card p{color:var(--muted);line-height:1.6}.icon{font-size:28px}.band{background:#0f285f;color:white}.band .section-title p{color:#c8d5f2}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:22px}.step b{display:grid;place-items:center;width:34px;height:34px;background:white;color:var(--blue2);border-radius:50%;margin-bottom:14px}.auth-wrap{min-height:76vh;background:var(--bg);display:grid;place-items:center;padding:48px 16px}.auth-card{width:min(520px,100%);background:white;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}.auth-card h1{margin-top:0}.muted{color:var(--muted)}.form-grid{display:grid;gap:15px}.form-row{display:grid;gap:7px}.form-row label{font-weight:700;font-size:14px}.form-row input,.form-row select,.form-row textarea{width:100%;border:1px solid #ccd5e3;border-radius:11px;padding:12px 13px;font:inherit;background:white;color:var(--ink)}.form-row textarea{min-height:120px;resize:vertical}.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:3px solid #dbe8ff;border-color:#6b95e7}.helper{font-size:12px;color:var(--muted)}.flash{width:min(1160px,92%);margin:14px auto 0;padding:12px 15px;border-radius:12px;font-weight:650}.flash.success{background:#ecfdf3;color:#166534}.flash.error{background:#fff0ee;color:#9f241e}.flash.warning{background:#fff8e6;color:#92400e}.app-body{background:var(--bg)}.app-main{width:min(1220px,94%);margin:28px auto 70px}.page-title{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.page-title h1{margin:0 0 6px}.page-title p{margin:0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.stat{background:white;border:1px solid var(--line);border-radius:16px;padding:18px}.stat span{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:28px;margin-top:7px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature{display:block;background:white;border:1px solid var(--line);border-radius:16px;padding:18px;transition:.2s}.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#b7c9eb}.feature .icon{font-size:24px}.feature h3{font-size:16px;margin:9px 0 5px}.feature p{font-size:13px;margin:0;color:var(--muted);line-height:1.5}.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}.panel h2,.panel h3{margin-top:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;background:white}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}th{background:#f8fafc;color:#475569}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf3ff;color:var(--blue);font-size:12px;font-weight:800}.credit{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#fff7df;color:#8b5a00;font-weight:800}.output{white-space:pre-wrap;font-family:inherit;line-height:1.72;background:#fbfcfe;border:1px solid var(--line);border-radius:14px;padding:22px;min-height:180px}.otp-code{font-size:28px;letter-spacing:10px;text-align:center;font-weight:800}.refbox{display:flex;gap:10px}.refbox input{flex:1}.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:13px;background:white}.callout{padding:16px;border-left:4px solid var(--blue);background:#eef4ff;border-radius:10px}.admin-note{background:#fff7e8;border:1px solid #f3d49a;padding:14px;border-radius:12px;color:#7c4c00}.danger-note{background:#fff1f0;border:1px solid #f2b8b5;padding:14px;border-radius:12px;color:#8f1d18}.quiz-card{border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}.quiz-card h4{margin:0 0 10px}.quiz-options{display:grid;gap:7px}.quiz-options div{background:#f8fafc;border-radius:9px;padding:9px 11px}.ok{color:var(--green);font-weight:750}.actions{display:flex;gap:10px;flex-wrap:wrap}.empty{padding:30px;text-align:center;color:var(--muted)}@media(max-width:980px){.hero-grid,.two-col,.three-col{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;padding:12px 3vw;flex-direction:column}.topbar nav{padding-bottom:8px}}@media(max-width:640px){.site-header nav a:not(.btn){display:none}.hero{padding-top:58px}.hero h1{letter-spacing:-1px}.grid,.feature-grid,.stats,.steps{grid-template-columns:1fr}.auth-card{padding:22px}.refbox{flex-direction:column}.section-title h2{font-size:30px}}

/* V2: Sahabat Guru logo + legal pages */
.brand{min-width:0;gap:12px}.brand-logo{display:block;width:120px;height:120px;object-fit:contain;flex:0 0 120px}.brand-domain{font-size:15px;font-weight:850;color:#6b7280;letter-spacing:.2px;white-space:nowrap}.navwrap,.topbar{min-height:136px}.footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.footer-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.footer-links a{color:#44546f;font-weight:650}.footer-links a:hover{text-decoration:underline}.legal-page{background:var(--bg);padding:46px 0 72px}.legal-wrap{width:min(940px,92%);margin:auto}.legal-hero{background:white;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow);margin-bottom:18px}.legal-hero h1{font-size:clamp(32px,5vw,48px);margin:7px 0 10px;letter-spacing:-1px}.legal-hero p{color:var(--muted);line-height:1.7;margin:0}.legal-card{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;margin:16px 0}.legal-card h2{font-size:23px;margin:0 0 12px}.legal-card h3{font-size:17px;margin:22px 0 8px}.legal-card p,.legal-card li{line-height:1.75;color:#34445f}.legal-card ul,.legal-card ol{padding-left:24px}.legal-card a{color:var(--blue);font-weight:700;text-decoration:underline}.legal-note{background:#eef4ff;border:1px solid #ceddff;border-radius:14px;padding:16px 18px;color:#243b68;line-height:1.65}.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.legal-meta span{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#52627b;font-size:12px;font-weight:700}
@media(max-width:980px){.brand-domain{font-size:13px}.brand-logo{width:82px;height:82px;flex-basis:82px}.navwrap,.topbar{min-height:98px}}
@media(max-width:640px){.site-header .brand-logo,.topbar .brand-logo{width:68px;height:68px;flex-basis:68px}.brand-domain{font-size:12px}.navwrap,.topbar{min-height:82px}.legal-card,.legal-hero{padding:21px}.footer-inner{align-items:flex-start;flex-direction:column}}

/* V4: deposit, referral points, admin editor */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.stat small{display:block;margin-top:6px;line-height:1.35}.deposit-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.deposit-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.deposit-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;cursor:pointer}.deposit-option:has(input:checked){border-color:#5b8ce5;box-shadow:0 0 0 3px #e7efff;background:#f8fbff}.deposit-option input{width:18px;height:18px}.deposit-option span{display:grid;gap:3px}.deposit-option strong{font-size:18px;color:var(--blue)}.deposit-option small{color:var(--muted)}.bank-card{display:flex;align-items:center;gap:18px;border:1px solid #b9d9f3;background:#f4fbff;border-radius:16px;padding:18px}.bca-logo{width:120px;height:auto;display:block}.bank-card div{display:grid;gap:4px}.bank-card span{font-size:13px;color:var(--muted)}.bank-card strong{font-size:25px;letter-spacing:1px;color:#073b6b}.bank-card b{font-size:14px}.status-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:850;letter-spacing:.2px}.status-pill.pending{background:#fff4d8;color:#8a5b00}.status-pill.approved{background:#e8f8ee;color:#126b32}.btn.whatsapp{background:#168a4a}.btn.whatsapp:hover{background:#0f6f3b}.editor-row{display:grid;grid-template-columns:120px minmax(220px,.7fr) minmax(320px,1.5fr);gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}.editor-row:last-child{border-bottom:0}.editor-wide{min-width:0}.switchline{display:flex;align-items:center;gap:7px;font-weight:700}.table-wrap input[type=number],.table-wrap input[type=text]{width:100%;min-width:110px;border:1px solid #ccd5e3;border-radius:9px;padding:9px 10px;font:inherit}.admin-nav{gap:12px}.admin-nav a{font-size:13px}
@media(max-width:980px){.deposit-grid{grid-template-columns:1fr}.editor-row{grid-template-columns:1fr 1fr}.editor-wide{grid-column:1/-1}}
@media(max-width:640px){.bank-card{align-items:flex-start;flex-direction:column}.bca-logo{width:105px}.editor-row{grid-template-columns:1fr}.editor-wide{grid-column:auto}.topbar .admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}.topbar .admin-nav a{background:#f3f6fb;border-radius:8px;padding:7px 9px}}

/* V5: saldo + referral selalu terlihat, biaya kredit per fitur, sertifikat khusus */
.member-utility{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;margin:0 0 22px}.member-credit-box,.member-referral-box{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(14,35,67,.05)}.member-credit-box{padding:16px 18px;background:linear-gradient(135deg,#fff8e7,#fff);display:flex;flex-direction:column;justify-content:center}.member-credit-box span{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#876012;font-weight:850}.member-credit-box strong{font-size:26px;color:#8b5a00;margin:4px 0}.member-credit-box a{font-size:12px;font-weight:800;color:var(--blue)}.member-referral-box{padding:14px 16px;background:linear-gradient(135deg,#f7fbff,#ffffff)}.member-referral-copy{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(320px,1.2fr);gap:16px;align-items:center}.member-referral-copy>div:first-child{display:grid;gap:4px}.member-referral-label{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--blue);font-weight:900}.member-referral-copy strong{font-size:15px;color:#173b7a;line-height:1.35}.member-referral-copy small{color:var(--muted);line-height:1.45}.member-referral-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.member-referral-action input{width:100%;min-width:0;border:1px solid #b8c8df;border-radius:10px;padding:10px 11px;background:#fff;font:inherit;font-size:13px;color:#334155}.member-referral-action .btn{white-space:nowrap}.admin-nav{flex-wrap:wrap}
@media(max-width:900px){.member-utility{grid-template-columns:1fr}.member-credit-box{display:grid;grid-template-columns:1fr auto;column-gap:14px}.member-credit-box a{grid-column:1/-1}.member-referral-copy{grid-template-columns:1fr}}
@media(max-width:640px){.member-referral-action{grid-template-columns:1fr}.member-credit-box strong{font-size:23px}.member-utility{margin-bottom:16px}.member-referral-box,.member-credit-box{border-radius:14px}.member-referral-copy strong{font-size:14px}}

/* V7: saldo kredit deposit dan saldo kredit referral dipisahkan */
.member-utility.member-utility-v7{grid-template-columns:210px 210px minmax(0,1fr);align-items:stretch}
.member-utility-v7 .member-credit-box{min-height:150px}
.member-utility-v7 .member-credit-box small{font-size:11.5px;line-height:1.45;color:var(--muted);margin:2px 0 8px;text-transform:none;letter-spacing:0;font-weight:600}
.member-utility-v7 .deposit-credit-card{background:linear-gradient(135deg,#fff8e7,#fffdf8);border-color:#f0dfb6}
.member-utility-v7 .deposit-credit-card span{color:#8a5a00}
.member-utility-v7 .deposit-credit-card strong{color:#8b5a00}
.member-utility-v7 .referral-credit-card{background:linear-gradient(135deg,#eef9ff,#ffffff);border-color:#c9e4f5}
.member-utility-v7 .referral-credit-card span{color:#0d5c86}
.member-utility-v7 .referral-credit-card strong{color:#0b6695}
.member-utility-v7 .member-referral-box{min-width:0}
@media(max-width:1080px){
  .member-utility.member-utility-v7{grid-template-columns:1fr 1fr}
  .member-utility-v7 .member-referral-box{grid-column:1/-1}
}
@media(max-width:640px){
  .member-utility.member-utility-v7{grid-template-columns:1fr}
  .member-utility-v7 .member-referral-box{grid-column:auto}
  .member-utility-v7 .member-credit-box{min-height:auto}
}