/* XYZ GAMING STORE — beranda (index.html saja, scope body.xh).
   Basis: style.css (satu aksen oranye, tanpa grid/scanline/hazard) kayak Dragon.
   Ciri khas XYZ yang dipertahanin: bentuk quad/potong-sudut ala frame HUD
   (kartu, tombol, slider, navbar) + timer ala C4. */

body.xh{
  --xh-head:'Big Shoulders Display','Bebas Neue',Impact,sans-serif;
  --xh-red:#ff2a10;
  --cut:18px;
}

/* ── Flash sale: timer ala C4 (ciri khas XYZ) ── */
body.xh .countdown{
  gap:.15rem;padding:.55rem .9rem .45rem;background:#050303;
  border:2px solid #3b2b26;border-radius:var(--radius-sm);
  box-shadow:inset 0 0 18px rgba(255,42,16,.12);
}
body.xh .countdown-num{
  background:none;border:0;box-shadow:none;min-width:2ch;padding:0;border-radius:0;
  font-family:var(--xh-head);font-weight:900;font-size:clamp(2.2rem,7vw,3rem);line-height:1;
  color:var(--xh-red);text-shadow:0 0 14px rgba(255,42,16,.65);
}
body.xh .countdown-sep{
  color:var(--xh-red);font-family:var(--xh-head);font-size:2.2rem;margin-bottom:1.1rem;
}
body.xh .countdown-label{font-size:.62rem}
@media (prefers-reduced-motion:no-preference){
  body.xh .countdown-sep{animation:xhBlink 1s steps(2,start) infinite}
}
@keyframes xhBlink{to{opacity:.2}}

/* ── Testimoni: 3 kartu struk, sama bentuknya kayak kartu lain ── */
body.xh .stubs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;
}
body.xh .stub{
  display:flex;flex-direction:column;padding:1.5rem 1.5rem 1.5rem 1.75rem;
  background-color:var(--bg-card);border:1px solid var(--border);
  transition:var(--transition);
}
body.xh .stub:hover{border-color:var(--electric);--cut-line:var(--electric)}
body.xh .stub-item{
  margin:0 0 .9rem;align-self:flex-start;padding:.2rem .65rem;
  border:1px solid var(--border-gold);border-radius:var(--radius-full);
  color:var(--gold);font-size:.78rem;font-weight:700;
}
body.xh .stub-quote{margin:0 0 1.25rem;flex:1;color:var(--text-secondary);font-size:.95rem;line-height:1.65}
body.xh .stub-cut{border-top:1px dashed var(--border);margin:0 0 .9rem}
body.xh .stub-foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
body.xh .stub-name{font-weight:700;color:var(--text-primary);font-size:.9rem}
body.xh .stub-score{font-family:var(--xh-head);font-weight:900;font-size:1.8rem;line-height:1;color:var(--gold)}

/* ── Bentuk quad: dua sudut diagonal dipotong (kanan-atas & kiri-bawah) ──
   Garis tepi di sudut potongan digambar lewat 2 gradient diagonal, jadi
   outline-nya tetap nyambung kayak frame HUD (tanpa siku emas). */
body.xh :is(.product-card,.topup-game-card,.stub,.faq-item){
  --cut-line:rgba(255,90,30,.35);
  position:relative;border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
/* garis diagonal digambar di layer atas (::before) supaya nggak ketutup gambar header kartu */
body.xh :is(.product-card,.topup-game-card,.stub,.faq-item)::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:
    linear-gradient(to bottom left,var(--cut-line) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to top right,var(--cut-line) calc(50% + 1px),transparent calc(50% + 1px));
  background-repeat:no-repeat;
  background-size:var(--cut) var(--cut);
  background-position:right top,left bottom;
}
body.xh :is(.product-card,.topup-game-card,.stub,.faq-item):hover{--cut-line:var(--electric)}
/* kartu flash sale: yang berbentuk kotak cuma .flash-card-box (harga+tombol di luar kotak).
   Garisnya pakai ::after karena ::before dipakai kupon gantung FLASH SALE. */
body.xh .flash-card-box{
  --cut-line:rgba(255,90,30,.35);
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
body.xh .flash-card-box::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:
    linear-gradient(to bottom left,var(--cut-line) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to top right,var(--cut-line) calc(50% + 1px),transparent calc(50% + 1px));
  background-repeat:no-repeat;
  background-size:var(--cut) var(--cut);
  background-position:right top,left bottom;
}
body.xh .flash-product-card:hover .flash-card-box{--cut-line:rgba(255,90,30,.6)}
body.xh .topup-game-card.active-pb{--cut-line:var(--gold)}
body.xh .topup-game-card.active-pb::after{right:calc(var(--cut) + .25rem)}
body.xh .topup-game-card{border-width:1px}
body.xh .fx-tilting{transform:none !important}

/* tombol solid ikut bentuk quad (outline dibiarin biar garisnya nggak putus) */
body.xh :is(.btn-primary,.btn-gold){
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}

/* slider banner */
body.xh .slider-container{
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
}
@media (max-width:600px){
  body.xh{--cut:14px}
  body.xh .slider-container{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
}

/* ── Navbar: panel trapesium (quad) tetap, TANPA animasi / efek scroll ──
   Bentuknya digambar di ::before/::after, bukan di .navbar, supaya dropdown
   profil (Dashboard/Logout) nggak ikut kepotong. */
body.xh .navbar,
body.xh .navbar.scrolled{
  --xh-nav-side:max(12px,calc((100vw - 1240px) / 2));--xh-slant:22px;
  --xh-quad:polygon(0 0,100% 0,calc(100% - var(--xh-slant)) 100%,var(--xh-slant) 100%);
  top:10px;left:var(--xh-nav-side);right:var(--xh-nav-side);
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:none;
}
body.xh .navbar::before,
body.xh .navbar::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;clip-path:var(--xh-quad);
}
body.xh .navbar::before{inset:0;background:#2e2521}
body.xh .navbar::after{
  inset:1px 1px 0;
  background:linear-gradient(#ff4a12,#ff4a12) bottom/100% 3px no-repeat,#120c0a;
}
body.xh .navbar .nav-inner{height:58px}
body.xh .nav-links a{border-radius:2px}
body.xh .nav-links a.active{background:none;color:var(--gold);box-shadow:inset 0 -2px 0 #ff4a12}
body.xh .xgs-profile-toggle{border-radius:2px !important}
body.xh .xgs-profile-dropdown{
  border-radius:2px !important;border-top:3px solid #ff4a12 !important;background:#120c0a !important;
}
body.xh.menu-open .nav-mobile{
  top:78px;left:var(--xh-nav-side,12px);right:var(--xh-nav-side,12px);
  max-height:calc(100vh - 92px);border-radius:4px;border-top:3px solid #ff4a12;
}
@media (max-width:600px){
  body.xh .navbar,body.xh .navbar.scrolled{--xh-nav-side:8px;--xh-slant:14px;top:8px}
  body.xh.menu-open .nav-mobile{top:74px}
}