/* ========================================================================
   Premium UI Rework 2026 - storefront + admin
   Drop-in CSS override. Tidak mengubah alur backend / controller.
   ======================================================================== */
:root{
  --ui-bg:#070b18;
  --ui-bg-2:#10172a;
  --ui-panel:rgba(15,23,42,.72);
  --ui-panel-solid:#101827;
  --ui-card:rgba(255,255,255,.075);
  --ui-card-2:rgba(255,255,255,.11);
  --ui-line:rgba(255,255,255,.13);
  --ui-line-strong:rgba(255,255,255,.24);
  --ui-text:#f8fafc;
  --ui-muted:#a7b1c2;
  --ui-soft:#dbeafe;
  --ui-brand:#ff7a18;
  --ui-brand-2:#ffbd59;
  --ui-brand-3:#ff365f;
  --ui-success:#30d158;
  --ui-radius:24px;
  --ui-radius-sm:16px;
  --ui-shadow:0 24px 80px rgba(0,0,0,.42);
  --ui-glow:0 0 0 1px rgba(255,255,255,.08),0 20px 60px rgba(255,122,24,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  color:var(--ui-text)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,122,24,.22),transparent 28rem),
    radial-gradient(circle at 92% 10%,rgba(255,54,95,.18),transparent 30rem),
    radial-gradient(circle at 50% 100%,rgba(59,130,246,.13),transparent 34rem),
    linear-gradient(140deg,var(--ui-bg),var(--ui-bg-2) 46%,#050713)!important;
  font-family:'Plus Jakarta Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
}
a{color:inherit;text-decoration:none!important;transition:color .2s ease,transform .22s ease,opacity .22s ease}
img{max-width:100%}
::selection{background:rgba(255,189,89,.35);color:#fff}
.container,.container-fluid,.max-w-7xl{position:relative}
/* NAVBAR */
header{margin-bottom:72px!important}
header nav,.navbar,.navbar-custom,.topbar,.topnav,.bg-thema{
  background:rgba(7,11,24,.68)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-left:0!important;border-right:0!important;
  backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 16px 44px rgba(0,0,0,.28)!important;
}
header nav .h-16{height:72px!important}
header img[alt="logo"],header img[alt="Logo"]{filter:drop-shadow(0 10px 22px rgba(255,122,24,.24))}
header p{color:var(--ui-muted)!important;font-style:normal!important;font-weight:700!important}
.navbar-toggler,header button{border-radius:16px!important;color:#fff!important}
#showSearchButton,.navbar-toggler{width:42px;height:42px;display:grid!important;place-items:center;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important}
#showSearchButton:hover,.navbar-toggler:hover{background:rgba(255,122,24,.2)!important;transform:translateY(-1px)}
.css-1wpp9sf,.btn-light,.btn-patih{
  color:#111827!important;background:linear-gradient(135deg,var(--ui-brand-2),var(--ui-brand))!important;border:0!important;
  box-shadow:0 16px 34px rgba(255,122,24,.28)!important;border-radius:999px!important;
}
/* HERO / BANNER */
section.relative.mb-4{margin-top:-18px!important;padding:22px 12px!important;min-height:auto!important;box-shadow:none!important;overflow:hidden}
.my-swiper,.swiper,.carousel{border-radius:32px!important;overflow:hidden;box-shadow:var(--ui-shadow)!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.06)}
.my-swiper .swiper-slide img{aspect-ratio:21/8;object-fit:cover;border-radius:32px!important;filter:saturate(1.08) contrast(1.02)}
.swiper-pagination-bullet{background:#fff!important;opacity:.45!important}.swiper-pagination-bullet-active{opacity:1!important;background:linear-gradient(135deg,var(--ui-brand-2),var(--ui-brand))!important;width:26px!important;border-radius:999px!important}
/* TITLES */
h1,h2,h3,h4,h5,.card-title{letter-spacing:-.02em;color:#fff!important}
h3.mb-6,.wrapper>h3,.card-header h5{
  position:relative;display:flex;align-items:center;gap:.65rem;margin-top:28px!important;margin-bottom:18px!important;
  font-size:clamp(1.05rem,2vw,1.45rem)!important;text-transform:none!important;letter-spacing:-.015em!important;font-weight:900!important;
}
h3.mb-6:after,.wrapper>h3:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(255,189,89,.6),transparent)}
/* GLASS PANELS */
.card,.modal-content,.dropdown-menu,.css-18exuzb,.offcanvas,.table,.dataTables_wrapper,.bg-white,.bg-light,.bg-gray-300,.bg-gray-600\/75{
  border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
.card,.modal-content,.dropdown-menu,.css-18exuzb,.offcanvas,.bg-gray-300,.bg-gray-600\/75{
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
  color:var(--ui-text)!important;backdrop-filter:blur(18px) saturate(1.15);
}
.card-header{background:rgba(255,255,255,.06)!important;border-bottom:1px solid var(--ui-line)!important;border-radius:var(--ui-radius) var(--ui-radius) 0 0!important}
.text-gray-600,.text-gray-500,.text-muted,small,p{color:var(--ui-muted)}
/* POPULAR HORIZONTAL CARDS */
.bg-featured-game-card{
  border:1px solid var(--ui-line)!important;border-radius:22px!important;min-height:108px!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,189,89,.18),transparent 46%),
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24)!important;isolation:isolate;
}
.bg-featured-game-card:before,.featured-game-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-120%);transition:transform .7s ease}
.bg-featured-game-card:hover:before,.featured-game-card:hover:before{transform:translateX(120%)}
.bg-featured-game-card:hover,.featured-game-card:hover{transform:translateY(-6px) scale(1.01)!important;border-color:rgba(255,189,89,.55)!important;box-shadow:var(--ui-glow)!important}
.bg-featured-game-card .h-24{height:104px!important;width:104px!important;border-radius:20px!important;overflow:hidden;margin:10px;box-shadow:0 14px 26px rgba(0,0,0,.34)}
.bg-featured-game-card img{object-fit:cover!important;border-radius:20px!important}
.bg-featured-game-card p:first-child{font-size:.95rem!important;width:auto!important;max-width:170px;color:#fff!important;font-weight:900!important;line-height:1.2!important}
.bg-featured-game-card p:last-child{color:var(--ui-brand-2)!important;font-weight:700!important}
/* PRODUCT GRID CARDS */
.featured-game-card{
  border:1px solid var(--ui-line)!important;border-radius:24px!important;background:rgba(255,255,255,.07)!important;box-shadow:0 18px 45px rgba(0,0,0,.26)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;isolation:isolate;
}
.featured-game-card .blur-sharp{overflow:hidden;border-radius:24px!important;background:rgba(255,255,255,.06)}
.featured-game-card img{transition:transform .5s ease,filter .5s ease!important;filter:saturate(1.08)}
.featured-game-card:hover img{transform:scale(1.08)!important;filter:saturate(1.18) brightness(1.05)}
.featured-game-card .cover{inset:auto 0 0 0!important;margin:0!important;height:58%!important;padding:52px 14px 14px!important;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.56),transparent)!important;z-index:2}
.featured-game-card .cover p:first-child{font-weight:900!important;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.featured-game-card .cover p:last-child{color:#ffd18a!important;font-weight:700!important}
/* TABS */
.nav-pills{gap:.5rem!important;padding:.55rem!important;background:rgba(255,255,255,.07)!important;border:1px solid var(--ui-line)!important;border-radius:999px!important;backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.nav-pills .nav-item{margin:0!important}.btn-category,.nav-pills button,.nav-pills .nav-link{
  color:var(--ui-muted)!important;border:0!important;border-radius:999px!important;background:transparent!important;padding:.72rem 1rem!important;font-weight:900!important;white-space:nowrap;
}
.btn-category.active,.nav-pills button.active,.nav-pills .nav-link.active{color:#121826!important;background:linear-gradient(135deg,var(--ui-brand-2),var(--ui-brand))!important;box-shadow:0 12px 26px rgba(255,122,24,.28)!important}
/* FORMS / ORDER PAGE */
.form-control,.form-select,input,select,textarea,#searchInput{
  color:#fff!important;background:rgba(255,255,255,.085)!important;border:1px solid var(--ui-line)!important;border-radius:18px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.16)!important;outline:none!important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:rgba(226,232,240,.62)!important}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus,#searchInput:focus{border-color:rgba(255,189,89,.72)!important;box-shadow:0 0 0 4px rgba(255,189,89,.16),0 16px 38px rgba(0,0,0,.22)!important;background:rgba(255,255,255,.12)!important}
.btn,button,[type=button],[type=submit],.btn-order,.btn-primary,.btn-secondary,.btn-warning,.btn-voucher{
  border-radius:999px!important;font-weight:900!important;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.btn:hover,button:hover,[type=submit]:hover,.btn-order:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn-primary,.btn-warning,.btn-order,.btn-voucher,.btn-check:checked+.btn-secondary{
  color:#111827!important;background:linear-gradient(135deg,var(--ui-brand-2),var(--ui-brand))!important;border:0!important;box-shadow:0 16px 34px rgba(255,122,24,.28)!important;
}
.btn-secondary{border:1px solid var(--ui-line)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}.btn-secondary:hover{border-color:rgba(255,189,89,.5)!important;background:rgba(255,189,89,.13)!important}
/* TABLES / ADMIN */
.table{overflow:hidden;background:rgba(255,255,255,.96)!important;color:#0f172a!important;border-radius:20px!important}.table thead th{background:#101827!important;color:#fff!important;border:0!important}.table td,.table th{vertical-align:middle!important}.badge{border-radius:999px!important;padding:.45rem .75rem!important;font-weight:800!important}
.page-wrapper,.content-page,.main-content,.vertical-menu,#sidebar-menu,.left-side-menu{background:transparent!important}.side-nav,.sidebar-wrapper{background:rgba(7,11,24,.78)!important;border-right:1px solid var(--ui-line)!important;backdrop-filter:blur(18px)}
/* FOOTER */
footer,.footer{background:rgba(5,7,19,.86)!important;border-top:1px solid var(--ui-line)!important;backdrop-filter:blur(18px);box-shadow:0 -20px 60px rgba(0,0,0,.24)}
/* RESPONSIVE */
@media (max-width:992px){header{margin-bottom:66px!important}.my-swiper .swiper-slide img{aspect-ratio:16/8}.grid{gap:.75rem!important}.featured-game-card .relative.h-56{height:11.8rem!important}.nav-pills{overflow:auto;flex-wrap:nowrap!important;justify-content:flex-start!important}}
@media (max-width:640px){:root{--ui-radius:18px;--ui-radius-sm:14px}body:before{background-size:32px 32px}header nav .h-16{height:64px!important}section.relative.mb-4{padding:12px 8px!important}.my-swiper{border-radius:20px!important}.my-swiper .swiper-slide img{aspect-ratio:16/9;border-radius:20px!important}.bg-featured-game-card .h-24{width:78px!important;height:78px!important;margin:8px}.bg-featured-game-card{min-height:94px!important}.bg-featured-game-card p:first-child{font-size:.78rem!important;max-width:98px}.featured-game-card{border-radius:18px!important}.featured-game-card .blur-sharp{border-radius:18px!important}.featured-game-card .relative.h-56{height:9.8rem!important}.featured-game-card .cover{padding:42px 10px 10px!important}.nav-pills{border-radius:18px!important}.btn-category,.nav-pills button,.nav-pills .nav-link{padding:.58rem .78rem!important;font-size:.78rem!important}.card,.modal-content,.dropdown-menu{border-radius:18px!important}}