/* ==========================================================
TEMA 3D BARBARSLOT / SLOT ZEUS v3 (2026-10-17)
File terpisah. Jika index.html diganti, tambahkan kembali
satu baris di akhir :
PALET DIAMBIL DARI WARNA MEREK YANG SUDAH ADA DI HALAMAN:
--gold-main #ffcc00 dan --gold-dark #b8860b
(Piksel logo tidak bisa dibaca langsung: logo berformat
WebP VP8 lossy + alpha, dan server ini tidak punya
Pillow/pip/dwebp/ImageMagick.)
SEMUA PASANGAN WARNA SUDAH DIHITUNG, BUKAN DIKIRA-KIRA:
- 24 pasangan teks/latar: 0 gagal, 16 di antaranya AAA (>=7:1),
terendah 4.97:1 (AA)
- ramp tinta #fdf3e3 / #e0cba6 / #b19a71 -> LULUS validator
- ramp emas #ffeb99 / #ffcc00 / #b8860b -> LULUS validator
(#ffe066 sebelumnya GAGAL: selisih terang vs #ffcc00 hanya
0.044, batas 0.06 -> umpan balik hover nyaris tak terasa)
========================================================== */
:root{
/* --- permukaan: 4 tingkat supaya kedalaman 3D terbaca --- */
--bb-page:#0b0804;
--bb-page2:#120d06;
--bb-panel:#17110a;
--bb-elev:#211807;
--bb-head:#2a1f0a;
/* --- tinta (ramp tervalidasi) --- */
--bb-text:#fdf3e3; /* 18.2:1 di atas --bb-page (AAA) */
--bb-text2:#e0cba6; /* 12.6:1 (AAA) */
--bb-dim:#b19a71; /* 7.4:1 (AAA) */
--bb-ink:#241a02; /* teks GELAP di atas emas: 11.4:1 */
/* --- emas merek (ramp tervalidasi) --- */
--bb-gold:#ffcc00; /* --gold-main halaman 13.2:1 */
--bb-bright:#ffeb99; /* hover; selisih terang cukup */
--bb-deep:#b8860b; /* --gold-dark halaman */
--bb-amber:#ffcc00;
--bb-orange:#ffcc00;
--bb-bronze:#b8860b;
--bb-brown:#8a5a00;
--bb-shadow:#5a3d05;
--bb-line:rgba(255,204,0,.26);
/* --- variabel yang DIPAKAI seksi kustom tapi TIDAK PERNAH
didefinisikan di CSS aslinya: var(--glass) 1x, var(--gold) 2x --- */
--glass:linear-gradient(180deg,rgba(255,204,0,.08),rgba(10,7,5,.50));
--gold:#ffcc00;
}
/* ==========================================================
HALAMAN
Wadah Envato (.page, .page__canvas, .grid-container) tidak
punya background sendiri -> mewarisi body. Jadi menggelapkan
body sudah cukup, tanpa menyisakan "pulau putih".
========================================================== */
html,body{
background:var(--bb-page)!important;
color:var(--bb-text)!important;
}
body{
background-image:
radial-gradient(ellipse at 50% -6%,rgba(255,204,0,.10) 0%,rgba(255,204,0,0) 56%),
linear-gradient(180deg,var(--bb-page2) 0%,var(--bb-page) 46%,#0a0703 100%)!important;
background-attachment:fixed!important;
}
.page,.page__canvas,.grid-container,.page-tabs{background:transparent!important}
/* teks umum */
h1,h2,h3,h4,h5,h6{color:var(--bb-text)!important}
p,li,span,td,th,dd,dt,label,figcaption,small{color:inherit}
body p,body li{color:var(--bb-text2)!important}
a{color:var(--bb-amber)!important} /* aslinya #0084B4 (biru) */
a:hover{color:#ffeb99!important}
hr{border-color:var(--bb-line)!important}
/* 5 kelas Envato yang berlatar putih & dipakai di halaman ini */
.context-header,
.header-categories,
.purchase-panel,
.box--no-padding,
.item-description-toggle{
background:linear-gradient(180deg,var(--bb-panel),var(--bb-page2))!important;
color:var(--bb-text2)!important;
border-color:var(--bb-line)!important;
}
/* kolom input: CEKUNG */
input,select,textarea{
background:linear-gradient(180deg,#0b0802,var(--bb-panel))!important;
color:var(--bb-text)!important;
border:1px solid var(--bb-line)!important;
border-radius:10px!important;
box-shadow:inset 0 2px 6px rgba(0,0,0,.85)!important;
}
input::placeholder,textarea::placeholder{color:var(--bb-dim)!important}
/* ==========================================================
HEADER 3D
========================================================== */
.site-header,.global-header,.global-header__wrapper{
position:relative;
background:linear-gradient(180deg,var(--bb-head) 0%,#211704 40%,#1a1303 74%,#120d06 100%)!important;
border-bottom:1px solid var(--bb-line)!important;
box-shadow:
inset 0 1px 0 rgba(253,243,227,.28),
inset 0 -16px 24px -24px rgba(0,0,0,.92),
0 9px 24px rgba(0,0,0,.55)!important;
}
.site-header::after{
content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,rgba(255,204,0,0) 0%,rgba(255,204,0,.45) 28%,rgba(255,204,0,.45) 72%,rgba(255,204,0,0) 100%);
pointer-events:none;z-index:2;
}
.header-site-titles__site,.header-site-titles__link{
color:var(--bb-amber)!important;
text-shadow:0 1px 0 var(--bb-shadow),0 2px 0 var(--bb-ink),0 3px 6px rgba(0,0,0,.85)!important;
}
.site-header img,.global-header img{
filter:drop-shadow(0 3px 6px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(255,204,0,.28))!important;
}
.global-header-menu__link,
.header-categories__main-link,
.header-categories__links-item a{
color:var(--bb-text2)!important;text-decoration:none!important;
border-radius:10px!important;padding:7px 11px!important;
text-shadow:0 1px 2px rgba(0,0,0,.8)!important;
transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease!important;
}
.global-header-menu__link:hover,
.header-categories__main-link:hover,
.header-categories__links-item a:hover{
color:var(--bb-amber)!important;
background:linear-gradient(180deg,rgba(255,204,0,.16),rgba(255,204,0,.05))!important;
transform:translateY(-1px)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.26),0 3px 0 rgba(0,0,0,.45),0 5px 12px rgba(0,0,0,.45)!important;
}
.global-header-menu__link-text{color:inherit!important}
.header-mini__button--cart,
.header-mini__button--account,
.header-mini__button--categories{
border-radius:11px!important;padding:8px 12px!important;color:var(--bb-text2)!important;
background:linear-gradient(180deg,rgba(255,204,0,.14) 0%,rgba(10,7,5,.55) 100%)!important;
border:1px solid rgba(255,204,0,.32)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.26),0 3px 0 var(--bb-shadow),0 6px 13px rgba(0,0,0,.45)!important;
transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease!important;
}
.header-mini__button--cart:hover,
.header-mini__button--account:hover,
.header-mini__button--categories:hover{
color:var(--bb-ink)!important;
background:linear-gradient(180deg,var(--bb-amber) 0%,var(--bb-orange) 58%,var(--bb-bronze) 100%)!important;
border-color:rgba(253,243,227,.70)!important;transform:translateY(-2px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 0 var(--bb-brown),0 9px 18px rgba(0,0,0,.5)!important;
}
.header-mini__button--cart:active,
.header-mini__button--account:active,
.header-mini__button--categories:active{
transform:translateY(2px)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)!important;
}
.search-field__button{
background:linear-gradient(180deg,var(--bb-amber) 0%,var(--bb-orange) 58%,var(--bb-bronze) 100%)!important;
border:1px solid rgba(253,243,227,.65)!important;border-radius:10px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 var(--bb-brown)!important;
}
.search-field__button svg{fill:var(--bb-ink)!important}
/* tombol umum */
.btn,.btn--square,.e-btn{
color:var(--bb-ink)!important;
background:linear-gradient(180deg,var(--bb-amber) 0%,var(--bb-orange) 58%,var(--bb-bronze) 100%)!important;
border:1px solid rgba(253,243,227,.70)!important;border-radius:11px!important;
text-shadow:0 1px 0 rgba(255,255,255,.3)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--bb-brown),0 8px 16px rgba(0,0,0,.4)!important;
transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.btn:hover,.btn--square:hover,.e-btn:hover{
background:linear-gradient(180deg,#ffeb99 0%,var(--bb-amber) 55%,var(--bb-orange) 100%)!important;
transform:translateY(-2px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 0 var(--bb-brown),0 12px 22px rgba(0,0,0,.45)!important;
}
.btn:active,.btn--square:active,.e-btn:active{
transform:translateY(2px)!important;box-shadow:inset 0 2px 6px rgba(140,72,0,.5)!important;
}
/* ==========================================================
FOOTER 3D
========================================================== */
.global-footer{
position:relative;
background:linear-gradient(180deg,var(--bb-head) 0%,#211704 16%,#1a1303 54%,#0f0a02 100%)!important;
border-top:1px solid var(--bb-line)!important;
color:var(--bb-dim)!important;
box-shadow:
inset 0 1px 0 rgba(253,243,227,.34),
inset 0 10px 22px -14px rgba(255,204,0,.12),
inset 0 -26px 34px -28px rgba(0,0,0,.92),
0 -18px 36px rgba(0,0,0,.4)!important;
}
.global-footer::before{
content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,rgba(255,204,0,0) 0%,rgba(255,204,0,.45) 30%,rgba(255,204,0,.45) 70%,rgba(255,204,0,0) 100%);
pointer-events:none;
}
.global-footer-sublist__item-title{
color:var(--bb-amber)!important;letter-spacing:.6px!important;
text-shadow:0 1px 0 var(--bb-shadow),0 2px 0 var(--bb-ink),0 3px 6px rgba(0,0,0,.85)!important;
}
.global-footer__text-link,
.global-footer-sublist__item a,
.global-footer-company-links__list-item a,
.global-footer-info-links__list-item a{
color:var(--bb-text2)!important;text-decoration:none!important;display:inline-block;
padding:2px 6px!important;border-radius:6px!important;
text-shadow:0 1px 2px rgba(0,0,0,.8)!important;
transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.global-footer__text-link:hover,
.global-footer-sublist__item a:hover,
.global-footer-company-links__list-item a:hover,
.global-footer-info-links__list-item a:hover{
color:#0a0705!important;
background:linear-gradient(180deg,var(--bb-amber),var(--bb-orange))!important;
transform:translateY(-2px)!important;text-shadow:none!important;
box-shadow:0 4px 0 var(--bb-brown),0 6px 14px rgba(0,0,0,.6)!important;
}
.global-footer-company-links__copyright,
.global-footer-company-links__price-disclaimer{color:var(--bb-dim)!important}
/* panel statistik footer (88.168.112 items sold): tanpa border & kotak */
.global-footer-stats,.global-footer-stats__content{
background:none!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
.global-footer-stats__number{
color:var(--bb-amber)!important;
text-shadow:0 1px 0 var(--bb-shadow),0 2px 6px rgba(0,0,0,.8)!important;
}
.global-footer__separator{
border:0!important;height:1px!important;
background:linear-gradient(90deg,rgba(255,204,0,0),rgba(255,204,0,.3),rgba(255,204,0,0))!important;
}
/* ==========================================================
FAQ 3D (.faq-section, pola checkbox)
========================================================== */
.faq-section{
background:linear-gradient(180deg,var(--bb-head) 0%,var(--bb-panel) 42%,#161002 74%,#120d06 100%)!important;
border:1px solid rgba(255,204,0,.42)!important;
box-shadow:
inset 0 1px 0 rgba(253,243,227,.26),
0 20px 44px rgba(0,0,0,.6),
0 0 26px rgba(255,204,0,.10)!important;
}
/* ---------- JUDUL SEKSI ----------
CSS halaman memakai trik gradient-pada-teks:
background: linear-gradient(...); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Isi huruf jadi TRANSPARAN; warnanya hanya datang dari gradient.
Dua hal yang saya tambahkan di v3 justru merusaknya:
- text-shadow #241a02 -> nyaris sewarna latar, jadi yang terlihat
hanya siluet gelap di atas latar gelap
- filter: drop-shadow -> membuat konteks render baru dan MEMUTUS
background-clip:text di banyak mesin, huruf jadi transparan
Perbaikan: batalkan trik gradient itu, pakai isi SOLID emas.
Dijamin terlihat di semua browser, tanpa bergantung background-clip. */
.section-title,
.section-title span{
background:none!important;
-webkit-background-clip:border-box!important;
background-clip:border-box!important;
-webkit-text-fill-color:var(--bb-gold)!important;
color:var(--bb-gold)!important;
filter:none!important;
/* emboss: lapisan gelap HANYA di bawah huruf, bukan menyelimutinya */
text-shadow:0 1px 0 var(--bb-shadow),0 2px 3px rgba(0,0,0,.9)!important;
}
/* .t-heading Envato aslinya color:#454545 (abu gelap) -- tak terbaca
di latar gelap. Dipaksa terang. */
.t-heading,.t-heading.-color-inherit{color:var(--bb-text)!important}
.faq-item{
background:linear-gradient(180deg,rgba(255,204,0,.10) 0%,rgba(10,7,5,.55) 100%)!important;
border:1px solid rgba(255,204,0,.26)!important;
border-left:4px solid #b8860b!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.20),0 3px 0 rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.4)!important;
}
.faq-item:hover{
background:linear-gradient(180deg,rgba(255,204,0,.15) 0%,rgba(10,7,5,.55) 100%)!important;
border-color:rgba(255,204,0,.5)!important;
/* aslinya scale(1.01): membesarkan elemen bikin teks di-resample
dan terlihat sedikit blur. translateY tetap terasa timbul. */
transform:translateY(-2px)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.28),0 5px 0 var(--bb-shadow),0 10px 20px rgba(0,0,0,.5)!important;
}
.faq-label{color:var(--bb-text)!important;text-shadow:0 1px 2px rgba(0,0,0,.85)!important}
.faq-content-inner{
color:var(--bb-text2)!important;
border-top:1px solid rgba(255,204,0,.16);padding-top:16px!important;
}
.faq-input:checked~.faq-item,
.faq-item:has(.faq-input:checked){
background:linear-gradient(180deg,rgba(255,204,0,.18) 0%,rgba(10,7,5,.60) 100%)!important;
border-left-color:var(--bb-amber)!important;border-color:rgba(255,204,0,.6)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.30),0 4px 0 var(--bb-shadow),0 10px 22px rgba(0,0,0,.5),0 0 18px rgba(255,204,0,.14)!important;
}
.faq-input:checked~.faq-label{color:#ffeb99!important}
/* ==========================================================
REVIEW 3D + perbaikan 4 bug CSS asli
========================================================== */
.review-section{
background:linear-gradient(180deg,var(--bb-head) 0%,var(--bb-panel) 45%,#120d06 100%)!important;
border:1px solid rgba(255,204,0,.34)!important;border-radius:15px!important;
padding:30px 20px!important;margin:40px auto!important;max-width:1100px!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.24),0 20px 44px rgba(0,0,0,.55)!important;
}
/* bug 1: background:var(--glass) -- --glass tak pernah didefinisikan */
.review-card{
background:linear-gradient(180deg,rgba(255,204,0,.08) 0%,rgba(10,7,5,.50) 100%)!important;
border:1px solid rgba(255,204,0,.26)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.20),0 4px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.45)!important;
}
/* bug 2: border-color:var(--gold) -- --gold tak pernah didefinisikan */
.review-card:hover{
border-color:rgba(255,204,0,.62)!important;
box-shadow:inset 0 1px 0 rgba(253,243,227,.28),0 7px 0 var(--bb-shadow),0 16px 28px rgba(0,0,0,.55),0 0 18px rgba(255,204,0,.16)!important;
}
/* bug 3: teks review memakai style inline color:#000000 -> hitam di atas
panel gelap, tidak terbaca. Inline style hanya bisa dilawan !important. */
.review-card p,.review-card p[style]{color:var(--bb-text2)!important}
.review-card h4{color:var(--bb-text)!important;margin:0!important}
.stars{color:var(--bb-amber)!important;text-shadow:0 0 10px rgba(255,204,0,.45)!important}
/* bug 4: .avatar background:var(--gold) -- tak terdefinisi */
.avatar{
background:linear-gradient(180deg,var(--bb-amber) 0%,var(--bb-orange) 58%,var(--bb-bronze) 100%)!important;
color:var(--bb-ink)!important;border:1px solid rgba(253,243,227,.65)!important;
text-shadow:0 1px 0 rgba(255,255,255,.3)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 var(--bb-brown),0 5px 11px rgba(0,0,0,.45)!important;
}
/* ==========================================================
POPUP DOBEL
Halaman ini punya survey-popup Envato ("Tell us what you
think!") dengan class is-visually-hidden -- TAPI class itu
tidak pernah didefinisikan (yang ada hanya
".js .is-visually-hidden--js"), jadi popup itu TIDAK
tersembunyi dan muncul sebagai kotak putih fixed di kanan
bawah, bertumpuk dengan popup promo.
========================================================== */
#js-customer-satisfaction-popup,
.survey-popup,
.e-modal,
#js-customer-satisfaction-survey-iframe-wrapper{display:none!important}
/* ==========================================================
EFEK HUJAN BARA + ROKET
pointer-events:none -> tidak pernah menghalangi klik.
z-index 90: di atas konten, DI BAWAH header/footer/popup.
Hanya transform & opacity yang dianimasikan (murah di GPU).
Variasi lewat :nth-child -> tanpa atribut gaya inline.
========================================================== */
.bb-fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:90}
.bb-ember{
position:absolute;top:-8vh;width:5px;height:5px;border-radius:50%;
background:radial-gradient(circle,#fff6c9 0%,#ffcc00 32%,#ffcc00 62%,rgba(248,54,0,.35) 85%,rgba(248,54,0,0) 100%);
box-shadow:0 0 7px rgba(255,204,0,.55),0 0 14px rgba(184,134,11,.3);
opacity:0;animation-name:bbFallA;animation-timing-function:linear;animation-iteration-count:infinite;
}
.bb-ember:nth-child(3n+2){animation-name:bbFallB}
.bb-ember:nth-child(3n+3){animation-name:bbFallC}
@keyframes bbFallA{0%{transform:translate3d(0,-8vh,0) scale(.7);opacity:0}8%{opacity:1}85%{opacity:.85}100%{transform:translate3d(14px,108vh,0) scale(.35);opacity:0}}
@keyframes bbFallB{0%{transform:translate3d(0,-8vh,0) scale(.9);opacity:0}10%{opacity:1}85%{opacity:.8}100%{transform:translate3d(-26px,108vh,0) scale(.4);opacity:0}}
@keyframes bbFallC{0%{transform:translate3d(0,-8vh,0) scale(.6);opacity:0}12%{opacity:.95}85%{opacity:.75}100%{transform:translate3d(40px,108vh,0) scale(.3);opacity:0}}
/* variasi tiap bara */
.bb-ember:nth-child(1){left:3.3vw;animation-duration:11.1s;animation-delay:7.4s;width:5px;height:5px}
.bb-ember:nth-child(2){left:8.1vw;animation-duration:12.7s;animation-delay:4.8s;width:7px;height:7px}
.bb-ember:nth-child(3){left:12.2vw;animation-duration:11.2s;animation-delay:5.6s;width:7px;height:7px}
.bb-ember:nth-child(4){left:18.0vw;animation-duration:11.5s;animation-delay:4.3s;width:5px;height:5px}
.bb-ember:nth-child(5){left:25.7vw;animation-duration:11.1s;animation-delay:2.7s;width:5px;height:5px}
.bb-ember:nth-child(6){left:29.2vw;animation-duration:12.8s;animation-delay:6.7s;width:6px;height:6px}
.bb-ember:nth-child(7){left:35.6vw;animation-duration:8.8s;animation-delay:2.9s;width:5px;height:5px}
.bb-ember:nth-child(8){left:38.0vw;animation-duration:7.4s;animation-delay:8.8s;width:5px;height:5px}
.bb-ember:nth-child(9){left:46.8vw;animation-duration:13.4s;animation-delay:0.6s;width:5px;height:5px}
.bb-ember:nth-child(10){left:48.5vw;animation-duration:9.1s;animation-delay:2.2s;width:5px;height:5px}
/* ---------- METEOR JATUH ----------
Kepala menyala + ekor api yang meruncing. Jatuh diagonal
dari kanan-atas ke kiri-bawah. Ekor dibuat dengan ::after
(gradient meruncing + blur), bukan gambar. */
.bb-meteor{
position:absolute;top:-8vh;right:-8vw;
width:6px;height:6px;border-radius:50%;
background:radial-gradient(circle,#fff8d9 0%,#ffeb99 30%,#ffcc00 60%,rgba(184,134,11,0) 100%);
box-shadow:0 0 10px rgba(255,204,0,.85),0 0 22px rgba(184,134,11,.45);
opacity:0;
animation:bbMeteor 7s linear infinite;
}
.bb-meteor::after{
content:"";position:absolute;left:50%;top:50%;
width:170px;height:2px;
transform-origin:0 50%;
transform:translate(0,-50%) rotate(-45deg) scaleX(1);
background:linear-gradient(90deg,
rgba(255,235,153,.95) 0%,
rgba(255,204,0,.55) 28%,
rgba(184,134,11,.22) 62%,
rgba(184,134,11,0) 100%);
border-radius:2px;
filter:blur(.6px);
pointer-events:none;
}
/* jatuh diagonal: kanan-atas -> kiri-bawah */
@keyframes bbMeteor{
0% {transform:translate3d(0,0,0) scale(.7);opacity:0}
8% {opacity:1}
80% {opacity:.9}
100%{transform:translate3d(-118vw,118vh,0) scale(.45);opacity:0}
}
/* tiap meteor beda jalur, kecepatan, jeda, dan panjang ekor */
.bb-meteor:nth-of-type(1){right:2vw; animation-duration:6.5s;animation-delay:0s}
.bb-meteor:nth-of-type(2){right:26vw;animation-duration:9s; animation-delay:2.4s}
.bb-meteor:nth-of-type(2)::after{width:130px}
.bb-meteor:nth-of-type(3){right:52vw;animation-duration:7.6s;animation-delay:4.8s;width:5px;height:5px}
.bb-meteor:nth-of-type(3)::after{width:110px;height:1.6px}
.bb-meteor:nth-of-type(4){right:78vw;animation-duration:11s; animation-delay:7.2s;width:7px;height:7px}
.bb-meteor:nth-of-type(4)::after{width:200px;height:2.4px}
/* ==========================================================
JANGAN SENTUH POPUP BAWAAN (#jt-popup)
Halaman ini SUDAH punya popup promo sendiri: #jt-popup,
seluruh gayanya INLINE (bukan di blok