/* ==========================================================================
   ZERRA CLOUD — REDESIGN LAYER  (zc-redesign.css)
   Tujuan : menyatukan tampilan index, dashboard, dan portal menjadi satu
            bahasa desain "panel" ala Azure / Vultr — rapi, padat, dan
            efisien ruang, tanpa menyentuh logika JavaScript/PHP apa pun.
   Cara   : file ini dimuat PALING AKHIR sehingga meng-override style lama.
   Catatan: di-scope per halaman lewat class body
            (.zc-index / .dash-body / .zc-portal) agar tidak saling bentrok.
   ========================================================================== */

/* ───────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (palet Azure/Vultr — light)
   Menimpa nama variabel yang dipakai ketiga halaman sekaligus.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Permukaan & garis */
  --bg:             #f3f5f9;
  --surface:        #ffffff;
  --surface-2:      #f4f6fa;
  --surface-hover:  #f4f6fa;
  --border:         #e4e8ef;
  --border-lt:      #eef1f6;
  --border-light:   #eef1f6;
  --border-strong:  #d4dae3;

  /* Teks */
  --text:           #1a2330;
  --text-2:         #54637a;
  --text-secondary: #54637a;
  --text-muted:     #8997a8;
  --text-placeholder:#b4bfcc;

  /* Aksen biru Azure */
  --accent:         #0a6ed1;
  --accent-hover:   #0858a8;
  --accent-hv:      #0858a8;
  --accent-dk:      #0858a8;
  --accent-lt:      #eaf2fb;
  --accent-bd:      #b9d6f2;

  /* Status */
  --success:        #107c41;  --success-lt:#e9f6ee;  --success-bd:#b6e0c4;
  --green:          #107c41;  --green-lt:  #e9f6ee;  --green-bd:  #b6e0c4;
  --warning:        #c77700;  --warning-lt:#fdf4e3;  --warning-bd:#f3d9a4;
  --yellow:         #c77700;  --yellow-lt: #fdf4e3;  --yellow-bd: #f3d9a4;
  --danger:         #d13438;  --danger-lt: #fdecec;  --danger-bd: #f3bcbe;
  --red:            #d13438;  --red-lt:    #fdecec;  --red-bd:    #f3bcbe;
  --info:           #0a6ed1;  --info-lt:   #eaf2fb;  --info-bd:   #b9d6f2;

  /* Radius — Azure cenderung kotak/kecil */
  --radius:         5px;
  --radius-xs:      3px;
  --radius-sm:      5px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-full:    9999px;
  --r:              5px;
  --r-sm:           5px;
  --r-lg:           8px;

  /* Bayangan halus & flat */
  --shadow:         0 1px 2px rgba(16,32,55,.05);
  --shadow-xs:      0 1px 1px rgba(16,32,55,.04);
  --shadow-sm:      0 1px 2px rgba(16,32,55,.05);
  --shadow-md:      0 2px 8px rgba(16,32,55,.07);
  --shadow-xl:      0 12px 28px rgba(16,32,55,.12);

  /* Dimensi panel */
  --sidebar-w:      224px;
  --topbar-h:       48px;
  --nav-h:          54px;
}

/* DARK — Azure portal dark.
   html[data-theme="dark"] punya specificity lebih tinggi dari :root,
   jadi blok ini tetap aktif saat mode gelap dinyalakan. */
html[data-theme="dark"],
body.dark, body.theme-dark, .dark-mode {
  --bg:             #0c1118;
  --surface:        #141b25;
  --surface-2:      #1b2430;
  --surface-hover:  #1b2430;
  --border:         #283446;
  --border-lt:      #1e2836;
  --border-light:   #1e2836;
  --border-strong:  #36465c;

  --text:           #e7edf5;
  --text-2:         #a3b1c4;
  --text-secondary: #a3b1c4;
  --text-muted:     #7d8da3;

  --accent:         #3d96f0;
  --accent-hover:   #2f86df;
  --accent-hv:      #2f86df;
  --accent-dk:      #2f86df;
  --accent-lt:      #15243a;
  --accent-bd:      #284a73;

  --success:#2ea968; --success-lt:#10241a; --success-bd:#1d4a32;
  --green:  #2ea968; --green-lt:  #10241a; --green-bd:  #1d4a32;
  --warning:#e0a23a; --warning-lt:#2a2113; --warning-bd:#51421c;
  --yellow: #e0a23a; --yellow-lt: #2a2113; --yellow-bd: #51421c;
  --danger: #e85d61; --danger-lt: #2a1416; --danger-bd: #5a2629;
  --red:    #e85d61; --red-lt:    #2a1416; --red-bd:    #5a2629;
  --info:   #3d96f0; --info-lt:   #15243a; --info-bd:   #284a73;

  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-xl: 0 14px 32px rgba(0,0,0,.55);
}

