:root {
  --biru-tua: #0F2B48;
  --biru-terang: #1E60B7;
  --emas: #E8B848;
  --abu-terang: #F4F6F9;
  --abu-teks: #4A5568;
  --putih: #FFFFFF;
}
* {margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body {color:var(--abu-teks);background:#fff;line-height:1.6;}
.container {width:90%;max-width:1200px;margin:0 auto;}
nav {background:var(--biru-tua);position:sticky;top:0;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.nav-wrapper {display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;}
.logo {color:#fff;font-size:1.4rem;font-weight:700;display:flex;align-items:center;gap:.6rem;}
.logo span {color:var(--emas);}
.nav-links {display:flex;list-style:none;gap:2rem;}
.nav-links a {color:#fff;text-decoration:none;font-weight:500;padding:.5rem 0;border-bottom:3px solid transparent;transition:.3s;}
.nav-links a:hover,.nav-links a.aktif {border-bottom-color:var(--emas);color:var(--emas);}
.menu-toggle {display:none;color:#fff;font-size:1.8rem;cursor:pointer;}
section {padding:3.5rem 0;}
h1,h2,h3 {color:var(--biru-tua);margin-bottom:1rem;}
h1 {font-size:2.5rem;}
h2 {font-size:1.8rem;position:relative;padding-bottom:.5rem;}
h2::after {content:'';position:absolute;bottom:0;left:0;width:60px;height:4px;background:var(--emas);}
p {margin-bottom:1rem;}
.btn {display:inline-block;padding:.8rem 1.8rem;background:var(--biru-terang);color:#fff;text-decoration:none;border-radius:6px;font-weight:600;transition:.3s;}
.btn:hover {background:var(--biru-tua);}
.btn-emas {background:var(--emas);color:var(--biru-tua);}
.btn-emas:hover {background:#d4a63c;}
.hero {background:linear-gradient(135deg,var(--biru-tua) 0%,var(--biru-terang) 100%);color:#fff;padding:5rem 0;}
.hero h1 {color:#fff;}
.motto {color:var(--emas);font-weight:700;font-size:1.2rem;margin:1rem 0;}
.grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.grid-2 {display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
.kartu {background:var(--abu-terang);padding:1.8rem;border-radius:10px;border-top:4px solid var(--emas);box-shadow:0 4px 12px rgba(0,0,0,.06);transition:.3s;}
.kartu:hover {transform:translateY(-5px);}
.klien-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}
.klien-item {background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;text-align:center;font-weight:600;color:var(--biru-tua);transition:.3s;}
.klien-item:hover {border-color:var(--emas);box-shadow:0 3px 10px rgba(232,184,72,.2);}
.mitra-spesial {display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0;}
.mitra-spesial div {background:var(--abu-terang);padding:1rem 1.5rem;border-radius:8px;font-weight:700;color:var(--biru-tua);}
.tabel-wrapper {overflow-x:auto;margin-top:1rem;}
table {width:100%;border-collapse:collapse;}
th,td {padding:.75rem;text-align:left;border-bottom:1px solid #e2e8f0;font-size:.9rem;}
th {background:var(--biru-tua);color:#fff;}
tr:hover {background:#f9fafc;}
footer {background:var(--biru-tua);color:#fff;padding:2.5rem 0 1rem;margin-top:2rem;}
.footer-bawah {text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2);font-size:.9rem;color:#cbd5e0;}
@media(max-width:900px){
  .grid-3,.grid-2 {grid-template-columns:1fr;}
  .nav-links {position:absolute;top:100%;left:0;right:0;background:var(--biru-tua);flex-direction:column;padding:1rem 2rem;gap:.8rem;display:none;}
  .nav-links.tampil {display:flex;}
  .menu-toggle {display:block;}
}
/* Tombol Pengalih Bahasa */
.lang-switch {
  margin-right: 1rem;
  font-size: 0.9rem;
}

.lang-switch a {
  color: var(--putih);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}

.lang-switch a.lang-aktif {
  background: var(--emas);
  color: #000;
  font-weight: 600;
}

@media (max-width: 768px) {
  .lang-switch {
    margin: 0.5rem 0;
  }
}
/* ===== Tombol Pengalih Bahasa ===== */
.lang-switch {
  margin-right: 1rem;
  font-size: 0.9rem;
}

.lang-switch a {
  color: var(--putih);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}

.lang-switch a.lang-aktif {
  background: var(--emas);
  color: #000;
  font-weight: 600;
}

@media (max-width: 768px) {
  .lang-switch {
    margin: 0.5rem 0;
  }
}

/* ===== Logo Klien / Clients Logo Grid ===== */
.logo-klien-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.logo-klien-item {
  background: var(--putih);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  transition: 0.3s ease;
}

.logo-klien-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.logo-klien-item img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 0.8rem;
}

.logo-klien-item span {
  font-size: 0.85rem;
  color: var(--abu-teks);
  font-weight: 500;
}

@media (max-width: 768px) {
  .logo-klien-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
  }

  .logo-klien-item {
    min-height: 90px;
    padding: 1rem;
  }

  .logo-klien-item img {
    max-height: 50px;
  }
}
/* ===== Perbaikan Logo Klien agar Seragam ===== */
.logo-klien-item img {
  width: 100%;
  max-width: 120px;
  height: 60px;           /* Tinggi sama untuk semua logo klien */
  object-fit: contain;
  object-position: center;
}