/* ==========================================================================
   dfx.css — DFX Terminal, tampilan neumorfis
   ==========================================================================
   Rombak 10 September 2026, mengikuti acuan yang ditunjukkan pemilik:
   formulir masuk neumorfis, "luxury navy and satin gold", dengan panel yang
   BERGESER menukar Masuk dan Daftar di dalam satu kartu.

   APA ITU NEUMORFISME, DAN KENAPA ATURANNYA KETAT
       Permukaan terlihat timbul karena dua bayangan sekaligus: gelap di sisi
       yang membelakangi cahaya, TERANG di sisi yang menghadapnya. Syaratnya
       satu dan tidak bisa ditawar: latar dan benda harus BERWARNA SAMA. Kalau
       warnanya beda, bayangan terangnya terbaca sebagai garis pinggir yang
       aneh, bukan sebagai cahaya.

       Karena itu --dasar dipakai untuk latar halaman DAN untuk kartu. Semua
       kesan timbul/cekung datang dari --terang dan --gelap saja.

   HARGA GAYA INI, DAN CARA MEMBAYARNYA
       Neumorfisme terkenal buruk untuk keterbacaan: kalau tepi kolom isian
       cuma "bayangan halus", ia bisa tidak terlihat sama sekali oleh mata
       yang lelah atau layar yang buruk - dan ini halaman untuk masuk ke
       terminal trading, bukan pajangan.

       Jadi gayanya dipakai untuk PERMUKAAN saja. Teks, label, dan penanda
       fokus tetap kontras tinggi, dan tiap kolom isian punya cekungan yang
       DALAM plus cincin fokus sian yang tegas - bukan cuma perbedaan
       bayangan. Rasio kontras teksnya diperiksa, bukan dikira-kira.

   AKSENNYA SATU VARIABEL
       Acuannya memakai emas satin. Pemilik memilih biru merek DFX, dan itu
       bukan sekadar tukar warna: emas terang di atas navy dan biru di atas
       navy berperilaku sangat berbeda, jadi LATARNYA ikut dipilih ulang -
       lihat catatan di --dasar. Tidak ada satu pun warna aksen yang ditulis
       langsung di aturan lain; semuanya lewat --aksen*.
   ========================================================================== */

:root{
  /* --- dasar neumorfis: SATU warna untuk latar dan kartu ---
     Dipilih dengan diukur, bukan dikira. Enam calon dibandingkan pada tiga
     hal sekaligus: kontras teks, keseimbangan ruang bayangan (naik vs turun
     dari latar), dan PEMISAHAN RONA aksen terhadap latar - diukur ΔE di ruang
     Lab, karena aksen biru di atas latar biru-tua terbaca sebagai "latar yang
     agak terang", bukan sebagai aksen.

     #141a26 menang di ketiganya: ruang bayangan 0,61 (paling seimbang),
     kontras sian 8,45:1 (tertinggi), ΔE 87 terhadap biru merek (terjauh).
     Navy #16233c yang lama - dipilih dulu untuk berpasangan dengan emas -
     kalah di semuanya begitu aksennya jadi biru. */
  --dasar:#141a26;
  --terang:#202a3e;      /* sisi yang menghadap cahaya */
  --gelap:#080b10;       /* sisi yang membelakanginya  */
  --cekung:#0e131b;      /* dasar kolom isian, sedikit lebih gelap */

  /* --- teks: TIGA tingkat, tidak lebih --- */
  --t1:#eef2f8;
  --t2:#a8b6cb;
  --t3:#7b91b0;

  /* --- aksen: biru merek DFX ---
     PEMBAGIAN TUGAS YANG PENTING, hasil pengukuran:
       --aksen    #12c2ff  sian. Ini satu-satunya yang boleh jadi TEKS
                           (8,45:1 terhadap dasar).
       --aksen-2  #5fd8ff  sian terang, untuk hover dan ujung terang gradien.
       --aksen-3  #0b6bff  biru merek. HANYA untuk isian dan cahaya, TIDAK
                           PERNAH untuk teks: di atas dasar ia cuma 3,4:1,
                           gagal ambang WCAG 4,5. Ini jebakan yang paling
                           mudah dimasuki - warna merek terasa "resmi", jadi
                           orang memakainya untuk tautan tanpa mengukur.
       Teks putih di atas biru juga gagal (3,08:1 di tengah gradien), jadi
       tombol utama memakai isi TERANG dengan teks GELAP - sama seperti waktu
       masih emas, cuma warnanya berganti. */
  --aksen:#12c2ff;
  --aksen-2:#5fd8ff;
  --aksen-3:#0b6bff;
  --aksen-teks:#04121f;   /* teks di atas isi terang: 9,16:1 */
  --aksen-lembut:rgba(18,194,255,.16);

  /* --- vonis --- */
  --up:#3fd97a; --dn:#ff6b62; --am:#ffb648;

  /* --- irama --- */
  --radius:22px;
  --f0:10px; --f1:11.5px; --f2:13px; --f3:15px;

  --pegas:cubic-bezier(.22,.68,.24,1);
  --cepat:150ms; --sedang:280ms; --lambat:460ms;

  /* Satu tempat untuk lama geseran, dipakai CSS DAN dibaca akses.js.
     Dua angka untuk satu gerakan selalu berselisih setelah beberapa
     kali disunting. */
  --geser-lama:620ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--dasar);
  color:var(--t1);
  font:var(--f2)/1.55 'Montserrat','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.angka,input{font-family:'JetBrains Mono','Consolas',monospace;font-variant-numeric:tabular-nums}