/* ───────────────────────────────────────────────────────────
   2. HALAMAN INDEX  (body.zc-index)
   ─────────────────────────────────────────────────────────── */

/* Lebar konten sedikit lebih lega, padat & terkontrol */
body.zc-index .container { max-width: 1140px; padding: 0 18px; }

/* Navbar lebih ramping & flat */
body.zc-index #navbar {
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  backdrop-filter: saturate(150%) blur(8px);
}
body.zc-index .nav-inner { min-height: var(--nav-h); }
body.zc-index .nav-links a {
  font-size: 12.5px; font-weight: 500; padding: 6px 2px;
}

/* Tombol global lebih kecil & kotak (Azure/Vultr) */
body.zc-index .btn {
  padding: 6px 13px; font-size: 12px; border-radius: var(--radius-sm);
  font-weight: 600; transition: background .15s, border-color .15s, color .15s;
}
body.zc-index .btn-primary:hover { transform: none; box-shadow: var(--shadow-md); }
body.zc-index .btn-lg { padding: 8px 18px; font-size: 12.5px; }
body.zc-index .btn-sm { padding: 4px 10px; font-size: 11px; }
body.zc-index .btn-outline { border-width: 1px; }

/* Hero lebih ringkas, tidak makan layar */
body.zc-index .hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 38px; }
body.zc-index .hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
body.zc-index .hero-sub { font-size: 13px; }
body.zc-index .hero-eyebrow { font-size: 10.5px; padding: 4px 12px; }
body.zc-index .hero-stats { gap: 10px; margin-top: 22px; }
body.zc-index .stat-item { padding: 9px 12px; border-radius: var(--radius-md); }

/* Jarak antar-section dirapatkan */
body.zc-index section { padding-top: 40px; padding-bottom: 40px; }
body.zc-index .section-header { margin-bottom: 22px; }

/* ════════ PRICELIST — perbaikan utama ════════
   Dari strip scroll horizontal yang berserakan → grid rapi & seragam.
   Selector dibuat sangat spesifik + !important agar mengalahkan
   aturan lama (yang juga memakai !important pada flex-basis). */
body.zc-index .pricelist .pricelist-grid:not(.zp-wrap),
body.zc-index .pricelist-grid:not(.zp-wrap) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: 14px !important;
  justify-content: stretch !important;
  align-items: stretch;
  overflow: visible !important;
  flex-wrap: nowrap;
  scroll-snap-type: none;
  padding: 0 !important;
}
body.zc-index .pricelist .pricelist-grid:not(.zp-wrap) > .price-card,
body.zc-index .pricelist .pricelist-grid:not(.zp-wrap) > .skeleton-card,
body.zc-index .pricelist-grid:not(.zp-wrap) > .price-card,
body.zc-index .pricelist-grid:not(.zp-wrap) > .skeleton-card {
  width: auto !important;
  flex: initial !important;
  flex-basis: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  scroll-snap-align: none !important;
  margin: 0 !important;
}

/* Kartu harga: padat, tinggi seragam, garis tipis */
body.zc-index .price-card,
body.zc-index .price-card.pc-rich {
  width: auto;
  padding: 14px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  height: 100%;
}
body.zc-index .price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bd);
}
body.zc-index .price-card-name { font-size: .9rem; letter-spacing: -.2px; }
body.zc-index .pc-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* Grid spesifikasi 3 kolom rapi di semua ukuran */
body.zc-index .pc-specgrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  margin: 10px 0;
  background: var(--surface-2);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
}
body.zc-index .pc-spec-val { font-size: 11.5px; }

/* Tabel harga lebih jelas dibaca */
body.zc-index .price-table { border-radius: var(--radius-md); border-color: var(--border); }
body.zc-index .price-row { padding: 6px 10px; }
body.zc-index .price-row:nth-child(odd) { background: var(--surface); }
body.zc-index .price-row:nth-child(even){ background: var(--surface-2); }
body.zc-index .price-period-lbl { font-size: 11px; }
body.zc-index .price-val { font-size: 12px; }

