*{box-sizing:border-box}html{scroll-behavior:smooth}body.site-body{margin:0;background:#070812;color:#fff;font-family:Arial,Helvetica,sans-serif}.navbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 46px;background:rgba(10,12,24,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,196,0,.14)}.logo{font-weight:900;color:#ffc400;text-decoration:none;letter-spacing:.3px}.navbar nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.navbar a,.navbar span{color:#f7f7ff;text-decoration:none}.btn,.btn-small,.search-filter button{display:inline-block;background:linear-gradient(135deg,#ffe16b,#ffc400);color:#111!important;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;border:0;cursor:pointer;box-shadow:0 10px 30px rgba(255,196,0,.25)}.btn-small{padding:8px 13px}.btn-small.outline{background:transparent;color:#ffc400!important;border:1px solid #ffc400;box-shadow:none}.hero-slider{position:relative;min-height:470px;overflow:hidden;background:radial-gradient(circle at top right,#3e2f00,#070812 45%)}.hero-slide{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(135deg,#15172b,#080a15 50%,#241f05);background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .7s ease,transform .7s ease}.hero-slide.active{opacity:1;transform:scale(1)}.hero-content{max-width:780px;padding:80px 56px}.eyebrow{display:inline-block;padding:7px 12px;border:1px solid rgba(255,196,0,.35);border-radius:999px;color:#ffc400;background:rgba(255,196,0,.08);font-size:13px;font-weight:800}.hero-content h1{font-size:54px;line-height:1.02;margin:18px 0;color:#fff}.hero-content p{font-size:18px;color:#d6d7e7;max-width:650px;margin-bottom:28px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 48px;max-width:1200px;margin:-36px auto 20px;position:relative;z-index:2}.features div,.game-card,.promo-card,.testimonial-card,.faq-list details{background:linear-gradient(180deg,#121528,#0d0f1d);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.22)}.features strong{display:block;color:#ffc400;margin-bottom:8px}.features span,.section-head p,.promo-card p,.footer p{color:#bfc2d6}.section{padding:52px 48px;max-width:1240px;margin:0 auto}.section-head{text-align:center;margin-bottom:25px}.section-head span{color:#ffc400;font-weight:800}.section-head h2{font-size:34px;margin:8px 0}.search-filter{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 28px}.search-filter input,.search-filter select{padding:14px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#111426;color:#fff;min-width:250px}.btn-reset{color:#ffc400;text-decoration:none;padding:13px 0}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}.game-card{text-align:center;color:#fff;text-decoration:none;transition:.18s ease}.game-card:hover{border-color:#ffc400;transform:translateY(-4px)}.game-img{height:112px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:radial-gradient(circle,#403600,#171929);color:#ffc400;font-size:36px;font-weight:900;margin-bottom:14px}.game-img img{width:100%;height:100%;object-fit:cover;border-radius:14px}.game-card h3{margin:8px 0}.game-card small{color:#ffc400}.promo-grid,.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.promo-card{color:#fff;text-decoration:none}.promo-card span{display:inline-block;background:#ffc400;color:#111;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.payment-logos{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.payment-logos span{background:#fff;color:#111;border-radius:12px;padding:12px 18px;font-weight:900}.testimonial-card div{color:#ffc400}.faq-list{display:grid;gap:12px;max-width:900px;margin:auto}.faq-list summary{cursor:pointer;color:#ffc400;font-weight:800}.footer{padding:38px 48px;text-align:center;background:#0b0d18;border-top:1px solid rgba(255,255,255,.08)}.topup-container{max-width:900px;margin:35px auto;padding:0 20px}.topup-box,.auth-card{background:#111426;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px}.topup-container input,.auth-card input,.settings-form input,.settings-form select,.topup-container textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #333;background:#151722;color:#fff}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.product-card,.payment-option{display:block;background:#151722;border:1px solid #303241;border-radius:12px;padding:15px;cursor:pointer}.product-card strong{display:block;color:#ffc400;margin-top:8px}.auth-card{max-width:420px;margin:55px auto}.alert{padding:12px;border-radius:10px;margin:10px 0}.alert.error{background:#4a1d1d}.alert.success{background:#1f4a2d}.empty-state{text-align:center;width:100%;color:#ccc}@media(max-width:850px){.navbar{padding:14px;align-items:flex-start}.navbar,.navbar nav{flex-direction:column}.hero-content{padding:60px 22px}.hero-content h1{font-size:34px}.features{grid-template-columns:1fr;margin:0;padding:18px}.section{padding:36px 18px}.search-filter input,.search-filter select{min-width:100%}}
/* v2.1 checkout/topup polish */
.topup-hero{padding:70px 48px 35px;background:radial-gradient(circle at top right,rgba(255,196,0,.24),transparent 35%),linear-gradient(135deg,#101326,#070812);border-bottom:1px solid rgba(255,255,255,.08)}
.topup-hero h1{font-size:46px;margin:12px 0 8px;color:#ffc400}.topup-hero p{color:#d8dbec;margin:0;max-width:680px}
.topup-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;max-width:1240px;margin:32px auto;padding:0 24px;align-items:start}.topup-main{display:grid;gap:20px}.step-card,.order-summary,.invoice-card,.invoice-box{background:linear-gradient(180deg,#121528,#0d0f1d);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.22)}.step-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.step-title span{width:36px;height:36px;border-radius:12px;background:#ffc400;color:#111;display:grid;place-items:center;font-weight:900}.step-title h2{margin:0;color:#fff}.step-title p{margin:5px 0 0;color:#bfc2d6}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.form-grid label{display:grid;gap:8px;color:#e6e8f5;font-weight:700}.nominal-grid,.payment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.nominal-card,.pay-card{position:relative;display:flex;gap:12px;align-items:center;background:#15182a;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:15px;cursor:pointer;transition:.18s ease}.nominal-card:hover,.pay-card:hover{border-color:#ffc400;transform:translateY(-2px)}.nominal-card input,.pay-card input{position:absolute;opacity:0;pointer-events:none}.nominal-card:has(input:checked),.pay-card:has(input:checked){border-color:#ffc400;box-shadow:0 0 0 2px rgba(255,196,0,.14)}.nominal-icon{width:46px;height:46px;border-radius:14px;background:radial-gradient(circle,#403600,#171929);display:grid;place-items:center;overflow:hidden;flex:0 0 46px}.nominal-icon img{width:100%;height:100%;object-fit:cover}.nominal-card small,.pay-card small{display:block;color:#aeb2c7;margin-top:3px}.nominal-card b{margin-left:auto;color:#ffc400;white-space:nowrap}.pay-card{display:grid;gap:4px}.pay-card span{font-weight:900;color:#ffc400}.order-summary{position:sticky;top:92px}.order-summary h2,.invoice-box h2{margin-top:0;color:#ffc400}.summary-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.summary-row span{color:#aeb2c7}.summary-row b{text-align:right}.summary-row.total b{font-size:22px;color:#ffc400}.btn-checkout{display:block;width:100%;text-align:center;margin-top:18px;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,#ffe16b,#ffc400);border:0;color:#111;font-weight:900;text-decoration:none;cursor:pointer}.summary-back{display:block;text-align:center;color:#ffc400;text-decoration:none;margin-top:14px}.invoice-page{max-width:1180px;margin:36px auto;padding:0 24px}.invoice-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.invoice-head h1{margin:10px 0;color:#ffc400}.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.status-pill{display:inline-block;border-radius:999px;padding:10px 14px;background:#332b0b;color:#ffc400;font-weight:900}.status-pill.paid{background:#153d28;color:#62e68f}.status-pill.failed,.status-pill.expired{background:#4a1d1d;color:#ff8c8c}.manual-note{padding:14px;border-radius:14px;background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.22);color:#ffe28a;margin-top:14px}.qr-img{max-width:190px;border-radius:14px;background:#fff;padding:10px;margin:16px 0}.invoice-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}@media(max-width:900px){.topup-layout,.invoice-grid{grid-template-columns:1fr}.order-summary{position:static}.topup-hero{padding:46px 22px}.topup-hero h1{font-size:34px}.invoice-head{display:block}}
.auth-card h1{color:#ffc400;margin-top:0}.auth-card a{color:#ffc400;text-decoration:none}.auth-card label{display:block;margin:14px 0 8px;font-weight:800;color:#e8eaf7}.auth-card-wide{max-width:520px}.auth-muted{color:#bfc2d6;line-height:1.5}.reset-link-box{margin-top:18px;padding:16px;border-radius:16px;background:rgba(255,196,0,.08);border:1px solid rgba(255,196,0,.25)}.reset-link-box p,.reset-link-box small{color:#d7d9e8}.reset-link-box small{display:block;margin-top:10px;text-align:center}.alert.info{background:#1d2d4a}
/* v2.2 user profile + phone register */
.field-help{display:block;color:#aeb2c7;margin-top:7px;line-height:1.4}.profile-page{max-width:1180px;margin:0 auto;padding:44px 24px}.profile-head{text-align:center;margin-bottom:26px}.profile-head h1{font-size:42px;color:#ffc400;margin:12px 0 8px}.profile-head p{color:#c9ccdc;margin:0}.profile-messages{max-width:760px;margin:0 auto 18px}.profile-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:22px;align-items:start}.profile-card{background:linear-gradient(180deg,#121528,#0d0f1d);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.22);margin-bottom:22px}.profile-card h2{margin-top:0;color:#ffc400}.profile-form{display:grid;gap:14px}.profile-form label{display:grid;gap:8px;color:#e8eaf7;font-weight:800}.profile-form input{width:100%;padding:13px;border-radius:12px;border:1px solid #333849;background:#151722;color:#fff}.password-divider{margin-top:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}.password-divider h3{margin:0 0 5px;color:#fff}.password-divider p{margin:0;color:#aeb2c7}.profile-avatar{width:82px;height:82px;border-radius:26px;background:linear-gradient(135deg,#ffe16b,#ffc400);display:grid;place-items:center;color:#111;font-size:36px;font-weight:900;margin:6px 0 18px}.profile-logout{margin-top:18px}.order-history{margin-top:4px}.history-table{overflow-x:auto}.history-table table{width:100%;border-collapse:collapse;min-width:760px}.history-table th,.history-table td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.history-table th{color:#ffc400;background:rgba(255,196,0,.06)}.history-table td{color:#f2f3fb}.history-table a{color:#ffc400;text-decoration:none;font-weight:800}@media(max-width:900px){.profile-layout{grid-template-columns:1fr}.profile-head h1{font-size:34px}}
/* User cancel order */
.status-pill.cancelled{background:#2b2d38;color:#c9ccdc}.status-pill.processing{background:#172f45;color:#8fd3ff}.invoice-messages{margin-bottom:18px}.cancel-order-form{margin:0}.btn-small.danger{background:#4a1d1d!important;color:#ffb0b0!important;border:1px solid rgba(255,110,110,.35);box-shadow:none}.btn-small.danger:hover{filter:brightness(1.08)}.history-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.history-actions form{margin:0}.history-actions button{border:1px solid rgba(255,110,110,.35);background:#4a1d1d;color:#ffb0b0;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.invoice-actions{align-items:center;flex-wrap:wrap}@media(max-width:700px){.invoice-actions{justify-content:stretch}.invoice-actions a,.invoice-actions form,.invoice-actions button{width:100%;text-align:center}.history-actions{display:grid;gap:8px}}
/* ===== User Account / Profile Full ===== */
.user-menu{position:relative;display:inline-block}.user-menu-btn{background:rgba(255,205,54,.12);border:1px solid rgba(255,205,54,.45);color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}.user-menu-panel{display:none;position:absolute;right:0;top:115%;min-width:220px;background:#101321;border:1px solid rgba(255,205,54,.25);border-radius:16px;padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.45);z-index:99}.user-menu:hover .user-menu-panel,.user-menu.open .user-menu-panel{display:block}.user-menu-panel a{display:block;padding:10px 12px;border-radius:10px;color:#fff;text-decoration:none}.user-menu-panel a:hover{background:rgba(255,205,54,.12)}.user-menu-panel .danger{color:#ff6b6b}.account-nav{max-width:1180px;margin:20px auto 0;display:flex;gap:10px;flex-wrap:wrap}.account-nav a{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;font-weight:800}.account-nav a:hover{border-color:rgba(255,205,54,.5);color:#ffd43b}.profile-hero-card{max-width:1180px;margin:22px auto;background:linear-gradient(135deg,rgba(255,205,54,.16),rgba(10,12,24,.92));border:1px solid rgba(255,205,54,.28);border-radius:24px;padding:24px;display:flex;align-items:center;gap:18px}.avatar-large,.profile-avatar.photo{width:92px;height:92px;border-radius:24px;background:radial-gradient(circle,rgba(255,205,54,.4),rgba(255,205,54,.08));border:1px solid rgba(255,205,54,.35);display:grid;place-items:center;color:#ffd43b;font-size:40px;font-weight:900;overflow:hidden}.avatar-large img,.profile-avatar.photo img{width:100%;height:100%;object-fit:cover}.hero-action{margin-left:auto}.stat-grid{max-width:1180px;margin:18px auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.stat-card{background:#111526;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px}.stat-card span{display:block;color:#aab1c7;font-size:12px}.stat-card b{display:block;color:#ffd43b;font-size:24px;margin-top:7px}.profile-main-card{text-align:center}.muted{color:#aab1c7}.profile-actions-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}.profile-avatar.photo.edit-avatar{margin:0 auto 15px}.inline-check{display:flex!important;gap:8px;align-items:center}.inline-check input{width:auto!important}.order-filters{max-width:1180px;margin:0 auto 16px;display:flex;gap:10px;flex-wrap:wrap}.order-filters a{padding:9px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:#fff;text-decoration:none;background:#111526}.favorite-grid{max-width:1180px;margin:18px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.favorite-card{background:#111526;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;text-align:center}.favorite-card h3{margin:10px 0;color:#fff}.favorite-card a{display:inline-block;margin-top:10px;color:#ffd43b}.small-thumb{width:88px;height:70px;margin:0 auto;border-radius:14px;overflow:hidden;background:rgba(255,205,54,.08);display:grid;place-items:center;color:#ffd43b;font-weight:900}.small-thumb img{width:100%;height:100%;object-fit:cover}.favorite-mini-list{display:grid;gap:10px}.favorite-mini-list a{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none}.status-pill.cancelled,.status-pill.failed{background:rgba(255,87,87,.14);color:#ff6b6b}.status-pill.processing,.status-pill.paid,.status-pill.success,.status-pill.completed{background:rgba(35,220,125,.14);color:#49e68e}.status-pill.pending{background:rgba(255,205,54,.14);color:#ffd43b}@media(max-width:900px){.profile-hero-card{flex-direction:column;text-align:center}.hero-action{margin-left:0}.stat-grid{grid-template-columns:repeat(2,1fr)}.favorite-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.stat-grid,.favorite-grid{grid-template-columns:1fr}.user-menu-panel{right:auto;left:0}.account-nav{padding:0 12px}.profile-hero-card{margin-left:12px;margin-right:12px}}
/* Dynamic payment methods */
.pay-logo{width:42px;height:42px;border-radius:12px;object-fit:cover;background:#fff;padding:4px}.pay-logo.big{width:68px;height:68px;margin-bottom:10px}.pay-method-card{min-height:96px}.manual-pay-detail{margin:12px 0;padding:14px;border-radius:16px;background:rgba(255,196,0,.06);border:1px solid rgba(255,196,0,.16)}
/* ===== Auth Login/Register Premium Banner - Raja Topup Games ===== */
.auth-page{min-height:100vh;background:radial-gradient(circle at 18% 12%,rgba(255,196,0,.18),transparent 30%),#05060c;display:flex;align-items:center;justify-content:center;padding:26px;overflow-x:hidden}.auth-shell{width:min(1180px,100%);min-height:720px;display:grid;grid-template-columns:1.08fr .92fr;background:rgba(8,10,18,.96);border:1px solid rgba(255,196,0,.22);border-radius:28px;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}.auth-banner{position:relative;min-height:720px;background:url('../img/auth/raja-auth-banner.jpg') center/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between;padding:34px;isolation:isolate}.auth-banner:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,196,0,.12),transparent 28%),linear-gradient(90deg,rgba(3,4,8,.28),rgba(3,4,8,.72));z-index:-1}.auth-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.72));z-index:-1}.auth-brand-badge{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;padding:12px 16px;border-radius:18px;background:rgba(5,6,12,.56);border:1px solid rgba(255,196,0,.38);backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.35)}.auth-crown,.auth-logo-mini span{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ffe16b,#ffc400);color:#111;display:grid;place-items:center;font-size:28px;font-weight:900;box-shadow:0 0 24px rgba(255,196,0,.34)}.auth-brand-badge span{display:block;font-size:13px;font-weight:900;color:#fff;letter-spacing:1.3px}.auth-brand-badge strong{display:block;color:#ffc400;font-size:18px;letter-spacing:4px}.auth-banner-content{margin-top:auto;max-width:560px}.auth-kicker{display:inline-block;margin:0 0 12px;padding:8px 13px;border-radius:999px;background:rgba(255,196,0,.12);border:1px solid rgba(255,196,0,.34);color:#ffe16b;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.7px}.auth-banner-content h1{margin:0;color:#fff;font-size:58px;line-height:.98;font-weight:1000;letter-spacing:-1.5px;text-shadow:0 10px 35px rgba(0,0,0,.75)}.auth-banner-content h1 span{color:#ffc400}.auth-banner-text{max-width:500px;color:#e9e9ef;font-size:17px;line-height:1.55;text-shadow:0 4px 20px rgba(0,0,0,.8)}.auth-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.auth-benefits div{background:rgba(5,6,12,.62);border:1px solid rgba(255,196,0,.22);border-radius:18px;padding:14px 10px;text-align:center;backdrop-filter:blur(8px)}.auth-benefits b{display:block;color:#ffc400;font-size:24px;margin-bottom:6px}.auth-benefits span{display:block;color:#fff;font-weight:800;font-size:12px}.auth-panel{padding:48px 44px;background:linear-gradient(180deg,rgba(22,24,35,.94),rgba(12,14,25,.98));border-left:1px solid rgba(255,196,0,.18);display:flex;flex-direction:column;justify-content:center}.auth-panel-register{justify-content:flex-start;overflow:auto}.auth-logo-mini{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:#ffc400;font-weight:1000;letter-spacing:.5px}.auth-logo-mini span{width:34px;height:34px;border-radius:12px;font-size:22px}.auth-panel h1{margin:0 0 8px;color:#fff;font-size:34px;line-height:1.15}.auth-panel .auth-muted{margin:0 0 24px;color:#bfc2d6;line-height:1.55}.auth-form label{display:block;margin:15px 0 8px;font-weight:900;color:#f6f7ff}.auth-input-wrap{position:relative}.auth-input-wrap input{width:100%;height:56px;padding:0 52px;border-radius:15px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);color:#fff;outline:none;transition:.18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}.auth-input-wrap input:focus{border-color:rgba(255,196,0,.75);box-shadow:0 0 0 4px rgba(255,196,0,.12)}.auth-input-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);opacity:.86;z-index:1}.password-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:17px}.password-eye:hover{background:rgba(255,196,0,.16)}.auth-link-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0 4px}.auth-link-row a,.auth-back,.auth-panel a{color:#ffc400;text-decoration:none;font-weight:800}.auth-submit{height:56px;margin-top:18px;text-transform:uppercase;letter-spacing:.6px;box-shadow:0 12px 30px rgba(255,196,0,.22)}.auth-divider{display:flex;align-items:center;gap:14px;margin:25px 0 16px;color:#aeb2c7}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.14)}.auth-divider span{white-space:nowrap}.auth-outline-btn{display:block;text-align:center;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,196,0,.72);color:#ffc400!important;font-weight:900;text-decoration:none}.auth-outline-btn:hover{background:rgba(255,196,0,.1)}.auth-back{display:block;text-align:center;margin-top:18px;color:#d9dbea!important;font-size:14px}.auth-panel .field-help{margin:7px 0 0;color:#aeb2c7}.auth-panel .alert{margin:0 0 14px}.auth-register-page .auth-shell{min-height:820px}.auth-register-page .auth-banner{min-height:820px}@media(max-width:980px){.auth-page{padding:0;align-items:stretch}.auth-shell{min-height:100vh;border-radius:0;grid-template-columns:1fr}.auth-banner{min-height:330px;padding:24px}.auth-banner-content h1{font-size:42px}.auth-banner-text{font-size:15px}.auth-benefits{grid-template-columns:repeat(3,1fr);gap:8px}.auth-panel{border-left:0;border-top:1px solid rgba(255,196,0,.18);padding:34px 22px}.auth-register-page .auth-shell,.auth-register-page .auth-banner{min-height:auto}}@media(max-width:560px){.auth-banner{min-height:260px}.auth-brand-badge{padding:10px 12px}.auth-crown{width:36px;height:36px;font-size:24px}.auth-brand-badge strong{font-size:15px}.auth-banner-content h1{font-size:32px}.auth-benefits{display:none}.auth-panel h1{font-size:28px}.auth-input-wrap input{height:52px}.auth-shell{box-shadow:none}}
/* Fix menu profil user: dropdown harus bisa diklik di home, desktop, dan HP */
.navbar{z-index:9999}
.navbar nav{position:relative}
.user-menu{position:relative;display:inline-block;z-index:10000}
.user-menu-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.user-menu-panel{z-index:10001;pointer-events:auto}
.user-menu.open .user-menu-panel{display:block}
.user-menu-panel a{white-space:nowrap}
@media(max-width:850px){.user-menu{width:100%}.user-menu-btn{width:100%;justify-content:space-between}.user-menu-panel{position:static;width:100%;margin-top:8px}}
/* Catalog sections */
.catalog-block{margin-top:28px}
.catalog-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
.catalog-title span{font-size:22px;font-weight:900;color:#fff;text-shadow:0 0 18px rgba(255,204,51,.18)}
.catalog-title p{margin:0;color:#cfd3e6;font-size:14px}
.game-card{position:relative;overflow:hidden}
.game-badge{position:absolute;top:10px;right:10px;z-index:2;background:linear-gradient(135deg,#ffca3a,#f59e0b);color:#111;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900;box-shadow:0 8px 18px rgba(245,158,11,.25)}
@media(max-width:720px){.catalog-title{display:block}.catalog-title p{margin-top:6px}.search-filter select{width:100%}}
/* ===== Responsive polish HP / iPhone / Tablet / PC ===== */
img, video { max-width: 100%; height: auto; }
.mobile-nav-toggle{display:none;background:rgba(255,196,0,.12);color:#ffc400;border:1px solid rgba(255,196,0,.35);border-radius:12px;padding:9px 12px;font-weight:900;cursor:pointer}
.navbar nav.open{display:flex!important}
@media (min-width:1200px){
.section,.topup-layout,.invoice-page,.profile-page{max-width:1280px}
.game-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:1024px){
.navbar{padding:14px 22px}.hero-content h1{font-size:44px}.features{grid-template-columns:repeat(2,1fr);padding:22px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.auth-shell{width:100%}.auth-banner-content h1{font-size:46px}
}
@media (max-width:850px){
.navbar{position:sticky;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 14px}.navbar .logo{font-size:15px;line-height:1.25}.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center}.navbar nav{display:none;width:100%;grid-column:1/-1;flex-direction:column;align-items:stretch;gap:8px;background:rgba(9,11,22,.96);border:1px solid rgba(255,196,0,.16);border-radius:16px;padding:12px;margin-top:4px}.navbar nav a,.navbar nav .btn-small{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04)}.navbar nav .btn-small{text-align:center}.user-menu{width:100%}.user-menu-panel{position:static!important;display:none;width:100%;margin-top:8px;background:rgba(15,18,34,.98);border:1px solid rgba(255,196,0,.16);border-radius:14px;padding:8px}.user-menu.open .user-menu-panel{display:block}.user-menu-panel a{display:block;text-align:left;background:transparent!important}
.hero-slider{min-height:360px}.hero-content{padding:46px 18px}.hero-content h1{font-size:32px}.hero-content p{font-size:15px}.features{grid-template-columns:1fr;margin:0;padding:16px}.section{padding:32px 14px}.section-head h2{font-size:27px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card{padding:14px}.game-img{height:96px}.promo-grid,.testimonial-grid{grid-template-columns:1fr}.payment-logos span{flex:1 1 130px;text-align:center}.topup-layout,.invoice-grid{grid-template-columns:1fr;padding:0 14px}.topup-hero{padding:36px 16px}.topup-hero h1{font-size:30px}.nominal-grid,.payment-grid,.product-grid{grid-template-columns:1fr}.order-summary{position:static}.invoice-head{display:block}.invoice-actions{justify-content:stretch;flex-direction:column}.invoice-actions .btn,.invoice-actions .btn-small{width:100%;text-align:center}.summary-row{font-size:14px}.auth-card{margin:24px 12px}.auth-page{padding:0}.auth-shell{border-radius:0;min-height:100vh}.auth-banner{min-height:280px}.auth-panel{padding:28px 18px}.auth-benefits{display:none}.auth-link-row{gap:12px;flex-wrap:wrap}.profile-grid,.profile-columns{grid-template-columns:1fr!important}.profile-hero-card,.profile-main-card{margin-left:10px;margin-right:10px}.stat-grid{grid-template-columns:repeat(2,1fr)!important}.favorite-grid{grid-template-columns:repeat(2,1fr)!important;padding:0 12px}.order-filters{padding:0 12px}
}
@media (max-width:480px){
body.site-body{font-size:14px}.logo{font-size:14px}.hero-slider{min-height:320px}.hero-content h1{font-size:28px}.eyebrow{font-size:11px}.game-grid{grid-template-columns:1fr 1fr}.game-card h3{font-size:15px}.game-img{height:86px}.btn,.btn-small,.btn-checkout,.search-filter button{width:100%;text-align:center}.search-filter{gap:9px}.search-filter input,.search-filter select{min-width:0;width:100%}.topup-container{padding:0 12px;margin:20px auto}.step-card,.order-summary,.invoice-card,.invoice-box,.topup-box{padding:16px;border-radius:16px}.form-grid{grid-template-columns:1fr}.stat-grid,.favorite-grid{grid-template-columns:1fr!important}.auth-banner{min-height:235px;padding:18px}.auth-banner-content h1{font-size:27px}.auth-brand-badge strong{letter-spacing:2px}.auth-panel h1{font-size:25px}.auth-input-wrap input{height:50px}.footer{padding:28px 16px}.footer h3{font-size:18px}
}
@supports (-webkit-touch-callout:none){
.auth-page,.auth-shell{min-height:-webkit-fill-available}.navbar{backdrop-filter:saturate(140%) blur(12px)}input,select,textarea{font-size:16px!important}
}
/* Order timeout & user notifications */
.notif-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:999px;
background:#ff3b3b;color:#fff;font-size:11px;font-weight:800;margin-left:4px;
}
.order-countdown{
margin-top:12px;display:inline-flex;gap:10px;align-items:center;
padding:10px 14px;border:1px solid rgba(255,193,7,.35);border-radius:14px;
background:rgba(255,193,7,.08);color:#ffd86b;
}
.order-countdown span{font-size:13px;color:#f5d98a}.order-countdown strong{font-size:22px;letter-spacing:1px}.order-countdown.expired{border-color:rgba(255,70,70,.45);background:rgba(255,70,70,.12);color:#ff7b7b}
.notification-list{display:grid;gap:12px}.notification-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.notification-item.unread{border-color:rgba(255,193,7,.45);background:rgba(255,193,7,.08)}.notification-item h3{margin:0 0 6px;color:#fff}.notification-item p{margin:0 0 6px;color:#d9d9d9}.notification-item small{color:#aaa}
@media(max-width:700px){.notification-item{align-items:flex-start;flex-direction:column}.order-countdown{width:100%;justify-content:space-between}.order-countdown strong{font-size:20px}}
/* Wallet / Top Up Saldo */
.wallet-page .wallet-stats{margin-bottom:22px;}
.wallet-form-card .bonus-info{margin:14px 0;padding:14px;border:1px solid rgba(255,193,7,.22);border-radius:16px;background:rgba(255,193,7,.07);color:#f7e7b2;}
.wallet-form-card .bonus-info ul{margin:10px 0 0 18px;padding:0;line-height:1.7;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto;}
.btn-checkout.outline{background:transparent;border:1px solid rgba(255,193,7,.6);color:#ffd76a;}
.status-pill.approved{background:rgba(20,184,166,.18);color:#5eead4;}
.status-pill.rejected,.status-pill.cancelled{background:rgba(239,68,68,.18);color:#fca5a5;}
.status-pill.pending{background:rgba(245,158,11,.18);color:#fcd34d;}
@media(max-width:760px){.hero-actions{margin-left:0;width:100%;}.hero-actions .btn-checkout{width:100%;text-align:center;}.wallet-form-card select,.wallet-form-card input{font-size:16px;}}
/* PWA install button */
.install-pwa-btn{
position:fixed;right:18px;bottom:18px;z-index:60;border:0;border-radius:999px;
background:linear-gradient(135deg,#ffc83d,#ffb100);color:#111827;font-weight:900;
padding:12px 18px;box-shadow:0 12px 32px rgba(255,184,0,.35);cursor:pointer
}
.install-pwa-btn[hidden]{display:none!important}
/* Live Chat */
.chat-box,.chat-panel-admin{display:flex;flex-direction:column;gap:14px}
.chat-messages{height:430px;overflow:auto;border:1px solid rgba(148,163,184,.25);border-radius:18px;padding:18px;background:rgba(255,255,255,.72)}
.chat-message{display:flex;margin-bottom:12px}.chat-message.mine{justify-content:flex-end}.chat-message.staff{justify-content:flex-start}
.chat-bubble{max-width:min(78%,520px);padding:12px 14px;border-radius:16px;background:#f1f5f9;color:#0f172a;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.chat-message.mine .chat-bubble{background:#ffe08a}.chat-bubble p{margin:6px 0;line-height:1.45}.chat-bubble small{color:#64748b}
.chat-form{display:flex;gap:10px}.chat-form input{flex:1;border:1px solid rgba(148,163,184,.45);border-radius:14px;padding:13px 14px}.chat-form button{border:0;border-radius:14px;padding:13px 18px;background:#ffc83d;font-weight:900;cursor:pointer}
.chat-admin-layout{display:grid;grid-template-columns:320px 1fr;gap:18px}.chat-thread-list{max-height:650px;overflow:auto}.chat-thread-item{display:block;padding:12px;border:1px solid rgba(148,163,184,.2);border-radius:14px;margin-bottom:10px;text-decoration:none;color:inherit;background:rgba(255,255,255,.04)}.chat-thread-item.active{border-color:#ffc83d;background:rgba(255,200,61,.12)}.chat-thread-item small{display:block;color:#94a3b8;margin-top:3px}.chat-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid rgba(148,163,184,.2);padding-bottom:12px}.muted{color:#94a3b8}.empty-state{text-align:center;color:#64748b;padding:30px}
@media(max-width:800px){.chat-admin-layout{grid-template-columns:1fr}.chat-messages{height:360px}.chat-form{flex-direction:column}.chat-bubble{max-width:92%}.install-pwa-btn{left:14px;right:14px;bottom:14px;width:auto}}
/* Topup form cleanup: data pembeli otomatis dari akun login */
.compact-game-fields label input { min-height: 44px; }
.buyer-auto-card { background: linear-gradient(135deg, rgba(255, 199, 48, .08), rgba(255,255,255,.03)); }
.buyer-auto-box { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid rgba(255,199,48,.22); border-radius:14px; background:rgba(255,255,255,.04); }
.buyer-auto-box span { font-weight:800; color:var(--gold, #ffc730); }
.buyer-auto-box small { opacity:.85; word-break:break-word; }
@media (max-width: 640px) {
.compact-game-fields { grid-template-columns: 1fr !important; }
.buyer-auto-box { font-size: 14px; }
}
/* === Raja Topup Light Theme Override v3.1 === */
:root{--rt-bg:#f6f8fb;--rt-surface:#ffffff;--rt-soft:#f9fafb;--rt-border:#e5e7eb;--rt-text:#111827;--rt-muted:#6b7280;--rt-gold:#fbbf24;--rt-gold2:#f59e0b;--rt-blue:#2563eb;--rt-green:#16a34a;--rt-red:#dc2626;}
html,body,body.site-body{background:var(--rt-bg)!important;color:var(--rt-text)!important;font-family:Arial,Helvetica,sans-serif;}
.navbar{background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--rt-border)!important;box-shadow:0 8px 26px rgba(15,23,42,.08)!important;backdrop-filter:blur(14px)}
.logo,.navbar .logo{color:#b77900!important}.navbar a,.navbar span{color:var(--rt-text)!important}.navbar nav a:hover{color:#b77900!important}
.btn,.btn-small,.search-filter button,.btn-checkout{background:linear-gradient(135deg,#fde68a,#fbbf24)!important;color:#111827!important;box-shadow:0 10px 22px rgba(245,158,11,.22)!important}.btn-small.outline{background:#fff!important;color:#b77900!important;border:1px solid #fbbf24!important;box-shadow:none!important}
.hero-slider,.topup-hero{background:linear-gradient(135deg,#ffffff 0%,#fff7d6 45%,#eef4ff 100%)!important;border-bottom:1px solid var(--rt-border)!important}.hero-slide{background:linear-gradient(135deg,#ffffff,#fff7d6 55%,#edf4ff)!important}.hero-content h1,.topup-hero h1,.section-head h2,.step-title h2{color:var(--rt-text)!important}.hero-content p,.topup-hero p,.section-head p,.features span,.promo-card p,.footer p,.step-title p,.auth-muted,.field-help{color:var(--rt-muted)!important}.eyebrow,.section-head span,.features strong,.game-card small,.summary-back,.auth-card a,.faq-list summary{color:#b77900!important}.eyebrow{background:#fff8db!important;border-color:#fcd34d!important}
.features div,.game-card,.promo-card,.testimonial-card,.faq-list details,.topup-box,.auth-card,.step-card,.order-summary,.invoice-card,.invoice-box,.profile-card,.wallet-card,.notification-card,.chat-panel,.chat-thread-item,.chat-box{background:var(--rt-surface)!important;color:var(--rt-text)!important;border:1px solid var(--rt-border)!important;box-shadow:0 12px 32px rgba(15,23,42,.08)!important}
.game-card,.promo-card{color:var(--rt-text)!important}.game-card:hover{border-color:var(--rt-gold)!important;transform:translateY(-4px)}.game-img,.nominal-icon{background:linear-gradient(135deg,#fff7d6,#eaf1ff)!important;color:#b77900!important;border:1px solid #f1e2a6!important}.footer{background:#fff!important;border-top:1px solid var(--rt-border)!important;color:var(--rt-text)!important}
.search-filter input,.search-filter select,.topup-container input,.auth-card input,.settings-form input,.settings-form select,.topup-container textarea,.form-grid input,.form-grid select,.form-grid textarea{background:#fff!important;color:var(--rt-text)!important;border:1px solid #cbd5e1!important}.search-filter input::placeholder,.auth-card input::placeholder,.topup-container input::placeholder{color:#94a3b8!important}.btn-reset{color:#b77900!important}
.product-card,.payment-option,.nominal-card,.pay-card{background:#fff!important;color:var(--rt-text)!important;border:1px solid var(--rt-border)!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important}.nominal-card:hover,.pay-card:hover,.nominal-card:has(input:checked),.pay-card:has(input:checked){border-color:#fbbf24!important;box-shadow:0 0 0 2px rgba(251,191,36,.22)!important}.nominal-card small,.pay-card small,.summary-row span{color:var(--rt-muted)!important}.nominal-card b,.pay-card span,.order-summary h2,.invoice-box h2,.summary-row.total b,.product-card strong{color:#b77900!important}.summary-row{border-bottom:1px solid var(--rt-border)!important}
.alert.error{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fecaca!important}.alert.success{background:#dcfce7!important;color:#166534!important;border:1px solid #bbf7d0!important}.alert.info{background:#dbeafe!important;color:#1e40af!important;border:1px solid #bfdbfe!important}.status-pill{background:#fff7d6!important;color:#92400e!important;border:1px solid #fcd34d!important}.status-pill.paid,.status-pill.approved{background:#dcfce7!important;color:#166534!important;border-color:#bbf7d0!important}.status-pill.failed,.status-pill.expired,.status-pill.rejected,.status-pill.cancelled{background:#fee2e2!important;color:#991b1b!important;border-color:#fecaca!important}
.password-field .toggle-pass{background:#fff7d6!important;color:#b77900!important;border:1px solid #fcd34d!important}.manual-note{background:#fff8db!important;border-color:#fcd34d!important;color:#92400e!important}.payment-logos span{box-shadow:0 8px 18px rgba(15,23,42,.08)!important;border:1px solid var(--rt-border)!important}
@media(max-width:900px){body.site-body{background:var(--rt-bg)!important}.navbar{padding:12px 16px!important}.features{margin:0!important}.topup-layout,.invoice-grid{grid-template-columns:1fr!important}.order-summary{position:static!important}.hero-content h1{font-size:34px!important}.section{padding:34px 16px!important}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.game-img{height:96px!important}.search-filter input,.search-filter select{min-width:100%!important}}
@media(max-width:520px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.game-card{padding:12px!important}.game-card h3{font-size:14px!important}.hero-slider{min-height:360px!important}.hero-content{padding:48px 18px!important}}
/* === Raja Topup Games Dark Premium Theme v3.2 === */
:root{
--rt-bg:#111827;
--rt-bg-2:#0f172a;
--rt-surface:#1a2235;
--rt-card:#20283a;
--rt-card-2:#242d42;
--rt-border:#334155;
--rt-border-soft:rgba(251,191,36,.22);
--rt-text:#f8fafc;
--rt-muted:#cbd5e1;
--rt-muted-2:#94a3b8;
--rt-gold:#fbbf24;
--rt-gold-2:#f59e0b;
--rt-green:#22c55e;
--rt-red:#ef4444;
--rt-blue:#38bdf8;
}
html,body,body.site-body{background:var(--rt-bg)!important;color:var(--rt-text)!important;font-family:Inter,Arial,Helvetica,sans-serif!important;}
body.site-body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at top left,rgba(251,191,36,.13),transparent 28%),radial-gradient(circle at top right,rgba(56,189,248,.10),transparent 32%),linear-gradient(180deg,#111827,#0f172a 55%,#111827)!important;}
.navbar{background:rgba(26,34,53,.88)!important;border-bottom:1px solid var(--rt-border-soft)!important;box-shadow:0 12px 35px rgba(0,0,0,.22)!important;backdrop-filter:blur(14px)!important;}
.logo{color:var(--rt-gold)!important}.navbar a,.navbar span{color:var(--rt-text)!important}.navbar nav a:hover{color:var(--rt-gold)!important}.btn,.btn-small,.search-filter button,.btn-checkout,.auth-card button{background:linear-gradient(135deg,#ffe08a,var(--rt-gold),var(--rt-gold-2))!important;color:#111827!important;border:0!important;box-shadow:0 12px 30px rgba(251,191,36,.24)!important;}
.btn:hover,.btn-small:hover,.btn-checkout:hover{filter:brightness(1.04);transform:translateY(-1px)}.btn-small.outline{background:rgba(251,191,36,.08)!important;color:var(--rt-gold)!important;border:1px solid rgba(251,191,36,.55)!important;box-shadow:none!important;}
.hero-slider,.topup-hero{background:radial-gradient(circle at 76% 20%,rgba(251,191,36,.18),transparent 28%),radial-gradient(circle at 35% 5%,rgba(56,189,248,.10),transparent 35%),linear-gradient(135deg,#1a2235,#111827 55%,#0f172a)!important;border-bottom:1px solid var(--rt-border-soft)!important;}
.hero-slide{background:radial-gradient(circle at 70% 30%,rgba(251,191,36,.18),transparent 30%),linear-gradient(135deg,#1a2235,#111827 56%,#0f172a)!important;}.hero-content h1,.section-head h2,.topup-hero h1{color:var(--rt-text)!important;text-shadow:0 8px 35px rgba(0,0,0,.35)}.hero-content p,.topup-hero p,.section-head p{color:var(--rt-muted)!important}.eyebrow{background:rgba(251,191,36,.12)!important;border:1px solid rgba(251,191,36,.40)!important;color:var(--rt-gold)!important;}
.features div,.game-card,.promo-card,.testimonial-card,.faq-list details,.topup-box,.auth-card,.step-card,.order-summary,.invoice-card,.invoice-box,.profile-card,.wallet-card,.notification-card,.chat-panel,.chat-box,.panel,.card{background:linear-gradient(180deg,var(--rt-card-2),var(--rt-card))!important;color:var(--rt-text)!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:0 18px 55px rgba(0,0,0,.22)!important;}
.features strong,.section-head span,.promo-card span,.faq-list summary,.game-card small,.order-summary h2,.invoice-box h2,.step-title h2,.auth-card h1,.auth-card a,.profile-card h2{color:var(--rt-gold)!important}.features span,.promo-card p,.footer p,.auth-muted,.field-help,.step-title p,.nominal-card small,.pay-card small{color:var(--rt-muted)!important}.section{background:transparent!important}.search-filter input,.search-filter select,.topup-container input,.auth-card input,.settings-form input,.settings-form select,.topup-container textarea,.form-grid input,.form-grid select,.form-grid textarea{background:#111827!important;color:var(--rt-text)!important;border:1px solid var(--rt-border)!important;outline:none!important;}.search-filter input:focus,.search-filter select:focus,.topup-container input:focus,.auth-card input:focus{border-color:var(--rt-gold)!important;box-shadow:0 0 0 3px rgba(251,191,36,.12)!important;}.search-filter input::placeholder,.auth-card input::placeholder,.topup-container input::placeholder{color:var(--rt-muted-2)!important}.btn-reset{color:var(--rt-gold)!important}.game-img,.nominal-icon{background:radial-gradient(circle at top,rgba(251,191,36,.34),rgba(251,191,36,.10) 32%,#111827 72%)!important;color:var(--rt-gold)!important;border:1px solid rgba(251,191,36,.18)!important;}.game-card:hover,.nominal-card:hover,.pay-card:hover{border-color:var(--rt-gold)!important;box-shadow:0 0 0 1px rgba(251,191,36,.20),0 22px 55px rgba(251,191,36,.10)!important;transform:translateY(-4px)}.payment-logos span{background:#111827!important;color:var(--rt-text)!important;border:1px solid var(--rt-border)!important}.footer{background:#0f172a!important;border-top:1px solid var(--rt-border)!important;color:var(--rt-muted)!important}.product-card,.payment-option,.nominal-card,.pay-card{background:#151e2f!important;border:1px solid rgba(148,163,184,.20)!important;color:var(--rt-text)!important}.nominal-card:has(input:checked),.pay-card:has(input:checked){border-color:var(--rt-gold)!important;box-shadow:0 0 0 2px rgba(251,191,36,.18)!important}.nominal-card b,.pay-card span,.summary-row.total b{color:var(--rt-gold)!important}.summary-row{border-bottom:1px solid rgba(148,163,184,.18)!important}.summary-row span{color:var(--rt-muted)!important}.manual-note{background:rgba(251,191,36,.10)!important;border-color:rgba(251,191,36,.28)!important;color:#fde68a!important}.status-pill{background:rgba(251,191,36,.12)!important;color:var(--rt-gold)!important}.status-pill.paid,.status-pill.approved{background:rgba(34,197,94,.14)!important;color:#86efac!important}.status-pill.failed,.status-pill.expired,.status-pill.cancelled,.status-pill.rejected{background:rgba(239,68,68,.14)!important;color:#fca5a5!important}.alert.error{background:rgba(239,68,68,.16)!important;color:#fecaca!important;border:1px solid rgba(239,68,68,.28)!important}.alert.success{background:rgba(34,197,94,.14)!important;color:#bbf7d0!important;border:1px solid rgba(34,197,94,.25)!important}.alert.info{background:rgba(56,189,248,.12)!important;color:#bae6fd!important;border:1px solid rgba(56,189,248,.25)!important}.login-page{background:radial-gradient(circle at top left,rgba(251,191,36,.18),transparent 30%),radial-gradient(circle at bottom right,rgba(56,189,248,.10),transparent 32%),linear-gradient(135deg,#111827,#0f172a)!important}.login-card{border-color:rgba(251,191,36,.28)!important}.password-field .toggle-pass{background:rgba(251,191,36,.16)!important;color:var(--rt-gold)!important;border:1px solid rgba(251,191,36,.35)!important}.portal-switch{display:none!important}
/* Admin, Operator, Super Admin dark premium */
html body:not(.site-body),body,.admin-layout,.main-content{background:var(--rt-bg)!important;color:var(--rt-text)!important}.sidebar{background:linear-gradient(180deg,#1a2235,#111827)!important;border-right:1px solid rgba(251,191,36,.16)!important;box-shadow:18px 0 45px rgba(0,0,0,.22)!important}.sidebar .logo,.sidebar h1,.sidebar h2{color:var(--rt-gold)!important}.sidebar nav a{color:var(--rt-muted)!important;background:transparent!important;border:1px solid transparent!important}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.35)!important;color:var(--rt-gold)!important}.topbar>div,.card-admin,.settings-form,.admin-table,.login-card,.admin-form,.chat-thread-item,.chat-messages,.helper-card,.dashboard-card,.table-card{background:linear-gradient(180deg,var(--rt-card-2),var(--rt-card))!important;color:var(--rt-text)!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:0 18px 55px rgba(0,0,0,.22)!important}.page-head h1,.card-admin h2,.settings-form h2,.login-card h1{color:var(--rt-text)!important}.page-head p,.card-admin p,.login-card p,.login-card small,.admin-form small,.admin-table small,.muted,.helper-card p{color:var(--rt-muted)!important}.admin-table th{background:#151e2f!important;color:var(--rt-gold)!important;border-bottom:1px solid rgba(251,191,36,.25)!important}.admin-table td{border-bottom:1px solid rgba(148,163,184,.16)!important;color:var(--rt-text)!important}.admin-form input,.admin-form select,.admin-form textarea,.settings-form input,.settings-form select,.settings-form textarea,.mini-edit input,.mini-edit select,.mini-edit textarea,.login-card input,.inline-form select,.inline-action-form input,.chat-form input{background:#111827!important;color:var(--rt-text)!important;border:1px solid var(--rt-border)!important}.admin-form label,.login-card label,.settings-form label,.check{color:var(--rt-text)!important}.admin-form button,.mini-edit button,.settings-form button,.login-card button,.chat-form button,.admin-menu-toggle{background:linear-gradient(135deg,#ffe08a,var(--rt-gold),var(--rt-gold-2))!important;color:#111827!important;border:0!important}.danger,.delete-btn{background:var(--rt-red)!important;color:#fff!important}.badge{background:rgba(251,191,36,.12)!important;color:var(--rt-gold)!important;border:1px solid rgba(251,191,36,.35)!important}.admin-thumb,.admin-avatar{background:#111827!important;border:1px solid var(--rt-border)!important}.flow-box,.flow-box span{background:#151e2f!important;border-color:rgba(148,163,184,.20)!important;color:var(--rt-text)!important}.flow-box b{color:var(--rt-gold)!important}.chat-messages{background:#111827!important}.chat-bubble{background:#1e293b!important;color:var(--rt-text)!important}.chat-message.mine .chat-bubble{background:linear-gradient(135deg,#ffe08a,var(--rt-gold))!important;color:#111827!important}@media(max-width:900px){.sidebar{background:linear-gradient(180deg,#1a2235,#111827)!important}.admin-menu-toggle{display:block!important}}
/* === Marketplace/Kongstore inspired homepage v3.3 === */
.marketplace-home{background:#07101d!important;color:#f8fafc!important;min-height:100vh;}
.marketplace-home:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(251,191,36,.16),transparent 28%),radial-gradient(circle at 80% 16%,rgba(30,64,175,.26),transparent 34%),linear-gradient(180deg,#09111f,#050b14 58%,#09111f);}
.market-nav{position:sticky;top:0;z-index:99;background:rgba(7,12,22,.93);backdrop-filter:blur(16px);border-bottom:1px solid rgba(251,191,36,.16);box-shadow:0 14px 40px rgba(0,0,0,.32)}
.market-nav-top{display:grid;grid-template-columns:240px minmax(240px,1fr) auto;gap:20px;align-items:center;padding:14px 34px;max-width:1560px;margin:auto}
.market-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;line-height:1;font-weight:900;letter-spacing:.3px}.market-logo span{font-size:38px;filter:drop-shadow(0 8px 16px rgba(251,191,36,.35))}.market-logo b{font-size:20px}.market-logo b::first-line{color:#fff}.market-search{display:flex;align-items:center;gap:10px;background:#101827;border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:7px 7px 7px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.market-search span{opacity:.85}.market-search input{flex:1;background:transparent!important;border:0!important;box-shadow:none!important;color:#f8fafc!important;min-width:0;padding:10px!important}.market-search input::placeholder{color:#94a3b8}.market-search button{background:linear-gradient(135deg,#ffe08a,#fbbf24,#f59e0b);border:0;border-radius:14px;color:#111827;font-weight:900;padding:12px 18px;cursor:pointer}.market-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}.market-action{display:flex;align-items:center;gap:8px;text-decoration:none;color:#f8fafc;font-weight:800;padding:10px 12px;border-radius:14px;border:1px solid transparent}.market-action:hover{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.22)}.market-action>span{font-size:12px;line-height:1.15}.notif-link{position:relative}.notif-link em{position:absolute;top:0;right:0;background:#fbbf24;color:#111827;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;font-size:11px;font-style:normal}.market-wallet{display:flex;align-items:center;gap:8px;color:#f8fafc;text-decoration:none;background:#111827;border:1px solid rgba(251,191,36,.28);border-radius:16px;padding:10px 13px}.market-wallet span{font-size:12px;color:#cbd5e1}.market-wallet b{color:#fbbf24}.market-login,.market-register{font-weight:900;text-decoration:none;border-radius:14px;padding:12px 18px}.market-login{color:#fff;border:1px solid rgba(255,255,255,.15)}.market-register{background:#fff;color:#111827}.market-category-nav{display:flex;gap:12px;align-items:center;overflow-x:auto;max-width:1560px;margin:auto;padding:12px 34px;border-top:1px solid rgba(255,255,255,.06)}.market-category-nav a{flex:0 0 auto;text-decoration:none;color:#e2e8f0;font-weight:800;padding:12px 18px;border-radius:14px;border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.58)}.market-category-nav a.active,.market-category-nav a:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#111827;border-color:transparent}.market-category-nav small{background:#ef4444;color:#fff;border-radius:999px;font-size:10px;padding:2px 5px;margin-left:4px}
.market-hero{position:relative;max-width:1560px;margin:0 auto;padding:20px 34px 10px;display:grid;grid-template-columns:180px 1fr 180px;gap:18px;align-items:center}.hero-stage{position:relative;height:390px;border-radius:24px;overflow:hidden;border:1px solid rgba(251,191,36,.22);box-shadow:0 25px 70px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03)}.market-slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:.55s ease;background-size:cover;background-position:center;background:radial-gradient(circle at 72% 35%,rgba(251,191,36,.25),transparent 30%),linear-gradient(100deg,#070b12,#101827 58%,#311f03)}.market-slide.active{opacity:1;transform:scale(1)}.default-hero:after{content:"🚀";position:absolute;right:14%;bottom:11%;font-size:150px;filter:drop-shadow(0 20px 30px rgba(251,191,36,.22));opacity:.95}.market-slide-content{position:relative;z-index:2;padding:64px 58px;max-width:760px}.market-badge{display:inline-flex;border-radius:999px;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.35);color:#fbbf24;font-weight:900;padding:8px 14px;margin-bottom:14px}.market-slide h1{font-size:58px;line-height:1.02;margin:0 0 16px;font-weight:1000;letter-spacing:.2px}.market-slide h1 strong{color:#fbbf24}.market-slide p{font-size:18px;color:#dbeafe;max-width:610px;line-height:1.55}.market-cta{display:inline-flex;margin-top:24px;padding:15px 28px;border-radius:14px;background:linear-gradient(135deg,#ffe08a,#fbbf24,#f59e0b);color:#111827;text-decoration:none;font-weight:1000;box-shadow:0 12px 35px rgba(251,191,36,.24)}.hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:9px}.hero-dots span{width:24px;height:7px;border-radius:99px;background:rgba(255,255,255,.35)}.hero-dots span.active{background:#fbbf24}.hero-side{height:320px;border-radius:22px;opacity:.72;background:linear-gradient(135deg,rgba(251,191,36,.26),rgba(15,23,42,.42)),url('/static/img/banner/rtg-banner-20260707.png');background-size:cover;background-position:center;filter:saturate(1.1);border:1px solid rgba(255,255,255,.08)}.hero-side-right{background-position:right center}.hero-arrow{position:absolute;z-index:4;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font-size:40px;line-height:1;cursor:pointer}.hero-arrow.left{left:28px}.hero-arrow.right{right:28px}.quick-pills{max-width:1560px;margin:18px auto 8px;padding:0 34px;display:flex;gap:14px;overflow-x:auto}.quick-pills a{flex:0 0 auto;color:#fff;text-decoration:none;background:#0f172a;border:1px solid rgba(148,163,184,.16);padding:14px 22px;border-radius:14px;font-weight:900;box-shadow:0 14px 40px rgba(0,0,0,.18)}.quick-pills a.active,.quick-pills a:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#111827}.market-section{max-width:1560px;margin:0 auto;padding:28px 34px}.market-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.market-section-head h2{font-size:30px;margin:0 0 6px}.market-section-head p{margin:0;color:#cbd5e1}.market-section-head a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.18);padding:12px 18px;border-radius:14px}.market-filter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.market-filter input,.market-filter select{background:#0f172a!important;color:#fff!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:14px!important;padding:13px 14px!important;min-width:210px}.market-filter button{background:#fbbf24;border:0;border-radius:14px;padding:13px 20px;font-weight:900;color:#111827}.market-filter a{color:#fbbf24;align-self:center}.market-product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.market-product-card{position:relative;min-height:185px;border-radius:18px;overflow:hidden;background:#121a2a;border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 45px rgba(0,0,0,.28);text-decoration:none;color:#fff;transition:.18s ease}.market-product-card:hover{transform:translateY(-5px);border-color:rgba(251,191,36,.55);box-shadow:0 22px 60px rgba(251,191,36,.12)}.market-product-image{height:130px;background:linear-gradient(135deg,#1e293b,#0f172a);display:grid;place-items:center;overflow:hidden}.market-product-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.86))}.market-product-image img{width:100%;height:100%;object-fit:cover}.market-product-image span{font-size:44px;color:#fbbf24;font-weight:1000}.market-product-info{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}.market-product-info h3{margin:0 0 4px;font-size:17px}.market-product-info p{margin:0;color:#cbd5e1;font-size:13px}.discount-badge{position:absolute;left:12px;top:12px;z-index:3;background:#fbbf24;color:#111827;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:1000}.market-promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.market-promo-card{padding:24px;border-radius:18px;background:linear-gradient(135deg,#182235,#0f172a);border:1px solid rgba(148,163,184,.18);color:#fff;text-decoration:none}.market-promo-card span{display:inline-block;background:#fbbf24;color:#111827;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:1000}.market-promo-card h3{margin:16px 0 8px}.market-promo-card p{color:#cbd5e1}.market-faq details{background:#101827!important}.floating-chat{position:fixed;right:24px;bottom:24px;z-index:100;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-decoration:none;background:linear-gradient(135deg,#ffe08a,#fbbf24,#f59e0b);color:#111827;font-size:26px;box-shadow:0 18px 50px rgba(251,191,36,.3)}.market-install{left:22px;right:auto;bottom:22px;background:linear-gradient(135deg,#111827,#1e293b)!important;color:#fff!important;border:1px solid rgba(251,191,36,.35)!important}.market-footer{max-width:1560px;margin:20px auto 0;padding:30px 34px 42px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;color:#cbd5e1;border-top:1px solid rgba(148,163,184,.14)}.market-footer b{color:#fbbf24}.market-footer p{margin:.5rem 0 0;color:#cbd5e1}
@media(max-width:1180px){.market-nav-top{grid-template-columns:1fr;gap:12px}.market-actions{justify-content:space-between;overflow-x:auto}.market-hero{grid-template-columns:1fr}.hero-side{display:none}.market-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-stage{height:340px}.market-slide h1{font-size:42px}.market-slide-content{padding:48px 32px}.hero-arrow{display:none}}
@media(max-width:760px){.market-nav-top{padding:12px 14px}.market-logo b{font-size:16px}.market-category-nav,.quick-pills,.market-section,.market-hero{padding-left:14px;padding-right:14px}.market-actions{gap:8px}.market-action span{display:none}.market-wallet span{display:none}.market-login,.market-register{padding:10px 14px}.hero-stage{height:300px;border-radius:18px}.market-slide-content{padding:36px 22px}.market-slide h1{font-size:30px}.market-slide p{font-size:14px}.default-hero:after{font-size:86px;right:8%;opacity:.35}.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.market-product-card{min-height:150px}.market-product-image{height:110px}.market-section-head{align-items:flex-start;flex-direction:column}.market-filter input,.market-filter select{min-width:100%}.market-footer{grid-template-columns:1fr;padding-left:14px;padding-right:14px}.floating-chat{right:16px;bottom:18px;width:54px;height:54px}.market-install{left:14px;bottom:18px}}
/* === Modern dark register page === */
.auth-register-modern{background:#141414!important;color:#f8fafc!important;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.register-modern-card{width:min(720px,100%);background:#191919;border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:36px 40px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.register-modern-card h1{font-size:36px;margin:0 0 8px;color:#fff}.register-modern-card>p{color:#a1a1aa;margin:0 0 30px}.register-modern-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}.register-modern-form .full{grid-column:1/-1}.register-modern-form label{display:block;font-size:13px;font-weight:800;color:#a1a1aa;margin-bottom:8px}.register-modern-form input{width:100%;background:#101010!important;border:1px solid #222!important;color:#fff!important;border-radius:10px!important;padding:14px 14px!important}.register-modern-form input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(59,130,246,.14)!important}.phone-row{display:flex;align-items:center;background:#101010;border:1px solid #222;border-radius:10px;overflow:hidden}.phone-code{display:flex;align-items:center;gap:8px;padding:0 14px;height:100%;font-weight:900;color:#fff;border-right:1px solid #222}.phone-row input{border:0!important;border-radius:0!important}.password-row{position:relative}.password-row button{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#999;cursor:pointer}.terms-row{display:flex!important;gap:10px;align-items:flex-start;color:#a1a1aa!important;font-size:13px!important}.terms-row input{width:auto!important;min-width:16px;margin-top:2px}.terms-row a{color:#3b82f6;text-decoration:none}.register-submit{grid-column:1/-1;background:#3457e8!important;color:white!important;border:0!important;border-radius:10px!important;padding:16px!important;font-weight:1000;letter-spacing:.4px}.divider-modern{grid-column:1/-1;display:flex;align-items:center;gap:14px;color:#71717a;text-align:center;font-size:12px;letter-spacing:1px}.divider-modern:before,.divider-modern:after{content:"";height:1px;background:#27272a;flex:1}.google-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#111!important;text-decoration:none;border-radius:10px;padding:14px;font-weight:800}.login-bottom{grid-column:1/-1;text-align:center;color:#a1a1aa;font-size:14px}.login-bottom a{color:#3b82f6;text-decoration:none}.register-alert{grid-column:1/-1}.register-help{grid-column:1/-1;color:#71717a;font-size:12px;margin-top:-8px}@media(max-width:680px){.auth-register-modern{align-items:flex-start;padding:18px}.register-modern-card{padding:28px 22px;border-radius:18px}.register-modern-form{grid-template-columns:1fr}.register-modern-card h1{font-size:30px}}
.navbar-balance{background:rgba(251,191,36,.12)!important;color:#fbbf24!important;border:1px solid rgba(251,191,36,.35);border-radius:999px;padding:8px 12px;font-weight:900}
/* Wallet payment option */
.wallet-pay-card {
border-color: rgba(255, 193, 7, .55) !important;
background: linear-gradient(135deg, rgba(255,193,7,.18), rgba(255,255,255,.04));
}
.wallet-logo {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 193, 7, .18);
font-size: 22px;
}
.form-help{display:block;margin-top:6px;color:#94a3b8;font-size:12px}.manual-note.success{border-color:rgba(16,185,129,.45)!important;background:rgba(16,185,129,.12)!important;color:#bbf7d0!important}
/* Sosial Media premium grid */
.sosmed-section{scroll-margin-top:110px}.sosmed-chip-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}.sosmed-chip{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:86px;padding:12px 8px;border-radius:16px;background:linear-gradient(180deg,#101827,#0b1220);border:1px solid rgba(148,163,184,.16);color:#fff;text-decoration:none;box-shadow:0 14px 36px rgba(0,0,0,.22);transition:.18s ease}.sosmed-chip:hover{transform:translateY(-4px);border-color:rgba(251,191,36,.55);box-shadow:0 20px 50px rgba(251,191,36,.12)}.sosmed-chip-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#111827;color:#fbbf24;font-weight:1000;overflow:hidden}.sosmed-chip-icon img{width:100%;height:100%;object-fit:cover}.sosmed-chip b{font-size:12px;text-align:center;line-height:1.2}.sosmed-section .market-badge{margin-bottom:8px}
@media(max-width:980px){.sosmed-chip-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:560px){.sosmed-chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sosmed-chip{min-height:78px}.sosmed-chip-icon{width:36px;height:36px}.sosmed-chip b{font-size:11px}}
/* FIX: rapihkan ikon Sosial Media agar tidak memakai ukuran asli gambar */
.sosmed-section .sosmed-chip-grid{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(86px,1fr)) !important;
gap:14px !important;
align-items:stretch !important;
}
.sosmed-section .sosmed-chip{
width:100% !important;
min-height:94px !important;
padding:10px 8px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
text-align:center !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.sosmed-section .sosmed-chip-icon{
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
max-width:46px !important;
max-height:46px !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
flex:0 0 46px !important;
}
.sosmed-section .sosmed-chip-icon img,
.sosmed-section .sosmed-chip img{
width:46px !important;
height:46px !important;
max-width:46px !important;
max-height:46px !important;
min-width:0 !important;
min-height:0 !important;
object-fit:contain !important;
display:block !important;
border-radius:50% !important;
}
.sosmed-section .sosmed-chip b{
display:block !important;
width:100% !important;
font-size:11px !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:#fff !important;
}
@media(max-width:768px){
.sosmed-section .sosmed-chip-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr)) !important;gap:10px !important;}
.sosmed-section .sosmed-chip{min-height:82px !important;padding:8px 6px !important;}
.sosmed-section .sosmed-chip-icon,.sosmed-section .sosmed-chip-icon img,.sosmed-section .sosmed-chip img{width:38px !important;height:38px !important;max-width:38px !important;max-height:38px !important;flex-basis:38px !important;}
.sosmed-section .sosmed-chip b{font-size:10px !important;}
}
/* === FIX FINAL: rapihkan navbar & hilangkan scrollbar horizontal === */
html, body{
max-width:100%;
overflow-x:hidden !important;
}
.market-nav{
width:100%;
overflow:hidden !important;
}
.market-nav-top{
width:100%;
max-width:1560px;
padding-left:24px !important;
padding-right:24px !important;
}
.market-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
flex-wrap:wrap !important;
white-space:normal !important;
overflow:visible !important;
}
.market-category-nav,
.quick-pills{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
overflow-x:hidden !important;
overflow-y:visible !important;
white-space:normal !important;
scrollbar-width:none !important;
}
.market-category-nav::-webkit-scrollbar,
.quick-pills::-webkit-scrollbar,
.market-actions::-webkit-scrollbar{
display:none !important;
}
.market-category-nav a,
.quick-pills a{
flex:0 0 auto !important;
min-width:auto !important;
max-width:100% !important;
white-space:nowrap !important;
text-align:center !important;
padding:12px 16px !important;
}
.market-category-nav{
padding-top:10px !important;
padding-bottom:14px !important;
}
.quick-pills{
padding-top:4px !important;
padding-bottom:4px !important;
}
.market-hero,
.market-section,
.market-footer{
max-width:1560px;
overflow:hidden;
}
.market-product-grid{
width:100%;
}
.market-product-card,
.sosmed-chip,
.market-action,
.market-wallet,
.user-menu{
max-width:100%;
}
@media(max-width:1180px){
.market-nav-top{
grid-template-columns:1fr !important;
}
.market-actions{
justify-content:flex-start !important;
}
}
@media(max-width:760px){
.market-nav-top{
padding-left:12px !important;
padding-right:12px !important;
}
.market-category-nav,
.quick-pills,
.market-section,
.market-hero{
padding-left:12px !important;
padding-right:12px !important;
}
.market-category-nav a,
.quick-pills a{
flex:1 1 calc(50% - 10px) !important;
white-space:normal !important;
padding:11px 10px !important;
font-size:13px !important;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
}
.market-actions{
gap:8px !important;
}
.market-wallet,
.market-login,
.market-register,
.user-menu-btn{
flex:1 1 auto;
}
}
@media(max-width:430px){
.market-category-nav a,
.quick-pills a{
flex:1 1 100% !important;
}
}
/* Banner Website: berbeda dari Slide Banner hero utama */
.website-banner-block{max-width:1180px;margin:18px auto 8px;padding:0 16px}.website-banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.website-promo-card{min-height:150px;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:#fff;background:linear-gradient(135deg,#182033,#111827);background-size:cover;background-position:center;box-shadow:0 18px 48px rgba(0,0,0,.28);overflow:hidden;position:relative}.website-promo-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,193,7,.28),transparent 35%);pointer-events:none}.website-promo-card>*{position:relative;z-index:1}.website-promo-card span{width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;background:rgba(255,193,7,.16);border:1px solid rgba(255,193,7,.45);color:#ffd166;font-size:12px;font-weight:800;margin-bottom:10px}.website-promo-card h2{font-size:22px;margin:0 0 6px}.website-promo-card p{margin:0 0 12px;color:#dbeafe;font-size:14px}.website-promo-card b{color:#ffbd3a}
/* FINAL FIX: menu kategori bawah banner dihapus total */
.market-category-nav, .quick-pills, nav.market-category-nav, section.quick-pills { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* FIX 2026-07-07: hapus menu kecil kategori di bawah header homepage */
.market-category-nav,
.quick-pills,
nav.market-category-nav,
section.quick-pills {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* =========================================================
RESPONSIVE FINAL 2026-07-07 - Raja Topup Games
Rapih untuk desktop, tablet, dan ponsel.
========================================================= */
:root{
--rtg-bg:#07101d;
--rtg-card:#111827;
--rtg-card-2:#0f172a;
--rtg-line:rgba(148,163,184,.20);
--rtg-gold:#fbbf24;
--rtg-text:#f8fafc;
--rtg-muted:#cbd5e1;
}
img{max-width:100%;height:auto;}
.site-body.marketplace-home{background:var(--rtg-bg)!important;overflow-x:hidden!important;}
/* Header / navbar marketplace */
.market-nav{position:sticky;top:0;z-index:80;background:rgba(7,16,29,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(251,191,36,.14);}
.market-nav-top{display:grid!important;grid-template-columns:auto minmax(280px,1fr) auto!important;align-items:center!important;gap:16px!important;max-width:1560px!important;margin:0 auto!important;padding:14px 24px!important;}
.market-logo{display:flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:#fff!important;min-width:0!important;}
.market-logo span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#fde68a,#fbbf24);box-shadow:0 14px 35px rgba(251,191,36,.20);}
.market-logo b{font-size:17px!important;line-height:1.05!important;letter-spacing:.3px!important;white-space:nowrap!important;}
.market-search{display:flex!important;align-items:center!important;gap:10px!important;background:#0b1220!important;border:1px solid var(--rtg-line)!important;border-radius:16px!important;padding:8px 10px!important;min-width:0!important;}
.market-search input{flex:1!important;min-width:0!important;background:transparent!important;border:0!important;color:#fff!important;outline:0!important;font-size:14px!important;}
.market-search button{border:0!important;border-radius:12px!important;padding:10px 16px!important;background:linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b)!important;color:#111827!important;font-weight:900!important;cursor:pointer!important;}
.market-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:nowrap!important;min-width:0!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{min-height:42px!important;border-radius:14px!important;border:1px solid var(--rtg-line)!important;background:#0b1220!important;color:#fff!important;text-decoration:none!important;padding:9px 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:13px!important;white-space:nowrap!important;}
.market-register,.market-login{background:linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b)!important;color:#111827!important;font-weight:900!important;border:0!important;}
.market-wallet b{color:var(--rtg-gold)!important;}
.user-menu-panel{right:0!important;left:auto!important;min-width:210px!important;max-width:calc(100vw - 24px)!important;}
/* Hero */
.market-hero{max-width:1560px!important;margin:0 auto!important;padding:18px 24px 8px!important;display:grid!important;grid-template-columns:150px minmax(0,1fr) 150px!important;gap:16px!important;align-items:center!important;overflow:visible!important;}
.hero-stage{height:360px!important;border-radius:24px!important;overflow:hidden!important;}
.market-slide-content{padding:54px 48px!important;max-width:720px!important;}
.market-slide h1{font-size:clamp(32px,4vw,56px)!important;line-height:1.03!important;margin:0 0 14px!important;}
.market-slide p{font-size:clamp(14px,1.4vw,18px)!important;line-height:1.55!important;}
.default-hero:after{font-size:clamp(80px,12vw,150px)!important;}
.hero-side{height:300px!important;border-radius:22px!important;}
/* Section, filter, product grid */
.market-section{max-width:1560px!important;margin:0 auto!important;padding:26px 24px!important;overflow:visible!important;}
.market-section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:14px!important;margin-bottom:16px!important;}
.market-section-head h2{font-size:clamp(22px,2.2vw,30px)!important;line-height:1.15!important;}
.market-section-head p{font-size:14px!important;color:var(--rtg-muted)!important;}
.market-filter{display:grid!important;grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr) minmax(180px,1fr) auto auto!important;gap:10px!important;align-items:center!important;margin-bottom:18px!important;}
.market-filter input,.market-filter select{width:100%!important;min-width:0!important;border-radius:14px!important;padding:13px 14px!important;background:#0b1220!important;border:1px solid var(--rtg-line)!important;color:#fff!important;}
.market-filter button{height:46px!important;border-radius:14px!important;background:linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b)!important;color:#111827!important;border:0!important;font-weight:1000!important;}
.market-filter a{color:var(--rtg-gold)!important;justify-self:start!important;}
.market-product-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:16px!important;width:100%!important;}
.market-product-card{position:relative!important;display:block!important;min-height:188px!important;border-radius:18px!important;overflow:hidden!important;background:linear-gradient(180deg,#121a2a,#0b1220)!important;border:1px solid var(--rtg-line)!important;box-shadow:0 18px 45px rgba(0,0,0,.25)!important;color:#fff!important;text-decoration:none!important;}
.market-product-image{position:relative!important;height:128px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:linear-gradient(135deg,#1e293b,#0f172a)!important;overflow:hidden!important;}
.market-product-image:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 25%,rgba(251,191,36,.20),transparent 42%);pointer-events:none;}
.market-product-image:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.88) 100%)!important;pointer-events:none!important;}
.market-product-image img{position:relative!important;z-index:1!important;width:auto!important;height:auto!important;max-width:82%!important;max-height:82%!important;object-fit:contain!important;border-radius:14px!important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.28))!important;}
.market-product-image span:not(.discount-badge){position:relative!important;z-index:1!important;width:64px!important;height:64px!important;border-radius:50%!important;background:linear-gradient(135deg,#e5e7eb,#fff)!important;color:#475569!important;display:grid!important;place-items:center!important;font-size:22px!important;font-weight:1000!important;border:3px solid rgba(251,191,36,.65)!important;}
.market-product-info{position:absolute!important;left:14px!important;right:14px!important;bottom:12px!important;z-index:3!important;}
.market-product-info h3{font-size:16px!important;line-height:1.15!important;margin:0 0 4px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.market-product-info p{font-size:13px!important;line-height:1.25!important;color:var(--rtg-muted)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.discount-badge{z-index:4!important;top:10px!important;left:10px!important;border-radius:10px!important;padding:6px 9px!important;font-size:11px!important;line-height:1!important;max-width:calc(100% - 20px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.compact-product-grid .market-product-card{min-height:180px!important;}
/* Website promo banners */
.website-banner-block{max-width:1560px!important;margin:14px auto 4px!important;padding:0 24px!important;}
.website-banner-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))!important;gap:16px!important;}
.website-promo-card{min-height:170px!important;border-radius:22px!important;padding:22px!important;background-size:cover!important;background-position:center!important;}
/* Promo & footer */
.market-promo-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:16px!important;}
.market-footer{max-width:1560px!important;margin:18px auto 0!important;padding:28px 24px 40px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.floating-chat{right:20px!important;bottom:20px!important;width:58px!important;height:58px!important;z-index:120!important;}
.market-install{left:20px!important;right:auto!important;bottom:20px!important;}
/* Tablet */
@media(max-width:1180px){
.market-nav-top{grid-template-columns:1fr!important;gap:12px!important;}
.market-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}
.market-hero{grid-template-columns:1fr!important;padding:16px 18px 6px!important;}
.hero-side{display:none!important;}
.hero-stage{height:330px!important;}
.market-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.market-filter{grid-template-columns:1fr 1fr auto auto!important;}
.market-filter input{grid-column:1 / -1!important;}
}
/* Ponsel */
@media(max-width:760px){
body.site-body{font-size:14px!important;}
.market-nav{position:sticky!important;}
.market-nav-top{padding:10px 12px!important;gap:10px!important;}
.market-logo span{width:36px!important;height:36px!important;border-radius:12px!important;}
.market-logo b{font-size:14px!important;line-height:1.05!important;}
.market-search{order:3!important;width:100%!important;border-radius:14px!important;padding:7px 8px!important;}
.market-search input{font-size:13px!important;}
.market-search button{padding:9px 12px!important;font-size:12px!important;}
.market-actions{order:2!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{width:100%!important;min-height:39px!important;padding:8px 10px!important;font-size:12px!important;border-radius:12px!important;}
.market-action span,.market-wallet span{display:none!important;}
.market-user-menu,.user-menu{width:100%!important;}
.user-menu-panel{left:0!important;right:auto!important;width:100%!important;}
.market-hero{padding:12px 12px 4px!important;}
.hero-stage{height:250px!important;border-radius:18px!important;}
.market-slide-content{padding:28px 18px!important;max-width:92%!important;}
.market-badge{font-size:11px!important;padding:7px 10px!important;margin-bottom:10px!important;}
.market-slide h1{font-size:28px!important;line-height:1.06!important;}
.market-slide p{font-size:13px!important;line-height:1.45!important;max-width:82%!important;}
.market-cta{margin-top:12px!important;padding:11px 14px!important;border-radius:12px!important;font-size:13px!important;}
.default-hero:after{font-size:74px!important;right:4%!important;bottom:14%!important;opacity:.28!important;}
.hero-dots{bottom:10px!important;}
.hero-dots span{width:18px!important;height:6px!important;}
.website-banner-block{padding:0 12px!important;margin-top:10px!important;}
.website-banner-grid{grid-template-columns:1fr!important;gap:12px!important;}
.website-promo-card{min-height:140px!important;border-radius:18px!important;padding:18px!important;}
.website-promo-card h2{font-size:18px!important;}
.website-promo-card p{font-size:12px!important;}
.market-section{padding:22px 12px!important;}
.market-section-head{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;margin-bottom:14px!important;}
.market-section-head h2{font-size:23px!important;}
.market-section-head p{font-size:12px!important;}
.market-section-head a{width:100%!important;text-align:center!important;padding:10px 12px!important;border-radius:12px!important;font-size:13px!important;}
.market-filter{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-bottom:16px!important;}
.market-filter input,.market-filter select,.market-filter button{height:46px!important;font-size:13px!important;border-radius:13px!important;}
.market-filter input{grid-column:auto!important;}
.market-filter a{padding:4px 0 0!important;}
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
.market-product-card{min-height:166px!important;border-radius:16px!important;}
.market-product-image{height:108px!important;padding:15px!important;}
.market-product-image img{max-width:74%!important;max-height:74%!important;border-radius:12px!important;}
.market-product-image span:not(.discount-badge){width:54px!important;height:54px!important;font-size:18px!important;border-width:2px!important;}
.market-product-info{left:12px!important;right:12px!important;bottom:11px!important;}
.market-product-info h3{font-size:15px!important;line-height:1.12!important;}
.market-product-info p{font-size:12px!important;}
.discount-badge{top:9px!important;left:9px!important;padding:5px 8px!important;font-size:10px!important;border-radius:9px!important;}
.market-promo-grid{grid-template-columns:1fr!important;gap:12px!important;}
.market-promo-card{padding:18px!important;border-radius:16px!important;}
.market-footer{grid-template-columns:1fr!important;padding:24px 12px 86px!important;gap:12px!important;}
.floating-chat{right:14px!important;bottom:14px!important;width:52px!important;height:52px!important;font-size:23px!important;}
.market-install{left:14px!important;bottom:14px!important;max-width:150px!important;font-size:12px!important;}
}
/* HP kecil: tetap 2 kolom tapi lebih compact */
@media(max-width:430px){
.market-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.market-product-card{min-height:154px!important;border-radius:15px!important;}
.market-product-image{height:100px!important;padding:13px!important;}
.market-product-image img{max-width:72%!important;max-height:72%!important;}
.market-product-info{left:10px!important;right:10px!important;bottom:10px!important;}
.market-product-info h3{font-size:14px!important;}
.market-product-info p{font-size:11px!important;}
.discount-badge{font-size:9px!important;padding:5px 7px!important;}
}
/* === FIX DROPDOWN AKUN / LOGOUT HOMEPAGE === */
.market-nav,
.market-nav-top,
.market-actions,
.market-user-menu{
overflow: visible !important;
}
.market-nav{
z-index: 9999 !important;
}
.market-user-menu{
position: relative !important;
display: inline-flex !important;
align-items: center !important;
}
.market-user-menu .user-menu-btn{
min-height: 38px !important;
max-width: 190px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(15,23,42,.96)) !important;
border: 1px solid rgba(251,191,36,.65) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}
.market-user-menu .user-menu-panel{
display: none !important;
position: absolute !important;
top: calc(100% + 12px) !important;
right: 0 !important;
width: 245px !important;
min-width: 245px !important;
padding: 10px !important;
border-radius: 18px !important;
background: #0b1220 !important;
border: 1px solid rgba(251,191,36,.35) !important;
box-shadow: 0 24px 70px rgba(0,0,0,.62) !important;
z-index: 10000 !important;
}
.market-user-menu.open .user-menu-panel,
.market-user-menu:hover .user-menu-panel{
display: block !important;
}
.market-user-menu .user-menu-panel::before{
content: "";
position: absolute;
top: -7px;
right: 26px;
width: 12px;
height: 12px;
transform: rotate(45deg);
background: #0b1220;
border-left: 1px solid rgba(251,191,36,.35);
border-top: 1px solid rgba(251,191,36,.35);
}
.market-user-menu .user-menu-panel a{
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
padding: 11px 12px !important;
margin: 2px 0 !important;
border-radius: 12px !important;
color: #f8fafc !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
background: transparent !important;
}
.market-user-menu .user-menu-panel a:hover{
background: rgba(251,191,36,.13) !important;
color: #fbbf24 !important;
}
.market-user-menu .user-menu-panel a.danger{
margin-top: 8px !important;
color: #fecaca !important;
background: rgba(239,68,68,.12) !important;
border: 1px solid rgba(239,68,68,.22) !important;
}
.market-user-menu .user-menu-panel a.danger:hover{
background: rgba(239,68,68,.22) !important;
color: #fff !important;
}
@media (max-width: 760px){
.market-user-menu{width: 100% !important;}
.market-user-menu .user-menu-btn{width: 100% !important; max-width: none !important;}
.market-user-menu .user-menu-panel{left: 0 !important; right: auto !important; width: min(92vw, 320px) !important;}
}
/* === FIX 2026-07-07: Tampilan HP dibuat mirip desktop/PC === */
@media (max-width: 760px){
html, body{overflow-x:hidden!important;}
.market-nav{position:sticky!important;top:0!important;background:#070d18!important;border-bottom:1px solid rgba(251,191,36,.18)!important;}
.market-nav-top{
display:grid!important;
grid-template-columns:auto minmax(118px,1fr) auto!important;
align-items:center!important;
gap:8px!important;
padding:8px 10px!important;
}
.market-logo{min-width:104px!important;display:flex!important;align-items:center!important;gap:6px!important;}
.market-logo span{width:32px!important;height:32px!important;border-radius:10px!important;font-size:20px!important;flex:0 0 32px!important;}
.market-logo b{font-size:11px!important;line-height:.98!important;letter-spacing:.2px!important;white-space:normal!important;}
.market-search{
order:0!important;width:100%!important;min-width:0!important;height:38px!important;
display:flex!important;align-items:center!important;padding:4px 5px 4px 9px!important;
border-radius:12px!important;background:#0b1220!important;border:1px solid rgba(148,163,184,.28)!important;
}
.market-search span{font-size:12px!important;margin-right:3px!important;}
.market-search input{min-width:0!important;width:100%!important;font-size:10.5px!important;padding:0 4px!important;}
.market-search button{height:30px!important;min-width:42px!important;padding:0 9px!important;border-radius:10px!important;font-size:11px!important;}
.market-actions{
order:0!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
gap:5px!important;flex-wrap:nowrap!important;overflow:visible!important;
}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{
width:auto!important;min-width:0!important;min-height:34px!important;height:34px!important;
padding:6px 9px!important;border-radius:11px!important;font-size:10.5px!important;white-space:nowrap!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
}
.market-action span,.market-wallet span{display:none!important;}
.market-wallet b{font-size:10.5px!important;}
.market-login{min-width:58px!important;}
.market-register{min-width:58px!important;background:linear-gradient(135deg,#ffe16b,#fbbf24)!important;color:#111!important;}
.market-user-menu{width:auto!important;display:inline-flex!important;}
.market-user-menu .user-menu-btn{max-width:116px!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.market-user-menu .user-menu-panel{right:0!important;left:auto!important;width:min(86vw,300px)!important;top:calc(100% + 10px)!important;}
.market-hero{padding:12px 10px 5px!important;display:grid!important;grid-template-columns:1fr!important;}
.hero-stage{height:278px!important;border-radius:20px!important;}
.market-slide-content{padding:30px 22px!important;max-width:90%!important;}
.market-slide h1{font-size:31px!important;line-height:1.04!important;letter-spacing:.2px!important;}
.market-slide p{font-size:14px!important;line-height:1.45!important;max-width:88%!important;}
.market-cta{padding:12px 16px!important;border-radius:13px!important;font-size:13px!important;}
.website-banner-block{padding:0 10px!important;}
.website-banner-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
.website-promo-card{min-height:156px!important;}
.market-section{padding:24px 10px!important;}
.market-section-head{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;}
.market-section-head h2{font-size:22px!important;white-space:nowrap!important;}
.market-section-head p{font-size:11px!important;}
.market-section-head a{width:auto!important;min-width:max-content!important;padding:9px 11px!important;font-size:11px!important;border-radius:12px!important;}
.market-filter{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
.market-filter input{grid-column:1/-1!important;height:40px!important;font-size:12px!important;}
.market-filter select{height:40px!important;font-size:11px!important;min-width:0!important;}
.market-filter button{height:40px!important;font-size:12px!important;}
.market-filter a{align-self:center!important;text-align:center!important;font-size:12px!important;}
.market-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
.market-product-card{min-height:137px!important;border-radius:14px!important;}
.market-product-image{height:88px!important;padding:11px!important;}
.market-product-image img{max-width:74%!important;max-height:74%!important;}
.market-product-info{left:8px!important;right:8px!important;bottom:8px!important;}
.market-product-info h3{font-size:11px!important;line-height:1.08!important;}
.market-product-info p{font-size:9.5px!important;}
.discount-badge{top:7px!important;left:7px!important;padding:4px 6px!important;font-size:8px!important;border-radius:8px!important;}
.floating-chat{right:12px!important;bottom:16px!important;width:48px!important;height:48px!important;}
.market-install{left:12px!important;bottom:16px!important;max-width:138px!important;font-size:11px!important;}
}
@media (max-width: 390px){
.market-nav-top{grid-template-columns:auto minmax(92px,1fr) auto!important;gap:6px!important;padding:7px 8px!important;}
.market-logo{min-width:92px!important;gap:5px!important;}
.market-logo span{width:28px!important;height:28px!important;font-size:17px!important;}
.market-logo b{font-size:9.5px!important;}
.market-search{height:34px!important;padding-left:7px!important;}
.market-search input{font-size:9px!important;}
.market-search button{height:26px!important;min-width:36px!important;font-size:9.5px!important;padding:0 7px!important;}
.market-login,.market-register{min-width:46px!important;padding:5px 7px!important;font-size:9.5px!important;}
.market-action,.market-wallet,.user-menu-btn{height:30px!important;min-height:30px!important;padding:5px 7px!important;font-size:9.5px!important;}
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
.market-product-card{min-height:150px!important;}
.market-product-image{height:98px!important;}
}
/* FIX BANNER BARU 2026-07-07 */
.market-slide{background-image:linear-gradient(90deg,rgba(5,8,15,.30),rgba(5,8,15,.10)),url('/static/img/banner/rtg-banner-20260707.png')!important;background-size:cover!important;background-position:center!important;}
.hero-side{background-image:linear-gradient(135deg,rgba(0,140,255,.12),rgba(15,23,42,.18)),url('/static/img/banner/rtg-banner-20260707.png')!important;}
/* === Pop-up tulisan berjalan: bar penuh tepat di bawah navbar === */
.running-popup{
position:relative;
left:auto;
bottom:auto;
z-index:40;
transform:none;
width:100%;
max-width:none;
min-height:38px;
display:flex;
align-items:center;
gap:9px;
margin:0;
padding:5px 8px 5px 12px;
border-top:1px solid var(--running-popup-border,#fbbf24);
border-right:0;
border-bottom:1px solid var(--running-popup-border,#fbbf24);
border-left:0;
border-radius:0;
background:var(--running-popup-bg,#07101f);
box-shadow:0 5px 16px rgba(0,0,0,.22);
color:var(--running-popup-color,#fff3c4);
overflow:hidden;
backdrop-filter:blur(12px);
}
.running-popup-icon{
flex:0 0 auto;
font-size:21px;
filter:drop-shadow(0 0 8px var(--running-popup-border,#fbbf24));
}
.running-popup-viewport{
flex:1 1 auto;
min-width:0;
overflow:hidden;
white-space:nowrap;
}
.running-popup-track{
display:inline-flex;
align-items:center;
min-width:100%;
width:max-content;
padding-left:100%;
animation:runningPopupMarquee var(--running-popup-duration,18s) linear infinite;
will-change:transform;
}
.running-popup-message{
display:inline-block;
padding-right:70px;
color:var(--running-popup-color,#fff3c4);
font-size:14px;
font-weight:800;
line-height:1.4;
letter-spacing:.15px;
}
.running-popup:hover .running-popup-track{animation-play-state:paused;}
.running-popup-close{
flex:0 0 34px;
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:10px;
cursor:pointer;
background:rgba(255,255,255,.12);
color:var(--running-popup-color,#fff);
font:700 24px/1 Arial,sans-serif;
appearance:none;
}
.running-popup-close:hover{background:rgba(239,68,68,.35);}
@keyframes runningPopupMarquee{
from{transform:translateX(0)}
to{transform:translateX(-100%)}
}
.popup-color-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:12px;
}
.popup-color-grid input[type="color"]{
width:100%;
height:44px;
padding:4px;
border-radius:10px;
cursor:pointer;
}
@media (max-width:760px){
.running-popup{
width:100%;
min-height:36px;
border-radius:0;
padding:4px 7px 4px 9px;
gap:7px;
}
.running-popup-icon{font-size:18px;}
.running-popup-message{font-size:12px;padding-right:48px;}
.running-popup-close{flex-basis:31px;width:31px;height:31px;font-size:21px;}
.popup-color-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
.running-popup-track{animation-duration:40s;}
}
/* === NAVBAR FINAL 2026-07-10: Cari tidak boleh tertutup tombol aksi === */
.market-nav-top{grid-template-columns:max-content minmax(320px,1fr) max-content!important;gap:14px!important;}
.market-search{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;min-width:0!important;width:100%!important;overflow:visible!important;}
.market-search input{min-width:0!important;width:100%!important;}
.market-search button{display:inline-flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;position:static!important;min-width:64px!important;width:auto!important;white-space:nowrap!important;}
.market-actions{min-width:max-content!important;}
@media(max-width:1180px){
.market-nav-top{grid-template-columns:minmax(0,1fr) auto!important;}
.market-logo{grid-column:1!important;grid-row:1!important;}
.market-actions{grid-column:2!important;grid-row:1!important;justify-content:flex-end!important;}
.market-search{grid-column:1/-1!important;grid-row:2!important;}
}
@media(max-width:760px){
.market-actions{display:flex!important;width:auto!important;gap:6px!important;}
.market-action-download{display:none!important;}
.market-search button{min-width:58px!important;padding:9px 12px!important;}
}
/* ==========================================================
FINAL RESPONSIVE MARKETPLACE + MENU SUNTIK SOSMED (2026-07-10)
Override paling akhir untuk mencegah konflik aturan lama.
========================================================== */
.market-action-sosmed{
border-color:rgba(251,191,36,.38)!important;
background:linear-gradient(135deg,rgba(251,191,36,.14),#0b1220)!important;
}
.market-action-sosmed:hover{
background:linear-gradient(135deg,#fde68a,#fbbf24)!important;
color:#111827!important;
}
#sosmed{scroll-margin-top:92px!important;}
/* Kartu produk tidak boleh saling menimpa pada ukuran layar apa pun. */
.market-product-grid{
grid-template-columns:repeat(6,minmax(150px,1fr))!important;
align-items:stretch!important;
}
.market-product-card{
width:100%!important;
min-width:0!important;
height:100%!important;
min-height:190px!important;
}
.market-product-image{height:132px!important;}
.market-product-info h3{overflow-wrap:anywhere!important;}
@media (max-width:1399px){
.market-nav-top{grid-template-columns:auto minmax(260px,1fr)!important;}
.market-actions{grid-column:1/-1!important;justify-content:flex-end!important;overflow-x:auto!important;padding-bottom:2px!important;}
.market-product-grid{grid-template-columns:repeat(5,minmax(145px,1fr))!important;}
}
@media (max-width:1100px){
.market-nav-top{grid-template-columns:auto minmax(220px,1fr)!important;padding:11px 16px!important;}
.market-logo b{font-size:14px!important;}
.market-actions{justify-content:flex-start!important;flex-wrap:nowrap!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{flex:0 0 auto!important;}
.market-section{padding-left:16px!important;padding-right:16px!important;}
.market-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.market-filter input{grid-column:1/-1!important;}
.market-filter button,.market-filter a{width:100%!important;text-align:center!important;justify-self:stretch!important;}
.market-product-grid{grid-template-columns:repeat(4,minmax(135px,1fr))!important;gap:12px!important;}
}
@media (max-width:780px){
html,body{overflow-x:hidden!important;}
.market-nav-top{
grid-template-columns:minmax(0,1fr)!important;
gap:8px!important;
padding:9px 10px!important;
}
.market-logo{justify-content:center!important;}
.market-logo b{white-space:normal!important;text-align:center!important;}
.market-search{order:2!important;width:100%!important;height:auto!important;}
.market-actions{
order:3!important;
width:100%!important;
display:flex!important;
justify-content:flex-start!important;
overflow-x:auto!important;
gap:7px!important;
scrollbar-width:none!important;
}
.market-actions::-webkit-scrollbar{display:none!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{
width:auto!important;
min-width:max-content!important;
height:36px!important;
min-height:36px!important;
padding:7px 9px!important;
font-size:10.5px!important;
}
.market-action span{display:inline!important;font-size:9.5px!important;line-height:1.05!important;}
.market-action-download{display:none!important;}
.market-action-sosmed{display:inline-flex!important;}
.market-hero{padding:10px!important;}
.hero-stage{height:250px!important;}
.market-slide-content{padding:25px 18px!important;max-width:94%!important;}
.market-slide h1{font-size:28px!important;}
.market-section{padding:20px 10px!important;}
.market-section-head{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;}
.market-section-head h2{font-size:21px!important;white-space:normal!important;}
.market-section-head a{width:100%!important;text-align:center!important;}
.market-filter{grid-template-columns:1fr!important;gap:8px!important;}
.market-filter input,.market-filter select,.market-filter button,.market-filter a{grid-column:auto!important;width:100%!important;}
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.market-product-card{min-height:172px!important;border-radius:15px!important;}
.market-product-image{height:112px!important;padding:12px!important;}
.market-product-image img{max-width:78%!important;max-height:78%!important;}
.market-product-info{left:9px!important;right:9px!important;bottom:9px!important;}
.market-product-info h3{font-size:12px!important;line-height:1.15!important;}
.market-product-info p{font-size:10px!important;}
.discount-badge{font-size:8.5px!important;padding:5px 6px!important;}
.sosmed-chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:380px){
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.market-product-card{min-height:162px!important;}
.market-product-image{height:104px!important;}
.market-product-info h3{font-size:11px!important;}
.market-product-info p{font-size:9px!important;}
.sosmed-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* ==========================================================
FINAL QUALITY PASS 2026-07-10
Stabilizes layout across desktop, tablet, and phones.
========================================================== */
html{box-sizing:border-box;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:inherit}
body.marketplace-home{width:100%;max-width:100%;margin:0;overflow-x:hidden}
.market-nav{position:sticky;top:0;z-index:1200;width:100%;background:rgba(7,13,24,.96);backdrop-filter:blur(14px)}
.market-nav-top{width:min(1560px,100%);margin-inline:auto;padding:12px clamp(14px,2.2vw,34px)!important}
.market-logo{min-width:0;white-space:nowrap}
.market-logo b{overflow:hidden;text-overflow:ellipsis}
.market-search{min-height:44px}
.market-search input{height:44px;line-height:1.2}
.market-search button{height:44px}
.market-actions{max-width:100%}
.running-popup{position:relative!important;top:auto!important;bottom:auto!important;z-index:1100!important}
.market-hero,.market-section,.website-banner-block,.market-footer{width:min(1560px,100%);margin-inline:auto}
.hero-stage{min-width:0}
.market-slide{background-repeat:no-repeat}
.website-banner-grid{align-items:stretch}
.website-promo-card{min-width:0;overflow:hidden}
.market-filter{display:grid!important;grid-template-columns:minmax(220px,1.5fr) minmax(170px,1fr) minmax(170px,1fr) auto auto!important;align-items:center!important;width:100%!important}
.market-filter input,.market-filter select{width:100%!important;min-width:0!important;margin:0!important}
.market-filter button,.market-filter a{white-space:nowrap}
.market-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.market-product-card{min-width:0;isolation:isolate}
.market-product-image img{display:block;width:100%;height:100%;object-fit:cover}
.market-product-info h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.market-product-info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{flex:0 0 auto}
img{max-width:100%}
@media (min-width:1400px){
.market-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media (max-width:1100px){
.market-nav-top{grid-template-columns:minmax(0,1fr) auto!important}
.market-logo{grid-column:1;grid-row:1}
.market-actions{grid-column:2;grid-row:1;overflow-x:auto;scrollbar-width:none}
.market-actions::-webkit-scrollbar{display:none}
.market-search{grid-column:1/-1;grid-row:2}
.market-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.market-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.market-filter input{grid-column:1/-1!important}
}
@media (max-width:760px){
.market-nav{position:relative}
.market-nav-top{padding:10px 12px!important;gap:8px!important}
.market-logo b{font-size:14px!important}
.market-actions{gap:6px!important}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{min-height:36px!important;padding:7px 9px!important;font-size:10px!important}
.market-search{grid-template-columns:auto minmax(0,1fr) auto!important}
.market-search input,.market-search button{height:40px!important}
.market-search button{min-width:56px!important;padding-inline:11px!important}
.market-hero{padding:10px 10px 6px!important}
.hero-stage{height:clamp(220px,58vw,300px)!important}
.market-slide-content{padding:24px 18px!important}
.market-slide h1{font-size:clamp(26px,8vw,34px)!important}
.market-section,.website-banner-block{padding-left:10px!important;padding-right:10px!important}
.market-filter{grid-template-columns:1fr!important;gap:8px!important}
.market-filter input,.market-filter select,.market-filter button,.market-filter a{grid-column:auto!important;width:100%!important;text-align:center}
.market-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.market-product-card{min-height:172px!important}
.market-product-image{height:112px!important}
.market-product-info{left:10px!important;right:10px!important;bottom:10px!important}
.market-product-info h3{font-size:12px!important}
.market-product-info p{font-size:10px!important}
.website-banner-grid{grid-template-columns:1fr!important}
.floating-chat{right:14px!important;bottom:16px!important}
}
@media (max-width:360px){
.market-product-grid{gap:8px!important}
.market-product-card{min-height:160px!important}
.market-product-image{height:102px!important}
}
/* === FINAL NAVBAR SEJAJAR: desktop dan tablet tetap satu baris === */
@media (min-width:761px) and (max-width:1180px){
.market-nav-top{
display:grid!important;
grid-template-columns:max-content minmax(180px,1fr) max-content!important;
align-items:center!important;
gap:8px!important;
padding:10px 12px!important;
}
.market-logo,.market-search,.market-actions{grid-column:auto!important;grid-row:auto!important;}
.market-actions{justify-content:flex-end!important;flex-wrap:nowrap!important;}
}
/* ==========================================================
NAVBAR FINAL RAPI — single source of truth (2026-07-10)
========================================================== */
.market-category-nav,
.quick-pills,
nav.market-category-nav,
section.quick-pills{
display:none!important;
}
/* Ukuran halaman normal pada zoom browser 100%. */
html{font-size:16px!important;}
body.marketplace-home{font-size:16px!important;}
.market-nav-top{
display:grid!important;
grid-template-columns:max-content minmax(300px,1fr) max-content!important;
align-items:center!important;
gap:14px!important;
width:min(1560px,100%)!important;
margin:0 auto!important;
padding:12px clamp(14px,2vw,28px)!important;
}
.market-logo{
grid-column:auto!important;
grid-row:auto!important;
min-width:0!important;
display:flex!important;
align-items:center!important;
gap:9px!important;
white-space:nowrap!important;
}
.market-logo span{flex:0 0 auto!important;}
.market-logo b{
max-width:230px!important;
font-size:15px!important;
line-height:1.15!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.market-search{
grid-column:auto!important;
grid-row:auto!important;
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
align-items:center!important;
gap:9px!important;
min-width:0!important;
width:100%!important;
min-height:44px!important;
margin:0!important;
}
.market-search input{
width:100%!important;
min-width:0!important;
height:42px!important;
font-size:13px!important;
}
.market-search button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
position:static!important;
visibility:visible!important;
opacity:1!important;
min-width:62px!important;
height:42px!important;
padding:0 15px!important;
white-space:nowrap!important;
}
.market-actions{
grid-column:auto!important;
grid-row:auto!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
flex-wrap:nowrap!important;
gap:8px!important;
min-width:max-content!important;
width:auto!important;
padding:0!important;
overflow:visible!important;
}
.market-action,
.market-wallet,
.market-login,
.market-register,
.user-menu-btn{
flex:0 0 auto!important;
min-height:40px!important;
padding:8px 12px!important;
font-size:12px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
/* Laptop/tablet landscape: tetap satu baris, tetapi lebih ringkas. */
@media (min-width:901px) and (max-width:1180px){
.market-nav-top{
grid-template-columns:max-content minmax(190px,1fr) max-content!important;
gap:8px!important;
padding:10px 12px!important;
}
.market-logo b{max-width:150px!important;font-size:13px!important;}
.market-logo span{width:34px!important;height:34px!important;}
.market-search{gap:6px!important;}
.market-search input{font-size:12px!important;}
.market-search button{min-width:52px!important;padding:0 10px!important;font-size:12px!important;}
.market-actions{gap:5px!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{
min-height:36px!important;
padding:7px 8px!important;
font-size:10.5px!important;
}
.market-action-download span{display:none!important;}
.market-action-download{width:36px!important;min-width:36px!important;padding:7px!important;justify-content:center!important;}
}
/* Tablet portrait: logo dan akun di atas, pencarian penuh di bawah. */
@media (min-width:761px) and (max-width:900px){
.market-nav-top{
grid-template-columns:minmax(0,1fr) auto!important;
gap:8px 10px!important;
padding:10px 12px!important;
}
.market-logo{grid-column:1!important;grid-row:1!important;}
.market-actions{grid-column:2!important;grid-row:1!important;max-width:58vw!important;overflow-x:auto!important;scrollbar-width:none!important;}
.market-actions::-webkit-scrollbar{display:none!important;}
.market-search{grid-column:1/-1!important;grid-row:2!important;}
.market-action-download{display:none!important;}
}
/* Ponsel: rapi, tidak menimbulkan scroll horizontal. */
@media (max-width:760px){
.market-nav-top{
grid-template-columns:minmax(0,1fr) auto!important;
gap:8px!important;
padding:9px 10px!important;
}
.market-logo{grid-column:1!important;grid-row:1!important;justify-content:flex-start!important;}
.market-logo b{max-width:150px!important;font-size:13px!important;text-align:left!important;white-space:nowrap!important;}
.market-actions{
grid-column:2!important;
grid-row:1!important;
max-width:48vw!important;
overflow-x:auto!important;
scrollbar-width:none!important;
gap:5px!important;
}
.market-actions::-webkit-scrollbar{display:none!important;}
.market-search{grid-column:1/-1!important;grid-row:2!important;order:initial!important;}
.market-search input,.market-search button{height:40px!important;}
.market-action-download{display:none!important;}
.market-action,.market-wallet,.market-login,.market-register,.user-menu-btn{
min-height:35px!important;
padding:7px 9px!important;
font-size:10px!important;
}
}