:root{
    /* Palet Warna */
    --bg:#0b1020;           /* gelap elegan */
    --fg:#e6f2ff;           /* teks utama */
    --muted:#9fb4c7;        /* teks sekunder */
    --pri:#00d1b2;          /* aksen primer (teal) */
    --sec:#4f46e5;          /* aksen sekunder (indigo) */
    --warn:#f59e0b;         /* peringatan */
    --danger:#ef4444;       /* bahaya */
    --card:#121735;         /* panel */
    --border:rgba(255,255,255,.1);
    --medium:   #ffffff;
    --quora:    #B92B27;
    --pinterest:#E60023;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
    a{color:var(--pri);text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:1080px;margin:0 auto;padding:0 16px}
    header{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:relative}
    .brand{display:flex;gap:12px;align-items:center}
    .brand img{height:36px;width:auto}
    .nav a.btn{padding:10px 16px;border-radius:999px;border:1px solid var(--border);margin-left:8px;display:inline-flex;align-items:center;gap:8px}
    .btn-pri{background:var(--pri);color:#061016;border:0;font-weight:600}
    .btn-sec{background:transparent;color:var(--fg)}
    .hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;padding:40px 0}
    .hero h1{font-size:2rem;line-height:1.2;margin:0 0 8px}
    .tagline{font-size:1rem;color:var(--muted);margin:0 0 16px}
    .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
    .pill{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.875rem;margin-right:8px}
    .section{padding:28px 0;border-top:1px solid var(--border)}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
    .card h3{margin:0 0 6px}
    .list{padding-left:18px;margin:8px 0}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
    details+details{margin-top:10px}
    summary{cursor:pointer;font-weight:600}
    footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}
    small.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace}
    .badge18{display:inline-flex;align-items:center;gap:6px;background:#1f2937;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:.8rem;color:#c7d2fe}

    /* Responsif */
    @media (max-width:900px){
    .hero{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
    }

    /* Age Gate & Cookie */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1000}
    .overlay.active{display:flex}
    .modal{background:#0d1228;border:1px solid var(--border);border-radius:16px;max-width:520px;padding:20px}
    .cookie{position:fixed;left:12px;right:12px;bottom:12px;background:#0d1228;border:1px solid var(--border);border-radius:12px;padding:12px;display:none;z-index:900}

    /* Hamburger & link */
    .nav-links{display:flex;align-items:center;gap:10px}
    .nav-cta{display:flex;gap:8px}
    .hamburger{display:none;appearance:none;background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer}
    .hamburger span{display:block;width:22px;height:2px;background:var(--fg);margin:4px 0;transition:transform .2s ease,opacity .2s ease}
    .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

    /* Dropdown (desktop) */
    .dropdown{position:relative}
    .more-btn{background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer}
    .dropdown-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    display:none;min-width:220px;padding:10px;z-index:955
    }
    .dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
    .dropdown.open .dropdown-menu{display:block}

    /* Desktop */
    @media (min-width:901px){
    .hamburger{display:none}
    .nav-links{display:flex}
    }
    /* Mobile */
    @media (max-width:900px){
    .hamburger{display:inline-flex}
    .nav-links{
        display:none;position:absolute;top:100%;right:16px;z-index:950;
        background:var(--card);border:1px solid var(--border);border-radius:12px;
        box-shadow:0 12px 30px rgba(0,0,0,.35);
        width:min(92vw,340px);padding:12px;flex-direction:column;gap:10px
    }
    .nav-links.open{display:flex}
    .nav-cta{flex-direction:column}
    .nav-cta .btn{width:100%;justify-content:center;margin-left:0}
    /* Di mobile, tampilkan semua link; dropdown tidak diperlukan */
    .dropdown{position:static}
    .more-btn{display:none}
    .dropdown-menu{display:flex;position:static;box-shadow:none;border:0;padding:0;gap:10px;min-width:auto}
    }

    .social-icons{
        display:flex; gap:.75rem; align-items:center;
    }
    .social {
        display:inline-flex; align-items:center; justify-content:center;
        width:40px; height:40px; border-radius:8px;
        color: currentColor; text-decoration:none;
        transition: transform .15s ease, filter .2s ease;
    }
    .social svg{ width:24px; height:24px; display:block; }
    .social:where(:hover,:focus-visible){ transform:translateY(-1px); filter:saturate(1.1) brightness(.95); outline:none; }

    .social--medium   { color: var(--medium); }
    .social--quora    { color: var(--quora); }
    .social--pinterest{ color: var(--pinterest); }

    #toc {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 0;
    }

    #toc h2 {
        font-size: 1.2rem;
        margin-top: 0;
        margin-bottom: 12px;
        color: var(--pri);
        font-weight: 600;
    }

    #toc ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    #toc li {
        margin: 6px 0;
        position: relative;
        padding-left: 20px;
    }

    #toc li::before {
        content: "✔";
        position: absolute;
        left: 0;
        color: var(--pri);
        font-weight: bold;
    }

    #toc a {
        color: var(--fg);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    #toc a:hover {
        color: var(--sec);
        text-decoration: underline;
    }