:root {
  --bg: #0b0b0b;
  --text: #f3f3f3;
  --text-dim: #c9c9c9;
  --accent: #38bdf8;
  --accent-2: #22c55e;
  --ring: rgba(56, 189, 248, 0.55);
  --radius: 14px;
}

* { box-sizing: border-box; }
body { margin:0; padding:0; font-family:"Golos Text", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

/* Header Utama */
.header { position: sticky; top:0; z-index:50; width:100%; background: #000; border-bottom:1px solid rgba(255,255,255,0.08); backdrop-filter: saturate(140%) blur(6px);}
.container { max-width:900px; margin:0 auto; padding:10px 12px; display:grid; grid-template-columns:1fr 2fr 1fr; gap:10px; align-items:center;}
.logo img { height:40px; object-fit:contain; }

/* Search Bar */
.search { display:flex; align-items:center; gap:8px; width:100%; background:#0f0f10; border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:8px 10px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.search:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); background:#111214; }
.search input { flex:1; background:transparent; border:0; outline:none; color: var(--text); font-size:14px; }
.search button { appearance:none; border:0; background:var(--accent); color:#051016; font-weight:600; padding:8px 12px; border-radius:12px; cursor:pointer; transition: transform .08s ease; }
.search button:active { transform:translateY(1px);}

/* Navbar */
.navbar { background:#111214; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:60px; z-index:40; }
.nav-container { max-width:900px; margin:0 auto; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; padding:8px 12px; gap:10px; }
.nav-links { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; transition: all .3s ease; }
.nav-links a { text-decoration:none; color: var(--text); font-weight:600; padding:6px 10px; border-radius:8px; transition: background .2s; }
.nav-links a:hover, .nav-links a.active { background: rgba(56,189,248,0.2); }
.menu-toggle { display:none; background:var(--accent); border:none; color:#051016; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:16px; transition: transform .2s; }
.menu-toggle:active { transform: scale(0.95); }

/* Breadcrumb */
.breadcrumb { background: #111214; padding: 8px 12px; border-radius: 8px; max-width: 900px; margin:16px auto; font-size:14px; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; }
.breadcrumb li::after { content:"»"; margin:0 6px; color:rgba(243,243,243,0.6); }
.breadcrumb li:last-child::after { content:""; }
.breadcrumb a { text-decoration:none; color:#38bdf8; font-weight:500; }
.breadcrumb span { color:#f3f3f3; font-weight:600; }

/* Footer */
footer { background:#111214; border-top:1px solid rgba(255,255,255,0.08); margin-top:40px; padding:20px 12px; color:var(--text-dim); font-size:14px; }
footer a { color:var(--accent); text-decoration:none; }