@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --primary:#1D63C4;--primary-hover:#1854A8;--navy:#0E2E54;
  --tint:#E8F1FD;--tint-2:#D4E5FA;--bg-soft:#F4F8FE;
  --text:#152A45;--muted:#5C7089;--border:#E2EAF4;--star:#FFB020;
  --r-sm:10px;--r-md:16px;--r-lg:22px;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --shadow:0 22px 44px -28px rgba(18,52,96,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{color:var(--navy);line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4.2vw,2.9rem)}
h2{font-size:clamp(1.4rem,2.5vw,1.95rem)}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 1em;color:var(--muted)}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}
.icon{width:20px;height:20px;flex-shrink:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font);font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 22px -12px rgba(29,99,196,.7)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--navy);box-shadow:0 8px 18px -14px rgba(18,52,96,.4)}
.btn-ghost:hover{border-color:var(--primary)}
.btn-sm{padding:.6rem 1.1rem;font-size:.86rem;border-radius:10px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:74px;position:relative;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{width:38px;height:38px;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text .name{font-weight:800;font-size:1.22rem;color:var(--navy);letter-spacing:-.02em}
.brand-text .tag{font-size:.68rem;color:var(--muted);font-weight:600}
.main-nav{display:flex;align-items:center;gap:1.6rem}
.main-nav a{font-weight:600;font-size:.9rem;color:var(--muted);position:relative;padding:.3rem 0}
.main-nav a:hover{color:var(--navy)}
.main-nav a.active{color:var(--primary)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:2.5px;border-radius:2px;background:var(--primary)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:24px;height:2.5px;border-radius:2px;margin:5px 0;background:var(--navy)}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,var(--tint) 0%,var(--bg-soft) 70%,#fff 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;align-items:stretch;min-height:440px}
.hero-copy{padding:3rem 0 4.6rem}
.eyebrow{display:inline-block;background:var(--tint-2);color:var(--navy);font-size:.8rem;font-weight:700;padding:.38rem .85rem;border-radius:8px;margin-bottom:1.1rem}
.hero-lede{font-size:1.02rem;max-width:42ch}
.badge-row{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:1.1rem 0 1.7rem}
.mini-badge{display:flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:var(--text)}
.mini-badge .dot{width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mini-badge .dot .icon{width:13px;height:13px;color:#fff}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-visual{position:relative;margin-right:calc(-1 * max(1.5rem, (100vw - 1200px)/2 + 1.5rem))}
.hero-visual svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-visual::before{content:"";position:absolute;inset:0 auto 0 0;width:14%;z-index:1;background:linear-gradient(90deg,#EEF4FD 0%,rgba(238,244,253,0) 100%);pointer-events:none}
.photo-note{z-index:2;position:absolute;left:1rem;bottom:4.8rem;background:rgba(255,255,255,.85);border:1px dashed #9DB8DC;color:var(--muted);font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:6px}
.badge-strip{display:none}

/* stats */
.stats-wrap{position:relative;z-index:3;margin-top:-3.4rem}
.stats-strip{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);padding:1.2rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{display:flex;align-items:center;gap:.85rem;padding:0 1.1rem;border-left:1px solid var(--border)}
.stat:first-child{border-left:none;padding-left:.2rem}
.stat .ic{width:46px;height:46px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat .ic .icon{width:22px;height:22px;color:var(--primary)}
.stat .num{font-size:1.2rem;font-weight:800;color:var(--navy);display:block;line-height:1.2}
.stat .label{font-size:.78rem;color:var(--muted);font-weight:600}

/* sections */
section{padding:3.2rem 0}
.section-head{text-align:center;max-width:660px;margin:0 auto 2rem}
.section-head .kicker{display:block;color:var(--primary);font-weight:700;font-size:.85rem;margin-bottom:.35rem}
.section-head p{font-size:.92rem;margin:0}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.4rem .9rem 1.3rem;text-align:center;transition:box-shadow .2s,transform .2s}
.svc-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.svc-card .ic{width:62px;height:62px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;margin:0 auto .9rem}
.svc-card .ic svg{width:32px;height:32px}
.svc-card h3{font-size:.95rem;margin-bottom:.35rem}
.svc-card p{font-size:.78rem;margin:0;line-height:1.5}

/* about */
.about-panel{background:linear-gradient(120deg,var(--tint) 0%,#F3F8FF 100%);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:.95fr 1.25fr;align-items:center}
.about-visual{position:relative;height:100%;min-height:250px}
.about-visual svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.about-copy{padding:2rem 2.4rem}
.chip{display:inline-block;background:var(--tint-2);color:var(--navy);font-size:.78rem;font-weight:700;padding:.3rem .75rem;border-radius:8px;margin-bottom:.8rem}
.about-copy p{font-size:.94rem}
.about-badges{display:flex;flex-wrap:wrap;gap:.6rem}
.about-badges .mini-badge{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.35rem .8rem .35rem .4rem;font-size:.78rem}
.about-badges .mini-badge .dot{width:22px;height:22px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.2rem .8rem;text-align:center}
.price-card .label{font-size:.84rem;font-weight:600;color:var(--text);display:block;margin-bottom:.25rem}
.price-card .price{font-size:1.32rem;font-weight:800;color:var(--navy);display:block;line-height:1.3}
.price-card .unit{font-size:.76rem;color:var(--muted)}
.price-foot{text-align:center;margin-top:1.4rem}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.3rem 1.4rem;display:flex;gap:1rem;align-items:flex-start;position:relative}
.testi-card::after{content:"\201D";position:absolute;right:1.1rem;bottom:.2rem;font-size:3rem;line-height:1;color:var(--tint-2);font-weight:800}
.avatar{width:54px;height:54px;border-radius:50%;flex-shrink:0;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.avatar svg{width:100%;height:100%;display:block}
.testi-card q{display:block;font-size:.88rem;color:var(--text);margin-bottom:.7rem;quotes:"\201C" "\201D"}
.testi-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.testi-meta strong{display:block;font-size:.86rem;color:var(--navy)}
.testi-meta span{font-size:.76rem;color:var(--muted)}
.testi-meta .stars{color:var(--star);font-size:.95rem;letter-spacing:1px;margin-right:1.6rem}

/* cta */
.cta{position:relative;background:linear-gradient(100deg,#1550A6 0%,var(--primary) 55%,#2C7BE0 100%);border-radius:var(--r-lg);padding:1.9rem 2.4rem;display:flex;align-items:center;justify-content:center;gap:2.4rem;flex-wrap:wrap;overflow:hidden}
.cta .copy{position:relative;z-index:2;text-align:center}
.cta .copy small{display:block;color:rgba(255,255,255,.8);font-weight:600;font-size:.84rem;margin-bottom:.15rem}
.cta .copy h2{color:#fff;margin:0;font-size:clamp(1.25rem,2.3vw,1.6rem)}
.cta .btn{position:relative;z-index:2;background:#fff;color:var(--navy);box-shadow:none}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 22%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.28) 100%);border:1px solid rgba(255,255,255,.45)}

/* footer */
.site-footer{border-top:1px solid var(--border);padding:1.8rem 0 1.4rem;margin-top:1rem}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.footer-top .brand-mark{width:32px;height:32px}
.footer-top .brand-text .name{font-size:1.05rem}
.footer-nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-nav a{font-size:.84rem;color:var(--muted);font-weight:600}
.footer-nav a:hover{color:var(--primary)}
.social{display:flex;gap:.55rem}
.social a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy);border:1px solid var(--border)}
.social a:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
.social .icon{width:17px;height:17px}
.footer-bottom{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}

/* bottom nav (mobile) */
.bottom-nav{display:none}

/* ============ responsive ============ */
@media (max-width:1080px){
  .main-nav{gap:1.1rem}
  .svc-grid,.price-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 18px 26px -18px rgba(18,52,96,.3);flex-direction:column;align-items:flex-start;gap:0;padding:.4rem 1.5rem 1rem;display:none}
  .main-nav a{width:100%;padding:.8rem 0;font-size:.98rem}
  .main-nav a.active::after{display:none}
  .site-header.open .main-nav{display:flex}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:1.8rem 0 1.2rem}
  .hero-copy .badge-row{display:none}
  .hero-actions{flex-direction:column;align-items:stretch;max-width:300px}
  .hero-visual{margin:0 -1.5rem;height:250px}
  .hero-visual::before{display:none}
  .photo-note{bottom:.8rem}
  .badge-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--border);padding:.9rem 0}
  .badge-strip div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;font-size:.74rem;font-weight:700;color:var(--navy);line-height:1.25;padding:0 .3rem;border-left:1px solid var(--border)}
  .badge-strip div:first-child{border-left:none}
  .badge-strip .dot{width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center}
  .badge-strip .dot .icon{width:16px;height:16px;color:#fff}
  .stats-wrap{margin-top:1.4rem}
  .stats-strip{grid-template-columns:1fr 1fr;gap:1rem 0;padding:1rem}
  .stat{padding:0 .7rem}
  .stat:nth-child(3){border-left:none;padding-left:.2rem}
  .about-panel{grid-template-columns:1fr}
  .about-visual{min-height:210px}
  .about-copy{padding:1.5rem}
  .testi-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  section{padding:2.2rem 0}
  .section-head{margin-bottom:1.4rem}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .svc-card{padding:.95rem .35rem .85rem}
  .svc-card .ic{width:50px;height:50px;margin-bottom:.55rem}
  .svc-card .ic svg{width:26px;height:26px}
  .svc-card h3{font-size:.78rem;margin:0}
  .svc-card p{display:none}
  .price-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .price-card .price{font-size:1.15rem}
  .stat .ic{width:38px;height:38px}
  .stat .ic .icon{width:18px;height:18px}
  .stat .num{font-size:1rem}
  .stat .label{font-size:.7rem}
  .cta{padding:1.6rem 1.3rem;gap:1.1rem}
  .footer-top{flex-direction:column;align-items:flex-start}
  .footer-nav{gap:.6rem 1.1rem}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--border);box-shadow:0 -10px 24px -18px rgba(18,52,96,.35);padding:.45rem .4rem calc(.45rem + env(safe-area-inset-bottom));align-items:flex-end}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.68rem;font-weight:700;color:var(--muted);padding:.25rem 0}
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav a .icon{width:22px;height:22px}
  .bottom-nav .wa{margin-top:-30px}
  .bottom-nav .wa .dot{width:58px;height:58px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 10px 20px -8px rgba(29,99,196,.75)}
  .bottom-nav .wa .dot .icon{width:28px;height:28px;color:#fff}
  body{padding-bottom:76px}
}

/* ======================================================================
   Halaman dalam (Tentang, Harga lengkap, Artikel, FAQ, Kontak)
   ====================================================================== */
.page-hero{background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);padding:2.6rem 0 2.2rem}
.page-hero p{max-width:58ch;font-size:1rem;margin:0}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.btn-text{color:var(--primary);font-weight:700}
.btn-block{width:100%}

/* daftar harga lengkap */
.price-category{margin-bottom:2.2rem}
.price-category h3{font-size:1.08rem;margin-bottom:.9rem;padding-bottom:.55rem;border-bottom:2px solid var(--tint-2);display:flex;align-items:center;gap:.6rem}
.price-category h3 .ic{width:34px;height:34px;border-radius:50%;background:var(--tint);display:inline-flex;align-items:center;justify-content:center}
.price-category h3 .ic svg{width:20px;height:20px}
.price-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.price-list .price-card{text-align:left;padding:1.1rem 1.2rem}
.price-list .price-card .label{font-weight:700}
.price-list .price-card .desc{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.price-note{background:var(--tint);border-radius:var(--r-md);padding:1rem 1.3rem;font-size:.92rem;color:var(--navy);margin-bottom:2rem}
@media (max-width:860px){.price-list{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.price-list{grid-template-columns:1fr}}

/* artikel */
.article-list{display:grid;gap:1rem}
.article-row{display:grid;grid-template-columns:120px 1fr;gap:1.4rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.4rem 1.5rem;transition:box-shadow .2s,transform .2s}
.article-row:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.article-row .date{font-weight:700;color:var(--primary);font-size:.86rem}
.article-row h3{font-size:1.12rem;margin-bottom:.4rem}
.article-row p{margin-bottom:.5rem;font-size:.92rem}
.article-row .read-more{font-size:.86rem;font-weight:700;color:var(--primary)}
@media (max-width:620px){.article-row{grid-template-columns:1fr;gap:.3rem}}
.article-detail-head{max-width:740px;margin:0 auto}
.article-detail-head .date{color:var(--primary);font-weight:700;font-size:.9rem}
.article-body{max-width:740px;margin:0 auto;font-size:1.02rem;line-height:1.75}
.article-body p{color:var(--text)}
.article-body img{max-width:100%;height:auto;border-radius:var(--r-sm)}

/* FAQ */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:.2rem 1.3rem;margin-bottom:.8rem}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--navy);padding:1rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.35rem;color:var(--primary);flex-shrink:0}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0;padding-bottom:1.1rem;font-size:.94rem}

/* Kontak / form */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6rem;align-items:start}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.8rem}
.contact-row{display:flex;gap:.9rem;margin-bottom:1.2rem}
.contact-row .ic{width:42px;height:42px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-row .ic .icon{color:var(--primary)}
.contact-row strong{display:block;color:var(--navy)}
.contact-row span{font-size:.9rem;color:var(--muted)}
.map-embed{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);margin-top:1.2rem}
.map-embed iframe{width:100%;height:210px;border:0;display:block}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.35rem;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;font-family:var(--font);font-size:1rem;padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-soft);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.92rem;margin-bottom:1.2rem}
.alert-error{background:#FDECEC;color:#8A2A2A;border:1px solid #F4CACA}
.alert-success{background:#E8F6EC;color:#245C34;border:1px solid #C6E6CF}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:600px){.field-row{grid-template-columns:1fr}.card{padding:1.3rem}}

.confirm-box{text-align:center;max-width:540px;margin:0 auto}
.confirm-box .ic-big{width:68px;height:68px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;box-shadow:0 14px 26px -12px rgba(29,99,196,.7)}
.confirm-box .ic-big .icon{width:32px;height:32px}