:root{
      --primary:#1e40af;
      --primary2:#2563eb;
      --dark:#0f172a;
      --muted:#64748b;
      --bg:#f8fafc;
      --card:#ffffff;
      --border:#e2e8f0;
      --shadow:0 10px 25px rgba(15,23,42,0.08);
      --radius:18px;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:"Inter",system-ui,sans-serif;
    }

    body{
      background:var(--bg);
      color:var(--dark);
      line-height:1.7;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    a:hover{
      color:var(--primary);
    }

    .container{
      max-width:1150px;
      margin:auto;
      padding:0 18px;
    }

    /* =========================
       HEADER (FIXED PROFESSIONAL)
    ========================== */
    .site-header{
      position:sticky;
      top:0;
      z-index:999;
      background:white;
      border-bottom:1px solid var(--border);
    }

    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:var(--dark);
    }

    .brand-logo{
      width:40px;
      height:40px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:14px;
      color:white;
      background:linear-gradient(135deg,var(--primary),var(--primary2));
      box-shadow:0 10px 20px rgba(37,99,235,0.35);
    }

    .brand-text{
      font-size:15px;
      font-weight:800;
      letter-spacing:-0.3px;
      white-space:nowrap;
    }

    .hamburger{
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid var(--border);
      background:white;
      font-size:20px;
      font-weight:900;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:0.2s;
      color:var(--dark);
    }

    .hamburger:hover{
      background:#f1f5f9;
    }

    .desktop-nav{
      display:flex;
      align-items:center;
      gap:18px;
    }

    .desktop-nav ul{
      list-style:none;
      display:flex;
      gap:20px;
      font-weight:700;
      font-size:14px;
      color:var(--muted);
    }

    .desktop-nav ul li a:hover{
      color:var(--primary);
    }

    .nav-btn{
      background:var(--primary);
      color:white;
      padding:10px 14px;
      border-radius:14px;
      font-size:13px;
      font-weight:800;
      border:none;
      cursor:pointer;
      transition:0.2s;
      display:inline-block;
    }

    .nav-btn:hover{
      background:#1e3a8a;
      color:white;
    }

    /* Mobile menu dropdown */
    .mobile-menu{
      display:none;
      flex-direction:column;
      gap:10px;
      padding:14px 0 18px 0;
      border-top:1px solid var(--border);
      animation:fadeDown 0.25s ease;
    }

    .mobile-menu a{
      padding:12px 14px;
      border-radius:14px;
      font-weight:700;
      font-size:14px;
      color:#334155;
      transition:0.2s;
    }

    .mobile-menu a:hover{
      background:#e0f2fe;
      color:var(--primary);
    }

    @keyframes fadeDown{
      from{opacity:0;transform:translateY(-10px);}
      to{opacity:1;transform:translateY(0);}
    }

    /* =========================
       HERO
    ========================== */
    .hero{
      padding:46px 0 20px;
    }

    .hero h1{
      font-size:34px;
      letter-spacing:-1px;
      margin-bottom:10px;
    }

    .hero p{
      color:var(--muted);
      font-size:14px;
      max-width:900px;
    }

    .breadcrumb{
      margin-top:12px;
      font-size:13px;
      color:var(--muted);
    }

    .breadcrumb a{
      font-weight:800;
      color:var(--primary);
    }

    /* =========================
       INFO GRID
    ========================== */
    .info-grid{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }

    .info-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:18px;
      padding:16px;
      box-shadow:0 6px 16px rgba(15,23,42,0.04);
    }

    .info-card .label{
      font-size:12px;
      font-weight:800;
      color:var(--muted);
      margin-bottom:4px;
    }

    .info-card .value{
      font-size:14px;
      font-weight:900;
      color:var(--dark);
      letter-spacing:-0.2px;
    }

    /* =========================
       SEARCH BOX
    ========================== */
    .search-box{
      margin-top:18px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:16px;
      display:flex;
      gap:12px;
      align-items:center;
      box-shadow:0 6px 18px rgba(15,23,42,0.05);
    }

    .search-box input{
      flex:1;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:14px;
      outline:none;
      font-size:14px;
    }

    .search-box button{
      background:var(--primary);
      color:white;
      border:none;
      padding:12px 16px;
      border-radius:14px;
      font-weight:900;
      cursor:pointer;
      transition:0.2s;
    }

    .search-box button:hover{
      background:#1e3a8a;
    }

    /* =========================
       TABLE
    ========================== */
    .table-wrap{
      margin-top:18px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 10px 25px rgba(15,23,42,0.06);
    }

    .scroll-hint{
      font-size:12px;
      color:#64748b;
      padding:10px 14px;
      border-bottom:1px solid var(--border);
      background:#f8fafc;
      display:none;
    }

    .table-scroll{
      width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      position:relative;
    }

    .table-scroll table{
      min-width:900px;
      width:100%;
      border-collapse:collapse;
      font-size:14px;
    }

    table thead{
      background:linear-gradient(135deg,#0b2a77,#1e40af);
      color:white;
    }

    th,td{
      padding:14px 12px;
      border-bottom:1px solid var(--border);
      text-align:left;
      vertical-align:top;
    }

    th{
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:0.4px;
      font-weight:900;
    }

    tbody tr:nth-child(even){
      background:#f1f5f9;
    }

    tbody tr:hover{
      background:#e0f2fe;
    }

    td a{
      font-weight:900;
      color:var(--primary);
    }

    .kodepos{
      font-weight:900;
      color:#0b2a77;
    }

    /* =========================
       SEO TEXT
    ========================== */
    .seo-text{
      margin-top:22px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:22px;
      box-shadow:0 6px 18px rgba(15,23,42,0.05);
    }

    .seo-text h2{
      font-size:18px;
      margin-bottom:10px;
      letter-spacing:-0.4px;
    }

    .seo-text p{
      color:var(--muted);
      font-size:14px;
      margin-bottom:10px;
    }

    /* =========================
       FOOTER
    ========================== */
    footer{
      border-top:1px solid var(--border);
      padding:28px 0;
      margin-top:30px;
      color:var(--muted);
      font-size:13px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 0.8fr;
      gap:18px;
      align-items:start;
    }

    .footer-links{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .footer-links a:hover{
      color:var(--primary);
    }

    /* =========================
       RESPONSIVE
    ========================== */
    @media(max-width:1000px){
      .desktop-nav ul{
        display:none;
      }

      .nav-btn{
        display:none;
      }

      .hero h1{
        font-size:26px;
      }

      .info-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .table-scroll table{
        min-width:700px;
      }

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

      .footer-links{
        justify-content:flex-start;
      }
    }

    @media(max-width:600px){
      .info-grid{
        grid-template-columns:1fr;
      }

      .search-box{
        flex-direction:column;
        align-items:stretch;
      }

      .search-box button{
        width:100%;
      }
    }

    @media(max-width:480px){
      .table-scroll table{
        min-width:600px;
      }
    }
    
    @media(max-width:900px){
  .scroll-hint{
    display:block;
  }
}