/* ============================================================
       Cuiter — Documents (CSS)
    ============================================================ */
    :root {
      --bg-page:    #000000;
      --bg-card:    #000000;
      --bg-item:    #0d0d0d;
      --bg-hover:   #252525;
      --text-main:  #ffffff;
      --text-muted: #a1a1aa;
      --border:     #2a2a2a;
      --blue:       #0f96f0;
      --blue-main:  #0e87d8;
      --pink:       #f91880;
      --success:    #22c55e;
      --warning:    #f59e0b;
      --danger:     #ef4444;
    }

    [data-theme="light"] {
      --bg-page:    #f4f4f5;
      --bg-card:    #ffffff;
      --bg-item:    #f1f1f2;
      --bg-hover:   #e9e9eb;
      --text-main:  #111111;
      --text-muted: #6b7280;
      --border:     #e2e2e6;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: "Inter", sans-serif;
      background-color: var(--bg-page);
      color: var(--text-main);
      min-height: 100vh;
      font-size: 14px;
      line-height: 1.6;
      transition: background-color .25s, color .25s;
    }

    a { color: var(--blue-main); text-decoration: none; }
    a:hover { text-decoration: underline; }

    code {
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 12px;
      background: var(--bg-item);
      border: 1px solid var(--border);
      color: var(--blue);
      padding: 1px 6px;
      border-radius: 4px;
    }

    /* ============================================================
       TOPBAR — Perbaikan Layout agar rapi & Responsive
    ============================================================ */
    .topbar-outer {
      position: sticky;
      top: 0;
      z-index: 300;
      background-color: var(--bg-card);
      border-bottom: 1px solid var(--border);
    }
    .topbar {
      max-width: 1050px;
      margin: 0 auto;
      padding: 0 20px;
      height: 56px;
      display: flex;
      align-items: center;
      /* Gap 0 agar tidak ada spasi aneh antar elemen */
      gap: 0; 
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.5px;
      flex-shrink: 0;
      margin-right: 20px;
      color: var(--text-main);
      text-decoration: none;
    }
    .brand-logo .txt-cuiter { color: var(--pink); }
    .brand-logo .txt-net   { color: var(--blue-main); }

    .topbar-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 1;
      overflow-x: auto;
      scrollbar-width: none;
      margin: 0 8px;
    }
    .topbar-nav::-webkit-scrollbar { display: none; }

    /* Right-side button group */
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px; /* Jarak antar tombol */
      flex-shrink: 0;
      margin-left: auto; /* Dorong ke pojok kanan */
    }

    .topbar-nav a {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 6px 12px;
      border-radius: 6px;
      white-space: nowrap;
      transition: background .15s, color .15s;
      text-decoration: none;
    }
    .topbar-nav a:hover { color: var(--text-main); background: var(--bg-item); }
    .topbar-nav a.active { color: var(--text-main); background: var(--bg-item); }

    /* TOMBOL THEME (Perbaikan: Rapi & Ikon Bootstrap) */
    .theme-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--bg-item);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex; /* Inline flex agar ikon terpusat sempurna */
      align-items: center;
      justify-content: center;
      font-size: 16px; /* Ukuran ikon pas */
      flex-shrink: 0;
      transition: background .15s, color .15s;
      outline: none;
    }
    .theme-btn:hover { color: var(--text-main); background: var(--bg-hover); }
    
    /* Hapus outline saat di focus agar tidak jelek */
    .theme-btn:focus-visible {
      box-shadow: 0 0 0 2px var(--blue-main);
    }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      max-width: 1050px;
      margin: 0 auto;
      padding: 32px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ============================================================
       HERO — card style
    ============================================================ */
    .hero-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 36px 32px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;
    }
    .hero-card::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 260px; height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249,24,128,0.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-card::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -50px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(14,135,216,0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      background: rgba(249,24,128,0.1);
      border: 1px solid rgba(249,24,128,0.22);
      color: var(--pink);
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 18px;
    }

    .hero-card h1 {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .hero-card h1 .c-pink { color: var(--pink); }
    .hero-card h1 .c-blue { color: var(--blue-main); }

    .hero-sub {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 24px;
    }

    /* hero CTA buttons */
    .hero-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }
    .hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      padding: 9px 20px;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: opacity .15s, transform .1s;
    }
    .hero-btn:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; }
    .hero-btn-primary {
      background: var(--blue-main);
      color: #fff;
      border-color: var(--blue-main);
    }
    .hero-btn-outline {
      background: transparent;
      color: var(--text-muted);
      border-color: var(--border);
    }
    .hero-btn-outline:hover { color: var(--text-main); border-color: var(--text-muted); }
    .hero-btn-green {
      background: transparent;
      color: #22c55e;
      border-color: #22c55e;
    }
    .hero-btn-green:hover { background: rgba(34,197,94,0.08); color: #22c55e; opacity: 1; transform: translateY(-1px); }
    .hero-btn-orange {
      background: transparent;
      color: #f97316;
      border-color: #f97316;
    }
    .hero-btn-orange:hover { background: rgba(249,115,22,0.08); color: #f97316; opacity: 1; transform: translateY(-1px); }

    /* pill badges */
    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid;
    }
    .pill-blue   { background: rgba(14,135,216,0.08);  border-color: rgba(14,135,216,0.25);  color: var(--blue-main); }
    .pill-pink   { background: rgba(249,24,128,0.08);  border-color: rgba(249,24,128,0.25);  color: var(--pink); }
    .pill-green  { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.25);   color: var(--success); }
    .pill-yellow { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.25);  color: var(--warning); }
    .pill-gray   { background: rgba(161,161,170,0.08); border-color: rgba(161,161,170,0.2);  color: var(--text-muted); }

    /* stat row */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .stat-box {
      background: var(--bg-item);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 12px;
      text-align: center;
    }
    .stat-val {
      display: block;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .stat-lbl {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
    }

    /* ============================================================
       SECTION CARD
    ============================================================ */
    .s-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    }

    .s-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
      transition: background .15s;
    }
    .s-head:hover { background: var(--bg-item); }

    .s-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .si-blue   { background: rgba(14,135,216,0.1);  color: var(--blue-main); }
    .si-pink   { background: rgba(249,24,128,0.1);  color: var(--pink); }
    .si-green  { background: rgba(34,197,94,0.1);   color: var(--success); }
    .si-yellow { background: rgba(245,158,11,0.1);  color: var(--warning); }
    .si-red    { background: rgba(239,68,68,0.1);   color: var(--danger); }

    .s-title-wrap { flex: 1; }
    .s-title {
      display: block;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
    }
    .s-subtitle {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    .s-chev {
      font-size: 13px;
      color: var(--text-muted);
      transition: transform .2s;
    }
    .s-card.open .s-chev { transform: rotate(180deg); }

    .s-body {
      display: none;
      padding: 24px;
    }
    .s-card.open .s-body { display: block; }

    /* ============================================================
       DESCRIPTION TEXT
    ============================================================ */
    .desc-text p {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 14px;
    }
    .desc-text p:last-child { margin-bottom: 0; }
    .desc-text strong { color: var(--text-main); font-weight: 600; }

    /* ============================================================
       SHORT DESC BOX
    ============================================================ */
    .short-box {
      background: rgba(14,135,216,0.06);
      border: 1px solid rgba(14,135,216,0.18);
      border-radius: 8px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }
    .short-box .short-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      font-family: "SFMono-Regular", Consolas, monospace;
      letter-spacing: 0.2px;
    }
    .short-box .short-count {
      font-size: 11px;
      font-weight: 600;
      color: var(--blue-main);
      background: rgba(14,135,216,0.1);
      border: 1px solid rgba(14,135,216,0.2);
      padding: 3px 10px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .short-hint {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .short-hint i { color: var(--blue-main); }

    /* ============================================================
       FEATURE GROUPS
    ============================================================ */
    .feat-group { margin-bottom: 28px; }
    .feat-group:last-child { margin-bottom: 0; }

    .feat-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: var(--text-muted);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }
    .feat-group-title i { font-size: 13px; color: var(--blue-main); }

    .feat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .feat-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--bg-item);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 11px 13px;
      transition: border-color .15s, background .15s;
    }
    .feat-item:hover {
      border-color: rgba(14,135,216,0.3);
      background: var(--bg-hover);
    }

    .fi-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(14,135,216,0.1);
      color: var(--blue-main);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .fi-icon.pink   { background: rgba(249,24,128,0.1);  color: var(--pink); }
    .fi-icon.green  { background: rgba(34,197,94,0.1);   color: var(--success); }
    .fi-icon.yellow { background: rgba(245,158,11,0.1);  color: var(--warning); }
    .fi-icon.red    { background: rgba(239,68,68,0.1);   color: var(--danger); }

    .fi-name {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      line-height: 1.3;
      margin-bottom: 2px;
    }
    .fi-desc {
      display: block;
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    /* ============================================================
       REQUIREMENTS TABLE
    ============================================================ */
    .req-table {
      width: 100%;
      border-collapse: collapse;
    }
    .req-table thead tr { background: var(--bg-item); }
    .req-table th {
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
    }
    .req-table td {
      padding: 11px 14px;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .req-table td:first-child { font-weight: 600; color: var(--text-main); }
    .req-table td code { font-size: 11px; }
    .req-table tr:last-child td { border-bottom: none; }
    .req-table tbody tr:hover td { background: var(--bg-item); }

    .req-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .req-required    { background: rgba(239,68,68,0.1);   color: var(--danger);   border: 1px solid rgba(239,68,68,0.22); }
    .req-recommended { background: rgba(245,158,11,0.1);  color: var(--warning);  border: 1px solid rgba(245,158,11,0.22); }
    .req-optional    { background: rgba(34,197,94,0.1);   color: var(--success);  border: 1px solid rgba(34,197,94,0.22); }

    /* ============================================================
       STEPS
    ============================================================ */
    .steps-list { list-style: none; }

    .step-item {
      display: flex;
      gap: 16px;
      position: relative;
      padding-bottom: 20px;
    }
    .step-item:last-child { padding-bottom: 0; }
    .step-item:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 34px;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }

    .step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--blue-main);
      border: 2px solid var(--blue-main);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      z-index: 1;
      position: relative;
    }

    .step-content { flex: 1; padding-top: 4px; padding-bottom: 6px; }
    .step-title {
      display: block;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 5px;
    }
    .step-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.65;
    }

    .info-box {
      background: rgba(14,135,216,0.06);
      border: 1px solid rgba(14,135,216,0.18);
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 12.5px;
      color: var(--text-muted);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      line-height: 1.65;
      margin-top: 20px;
    }
    .info-box i { color: var(--blue-main); flex-shrink: 0; margin-top: 2px; font-size: 14px; }

    .warn-box {
      background: rgba(245,158,11,0.06);
      border: 1px solid rgba(245,158,11,0.2);
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 12.5px;
      color: var(--text-muted);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      line-height: 1.65;
      margin-top: 20px;
    }
    .warn-box i { color: var(--warning); flex-shrink: 0; margin-top: 2px; font-size: 14px; }
    .warn-box strong, .info-box strong { color: var(--text-main); }

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      text-align: center;
      padding: 28px 0 0;
      border-top: 1px solid var(--border);
      margin-top: 20px;
    }
    .footer-brand {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.4px;
      margin-bottom: 8px;
    }
    .footer-brand .t-cuiter { color: var(--pink); }
    .footer-brand .t-net   { color: var(--blue-main); }
    .site-footer p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 3px;
    }

    /* ============================================================
       CHANGE LOG
    ============================================================ */
    .cl-version-group { margin-bottom: 24px; }
    .cl-version-group:last-child { margin-bottom: 0; }

    .cl-version-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .cl-version-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(14,135,216,0.1);
      border: 1px solid rgba(14,135,216,0.25);
      color: var(--blue-main);
      letter-spacing: 0.2px;
    }
    .cl-version-tag.latest {
      background: rgba(249,24,128,0.1);
      border-color: rgba(249,24,128,0.25);
      color: var(--pink);
    }
    .cl-version-date {
      font-size: 11.5px;
      color: var(--text-muted);
    }

    .cl-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-item);
      margin-bottom: 6px;
      transition: border-color .15s;
    }
    .cl-item:last-child { margin-bottom: 0; }
    .cl-item:hover { border-color: rgba(14,135,216,0.3); }

    .cl-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 1px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .cl-fix      { background: rgba(239,68,68,0.1);   color: var(--danger);   border: 1px solid rgba(239,68,68,0.22); }
    .cl-feature  { background: rgba(34,197,94,0.1);   color: var(--success);  border: 1px solid rgba(34,197,94,0.22); }
    .cl-improve  { background: rgba(14,135,216,0.1);  color: var(--blue-main); border: 1px solid rgba(14,135,216,0.22); }
    .cl-db       { background: rgba(168,85,247,0.1);  color: #a855f7;          border: 1px solid rgba(168,85,247,0.22); }
    .cl-security { background: rgba(245,158,11,0.1);  color: var(--warning);  border: 1px solid rgba(245,158,11,0.22); }

    .cl-info { flex: 1; }
    .cl-file { display: block; font-size: 12px; font-weight: 600; color: var(--text-main); font-family: "SFMono-Regular", Consolas, monospace; margin-bottom: 2px; }
    .cl-desc { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

    .cl-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 20px 0;
    }

    /* ============================================================
       UPDATED FILES
    ============================================================ */
    .uf-php    { background: rgba(107,116,255,0.1);  color: #6b74ff;           border: 1px solid rgba(107,116,255,0.25); }
    .uf-js     { background: rgba(245,158,11,0.1);   color: var(--warning);    border: 1px solid rgba(245,158,11,0.25); }
    .uf-css    { background: rgba(14,135,216,0.1);   color: var(--blue-main);  border: 1px solid rgba(14,135,216,0.25); }
    .uf-sql    { background: rgba(168,85,247,0.1);   color: #a855f7;           border: 1px solid rgba(168,85,247,0.25); }
    .uf-asset  { background: rgba(34,197,94,0.1);    color: var(--success);    border: 1px solid rgba(34,197,94,0.25); }
    .uf-config { background: rgba(239,68,68,0.1);    color: var(--danger);     border: 1px solid rgba(239,68,68,0.25); }

    /* ============================================================
       HAMBURGER BUTTON (Mobile)
    ============================================================ */
    .hamburger-btn {
      display: none; /* Hidden on Desktop */
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--bg-item);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      font-size: 18px;
      flex-shrink: 0;
      transition: background .15s, color .15s;
    }
    .hamburger-btn:hover { background: var(--bg-hover); color: var(--text-main); }

    /* ============================================================
       MOBILE DRAWER MENU
    ============================================================ */
    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 199;
      opacity: 0;
      transition: opacity .25s;
    }
    .mobile-nav-overlay.open { opacity: 1; }

    .mobile-nav-drawer {
      position: fixed;
      top: 0;
      right: -280px;
      width: 260px;
      height: 100dvh;
      background: var(--bg-card);
      border-left: 1px solid var(--border);
      z-index: 200;
      display: flex;
      flex-direction: column;
      transition: right .28s cubic-bezier(.4,0,.2,1);
      overflow-y: auto;
    }
    .mobile-nav-drawer.open { right: 0; }

    .mobile-nav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .mobile-nav-brand {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }
    .mobile-nav-brand .txt-cuiter { color: var(--pink); }
    .mobile-nav-brand .txt-net    { color: var(--blue-main); }

    .mobile-nav-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-item);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: background .15s, color .15s;
    }
    .mobile-nav-close:hover { background: var(--bg-hover); color: var(--text-main); }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      padding: 10px 10px;
      gap: 2px;
      flex: 1;
    }
    .mobile-nav-links a {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-muted);
      padding: 11px 14px;
      border-radius: 8px;
      text-decoration: none;
      transition: background .15s, color .15s;
    }
    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
      background: var(--bg-item);
      color: var(--text-main);
      text-decoration: none;
    }
    .mobile-nav-links a i {
      font-size: 15px;
      color: var(--blue-main);
      width: 20px;
      flex-shrink: 0;
    }

    .mobile-nav-footer {
      padding: 14px 18px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */

    /* Tablet — iPad & mobile (768px ke bawah) */
    @media (max-width: 768px) {
      .topbar-nav           { display: none; }
      .hamburger-btn        { display: flex !important; pointer-events: auto !important; position: relative; z-index: 301; }
      /* Sembunyikan tombol theme desktop di mobile, kita punya theme di drawer */
      .theme-btn.desktop    { display: none !important; } 
      .mobile-nav-overlay   { display: block; }
      .hero-card h1         { font-size: 24px; }
      .stat-row             { grid-template-columns: repeat(2, 1fr); }
      .feat-grid            { grid-template-columns: 1fr; }
    }

    /* Mobile kecil (600px dan ke bawah) */
    @media (max-width: 600px) {
      .hero-card { padding: 22px 16px; }
      .hero-card h1 { font-size: 20px; }
      .s-body { padding: 16px 14px; }
      .s-head { padding: 14px 16px; }
      .container { padding: 16px 12px 60px; }
      .req-table th, .req-table td { padding: 9px 10px; font-size: 12px; }
      .stat-row { grid-template-columns: repeat(2, 1fr); }
      .hero-links { flex-direction: column; }
      .hero-btn { justify-content: center; }
      .cl-item { flex-wrap: wrap; gap: 6px; }
      .step-item { gap: 12px; }
    }

    /* Mobile sangat kecil (380px dan ke bawah) */
    @media (max-width: 380px) {
      .hero-card h1 { font-size: 18px; }
      .stat-row { grid-template-columns: 1fr 1fr; }
      .mobile-nav-drawer { width: 240px; }
    }