:root{
      --primary:#0b4f63;
      --primary-2:#0a3f50;
      --accent:#ff6b2c;
      --bg:#f6f7f9;
      --text:#0f172a;
      --muted:#475569;
      --line:#e5e7eb;
      --card:#ffffff;

      --radius:14px;
      --shadow:0 10px 28px rgba(2, 6, 23, .12);
      --container:1120px;
      --pad:clamp(16px, 3vw, 28px);

      --h1:clamp(28px, 5vw, 44px);
      --h2:clamp(18px, 2.6vw, 26px);
      --p:clamp(14px, 1.8vw, 16px);
      --sm:clamp(12px, 1.5vw, 14px);

      --ok:#16a34a;
      --warn:#f59e0b;
      --err:#ef4444;
      --focus:rgba(11,79,99,.14);
    }

    *{ box-sizing:border-box }
    html,body{ height:100% }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--text);
      background:var(--bg);
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none }
    .container{
      width:min(var(--container), calc(100% - (var(--pad) * 2)));
      margin-inline:auto;
    }

    /* ===== NAVBAR ===== */
    .header{
      position: sticky;
      top:0;
      z-index: 50;
      background:#fff;
      border-bottom:1px solid var(--line);
      box-shadow:0 6px 14px rgba(2,6,23,.08);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--primary-2);
      white-space:nowrap;
    }
    .brand svg{ width:34px;height:34px;flex:0 0 auto; }
    .brand span{ font-size:18px; font-style:italic; }

    .menu{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .links{
      display:none;
      gap:18px;
      align-items:center;
      font-size:var(--sm);
      color:var(--primary-2);
      font-weight:600;
    }
    .links a{ padding:10px 10px; border-radius:12px; }
    .links a:hover{ background:rgba(11,79,99,.08); }
    .links a.active{ color:var(--accent); }

    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      cursor:pointer;
    }
    .burger:active{ transform: translateY(1px); }

    .mobilePanel{
      display:none;
      border-top:1px solid var(--line);
      background:#fff;
    }
    .mobilePanel.open{ display:block; }
    .mobilePanel .mwrap{
      padding:10px 0 14px;
      display:grid;
      gap:8px;
    }
    .mobilePanel a{
      padding:12px 12px;
      border-radius:12px;
      font-weight:700;
      color:var(--primary-2);
      font-size:var(--sm);
    }
    .mobilePanel a:hover{ background:rgba(11,79,99,.08); }
    .mobilePanel a.active{ color:var(--accent); }

    /* ===== HERO ===== */
    .hero{ padding: clamp(22px, 5vw, 54px) 0; }
    .heroGrid{
      display:grid;
      grid-template-columns:1fr;
      gap: clamp(16px, 3vw, 28px);
      align-items:center;
    }
    .badge{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(11,79,99,.08);
      border:1px solid rgba(11,79,99,.12);
      color:var(--primary-2);
      font-weight:700;
      font-size:var(--sm);
      width: fit-content;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(255,107,44,.18);
    }
    h1{
      margin:14px 0 10px;
      font-size:var(--h1);
      line-height:1.05;
      letter-spacing:-0.02em;
    }
    h1 .accent{ color:var(--accent); }
    .lead{
      margin:0;
      color:var(--muted);
      font-size:var(--p);
      line-height:1.75;
      max-width:62ch;
    }
    .ctaRow{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:800;
      font-size:var(--sm);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
      position:relative;
    }
    .btn:hover{
      transform:translateY(-1px);
      background:rgba(11,79,99,.06);
      border-color:rgba(11,79,99,.22);
    }
    .btn.primary{
      background:var(--primary);
      color:#fff;
      border-color:rgba(11,79,99,.35);
      /* box-shadow:0 14px 40px rgba(11,79,99,.20); */
    }
    .btn.primary:hover{ background:var(--primary-2); }
    .btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none !important; }
    .btn .spinner{
      width:16px;height:16px;border-radius:999px;
      border:2px solid rgba(255,255,255,.35);
      border-top-color: rgba(255,255,255,1);
      animation: spin .75s linear infinite;
      display:none;
    }
    .btn.loading .spinner{ display:inline-block; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .heroCard{
      border-radius:18px;
      background:var(--card);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .heroCardTop{
      padding:14px 16px;
      background: linear-gradient(90deg, rgba(11,79,99,.10), rgba(255,107,44,.10));
      border-bottom:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .heroCardTop strong{
      color:var(--primary-2);
      letter-spacing:.2px;
      font-size:var(--sm);
    }
    .heroCardBody{
      padding:16px;
      display:grid;
      gap:12px;
    }
    .mini{
      padding:14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
    }
    .mini h3{
      margin:0 0 6px;
      font-size:14px;
      color:var(--primary-2);
      letter-spacing:.2px;
    }
    .mini p{
      margin:0;
      color:var(--muted);
      font-size:var(--sm);
      line-height:1.7;
    }
    .progress{
      height:10px;
      border-radius:999px;
      background:rgba(2,6,23,.06);
      overflow:hidden;
      margin-top:10px;
    }
    .progress > span{
      display:block;height:100%;width:76%;
      background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    /* ===== SECTION ===== */
    section.section{ padding: clamp(18px, 4.5vw, 42px) 0; }
    .sectionHeader{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom:14px;
    }
    .sectionHeader h2{
      margin:0;
      font-size:var(--h2);
      letter-spacing:-0.01em;
      color:var(--primary-2);
    }
    .sectionHeader p{
      margin:0;
      color:var(--muted);
      font-size:var(--sm);
      line-height:1.7;
      max-width:70ch;
    }

    .grid3{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
    }
    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 10px 24px rgba(2,6,23,.06);
      padding:16px;
    }
    .card .top{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:10px;
    }
    .ico{
      width:42px;height:42px;border-radius:14px;
      border:1px solid rgba(11,79,99,.16);
      background:rgba(11,79,99,.08);
      display:grid;place-items:center;
      font-weight:900;
      color:var(--primary-2);
    }
    .card h3{
      margin:0;
      font-size:15px;
      color:var(--primary-2);
    }
    .card p{
      margin:0;
      color:var(--muted);
      font-size:var(--sm);
      line-height:1.7;
    }

    /* ===== PILIHAN PENDAFTARAN ===== */
    .choiceWrap{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      margin-top:8px;
    }
    .choiceCard{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 10px 24px rgba(2,6,23,.06);
      padding:16px;
      overflow:hidden;
    }
    .choiceHero{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:center;
    }
    .choiceArt{
      border-radius:14px;
      /* border:1px solid var(--line);
      background: linear-gradient(90deg, rgba(11,79,99,.06), rgba(255,107,44,.06)); */
      min-height:170px;
      /* display:grid; */
      place-items:center;
      /* padding:14px; */
      text-align: center;
    }
    .choiceTitle{
      margin:0 0 6px;
      color:var(--primary-2);
      font-size:18px;
      font-weight:900;
      letter-spacing:-.01em;
    }
    .choiceDesc{
      margin:0;
      color:var(--muted);
      font-size:var(--sm);
      line-height:1.7;
    }
    .choiceActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .choiceBtn{ width:100%; }

    /* ===== FORM ===== */
    .form{ display:grid; gap:10px; position:relative; }
    .field{ display:grid; gap:6px; }
    label{
      font-size:var(--sm);
      font-weight:800;
      color:var(--primary-2);
    }
    input, textarea{
      width:100%;
      border-radius:12px;
      border:2px solid #9bb7bf;
      padding:12px 12px;
      font-size:14px;
      outline:none;
      box-shadow: inset #919799 1px 0px 5px 0px;
      background:#fff;
      /* transition: box-shadow .12s ease, border-color .12s ease; */
    }
    input:focus, textarea:focus{
      border-color: rgba(11,79,99,.45);
      box-shadow: 0 0 0 4px var(--focus);
    }
    textarea{ min-height:110px; resize:vertical; }

    .hint{
      display:flex;
      align-items:flex-start;
      gap:8px;
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
      margin-top:2px;
    }
    .errorText{
      display:none;
      font-size:12px;
      color:var(--err);
      margin-top:2px;
      line-height:1.35;
    }
    .field.invalid .errorText{ display:block; }
    .field.invalid input, .field.invalid textarea{
      border-color: rgba(239,68,68,.55);
      box-shadow: 0 0 0 4px rgba(239,68,68,.12);
    }
    .field.valid input, .field.valid textarea{
      border-color: rgba(22,163,74,.55);
      box-shadow: 0 0 0 4px rgba(22,163,74,.12);
    }

    .formBadge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(11,79,99,.08);
      border:1px solid rgba(11,79,99,.12);
      color:var(--primary-2);
      font-weight:800;
      font-size:var(--sm);
      width: fit-content;
    }

    /* ===== TOAST ===== */
    .toastHost{
      position: fixed;
      right: 16px;
      bottom: 16px;
      display:grid;
      gap:10px;
      z-index: 9999;
      pointer-events:none;
    }
    .toast{
      pointer-events:auto;
      width: min(360px, calc(100vw - 32px));
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:0 18px 50px rgba(2,6,23,.14);
      padding:12px;
      display:grid;
      grid-template-columns:22px 1fr auto;
      gap:10px;
      align-items:start;
      transform: translateY(8px);
      opacity:0;
      animation: toastIn .18s ease forwards;
    }
    @keyframes toastIn{ to{ transform: translateY(0); opacity:1; } }
    .toast .tIcon{
      width:22px;height:22px;border-radius:8px;
      display:grid;place-items:center;
      font-weight:900;color:#fff;
      margin-top:2px;
    }
    .toast.ok .tIcon{ background: var(--ok); }
    .toast.err .tIcon{ background: var(--err); }
    .toast.warn .tIcon{ background: var(--warn); }
    .toast h4{
      margin:0;
      font-size:13px;
      color:var(--primary-2);
      letter-spacing:.2px;
    }
    .toast p{
      margin:2px 0 0;
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
    }
    .toast button{
      all:unset;
      cursor:pointer;
      padding:6px 8px;
      border-radius:10px;
      color:var(--muted);
      font-weight:800;
      font-size:12px;
      line-height:1;
      margin-top:2px;
    }
    .toast button:hover{ background: rgba(2,6,23,.06); color: var(--text); }

    /* ===== SCROLL REVEAL ===== */
    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity .55s ease, transform .55s ease;
      will-change: opacity, transform;
    }
    .reveal.is-visible{ opacity:1; transform: translateY(0); }

    /* ===== MODAL ===== */
    .modal{
      position: fixed;
      inset: 0;
      display:none;
      z-index: 9998;
    }
    .modal.open{ display:block; }
    .modalOverlay{
      position:absolute;
      inset:0;
      background: rgba(2,6,23,.55);
      backdrop-filter: blur(6px);
    }
    .modalDialog{
      position: relative;
      width: min(720px, calc(100vw - 28px));
      margin: 8vh auto;
      background:#fff;
      border:1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 24px 80px rgba(2,6,23,.22);
      overflow:hidden;
      transform: translateY(8px);
      opacity:0;
      animation: modalIn .16s ease forwards;
      max-height: calc(100vh - 16vh);
      display: flex;
      flex-direction: column;
    }
    @keyframes modalIn{ to{ transform: translateY(0); opacity:1; } }
    .modalTop{
      padding: 14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(90deg, rgba(11,79,99,.06), rgba(255,107,44,.06));
    }
    .modalTitle{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 0;
    }
    .modalTitle strong{
      color: var(--primary-2);
      letter-spacing:.2px;
      font-size: 14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .modalTitle span{
      color: var(--muted);
      font-size: 12px;
      line-height:1.35;
    }
    .modalClose{
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background:#fff;
      cursor:pointer;
      display:grid;
      place-items:center;
    }
    .modalClose:hover{ background: rgba(2,6,23,.04); }
    .modalBody{
      padding: 16px;
      display:grid;
      gap: 14px;
      flex: 1;
      overflow-y: auto;
      max-height: calc(100vh - 16vh - 60px);
    }
    .modalGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items:start;
    }
    .modalInfo{
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: #fff;
    }
    .modalInfo h4{
      margin: 0 0 6px;
      font-size: 14px;
      color: var(--primary-2);
      letter-spacing:.2px;
    }
    .modalInfo p{
      margin:0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }
    .modalFooter{
      padding: 14px 16px;
      border-top:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      background:#fff;
    }

    /* Prevent body scroll when modal open */
    body.modal-open{ overflow:hidden; }

    footer{
      padding:22px 0 30px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:var(--sm);
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
      .btn{ transition:none !important; }
      .toast{ animation:none !important; opacity:1 !important; transform:none !important; }
      .modalDialog{ animation:none !important; opacity:1 !important; transform:none !important; }
      .btn .spinner{ animation:none !important; }
    }

    .imgChoice{ width:25vw;height:55vh; }

    @media (min-width: 860px){
      .links{ display:flex; }
      .burger{ display:none; }
      .heroGrid{ grid-template-columns: 1.05fr .95fr; }
      .grid3{ grid-template-columns: repeat(3, 1fr); }
      .choiceWrap{ grid-template-columns: 1fr 1fr; }
      /* .choiceHero{ grid-template-columns: .92fr 1.08fr; } */
      .choiceBtn{ width:auto; min-width: 160px; }
      .modalGrid{ grid-template-columns: 1.2fr .8fr; }
    }

    @media (max-width: 768px){
      .imgChoice{ width:85vw;height:30vh; }
    }

    /* ===== SELECT2 CUSTOM STYLE (mengikuti input text) ===== */
    
    /* Container utama Select2 */
    .select2-container--default .select2-selection--single {
      border: 2px solid #9bb7bf !important;
      border-radius: 12px !important;
      height: 46px;
      padding: 4px 12px;
      box-shadow: inset #919799 1px 0px 5px 0px;
      background: #fff;
    }

    /* Saat focus */
    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--single {
      border-color: rgba(11,79,99,.45) !important;
      box-shadow: 0 0 0 4px rgba(11,79,99,.14) !important;
      outline: none;
    }

    /* Saat valid (ditambahkan via JS - class langsung ke container) */
    .select2-container.select2-valid .select2-selection--single {
      border-color: rgba(22,163,74,.55) !important;
      box-shadow: 0 0 0 4px rgba(22,163,74,.12) !important;
    }

    /* Saat invalid (ditambahkan via JS - class langsung ke container) */
    .select2-container.select2-invalid .select2-selection--single {
      border-color: rgb(114 136 143) !important;
      box-shadow: 0 0 0 4px rgb(221 233 237) !important;
      /* padding-top: 7px; */
    }

    /* Teks placeholder */
    .select2-container--default .select2-selection--single .select2-selection__rendered.select2-selection__placeholder {
      color: #6c757d;
      font-size: 14px;
      padding: 12px 12px !important;
      line-height: 1.4;
    }

    /* Teks yang dipilih */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: #0f172a;
      font-size: 14px;
      line-height: 36px;
      padding-left: 0;
      padding-right: 0;
    }

    /* Arrow/dropdown icon */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 44px;
      right: 12px;
      width: 20px;
    }

    /* Dropdown menu */
    .select2-dropdown {
      border: 2px solid #9bb7bf !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 28px rgba(2, 6, 23, .12);
      overflow: hidden;
    }

    /* Search box di dropdown */
    .select2-search--dropdown .select2-search__field {
      border: 2px solid #9bb7bf !important;
      border-radius: 12px !important;
      padding: 8px 12px;
      font-size: 14px;
      box-shadow: inset #919799 1px 0px 5px 0px;
      outline: none;
    }

    .select2-search--dropdown .select2-search__field:focus {
      border-color: rgba(11,79,99,.45) !important;
      box-shadow: 0 0 0 4px rgba(11,79,99,.14) !important;
    }

    /* Option di dropdown */
    .select2-results__option {
      padding: 10px 12px;
      font-size: 14px;
      color: #0f172a;
    }

    /* Option hover */
    .select2-results__option--highlighted {
      background: rgba(11,79,99,.08) !important;
      color: #0b4f63 !important;
    }

    /* Option selected */
    .select2-results__option[aria-selected="true"] {
      background: rgba(11,79,99,.12) !important;
      color: #0a3f50 !important;
      font-weight: 600;
    }

    /* Clear button (x) */
    .select2-container--default .select2-selection--single .select2-selection__clear {
      color: #ef4444;
      font-weight: bold;
      font-size: 18px;
      right: 32px;
    }

    /* Disabled state */
    .select2-container--default.select2-container--disabled .select2-selection--single {
      background: #f6f7f9;
      cursor: not-allowed;
      opacity: 0.7;
    }

    /* Pastikan container Select2 mengikuti lebar parent */
    .select2-container {
      width: 100% !important;
    }

    /* Override lebar dari inisialisasi JS */
    .select2-container--default {
      max-width: 100%;
    }

    .select2-container .select2-selection--single {
      height: 45px !important;
    }

    .select2-container--classic .select2-selection--single .select2-selection__arrow {
      height: 43px;
    }

    .select2-selection__rendered {
      padding-top: 6px;
    }

    .select2-container--classic .select2-selection--single .select2-selection__clear {
      height: 39px;
    }