/* =========================
   ROOT
========================= */
:root {
  --bg: #0a0a0f;
  --bg2: #13131a;

  --text: #ffffff;
  --muted: #6b7280;
  --muted2: #9ca3af;

  --primary: #6366f1;
  --primary2: #8b5cf6;

  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.04);
}

/* =========================
   RESET
========================= */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-top:90px;
  -webkit-font-smoothing:antialiased;
}

/* =========================
   NAVBAR
========================= */
nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;

  padding:1.2rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(10,10,15,0.7);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-soft);
  transition:all 0.3s;
}

nav.scrolled {
  padding:0.9rem 2rem;
  background:rgba(10,10,15,0.95);
  border-bottom:1px solid var(--border);
}

.nav-logo img {
  height:56px;
}

/* nav links */
.nav-links {
  display:flex;
  gap:2rem;
  list-style:none;
}

.nav-links a {
  color:var(--muted2);
  text-decoration:none;
  font-size:0.9rem;
  transition:0.2s;
}

.nav-links a:hover {
  color:#fff;
}

/* nav CTA */
.nav-cta {
  display:flex;
  gap:0.75rem;
  align-items:center;
}

/* =========================
   BUTTONS
========================= */
.btn-ghost {
  padding:0.5rem 1.25rem;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted2);
  font-size:0.875rem;
  text-decoration:none;
  transition:0.2s;
}

.btn-ghost:hover {
  color:#fff;
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);
}

.btn-primary {
  padding:0.5rem 1.25rem;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
  font-size:0.875rem;
  text-decoration:none;
  transition:0.2s;
}

.btn-primary:hover {
  background:var(--primary2);
  transform:translateY(-1px);
}

/* =========================
   HERO SPLIT
========================= */
.hero-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  max-width:1200px;
  margin:auto;
  padding:4rem 2rem;
  align-items:flex-start;
}

/* LEFT */
.hero-left {
  display:flex;
  flex-direction:column;
  gap:2rem;
}

/* IMAGE CLEAN */
.image-wrap img {
  width:100%;
  display:block;
  border:none;
  box-shadow:none;
  border-radius:0;
}

/* RIGHT */
.hero-right h1 {
  font-family:'Syne';
  font-size:2.4rem;
  margin-bottom:1rem;
}

.hero-desc {
  color:var(--muted2);
  margin-bottom:1.5rem;
  line-height:1.7;
}

/* =========================
   CARD
========================= */
.card {
  background:var(--bg2);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:1.5rem;
  margin-top:1.5rem;
}

.card h2 {
  font-size:1rem;
  margin-bottom:0.4rem;
}

.card p,
.card li {
  color:var(--muted2);
  line-height:1.7;
}

/* =========================
   FOOTER (FIXED VERSION)
========================= */
footer {
  background:var(--bg2);
  border-top:1px solid var(--border-soft);
  padding:4rem 2rem 2rem;
}

.footer-inner {
  max-width:1200px;
  margin:auto;
}

/* TOP GRID */
.footer-top {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}

/* BRAND */
.footer-brand img {
  height:36px;
  margin-bottom:1rem;
}

.footer-brand p {
  color:var(--muted);
  font-size:0.875rem;
  line-height:1.7;
  max-width:280px;
}

/* COLUMN */
.footer-col h4 {
  font-size:0.75rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:1rem;
}

.footer-col ul {
  list-style:none;
  padding:0;
}

.footer-col li {
  margin-bottom:0.6rem;
}

.footer-col a {
  color:var(--muted);
  text-decoration:none;
  font-size:0.85rem;
  transition:0.2s;
}

.footer-col a:hover {
  color:#fff;
}

/* BOTTOM */
.footer-bottom {
  border-top:1px solid var(--border-soft);
  padding-top:2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  font-size:0.8rem;
  color:var(--muted);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:900px) {
  .hero-split {
    grid-template-columns:1fr;
    text-align:center;
  }

  .nav-links {
    display:none;
  }

  .footer-top {
    grid-template-columns:1fr;
  }

  .footer-brand {
    text-align:center;
  }
}

/* =========================
   NAV DROPDOWN (GLOBAL)
========================= */

/* NAV LINKS (jika belum ada di beberapa page) */
.nav-links {
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
}

/* DROPDOWN WRAPPER */
.nav-dropdown {
  position:relative;
}

/* DROPDOWN MENU */
.dropdown-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  width:480px;

  background:rgba(10,10,15,0.95);
  backdrop-filter:blur(20px);

  border:1px solid var(--border);
  border-radius:16px;

  padding:1.25rem;
  margin-top:0.75rem;

  opacity:0;
  pointer-events:none;
  transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  z-index:200;
}

/* ACTIVE STATE */
.nav-dropdown.active .dropdown-menu {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(10px);
}

/* GRID */
.dropdown-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.75rem;
}

/* ITEM */
.dropdown-item {
  display:flex;
  gap:0.75rem;
  align-items:center;

  padding:0.75rem;
  border-radius:10px;

  text-decoration:none;
  color:var(--text);

  transition:all 0.2s;
}

.dropdown-item:hover {
  background:rgba(255,255,255,0.05);
}

/* ICON */
.dropdown-item .icon {
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1rem;
}

/* TEXT */
.dropdown-item .title {
  font-size:0.85rem;
  font-weight:600;
}

.badge {
  font-size:0.65rem;
  margin-top:2px;
}

.badge.live {
  color:#34d399;
}

.badge.soon {
  color:#9ca3af;
}

/* DISABLED ITEM */
.dropdown-item.disabled {
  opacity:0.5;
  pointer-events:none;
}

/* OPTIONAL: ACTIVE PAGE */
.dropdown-item.active {
  background:rgba(99,102,241,0.15);
}

/* =========================
   RESPONSIVE (IMPORTANT)
========================= */
@media (max-width:900px) {
  .dropdown-menu {
    width:100%;
    left:0;
    transform:translateY(20px);
  }

  .nav-dropdown.active .dropdown-menu {
    transform:translateY(10px);
  }

  .dropdown-grid {
    grid-template-columns:1fr;
  }
}

/* subtle hover scale */
.dropdown-item:hover .icon {
  transform:scale(1.05);
  transition:0.2s;
}