/* Global Styles */
    body {
        background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,1)), url('/gambar/THRONE_N_LIBERTY_bg_pembelian.webp');
        background-color: #1b2838;
        color: #c7d5e0;
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }


/* ====== THEME TOKENS ====== */
:root{
  --bg:#0f172a;
  --panel:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.66));
  --text:#e6f1ff;
  --muted:#c8d3f5;
  --line:rgba(99,102,241,.25);
  --chip:rgba(255,255,255,.06);
  --accent1:#00ffe7;
  --accent2:#5a7dff;
  --accent3:#ff4ecd;
}
/* ---- Align breadcrumb items vertically ---- */
:root{ --crumb-h: 34px; }

nav[aria-label="Breadcrumb"] .breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:8px 12px;
}

nav[aria-label="Breadcrumb"] .breadcrumb-item{
  display:inline-flex;          /* penting: jadikan flex */
  align-items:center;           /* center secara vertikal */
  gap:.45rem;
  height:var(--crumb-h);
  line-height:var(--crumb-h);   /* jaga baseline */
}

nav[aria-label="Breadcrumb"] .breadcrumb-item a,
nav[aria-label="Breadcrumb"] .breadcrumb-item.active{
  display:inline-flex;
  align-items:center;
  height:var(--crumb-h);
  line-height:var(--crumb-h);
  padding:0 12px;
  border-radius:999px;
}

/* chip untuk link (Home) */
nav[aria-label="Breadcrumb"] .breadcrumb-item a{
  background:var(--chip, rgba(255,255,255,.06));
}

/* active (Power Leveling) tetap tanpa chip, tapi sejajar */
nav[aria-label="Breadcrumb"] .breadcrumb-item.active{
  background:transparent;
  padding-left:0; padding-right:0;
}

/* separator sejajar juga */
nav[aria-label="Breadcrumb"] .breadcrumb-item + .breadcrumb-item::before{
  content:"›";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--crumb-h);
  line-height:var(--crumb-h);
  margin:0 .25rem;
  color:#7aa2ff; opacity:.8;
}

/* ====== BREADCRUMB ====== */
nav[aria-label="Breadcrumb"] .breadcrumb{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 40px rgba(0,255,231,.06);
  margin-bottom:18px;
}

.breadcrumb-item{
  color:#a7b3d1;
  font-weight:600;
}
.breadcrumb-item + .breadcrumb-item::before{
  content:"›";
  color:#7aa2ff;
  opacity:.75;
  padding:0 .35rem;
}
.breadcrumb-item a{
  display:inline-block;
  color:var(--text);
  text-decoration:none;
  background:var(--chip);
  padding:6px 12px;
  border-radius:999px;
  position:relative;
  transition:transform .18s ease, filter .18s ease, background .18s ease;
  outline: none;
}
.breadcrumb-item a::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  border-radius:2px;
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.breadcrumb-item a:hover::after,
.breadcrumb-item a:focus-visible::after{ transform:scaleX(1); }
.breadcrumb-item.active{ color:#94a3c6; }

/* ====== PAGE INTRO (center, glow) ====== */
/* 2) Hilangkan batas 960px pada .page-intro */
.page-intro{
  max-width: none;               /* jangan batasi lebar sendiri */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* selaraskan padding dengan gutter Bootstrap */
  padding-left: var(--bs-gutter-x, 12px);
  padding-right: var(--bs-gutter-x, 12px);
}

/* 3) (Fallback bila var Bootstrap tidak ada) samakan breakpoint container */
@media (min-width: 576px){ .page-intro.container{ max-width:540px; } }
@media (min-width: 768px){ .page-intro.container{ max-width:720px; } }
@media (min-width: 992px){ .page-intro.container{ max-width:960px; } }
@media (min-width:1200px){ .page-intro.container{ max-width:1140px; } }
@media (min-width:1400px){ .page-intro.container{ max-width:1320px; } }
.page-intro::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(0,255,231,.35), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(90,125,255,.30), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, rgba(255,78,205,.30), transparent 70%);
  filter:blur(40px);
  opacity:.7;
  z-index:-1;
  animation:piFloat 18s linear infinite;
}
@keyframes piFloat{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6%) rotate(18deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.page-intro h1{
  margin:0 0 10px;
  font-family:'Exo 2', system-ui, sans-serif;
  font-weight:800;
  line-height:1.12;
  letter-spacing:.3px;
  font-size:clamp(28px,4.2vw,42px);
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 .6px rgba(255,255,255,.2);
}
.page-intro p{
  margin:8px auto 0;
  max-width:60ch;
  font-size:clamp(14px,1.7vw,18px);
  line-height:1.6;
  color:var(--muted);
}
.page-intro::after{
  content:"";
  display:block;
  height:2px; width:min(220px,50%);
  margin:clamp(12px,2vw,18px) auto 0;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  border-radius:999px; opacity:.7;
}

/* ==== FAQ: kembalikan perilaku .container agar melebar seperti container lain ==== */
#pl-faq.container{
  display: block;                 /* batalkan display:flex dari .container global */
  width: 100%;
  padding-left: var(--bs-gutter-x, 12px);
  padding-right: var(--bs-gutter-x, 12px);
}

