/* =========================================================
   LatPrak Kedokteran · kunci password latihan
   Dipakai bersama assets/gate.js di setiap halaman LatPrak.
   Semua gaya di sini dikurung di dalam #lpkGate supaya
   tidak bentrok dengan gaya halaman latihan.
   ========================================================= */

@font-face{font-family:"LPKG Sans";src:url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"LPKG Sans";src:url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"LPKG Sans";src:url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"LPKG Display";src:url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

/* ---------- selama terkunci: isi halaman disembunyikan ---------- */
html.lpk-locked,html.lpk-locked body{overflow:hidden!important;overscroll-behavior:none}
html.lpk-locked body>*:not(#lpkGate){visibility:hidden!important}
html.lpk-locked::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147482000;background:#f2f6f5}
@media (prefers-color-scheme:dark){html.lpk-locked:not([data-theme="light"])::after{background:#071a1f}}
html.lpk-locked[data-theme="dark"]::after{background:#071a1f}

/* ---------- token warna ---------- */
#lpkGate{
  --g-paper:#f2f6f5; --g-card:#ffffff; --g-soft:#e8f0ee;
  --g-ink:#0f2a33; --g-muted:#4d666e; --g-line:#d3e0de; --g-line2:#a9bfbc;
  --g-teal:#0b7a75; --g-teal2:#08625e; --g-teal-ink:#ffffff; --g-teal-soft:rgba(11,122,117,.12);
  --g-pulse:#dc3a3f; --g-bad:#c2352f; --g-bad-soft:rgba(194,53,47,.09); --g-ok:#17804a;
  --g-grid1:rgba(220,58,63,.07); --g-grid2:rgba(220,58,63,.14);
  --g-rx:#fffaf0; --g-rx-line:#efe2c6; --g-rx-ink:#5a4321;
  --g-blob1:rgba(11,122,117,.20); --g-blob2:rgba(232,154,154,.22);
  --g-shadow:0 1px 0 rgba(15,42,51,.04),0 30px 60px -32px rgba(15,42,51,.55);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) #lpkGate{
    --g-paper:#071a1f; --g-card:#0c242a; --g-soft:#102e35;
    --g-ink:#e3f0ee; --g-muted:#93adb0; --g-line:#1d3b42; --g-line2:#2d5560;
    --g-teal:#3fc7b8; --g-teal2:#62d6c9; --g-teal-ink:#032320; --g-teal-soft:rgba(63,199,184,.14);
    --g-pulse:#4be3a0; --g-bad:#ff7d73; --g-bad-soft:rgba(255,125,115,.12); --g-ok:#53d18c;
    --g-grid1:rgba(75,227,160,.045); --g-grid2:rgba(75,227,160,.10);
    --g-rx:#1b2a24; --g-rx-line:#2c4038; --g-rx-ink:#f1e2c4;
    --g-blob1:rgba(63,199,184,.16); --g-blob2:rgba(255,141,180,.10);
    --g-shadow:0 1px 0 rgba(0,0,0,.3),0 30px 60px -30px rgba(0,0,0,.95);
  }
}
html[data-theme="dark"] #lpkGate{
  --g-paper:#071a1f; --g-card:#0c242a; --g-soft:#102e35;
  --g-ink:#e3f0ee; --g-muted:#93adb0; --g-line:#1d3b42; --g-line2:#2d5560;
  --g-teal:#3fc7b8; --g-teal2:#62d6c9; --g-teal-ink:#032320; --g-teal-soft:rgba(63,199,184,.14);
  --g-pulse:#4be3a0; --g-bad:#ff7d73; --g-bad-soft:rgba(255,125,115,.12); --g-ok:#53d18c;
  --g-grid1:rgba(75,227,160,.045); --g-grid2:rgba(75,227,160,.10);
  --g-rx:#1b2a24; --g-rx-line:#2c4038; --g-rx-ink:#f1e2c4;
  --g-blob1:rgba(63,199,184,.16); --g-blob2:rgba(255,141,180,.10);
  --g-shadow:0 1px 0 rgba(0,0,0,.3),0 30px 60px -30px rgba(0,0,0,.95);
}

/* ---------- reset: abaikan gaya halaman latihan di dalam kunci ---------- */
#lpkGate div,#lpkGate section,#lpkGate p,#lpkGate span,#lpkGate h1,#lpkGate h2,#lpkGate form,
#lpkGate label,#lpkGate input,#lpkGate button,#lpkGate a,#lpkGate b,#lpkGate i{all:revert;box-sizing:border-box}
#lpkGate ::selection{background:var(--g-teal);color:var(--g-teal-ink)}
#lpkGate,#lpkGate *,#lpkGate *::before,#lpkGate *::after{box-sizing:border-box}
#lpkGate [hidden]{display:none!important}
#lpkGate svg{display:block;max-width:none;overflow:visible}

/* ---------- lapisan utama ---------- */
#lpkGate{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;
  background:var(--g-paper);color:var(--g-ink);
  font-family:"LPKG Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;font-weight:400;letter-spacing:0;text-align:left;text-transform:none;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  visibility:visible!important;opacity:1;transition:opacity .45s ease;
}
#lpkGate.lg-leave{opacity:0;pointer-events:none}
#lpkGate .lg-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;
  background-image:
    linear-gradient(var(--g-grid2) 1px,transparent 1px),
    linear-gradient(90deg,var(--g-grid2) 1px,transparent 1px),
    linear-gradient(var(--g-grid1) 1px,transparent 1px),
    linear-gradient(90deg,var(--g-grid1) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:center center}
