/* XYZ GAMING STORE — Cyber HUD layer (dimuat setelah style.css) */
:root{
  --hud-cut: 14px;
  --hud-line: #ff5a1e;
  --hud-line-soft: rgba(255,90,30,.35);
  --hud-gold: #ffc61a;
}
body{
  background:
    linear-gradient(rgba(255,90,30,.035) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg, rgba(255,90,30,.035) 1px, transparent 1px) 0 0/36px 36px,
    radial-gradient(1200px 600px at 80% -10%, rgba(225,29,29,.18), transparent 60%),
    var(--bg-primary);
}
/* Panel bersudut ala HUD: sudut dipotong + siku emas di pojok */
.hud, .card, .product-card, .flash-product-card, .topup-game-card, .trust-card, .testi-card, .cek-card, .calc-card, .calc-stat{
  --c: var(--hud-cut);
  border-radius: 0 !important;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  border: 1px solid var(--hud-line-soft);
  background-image:
    linear-gradient(var(--hud-gold),var(--hud-gold)), linear-gradient(var(--hud-gold),var(--hud-gold)),
    linear-gradient(var(--hud-gold),var(--hud-gold)), linear-gradient(var(--hud-gold),var(--hud-gold));
  background-repeat: no-repeat;
  background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px;
  background-position: left 0 top 0, left 0 top 0, right 0 bottom 0, right 0 bottom 0;
}
.hud, .card, .calc-card{ background-color: var(--bg-card); }
.product-card:hover, .topup-game-card:hover, .flash-product-card:hover, .hud:hover{
  border-color: var(--hud-line);
  filter: drop-shadow(0 0 10px rgba(255,90,30,.45));
}
/* Tombol HUD */
.btn{
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
}
.btn-primary{ background: linear-gradient(135deg,#ff6a00,#e11d1d); border-color: transparent; }
.navbar{ border-bottom: 1px solid var(--hud-line-soft); background: rgba(10,4,5,.88); }
.nav-links a.active, .nav-links a:hover{ color: var(--hud-gold); }
.logo-main{ color: var(--hud-gold); }
.logo-sub{ color: #fff; letter-spacing: .28em; }
.slide-tag, .section-title, h1, h2{ text-shadow: 0 0 18px rgba(255,90,30,.25); }
::selection{ background: #e11d1d; color:#fff; }

/* ---- halaman Jasa GB ---- */
.gb-hero{ padding: 7rem 0 1.5rem; text-align:center; }
.gb-hero h1{ font-family: var(--font-display); font-size: clamp(1.6rem,5vw,2.6rem); letter-spacing:.08em; }
.gb-hero h1 span{ color: var(--hud-gold); }
.gb-hero p{ color: var(--text-secondary); max-width: 620px; margin: .75rem auto 0; font-size:.95rem; line-height:1.6; }
.gb-list{ display:grid; gap:1rem; padding: 1rem 0 3rem; }
.gb-item{ display:grid; grid-template-columns: 64px 1fr auto; gap:1rem; align-items:center; padding:1.1rem 1.25rem; }
.gb-no{ font-family: var(--font-display); font-size:1.8rem; color: var(--hud-gold); text-align:center; }
.gb-item h3{ font-family: var(--font-display); font-size:1rem; letter-spacing:.08em; margin-bottom:.3rem; }
.gb-item p{ font-size:.82rem; color: var(--text-secondary); line-height:1.5; }
.gb-tag{ display:inline-block; margin-top:.5rem; font-size:.68rem; font-weight:800; letter-spacing:.1em; color: var(--hud-gold); border:1px solid var(--hud-line-soft); padding:.15rem .5rem; }
.gb-flow{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; padding-bottom:3rem; }
.gb-flow .hud{ padding:1rem 1.1rem; font-size:.8rem; color: var(--text-secondary); }
.gb-flow strong{ display:block; color:#fff; font-family: var(--font-display); font-size:.78rem; letter-spacing:.1em; margin-bottom:.3rem; }
@media (max-width:640px){ .gb-item{ grid-template-columns: 44px 1fr; } .gb-item .btn{ grid-column: 1 / -1; justify-content:center; } }

/* ---- HUD lanjutan: FAQ, input, pencarian, label, slide, ticker ---- */
.faq-item, .slide-item, .home-search .hs-field, .form-input, input[type=search], input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  border-radius: 0 !important;
}
.faq-item{
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  border-color: var(--hud-line-soft);
  background-image: linear-gradient(var(--hud-gold),var(--hud-gold)), linear-gradient(var(--hud-gold),var(--hud-gold));
  background-repeat:no-repeat; background-size:18px 2px, 2px 18px; background-position:left 0 top 0, left 0 top 0;
}
.slide-item{ clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); }
.hero-slider, .slider, .slider-wrap{ border-radius:0 !important; }
.section-tag{
  border-radius:0 !important; letter-spacing:.14em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding-left:1.1rem; padding-right:1.1rem;
  background: rgba(255,90,30,.12); border-color: var(--hud-line); color: var(--hud-gold);
}
.section-tag i{ color: var(--hud-gold); }
.home-search button{
  border-radius:0 !important; background: linear-gradient(135deg,#ff6a00,#e11d1d) !important; color:#fff !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.home-search .hs-field{ border-color: var(--hud-line-soft) !important; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.form-input:focus, input:focus, select:focus, textarea:focus{ border-color: var(--hud-line) !important; box-shadow: 0 0 0 2px rgba(255,90,30,.25) !important; outline:none; }
.badge, .slide-tag, .nav-highlight a{ border-radius:0 !important; }
.nav-links .nav-highlight a, .nav-cs, a[href*="wa.me"].btn{ background: linear-gradient(135deg,#ff6a00,#e11d1d); border-color: transparent; color:#fff; }
.btn-outline{ border-color: var(--hud-line); color: var(--hud-gold); }
.ticker-bar{ background: linear-gradient(90deg,#8f1109,#e11d1d,#8f1109); }

/* ---- Banner utama (slider) bentuk cyber HUD ---- */
.slider-container{
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  clip-path: polygon(36px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 36px), calc(100% - 36px) 100%, 14px 100%, 0 calc(100% - 14px), 0 36px);
  background-color: #0e0507;
}
.slider-container .slide-item{ clip-path: none !important; border-radius: 0 !important; }
.slider-container::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  border: 1px solid var(--hud-line);
  background:
    /* siku emas */
    linear-gradient(var(--hud-gold),var(--hud-gold)) left 36px top 0 / 64px 3px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) left 0 top 36px / 3px 44px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) right 36px bottom 0 / 64px 3px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) right 0 bottom 36px / 3px 44px no-repeat,
    /* garis diagonal di sudut yang dipotong */
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--hud-line) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)) left 0 top 0 / 36px 36px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--hud-line) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)) right 0 bottom 0 / 36px 36px no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1.5px), var(--hud-line) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)) right 0 top 0 / 14px 14px no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1.5px), var(--hud-line) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)) left 0 bottom 0 / 14px 14px no-repeat;
}
.slider-btn{
  border-radius: 0 !important; background: rgba(10,4,5,.85) !important; border: 1px solid var(--hud-line) !important; color: var(--hud-gold) !important;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.slider-dot{ border-radius: 0 !important; transform: skewX(-20deg); }