/* =====================================================================
   GERBANG PIN
   ---------------------------------------------------------------------
   Semua warna diambil dari variabel tema (site.css + themes.css),
   jadi gerbangnya otomatis ikut suasana ucapannya.
   ===================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.gate-body{min-height:100svh}

.gate{
  position:relative;z-index:3;
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:28px 18px calc(28px + env(safe-area-inset-bottom));
}

.gate-card{
  width:min(430px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow-lg);
  padding:30px 26px 26px;
  /* Tanpa ini kartu tetap bisa didorong melar oleh isi yang kelewat
     lebar, karena item grid punya min-width:auto. Lebarnya sekarang
     benar-benar dipegang baris width di atas. */
  min-width:0;
  text-align:center;
  animation:gateIn .8s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes gateIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------
   Maskot
   -------------------------------------------------------------- */
.gate-art{
  width:132px;height:132px;margin:0 auto 14px;
  display:grid;place-items:center;
}
.gate-art .gm{width:100%;height:100%;overflow:visible}
.gm{animation:gmBob 3.4s ease-in-out infinite}
@keyframes gmBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.5deg)}}

.gm-eye{fill:#3a2430;transform-box:fill-box;transform-origin:center;animation:gmBlink 5.2s infinite}
@keyframes gmBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.gm-mouth{fill:none;stroke:#3a2430;stroke-width:2.4;stroke-linecap:round}

/* Lilin & asap */
.gm-flame{
  transform-box:fill-box;transform-origin:bottom center;
  animation:gmFlicker 1.1s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .18s);
}
@keyframes gmFlicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12,.92) rotate(3deg)}}
.gm-smoke{opacity:0}

/* --------------------------------------------------------------
   Reaksi saat PIN salah
   -------------------------------------------------------------- */
.gate-card.is-wrong{animation:gateShake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes gateShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-9px)}
  40%,60%{transform:translateX(9px)}
}

.is-wrong .gm{animation:gmSad .7s ease both}
@keyframes gmSad{0%{transform:none}40%{transform:translateY(6px) scale(.94)}100%{transform:translateY(2px)}}

/* Mulut membalik jadi cemberut */
.gm-mouth{transform-box:fill-box;transform-origin:center;transition:transform .3s ease}
.is-wrong .gm-mouth{transform:scaleY(-1)}
.is-wrong .gm-eye{animation:none;transform:scaleY(.35)}

/* Lilin padam, asap mengepul */
.is-wrong .gm-flame{opacity:0;transition:opacity .25s ease}
.is-wrong .gm-smoke{animation:gmSmoke 1.4s ease-out both;animation-delay:calc(var(--i,0) * .1s)}
@keyframes gmSmoke{0%{opacity:0;transform:translateY(4px) scale(.6)}30%{opacity:.7}100%{opacity:0;transform:translateY(-16px) scale(1.2)}}

/* Balon & kado kempis sebentar */
.is-wrong .gm-bag{animation:gmDeflate .7s ease both;transform-box:fill-box;transform-origin:bottom center}
@keyframes gmDeflate{0%{transform:none}45%{transform:scale(.82,.7)}75%{transform:scale(1.04,1.03)}100%{transform:none}}

/* Gembok menggeleng */
.is-wrong .gm-shackle{animation:gmRattle .5s ease-in-out 2 both;transform-box:fill-box;transform-origin:bottom center}
@keyframes gmRattle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

/* Amplop mengibas penutupnya */
.is-wrong .gm-flap{animation:gmFlap .6s ease both;transform-box:fill-box;transform-origin:top center}
@keyframes gmFlap{0%,100%{transform:rotateX(0)}50%{transform:rotateX(38deg)}}

/* --------------------------------------------------------------
   Reaksi saat PIN benar
   -------------------------------------------------------------- */
.gate-card.is-ok{animation:gateOut .7s ease .45s both}
@keyframes gateOut{to{opacity:0;transform:translateY(-18px) scale(.94)}}
.is-ok .gm{animation:gmJump .55s cubic-bezier(.2,1.4,.4,1) 2 both}
@keyframes gmJump{0%,100%{transform:translateY(0)}45%{transform:translateY(-18px) scale(1.06)}}
.is-ok .gm-mouth{stroke-width:3}
.is-ok .gm-eye{animation:none;transform:scaleY(.3)}

/* --------------------------------------------------------------
   Judul & teks
   -------------------------------------------------------------- */
.gate-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,5.4vw,1.75rem);line-height:1.25;
  margin:0 0 8px;letter-spacing:-.01em;
}
.gate-sub{margin:0 0 4px;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.gate-for{
  margin:10px 0 20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.gate-for b{font-family:var(--script);font-size:1.6em;letter-spacing:0;text-transform:none;font-weight:400}

/* --------------------------------------------------------------
   Kotak PIN
   -------------------------------------------------------------- */
.pin-field{margin:0 0 14px}

/* Tanpa JavaScript: satu kolom isian biasa yang tetap enak dipakai. */
.pin-input{
  width:100%;padding:14px 16px;
  font-family:var(--sans);font-size:1.5rem;font-weight:700;
  text-align:center;letter-spacing:.5em;text-indent:.5em;
  color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border:2px solid var(--line);border-radius:16px;
  outline:none;transition:border-color .18s ease,box-shadow .18s ease;
}
.pin-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.pin-input::placeholder{letter-spacing:.35em;opacity:.35;font-weight:400}

/* Dengan JavaScript: deretan kotak satuan. */
/* TIDAK boleh turun baris.

   Sempat dicoba flex-wrap, dan hasilnya salah: flexbox memutus baris
   LEBIH DULU, baru mengecilkan isi tiap baris. Jadi enam kotak di layar
   393px tidak mengecil jadi 44px dalam satu baris seperti yang
   diharapkan, melainkan lima kotak di baris pertama dan satu kotak
   yatim di bawahnya. Satu baris yang mengecil jauh lebih terbaca
   sebagai "masukkan PIN" daripada barisan yang patah. */
.pin-wrap{position:relative;display:flex;gap:8px;justify-content:center;min-width:0}
.pin-wrap .pin-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;
  /* Tetap bisa disentuh & difokus supaya papan ketik HP muncul. */
  font-size:16px;   /* < 16px membuat iOS ikut memperbesar halaman */
}
/* Lebarnya dari RUANG YANG ADA, bukan dari lebar layar.

   Dulu clamp(38px,12.5vw,50px), dan vw itu lebar viewport — tidak tahu
   apa-apa soal padding .gate maupun padding kartunya. Di layar 393px
   enam kotak plus jaraknya jadi 335px, sedangkan isi kartunya cuma
   punya 305px. Kartu ini item grid, dan item grid punya min-width:auto,
   jadi yang melar justru KARTUNYA: 389px di dalam ruang 357px. Tepi
   kirinya tetap di tempat karena padding, tepi kanannya menempel dinding
   dan sudut membulatnya hilang — persis sebelah kanan saja yang
   terpotong.

   flex-basis 50px dengan flex-shrink 1 membuat keenam kotak mengecil
   bersama-sama sampai muat, berapa pun lebarnya. aspect-ratio menjaga
   bentuknya tetap sama, jadi tidak ada satu pun ukuran yang perlu
   ditebak dari vw lagi. */
.pin-cell{
  flex:0 1 50px;min-width:0;aspect-ratio:5/6;
  display:grid;place-items:center;
  font-family:var(--sans);font-size:1.5rem;font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border:2px solid var(--line);border-radius:14px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.pin-cell.is-filled{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.pin-cell.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
}
.pin-cell .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);opacity:.85}

/* --------------------------------------------------------------
   Pesan salah, istirahat, tombol, petunjuk
   -------------------------------------------------------------- */
.gate-err{
  margin:0 0 14px;padding:10px 14px;
  background:color-mix(in srgb,#e0526e 12%,transparent);
  color:#c0344f;border-radius:12px;
  font-size:.9rem;font-weight:600;line-height:1.5;
  animation:errIn .35s ease both;
}
body[data-bg="night"] .gate-err,
body[data-bg="aurora"] .gate-err{color:#ffb3c1}
@keyframes errIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.gate-cool{
  margin:0 0 16px;padding:11px 14px;
  background:color-mix(in srgb,var(--accent2) 20%,transparent);
  color:var(--ink);border-radius:12px;font-size:.88rem;line-height:1.5;
}

.gate-go{width:100%;justify-content:center}

.gate-hint{margin:18px 0 0;text-align:left}
.gate-hint summary{
  cursor:pointer;list-style:none;text-align:center;
  font-size:.86rem;font-weight:600;color:var(--accent);
  padding:8px;border-radius:10px;transition:background .18s ease;
}
.gate-hint summary::-webkit-details-marker{display:none}
.gate-hint summary:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.gate-hint p{
  margin:6px 0 0;padding:12px 14px;
  background:color-mix(in srgb,var(--accent2) 16%,transparent);
  border-radius:12px;font-size:.9rem;line-height:1.6;color:var(--ink);
}
.gate-nohint{margin:16px 0 0;font-size:.82rem;color:var(--ink-soft);opacity:.75}

@media (prefers-reduced-motion: reduce){
  .gm,.gm-eye,.gm-flame{animation:none !important}
  .gate-card,.gate-card.is-wrong,.gate-card.is-ok{animation:none !important}
}

/* --------------------------------------------------------------
   Layar pendek
   --------------------------------------------------------------
   Kartu gerbang setinggi 512px, dan dengan padding 28px atas-bawah
   ia butuh 568px. Di layar yang lebih pendek dari itu halamannya
   mulai menggulir — dan karena isinya dipusatkan, yang terpotong
   justru tepi atas dan bawah kartunya sekaligus.

   Dua tempat ini benar-benar terjadi: HP dalam posisi mendatar, dan
   kolom pratinjau di editor yang tingginya cuma seukuran layar HP
   dikurangi kepala dan bilah aksi.

   Yang dikecilkan cuma ruang kosongnya: maskot, jarak antar bagian,
   dan padding. Tidak ada satu pun isian atau tulisan yang hilang.
   -------------------------------------------------------------- */
@media (max-height:640px){
  .gate{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .gate-card{padding:20px 22px 18px}
  .gate-art{width:92px;height:92px;margin-bottom:8px}
  .gate-title{font-size:clamp(1.2rem,5vw,1.5rem);margin-bottom:6px}
  .gate-sub{font-size:.88rem;line-height:1.5}
  .gate-for{margin:8px 0 14px}
  .pin-field{margin-bottom:10px}
  .pin-cell{flex-basis:44px}
  .gate-hint{margin-top:12px}
  .gate-nohint{margin-top:10px}
}

/* Layar sempit: jaraknya ikut mengecil, supaya yang menyusut bukan
   kotaknya saja. PIN dua belas karakter di layar 320px memang tetap
   jadi kotak-kotak kecil — itu ujung paling ekstrem dari rentang yang
   diizinkan, dan barisan yang patah di sana lebih membingungkan. */
@media (max-width:360px){
  .pin-wrap{gap:5px}
}