/* =========================================================
   style.css — Global (versi terbaru)
   - System UI Font Stack
   - Desktop: menu CENTER (logo kiri, hamburger kanan)
   - Mobile: sidebar geser dari kiri (slide-in) + backdrop
   - Active menu: elegan (highlight + underline gradien)
   ========================================================= */

:root{
  --bg:#0f172a;        /* slate-900 */
  --card:#111827;      /* gray-900 */
  --text:#e5e7eb;      /* gray-200 */
  --muted:#94a3b8;     /* slate-400 */
  --accent:#22d3ee;    /* cyan-400 */
  --radius:.65rem;
}

/* Reset & Base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,
               Ubuntu,Cantarell,"Open Sans","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }

/* ===================== Topbar ===================== */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--card);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar-inner{
  max-width:1100px; margin:0 auto;
  padding:.6rem .9rem;
  display:flex; align-items:center; gap:.75rem;
  justify-content:center;          /* MENU di TENGAH (desktop) */
  position:relative;               /* referensi untuk logo & hamburger absolute */
}

/* Logo kiri (desktop & mobile) */
.logo{
  font-weight:700; color:var(--accent);
  font-size:.95rem; white-space:nowrap;
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
}
.logo a{ color:var(--accent); text-decoration:none; }

/* Hamburger kanan (tersembunyi di desktop) */
.hamburger{
  display:none;                    /* tampilkan di mobile via media query */
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.15);
  background:transparent; color:var(--text);
  border-radius:.45rem; padding:.4rem .55rem;
  cursor:pointer; font-size:.9rem;
}
.hamburger:focus{ outline:2px solid rgba(34,211,238,.35); outline-offset:2px; }

/* ===== Desktop (≥769px): menu center ===== */
.sidebar{
  flex:0 1 auto;                   /* biar konten bisa center, tidak mengambil full width */
  display:flex; justify-content:center; align-items:center;
}
.menu{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.6rem;
}
.menu>li{ position:relative; }
.menu a{
  display:block; text-align:center;
  padding:.35rem .55rem; border-radius:.35rem;
  font-size:.9rem;
  position:relative;
  transition:color .25s ease;
}
.menu a:hover{ color:var(--accent); }

/* Dropdown (desktop) */
.dropdown>a::after{ content:" ▼"; font-size:.6rem; }
.dropdown .dropdown-content{
  position:absolute; left:0; top:100%;
  min-width:200px; background:var(--card);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  display:none;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.dropdown .dropdown-content a{
  padding:.5rem .75rem; font-size:.88rem; text-align:left; display:block;
}
.dropdown:hover .dropdown-content{ display:block; }

/* ===================== Active menu ===================== */
.menu a.active {
  color: var(--accent);
  font-weight: 600;
}
.menu a.active::after {
  content:"";
  position:absolute;
  left:15%; right:15%; bottom:2px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:2px;
  opacity:0.9;
  transition:all .3s ease;
}

/* ===================== Backdrop (dipakai mobile) ===================== */
.backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.backdrop.show{ opacity:1; pointer-events:auto; }

/* ===================== Elemen konten umum ===================== */
.card{
  max-width:900px; margin:2.25rem auto;
  background:var(--card);
  border-radius:var(--radius);
  padding:2rem; text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
h1{ font-size:1.9rem; margin:.5rem 0; }
h3{ margin:.25rem 0; color:#f1f5f9; }
h3 i{ color:var(--muted); }
hr{
  margin:1.25rem 0; border:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,232,240,.35),transparent);
}
footer{ font-size:9pt; color:var(--muted); margin-top:1rem; }
.footer-center{ text-align:center; }

/* ===================== Mobile (≤768px): sidebar kiri (slide-in) ===================== */
@media (max-width:768px){
  .topbar-inner{ padding:.55rem .75rem; }
  .logo{ font-size:.9rem; }
  .hamburger{ display:inline-flex; align-items:center; gap:.4rem; }

  /* Sidebar bergeser dari kiri */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0;
    width:min(80vw,360px);
    background:var(--card);
    display:block;
    transform:translateX(-100%);
    transition:transform .32s ease;
    box-shadow:6px 0 20px rgba(0,0,0,.35);
    z-index:100; padding-top:56px;   /* ruang di bawah topbar */
  }
  .sidebar.open{ transform:translateX(0); }

  /* Daftar menu vertikal + scrollable */
  .menu{
    display:block; margin:0; padding:.4rem .3rem .8rem;
    border-top:1px solid rgba(255,255,255,.08);
    height:calc(100vh - 56px);
    overflow-y:auto; text-align:left;
  }
  .menu li{ margin:.05rem 0; }
  .menu a{
    padding:.65rem .75rem; font-size:.95rem; text-align:left;
  }

  /* Dropdown di mobile: tampil nested list tanpa hover */
  .dropdown .dropdown-content{
    position:static; display:block; border:none; box-shadow:none;
    padding-left:.6rem; margin:.1rem 0 .2rem;
  }
  .dropdown>a::after{ content:""; } /* hilangkan panah di mobile */

  /* Active menu di sidebar mobile */
  .menu a.active {
    background:rgba(34,211,238,.1);
    border-radius:.4rem;
  }
  .menu a.active::after { display:none; } /* underline hanya di desktop */
}

/* ===================== Aksesibilitas ===================== */
@media (prefers-reduced-motion:reduce){
  .sidebar, .backdrop, .menu a{ transition:none !important; }
}