/* ══════════════════════════════════════════════════════════════════════
   LOGIN GATE v2 — "Hub" aesthetic (planet / starfield / grid)
   1:1 mengikuti tampilan asli file HTML yang dikasih (wordmark besar,
   tagline, meta-row versi, picker versi, tombol Masuk, Detail Versi).

   ALUR (PENTING):
   • Layar pertama = TAMPILAN HUB APA ADANYA (wordmark, tagline, meta-row,
     picker versi, tombol "Masuk", "Detail Versi"). TIDAK ada form login
     kelihatan sama sekali di sini.
   • Form login (Coba Createrus / Scan Barcode / Kode Lisensi / Username
     & Password) BARU muncul setelah tombol "Masuk" diklik — menggantikan
     area picker+tombol Masuk dengan transisi halus (bukan langsung ganti
     halaman, karena ini bukan multi-versi/multi-url seperti file HTML
     aslinya — cuma SATU app Createrus).

   Ikut sistem tema app yang sudah ada (html.dark), bukan bikin tema baru.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   [FIX] SINKRONISASI TRANSISI TEMA (dark ⇄ light)
   Sebelumnya CUMA background/color di root #ctr-login-screen yang punya
   transition — semua elemen turunan (wordmark, globe, grid, orb, garis,
   teks meta, dst) sama sekali tidak punya transition, jadi pas toggle tema
   mereka "snap" instan satu-satu (globe duluan, teks nyusul, background
   belakangan), padahal urutannya sebenarnya cuma soal elemen mana yang
   render duluan — bukan animasi barengan sama sekali.

   Solusinya: daftarkan (register) semua custom property warna tema di
   bawah ini via @property supaya BISA di-transition langsung sebagai
   sebuah nilai (bukan cuma properti akhir seperti background-color).
   Begitu --gt-ink, --gt-bg, --gt-line, dst di-transition SEKALI di root,
   SEMUA elemen turunan yang pakai var(--gt-ink) dkk otomatis ikut
   ber-transisi di frame yang sama, dengan durasi & easing yang sama persis
   — jadi seluruh gate (teks, garis, tombol, ikon) berubah warna BARENG. */
@property --gt-bg          { syntax: '<color>'; inherits: true; initial-value: #F3F3F5; }
@property --gt-bg2         { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --gt-elev        { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.04); }
@property --gt-elev-hover  { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.08); }
@property --gt-line        { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.12); }
@property --gt-line-soft   { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.06); }
@property --gt-ink         { syntax: '<color>'; inherits: true; initial-value: #1D1D1F; }
@property --gt-ink-60      { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,31,.64); }
@property --gt-ink-40      { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,31,.42); }
@property --gt-ink-25      { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,31,.28); }
@property --gt-accent      { syntax: '<color>'; inherits: true; initial-value: #1D1D1F; }
@property --gt-accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.10); }
@property --gt-word-1      { syntax: '<color>'; inherits: true; initial-value: #1D1D1F; }
@property --gt-word-2      { syntax: '<color>'; inherits: true; initial-value: #1D1D1F; }
@property --gt-word-3      { syntax: '<color>'; inherits: true; initial-value: #4A4A50; }
@property --gt-word-shadow { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.12); }
@property --gt-grain       { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --gt-grain-op    { syntax: '<number>'; inherits: true; initial-value: .035; }
@property --gt-btn-ink     { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --gt-btn-bg      { syntax: '<color>'; inherits: true; initial-value: #1D1D1F; }
@property --gt-globe-rings { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.05); }
@property --gt-modal-backdrop { syntax: '<color>'; inherits: true; initial-value: rgba(120,120,130,.35); }
/* [GLOBE v4] "Moon / planet" murni hitam-putih-abu — TIDAK ADA warna biru
   sama sekali dan TIDAK ADA garis wireframe (lintang/bujur). Kesan bulat 3D
   didapat murni dari pencahayaan terarah (highlight di kiri-atas, gelap ke
   kanan-bawah) + tekstur kawah lembut, seperti wallpaper planet/bulan di
   iPhone/MacBook — bukan lagi lingkaran datar/"black hole". */
@property --gt-node        { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.5); }
@property --gt-globe-rim   { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.55); }
@property --gt-globe-rim-glow { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.30); }
@property --gt-globe-tint  { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,.05); }

html.dark #ctr-login-screen {
  --gt-bg: #08080A;
  --gt-bg2: #0E0E11;
  --gt-elev: rgba(255,255,255,.05);
  --gt-elev-hover: rgba(255,255,255,.12);
  --gt-line: rgba(255,255,255,.14);
  --gt-line-soft: rgba(255,255,255,.07);
  --gt-ink: #F3F3F1;
  --gt-ink-60: rgba(243,243,241,.62);
  --gt-ink-40: rgba(243,243,241,.4);
  --gt-ink-25: rgba(243,243,241,.25);
  --gt-accent: #F3F3F1;
  --gt-accent-soft: rgba(255,255,255,.14);
  --gt-word-1: #FFFFFF; --gt-word-2: #FFFFFF; --gt-word-3: #8A8A92;
  --gt-word-shadow: rgba(0,0,0,.5);
  --gt-grain: #FFFFFF; --gt-grain-op: .05;
  --gt-btn-ink: #0B0B0C; --gt-btn-bg: #FFFFFF;
  --gt-globe-body: radial-gradient(circle at 32% 16%, #9b9ba2 0%, #6c6c73 10%, #45454c 26%, #2a2a2f 44%, #17171a 62%, #0c0c0e 78%, #030303 92%, #000 100%);
  --gt-globe-shadow: inset -34px -26px 110px rgba(0,0,0,.85), inset 0 0 150px rgba(0,0,0,.5), inset 30px 24px 70px rgba(255,255,255,.06), 0 -50px 150px -60px var(--gt-accent-soft), 0 0 0 1px rgba(255,255,255,.16);
  --gt-globe-rings: rgba(255,255,255,.06);
  --gt-node: rgba(255,255,255,.55);
  --gt-globe-rim: rgba(255,255,255,.6);
  --gt-globe-rim-glow: rgba(255,255,255,.3);
  --gt-globe-tint: rgba(255,255,255,.05);
  --gt-modal-backdrop: rgba(4,4,6,.55);
}