/* Panel & grid isi memenuhi lebar container */
#pl-faq .faq-panel{ width: 100%; }
#pl-faq .faq-grid{
  display: grid;
  gap: 12px;
}

/* Kolom grid di layar besar — tetap memanjang seperti sebelumnya */
@media (min-width: 1200px){  /* xl+ */
  #pl-faq .faq-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) and (max-width: 1199.98px){  /* lg */
  #pl-faq .faq-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 991.98px){   /* md */
  #pl-faq .faq-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px){                           /* sm */
  #pl-faq .faq-grid{ grid-template-columns: 1fr; }
}

#pl-faq .faq-panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(14px,2.2vw,22px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 40px rgba(0,255,231,.05);
  overflow: hidden;
}

/* Judul di dalam kotak */
#pl-faq .faq-title{
  display:inline-block;
  margin:0 0 12px 0;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--chip);
  font-weight:800;
  letter-spacing:.2px;
  /* gradient text seperti tema */
  background-image: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Grid berisi kotak-kotak details */
#pl-faq .faq-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* Kotak details (override dari style lama agar rapi dalam grid) */
#pl-faq .faq-grid details{
  margin:0;                                  /* gunakan gap grid */
  background: rgba(15,23,42,.82);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.22), 0 0 32px rgba(0,255,231,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#pl-faq .faq-grid details:hover{ transform:translateY(-1px); }

/* Summary sebagai “pill” dengan ikon ? */
#pl-faq .faq-grid summary{
  list-style:none; cursor:pointer; user-select:none; outline:none;
  padding:14px 16px 14px 50px; position:relative; color:var(--text);
}
#pl-faq .faq-grid summary::-webkit-details-marker{ display:none; }
#pl-faq .faq-grid summary::before{
  content:"?"; font-weight:900; width:26px; height:26px;
  display:grid; place-items:center;
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#08101f; background:linear-gradient(135deg,var(--accent1),var(--accent2));
  border-radius:8px; box-shadow:0 0 14px rgba(0,255,231,.28);
}
#pl-faq .faq-grid summary::after{
  content:"▾"; position:absolute; right:12px; top:50%;
  transform:translateY(-50%) rotate(0); transition:transform .2s ease;
  color:#9db0ff; font-size:18px;
}
#pl-faq .faq-grid details[open] summary::after{ transform:translateY(-50%) rotate(180deg); }

/* Isi jawaban */
#pl-faq .faq-grid p{
  margin:0; padding:0 16px 14px 50px; color:var(--muted);
}

/* Responsif kecil: rapatkan sedikit */
@media (max-width: 480px){
  #pl-faq .faq-grid{ grid-template-columns:1fr; gap:10px; }
  #pl-faq .faq-title{ padding:7px 12px; }
}


/* ====== Accessibility: reduce motion ====== */
@media (prefers-reduced-motion: reduce){
  .page-intro::before{ animation:none; }
  .breadcrumb-item a, #pl-faq details{ transition:none; }
}
/* === Page-intro: garis vertikal di tengah (desktop), horizontal di bawah (mobile) === */
.page-intro{ position: relative; }

/* Desktop / layar lebar: dua kolom + garis vertikal di tengah */
@media (min-width: 992px){
  .page-intro{
    display: flex;                 /* pastikan dua kolom */
    align-items: center;
    column-gap: clamp(16px, 4vw, 64px);
  }

  /* Pindahkan garis ke tengah (VERTIKAL) */
  .page-intro::after{
    content:"";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 2px;                    /* ketebalan garis */
    height: 70%;                   /* tinggi garis, silakan sesuaikan */
    background: linear-gradient(180deg, var(--accent1), var(--accent2), var(--accent3));
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(90,125,255,.25);
    opacity: .9;
    /* override divider lama */
    margin: 0 !important;
  }

  /* Biar teks rapi di kolom kanan */
  .page-intro > p{
    margin: 0;
    max-width: 60ch;
    text-align: left;              /* ganti ke left jika mau */
  }
  .page-intro > h1{ margin: 0; }
}

/* Mobile / tablet: balik jadi garis HORIZONTAL di bawah judul seperti semula */
@media (max-width: 991.98px){
  .page-intro{ display: block; }
  .page-intro::after{
    content:"";
    position: static;              /* bukan absolute */
    display: block;
    width: min(220px, 50%);
    height: 2px;
    margin: clamp(12px,2vw,18px) auto 0;
    background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
    border-radius: 999px;
    opacity: .7;
    box-shadow: none;
  }
}





    /* ---------- Cyberpunk Sidebar ---------- */
    .futuristic-sidebar {
        width: 270px;
        min-height: 100vh;
        background: #000;
        font-family: 'Inter', 'Roboto', Arial, sans-serif;
        color: #fff;
        padding: 0;
        box-shadow: 0 4px 32px #04091a33;
    }
    .futuristic-sidebar .logo {
        font-size: 1.8rem;
        font-weight: bold;
        color: #ffe15a;
        letter-spacing: 0.08em;
        padding: 28px 24px 16px 28px;
        border-bottom: 1px solid #222;
        display: flex;
        align-items: center;
        gap: 11px;
    }
    .futuristic-sidebar nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .futuristic-sidebar nav li {
        margin-bottom: 4px;
    }
    .futuristic-sidebar nav > ul > li > a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px 12px 36px;
        border-radius: 16px;
        color: #d0e8f7;
        font-size: 1.08rem;
        font-weight: 600;
        background: none;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.2s, color 0.18s, box-shadow 0.16s;
    }
    .futuristic-sidebar nav > ul > li > a:hover,
    .futuristic-sidebar nav > ul > li.active > a {
        background: linear-gradient(90deg, #20e2d7 20%, #41e1ff 90%);
        color: #181f2c;
    }
    .futuristic-sidebar nav > ul > li > a i {
        font-size: 1.2em;
        color: #20e2d7;
        transition: color 0.18s;
        min-width: 21px;
    }
    .futuristic-sidebar nav ul.submenu {
        background: rgba(35, 40, 65, 0.74);
        backdrop-filter: blur(7px);
        border-radius: 18px;
        margin: 4px 24px 6px 56px;
        padding: 8px 0;
        box-shadow: 0 1px 12px #0008;
        border-left: 2px solid #20e2d7;
        display: block;
    }
    .futuristic-sidebar nav ul.submenu li a {
        display: block;
        font-family: 'Inter', 'Roboto', Arial, sans-serif;
        font-size: 1rem;
        color: #b2d2ea;
        font-weight: 500;
        border-radius: 8px;
        padding: 4px 9px 4px 12px;
        background: none;
        margin: 1px 0;
        transition: background 0.16s, color 0.15s;
    }
    .futuristic-sidebar nav ul.submenu li a:hover,
    .futuristic-sidebar nav ul.submenu li a:focus {
        background: linear-gradient(90deg, #20e2d7 40%, #41e1ff 100%);
        color: #181f2c;
    }

    /* Container Dua Kolom */
    .container {
        display: flex;
        width: 100%;
        background: rgba(0,0,0,0.6);
    }
    /* main area */
    .main {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
    }
    .main h1 {
        margin-bottom: 1rem;
        color: #FFD700;             /* ganti ke warna emas */
        font-size: 1.8rem;
    }

    /* content sections */
    .content { display: none; }
    .content.active { display: block; }

    /* cards grid */
    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
    .card {
        padding-left: 0.5rem;   /* geser konten lebih ke kiri */
        position: relative;
        overflow: hidden;
        background: #1e1e1e;
        border-radius: 12px;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }
    
    /* 1) background kotak_gold_wow.webp */
    .card--gold {
        background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,1)), url('/gambar/kotak_gold_wow.webp') center/cover no-repeat;
        background-color: #1b2838;
        color: #c7d5e0;
    }
    
    /* 1) Baseline styling */
    .card img {
        display: block;
        margin: 0;              /* buang margin auto */
        margin-left: -15px;     /* sesuaikan angka untuk geseran */
        width: 115%;
        border-radius: 8px;
        object-fit: cover;
        position: relative;
        z-index: 10;
        
        /* buat transisi halus saat hover in/out */
        transition: transform 0.3s ease-in-out;
        transform-origin: center center;
    }

    /* 2) Definisi keyframes “swing” */
    @keyframes swing {
        0%   { transform: scale(1.1) rotateY(-8deg); }
        80%  { transform: scale(1.1) rotateY(8deg);  }
        130% { transform: scale(1.1) rotateY(-8deg); }
    }

    /* 3) Ketika mouse di atas gambar, jalankan animasi */
    .card img:hover {
        animation: swing 0.8s ease-in-out infinite;
    }

    .card h3 {
        margin: .75rem 0 .5rem;
        font-size: 1.1rem;
    }
    .card ul {
        margin: 0;
        padding-left: 1.2rem;   /* indentasi bullet */
        list-style: none;
        margin-bottom: .75rem;
    }
    
    /* Besarkan & ubah warna jadi emas dengan glow */
    .card .card-title {
        font-size: 1.3rem;           /* perbesar tulisan */
        color: #FFD700;              /* warna gold */
        font-weight: 700;            /* tebal */
        text-shadow: 
            0 0 2px rgba(255,215,0,0.6),
            0 0 4px rgba(255,215,0,0.4);
        margin-bottom: 0.5rem;
    }
    .card ul li {
        display: flex;
        align-items: center;
        margin-bottom: .4rem;
        color: #bbb;
    }
    .card ul li::before {
        margin-left: -0.6rem;   /* geser bullet ke kiri */
        margin-right: .6rem;
        content: '';
        display: inline-block;
        width: 6px; height: 6px;
        background: #00e676;
        border-radius: 50%;
    }
    .card .price {
        position: relative;
        z-index: 1;          /* cukup kecil, biar di bawah gambar */
        color: #FFD700;
        font-size: 1.4rem;
        margin-bottom: .75rem;
        text-align: center;
    }
    .card .btn {
        position: relative;
        z-index: 1;          /* cukup kecil, biar di bawah gambar */
        text-decoration: none;
        text-align: center;
        padding: .6rem 0;
        border-radius: 8px;
        background: #913cff;
        font-weight: 600;
        transition: background .2s;
        color: #fff;
    }
    .card .btn:hover {
        background: #6829e0;
    }

    /* Modal base (hidden by default; add `.show` to display) */
    /* ======================= MODAL ORDER BASE ======================= */
    #order-modal.modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    #order-modal.modal.show { display: flex; }

    /* ======================= MODAL WINDOW ======================= */
    #order-modal .modal-content {
        background: #1a1a1a;
        border-radius: 12px;
        max-width: 900px;
        width: 90%;
        position: relative;
    }

    /* ======================= CLOSE BUTTON ======================= */
    #order-modal .close {
        position: absolute;
        top: 12px;
        right: 16px;
        font-size: 2rem;
        color: #fff;
        text-shadow: 0 0 4px rgba(0,0,0,0.8);
        cursor: pointer;
        z-index: 10;
    }

    /* ======================= TWO COLUMN LAYOUT ======================= */
    #order-modal .modal-body {
        display: flex;
    }

    /* ======================= LEFT PANEL ======================= */
    #order-modal .left-panel {
        flex: 1;
        background: #121212;
        padding: 1.5rem;
        color: #fff;
    }
    #order-modal .left-panel h3 {
        margin: 0 0 1rem 0;
        font-size: 1.2rem;
    }

    /* ======================= INPUT GROUP ======================= */
    #order-modal .inputs-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    #order-modal .inputs-group label,
    #order-modal .region label,
    #order-modal .form-label {
        gap: 0.5rem;
        color: #bbb;
        font-size: 0.9rem;
    }
    #order-modal .inputs-group input,
    #order-modal .form-input,
    #order-modal select {
        width: 100%;
        padding: 0.5rem;
        background: #222;
        border: 1px solid #333;
        border-radius: 4px;
        color: #fff;
    }
    #order-modal .inputs-group input {
        width: 3rem;
        padding: 0.4rem;
        text-align: center;
    }
    #order-modal .inputs-group span {
        color: #fff;
        font-size: 1.2rem;
    }
    .right-panel p.total {
        font-weight: 700;
        font-size: 1.15rem;
    }
    .paynote{
        margin-top:-6px;
        font-size:.6rem;
        opacity:.8;
    }

    /* Remove spinner number */
    .inputs-group input[type="number"]::-webkit-outer-spin-button,
    .inputs-group input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .inputs-group input[type="number"] { -moz-appearance: textfield; }

    /* ======================= SLIDER & TICKS ======================= */
    #order-modal .slider-wrap {
        position: relative;
        height: 30px;
        margin-bottom: 1.5rem;
        padding-bottom: 2rem;
    }
    #order-modal .slider-track {
        position: absolute;
        top: 50%; left: 0;
        transform: translateY(-50%);
        height: 4px;
        background: #7f3cff;
        border-radius: 2px;
        width: 100%;
        z-index: 0;
    }
    #order-modal .slider-wrap input[type="range"] {
        position: absolute;
        top: 50%; left: 0;
        width: 100%;
        transform: translateY(-50%);
        -webkit-appearance: none;
        background: transparent;
        pointer-events: none;
        z-index: 2;
    }
    #order-modal .slider-wrap input[type="range"]::-webkit-slider-runnable-track {
        height: 4px;
        background: #7f3cff;
        border-radius: 2px;
    }
    #order-modal .slider-wrap input[type="range"]::-webkit-slider-thumb {
        z-index: 3;
        pointer-events: all;
        -webkit-appearance: none;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: #7f3cff;
        cursor: pointer;
        margin-top: -5px;
    }
    #order-modal .slider-wrap input[type="range"]:hover::-webkit-slider-thumb {
        background: #9d5cff;
    }
    .slider-ticks {
        position: absolute;
        bottom: -10px;
        left: -5px; right: -5px;
        display: grid;
        grid-template-columns: repeat(var(--tick-count), 1fr);
        font-size: 0.75rem;
        color: #ccc;
        user-select: none;
        pointer-events: none;
        z-index: 4;
    }
    .slider-ticks span {
        flex: 1;
        text-align: center;
    }
    .slider-ticks.two-ticks {
        display: flex;
        justify-content: space-between;
    }
    .slider-ticks.two-ticks span { flex: none; text-align: left; }
    .slider-ticks.two-ticks span:last-child { text-align: right; }

    /* ======================= COMPLETION METHOD ======================= */
    #order-modal .method {
        margin-bottom: 1.5rem;
    }
    #order-modal .method > label:first-child {
        display: block;
        margin-bottom: 0.5rem;
    }
    #order-modal .method label {
        margin-right: 1rem;
        color: #fff;
        font-size: 0.95rem;
        cursor: pointer;
    }

    /* ======================= REGION/SERVER/FACTION ======================= */
    #order-modal .region {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    /* ======================= RIGHT PANEL ======================= */
    #order-modal .right-panel {
        flex: 1;
        background: linear-gradient(135deg, #4facfe 0%, #003087 100%);
        padding: 1.5rem;
        color: #fff;
    }
    #order-modal .right-panel h3 {
        margin: 0 0 1rem 0;
        font-size: 1.2rem;
    }
    #order-modal .right-panel p {
        margin: 0.5rem 0;
    }
    #order-modal .right-panel .total {
        margin-top: 1rem;
        font-size: 1.4rem;
    }

    /* ======================= PAYPAL BUTTON CONTAINER ======================= */
    #paypal-button-container { margin-top: 1rem; }

    /* ======================= MODAL OVERLAY (SUCESS, ETC) ======================= */
    /* overlay gelap */
    .modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.6);
        display: none;             /* sembunyikan default */
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .modal-overlay.active {
        display: flex;
    }

    /* container utama modal (background & border luar) */
    .modal-container {
        display: inline-block;     /* lebar mengikuti isi */
        width: auto;               /* jangan pakai fixed width */
        max-width: 90%;            /* responsif */
        background: #010c24;       /* biru gelap */
        border: 1px solid #4DA6FF; /* border biru terang */
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        text-align: center;
        position: relative;
    }

    /* judul di luar kotak detail */
    .modal-container .modal-header {
        margin: 0 0 8px;
        font-size: 2.1rem;
        color: #FFD700;
        font-weight: 500;
        justify-content: center;
    }

    /* subjudul/keterangan singkat */
    .modal-container .modal-subtitle {
        margin: 0 0 16px;
        font-size: 0.95rem;
        color: #E0E0E0;
    }

    /* kotak detail transaksi sebagai table untuk mencegah wrap */
    /* kotak detail transaksi */
    .modal-container .modal-details {
        background: #19354B;            /* lebih gelap */
        border: 1px solid #4DA6FF;
        border-radius: 6px;
        padding: 16px;
        margin-bottom: 20px;
    }

    /* setiap baris jadi flex, bukan table */
    .modal-container .modal-details p {
        display: flex;
        align-items: center;
        margin: 6px 0;
    }

    /* label tetap lebar, dengan sedikit kanan */
    .modal-container .modal-details p strong {
        display: inline-block;
        width: 120px;
        margin-right: 8px;
        font-weight: 500;
        color: #B0DFFF;
    }

    /* nilai tidak akan wrap, dan langsung di sebelah label */
    .modal-container .modal-details p span {
        white-space: nowrap;
        color: #FFFFFF;
    }

    /* tombol Return to Homepage */
    .modal-container .modal-button {
        display: inline-block;
        background: #4DA6FF;
        border: none;
        border-radius: 4px;
        color: #FFFFFF;
        padding: 10px 24px;
        font-size: 0.95rem;
        cursor: pointer;
        white-space: nowrap;       /* teks tombol satu baris */
    }
    .modal-container .modal-button:hover {
        opacity: 0.9;
    }

    /* ======================= ERROR MESSAGE (CUSTOM) ======================= */
    #form-error-msg {
        color: #ffa600;
        background: transparent;
        border: none;
        border-radius: 0;
        margin-bottom: 10px;
        padding: 0 2px 6px 2px;
        font-weight: 600;
        display: none;
        font-size: 1em;
    }

    .btn-paypal {
        width: 100%;
        min-width: 0;
        background: #ffc439 !important;    /* warna kuning PayPal */
        color: #222 !important;            /* warna huruf */
        font-weight: bold;
        border: none;
        border-radius: 6px;
        box-shadow: 0 1.5px 0 #ffe25f, 0 1.5px 4px #3331;
        transition: box-shadow 0.15s, filter 0.15s;
        /* Ukuran tombol seperti PayPal: */
        padding: 12px 0;        /* tinggi dan jarak horizontal proporsional */
        font-size: 1.07rem;
        letter-spacing: 0.2px;
        display: block;         /* agar full width dalam parent */
        margin: 0 auto;         /* tengah jika tidak 100% */
    }
    .btn-paypal:hover, .btn-paypal:focus {
        filter: brightness(1.06);
        box-shadow: 0 2.5px 0 #ffe25f, 0 2.5px 8px #3333;
        color: #222 !important;
        text-decoration: none;
    }

    .futuristic-sidebar nav a.active {
        color: #00ffe7;
        font-weight: bold;
        background: #22284c;
        border-radius: 8px;
    }
    .futuristic-sidebar li.opened > .submenu { display: block; }

    /* Responsive Styles */
    @media (max-width: 768px) {
        /* Sidebar adjustments */
        .futuristic-sidebar {
            width: 100%;
            min-height: auto;
            box-shadow: none;
        }
        .futuristic-sidebar .logo {
            font-size: 1.5rem;
            padding: 20px;
        }
        .futuristic-sidebar nav > ul > li > a {
            padding: 10px 20px;
            font-size: 1rem;
        }
        .futuristic-sidebar nav ul.submenu {
            margin: 4px 20px 6px 40px;
        }

        /* Container and Main */
        .container {
            flex-direction: column;
        }
        .main {
            padding: 1rem;
        }
        .main h1 {
            font-size: 1.5rem;
        }

        /* Cards */
        .cards {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.75rem;
        }
        .card {
            padding: 0.75rem;
        }
        .card img {
            width: 110%;
            margin-left: -10px;
        }
        .card .card-title {
            font-size: 1.1rem;
        }
        .card .price {
            font-size: 1.2rem;
        }
        .card .btn {
            padding: 0.5rem 0;
        }

        /* Modal */
        #order-modal .modal-content {
            max-width: 95%;
            max-height: 90vh;
            overflow-y: auto;
        }
        #order-modal .modal-body {
            flex-direction: column;
        }
        #order-modal .left-panel,
        #order-modal .right-panel {
            padding: 1rem;
        }
        #order-modal .region {
            grid-template-columns: 1fr;
        }
        #order-modal .inputs-group {
            flex-wrap: wrap;
        }
        #order-modal .inputs-group input {
            width: 2.5rem;
        }
        #order-modal .close {
            font-size: 1.8rem;
            top: 8px;
            right: 12px;
        }
        #order-modal .right-panel h3,
        #order-modal .left-panel h3 {
            font-size: 1.1rem;
        }
        #order-modal .right-panel .total {
            font-size: 1.2rem;
        }

        /* Modal Overlay */
        .modal-container {
            padding: 16px;
        }
        .modal-container .modal-header {
            font-size: 1.8rem;
        }
        .modal-container .modal-subtitle {
            font-size: 0.85rem;
        }
        .modal-container .modal-details p strong {
            width: 100px;
        }
        .modal-container .modal-button {
            padding: 8px 20px;
            font-size: 0.9rem;
        }

        /* Other adjustments */
        body {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        /* Further adjustments for smaller screens */
        .cards {
            grid-template-columns: 1fr;
        }
        .card img {
            width: 100%;
            margin-left: 0;
        }
        .main {
            padding: 0.75rem;
        }
        .futuristic-sidebar nav > ul > li > a {
            padding: 8px 15px;
            font-size: 0.95rem;
        }
        #order-modal .inputs-group input {
            width: 2rem;
        }
        #order-modal .slider-wrap input[type="range"]::-webkit-slider-thumb {
            width: 12px;
            height: 12px;
        }
    }
    
    
    
    
    /* ======================= MULTI-MODAL SUPPORT ======================= */
