/* ============ Base ============ */
:root{
  --bg:#0e0f13;--card:#151821;--soft:#1f2430;--txt:#e9ecf1;--muted:#aeb6c2;
  --brand:#5b8cff;--brand-2:#20c997;--line:rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#0b0c10);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:#cfe0ff;text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn-outline{background:transparent;border-color:var(--line)}
.btn-sm{padding:8px 12px;font-size:.9rem;border-radius:10px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(21,24,33,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:#fff;text-decoration:none}
.brand .logo{width:60px;height:60px;object-fit:contain}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;color:#fff;padding:8px 10px}
.nav-list{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.nav-list a{color:#fff;opacity:.9}
@media (max-width: 860px){
  .nav-toggle{display:block}
  .nav-list{position:absolute;right:16px;top:70px;background:#141825;border:1px solid var(--line);padding:12px;border-radius:12px;display:none;flex-direction:column;gap:10px;min-width:180px}
  .nav-list.show{display:flex}
}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;padding:42px 0}
.hero-content h1{font-size:clamp(28px,4.5vw,48px);margin:.2rem 0 10px}
.accent{background:linear-gradient(90deg,#8ab4ff,#5b8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-row{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.trust{display:flex;gap:16px;opacity:.8;margin-top:14px}
.hero-media img{border-radius:16px;border:1px solid var(--line)}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.feature-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
@media (max-width: 900px){.features{grid-template-columns:1fr}}

/* Split */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin:32px 0}
.split figure img{border-radius:14px;border:1px solid var(--line)}
.check{padding-left:18px}
.check li{margin:.35rem 0}
@media (max-width: 900px){.split{grid-template-columns:1fr}}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);}
.gap{gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.card img{border-radius:12px;margin-bottom:10px;border:1px solid var(--line)}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* Testimonials */
.testimonials h2{text-align:center;margin-top:10px}
.testimonial-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
blockquote{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;font-style:italic}
cite{display:block;color:var(--muted);margin-top:10px}
@media (max-width: 900px){.testimonial-row{grid-template-columns:1fr}}

/* Pricing */
.pricing{margin-top:14px}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.price-card .price{font-size:1.8rem;font-weight:800;margin:8px 0}
.price-card.featured{outline:2px solid var(--brand);background:linear-gradient(180deg,rgba(91,140,255,.1),transparent);}

/* CTA Banner */
.cta-banner{background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(32,201,151,.18));padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-content{text-align:center}
.cta-content .cta-row{justify-content:center}

/* Pages */
.page{padding:32px 0}
.small{font-size:.9rem}
.rounded{border-radius:12px;border:1px solid var(--line)}

/* Footer */
.site-footer{margin-top:38px;border-top:1px solid var(--line);background:#0c0f16}
.footer-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:20px;padding:24px 0}
.brand-mini{display:flex;gap:10px;align-items:center;font-weight:800}
.brand-mini img{width:28px;height:28px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:.35rem 0}
.socials{display:flex;gap:10px;margin-top:8px}
.copyright{text-align:center;color:var(--muted);border-top:1px solid var(--line);padding:12px 0}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}

/* ================================
   CENTERING FIX (GLOBAL CONTAINER)
   ================================ */
:root{
  --container-max: 1120px;
  --container-pad: 20px;  /* kanan-kiri */
}

/* Gunakan width dinamis + margin-inline:auto agar selalu center */
.container{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
  padding-inline: 0; /* padding sudah di width calc */
}

/* Header pakai container yang sama supaya benar2 center */
.site-header .header-inner{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
}

/* Hero section = container + grid, pastikan ikut center */
.hero{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 56px 0;
}

/* Gambar hero proporsional */
.hero-media img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* Logo klien rapi & tidak kegedean */
.trust{
  display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin-top: 18px; background: #fff;
}
.trust img{ height: 40px; width:auto; object-fit: contain;  opacity:.9 }

/* Section grid lain juga otomatis center karena pakai .container.
   Kita rapikan tinggi kartu agar konsisten */
.card{
  display:flex; flex-direction:column; gap:10px;
  background: var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  min-height: 280px;
}
.card img{ width:100%; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--line) }

/* Split (Hasil Berbicara) konsisten & center */
.split{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:center;
  margin-block: 48px;
}
.split figure img{ border-radius: 12px; }

/* Testimonials: batasi lebar & rata tengah */
.testimonials{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
}
.testimonial-row blockquote{ min-height: 140px }

/* CTA banner (full-bleed), tapi inner container tetap center */
.cta-banner{ padding: 40px 0; }
.cta-banner .container{ width: min(var(--container-max), 100% - (var(--container-pad) * 2)); margin-inline:auto; }

/* Footer grid tetap center */
.site-footer .footer-grid{
  width: min(var(--container-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
}

/* Bonus: cegah <img> tanpa file memunculkan alt text "aneh" */
img[src=""], img:not([src]){ display:none; }