/* Global typography system */
:root{
  --pk-font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html,
body{
  font-family:var(--pk-font-sans)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* PASARAKUN DESIGN SYSTEM V1 */

:root{
  --pk-bg:#101113;
  --pk-surface:#15171B;
  --pk-card:#18181B;
  --pk-card-hover:#1F2228;

  --pk-border:rgba(255,255,255,.06);
  --pk-border-hover:rgba(255,255,255,.11);

  --pk-text:#F4F4F5;
  --pk-text-muted:#A1A1AA;

  --pk-primary:#3B82F6;
  --pk-primary-hover:#2563EB;

  --pk-success:#22C55E;
  --pk-warning:#F59E0B;
  --pk-danger:#EF4444;

  --pk-radius-btn:14px;
  --pk-radius-input:14px;
  --pk-radius-card:20px;
  --pk-radius-hero:24px;
  --pk-radius-modal:22px;

  --pk-shadow:0 12px 28px rgba(0,0,0,.22);
  --pk-shadow-hover:0 20px 46px rgba(0,0,0,.30);
}

/* Base dark surface */
html.dark body{
  background:var(--pk-bg);
  color:var(--pk-text);
}

/* Reusable components */
.pkds-card{
  background:var(--pk-card);
  border:1px solid var(--pk-border);
  border-radius:var(--pk-radius-card);
  box-shadow:var(--pk-shadow);
}

.pkds-card:hover{
  background:var(--pk-card-hover);
  border-color:var(--pk-border-hover);
  box-shadow:var(--pk-shadow-hover);
}

.pkds-input,
.pkds-select{
  background:var(--pk-card);
  border:1px solid var(--pk-border);
  border-radius:var(--pk-radius-input);
  color:var(--pk-text);
}

.pkds-input:focus,
.pkds-select:focus{
  outline:none;
  border-color:rgba(59,130,246,.45);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.pkds-btn-primary{
  background:var(--pk-primary);
  color:#fff;
  border-radius:var(--pk-radius-btn);
  transition:.18s ease;
}

.pkds-btn-primary:hover{
  background:var(--pk-primary-hover);
}

.pkds-muted{
  color:var(--pk-text-muted);
}

/* Navbar soft dark surface */
header,
nav.pk-navbar,
.pk-header,
.site-header{
  background:#111216!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
}

header::before,
header::after{
  opacity:.35!important;
}

/* Navbar graphite fix */
header,
nav.pk-navbar,
.pk-header,
.site-header{
  background:#0f1012!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
}

header::before,
header::after{
  opacity:.18!important;
}

/* Navbar + Footer graphite sync */
header,
.pk-header,
.site-header,
nav.pk-navbar{
  background:#121316!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025)!important;
}

header::before,
header::after{
  opacity:.14!important;
}

footer{
  background:#121316!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

footer h4,
footer .font-semibold{
  color:#f4f4f5!important;
}

footer p,
footer li,
footer a,
footer .text-zinc-500,
footer .text-zinc-400,
footer .text-zinc-600{
  color:#a8adb7!important;
}

footer a:hover{
  color:#ffffff!important;
}

footer .border-t{
  border-color:rgba(255,255,255,.07)!important;
}

footer a.rounded-xl{
  background:#1b1c20!important;
  border-color:rgba(255,255,255,.08)!important;
  color:#f4f4f5!important;
}

footer a.rounded-xl:hover{
  background:#232428!important;
  border-color:rgba(255,255,255,.11)!important;
}

/* =====================================================
   FOOTER POLISH V2
   ===================================================== */

footer{
    background:
        linear-gradient(
            180deg,
            #15161a 0%,
            #131418 100%
        )!important;

    border-top:1px solid rgba(255,255,255,.06)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* sedikit lebih terang agar nyaman dibaca */

footer p,
footer li,
footer a{
    color:#adb2bb!important;
}

footer a:hover{
    color:#ffffff!important;
    transition:.18s ease;
}

/* Judul */

footer h4,
footer .font-semibold{
    color:#f4f4f5!important;
}

/* Tombol download */

footer .rounded-xl{
    background:#1c1d21!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:none!important;
}

footer .rounded-xl:hover{
    background:#25262b!important;
    border-color:rgba(255,255,255,.10)!important;
}

/* Copyright */

footer .border-t{
    border-color:rgba(255,255,255,.055)!important;
}

footer .border-t p{
    color:#868c96!important;
}


/* NAVBAR BG ONLY - sync with breadcrumb tone */
@media(min-width:640px){
  header,
  .pk-header,
  .site-header{
    background:#141519!important;
    border-bottom:1px solid rgba(255,255,255,.055)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.025)!important;
  }
}


/* ===== migrated from header: pk-header-final-merged-css ===== */
/* === pk-mobile-drawer-premium-v1 === */
@media(max-width:767px){
  #navDrawer{
    z-index:2147482000!important;
  }

  #navDrawer .nav-overlay{
    background:rgba(0,0,0,.62)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }

  #navDrawer .nav-panel{
    width:82vw!important;
    max-width:330px!important;
    border-radius:0 26px 26px 0!important;
    background:
      radial-gradient(circle at 0% 0%, rgba(14,165,233,.10), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
      #07080b!important;
    border-right:1px solid rgba(255,255,255,.09)!important;
    box-shadow:26px 0 70px rgba(0,0,0,.58)!important;
    padding:16px!important;
  }

  #navDrawer nav a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    border-radius:14px!important;
    color:#e5e7eb!important;
    font-size:13px!important;
    font-weight:800!important;
    transition:transform .16s ease, background .16s ease, color .16s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  #navDrawer nav a:active{
    transform:scale(.985)!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
  }

  #navDrawer nav p{
    margin-top:12px!important;
    color:#a1a1aa!important;
    font-size:13px!important;
    font-weight:900!important;
  }

  #navDrawer .rounded-2xl.border{
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015))!important;
    border-color:rgba(255,255,255,.085)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  #navClose{
    background:rgba(255,255,255,.045)!important;
    color:#f4f4f5!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }

  #navClose:active{
    transform:scale(.94)!important;
  }
}

