*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#0f172a;color:#e2e8f0;line-height:1.6}
a{color:#38bdf8;text-decoration:none}
a:hover{text-decoration:underline}
nav{background:#1e293b;padding:14px 20px;display:flex;align-items:center;gap:16px;border-bottom:2px solid #0ea5e9;position:sticky;top:0;z-index:100}
nav .logo{font-weight:700;font-size:1.2rem;color:#38bdf8;letter-spacing:.5px}
nav a.btn-wa{margin-left:auto;background:#25d366;color:#fff;padding:8px 18px;border-radius:8px;font-weight:600;font-size:.9rem}
.bc{background:#162032;padding:10px 20px;font-size:.82rem;color:#94a3b8;border-bottom:1px solid #1e3a5f}
.bc a{color:#38bdf8}
.bc span{margin:0 6px;color:#475569}
.hero{background:linear-gradient(135deg,#0c1a2e 0%,#1e3a5f 50%,#1a0c2e 100%);padding:60px 20px 50px;text-align:center}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);color:#f8fafc;font-weight:800;line-height:1.25;max-width:760px;margin:0 auto 16px}
.hero p{color:#94a3b8;font-size:1.05rem;max-width:600px;margin:0 auto 28px}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.badges span{background:#1e3a5f;border:1px solid #0ea5e9;color:#38bdf8;padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600}
.btn-cta{display:inline-block;background:#25d366;color:#fff;padding:14px 32px;border-radius:10px;font-weight:700;font-size:1.05rem;box-shadow:0 4px 16px rgba(37,211,102,.35)}
.btn-cta:hover{background:#1db954;text-decoration:none}
.sec{padding:50px 20px}
.sec-alt{background:#162032}
.wrap{max-width:960px;margin:0 auto}
h2{font-size:1.55rem;color:#f1f5f9;font-weight:700;margin-bottom:24px;border-left:4px solid #0ea5e9;padding-left:12px}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.about-card{background:#1e293b;border:1px solid #1e3a5f;border-radius:12px;padding:22px}
.about-card h3{color:#38bdf8;font-size:1rem;margin-bottom:12px}
.about-card ul{list-style:none}
.about-card ul li{padding:5px 0;border-bottom:1px solid #0f2a4a;font-size:.9rem;color:#cbd5e1;display:flex;justify-content:space-between}
.about-card ul li:last-child{border-bottom:none}
.about-card ul li span{color:#f1f5f9;font-weight:600}
.svc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;margin-top:20px}
.svc-mini{background:#1e293b;border:1px solid #1e3a5f;border-radius:10px;padding:16px 12px;text-align:center}
.svc-mini .icon{font-size:1.6rem;margin-bottom:8px}
.svc-mini .nm{font-size:.85rem;color:#e2e8f0;font-weight:600;margin-bottom:4px}
.svc-mini .pr{font-size:.82rem;color:#38bdf8;font-weight:700}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.tc-card{background:#1e293b;border:1px solid #1e3a5f;border-radius:12px;padding:20px}
.tc-card .stars{color:#fbbf24;font-size:1.1rem;margin-bottom:8px}
.tc-card p{font-size:.9rem;color:#cbd5e1;margin-bottom:10px;font-style:italic}
.tc-card .who{font-size:.82rem;color:#64748b}
.faq-item{border-bottom:1px solid #1e3a5f;padding:16px 0}
.faq-q{font-weight:600;color:#e2e8f0;cursor:pointer;font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.faq-q .arr{color:#0ea5e9;transition:transform .3s;font-size:1.1rem}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:#94a3b8;font-size:.9rem;line-height:1.7}
.faq-item.open .faq-a{max-height:300px;padding-top:10px}
.faq-item.open .arr{transform:rotate(180deg)}
.near-area{margin-top:20px}
.near-area .lk{display:inline-block;background:#1e293b;border:1px solid #0ea5e9;color:#38bdf8;padding:7px 14px;border-radius:20px;font-size:.82rem;margin:5px 4px;transition:background .2s}
.near-area .lk:hover{background:#0ea5e9;color:#0f172a;text-decoration:none}
.cta-box{background:linear-gradient(135deg,#064e3b,#0c2a1e);border:1px solid #10b981;border-radius:16px;padding:40px 30px;text-align:center;margin-top:20px}
.cta-box h2{border-left:none;padding-left:0;color:#f0fdf4}
.cta-box p{color:#a7f3d0;margin:12px 0 24px;font-size:1rem}
footer{background:#0a0f1e;border-top:1px solid #1e293b;padding:30px 20px;text-align:center;color:#475569;font-size:.82rem}
footer a{color:#38bdf8}
.anim{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.anim.vis{opacity:1;transform:none}

/* ── Perbaikan luber di layar kecil ──────────────────────────────────────
   Grid kolom tetap yang ditulis langsung di atribut style tidak pernah
   menyusut: track 1fr bertumpu pada lebar min-content isinya, jadi kartu
   ber-padding tebal memaksa halaman melebar dan bisa digeser ke samping.
   min-width:0 melepas batas itu; jumlah kolom diturunkan bertahap supaya
   isinya tetap terbaca, bukan sekadar tidak luber. */
@media(max-width:768px){
  [style*="grid-template-columns:repeat("]>*{min-width:0}
  [style*="repeat(4,1fr)"],[style*="repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
  [style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:430px){
  [style*="repeat(2,1fr)"],[style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(5,1fr)"]{grid-template-columns:1fr!important}
}

/* Tombol WhatsApp di header masih melebihi layar terkecil; dirampingkan
   agar muat tanpa menghilangkan tombolnya. */
@media(max-width:430px){
  nav .btn-wa{padding:7px 10px!important;font-size:11.5px!important;white-space:nowrap}
}


/* Shared performance safeguards */
img{max-width:100%;height:auto}
img[loading="lazy"]{content-visibility:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.anim{opacity:1!important;transform:none!important}}