:root{--navy:#0d2e62;--blue:#1478c9;--teal:#10a9a0;--orange:#f38b23;--ink:#183047;--muted:#66778b;--bg:#f5fbfd;--white:#fff;--shadow:0 14px 40px rgba(13,46,98,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Inter","Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}a{color:inherit;text-decoration:none}.container{width:min(1160px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 2px 18px rgba(13,46,98,.08)}.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:cover;border-radius:12px}.brand b{font-size:22px;letter-spacing:.5px;color:var(--blue)}.brand i{font-style:normal;color:var(--orange)}.brand small{display:block;color:#6b7787;font-size:11px}.site-header nav{display:flex;align-items:center;gap:20px;font-weight:700;font-size:14px}.site-header nav a:hover{color:var(--blue)}.nav-cta,.mini-wa{background:var(--orange);color:#fff!important;padding:11px 16px;border-radius:999px}.menu-toggle{display:none;border:0;background:none;font-size:26px}.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#e8fbfb,#edf6ff);padding:72px 0}.hero:before{content:"";position:absolute;inset:0;background:url('../images/background-hijau-pak-wardi.jpg') center/cover;opacity:.14}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.eyebrow{color:var(--teal);font-weight:800;text-transform:uppercase;letter-spacing:1.2px}.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.03;margin:12px 0;color:var(--navy)}.hero h1 span{color:var(--orange)}.hero p{font-size:18px;color:#4d6378;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:12px;font-weight:800}.btn-primary{background:var(--blue);color:#fff}.btn-secondary{background:#fff;border:1px solid #c9d9e7}.hero-img{width:100%;border-radius:28px;box-shadow:var(--shadow)}.section{padding:48px 0}.section.alt{background:#fff}.section-head{text-align:center;max-width:760px;margin:0 auto 24px}.section-head h2{font-size:clamp(28px,4vw,42px);margin:8px 0;color:var(--navy)}.section-head p{color:var(--muted)}
.why-section{background:linear-gradient(135deg,#fff8ed,#eefbff)}.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.why-card{position:relative;overflow:hidden;background:#fff;border-radius:22px;padding:24px;min-height:190px;box-shadow:var(--shadow);border:1px solid #e7eef4;transition:transform .2s ease,box-shadow .2s ease}.why-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:6px}.why-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(13,46,98,.14)}.why-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:14px}.why-card h3{margin:0 0 8px;color:var(--navy);font-size:20px}.why-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}.why-blue:before{background:#1478c9}.why-blue .why-icon{background:#e4f2ff}.why-orange:before{background:#f38b23}.why-orange .why-icon{background:#fff0dd}.why-green:before{background:#18a96b}.why-green .why-icon{background:#e7faef}.why-purple:before{background:#7a4fd1}.why-purple .why-icon{background:#f0eaff}.why-pink:before{background:#e65391}.why-pink .why-icon{background:#ffe8f1}.why-teal:before{background:#10a9a0}.why-teal .why-icon{background:#e3faf8}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border-radius:20px;padding:24px;box-shadow:var(--shadow);border:1px solid #e5eef4}.card h3{margin:10px 0;color:var(--navy)}.card p{color:var(--muted);font-size:14px}.icon{width:50px;height:50px;border-radius:15px;background:#e6f7f7;display:grid;place-items:center;font-size:25px}.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.method{display:grid;grid-template-columns:160px 1fr;gap:22px;background:#fff;padding:18px;border-radius:20px;box-shadow:var(--shadow)}.method img{width:160px;height:120px;object-fit:cover;border-radius:15px}.method h3{margin:0 0 8px}.method ul{margin:0;padding-left:20px;color:var(--muted)}.banner-img{width:100%;border-radius:24px;display:block;box-shadow:var(--shadow)}.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.checklist{display:grid;gap:12px}.check{background:#fff;padding:15px 18px;border-radius:14px;box-shadow:0 8px 25px rgba(13,46,98,.07)}.check b{color:var(--navy)}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.article-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.article-card img{width:100%;height:190px;object-fit:cover}.article-card .body{padding:20px}.article-card h3{margin:0 0 8px}.meta{font-size:12px;color:var(--muted)}.faq-list{max-width:850px;margin:auto;display:grid;gap:12px}.faq-item{background:#fff;border-radius:14px;box-shadow:0 8px 25px rgba(13,46,98,.07);overflow:hidden}.faq-q{width:100%;text-align:left;border:0;background:#fff;padding:18px 20px;font:inherit;font-weight:800;cursor:pointer;display:flex;justify-content:space-between}.faq-a{max-height:0;overflow:hidden;padding:0 20px;color:var(--muted);transition:.25s}.faq-item.active .faq-a{max-height:400px;padding:0 20px 20px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery img{width:100%;height:250px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}.article-detail{max-width:860px;margin:auto;background:#fff;padding:38px;border-radius:24px;box-shadow:var(--shadow)}.article-detail h1{font-size:clamp(30px,4vw,48px);line-height:1.1;color:var(--navy)}.article-detail .cover{width:100%;border-radius:18px;margin:12px 0 25px}.article-detail p,.article-detail li{color:#475b70;font-size:16px}.article-detail h2{color:var(--navy);margin-top:30px}.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.seo-card{background:#fff;padding:22px;border-radius:18px;box-shadow:var(--shadow)}.cta{margin-top:0;background:linear-gradient(120deg,var(--navy),#1766a8);color:#fff;border-radius:28px;padding:42px}.cta h2{margin:0 0 8px}.footer{margin-top:0;background:#0b2447;color:#d8e6f4;padding:55px 0 0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}.footer h4{color:#fff}.footer a{display:block;margin:8px 0;color:#d8e6f4}.footer-brand{font-size:28px;font-weight:900;color:#fff}.footer-brand span{color:var(--orange)}.copyright{margin-top:40px;border-top:1px solid rgba(255,255,255,.12);padding:18px 4%;text-align:center;font-size:12px}.floating-wa{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#1ab35b;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.22);z-index:60;transition:transform .2s ease,box-shadow .2s ease}.floating-wa svg{width:36px;height:36px;display:block}.floating-wa:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(0,0,0,.28)}.admin-body{background:#f1f5f9}.admin-wrap{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:#0b2447;color:#fff;padding:24px;position:sticky;top:0;height:100vh}.sidebar a{display:block;padding:11px 12px;border-radius:9px;margin:5px 0;color:#d8e6f4}.sidebar a:hover{background:#16385f}.admin-main{padding:30px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.table-wrap{background:#fff;border-radius:16px;overflow:auto;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse}th,td{padding:13px;border-bottom:1px solid #e7edf3;text-align:left;font-size:14px}.form-card{background:#fff;padding:25px;border-radius:16px;box-shadow:var(--shadow);max-width:900px}.field{margin-bottom:16px}.field label{display:block;font-weight:800;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid #ccd9e4;border-radius:9px;font:inherit}.field textarea{min-height:180px}.admin-btn{display:inline-block;background:var(--blue);color:#fff;border:0;padding:11px 16px;border-radius:9px;font-weight:800;cursor:pointer}.danger{background:#d83a4b}.notice{background:#e9f8ee;color:#17643a;padding:12px;border-radius:9px;margin-bottom:15px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat{background:#fff;padding:22px;border-radius:15px;box-shadow:var(--shadow)}.stat b{display:block;font-size:30px;color:var(--navy)}@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:1fr 1fr}.article-grid,.seo-grid{grid-template-columns:1fr 1fr}.hero-grid,.split{grid-template-columns:1fr}.methods{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.site-header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.site-header nav.open{display:flex}.menu-toggle{display:block}.admin-wrap{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.stats{grid-template-columns:1fr 1fr}}@media(max-width:600px){.cards,.article-grid,.seo-grid,.gallery,.why-grid{grid-template-columns:1fr}.method{grid-template-columns:1fr}.method img{width:100%;height:190px}.hero{padding:42px 0}.section{padding:38px 0}.article-detail{padding:22px}.footer-grid{grid-template-columns:1fr 1fr}.brand small{display:none}}
/* FAQ modern */
.faq-page{background:linear-gradient(180deg,#f5fbfd 0%,#fff 55%)}
.faq-tools{max-width:900px;margin:0 auto 18px;display:flex;gap:10px;align-items:center}
.faq-search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dbe7ef;border-radius:14px;padding:0 15px;box-shadow:0 8px 25px rgba(13,46,98,.06)}
.faq-search span{font-size:25px;color:#7890a6}.faq-search input{width:100%;border:0;outline:0;padding:14px 0;background:transparent;font:inherit;color:var(--ink)}
.faq-expand{border:1px solid #cbdbe7;background:#fff;color:var(--navy);font:inherit;font-weight:800;padding:13px 16px;border-radius:12px;cursor:pointer;white-space:nowrap}
.faq-layout{max-width:1100px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.faq-item{border:1px solid #e1ebf2}.faq-q{gap:20px;align-items:center;color:var(--navy)}.faq-q span{flex:1}.faq-q b{width:30px;height:30px;border-radius:50%;background:#eaf7f7;color:var(--teal);display:grid;place-items:center;font-size:20px;flex:none}.faq-item.active .faq-q{background:#f7fcfc}.faq-a{background:#fbfdfe}.faq-a p{margin:0;line-height:1.7}.faq-help{position:sticky;top:100px;background:linear-gradient(145deg,#0d2e62,#1478c9);color:#fff;padding:25px;border-radius:20px;box-shadow:var(--shadow)}.faq-help .eyebrow{color:#9ff0e9}.faq-help h2{margin:8px 0;font-size:24px}.faq-help p{color:#e1edf7;font-size:14px}.faq-empty{background:#fff;border:1px dashed #cbdbe7;border-radius:14px;padding:22px;text-align:center;color:var(--muted)}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr}.faq-help{position:static}.faq-tools{max-width:100%}}
@media(max-width:600px){.faq-tools{align-items:stretch;flex-direction:column}.faq-expand{width:100%}.faq-q{padding:16px}.faq-a{padding-left:16px!important;padding-right:16px!important}.faq-item.active .faq-a{padding-bottom:17px!important}}
/* Full color theme */
:root{--navy:#12306b;--blue:#1677d2;--teal:#08a89b;--orange:#ff7a18;--pink:#e83e8c;--purple:#7048e8;--green:#20b26b;--yellow:#ffc107;--ink:#19324d;--muted:#5d7187;--bg:#eef8ff;--white:#fff;--shadow:0 14px 36px rgba(18,48,107,.13)}
body{background:linear-gradient(180deg,#eef8ff 0%,#f9f5ff 48%,#fff7ef 100%)}
.site-header{background:rgba(255,255,255,.98);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--teal),var(--blue),var(--purple),var(--orange)) 1}
.brand b{color:var(--blue)}.brand i{color:var(--orange)}
.site-header nav a:nth-child(1):hover{color:var(--teal)}.site-header nav a:nth-child(2):hover{color:var(--blue)}.site-header nav a:nth-child(3):hover{color:var(--orange)}.site-header nav a:nth-child(4):hover{color:var(--purple)}
.nav-cta,.mini-wa{background:linear-gradient(135deg,#ff7a18,#ffb000);box-shadow:0 8px 18px rgba(255,122,24,.25)}
.hero{background:linear-gradient(120deg,#dffaf7 0%,#e5f1ff 48%,#fff0e2 100%);padding:60px 0}
.hero:before{opacity:.18}.eyebrow{color:var(--teal)}.hero h1{color:var(--navy)}.hero h1 span{color:var(--orange)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 10px 22px rgba(70,72,232,.22)}.btn-secondary{background:linear-gradient(135deg,#fff,#eefcff);border:2px solid #bce7e2}
.section:nth-of-type(even){background:linear-gradient(135deg,#eafcff,#f3edff)}
.section.alt{background:linear-gradient(135deg,#fff7ed,#fff)}
.section-head h2{background:linear-gradient(90deg,var(--navy),var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.cards .card:nth-child(4n+1){border-top:5px solid var(--teal);background:linear-gradient(180deg,#edfffc,#fff)}
.cards .card:nth-child(4n+2){border-top:5px solid var(--blue);background:linear-gradient(180deg,#eef6ff,#fff)}
.cards .card:nth-child(4n+3){border-top:5px solid var(--orange);background:linear-gradient(180deg,#fff5e9,#fff)}
.cards .card:nth-child(4n+4){border-top:5px solid var(--purple);background:linear-gradient(180deg,#f4efff,#fff)}
.icon{background:linear-gradient(135deg,#dffaf7,#e8e0ff);color:var(--blue)}
.methods .method:nth-child(4n+1){background:linear-gradient(135deg,#e8fffb,#fff)}
.methods .method:nth-child(4n+2){background:linear-gradient(135deg,#edf5ff,#fff)}
.methods .method:nth-child(4n+3){background:linear-gradient(135deg,#fff2e4,#fff)}
.methods .method:nth-child(4n+4){background:linear-gradient(135deg,#f2edff,#fff)}
.method{border-left:5px solid var(--teal)}.method:nth-child(2){border-left-color:var(--blue)}.method:nth-child(3){border-left-color:var(--orange)}.method:nth-child(4){border-left-color:var(--purple)}
.check:nth-child(4n+1){border-left:4px solid var(--teal);background:#effffb}.check:nth-child(4n+2){border-left:4px solid var(--blue);background:#eff6ff}.check:nth-child(4n+3){border-left:4px solid var(--orange);background:#fff6eb}.check:nth-child(4n+4){border-left:4px solid var(--purple);background:#f5f0ff}
.article-card:nth-child(3n+1){border-top:5px solid var(--teal)}.article-card:nth-child(3n+2){border-top:5px solid var(--orange)}.article-card:nth-child(3n+3){border-top:5px solid var(--purple)}
.seo-card:nth-child(3n+1){background:linear-gradient(135deg,#eafffb,#fff);border-top:4px solid var(--teal)}.seo-card:nth-child(3n+2){background:linear-gradient(135deg,#fff4e8,#fff);border-top:4px solid var(--orange)}.seo-card:nth-child(3n+3){background:linear-gradient(135deg,#f2edff,#fff);border-top:4px solid var(--purple)}
.cta{background:linear-gradient(120deg,#12306b 0%,#1677d2 42%,#7048e8 72%,#e83e8c 100%);box-shadow:0 16px 38px rgba(70,72,232,.2)}
.footer{background:linear-gradient(135deg,#09234b,#12306b 55%,#3d277d)}
.floating-wa{background:linear-gradient(135deg,#18b964,#00a878);box-shadow:0 10px 28px rgba(0,145,100,.28)}
.faq-page{background:linear-gradient(180deg,#eafcff 0%,#f5efff 50%,#fff7ed 100%)}
.faq-item:nth-child(3n+1){border-left:5px solid var(--teal)}.faq-item:nth-child(3n+2){border-left:5px solid var(--blue)}.faq-item:nth-child(3n+3){border-left:5px solid var(--orange)}
.faq-q b{background:linear-gradient(135deg,#dffaf7,#e9e0ff);color:var(--purple)}
.faq-help{background:linear-gradient(145deg,#12306b,#1677d2 50%,#7048e8)}
/* Header full color */
.site-header{background:linear-gradient(100deg,#ffffff 0%,#eafffb 28%,#eef6ff 58%,#f5efff 80%,#fff4e7 100%);border-bottom:4px solid transparent;border-image:linear-gradient(90deg,#08a89b,#1677d2,#7048e8,#e83e8c,#ff7a18) 1;box-shadow:0 6px 24px rgba(18,48,107,.14)}
.nav-wrap{min-height:82px}.brand{padding:7px 12px 7px 7px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(231,255,251,.9));box-shadow:0 6px 18px rgba(22,119,210,.10)}.brand img{border:3px solid #fff;box-shadow:0 4px 12px rgba(18,48,107,.16)}
.brand b{background:linear-gradient(90deg,#08a89b,#1677d2,#7048e8,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent}.brand i{color:#ff7a18}.brand small{color:#526b84;font-weight:700}
.site-header nav{gap:8px}.site-header nav>a:not(.nav-cta){padding:10px 12px;border-radius:12px;transition:.2s ease;background:rgba(255,255,255,.55)}.site-header nav>a:nth-child(1){border-bottom:3px solid #08a89b}.site-header nav>a:nth-child(2){border-bottom:3px solid #1677d2}.site-header nav>a:nth-child(3){border-bottom:3px solid #ff7a18}.site-header nav>a:nth-child(4){border-bottom:3px solid #7048e8}.site-header nav>a:nth-child(5){border-bottom:3px solid #e83e8c}.site-header nav>a:nth-child(6){border-bottom:3px solid #20b26b}.site-header nav>a:not(.nav-cta):hover{transform:translateY(-2px);background:#fff;box-shadow:0 6px 16px rgba(18,48,107,.10)}
.nav-cta{width:46px;height:46px;padding:0!important;border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;background:linear-gradient(135deg,#18b964,#00a878);box-shadow:0 8px 20px rgba(0,145,100,.28);position:relative}.nav-cta:after{content:'WA';font-size:11px;font-weight:900;color:#fff}.nav-cta:hover{transform:translateY(-2px) scale(1.04)}
.menu-toggle{color:#1677d2;background:linear-gradient(135deg,#eafffb,#f0eaff);border-radius:12px;padding:8px 12px}
@media(max-width:900px){.site-header nav{top:82px;background:linear-gradient(180deg,#fff,#effcff 45%,#f6efff 75%,#fff5e9);padding:18px;border-bottom:3px solid #1677d2}.site-header nav>a:not(.nav-cta){background:#fff}.nav-cta{margin-top:4px;width:100%;height:auto;padding:12px!important;border-radius:12px}.nav-cta:after{content:'WhatsApp';font-size:14px}}
/* Branding header regional */
.brand span{min-width:0}.brand b{font-size:clamp(15px,1.7vw,21px);white-space:nowrap}.brand small{font-size:clamp(9px,.85vw,11px);line-height:1.25;white-space:normal;max-width:520px}
@media(max-width:900px){.brand small{display:block;max-width:280px;font-size:9px}.brand b{font-size:16px}.brand{gap:8px;padding-right:8px}.brand img{width:44px;height:44px}}
@media(max-width:600px){.nav-wrap{gap:8px}.brand{padding:5px 7px 5px 5px}.brand img{width:40px;height:40px}.brand b{font-size:13px}.brand small{font-size:8px;max-width:205px;line-height:1.15}.menu-toggle{font-size:22px;padding:7px 9px}}

/* Brand full-color */
.brand b{display:inline-block;background:linear-gradient(90deg,#00a99d 0%,#1677d2 28%,#7a42e8 52%,#f43f8c 74%,#ff7a18 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;}

/* Proportional modern typography */
body{font-size:16px;letter-spacing:0;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.brand b,.site-header nav,.btn,.faq-q,.admin-btn{font-family:"Inter","Segoe UI",Arial,sans-serif;letter-spacing:-.01em}
.hero h1,.section-head h2,.article-detail h1{letter-spacing:-.025em}
.brand small{letter-spacing:0}
@media(max-width:600px){body{font-size:15px}.hero p{font-size:16px}.section-head p{font-size:14px}}

/* Penyesuaian proporsi judul hero */
.hero h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;max-width:720px;letter-spacing:-.02em}
.hero h1 span{white-space:normal}
@media(max-width:600px){.hero h1{font-size:clamp(30px,8.5vw,38px);line-height:1.1;letter-spacing:-.015em}}