/* === pk-header-mobile-home-sync-final === */
@media(max-width:767px){
  header{
    background:#0b0c0f!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.20)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  header .grid{
    height:62px!important;
  }

  #btnNav,
  header button,
  header a[aria-label="Akun"],
  header [aria-label="Notifikasi"],
  header [aria-label="Keranjang"]{
    border-radius:14px!important;
    background:#15161a!important;
    border:1px solid rgba(255,255,255,.075)!important;
    color:#f4f4f5!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    transition:transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  #btnNav:active,
  header button:active,
  header a[aria-label="Akun"]:active,
  header [aria-label="Notifikasi"]:active,
  header [aria-label="Keranjang"]:active{
    transform:scale(.94)!important;
    background:#1d1f25!important;
    border-color:rgba(59,130,246,.28)!important;
    filter:brightness(1.08)!important;
  }

  header a[href="{{ url('/') }}"]{
    padding:4px 6px!important;
    border-radius:16px!important;
  }

  header a[href="{{ url('/') }}"] span.text-xl{
    font-size:18px!important;
    letter-spacing:-.035em!important;
  }
}

/* === pk-drawer-micro-interaction-final === */
@media(max-width:767px){
  #navDrawer .nav-panel{
    -webkit-overflow-scrolling:touch!important;
  }

  #navDrawer .nav-panel *{
    -webkit-tap-highlight-color:transparent!important;
  }

  #navDrawer nav a,
  #navDrawer a,
  #navDrawer button{
    transition:
      transform .15s ease,
      background .15s ease,
      border-color .15s ease,
      box-shadow .15s ease,
      filter .15s ease!important;
  }

  #navDrawer nav a:active,
  #navDrawer a:active,
  #navDrawer button:active{
    transform:scale(.975)!important;
    filter:brightness(1.08)!important;
  }

  #navDrawer nav a:active{
    background:rgba(255,255,255,.055)!important;
    box-shadow:0 0 0 5px rgba(59,130,246,.055)!important;
  }

  #navDrawer a[href*="topup"]:active,
  #navDrawer a[href*="withdraw"]:active{
    box-shadow:0 0 0 5px rgba(59,130,246,.10)!important;
  }

  #navDrawer .overflow-y-auto{
    scrollbar-width:thin!important;
    scrollbar-color:rgba(255,255,255,.22) transparent!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  #navDrawer .overflow-y-auto::-webkit-scrollbar{
    width:4px!important;
  }

  #navDrawer .overflow-y-auto::-webkit-scrollbar-track{
    background:transparent!important;
  }

  #navDrawer .overflow-y-auto::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18)!important;
    border-radius:999px!important;
  }

  #navDrawer .overflow-y-auto::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.28)!important;
  }

  #navClose{
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease!important;
  }

  #navClose:active{
    transform:scale(.92)!important;
    background:rgba(255,255,255,.08)!important;
    box-shadow:0 0 0 5px rgba(255,255,255,.05)!important;
  }
}