/* Base overlay */
.order-modal.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.order-modal.modal.show { display: flex; }

/* Window */
.order-modal .modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  max-width: 900px;
  width: 90%;
  position: relative;
}

/* Close */
.order-modal .close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  cursor: pointer;
  z-index: 10;
}

/* Body split */
.order-modal .modal-body { display: flex; }
.order-modal .left-panel {
  flex: 1; background:#121212; padding:1.5rem; color:#fff;
}
.order-modal .right-panel {
  flex: 1; background: linear-gradient(135deg, #4facfe 0%, #003087 100%);
  padding:1.5rem; color:#fff;
}
.order-modal .right-panel h3 { margin:0 0 1rem 0; font-size:1.2rem; }
.order-modal .right-panel p { margin: .5rem 0; }
.order-modal .right-panel .total { margin-top:1rem; font-size:1.4rem; }

.order-modal .inputs-group {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
}
.order-modal .inputs-group input,
.order-modal .form-input,
.order-modal select {
  width:100%; padding:.5rem; background:#222; border:1px solid #333; border-radius:4px; color:#fff;
}
.order-modal .inputs-group input { width:3rem; padding:.4rem; text-align:center; }
.order-modal .inputs-group span { color:#fff; font-size:1.2rem; }

.order-modal .method { margin-bottom:1.5rem; }
.order-modal .method > label:first-child { display:block; margin-bottom:.5rem; }
.order-modal .method label { margin-right:1rem; color:#fff; font-size:.95rem; cursor:pointer; }

.order-modal .region {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem;
}

.order-modal .slider-wrap { position:relative; height:30px; margin-bottom:1.5rem; padding-bottom:2rem; }
.order-modal .slider-track { position:absolute; top:50%; left:0; transform:translateY(-50%); height:4px; background:#7f3cff; border-radius:2px; width:100%; z-index:0; }
.order-modal .slider-wrap input[type="range"] {
  position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);
  -webkit-appearance:none; background:transparent; pointer-events:none; z-index:2;
}
.order-modal .slider-wrap input[type="range"]::-webkit-slider-runnable-track { height:4px; background:#7f3cff; border-radius:2px; }
.order-modal .slider-wrap input[type="range"]::-webkit-slider-thumb {
  z-index:3; pointer-events:all; -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#7f3cff; cursor:pointer; margin-top:-5px;
}
.order-modal .slider-wrap input[type="range"]:hover::-webkit-slider-thumb { background:#9d5cff; }
.order-modal .slider-ticks {
  position:absolute; bottom:-10px; left:-5px; right:-5px;
  display:grid; grid-template-columns: repeat(var(--tick-count), 1fr);
  font-size:.75rem; color:#ccc; user-select:none; pointer-events:none; z-index:4;
}
.order-modal .slider-ticks span { text-align:center; }
.order-modal .slider-ticks.two-ticks { display:flex; justify-content:space-between; }
.order-modal .slider-ticks.two-ticks span { flex:none; text-align:left; }
.order-modal .slider-ticks.two-ticks span:last-child { text-align:right; }

.order-modal .paynote{ margin-top:-6px; font-size:.6rem; opacity:.8; }

/* Form error (pakai selector lama juga agar kompatibel) */
#form-error-msg,
#form-error-msg--level,
#form-error-msg--rep,
#form-error-msg--prof,
.order-modal [data-field="form-error"] {
  color:#ffa600; background:transparent; border:none; border-radius:0; margin-bottom:10px; padding:0 2px 6px 2px; font-weight:600; display:none; font-size:1em;
}

/* PayPal container */
.order-modal .paypal-button-container { margin-top:1rem; }

/* Responsive */
@media (max-width: 768px) {
  .order-modal .modal-content { max-width:95%; max-height:90vh; overflow-y:auto; }
  .order-modal .modal-body { flex-direction:column; }
  .order-modal .left-panel, .order-modal .right-panel { padding:1rem; }
  .order-modal .region { grid-template-columns:1fr; }
  .order-modal .inputs-group { flex-wrap:wrap; }
  .order-modal .inputs-group input { width:2.5rem; }
  .order-modal .close { font-size:1.8rem; top:8px; right:12px; }
  .order-modal .right-panel .total { font-size:1.2rem; }
}
@media (max-width: 480px) {
  .order-modal .inputs-group input { width:2rem; }
  .order-modal .slider-wrap input[type="range"]::-webkit-slider-thumb { width:12px; height:12px; }
}