a{color:var(--aksen-2);text-decoration:none;transition:color var(--cepat)}
a:hover{color:#a3e8ff}

:focus{outline:none}
:focus-visible{outline:2px solid var(--aksen-2);outline-offset:3px;border-radius:6px}

/* ==========================================================================
   PANGGUNG
   ========================================================================== */
.panggung{
  min-height:100vh;
  display:grid;place-items:center;
  padding:24px;
  perspective:1600px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 640px at 18% 6%, rgba(18,194,255,.09), transparent 62%),
    radial-gradient(820px 580px at 86% 96%, rgba(11,107,255,.10), transparent 60%),
    var(--dasar);
}

/* Aurora. Dua kabut merek yang berputar sangat pelan di belakang segalanya.
   Yang dianimasikan cuma transform - satu elemen, satu lapisan penyusun, jadi
   ia tidak menghitung ulang tata letak sekali pun. Sengaja 30 detik: apa pun
   yang lebih cepat akan tertangkap mata dan berubah jadi gangguan pada kali
   kesepuluh halaman ini dibuka. */
.panggung::before{
  content:'';
  position:absolute;left:50%;top:50%;
  width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(18,194,255,.13),transparent 72%) 32% 30%/46% 42% no-repeat,
    radial-gradient(closest-side,rgba(11,107,255,.15),transparent 72%) 68% 68%/50% 46% no-repeat;
  animation:aurora 30s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{transform:rotate(-8deg) scale(1)}
  to{transform:rotate(14deg) scale(1.14)}
}

/* Kisi halus. Memberi bidang acuan supaya kemiringan kartu punya sesuatu
   untuk dibandingkan - tanpa itu, mata sulit menilai kedalaman. mask
   membuatnya lenyap di tepi, jadi tidak ada garis yang terpotong tiba-tiba. */
