/* ==========================================================
   DRAGONCALLER LOGIN — HUT RI KE-81
   Visual overlay only. Tidak mengubah proses login.
========================================================== */

html.hutri81-login,
html.hutri81-login body {
    --ri-red: #e10619;
    --ri-red-dark: #73000b;
    --ri-red-deep: #260005;
    --ri-white: #fffaf7;
    --ri-gold: #f4ce73;
    --ri-gold-bright: #ffe8a6;
    --ri-line: rgba(244, 206, 115, .36);
    --ri-glass: rgba(24, 2, 5, .78);
    --ri-text: #fffaf7;
    --ri-muted: rgba(255, 250, 247, .7);
}

html.hutri81-login body {
    color: var(--ri-text) !important;
    background:
        radial-gradient(circle at 12% 16%,
            rgba(255, 40, 58, .32), transparent 27%),
        radial-gradient(circle at 88% 18%,
            rgba(244, 206, 115, .18), transparent 30%),
        radial-gradient(circle at 50% 110%,
            rgba(225, 6, 25, .30), transparent 42%),
        linear-gradient(145deg,
            #090001 0%,
            #1d0004 37%,
            #440009 68%,
            #120002 100%) !important;
}

html.hutri81-login body::before {
    background:
        linear-gradient(
            118deg,
            transparent 0 34%,
            rgba(255, 255, 255, .045) 34% 35%,
            transparent 35% 43%,
            rgba(225, 6, 25, .10) 43% 44%,
            transparent 44% 100%
        ),
        radial-gradient(circle at 18% 14%,
            rgba(255, 255, 255, .09), transparent 32%),
        radial-gradient(circle at 83% 78%,
            rgba(244, 206, 115, .08), transparent 36%) !important;
    background-size: 180% 180%, auto, auto !important;
    animation: hutriLoginAura 16s ease-in-out infinite alternate;
}

html.hutri81-login body::after {
    content: "";
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            #e10619 0 50%,
            #fff 50% 100%
        );
    box-shadow:
        0 -10px 40px rgba(225, 6, 25, .28),
        0 -3px 18px rgba(255, 255, 255, .12);
}

html.hutri81-login .global-holo {
    opacity: .38 !important;
    filter: hue-rotate(320deg) saturate(1.4) !important;
}

html.hutri81-login .luxury-silhouette {
    opacity: .34 !important;
    filter: hue-rotate(320deg) saturate(1.4) !important;
}

html.hutri81-login .dragon-aura {
    filter:
        hue-rotate(320deg)
        saturate(1.7)
        drop-shadow(0 0 30px rgba(225, 6, 25, .34)) !important;
}

html.hutri81-login .orb {
    opacity: .5 !important;
    filter: hue-rotate(330deg) saturate(1.5) !important;
}

html.hutri81-login .spark,
html.hutri81-login .dust {
    background: rgba(255, 255, 255, .76) !important;
    box-shadow:
        0 0 8px rgba(255, 255, 255, .65),
        0 0 15px rgba(225, 6, 25, .45) !important;
}

html.hutri81-login .dust.teal {
    background: var(--ri-gold) !important;
    box-shadow:
        0 0 8px rgba(244, 206, 115, .72),
        0 0 16px rgba(225, 6, 25, .34) !important;
}

html.hutri81-login .luxury-badge {
    color: var(--ri-white) !important;
    border-color: var(--ri-line) !important;
    background:
        linear-gradient(
            135deg,
            rgba(225, 6, 25, .72),
            rgba(72, 0, 8, .84)
        ) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 26px rgba(225, 6, 25, .18) !important;
}

html.hutri81-login .luxury-badge .dot {
    background: #fff !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .10),
        0 0 14px rgba(255, 255, 255, .7) !important;
}

html.hutri81-login .luxury-badge .year {
    color: var(--ri-gold-bright) !important;
}

html.hutri81-login .luxury-icon,
html.hutri81-login .brand-title i {
    color: var(--ri-gold-bright) !important;
    text-shadow:
        0 0 14px rgba(244, 206, 115, .46),
        0 0 28px rgba(225, 6, 25, .30) !important;
}

html.hutri81-login .luxury-text .t1,
html.hutri81-login .brand-title {
    color: var(--ri-white) !important;
    text-shadow:
        0 2px 18px rgba(0, 0, 0, .65),
        0 0 24px rgba(225, 6, 25, .34) !important;
}

html.hutri81-login .luxury-text .t2,
html.hutri81-login .brand-sub {
    color: var(--ri-gold-bright) !important;
}

html.hutri81-login .brand-event {
    color: var(--ri-white) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background:
        linear-gradient(
            90deg,
            rgba(225, 6, 25, .58),
            rgba(101, 0, 12, .62)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 10px 28px rgba(0, 0, 0, .20) !important;
}

html.hutri81-login .card {
    border-color: var(--ri-line) !important;
    background:
        linear-gradient(
            145deg,
            rgba(38, 0, 5, .88),
            rgba(11, 1, 2, .90)
        ) !important;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .64),
        0 0 0 1px rgba(255, 255, 255, .035),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 0 48px rgba(225, 6, 25, .14) !important;
    backdrop-filter: blur(22px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

html.hutri81-login .card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .82),
            var(--ri-gold),
            transparent
        ) !important;
}

html.hutri81-login .card-inner {
    border-color: rgba(244, 206, 115, .14) !important;
}

html.hutri81-login .dec {
    color: var(--ri-gold) !important;
    opacity: .26 !important;
}

html.hutri81-login .status-bar {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .035) !important;
}

html.hutri81-login .status-item {
    color: var(--ri-muted) !important;
}

html.hutri81-login .status-item i,
html.hutri81-login .badge-env i {
    color: var(--ri-gold-bright) !important;
}

html.hutri81-login .badge-env {
    color: var(--ri-white) !important;
    border-color: rgba(244, 206, 115, .24) !important;
    background: rgba(225, 6, 25, .14) !important;
}

html.hutri81-login .card-title,
html.hutri81-login .card-title i {
    color: var(--ri-white) !important;
}

html.hutri81-login .card-title i {
    text-shadow: 0 0 18px rgba(225, 6, 25, .52) !important;
}

html.hutri81-login .card-subtitle,
html.hutri81-login .input-label,
html.hutri81-login .card-footer,
html.hutri81-login .copy {
    color: var(--ri-muted) !important;
}

html.hutri81-login .input-label i {
    color: var(--ri-gold) !important;
}

html.hutri81-login .input-field {
    border-color: rgba(244, 206, 115, .20) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .025)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 8px 24px rgba(0, 0, 0, .16) !important;
}

html.hutri81-login .input-field:focus-within {
    border-color: rgba(255, 232, 166, .74) !important;
    box-shadow:
        0 0 0 4px rgba(225, 6, 25, .15),
        0 0 28px rgba(225, 6, 25, .16),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

html.hutri81-login .input-field input {
    color: var(--ri-white) !important;
    caret-color: var(--ri-gold-bright) !important;
}

html.hutri81-login .input-field input::placeholder {
    color: rgba(255, 250, 247, .40) !important;
}

html.hutri81-login .input-field > i {
    color: rgba(244, 206, 115, .74) !important;
}

html.hutri81-login #btnLogin {
    color: #fff !important;
    border-color: rgba(255, 232, 166, .34) !important;
    background:
        linear-gradient(
            115deg,
            #b40012 0%,
            #ed1730 45%,
            #a00010 100%
        ) !important;
    box-shadow:
        0 16px 34px rgba(113, 0, 13, .42),
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 0 0 1px rgba(244, 206, 115, .12) !important;
}

html.hutri81-login #btnLogin:hover {
    filter: brightness(1.10) saturate(1.08);
    box-shadow:
        0 19px 42px rgba(135, 0, 16, .52),
        inset 0 1px 0 rgba(255, 255, 255, .30),
        0 0 24px rgba(244, 206, 115, .20) !important;
}

html.hutri81-login #btnLogin:disabled {
    opacity: .72 !important;
    cursor: wait !important;
}

.hutri81-login-emblem {
    position: fixed;
    z-index: 30;
    right: 24px;
    bottom: 22px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    pointer-events: none;
    border: 1px solid rgba(255, 232, 166, .38);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, .22),
            transparent 30%
        ),
        linear-gradient(145deg, #ed1730, #75000d);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .20),
        0 0 38px rgba(225, 6, 25, .25);
    animation: hutriEmblemFloat 4.5s ease-in-out infinite;
}

.hutri81-login-emblem::before,
.hutri81-login-emblem::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hutri81-login-emblem::before {
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, .24);
}

.hutri81-login-emblem::after {
    inset: -7px;
    border: 1px solid rgba(244, 206, 115, .13);
}

.hutri81-login-emblem-inner {
    text-align: center;
    line-height: 1;
}

.hutri81-login-emblem strong {
    display: block;
    font-size: 33px;
    font-weight: 900;
    letter-spacing: -2px;
    color: #fff;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, .28),
        0 0 16px rgba(255, 255, 255, .18);
}

.hutri81-login-emblem span {
    display: block;
    margin-top: 5px;
    font-size: 7px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #ffe8a6;
}

.hutri81-caps-warning {
    display: none;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #ffe8a6;
    text-align: left;
}

.hutri81-caps-warning.is-visible {
    display: block;
}

.hutri81-caps-warning i {
    margin-right: 5px;
    color: #ff5366;
}

@keyframes hutriLoginAura {
    from {
        background-position: 0% 35%, center, center;
    }
    to {
        background-position: 100% 65%, center, center;
    }
}

@keyframes hutriEmblemFloat {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-7px) rotate(1deg);
    }
}

@media (max-width: 768px) {
    .hutri81-login-emblem {
        right: 12px;
        bottom: 12px;
        width: 68px;
        height: 68px;
    }

    .hutri81-login-emblem strong {
        font-size: 24px;
    }

    .hutri81-login-emblem span {
        margin-top: 3px;
        font-size: 5px;
        letter-spacing: .7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.hutri81-login body::before,
    .hutri81-login-emblem {
        animation: none !important;
    }
}


/* ==========================================================
   HUTRI81 LOGIN — CLEANUP DEKORASI TEMA LAMA
   Menghilangkan panel, lingkaran dan glow yang bertumpuk.
========================================================== */

/* Panel dekorasi lama di sisi kanan */
html.hutri81-login .luxury-mascot,
html.hutri81-login .luxury-silhouette {
    display: none !important;
}

/* Bola besar berwarna hijau/ungu dari tema lama */
html.hutri81-login .orb {
    display: none !important;
}

/* Lingkaran aura dan garis dekoratif lama */
html.hutri81-login .dragon-aura,
html.hutri81-login .global-holo {
    display: none !important;
}

/* Hilangkan pseudo-element dekorasi yang mungkin masih tertinggal */
html.hutri81-login .luxury-mascot::before,
html.hutri81-login .luxury-mascot::after,
html.hutri81-login .luxury-silhouette::before,
html.hutri81-login .luxury-silhouette::after,
html.hutri81-login .dragon-aura::before,
html.hutri81-login .dragon-aura::after,
html.hutri81-login .global-holo::before,
html.hutri81-login .global-holo::after {
    content: none !important;
    display: none !important;
}

/* Partikel dibuat lebih halus agar tidak mengganggu form */
html.hutri81-login .dust-layer,
html.hutri81-login .spark-layer {
    opacity: .22 !important;
    filter: none !important;
}

/* Pastikan area kanan tidak memiliki garis/panel sisa */
html.hutri81-login body {
    background-attachment: fixed !important;
}

html.hutri81-login .auth-wrapper::before,
html.hutri81-login .auth-wrapper::after {
    pointer-events: none !important;
}

/* Background pengganti yang bersih dan simetris */
html.hutri81-login body::before {
    opacity: .75 !important;
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(225, 6, 25, .20),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(244, 206, 115, .07),
            transparent 36%
        ),
        linear-gradient(
            125deg,
            transparent 0 44%,
            rgba(255, 255, 255, .025) 44.5%,
            transparent 45% 100%
        ) !important;
}


/* ==========================================================
   HUTRI81 LOGIN — ELEGANT LEGACY ORNAMENTS
   Mengaktifkan kembali ornamen lama dengan komposisi rapi.
========================================================== */

/* Aktifkan kembali seluruh ornamen utama */
html.hutri81-login .luxury-mascot,
html.hutri81-login .luxury-silhouette,
html.hutri81-login .dragon-aura,
html.hutri81-login .global-holo,
html.hutri81-login .orb {
    display: block !important;
}

/* Area ornamen tidak boleh keluar atau membuat scrollbar */
html.hutri81-login body {
    overflow: hidden !important;
    isolation: isolate;
}

/* ==========================================================
   PANEL / MASCOT KANAN
========================================================== */

html.hutri81-login .luxury-mascot {
    right: clamp(18px, 3.2vw, 52px) !important;
    opacity: .72 !important;
    transform:
        translate3d(0, 0, 0)
        scale(.91) !important;
    transform-origin: right center !important;
    filter:
        hue-rotate(325deg)
        saturate(1.18)
        brightness(.82)
        drop-shadow(0 18px 38px rgba(0, 0, 0, .48))
        drop-shadow(0 0 20px rgba(225, 6, 25, .14)) !important;
}

/* Siluet dibuat menyatu dengan background */
html.hutri81-login .luxury-silhouette {
    right: clamp(10px, 2vw, 34px) !important;
    opacity: .20 !important;
    transform: scale(.95) !important;
    transform-origin: right center !important;
    filter:
        hue-rotate(325deg)
        saturate(1.20)
        brightness(.72)
        blur(.2px) !important;
}

/* Border panel lebih tipis dan mewah */
html.hutri81-login .luxury-mascot::before {
    content: "" !important;
    display: block !important;
    opacity: .42 !important;
    border-color: rgba(244, 206, 115, .26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 18px rgba(225, 6, 25, .08) !important;
}

html.hutri81-login .luxury-mascot::after {
    content: "" !important;
    display: block !important;
    opacity: .22 !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

/* ==========================================================
   AURA DAN LINGKARAN PUTUS-PUTUS
========================================================== */

html.hutri81-login .dragon-aura {
    display: block !important;
    opacity: .16 !important;
    right: clamp(42px, 5vw, 84px) !important;
    transform: scale(.78) !important;
    transform-origin: right center !important;
    filter:
        hue-rotate(326deg)
        saturate(1.25)
        brightness(.88)
        blur(.35px) !important;
}

/* Lingkaran tidak boleh terlihat seperti garis kasar */
html.hutri81-login .dragon-aura::before,
html.hutri81-login .dragon-aura::after {
    content: "" !important;
    display: block !important;
    opacity: .20 !important;
    border-color: rgba(244, 206, 115, .24) !important;
    box-shadow:
        0 0 16px rgba(244, 206, 115, .06),
        inset 0 0 12px rgba(225, 6, 25, .04) !important;
}

/* Hologram dibuat sangat lembut */
html.hutri81-login .global-holo {
    display: block !important;
    opacity: .13 !important;
    filter:
        hue-rotate(325deg)
        saturate(1.15)
        brightness(.82) !important;
    mix-blend-mode: screen;
}

/* Jangan tampilkan garis putih vertikal berlebihan */
html.hutri81-login .global-holo::before,
html.hutri81-login .global-holo::after {
    content: "" !important;
    display: block !important;
    opacity: .11 !important;
    filter: blur(1px) !important;
}

/* ==========================================================
   BOLA DEKORATIF
========================================================== */

html.hutri81-login .orb {
    display: block !important;
    opacity: .20 !important;
    transform: scale(.68) !important;
    filter:
        hue-rotate(322deg)
        saturate(1.15)
        brightness(.78)
        blur(.25px) !important;
    box-shadow:
        inset 0 0 36px rgba(255, 255, 255, .05),
        0 0 38px rgba(225, 6, 25, .10) !important;
}

/* Orb yang sebelumnya hijau diarahkan ke merah gelap */
html.hutri81-login .orb:nth-of-type(odd) {
    filter:
        hue-rotate(285deg)
        saturate(1.35)
        brightness(.68)
        blur(.35px) !important;
}

/* ==========================================================
   PARTIKEL
========================================================== */

html.hutri81-login .dust-layer {
    display: block !important;
    opacity: .18 !important;
}

html.hutri81-login .spark-layer {
    display: block !important;
    opacity: .24 !important;
}

html.hutri81-login .spark,
html.hutri81-login .dust {
    opacity: .46 !important;
}

/* ==========================================================
   PEMISAH ORNAMEN DAN FORM
========================================================== */

/* Card tetap paling fokus dan tidak tertutup ornamen */
html.hutri81-login .auth-wrapper {
    position: relative;
    z-index: 10 !important;
}

html.hutri81-login .card {
    position: relative;
    z-index: 12 !important;
}

/* Lapisan gelap tipis agar ornamen tidak mengganggu keterbacaan */
html.hutri81-login .auth-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -28px;
    z-index: -1;
    pointer-events: none;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at center,
            rgba(13, 0, 2, .22),
            transparent 70%
        );
    filter: blur(12px);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
    html.hutri81-login .luxury-mascot {
        right: -20px !important;
        opacity: .46 !important;
        transform: scale(.78) !important;
    }

    html.hutri81-login .luxury-silhouette {
        right: -28px !important;
        opacity: .12 !important;
        transform: scale(.82) !important;
    }

    html.hutri81-login .dragon-aura {
        right: 8px !important;
        opacity: .10 !important;
        transform: scale(.62) !important;
    }
}

@media (max-width: 768px) {
    html.hutri81-login .luxury-mascot {
        right: -54px !important;
        opacity: .20 !important;
        transform: scale(.62) !important;
    }

    html.hutri81-login .luxury-silhouette {
        right: -62px !important;
        opacity: .07 !important;
        transform: scale(.66) !important;
    }

    html.hutri81-login .dragon-aura,
    html.hutri81-login .global-holo {
        opacity: .05 !important;
    }

    html.hutri81-login .orb {
        opacity: .10 !important;
        transform: scale(.48) !important;
    }

    html.hutri81-login .dust-layer,
    html.hutri81-login .spark-layer {
        opacity: .12 !important;
    }
}