/* === pk-drawer-tapped-class-final === */
@media(max-width:767px){
  #navDrawer .pk-drawer-tapped{
    transform:scale(.975)!important;
    filter:brightness(1.08)!important;
  }

  #navDrawer nav a.pk-drawer-tapped{
    background:rgba(255,255,255,.055)!important;
    box-shadow:0 0 0 5px rgba(59,130,246,.055)!important;
  }
}

/* === pk-navbar-click-effect-final === */
header nav a,
header .hidden.md\:flex a,
header button,
header a[aria-label="Akun"],
header [aria-label="Notifikasi"],
header [aria-label="Keranjang"]{
  position:relative!important;
  overflow:hidden!important;
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    filter .14s ease!important;
  -webkit-tap-highlight-color:transparent!important;
}

header nav a:hover,
header .hidden.md\:flex a:hover{
  background:rgba(255,255,255,.045)!important;
  border-radius:12px!important;
}

header nav a:active,
header .hidden.md\:flex a:active,
header button:active,
header a[aria-label="Akun"]:active,
header [aria-label="Notifikasi"]:active,
header [aria-label="Keranjang"]:active{
  transform:scale(.94)!important;
  background:rgba(59,130,246,.13)!important;
  border-color:rgba(59,130,246,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.10)!important;
  filter:brightness(1.08)!important;
}

header nav a::after,
header .hidden.md\:flex a::after,
header button::after,
header a[aria-label="Akun"]::after,
header [aria-label="Notifikasi"]::after,
header [aria-label="Keranjang"]::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:radial-gradient(circle at center, rgba(96,165,250,.22), transparent 58%)!important;
  opacity:0!important;
  transform:scale(.65)!important;
  transition:opacity .18s ease, transform .18s ease!important;
  pointer-events:none!important;
}

header nav a:active::after,
header .hidden.md\:flex a:active::after,
header button:active::after,
header a[aria-label="Akun"]:active::after,
header [aria-label="Notifikasi"]:active::after,
header [aria-label="Keranjang"]:active::after{
  opacity:1!important;
  transform:scale(1)!important;
}

/* === pk-header-badge-visible-final === */
header [aria-label="Notifikasi"],
header [aria-label="Keranjang"],
header a,
header button{
  overflow:visible!important;
}

header .relative,
header [class*="relative"]{
  overflow:visible!important;
}

header .absolute.-top-1,
header .absolute.-right-1,
header .absolute.top-0,
header .absolute.right-0,
header span[class*="-top"],
header span[class*="-right"]{
  z-index:80!important;
  transform:translate(2px,-2px)!important;
  box-shadow:0 0 0 2px #0b0c0f!important;
}

@media(max-width:767px){
  header [aria-label="Notifikasi"],
  header [aria-label="Keranjang"]{
    position:relative!important;
    overflow:visible!important;
  }

  header span[class*="bg-rose"],
  header span[class*="bg-red"]{
    z-index:90!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 5px!important;
    font-size:10px!important;
    line-height:17px!important;
    border-radius:999px!important;
    box-shadow:0 0 0 2px #0b0c0f!important;
  }
}

/* === pk-mobile-drawer-no-gradient-final === */
@media(max-width:767px){
  #navDrawer .nav-panel{
    background:#0F1115!important;
    background-image:none!important;
    border-right:1px solid rgba(255,255,255,.06)!important;
    box-shadow:14px 0 40px rgba(0,0,0,.34)!important;
  }

  #navDrawer .nav-panel::before,
  #navDrawer .nav-panel::after{
    display:none!important;
    content:none!important;
  }

  #navDrawer .rounded-2xl,
  #navDrawer .rounded-3xl{
    background:#171A20!important;
    background-image:none!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }

  #navDrawer nav a,
  #navDrawer a{
    background:transparent!important;
    box-shadow:none!important;
  }

  #navDrawer nav a:hover,
  #navDrawer a:hover{
    background:#171A20!important;
  }

  #navDrawer nav a:active,
  #navDrawer a:active,
  #navDrawer button:active{
    transform:scale(.98)!important;
    background:#1D2128!important;
  }

  #navDrawer .rounded-2xl a[href*="topup"]{
    background:#2563eb!important;
    border-color:rgba(59,130,246,.55)!important;
    color:white!important;
  }

  #navDrawer .rounded-2xl a[href*="withdraw"]{
    background:transparent!important;
    border:1px solid rgba(59,130,246,.55)!important;
    color:#bfdbfe!important;
  }

  #navClose{
    background:#171A20!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }
}