.panggung::after{
  content:'';
  position:absolute;inset:-10%;
  z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,170,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,230,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(closest-side at 50% 46%,#000 30%,transparent 82%);
  mask-image:radial-gradient(closest-side at 50% 46%,#000 30%,transparent 82%);
}

/* ==========================================================================
   REL TERMINAL
   ==========================================================================
   Bilah tipis di bibir atas kartu: nama, dan jam WIB yang berjalan. Bukan
   hiasan - ini halaman masuk ke terminal trading, dan jam adalah hal pertama
   yang dicari trader saat membukanya. Ia juga menandai "atas" dengan tegas,
   berguna begitu kartunya bisa miring.

   Digambar di ATAS panel geser (z-index 6) supaya membentang penuh selebar
   kartu, bukan terpotong di tengah saat panelnya lewat.
   ========================================================================== */
.rel{
  position:absolute;top:0;left:0;right:0;height:30px;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--t3);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  border-bottom:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.rel b{color:var(--aksen);font-weight:700;letter-spacing:2px}
.rel-kanan{display:inline-flex;align-items:center;gap:7px}
.rel-titik{
  width:5px;height:5px;border-radius:50%;
  background:var(--aksen);box-shadow:0 0 8px var(--aksen);
  animation:denyut 2.4s ease-in-out infinite;
}
#jam{color:var(--t2);letter-spacing:1.2px}

/* ==========================================================================
   KARTU
   ==========================================================================
   Dua sisi berdampingan, dan satu panel yang bergeser menutupi salah satunya.
   Kartunya TIDAK dibuat ulang saat berpindah - yang bergerak cuma panelnya,
   dan itulah yang membuat perpindahannya terasa satu benda, bukan dua
   halaman yang bertukar.
   ========================================================================== */
.kartu{
  position:relative;
  z-index:1;                 /* di atas aurora & kisi di .panggung */
  width:min(760px,100%);
  /* Tingginya DIUKUR dari isi terpanjang, bukan dikira. Sisi daftar pada
     langkah 1 dengan pesan galat panjang butuh 553px; kartu 496px yang lama
     memotong catatan kakinya 12px tanpa ada yang kelihatan salah.
     Batas bawah 420px supaya di layar pendek kartunya ikut mengecil dan
     tidak menggantung keluar jendela. */
  height:clamp(420px,calc(100vh - 48px),600px);
  border-radius:var(--radius);
  background:var(--dasar);
  /* Timbul: gelap di kanan-bawah, terang di kiri-atas. */
  box-shadow:
    16px 16px 34px var(--gelap),
    -14px -14px 32px var(--terang),
    inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform var(--lambat) var(--pegas);
}

/* --- dua sisi --- */
.sisi{
  position:absolute;top:0;height:100%;width:50%;
  padding:52px 42px 34px;
  display:flex;flex-direction:column;
  /* BUKAN justify-content:center. Pada wadah yang bisa meluap, memusatkan
     dengan justify-content memotong bagian ATAS isinya dan bagian itu TIDAK
     BISA digulir untuk dilihat - cacat lama flexbox yang bentuknya persis
     seperti tata letak rusak. Trik margin:auto di anak pertama dan terakhir
     memusatkan saat ruangnya cukup, dan menggulir dari atas saat tidak. */
  justify-content:flex-start;
  /* Jaring pengaman. Tinggi kartu sudah dihitung dari isi terpanjang, tapi
     huruf sistem yang diperbesar pengguna bisa melewatinya kapan saja -
     dan isian yang tidak bisa dijangkau jauh lebih buruk daripada bilah
     gulir yang muncul sesekali. */
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--terang) transparent;
  transition:opacity var(--sedang) ease, visibility var(--sedang);
}
.sisi > :first-child{margin-top:auto}
.sisi > :last-child{margin-bottom:auto}

/* Sisi masuk punya DUA tampilan bertumpuk (masuk & atur ulang sandi) dan
   hanya satu yang terlihat. Aturan :first-child/:last-child di atas tidak
   cukup di sini: yang terlihat bisa jadi bukan anak pertama maupun terakhir,
   dan hasilnya isinya menempel ke bawah kartu. margin auto di kedua sisi
   memusatkan mana pun yang sedang tampil. */
.sisi > .tampilan{margin-top:auto;margin-bottom:auto}
.tampilan[hidden]{display:none}

.sisi-masuk{left:0}
.sisi-daftar{right:0}

/* Sisi yang sedang tertutup panel disembunyikan dari pembaca layar dan dari
   urutan Tab juga - bukan cuma dari mata. Kolom yang tidak terlihat tapi
   masih bisa di-Tab adalah jebakan klasik pada pola geser seperti ini. */
.sisi::-webkit-scrollbar{width:6px}
.sisi::-webkit-scrollbar-thumb{background:var(--terang);border-radius:3px}
.sisi::-webkit-scrollbar-track{background:transparent}
.sisi[hidden]{display:none}
.sisi.redup{opacity:0;visibility:hidden}

.judul{
  font-size:19px;font-weight:700;letter-spacing:.4px;
  margin-bottom:4px;color:var(--t1);
}
.subjudul{
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:var(--f0);letter-spacing:2.2px;text-transform:uppercase;
  color:var(--t3);margin-bottom:20px;
}

/* ==========================================================================
   KOLOM ISIAN — cekungan
   ==========================================================================
   Kolom isian dibuat CEKUNG (bayangan di dalam), kebalikan dari tombol yang
   timbul. Itu bahasa bentuk yang langsung terbaca: yang cekung menerima
   isian, yang timbul bisa ditekan.
   ========================================================================== */
.baris{margin-bottom:14px}

.baris label{
  display:block;
  font-size:var(--f0);letter-spacing:1.4px;text-transform:uppercase;
  font-weight:600;color:var(--t2);
  margin-bottom:6px;
  transition:color var(--cepat);
}
.baris:focus-within label{color:var(--aksen-2)}

.baris input{
  width:100%;min-height:46px;
  border:0;border-radius:12px;
  background:var(--cekung);
  color:var(--t1);
  font-size:var(--f2);
  padding:12px 15px;
  box-shadow:
    inset 5px 5px 11px var(--gelap),
    inset -4px -4px 10px var(--terang);
  transition:box-shadow var(--sedang) ease, background var(--cepat);
}
.baris input::placeholder{color:#4d5f7c}
.baris input:focus{
  background:#0d1729;
  /* Cincin sian TEGAS, bukan sekadar bayangan yang sedikit berubah. Pada
     permukaan neumorfis, perubahan bayangan halus nyaris tidak terlihat -
     dan penanda fokus yang tidak terlihat sama saja dengan tidak ada. */
  box-shadow:
    inset 5px 5px 11px var(--gelap),
    inset -4px -4px 10px var(--terang),
    0 0 0 2px var(--aksen),
    0 0 18px var(--aksen-lembut);
}
.baris input:-webkit-autofill{
  -webkit-text-fill-color:var(--t1);
  -webkit-box-shadow:0 0 0 40px var(--cekung) inset;
}

/* ==========================================================================
   TOMBOL — timbul, lalu benar-benar tertekan
   ========================================================================== */
.tombol{
  position:relative;
  width:100%;min-height:48px;
  border:0;border-radius:13px;
  background:linear-gradient(145deg,var(--aksen-2),var(--aksen) 62%,#0aa8e6);
  color:var(--aksen-teks);
  font:700 var(--f2)/1 'Montserrat',system-ui,sans-serif;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:15px;margin-top:12px;
  cursor:pointer;overflow:hidden;
  box-shadow:
    6px 6px 14px var(--gelap),
    -5px -5px 12px var(--terang),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition:box-shadow var(--cepat) ease, transform var(--cepat) var(--pegas),
             filter var(--cepat);
  -webkit-tap-highlight-color:transparent;
}
.tombol:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
/* Ditekan = bayangannya MASUK ke dalam. Itu satu-satunya cara "tertekan"
   terbaca benar di permukaan neumorfis; menggeser turun saja tidak cukup. */
.tombol:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:
    inset 5px 5px 11px rgba(0,0,0,.42),
    inset -3px -3px 9px rgba(255,255,255,.22);
  transition-duration:60ms;
}
.tombol:disabled{filter:saturate(.4) brightness(.85);cursor:progress}

.riak{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%) scale(0);opacity:.8;pointer-events:none;
  animation:riak var(--lambat) var(--pegas) forwards;
}
@keyframes riak{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

.tombol .putar{
  display:none;width:15px;height:15px;
  border:2px solid rgba(4,18,31,.28);border-top-color:var(--aksen-teks);
  border-radius:50%;animation:putar .68s linear infinite;
}
.tombol.sibuk .teks{visibility:hidden}
.tombol.sibuk .putar{display:block;position:absolute;inset:0;margin:auto}
@keyframes putar{to{transform:rotate(360deg)}}

.tombol-teks{
  display:block;width:100%;min-height:40px;
  background:none;border:0;border-radius:9px;
  color:var(--t3);font:500 var(--f1)/1 'Montserrat',system-ui,sans-serif;
  padding:11px;margin-top:5px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:color var(--cepat),background var(--cepat);
}
.tombol-teks:hover:not(:disabled){color:var(--aksen-2);background:rgba(18,194,255,.07)}
.tombol-teks:disabled{opacity:.42;cursor:default}

/* ==========================================================================
   PANEL GESER
   ==========================================================================
   Menutupi satu sisi, dan bergeser ke sisi lain saat ditukar. Dua lingkaran
   lembut di dalamnya ikut bergeser dengan jarak berbeda - paralaks kecil itu
   yang membuat panelnya terasa punya isi, bukan sekadar kotak berpindah.
   ========================================================================== */
.geser{
  position:absolute;top:0;left:0;
  width:50%;height:100%;
  border-radius:var(--radius);
  background:var(--dasar);
  box-shadow:
    10px 10px 26px var(--gelap),
    -9px -9px 24px var(--terang);
  overflow:hidden;
  z-index:5;
  transition:transform var(--geser-lama) var(--pegas);
}
.geser.ke-kanan{transform:translateX(100%)}

.geser-lingkaran{
  position:absolute;border-radius:50%;
  background:var(--dasar);
  transition:transform var(--geser-lama) var(--pegas);
}
/* Cekung besar di belakang. */
.geser-lingkaran.a{
  width:230px;height:230px;top:-96px;left:-96px;
  box-shadow:inset 9px 9px 20px var(--gelap), inset -9px -9px 20px var(--terang);
}
/* Timbul kecil di depan. */
.geser-lingkaran.b{
  width:154px;height:154px;bottom:-58px;right:-58px;
  box-shadow:9px 9px 20px var(--gelap), -9px -9px 20px var(--terang);
}
.geser.ke-kanan .geser-lingkaran.a{transform:translate(56px,26px)}
.geser.ke-kanan .geser-lingkaran.b{transform:translate(-46px,-22px)}

.geser-isi{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 36px 34px;text-align:center;
  transition:opacity var(--sedang) ease, transform var(--sedang) var(--pegas);
}
.geser-isi[hidden]{display:none}

.geser-logo{
  height:44px;width:auto;margin-bottom:16px;
  /* Dua pendar: satu bayangan gelap supaya logonya duduk di atas permukaan,
     satu pendar merek supaya ia jadi satu-satunya benda yang MEMANCARKAN
     cahaya di kartu ini - bukan cuma memantulkannya. */
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.6))
         drop-shadow(0 0 26px rgba(18,194,255,.28));
}
.geser-judul{font-size:17px;font-weight:700;margin-bottom:8px}
.geser-teks{color:var(--t2);font-size:var(--f1);line-height:1.7;margin-bottom:22px}