#lpkGate .lg-blob{position:absolute;display:block;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);
  animation:lg-drift 16s ease-in-out infinite alternate}
#lpkGate .lg-blob.b1{background:var(--g-blob1);top:-30vmax;left:-20vmax}
#lpkGate .lg-blob.b2{background:var(--g-blob2);bottom:-32vmax;right:-22vmax;animation-delay:-8s}
@keyframes lg-drift{to{transform:translate(6vmax,4vmax) scale(1.08)}}

#lpkGate .lg-scroll{position:absolute;top:0;right:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#lpkGate .lg-card{position:relative;width:100%;max-width:430px;margin:auto 0;
  background:var(--g-card);border:1px solid var(--g-line);border-radius:28px;box-shadow:var(--g-shadow);
  padding:24px 22px 22px}
#lpkGate .lg-card.lg-enter{animation:lg-in .6s cubic-bezier(.2,.8,.2,1) both}
@media (min-width:480px){#lpkGate .lg-card{padding:30px 30px 26px}}
@keyframes lg-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
#lpkGate .lg-card.lg-shake{animation:lg-shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lg-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* ---------- monitor detak jantung ---------- */
#lpkGate .lg-monitor{position:relative;height:74px;border-radius:18px;overflow:hidden;
  background:#0b1f24;border:1px solid rgba(255,255,255,.06);margin-bottom:22px}
#lpkGate .lg-monitor::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background-image:linear-gradient(rgba(75,227,160,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(75,227,160,.08) 1px,transparent 1px);
  background-size:14px 14px}
#lpkGate .lg-trace{position:absolute;top:0;bottom:0;left:0;width:200%;display:flex;animation:lg-run 3.2s linear infinite}
#lpkGate .lg-trace svg{width:50%;height:100%;flex:none}
#lpkGate .lg-trace path{fill:none;stroke:#4be3a0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(75,227,160,.7));transition:stroke .3s}
@keyframes lg-run{to{transform:translateX(-50%)}}
#lpkGate .lg-monitor .lg-flatline{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#ff6b6b;
  box-shadow:0 0 8px rgba(255,107,107,.8);opacity:0;transition:opacity .2s}
#lpkGate .lg-monitor.is-flat .lg-trace{opacity:0}
#lpkGate .lg-monitor.is-flat .lg-flatline{opacity:1}
#lpkGate .lg-monitor.is-ok .lg-trace path{stroke:#7cf3c4}
#lpkGate .lg-vitals{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:99px;background:rgba(7,26,31,.75);color:#d9fbe9;font-size:13px;font-weight:700;line-height:1.4;
  font-variant-numeric:tabular-nums}
#lpkGate .lg-vitals svg{width:14px;height:14px;color:#ff6b81;transform-origin:50% 60%}
#lpkGate .lg-vitals.beat svg{animation:lg-lub .32s ease-out}
#lpkGate .lg-vitals small{font-size:11px;font-weight:500;color:#8fb8a8}
@keyframes lg-lub{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
#lpkGate .lg-mon-tag{position:absolute;left:12px;bottom:7px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6fa797}

/* ---------- gembok ---------- */
#lpkGate .lg-head{display:flex;align-items:center;gap:14px}
#lpkGate .lg-lock{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--g-teal-soft);color:var(--g-teal)}
#lpkGate .lg-lock svg{width:30px;height:30px}
#lpkGate .lg-shackle{transform-origin:22px 14px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
#lpkGate .lg-lock.is-open .lg-shackle{transform:translateY(-3px) rotate(-28deg)}
#lpkGate .lg-lock.is-open{background:rgba(23,128,74,.14);color:var(--g-ok)}
#lpkGate .lg-kicker{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g-teal)}
#lpkGate .lg-title{margin:2px 0 0;font-family:"LPKG Display","LPKG Sans",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  font-size:clamp(26px,7.4vw,31px);line-height:1.04;letter-spacing:-.025em;color:var(--g-ink)}
#lpkGate .lg-sub{margin:14px 0 0;color:var(--g-muted);font-size:15.5px;line-height:1.55}

/* ---------- kotak password ---------- */
#lpkGate .lg-form{display:block;margin:20px 0 0;padding:0}
#lpkGate .lg-label{display:block;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--g-ink)}
#lpkGate .lg-ring{position:relative;border-radius:17px;padding:2px;
  background:var(--g-line2);transition:background-color .25s}
#lpkGate .lg-ring::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:17px;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,var(--g-teal),#e89a9a,var(--g-teal),#e89a9a,var(--g-teal));background-size:300% 100%;
  animation:lg-flow 4s linear infinite}
#lpkGate .lg-ring.is-focus::before{opacity:1}
#lpkGate .lg-ring.is-bad{background:var(--g-bad)}
#lpkGate .lg-ring.is-bad::before{opacity:0}
#lpkGate .lg-ring.is-ok{background:var(--g-ok)}
#lpkGate .lg-ring.is-ok::before{opacity:0}
@keyframes lg-flow{to{background-position:-150% 0}}
#lpkGate .lg-field{position:relative;display:flex;align-items:center;border-radius:15px;background:var(--g-card);min-height:54px}
#lpkGate .lg-key{flex:none;width:22px;height:22px;margin-left:15px;color:var(--g-muted)}
#lpkGate .lg-input{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;width:100%;height:54px;margin:0;
  padding:0 8px 0 11px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  font-family:inherit;font-size:17px;font-weight:500;letter-spacing:.06em;color:var(--g-ink);caret-color:var(--g-teal)}
#lpkGate .lg-input::placeholder{color:var(--g-muted);opacity:.65;letter-spacing:0;font-weight:400}
#lpkGate .lg-input::-ms-reveal{display:none}
#lpkGate .lg-eye{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:46px;height:46px;margin:0 4px 0 0;padding:0;
  border:0;border-radius:12px;background:transparent;color:var(--g-muted);cursor:pointer;transition:background-color .2s,color .2s}
#lpkGate .lg-eye:hover{background:var(--g-soft);color:var(--g-ink)}
#lpkGate .lg-eye svg{width:21px;height:21px}
#lpkGate .lg-eye .off{display:none}
#lpkGate .lg-eye[aria-pressed="true"] .on{display:none}
#lpkGate .lg-eye[aria-pressed="true"] .off{display:block}

/* titik-titik kecil yang "berdetak" tiap ketikan */
#lpkGate .lg-dots{display:flex;gap:6px;height:8px;margin:10px 2px 0;overflow:hidden}
#lpkGate .lg-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--g-teal);flex:none;
  animation:lg-pop .35s cubic-bezier(.3,1.7,.5,1) both}
#lpkGate .lg-ring.is-bad + .lg-dots i{background:var(--g-bad)}
@keyframes lg-pop{from{transform:scale(0)}to{transform:scale(1)}}

#lpkGate .lg-err{min-height:0;margin:10px 0 0;font-size:14.5px;font-weight:700;color:var(--g-bad)}
#lpkGate .lg-err:empty{display:none}

#lpkGate .lg-btn{-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;margin:16px 0 0;padding:0 22px;border:0;border-radius:16px;overflow:hidden;
  background:var(--g-teal);color:var(--g-teal-ink);font-family:inherit;font-size:16.5px;font-weight:700;line-height:1.2;
  cursor:pointer;text-decoration:none;transition:background-color .2s,transform .15s}
#lpkGate .lg-btn:hover{background:var(--g-teal2)}
#lpkGate .lg-btn:active{transform:scale(.985)}
#lpkGate .lg-btn svg{width:19px;height:19px;flex:none;transition:transform .2s}
#lpkGate .lg-btn:hover svg{transform:translateX(3px)}
#lpkGate .lg-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);
  animation:lg-shine 3.6s ease-in-out 1.2s infinite}
@keyframes lg-shine{0%{left:-60%}35%,100%{left:130%}}
#lpkGate .lg-btn.is-busy{pointer-events:none;opacity:.85}

#lpkGate :focus{outline:none}
#lpkGate :focus-visible{outline:3px solid var(--g-teal);outline-offset:3px}
#lpkGate .lg-input:focus-visible{outline:none}

/* ---------- petunjuk (kapsul obat yang terbuka) ---------- */
#lpkGate .lg-hintbtn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;
  margin:16px auto 0;padding:9px 14px 9px 10px;border:1.5px dashed var(--g-line2);border-radius:99px;background:transparent;
  color:var(--g-ink);font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .2s,background-color .2s}
#lpkGate .lg-hintwrap{text-align:center}
#lpkGate .lg-hintbtn:hover{border-color:var(--g-teal);background:var(--g-teal-soft)}
#lpkGate .lg-pill{width:34px;height:18px;flex:none}
#lpkGate .lg-pill .h1,#lpkGate .lg-pill .h2{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
#lpkGate .lg-hintbtn[aria-expanded="true"] .lg-pill .h1{transform:translate(-3px,-2px) rotate(-14deg)}
#lpkGate .lg-hintbtn[aria-expanded="true"] .lg-pill .h2{transform:translate(3px,2px) rotate(14deg)}
#lpkGate .lg-hintbtn:not([aria-expanded="true"]):hover .lg-pill{animation:lg-wobble .6s ease}
@keyframes lg-wobble{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

#lpkGate .lg-rx{position:relative;margin:14px 0 0;padding:16px 16px 14px 58px;border-radius:16px;
  background:var(--g-rx);color:var(--g-rx-ink);border:1px solid var(--g-rx-line);
  background-image:repeating-linear-gradient(transparent 0,transparent 25px,var(--g-rx-line) 25px,var(--g-rx-line) 26px);
  background-position:0 12px;transform-origin:50% 0;animation:lg-unfold .55s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes lg-unfold{from{opacity:0;transform:perspective(600px) rotateX(-70deg) translateY(-6px)}to{opacity:1;transform:none}}
#lpkGate .lg-rx-mark{position:absolute;left:14px;top:13px;font-family:"LPKG Display",Georgia,serif;font-weight:800;font-size:26px;line-height:1;
  color:var(--g-teal);font-style:italic}
#lpkGate .lg-rx-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
#lpkGate .lg-rx-t{display:block;margin-top:4px;font-size:16.5px;font-weight:700;line-height:1.5;min-height:1.5em;word-break:break-word}
#lpkGate .lg-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:lg-blink .8s steps(1) infinite}
#lpkGate .lg-caret.done{animation:lg-blink .8s steps(1) 3 forwards;opacity:0}
@keyframes lg-blink{50%{opacity:0}}

/* ---------- bantuan saat password salah ---------- */
#lpkGate .lg-help{margin:16px 0 0;padding:14px 15px;border-radius:16px;background:var(--g-bad-soft);border:1px solid rgba(194,53,47,.22);
  animation:lg-in .45s cubic-bezier(.2,.8,.2,1) both}
#lpkGate .lg-help p{margin:0;font-size:14.5px;line-height:1.5;color:var(--g-ink)}
#lpkGate .lg-help a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--g-bad);font-weight:700;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px}
#lpkGate .lg-help a svg{width:16px;height:16px}

#lpkGate .lg-foot{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--g-muted)}

/* ---------- berhasil masuk ---------- */
#lpkGate .lg-ok{text-align:center}
#lpkGate .lg-stage{position:relative;width:210px;height:220px;margin:0 auto 6px}
#lpkGate .lg-halo{position:absolute;left:50%;top:52%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;
  background:radial-gradient(circle,var(--g-teal-soft) 0,var(--g-teal-soft) 40%,transparent 70%);animation:lg-halo 2.4s ease-in-out infinite}
@keyframes lg-halo{50%{transform:scale(1.1)}}
#lpkGate .lg-bunny{position:absolute;left:50%;bottom:6px;width:180px;height:200px;margin-left:-90px;transform-origin:50% 100%;
  animation:lg-arrive .9s cubic-bezier(.25,1.6,.45,1) both,lg-hop 2.2s ease-in-out .95s infinite}
@keyframes lg-arrive{0%{opacity:0;transform:translateY(40px) scale(.4)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lg-hop{0%,55%,100%{transform:translateY(0) scale(1,1)}62%{transform:translateY(0) scale(1.05,.94)}75%{transform:translateY(-14px) scale(.97,1.04)}88%{transform:translateY(0) scale(1.04,.96)}}
#lpkGate .lg-bunny .ear-l{transform-origin:78px 66px;animation:lg-ear-l 2.2s ease-in-out .95s infinite}
#lpkGate .lg-bunny .ear-r{transform-origin:118px 64px;animation:lg-ear-r 2.2s ease-in-out .95s infinite}
@keyframes lg-ear-l{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(-7deg)}88%{transform:rotate(4deg)}}
@keyframes lg-ear-r{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(9deg)}88%{transform:rotate(-4deg)}}
#lpkGate .lg-bunny .eyes{transform-origin:100px 96px;animation:lg-eye 4.2s ease-in-out 1.6s infinite}
@keyframes lg-eye{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
#lpkGate .lg-bunny .arm-r{transform-origin:128px 140px;animation:lg-wave 1.1s ease-in-out 1s 3}
@keyframes lg-wave{50%{transform:rotate(-38deg)}}
#lpkGate .lg-shadow{position:absolute;left:50%;bottom:0;width:120px;height:14px;margin-left:-60px;border-radius:50%;background:rgba(15,42,51,.14);
  animation:lg-shadow 2.2s ease-in-out .95s infinite}
@keyframes lg-shadow{0%,55%,100%{transform:scaleX(1);opacity:1}75%{transform:scaleX(.8);opacity:.6}}
#lpkGate .lg-spark{position:absolute;width:18px;height:18px;color:#f2c14e;opacity:0;animation:lg-twinkle 2.4s ease-in-out infinite}
#lpkGate .lg-spark.s1{left:8px;top:40px;animation-delay:.9s}
#lpkGate .lg-spark.s2{right:6px;top:22px;width:24px;height:24px;animation-delay:1.3s;color:var(--g-teal)}
#lpkGate .lg-spark.s3{right:18px;top:120px;width:14px;height:14px;animation-delay:1.8s;color:#e89a9a}
#lpkGate .lg-spark.s4{left:22px;top:140px;width:14px;height:14px;animation-delay:2.2s}
@keyframes lg-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%,60%{opacity:1;transform:scale(1) rotate(45deg)}}
#lpkGate .lg-badge{display:inline-flex;align-items:center;gap:8px;margin:0 auto;padding:6px 13px;border-radius:99px;
  background:rgba(23,128,74,.13);color:var(--g-ok);font-size:13px;font-weight:700;letter-spacing:.04em}
#lpkGate .lg-badge svg{width:15px;height:15px}
#lpkGate .lg-chosen{margin:14px 0 0;font-family:"LPKG Display","LPKG Sans",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  font-size:clamp(28px,8.4vw,36px);line-height:1.02;letter-spacing:-.03em;color:var(--g-ink)}
#lpkGate .lg-chosen span{display:inline-block;color:var(--g-teal)}
#lpkGate .lg-ok .lg-sub{max-width:32ch;margin-left:auto;margin-right:auto}
#lpkGate .lg-ok .lg-badge,#lpkGate .lg-ok .lg-chosen,#lpkGate .lg-ok .lg-sub,#lpkGate .lg-ok .lg-btn{animation:lg-in .6s cubic-bezier(.2,.8,.2,1) both}
#lpkGate .lg-ok .lg-badge{animation-delay:.45s}
#lpkGate .lg-ok .lg-chosen{animation-delay:.6s}
#lpkGate .lg-ok .lg-sub{animation-delay:.75s}
#lpkGate .lg-ok .lg-btn{animation-delay:.9s}

/* konfeti tanda plus (palang medis) */
#lpkGate .lg-confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:28px}
#lpkGate .lg-confetti i{position:absolute;top:-24px;display:block;width:12px;height:12px;opacity:0;
  animation:lg-fall var(--d,2.6s) cubic-bezier(.25,.6,.5,1) var(--w,0s) forwards}
#lpkGate .lg-confetti i::before,#lpkGate .lg-confetti i::after{content:"";position:absolute;background:var(--c,#0b7a75);border-radius:2px}
#lpkGate .lg-confetti i::before{left:4px;top:0;width:4px;height:12px}
#lpkGate .lg-confetti i::after{left:0;top:4px;width:12px;height:4px}
#lpkGate .lg-confetti i.dot::before{left:2px;top:2px;width:8px;height:8px;border-radius:50%}
#lpkGate .lg-confetti i.dot::after{display:none}
@keyframes lg-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--x,0),var(--y,520px)) rotate(var(--r,360deg))}}

#lpkGate .lg-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* layar pendek (HP landscape / keyboard terbuka) */
@media (max-height:620px){
  #lpkGate .lg-monitor{height:56px;margin-bottom:16px}
  #lpkGate .lg-stage{width:170px;height:176px}
  #lpkGate .lg-bunny{width:146px;height:162px;margin-left:-73px}
  #lpkGate .lg-halo{width:150px;height:150px;margin:-75px 0 0 -75px}
}

@media (prefers-reduced-motion:reduce){
  #lpkGate *,#lpkGate *::before,#lpkGate *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #lpkGate .lg-trace{animation:none!important}
  #lpkGate .lg-confetti{display:none}
}
#lpkGate .lg-card:focus,#lpkGate .lg-card:focus-visible{outline:none}

/* Transisi antarhalaman: View Transition lintas halaman (crossfade 200ms). Reduced motion: tanpa animasi. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
}