/* ====== Design Tokens ====== */
:root{
--primary:#7C3AED; /* Ungu utama */
--primary-600:#6D28D9;
--primary-700:#5B21B6;
--accent:#A855F7;
--bg:#ffffff;
--surface:#F7F4FF; /* Putih keunguan */
--text:#0F172A;
--muted:#64748B;
--border:#E8E5F7;
--success:#16A34A;
--warning:#F59E0B;
--danger:#EF4444;
--radius:14px;
--shadow:0 12px 30px rgba(124,58,237,.12);
}
/* ====== Base ====== */
*{box-sizing:border-box}
html,body{
height:100%;
}
body{
margin:0;
font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.6;
/* ⬇️ ini yang penting */
display:flex;
flex-direction:column;
}
/* Biar konten utama dorong footer ke bawah */
main#content{
flex:1 0 auto;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.alt{background:var(--surface)}
.section-head{margin-bottom:24px}
.section-head h2{margin:0 0 6px}
.muted{color:var(--muted)}
.tiny{font-size:12px}
/* ===== Buttons global (Beli, Lanjutkan Pembayaran, Cek) ===== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 18px;
min-height:40px;
border-radius:12px;
border:1px solid transparent;
background:#ffffff;
font-family:inherit;
font-size:14px;
font-weight:600;
line-height:1;
cursor:pointer;
text-decoration:none;
transition:
background .18s ease,
box-shadow .18s ease,
transform .18s ease,
color .18s ease;
}
.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
border-color:transparent;
box-shadow:var(--shadow);
}
.btn-spinner{
display:inline-block;
width:16px;
height:16px;
border-radius:999px;
border:2px solid rgba(255,255,255,.45);
border-top-color:#ffffff;
margin-right:8px;
animation:btnSpin .6s linear infinite;
vertical-align:middle;
}
@keyframes btnSpin{
to{ transform:rotate(360deg); }
}
/* State tombol loading / disabled */
.btn.is-loading,
.btn:disabled{
opacity:.75;
cursor:not-allowed;
box-shadow:none;
filter:none;
transform:none;
}
/* Spinner di dalam tombol */
.btn-spinner{
width:14px;
height:14px;
border-radius:999px;
border:2px solid rgba(255,255,255,.5);
border-top-color:#ffffff;
display:inline-block;
animation:btnSpin .7s linear infinite;
margin-right:6px;
}
@keyframes btnSpin{
to{transform:rotate(360deg);}
}
.btn-primary:hover{
filter:brightness(1.05);
transform:translateY(-1px);
box-shadow:0 14px 40px rgba(124,58,237,.2);
}
.btn-outline{
background:transparent;
color:var(--primary);
border-color:var(--primary);
}
.btn-ghost{
background:transparent;
border-color:var(--border);
color:var(--text);
}
.btn-block{width:100%}
button.btn{border:none}
/* === FIX tombol outline & ghost (Gunakan, dll) === */
button.btn.btn-outline,
button.btn.btn-ghost {
border-width: 1px;
border-style: solid;
}
/* Biar tombol Gunakan lebih terlihat seperti chip */
.promo-apply-btn{
border-radius: 999px;
padding-inline: 16px;
}
/* =========================
* NAVBAR + ACTIVE STATE
* ========================= */
.navbar{
position:sticky;
top:0;
left:0;
right:0;
z-index:100;
background:#ffffff;
border-bottom:1px solid var(--border);
}
.navbar.scrolled{
box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:64px;
}
/* Brand */
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
}
.brand-mark{
display:inline-grid;
place-items:center;
width:34px;
height:34px;
border-radius:10px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
}
.brand-text{
font-size:18px;
letter-spacing:.2px;
}
.brand-text span{color:var(--primary)}
/* Nav links – DESKTOP */
.nav-links{
display:flex;
align-items:center;
gap:18px;
}
.nav-link{
position:relative;
padding:6px 12px;
border-radius:999px;
font-weight:500;
font-size:14px;
color:#64748B;
text-decoration:none;
transition:
color .18s ease,
background .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.nav-link::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:-6px;
height:3px;
border-radius:999px;
background:transparent;
transform:scaleX(0);
transform-origin:center;
transition:transform .18s ease, background .18s ease;
}
.nav-link:hover{
color:var(--primary-700);
background:rgba(124,58,237,.06);
}
.nav-link.active{
color:#0F172A;
background:rgba(124,58,237,.08);
box-shadow:0 8px 20px rgba(124,58,237,.18);
}
.nav-link.active::after{
background:linear-gradient(90deg,var(--primary),var(--accent));
transform:scaleX(1);
}
/* Hamburger */
.nav-toggle{
display:none;
flex-direction:column;
gap:4px;
padding:6px;
border:0;
background:transparent;
cursor:pointer;
}
.nav-toggle .bar{
width:22px;
height:2px;
border-radius:999px;
background:#1f2937;
}
/* NAVBAR – MOBILE */
@media (max-width:640px){
.nav-inner{min-height:60px}
.nav-toggle{display:flex}
.nav-links{
position:fixed;
top:60px;
left:0;
right:0;
background:#ffffff;
border-bottom:1px solid var(--border);
padding:10px 20px 16px;
display:none;
flex-direction:column;
align-items:flex-start;
gap:8px;
z-index:90;
}
.nav-links.open{display:flex}
.nav-link{
width:100%;
border-radius:12px;
padding:10px 12px;
}
.nav-link::after{display:none}
}
/* ====== Hero (landing) ====== */
.hero{
padding:72px 0;
background:radial-gradient(1200px 600px at 85% -20%, rgba(124,58,237,.18), transparent 60%);
}
.hero-inner{
display:grid;
grid-template-columns:1.2fr .8fr;
align-items:center;
gap:24px;
}
.hero-text h1{
font-size:40px;
line-height:1.15;
margin:0 0 8px;
}
.grad{
background:linear-gradient(135deg,var(--primary),var(--accent));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.searchbar{
display:flex;
align-items:center;
gap:10px;
margin:18px 0;
}
.searchbar svg{width:20px;height:20px;fill:#475569}
.input{
width:100%;
height:44px;
border:1px solid var(--border);
border-radius:12px;
padding:0 14px;
background:#fff;
}
.input:focus{
outline:2px solid rgba(124,58,237,.2);
border-color:var(--primary);
}
.hero-cta{display:flex;gap:12px;margin-top:4px}
.hero-art{position:relative;height:280px}
.hero-art .blob{
position:absolute;
inset:10% 0 0 8%;
border-radius:30px;
background:conic-gradient(from 120deg at 30% 30%, #ffffff 0, #ede9fe 30%, #ffffff);
box-shadow:0 30px 60px rgba(124,58,237,.18);
}
.card-float{
position:absolute;
right:10%;
top:12%;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
padding:12px 14px;
box-shadow:var(--shadow);
font-weight:600;
}
.card-float span{
display:block;
font-size:12px;
color:#475569;
}
/* ====== Hero Slider ====== */
.hero-slider{
position:relative;
padding:36px 0 24px;
background:var(--surface);
}
.hero-wave{display:none!important}
.hero-slider .container{max-width:1280px}
.carousel{
position:relative;
overflow:hidden;
}
.carousel-track{
display:flex;
gap:0;
transform:translateX(0);
transition:transform .45s ease;
}
.slide{
flex:0 0 100%;
position:relative;
border-radius:18px;
overflow:hidden;
border:1px solid var(--border);
box-shadow:var(--shadow);
aspect-ratio:1280 / 436;
background:transparent;
}
.slide-bg{
position:absolute;
inset:0;
background-image:var(--bg);
background-size:cover;
background-position:center;
}
.slide::after{content:none!important}
.slide-content{
position:relative;
z-index:1;
padding:22px;
max-width:min(60ch,70%);
}
.slide .kicker{
display:inline-block;
font-weight:700;
font-size:12px;
letter-spacing:.08em;
color:var(--primary);
background:#f6f0ff;
border:1px solid var(--border);
border-radius:999px;
padding:4px 10px;
margin-bottom:8px;
}
.slide h2{margin:4px 0 8px;line-height:1.15}
.car-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
width:42px;
height:42px;
border-radius:999px;
border:1px solid var(--border);
background:#fff;
box-shadow:var(--shadow);
font-size:22px;
line-height:1;
cursor:pointer;
}
.car-btn:hover{filter:brightness(1.02)}
.car-btn.prev{left:6px}
.car-btn.next{right:6px}
.dots{
position:absolute;
left:50%;
bottom:16px;
transform:translateX(-50%);
display:flex;
justify-content:center;
gap:10px;
margin:0;
z-index:3;
}
.dots .dot{
width:28px;
height:6px;
border-radius:999px;
background:#e9e5ff;
border:1px solid var(--border);
}
.dots .dot.active{
background:linear-gradient(135deg,var(--primary),var(--accent));
border-color:transparent;
}
@media (max-width:640px){
.slide{
aspect-ratio: 1280 / 436; /* sama kayak ukuran asli */
}
.slide-bg{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
/* ====== Game Grid – POSTER MODE ====== */
.games-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:16px;
align-items:stretch;
}
.game-card{
position:relative;
display:block;
border-radius:22px;
overflow:hidden;
border:none;
background:transparent;
box-shadow:0 12px 28px rgba(0,0,0,.35);
padding:0;
transition:transform .25s ease, box-shadow .25s ease;
}
.game-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.game-thumb{
width:100%;
height:100%;
aspect-ratio:3 / 5;
background-image:var(--bg);
background-size:cover;
background-position:center;
}
.game-info{display:none}
.game-card .pill{
position:absolute;
top:10px;
left:10px;
z-index:2;
padding:4px 12px;
font-size:12px;
font-weight:700;
border-radius:999px;
background:rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.35);
color:#fff;
}
.game-thumb::after,
.product-thumb::after,
.big-thumb::after{
content:none!important;
}
/* Grid responsive */
@media (max-width:1200px){
.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
.games-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
}
/* LIMIT pilih produk (2 baris) */
.games-grid.limited .game-card:nth-child(n+11){display:none}
@media (max-width:1024px){
.games-grid.limited .game-card:nth-child(n+9){display:none}
}
@media (max-width:768px){
.games-grid.limited .game-card:nth-child(n+7){display:none}
}
@media (max-width:640px){
.games-grid.limited .game-card:nth-child(n+5){display:none}
}
.product-more{margin-top:18px;text-align:center}
.btn-show-more{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:10px 18px;
border-radius:999px;
border:1px solid rgba(148,163,184,.7);
background:#ffffff;
font-size:14px;
font-weight:600;
color:#0f172a;
cursor:pointer;
box-shadow:0 10px 25px rgba(15,23,42,.06);
transition:
background .18s ease,
color .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.btn-show-more:hover{
border-color:transparent;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
box-shadow:0 14px 35px rgba(124,58,237,.25);
transform:translateY(-1px);
}
@media (max-width:640px){
.btn-show-more{width:100%}
}
/* ====== Steps ====== */
.steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.step{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:16px;
}
.step-num{
display:inline-grid;
place-items:center;
width:36px;
height:36px;
border-radius:10px;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--accent));
margin-bottom:8px;
font-weight:700;
}
/* ====== CTA ====== */
.cta .cta-inner{
background:linear-gradient(135deg,#ffffff,#f5f3ff);
border:1px solid var(--border);
border-radius:18px;
padding:22px 20px;
display:flex;
align-items:center;
justify-content:space-between;
}
/* ====== Product Detail (lama, masih dipakai di beberapa halaman?) ====== */
.product-hero{padding-top:24px;padding-bottom:0}
.breadcrumb{
display:flex;
gap:8px;
align-items:center;
color:#475569;
margin-bottom:8px;
}
.product-head{
display:flex;
align-items:center;
gap:16px;
padding:14px 0 22px;
}
.product-thumb{
width:80px;
height:80px;
border-radius:16px;
background:#ede9fe;
background-image:var(--bg);
background-size:cover;
background-position:center;
border:1px solid var(--border);
}
.product-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:18px;
}
/* ====== Track / Card umum ====== */
.track-form{margin:12px 0 10px}
.track-row{display:flex;gap:10px}
.track-result{margin-top:16px}
.card{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}
.order-card header{
display:flex;
align-items:center;
justify-content:space-between;
}
.order-status{
display:flex;
align-items:center;
gap:10px;
margin:8px 0;
}
.order-steps{margin:10px 0 0;padding-left:18px}
.order-steps li{margin:6px 0}
.order-steps .done{color:var(--success)}
.badge{
display:inline-flex;
align-items:center;
height:28px;
border-radius:999px;
padding:0 10px;
border:1px solid var(--border);
font-weight:600;
}
.badge.success{
background:#ecfdf5;
border-color:#bbf7d0;
color:#166534;
}
/* Pending */
.badge.warning{
background:#fffbeb;
border-color:#fed7aa;
color:#92400e;
}
/* Processing */
.badge.info{
background:#eff6ff;
border-color:#bfdbfe;
color:#1d4ed8;
}
/* Gagal */
.badge.danger{
background:#fef2f2;
border-color:#fecaca;
color:#b91c1c;
}
/* ====== Footer ====== */
.footer{
margin-top:24px;
border-top:1px solid var(--border);
background:var(--bg);
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:18px;
padding:26px 0;
}
.foot-title{margin:0 0 8px}
.foot-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:8px;
}
.footer-bottom{
border-top:1px solid var(--border);
padding:14px 0 calc(14px + env(safe-area-inset-bottom));
}
.footer-bottom .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.brand-footer .brand-mark{width:32px;height:32px}
.pay-logos{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.pay-logos .badge{margin:0}
/* Footer responsive */
@media (max-width:1024px){
.footer-grid{
grid-template-columns:1.5fr 1fr 1fr;
}
}
@media (max-width:768px){
.footer-grid{
grid-template-columns:1fr 1fr;
}
}
@media (max-width:520px){
.footer-grid{
grid-template-columns:1fr;
gap:14px;
}
.footer .brand-footer{margin-bottom:6px}
.foot-list{gap:6px}
.footer .muted{font-size:14px;line-height:1.5}
.footer-bottom .container{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
}
/* Footer Brand Center Fix (Mobile ≤ 520px) */
@media (max-width:520px){
.footer-grid{
grid-template-columns:repeat(2,1fr)!important;
gap:16px!important;
}
.footer-grid > :nth-child(1){
grid-column:1 / -1!important;
text-align:center!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
}
.footer-grid .brand-footer{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.footer-grid .brand-footer .muted{
max-width:260px;
margin-top:8px;
line-height:1.5;
}
.footer-grid > :nth-child(2),
.footer-grid > :nth-child(3){
padding-left:12px!important;
}
.footer-grid > :nth-child(4){
grid-column:1 / -1!important;
padding-left:12px;
}
.pay-logos{display:none!important}
.footer-bottom .container{
justify-content:center!important;
text-align:center!important;
}
}
/* ====== Toast ====== */
.toast{
position:fixed;
left:50%;
top:calc(14px + env(safe-area-inset-top)); /* aman di HP notch */
transform:translateX(-50%);
background:#111827; /* default: dark (buat info/success) */
color:#fff;
padding:10px 16px;
border-radius:12px;
max-width:min(360px, calc(100% - 32px));
text-align:center;
box-shadow:0 12px 30px rgba(15,23,42,.35);
opacity:0;
pointer-events:none;
transition:opacity .2s, translate .2s;
translate:0 -8px; /* animasi dari atas turun */
z-index:140; /* di atas bottom sheet & lain2 */
}
.toast.show{
opacity:1;
translate:0 0;
}
/* Variasi warna */
.toast.toast--error{
background:var(--danger); /* merah dari design token */
}
.toast.toast--success{
background:var(--success); /* kalau nanti mau hijau sukses */
}
/* === Flash message (flashdata) === */
.flash-msg{
margin-bottom:12px;
display:grid;
gap:8px;
}
.alert{
display:flex;
align-items:flex-start;
gap:8px;
padding:10px 12px;
border-radius:14px;
border:1px solid transparent;
background:#f9fafb;
font-size:13px;
}
.alert-icon{
font-size:16px;
line-height:1;
margin-top:2px;
}
.alert-body{
display:flex;
flex-direction:column;
gap:2px;
}
.alert-body strong{
font-size:13px;
}
.alert-body span{
font-size:13px;
}
/* warna sukses & error */
.alert--success{
border-color:#bbf7d0;
background:#ecfdf5;
color:#166534;
}
.alert--error{
border-color:#fecaca;
background:#fef2f2;
color:#b91c1c;
}
/* Mobile tweak biar tetap enak dibaca */
@media (max-width:640px){
.alert{
padding:10px 10px;
font-size:13px;
}
}
/* Dark mode */
:root[data-theme="dark"] .alert{
background:#020617;
border-color:#1e293b;
}
:root[data-theme="dark"] .alert--success{
background:#022c22;
border-color:#14532d;
color:#bbf7d0;
}
:root[data-theme="dark"] .alert--error{
background:#450a0a;
border-color:#7f1d1d;
color:#fecaca;
}
/* ====== Utilities ====== */
.grid{display:grid}
/* ===== FLASH SALE ===== */
.flash-sale{padding-top:36px;padding-bottom:24px}
.section.flash-sale,
.section.product{
position:relative;
padding-top:36px;
padding-bottom:24px;
background:var(--surface);
border-top:0;
}
.fs-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.fs-left{display:flex;align-items:center;gap:10px}
.fs-badge{
display:inline-flex;
align-items:center;
gap:6px;
height:28px;
padding:0 10px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
font-weight:800;
}
.fs-badge .fire{
width:16px;
height:16px;
animation:flame .9s infinite ease-in-out alternate;
filter:drop-shadow(0 0 2px rgba(255,115,0,.35));
}
.fs-badge .fire path{fill:#FDBA74}
@keyframes flame{
0%{transform:translateY(1px) scale(.95)}
100%{transform:translateY(-1px) scale(1.05)}
}
.fs-countdown{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border:1px solid var(--border);
border-radius:999px;
background:#fff;
}
.fs-countdown svg{width:16px;height:16px;fill:var(--primary)}
/* Kartu flash sale */
.fs-card{
flex:0 0 320px;
display:grid;
grid-template-columns:1fr; /* mobile: gambar di atas */
gap:12px;
border:1px solid var(--border);
border-radius:18px;
background:#050816; /* atau warna card kamu */
padding:12px;
box-shadow:var(--shadow);
scroll-snap-align:start;
/* ⬇️ ini penting supaya gambar "ikut" bentuk card */
overflow:hidden;
}
/* wrapper gambar di dalam kartu */
.fs-thumb{
border-radius:14px;
overflow:hidden; /* jaga2 kalau img lebih besar */
}
/* kalau pakai ![]()
di dalam .fs-thumb */
.fs-thumb img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
/* mobile */
@media (max-width:640px){
.fs-card{
flex:0 0 88%;
}
.fs-thumb{
width:100%;
aspect-ratio:16/9;
margin-bottom:8px;
}
}
.price-now{font-weight:800;color:var(--primary)}
.price-old{text-decoration:line-through;color:#94a3b8}
.discount{
display:inline-flex;
align-items:center;
height:22px;
padding:0 8px;
border-radius:999px;
background:#f1eafe;
color:var(--primary);
font-weight:700;
font-size:12px;
}
.fs-progress .bar{
height:8px;
border-radius:999px;
background:#f1f5f9;
overflow:hidden;
margin-bottom:6px;
}
.fs-progress .bar span{
display:block;
height:100%;
background:linear-gradient(135deg,var(--primary),var(--accent));
}
/* Flash sale responsive */
/* ===== FLASH SALE GRID – HORIZONTAL SCROLL ===== */
.fs-grid{
display:flex;
align-items:stretch;
gap:12px;
overflow-x:auto;
padding:4px 4px 10px;
scroll-snap-type:x mandatory;
scroll-padding-inline:4px;
-webkit-overflow-scrolling:touch;
}
.fs-grid::-webkit-scrollbar{
display:none; /* sembunyikan scrollbar */
}
/* Kartu dasar: lebar fix di desktop, tetap grid di dalam */
.fs-card{
flex:0 0 320px; /* ≈ 320px per kartu di desktop */
display:grid;
grid-template-columns:140px 1fr;
gap:12px;
border:1px solid var(--border);
border-radius:14px;
background:#fff;
padding:12px;
box-shadow:var(--shadow);
scroll-snap-align:start;
}
/* Thumbnail */
.fs-thumb{
border-radius:12px;
background:#ede9fe;
background-image:var(--bg);
background-size:cover;
background-position:center;
}
/* Tablet */
@media (max-width:1024px){
.fs-card{
flex:0 0 280px;
grid-template-columns:120px 1fr;
}
}
/* Mobile: kartu hampir full-width, gambar di atas, teks di bawah */
@media (max-width:640px){
.fs-card{
flex:0 0 88%; /* 1 kartu ≈ 88% lebar layar */
grid-template-columns:1fr; /* gambar di atas, konten di bawah */
padding:12px;
}
.fs-thumb{
width:100%;
aspect-ratio:16/9;
margin-bottom:8px;
}
.fs-price{
flex-direction:column;
align-items:flex-start;
gap:2px;
}
}
/* === Judul Flash Sale: Operator + Produk === */
.fs-title{
display:flex;
align-items:center;
gap:8px;
margin:0 0 6px;
flex-wrap:wrap;
}
.fs-op{
display:inline-flex;
align-items:center;
height:22px;
padding:0 8px;
font-size:12px;
font-weight:700;
border-radius:999px;
background:#f6f0ff;
border:1px solid var(--border);
color:#5B21B6;
}
.fs-sep{opacity:.5}
.fs-prod{font-weight:700}
/* ===== KATEGORI ===== */
.cat-tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:14px;
}
.chip{
display:inline-flex;
align-items:center;
height:36px;
padding:0 14px;
border-radius:999px;
border:1px solid var(--border);
background:#fff;
font-weight:600;
cursor:pointer;
}
.chip.active{
border-color:transparent;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
}
/* ===== Product - step flow (lama) ===== */
.prod-title{
display:flex;
align-items:center;
gap:16px;
margin-bottom:12px;
}
.prod-thumb{
width:72px;
height:72px;
border-radius:16px;
background:#ede9fe;
background-image:var(--bg);
background-size:cover;
background-position:center;
border:1px solid var(--border);
}
.prod-name{margin:0}
.step-flow{
display:grid;
gap:16px;
margin-top:8px;
max-width:1000px;
}
.step-box{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:16px;
}
.step-head{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.step-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
height:28px;
border-radius:999px;
padding:0 10px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
font-weight:700;
}
.step-title{margin:0}
.step-body{display:grid;gap:10px}
@media (max-width:640px){
.prod-title{gap:12px}
.prod-thumb{width:60px;height:60px;border-radius:14px}
}
/* ====== Product Modern (hero detail) ====== */
.prod-hero{
padding:28px 0;
background: radial-gradient(
800px 400px at 85% -20%,
rgba(124,58,237,.12),
transparent 60%
);
}
.prod-hero-desc{
margin:4px 0 6px;
font-size:14px;
color:var(--muted);
max-width:420px; /* biar gak kepanjangan di layar lebar */
}
/* Mobile tweak */
@media (max-width:640px){
.prod-hero-desc{
font-size:13px;
}
}
.prod-hero-inner{
display:flex;
align-items:center;
gap:18px;
}
/* Gambar game di detail */
.prod-hero-thumb{
width:96px; /* lebih besar seperti poster */
aspect-ratio:1 / 1; /* PENTING: selalu kotak */
border-radius:22px;
border:1px solid var(--border);
background:#050816; /* dasar gelap biar mirip card */
background-image:var(--bg);
background-size:cover;
background-position:center;
flex-shrink:0; /* jangan ikut “gepeng” oleh flex */
}
.prod-hero-title{
margin:0;
}
/* Mobile tweak */
@media (max-width:640px){
.prod-hero{
padding:20px 0 14px;
}
.prod-hero-inner{
align-items:flex-start;
gap:14px;
}
.prod-hero-thumb{
width:88px; /* sedikit lebih kecil di HP */
}
.prod-hero-title{
font-size:22px;
}
}
/* Layout: kiri (form) + kanan (ringkasan) */
.prod-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:18px;
}
.prod-main{display:grid;gap:14px}
.prod-side{position:relative}
.summary-card{
position:sticky;
top:86px;
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:16px;
box-shadow:var(--shadow);
}
.summary-card h4{margin:0 0 8px}
.sum-row{
display:flex;
align-items:center;
justify-content:space-between;
margin:8px 0;
}
.sum-row.total{font-weight:800}
.sum-row.total span:last-child{color:var(--primary)}
/* Card step (form) */
.mod-card{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:16px;
}
.mod-head{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.mod-head .num{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
font-weight:800;
}
.mod-body{display:grid;gap:10px}
.grid-2{grid-template-columns:1fr 1fr}
.form-field{
display:grid;
gap:6px;
margin:10px 0;
}
.pay-grid{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:10px 0 14px;
}
.radio-chip{display:inline-flex}
.radio-chip input{position:absolute;opacity:0}
.radio-chip span{
display:inline-flex;
align-items:center;
height:36px;
border-radius:999px;
border:1px solid var(--border);
padding:0 14px;
background:#fff;
font-weight:500;
}
.radio-chip input:checked + span{
border-color:var(--primary);
outline:2px solid rgba(124,58,237,.25);
}
@media (max-width:840px){
.prod-layout{grid-template-columns:1fr}
.summary-card{position:static}
.grid-2{grid-template-columns:1fr}
}
/* Nominal cards */
.pack-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:10px;
}
.radio-card{
position:relative;
border:1px solid var(--border);
border-radius:14px;
overflow:hidden;
background:#fff;
cursor:pointer;
transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.radio-card input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.radio-card .radio-ui{padding:12px}
.radio-card .radio-title{font-weight:600}
.radio-card .radio-price{
color:var(--primary);
font-weight:700;
}
/* Selected state */
.radio-card:has(input:checked){
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(124,58,237,.20);
transform:translateY(-1px);
background:#ffffff;
}
.radio-card:has(input:checked) .radio-title{color:var(--text)}
.radio-card:has(input:checked) .radio-price{color:var(--primary)}
/* Fallback (kalau :has belum didukung) */
.radio-card.is-selected{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(124,58,237,.20);
transform:translateY(-1px);
background:#ffffff;
}
/* Matikan outline lama di dalam radio-card (biar tidak ada garis bawah aneh) */
.radio-card input:checked + .radio-ui{
outline:none!important;
}
/* Hover */
.radio-card:hover{box-shadow:var(--shadow)}
/* ==== GROUP NOMINAL: SPECIAL / TOPUP ==== */
.denom-group{margin-bottom:18px}
.denom-group-head{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
font-weight:700;
font-size:13px;
text-transform:uppercase;
letter-spacing:.05em;
color:#047857;
}
.denom-group-head .denom-icon{
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:13px;
background:#ecfdf5;
border:1px solid #bbf7d0;
}
.denom-group-head .denom-icon.diamond{
background:#eff6ff;
border-color:#bfdbfe;
}
.denom-group-head .denom-title{line-height:1}
/* NOMINAL TABS (Special / Top Up) */
.nom-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
}
.nom-tab{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 14px;
border-radius:999px;
border:1px solid var(--border);
background:#fff;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:
background .18s ease,
color .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.nom-tab .nom-icon{font-size:16px}
.nom-tab.active{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
border-color:transparent;
box-shadow:var(--shadow);
}
/* ====== Responsive global ====== */
@media (max-width:1024px){
.hero-inner{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,1fr)}
.track-row{flex-direction:column}
}
/* === MOBILE: PILIH NOMINAL 2 KOLOM & FONT LEBIH KECIL === */
@media (max-width: 640px){
/* 1 baris 2 grid */
.pack-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
/* kartu nominal lebih compact */
.radio-card .radio-ui{
padding: 8px 10px;
}
/* judul + harga diperkecil */
.radio-card .radio-title{
font-size: 13px;
line-height: 1.3;
}
.radio-card .radio-price{
font-size: 13px;
}
}
/* === PERKS DI BAWAH NAMA PRODUK (DETAIL) === */
.prod-perks{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.perk{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 12px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--accent)); /* ungu */
color:#f9fafb;
font-size:12px;
font-weight:500;
box-shadow:0 10px 26px rgba(124,58,237,.35); /* shadow ungu */
}
.perk-icon{
font-size:14px;
}
/* Mobile: sedikit dirapikan biar nggak mepet */
@media (max-width:640px){
.prod-perks{
gap:8px;
}
}
/* === METODE PEMBAYARAN (dari tabel method) === */
.pay-method-list{
display:grid;
gap:10px;
}
/* 1 baris = 1 metode (klik di mana saja) */
.pay-row{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--border);
background:#f9fafb;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.pay-row input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.pay-row-main{
display:flex;
align-items:center;
gap:12px;
}
.pay-row-icon{
width:40px;
height:40px;
border-radius:999px;
background:#fff;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
box-shadow:0 8px 20px rgba(15,23,42,.18);
}
.pay-row.is-disabled {
opacity: 0.5;
pointer-events: none;
}
.pay-row-text{
display:flex;
flex-direction:column;
}
.pay-row-title{
font-size:14px;
font-weight:600;
}
.pay-row-note{
font-size:12px;
color:var(--muted);
}
.pay-row-arrow{
font-size:18px;
color:#cbd5f5;
}
/* hover */
.pay-row:hover{
background:#ffffff;
transform:translateY(-1px);
box-shadow:var(--shadow);
}
/* state terpilih */
.pay-row:has(input:checked){
border-color:var(--primary);
background:#ffffff;
box-shadow:0 0 0 2px rgba(124,58,237,.20);
}
/* mobile: rapetin dikit */
@media (max-width:640px){
.pay-row{
padding:10px 12px;
}
.pay-row-icon{
width:32px;
height:32px;
}
.pay-row-title{
font-size:13px;
}
}
/* === GROUP KATEGORI METODE PEMBAYARAN === */
.pay-cat-list{
display:grid;
gap:10px;
}
/* Card kategori (QRIS, VA, Retail, dll) */
.pay-cat{
border-radius:16px;
border:1px solid var(--border);
background:#f9fafb;
overflow:hidden;
}
/* Header kategori */
.pay-cat-head{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 16px;
border:0;
background:#f3f4ff;
color:#0f172a;
font-weight:600;
font-size:14px;
cursor:pointer;
}
.pay-cat-label{
display:flex;
align-items:center;
gap:8px;
}
.pay-cat-chevron{
font-size:16px;
transform:rotate(0deg);
transition:transform .18s ease;
}
/* Saat kategori terbuka */
.pay-cat.is-open .pay-cat-head{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
}
.pay-cat.is-open .pay-cat-chevron{
transform:rotate(90deg);
}
/* Body berisi daftar metode */
.pay-cat-body{
padding:10px 10px 12px;
background:#f9fafb;
display:grid;
gap:8px;
}
/* Hormati atribut hidden pada body accordion */
.pay-cat-body[hidden]{
display:none !important;
}
/* Pakai style pay-row yang sudah ada, cuma sedikit tweak */
.pay-cat-body .pay-row{
border-radius:12px;
background:#ffffff;
}
/* Mobile tweaks */
@media (max-width:640px){
.pay-cat-head{
padding:10px 12px;
}
.pay-cat-body{
padding:8px 8px 10px;
}
}
.pay-row-icon{
width:40px;
height:40px;
border-radius:999px;
background:#fff;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
box-shadow:0 8px 20px rgba(15,23,42,.18);
}
/* Logo metode pembayaran: kotak, bukan lingkaran */
.pay-row-icon{
width:60px;
height:26px;
border-radius:6px; /* sudut sedikit rounded, bukan bulat */
background:#fff;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
box-shadow:0 3px 6px rgba(15,23,42,.12);
}
@media (max-width:640px){
.pay-row-icon{
width:52px;
height:22px;
}
}
/* ===== RINGKASAN PESANAN – DESKTOP vs MOBILE ===== */
/* Desktop: pakai card samping biasa */
.summary-card--desktop{
/* tidak diutak-atik, hanya penanda */
}
/* Mobile: hide card desktop, pakai bottom sheet */
@media (max-width: 840px){
.summary-card--desktop{
display:none;
}
/* kasih ruang ekstra supaya konten tidak ketimpa sheet */
.prod-section{
padding-bottom:120px;
}
.summary-mobile-wrap{
position:fixed;
left:0;
right:0;
bottom:0;
padding:8px 16px calc(8px + env(safe-area-inset-bottom));
background:linear-gradient(
180deg,
transparent,
rgba(15,23,42,.06),
rgba(15,23,42,.22)
);
z-index:90;
}
/* bar kecil: "Ringkasan Pesanan" + item + total */
.summary-mobile-toggle{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 14px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
box-shadow:0 12px 26px rgba(15,23,42,.28);
cursor:pointer;
}
.summary-mobile-main{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
}
.summary-mobile-label{
font-size:11px;
font-weight:600;
color:var(--muted);
}
.summary-mobile-item{
font-size:13px;
font-weight:600;
max-width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.summary-mobile-right{
display:flex;
align-items:center;
gap:8px;
}
.summary-mobile-price{
font-size:15px;
font-weight:800;
color:var(--primary);
}
.summary-mobile-chevron{
font-size:16px;
transform:rotate(0deg);
transition:transform .18s ease;
}
.summary-mobile-wrap.is-open .summary-mobile-chevron{
transform:rotate(180deg);
}
/* panel detail yang muncul saat bar diklik */
.summary-mobile-panel{
margin-top:8px;
padding:14px;
border-radius:18px;
border:1px solid var(--border);
background:#ffffff;
box-shadow:0 18px 40px rgba(15,23,42,.35);
animation:summaryPanelIn .2s ease-out;
}
@keyframes summaryPanelIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
}
/* Desktop: bottom sheet disembunyikan */
@media (min-width: 841px){
.summary-mobile-wrap{
display:none;
}
}
/* ===== DESKTOP vs MOBILE RINGKASAN ===== */
/* Desktop: kartu samping biasa */
.summary-card--desktop{
/* pakai styling .summary-card yang sudah ada */
}
/* Bottom sheet hidden di desktop */
.summary-sticky{
display:none;
}
/* Mobile ≤ 840px: pakai bottom sheet */
@media (max-width:840px){
.summary-card--desktop{
display:none;
}
.summary-sticky{
display:block;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:80;
padding:12px 14px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(to top, rgba(15,23,42,.3), transparent);
}
.summary-sticky-inner{
max-width:520px;
margin:0 auto;
}
.summary-sheet{
background:#ffffff;
border-radius:20px 20px 0 0;
border:1px solid var(--border);
box-shadow:0 -14px 32px rgba(15,23,42,.35);
overflow:hidden;
}
.summary-toggle{
width:100%;
display:flex;
align-items:center;
gap:10px;
padding:12px 16px;
border:0;
border-bottom:1px solid #eef2ff;
background:#ffffff;
cursor:pointer;
}
.summary-toggle-main{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.summary-toggle-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
.summary-toggle-title{
font-size:14px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.summary-toggle-price{
margin-left:auto;
font-weight:800;
font-size:16px;
color:var(--primary);
}
.summary-toggle-chevron{
margin-left:4px;
font-size:16px;
color:#cbd5f5;
transition:transform .18s ease;
}
.summary-sticky.is-open .summary-toggle-chevron{
transform:rotate(180deg);
}
/* DETAIL: default hidden, muncul kalau .is-open */
.summary-body{
padding:12px 16px 14px;
background:#ffffff;
display:none; /* ⬅️ penting */
grid-gap:6px;
}
.summary-sticky.is-open .summary-body{
display:grid;
}
.summary-body .sum-row{
margin:4px 0;
}
.summary-body .sum-row span:first-child{
font-size:13px;
color:var(--muted);
}
.summary-body .sum-row span:last-child{
font-size:14px;
}
.summary-body .sum-row.total span:last-child{
color:var(--primary);
font-weight:800;
}
.summary-cta{
margin:10px 16px 16px;
width:calc(100% - 32px);
min-height:48px;
font-size:15px;
}
}
/* Desktop: benar-benar sembunyikan bottom sheet */
@media (min-width:841px){
.summary-sticky{
display:none;
}
}
@media (max-width:480px){
.summary-toggle{
padding:12px 18px;
}
.summary-toggle-title{
font-size:15px;
}
.summary-toggle-price{
font-size:17px;
}
.summary-cta{
font-size:16px;
min-height:50px;
}
}
/* === Modal Validasi Game === */
.gv-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:120;
}
.gv-modal.show{
display:flex;
}
.gv-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.35); /* sedikit lebih terang */
backdrop-filter:blur(6px); /* ⬅ blur background */
-webkit-backdrop-filter:blur(6px); /* Safari */
}
/* body dikunci ketika modal pesanan terbuka */
.body-modal-open{
overflow:hidden;
}
.gv-dialog{
position:relative;
z-index:1;
max-width:480px; /* dulunya 360px, sekarang lebih lebar */
width:100%;
margin:0 16px;
border-radius:18px;
background:#ffffff;
padding:22px 22px 18px;
box-shadow:0 22px 55px rgba(15,23,42,.50);
}
.gv-warning{
margin:8px 0 0;
font-size:12px;
color:#b91c1c;
}
/* Di layar ≥ 640px, sedikit lebih lebar & longgar */
@media (min-width:640px){
.gv-dialog{
max-width:520px;
padding:24px 26px 20px;
}
}
.gv-title{
margin:0 0 6px;
font-size:18px;
}
.gv-text{
margin:0 0 12px;
font-size:13px;
color:var(--muted);
}
.gv-info{
border-radius:12px;
border:1px solid var(--border);
background:#f9fafb;
padding:10px 12px;
font-size:13px;
margin-bottom:14px;
}
.gv-info > div{
display:flex;
justify-content:space-between;
gap:12px;
margin:3px 0;
}
.gv-info span{
color:var(--muted);
}
.gv-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}
/* =========================================
* KODE PROMO – FORM DI STEP 4
* ======================================= */
.promo-body{
display:grid;
gap:8px;
}
/* input kode + tombol gunakan */
.promo-input-group{
display:flex;
align-items:stretch;
gap:8px;
}
.promo-input-group .input{
flex:1;
height:50px;
min-height:50px;
border-radius:999px;
padding:0 18px;
font-size:14px;
}
.promo-apply-btn{
flex:0 0 auto;
border-radius:999px;
padding-inline:16px;
min-height:50px;
font-size:14px;
white-space:nowrap;
}
/* tombol "Lihat kode promo yang tersedia" */
.promo-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 16px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
font-weight:600;
font-size:13px;
margin-top:6px;
}
.promo-toggle:hover{
border-color:var(--primary);
color:var(--primary);
box-shadow:0 8px 20px rgba(124,58,237,.18);
}
/* list kecil (kalau suatu saat dipakai di luar modal) */
.promo-list{
margin-top:8px;
display:flex;
flex-wrap:wrap;
gap:6px;
}
.promo-pill{
border-radius:999px;
border:1px dashed var(--border);
padding:6px 10px;
font-size:12px;
background:#f9fafb;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
}
.promo-pill-code{font-weight:700;}
.promo-pill-name{color:var(--muted);}
.promo-pill:hover{
background:#ffffff;
border-style:solid;
border-color:var(--primary);
}
/* Mobile form */
@media (max-width:640px){
.promo-body{
gap:12px;
}
.promo-input-group{
flex-direction:column;
}
.promo-input-group .input{
height:54px;
min-height:54px;
font-size:15px;
}
.promo-apply-btn{
width:100%;
min-height:54px;
font-size:15px;
}
.promo-toggle{
width:100%;
justify-content:center;
}
}
/* =========================================
* MODAL DAFTAR KODE PROMO
* ======================================= */
.promo-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:130;
}
.promo-modal.show{
display:flex;
}
/* blur background */
.promo-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.45);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
/* kartu modal utama */
.promo-modal-dialog{
position:relative;
z-index:1;
width:min(720px, 100% - 48px);
max-height:80vh;
overflow-y:auto;
border-radius:22px;
background:#ffffff;
padding:20px 24px 20px; /* padding ini juga jadi "spacer" card */
box-shadow:0 24px 60px rgba(15,23,42,.55);
}
/* header modal */
.promo-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.promo-modal-title{
margin:0;
font-size:18px;
font-weight:700;
}
.promo-modal-close{
border:0;
background:transparent;
font-size:22px;
line-height:1;
cursor:pointer;
}
.promo-modal-sub{
margin:8px 0 0;
font-size:14px;
color:var(--muted);
}
/* body + list kupon
-> card akan selebar area konten (sejajar judul) */
.promo-modal-body{
margin-top: 18px; /* ⬅️ tadinya 8/14, naikin dikit */
max-height:340px;
overflow-y:auto;
padding-right:4px; /* buat scroll bar */
display:flex;
flex-direction:column;
gap:10px;
}
/* kartu kupon (full width) */
.promo-card{
width: 100%;
margin: 0;
padding: 14px 20px;
border-radius: 20px;
border: 1px solid var(--border);
background: #f9fafb;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left; /* ⬅️ ini yang bikin teks rata kiri */
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.promo-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.promo-card-code{
font-size:15px;
font-weight:700;
}
.promo-card-desc{
font-size:13px;
color:var(--muted);
}
.promo-chip-type{
display:inline-flex;
align-items:center;
justify-content:center;
padding:3px 8px;
border-radius:999px;
font-size:11px;
font-weight:600;
background:#eef2ff;
color:var(--primary);
}
/* progress kuota */
.promo-progress{
width:100%;
height:8px;
margin-top:6px;
border-radius:999px;
background:#e5e7eb;
overflow:hidden;
}
.promo-progress-bar{
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--primary),var(--accent));
}
.promo-stock-text{
margin-top:6px;
font-size:12px;
color:var(--muted);
}
.promo-chip-ended{
margin-left:6px;
padding:2px 6px;
border-radius:999px;
font-size:10px;
font-weight:700;
background:#fee2e2;
color:#b91c1c;
}
/* hover efek */
.promo-card:hover{
background:#ffffff;
border-color:var(--primary);
box-shadow:0 12px 30px rgba(124,58,237,.25);
transform:translateY(-1px);
}
/* Mobile modal */
@media (max-width:640px){
.promo-modal-dialog{
width:calc(100% - 24px);
max-width:480px;
border-radius:20px;
padding:18px 18px 18px;
}
.promo-modal-title{font-size:17px;}
.promo-modal-sub{font-size:13px;}
}
/* Desktop besar */
@media (min-width:1024px){
.promo-modal-dialog{
width:min(760px, 100% - 80px);
}
}
/* =========================================
* PAYMENT PAGE (order/payment)
* ======================================= */
/* Section & layout */
.pay-section{
padding:32px 0 40px;
}
.pay-layout{
display:grid;
grid-template-columns:minmax(0, 1.4fr) minmax(0, 0.8fr);
gap:18px;
}
.pay-main{
display:grid;
gap:14px;
}
.pay-side{
position:relative;
}
@media (max-width:840px){
.pay-layout{
grid-template-columns:1fr;
}
}
/* Kartu dasar */
.pay-card{
background:#ffffff;
border-radius:18px;
border:1px solid var(--border);
box-shadow:var(--shadow);
padding:18px 18px 16px;
}
.pay-card--hero{
padding:20px 20px 18px;
}
/* Header hero (status + judul + meta waktu) */
.pay-hero-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.pay-title{
margin:6px 0 4px;
font-size:22px;
}
.pay-sub{
margin:0;
font-size:13px;
color:var(--muted);
}
/* Meta “Bayar sebelum” + countdown */
.pay-meta{
min-width:220px;
border-radius:16px;
background:#f9f5ff;
padding:10px 12px;
display:grid;
gap:6px;
font-size:13px;
}
.pay-meta-row{
display:flex;
flex-direction:column;
gap:2px;
}
.pay-meta-row span{
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.08em;
}
.pay-meta-row strong{
font-size:13px;
}
/* STATUS PILL */
.pay-status-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
}
.pay-status-pill--pending{
background:rgba(129, 140, 248, 0.12);
color:#4f46e5;
}
.pay-status-pill--success{
background:rgba(34, 197, 94, 0.10);
color:#16a34a;
}
.pay-status-pill--failed,
.pay-status-pill--expired{
background:rgba(248, 113, 113, 0.10);
color:#ef4444;
}
/* titik kecil di dalam pill */
.dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
}
.pay-status-pill--success .dot{ background:#16a34a; }
.pay-status-pill--failed .dot,
.pay-status-pill--expired .dot{ background:#ef4444; }
/* animasi pulse (untuk pending) */
.dot--pulse{
box-shadow:0 0 0 0 rgba(34,197,94,.6);
animation:dotPulse 1.4s ease-out infinite;
}
@keyframes dotPulse{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(34,197,94,.5);
}
70%{
transform:scale(1.2);
box-shadow:0 0 0 8px rgba(34,197,94,0);
}
100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(34,197,94,0);
}
}
/* COUNTDOWN TIMER – background terang, bukan hitam */
/* Override countdown: tanpa background ungu, teks lebih besar */
.pay-timer{
display:inline-flex;
align-items:center;
gap:4px;
padding:0; /* hilangin pill effect */
border-radius:0;
background:transparent; /* tanpa background ungu */
box-shadow:none; /* tanpa outline ungu */
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size:18px; /* teks lebih besar */
font-weight:700;
color:#111827;
}
.pay-timer .colon{
opacity:1; /* biar titik dua juga jelas */
}
/* TOTAL / NOMINAL BOX */
.pay-amount-box{
margin-top:6px;
padding:12px 14px;
border-radius:16px;
background:linear-gradient(135deg,#f9f5ff,#ffffff);
border:1px solid #e5defb;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.pay-amount-left{
display:flex;
flex-direction:column;
gap:4px;
}
.pay-amount-label{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
.pay-amount-value{
font-size:20px;
font-weight:800;
color:var(--primary);
}
.pay-amount-actions{
display:flex;
align-items:center;
gap:8px;
}
/* tombol kecil biasanya dipakai di sini */
.btn-sm{
min-height:32px;
padding-inline:12px;
font-size:13px;
}
/* Kartu QRIS / VA / Retail */
.pay-card--method{
padding:16px 18px 14px;
}
.pay-method-title{
margin:0 0 4px;
font-size:16px;
}
.pay-method-sub{
margin:0 0 12px;
font-size:13px;
color:var(--muted);
}
/* area QR / kode pembayaran */
.pay-method-body{
display:grid;
gap:12px;
}
.pay-qris-img{
max-width:280px;
border-radius:14px;
border:1px solid var(--border);
background:#f9fafb;
padding:8px;
}
.pay-instr-list{
margin:6px 0 0;
padding-left:18px;
font-size:13px;
color:var(--muted);
}
.pay-instr-list li{
margin:3px 0;
}
/* Box kode VA / retail */
.pay-code-box{
border-radius:14px;
border:1px dashed var(--border);
background:#f9fafb;
padding:10px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.pay-code-label{
font-size:12px;
color:var(--muted);
margin-bottom:2px;
}
.pay-code-value{
font-size:18px;
font-weight:700;
letter-spacing:.06em;
}
.pay-code-main{
display:flex;
flex-direction:column;
}
/* Summary card kanan (ringkasan pesanan) */
.pay-summary-card{
position:sticky;
top:86px;
background:#ffffff;
border-radius:18px;
border:1px solid var(--border);
padding:16px 16px 14px;
box-shadow:var(--shadow);
}
.pay-summary-card h4{
margin:0 0 8px;
}
/* Tombol di bawah hero */
.pay-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}
@media (max-width:640px){
.pay-hero-top{
flex-direction:column;
align-items:flex-start;
}
.pay-meta{
width:100%;
}
.pay-amount-box{
flex-direction:column;
align-items:flex-start;
}
}
/* ===================================================
* PAYMENT PAGE – DETAIL METODE & SIDEBAR
* (kelas2 yang tadinya ada di view)
* =================================================== */
/* Header kartu metode (judul + chip) */
.pay-card-head{
display:flex;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.pay-card-eyebrow{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:600;
}
.pay-card-title{
font-size:18px;
margin:6px 0 4px;
}
.pay-card-sub{
font-size:13px;
color:var(--muted);
}
.pay-chip{
align-self:flex-start;
padding:6px 12px;
border-radius:999px;
font-size:12px;
background:#eef2ff;
color:var(--primary);
font-weight:600;
}
/* Layout QRIS / VA (2 kolom) */
.pay-method-grid{
display:grid;
grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.6fr);
gap:24px;
align-items:center;
}
.pay-method-grid--va{
grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.6fr);
}
@media (max-width:800px){
.pay-method-grid,
.pay-method-grid--va{
grid-template-columns:minmax(0,1fr);
}
}
/* QRIS */
.pay-qris-wrap{
text-align:center;
}
.pay-qris-inner{
display:inline-flex;
padding:12px;
border-radius:16px;
background:#f9fafb;
}
/* (img-nya sudah punya .pay-qris-img di CSS lama) */
/* VA / Retail */
.pay-va-main{
background:#f9fafb;
border-radius:18px;
padding:14px 16px;
}
.pay-va-label{
font-size:12px;
color:var(--muted);
}
.pay-va-code{
margin-top:6px;
font-size:20px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing:.08em;
}
.pay-va-actions{
margin-top:10px;
}
.pay-va-bank{
margin-top:10px;
}
/* Bullets di samping QRIS / VA */
.pay-bullets{
margin:0;
padding-left:18px;
font-size:13px;
color:#4b5563;
}
.pay-bullets li + li{
margin-top:6px;
}
/* Sidebar ringkasan pesanan (kanan) */
.pay-card--summary{
position:sticky;
top:86px;
}
.pay-summary-title{
margin-bottom:14px;
font-size:15px;
font-weight:700;
}
.pay-summary-row{
display:flex;
justify-content:space-between;
gap:12px;
font-size:13px;
padding-block:5px;
}
.pay-summary-row span:first-child{
color:var(--muted);
}
.pay-summary-row--total{
margin-top:6px;
border-top:1px dashed rgba(148,163,184,.6);
padding-top:10px;
font-weight:600;
}
.pay-summary-amount{
color:var(--primary);
}
.pay-summary-note{
margin-top:8px;
}
/* Card tips di sidebar (kalau nanti dipakai lagi) */
.pay-card--tips{
margin-top:18px;
font-size:13px;
}
.pay-card--tips h4{
font-size:13px;
margin:0 0 8px;
}
.pay-card--tips ul{
margin:0;
padding-left:18px;
}
.pay-card--tips li + li{
margin-top:4px;
}
/* ===================================================
* PAYMENT PAGE – DETAIL METODE & SIDEBAR
* (kelas2 yang tadinya ada di view)
* =================================================== */
/* Header kartu metode (judul + chip) */
.pay-card-head{
display:flex;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.pay-card-eyebrow{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:600;
}
.pay-card-title{
font-size:18px;
margin:6px 0 4px;
}
.pay-card-sub{
font-size:13px;
color:var(--muted);
}
.pay-chip{
align-self:flex-start;
padding:6px 12px;
border-radius:999px;
font-size:12px;
background:#eef2ff;
color:var(--primary);
font-weight:600;
}
/* Layout QRIS / VA (2 kolom) */
.pay-method-grid{
display:grid;
grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.6fr);
gap:24px;
align-items:center;
}
.pay-method-grid--va{
grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.6fr);
}
@media (max-width:800px){
.pay-method-grid,
.pay-method-grid--va{
grid-template-columns:minmax(0,1fr);
}
}
/* QRIS */
.pay-qris-wrap{
text-align:center;
}
.pay-qris-inner{
display:inline-flex;
padding:12px;
border-radius:16px;
background:#f9fafb;
}
/* (img-nya sudah punya .pay-qris-img di CSS lama) */
/* VA / Retail */
.pay-va-main{
background:#f9fafb;
border-radius:18px;
padding:14px 16px;
}
.pay-va-label{
font-size:12px;
color:var(--muted);
}
.pay-va-code{
margin-top:6px;
font-size:20px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing:.08em;
}
.pay-va-actions{
margin-top:10px;
}
.pay-va-bank{
margin-top:10px;
}
/* Bullets di samping QRIS / VA */
.pay-bullets{
margin:0;
padding-left:18px;
font-size:13px;
color:#4b5563;
}
.pay-bullets li + li{
margin-top:6px;
}
/* Sidebar ringkasan pesanan (kanan) */
.pay-card--summary{
position:sticky;
top:86px;
}
.pay-summary-title{
margin-bottom:14px;
font-size:15px;
font-weight:700;
}
.pay-summary-row{
display:flex;
justify-content:space-between;
gap:12px;
font-size:13px;
padding-block:5px;
}
.pay-summary-row span:first-child{
color:var(--muted);
}
.pay-summary-row--total{
margin-top:6px;
border-top:1px dashed rgba(148,163,184,.6);
padding-top:10px;
font-weight:600;
}
.pay-summary-amount{
color:var(--primary);
}
.pay-summary-note{
margin-top:8px;
}
/* Card tips di sidebar (kalau nanti dipakai lagi) */
.pay-card--tips{
margin-top:18px;
font-size:13px;
}
.pay-card--tips h4{
font-size:13px;
margin:0 0 8px;
}
.pay-card--tips ul{
margin:0;
padding-left:18px;
}
.pay-card--tips li + li{
margin-top:4px;
}
/* === Payment Instructions (Modal) === */
.pay-instr-btn-wrap{
margin-top:8px;
}
.pay-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:130;
}
.pay-modal-dialog--qris {
background: #fff;
border-radius: 24px;
padding: 24px 24px 16px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
/* 👉 ini yang bikin responsif */
width: min(420px, 100vw - 32px);
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Gambar QR di dalam modal */
.pay-qris-zoom img,
#qrisZoomImg {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - 120px); /* biar nggak lebih tinggi dari layar */
object-fit: contain;
}
@media (max-width: 480px) {
.pay-modal-dialog--qris {
border-radius: 18px;
padding: 16px 16px 12px;
}
}
.pay-modal.show{
display:flex;
}
.pay-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.45);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.pay-modal-dialog{
position:relative;
z-index:1;
width:min(520px, 100% - 40px);
max-height:80vh;
overflow-y:auto;
border-radius:20px;
background:#ffffff;
padding:20px 22px 18px;
box-shadow:0 24px 60px rgba(15,23,42,.55);
}
.pay-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:8px;
}
.pay-modal-title{
margin:0;
font-size:18px;
font-weight:700;
}
.pay-modal-close{
border:0;
background:transparent;
font-size:22px;
line-height:1;
cursor:pointer;
}
.pay-modal-sub{
margin:0 0 12px;
font-size:13px;
color:var(--muted);
}
.pay-modal-list{
margin:0;
padding-left:0;
list-style:none;
display:grid;
gap:8px;
font-size:13px;
}
.pay-modal-list li{
display:flex;
align-items:flex-start;
gap:8px;
}
.pay-modal-step-num{
flex:0 0 auto;
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
color:#ffffff;
background:linear-gradient(135deg,var(--primary),var(--accent));
margin-top:1px;
}
.pay-modal-step-text{
flex:1;
}
@media (max-width:640px){
.pay-modal-dialog{
width:calc(100% - 24px);
padding:18px 18px 16px;
}
}
.pay-instruction-cta{
margin-top:12px;
}
.pay-modal[hidden]{display:none;}
.pay-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:120;
}
.pay-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.45);
backdrop-filter:blur(6px);
}
.pay-modal-dialog{
position:relative;
z-index:1;
max-width:480px;
width:100%;
margin:0 16px;
border-radius:18px;
background:#ffffff;
padding:20px 22px 18px;
box-shadow:0 22px 50px rgba(15,23,42,.55);
}
.pay-modal-title{
margin:0 0 8px;
font-size:18px;
font-weight:700;
}
.pay-modal-body li + li{
margin-top:4px;
}
.pay-modal-close{
position:absolute;
top:10px;
right:12px;
border:0;
background:transparent;
font-size:22px;
cursor:pointer;
}
/* Baris kode pembayaran memanjang (kode + tombol di kanan) */
.pay-code-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border-radius:14px;
border:1px solid var(--border);
padding:12px 16px;
background:#ffffff; /* putih, bukan abu */
}
.pay-code-main{
display:flex;
flex-direction:column;
gap:4px;
}
.pay-code-label{
font-size:12px;
color:var(--muted);
}
.pay-code-value{
font-size:20px;
font-weight:700;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
letter-spacing:.08em;
}
/* Mobile: biar rapi kalau layar kecil */
@media (max-width:640px){
.pay-code-row{
flex-direction:column;
align-items:flex-start;
}
.pay-code-row .btn{
width:100%;
justify-content:center;
}
}
/* QRIS – gambar & tombol di tengah */
.pay-qris-center{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
text-align:center;
}
.pay-qris-note{
margin:6px 0 0;
font-size:13px;
}
.pay-qris-btn{
margin-top:4px;
}
/* QRIS center */
.pay-qris-center{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:10px;
}
.pay-qris-note{
margin:6px 0 0;
}
.pay-qris-btn{
margin-top:4px;
}
/* Baris kode panjang (VA / Retail) */
.pay-code-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--border);
background:#f9fafb;
}
.pay-code-main{
display:flex;
flex-direction:column;
gap:4px;
}
.pay-code-label{
font-size:12px;
color:var(--muted);
}
.pay-code-value{
font-size:18px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
letter-spacing:.06em;
}
/* Modal + Accordion instructions */
.pay-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:120;
}
.pay-modal[hidden]{display:none;}
.pay-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.45);
backdrop-filter:blur(6px);
}
.pay-modal-dialog{
position:relative;
z-index:1;
max-width:520px;
width:100%;
margin:0 16px;
border-radius:20px;
background:#ffffff;
padding:20px 22px 18px;
box-shadow:0 24px 60px rgba(15,23,42,.55);
}
.pay-modal-title{
margin:0 0 10px;
font-size:18px;
font-weight:700;
}
.pay-modal-close{
position:absolute;
right:12px;
top:10px;
border:0;
background:transparent;
font-size:22px;
cursor:pointer;
}
.pay-modal-body{
margin-top:4px;
font-size:14px;
}
/* Accordion */
.pay-accordion{
display:grid;
gap:8px;
}
.pay-acc-item{
border-radius:14px;
border:1px solid var(--border);
background:#f9fafb;
overflow:hidden;
}
.pay-acc-head{
width:100%;
padding:10px 12px;
border:0;
background:transparent;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
}
.pay-acc-chevron{
font-size:16px;
color:#cbd5f5;
transition:transform .18s ease;
}
.pay-acc-item.is-open .pay-acc-chevron{
transform:rotate(180deg);
}
.pay-acc-body{
padding:8px 14px 10px;
background:#ffffff;
}
.pay-acc-body[hidden]{display:none;}
.pay-acc-body ol{
padding-left:20px;
margin:0;
}
/* =========================================
* DETAIL PESANAN (orders/detail)
* ======================================= */
.order-detail{
display:grid;
gap:16px;
}
/* meta kecil di bawah judul "Detail Pesanan" */
.order-detail-head-meta{
margin-top:12px;
}
/* grid informasi pengisian:
- desktop: 2 kolom
- mobile: 1 kolom stacked */
.order-detail-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
column-gap:32px;
row-gap:12px;
margin-top:10px;
}
.order-detail-group{
display:grid;
gap:8px;
}
.order-detail-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
font-size:14px;
}
.order-detail-label{
color:var(--muted);
}
.order-detail-value{
font-weight:500;
text-align:right;
}
/* tombol salin di bawah detail pengisian */
.order-detail-actions{
margin-top:16px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
/* responsif mobile */
@media (max-width:640px){
.order-detail-grid{
grid-template-columns:1fr;
row-gap:14px;
}
.order-detail-row{
flex-direction:column;
align-items:flex-start;
}
.order-detail-value{
text-align:left;
}
.order-detail-actions{
flex-direction:column;
}
.order-detail-actions .btn{
width:100%;
justify-content:center;
}
}
/* Tombol yang hanya muncul di desktop (detail pesanan) */
.detail-desktop-only{
/* default: tampil di desktop */
}
@media (max-width:640px){
.detail-desktop-only{
display:none !important;
}
/* di mobile, box ungu cukup isi info saja, tanpa bar tombol kedua */
.pay-amount-box{
flex-direction:column;
align-items:flex-start;
}
}
/* ===== Detail Pesanan (order/detail) ===== */
.detail-meta{
display:grid;
gap:6px;
margin-top:14px;
}
.detail-meta-row{
display:flex;
flex-wrap:wrap;
gap:6px;
font-size:13px;
}
.detail-meta-row .detail-label{
min-width:96px;
font-weight:500;
color:var(--muted);
}
.detail-meta-row .detail-value{
font-weight:600;
}
/* Box tanggal + total */
.detail-summary-box{
border-radius:16px;
background:#f9f5ff;
padding:12px 14px;
display:grid;
gap:8px;
min-width:220px;
}
.detail-summary-row{
display:flex;
flex-direction:column;
gap:2px;
}
.detail-summary-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
.detail-summary-value{
font-size:13px;
font-weight:600;
}
.detail-summary-total{
font-size:18px;
font-weight:800;
color:var(--primary);
}
/* Grid informasi pengisian */
.detail-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 32px;
margin-top:14px;
}
.detail-row{
display:flex;
flex-direction:column;
gap:4px;
}
.detail-label{
font-size:12px;
color:var(--muted);
}
.detail-value{
font-size:14px;
font-weight:600;
}
@media (max-width:640px){
.detail-summary-box{
width:100%;
margin-top:10px;
}
.detail-grid{
grid-template-columns:1fr; /* stack 1 kolom di HP */
}
}
/* ===== DETAIL ORDER (orders/detail) ===== */
.detail-card{
background:#ffffff;
border-radius:18px;
border:1px solid var(--border);
box-shadow:var(--shadow);
padding:18px 18px 20px;
}
.detail-card-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:14px;
}
.detail-card-left{
max-width:520px;
}
.detail-title{
margin:10px 0 4px;
font-size:22px;
}
.detail-note{
margin:0;
font-size:13px;
color:var(--muted);
}
/* box tanggal + total */
.detail-card-meta{
min-width:220px;
border-radius:16px;
background:#f9f5ff;
padding:10px 14px;
display:grid;
row-gap:8px;
}
.detail-meta-block{display:flex;flex-direction:column;gap:2px;}
.detail-meta-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
.detail-meta-value{
font-size:13px;
font-weight:600;
}
.detail-meta-amount{
font-size:18px;
font-weight:800;
color:var(--primary);
}
/* ID Pesanan besar */
.detail-id-row{
margin-top:4px;
margin-bottom:10px;
}
.detail-id-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
.detail-id-value{
display:block;
margin-top:4px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:20px;
font-weight:800;
letter-spacing:.05em;
}
.detail-divider{
border:0;
border-top:1px solid rgba(226,232,240,.7);
margin:10px 0 14px;
}
/* grid info pesanan */
.detail-grid{
display:grid;
grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
gap:18px;
}
.detail-col{
border-radius:14px;
background:#f9fafb;
padding:12px 14px;
}
.detail-subtitle{
margin:0 0 4px;
font-size:15px;
}
.detail-subtext{
margin:0 0 10px;
font-size:13px;
color:var(--muted);
}
.detail-row{
display:flex;
justify-content:space-between;
gap:12px;
font-size:13px;
margin-top:6px;
}
.detail-row span{
color:var(--muted);
}
.detail-row strong{
font-weight:600;
}
/* responsive */
@media (max-width:840px){
.detail-card{
padding:16px 14px 18px;
}
.detail-card-head{
flex-direction:column;
align-items:flex-start;
}
.detail-card-meta{
width:100%;
}
.detail-grid{
grid-template-columns:1fr;
gap:12px;
}
}
/* Cek pesanan: input + tombol selalu sejajar (horizontal) */
.track-row-inline{
display:flex;
flex-direction:row;
align-items:stretch;
gap:10px;
}
.track-row-inline .input{
flex:1;
}
@media (max-width:640px){
.track-row-inline .btn{
min-width:110px;
padding-inline:14px;
font-size:14px;
}
}
/* ==== Flash message di halaman detail produk ==== */
.prod-alert{
margin-bottom:12px;
display:grid;
gap:8px;
}
/* kartu dasar */
.alert{
display:flex;
align-items:flex-start;
gap:8px;
padding:10px 12px;
border-radius:14px;
border:1px solid transparent;
font-size:13px;
}
/* icon kecil di kiri */
.alert-icon{
flex:0 0 auto;
margin-top:2px;
}
/* teks di kanan */
.alert-text{
display:flex;
flex-direction:column;
gap:2px;
}
.alert-text strong{
font-weight:600;
}
/* warna sukses & error (light mode) */
.alert--success{
background:#ecfdf5;
border-color:#bbf7d0;
color:#166534;
}
.alert--error{
background:#fef2f2;
border-color:#fecaca;
color:#b91c1c;
}
/* mobile: biar enak dibaca */
@media (max-width:640px){
.alert{
font-size:12px;
padding:10px 10px;
}
}
/* dark mode tweaks */
:root[data-theme="dark"] .alert--success{
background:#022c22;
border-color:#064e3b;
color:#bbf7d0;
}
:root[data-theme="dark"] .alert--error{
background:#450a0a;
border-color:#b91c1c;
color:#fecaca;
}
/* =========================================
* DARK MODE
* ======================================= */
/* Token warna untuk dark mode */
:root[data-theme="dark"]{
--bg:#020617; /* dasar halaman */
--surface:#020617;
--text:#e5e7eb;
--muted:#9ca3af;
--border:#1e293b;
--shadow:0 18px 40px rgba(15,23,42,.75);
}
/* Background & teks global */
:root[data-theme="dark"] body{
background:var(--bg);
color:var(--text);
}
/* Navbar + footer */
:root[data-theme="dark"] .navbar{
background:#020617;
border-bottom-color:#1e293b;
}
:root[data-theme="dark"] .navbar.scrolled{
box-shadow:0 10px 30px rgba(15,23,42,.9);
}
:root[data-theme="dark"] .footer{
background:#020617;
border-top-color:#1e293b;
}
/* Link nav */
:root[data-theme="dark"] .nav-link{
color:#9ca3af;
}
:root[data-theme="dark"] .nav-link:hover{
color:#e5e7eb;
background:rgba(148,163,184,.18);
}
:root[data-theme="dark"] .nav-link.active{
color:#f9fafb;
background:rgba(124,58,237,.35);
box-shadow:0 8px 20px rgba(15,23,42,.9);
}
/* Theme toggle di navbar */
.nav-theme-toggle{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:999px;
border:1px solid var(--border);
background:rgba(148,163,184,.08);
font-size:13px;
font-weight:500;
cursor:pointer;
transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-theme-icon{
font-size:15px;
}
/* default (light): munculin ikon bulan */
.nav-theme-icon--dark{display:none;}
/* dark: munculin ikon matahari */
:root[data-theme="dark"] .nav-theme-icon--light{display:none;}
:root[data-theme="dark"] .nav-theme-icon--dark{display:inline;}
@media (max-width:640px){
.nav-theme-toggle{
width:100%;
justify-content:space-between;
}
}
/* Kartu / permukaan utama */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .pay-card,
:root[data-theme="dark"] .pay-summary-card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .mod-card,
:root[data-theme="dark"] .detail-card,
:root[data-theme="dark"] .pay-card--hero,
:root[data-theme="dark"] .pay-card--method,
:root[data-theme="dark"] .pay-card--summary,
:root[data-theme="dark"] .pay-card--tips,
:root[data-theme="dark"] .fs-card,
:root[data-theme="dark"] .order-card,
:root[data-theme="dark"] .gv-dialog,
:root[data-theme="dark"] .promo-modal-dialog,
:root[data-theme="dark"] .pay-modal-dialog{
background:#020617;
border-color:#1e293b;
}
/* Input, chip, tombol background terang → jadi gelap */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .nom-tab,
:root[data-theme="dark"] .pay-row,
:root[data-theme="dark"] .pay-cat-body {
background:#020617;
border-color:#1e293b;
color:var(--text);
}
/* Dark mode: input harus kelihatan beda dari card */
:root[data-theme="dark"] .input {
background:#020617; /* sedikit lebih terang dari background halaman */
border-color:#334155; /* border lebih terang biar kelihatan field-nya */
color:#e5e7eb; /* teks terang */
}
/* placeholder juga jangan terlalu gelap */
:root[data-theme="dark"] .input::placeholder {
color:#6b7280;
opacity:0.9;
}
/* ==== DARK MODE: Metode Pembayaran (accordion kategori) ==== */
:root[data-theme="dark"] .pay-cat {
background: #020617; /* kartu kategori ikut gelap */
border-color: #1e293b;
}
/* header bar "QRIS / Virtual Account / Retail" */
:root[data-theme="dark"] .pay-cat-head {
background: #020617; /* gelap saat tertutup */
color: var(--text);
}
/* saat kategori terbuka, pakai gradient ungu seperti biasa */
:root[data-theme="dark"] .pay-cat.is-open .pay-cat-head {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #ffffff;
}
/* chevron & label sedikit lebih soft di dark mode */
:root[data-theme="dark"] .pay-cat-chevron {
color: #9ca3af;
}
:root[data-theme="dark"] .promo-toggle,
:root[data-theme="dark"] .promo-card,
:root[data-theme="dark"] .pay-va-main,
:root[data-theme="dark"] .pay-code-row{
background:#020617;
border-color:#1e293b;
color:var(--text);
}
/* Beberapa box ungu / abu dijadiin sedikit gelap */
:root[data-theme="dark"] .detail-card-meta,
:root[data-theme="dark"] .detail-summary-box,
:root[data-theme="dark"] .pay-meta,
:root[data-theme="dark"] .pay-amount-box,
:root[data-theme="dark"] .fs-countdown,
:root[data-theme="dark"] .pay-va-main{
background:#020617;
border-color:#1e293b;
}
/* Text muted mengikuti token */
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .detail-note,
:root[data-theme="dark"] .pay-modal-sub{
color:var(--muted);
}
/* Hero & section surface */
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .hero-slider,
:root[data-theme="dark"] .section.alt,
:root[data-theme="dark"] .pay-section,
:root[data-theme="dark"] .prod-hero,
:root[data-theme="dark"] .flash-sale,
:root[data-theme="dark"] .section.product{
background:#020617;
}
/* Ringkasan sticky / sheet – tetap sedikit terang */
:root[data-theme="dark"] .summary-sheet,
:root[data-theme="dark"] .summary-card{
background:#020617;
}
/* Toast tetap kebaca di dark mode (warna sudah oke karena background gelap) */
/* ====== FIX NOMINAL CARD DI DARK MODE ====== */
/* Kartu nominal ikut gelap, bukan putih */
:root[data-theme="dark"] .radio-card{
background:#020617; /* sama dengan var(--bg) */
border-color:#1e293b;
box-shadow:none;
}
/* Teks nama item & harga biar kontras */
.radio-card .radio-title{
color:#0F172A; /* default (light) */
}
:root[data-theme="dark"] .radio-card .radio-title{
color:#e5e7eb; /* terang di atas kartu gelap */
}
:root[data-theme="dark"] .radio-card .radio-price{
color:#A855F7; /* ungu accent, lebih “keluar” */
}
/* Hover di dark mode sedikit mengangkat */
:root[data-theme="dark"] .radio-card:hover{
box-shadow:0 12px 28px rgba(15,23,42,.9);
}
/* STATE TERPILIH – border & glow lebih jelas di dark mode */
:root[data-theme="dark"] .radio-card:has(input:checked),
:root[data-theme="dark"] .radio-card.is-selected{
background:#020617;
border-color:var(--primary);
box-shadow:
0 0 0 2px rgba(124,58,237,.7),
0 10px 28px rgba(15,23,42,.9);
transform:translateY(-1px);
}
/* Pastikan teks di kartu terpilih tetap jelas */
:root[data-theme="dark"] .radio-card:has(input:checked) .radio-title,
:root[data-theme="dark"] .radio-card.is-selected .radio-title{
color:#e5e7eb;
}
:root[data-theme="dark"] .radio-card:has(input:checked) .radio-price,
:root[data-theme="dark"] .radio-card.is-selected .radio-price{
color:#A855F7;
}
:root[data-theme="dark"] .nom-tab{
background:#020617;
border-color:#1e293b;
color:var(--text);
}
/* === FIX tab Special / Diamond di dark mode === */
:root[data-theme="dark"] .nom-tab{
background:#020617;
border-color:#1e293b;
color:var(--muted); /* biar tab non-aktif agak redup */
}
:root[data-theme="dark"] .nom-tab.active{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
border-color:transparent;
box-shadow:0 10px 25px rgba(124,58,237,.45);
}
/* ===== DARK MODE – FIX MODAL DETAIL PESANAN ===== */
/* Box info di modal ikut gelap */
:root[data-theme="dark"] .gv-info{
background:#020617; /* sama kaya kartu lain */
border-color:#1e293b;
}
/* Label kiri tetap muted */
:root[data-theme="dark"] .gv-info span{
color:var(--muted);
}
/* Nilai kanan dibuat terang & lebih tebal biar kebaca */
:root[data-theme="dark"] .gv-info strong{
color:#f9fafb;
font-weight:600;
}
/* Box detail pesanan di dark mode */
:root[data-theme="dark"] .detail-col{
background:#020617; /* atau pakai var(--bg); */
border:1px solid #1e293b; /* biar kelihatan sebagai kartu */
}
/* (opsional, kalau mau teks deskripsi sedikit lebih redup) */
:root[data-theme="dark"] .detail-subtext{
color:var(--muted);
}
/* ===== METODE PEMBAYARAN – STATE TERPILIH LEBIH TEBAL ===== */
/* Light mode: sedikit gradient ungu + border jelas */
.pay-row:has(input:checked){
border-color:var(--primary);
background:linear-gradient(
135deg,
rgba(124,58,237,.10),
rgba(168,85,247,.20)
);
box-shadow:0 0 0 2px rgba(124,58,237,.45);
}
/* Dark mode: override supaya nggak ketimpa .pay-row dark */
:root[data-theme="dark"] .pay-row:has(input:checked){
background:#020617; /* tetap gelap tapi ada glow */
border-color:var(--primary);
box-shadow:
0 0 0 2px rgba(15,23,42,1),
0 0 0 3px rgba(124,58,237,.85); /* glow ungu lebih tebal */
}
/* Biar teks & panahnya juga kelihatan lebih aktif */
:root[data-theme="dark"] .pay-row:has(input:checked) .pay-row-title{
color:#f9fafb;
}
:root[data-theme="dark"] .pay-row:has(input:checked) .pay-row-arrow{
color:#a855f7;
}
/* === STEP LIST DI MODAL "CARA PEMBAYARAN" (ACCORDION) === */
/* Berlaku untuk semua di dalam .pay-acc-body */
.pay-acc-body ol{
margin:0;
padding-left:0; /* buang indent default */
list-style:none; /* hilangin numbering bawaan */
display:grid;
gap:8px;
font-size:13px;
color:var(--muted);
counter-reset:pay-step; /* mulai counter custom */
}
.pay-acc-body ol li{
counter-increment:pay-step;
display:flex;
align-items:flex-start;
gap:8px;
}
/* Bulatan ungu berisi nomor step */
.pay-acc-body ol li::before{
content: counter(pay-step);
flex:0 0 auto;
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
color:#ffffff;
background:linear-gradient(135deg,var(--primary),var(--accent));
margin-top:1px;
}
/* Teks step-nya */
.pay-acc-body ol li{
line-height:1.5;
}
/* ==== DARK MODE: Cara Pembayaran (accordion) ==== */
:root[data-theme="dark"] .pay-acc-item{
background:#020617; /* kartu instruksi jadi gelap */
border-color:#1e293b;
}
:root[data-theme="dark"] .pay-acc-head{
background:#020617; /* header "Pembayaran via xxx" ikut gelap */
color:var(--text);
}
/* waktu kebuka tetap pakai gradient ungu, cuma di-dark-mode aja */
:root[data-theme="dark"] .pay-acc-item.is-open .pay-acc-head{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
}
:root[data-theme="dark"] .pay-acc-body{
background:#020617; /* isi langkah-langkahnya gelap, bukan putih */
}
/* teks langkah tetap abu-abu soft di dark mode */
:root[data-theme="dark"] .pay-acc-body ol{
color:var(--muted);
}
/* === FIX NAVBAR MOBILE DI DARK MODE === */
@media (max-width:640px){
:root[data-theme="dark"] .nav-links{
background:#020617; /* panel menu ikut gelap */
border-bottom-color:#1e293b;
}
:root[data-theme="dark"] .nav-link{
color:#e5e7eb; /* teks terang */
}
:root[data-theme="dark"] .nav-link:hover{
background:rgba(148,163,184,.25);
}
:root[data-theme="dark"] .nav-theme-toggle{
background:#020617; /* chip tema juga gelap */
border-color:#1e293b;
}
}
/* DARK MODE: perbaiki warna bottom sheet ringkasan di mobile */
:root[data-theme="dark"] .summary-sticky{
background: linear-gradient(to top, rgba(15,23,42,.6), transparent);
}
:root[data-theme="dark"] .summary-sheet{
background:#020617;
border-color:#1e293b;
box-shadow:0 -16px 40px rgba(15,23,42,.9);
}
/* HEADER bar "Ringkasan Pesanan" */
:root[data-theme="dark"] .summary-toggle{
background:#020617;
border-bottom-color:#1e293b;
}
/* Isi detail ringkasan */
:root[data-theme="dark"] .summary-body{
background:#020617;
}
/* Mobile summary header: sembunyiin judul item di bar */
.summary-toggle-title {
display: none;
}
@media (max-width: 768px) {
.summary-toggle-title {
display: none;
}
}
/* === FIX: teks tab kategori (Semua, Games, Voucher, dst) di DARK MODE === */
:root[data-theme="dark"] .cat-tabs .chip{
background:#020617; /* pill gelap */
border-color:#1e293b;
color:#e5e7eb; /* teks terang biar kebaca */
opacity:1; /* jaga2 kalau ada rule lama nurunin opacity */
}
/* state aktif di dark mode */
:root[data-theme="dark"] .cat-tabs .chip.active{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
border-color:transparent;
box-shadow:0 10px 25px rgba(124,58,237,.45);
}
/* === Flash Sale di halaman detail (di atas Special / Diamond) === */
.flash-block{
margin-bottom: 12px;
}
.flash-block-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:6px;
}
.flash-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#ffffff;
font-size:13px;
font-weight:700;
}
.flash-pill-icon{
font-size:15px;
}
/* Timer kecil di kanan */
.flash-timer{
display:inline-flex;
align-items:center;
gap:4px;
padding:4px 8px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
font-size:13px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Courier New", monospace;
}
.flash-timer .colon{opacity:.7;}
.flash-pack-grid{
margin-top:2px;
}
/* Kotak nominal flash sale – basis sama dengan .radio-card */
.radio-card--flash{
border-color:rgba(248,113,113,.5);
}
/* Row harga flash */
.flash-row{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px;
margin-top:4px;
}
.flash-price-now{
font-weight:800;
color:var(--primary);
}
.flash-price-old{
font-size:12px;
color:#94a3b8;
text-decoration:line-through;
}
.flash-disc{
font-size:11px;
font-weight:700;
padding:2px 6px;
border-radius:999px;
background:#fee2e2;
color:#b91c1c;
}
/* Progress bar kuota */
.flash-progress{
margin-top:6px;
height:6px;
border-radius:999px;
background:#e5e7eb;
overflow:hidden;
}
.flash-progress-bar{
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--primary),var(--accent));
}
.flash-stock{
margin-top:4px;
font-size:11px;
color:var(--muted);
}
/* Dark mode tweak */
:root[data-theme="dark"] .flash-timer{
background:#020617;
border-color:#1e293b;
}
:root[data-theme="dark"] .flash-price-old{
color:#64748b;
}
:root[data-theme="dark"] .flash-progress{
background:#1e293b;
}
.fs-soldout{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 16px;
min-height:40px;
border-radius:12px;
background:#f1f5f9;
font-size:13px;
font-weight:600;
color:#ef4444;
}
/* optional, dark mode */
:root[data-theme="dark"] .fs-soldout{
background:#020617;
border:1px solid #1e293b;
}
/* ===== FLASH SALE: non-scroll-snap di desktop (biar auto-scroll halus) ===== */
@media (min-width: 768px){
.fs-grid{
scroll-snap-type: none;
scroll-padding-inline: 0;
}
.fs-card{
scroll-snap-align: none;
}
}
/* === THEME TOGGLE – BASE (LIGHT) === */
.nav-theme-toggle{
color:#0F172A; /* teks "Tema" gelap di light mode */
}
.nav-theme-label{
color:inherit; /* ikut warna dari .nav-theme-toggle */
}
/* === THEME TOGGLE – DARK MODE === */
:root[data-theme="dark"] .nav-theme-toggle{
color:#e5e7eb; /* teks & icon terang */
background:#020617; /* chip gelap, nyatu sama navbar */
border-color:#4b5563; /* border sedikit lebih terang */
}
/* optional: efek hover di dark mode biar kerasa clickable */
:root[data-theme="dark"] .nav-theme-toggle:hover{
background:#111827;
box-shadow:0 0 0 1px rgba(148,163,184,.4);
}
/* =========================
* AUTH / LOGIN PAGE
* ========================= */
.auth{
padding-top:48px;
padding-bottom:48px;
background:var(--surface);
min-height:calc(100vh - 80px); /* kira-kira: tinggi layar minus navbar+footer */
display:flex;
align-items:center;
}
.auth-grid{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
gap:32px;
align-items:center;
}
/* Intro kiri */
.auth-intro{
max-width:480px;
}
.auth-kicker{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
border-radius:999px;
border:1px solid var(--border);
font-size:11px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
background:#f9fafb;
}
.auth-title{
margin:10px 0 8px;
font-size:28px;
line-height:1.25;
}
.auth-list{
margin:12px 0 0;
padding-left:18px;
color:var(--muted);
font-size:14px;
}
.auth-list li + li{
margin-top:4px;
}
/* Card kanan */
.auth-card{
max-width:420px;
margin-left:auto;
}
.auth-card-title{
margin:0 0 4px;
font-size:20px;
}
.auth-card-sub{
margin:0 0 14px;
font-size:13px;
}
/* Form */
.auth-form{
margin-top:6px;
display:grid;
gap:10px;
}
.field-error{
margin-top:2px;
font-size:12px;
color:#b91c1c;
}
/* Ingat saya + lupa password */
.auth-meta-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:2px;
margin-bottom:4px;
font-size:13px;
}
.auth-remember{
display:inline-flex;
align-items:center;
gap:6px;
cursor:pointer;
font-size:13px;
}
.auth-remember input{
width:14px;
height:14px;
}
.auth-link{
font-size:13px;
color:var(--primary);
font-weight:500;
}
.auth-link:hover{
text-decoration:underline;
}
/* Tombol submit */
.auth-submit{
margin-top:4px;
}
/* Catatan di bawah form */
.auth-foot{
margin:8px 0 0;
font-size:12px;
}
.auth-foot span{
font-weight:500;
}
/* Responsive */
@media (max-width:840px){
.auth{
padding-top:32px;
padding-bottom:32px;
align-items:flex-start;
}
.auth-grid{
grid-template-columns:1fr;
gap:24px;
}
.auth-card{
margin-left:0;
}
}
@media (max-width:640px){
.auth-title{
font-size:24px;
}
.auth{
padding-top:24px;
padding-bottom:24px;
}
}
/* Dark mode untuk halaman auth */
:root[data-theme="dark"] .auth{
background:#020617;
}
/* Logo di navbar */
.brand-mark--image{
background:none;
padding:0;
}
.brand-logo{
display:block;
height:80px; /* coba 46–52px, lihat enaknya di mata */
width:auto;
}
/* Mobile: logo sedikit lebih kecil */
@media (max-width:640px){
.brand-logo{
height:55px;
}
}
/* Logo di footer boleh sedikit lebih kecil */
.brand-logo--footer{
height:80px; /* coba 46–52px, lihat enaknya di mata */
}
@media (max-width:640px){
.brand-logo{
height:55px;
}
.brand-logo--footer{
height:75px;
}
}
/* =========================================
* POPUP BANNER HOMEPAGE (#promoPopup)
* ======================================= */
.modal{
position: fixed;
inset: 0;
display: none; /* default: sembunyi */
align-items: center;
justify-content: center;
z-index: 160; /* di atas navbar / lain2 */
}
.modal.show{
display: flex; /* class .show = tampil */
}
.modal-backdrop{
position: absolute;
inset: 0;
background: rgba(15,23,42,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* kartu utama */
.modal-dialog{
position: relative;
z-index: 1;
/* BESAR di desktop, tapi tetap ada jarak kiri-kanan */
width: auto;
max-width: min(960px, 100% - 64px);
/* ⛔ HAPUS max-height & overflow-y yang bikin gambar ke-crop */
/* max-height: 80vh; */
/* overflow-y: auto; */
margin: 0 auto;
border-radius: 24px;
overflow: hidden; /* ini oke buat rounded */
background: transparent;
box-shadow: 0 24px 60px rgba(15,23,42,.7);
}
/* isi gambar banner */
.modal-banner a,
.modal-banner img{
display: block;
max-width: 100%;
max-height: calc(100vh - 96px); /* supaya selalu muat di layar */
height: auto;
}
.modal-banner img{
height: auto;
}
/* tombol close (X) di pojok kanan atas */
.modal-close{
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(15,23,42,.85);
color: #f9fafb;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
@media (max-width: 640px){
.modal-dialog{
max-width: calc(100% - 24px);
border-radius: 18px;
}
.modal-close{
width: 30px;
height: 30px;
top: 8px;
right: 8px;
}
}
@media (max-width: 768px){
.modal-dialog{
max-width: calc(100% - 24px);
border-radius: 18px;
}
}
/* Dark mode tweak */
:root[data-theme="dark"] .modal-backdrop{
background: rgba(15,23,42,.75);
}
:root[data-theme="dark"] .modal-dialog{
box-shadow: 0 24px 60px rgba(15,23,42,.9);
}
:root[data-theme="dark"] .modal-close{
background: #020617;
border-color: #1e293b;
color: #e5e7eb;
}
.modal-foot{
display:flex;
justify-content:flex-end;
padding:8px 12px 10px;
background:rgba(15,23,42,.10); /* tipis aja biar beda dari blur */
}
/* jadikan tombol kecil */
.modal-never{
min-height:32px;
padding-inline:12px;
font-size:12px;
background:#ffffff; /* bukan transparan lagi */
}
/* dark mode */
:root[data-theme="dark"] .modal-foot{
background:rgba(15,23,42,.7);
}
:root[data-theme="dark"] .modal-never{
background:#020617;
border-color:#1e293b;
color:#e5e7eb;
}
/* =========================
* 404 PAGE – HERO
* ======================= */
.hero-404{
padding:72px 0 56px;
min-height:calc(100vh - 140px); /* kira2 penuh layar, minus navbar+footer */
display:flex;
align-items:center;
background:
radial-gradient(900px 500px at 80% 0, rgba(124,58,237,.16), transparent 60%),
radial-gradient(600px 400px at 0 100%, rgba(59,130,246,.08), transparent 60%),
var(--bg);
}
.hero-404 .hero-inner{
align-items:center;
gap:40px;
}
/* pill "404 • Halaman tidak ditemukan" */
.hero-404 .badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border-radius:999px;
border:1px solid var(--border);
background:rgba(248,250,252,.95);
font-size:12px;
font-weight:600;
color:var(--muted);
backdrop-filter:blur(10px);
}
/* judul utama */
.hero-404 .hero-text h1{
font-size:clamp(28px, 4vw, 40px);
line-height:1.2;
margin-top:12px;
}
/* tombolnya boleh wrap kalau layar kecil */
.hero-404 .hero-cta{
flex-wrap:wrap;
}
/* kanan: ilustrasi */
.hero-404 .hero-art{
position:relative;
height:auto;
min-height:260px;
}
/* kotak blur/gradient */
.hero-404 .blob{
position:absolute;
inset:0;
border-radius:32px;
background:
radial-gradient(circle at 0 0,#ede9fe,transparent 55%),
radial-gradient(circle at 100% 100%,#e0f2fe,transparent 55%);
box-shadow:0 32px 70px rgba(15,23,42,.12);
opacity:.95;
animation:blobFloat 8s ease-in-out infinite alternate;
}
/* kartu "Code 404" */
.hero-404 .card-float{
position:absolute;
top:20px;
right:24px;
padding:10px 14px;
border-radius:16px;
background:#ffffff;
border:1px solid var(--border);
box-shadow:0 14px 40px rgba(15,23,42,.12);
font-size:13px;
display:inline-flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
}
.hero-404 .card-float span{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
}
/* opsional: emoji kecil di kartu */
.hero-404 .card-float::after{
content:"😵💫";
margin-left:auto;
}
/* =========================
* 404 – INFO BOX BAWAH
* ======================= */
.section-404-info{
padding-top:0;
}
.section-404-info .card{
border-radius:14px;
padding:12px 16px;
background:rgba(248,250,252,.95);
}
/* =========================
* ANIMASI KECIL
* ======================= */
@keyframes blobFloat{
0%{
transform:translate3d(0,0,0) scale(1);
}
100%{
transform:translate3d(0,-10px,0) scale(1.02);
}
}
/* =========================
* RESPONSIVE
* ======================= */
@media (max-width:960px){
.hero-404{
padding:56px 0 40px;
min-height:auto;
}
.hero-404 .hero-inner{
gap:28px;
}
}
@media (max-width:768px){
.hero-404 .hero-inner{
grid-template-columns:1fr; /* stack: ilustrasi di atas, teks di bawah */
text-align:center;
}
.hero-404 .hero-text{
order:2;
}
.hero-404 .hero-cta{
justify-content:center;
}
.hero-404 .hero-art{
order:1;
max-width:360px;
margin:0 auto;
min-height:220px;
}
.hero-404 .card-float{
top:16px;
right:16px;
}
}
@media (max-width:480px){
.hero-404{
padding:40px 0 32px;
}
.hero-404 .hero-text h1{
font-size:24px;
}
}
/* =========================
* DARK MODE 404
* ======================= */
:root[data-theme="dark"] .hero-404{
background:
radial-gradient(900px 500px at 80% 0, rgba(124,58,237,.35), transparent 60%),
var(--bg);
}
:root[data-theme="dark"] .hero-404 .badge{
background:rgba(15,23,42,.9);
border-color:#1e293b;
}
:root[data-theme="dark"] .hero-404 .blob{
background:
radial-gradient(circle at 0 0,#4c1d95,transparent 55%),
radial-gradient(circle at 100% 100%,#1e293b,transparent 55%);
}
:root[data-theme="dark"] .section-404-info .card{
background:#020617;
border-color:#1e293b;
}
/* =========================================
* PANDUAN DATA AKUN (button + modal)
* ======================================= */
/* baris kecil di bawah judul step 1 */
.guide-row{
margin: 4px 0 6px;
display: flex;
justify-content: flex-start;
}
/* tombol panduan */
.guide-btn{
padding: 6px 12px;
min-height: 32px;
border-radius: 999px;
border-width: 1px;
border-style: solid;
border-color: var(--border);
background: #f9fafb;
font-size: 13px;
font-weight: 500;
}
.guide-btn:hover{
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 8px 20px rgba(124,58,237,.18);
}
/* modal panduan */
.guide-modal{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 135;
}
.guide-modal.show{
display: flex;
}
.guide-modal-backdrop{
position: absolute;
inset: 0;
background: rgba(15,23,42,.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.guide-modal-dialog{
position: relative;
z-index: 1;
width: min(520px, 100% - 40px);
max-height: 80vh;
overflow-y: auto;
border-radius: 20px;
background: #ffffff;
padding: 18px 20px 16px;
box-shadow: 0 22px 55px rgba(15,23,42,.55);
}
.guide-modal-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.guide-modal-title{
margin: 0;
font-size: 18px;
font-weight: 700;
}
.guide-modal-close{
border: 0;
background: transparent;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.guide-modal-body{
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
/* kalau di dalam guide_content kamu pakai / */
.guide-modal-body ul,
.guide-modal-body ol{
padding-left: 20px;
}
.guide-modal-body li + li{
margin-top: 4px;
}
/* mobile */
@media (max-width:640px){
.guide-modal-dialog{
width: calc(100% - 24px);
padding: 16px 16px 14px;
}
.guide-modal-title{
font-size: 17px;
}
.guide-modal-body{
font-size: 13px;
}
}
/* dark mode */
:root[data-theme="dark"] .guide-modal-dialog{
background: #020617;
border: 1px solid #1e293b;
box-shadow: 0 24px 60px rgba(15,23,42,.9);
}
:root[data-theme="dark"] .guide-modal-body{
color: var(--muted);
}
:root[data-theme="dark"] .guide-modal-backdrop{
background: rgba(15,23,42,.7);
}
:root[data-theme="dark"] .guide-btn{
background: #020617;
border-color: #1e293b;
color: var(--text);
}
/* === PANDUAN CEK ID – CLOSE BUTTON === */
/* style default (light + dark) */
.guide-close{
position:absolute;
top:10px;
right:12px;
width:28px;
height:28px;
border-radius:999px;
border:1px solid rgba(148,163,184,.7);
background:rgba(15,23,42,.9);
color:#f9fafb; /* X putih, jelas di dark */
display:inline-flex;
align-items:center;
justify-content:center;
font-size:18px;
line-height:1;
cursor:pointer;
}
/* hover */
.guide-close:hover{
border-color:#e5e7eb;
background:rgba(15,23,42,1);
}
/* ekstra jaga-jaga untuk dark mode */
:root[data-theme="dark"] .guide-close{
background:#020617;
border-color:#4b5563;
color:#f9fafb;
}
.guide-cta{
display:flex;
flex-direction:column;
gap:10px;
}
.guide-cta-btn{
align-self:flex-start; /* tombol nempel di kiri, lebih rapi */
}
/* ===== Transaksi Real-time (cek pesanan) ===== */
.trans-rt-card{
margin-top:18px;
padding:18px 18px 16px;
}
/* judul + sub */
.trans-rt-card h2{
margin:0 0 4px;
font-size:18px;
}
.trans-rt-card .muted{
margin:0;
font-size:13px;
}
/* wrapper supaya ada border & scroll horizontal kalau di HP */
.trans-table-wrap{
margin-top:12px;
border-radius:14px;
border:1px solid var(--border);
overflow:auto;
}
/* tabel dasar */
.trans-table{
width:100%;
border-collapse:collapse;
font-size:13px;
min-width:640px; /* kalau layar sempit jadi bisa scroll */
}
.trans-table th,
.trans-table td{
padding:10px 12px;
text-align:left;
border-bottom:1px solid var(--border);
}
.trans-table th{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
background:var(--surface);
white-space:nowrap;
}
/* garis zebra tipis */
.trans-table tbody tr:nth-child(even){
background:rgba(148,163,184,.06);
}
/* kolom kode transaksi (kolom ke-2) pakai font monospace */
.trans-table td:nth-child(2){
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Courier New", monospace;
font-weight:600;
}
/* kolom harga (kolom ke-4) jangan patah baris */
.trans-table td:nth-child(4){
white-space:nowrap;
}
/* Dark mode penyesuaian */
:root[data-theme="dark"] .trans-table-wrap{
border-color:#1e293b;
}
:root[data-theme="dark"] .trans-table th{
background:#020617;
border-bottom-color:#1e293b;
}
:root[data-theme="dark"] .trans-table td{
border-bottom-color:#1e293b;
}
:root[data-theme="dark"] .trans-table tbody tr:nth-child(even){
background:#020617;
}