/* Tombol di panel geser: garis luar, bukan isi penuh. Kalau ia seterang
   tombol utama, dua ajakan bersaing di satu layar dan tidak ada yang menang. */
.geser-tombol{
  position:relative;
  min-width:172px;min-height:44px;
  border:1px solid var(--aksen-3);
  border-radius:12px;
  background:var(--dasar);
  color:var(--aksen-2);
  font:700 var(--f1)/1 'Montserrat',system-ui,sans-serif;
  letter-spacing:1.4px;text-transform:uppercase;
  padding:14px 22px;cursor:pointer;overflow:hidden;
  box-shadow:5px 5px 12px var(--gelap), -4px -4px 11px var(--terang);
  transition:box-shadow var(--cepat),color var(--cepat),transform var(--cepat);
}
.geser-tombol:hover{color:#a3e8ff;transform:translateY(-1px)}
.geser-tombol:active{
  transform:translateY(1px);
  box-shadow:inset 4px 4px 10px var(--gelap), inset -3px -3px 8px var(--terang);
  transition-duration:60ms;
}

/* ==========================================================================
   PESAN
   ========================================================================== */
.pesan{
  display:none;position:relative;
  margin-top:15px;padding:11px 12px 11px 38px;
  border-radius:11px;
  background:var(--cekung);
  box-shadow:inset 4px 4px 10px var(--gelap), inset -3px -3px 8px var(--terang),
             inset 3px 0 0 var(--dn);
  color:#ffb9b3;font-size:var(--f1);
}
.pesan.tampil{display:block;animation:masuk-pesan var(--sedang) var(--pegas)}
.pesan::before{
  content:'';position:absolute;left:13px;top:12px;width:16px;height:16px;
  background:no-repeat center/16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb9b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
@keyframes masuk-pesan{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.pesan.baik{
  color:#9df0bd;
  box-shadow:inset 4px 4px 10px var(--gelap), inset -3px -3px 8px var(--terang),
             inset 3px 0 0 var(--up);
}
.pesan.baik::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239df0bd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.goyang{animation:goyang 320ms cubic-bezier(.36,.07,.19,.97)}
@keyframes goyang{
  10%,90%{transform:translateX(-1.5px)} 20%,80%{transform:translateX(2.5px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}

/* ==========================================================================
   KAKI — baris status
   ========================================================================== */
.kaki{
  margin-top:14px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.05);
  color:var(--t3);font-size:var(--f0);
  text-align:center;line-height:1.9;
}
.status{display:inline-flex;align-items:center;gap:6px}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--t3);flex:none}
.status.aman::before{background:var(--up);box-shadow:0 0 8px rgba(63,217,122,.7)}
.status.lokal::before{background:var(--aksen-2);box-shadow:0 0 8px rgba(18,194,255,.6)}
.status.bahaya::before{background:var(--am);box-shadow:0 0 8px rgba(255,182,72,.7);animation:denyut 1.9s ease-in-out infinite}
@keyframes denyut{50%{opacity:.35}}

/* ==========================================================================
   LANGKAH PENDAFTARAN
   ========================================================================== */
.sembunyi{display:none}
.masuk-anim{animation:geser-masuk var(--lambat) var(--pegas)}
@keyframes geser-masuk{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.langkah{display:flex;gap:8px;list-style:none;counter-reset:l;margin:0 0 16px;padding:0}
.langkah li{
  counter-increment:l;flex:1 1 0;position:relative;
  font-size:9px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;
  color:var(--t3);text-align:center;padding-top:10px;
  transition:color var(--sedang);
}
.langkah li::after{
  content:'';position:absolute;left:0;top:0;height:4px;width:100%;
  border-radius:4px;background:var(--cekung);
  box-shadow:inset 2px 2px 4px var(--gelap), inset -2px -2px 4px var(--terang);
}
.langkah li::before{content:counter(l) '. '}
.langkah li.aktif{color:var(--aksen-2)}
.langkah li.aktif::after{
  background:linear-gradient(90deg,var(--aksen-3),var(--aksen-2));
  box-shadow:0 0 10px var(--aksen-lembut);
  animation:isi var(--lambat) var(--pegas);
}
@keyframes isi{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.langkah li.selesai{color:var(--up)}
.langkah li.selesai::after{background:linear-gradient(90deg,#2a9a58,var(--up));box-shadow:0 0 10px rgba(63,217,122,.35)}
.langkah li.selesai::before{
  content:'';display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px;
  background:no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fd97a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.petunjuk{margin-top:6px;font-size:9px;letter-spacing:.4px;color:var(--t3);transition:color var(--cepat)}
.petunjuk.kurang{color:var(--dn)} .petunjuk.sedang{color:var(--am)} .petunjuk.baik{color:var(--up)}
.kirim-ke{text-align:center;color:var(--t2);font-size:var(--f1);margin-bottom:16px;word-break:break-all}

/* ==========================================================================
   KOLOM OTP — enam petak, satu orbit
   ==========================================================================
   Urutan geraknya tidak berubah dari sebelumnya (melengkung -> berputar ->
   menukik jadi satu petak vonis); yang berubah cuma permukaannya, supaya
   sebahasa dengan sisa halaman: petak kosong CEKUNG, petak terisi TIMBUL.
   Perbedaan bentuk itu bekerja bahkan untuk yang tidak membedakan warna.

   Putarannya tetap menandai MASA TUNGGU ke server - hijau baru turun kalau
   server benar-benar menerima kodenya. Alasannya di otp.js.
   ========================================================================== */
.otp{
  --petak-l:44px; --petak-t:54px; --jarak:50px; --jari:68px;
  position:relative;height:58px;
  transition:height var(--lambat) var(--pegas);
}
.cincin{position:absolute;inset:0}

.petak{
  position:absolute;left:50%;top:50%;
  width:var(--petak-l);height:var(--petak-t);
  margin:calc(var(--petak-t) / -2) 0 0 calc(var(--petak-l) / -2);
  border-radius:12px;
  background:var(--cekung);
  display:grid;place-items:center;
  box-shadow:inset 4px 4px 9px var(--gelap), inset -3px -3px 8px var(--terang);
  transition:transform var(--lambat) var(--pegas),
             box-shadow var(--sedang), opacity var(--sedang), background var(--cepat);
}
.petak span{font:700 22px/1 'JetBrains Mono','Consolas',monospace;color:var(--t1);display:block}

.petak:nth-child(1){transform:translateX(calc(var(--jarak) * -2.5))}
.petak:nth-child(2){transform:translateX(calc(var(--jarak) * -1.5))}
.petak:nth-child(3){transform:translateX(calc(var(--jarak) * -0.5))}
.petak:nth-child(4){transform:translateX(calc(var(--jarak) *  0.5))}
.petak:nth-child(5){transform:translateX(calc(var(--jarak) *  1.5))}
.petak:nth-child(6){transform:translateX(calc(var(--jarak) *  2.5))}

/* Terisi = TIMBUL. Angka yang sudah masuk jadi benda padat, bukan lubang. */
.petak.isi{
  background:var(--dasar);
  box-shadow:4px 4px 10px var(--gelap), -3px -3px 9px var(--terang);
}
/* Menunggu ketikan: cincin sian. */
.petak.aktif{
  box-shadow:inset 4px 4px 9px var(--gelap), inset -3px -3px 8px var(--terang),
             0 0 0 2px var(--aksen), 0 0 18px var(--aksen-lembut);
}

.otp input{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:none;opacity:0;
  font-size:16px;                /* cegah Safari iPhone memperbesar halaman */
  color:transparent;caret-color:transparent;cursor:text;
}

.otp.mengorbit{height:calc(var(--jari) * 2 + var(--petak-t) + 6px)}
.otp.mengorbit input{pointer-events:none}
.otp.mengorbit .petak:nth-child(1){transform:rotate(0deg) translateY(calc(var(--jari) * -1)) rotate(0deg)}
.otp.mengorbit .petak:nth-child(2){transform:rotate(60deg) translateY(calc(var(--jari) * -1)) rotate(-60deg)}
.otp.mengorbit .petak:nth-child(3){transform:rotate(120deg) translateY(calc(var(--jari) * -1)) rotate(-120deg)}
.otp.mengorbit .petak:nth-child(4){transform:rotate(180deg) translateY(calc(var(--jari) * -1)) rotate(-180deg)}
.otp.mengorbit .petak:nth-child(5){transform:rotate(240deg) translateY(calc(var(--jari) * -1)) rotate(-240deg)}
.otp.mengorbit .petak:nth-child(6){transform:rotate(300deg) translateY(calc(var(--jari) * -1)) rotate(-300deg)}

.otp.mengorbit .cincin{animation:putar-cincin 1.5s linear 480ms infinite}
.otp.mengorbit .petak span{animation:putar-angka 1.5s linear 480ms infinite}
@keyframes putar-cincin{to{transform:rotate(360deg)}}
@keyframes putar-angka{to{transform:rotate(-360deg)}}

.otp.mengorbit::before{
  content:'';position:absolute;left:50%;top:50%;
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--aksen-2);box-shadow:0 0 14px var(--aksen-2);
  animation:denyut 1.5s ease-in-out infinite;
}

.otp.selesai .cincin{animation:tukik 760ms cubic-bezier(.45,0,.2,1) forwards}
.otp.selesai .petak{animation:kecil 760ms cubic-bezier(.45,0,.2,1) forwards}
.otp.selesai .petak span{animation:none;transform:none}
.otp.selesai::before{opacity:0;transition:opacity 200ms}
@keyframes tukik{to{transform:rotate(450deg)}}
@keyframes kecil{60%{opacity:1} to{transform:translate(0,0) scale(.28);opacity:0}}

.tanda{
  position:absolute;left:50%;top:50%;
  width:62px;height:62px;margin:-31px 0 0 -31px;
  border-radius:16px;background:var(--dasar);
  box-shadow:5px 5px 14px var(--gelap), -4px -4px 12px var(--terang),
             0 0 0 2px var(--up), 0 0 30px rgba(63,217,122,.32);
  display:grid;place-items:center;
  opacity:0;transform:scale(.5) rotate(-14deg);pointer-events:none;
}
.tanda::after{
  content:'';width:30px;height:30px;
  background:no-repeat center/30px 30px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fd97a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.otp.selesai .tanda{animation:vonis 520ms 420ms cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes vonis{to{opacity:1;transform:scale(1) rotate(0)}}

.otp.tolak .petak{
  box-shadow:inset 4px 4px 9px var(--gelap), inset -3px -3px 8px var(--terang),
             0 0 0 2px var(--dn);
}
.otp.tolak .petak span{color:#ffb9b3}

/* Saat kode sedang diperiksa, sisi ini menyusut jadi orbitnya saja. Dua
   alasan: tidak ada satu pun tombol di bawah yang bisa ditindaklanjuti selama
   menunggu, dan tanpa ini isinya melewati tinggi kartu justru pada saat
   orbitnya paling besar. */
.sisi.memverifikasi .tombol,
.sisi.memverifikasi .tombol-teks,
.sisi.memverifikasi .pesan{
  /* MENCIUT, bukan cuma disamarkan. opacity:0 saja menyisakan ruangnya, dan
     ruang itu justru yang membuat isinya melewati tinggi kartu tepat saat
     orbitnya paling besar - terukur 718px di kartu 600px.
     Ini satu-satunya tempat di berkas ini yang menganimasikan ukuran, bukan
     transform: menciutkan tinggi memang menuntut tata letak dihitung ulang.
     Tiga elemen, sekali, 280ms - dan tidak ada cara lain yang benar. */
  opacity:0;
  max-height:0;
  /* min-height WAJIB ikut dinolkan. Di CSS, min-height MENGALAHKAN
     max-height - jadi tanpa baris ini tombolnya cuma jadi tak terlihat
     sementara 48px ruangnya tetap ada. Sisi daftar sempat lolos dari cacat
     ini cuma karena angkanya kebetulan masih muat; sisi atur-ulang tidak. */
  min-height:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
  pointer-events:none;
  transition:opacity var(--sedang) ease, max-height var(--sedang) var(--pegas),
             margin var(--sedang) var(--pegas), padding var(--sedang) var(--pegas);
}
/* Nilai awalnya harus tertulis supaya ADA yang bisa dianimasikan: transisi
   dari max-height:none ke 0 tidak menghasilkan gerakan apa pun. */
.sisi .tombol,
.sisi .tombol-teks,
.sisi .pesan{
  max-height:160px;
  transition:opacity var(--sedang) ease, max-height var(--sedang) var(--pegas),
             margin var(--sedang) var(--pegas), padding var(--sedang) var(--pegas),
             box-shadow var(--cepat) ease, transform var(--cepat) var(--pegas),
             filter var(--cepat), color var(--cepat), background var(--cepat);
}

/* ==========================================================================
   LAYAR SEMPIT
   ==========================================================================
   Panel geser 50% tidak masuk akal di bawah 760px - dua sisi berdampingan
   jadi terlalu sempit untuk kolom isian. Di bawah itu kartunya jadi satu
   kolom, dan penukarnya turun ke bawah sebagai baris ajakan biasa.
   ========================================================================== */
@media (max-width:800px){
  .panggung{padding:16px;perspective:none}
  .kartu{
    width:min(420px,100%);height:auto;
    transform:none !important;
  }
  .sisi{position:relative;width:100%;padding:46px 24px 24px}
  .sisi.redup{display:none}

  /* Panelnya tidak lagi menutupi apa pun; ia jadi kaki kartu. */
  .geser{
    position:relative;width:100%;height:auto;
    transform:none !important;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:inset 0 8px 18px var(--gelap);
    padding:22px 20px 24px;
  }
  .geser-lingkaran{display:none}
  .geser-isi{position:relative;inset:auto;padding:0}
  .geser-logo{display:none}
  .geser-judul{font-size:14px;margin-bottom:5px}
  .geser-teks{margin-bottom:15px}
}

@media (max-width:420px){
  .baris input{font-size:16px}   /* cegah Safari iPhone memperbesar halaman */
  .otp{--petak-l:41px;--petak-t:50px;--jarak:47px;--jari:60px}
  .petak span{font-size:19px}
}

/* ==========================================================================
   GERAK DIKURANGI
   ==========================================================================
   Dimatikan penuh, bukan diperlambat. Sebagian orang mematikannya karena
   animasi memicu pusing, dan animasi lambat justru lebih buruk untuk itu.
   Kedalaman neumorfisnya tetap ada - bayangannya statis, bukan bergerak.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .kartu{transform:none !important}
  .panggung::before{animation:none}
  .otp.mengorbit{height:58px}
  .otp.mengorbit .petak:nth-child(1){transform:translateX(calc(var(--jarak) * -2.5))}
  .otp.mengorbit .petak:nth-child(2){transform:translateX(calc(var(--jarak) * -1.5))}
  .otp.mengorbit .petak:nth-child(3){transform:translateX(calc(var(--jarak) * -0.5))}
  .otp.mengorbit .petak:nth-child(4){transform:translateX(calc(var(--jarak) *  0.5))}
  .otp.mengorbit .petak:nth-child(5){transform:translateX(calc(var(--jarak) *  1.5))}
  .otp.mengorbit .petak:nth-child(6){transform:translateX(calc(var(--jarak) *  2.5))}
  .otp.mengorbit .cincin,.otp.mengorbit .petak span,.otp.mengorbit::before{animation:none}
  .otp.selesai .petak{opacity:0;animation:none}
  .otp.selesai .cincin{animation:none}
  .otp.selesai .tanda{opacity:1;transform:none;animation:none}
}