:root{
  --primary:#d40000;
  --secondary:#00105e;
  --bg:#0f1117;
  --card:#151821;
  --text:#f6f7fb;
  --muted:#a7aab4;
  --shadow:0 16px 48px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fafafa;color:#222;font:16px/1.5 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}

/* Containers */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:68px 0}
.card{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.round-2xl{border-radius:18px}
.shadow-soft{box-shadow:var(--shadow)}

/* Navbar */
.navbar{position:sticky;top:0;z-index:20;background:var(--secondary);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo-mark{display:inline-grid;place-items:center;width:10px;height:36px;border-radius:10px;background:#fff;color:var(--secondary);font-weight:900;margin-right:10px}
.brand{display:flex;align-items:center;color:#fff;font-weight:800}
.brand-name{letter-spacing:.4px}
.navlinks a{margin-left:14px;padding:8px 12px;border-radius:10px;color:#fff}
.navlinks a.active,.navlinks a:hover{background:rgba(255,255,255,.12)}

/* Buttons */
.cta{background:var(--primary);border:none;color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer;display:inline-block}
.cta.ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}

/* Hero layout */
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.badge{display:inline-block;background:rgba(212,0,0,.12);color:var(--primary);padding:4px 10px;border-radius:999px;font-size:12px}
.hero-cta{display:flex;gap:10px;margin-top:10px}

/* Footer */
footer{padding:36px 0 12px;background:#0f1117;color:#fff;margin-top:32px}
footer .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
footer .muted{color:#c7c9d1}
footer a{color:#fff}
footer .legal{padding:0 0 12px 0;color:#c7c9d1;font-size:.9rem}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .navlinks{display:none}
}
.logo {
  height: 40px;      /* tinggi logo */
  width: auto;       /* biar proporsional */
  object-fit: contain;
}
/* Single Outlet */
.outlet-single { display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items: center; overflow:hidden }
.outlet-single img{ width:100%; height:240px; object-fit:cover; display:block }
.outlet-single .body{ padding: 8px 12px }
.outlet-single .actions{ margin-top:.6rem }

/* Tentang Kami layout */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center }
@media (max-width: 900px){
  .outlet-single{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
}

/* warna brand */
:root{
  --brand-red:#d40000;
  --brand-blue:#00105e;
  --nav-bg: var(--brand-blue);
  --nav-link: #fff;
}

/* navbar dasar */
.navbar{
  position: sticky; top:0; z-index:100;
  background: var(--nav-bg); color: var(--nav-link);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.navbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem;
}
.logo{ height:40px; width:auto; display:block; }
.brand{ display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; }
.brand-name{ font-weight:700; letter-spacing:.2px; }

/* link desktop */
.navlinks.desktop{ display:flex; gap:1rem; }
.navlinks.desktop a{ color:#fff; text-decoration:none; font-weight:600; opacity:.92 }
.navlinks.desktop a:hover{ opacity:1 }

/* tombol burger (hidden di desktop) */
.burger{
  display:none; background:none; border:0; color:#fff; cursor:pointer;
}

/* drawer mobile */
.nav-drawer{
  position: fixed; inset: 60px 0 auto auto; /* bawah navbar */
  right:-280px; top:60px; width:260px;
  background: var(--nav-bg); color:#fff;
  display:flex; flex-direction:column;
  gap:.2rem; padding:.8rem;
  box-shadow: -10px 0 30px rgba(0,0,0,.28);
  border-radius: 12px 0 0 12px;
  transition: right .22s ease;
}
.nav-drawer a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:.7rem .6rem; border-radius:10px;
}
.nav-drawer a:hover{ background: rgba(255,255,255,.1) }

/* backdrop */
.nav-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
  z-index: 90;
}

/* state buka */
.nav-open .nav-drawer{ right:0; z-index: 101; }
.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
.nav-open{ overflow:hidden; }

/* responsive */
@media (max-width: 900px){
  .navlinks.desktop{ display:none; }
  .burger{ display:block; }
}

/* desktop links tampil, burger disembunyikan */
.navlinks.desktop{ display:flex; gap:1rem; }
.burger{ display:none; background:none; border:0; color:#fff; cursor:pointer; }

/* drawer mobile (awal: tersembunyi di kanan) */
.nav-drawer{
  position: fixed; top:60px; right:-280px; width:260px;
  background:#00105e; color:#fff; display:flex; flex-direction:column; gap:.2rem;
  padding:.8rem; border-radius:12px 0 0 12px;
  box-shadow:-10px 0 30px rgba(0,0,0,.28);
  transition:right .22s ease; z-index:101;
}
.nav-drawer a{ color:#fff; text-decoration:none; font-weight:700; padding:.7rem .6rem; border-radius:10px; }
.nav-drawer a:hover{ background:rgba(255,255,255,.1) }

.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:100;
}

/* saat terbuka */
.nav-open .nav-drawer{ right:0; }
.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
.nav-open{ overflow:hidden; }

/* breakpoint mobile */
@media (max-width: 900px){
  .navlinks.desktop{ display:none; }  /* sembunyikan link desktop */
  .burger{ display:block; }           /* tampilkan burger */
}

/* default (desktop) */
.navlinks { display: flex; gap: 1rem; align-items: center; }
.burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; }

/* mobile */
@media (max-width: 900px){
  .burger { display: block; }
  .navlinks {
    display: none;                 /* disembunyikan dulu */
    position: absolute;
    right: 12px;
    top: 60px;                     /* sesuaikan tinggi navbar */
    width: 220px;
    padding: .8rem;
    background: #00105e;           /* warna brand biru */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    flex-direction: column;
    gap: .4rem;
    z-index: 9999;
  }
  .navlinks.show {                 /* toggle class ini */
    display: flex;
  }
  .navlinks a { color: #fff; text-decoration: none; font-weight: 700; padding: .6rem .5rem; border-radius: 8px; }
  .navlinks a:hover { background: rgba(255,255,255,.12); }
}