/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Material login asli, dipakai bersama tanpa membawa aturan body/form login. */
.login-box.glass, .coda-login-glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--coda-login-glass-fill, rgba(255,255,255,.14));
  border: 0;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.16),
              inset 0 0 26px -10px rgba(255,255,255,.22);
  backdrop-filter: blur(var(--coda-login-glass-blur, 18px)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--coda-login-glass-blur, 18px)) saturate(128%);
}
.login-box.glass::before, .coda-login-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  backdrop-filter: blur(var(--coda-login-refraction-blur, 14px)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--coda-login-refraction-blur, 14px)) saturate(128%);
  filter: url(#codaGlassWarp); pointer-events: none;
}
.login-box.glass::after, .coda-login-glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; padding: 1px;
  backdrop-filter: brightness(1.14) saturate(1.10);
  -webkit-backdrop-filter: brightness(1.14) saturate(1.10);
  background: linear-gradient(177deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 5%,
    rgba(255,255,255,.06) 18%, rgba(255,255,255,.03) 45%,
    rgba(255,255,255,.03) 64%, rgba(255,255,255,.09) 88%,
    rgba(255,255,255,.21) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; filter: blur(1px);
}
.coda-glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-box.glass, .coda-login-glass { background: var(--glass-bg, rgba(223,232,239,.82)); }
  .login-box.glass::before, .login-box.glass::after,
  .coda-login-glass::before, .coda-login-glass::after { display: none; }
}

/* WEB_MARK8.6.2 - kartu login memakai material hover/terpilih workspace: isi putih 20%, cahaya dalam lembut,
   bayangan tipis; tanpa lapisan refraksi dan tanpa cincin tepi. Hanya kartu login (.login-box), bukan sidebar. */
.login-box.glass {
  background: rgba(255,255,255,.2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05);
}
.login-box.glass::before, .login-box.glass::after { content: none; }

/* WEB_MARK8.6.3 - kartu login dan footer berkaca blur seperti dock mobile; kolom input bergaya kolom cari sidebar
   (kartu ikon metal di kiri, fokus = garis biru saja), tombol mata pada kolom kata sandi. */
.login-box.glass, .login-footer {
  background: rgba(255,255,255,.22) !important; border: 0 !important;
  backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 8px 24px rgba(0,60,140,.16) !important;
}
.login-footer { box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 -4px 16px rgba(0,60,140,.08) !important; }
.login-box .a-field { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 44px;
  padding: 0 6px; margin: 0 0 12px; border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05);
  transition: border-color .15s ease-out; }
.login-box .a-field:focus-within { border-color: #0071e3; box-shadow: none; }
.login-box .a-field > .a-input { flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.login-box .a-field-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px rgba(139,146,160,.45); color: #2b2f38; font-size: 16px; }
.login-box .a-field:focus-within .a-field-ico { color: #0071e3; }
.login-box .a-field-eye { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: #86868b; font-size: 18px; cursor: pointer; }
.login-box .a-field-eye:hover, .login-box .a-field-eye:focus-visible { background: rgba(255,255,255,.35); color: #0071e3; }


/* WEB_MARK8.6.5 - kaca login dan footer = material hover/terpilih workspace (putih 20%, cahaya dalam lembut) dengan
   blur dock; tanpa bayangan luar, tanpa rim/sorot tambahan (8.6.4 terlalu padat). */
.login-box.glass, .login-footer {
  background: rgba(255,255,255,.2) !important; background-image: none !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4) !important;
}
.login-box.glass::before, .login-box.glass::after { content: none !important; }

/* WEB_MARK8.6.6 - kaca sedikit lebih glassy: blur lebih tipis dan tanpa saturasi (bening, tidak vivid), garis kilau
   tipis di tepi atas dan cahaya dalam sedikit lebih kuat. Kolom input putih solid. */
.login-box.glass, .login-footer {
  backdrop-filter: blur(10px) saturate(100%) !important; -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
  background: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
.login-box .a-field { background: #fff; box-shadow: none; border-color: rgba(0,0,0,.06); }
.login-box .a-field:focus-within { border-color: #0071e3; }


/* WEB_MARK8.6.8 - seperti 8.6.6, tetapi garis putih padat di tepi atas diganti tepi kilau 1px di sekeliling kartu
   yang opacity-nya naik-turun acak (dari hampir transparan sampai terang), sedikit dilunakkan. Footer: garis atas
   bergradasi opacity yang sama sepanjang lebarnya. */
.login-box.glass, .login-footer {
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
.login-box.glass.glass::after {
  content: "" !important; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  padding: 1px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: blur(.4px);
  background: conic-gradient(from 15deg,
    rgba(255,255,255,.75) 0deg, rgba(255,255,255,.10) 38deg, rgba(255,255,255,.42) 80deg, rgba(255,255,255,.04) 128deg,
    rgba(255,255,255,.30) 170deg, rgba(255,255,255,.06) 214deg, rgba(255,255,255,.22) 250deg, rgba(255,255,255,.03) 292deg,
    rgba(255,255,255,.58) 330deg, rgba(255,255,255,.75) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.login-footer {
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.6) 18%, rgba(255,255,255,.12) 40%,
    rgba(255,255,255,.45) 63%, rgba(255,255,255,.05) 82%, rgba(255,255,255,.5) 100%) !important;
  background-size: 100% 1px !important; background-position: top !important; background-repeat: no-repeat !important;
}

/* WEB_MARK8.6.9 - tepi kilau lunak (memudar ke luar dan ke dalam) yang mengambil terang dari latar: cincin 2px dengan
   backdrop-filter brightness, jadi saat awan terang lewat di belakang tepi, kilaunya ikut menyala dan bergerak. */
.login-box.glass.glass::after {
  padding: 2px; filter: blur(.9px);
  backdrop-filter: brightness(1.85) saturate(.55); -webkit-backdrop-filter: brightness(1.85) saturate(.55);
  background: conic-gradient(from 15deg,
    rgba(255,255,255,.42) 0deg, rgba(255,255,255,.05) 38deg, rgba(255,255,255,.24) 80deg, rgba(255,255,255,.02) 128deg,
    rgba(255,255,255,.16) 170deg, rgba(255,255,255,.03) 214deg, rgba(255,255,255,.12) 250deg, rgba(255,255,255,.02) 292deg,
    rgba(255,255,255,.32) 330deg, rgba(255,255,255,.42) 360deg);
}

/* WEB_MARK8.6.9 - tepi kilau interaktif: LoginScene membaca terang awan di 8 titik sekeliling kartu dan 5 titik di
   atas footer (4x/detik), nilainya jadi opacity stop gradasi; transisi halus agar menyala/meredup alami. Tepi 2px
   dilunakkan blur sehingga memudar ke luar dan ke dalam, bukan garis. */
@property --rim1 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim2 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim3 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim4 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim5 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim6 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim7 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim8 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --kaki1 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki2 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki3 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki4 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki5 { syntax: "<number>"; inherits: true; initial-value: .25; }
.login-box.glass { transition: --rim1 .8s ease, --rim2 .8s ease, --rim3 .8s ease, --rim4 .8s ease, --rim5 .8s ease, --rim6 .8s ease, --rim7 .8s ease, --rim8 .8s ease; }
.login-footer { transition: --kaki1 .8s ease, --kaki2 .8s ease, --kaki3 .8s ease, --kaki4 .8s ease, --kaki5 .8s ease; }
.login-box.glass.glass::after {
  padding: 1.5px; filter: blur(.8px); backdrop-filter: none; -webkit-backdrop-filter: none;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,var(--rim1)) 0deg, rgba(255,255,255,var(--rim2)) 45deg, rgba(255,255,255,var(--rim3)) 90deg,
    rgba(255,255,255,var(--rim4)) 135deg, rgba(255,255,255,var(--rim5)) 180deg, rgba(255,255,255,var(--rim6)) 225deg,
    rgba(255,255,255,var(--rim7)) 270deg, rgba(255,255,255,var(--rim8)) 315deg, rgba(255,255,255,var(--rim1)) 360deg);
}
.login-footer {
  background-image: linear-gradient(90deg, rgba(255,255,255,var(--kaki1)), rgba(255,255,255,var(--kaki2)) 25%, rgba(255,255,255,var(--kaki3)) 50%,
    rgba(255,255,255,var(--kaki4)) 75%, rgba(255,255,255,var(--kaki5))) !important;
  background-size: 100% 2px !important;
}

/* WEB_MARK8.6.10 - lebih ringan: tepi 1px tanpa blur, tanpa transisi variabel (tak ada gambar ulang per frame). */
.login-box.glass, .login-footer { transition: none !important; }
.login-box.glass.glass::after { padding: 1px; filter: none; }
.login-footer { background-size: 100% 1px !important; }

/* WEB_MARK8.7.1 - semua kolom login (username, sandi, e-mail, kode OTP, kode struk) seragam: putih, garis biru saat
   aktif tanpa cincin bayangan; ikon hilang saat kolom aktif atau terisi dan teks mengisi tempatnya (seperti cari sidebar). */
.login-box .a-field:is(:focus-within, :has(.a-input:not(:placeholder-shown))) .a-field-ico { display: none; }
.login-box .a-field:is(:focus-within, :has(.a-input:not(:placeholder-shown))) { padding-left: 14px; }
.login-box .a-input, .login-box .a-input:focus { box-shadow: none !important; }

/* WEB_MARK8.7.3 - radius kartu login = kartu beranda dan dock mobile. */
.login-box.glass { border-radius: 22px !important; }

/* WEB_MARK8.10.1 - selama login diproses, kolom sandi memakai pemuat layar halaman: putaran biru di tempat tombol mata
   dan garis berjalan tipis di tepi bawah kolom. */
.login-box .a-field.memuat { position: relative; overflow: hidden; }
.login-box .a-field.memuat::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; border-radius: 2px; background: #0071e3;
  animation: a-field-jalan 1.1s ease-in-out infinite;
}
.login-box .a-field-memuat { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; color: #0071e3; }
.login-box .a-field-memuat i { display: block; font-size: 18px; animation: a-field-putar .9s linear infinite; }
@keyframes a-field-jalan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes a-field-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-box .a-field.memuat::after, .login-box .a-field-memuat i { animation-duration: 2.4s; }
}

.login-footer .footer-downloads {
  position: absolute; top: 50%; right: calc(clamp(16px, 4vw, 24px) + 40px);
  transform: translateY(-50%); display: flex; align-items: center; gap: 3px;
}
.login-footer .footer-downloads a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
  padding: 4px 6px; border-radius: 6px; color: var(--text-color);
  font-size: 10px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.login-footer .footer-downloads a:hover, .login-footer .footer-downloads a:focus-visible { background: rgba(120, 120, 128, 0.12); }
.login-footer .footer-downloads .ph-android-logo { color: #3DDC84; font-size: 15px; }
.login-footer .footer-downloads svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .login-footer.with-downloads .copyright-note:not([hidden]) {
    position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px;
    padding: 8px 10px; border-radius: 8px; background: var(--menu-bg);
    color: var(--text-color); font-size: 10px; line-height: 1.4; text-align: left;
  }
}
@media (max-width: 600px) {
  .login-footer.with-downloads .footer-downloads {
    top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
    gap: clamp(4px, 2vw, 8px); max-width: calc(100% - 96px);
  }
}
:root {
            --apple-blue: #0071e3; --apple-blue-hover: #0077ed;
            --apple-danger: #ff3b30; --apple-danger-hover: #d70015;
            --apple-success: #34c759;
            --bg-color: #45a7ff; --text-color: #17212b; --text-muted: #314f63;
            --glass-bg: rgba(223, 232, 239, 0.82); --glass-border: rgba(27, 50, 66, 0.14);
            --input-bg: rgba(248, 250, 252, 0.86);
            --menu-bg: rgba(238, 244, 248, 0.97); --glass-saturation: 108%;
        }
        [data-theme="dark"] {
            --bg-color: #27323d; --text-color: #f5f7fa; --text-muted: #b1bac3;
            --glass-bg: rgba(32, 42, 52, 0.78); --glass-border: rgba(255, 255, 255, 0.15);
            --input-bg: rgba(13, 20, 27, 0.6);
            --menu-bg: rgba(31, 41, 51, 0.96); --glass-saturation: 150%;
        }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body {
            width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter Variable", "Inter", "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color); color: var(--text-color);
            -webkit-font-smoothing: antialiased; transition: background-color 0.3s, color 0.3s;
        }
        body { position: relative; }
        .glass {
            background: var(--glass-bg); backdrop-filter: saturate(var(--glass-saturation)) blur(20px);
            -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(20px); border: 1px solid var(--glass-border);
        }
        #login-three-scene {
            position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0;
            overflow: hidden; pointer-events: none; background: transparent;
        }
        #login-three-scene canvas {
            display: block; width: 100% !important; height: 100% !important;
            opacity: 0.82; pointer-events: none;
        }
        [data-theme="dark"] #login-three-scene canvas { opacity: 0.86; }
        .login-wrapper, .login-footer { position: relative; z-index: 10; }
        .lang-dropdown-wrapper { position: relative; }
        /* Baris hak cipta bergaya coda.co.id: ikon kecil, tahun, dan keterangan
           lengkap yang baru muncul kalau ikonnya ditekan. Footer jadi tenang dan
           tidak memakan lebar, tetapi keterangannya tetap ada bagi yang mencarinya. */
        .site-footer .copyright {
            display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0;
        }
        .site-footer .copyright-mark {
            display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px;
            padding: 0; border: 0; border-radius: 50%; background: transparent;
            color: inherit; cursor: pointer;
        }
        .site-footer .copyright-mark:hover { background: rgba(120,120,128,0.18); }
        .site-footer .copyright-note { overflow-wrap: anywhere; }
        .lang-btn {
            display: flex; align-items: center; gap: 6px; background: rgba(120,120,128,0.12);
            border: none; color: var(--text-color); cursor: pointer; font-weight: 700;
            font-size: 12px; padding: 6px 10px; border-radius: 6px; transition: 0.2s;
        }
        [data-theme="dark"] .lang-btn { background: rgba(120,120,128,0.24); }
        .lang-btn:hover, .lang-btn.active { background: var(--bg-color); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
        .lang-menu {
            position: absolute; top: calc(100% + 12px); right: 0; background: var(--menu-bg);
            backdrop-filter: saturate(120%) blur(30px); -webkit-backdrop-filter: saturate(120%) blur(30px);
            border: 1px solid var(--glass-border); border-radius: 12px; padding: 6px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column;
            gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 3000;
            min-width: 160px; max-height: 50vh; overflow-y: auto;
        }
        .lang-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .lang-menu a {
            display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none;
            color: var(--text-color); border-radius: 8px; font-weight: 600; font-size: 12px; transition: 0.2s;
        }
        .lang-menu a:hover { background: rgba(0, 113, 227, 0.1); color: var(--apple-blue); }
        .lang-menu .flag { font-size: 16px; }
        .login-wrapper {
            display: flex; align-items: center; justify-content: center; width: 100%;
            height: 100vh; padding: 40px 20px 68px 20px;
        }
        .login-split { display: flex; width: 100%; max-width: 860px; gap: 40px; align-items: center; }
        .promo-section { flex: 1.2; min-width: 0; }
        .promo-logo { height: 40px; width: auto; object-fit: contain; margin-bottom: 20px; border-radius: 6px; }
        .promo-title { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -1px; line-height: 1.1; color: var(--text-color); }
        .promo-subtitle { font-size: 15px; color: var(--text-muted); margin: 12px 0 16px; font-weight: 500; }
        /* Jarak ke judul sambutan. Dulu subjudul promo yang memberi ruang ini; sesudah subjudul
           dibuang, label APK menempel ke judulnya. Ruangnya sekarang milik label itu sendiri. */
        .promo-downloads { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
        .android-download {
            display: inline-grid; grid-template-columns: 32px minmax(0, auto) 16px;
            align-items: center; gap: 9px; min-height: 46px; padding: 6px 9px;
            border: 0; border-radius: 8px;
            /* BAHAN YANG SAMA dengan kartu masuk - permintaan pemilik. Nilainya sengaja tidak
               disalin-tempel dengan angka lain: putih bening di tema terang, hitam bening di
               tema gelap, garis cahaya tipis di ::after, bayangan seperlunya. Kalau kartu masuk
               nanti disetel ulang, dua tempat ini harus bergerak bersama. */
            position: relative; isolation: isolate; overflow: hidden;
            background: rgba(255, 255, 255, 0.14); color: var(--text-color);
            text-decoration: none;
            box-shadow: inset 0 0 8px -3px rgba(255, 255, 255, 0.16),
                        0 2px 8px rgba(15, 26, 36, 0.10);
            transition: background .2s, transform .2s;
        }
        [data-theme="dark"] .android-download {
            background: rgba(0, 0, 0, 0.26); color: #f5f7fa;
            box-shadow: inset 0 0 8px -3px rgba(255, 255, 255, 0.12),
                        0 2px 10px rgba(0, 0, 0, 0.24);
        }
        .android-download::before {
            content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
            backdrop-filter: blur(14px) saturate(128%);
            -webkit-backdrop-filter: blur(14px) saturate(128%);
            filter: url(#codaGlassWarp);
        }
        .android-download::after {
            content: ""; position: absolute; inset: 0; z-index: -1;
            border-radius: inherit; pointer-events: none;
            padding: 1px;
            backdrop-filter: brightness(1.14) saturate(1.10);
            -webkit-backdrop-filter: brightness(1.14) saturate(1.10);
            background: linear-gradient(177deg,
                rgba(255, 255, 255, 0.30) 0%,
                rgba(255, 255, 255, 0.06) 24%,
                rgba(255, 255, 255, 0.03) 60%,
                rgba(255, 255, 255, 0.21) 100%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            filter: blur(1px);
        }
        [data-theme="dark"] .android-download::after {
            backdrop-filter: brightness(1.26) saturate(1.14);
            -webkit-backdrop-filter: brightness(1.26) saturate(1.14);
            background: linear-gradient(177deg,
                rgba(255, 255, 255, 0.24) 0%,
                rgba(255, 255, 255, 0.04) 24%,
                rgba(255, 255, 255, 0.02) 60%,
                rgba(255, 255, 255, 0.17) 100%);
        }
        .android-download:hover, .android-download:focus-visible {
            background: rgba(0, 113, 227, 0.16);
            outline: none; transform: translateY(-1px);
        }
        /* Logo platform 3D: render dari model 3D milik pemilik (Blender, sumber dan skripnya di
           design/logo-platform-3d/). PNG 192 px ditampilkan 32 px supaya tajam di layar
           berkerapatan tinggi. Sudut tiga perempat sudah ada di rendernya, jadi CSS tidak
           memiringkan lagi. Nama berkas bernomor versi: ganti gambar = naikkan nomornya, supaya
           cache tepi Cloudflare tidak menyajikan gambar lama. */
        /* Lambang platform: datar, tanpa bayangan dan tanpa render 3D. Ukurannya dikunci 32px
           supaya tinggi kartu tidak berubah dari susunan sebelumnya. */
        .android-download > .app-logo-3d {
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
            flex: 0 0 32px;
            transition: transform .2s ease;
        }
        .android-download > .app-logo-3d.ph-android-logo { font-size: 28px; color: #3DDC84; }
        .android-download > .app-logo-3d > svg { width: 26px; height: 26px; display: block; }
        .android-download:hover > .app-logo-3d, .android-download:focus-visible > .app-logo-3d {
            transform: scale(1.08);
        }
        @media (prefers-reduced-motion: reduce) {
            .android-download > .app-logo-3d { transition: none; }
        }
        .android-download-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
        .android-download-copy strong { font-size: 12px; font-weight: 750; }
        .android-download-copy small { margin-top: 3px; color: var(--text-muted); font-size: 9px; font-weight: 600; }
        .android-download > .ph-download-simple { color: var(--apple-blue); font-size: 15px; }
        .login-box { flex: 1; padding: 32px 24px; border-radius: 16px; width: 100%; max-width: 360px; margin: 0 auto; }
        /* ---- Kartu masuk: liquid glass ----
           Teknik yang sama dipakai rdev/liquid-glass-react (MIT): latar di BELAKANG kartu
           dibengkokkan oleh filter SVG displacement, sementara isi kartu tetap tajam karena
           berada di lapisan lain di atasnya. Ditulis ulang sebagai CSS+SVG biasa - halaman ini
           bukan React - jadi tidak ada kode yang disalin, hanya caranya.

           Yang SENGAJA tidak diikutkan: chromatic aberration (tiga displacement dengan skala
           sedikit berbeda lalu digabung mode screen). Ia bagian paling halus dan paling mahal;
           di kartu sekecil ini nyaris tak terlihat sementara jumlah node filternya tiga kali.
           Kalau nanti diminta, tambahnya di filter yang sama tanpa mengubah CSS ini. */
        [data-theme="dark"] .login-box.glass {
            background: rgba(0, 0, 0, 0.26);
            box-shadow: inset 0 0 10px -4px rgba(255, 255, 255, 0.12),
                        inset 0 0 26px -10px rgba(255, 255, 255, 0.16);
        }
        /* Lapisan yang dibengkokkan. z-index negatif + `isolation: isolate` pada induknya
           membuat backdrop-filter mengambil apa yang ada di belakang KARTU, bukan isi kartu. */
        /* TEPI KACA BENING.
           Tiga percobaan sebelumnya meleset berturut-turut: cincin rata 3px (terbaca sebagai
           garis di-stroke), pita 3px + peluruhan 18px (terbaca sebagai gradasi yang diakali),
           lalu cincin tipis putih 1.5px - lebih dekat, tetapi kata pemiliknya masih "sharp" dan
           "jadi warna putih, bukan seakan-akan bening".

           Dua sebabnya, dan dua-duanya soal BAHAN, bukan ukuran:

           1. Garisnya tajam. Pinggir kaca tidak punya batas sekeras itu - cahaya di bidang
              potongnya meluruh sedikit. Diselesaikan dengan blur 0.7px pada cincinnya sendiri:
              cukup untuk menghilangkan kesan garis vektor, tidak sampai jadi kabut.
           2. Putihnya CAT, bukan kaca. Sumber terang pada kaca bening bukan pigmen putih -
              melainkan latar di belakangnya yang dipusatkan dan dicerahkan. Karena itu alfa
              putihnya diturunkan hampir setengah, dan kecerahannya kini datang dari
              `backdrop-filter` pada cincin itu: yang menyala adalah apa pun yang ada di
              belakangnya, jadi warnanya ikut latar - bukan abu-abu putih yang sama di mana pun.

           Gradien vertikalnya tetap: terang di tepi atas tempat cahaya jatuh, nyaris hilang di
           kiri-kanan, menyala lagi di bawah tetapi lebih lemah. */
        [data-theme="dark"] .login-box.glass::after {
            backdrop-filter: brightness(1.26) saturate(1.14);
            -webkit-backdrop-filter: brightness(1.26) saturate(1.14);
            background: linear-gradient(177deg,
                rgba(255, 255, 255, 0.24) 0%,
                rgba(255, 255, 255, 0.14) 5%,
                rgba(255, 255, 255, 0.04) 18%,
                rgba(255, 255, 255, 0.02) 45%,
                rgba(255, 255, 255, 0.03) 64%,
                rgba(255, 255, 255, 0.07) 88%,
                rgba(255, 255, 255, 0.17) 100%);
        }
        /* Peramban yang tidak punya backdrop-filter tidak boleh kebagian panel bening tanpa
           blur - tulisannya akan menumpuk di atas awan. Kembalikan ke panel padat. */
        .a-input {
            width: 100%; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 10px;
            font-size: 14px; background: var(--input-bg); color: var(--text-color); margin-bottom: 14px;
            outline: none; transition: all 0.2s; font-family: inherit;
        }
        .a-input::placeholder { color: var(--text-muted); }
        .a-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); }
        .a-btn {
            width: 100%; padding: 12px 16px; background: var(--apple-blue); color: white;
            border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
            transition: background 0.2s; font-family: inherit; display: flex; justify-content: center;
            align-items: center; gap: 8px;
        }
        .a-btn:hover { background: var(--apple-blue-hover); }
        /* Tautan lupa sandi dan keterangannya. Dibuat tenang - ia jalan keluar saat ada yang
           salah, bukan ajakan. */
        .login-extra { margin-top: 14px; text-align: center; }
        .login-extra a {
            font-size: 12px; color: var(--text-muted); text-decoration: none;
            border-bottom: 1px solid transparent;
        }
        .login-extra a:hover { color: var(--apple-blue); border-bottom-color: currentColor; }
        .login-note {
            margin-bottom: 16px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px;
            line-height: 1.5; text-align: center; background: rgba(0, 113, 227, 0.09);
            border: 1px solid rgba(0, 113, 227, 0.22); color: var(--text-color);
        }
        .alert-error {
            padding: 12px 14px; border-radius: 10px; background: rgba(255, 59, 48, 0.1);
            border: 1px solid rgba(255, 59, 48, 0.2); color: var(--apple-danger); font-size: 13px;
            font-weight: 500; margin-bottom: 16px; text-align: center;
        }
        .login-footer {
            position: fixed; bottom: 0; left: 0; right: 0; padding: 3px clamp(16px, 4vw, 24px);
            display: flex; justify-content: space-between; align-items: center;
            /* Bahan yang sama dengan kartu masuk. Bedanya cuma bentuk: footer menempel di dasar
               layar, jadi satu-satunya tepi yang benar-benar terlihat adalah sisi ATAS - di situ
               saja garis cahayanya dipasang. Cincin mengelilingi di sini justru salah: tiga
               sisinya berada di luar layar. */
            background: rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(14px) saturate(128%); -webkit-backdrop-filter: blur(14px) saturate(128%);
            border-top: 1px solid rgba(255, 255, 255, 0.28);
            box-shadow: inset 0 6px 14px -10px rgba(255, 255, 255, 0.30);
            min-height: 35px; box-sizing: border-box; font-size: 10px; color: var(--text-muted);
            z-index: 100; font-weight: 500; gap: 10px;
        }
        [data-theme="dark"] .login-footer {
            background: rgba(0, 0, 0, 0.26);
            border-top-color: rgba(255, 255, 255, 0.16);
            box-shadow: inset 0 6px 14px -10px rgba(255, 255, 255, 0.20);
        }
        .login-footer > [data-i18n="ft_copy"] { min-width: 0; padding-right: 108px; }
        .footer-controls {
            position: absolute; top: 50%; right: clamp(16px, 4vw, 24px); transform: translateY(-50%);
            display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex: 0 0 auto;
        }
        .footer-downloads {
            position: absolute; top: 50%; right: calc(clamp(16px, 4vw, 24px) + 40px);
            transform: translateY(-50%); display: flex; align-items: center; gap: 3px;
        }
        .footer-downloads a {
            display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
            padding: 4px 6px; border-radius: 6px; color: var(--text-color);
            font-size: 10px; font-weight: 600; text-decoration: none; white-space: nowrap;
        }
        .footer-downloads a:hover, .footer-downloads a:focus-visible { background: rgba(120, 120, 128, 0.12); }
        .footer-downloads .ph-android-logo { color: #3DDC84; font-size: 15px; }
        .footer-downloads svg { width: 14px; height: 14px; }
        .footer-controls .lang-btn {
            min-height: 28px; padding: 4px; background: transparent !important;
            box-shadow: none !important; border-radius: 6px;
        }
        .footer-controls .lang-btn:hover, .footer-controls .lang-btn.active {
            background: rgba(120,120,128,0.12) !important; box-shadow: none !important;
        }
        .footer-controls .lang-menu {
            top: auto; bottom: calc(100% + 12px); transform: translateY(10px) scale(0.95);
        }
        .footer-controls .lang-menu.active { transform: translateY(0) scale(1); }
        @media (max-width: 900px) {
            .login-split { flex-direction: column; text-align: center; gap: 30px; }
            .promo-logo { margin: 0 auto 16px auto; display: block; }
            .promo-downloads { justify-content: center; }
            .login-footer.with-downloads .copyright-note:not([hidden]) {
                position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px;
                padding: 8px 10px; border-radius: 8px; background: var(--menu-bg);
                color: var(--text-color); font-size: 10px; line-height: 1.4; text-align: left;
            }
        }
        @media (max-width: 600px) {
            #login-three-scene canvas { opacity: 0.78; }
            [data-theme="dark"] #login-three-scene canvas { opacity: 0.82; }
            .login-wrapper { padding: 24px 16px 54px 16px; }
            .promo-title { font-size: 28px; }
            .promo-subtitle { font-size: 14px; margin-bottom: 18px; }
            .login-box { padding: 24px 18px; }
            .login-footer { flex-direction: row; justify-content: space-between; gap: 6px; padding: 3px 8px; text-align: left; font-size: 8px; }
            .footer-controls { right: 8px; }
            .login-footer.with-downloads .footer-downloads {
                top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
                gap: clamp(4px, 2vw, 8px); max-width: calc(100% - 96px);
            }
        }
        @media (max-height: 700px) {
            .login-wrapper { padding-top: 56px; padding-bottom: 60px; }
            .promo-logo { height: 34px; margin-bottom: 14px; }
            .promo-title { font-size: 28px; }
            .promo-subtitle { margin: 8px 0 16px 0; }
            .login-box { padding: 24px 20px; }
        }
        body.native-mobile-login .login-footer { display: none; }
        body.native-mobile-login .login-wrapper {
            height: 100dvh; min-height: 100dvh;
            padding: max(28px, env(safe-area-inset-top)) 24px
                     max(28px, env(safe-area-inset-bottom));
        }
        body.native-mobile-login .login-split {
            width: 100%; max-width: 420px; flex-direction: column;
            align-items: stretch; gap: 30px; text-align: left;
        }
        body.native-mobile-login .promo-section { flex: 0 0 auto; }
        body.native-mobile-login .promo-logo {
            display: block; height: 34px; margin: 0 0 22px;
        }
        body.native-mobile-login .promo-title {
            max-width: 330px; font-size: 30px; line-height: 1.15; letter-spacing: 0;
        }
        body.native-mobile-login .promo-subtitle {
            max-width: 330px; margin: 10px 0 0; font-size: 14px; line-height: 1.45;
        }
        body.native-mobile-login .promo-downloads { justify-content: flex-start; margin-top: 14px; }
        body.native-mobile-login .login-box.glass {
            flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding: 0;
            border: 0; border-radius: 0; background: transparent;
            box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
        }
        /* Di dalam aplikasi Android, kartunya memang datar menyatu dengan halaman - tidak ada
           kartu yang perlu terlihat sebagai kaca. Lapisan pembengkok dimatikan supaya tidak
           membakar GPU ponsel untuk efek yang tidak terlihat. */
        body.native-mobile-login .login-box.glass::before,
        body.native-mobile-login .login-box.glass::after { display: none; }
        body.native-mobile-login .a-input,
        body.native-mobile-login .a-btn { min-height: 50px; border-radius: 8px; }
        body.native-mobile-login .a-input { margin-bottom: 12px; font-size: 16px; }
        body.native-mobile-login .a-btn { font-size: 15px; }
        @media (max-height: 620px) {
            body.native-mobile-login .login-wrapper { align-items: flex-start; overflow-y: auto; }
            body.native-mobile-login .login-split { gap: 22px; margin: auto 0; }
            body.native-mobile-login .promo-logo { margin-bottom: 14px; }
            body.native-mobile-login .promo-title { font-size: 27px; }
        }

.login-message {
    min-height: 18px; text-align: center; margin-top: 12px;
    color: var(--text-muted); font-size: 12px;
}
.login-message:empty { display: none; }
.login-message.error { color: var(--apple-danger); }
.promo-fallback {
    display: inline-block; font-size: 40px; color: var(--text-color);
    margin-bottom: 16px;
}
body.pay-portal-login,
body.pay-portal-login .login-wrapper { background: #006eff !important; }
body.pay-portal-login .promo-title,
body.pay-portal-login .login-footer { color: #fff; letter-spacing: 0; }
body.pay-portal-login .promo-logo.pay-logo { filter: brightness(0) invert(1); }
body.pay-portal-login .login-box { letter-spacing: 0; }
body.voucher-login .login-split {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; max-width: 460px;
}
body.voucher-login .promo-section {
  flex: 0 0 auto; width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
body.voucher-login .promo-logo { height: 48px; margin: 0; }
body.voucher-login .promo-title {
  font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.3;
  text-align: center; color: var(--text-muted);
}
body.voucher-login .login-box.glass { max-width: 460px; width: 100%; }
/* Domain content only. Chrome and controls come from the generated Admin source. */
html, body, #root { min-width: 0; margin: 0; }
.receipt-workspace #root { height: 100dvh; }
.receipt-workspace .receipt-help-content { padding: 16px; min-width: 0; }
.receipt-help-content p { font-size: 13px; line-height: 1.5; color: var(--coda-text-secondary); overflow-wrap: anywhere; }
.receipt-help-content h3 { font-size: 13px; }
.receipt-help-content ul { list-style: none; margin: 0; padding: 0; }
.receipt-help-content li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.receipt-help-content .coda-sb-ico { flex: 0 0 32px; }
.receipt-help-content h3 { margin: 0; }
.receipt-help-content li p { margin: 4px 0 0; }
.receipt-workspace .isi { min-width: 0; }
@media print {
  .receipt-workspace #workspaceCloudBackdrop,
  .receipt-workspace #adminSidebar,
  .receipt-workspace #detailSection,
  .receipt-workspace .coda-sidebar-scrim,
  .receipt-workspace .coda-form-head,
  .receipt-workspace .coda-mobile-sheet-head,
  .receipt-workspace #mobileFormDragHandle,
  .receipt-workspace #mobileFormOverlay,
  .receipt-workspace .coda-portal-mobile-head,
  .receipt-workspace .coda-portal-panel-scrim { display: none !important; }
  .receipt-workspace, .receipt-workspace #root,
  .receipt-workspace #buatLayout, .receipt-workspace #formPanel,
  .receipt-workspace .coda-form-panel-inner,
  .receipt-workspace #formContentArea,
  .receipt-workspace #mobileFormSheet,
  .receipt-workspace #mobileFormSheet #mobileFormContentArea {
    display: block !important; position: static !important; width: 100% !important;
    height: auto !important; min-height: 0 !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; background: #fff !important;
    transform: none !important; max-height: none !important;
  }
}