:root{
    --green:#166534;
    --green-deep:#0E4A26;
    --gold:#CA8A04;
    --gold-soft:#F5E6B8;
    --navy:#10233F;
    --cream:#FBF8F1;
    --paper:#F3EDDC;
    --muted:#6B6357;
    --line:#E6DFCE;
    --surface:#FFFFFF;
    --danger-bg:#FEF2F2;
    --danger-border:#FECACA;
    --danger-text:#B91C1C;
    --ease-out:cubic-bezier(.19,1,.22,1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }

  body{
    font-family:'Inter', sans-serif;
    color:var(--navy);
    overflow:hidden;
    background:var(--navy);
  }

  .stage{
    position:relative;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }

  /* ===================== POLA ANYAMAN (tekstur latar) ===================== */
  .pattern-layer{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .pattern-layer.on-cream{
    background-image:
      repeating-linear-gradient(45deg, rgba(16,35,63,.06) 0 1px, transparent 1px 20px),
      repeating-linear-gradient(-45deg, rgba(16,35,63,.06) 0 1px, transparent 1px 20px);
    mask-image:radial-gradient(circle at 50% 42%, black 0%, transparent 72%);
    -webkit-mask-image:radial-gradient(circle at 50% 42%, black 0%, transparent 72%);
  }
  .pattern-layer.on-navy{
    background-image:
      repeating-linear-gradient(45deg, rgba(245,230,184,.07) 0 1px, transparent 1px 20px),
      repeating-linear-gradient(-45deg, rgba(245,230,184,.07) 0 1px, transparent 1px 20px);
    mask-image:radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
  }

  /* ===================== SPLASH SCREEN ===================== */
  .splash-screen{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    text-align:center;
    padding:32px;
    background:var(--cream);
    overflow:hidden;
    transition:opacity .6s ease, visibility .6s ease;
  }
  .splash-screen.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .splash-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; }

  /* Logo dinas = tombol tekan fisik: kepala tombol punya sisi tipis dan
     bayangan lantai; saat ditekan ia turun dan bayangannya menyempit. */
  .seal-btn{
    position:relative;
    z-index:0;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
    margin:-18px 0 -18px;            /* pangkas ruang kosong di tepi gambar */
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .seal-btn:focus-visible{ outline:none; }

  /* Bayangan lantai tepat di bawah tombol */
  .seal-btn::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:49%;
    top:88%;
    width:50%;
    height:11%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(16,35,63,.42), rgba(16,35,63,0));
    transition:transform .2s ease, opacity .2s ease;
    pointer-events:none;
  }

  .seal-frame{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Kepala tombol: sisi tipis dari bayangan tanpa blur, senada dengan pinggiran hijau gambarnya */
  .seal-img{
    width:min(380px, 82vw);
    height:auto;
    display:block;
    transform:translateY(-6px);
    filter:
      drop-shadow(0 3px 0 #0B4A22)
      drop-shadow(0 3px 0 #083A1A)
      drop-shadow(0 10px 10px rgba(16,35,63,.28));
    transition:transform .28s cubic-bezier(.3,1.7,.5,1), filter .28s ease;   /* memantul saat dilepas */
  }

  /* Hover: sedikit terangkat dan lebih terang */
  .seal-btn:hover .seal-img,
  .seal-btn:focus-visible .seal-img{
    transform:translateY(-9px);
    filter:
      drop-shadow(0 3px 0 #0B4A22)
      drop-shadow(0 3px 0 #083A1A)
      drop-shadow(0 14px 14px rgba(16,35,63,.30))
      brightness(1.04);
  }
  .seal-btn:hover::before,
  .seal-btn:focus-visible::before{ transform:translate(-50%,-50%) scale(1.08); opacity:.85; }
  .seal-btn:focus-visible .seal-img{ outline:none; }

  /* Ditekan: turun sampai sisinya habis, bayangan menyempit */
  .seal-btn:active .seal-img,
  .seal-frame.is-pressing .seal-img{
    transform:translateY(0) scale(.985) !important;
    filter:drop-shadow(0 2px 3px rgba(16,35,63,.35)) brightness(.97) !important;
    transition:transform .07s ease-out, filter .07s ease-out !important;
  }
  .seal-btn:active::before{ transform:translate(-50%,-50%) scale(.9); }
  .splash-title{
    font-family:'Lora', serif;
    font-weight:700;
    font-size:clamp(21px, 3vw, 29px);
    letter-spacing:.02em;
    color:var(--navy);
  }
  .splash-subtitle{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:clamp(11.5px, 1.3vw, 13px);
    letter-spacing:.22em;
    color:var(--green);
    margin-top:-12px;
  }
  /* Label petunjuk tepat di bawah logo, panahnya menunjuk ke tombol */
  .splash-hint{
    margin:-4px 0 4px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px 7px 13px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--gold-soft);
    box-shadow:0 4px 12px rgba(16,35,63,.08);
    font-size:13px;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--green-deep);
  }
  .hint-arrow{
    font-size:9px;
    line-height:1;
    color:var(--gold);
    animation:hintNudge 1.3s ease-in-out infinite;
  }
  @keyframes hintNudge{
    0%,100%{ transform:translateY(1px); }
    50%{ transform:translateY(-3px); }
  }
  /* ===================== TRANSISI KE LOGIN =====================
     Satu gerakan saja: halaman login (yang berada di atas layar awal) terlihat
     lewat lingkaran bertepi lembut yang membesar dari logo. Tidak ada blur,
     tirai warna, zoom, atau animasi isi - isi halaman login sudah diam di
     tempatnya sejak awal, lingkaran hanya "membukanya".
     --r  = jari-jari lingkaran (dianimasikan), --cx/--cy = pusat (diisi JS dari posisi logo). */
  @property --r{
    syntax:'<length>';
    inherits:false;
    initial-value:0px;
  }
  .ripple-overlay{ display:none; }               /* tirai warna tidak dipakai lagi */
  .stage.is-swapping .splash-screen{ transition:none !important; }
  /* Isi layar awal (logo & teks) memudar cepat saat lingkaran mulai keluar, supaya tepi
     lembut lingkaran tidak bertumpuk dengan teks; saat kembali ia muncul lagi di akhir. */
  .splash-inner{ transition:opacity .35s ease .4s; }
  .stage.is-open .splash-inner{ opacity:0; transition:opacity .22s ease; }

  /* ===================== LOGIN SCREEN ===================== */
  .login-screen{
    position:relative;
    z-index:30;
    height:100%;
    display:grid;
    grid-template-columns:minmax(360px, 440px) 1fr;
    pointer-events:none;
    --r:0px;
    --tepi:110px;                                 /* lebar tepi lembut lingkaran */
    -webkit-mask-image:radial-gradient(circle at var(--cx, 50%) var(--cy, 42%), #000 calc(var(--r) - var(--tepi)), transparent var(--r));
            mask-image:radial-gradient(circle at var(--cx, 50%) var(--cy, 42%), #000 calc(var(--r) - var(--tepi)), transparent var(--r));
    transition:--r .8s cubic-bezier(.45,0,.2,1);
  }
  .login-screen.is-active{
    pointer-events:auto;
    --r:175vmax;
  }
  /* setelah terbuka penuh, masker dilepas supaya halaman tampil apa adanya */
  .login-screen.is-settled{
    -webkit-mask-image:none;
            mask-image:none;
  }
  .login-panel{
    position:relative;
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    overflow-y:auto;
    overflow-x:hidden;
  }
  /* lipatan sudut ala kertas dokumen resmi */
  .login-panel::after{
    content:"";
    position:absolute;
    top:0; right:0;
    width:0; height:0;
    border-style:solid;
    border-width:0 34px 34px 0;
    border-color:transparent var(--paper) transparent transparent;
    filter:drop-shadow(-2px 2px 3px rgba(16,35,63,.14));
  }

  .back-btn{
    position:absolute;
    top:20px;
    left:20px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    padding:7px 11px 7px 9px;
    border-radius:8px;
    transition:background .2s ease, color .2s ease;
  }
  .back-btn:hover{ background:var(--paper); color:var(--navy); }
  .back-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .back-btn .arrow{ font-size:14px; line-height:1; transition:transform .2s ease; }
  .back-btn:hover .arrow{ transform:translateX(-2px); }

  .login-card{
    width:100%;
    max-width:320px;
    text-align:center;
  }

  .login-logo{
    width:54px;
    height:54px;
    object-fit:contain;
    margin:0 auto 16px auto;
    display:block;
  }

  .login-card h1{
    font-family:'Lora', serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--navy);
  }
  .login-card .tagline{
    margin-top:8px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--muted);
  }

  .alert-error{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:var(--danger-bg);
    border:1px solid var(--danger-border);
    color:var(--danger-text);
    padding:12px 14px;
    border-radius:8px;
    font-size:13px;
    line-height:1.5;
    text-align:left;
  }

  form{ text-align:left; }

  .field{ margin-bottom:18px; text-align:left; }
  .field label{
    display:block;
    margin-bottom:7px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.01em;
    color:#3A4657;
  }
  .field input{
    width:100%;
    padding:11px 14px;
    border:1.5px solid var(--line);
    border-radius:7px;
    font-size:14px;
    font-family:'Inter', sans-serif;
    background:var(--cream);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .field input:focus{
    outline:none;
    border-color:var(--gold);
    background:#fff;
    box-shadow:0 0 0 3.5px var(--gold-soft);
  }

  .btn-submit{
    width:100%;
    padding:12.5px;
    margin-top:6px;
    border:none;
    border-radius:7px;
    background:linear-gradient(135deg, var(--green), var(--navy));
    color:#fff;
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.01em;
    cursor:pointer;
    transition:filter .2s ease, transform .15s ease;
    box-shadow:0 10px 22px rgba(14,74,38,.25);
  }
  .btn-submit:hover{ filter:brightness(1.1); transform:translateY(-1px); }
  .btn-submit:active{ transform:translateY(0); }

  .login-footer{
    margin-top:6px;
    font-size:11.5px;
    color:#A39B87;
    text-align:center;
  }

  /* Brand panel (kanan) */
  .brand-panel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    background:var(--navy);
    overflow:hidden;
  }

  .brand-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    text-align:center;
  }

  .brand-badge{
    width:118px;
    height:118px;
    border-radius:50%;
    background:var(--cream);
    border:3px solid var(--gold);
    box-shadow:0 0 0 5px var(--navy), 0 0 0 7px var(--gold-soft), 0 20px 40px rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:badgeFloat 6s ease-in-out infinite;
  }
  @keyframes badgeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  .brand-logo{
    width:80px;
    height:80px;
    object-fit:contain;
  }
  .brand-panel h2{
    font-family:'Lora', serif;
    font-weight:700;
    font-size:clamp(18px, 2.1vw, 25px);
    letter-spacing:.02em;
    color:#fff;
    line-height:1.45;
  }
  .brand-panel .brand-caption{
    max-width:300px;
    font-size:13px;
    color:#C9C2AE;
    line-height:1.65;
  }

  @media (max-width:860px){
    .login-screen{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
    .brand-panel{ padding:22px; order:1; }
    .brand-content{ gap:8px; }
    .brand-badge{ width:46px; height:46px; border-width:2px; }
    .brand-logo{ width:30px; height:30px; }
    .brand-panel h2{ font-size:15px; letter-spacing:.01em; }
    .brand-panel .brand-caption{ display:none; }
    .login-panel{ order:2; padding:32px 26px; }
    .login-panel::after{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }