/* Azzein Cipta Digital: tema kustom di atas Bootstrap 5.3.
   Warna, huruf, sudut, dan bentuk tombol diatur dari Admin > Tema (variabel di bawah ditimpa oleh theme_css()). */
:root{--navy:#0A2260;--royal:#1453B8;--azure:#1E90FF;--ice:#EEF4FF;--ink:#0F1B3D;--mut:#55627F;--line:#DCE5F5;--r:14px;--rb:999px;--navy2:#071a4a;--soft:#b9cbef;--soft2:#dbe7ff;--soft3:#9ccbff;--fh:'Fraunces',Georgia,serif;--fb:'Plus Jakarta Sans',system-ui,sans-serif;--shadow:0 30px 60px -34px rgba(10,34,96,.45)}

/* ===== Dasar ===== */
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;max-width:100%;font-family:var(--fb);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--fh);color:var(--navy);line-height:1.15;letter-spacing:-.01em}
a{text-decoration:none}
img,svg,video{max-width:100%}img{height:auto}
.wrap{width:min(1120px,92%);margin-inline:auto}.narrow{width:min(720px,92%)}.narrow2{width:min(860px,92%)}
.lead{font-size:1.1rem;font-weight:400;color:var(--mut);line-height:1.75}
.h1{font-size:clamp(2rem,4vw,3rem);font-weight:500}
.h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:500;letter-spacing:-.02em}
.sec{padding:clamp(56px,8vw,104px) 0}.soft{background:var(--ice)}
.sec-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}.sec-head .lead{margin:0}
.eyebrow{display:inline-block;font:600 .78rem var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--royal);margin-bottom:.9rem}
.dark{background:linear-gradient(160deg,var(--navy),var(--navy2));color:var(--soft2);--bs-heading-color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}.dark .lead{color:var(--soft)}.dark .eyebrow{color:var(--soft3)}
.fine{color:var(--mut);font-size:.9rem;max-width:80ch;margin-top:2rem}.dark .fine{color:var(--soft)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px;z-index:2000}.skip:focus{left:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--azure);outline-offset:2px}
.hp{position:absolute;left:-9999px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Tombol ===== */
.btn{--bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.72rem;--bs-btn-border-radius:var(--rb);--bs-btn-font-weight:600;font-family:var(--fb);transition:background .2s,border-color .2s,transform .15s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-lg{--bs-btn-padding-x:1.9rem;--bs-btn-padding-y:.9rem;--bs-btn-font-size:1rem;--bs-btn-border-radius:var(--rb)}
.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:var(--royal);--bs-btn-border-color:var(--royal);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--navy);--bs-btn-active-border-color:var(--navy);--bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);--bs-btn-disabled-bg:var(--royal);--bs-btn-disabled-border-color:var(--royal);box-shadow:0 12px 24px -14px var(--royal)}
.btn-ghost{--bs-btn-color:var(--navy);--bs-btn-bg:#fff;--bs-btn-border-color:var(--line);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--navy);--bs-btn-active-border-color:var(--navy)}
.btn-wa{--bs-btn-color:#fff;--bs-btn-bg:#1DA851;--bs-btn-border-color:#1DA851;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#168a41;--bs-btn-hover-border-color:#168a41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#168a41;--bs-btn-active-border-color:#168a41;box-shadow:0 12px 24px -14px #1DA851}
.btn-accent{--bs-btn-color:#fff;--bs-btn-bg:var(--azure);--bs-btn-border-color:var(--azure);--bs-btn-hover-color:var(--navy);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-color:var(--navy);--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff}
.btn-line-light{--bs-btn-color:#fff;--bs-btn-bg:transparent;--bs-btn-border-color:rgba(255,255,255,.4);--bs-btn-hover-color:var(--navy);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-color:var(--navy);--bs-btn-active-bg:#fff}
/* Kompatibilitas: tombol lama (class "btn", "btn ghost", "btn sm") di halaman demo dan admin */
.btn:not([class*=btn-]){--bs-btn-color:#fff;--bs-btn-bg:var(--royal);--bs-btn-border-color:var(--royal);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--navy);--bs-btn-active-border-color:var(--navy);--bs-btn-focus-shadow-rgb:var(--bs-primary-rgb)}
.btn.ghost{--bs-btn-color:var(--navy);--bs-btn-bg:#fff;--bs-btn-border-color:var(--line);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--navy);--bs-btn-active-border-color:var(--navy)}
.btn.sm,.sm2{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.42rem;--bs-btn-font-size:.875rem}
button:disabled{opacity:.45;cursor:not-allowed}

/* ===== Navigasi ===== */
.site-header{position:sticky;top:0;z-index:1030;isolation:isolate;border-bottom:1px solid rgba(10,34,96,.06)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.site-header .navbar{padding:.55rem 0;--bs-navbar-nav-link-padding-x:.85rem}
.site-header .navbar-brand{padding:0;margin-right:1.5rem}.site-header .navbar-brand img{height:46px;width:auto;max-width:none}
.site-header .nav-link{font-weight:500;font-size:.93rem;color:var(--ink);letter-spacing:.01em}
.site-header .nav-link:hover,.site-header .nav-link.active{color:var(--royal)}
.navbar-toggler{border:0;padding:.5rem;border-radius:12px}.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.25)}
@media(max-width:991.98px){
  .site-header .navbar-brand img{height:40px}
  .site-header .offcanvas{--bs-offcanvas-width:min(88vw,360px)}
  .site-header .nav-link{padding:1rem .25rem;font-size:1.08rem;border-bottom:1px solid var(--line)}
  .site-header .offcanvas-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
}

/* ===== Beranda: hero ===== */
.hero{position:relative;overflow:hidden;padding:clamp(44px,8vw,104px) 0 clamp(64px,9vw,120px);background:
  radial-gradient(900px 480px at 88% -10%,color-mix(in srgb,var(--azure) 20%,transparent),transparent 70%),
  radial-gradient(700px 420px at -5% 105%,color-mix(in srgb,var(--royal) 11%,transparent),transparent 70%),
  linear-gradient(180deg,#fff 0%,var(--ice) 100%)}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:500;line-height:1.06;letter-spacing:-.03em;margin-bottom:.45em}
.hero .lead{max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 2.5rem}
.facts{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin:0;padding-top:1.5rem;border-top:1px solid var(--line);max-width:660px}
.facts div{padding-right:1.25rem}.facts div+div{padding-left:1.25rem;border-left:1px solid var(--line)}
.facts dt{font:500 .78rem var(--fb);color:var(--mut);margin-bottom:.25rem}
.facts dd{margin:0;font:600 .95rem/1.35 var(--fb);color:var(--navy)}
.hvis{position:relative;padding-bottom:60px}
.orb{position:absolute;width:320px;height:320px;right:-60px;top:-20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--azure),var(--royal) 60%,transparent 72%);opacity:.22;filter:blur(30px);pointer-events:none}
.mock{position:relative;max-width:100%;background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 1px 0 #fff inset,0 50px 80px -40px rgba(10,34,96,.5),0 12px 24px -16px rgba(10,34,96,.25);overflow:hidden;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.mock-bar{display:flex;align-items:center;gap:6px;padding:14px 18px;background:linear-gradient(180deg,var(--navy),var(--navy2));color:var(--soft2);font-size:.8rem}
.mock-bar b{width:9px;height:9px;border-radius:50%;background:var(--soft)}.mock-bar span{margin-left:10px}
.mock-body{padding:.4rem 1.5rem 1.4rem}
.mock-row{padding:1.1rem 0;border-bottom:1px solid var(--line)}.mock-row:last-child{border:0}
.mock-row strong{display:block;color:var(--navy)}.mock-row small{color:var(--mut)}
.mock-prog{display:block;height:8px;background:var(--ice);border-radius:9px;margin-top:.7rem}
.mock-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--royal),var(--azure));border-radius:9px}
.chip{display:inline-block;margin-top:.6rem;background:var(--ice);color:var(--royal);font-weight:600;font-size:.8rem;padding:.3rem .75rem;border-radius:999px}
.mock2{position:absolute;left:-28px;bottom:0;width:250px;padding:1.1rem 1.25rem;background:var(--navy);color:var(--soft2);border-radius:16px;box-shadow:0 30px 50px -24px rgba(10,34,96,.7);animation:rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
.mock2 strong{display:block;color:#fff;font:600 1rem var(--fb);margin-bottom:.2rem}.mock2 small{display:block;color:var(--soft);font-size:.8rem;line-height:1.5}
@media(max-width:991.98px){.facts{max-width:none}.mock2{left:12px}.orb{width:200px;height:200px;right:0}}
@media(max-width:575.98px){
  .hero h1{font-size:2.2rem}
  .cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.cta .btn{padding-inline:.5rem}.cta .btn-wa{grid-column:1/-1}
  .facts{grid-template-columns:1fr;gap:.9rem}.facts div,.facts div+div{padding:0;border:0}
  .mock2{width:min(210px,70%)}
}

/* ===== Kartu umum ===== */
.card-soft{height:100%;padding:1.6rem;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);transition:border-color .2s,box-shadow .2s,transform .2s}
.card-soft:hover{border-color:color-mix(in srgb,var(--azure) 55%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}
.ico-box{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ice);color:var(--royal);font-size:1.3rem;margin-bottom:1rem}
.card-soft h3{font-family:var(--fb);font-weight:700;font-size:1.08rem;letter-spacing:0;margin-bottom:.4rem}
.card-soft p{margin:0;color:var(--mut);font-size:.95rem}

/* Layanan (latar gelap) */
.mod{height:100%;display:flex;flex-direction:column;padding:2rem 1.75rem;border:1px solid rgba(255,255,255,.14);border-radius:calc(var(--r) + 6px);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.mod h3{font-size:1.45rem;font-weight:500}.mod>p{color:var(--soft)}
.mod .ico-box{background:rgba(255,255,255,.1);color:var(--soft3)}
.tick{list-style:none;padding:0;margin:0}
.tick li{position:relative;padding:.38rem 0 .38rem 1.7rem;font-size:.95rem}
.tick li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;top:.38rem;color:var(--azure);font-size:1rem;line-height:1.5}
.mod .tick{flex:1}.mod .more{margin-top:1.1rem;color:var(--soft3);font-weight:600}.mod .more:hover{color:#fff}
.mod li.bonus{margin-top:.5rem;padding:.6rem .8rem .6rem 2.4rem;border-radius:10px;background:rgba(30,144,255,.16);color:#fff}.mod li.bonus::before{left:.8rem;top:.6rem}.mod li.bonus b{color:var(--soft3)}
.infra{border-left:4px solid var(--soft3);padding:.4rem 0 .4rem 1.5rem;max-width:760px;margin-top:2.5rem}.infra h3{font-size:1.25rem}.infra p{margin:0;color:var(--soft)}

/* Paket */
.pkg{height:100%;display:flex;flex-direction:column;padding:1.9rem 1.6rem;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 6px);box-shadow:0 1px 2px rgba(10,34,96,.04)}
.pkg.hot{background:linear-gradient(160deg,var(--navy),var(--navy2));color:var(--soft2);border-color:var(--navy);box-shadow:0 40px 60px -34px rgba(10,34,96,.7)}
.pkg.hot h3,.pkg.hot .price{color:#fff}.pkg.hot .pnote,.pkg.hot .pkg-desc{color:var(--soft)}
.pkg h3{font-size:1.3rem;font-weight:500}
.pkg-desc{font-size:.92rem;color:var(--mut);margin-bottom:1rem}.pkg-desc p:last-child{margin-bottom:0}
.tag{align-self:flex-start;background:var(--azure);color:#fff;font-size:.78rem;font-weight:600;padding:.28rem .8rem;border-radius:999px;margin-bottom:1rem}
.tag.plain{background:var(--ice);color:var(--royal)}
.price{font:600 1.7rem var(--fh);color:var(--navy);letter-spacing:-.01em}.pnote{display:block;color:var(--mut);font-size:.8rem;margin-top:.15rem}
.pkg .pkg-feat{flex:1;margin:1.1rem 0 1.5rem;font-size:.93rem}
.pkg .btn{width:100%}.pkg.hot .btn-primary{--bs-btn-bg:var(--azure);--bs-btn-border-color:var(--azure)}

/* Konten kaya dari editor admin (berita, deskripsi, fitur paket) */
.rich{overflow-wrap:break-word;word-break:normal;line-break:auto;hyphens:manual}
.rich>:first-child{margin-top:0}.rich>:last-child{margin-bottom:0}
.rich p{margin-bottom:1em}
.rich h2,.rich h3,.rich h4{margin:1.4em 0 .5em}.rich h2{font-size:1.6rem}.rich h3{font-size:1.3rem}.rich h4{font-size:1.1rem}
.rich ul,.rich ol{padding-left:1.4rem;margin-bottom:1em}.rich li{margin:.25em 0}
.rich blockquote{margin:1.2em 0;padding:.4em 0 .4em 1.1em;border-left:4px solid var(--azure);color:var(--mut);font-style:italic}
.rich a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
.rich .ql-align-center{text-align:center}.rich .ql-align-right{text-align:right}.rich .ql-align-justify{text-align:justify}
.prose{font-size:1.06rem;line-height:1.85}
/* daftar fitur paket: tanda centang, bukan bullet bawaan */
.pkg-feat ul{list-style:none;padding:0;margin:0}
.pkg-feat li{position:relative;padding:.3rem 0 .3rem 1.6rem;margin:0}
.pkg-feat li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;top:.3rem;color:var(--azure)}
.pkg-feat p{margin:0 0 .4rem}.pkg.hot .pkg-feat a{color:var(--soft3)}

/* Solusi bisnis */
.biz{margin-top:1.5rem;padding:clamp(28px,5vw,48px);border-radius:calc(var(--r) + 10px);color:var(--soft2);background:
  radial-gradient(560px 300px at 100% 0%,color-mix(in srgb,var(--azure) 28%,transparent),transparent 70%),
  linear-gradient(135deg,var(--navy),var(--navy2))}
.biz h3{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:500;margin-bottom:.4em}
.biz-main>p{color:var(--soft);max-width:44ch}.biz .price{color:#fff;font-size:1.9rem}.biz .pnote{color:var(--soft)}
.biz-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.biz-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.75rem}
.biz-list li{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.16)}
.biz-list b{display:block;color:#fff;font:600 1.05rem var(--fb);margin-bottom:.2rem}.biz-list span{color:var(--soft);font-size:.9rem}
@media(max-width:575.98px){.biz-list{grid-template-columns:1fr}.biz-cta .btn{flex:1 1 100%}}

/* Alur */
.steps{list-style:none;padding:0;margin:0}
.steps li{height:100%;padding:1.4rem 1.25rem 0 0;border-top:3px solid var(--royal)}
.steps li:nth-child(3){border-color:var(--azure)}.steps li:nth-child(4){border-color:var(--soft3)}
.steps b{color:var(--royal);font-size:.85rem}.steps h3{font-family:var(--fb);font-weight:700;font-size:1.1rem;margin:.25rem 0}.steps p{color:var(--mut);margin:0;font-size:.93rem}
@media(max-width:767.98px){
  .steps li{border-top:0;border-left:3px solid var(--azure);padding:0 0 1.5rem 1.25rem;margin-left:6px;position:relative;height:auto}
  .steps li::before{content:"";position:absolute;left:-9px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--royal);border:3px solid var(--ice)}
}

/* FAQ (accordion Bootstrap) */
.faq .accordion{--bs-accordion-border-color:var(--line);--bs-accordion-border-radius:12px;--bs-accordion-inner-border-radius:11px;--bs-accordion-btn-focus-box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.2);--bs-accordion-active-bg:#fff;--bs-accordion-active-color:var(--navy);--bs-accordion-btn-padding-y:1.1rem;--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-body-padding-x:1.25rem}
.faq .accordion-item{margin-bottom:.7rem;border-radius:12px;overflow:hidden}
.faq .accordion-button{font-weight:600;color:var(--navy)}.faq .accordion-body{color:var(--mut)}

/* Berita */
.news-item{display:block;height:100%;padding:1.6rem;color:inherit;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);transition:border-color .2s,box-shadow .2s,transform .2s}
.news-item:hover{border-color:var(--azure);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.news-item h3{font-size:1.2rem;margin:.35rem 0 .5rem}.news-item p{margin:0;color:var(--mut);font-size:.93rem}
.meta{color:var(--mut);font-size:.8rem}.back{color:var(--royal);font-weight:600}
.art{margin-top:1rem}.more{color:var(--royal);font-weight:600}
.split{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}

/* Formulir kontak */
.form-card,.form{background:#fff;color:var(--ink);padding:clamp(22px,4vw,36px);border-radius:calc(var(--r) + 8px);box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
.form-card .form-label{font-weight:600;font-size:.85rem;color:var(--navy)}
.form-control,.form-select{border-color:#c5d3ee;border-radius:calc(var(--r) - 4px);padding:.7rem .9rem;min-height:48px;font-size:1rem}
.form-control:focus,.form-select:focus{border-color:var(--azure);box-shadow:0 0 0 .22rem rgba(var(--bs-primary-rgb),.18)}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]):not(.form-control):not(.form-check-input),select:not(.form-select),textarea:not(.form-control){font:400 1rem var(--fb);padding:.7rem .9rem;border:1px solid #c5d3ee;border-radius:10px;width:100%;background:#fff;color:var(--ink)}

/* Alert (kompatibel dengan kelas lama .ok/.err) */
.alert.ok{--bs-alert-bg:#e3f6ea;--bs-alert-color:#14532d;--bs-alert-border-color:#bfe5cb}
.alert.err{--bs-alert-bg:#fde8e8;--bs-alert-color:#7f1d1d;--bs-alert-border-color:#f5c2c2}

/* Footer */
.foot{background:var(--navy2);color:var(--soft);padding:clamp(44px,6vw,64px) 0 0;font-size:.95rem}
.foot h4{font-family:var(--fb);color:#fff;font-size:1rem;font-weight:700;margin:0 0 .8rem;letter-spacing:0}
.foot a{display:block;color:var(--soft);padding:.2rem 0}.foot a:hover{color:#fff}
.foot p{margin:0;max-width:36ch}.logo-foot img{height:60px;width:auto;max-width:150px;object-fit:contain;margin-bottom:.9rem}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding:1.1rem 0;font-size:.8rem}

/* Tombol WhatsApp mengambang */
.mbar{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));z-index:1020;width:58px;height:58px}
.mbar .mb-wa{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#2BD96B,#1AA34A);color:#fff;border:2px solid rgba(255,255,255,.9);box-shadow:0 12px 26px -8px rgba(26,163,74,.65),0 3px 8px rgba(10,34,96,.18);transition:transform .18s,box-shadow .18s}
.mbar .mb-wa::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(37,211,102,.45);animation:wapulse 2.6s ease-out infinite}
@keyframes wapulse{0%{transform:scale(.88);opacity:.9}70%,100%{transform:scale(1.18);opacity:0}}
.mbar .mb-wa:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 30px -8px rgba(26,163,74,.75),0 3px 8px rgba(10,34,96,.2);color:#fff}
.mbar .mb-wa:active{transform:scale(.94)}
.mbar .mb-wa .ico{width:30px;height:30px}
@media(max-width:575.98px){.mbar{width:54px;height:54px}.mbar .mb-wa{width:54px;height:54px}.mbar .mb-wa .ico{width:28px;height:28px}body{padding-bottom:0}.foot{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ===== Demo ===== */
.narrow2{width:min(860px,92%)}
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 12px}
.dcard{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dcard h2{font-size:1.4rem}.dcard p{color:var(--mut);margin-top:0}.dcard ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.dcard li{position:relative;padding:5px 0 5px 22px;font-size:15px}.dcard li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;background:var(--azure)}
.dcard .btn{text-align:center}
.tabs{display:flex;gap:8px;margin:24px 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 16px;font:600 15px var(--fb);color:var(--mut);cursor:pointer;min-height:48px}
.tabs button.on{color:var(--royal);border-color:var(--royal)}
.box{border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px;background:#fff;display:block}
.box>form,form.box{display:grid;gap:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.box label,.dsite label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--navy)}
.nav2{display:flex;gap:10px;justify-content:space-between;margin-top:10px;flex-wrap:wrap}
.dtools{display:flex;gap:8px;margin:18px 0}.dtools .btn{padding:9px 20px}
.frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 50px -35px rgba(10,34,96,.5);margin:0 auto 22px;transition:max-width .3s;max-width:100%}
.frame.mob{max-width:390px}
.fbar{display:flex;align-items:center;gap:6px;background:var(--navy);color:var(--soft2);font-size:13px;padding:11px 14px}.fbar b{width:9px;height:9px;border-radius:50%;background:var(--soft)}.fbar span{margin-left:10px}
.dsite{background:#fff;min-height:360px}.dsite section{padding:24px}.dsite h3{font-size:1.4rem}.dsite h4{font-size:1.05rem;margin:.8em 0 .2em}.dsite p{color:var(--mut);margin:.3em 0}
.dnav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}.dnav strong{font-family:var(--fh);color:var(--navy);font-size:1.15rem}
.dnav nav{display:flex;gap:4px;flex-wrap:wrap}.dnav button{background:none;border:0;padding:8px 12px;border-radius:8px;font:500 14px var(--fb);cursor:pointer;color:var(--ink)}.dnav button.on{background:var(--ice);color:var(--royal);font-weight:600}
.dhero{background:linear-gradient(135deg,var(--navy),var(--royal));color:#fff;border-radius:12px;padding:34px 26px}.dhero h2{color:#fff;font-size:1.7rem}.dhero p{color:var(--soft2)}
.dbtn{display:inline-block;background:var(--azure);color:#fff;padding:9px 20px;border-radius:999px;font-weight:600;font-size:14px;margin-top:10px}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.dstats div{background:var(--ice);border-radius:10px;padding:16px;text-align:center}.dstats b{font:700 1.6rem var(--fh);color:var(--navy);display:block}.dstats small{color:var(--mut)}
.dnews{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}.dnews.fresh{border-color:var(--azure);background:var(--ice)}.dnews small{color:var(--mut)}.dnews h4{margin:.2em 0;font-size:1.05rem}
.dgal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.dgal i{display:flex;align-items:flex-end;height:110px;border-radius:10px;color:#fff;font:600 13px var(--fb);padding:10px;font-style:normal}
.pbar{display:flex;list-style:none;padding:0;margin:0 0 16px;gap:6px}.pbar li{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--mut);padding:8px 4px;border-bottom:4px solid var(--line)}.pbar li.on{color:var(--royal);border-color:var(--royal)}
.jurs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jur{display:flex!important;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;min-height:52px}
.jur input{width:auto}.jur:has(input:checked){border-color:var(--royal);background:var(--ice)}
.sum{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin:0}.sum dt{color:var(--mut);font-size:14px}.sum dd{margin:0;font-weight:600}
.kartu{border:2px solid var(--navy);border-radius:14px;padding:20px;margin:16px 0;background:#fff;max-width:460px}
.kh{display:flex;justify-content:space-between;color:var(--navy);gap:10px;margin-bottom:8px}.kn{font:700 1.6rem var(--fh);color:var(--royal);margin:6px 0 12px}.kartu small{color:var(--mut)}
.bars{display:grid;gap:10px}.bars div{display:grid;gap:4px;font-size:14px}.bars i{display:block;height:10px;background:linear-gradient(90deg,var(--royal),var(--azure));border-radius:9px;min-width:4px}
.exh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.timer{font:700 1.2rem var(--fb);background:var(--ice);color:var(--royal);padding:6px 14px;border-radius:999px}.timer.low{background:#fde8e8;color:#b91c1c}
.qnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.qnav button{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;font-weight:600;cursor:pointer}
.qnav .an{background:var(--ice);border-color:var(--azure);color:var(--royal)}.qnav .fl{background:#fff4d6;border-color:#f0b429}.qnav .cur{outline:3px solid var(--azure);outline-offset:1px}
.qt{font-size:1.25rem}.opts{display:grid;gap:10px;margin:14px 0}.opt{display:flex!important;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;font-weight:500!important;min-height:52px}
.opt input{width:auto}.opt.sel{border-color:var(--royal);background:var(--ice)}.chk{display:flex!important;align-items:center;gap:8px;grid-template-columns:none}.chk input{width:auto;min-height:0}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#eef0f5;color:var(--mut)}.badge.g{background:#e3f6ea;color:#14532d}.badge.b{background:var(--ice);color:var(--royal)}
.box table{width:100%;border-collapse:collapse;font-size:14px}.box td,.box th{padding:10px;border-bottom:1px solid var(--line);text-align:left}
button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.dcards,.grid2,.jurs{grid-template-columns:1fr}.sum{grid-template-columns:1fr 1fr}.pbar li{font-size:11px}.dstats{gap:8px}.nav2 .btn{flex:1}.dgal i{height:84px}}
@media print{body *{visibility:hidden}#kartu,#kartu *{visibility:visible}#kartu{position:absolute;left:0;top:0;width:100%;max-width:none}}

/* ===== Admin: trafik dan tema ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}.stat b{display:block;font:700 1.9rem var(--fh);color:var(--navy)}.stat small{color:var(--mut)}
.stat.go{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;text-align:center}
.range{display:flex;gap:8px;margin:0 0 18px}.range a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:14px}.range a.on{background:var(--royal);border-color:var(--royal);color:#fff}
.chartw{overflow-x:auto}.chart{display:flex;align-items:flex-end;gap:3px;height:190px;min-width:100%;padding-top:10px}
.chart .cb{flex:1;min-width:7px;height:100%;position:relative}.chart .cb i{position:absolute;bottom:0;left:12%;right:12%;border-radius:4px 4px 0 0;display:block}
.chart .pvb{background:var(--soft3)}.chart .uvb{background:var(--royal)}
.axis{display:flex;justify-content:space-between;color:var(--mut);font-size:12px;margin-top:6px}
.legend{display:flex;gap:16px;font-size:13px;color:var(--mut);margin-bottom:6px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.g3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}.hbar{display:grid;gap:4px;margin-bottom:12px;font-size:14px}.hbar i{display:block;height:8px;border-radius:8px;background:var(--royal);min-width:3px}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pc{display:flex!important;flex-direction:column;gap:8px;border:2px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font-weight:600}
.pc input{position:absolute;opacity:0}.pc:has(input:checked){border-color:var(--royal);box-shadow:0 0 0 3px var(--ice)}.sw{display:flex;height:28px;border-radius:8px;overflow:hidden}.sw i{flex:1}
.opts2{display:flex;gap:10px;flex-wrap:wrap}.opts2 label{display:flex!important;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600}.opts2 input{width:auto}
.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.colors input[type=color]{padding:2px;height:46px;cursor:pointer}
.pvw{border:1px solid var(--line);border-radius:var(--pr,14px);overflow:hidden;background:var(--pice)}.pvh{background:var(--pnavy);color:#fff;padding:14px 18px;font-weight:700}
.pvb{padding:20px}.pvb h3{margin:0 0 6px;color:var(--pnavy)}.pvb p{margin:0 0 14px;color:#55627f}.pvt{display:inline-block;background:var(--pazure);color:#fff;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-right:10px}
.pvbtn{display:inline-block;background:var(--proyal);color:#fff;padding:10px 22px;border-radius:var(--pb,999px);font-weight:600;font-size:14px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.g3,.presets,.colors{grid-template-columns:1fr}.presets{grid-template-columns:1fr 1fr}}


/* ===== Admin ===== */
.admin-body{background:#f4f7fc;min-height:100vh}
.admin-nav{background:var(--navy);position:sticky;top:0;z-index:1030;padding:.35rem 0}
.admin-nav .navbar-brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;font-size:1rem}
.admin-nav .nav-link{color:#cfe0ff;font-weight:600;font-size:.9rem;border-radius:10px;padding:.55rem .85rem;display:flex;align-items:center;gap:.4rem}
.admin-nav .nav-link:hover,.admin-nav .nav-link.on{color:#fff;background:rgba(255,255,255,.12)}
.admin-nav .navbar-toggler{border:1px solid rgba(255,255,255,.35)}.admin-nav .navbar-toggler-icon{filter:invert(1)}
.adm-title{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,24px);margin-bottom:1.25rem;box-shadow:0 12px 30px -24px rgba(10,34,96,.35)}
.panel-title{font:700 1rem var(--fb);color:var(--navy);margin:0 0 1rem}
.msg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;margin-bottom:.9rem}
.msg-card.unread{border-left:4px solid var(--azure);background:#fbfdff}
.msg-card .who{font-weight:700;color:var(--navy)}.msg-card .pkgname{display:inline-block;font-size:.78rem;font-weight:600;color:var(--royal);background:var(--ice);padding:.15rem .6rem;border-radius:999px;margin-bottom:.4rem}
.table-adm{--bs-table-bg:transparent;margin:0;font-size:.92rem}.table-adm th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);border-bottom-width:1px}
.adm .stat{height:100%}
/* Editor teks kaya (Quill) */
.rte .ql-toolbar.ql-snow{border-color:#c5d3ee;border-radius:10px 10px 0 0;background:#f8faff;font-family:var(--fb)}
.rte .ql-container.ql-snow{border-color:#c5d3ee;border-radius:0 0 10px 10px;font-family:var(--fb);font-size:1rem;background:#fff}
.rte .ql-editor{min-height:200px;line-height:1.7;color:var(--ink)}.rte[data-mode=lite] .ql-editor{min-height:110px}
.rte .ql-editor.ql-blank::before{font-style:normal;color:#8a96b2}
.rte.is-invalid .ql-toolbar,.rte.is-invalid .ql-container{border-color:#dc3545}
.rte-hint{display:none;color:#dc3545;font-size:.85rem;margin-top:.35rem}.rte.is-invalid+.rte-hint{display:block}
@media(max-width:575.98px){.rte .ql-toolbar.ql-snow{padding:6px}.rte .ql-editor{min-height:170px}}
@media(max-width:991.98px){.admin-nav .nav-link{padding:.8rem .6rem}}

/* ===== Demo: bagian SEO dan tampilan ponsel modern ===== */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem;color:var(--mut);margin:0 0 10px;padding:0;list-style:none}
.crumb li+li::before{content:"/";margin-right:6px;color:var(--line)}.crumb a{color:var(--royal);font-weight:600}
.seo-sec{margin-top:2.5rem}.seo-sec h2{font-size:1.4rem;margin-bottom:.4rem}.seo-sec>p{color:var(--mut);max-width:70ch}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1rem 0 0}
.seo-grid article{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}.seo-grid h3{font-size:1.05rem;font-family:var(--fb);font-weight:700;margin:.2em 0}.seo-grid p{margin:0;color:var(--mut);font-size:.92rem}
.faq-d details{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;background:#fff;transition:box-shadow .2s}.faq-d details[open]{box-shadow:var(--shadow);border-color:var(--azure)}
.faq-d summary{font-weight:600;cursor:pointer;color:var(--navy);min-height:28px}.faq-d p{margin:.6em 0 0;color:var(--mut)}
.cta-band{margin-top:2rem;padding:clamp(22px,5vw,36px);border-radius:22px;color:var(--soft2);background:linear-gradient(135deg,var(--navy),var(--royal));display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}.cta-band h2{color:#fff;font-size:1.35rem;margin:0}.cta-band p{margin:.3em 0 0;color:var(--soft)}
.box,.dcard,.seo-grid article{transition:transform .2s,box-shadow .2s}
@media(max-width:760px){
 body{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .sec{padding-block:26px}.wrap,.narrow2{width:calc(100% - 32px)}
 h1.art{font-size:1.7rem;line-height:1.2}.lead{font-size:1rem}
 .tabs{position:sticky;top:60px;z-index:30;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;margin:14px -16px 14px;padding:10px 16px;border:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scrollbar-width:none;border-bottom:1px solid var(--line)}
 .tabs::-webkit-scrollbar{display:none}
 .tabs button{flex:none;scroll-snap-align:center;border:1px solid var(--line);border-radius:999px;background:#fff;padding:10px 18px;min-height:46px;white-space:nowrap}
 .tabs button.on{background:var(--royal);border-color:var(--royal);color:#fff;box-shadow:0 10px 20px -12px var(--royal)}
 .box{padding:16px;border-radius:20px;box-shadow:0 14px 34px -26px rgba(10,34,96,.55)}
 .box input,.box select,.box textarea,.dsite input,.dsite select{min-height:50px;font-size:16px;border-radius:14px;padding:12px 14px;border:1px solid var(--line);width:100%}
 .box .btn,.dsite .btn{min-height:50px}
 .nav2{position:sticky;bottom:0;z-index:25;margin:14px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-radius:0 0 20px 20px}
 body:has(.nav2:not([hidden])) .mbar{bottom:calc(88px + env(safe-area-inset-bottom))}
 .pbar{overflow-x:auto;scrollbar-width:none}.pbar li{min-width:76px}
 .jur,.opt{padding:16px;border-radius:14px}
 /* tabel menjadi kartu */
 .box table,.box tbody{display:block;width:100%}
 .box table tr:has(>th),.box thead{display:none}
 .box table tr{display:block;border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:10px;background:#fff}
 .box table td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:7px 0;text-align:right;font-size:14px}
 .box table td::before{content:attr(data-label);flex:none;font-weight:600;color:var(--mut);text-align:left}
 .box table td:empty::before{display:none}
 .cb-x,.act button{min-height:40px;padding:8px 14px}
 .kartu{max-width:none}
 .dtools{overflow-x:auto}
 .seo-sec{margin-top:2rem}.cta-band{border-radius:20px}.cta-band .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}