:root{
  --brand:#326f96;
  --brand-dark:#1e455e;
  --accent:#f59e0b;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e2e8f0}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--brand)}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:18px;align-items:center}
.nav a{padding:10px 8px;color:#334155;font-weight:600}
.nav a.active{color:var(--brand);border-bottom:2px solid var(--brand)}
/* Mobile */
.burger{display:none;border:1px solid #e2e8f0;border-radius:8px;padding:8px;background:#fff}
@media (max-width:880px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #e2e8f0;flex-direction:column;align-items:flex-start;padding:12px}
  .nav.show{display:flex}
}
/* Hero */
.hero{background:linear-gradient(0deg,rgba(15,118,110,.08),rgba(15,118,110,.08)), url('../img/banner.png') center/cover no-repeat; color:#0b1b1a}
.hero .overlay{background:rgba(255,255,255,.55);padding:48px 0}
.hero h1{font-size:2.2rem;margin:0 0 10px}
.hero p{max-width:700px;color:#0f172a}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;font-weight:700;border:1px solid transparent}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:#fff;border-color:#e2e8f0;color:#0f172a}
.badge{display:inline-block;background:var(--accent);color:#111827;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.section{padding:48px 0}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:880px){.grid-3{grid-template-columns:1fr}}
.card{border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff}
.card .p{padding:16px}
.card h3{margin:0 0 6px}
.footer{border-top:1px solid #e2e8f0;background:#fff}
.footer .cols{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr}
.footer a{color:#334155}
.footer small{color:var(--muted)}
@media (max-width:880px){.footer .cols{grid-template-columns:1fr}}
.whatsapp-float{position:fixed;right:18px;bottom:18px;background:#22c55e;color:#fff;border-radius:999px;padding:12px 16px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.whatsapp-float:hover{background:#16a34a}
/* Cegah teks menu terpecah jadi 2 baris */
.nav a { 
  white-space: nowrap;      /* force satu baris */
  word-break: keep-all;     /* jangan pecah kata */
  display: inline-flex;     /* jaga tinggi konsisten */
  align-items: center; 
}
.brand span {
  white-space: nowrap;      /* brand juga tetap satu baris */
}
/* Sembunyikan teks "BANTEN RENTAL" di brand, tampilkan logo gambar saja */
.brand span { 
  display: none; 
}

/* (opsional) besarkan sedikit logo kalau mau */
.brand img { 
  height: 70px;   /* sebelumnya 36px */
  width: auto;
}
/* ===== Tabel Harga Rapi ===== */
.table-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:12px}
table.price{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
table.price col.unit   {width:22%}
table.price col.daily  {width:18%}
table.price col.week   {width:16%}
table.price col.month  {width:20%}
table.price col.note   {width:24%}

table.price th, table.price td{padding:12px 14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}
table.price thead th{background:#f8fafc;font-size:.95rem;white-space:nowrap}
table.price tbody tr:last-child td{border-bottom:0}

/* rata kanan & angka seragam */
td.num{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;      /* angka sejajar */
  -moz-font-feature-settings:"tnum";
  -webkit-font-feature-settings:"tnum";
  font-feature-settings:"tnum";
}

/* jangan patah baris untuk teks 2 kata yang penting */
.nowrap{white-space:nowrap}

/* kecilkan catatan agar tidak mendorong kolom lain */
td.note{color:#475569;font-size:.95rem}
/* ===== Kartu daftar harga rapi & seragam ===== */
.card{display:flex;flex-direction:column;height:100%}
.card>img{
  width:100%;
  height:200px;                 /* samakan tinggi gambar */
  object-fit:cover;             /* crop rapi, tanpa distorsi */
  object-position:center;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}
.card .p{display:flex;flex-direction:column;flex:1}
.card .p h3{margin:10px 0 6px}

/* Tabel seragam */
.table-wrap{flex:1}
table.compact{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff}
table.compact th, table.compact td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  line-height:1.3;
  height:44px;                  /* tinggi baris konsisten */
  vertical-align:middle;
}
table.compact thead th{background:#f8fafc;font-size:.95rem;white-space:nowrap}

/* Atur lebar kolom tetap: Layanan 40% | Harga 60% */
table.compact th:nth-child(1), table.compact td:nth-child(1){width:40%}
table.compact th:nth-child(2), table.compact td:nth-child(2){width:60%}

/* Jangan meluber: potong dengan ellipsis jika terlalu panjang */
table.compact td{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* CTA selalu nangkring di bawah kartu */
.card .cta{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}