/* =============================================================================
   masuk.css — SATU LAYAR MASUK UNTUK SEMUA PERAN
   "Premium Islamic Boarding School Digital Portal"
   Bahasa visual sama dengan Kartu Digital v14: navy, zamrud, emas, gading.
   Prinsip: kemewahan lewat pengekangan — jarak, tipografi, kedalaman,
   cahaya, dan gerak yang sangat pelan. Semua animasi hanya transform/opacity.
   ========================================================================== */

/* Layar baru menutup seluruh layar masuk — tanpa bingkai sisa latar lama. */
#login-screen.v14l-aktif { padding: 0 !important; background: #050F1F !important; }
#v14l-slot *, #v14l-slot *::before, #v14l-slot *::after { box-sizing: border-box; }
.v14l { display: none; }
#login-screen.v14l-aktif > .v14l {
    display: block;
    /* Menutup seluruh layar, terlepas dari padding/bingkai induk yang lama. */
    position: fixed; inset: 0; z-index: 5;
}

.v14l {
    --l-navy-0: #050F1F; --l-navy: #071426; --l-navy-2: #0B1B32; --l-midnight: #102544;
    --l-emerald: #0F6B55; --l-gold: #D4AF37; --l-gold-soft: #E6C766;
    --l-ivory: #F8F5EA; --l-muted: #AEB8C7; --l-line: rgba(255, 255, 255, .10);
    --l-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative; flex: 1 1 auto; width: 100%;
    min-height: 100vh; min-height: 100dvh; overflow: hidden auto;
    color: var(--l-ivory);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: linear-gradient(160deg, var(--l-navy-0) 0%, var(--l-navy) 45%, var(--l-navy-2) 100%);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- latar hidup */
.v14l-latar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.v14l-aurora i {
    position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; opacity: .9;
}
.v14l-aurora i:nth-child(1) { width: 58vmax; height: 58vmax; left: -18vmax; top: -16vmax;
    background: radial-gradient(circle, rgba(15, 107, 85, .34), transparent 62%); animation: v14l-apung-1 26s var(--l-ease) infinite alternate; }
.v14l-aurora i:nth-child(2) { width: 50vmax; height: 50vmax; right: -16vmax; bottom: -18vmax;
    background: radial-gradient(circle, rgba(212, 175, 55, .14), transparent 60%); animation: v14l-apung-2 32s var(--l-ease) infinite alternate; }
.v14l-aurora i:nth-child(3) { width: 42vmax; height: 42vmax; left: 38%; top: 20%;
    background: radial-gradient(circle, rgba(37, 99, 235, .12), transparent 62%); animation: v14l-apung-3 38s var(--l-ease) infinite alternate; }

/* Geometri bintang delapan, berputar sangat pelan — terasa bila diperhatikan. */
.v14l-geo {
    position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
    opacity: .032; will-change: transform;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='.8'%3E%3Crect x='23.4' y='23.4' width='33.2' height='33.2'/%3E%3Crect x='23.4' y='23.4' width='33.2' height='33.2' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cpath d='M0 40h11M69 40h11M40 0v11M40 69v11'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: v14l-putar 140s linear infinite;
}
.v14l-geo--2 { opacity: .018; background-size: 260px 260px; animation: v14l-putar 220s linear infinite reverse; }
.v14l-berkas {
    position: absolute; inset: -20%;
    background:
        radial-gradient(circle at 20% 30%, rgba(16, 107, 85, .20), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, .10), transparent 30%);
    animation: v14l-berkas 30s ease-in-out infinite alternate;
}
.v14l-partikel span {
    position: absolute; bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
    animation: v14l-naik var(--d) linear var(--t) infinite; will-change: transform, opacity;
}
.v14l-partikel .is-emas { background: var(--l-gold-soft); box-shadow: 0 0 8px rgba(230, 199, 102, .8); }
.v14l-partikel .is-zamrud { background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, .7); }

/* ------------------------------------------------------------- tata letak */
.v14l-wadah {
    position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center;
    gap: 22px; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
    .v14l-wadah { grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr); align-items: center;
        justify-items: stretch; gap: 72px; padding: 56px 64px; }
}

/* ------------------------------------------------------------- merek */
.v14l-merek { text-align: center; max-width: 440px; }
@media (min-width: 1024px) { .v14l-merek { text-align: left; max-width: none; } }
.v14l-lambang {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--l-ivory);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .85), 0 0 0 7px rgba(212, 175, 55, .12), 0 0 44px rgba(212, 175, 55, .28);
}
@media (min-width: 1024px) { .v14l-lambang { width: 84px; height: 84px; margin: 0 0 26px; } }
.v14l-lambang img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.v14l-lambang span { font-weight: 800; font-size: 26px; color: var(--l-navy); }
.v14l-kicker {
    display: none; align-items: center; gap: 10px; margin: 0 0 14px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--l-gold-soft);
}
.v14l-kicker span { width: 16px; height: 16px; color: var(--l-gold); display: inline-flex; }
.v14l-kicker svg { width: 100%; height: 100%; }
@media (min-width: 1024px) { .v14l-kicker { display: flex; } }
.v14l-nama {
    margin: 0; font-size: clamp(22px, 5.6vw, 30px); font-weight: 800; line-height: 1.12;
    letter-spacing: .01em; color: var(--l-ivory); text-wrap: balance;
}
@media (min-width: 1024px) { .v14l-nama { font-size: clamp(36px, 3.6vw, 50px); letter-spacing: -.01em; } }
.v14l-wilayah {
    margin: 8px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    color: var(--l-gold-soft);
}
@media (min-width: 1024px) { .v14l-wilayah { font-size: 16px; margin-top: 14px; } }
.v14l-sistem { margin: 6px 0 0; font-size: 13px; color: var(--l-muted); }
@media (min-width: 1024px) { .v14l-sistem { font-size: 16px; margin-top: 10px; } }
.v14l-fitur { display: none; list-style: none; margin: 34px 0 0; padding: 0; }
@media (min-width: 1024px) { .v14l-fitur { display: grid; gap: 14px; } }
.v14l-fitur li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #D6DEEA; }
.v14l-fitur li span { color: var(--l-gold); font-size: 13px; }

/* ------------------------------------------------------------- kartu kaca */
.v14l-kartu {
    position: relative; width: 100%; max-width: 440px; justify-self: center;
    padding: 26px 22px 20px; border-radius: 24px;
    background: linear-gradient(165deg, rgba(22, 38, 66, .78), rgba(9, 18, 34, .84));
    border: 1px solid var(--l-line);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    overflow: hidden;
}
@media (min-width: 640px) { .v14l-kartu { padding: 36px 34px 26px; } }
.v14l-kartu::before {                      /* garis emas halus di tepi atas */
    content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .75), transparent);
}
.v14l-kartu-kilau {                        /* cahaya bergerak saat memverifikasi */
    position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--l-gold-soft), #34D399, transparent);
    transform: translateX(-100%);
}
.v14l-kartu.is-memuat .v14l-kartu-kilau { opacity: 1; animation: v14l-proses 1.2s ease-in-out infinite; }
.v14l-judul { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--l-ivory); }
.v14l-sub { margin: 6px 0 0; font-size: 14px; color: var(--l-muted); }
.v14l-catatan {
    display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px; line-height: 1.55; color: #9AA9BF;
}
.v14l-catatan i { color: var(--l-gold); margin-top: 2px; }

/* Tautan portal ujian santri (Smart Vocab Exam) */
.v14l-ujian {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
    border-radius: 14px; text-decoration: none; color: var(--l-ivory);
    background: rgba(212, 175, 55, .07); border: 1px solid rgba(212, 175, 55, .26);
    transition: background .2s var(--l-ease), border-color .2s var(--l-ease), transform .2s var(--l-ease);
}
.v14l-ujian:hover { background: rgba(212, 175, 55, .13); border-color: rgba(212, 175, 55, .45); }
.v14l-ujian:active { transform: scale(.985); }
.v14l-ujian:focus-visible { outline: 2px solid var(--l-gold-soft); outline-offset: 2px; }
.v14l-ujian-ikon {
    flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(212, 175, 55, .16); color: var(--l-gold-soft); font-size: 15px;
}
.v14l-ujian-teks { flex: 1; min-width: 0; display: grid; gap: 2px; }
.v14l-ujian-teks b { font-size: 13.5px; font-weight: 700; }
.v14l-ujian-teks small { font-size: 11.5px; color: #9AA9BF; line-height: 1.4; }
.v14l-ujian-panah { flex: none; color: var(--l-gold-soft); font-size: 13px; }

/* ------------------------------------------------------------- form asli */
#v14l-slot #login-form { margin-top: 22px !important; }
#v14l-slot #login-form > * + * { margin-top: 16px; }
#v14l-slot label { color: #D6DEEA !important; font-size: 13px !important; font-weight: 600 !important; }
#v14l-slot .login-input-wrap { position: relative; }
#v14l-slot input[type="text"],
#v14l-slot input[type="password"],
#v14l-slot input[type="email"] {
    width: 100%; height: 54px !important; border-radius: 14px !important;
    box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important;
    background: rgba(255, 255, 255, .05) !important; color: var(--l-ivory) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important; box-shadow: none !important;
    font-size: 15px !important; transition: border-color .25s var(--l-ease), box-shadow .25s var(--l-ease), background .25s;
}
#v14l-slot input::placeholder { color: #7F8EA5 !important; }
#v14l-slot input[type="text"]:focus,
#v14l-slot input[type="password"]:focus,
#v14l-slot input[type="email"]:focus {
    outline: none !important; background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(212, 175, 55, .65) !important; box-shadow: 0 0 0 3px rgba(212, 175, 55, .08) !important;
}
#v14l-slot .login-field-icon { color: #8B9AB0 !important; transition: color .25s; }
#v14l-slot .login-input-wrap:focus-within .login-field-icon { color: var(--l-gold-soft) !important; }
#v14l-slot #toggle-password { color: #8B9AB0 !important; border-radius: 10px; }
#v14l-slot #toggle-password:hover { color: var(--l-ivory) !important; }
#v14l-slot button[type="button"]:not(#toggle-password) { color: var(--l-gold-soft) !important; }
#v14l-slot input[type="checkbox"] { accent-color: var(--l-gold); }
#v14l-slot #btn-login {
    width: 100%; height: 54px !important; border-radius: 14px !important; border: 0 !important;
    background: linear-gradient(135deg, #D4AF37, #E6C766) !important; color: #1B1405 !important;
    font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em;
    box-shadow: 0 14px 34px -16px rgba(212, 175, 55, .85) !important;
    transition: transform .25s var(--l-ease), box-shadow .25s var(--l-ease), filter .25s;
}
#v14l-slot #btn-login:hover:not(:disabled) {
    transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 18px 40px -14px rgba(212, 175, 55, .95), 0 0 0 1px rgba(255, 236, 190, .25) !important;
}
#v14l-slot #btn-login:disabled { cursor: progress; filter: saturate(.85); opacity: .92; }
#v14l-slot #login-form :focus-visible { outline: 2px solid var(--l-gold-soft) !important; outline-offset: 2px; }
#v14l-slot #login-error-slot:not(:empty) {
    padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5;
    background: rgba(248, 113, 113, .09); border: 1px solid rgba(248, 113, 113, .32); color: #FECACA;
}
#v14l-slot #login-error-slot * { color: inherit !important; background: transparent !important; border: 0 !important; }
#v14l-slot .login-error-msg { display: flex; gap: 10px; align-items: flex-start; }

/* Tata letak form berdiri sendiri: tidak bergantung pada kelas utilitas
   Tailwind milik form asli, sehingga tampil sama walau CDN-nya lambat/gagal. */
#v14l-slot label[for="username"], #v14l-slot label[for="password"] { display: block; margin: 0 0 8px; }
#v14l-slot input[type="text"], #v14l-slot input[type="password"] { padding-left: 46px !important; padding-right: 50px !important; }
#v14l-slot .login-field-icon {
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    font-size: 14px; pointer-events: none; line-height: 1;
}
#v14l-slot #username-check {
    position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
    color: #34D399; opacity: 0; pointer-events: none; transition: opacity .2s;
}
#v14l-slot #username-check.opacity-100 { opacity: 1; }
#v14l-slot #toggle-password {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#v14l-slot #toggle-password:hover { background: rgba(255, 255, 255, .06); }
#v14l-slot #toggle-password svg { width: 18px; height: 18px; }
#v14l-slot #toggle-password .hidden { display: none !important; }
#v14l-slot #login-form > div:has(> label[for="remember-me"]) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#v14l-slot label[for="remember-me"] { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
#v14l-slot label[for="remember-me"] > span:first-child {
    position: relative; flex: none; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center;
}
#v14l-slot #remember-me { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#v14l-slot #remember-me + span {
    position: absolute; inset: 0; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); transition: background .2s, border-color .2s;
}
#v14l-slot #remember-me:checked + span { background: var(--l-gold); border-color: var(--l-gold); }
#v14l-slot #remember-me:focus-visible + span { box-shadow: 0 0 0 3px rgba(212, 175, 55, .3); }
#v14l-slot #remember-me ~ i { position: absolute; font-size: 10px; color: #1B1405; opacity: 0; pointer-events: none; }
#v14l-slot #remember-me:checked ~ i { opacity: 1; }
#v14l-slot label[for="remember-me"] > span:last-child { font-size: 12.5px; color: #B9C4D4 !important; }
#v14l-slot button[onclick*="openForgotPasswordModal"] {
    background: transparent !important; border: 0 !important; padding: 4px 2px !important; cursor: pointer;
    font-size: 12.5px !important; font-weight: 700 !important;
}
#v14l-slot button[onclick*="openForgotPasswordModal"]:hover { text-decoration: underline; text-underline-offset: 3px; }
#v14l-slot #btn-login { display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }

/* ------------------------------------------------------------- gerak masuk */
/* Latar -> lambang -> merek -> kartu -> isi form bergiliran (~1,1 detik). */
.v14l .v14l-latar, .v14l .v14l-lambang, .v14l .v14l-merek > p, .v14l .v14l-fitur,
.v14l .v14l-kartu, .v14l #v14l-slot #login-form > *, .v14l .v14l-judul, .v14l .v14l-sub { opacity: 0; }
.v14l.v14l-mulai .v14l-latar { animation: v14l-pudar .5s ease both; }
.v14l.v14l-mulai .v14l-lambang { animation: v14l-skala .7s var(--l-ease) .12s both; }
.v14l.v14l-mulai .v14l-merek > p { animation: v14l-naik-sedikit .7s var(--l-ease) .26s both; }
.v14l.v14l-mulai .v14l-fitur { animation: v14l-naik-sedikit .7s var(--l-ease) .4s both; }
.v14l.v14l-mulai .v14l-kartu { animation: v14l-geser-atas .8s var(--l-ease) .34s both; }
.v14l.v14l-mulai .v14l-judul { animation: v14l-naik-sedikit .6s var(--l-ease) .5s both; }
.v14l.v14l-mulai .v14l-sub { animation: v14l-naik-sedikit .6s var(--l-ease) .56s both; }
.v14l.v14l-mulai #v14l-slot #login-form > * { animation: v14l-naik-sedikit .6s var(--l-ease) both; }
.v14l.v14l-mulai #v14l-slot #login-form > *:nth-child(1) { animation-delay: .62s; }
.v14l.v14l-mulai #v14l-slot #login-form > *:nth-child(2) { animation-delay: .68s; }
.v14l.v14l-mulai #v14l-slot #login-form > *:nth-child(3) { animation-delay: .74s; }
.v14l.v14l-mulai #v14l-slot #login-form > *:nth-child(n+4) { animation-delay: .8s; }

@keyframes v14l-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes v14l-skala { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes v14l-naik-sedikit { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v14l-geser-atas { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes v14l-putar { to { transform: rotate(360deg); } }
@keyframes v14l-apung-1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes v14l-apung-2 { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }
@keyframes v14l-apung-3 { to { transform: translate(-6vmax, 7vmax) scale(.92); } }
@keyframes v14l-berkas { to { transform: translate(4%, -3%); } }
@keyframes v14l-naik {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: .5; }
    85% { opacity: .4; }
    100% { opacity: 0; transform: translate(var(--x), -105vh); }
}
@keyframes v14l-proses { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Ponsel: latar lebih ringan (separuh partikel, tanpa lapisan geometri kedua). */
@media (max-width: 640px) {
    .v14l-partikel span:nth-child(2n) { display: none; }
    .v14l-geo--2 { display: none; }
    .v14l-aurora i { filter: blur(50px); }
}

@media (prefers-reduced-motion: reduce) {
    .v14l *, .v14l *::before, .v14l *::after { animation: none !important; transition: none !important; }
    .v14l .v14l-latar, .v14l .v14l-lambang, .v14l .v14l-merek > p, .v14l .v14l-fitur, .v14l .v14l-kartu,
    .v14l #v14l-slot #login-form > *, .v14l .v14l-judul, .v14l .v14l-sub { opacity: 1 !important; transform: none !important; }
    .v14l-partikel { display: none; }
}

/* Isian otomatis peramban (sandi tersimpan) tidak boleh memutihkan kolom gelap. */
#v14-login #login-form input:-webkit-autofill,
#v14-login #login-form input:-webkit-autofill:hover,
#v14-login #login-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F8F5EA !important;
    -webkit-box-shadow: 0 0 0 1000px #13223c inset !important;
    caret-color: #F8F5EA;
    transition: background-color 99999s ease-out 0s;
}
/* Layar masuk tidak pernah ikut tercetak. */
@media print { .v14l { display: none !important; } }

/* Ukuran kotak ditetapkan sendiri, tidak bergantung pada Tailwind dari CDN.
   Tanpa ini, kartu (lebar 100% + padding) melebar 14px melewati layar ponsel
   bila Tailwind belum/tidak termuat — terukur di Chrome: 404px pada layar 390px. */
.v14l, .v14l *, .v14l *::before, .v14l *::after { box-sizing: border-box; }

/* Pola bintang di latar: cukup terasa bila diperhatikan, tidak lebih. */
.v14l-geo { opacity: .032; }
.v14l-geo.v14l-geo--2 { opacity: .016; }

/* ------------------------------------------------------------ instalasi pertama */
.v14l-setup { margin-top: 22px; display: grid; gap: 14px; }
.v14l-kolom label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #E2E8F0; }
.v14l-kolom input {
    display: block; width: 100%; height: 50px; padding: 0 16px; border-radius: 14px;
    font: 500 15px/1.2 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: #F8F5EA;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.v14l-kolom input:focus { border-color: rgba(212, 175, 55, .65); box-shadow: 0 0 0 3px rgba(212, 175, 55, .1); }
.v14l-bantu { margin: 6px 0 0 !important; font-size: 11.5px; line-height: 1.5; color: #8FA0B8; }
.v14l-setup code, .v14l-pesan code { font-size: .92em; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: #E6C766; }
.v14l-pesan { padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.v14l-pesan.is-galat { color: #FECACA; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); }
.v14l-pesan.is-berhasil { color: #A7F3D0; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }
.v14l-tombol {
    width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer;
    font: 700 15px/1 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: #1B1405;
    background: linear-gradient(135deg, #D4AF37, #E6C766); box-shadow: 0 12px 30px -12px rgba(212, 175, 55, .7);
}
.v14l-tombol:disabled { cursor: progress; filter: saturate(.85); }
.v14l-tombol:focus-visible { outline: 2px solid #F8F5EA; outline-offset: 3px; }