/* Area tombol beli: tetap rapi, tombol kecil */
body.zc-index .price-actions {
  margin-top: auto; padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
body.zc-index .btn-buy {
  padding: 7px 10px; font-size: 11.5px; font-weight: 600;
  border-radius: var(--radius-sm); width: 100%; justify-content: center;
}
body.zc-index .cmp-check { font-size: 10.5px; margin-top: 9px; color: var(--text-muted); }

/* Tab kategori pricelist lebih ramping */
body.zc-index .cat-tab,
body.zc-index .pl-cat-tab {
  padding: 6px 12px; font-size: 11.5px; border-radius: var(--radius-sm);
}

/* Form order & kartu opsi lebih padat */
body.zc-index .option-card {
  padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border);
}
body.zc-index .option-label { font-size: 12px; }
body.zc-index .faq-item { border-radius: var(--radius-md); }
body.zc-index .faq-q { padding: 12px 14px; font-size: 13px; }

/* ───────────────────────────────────────────────────────────
   3. DASHBOARD PANEL  (body.dash-body)
   Sudah ringkas — di sini dipertajam jadi panel ala Azure/Vultr.
   ─────────────────────────────────────────────────────────── */

/* Sidebar: garis tipis, latar bersih */
body.dash-body .sidebar { box-shadow: none; }
body.dash-body .sidebar-nav { padding: 8px 8px; gap: 1px; }

/* Item nav: indikator garis kiri (khas Azure/Vultr), bukan kanan */
body.dash-body .nav-item {
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  padding: 7px 10px;
}
body.dash-body .nav-item.active {
  background: var(--accent-lt);
  border-right: none;
  border-left: 2px solid var(--accent);
}

/* Topbar flat & padat */
body.dash-body .topbar {
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* Kartu konten: hairline + sudut kecil + hover halus */
body.dash-body .section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 14px 15px;
}
body.dash-body .stat-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 12px 13px;
}
body.dash-body .stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bd);
}

/* Quick-access tiles lebih padat & seragam */
body.dash-body .qa-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 9px !important;
}
body.dash-body .qa-tile {
  padding: 11px 12px !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
body.dash-body .qa-tile:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bd) !important;
}

/* Tombol: kotak & ringkas */
body.dash-body .btn { border-radius: var(--radius-sm); padding: 6px 12px; }
body.dash-body .btn-sm { border-radius: var(--radius-xs); }
body.dash-body .btn-primary:hover { background: var(--accent-hover); }

/* Judul halaman lebih ramping */
body.dash-body .page-header h1 { font-size: 1.05rem; letter-spacing: -.3px; }

/* ───────────────────────────────────────────────────────────
   4. PORTAL / KONSOL SERVER  (body.zc-portal)
   Style portal ditulis inline; blok ini dimuat sesudahnya
   sehingga menimpa dengan urutan sumber.
   ─────────────────────────────────────────────────────────── */

/* Rail navigasi konsol: garis tipis, bersih */
body.zc-portal .console-nav {
  border-right: 1px solid var(--border);
  box-shadow: none;
}
body.zc-portal .nav-item {
  font-size: .78rem; padding: 8px 14px;
  border-left: 2px solid transparent;
}
body.zc-portal .nav-item.active {
  background: var(--accent-lt); color: var(--accent);
  border-left-color: var(--accent); font-weight: 600;
}

/* Topbar konsol flat */
body.zc-portal .console-topbar {
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}

/* Tombol portal: ringkas & kotak */
body.zc-portal .btn {
  padding: 7px 13px; font-size: .74rem;
  border-radius: var(--radius-sm); font-weight: 600;
}
body.zc-portal .btn:active { transform: scale(.98); }

/* Kartu / panel server: hairline + sudut kecil + bayangan halus */
body.zc-portal .card,
body.zc-portal .panel,
body.zc-portal .srv-card,
body.zc-portal .info-card,
body.zc-portal .stat-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Hero server sedikit diredam agar selaras dengan look flat */
body.zc-portal .server-hero {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ───────────────────────────────────────────────────────────
   5. RESPONSIF — semua perangkat (mobile / tablet / desktop)
   ─────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  body.zc-index .container { padding: 0 16px; }
  body.zc-index .pricelist .pricelist-grid,
  body.zc-index .pricelist-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

/* Mobile besar / tablet kecil — pricelist tetap GRID, tidak scroll lagi */
@media (max-width: 768px) {
  body.zc-index .pricelist .pricelist-grid,
  body.zc-index .pricelist-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    overflow-x: visible !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  body.zc-index .pricelist .pricelist-grid > .price-card,
  body.zc-index .pricelist-grid > .price-card,
  body.zc-index .pricelist .pricelist-grid > .skeleton-card,
  body.zc-index .pricelist-grid > .skeleton-card {
    width: auto !important;
    flex-basis: auto !important;
    min-width: 0 !important;
  }
  body.zc-index section { padding-top: 32px; padding-bottom: 32px; }
  body.zc-index .hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 30px; }
}

/* Mobile — satu kolom, tetap rapi & terbaca */
@media (max-width: 520px) {
  body.zc-index .pricelist .pricelist-grid,
  body.zc-index .pricelist-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.zc-index .price-card { max-width: 420px; margin: 0 auto !important; width: 100% !important; }
  body.zc-index .container { padding: 0 14px; }
  body.zc-index .hero-stats { flex-wrap: wrap; }

  /* Target sentuh tetap nyaman walau desain padat */
  body.zc-index .btn-buy { min-height: 38px; }
  body.dash-body .nav-item,
  body.zc-portal .nav-item { min-height: 40px; }
}

/* Panel dashboard & portal di mobile: target sentuh & padding aman */
@media (max-width: 768px) {
  body.dash-body .section-card { padding: 13px 13px; }
  body.dash-body .qa-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.zc-portal .btn { min-height: 38px; }
}

/* ───────────────────────────────────────────────────────────
   6. QUALITY FLOOR — fokus keyboard & reduce motion
   ─────────────────────────────────────────────────────────── */
body.zc-index a:focus-visible,
body.zc-index button:focus-visible,
body.dash-body a:focus-visible,
body.dash-body button:focus-visible,
body.zc-portal a:focus-visible,
body.zc-portal button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.zc-index *, body.dash-body *, body.zc-portal * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ───────────────────────────────────────────────────────────
   7. PORTAL — polish container nyata (qa-tile, spec-tile, grid)
   ─────────────────────────────────────────────────────────── */
body.zc-portal .qa-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 9px !important;
}
body.zc-portal .qa-tile {
  padding: 11px 12px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
body.zc-portal .qa-tile:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bd) !important;
  transform: translateY(-2px);
}
body.zc-portal .spec-tile {
  border-radius: var(--radius-md);
  padding: 10px 11px;
}
body.zc-portal .info-tbl td,
body.zc-portal .info-tbl th { font-size: .76rem; }

/* ============================================================
   UPGRADE #1d — PRICELIST TABEL 6 KOLOM (zc-pricelist.js)
   Kolom: Paket | Detail | CPU | RAM | SSD | Beli
   - Detail dipindah tepat di samping Paket (sebelum CPU/RAM/SSD).
   - Kolom Harga DIHAPUS; harga menyatu di tombol Beli.
   - Detail kini 4 baris (Garansi, IP, Bandwidth, Perpanjangan);
     Beli tetap 3 baris — tinggi baris mengikuti kolom terbanyak.
   - DESKTOP : muat penuh, TANPA scroll samping.
   - MOBILE  : tabel di dalam .zp-scroll -> scroll/swipe horizontal.
   ============================================================ */

/* Pembungkus grid (#pricelistGrid). BUKAN scroller — scroller ada di
   .zp-scroll di dalamnya. Selector dibuat spesifik + !important agar
   menang atas aturan flex/scroll lama (style.css & index-enhance.css). */
body.zc-index .pricelist .pricelist-grid.zp-wrap,
body.zc-index .pricelist-grid.zp-wrap,
.pricelist .pricelist-grid.zp-wrap,
.zp-wrap{
  display:block !important;
  width:100% !important;
  overflow:visible !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  scroll-snap-type:none !important;
}

