:root{--red:#e50000;--darkred:#5e0000;--gold:#fcc200;--black:#080505;--line:#e11;--bg-image:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(#160000bb,#050000ed),var(--bg-image) center top/cover fixed,#120000;color:#fff;font:14px Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}.container{width:min(1610px,96%);margin:auto}.top{background:linear-gradient(90deg,#780000,#ef0000 58%,#600000);border-top:5px solid #d8ae22}.top-inner{min-height:73px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;min-width:210px}.logo{max-width:205px;max-height:62px;object-fit:contain}.brand-fallback{font-size:25px;letter-spacing:-1px;color:#ffcb17;text-shadow:2px 2px #690000}.brand-fallback em{font-style:normal;color:white}.brand:has(img) .brand-fallback{display:none}.brand .img-placeholder{display:none}.login-form{display:flex;gap:14px;align-items:center}.login-form input{background:white;color:#222;border:0;border-left:6px solid var(--gold);border-radius:6px;padding:12px;width:210px}.login-form input:disabled{opacity:1}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:39px;padding:8px 21px;border-radius:7px;font-weight:800}.gold{color:#150600;background:linear-gradient(#fff500,#e6a900);border:2px solid #ffdc00;box-shadow:0 0 7px #ffca00}.outline{color:#ffde00;background:linear-gradient(#300000,#070000);border:2px solid #d9b400}.red{background:linear-gradient(#ff1a00,#b90000);border:1px solid #ff3e18}.mobile-actions{display:none}.category-nav{background:repeating-linear-gradient(45deg,#111 0,#111 12px,#060606 12px,#060606 24px);border-bottom:3px solid #9a0000}.categories{display:flex;justify-content:center;gap:18px;overflow-x:auto;scrollbar-width:none;padding:8px 0}.category{flex:0 0 76px;text-align:center;font-size:12px;font-weight:800}.category:hover,.category:first-child{color:var(--gold)}.cat-icon{width:46px;height:46px;object-fit:contain;margin:0 auto 5px}.category .img-placeholder{width:46px;height:46px;margin:0 auto 5px;border-radius:9px;font-size:9px}.category .img-placeholder small{display:none}.ticker{margin:16px 0 20px;display:flex;gap:12px;align-items:center;background:linear-gradient(#ed0000,#750000);border:1px solid #ff5a00;border-radius:9px;padding:10px 13px;overflow:hidden;font-weight:bold}.ticker-track{overflow:hidden;white-space:nowrap;flex:1}.ticker-track span{display:inline-block;animation:marquee 23s linear infinite;padding-left:100%}@keyframes marquee{to{transform:translateX(-100%)}}.layout{display:grid;grid-template-columns:minmax(205px,23%) minmax(0,1fr) minmax(205px,21%);gap:20px;align-items:start}.side-card,.payment-panel{background:linear-gradient(155deg,#200000,#070000);border:1px solid #d00000;border-radius:15px;padding:10px;margin-bottom:16px}.side-links{display:grid;gap:8px}.side-links a{background:linear-gradient(#ff1200,#b90000);border:2px solid #ff3900;border-radius:30px;padding:12px 14px;font-weight:700}.side-icon{margin-right:9px}.service h3{margin:5px 0 14px;font-size:18px}.service p{color:#ddd}.meter-label{font-weight:bold;margin-top:20px}.meter{background:#c00;border:1px solid #ff3900;height:12px;border-radius:30px;margin-top:8px}.meter span{display:block;background:#090909;height:100%;width:18%;border-radius:30px}.meter .wide{width:35%}.slider{position:relative;aspect-ratio:2.1/1;background:radial-gradient(circle,#640000,#130000);border:1px solid #ef2600;border-radius:13px;overflow:hidden}.slides,.slide{position:absolute;inset:0}.slide{display:none}.slide.active{display:block}.banner-image{width:100%;height:100%;object-fit:cover}.img-placeholder{background:repeating-linear-gradient(135deg,#4a0808,#4a0808 16px,#2b0000 16px,#2b0000 32px);border:2px dashed #ffb60088;color:#ffd653;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:bold;padding:8px}.img-placeholder small{font-size:11px;color:#f8caca;font-weight:normal}.slider .img-placeholder{width:100%;height:100%;font-size:25px}.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);border:2px solid #f43;color:white;background:#b50000;border-radius:50%;height:42px;width:42px;font-size:20px}.prev{left:12px}.next{right:12px}.dots{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.dots button{border:0;border-radius:50%;background:white;width:10px;height:10px;padding:0}.dots button.active{background:var(--gold)}.promo-card{margin-top:18px;display:flex;gap:16px;align-items:center;background:linear-gradient(120deg,#210000,#710000,#160000);border:2px solid #a00;border-radius:12px;padding:13px}.promo-img{width:31%;flex-shrink:0}.promo-image{width:100%;height:135px;object-fit:cover}.promo-copy{flex:1}.promo-copy small{font-weight:bold}.promo-copy h2{margin:8px 0;font-size:21px}.promo-copy p{color:#ddd}.secondary{background:linear-gradient(120deg,#150000,#290000)}.content-panel{padding:20px;margin-top:18px;background:#110808;border:1px solid #8a0000;border-radius:12px;line-height:1.6}.payment-panel h3{font-size:18px;font-style:italic;margin:0 0 15px;border-bottom:4px solid var(--gold);padding:7px}.payment-item{background:linear-gradient(#d90000,#750000);border:2px solid #ffb000;border-radius:40px;min-height:55px;padding:7px 12px;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:9px 0;box-shadow:0 0 7px #e00}.payment-logo{width:90px;height:34px;object-fit:contain}.payment-item .img-placeholder{font-size:9px;border:0;background:#420000;width:90px;height:34px}.payment-item .img-placeholder small{display:none}.online{color:#50ff36;background:#222;border-radius:20px;padding:5px 9px;font-weight:800;white-space:nowrap}.online i{display:inline-block;background:#0f0;width:9px;height:9px;border-radius:50%;box-shadow:0 0 7px #0f0}.footer{text-align:center;color:#aaa;margin:35px 0 20px}.bottom-nav,.mobile-drawer{display:none}@media(max-width:1100px){.layout{grid-template-columns:200px minmax(0,1fr)}.right-col{display:none}.login-form input{width:160px}}@media(max-width:768px){body{padding-bottom:78px}.container{width:94%}.top-inner{min-height:57px}.top{border-top-width:2px}.brand{min-width:0}.brand-fallback{font-size:20px}.logo{max-width:165px;max-height:48px}.login-form{display:none}.mobile-actions{display:flex;align-items:center;gap:8px}.mobile-actions .btn{min-height:33px;padding:5px 12px}.menu-button{background:#080808;color:#fff;border:2px solid var(--gold);border-radius:6px;font-size:24px;height:38px;width:39px}.categories{justify-content:flex-start;gap:10px;padding:7px 0}.category{flex-basis:61px;font-size:10px}.cat-icon,.category .img-placeholder{width:40px;height:40px}.ticker{margin:12px 0;padding:7px 9px;font-size:12px}.layout{display:block}.left-col,.right-col{display:none}.slider{aspect-ratio:1.45/1}.slider .img-placeholder{font-size:17px}.slide-arrow{width:32px;height:32px;font-size:15px}.promo-card{margin-top:12px;padding:9px;gap:9px}.promo-img{width:30%}.promo-image{height:95px}.promo-copy h2{font-size:14px;margin:4px 0}.promo-copy p{font-size:11px;margin:5px 0}.promo-copy .btn{font-size:11px;min-height:30px;padding:5px 9px}.content-panel{font-size:12px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;align-items:center;height:66px;background:linear-gradient(#9f0000,#260000);border-top:2px solid #ffbc00}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:23px;min-width:58px}.bottom-nav span{font-size:11px;color:#ffdc28}.bottom-nav .bottom-main{background:linear-gradient(#ff1900,#850000);border:2px solid var(--gold);border-radius:50%;height:65px;width:65px;transform:translateY(-15px)}.mobile-drawer:not([hidden]){display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:min(300px,85vw);background:#150000;z-index:80;padding:20px;box-shadow:-20px 0 0 100vw #0009}.mobile-drawer a{padding:13px;border-bottom:1px solid #6d0000}.drawer-title{display:flex;justify-content:space-between;align-items:center;font-weight:bold;color:var(--gold)}.drawer-title button{background:#c00;color:white;border:0;padding:8px;border-radius:5px}}@media(prefers-reduced-motion:reduce){.ticker-track span{animation:none;padding-left:0}}

/* V4: domain gambar eksternal, background, jackpot, dan pembayaran berjalan */
body{background:linear-gradient(180deg,#1c0000,#060000);isolation:isolate}
.site-background{position:fixed;inset:0;z-index:-1;background-position:center top;background-repeat:no-repeat;background-size:cover;pointer-events:none}
body:has(.site-background)::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#10000088,#090000bb);pointer-events:none}
.jackpot-panel{margin-top:17px;border:2px solid #d10c00;border-radius:13px;overflow:hidden;background:linear-gradient(115deg,#200000,#720000,#180000);box-shadow:0 0 15px #e0000038}
.jackpot-visual{width:100%;min-height:135px;aspect-ratio:6/1.25}
.jackpot-image,.jackpot-visual>.img-placeholder{display:block;width:100%;height:100%;object-fit:cover}
.jackpot-visual>.img-placeholder{display:flex;min-height:135px}
.payment-viewport{height:490px;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent)}
.payment-track{display:flex;flex-direction:column;animation:payment-up 35s linear infinite;will-change:transform}
.payment-track .payment-item{flex-shrink:0;margin:5px 0;min-height:49px}
.payment-viewport:hover .payment-track,.payment-viewport:focus-within .payment-track{animation-play-state:paused}
@keyframes payment-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(max-width:768px){.jackpot-panel{margin-top:12px}.jackpot-visual{min-height:85px;aspect-ratio:3.4/1}.jackpot-visual>.img-placeholder{min-height:85px;font-size:13px}.site-background{background-position:center top}}
@media(prefers-reduced-motion:reduce){.payment-track{animation:none}.payment-viewport{overflow-y:auto;mask-image:none}}

/* V5: jackpot tanpa bingkai, dua baris favorit, footer referensi */
.jackpot-panel{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;margin-top:14px}
.jackpot-visual{background:transparent;aspect-ratio:auto;min-height:0}
.jackpot-image{width:100%;height:auto;object-fit:contain;display:block}
.jackpot-visual>.img-placeholder{min-height:105px;border:1px dashed #9b4c23;background:#21000077;border-radius:4px}
.favorites{margin-top:18px;padding:13px 0 17px;background:linear-gradient(90deg,#140000d9,#410000b0,#140000d9);border-top:2px solid #a70000;border-bottom:2px solid #a70000;overflow:hidden}
.favorites h2{margin:0 14px;color:#ffcf16;font-size:21px}.fav-sub{margin:5px 14px 13px;color:#ddd;font-size:12px}
.favorite-viewport{overflow:hidden;width:100%;margin:9px 0}.favorite-track{display:flex;gap:12px;width:max-content;animation:favorites-left var(--duration,36s) linear infinite;will-change:transform}.favorite-viewport:hover .favorite-track{animation-play-state:paused}
.favorite-tile{width:155px;flex:0 0 155px;height:112px;border:1px solid #d50b00;border-radius:9px;overflow:hidden;background:#210000}.favorite-image,.favorite-tile>.img-placeholder{width:100%;height:100%;object-fit:cover}.favorite-tile>.img-placeholder{font-size:11px}.favorite-tile>.img-placeholder small{font-size:9px}
@keyframes favorites-left{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
.footer{margin:34px 0 0;background:#090000e8;border-top:2px solid #9b0500;text-align:left;color:#ddd;padding:32px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr 2.2fr;gap:28px}.footer-grid section{display:flex;flex-direction:column;gap:15px}.footer-grid h3{color:#fff;margin:0 0 10px;font-size:17px}.footer-grid a{color:#a8bed2;font-size:14px}.footer-grid a:hover{color:#ffd400}.footer-note{font-size:12px;line-height:1.6;color:#aaa}
.footer-payments{border-left:1px solid #4e2020;padding-left:28px}.footer-brand{display:flex;align-items:center;gap:12px;color:#ffc400;font-size:20px}.footer-logo{max-width:165px;max-height:48px;object-fit:contain}.footer-brand:has(img) strong{display:none}.footer-brand>.img-placeholder{display:none}.footer-payments h2{font-size:23px;color:#fff;margin:0}.footer-payments p{margin:0;font-size:13px}.payment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:7px 0 8px}.payment-grid-item{min-height:45px;border-radius:7px;border:1px solid #ff2900;background:linear-gradient(#f00,#940000);display:flex;align-items:center;justify-content:center;padding:4px}.footer-bank-logo{max-width:100%;width:100%;height:36px;object-fit:contain}.payment-grid-item>.img-placeholder{width:100%;min-height:35px;padding:3px;font-size:9px;background:#610000;border:0}.payment-grid-item>.img-placeholder small{display:none}.social-links{display:flex;gap:10px}.social-links a{display:flex;align-items:center;justify-content:center;width:39px;height:39px;background:#b00;border:1px solid #ff2c00;border-radius:50%;color:white}.social-icon{width:26px;height:26px;object-fit:contain}.social-links .img-placeholder{width:28px;height:28px;border:0;background:transparent;padding:0;font-size:7px}.social-links .img-placeholder small{display:none}.footer-bottom{border-top:1px dashed #b60000;text-align:center;margin-top:28px;padding:20px 0;color:#bbb}
@media(max-width:1100px){.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-payments{grid-column:1/-1;border-left:0;border-top:1px solid #4e2020;padding:20px 0 0}}
@media(max-width:768px){.favorites{margin-top:12px}.favorites h2{font-size:16px}.favorite-tile{width:115px;flex-basis:115px;height:84px}.favorite-track{gap:8px}@keyframes favorites-left{to{transform:translateX(calc(-50% - 4px))}}.footer{padding-top:20px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.footer-grid h3{font-size:14px}.footer-grid a{font-size:12px}.footer-payments{grid-column:1/-1}.footer-payments h2{font-size:18px}.payment-grid{gap:4px}.payment-grid-item{min-height:38px}.footer-bank-logo{height:29px}.footer-bottom{padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.favorite-track{animation:none}.favorite-viewport{overflow-x:auto}}

/* V6: logo terpusat mobile, login popup dan tombol khusus mobile */
.mobile-logo{display:none}.desktop-auth{display:flex;align-items:center;gap:12px}.mobile-auth-bar{display:none}
.login-modal[hidden]{display:none!important}.login-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}.login-backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(3px)}.login-dialog{position:relative;z-index:1;width:min(420px,100%);background:linear-gradient(150deg,#3b0000,#100000 65%);border:2px solid #f7b900;border-radius:17px;box-shadow:0 15px 55px #000b;padding:28px;color:#fff}.login-dialog h2{margin:0 0 8px;text-align:center;color:#ffcf1b}.login-dialog p{text-align:center;color:#ddd}.login-dialog p a{color:#ffd000;font-weight:bold}.login-dialog label{display:block;margin:14px 0 8px;font-weight:700}.login-dialog input{display:block;width:100%;margin-top:7px;padding:12px;border-radius:8px;border:1px solid #d77;background:#fff;color:#111}.login-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:white;font-size:30px}.login-submit{width:100%;margin-top:15px}.login-error{padding:10px;background:#a00;border-radius:8px}.bottom-login{color:#fff;cursor:pointer;font:inherit}.login-open{overflow:hidden}
@media(max-width:768px){.top-inner{position:relative;justify-content:center;min-height:65px}.brand{position:relative;min-width:0;max-width:66%;justify-content:center}.brand .desktop-logo{display:none}.brand .mobile-logo{display:block;max-width:205px;max-height:55px;object-fit:contain}.brand .img-placeholder{display:flex;width:170px;height:48px;font-size:11px}.brand .img-placeholder small{display:none}.mobile-actions{position:absolute;right:0;top:50%;transform:translateY(-50%)}.desktop-auth{display:none}.mobile-auth-bar{display:flex;gap:8px;justify-content:center;margin:13px 0 4px}.mobile-auth-bar .btn{width:min(48%,190px);border-radius:30px;font-size:16px;box-shadow:0 0 12px #ffb00066}.mobile-auth-bar .red{background:linear-gradient(#f50000,#9e0000);border:2px solid #ff4a42}.bottom-nav button.bottom-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:23px;min-width:58px}.bottom-nav button span{font-size:11px;color:#ffdc28}}

/* V7: single logo per viewport, desktop inline auth, compact register */
.desktop-brand-image{display:block}.mobile-brand-image{display:none}.desktop-brand-image .img-placeholder,.mobile-brand-image .img-placeholder{display:flex;width:190px;min-height:48px;font-size:12px}.desktop-brand-image .img-placeholder small,.mobile-brand-image .img-placeholder small{display:none}
.desktop-login{display:flex;align-items:center;gap:9px}.desktop-login input{background:#fff;color:#111;border:0;border-left:5px solid var(--gold);border-radius:5px;padding:11px 9px;width:165px;min-width:0}.desktop-login .btn{white-space:nowrap}.desktop-brand-image .logo{display:block}
.register-wrap{width:min(760px,94%);margin:24px auto 35px;background:linear-gradient(130deg,#340000,#090000);border:2px solid #b80000;border-radius:15px;padding:22px}.register-wrap h1{color:#ffcb00;text-align:center;margin:3px 0 5px;font-size:25px}.register-intro{text-align:center;color:#ddd;margin:0 0 18px}.register-back a,.register-wrap a{color:#ffd400}.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.register-grid label{display:block;font-weight:700;font-size:13px}.register-grid input,.register-grid select{display:block;width:100%;margin-top:5px;padding:10px 11px;border-radius:7px;border:1px solid #a66;background:#fff;color:#111}.register-grid .wide{grid-column:1/-1}.register-submit{width:100%;margin-top:4px}.register-errors{background:#7d0000;padding:12px;border-radius:8px}.register-home{display:flex;align-items:center;justify-content:center;text-decoration:none}.registration-page .category{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:17px}.registration-page .category span{font-size:11px}.register-footer{margin-top:0}
@media(max-width:900px){.desktop-login input{width:125px}.desktop-login{gap:6px}.desktop-login .btn{padding:8px 10px}}
@media(max-width:768px){.desktop-brand-image{display:none!important}.mobile-brand-image{display:block}.brand{justify-content:center}.mobile-brand-image .img-placeholder{width:165px;min-height:45px;font-size:10px}.mobile-brand-image .logo{max-width:185px;max-height:52px}.register-wrap{width:94%;margin:14px auto 20px;padding:15px 12px;border-radius:12px}.register-wrap h1{font-size:20px}.register-intro{font-size:12px;margin-bottom:12px}.register-grid{grid-template-columns:1fr;gap:9px}.register-grid .wide{grid-column:auto}.register-grid label{font-size:12px}.register-grid input,.register-grid select{margin-top:4px;padding:9px 10px;font-size:14px}.register-submit{margin-top:5px}.register-footer{padding-top:16px}.registration-page .category{flex:0 0 65px}}

/* V8: halaman registrasi memakai header dan kategori yang sama dengan beranda */
.registration-page .category{display:block;font-size:12px;gap:0}
.registration-page .category span{font-size:inherit}
.registration-page .categories{justify-content:center}
.registration-page .brand .desktop-brand-image .img-placeholder{display:flex}
@media(max-width:768px){
 .registration-page .categories{justify-content:flex-start}
 .registration-page .category{flex:0 0 61px;font-size:10px}
 .registration-page .top-inner{justify-content:center}
 .registration-page .desktop-brand-image{display:none!important}
 .registration-page .mobile-brand-image{display:block!important}
 .registration-page .register-grid{grid-template-columns:1fr;gap:8px}
 .registration-page .register-wrap{padding:13px 12px;margin-top:10px}
 .registration-page .register-wrap h1{font-size:19px}
 .registration-page .register-grid input,.registration-page .register-grid select{padding:9px 10px}
}

/* V9: final mobile consistency - home and register */
@media screen and (max-width:768px) {
  html, body {max-width:100%;overflow-x:hidden}
  body {padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
  .top-inner {position:relative;display:flex;align-items:center;justify-content:center;min-height:65px;width:94%;margin-inline:auto;gap:0}
  .brand {display:flex;align-items:center;justify-content:center;min-width:0;max-width:65%;margin-inline:auto}
  .desktop-login,.desktop-auth,.login-form,.desktop-logo,.desktop-brand-image,.brand .desktop-logo {display:none!important}
  .mobile-brand-image {display:block!important;max-width:100%}
  .mobile-brand-image .logo,.brand .mobile-logo {display:block!important;max-width:100%;max-height:55px;object-fit:contain}
  .mobile-brand-image .img-placeholder {display:flex;width:min(180px,100%);min-height:45px;font-size:10px}
  .mobile-actions {display:flex;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);gap:8px}
  .mobile-actions .btn {display:none}
  .categories {display:flex;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;scrollbar-width:none}
  .categories::-webkit-scrollbar {display:none}
  .category,.registration-page .category {flex:0 0 61px;min-width:0;text-align:center;font-size:10px}
  .category-nav {max-width:100%;overflow:hidden}
  .bottom-nav {position:fixed!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;max-width:100vw;z-index:9999!important;display:flex!important;align-items:center;justify-content:space-around;min-height:66px;height:calc(66px + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom, 0px)}
  .bottom-nav a,.bottom-nav button {min-width:0;flex:1;white-space:nowrap}
  .bottom-nav .bottom-main,.bottom-nav button.bottom-main {flex:0 0 65px;min-width:65px}
  .registration-page .desktop-login {display:none!important}
  .registration-page .mobile-brand-image {display:block!important}
  .registration-page .categories {justify-content:flex-start}
}

/* V10: gambar ikon navigasi bawah, tetap fixed di mobile */
@media(max-width:768px){
 .bottom-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;z-index:9999!important;display:flex!important;align-items:center!important;justify-content:space-around!important;padding-bottom:env(safe-area-inset-bottom,0px);height:calc(66px + env(safe-area-inset-bottom,0px))}
 .bottom-nav>a,.bottom-nav>button{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;background:transparent;color:#fff;border:0;padding:4px 2px;font:inherit;cursor:pointer}
 .bottom-nav .bottom-main{flex:0 0 65px;min-width:65px;background:linear-gradient(#ff1900,#850000);border:2px solid var(--gold);border-radius:50%;height:65px;width:65px;transform:translateY(-12px)}
 .bottom-icon-img{display:block;width:26px;height:26px;max-width:100%;object-fit:contain;flex:none}
 .bottom-icon-fallback{display:block;font-size:24px;line-height:26px;height:26px;color:#fff}
 .bottom-nav span:not(.bottom-icon-fallback){font-size:11px;color:#ffdc28;white-space:nowrap}
 body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}
}
@media(min-width:769px){.bottom-nav{display:none!important}}

/* V11 shared responsive header, article and catalog */
@media(max-width:768px){.top{position:sticky;top:0;z-index:100;}.desktop-login,.desktop-auth,.desktop-brand-image{display:none!important}.mobile-brand-image{display:block!important}.brand{justify-content:center}.mobile-actions{display:flex!important}.category-nav{position:relative;z-index:5}}
.expandable-article .article-body{max-height:76px;overflow:hidden;position:relative}.expandable-article.expanded .article-body{max-height:none}.article-toggle{margin-top:12px}.member-page,.catalog-page{min-height:55vh;margin-bottom:30px}.member-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.catalog-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.catalog-tile{background:#440000;border:1px solid #cf1500;border-radius:10px;overflow:hidden;text-align:center;display:block}.catalog-tile img,.catalog-placeholder{width:100%;aspect-ratio:1.25;object-fit:cover}.catalog-placeholder{display:grid;place-items:center;background:#2d0808;color:#ffd000;font-size:11px}.catalog-tile strong{display:block;padding:10px 5px}.member-auth{display:flex;gap:10px;align-items:center}@media(max-width:768px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.member-profile-grid{grid-template-columns:1fr}.catalog-tile strong{font-size:11px}}

/* V12: compact authenticated member ID and demo balance */
.top-inner{position:relative}.member-badge{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 11px;border:1px solid #fbc600;border-radius:9px;background:#290000;color:#fff;white-space:nowrap;font-size:12px;font-weight:700}.member-badge-balance{color:#ffdf32}.captcha-row{display:flex;align-items:center;gap:10px;margin:7px 0}.captcha-row img{max-width:calc(100% - 62px);height:auto;min-height:65px;border:1px solid #a00;border-radius:8px;background:#210707}.captcha-row button{font-size:27px;min-width:48px;padding:5px}.register-grid .wide>input{width:100%;padding:10px;margin:5px 0 8px;border-radius:7px;border:1px solid #a66}.register-grid .wide>small{display:block;margin-bottom:10px;color:#ddd}
@media(max-width:768px){.top-inner{min-height:70px!important}.member-badge{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:32%;padding:4px 5px;font-size:9px;overflow:hidden;text-overflow:ellipsis}.member-badge-user,.member-badge-balance{max-width:100%;overflow:hidden;text-overflow:ellipsis}.top-inner:has(.member-badge) .brand{max-width:37%!important;margin-left:4%}.top-inner:has(.member-badge) .mobile-brand-image .logo{max-width:100%!important}.top-inner:has(.member-badge) .mobile-brand-image .img-placeholder{width:100%;font-size:9px}}

/* V13: member header desktop/mobile - shared by all pages */
.top-inner .legacy-member-auth{display:none!important}
.top-inner .member-status{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.member-status-chip,.member-status-refresh{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1px solid #f7c500;border-radius:9px;background:linear-gradient(180deg,#790000,#240000);color:#ffe100;box-shadow:0 0 0 2px #630000,0 0 8px #e4000070;text-decoration:none;font-weight:800;white-space:nowrap}
.member-status-chip{padding:5px 10px;max-width:220px;min-width:0}
.member-status-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-status-icon{font-size:20px;flex:none}
.member-status-refresh{width:42px;flex:0 0 42px;font-size:26px;cursor:pointer}
@media(max-width:768px){
 .top{position:sticky!important;top:0!important;z-index:1000!important}
 .top-inner{display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:62px auto!important;gap:0!important;align-items:center!important;justify-content:stretch!important;width:94%!important;min-height:0!important;margin:auto!important}
 .top-inner .brand{grid-column:1;grid-row:1;justify-self:start!important;margin:0!important;max-width:calc(100% - 8px)!important;min-width:0!important;justify-content:flex-start!important}
 .top-inner .desktop-brand-image{display:none!important}
 .top-inner .mobile-brand-image{display:block!important}
 .top-inner .mobile-brand-image .logo{max-width:min(210px,100%)!important;max-height:54px!important}
 .top-inner .mobile-brand-image .img-placeholder{width:min(190px,100%)!important;min-height:44px!important}
 .top-inner .mobile-actions{grid-column:2;grid-row:1;position:static!important;transform:none!important;display:flex!important;justify-self:end!important}
 .top-inner .member-status{grid-column:1/-1;grid-row:2;position:static!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;margin:0!important;padding:3px 0 9px!important;max-width:100%!important;width:100%!important;overflow:visible!important}
 .member-status-chip{min-height:38px;padding:4px 7px;max-width:none;font-size:12px}
 .member-status-user{flex:1 1 45%;min-width:0}
 .member-status-money{flex:1 1 38%;min-width:0}
 .member-status-refresh{width:38px;flex:0 0 38px;min-height:38px;font-size:23px}
 .member-status-icon{font-size:18px}
 .top-inner:has(.member-status) .brand{max-width:100%!important;margin-left:0!important}
 .top-inner .member-badge{display:none!important}
 .mobile-auth-bar{display:flex}
 .bottom-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:999!important}
}
@media(max-width:360px){.member-status-chip{font-size:10px;gap:4px;padding:3px 5px}.member-status-icon{font-size:15px}}

/* V14 - sticky mobile header, drawer below header, preview article fade */
@media (max-width:768px){
 html,body{overflow-x:clip}
 .top{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:5000!important}
 body{padding-top:var(--mahkota-mobile-header-height,72px)!important}
 .mobile-drawer:not([hidden]){position:fixed!important;top:var(--mahkota-mobile-header-height,72px)!important;bottom:0!important;right:0!important;left:auto!important;max-height:calc(100dvh - var(--mahkota-mobile-header-height,72px))!important;z-index:4900!important;overflow-y:auto!important;box-sizing:border-box!important}
 .bottom-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:5100!important}
}
.expandable-article{position:relative}
.expandable-article .article-body{max-height:110px!important;overflow:hidden!important;position:relative!important;line-height:1.65}
.expandable-article:not(.expanded) .article-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:68px;pointer-events:none;background:linear-gradient(to bottom,transparent,#100303)}
.expandable-article.expanded .article-body{max-height:none!important;overflow:visible!important}
.expandable-article .article-toggle{display:block!important;margin:0 auto!important;padding:10px 20px!important;background:none!important;border:0!important;box-shadow:none!important;color:#ff3b32!important;text-decoration:underline!important;font-weight:700!important}
.expandable-article .article-body p{margin:0 0 12px}

/* V15 - menu transaksi member dan halaman transaksi: menjaga layout V14 */
.transaction-popup[hidden]{display:none!important}
.transaction-popup{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px}
.transaction-popup-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(3px)}
.transaction-popup-card{position:relative;width:min(390px,100%);padding:25px 20px 20px;border:2px solid #ffc400;border-radius:16px;background:linear-gradient(145deg,#650000,#190000 80%);box-shadow:0 20px 70px #000c;text-align:center}
.transaction-popup-card h2{margin:0 0 8px;color:#ffda1b;font-size:21px}
.transaction-popup-card p{margin:0 0 22px;color:#f5dddd}
.transaction-popup-close{position:absolute;top:8px;right:12px;border:0;background:transparent;color:#fff;font-size:28px}
.transaction-choice{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;margin:12px 0;padding:16px;border:2px solid #ffcc00;border-radius:11px;background:linear-gradient(110deg,#e50000,#7d0000);color:#fff;font-weight:800;font-size:18px}
.transaction-choice span{font-size:24px;color:#ffdc22}
.transaction-choice:hover{filter:brightness(1.15)}
.transaction-page{margin-bottom:28px;min-height:320px}
.transaction-heading h1{color:#ffcb15;margin:0 0 8px}
.transaction-heading p{color:#ddd}
.transaction-columns{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr);gap:20px;margin-top:20px}
.transaction-form,.transaction-info{padding:18px;background:linear-gradient(155deg,#360000,#110606);border:1px solid #a20c00;border-radius:12px}
.transaction-form h2,.transaction-info h2{margin:0 0 14px;font-size:18px;color:#ffcf20}
.transaction-fields{display:grid;gap:14px}.transaction-fields label{display:grid;gap:6px;font-weight:700}
.transaction-fields input,.transaction-fields select{width:100%;min-width:0;padding:12px;border:1px solid #c66;border-radius:7px;background:#fff;color:#222}
.transaction-fields button:disabled{opacity:.65;cursor:not-allowed}
.transaction-note{font-size:12px;color:#ffd58e;line-height:1.6}
.transaction-info p{line-height:1.6}
@media(max-width:720px){.transaction-columns{grid-template-columns:1fr;gap:12px}.transaction-page{padding:14px}.transaction-form,.transaction-info{padding:14px}}

/* V15 mini popup: dua tombol kecil di atas tombol bulat mobile */
.transaction-popup[hidden]{display:none!important}
.transaction-popup{position:fixed;inset:auto 0 calc(84px + env(safe-area-inset-bottom,0px));z-index:11000;display:flex;justify-content:center;align-items:flex-end;padding:0;pointer-events:none}
.transaction-popup-backdrop{display:none!important}
.transaction-popup-card{pointer-events:auto;position:relative;width:150px;max-width:calc(100vw - 24px);padding:7px;background:linear-gradient(150deg,#650000,#1a0000);border:1px solid #ffd000;border-radius:10px;box-shadow:0 5px 18px #000b;text-align:center}
.transaction-popup-card h2,.transaction-popup-card p,.transaction-popup-close{display:none!important}
.transaction-choice{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin:0;padding:8px 5px;min-height:34px;border:1px solid #ffca00;border-radius:6px;background:linear-gradient(#dc1000,#7c0000);color:#fff;font-size:12px;font-weight:800;line-height:1.1}
.transaction-choice+.transaction-choice{margin-top:5px}
.transaction-choice span{font-size:14px;color:#ffe000}
@media(min-width:769px){.transaction-popup{inset:85px 24px auto auto;justify-content:flex-end}}

/* V16: menu desktop kiri logo, drawer sama dengan mobile */
.desktop-menu-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;background:#080808;color:#fff;border:2px solid #ffd000;border-radius:7px;font-size:25px;cursor:pointer;margin-right:12px;line-height:1}
@media(min-width:769px){
 .mobile-drawer:not([hidden]){display:flex!important;flex-direction:column!important;position:fixed!important;top:var(--mahkota-desktop-header-height,78px)!important;left:0!important;right:auto!important;bottom:0!important;width:min(300px,85vw)!important;max-height:calc(100dvh - var(--mahkota-desktop-header-height,78px))!important;overflow-y:auto!important;box-sizing:border-box!important;background:#150000!important;z-index:4900!important;padding:18px 14px!important;box-shadow:20px 0 0 100vw #0008!important}
 .mobile-drawer:not([hidden]) a{display:block;padding:13px 14px;border-bottom:1px solid #6d0000;color:#fff;text-decoration:none}
 .mobile-drawer:not([hidden]) .drawer-title{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#ffd000}
 .mobile-drawer:not([hidden]) .drawer-title button{background:#c00;color:#fff;border:0;border-radius:5px;padding:8px;cursor:pointer}
}
@media(max-width:768px){.desktop-menu-button{display:none!important}}

/* V17 DESKTOP ONLY: logo stays next to left menu whether logged in or out.
   Mobile CSS is unchanged from the supplied V16 archive. */
@media screen and (min-width: 769px) {
  .top .top-inner { justify-content: flex-start !important; }
  .top .top-inner > .desktop-menu-button { flex-shrink: 0; margin-right: 0; }
  .top .top-inner > .brand { margin: 0 !important; flex: 0 0 auto; min-width: 0; }
  .top .top-inner > .desktop-login,
  .top .top-inner > .member-status { margin-left: auto !important; }
}

/* V18 banner desktop/mobile: stretch exactly to the slider dimensions */
.slider .slide img.banner-image,.slider img.banner-image,.slider .banner-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;object-position:center!important;}
.slider .slide>a{display:block;width:100%;height:100%;}

/* V19 — compact member account header; preserves existing theme variables and functions */
.top-inner .member-status{
  display:flex!important;align-items:center!important;gap:5px!important;
  width:min(100%,350px)!important;max-width:350px!important;min-width:0!important;
  padding:5px!important;border-radius:11px!important;
  background:rgba(20,20,20,.88)!important;
  box-shadow:none!important;
}
.top-inner .member-status-chip{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  min-height:35px!important;height:35px!important;min-width:0!important;
  max-width:none!important;padding:5px 9px!important;gap:5px!important;
  border:0!important;border-radius:7px!important;
  background:#101010!important;box-shadow:none!important;
  color:#fff!important;font-size:12px!important;font-weight:800!important;
}
.top-inner .member-status-user{flex:0 1 39%!important;min-width:0!important;}
.top-inner .member-status-money{flex:1 1 49%!important;min-width:0!important;}
.top-inner .member-status-icon{display:none!important;}
.top-inner .member-status-value{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:800!important;
}
.top-inner .member-status-user .member-status-value{color:#fff!important;}
.top-inner .member-status-money .member-status-value{color:#58ff46!important;}
.top-inner .member-status-refresh{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 35px!important;width:35px!important;min-width:35px!important;
  height:35px!important;min-height:35px!important;padding:0!important;
  border:0!important;border-radius:7px!important;background:#363636!important;
  box-shadow:none!important;color:var(--gold,#fcc200)!important;font-size:21px!important;
}
@media(min-width:769px){
  .top .top-inner>.member-status{margin-left:auto!important;}
}
@media(max-width:768px){
  .top-inner .member-status{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;max-width:350px!important;
    margin:0 auto!important;padding:4px!important;gap:4px!important;
    overflow:hidden!important;
  }
  .top-inner .member-status-chip{min-height:34px!important;height:34px!important;padding:4px 7px!important;font-size:11px!important;}
  .top-inner .member-status-user{flex:0 1 39%!important;min-width:0!important;}
  .top-inner .member-status-money{flex:1 1 49%!important;min-width:0!important;}
  .top-inner .member-status-refresh{flex:0 0 34px!important;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;font-size:20px!important;}
}
@media(max-width:360px){
  .top-inner .member-status{gap:3px!important;}
  .top-inner .member-status-chip{font-size:10px!important;padding-inline:5px!important;}
}


/* V20 — full-width mobile member bar, refined red breathing space */
.top-inner .member-status{
  background:linear-gradient(180deg,#363636,#242424)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:4px!important;
  padding:3px!important;
  gap:4px!important;
  max-width:380px!important;
}
.top-inner .member-status-chip{
  background:#0c0c0d!important;
  border-radius:3px!important;
  height:35px!important;
  min-height:35px!important;
  padding:4px 10px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:-.15px!important;
  font-variant-numeric:tabular-nums lining-nums;
}
.top-inner .member-status-user{flex:0 1 40%!important}
.top-inner .member-status-money{flex:1 1 50%!important}
.top-inner .member-status-money .member-status-value{
  color:#63ff3f!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.2px!important;
  text-shadow:0 0 1px rgba(80,255,50,.16);
}
.top-inner .member-status-refresh{
  flex:0 0 35px!important;
  width:35px!important;
  height:35px!important;
  min-height:35px!important;
  border-radius:3px!important;
  background:#3a3a3a!important;
  color:var(--gold,#fcc200)!important;
  font-weight:800!important;
}
@media(min-width:769px){
  .top-inner .member-status{width:350px!important;max-width:350px!important}
}
@media(max-width:768px){
  /* Header stays red; the dark bar nearly spans the whole red strip. */
  .top .top-inner{width:100%!important;grid-template-rows:62px auto!important}
  .top .top-inner>.brand{margin-left:3%!important}
  .top .top-inner>.mobile-actions{margin-right:3%!important}
  .top .top-inner>.member-status{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:calc(100% - 12px)!important;
    max-width:none!important;
    margin:1px 6px 7px!important;
    padding:3px!important;
    gap:4px!important;
  }
  .top-inner .member-status-chip{font-size:12px!important;height:35px!important;min-height:35px!important}
  .top-inner .member-status-user{flex:0 1 39%!important}
  .top-inner .member-status-money{flex:1 1 51%!important}
  .top-inner .member-status-money .member-status-value{font-size:12px!important}
  .top-inner .member-status-refresh{flex:0 0 35px!important;width:35px!important;height:35px!important;min-height:35px!important}
}
@media(max-width:360px){
  .top-inner .member-status-chip{padding:4px 6px!important;font-size:11px!important}
  .top-inner .member-status-money .member-status-value{font-size:11px!important}
}

/* V21 — PERBAIKAN HEADER MOBILE */

@media screen and (max-width: 768px) {

  /* Header merah tetap full */
  .top {
    width: 100% !important;
  }

  /* Baris logo dan tombol menu */
  .top .top-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 66px auto !important;
    column-gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Logo tetap di kiri */
  .top .top-inner > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Tombol menu tidak menempel ke pinggir */
  .top .top-inner > .mobile-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    transform: none !important;
    justify-self: end !important;
    margin-right: 4px !important;
  }

  /* Tombol garis tiga */
  .top .menu-button {
    width: 42px !important;
    height: 42px !important;
    border: 2px solid var(--gold) !important;
    border-radius: 7px !important;
    background: #080808 !important;
    color: #fff !important;
  }

  /* Bar ID, saldo, refresh */
  .top .top-inner > .member-status {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: calc(100% + 16px) !important;
    max-width: none !important;

    margin: 0 -8px !important;
    padding: 3px 0 9px !important;

    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* ID */
  .top .member-status-user {
    flex: 1 1 40% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Saldo */
  .top .member-status-money {
    flex: 1 1 48% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Kotak hitam */
  .top .member-status-chip {
    min-height: 37px !important;
    border-radius: 5px !important;
    padding: 6px 10px !important;
  }

  /* Refresh */
  .top .member-status-refresh {
    flex: 0 0 37px !important;
    width: 37px !important;
    min-height: 37px !important;
    border-radius: 5px !important;
  }

}

/* V22 — LOGIN MEMBER MINIMALIS. Hanya mengubah tampilan modal login. */
html body .login-modal { padding: 16px !important; z-index: 6000; }
html body .login-modal .login-backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(5px); }
html body .login-modal .login-dialog {
  box-sizing: border-box; width: min(360px, 100%) !important; max-height: calc(100dvh - 32px);
  overflow-y: auto; padding: 23px 23px 19px !important;
  border: 1px solid var(--mp-border-soft, rgba(255,202,70,.26)) !important;
  border-radius: 13px !important; background: var(--mp-surface, #130b0b) !important;
  box-shadow: 0 24px 65px rgba(0,0,0,.72) !important; color: #f5f1ed;
}
html body .login-modal .login-dialog h2 {
  margin: 0 25px 4px 0 !important; text-align: left !important;
  font-size: 19px !important; line-height: 1.35 !important;
  font-weight: 800 !important; letter-spacing: .15px;
  color: var(--gold, #ffce36) !important;
}
html body .login-modal .login-dialog > p:first-of-type {
  text-align: left !important; margin: 0 0 17px !important;
  font-size: 12px !important; line-height: 1.45 !important; color: #bdb3b3 !important;
}
html body .login-modal .login-close {
  top: 14px !important; right: 14px !important; width: 27px; height: 27px;
  display: grid; place-items: center; font-size: 22px !important;
  font-weight: 400; line-height: 1; border-radius: 6px;
  color: #d9d1d1 !important; cursor: pointer;
}
html body .login-modal .login-close:hover { background: rgba(255,255,255,.09); }
html body .login-modal .login-dialog form { margin: 0 !important; }
html body .login-modal .login-dialog label {
  display: block; margin: 0 0 12px !important;
  font-size: 12px !important; line-height: 1.45; font-weight: 650 !important;
  color: #e7dddd !important;
}
html body .login-modal .login-dialog input {
  box-sizing: border-box; width: 100%; height: 39px !important;
  margin-top: 5px !important; padding: 8px 11px !important;
  background: rgba(0,0,0,.33) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 7px !important; outline: none !important;
  box-shadow: none !important; font-size: 14px !important;
}
html body .login-modal .login-dialog input:focus {
  border-color: var(--gold, #ffce36) !important;
  box-shadow: 0 0 0 2px rgba(255,205,54,.12) !important;
}
html body .login-modal .login-dialog .login-submit {
  box-sizing: border-box; display: block; width: 100%; min-height: 39px !important;
  margin: 4px 0 0 !important; padding: 9px 12px !important;
  border-radius: 7px !important; font-size: 13px !important;
  font-weight: 800 !important; letter-spacing: .35px;
  background: linear-gradient(180deg,#d51c22,#a40810) !important;
  border: 1px solid rgba(255,110,110,.32) !important;
  color: #fff !important; box-shadow: none !important; cursor: pointer;
}
html body .login-modal .login-dialog .login-submit:hover { filter: brightness(1.1); }
html body .login-modal .login-dialog > p:last-child {
  margin: 14px 0 0 !important; text-align: center !important;
  font-size: 12px !important; line-height: 1.5 !important;
  color: #bdb3b3 !important;
}
html body .login-modal .login-dialog > p:last-child a { color: var(--gold, #ffce36) !important; }
html body .login-modal .login-error {
  margin: 0 0 13px !important; padding: 9px 11px !important;
  background: rgba(176,20,26,.18) !important;
  border: 1px solid rgba(255,91,91,.32) !important;
  border-radius: 7px !important; color: #ffb3b3 !important;
  font-size: 12px !important; line-height: 1.4 !important;
}
@media(max-width:400px) {
  html body .login-modal .login-dialog { width: 100% !important; padding: 21px 19px 17px !important; }
}

/* V23 — Session replaced warning: dark + theme gold, no red border */
.mp-session-alert{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.70);box-sizing:border-box}
.mp-session-alert-card{position:relative;width:min(725px,100%);overflow:hidden;background:#0d0d0d;color:#fff;border:0!important;border-radius:13px;box-shadow:0 22px 65px rgba(0,0,0,.6);font-family:inherit}
.mp-session-alert-close{position:absolute;top:13px;right:18px;border:0;background:transparent;color:#fff;font-size:29px;font-weight:700;cursor:pointer;line-height:1;padding:4px 6px}
.mp-session-alert-body{min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:35px 24px 25px;text-align:center;box-sizing:border-box}
.mp-session-alert-icon{width:82px;height:82px;color:var(--gold,#f0c434);flex:none}
.mp-session-alert-body p{margin:0;color:#fff;font-size:15px;font-weight:400;line-height:1.6}
.mp-session-alert-footer{display:flex;align-items:center;justify-content:center;min-height:84px;border-top:1px solid rgba(255,255,255,.10)}
.mp-session-alert-ok{min-width:125px;min-height:41px;padding:9px 25px;border:0;border-radius:8px;background:linear-gradient(180deg,#ffe68b,var(--gold,#d6a620));color:#111;font-size:15px;font-weight:800;cursor:pointer}
.mp-session-alert-ok:hover{filter:brightness(1.07)}
@media(max-width:520px){.mp-session-alert-card{border-radius:11px}.mp-session-alert-body{min-height:205px;gap:22px;padding:36px 20px 20px}.mp-session-alert-icon{width:68px;height:68px}.mp-session-alert-body p{font-size:13px}.mp-session-alert-footer{min-height:72px}}

/* ================================================================
   SLOT FAVORIT - DARK ELEGANT (sesuai class asli dari style.css)
   Mengubah warna saja: ukuran, scrolling, dan animasi tetap.
   ================================================================ */
.favorites {
  background: linear-gradient(135deg, rgba(14, 8, 9, .97), rgba(8, 7, 8, .97)) !important;
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25) !important;
}
.favorites h2 { color: var(--gold, #fcc200) !important; }
.favorites .fav-sub { color: #c9c2c2 !important; }
.favorites .favorite-tile {
  background: #111012 !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}
.favorites .favorite-tile > .img-placeholder {
  background: repeating-linear-gradient(
    -45deg, #171216 0, #171216 12px,
    #100d10 12px, #100d10 24px
  ) !important;
  border: 1px dashed rgba(255, 255, 255, .18) !important;
  color: var(--gold, #fcc200) !important;
}
.favorites .favorite-tile > .img-placeholder small {
  color: #bcb5b8 !important;
}
.favorites .favorite-image { background: transparent !important; }

/* V49: drawer scroll penuh tanpa panah (login & guest).
   Jarak navigasi dihitung oleh desktop-menu-v16.js. */
.mobile-drawer:not([hidden]) {
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
  padding-bottom: 35px !important;
}
/* Jangan mengecilkan link saat tinggi menu melebihi layar. */
.mobile-drawer > .drawer-title,
.mobile-drawer > a {
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  html body .mobile-drawer:not([hidden]) {
    bottom: var(--mp49-drawer-bottom, 78px) !important;
    max-height: calc(100dvh - var(--mahkota-mobile-header-height, 72px) - var(--mp49-drawer-bottom, 78px)) !important;
    overflow-y: auto !important;
    padding-bottom: 35px !important;
  }
}

/* V50: hanya area menu - memastikan bagian terakhir terlihat penuh. */
@media (max-width:768px) {
  html body .mobile-drawer:not([hidden]) {
    overflow-y:auto !important;
    overflow-x:hidden !important;
    min-height:0 !important;
    padding-bottom:26px !important;
    scroll-padding-bottom:18px;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  html body .mobile-drawer:not([hidden]) > a,
  html body .mobile-drawer:not([hidden]) > .drawer-title {
    flex-shrink:0 !important;
  }
}

/* V51: panel gelap penuh hingga tepat di tepi atas navigasi mobile.
   Batas real dihitung JS berdasarkan posisi navigasi; tetap scrollable. */
@media (max-width:768px) {
  html body #mobile-menu.mobile-drawer:not([hidden]) {
    bottom: var(--mp49-drawer-bottom, 66px) !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 10px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  html body #mobile-menu.mobile-drawer:not([hidden]) > a,
  html body #mobile-menu.mobile-drawer:not([hidden]) > .drawer-title {
    flex-shrink: 0 !important;
  }
}

/* FIX V57 - Ukuran password login & warna mata */

/* Samakan ukuran username dan password */
.desktop-login .mp-password-wrap {
    display: inline-flex !important;
    position: relative;
    width: 165px !important;
    min-width: 165px !important;
    flex: 0 0 165px !important;
}

/* Password mengikuti ukuran username */
.desktop-login .mp-password-wrap input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 40px !important;
}

/* Mata hitam agar terlihat di background putih */
.mp-eye-toggle {
    color: #111111 !important;
    opacity: 1 !important;
}

.mp-eye-toggle svg {
    stroke: #111111 !important;
}

/* Ukuran sama pada layar lebih kecil */
@media (min-width: 769px) and (max-width: 900px) {
    .desktop-login .mp-password-wrap {
        width: 125px !important;
        min-width: 125px !important;
        flex-basis: 125px !important;
    }
}