/* Reset dasar */
:root{
  --brand:#1e88e5;
  --text:#333;
  --bg:#f9f9f9;

  --nav-blue:#1e88e5;
  --nav-blue-hover:#1565c0;

  /* Footer */
  --footer-bg:#747474;
  --footer-top-border: var(--nav-blue);
  --footer-title:#f08a22;
  --footer-text:#f1f1f1;
  --footer-dim:#dcdcdc;
  --footer-bottom-from: var(--nav-blue);
  --footer-bottom-to:   var(--nav-blue-hover);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* cegah bleed 100vw memunculkan scrollbar horizontal */
}

main { flex: 1; }

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Header (selalu menggantung) ===== */
.site-header {
  background: #fff;
  color: var(--brand);
  position: sticky; top: 0;
  z-index: 1000;             /* naikkan agar selalu di atas slider/nav */
  border-bottom: 2px solid #eee;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 10px 0;           /* nempel slider (tanpa gap) */
}

/* Brand */
.brand{ display:flex; align-items:center; gap:12px; }
.site-header .logo {
  height: 50px; width: auto; display:block;
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;
}
.brand-text{ font-weight:800; font-size:1.05rem; color:#1a1a1a; white-space:nowrap; }
@media (max-width: 640px){
  .brand-text{
    display:inline;
    font-size:.95rem;
    max-width:46vw;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* Nav */
.site-header nav { display:flex; align-items:center; gap: 0; }
.site-header nav > a,
.site-header nav > .has-submenu > a{
  color: var(--nav-blue);
  margin-left: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s ease;
  position: relative;
}
.site-header nav a:hover { color: var(--nav-blue-hover); text-decoration: underline; }
.site-header nav a.is-active { color: var(--nav-blue-hover); text-decoration: underline; }

/* Submenu (desktop) */
.has-submenu{ position: relative; display: inline-flex; align-items:center; }
@media (min-width: 901px){
  .has-submenu > a::after{
    content:"▾";
    display:inline-block; margin-left:6px; font-size:.8em; transform:translateY(-1px); color:var(--nav-blue);
  }
}
/* Hover buffer */
.has-submenu::after{ content:""; position:absolute; left:-8px; right:-8px; top:100%; height:18px; }
.submenu{
  position:absolute; top: calc(100% - 10px); left:0;
  background:#fff; border:1px solid #eee; border-radius:8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  display:none; min-width: 220px; padding:8px; z-index: 30;
}
.submenu li{ list-style:none; }
.submenu a{ display:block; padding:8px 10px; color:#333; font-weight:600; text-decoration:none; border-radius:6px; }
.submenu a:hover{ background:#f6f6f6; color:#000; }
@media (min-width: 901px){
  .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu{ display:block; }
}

/* caret toggle (mobile) */
.submenu-toggle{ background:transparent; border:0; color:#666; margin-left:6px; cursor:pointer; display:none; }

/* ==== Hamburger ==== */
.menu-toggle{
  --bar-h: 2px; --bar-gap: 12px;
  display: none;
  flex-direction: column; align-items:center; justify-content:center;
  gap: var(--bar-gap); background: transparent; border: 0; padding: 6px; cursor: pointer;
}
/* HAMBURGER warna biru */
.menu-toggle .bar{ width:23px; height:var(--bar-h); background:var(--nav-blue); }

/* Mobile nav */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .site-header nav {
    position: absolute; top: 100%; right: 0; left: 0;
    display: none; flex-direction: column;
    background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }
  .site-header nav > a,
  .site-header nav > .has-submenu > a{
    display:block; padding:12px 16px; margin:0; border-top:1px solid #f5f5f5; color:var(--nav-blue);
  }
  .site-header.open nav { display:flex; }

  .site-header.open .menu-toggle .bar:nth-child(1){ transform: translateY(calc(var(--bar-h) + var(--bar-gap))) rotate(45deg); }
  .site-header.open .menu-toggle .bar:nth-child(2){ opacity:0; }
  .site-header.open .menu-toggle .bar:nth-child(3){ transform: translateY(calc(-1 * (var(--bar-h) + var(--bar-gap)))) rotate(-45deg); }

  .submenu-toggle{ display:inline-flex; }
  .has-submenu > a::after{ content:""; } /* hide caret pseudo */
  .has-submenu .submenu{ position: static; display:none; box-shadow:none; border:0; padding:0 12px 12px 12px; }
  .has-submenu.open .submenu{ display:block; }
}

/* Hotline bubble */
.site-header nav .hotline{
  margin-left: 20px;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#1f2937;
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#ffffff;
}
.site-header nav .hotline .badge{ background: var(--brand); color:#fff; border-radius:999px; padding:4px 8px; font-weight:700; font-size:.78rem; line-height:1; }
.site-header nav .hotline .num{ font-weight:700; letter-spacing:.2px; }
.site-header nav .hotline .wa-ic{ color:#24d366; display:inline-flex; }

/* ===== Slider helper ===== */
.slider:not(.js-ready) .slides .slide:first-child { opacity: 1; }
section.slider{ padding: 0; }

/* ===== Sections umum ===== */
section { padding: 50px 0; }
section h2 { margin-bottom: 20px; color: var(--brand); }

/* Services */
.services ul{ list-style:none; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
@media (max-width: 900px){ .services ul{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .services ul{ grid-template-columns: 1fr; } }
.services li{ background:#fff; border:1px solid #eee; border-radius:8px; padding:20px; box-shadow:0 2px 5px rgba(0,0,0,0.05); transition: transform .2s, border-color .2s; }
.services li:hover{ transform: translateY(-5px); border-color: var(--brand); }
.services h3{ margin-top:0; color: var(--brand); }

/* ===== Footer ===== */
.site-footer{
  margin-top: 40px; color: var(--footer-text); background: var(--footer-bg);
  position: relative; --pad-y: 34px; border-top: 5px solid var(--footer-top-border);
}
.footer-top{ padding: var(--pad-y) 0 calc(var(--pad-y) - 8px); }
.footer-grid{ display:grid; grid-template-columns: 1.1fr 1.3fr 1.6fr; gap:28px; }
.footer-col{ min-width:0; }

.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin: 10px 0 18px; }
.footer-links a{ color:#fff; font-weight:700; text-decoration:none; }
.footer-links a:hover{ text-decoration: underline; }

.footer-downloads{ list-style:none; padding:0; margin:0; }
.footer-downloads li{ margin: 10px 0 18px; }
.footer-downloads a{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:600; }
.footer-downloads svg{ opacity:.9; }
.footer-downloads a:hover{ text-decoration: underline; }

.footer-title{ margin:0 0 14px; color: var(--footer-title); font-size:1.35rem; font-weight:800; }
.footer-addr{ margin:0 0 14px; color: var(--footer-text); }
.footer-line{ margin:8px 0; }
.footer-line a{ color:#fff; text-decoration:none; }
.footer-line a:hover{ text-decoration: underline; }

.footer-bottom{ background: linear-gradient(to bottom, var(--footer-bottom-from), var(--footer-bottom-to)); color:#fff; padding:10px 0 12px; }
.footer-bottom .copyright{ margin:0; text-align:center; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.2); }

@media (max-width: 960px){ .footer-grid{ grid-template-columns: 1fr; gap:18px; } }

/* ===== WhatsApp Floating ===== */
.wa-float{
  position: fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:999px; background:#25D366;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index: 1100;
  transition: transform .15s ease, filter .15s ease;
}
.wa-float:hover{ transform: translateY(-2px) scale(1.04); filter: brightness(.98); }
@media (max-width: 520px){ .wa-float{ right:14px; bottom:14px; width:54px; height:54px; } }

/* Utilities */
.partner-logo{ display:block; max-width:100%; width:100%; height:auto; margin:8px auto; }

/* Full-bleed slider kalau dipanggil di dalam .container */
.container > .slider[data-slider]{ inline-size:100vw; max-inline-size:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }