/* gate.css — layar verifikasi (Cloudflare Turnstile). Selalu gelap, tidak ikut tema terang. */
html:not(.gate-ok) .top,
html:not(.gate-ok) #bg,
html:not(.gate-ok) #app { visibility: hidden; }

#gate {
  --g-line: rgba(110, 160, 255, .22); --g-cyan: #00d0ff; --g-blue: #2e78ff; --g-ok: #46f4b0; --g-bad: #ff7a7a;
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  color: #e8eefc; color-scheme: dark;
  background: radial-gradient(120% 80% at 50% -10%, #0b2255 0%, #030a1c 55%, #01030a 100%);
}
#gate[hidden] { display: none; }
#gate.leaving { pointer-events: none; animation: gOut .75s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes gOut { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }

/* latar */
.g-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.g-grid {
  position: absolute; inset: 0; opacity: .55;
  background-image: linear-gradient(var(--g-line) 1px, transparent 1px), linear-gradient(90deg, var(--g-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 10%, transparent 75%);
  animation: gGrid 16s linear infinite;
}
@keyframes gGrid { to { background-position: 0 44px, 44px 0; } }
.g-aurora { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); }
.g-aurora.a { background: #2e78ff; opacity: .34; left: -170px; top: -150px; animation: gDriftA 13s ease-in-out infinite alternate; }
.g-aurora.b { background: #00d0ff; opacity: .2; right: -200px; bottom: -210px; animation: gDriftB 16s ease-in-out infinite alternate; }
@keyframes gDriftA { to { transform: translate(90px, 70px) scale(1.15); } }
@keyframes gDriftB { to { transform: translate(-80px, -60px) scale(1.2); } }

/* layout */
.g-wrap { position: relative; width: min(100%, 460px); display: grid; gap: 14px; }
@media (min-width: 900px) {
  .g-wrap { width: min(100%, 1000px); grid-template-columns: 1.08fr 1fr; align-items: center; gap: 30px; }
}

/* scene */
.g-scene {
  position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(110, 160, 255, .3);
  box-shadow: 0 0 70px -24px var(--g-blue); transition: box-shadow .6s, border-color .6s;
}
.g-scene svg { display: block; width: 100%; height: auto; }
.g-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .55; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--g-cyan), transparent); animation: gScan 5s linear infinite;
}
@keyframes gScan { to { top: 100%; } }
#gate[data-state="ok"] .g-scene { border-color: rgba(70, 244, 176, .5); box-shadow: 0 0 80px -20px var(--g-ok); }
#gate[data-state="fail"] .g-scene { border-color: rgba(255, 122, 122, .45); box-shadow: 0 0 70px -24px var(--g-bad); }

.g-tx { font: 500 9px var(--font-mono, monospace); fill: #6f8fd6; letter-spacing: .08em; }
.st { animation: gTwinkle 3.2s ease-in-out infinite; }
@keyframes gTwinkle { 50% { opacity: .2; } }
.moon-glow { animation: gBreathe 6s ease-in-out infinite; transform-origin: 62px 58px; }
@keyframes gBreathe { 50% { opacity: .55; transform: scale(1.12); } }
.drone { animation: gDrone 7s ease-in-out infinite alternate; }
@keyframes gDrone { from { transform: translate(-14px, 0); } to { transform: translate(18px, 7px); } }
.rotor { stroke: #9fc0ff; stroke-width: 2; stroke-linecap: round; animation: gRotor .14s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes gRotor { to { transform: scaleX(.45); } }
.blink-r { animation: gBlink 1.2s steps(2, jump-none) infinite; }
.blink-b { animation: gBlink 1.8s steps(2, jump-none) infinite; }
@keyframes gBlink { 50% { opacity: .15; } }
.sweep { transform-origin: 315px 202px; animation: gSpin 3.2s linear infinite; }
@keyframes gSpin { to { transform: rotate(360deg); } }
.blip { animation: gBlink 3.2s ease-in-out infinite; }
.siren { fill: #ff3b4e; filter: drop-shadow(0 0 6px #ff3b4e); animation: gBlink 1s steps(2, jump-none) infinite; transition: fill .4s; }
.door { fill: #ffb02e; filter: drop-shadow(0 0 8px rgba(255, 176, 46, .6)); transition: fill .5s, filter .5s; }
.arm { transform-origin: 182px 222px; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.guard { animation: gBob 3.4s ease-in-out infinite; }
@keyframes gBob { 50% { transform: translateY(-2.5px); } }
.parm { transform-origin: 104px 206px; transition: transform .5s; }
.shield { animation: gShield 3.4s ease-in-out infinite; }
@keyframes gShield { 50% { fill-opacity: .4; } }

#gate[data-state="ok"] .arm { transform: rotate(-74deg); }
#gate[data-state="ok"] .siren { fill: var(--g-ok); filter: drop-shadow(0 0 8px var(--g-ok)); animation: none; }
#gate[data-state="ok"] .door { fill: #38f2c4; filter: drop-shadow(0 0 10px rgba(56, 242, 196, .7)); }
#gate[data-state="ok"] .parm { animation: gWave .45s ease-in-out infinite alternate; }
@keyframes gWave { from { transform: rotate(-60deg); } to { transform: rotate(-28deg); } }

/* panel */
.g-panel {
  position: relative; overflow: hidden; padding: 26px 24px 20px; border-radius: 22px; border: 1px solid var(--g-line);
  background: linear-gradient(180deg, rgba(12, 24, 56, .8), rgba(5, 11, 29, .92));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: gIn .8s cubic-bezier(.2, .7, .2, 1) both .1s;
}
@keyframes gIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.g-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-cyan), transparent);
}
.g-eyebrow { margin: 0; font: 600 12px var(--font-mono, monospace); letter-spacing: .24em; text-transform: uppercase; color: #7cc4ff; }
.g-panel h1 { margin-top: 10px; font-size: clamp(26px, 6.4vw, 34px); font-weight: 700; }
.g-desc { margin-top: 12px; color: #9fb0d8; font-size: 15px; line-height: 1.6; }
.g-ts {
  margin-top: 22px; padding: 14px; min-height: 92px; display: grid; place-items: center;
  border: 1px dashed rgba(110, 160, 255, .3); border-radius: 14px; background: rgba(1, 3, 10, .55);
}
.g-ts > div { width: 100%; }
.g-ts-load { font: 500 13px var(--font-mono, monospace); color: #6f8fd6; }

.g-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font: 500 13px/1.55 var(--font-mono, monospace); color: #a9bce8; }
.g-dot {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--g-ok); background: rgba(70, 244, 176, .14);
}
.g-dot::before { content: "\2713"; }
#gate[data-state="checking"] .g-dot { background: none; border: 2px solid rgba(0, 208, 255, .25); border-top-color: var(--g-cyan); animation: gSpin 0.8s linear infinite; }
#gate[data-state="checking"] .g-dot::before { content: ""; }
#gate[data-state="fail"] .g-dot { color: var(--g-bad); background: rgba(255, 122, 122, .14); }
#gate[data-state="fail"] .g-dot::before { content: "!"; }
#gate[data-state="fail"] .g-status { color: #ffb1b1; }
#gate[data-state="ok"] .g-status { color: var(--g-ok); }

.g-retry { margin-top: 14px; }
.g-retry[hidden] { display: none; }
.g-prog { height: 3px; margin-top: 18px; border-radius: 3px; overflow: hidden; background: rgba(110, 160, 255, .14); }
.g-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2e78ff, #00d0ff, #46f4b0); }
#gate[data-state="checking"] .g-prog i { width: 34%; animation: gSlide 1.3s ease-in-out infinite; }
#gate[data-state="ok"] .g-prog i { width: 100%; transition: width 1.1s cubic-bezier(.3, .7, .2, 1); }
@keyframes gSlide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.g-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--g-line); font: 500 12px var(--font-mono, monospace); color: #7f93c4; }
.g-foot b { color: var(--g-cyan); letter-spacing: .06em; }
.g-foot::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; background: #ffb02e; box-shadow: 0 0 10px #ffb02e; }

/* munculnya situs setelah gate menutup */
html.reveal #app, html.reveal .top { animation: siteIn .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes siteIn { from { opacity: 0; filter: blur(8px); transform: scale(.985); } to { opacity: 1; filter: none; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #gate *, #gate *::before, #gate *::after, html.reveal #app, html.reveal .top { animation: none !important; }
  #gate .arm, #gate .door, #gate .siren, #gate .g-prog i { transition: none !important; }
}