/* === pk-drawer-wdpoint-active-fix-final === */
@media(max-width:767px){
  #navDrawer nav a[href*="wdpoint"],
  #navDrawer nav a[href*="withdraw"]{
    background:transparent!important;
    border-color:transparent!important;
    color:#f4f4f5!important;
    box-shadow:none!important;
  }

  #navDrawer nav a[href*="wdpoint"]:hover,
  #navDrawer nav a[href*="withdraw"]:hover{
    background:#171A20!important;
    border-color:rgba(255,255,255,.08)!important;
  }
}


/* ===== migrated from header: pk-mobile-drawer-final-clean ===== */
@media(max-width:767px){
  #navDrawer .nav-panel{
    width:82vw!important;
    max-width:318px!important;
    padding:12px!important;
    background:#141519!important;
    background-image:none!important;
    border-right:1px solid rgba(255,255,255,.075)!important;
    box-shadow:18px 0 55px rgba(0,0,0,.46)!important;
  }

  #navDrawer .nav-panel > span[aria-hidden="true"],
  #navDrawer .nav-panel::before,
  #navDrawer .nav-panel::after{
    display:none!important;
    content:none!important;
  }

  #navDrawer .nav-overlay{
    background:rgba(0,0,0,.66)!important;
    backdrop-filter:blur(5px)!important;
  }

  #navDrawer .mb-4.flex.items-center{
    padding:2px 1px 9px!important;
    margin-bottom:10px!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
  }

  #navDrawer .mb-4.flex.items-center img{
    width:34px!important;
    height:34px!important;
  }

  #navDrawer .mb-4.flex.items-center span.text-lg{
    font-size:15px!important;
    line-height:1.1!important;
    font-weight:850!important;
    letter-spacing:-.025em!important;
  }

  #navClose{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
    background:#202127!important;
    border:1px solid rgba(255,255,255,.08)!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl{
    padding:13px 14px!important;
    margin-bottom:12px!important;
    border-radius:17px!important;
    background:#1A1B20!important;
    background-image:none!important;
    border:1px solid rgba(255,255,255,.065)!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl::before,
  #navDrawer nav > .mb-3.rounded-2xl::after{
    display:none!important;
    content:none!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl > .flex{
    align-items:center!important;
    gap:10px!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl p{
    padding:0!important;
    margin:0!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl p:first-child{
    margin-bottom:6px!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    color:#8b9098!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl p.text-lg{
    margin-bottom:5px!important;
    font-size:15px!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;
    color:#f4f4f5!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl p.text-\[11px\]{
    font-size:9px!important;
    line-height:1!important;
    color:#8b9098!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl .flex.flex-col{
    gap:7px!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl a{
    min-width:64px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:28px!important;
    font-weight:750!important;
    box-shadow:none!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl a[href*="topup"]{
    background:#2563eb!important;
    border:0!important;
    color:#fff!important;
  }

  #navDrawer nav > .mb-3.rounded-2xl a[href*="withdraw"]{
    background:transparent!important;
    border:1px solid rgba(59,130,246,.45)!important;
    color:#c7d2fe!important;
  }

  #navDrawer nav a{
    display:flex!important;
    align-items:center!important;
    min-height:36px!important;
    padding:8px 11px!important;
    border-radius:13px!important;
    font-size:13px!important;
    font-weight:650!important;
    line-height:1.15!important;
    color:#d4d4d8!important;
    background:transparent!important;
  }

  #navDrawer nav a:hover,
  #navDrawer nav a:active{
    background:#202127!important;
    color:#fff!important;
  }

  #navDrawer nav p{
    padding:12px 11px 5px!important;
    margin:0!important;
    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    color:#71717a!important;
  }

  #navDrawer nav br{
    display:none!important;
  }

  #navDrawer .mt-6.rounded-2xl{
    margin-top:14px!important;
    padding:10px 12px!important;
    background:#18181B!important;
    border:1px solid rgba(255,255,255,.08)!important;
  }
}