#ctr-login-screen { /* durasi tunggal dipakai semua elemen tema biar barengan */

  /* ---- LIGHT (default, ikut konvensi tema app) ---- */
  /* [UPDATE 2026-08-08] Sebelumnya "hidden auto" (scroll kalau konten
     lebih tinggi dari viewport) — atas permintaan user, halaman ini
     SEKARANG WAJIB satu layar statis, tidak boleh ada scroll sama sekali
     di HP maupun desktop. Makanya diganti jadi "hidden" total (tidak
     akan pernah muncul scrollbar), DIIMBANGI dengan semua jarak
     vertikal di .hero-center (lihat clamp(...,vh,...) di seluruh file
     ini mulai dari .eyebrow s/d .detail-toggle-wrap) yang sekarang ikut
     menyusut otomatis kalau tinggi viewport kecil — jadi kontennya
     dijamin selalu muat, bukan sekadar disembunyikan begitu saja. */
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --gt-dur: .45s;
  --gt-tfn: var(--ease-soft);
  --gt-bg: #F3F3F5;
  --gt-bg2: #FFFFFF;
  --gt-elev: rgba(0,0,0,.04);
  --gt-elev-hover: rgba(0,0,0,.08);
  --gt-line: rgba(0,0,0,.12);
  --gt-line-soft: rgba(0,0,0,.06);
  --gt-ink: #1D1D1F;
  --gt-ink-60: rgba(29,29,31,.64);
  --gt-ink-40: rgba(29,29,31,.42);
  --gt-ink-25: rgba(29,29,31,.28);
  --gt-accent: #1D1D1F;
  --gt-accent-soft: rgba(0,0,0,.10);
  --gt-word-1: #1D1D1F; --gt-word-2: #1D1D1F; --gt-word-3: #4A4A50;
  --gt-word-shadow: rgba(0,0,0,.12);
  --gt-grain: #000000; --gt-grain-op: .035;
  --gt-btn-ink: #FFFFFF; --gt-btn-bg: #1D1D1F;
  --gt-globe-body: radial-gradient(circle at 32% 16%, #ffffff 0%, #f2f2f4 10%, #dcdce0 26%, #bfc0c5 44%, #9d9ea4 62%, #7c7d83 78%, #5c5d62 92%, #414146 100%);
  --gt-globe-shadow: inset -30px -24px 90px rgba(0,0,0,.16), inset 0 0 130px rgba(0,0,0,.1), inset 30px 26px 60px rgba(255,255,255,.5), 0 -50px 150px -60px var(--gt-accent-soft), 0 0 0 1px rgba(0,0,0,.22);
  --gt-globe-rings: rgba(0,0,0,.07);
  --gt-node: rgba(255,255,255,.85);
  --gt-globe-rim: rgba(255,255,255,.8);
  --gt-globe-rim-glow: rgba(255,255,255,.45);
  --gt-globe-tint: rgba(0,0,0,.04);
  --gt-modal-backdrop: rgba(120,120,130,.35);
  position: fixed; inset: 0; z-index: 999999;
  transform: translateZ(0); backface-visibility: hidden;
  overflow: hidden;
  background: var(--gt-bg); color: var(--gt-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition:
    background var(--gt-dur) var(--gt-tfn), color var(--gt-dur) var(--gt-tfn),
    /* [FIX] Inilah kunci sinkronisasinya: transition dipasang LANGSUNG di
       custom property warna itu sendiri (bukan cuma di background/color
       akhir). Karena semuanya di-@property-kan di atas, browser bisa
       meng-interpolasi nilainya secara halus, dan semua elemen turunan
       yang memakai var(...) ini otomatis ikut berubah di frame yang sama. */
    --gt-bg var(--gt-dur) var(--gt-tfn), --gt-bg2 var(--gt-dur) var(--gt-tfn),
    --gt-elev var(--gt-dur) var(--gt-tfn), --gt-elev-hover var(--gt-dur) var(--gt-tfn),
    --gt-line var(--gt-dur) var(--gt-tfn), --gt-line-soft var(--gt-dur) var(--gt-tfn),
    --gt-ink var(--gt-dur) var(--gt-tfn), --gt-ink-60 var(--gt-dur) var(--gt-tfn),
    --gt-ink-40 var(--gt-dur) var(--gt-tfn), --gt-ink-25 var(--gt-dur) var(--gt-tfn),
    --gt-accent var(--gt-dur) var(--gt-tfn), --gt-accent-soft var(--gt-dur) var(--gt-tfn),
    --gt-word-1 var(--gt-dur) var(--gt-tfn), --gt-word-2 var(--gt-dur) var(--gt-tfn),
    --gt-word-3 var(--gt-dur) var(--gt-tfn), --gt-word-shadow var(--gt-dur) var(--gt-tfn),
    --gt-grain var(--gt-dur) var(--gt-tfn), --gt-grain-op var(--gt-dur) var(--gt-tfn),
    --gt-btn-ink var(--gt-dur) var(--gt-tfn), --gt-btn-bg var(--gt-dur) var(--gt-tfn),
    --gt-globe-rings var(--gt-dur) var(--gt-tfn), --gt-modal-backdrop var(--gt-dur) var(--gt-tfn),
    --gt-node var(--gt-dur) var(--gt-tfn), --gt-globe-rim var(--gt-dur) var(--gt-tfn),
    --gt-globe-rim-glow var(--gt-dur) var(--gt-tfn), --gt-globe-tint var(--gt-dur) var(--gt-tfn);
}
#ctr-login-screen * { box-sizing: border-box; }
#ctr-login-screen a { color: inherit; text-decoration: none; }
#ctr-login-screen button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ═════════ Ambient background chrome (identik dgn HTML asli) ═════════ */
#ctr-login-screen .stage {
  position: relative; min-height: 100%; padding: clamp(14px, 3vh, 26px) 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#ctr-login-screen .stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, var(--gt-accent-soft), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(0,0,0,.10), transparent 60%);
  opacity: 1;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
/* [FIX] Di mode terang, kedua radial-gradient di atas (termasuk var(--gt-accent-soft)
   yang basisnya hitam) bikin efek "awan/asap kotor" di belakang wordmark & baris
   ikon. Sebelumnya dimatikan pakai "background:none" (snap instan, tidak bisa
   di-interpolasi ke gradient). Sekarang dimatikan lewat opacity:0 + transition
   — hasil akhirnya sama-sama benar-benar hilang, tapi prosesnya jadi fade
   halus, sinkron dengan elemen lain. */
html:not(.dark) #ctr-login-screen .stage::before { opacity: 0; }
#ctr-login-screen .stage::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--gt-grain) 1px, transparent 1px);
  background-size: 3px 3px; background-position: 0 0;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 0%, transparent 75%);
  opacity: var(--gt-grain-op);
}
/* [FIX] Garis-garis grid kotak-kotak di background sebelumnya terlalu pudar
   (opacity dasar cuma .55/.7 di atas warna --gt-line-soft yang sudah tipis
   sendiri) sehingga nyaris tidak kelihatan. Dinaikkan sedikit — cukup untuk
   memberi tekstur, tapi mask radial di tengah tetap dipertahankan supaya
   tetap paling terang di area hero & meredup ke tepi, jadi tidak mengganggu
   keterbacaan wordmark/teks. Warna garisnya (var(--gt-line-soft)) sudah ikut
   animasi otomatis lewat sistem @property di atas; di sini tinggal
   men-transition opacity-nya saja (.7 dark / .9 light) biar juga barengan. */
#ctr-login-screen .grid-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--gt-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--gt-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, black 0%, transparent 72%);
  opacity: .7;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .grid-overlay { opacity: .9; }

#ctr-login-screen .orb { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(70px); }
#ctr-login-screen .orb-a {
  width: 520px; height: 520px; top: -160px; left: 52%;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%);
  animation: gtOrbA 22s ease-in-out infinite;
}
#ctr-login-screen .orb-b {
  width: 420px; height: 420px; bottom: -140px; left: 8%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  animation: gtOrbB 26s ease-in-out infinite;
}
html:not(.dark) #ctr-login-screen .orb-a { background: radial-gradient(circle, rgba(0,0,0,.08), transparent 70%); }
html:not(.dark) #ctr-login-screen .orb-b { background: radial-gradient(circle, rgba(0,0,0,.05), transparent 70%); }
/* [FIX] Sebelumnya orb ini di-toggle pakai display:none/block di mode terang
   → muncul/hilang instan, nggak nyambung sama elemen lain yang fade halus.
   Diganti jadi opacity + transition (durasi & easing sama seperti semua
   elemen tema lain) supaya orb ikut memudar barengan, bukan tiba-tiba hilang. */
#ctr-login-screen .orb-a, #ctr-login-screen .orb-b {
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .orb-a,
html:not(.dark) #ctr-login-screen .orb-b { opacity: 0; }
@keyframes gtOrbA { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-4%,4%) scale(1.06);} }
@keyframes gtOrbB { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(5%,-5%) scale(1.08);} }
@media (prefers-reduced-motion: reduce) { #ctr-login-screen .orb-a, #ctr-login-screen .orb-b { animation: none; } }

/* [FIX] Sama seperti orb — atmo di bawah globe sebelumnya display:none di
   mode terang (snap). Diganti opacity+transition; animation breathing-nya
   dimatikan khusus mode terang biar tidak "menang" atas target opacity:0. */
#ctr-login-screen .hero-globe-atmo {
  position: fixed; z-index: 1; pointer-events: none;
  left: 50%; bottom: -27vh; transform: translateX(-50%);
  width: calc(132vw + 70px); height: calc(clamp(420px, 58vh, 720px) + 70px); border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, var(--gt-accent-soft), transparent 62%);
  filter: blur(28px); opacity: .7;
  animation: gtAtmoBreathe 9s ease-in-out infinite;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe-atmo { opacity: 0; animation: none; }
@keyframes gtAtmoBreathe { 0%,100%{ opacity:.55; } 50%{ opacity:.8; } }
@media (prefers-reduced-motion: reduce) { #ctr-login-screen .hero-globe-atmo { animation: none; } }

#ctr-login-screen .hero-globe {
  position: fixed; z-index: 1; pointer-events: none;
  left: 50%; bottom: -26vh; transform: translateX(-50%);
  width: 132vw; height: clamp(420px, 58vh, 720px); border-radius: 50%;
  background:
    /* --- highlight matahari (offset kiri-atas, BUKAN di tengah) — inilah
       yang bikin bola kebaca benar-benar 3D melengkung, bukan lingkaran
       datar simetris ("black hole"), karena cahaya datang dari satu arah. */
    radial-gradient(circle at 30% 14%, rgba(255,255,255,.6), transparent 30%),
    radial-gradient(ellipse 55% 30% at 33% 9%, rgba(255,255,255,.16), transparent 72%),
    var(--gt-globe-body);
  box-shadow: var(--gt-globe-shadow);
  overflow: hidden;
}
/* [FIX v4] --gt-globe-body & --gt-globe-shadow itu gradient/multi-shadow
   (bukan warna tunggal), jadi TIDAK BISA di-@property-kan/di-interpolasi
   langsung seperti var warna lain — kalau nilainya diganti langsung,
   hasilnya tetap snap instan. Solusinya pakai teknik CROSSFADE: versi
   terang globe ditaruh di layer terpisah (::after) yang menumpuk di atas
   globe dasarnya, opacity-nya di-transition 0→1 / 1→0 dengan durasi &
   easing SAMA PERSIS seperti elemen lain — jadi globe-nya ikut memudar
   masuk/keluar barengan, bukan berubah warna tiba-tiba. Globe TETAP ADA
   & tetap kelihatan di kedua mode — cuma cara transisinya yang diperbaiki. */
#ctr-login-screen .hero-globe::before {
  /* [GLOBE v5] TIDAK ADA garis wireframe lagi (dulu repeating-radial-gradient
     bikin cincin lintang). Sekarang ::before cuma dipakai buat "atmosphere
     glow" tipis di tepi busur atas — murni gradasi lembut, tanpa satupun
     garis, tanpa warna selain hitam/putih. */
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background-image: radial-gradient(ellipse 66% 20% at 30% 6%, var(--gt-globe-tint), transparent 75%);
  opacity: .6;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe::before { opacity: .35; }
#ctr-login-screen .hero-globe::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 30% 14%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(ellipse 55% 30% at 33% 9%, rgba(255,255,255,.5), transparent 72%),
    radial-gradient(circle at 32% 16%, #ffffff 0%, #f2f2f4 10%, #dcdce0 26%, #bfc0c5 44%, #9d9ea4 62%, #7c7d83 78%, #5c5d62 92%, #414146 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  opacity: 0;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe::after { opacity: 1; }

/* ═════════ [GLOBE v5] "Moon / Planet" — hitam-putih murni, TANPA garis ═════════
   Sebelumnya ada wireframe lintang/bujur + titik "node jaringan AI" biru.
   Sekarang diganti total: cuma pencahayaan terarah + tekstur kawah lembut,
   ala wallpaper planet/bulan bawaan iPhone/MacBook. Tidak ada garis geometris
   apa pun, tidak ada warna selain hitam/putih/abu — di kedua mode terang &
   gelap. Class HTML-nya sengaja dipertahankan sama (hero-globe-grid/-nodes/
   -rim) supaya markup tidak perlu diubah; isinya saja yang diganti perannya. */

/* ═════════ [GLOBE v6] Rotasi pelan + "lampu kota" — ringan & murni CSS ═════════
   • TIDAK ADA lagi bintik kawah gelap (sebelumnya kebaca seperti kotoran/noda).
   • Rotasi didapat dengan menggeser SATU layer memakai transform:translateX
     (bukan animasi background-position/left) — transform dikerjakan di GPU
     compositor, jadi murah/ringan, tidak memicu reflow atau repaint berulang.
   • Loop dibuat SEAMLESS: jarak animasi persis 1 lebar ubin pola (tile),
     jadi pas "sambung" balik ke posisi awal tidak ada lompatan/kedutan.
   • Body & shading utama globe (di atas) tetap statis — cuma pola permukaan
     (lampu kota) yang bergerak, sama seperti foto rotasi Bumi sungguhan
     (arah cahaya matahari diam, permukaan yang berputar). */

/* Layer 1 — sapuan highlight lembut statis di kubah atas (memperkuat arah
   cahaya), tanpa animasi terpisah — cukup 1 layer bergerak (lampu kota) saja
   supaya tetap ringan, tidak ada 2-3 animasi berjalan bersamaan. */
#ctr-login-screen .hero-globe-grid {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 50%;
  background-image: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(255,255,255,.14), transparent 74%);
  opacity: .85;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe-grid { opacity: .5; }

/* Layer 2 — "lampu kota": strip pola titik-titik kecil TERANG (bukan gelap,
   jadi tidak kebaca sebagai noda) yang lebih lebar dari globe-nya sendiri
   (220%), lalu digeser terus-menerus ke kiri via translateX sejauh PERSIS
   satu lebar ubin (background-size) → animasi rotasi mulus tanpa putus.
   Dibatasi (mask) supaya cuma menyala di sisi "malam" (menjauhi highlight
   matahari di kiri-atas) — persis seperti lampu kota di foto satelit malam
   hari Bumi asli, sekaligus otomatis ter-crop mengikuti lengkung planet
   karena parent .hero-globe sudah overflow:hidden + border-radius:50%. */
#ctr-login-screen .hero-globe-nodes {
  position: absolute; top: 0; left: -60%; width: 220%; height: 100%;
  z-index: 4; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.4px at 10% 62%, var(--gt-node), transparent 75%),
    radial-gradient(1.3px 1.1px at 16% 70%, var(--gt-node), transparent 75%),
    radial-gradient(1.2px 1px  at 22% 58%, var(--gt-node), transparent 75%),
    radial-gradient(1.5px 1.3px at 30% 74%, var(--gt-node), transparent 75%),
    radial-gradient(1.1px 1px  at 38% 64%, var(--gt-node), transparent 75%),
    radial-gradient(1.4px 1.2px at 46% 80%, var(--gt-node), transparent 75%),
    radial-gradient(1.2px 1px  at 55% 68%, var(--gt-node), transparent 75%);
  background-repeat: repeat-x;
  background-size: 160px 100%;
  mask-image: radial-gradient(ellipse 60% 46% at 74% 92%, black 0%, black 20%, transparent 66%);
  -webkit-mask-image: radial-gradient(ellipse 60% 46% at 74% 92%, black 0%, black 20%, transparent 66%);
  opacity: .8;
  animation: gtGlobeRotate 70s linear infinite;
  will-change: transform;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe-nodes { opacity: .45; }
/* Jarak translate = 160px = persis 1x background-size → loop tanpa lompatan */
@keyframes gtGlobeRotate { from { transform: translateX(0); } to { transform: translateX(-160px); } }
@media (prefers-reduced-motion: reduce) { #ctr-login-screen .hero-globe-nodes { animation: none; } }

/* Layer 3 — rim/limb light: cahaya lembut PERSIS di dekat tepi busur yang
   menghadap cahaya (kiri-atas), efek "silhouette planet dari luar angkasa".
   [FIX BUG] Sebelumnya pakai box-shadow inset di sekeliling elips — pada
   bentuk elips SANGAT lebar (132vw × ~500-720px) box-shadow inset ber-offset
   memicu bug rendering: cincinnya "menipis" jadi GARIS LURUS panjang yang
   melintang di area datar elips (persis bug yang dilaporkan). Diganti total
   ke teknik background-gradient biasa (bukan box-shadow) yang cuma menyala
   lembut di sekitar tepi kiri-atas — aman di elips seberapa pun ekstrem,
   dan tidak butuh melingkari seluruh bentuk (toh cuma busur atas yang
   kelihatan di layar). */
#ctr-login-screen .hero-globe-rim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse 44% 26% at 26% 2%, var(--gt-globe-rim), transparent 62%);
  opacity: .9;
  transition: opacity var(--gt-dur) var(--gt-tfn);
}
html:not(.dark) #ctr-login-screen .hero-globe-rim { opacity: .55; }

/* [FIX] Sebelumnya mode terang pakai "filter: none" untuk menghilangkan
   drop-shadow di belakang wordmark — "none" ↔ "drop-shadow(...)" tidak bisa
   di-interpolasi sehingga snap. Sekarang drop-shadow SELALU aktif di kedua
   tema, warnanya ikut animasi halus lewat var(--gt-word-shadow) (sudah
   di-@property-kan); di mode terang nilainya memang sudah tipis (12%
   opacity) jadi tidak menimbulkan efek "berkabut" lagi. */
@media (max-width: 560px) {
  #ctr-login-screen .hero-globe { bottom: -12vh; height: clamp(320px, 46vh, 500px); width: 180vw; }
  #ctr-login-screen .hero-globe-atmo { bottom: -13vh; height: calc(clamp(320px, 46vh, 500px) + 55px); width: calc(180vw + 55px); }
}

#ctr-login-screen .starfield {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 78% 16%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.8px 1.8px at 88% 34%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 22% 62%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 65% 12%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 92% 68%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 6% 46%, var(--gt-ink) 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 45% 8%, var(--gt-ink) 60%, transparent 100%);
  opacity: .35; animation: gtTwinkle 7s ease-in-out infinite;
}
html:not(.dark) #ctr-login-screen .starfield { opacity: .14; animation: gtTwinkleLight 7s ease-in-out infinite; }
@keyframes gtTwinkle { 0%,100%{ opacity:.35; } 50%{ opacity:.12; } }
@keyframes gtTwinkleLight { 0%,100%{ opacity:.14; } 50%{ opacity:.05; } }
@media (prefers-reduced-motion: reduce) { #ctr-login-screen .starfield { animation: none; } }

#ctr-login-screen .corner { position: fixed; width: 22px; height: 22px; z-index: 40; pointer-events: none; }
#ctr-login-screen .corner::before, #ctr-login-screen .corner::after { content: ''; position: absolute; background: var(--gt-line); }
#ctr-login-screen .corner.tl { top: 20px; left: 20px; } #ctr-login-screen .corner.tr { top: 20px; right: 20px; }
#ctr-login-screen .corner.bl { bottom: 20px; left: 20px; } #ctr-login-screen .corner.br { bottom: 20px; right: 20px; }
#ctr-login-screen .corner::before { width: 100%; height: 1px; }
#ctr-login-screen .corner::after { width: 1px; height: 100%; }
#ctr-login-screen .corner.tl::before, #ctr-login-screen .corner.tl::after { top: 0; left: 0; }
#ctr-login-screen .corner.tr::before { top: 0; left: 0; } #ctr-login-screen .corner.tr::after { top: 0; right: 0; }
#ctr-login-screen .corner.bl::before { bottom: 0; left: 0; } #ctr-login-screen .corner.bl::after { bottom: 0; left: 0; }
#ctr-login-screen .corner.br::before { bottom: 0; left: 0; } #ctr-login-screen .corner.br::after { bottom: 0; right: 0; }

#ctr-login-screen .brand-mark {
  position: fixed; top: 26px; left: 26px; z-index: 40;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--gt-elev); border: 1px solid var(--gt-line-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--gt-dur) var(--gt-tfn), border-color var(--gt-dur) var(--gt-tfn);
}
#ctr-login-screen .brand-mark svg { width: 15px; height: 15px; }
#ctr-login-screen .brand-mark path { fill: var(--gt-ink); }
#ctr-login-screen .brand-mark-icon {
  width: 16px; height: 16.7px; color: var(--gt-ink);
}

#ctr-login-screen .theme-toggle {
  position: fixed; top: 26px; right: 26px; z-index: 50;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gt-elev); border: 1px solid var(--gt-line-soft);
  transition: background var(--gt-dur) var(--gt-tfn), transform .2s var(--ease-soft), border-color var(--gt-dur) var(--gt-tfn);
}
#ctr-login-screen .theme-toggle:hover { background: var(--gt-elev-hover); transform: translateY(-1px); }
/* [FIX] Ikon matahari/bulan sebelumnya di-toggle pakai display:none/block →
   ganti instan tanpa transisi sama sekali. Diganti jadi ditumpuk (position:
   absolute, saling menimpa) lalu di-crossfade pakai opacity+scale dengan
   durasi/easing yang SAMA seperti elemen tema lain, supaya pergantian ikon
   ikut mulus & sinkron, bukan "klik" tiba-tiba. */
#ctr-login-screen .theme-toggle svg {
  width: 16px; height: 16px; stroke: var(--gt-ink);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.5) rotate(-40deg);
  opacity: 0;
  transition: opacity var(--gt-dur) var(--gt-tfn), transform var(--gt-dur) var(--gt-tfn), stroke var(--gt-dur) var(--gt-tfn);
}
#ctr-login-screen .theme-toggle .icon-moon { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
html.dark #ctr-login-screen .theme-toggle .icon-sun { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
html.dark #ctr-login-screen .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(40deg); }

/* ═════════ HERO CENTER (identik dgn HTML asli) ═════════ */
#ctr-login-screen .hero-center { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 0 16px; width: 100%; }

/* Ikon besar Createrus di atas "WELCOME" — identitas brand, bukan tombol,
   jadi aria-hidden & tidak interaktif. */
#ctr-login-screen .hero-mark { display: flex; justify-content: center; margin-bottom: clamp(14px, 2.4vh, 26px); }
#ctr-login-screen .hero-mark-icon {
  width: clamp(34px, 4.6vw, 46px); height: auto; color: var(--gt-ink);
  filter: drop-shadow(0 10px 24px var(--gt-word-shadow));
}

#ctr-login-screen .eyebrow { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: clamp(8px, 2vh, 22px); }
#ctr-login-screen .eyebrow-text { font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gt-ink-60); white-space: nowrap; }
#ctr-login-screen .eyebrow-bar { width: 28px; height: 2px; border-radius: 2px; background: var(--gt-accent); }

/* Positioning line: "Prompt Operating Workspace" — duduk di antara wordmark
   & tagline, kecil & berjarak supaya jelas ini adalah penjelas posisi
   produk, bukan tagline utama. */
#ctr-login-screen .hero-position-tag {
  margin: clamp(6px, 1.4vh, 12px) 0 0; font-family: var(--font-sans);
  font-size: clamp(11px, 1.3vw, 13px); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gt-ink-40);
}

/* [FIX v5 — real bug, bukan cuma optical] Wordmark "CREATERUS" kepotong
   miring ke KANAN di layar lebar. Penyebab sebenarnya: `text-align:center`
   di wrapper cuma me-refer ke `.wordmark` yg `display:inline-block`. Begitu
   font clamp() menyentuh batas atas (158px), lebar natural teks
   "CREATERUS" (±1035px) jadi LEBIH LEBAR dari wrapper-nya (±868px, dibatasi
   `max-width:900px` milik .hero-center). Di kondisi itu, `text-align:center`
   pada inline-block yang overflow TIDAK melebar simetris ke kiri & kanan
   seperti dugaan — Chromium menahan sisi kiri box tetap rata dgn tepi kiri
   wrapper dan membiarkan SEMUA overflow jatuh ke kanan saja. Hasilnya
   wordmark terlihat "nge-geser" ke kanan persis seperti di screenshot.
   Dibuktikan lewat pengukuran getBoundingClientRect() langsung: pada
   viewport 1920px, box wordmark ada di x:526–1561 (rata kiri dgn wrapper),
   BUKAN x:442–1477 (yang seharusnya simetris kalau overflow center bekerja).

   PERBAIKAN: ganti mekanisme centering dari `text-align` (yang rewel soal
   overflow) ke flexbox `justify-content:center`, yang TERBUKTI selalu
   melebar simetris ke kedua sisi berapa pun lebar kontennya — tervalidasi
   ulang dengan pengukuran yang sama (box jadi persis x:655–1265 di test
   300px/100px, center pas 50%). Wrapper jadi flex, .wordmark jadi flex item
   biasa (block), bukan inline-block lagi. */
#ctr-login-screen .wordmark-wrap {
  overflow: visible; display: flex; justify-content: center; width: 100%;
}
#ctr-login-screen .wordmark {
  /* [UPDATE 2026-08-08] Sebelumnya cuma clamp(52px, 12vw, 158px) — murni
     berdasar lebar viewport, jadi di jendela LEBAR-tapi-PENDEK (mis.
     desktop browser yang tidak di-maximize, atau HP landscape) ukurannya
     tetap besar walau tinggi layar sempit → salah satu pemicu utama
     konten jadi lebih tinggi dari viewport (perlu scroll). Sekarang pakai
     min(vw, vh) supaya wordmark ikut menyusut kalau TINGGI viewport yang
     kecil, bukan cuma lebar. */
  display: block; flex-shrink: 0; overflow: visible; text-align: center;
  font-family: var(--font-logo); font-size: clamp(40px, min(11vw, 15vh), 158px); font-weight: 600; letter-spacing: 0; line-height: 1.08;
  padding: 0 0 0.06em; margin: 0;
  background: linear-gradient(180deg, var(--gt-word-1) 0%, var(--gt-word-2) 58%, var(--gt-word-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 18px 50px var(--gt-word-shadow));
}

#ctr-login-screen .hero-sub { margin: 10px auto 0; max-width: 44ch; font-size: 15px; color: var(--gt-ink-40); line-height: 1.6; }

/* [FIX] Garis pemisah di atas "Versi Terkini / Diperbarui" tadinya pakai
   --gt-line-soft (cuma 6-7% opacity) sehingga nyaris tidak keliatan.
   Sekarang pakai garis yang lebih pekat (--gt-line, ~12-14% opacity) plus
   sedikit tambahan supaya jelas terlihat tanpa jadi terlalu berat. */
#ctr-login-screen .meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(14px, 3vh, 30px); padding-top: clamp(10px, 1.6vh, 16px); border-top: 1.5px solid var(--gt-line);
}
#ctr-login-screen .meta-item { text-align: left; }
#ctr-login-screen .meta-item.right { text-align: right; }
#ctr-login-screen .meta-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gt-ink-25); margin-bottom: 4px; }
#ctr-login-screen .meta-value { font-size: 14px; font-weight: 650; color: var(--gt-ink); }

/* ═════════ VERSION PICKER (bulatan, riwayat versi — dekoratif, buka modal Detail Versi) ═════════ */
#ctr-login-screen .picker-wrap { margin-top: clamp(16px, 3.5vh, 40px); }
#ctr-login-screen .picker { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* [FIX] Sebelumnya background & border terlalu tipis (4% / 12% opacity) dan
   warna icon default cuma --gt-ink-40 (~40%), jadi 3 tombol bulat ini nyaris
   tenggelam di background. Dinaikkan kontrasnya: border lebih tebal & lebih
   pekat, background sedikit lebih solid, tambahan shadow tipis biar
   "terangkat" dari background, icon default lebih gelap/terang (ink-60). */
#ctr-login-screen .picker-dot {
  /* [FIX] "all .25s" sebelumnya bikin transisi tema (background/border/color)
     lebih cepat & nggak nyambung dgn elemen lain yang pakai var(--gt-dur).
     Dipisah: hover (transform/box-shadow) tetap cepat & snappy, sedangkan
     background/border/color yang berubah karena tema disamakan durasinya
     dengan seluruh gate. */
  /* [FIX v2] Sebelumnya pakai background tipis (--gt-bg2) + border + icon
     --gt-ink-60, jadi kontrasnya rendah & beda gaya dgn tombol MASUK.
     Sekarang disamakan persis dgn .ctr-login-submit-btn: solid --gt-btn-bg
     (hitam di mode terang, putih di mode gelap) + icon --gt-btn-ink,
     supaya 4 tombol ini konsisten & ikonnya selalu kontras di kedua tema. */
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gt-btn-bg); border: 1.5px solid var(--gt-btn-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 650; color: var(--gt-btn-ink);
  transition:
    transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft),
    background var(--gt-dur) var(--gt-tfn), border-color var(--gt-dur) var(--gt-tfn), color var(--gt-dur) var(--gt-tfn);
}
#ctr-login-screen .picker-dot svg { width: 15px; height: 15px; }
#ctr-login-screen .picker-dot:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,.22); transform: translateY(-1px);
}
#ctr-login-screen .picker-dot.active {
  box-shadow: 0 0 0 6px var(--gt-accent-soft);
  transform: scale(1.08);
}

/* ═════════ MASUK — reveal form login (bukan navigasi ke url luar) ═════════ */
#ctr-login-screen .login-wrap { margin-top: clamp(14px, 2.5vh, 26px); display: flex; justify-content: center; }
#ctr-login-screen .login-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--gt-btn-bg); color: var(--gt-btn-ink);
  font-size: 14px; font-weight: 650; letter-spacing: .01em;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background var(--gt-dur) var(--gt-tfn), color var(--gt-dur) var(--gt-tfn);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
#ctr-login-screen .login-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
#ctr-login-screen .login-btn svg { width: 13px; height: 13px; }
#ctr-login-screen .login-hint { margin-top: clamp(6px, 1vh, 10px); font-size: 12px; color: var(--gt-ink-40); }

#ctr-login-screen .detail-toggle-wrap { margin-top: clamp(10px, 2vh, 22px); display: flex; flex-direction: column; align-items: center; }
#ctr-login-screen .detail-toggle {
  display: inline-flex; align-items: center; gap: 5px; text-align: center; padding: 8px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-ink-60);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
#ctr-login-screen .detail-toggle:hover { color: var(--gt-ink); border-color: var(--gt-line); }
#ctr-login-screen .detail-toggle .gt-chev { flex-shrink: 0; transition: transform .25s var(--ease-soft); }
#ctr-login-screen .detail-toggle.open .gt-chev { transform: rotate(180deg); }

/* ═════════ "Tentang Penyimpanan Data" — dropdown inline, TANPA pindah halaman/modal ═════════ */
#ctr-login-screen .gt-info-panel {
  max-height: 0; overflow: hidden; opacity: 0; text-align: justify; width: 100%; max-width: 380px;
  transition: max-height .32s var(--ease-soft), opacity .22s var(--ease-soft), margin-top .32s var(--ease-soft);
  font-size: 11.5px; line-height: 1.65; color: var(--gt-ink-40);
}
#ctr-login-screen .gt-info-panel.open {
  max-height: min(320px, 34vh); opacity: 1; margin-top: clamp(8px, 1.6vh, 14px);
  padding: 14px 16px; background: var(--gt-elev); border: 1px solid var(--gt-line-soft); border-radius: 12px;
  overflow-y: auto;
}
#ctr-login-screen .gt-info-panel strong { display: block; margin-bottom: 6px; color: var(--gt-ink); font-weight: 700; text-align: left; }

/* Grup "hub" (wordmark s/d Detail Versi) — disembunyikan begitu form login dibuka */
#ctr-login-screen #ctr-hub-view {
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}
#ctr-login-screen.ctr-login-open #ctr-hub-view {
  display: none;
}

/* ═════════ DETAIL VERSI MODAL (identik dgn HTML asli) ═════════
   [UPDATE — SATSET] Durasi dipersingkat + jarak transform diperkecil supaya
   modal terasa instan/responsif saat dibuka (sebelumnya .28s–.32s dengan
   translateY 14px terasa "ngambang"/delay). will-change dipasang supaya
   browser menyiapkan compositor layer dari awal, bukan mendadak saat
   animasi mulai (penyebab umum "nge-lag" di frame pertama). */
#ctr-login-screen .modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--gt-modal-backdrop); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .16s cubic-bezier(.22,1,.36,1);
  will-change: opacity;
}
#ctr-login-screen .modal-backdrop.open { opacity: 1; pointer-events: auto; }
#ctr-login-screen .modal-card {
  /* [FIX] overflow:hidden dilepas dari sini — sebelumnya bikin dropdown
     subjek (.gtc-subject-list) di panel "Hubungi Admin" ikut ke-clip
     kalau opsi-nya lebih panjang dari sisa tinggi kartu. Kliping utk
     angka watermark sekarang ditangani wrapper sendiri (.modal-watermark-clip)
     supaya sudut kartu tetap rapi tanpa memotong elemen dropdown lain. */
  position: relative; width: 100%; max-width: 520px; overflow: visible;
  background: var(--gt-bg2); border: 1px solid var(--gt-line); border-radius: 22px;
  padding: 38px 34px 32px;
  transform: translateY(8px) scale(.99); opacity: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .14s linear, background .2s var(--ease-soft);
  will-change: transform, opacity;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
#ctr-login-screen .modal-backdrop.open .modal-card { transform: translateY(0) scale(1); opacity: 1; }
/* [FIX] Wrapper baru — clip angka watermark raksasa mengikuti rounded
   corner kartu (border-radius: inherit), TANPA memotong dropdown subjek
   yang posisinya absolute & bisa keluar dari batas kartu. */
#ctr-login-screen .modal-watermark-clip {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  z-index: 0; pointer-events: none;
}
#ctr-login-screen .modal-watermark {
  position: absolute; top: -.1em; right: 14px;
  font-size: 140px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--gt-ink); opacity: .045; pointer-events: none; user-select: none;
}
#ctr-login-screen .modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gt-elev); border: 1px solid var(--gt-line-soft);
  display: flex; align-items: center; justify-content: center;
}
#ctr-login-screen .modal-close:hover { background: var(--gt-elev-hover); }
#ctr-login-screen .modal-close svg { width: 12px; height: 12px; }
#ctr-login-screen .modal-content { position: relative; z-index: 1; }
#ctr-login-screen .modal-eyebrow-row { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
#ctr-login-screen .modal-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--gt-elev); display: flex; align-items: center; justify-content: center; }
#ctr-login-screen .modal-mark svg { width: 10px; height: 10px; }
#ctr-login-screen .modal-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-ink-40); }
#ctr-login-screen .modal-title { font-size: clamp(24px,3.4vw,30px); font-weight: 700; letter-spacing: -0.02em; }
#ctr-login-screen .modal-date { margin-top: 5px; font-size: 13px; color: var(--gt-ink-40); }
#ctr-login-screen .modal-desc { margin-top: 14px; font-size: 14.5px; color: var(--gt-ink-60); line-height: 1.6; max-width: 42ch; }
#ctr-login-screen .modal-log-label { margin-top: 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gt-ink-25); }
#ctr-login-screen .modal-log { margin-top: 10px; }
#ctr-login-screen .modal-log li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--gt-ink-60); margin-bottom: 7px; list-style: none; }
#ctr-login-screen .modal-log li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--gt-accent); }
#ctr-login-screen .modal-open-btn {
  margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 15px 22px; border-radius: 12px; background: var(--gt-btn-bg); color: var(--gt-btn-ink);
  font-size: 14px; font-weight: 650;
  transition: transform .2s var(--ease-soft);
}
#ctr-login-screen .modal-open-btn:hover { transform: translateY(-2px); }
#ctr-login-screen .modal-open-btn svg { width: 13px; height: 13px; }

/* ═════════ Slot tempat form login asli "numpang tampil" di dalam modal
   (Angka 2) — form-nya sendiri (tabs, input, tombol) pakai style bawaan
   #ctr-login-fields-wrap dkk. yang sudah ada, cukup dikasih jarak atas. ═════════ */
#ctr-login-screen .modal-login-slot { margin-top: 6px; }
#ctr-login-screen .modal-login-slot #ctr-login-fields-wrap.open { margin-top: 0; }

/* [FIX] Form login DI DALAM modal (Angka "2" / tombol "Masuk") harus SELALU
   langsung terlihat penuh — TIDAK boleh ikut logika accordion collapsed
   (max-height:0/opacity:0) yang aslinya didesain utk toggle inline "Sudah
   punya akses? Masuk di sini" di Hub. Override ini menang atas rule
   #ctr-login-fields-wrap default (baris di bawah) karena selector lebih
   spesifik + urutan setelahnya di file ini. */
#ctr-login-screen #ctr-login-fields-wrap.ctr-login-fields-wrap--in-modal {
  max-height: none !important; overflow: visible !important; opacity: 1 !important; margin-top: 0 !important;
  transition: none !important;
}

/* ═════════ MODAL — list aksi minimalis (dipakai panel Angka 1: Quick Engine) ═════════
   Menggantikan tombol besar icon-di-atas-teks lama (modal-btn-row/primary/
   secondary) dengan baris ramping: icon kecil kiri + label + chevron kanan —
   selaras dgn gaya "_modeBtn" di modal scan QR (ctr-login-scan.js). */
#ctr-login-screen .modal-action-list { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
#ctr-login-screen .modal-action-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 11px;
  background: transparent; border: 1px solid var(--gt-line-soft);
  text-align: left; cursor: pointer;
  transition: background .12s var(--ease-soft), border-color .12s var(--ease-soft);
}
#ctr-login-screen .modal-action-item:hover { background: var(--gt-elev); border-color: var(--gt-line); }
#ctr-login-screen .modal-action-item:active { background: var(--gt-elev-hover); }
#ctr-login-screen .modal-action-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gt-elev); color: var(--gt-ink);
}
#ctr-login-screen .modal-action-icon svg { width: 14px; height: 14px; }
#ctr-login-screen .modal-action-label { flex: 1 1 auto; font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; color: var(--gt-ink); }
#ctr-login-screen .modal-action-chev { flex: 0 0 auto; color: var(--gt-ink-25); }

/* [UPDATE — Front page Option B] Catatan singkat pengganti tombol
   "Scan by Kamera" (gtPanelScanBtn) yang dihapus dari panel Angka 1 —
   sama seperti #ctr-guest-scan-note di hero login-view. */
#ctr-login-screen .modal-scan-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 12px 2px 0; font-size: 11px; line-height: 1.55; color: var(--gt-ink-40);
}
#ctr-login-screen .modal-scan-note svg { flex-shrink: 0; margin-top: 2px; opacity: .75; }

/* ═════════ SUPPORT DEV — panel Angka "4" (aksi dropdown chevron) ═════════ */
#ctr-login-screen .modal-action-item.open .gt-chev { transform: rotate(180deg); }
#ctr-login-screen .modal-support-note {
  margin-top: 18px; font-size: 11.5px; line-height: 1.6; color: var(--gt-ink-40);
}

/* ═════════ HUBUNGI ADMIN — panel Angka "5" (form Nama+Subjek+Pesan) ═════════
   Ikut gaya visual modal login (token --gt-*, sama seperti .ctr-lf-input di
   tab Kode Lisensi/Username), BUKAN reuse widget "cs-panel" (docked, gaya
   macOS titlebar) yang dipakai di menu Contact post-login — sengaja beda
   sesuai instruksi: logika/data subjek boleh shared, tampilan boleh beda. */
#ctr-login-screen .gtc-form { margin-top: 22px; display: flex; flex-direction: column; }
#ctr-login-screen .gtc-subject-wrap { position: relative; }
#ctr-login-screen .gtc-subject-row .ctr-lf-input.gtc-subject-input { padding-right: 36px; }
#ctr-login-screen .gtc-subject-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: none;
  background: var(--gt-elev); color: var(--gt-ink-40);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: background .15s, color .15s; flex-shrink: 0;
}
#ctr-login-screen .gtc-subject-btn:hover { background: var(--gt-elev-hover); color: var(--gt-ink); }
#ctr-login-screen .gtc-subject-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 216px; overflow-y: auto;
  background: var(--gt-bg2); border: 1px solid var(--gt-line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22);
  display: none;
}
#ctr-login-screen .gtc-subject-list.open { display: block; animation: gtcDdIn .15s ease; }
@keyframes gtcDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
#ctr-login-screen .gtc-subject-item {
  padding: 9px 13px; font-size: 12px; font-weight: 550; color: var(--gt-ink-60); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--gt-line-soft);
  transition: background .12s, color .12s;
}
#ctr-login-screen .gtc-subject-item:last-child { border-bottom: none; }
#ctr-login-screen .gtc-subject-item:hover { background: var(--gt-elev); color: var(--gt-ink); }
#ctr-login-screen .gtc-subject-icon { font-size: 13px; flex-shrink: 0; }
#ctr-login-screen .gtc-textarea {
  width: 100%; min-height: 78px; max-height: 140px; resize: none;
  padding: 11px 14px; margin-bottom: 9px;
  border: 1px solid var(--gt-line); border-radius: 10px;
  font-size: 13.5px; font-family: inherit; line-height: 1.55;
  background: var(--gt-elev); color: var(--gt-ink);
  outline: none; box-sizing: border-box;
  transition: border-color .2s, background .2s;
}
#ctr-login-screen .gtc-textarea::placeholder { color: var(--gt-ink-25); }
#ctr-login-screen .gtc-textarea:focus { border-color: var(--gt-accent); }

@media (max-width: 560px) {
  #ctr-login-screen .modal-card { padding: 30px 22px 26px; }
  #ctr-login-screen .modal-watermark { font-size: 96px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LOGIN FORM — muncul HANYA setelah tombol "Masuk" diklik.
   Fungsi lama dipertahankan: Coba Createrus / Scan Barcode / Kode
   Lisensi / Username & Password — hanya baju visualnya yang menyatu
   dgn tema Hub di atas.
   ══════════════════════════════════════════════════════════════════════ */
#ctr-login-form-view { display: none; position: relative; z-index: 2; width: 100%; max-width: 420px; margin: 0 auto; }
#ctr-login-screen.ctr-login-open #ctr-login-form-view { display: block; }

#ctr-login-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px; font-size: 11.5px; font-weight: 650; color: var(--gt-ink-40);
  transition: color .2s;
}
#ctr-login-back-btn:hover { color: var(--gt-ink); }
#ctr-login-back-btn svg { width: 11px; height: 11px; }

#ctr-login-form-eyebrow { text-align: center; margin-bottom: 6px; }
#ctr-login-form-eyebrow .eyebrow-text { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gt-ink-60); }

/* Tagline dipindah ke sini dari hub view — momen yang lebih tepat utk pesan
   "jual", karena orang sudah niat masuk & sedang lihat pilihan akses. */
.form-tagline { text-align: center; margin: 0 0 20px; }
.form-tagline-strong {
  font-size: clamp(13px, 1.6vw, 15px); font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gt-ink-60); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.form-tagline-strong .plus { color: var(--gt-accent); font-weight: 700; }

#ctr-login-card {
  position: relative;
  width: 100%;
  background: var(--gt-bg2);
  border: 1px solid var(--gt-line);
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.16);
  text-align: left;
  animation: gtCardIn .45s var(--ease) both;
}
@keyframes gtCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ctrShake {
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}

#ctr-guest-hero { display: flex; flex-direction: column; gap: 10px; }
#ctr-guest-cta-stack { display: flex; flex-direction: column; gap: 8px; }
#ctr-guest-primary-row { display: flex; align-items: stretch; gap: 8px; }

#ctr-guest-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex: 1 1 auto; min-width: 0; min-height: 46px;
  padding: 13px 18px; border-radius: 13px;
  background: var(--gt-btn-bg); color: var(--gt-btn-ink);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
#ctr-guest-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
#ctr-guest-btn:active { transform: translateY(0); }
#ctr-guest-btn svg { flex-shrink: 0; }

#ctr-scan-barcode-btn {
  flex: 0 0 auto; width: 46px; min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--gt-elev); border: 1px solid var(--gt-line-soft);
  color: var(--gt-ink);
  transition: background .2s, transform .2s var(--ease-soft);
}
#ctr-scan-barcode-btn:hover { background: var(--gt-elev-hover); transform: translateY(-1px); }
#ctr-scan-barcode-btn:active { transform: translateY(0); }

#ctr-guest-err { font-size: 11.5px; font-weight: 600; color: #FF6B6B; min-height: 0; text-align: center; opacity: 0; transition: opacity .2s; }

/* [UPDATE — Front page Option B] Catatan singkat pengganti tombol
   "Scan Barcode" yang dihapus dari hero login-view — beri tahu user
   scan tetap bisa dilakukan langsung lewat kamera HP (deep link),
   tanpa perlu elemen tombol tambahan. */
#ctr-guest-scan-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 2px 2px 0; padding: 0;
  font-size: 10.5px; line-height: 1.5; color: var(--gt-ink-45, var(--gt-ink-60));
  text-align: left;
}
#ctr-guest-scan-note svg { flex-shrink: 0; margin-top: 1.5px; opacity: .75; }

#ctr-wa-buy-btn {
  width: 100%; padding: 10px 16px; margin-top: 2px;
  border-radius: 11px; border: 1px dashed var(--gt-line);
  background: transparent; color: var(--gt-ink-60);
  font-size: 12px; font-weight: 650; text-align: center;
  transition: background .2s, color .2s, border-color .2s;
}
#ctr-wa-buy-btn:hover { background: var(--gt-elev); color: var(--gt-ink); border-color: var(--gt-ink-40); }

#ctr-login-toggle-row { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--gt-line-soft); }
#ctr-login-toggle-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--gt-ink-40); text-align: center; padding: 4px 0;
}
#ctr-login-toggle-btn strong { color: var(--gt-ink); font-weight: 700; }
#ctr-login-toggle-btn:hover { color: var(--gt-ink); }
#ctr-login-toggle-btn .ctr-lt-chev { transition: transform .25s var(--ease-soft); flex-shrink: 0; }
#ctr-login-toggle-btn.open .ctr-lt-chev { transform: rotate(180deg); }

#ctr-login-fields-wrap {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s var(--ease-soft), opacity .25s var(--ease-soft), margin-top .35s var(--ease-soft);
}
#ctr-login-fields-wrap.open { max-height: 620px; opacity: 1; margin-top: 14px; }

#ctr-login-tabs { display: flex; gap: 4px; padding: 3px; background: var(--gt-elev); border-radius: 11px; margin-bottom: 14px; }
/* [FIX] Sama seperti .ctr-login-submit-btn di atas — diawali "#ctr-login-screen"
   supaya menang spesifisitas atas reset "#ctr-login-screen button", sehingga
   background pil tab aktif benar-benar tampil, bukan cuma bayangan tipis. */
#ctr-login-screen .ctr-login-tab {
  flex: 1 1 0; padding: 8px 10px; border-radius: 9px;
  font-size: 12px; font-weight: 650; text-align: center; color: var(--gt-ink-40);
  transition: background .2s, color .2s;
}
#ctr-login-screen .ctr-login-tab.active { background: var(--gt-bg2); color: var(--gt-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ctr-login-panel { display: flex; flex-direction: column; }

.ctr-login-err-box { font-size: 11.5px; font-weight: 600; color: #FF6B6B; min-height: 0; text-align: center; margin-bottom: 6px; opacity: 0; transition: opacity .2s; }
.ctr-login-hint { font-size: 10.5px; line-height: 1.5; color: var(--gt-ink-40); text-align: center; margin-top: 10px; }

/* [FIX] Sebelumnya selector di bawah ini TIDAK diawali "#ctr-login-screen",
   jadi spesifisitasnya (0,1,0) KALAH dari reset global "#ctr-login-screen
   button" (1,0,1) di baris atas file ini — akibatnya background & color
   tombol jatuh ke "none"/"inherit" (tombol jadi teks polos tanpa pil,
   nyaris tak kelihatan di mode terang maupun gelap). Diawali
   "#ctr-login-screen" supaya menang & pil hitam/putihnya tampil lagi. */
#ctr-login-screen .ctr-login-submit-btn {
  width: 100%; padding: 12px 20px;
  background: var(--gt-btn-bg); color: var(--gt-btn-ink);
  border: none; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
#ctr-login-screen .ctr-login-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
#ctr-login-screen .ctr-login-submit-btn:active { transform: translateY(0); }
#ctr-login-screen .ctr-login-submit-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
#ctr-login-screen .ctr-btn-arrow { transition: transform .2s var(--ease-soft); }
#ctr-login-screen .ctr-login-submit-btn:hover .ctr-btn-arrow { transform: translateX(3px); }

#ctr-login-fields { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.ctr-lf-wrap { position: relative; margin-bottom: 9px; }
.ctr-lf-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gt-ink-40); pointer-events: none; display: flex; line-height: 0; }
.ctr-lf-input {
  width: 100%; padding: 11px 14px 11px 38px;
  border: 1px solid var(--gt-line); border-radius: 10px;
  font-size: 13.5px; font-weight: 400;
  background: var(--gt-elev); color: var(--gt-ink);
  transition: border-color .2s, background .2s;
  font-family: inherit; outline: none;
}
.ctr-lf-input::placeholder { color: var(--gt-ink-25); }
.ctr-lf-input:focus { border-color: var(--gt-accent); }

#ctr-err { font-size: 11.5px; font-weight: 600; color: #FF6B6B; text-align: center; opacity: 0; }

#ctr-login-info { margin-top: 14px; text-align: center; }
#ctr-login-info-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--gt-ink-40); }
#ctr-login-info-toggle:hover, #ctr-login-info-toggle.open { color: var(--gt-ink); }
#ctr-login-info-toggle .ctr-li-chev { transition: transform .25s var(--ease-soft); }
#ctr-login-info-toggle.open .ctr-li-chev { transform: rotate(180deg); }
#ctr-login-info-panel {
  max-height: 0; overflow: hidden; opacity: 0; text-align: justify;
  transition: max-height .3s var(--ease-soft), opacity .2s, margin-top .3s var(--ease-soft);
  font-size: 11px; line-height: 1.6; color: var(--gt-ink-40);
}
#ctr-login-info-panel.open {
  max-height: 260px; opacity: 1; margin-top: 8px;
  padding: 10px 12px; background: var(--gt-elev); border: 1px solid var(--gt-line-soft); border-radius: 9px;
}
#ctr-login-info-panel strong { display: block; margin-bottom: 6px; color: var(--gt-ink); font-weight: 700; text-align: left; }

#ctr-login-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500; color: var(--gt-ink-25);
  padding: 14px 20px 6px;
}

@media (prefers-reduced-motion: reduce) {
  #ctr-login-screen * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}