/* Scroller horizontal — di sinilah swipe/scroll mobile terjadi. */
.zp-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  padding:2px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:var(--zc-border,#cbd5e1) transparent;
}
.zp-scroll::-webkit-scrollbar{height:8px;}
.zp-scroll::-webkit-scrollbar-track{background:transparent;}
.zp-scroll::-webkit-scrollbar-thumb{background:var(--zc-border,#cbd5e1);border-radius:100px;}
.zp-scroll::-webkit-scrollbar-thumb:hover{background:var(--zc-accent,#0a6ed1);}

/* Tabel: lebar penuh & fluid di desktop (TANPA scroll samping).
   min-width hanya diaktifkan lewat media query mobile di bawah. */
.zp-table{
  width:100%;
  min-width:0;
  border:1px solid var(--zc-border,#e2e8f0);
  border-radius:10px;
  overflow:hidden;
  background:var(--zc-card,#fff);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* 6 kolom: Paket | Detail | CPU | RAM | SSD | Beli.
   Detail & Beli diberi ruang cukup untuk beberapa baris. */
.zp-head,.zp-row{
  display:grid;
  grid-template-columns:1.7fr 1.85fr 0.72fr 0.72fr 0.78fr 1.95fr;
  align-items:stretch;
}
.zp-head{
  background:var(--zc-soft,#f1f5f9);
  font-weight:700;font-size:10.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--zc-muted,#64748b);
}
.zp-head .zp-c{
  padding:7px 9px;
  border-bottom:1px solid var(--zc-border,#e2e8f0);
  justify-content:center;align-items:flex-start;
}
.zp-head .zp-c-sp,.zp-head .zp-c-buy{align-items:center;text-align:center;}
.zp-row{border-bottom:1px solid var(--zc-border,#eef2f7);transition:background .15s;}
.zp-row:last-child{border-bottom:0;}
.zp-row:hover{background:var(--zc-soft,#f8fafc);}
.zp-row-feat{background:linear-gradient(90deg,rgba(10,110,209,.05),transparent 60%);}
.zp-row-off{opacity:.62;}

/* Sel dasar + garis pemisah vertikal tipis antar kolom. */
.zp-c{
  padding:8px 9px;display:flex;flex-direction:column;gap:3px;
  min-width:0;justify-content:center;
  border-left:1px solid var(--zc-border,#eef2f7);
}
.zp-c-name{border-left:0;}
.zp-head .zp-c{border-left:1px solid var(--zc-border,#e2e8f0);}
.zp-head .zp-c-name{border-left:0;}

/* Kolom Paket */
.zp-name{font-weight:700;font-size:12.5px;line-height:1.2;color:var(--zc-head,#0f172a);
  overflow-wrap:anywhere;word-break:break-word;}
.zp-brand{font-size:9.5px;color:var(--zc-muted,#64748b);line-height:1.2;overflow-wrap:anywhere;}
.zp-desc{font-size:9.5px;color:var(--zc-muted,#94a3b8);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zp-tag{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:8.5px;
  font-weight:700;padding:1px 6px;border-radius:100px;text-transform:uppercase;margin-bottom:1px;}
.zp-tag.feat{background:#fffbeb;color:#b45309;border:1px solid #fde68a;}

/* Kolom CPU / RAM / SSD */
.zp-c-sp{align-items:center;justify-content:center;text-align:center;gap:4px;}
.zp-c-sp i{color:var(--zc-accent,#0a6ed1);font-size:12px;}
.zp-c-sp span{font-size:11px;font-weight:700;color:var(--zc-text,#334155);
  line-height:1.15;word-break:break-word;}

/* Kolom DETAIL — 3 baris sejajar */
.zp-c-detail{gap:0;padding:0;justify-content:stretch;}
.zp-drow{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding:4px 9px;border-bottom:1px dashed var(--zc-border,#eef2f7);}
.zp-drow:last-child{border-bottom:0;}
.zp-dk{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;
  color:var(--zc-muted,#64748b);white-space:nowrap;flex-shrink:0;}
.zp-dk i{color:var(--zc-accent,#0a6ed1);width:12px;text-align:center;font-size:10px;}
.zp-dv{font-size:10px;font-weight:700;color:var(--zc-text,#334155);text-align:right;
  min-width:0;overflow-wrap:anywhere;}
.zp-drow.ok .zp-dv{color:#047857;}
.zp-drow.no .zp-dv{color:#b91c1c;}

/* Kolom BELI — 3 tombol kecil sejajar; tiap tombol "Beli <Periode> <harga>" */
.zp-c-buy{gap:0;padding:0;justify-content:stretch;}
.zp-brow{flex:1 1 auto;display:flex;align-items:center;padding:4px 8px;
  border-bottom:1px dashed var(--zc-border,#eef2f7);}
.zp-brow:last-child{border-bottom:0;}
.zp-buy{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:10px;line-height:1.1;padding:6px 8px;border:0;border-radius:7px;
  cursor:pointer;background:var(--zc-accent,#0a6ed1);color:#fff;
  transition:filter .15s,transform .05s;white-space:nowrap;overflow:hidden;}
.zp-buy .zp-blabel{font-weight:700;overflow:hidden;text-overflow:ellipsis;}
.zp-buy .zp-bprice{font-weight:800;overflow:hidden;text-overflow:ellipsis;}
.zp-buy:hover{filter:brightness(1.08);}
.zp-buy:active{transform:translateY(1px);}
.zp-buy-off{background:#e2e8f0;color:#94a3b8;cursor:not-allowed;}

.zp-empty{padding:26px 14px;text-align:center;color:var(--zc-muted,#94a3b8);font-size:13px;
  border:1px dashed var(--zc-border,#e2e8f0);border-radius:10px;}

/* ── Layar sempit: kecilkan sedikit lagi; tabel di-scroll horizontal. ── */
@media (max-width:900px){
  .zp-table{min-width:820px;}
}
@media (max-width:640px){
  .zp-table{min-width:760px;}
  /* Beri Paket & Detail porsi lebih besar (diambil sedikit dari CPU/RAM/SSD
     yang sudah aman ter-wrap) supaya nama paket & nilai Detail lebih longgar. */
  .zp-head,.zp-row{grid-template-columns:2fr 2.1fr 0.6fr 0.6fr 0.65fr 1.95fr;}
  .zp-name{font-size:12px;}
  .zp-c-sp span{font-size:10.5px;}
  /* Detail: tumpuk label di atas nilai (bukan sejajar kiri-kanan) supaya
     nilai (mis. "Non-Dedicated", "Unlimited Bandwidth") dapat ruang penuh
     dan tidak lagi terpotong ellipsis. */
  .zp-drow{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:5px 9px;}
  .zp-dk{font-size:9px;}
  .zp-dv{font-size:9.5px;text-align:left;}
  .zp-buy{font-size:9.5px;padding:6px 7px;gap:5px;}
}
@media (max-width:380px){
  .zp-table{min-width:720px;}
}

/* — Mode gelap: pertahankan kontras tombol nonaktif — */
body.dark .zp-buy-off,
html[data-theme="dark"] .zp-buy-off{background:#334155;color:#94a3b8;}

/* ============================================================
   UPGRADE #2 — UI PADAT (KECIL) untuk DASHBOARD & PORTAL USER
   Mengecilkan teks, tombol, tabel pada ISI HALAMAN saja.
   Sidebar / sub-menu / mobile-tab SENGAJA tidak disentuh
   (sudah bagus, sesuai permintaan).
   ============================================================ */
.dash-body .zc-card,.zc-portal .zc-card,
.dash-body .card,.zc-portal .card{border-radius:10px;}
/* Heading isi halaman lebih ringkas */
.dash-body .zc-sec-head h2,.zc-portal .zc-sec-head h2,
.dash-body .page-title,.zc-portal .page-title{font-size:15px;line-height:1.25;}
.dash-body .zc-sec-head p,.zc-portal .zc-sec-head p,
.dash-body .zc-card-sub,.zc-portal .zc-card-sub{font-size:11px;}
.dash-body .zc-card-title,.zc-portal .zc-card-title{font-size:12.5px;}
/* Tombol isi halaman (BUKAN nav) lebih kecil & target sentuh tetap nyaman */
.dash-body .zc-btn,.zc-portal .zc-btn,
.dash-body .btn:not(.nav-item),.zc-portal .btn:not(.nav-item){
  font-size:11.5px;padding:7px 12px;border-radius:8px;min-height:34px;}
.dash-body .btn-sm,.zc-portal .btn-sm{font-size:10px;padding:5px 9px;min-height:28px;}
/* Tabel isi halaman lebih padat */
.dash-body table:not(.cmp-table) th,.zc-portal table th,
.dash-body table:not(.cmp-table) td,.zc-portal table td{
  font-size:11px;padding:6px 8px;}
.dash-body .zc-mini-table th,.zc-portal .zc-mini-table th,
.dash-body .zc-mini-table td,.zc-portal .zc-mini-table td{font-size:10.5px;padding:5px 7px;}
/* Badge & chip lebih kecil */
.dash-body .zc-badge,.zc-portal .zc-badge{font-size:9.5px;padding:1px 7px;}
/* Mobile: rapatkan lagi isi halaman */
@media (max-width:640px){
  .dash-body .zc-card,.zc-portal .zc-card{padding:11px;}
  .dash-body .zc-sec-head h2,.zc-portal .zc-sec-head h2{font-size:13.5px;}
  .dash-body .zc-btn,.zc-portal .zc-btn,
  .dash-body .btn:not(.nav-item),.zc-portal .btn:not(.nav-item){font-size:11px;padding:6px 10px;min-height:32px;}
  .dash-body table:not(.cmp-table) th,.zc-portal table th,
  .dash-body table:not(.cmp-table) td,.zc-portal table td{font-size:10px;padding:5px 6px;}
}