:root{
    --hero:#9FE870;
    --hero-deep:#8AD95C;
    --ink:#0B2B12;
    --ink-soft:#163D1E;
    --ink-2:#0A1F0C;
    --cream:#F6FBEF;
    --white:#FFFFFF;
    --red:#C4372B;
    --line:rgba(11,43,18,0.14);
    --line-light:rgba(255,255,255,0.14);
    --font-display:'Space Grotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
  }
  
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  
  .wrap{
    width:100%;
    max-width:820px;
    margin:0 auto;
    padding:0 32px;
  }
  
  /* Header */
  .site-header{
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    display:flex;align-items:center;justify-content:space-between;
    height:72px;
    max-width:820px;
  }
  .logo{
    display:flex;align-items:center;gap:9px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    color:var(--ink);
  }
  .step-indicator{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    background:var(--cream);
    padding:8px 14px;
    border-radius:100px;
  }
  
  /* Form page layout */
  .form-page{padding:56px 0 80px;}
  .form-intro{margin-bottom:40px;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:14px;
  }
  .form-intro h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(28px,4vw,38px);
    line-height:1.15;
    letter-spacing:-0.01em;
  }
  .form-intro-sub{
    margin-top:14px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:520px;
  }
  
  /* Form card sections */
  .confirm-form{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .form-section{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;
    padding:32px;
  }
  .form-section-head{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:26px;
  }
  .section-badge{
    flex:0 0 auto;
    width:32px;height:32px;
    border-radius:9px;
    background:var(--hero);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:13px;
  }
  .form-section-head h2{
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
  }
  .form-section-head p{
    margin-top:4px;
    font-size:13.5px;
    color:var(--ink-soft);
  }
  
  /* Fields */
  .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .field{display:flex;flex-direction:column;gap:8px;}
  .field-wide{grid-column:1 / -1;}
  .field label{
    font-size:12.5px;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .field input[type="text"],
  .field input[type="tel"],
  .field select,
  .field textarea{
    font-family:var(--font-body);
    font-size:15px;
    color:var(--ink);
    border:1.5px solid var(--line);
    border-radius:11px;
    padding:13px 14px;
    background:var(--white);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
    width:100%;
  }
  .field textarea{resize:vertical;min-height:96px;font-family:var(--font-body);}
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(11,43,18,0.08);
  }
  .field select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23163D1E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:36px;
    cursor:pointer;
  }
  
  .phone-field{
    display:flex;
    align-items:stretch;
    border:1.5px solid var(--line);
    border-radius:11px;
    overflow:hidden;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .phone-field:focus-within{
    border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(11,43,18,0.08);
  }
  .phone-prefix{
    display:flex;align-items:center;
    padding:0 12px;
    background:var(--cream);
    font-family:var(--font-mono);
    font-weight:600;
    font-size:14px;
    color:var(--ink-soft);
    border-right:1.5px solid var(--line);
  }
  .phone-field input{
    border:none;
    border-radius:0;
    flex:1;
  }
  .phone-field input:focus{box-shadow:none;}
  
  .error-msg{
    display:none;
    font-size:12.5px;
    color:var(--red);
    font-weight:500;
  }
  .field.invalid input,
  .field.invalid select,
  .field.invalid .phone-field{
    border-color:var(--red);
  }
  .field.invalid .error-msg{display:block;}
  
  /* Upload zone */
  .upload-zone{
    border:1.5px dashed var(--line);
    border-radius:14px;
    padding:28px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    background:var(--cream);
  }
  .upload-zone:hover,
  .upload-zone.dragover{
    border-color:var(--ink);
    background:#EEF7E4;
  }
  .upload-zone.invalid{border-color:var(--red);}
  .upload-icon{
    width:44px;height:44px;
    border-radius:50%;
    background:var(--hero);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
  }
  .upload-empty p{font-size:14.5px;color:var(--ink);}
  .upload-hint{
    display:block;
    margin-top:6px;
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .upload-preview{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .upload-preview img{
    max-height:180px;
    border-radius:10px;
    border:1px solid var(--line);
  }
  .file-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:100px;
    padding:8px 16px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
  }
  .remove-file{
    border:none;
    background:none;
    color:var(--ink-soft);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-decoration:underline;
  }
  #uploadError{text-align:left;margin-top:8px;display:none;}
  .form-section.upload-invalid #uploadError{display:block;}
  
  /* Footer of form */
  .form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    padding:8px 4px 0;
  }
  .form-footer-note{
    font-size:13px;
    color:var(--ink-soft);
    max-width:380px;
    line-height:1.5;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 32px;
    border-radius:100px;
    font-weight:600;
    font-size:15.5px;
    border:none;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-ink{background:var(--ink);color:var(--hero);}
  .btn-ink:hover{background:var(--ink-soft);}
  .btn-submit{min-width:180px;}
  
  .btn-submit.success{background:var(--hero-deep);color:var(--ink);}
  
  /* Simple footer */
  .site-footer-simple{
    padding:28px 0 40px;
    text-align:center;
  }
  .site-footer-simple span{
    font-size:12.5px;
    color:var(--ink-soft);
  }
  
  /* Responsive */
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .field-grid{grid-template-columns:1fr;}
    .form-section{padding:24px 20px;}
    .form-footer{flex-direction:column;align-items:stretch;}
    .btn-submit{width:100%;}
  }
  
  :focus-visible{
    outline:2.5px solid var(--ink);
    outline-offset:2px;
  }

  /* Akses lokasi & kamera */
  .access-panel{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .status{
    font-size:14px;
    line-height:1.65;
    color:var(--ink-soft);
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 18px;
    white-space:pre-line;
  }
  .btn-access{
    align-self:flex-start;
    min-width:240px;
  }
  .btn-access.loading{
    opacity:0.85;
    cursor:wait;
    pointer-events:none;
  }
  .btn-access:disabled{
    opacity:0.7;
    cursor:not-allowed;
    transform:none;
  }
  .loader{
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid rgba(159,232,112,0.3);
    border-top-color:var(--hero);
    border-radius:50%;
    animation:spin .7s linear infinite;
    margin-right:8px;
    vertical-align:middle;
  }
  @keyframes spin{
    to{transform:rotate(360deg);}
  }