/*!
 * Cyber Digital — Modern Minimal layer (v3)
 * Dimuat SETELAH custom.css. Palet mengikuti logo: teal #009CB8 + oranye #FAAD3E.
 * Struktur: 1 Tokens · 2 Base · 3 Header · 4 Dashboard · 5 Produk · 6 Komponen WHMCS
 *           7 Footer/Login · 8 Animasi · 9 Responsif · 10 Reduced motion
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --cd-primary:       #1D4079;   /* teks/link navy (kontras ~9:1 di atas putih) */
  --cd-primary-hover: #14305F;
  --cd-primary-dark:  #0F2A55;
  --cd-primary-light: #E7EDF8;
  --cd-brand:         #009CB8;   /* teal logo — dekorasi/gradien */
  --cd-orange:        #FAAD3E;   /* oranye logo — aksen */
  --cd-orange-ink:    #8A4F00;   /* oranye untuk teks di atas terang */
  --cd-orange-soft:   #FEF3DC;

  --cd-btn-bg:    #15356A;   /* latar tombol navy (putih di atasnya ~11:1) */
  --cd-btn-hover: #0E2A56;
  --cd-hover:     #F6F9FD;
  --cd-track:     #EAEFF7;
  --cd-faint:     #8392AA;
  --cd-ink-2:     #2E3F5C;
  --cd-header-bg: rgba(255,255,255,.92);
  --cd-bg:      #F4F7FB;
  --cd-surface: #FFFFFF;
  --cd-line:    #E1E7F0;
  --cd-line-2:  #D0D9E6;
  --cd-ink:     #0B1B33;
  --cd-muted:   #536480;

  --cd-ok:      #0F7B5C;  --cd-ok-bg:   #E3F6EE;
  --cd-bad:     #B42318;  --cd-bad-bg:  #FDECEA;
  --cd-warn:    #8A4F00;  --cd-warn-bg: #FEF3DC;

  --cd-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cd-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;

  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(11,27,51,.05);
  --shadow-2: 0 8px 24px -8px rgba(11,27,51,.14), 0 2px 6px rgba(11,27,51,.05);
  --shadow-3: 0 24px 48px -16px rgba(21,53,106,.28), 0 6px 16px rgba(11,27,51,.07);

  --primary: #15356A;
  --blue: #15356A;
}

/* ============================================================
   2. Base
   ============================================================ */
html { scroll-padding-top: 72px; }
body {
  font-family: var(--cd-font);
  color: var(--cd-ink);
  background: var(--cd-bg);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.003em;
}
body.primary-bg-color { background: var(--cd-bg) !important; }
body.page-homepage:not(.cd-login-page) { background: var(--cd-surface) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-display); letter-spacing: -.02em; color: var(--cd-ink); }
a { color: var(--cd-primary); }
a:hover { color: var(--cd-primary-dark); }
::selection { background: rgba(0,156,184,.22); }

:focus-visible {
  outline: 3px solid rgba(0,156,184,.55);
  outline-offset: 2px;
  border-radius: 6px;
}

.cd-skip {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--cd-ink); color: #fff; padding: .6rem 1rem; border-radius: 10px;
  transition: top var(--dur-2) var(--ease-out);
}
.cd-skip:focus { top: 12px; color: #fff; }

/* Transisi halaman halus */
@keyframes cdn-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#main-body, .homepage-main { animation: cdn-page-in var(--dur-3) var(--ease-out) both; }

/* ============================================================
   3. Header
   ============================================================ */
header.header.cdn-header {
  position: sticky; top: 0; z-index: 1040;
  background: var(--cd-header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--cd-line);
  transition: box-shadow var(--dur-2) var(--ease-out), background var(--dur-2);
}
.cdn-header.scrolled { box-shadow: 0 6px 24px -12px rgba(11,27,51,.25); }
body.page-homepage #header { background: var(--cd-header-bg); }

.cdn-bar { display: flex; align-items: center; gap: 1rem; height: 56px; position: relative; }
.cdn-brand { display: inline-flex; align-items: center; flex: none; padding: .25rem 0; transition: transform var(--dur-2) var(--ease-spring); }
.cdn-brand:hover { transform: scale(1.03); }
.cdn-logo { height: 30px; width: auto; display: block; }
.cdn-logo-dark { display: none; }
[data-cd-theme="dark"] .cdn-logo-light { display: none; }
[data-cd-theme="dark"] .cdn-logo-dark { display: block; }

.cdn-nav { padding: 0; flex: 1; min-width: 0; height: 56px; }
.cdn-nav .navbar-collapse { align-items: center; }
.cdn-menu { align-items: center; gap: .1rem; margin: 0; flex-wrap: nowrap; height: 56px; min-width: 0; flex: 1 1 0; visibility: hidden; }
.cdn-ready .cdn-menu { visibility: visible; }
.cdn-menu > li { flex: none; white-space: nowrap; }
.cdn-menu > li > a,
.cdn-menu > li > .nav-link {
  position: relative;
  display: flex; align-items: center; gap: .35rem;
  padding: 0 .7rem !important; height: 56px;
  font-size: .875rem; font-weight: 500; color: var(--cd-ink-2);
  text-decoration: none;
  transition: color var(--dur-1);
}
.cdn-menu > li > a::before {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px;
  background: var(--cd-brand); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.cdn-menu > li > a:hover { color: var(--cd-ink); }
.cdn-menu > li > a:hover::before,
.cdn-menu > li.active > a::before,
.cdn-menu > li.show > a::before { transform: scaleX(1); }
.cdn-menu > li.active > a, .cdn-menu > li.show > a { color: var(--cd-ink); font-weight: 600; }
.cdn-menu .dropdown-toggle::after { border: 0; width: 6px; height: 6px; margin-left: .15rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease-out); background: none; }
.cdn-menu .show > .dropdown-toggle::after { transform: rotate(225deg) translateY(-2px); }
.cdn-menu .badge { background: var(--cd-orange-soft); color: var(--cd-orange-ink); }

.cdn-header .dropdown-menu, .cdn-header .collapsable-dropdown-menu {
  background: var(--cd-surface); color: var(--cd-ink);
  border: 1px solid var(--cd-line); border-radius: 14px; box-shadow: var(--shadow-2);
  padding: .4rem; margin-top: 0; min-width: 220px;
  animation: cdn-pop var(--dur-2) var(--ease-out) both; transform-origin: top;
}
@keyframes cdn-pop { from { opacity: 0; translate: 0 -6px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
.cdn-header .dropdown-menu li.dropdown-item { padding: 0 !important; background: none !important; }
.cdn-header .dropdown-menu li.dropdown-item > a.dropdown-item { display: block; width: 100%; }
.cdn-header .dropdown-item {
  border-radius: 9px; padding: .55rem .8rem !important; font-size: .9rem; font-weight: 500; color: var(--cd-ink-2);
  transition: background var(--dur-1), color var(--dur-1), padding-left var(--dur-2) var(--ease-out);
}
.cdn-header .dropdown-item:hover, .cdn-header .dropdown-item:focus { background: var(--cd-primary-light); color: var(--cd-primary-dark); padding-left: 1rem !important; }
.cdn-header .dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cd-muted); }
.cdn-header .dropdown-divider { margin: .35rem 0; border-color: var(--cd-line); }

.cdn-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: none; }

/* Buttons */
.cdn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 36px; padding: 0 .95rem; border-radius: 10px;
  font-size: .875rem; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.cdn-btn:active { transform: scale(.97); }
.cdn-btn-primary { background: var(--cd-btn-bg); color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(21,53,106,.55); }
.cdn-btn-primary:hover { background: var(--cd-btn-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(21,53,106,.6); }
.cdn-btn-ghost, .cdn-btn-outline { background: var(--cd-surface); color: var(--cd-ink) !important; border-color: var(--cd-line-2); }
.cdn-btn-ghost:hover, .cdn-btn-outline:hover { border-color: var(--cd-brand); color: var(--cd-primary-dark) !important; transform: translateY(-1px); }

.cdn-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: transparent; border: 0; color: var(--cd-ink-2); cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.cdn-icon-btn:hover { background: var(--cd-primary-light); color: var(--cd-primary-dark); }
.cdn-icon-btn:active { transform: scale(.94); }
.cdn-badge {
  position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--cd-orange); color: #3B2300; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
  transition: transform var(--dur-2) var(--ease-spring);
}
.cdn-badge.is-zero { transform: scale(0); }

.cdn-avatar-btn { display: inline-flex; align-items: center; gap: .35rem; padding: 3px 8px 3px 3px; border-radius: 999px; background: var(--cd-surface); border: 1px solid var(--cd-line); color: var(--cd-muted); cursor: pointer; position: relative; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.cdn-avatar-btn:hover { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.1); }
.cdn-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cd-primary-light); color: var(--cd-primary-dark); font-weight: 700; font-size: .7rem; display: grid; place-items: center; }
.cdn-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--cd-orange); border: 2px solid #fff; }
.cdn-user-menu { min-width: 260px; }
.cdn-user-head { padding: .6rem .8rem .5rem; display: flex; flex-direction: column; border-bottom: 1px solid var(--cd-line); margin-bottom: .3rem; }
.cdn-user-head strong { font-size: .95rem; }
.cdn-user-head span { font-size: .8rem; color: var(--cd-muted); overflow: hidden; text-overflow: ellipsis; }
.cdn-alert { white-space: normal !important; font-size: .82rem !important; }
.cdn-alert-danger { color: var(--cd-bad) !important; }
.cdn-alert-warning { color: var(--cd-warn) !important; }

/* Progress scroll */
.cdn-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; }
.cdn-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cd-brand), var(--cd-orange)); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* Breadcrumb minimal */
.master-breadcrumb { background: transparent; border: 0; padding: 1.25rem 0 0; }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .85rem; }
.breadcrumb-item a { color: var(--cd-muted); }
.breadcrumb-item a:hover { color: var(--cd-primary); }
.breadcrumb-item.active { color: var(--cd-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cd-line-2); }

/* ============================================================
   4. Dashboard klien (referensi: ringkasan)
   ============================================================ */
.cdn-card { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.cdn-dash { display: flex; flex-direction: column; gap: 1.25rem; padding-top: .5rem; }
.cdn-h1 { font-size: clamp(1.7rem, 3.2vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.cdn-muted { color: var(--cd-muted); margin: .25rem 0 0; }
.cdn-eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cd-muted); }

.cdn-callout { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.5rem; flex-wrap: wrap; }
.cdn-callout-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.cdn-callout-body { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .15rem; }
.cdn-callout-amount strong { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cdn-callout-amount span { color: var(--cd-muted); }
.cdn-callout-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cdn-callout-danger { border-color: #F4C7C2; background: linear-gradient(180deg, #fff, #FFFAF9); }
.cdn-callout-danger .cdn-callout-icon { background: var(--cd-bad-bg); color: var(--cd-bad); animation: cdn-pulse 2.4s ease-in-out infinite; }
.cdn-callout-info { border-color: #C6D5EE; }
.cdn-callout-info .cdn-callout-icon { background: var(--cd-primary-light); color: var(--cd-primary); }
.cdn-callout-ok .cdn-callout-icon { background: var(--cd-ok-bg); color: var(--cd-ok); }
@keyframes cdn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.25); } 50% { box-shadow: 0 0 0 10px rgba(180,35,24,0); } }

.cdn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cdn-stat { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.4rem; text-decoration: none !important; color: var(--cd-ink); min-height: 132px; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2); }
.cdn-stat:hover { transform: translateY(-3px); border-color: var(--cd-brand); box-shadow: var(--shadow-2); color: var(--cd-ink); }
.cdn-stat-label { font-size: .85rem; color: var(--cd-muted); }
.cdn-stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cdn-stat-value small { font-size: .95rem; font-weight: 500; color: var(--cd-muted); margin-left: .25rem; letter-spacing: 0; }
.cdn-stat-money { font-size: 1.6rem; }
.cdn-stat-note { font-size: .82rem; color: var(--cd-muted); margin-top: auto; }

.cdn-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
.cdn-panel { overflow: hidden; }
.cdn-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--cd-line); }
.cdn-panel-head h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.cdn-link { font-size: .9rem; font-weight: 600; text-decoration: none; }
.cdn-link span { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.cdn-link:hover span { transform: translateX(4px); }

.cdn-list { list-style: none; margin: 0; padding: 0; }
.cdn-list li + li { border-top: 1px solid var(--cd-line); }
.cdn-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.4rem; color: var(--cd-ink); text-decoration: none !important; transition: background var(--dur-1), padding-left var(--dur-2) var(--ease-out); }
.cdn-list-row:hover { background: var(--cd-hover); padding-left: 1.7rem; color: var(--cd-ink); }
.cdn-list-main, .cdn-list-side { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cdn-list-side { align-items: flex-end; text-align: right; }
.cdn-list-main strong, .cdn-list-side strong { font-weight: 600; }
.cdn-list-main small, .cdn-list-side small { color: var(--cd-muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cdn-mono { font-variant-numeric: tabular-nums; color: var(--cd-primary); }

.cdn-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.cdn-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cdn-pill-active { background: var(--cd-ok-bg); color: var(--cd-ok); }
.cdn-pill-pending, .cdn-pill-unpaid { background: var(--cd-warn-bg); color: var(--cd-warn); }
.cdn-pill-suspended, .cdn-pill-overdue { background: var(--cd-bad-bg); color: var(--cd-bad); }

.cdn-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2.5rem 1.5rem; text-align: center; color: var(--cd-muted); }
.cdn-empty svg { color: var(--cd-brand); opacity: .75; }
.cdn-empty p { margin: 0; }

/* Panel bawaan WHMCS di dashboard */
.client-home-cards { margin-top: 1.25rem; }
.client-home-cards .card { margin-bottom: 1rem; }

/* Entrance bertahap */
.cdn-rise { opacity: 0; transform: translateY(14px); animation: cdn-rise var(--dur-3) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cdn-rise { to { opacity: 1; transform: none; } }

/* ============================================================
   5. Produk (homepage — data dari database)
   ============================================================ */
.cdp-tagline { text-align: center; color: var(--cd-muted); margin: 0 auto 1.5rem; max-width: 560px; }
.cdp-tabs, .cdp-cycles { display: flex; gap: .25rem; padding: .3rem; background: var(--cd-track); border-radius: 12px; width: fit-content; max-width: 100%; margin: 0 auto 1.5rem; overflow-x: auto; scrollbar-width: none; }
.cdp-tabs::-webkit-scrollbar, .cdp-cycles::-webkit-scrollbar { display: none; }
.cdp-tab, .cdp-cycle { border: 0; background: transparent; padding: .6rem 1.1rem; min-height: 44px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--cd-muted); cursor: pointer; white-space: nowrap; transition: color var(--dur-1), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.cdp-tab:hover, .cdp-cycle:hover { color: var(--cd-ink); }
.cdp-tab.is-active, .cdp-cycle.is-active { background: var(--cd-surface); color: var(--cd-ink); box-shadow: 0 1px 3px rgba(11,27,51,.12), 0 0 0 1px rgba(11,27,51,.04); }
.cdp-cycles { margin-bottom: 2rem; }

.cdp-panel.is-active { animation: cdn-page-in var(--dur-3) var(--ease-out) both; }
.cdp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; max-width: 1120px; margin: 0 auto; }
.cdp-card { position: relative; display: flex; flex-direction: column; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 18px; padding: 1.75rem; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out); }
.cdp-card:hover { transform: translateY(-6px); border-color: var(--cd-brand); box-shadow: var(--shadow-3); }
.cdp-card.is-featured { border-color: var(--cd-brand); box-shadow: 0 0 0 1px var(--cd-brand), var(--shadow-2); }
.cdp-ribbon { position: absolute; top: 1.1rem; right: 1.1rem; background: var(--cd-orange); color: #3B2300; font-size: .72rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; letter-spacing: .02em; }
.cdp-name { font-size: 1.05rem; font-weight: 650; margin: 0 0 1rem; }
.cdp-price { display: flex; align-items: baseline; gap: .15rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cdp-amt { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 750; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.cdp-amt-muted { font-size: 1.4rem; color: var(--cd-muted); }
.cdp-unit { color: var(--cd-muted); font-size: .95rem; }
.cdp-amt.is-swap { animation: cdp-swap var(--dur-3) var(--ease-out); }
@keyframes cdp-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cdp-card.is-na { opacity: .6; }
.cdp-features { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.cdp-features li { display: flex; gap: .6rem; align-items: flex-start; color: var(--cd-ink-2); font-size: .93rem; }
.cdp-features svg { color: var(--cd-brand); flex: none; margin-top: 2px; }
.cdp-cta { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 11px; border: 1px solid var(--cd-line-2); font-weight: 600; color: var(--cd-ink) !important; text-decoration: none !important; background: var(--cd-surface); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-1); }
.cdp-cta:hover, .cdp-card.is-featured .cdp-cta { background: var(--cd-btn-bg); border-color: var(--cd-btn-bg); color: #fff !important; }
.cdp-card.is-featured .cdp-cta:hover { background: var(--cd-btn-hover); }
.cdp-cta:active { transform: scale(.98); }
.cdp-cta.is-disabled { background: var(--cd-track); color: var(--cd-muted) !important; border-color: transparent; pointer-events: none; }
.cdp-empty { max-width: 520px; margin: 0 auto; text-align: center; padding: 3rem 1.5rem; background: var(--cd-surface); border: 1px dashed var(--cd-line-2); border-radius: 18px; color: var(--cd-muted); }
.cdp-empty svg { color: var(--cd-brand); margin-bottom: .75rem; }
.cdp-empty h3 { font-size: 1.2rem; }

/* Tweak hero/section agar lebih minimalis */
.cd-section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.cd-services-bg { background: var(--cd-bg); }
.cd-section-label { color: var(--cd-primary); background: var(--cd-primary-light); border-radius: 999px; padding: .3rem .8rem; display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cd-section-title em { font-style: normal; background: linear-gradient(90deg, #2B63C0, var(--cd-brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-hero-title em { font-style: normal; background: linear-gradient(90deg, #5CC8DB, var(--cd-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-card, .cd-feature-item { border-radius: 16px; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2); }
.cd-card:hover { transform: translateY(-5px); }
.cd-btn { border-radius: 11px; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), background var(--dur-1); }
.cd-btn:active { transform: scale(.97); }

/* Ambient motion di hero */
@keyframes cdn-float { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } }
.cd-server-illo { animation: cdn-float 7s ease-in-out infinite; }
.cd-float-badge { animation: cdn-float 5s ease-in-out infinite; }
.cd-float-badge-uptime { animation-delay: -1.5s; }
.cd-float-badge-secure { animation-delay: -3s; }

/* ============================================================
   6. Restyle komponen WHMCS (halaman klien/order)
   ============================================================ */
#main-body { padding-top: .5rem; padding-bottom: 3rem; }
.primary-content > .header-lined h1, .header-lined h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; }
.header-lined { border-bottom: 0; margin-bottom: 1.25rem; }
.header-lined .breadcrumb { display: none; }

.card, .panel, .list-group, .table-container, .sidebar .card {
  border: 1px solid var(--cd-line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-1) !important; background: var(--cd-surface); overflow: hidden;
}
.card-header, .panel-heading { background: var(--cd-surface) !important; border-bottom: 1px solid var(--cd-line) !important; padding: 1rem 1.25rem; font-weight: 650; }
.card-title { font-size: 1.02rem; font-weight: 650; }
.card-accent-blue, .card-accent-green, .card-accent-red, .card-accent-gold, .card-accent-orange, .card-accent-teal, .card-accent-midnight, .card-accent-asbestos, .card-accent-purple, .card-accent-emerald, .card-accent-pomegranate { border-top: 1px solid var(--cd-line) !important; }
.card-footer { background: var(--cd-surface) !important; border-top: 1px solid var(--cd-line) !important; }
.list-group-item { border-color: var(--cd-line) !important; padding: .8rem 1.25rem; transition: background var(--dur-1), padding-left var(--dur-2) var(--ease-out); }
.list-group-item-action:hover { background: var(--cd-hover); padding-left: 1.5rem; }
.list-group-item.active { background: var(--cd-primary-light) !important; color: var(--cd-primary-dark) !important; border-color: var(--cd-line) !important; font-weight: 600; }

.btn { border-radius: 11px; font-weight: 600; padding: .6rem 1.1rem; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.btn:active { transform: scale(.97); }
.btn-primary, .btn-success.btn-order, .btn-checkout { background: var(--cd-btn-bg) !important; border-color: var(--cd-btn-bg) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(21,53,106,.6); }
.btn-primary:hover, .btn-checkout:hover { background: var(--cd-btn-hover) !important; border-color: var(--cd-btn-hover) !important; transform: translateY(-1px); }
.btn-default, .btn-secondary, .btn-outline-primary { background: var(--cd-surface); border: 1px solid var(--cd-line-2); color: var(--cd-ink); }
.btn-default:hover, .btn-secondary:hover { background: var(--cd-surface); border-color: var(--cd-brand); color: var(--cd-primary-dark); transform: translateY(-1px); }
.btn-link { color: var(--cd-primary); }
.btn-sm, .btn-xs { padding: .4rem .8rem; border-radius: 9px; }

.form-control, .custom-select, select.form-control, textarea.form-control {
  border: 1px solid var(--cd-line-2); border-radius: 11px; min-height: 44px; background-color: var(--cd-surface); color: var(--cd-ink);
  transition: border-color var(--dur-1), box-shadow var(--dur-2);
}
.form-control:focus, .custom-select:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.14); }
label, .control-label { font-weight: 600; font-size: .88rem; color: var(--cd-ink-2); }
.custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cd-btn-bg); border-color: var(--cd-primary); }

.table { color: var(--cd-ink); margin-bottom: 0; }
.table thead th, table.dataTable thead th { background: var(--cd-hover); border-bottom: 1px solid var(--cd-line) !important; border-top: 0; color: var(--cd-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .85rem 1.1rem; }
.table td { border-top: 1px solid var(--cd-line); padding: .95rem 1.1rem; vertical-align: middle; }
.table-hover tbody tr { transition: background var(--dur-1); }
.table-hover tbody tr:hover { background: var(--cd-hover); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

.nav-tabs { border-bottom: 1px solid var(--cd-line); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--cd-muted); font-weight: 600; padding: .8rem 1rem; border-radius: 0; transition: color var(--dur-1), border-color var(--dur-2); }
.nav-tabs .nav-link:hover { color: var(--cd-ink); }
.nav-tabs .nav-link.active { color: var(--cd-ink); border-bottom-color: var(--cd-brand); background: transparent; }
.nav-pills .nav-link.active { background: var(--cd-btn-bg); }

.badge-info, .badge-primary { background: var(--cd-btn-bg) !important; }
.label, .status { border-radius: 999px !important; padding: .2rem .7rem !important; font-size: .78rem !important; font-weight: 600 !important; }
.status-active, .label.active { background: var(--cd-ok-bg) !important; color: var(--cd-ok) !important; }
.status-pending, .status-unpaid, .label.pending { background: var(--cd-warn-bg) !important; color: var(--cd-warn) !important; }
.status-suspended, .status-overdue, .status-terminated, .status-cancelled { background: var(--cd-bad-bg) !important; color: var(--cd-bad) !important; }
.status-paid { background: var(--cd-ok-bg) !important; color: var(--cd-ok) !important; }

.alert { border-radius: 12px; border-width: 1px; }
.alert-info { background: var(--cd-primary-light); border-color: #C6D5EE; color: #16325C; }
.alert-success { background: var(--cd-ok-bg); border-color: #BFE8D6; color: #0B5F47; }
.alert-warning { background: var(--cd-warn-bg); border-color: #F5DDA8; color: #6B3D00; }
.alert-danger { background: var(--cd-bad-bg); border-color: #F4C7C2; color: #8F1B11; }

.pagination .page-link { border-radius: 9px; margin: 0 2px; border: 1px solid var(--cd-line); color: var(--cd-ink); }
.pagination .active .page-link { background: var(--cd-btn-bg); border-color: var(--cd-primary); color: #fff; }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--shadow-3); overflow: hidden; }
.modal.fade .modal-dialog { transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2); transform: translateY(16px) scale(.98); }
.modal.show .modal-dialog { transform: none; }

/* Sidebar WHMCS */
.sidebar .list-group-item.active, .sidebar .card-sidebar .list-group-item.active { background: var(--cd-primary-light) !important; color: var(--cd-primary-dark) !important; }
.sidebar .card-header { font-size: .95rem; }

/* Order form (cart) */
#order-standard_cart .products .product, #order-standard_cart .view-cart-items, #order-standard_cart .order-summary, #order-standard_cart .sub-heading span { border-radius: var(--radius); }
#order-standard_cart .products .product { border: 1px solid var(--cd-line); box-shadow: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3), border-color var(--dur-2); }
#order-standard_cart .products .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--cd-brand); }
#order-standard_cart .btn-primary, #order-standard_cart .btn-order-now { background: var(--cd-btn-bg); border-color: var(--cd-primary); }
#order-standard_cart .order-summary { background: var(--cd-surface); border: 1px solid var(--cd-line); }

/* ============================================================
   7. Footer & Login
   ============================================================ */
.cd-footer-brand .brand-logo { display: inline-block; margin-bottom: .75rem; }
.cd-footer-brand .brand-logo img { height: 52px; width: auto; display: block; }
.footer a, .cd-footer-links a { transition: color var(--dur-1), transform var(--dur-2) var(--ease-out); }
.cd-footer-links a:hover { transform: translateX(3px); }

.cd-logo .cd-logo-img { height: 46px; width: auto; display: block; }
.cd-login-left .cd-logo .cd-logo-img { height: 52px; background: var(--cd-surface); padding: 6px 12px; border-radius: 14px; }

/* ============================================================
   8. Animasi pendukung
   ============================================================ */
.cd-reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.cd-reveal:nth-child(2) { transition-delay: .06s; } .cd-reveal:nth-child(3) { transition-delay: .12s; }
.cd-reveal:nth-child(4) { transition-delay: .18s; } .cd-reveal:nth-child(5) { transition-delay: .24s; } .cd-reveal:nth-child(6) { transition-delay: .3s; }

a.btn, .cdn-btn, .cd-btn { position: relative; overflow: hidden; }
.cdn-btn-primary::after, .btn-primary::after, .cd-btn-primary::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out); pointer-events: none;
}
.cdn-btn-primary:hover::after, .btn-primary:hover::after, .cd-btn-primary:hover::after { transform: translateX(120%); }

/* ============================================================
   9. Responsif
   ============================================================ */
@media (min-width: 1200px) {
  .cdn-nav .navbar-collapse { display: flex !important; flex-basis: auto; }
  .cdn-nav .dropdown-menu-right { right: 0; left: auto; }
}
@media (max-width: 1199.98px) {
  .cdn-bar { height: 52px; gap: .5rem; }
  .cdn-logo { height: 26px; }
  .cdn-nav { position: static; flex: 0; height: auto; }
  .cdn-nav .navbar-collapse {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--cd-surface); border-bottom: 1px solid var(--cd-line);
    box-shadow: 0 20px 30px -20px rgba(11,27,51,.25); padding: .5rem 1rem 1rem; max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .cdn-menu { align-items: stretch; flex-direction: column; height: auto; flex-wrap: wrap; visibility: visible; }
  .cdn-menu > li { white-space: normal; }
  .cdn-menu > li > a { padding: .8rem .5rem !important; height: auto; border-bottom: 1px solid var(--cd-line); }
  .cdn-menu > li > a::before { display: none; }
  .cdn-nav .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; border: 0; padding-left: .75rem; animation: none; }
  .cdn-mobile-actions { display: flex; gap: .6rem; padding-top: 1rem; }
  .cdn-mobile-actions .cdn-btn { flex: 1; }
}
@media (max-width: 991.98px) {
  .cdn-stats { grid-template-columns: repeat(2, 1fr); }
  .cdn-split { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .cdn-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .cdn-stat { padding: 1rem; min-height: 112px; }
  .cdn-callout { padding: 1rem; }
  .cdn-callout-actions { width: 100%; }
  .cdn-callout-actions .cdn-btn { flex: 1; }
  .cdn-list-row { padding: .85rem 1rem; }
  .cdp-card { padding: 1.4rem; }
}

/* ============================================================
   10. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cdn-rise, .cd-reveal { opacity: 1 !important; transform: none !important; }
}

/* Hero: batasi tinggi agar tidak terlalu tinggi di layar besar */
.cd-hero { min-height: min(100vh, 780px) !important; }

/* Grid fitur: 2 kolom agar teks tidak sempit */
@media (min-width: 992px) { .cd-features-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ============================================================
   11. Dark mode (data-cd-theme="dark")
   ============================================================ */
[data-cd-theme="dark"] {
  color-scheme: dark;
  --cd-primary: #8DB8F2; --cd-primary-hover: #A9CBF7; --cd-primary-dark: #C5DCFA;
  --cd-primary-light: rgba(90,140,230,.16);
  --cd-btn-bg: #2F68C8; --cd-btn-hover: #3E78DA;
  --cd-orange-ink: #FAC46B; --cd-orange-soft: rgba(250,173,62,.14);
  --cd-bg: #060E1D; --cd-surface: #0C1830; --cd-line: #192A47; --cd-line-2: #263A5E;
  --cd-ink: #E6EDF8; --cd-muted: #8CA0BE; --cd-faint: #5C6F8E; --cd-ink-2: #C3D0E4;
  --cd-hover: #101F3A; --cd-track: #112240; --cd-header-bg: rgba(6,14,29,.88);
  --cd-ok: #4CD6A5; --cd-ok-bg: rgba(76,214,165,.12);
  --cd-bad: #FF8E83; --cd-bad-bg: rgba(255,142,131,.12);
  --cd-warn: #FAC46B; --cd-warn-bg: rgba(250,173,62,.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 12px 28px -10px rgba(0,0,0,.6);
  --shadow-3: 0 24px 48px -16px rgba(0,0,0,.65);
  /* token custom.css (tanpa --cd-white: dipakai juga untuk teks putih di hero/footer) */
  --cd-gray-50: #08142A; --cd-gray-100: #0F1E3A; --cd-gray-200: #192A47; --cd-gray-300: #263A5E;
  --cd-gray-400: #5C6F8E; --cd-gray-500: #8CA0BE; --cd-gray-600: #A8B8D2; --cd-gray-700: #C3D0E4;
  --cd-gray-800: #DAE3F1; --cd-gray-900: #EDF2FA;
}
[data-cd-theme="dark"] body, [data-cd-theme="dark"] body.page-homepage:not(.cd-login-page) { background: var(--cd-bg) !important; color: var(--cd-ink); }
[data-cd-theme="dark"] .cd-services-bg, [data-cd-theme="dark"] .cd-section { background: var(--cd-bg); }
[data-cd-theme="dark"] .cd-features-bg { background: linear-gradient(180deg, var(--cd-bg) 0%, #091630 100%); }
[data-cd-theme="dark"] .cd-card, [data-cd-theme="dark"] .cd-feature-item, [data-cd-theme="dark"] .cd-kb-card,
[data-cd-theme="dark"] .action-icon-btns a, [data-cd-theme="dark"] .cd-float-badge { background: var(--cd-surface); border-color: var(--cd-line); color: var(--cd-ink); }
[data-cd-theme="dark"] .cd-float-badge { color: #0B1F26; background: #fff; }
[data-cd-theme="dark"] .cd-section-title, [data-cd-theme="dark"] .cd-card-title, [data-cd-theme="dark"] .cd-feature-title { color: var(--cd-ink); }
[data-cd-theme="dark"] .cd-section-sub, [data-cd-theme="dark"] .cd-card-desc, [data-cd-theme="dark"] .cd-feature-desc { color: var(--cd-muted); }
[data-cd-theme="dark"] .master-breadcrumb { background: transparent; border-color: transparent; }

/* Komponen Bootstrap/WHMCS di mode gelap */
[data-cd-theme="dark"] .card, [data-cd-theme="dark"] .panel, [data-cd-theme="dark"] .list-group, [data-cd-theme="dark"] .list-group-item,
[data-cd-theme="dark"] .dropdown-menu, [data-cd-theme="dark"] .modal-content, [data-cd-theme="dark"] .popover, [data-cd-theme="dark"] .table-container,
[data-cd-theme="dark"] .card-header, [data-cd-theme="dark"] .card-footer, [data-cd-theme="dark"] .panel-heading { background: var(--cd-surface) !important; color: var(--cd-ink); border-color: var(--cd-line) !important; }
[data-cd-theme="dark"] .form-control, [data-cd-theme="dark"] .custom-select, [data-cd-theme="dark"] select.form-control, [data-cd-theme="dark"] textarea.form-control,
[data-cd-theme="dark"] .input-group-text, [data-cd-theme="dark"] .field, [data-cd-theme="dark"] .iti__country-list { background: var(--cd-surface) !important; color: var(--cd-ink) !important; border-color: var(--cd-line-2) !important; }
[data-cd-theme="dark"] .form-control::placeholder, [data-cd-theme="dark"] .field::placeholder { color: var(--cd-faint); }
[data-cd-theme="dark"] .table, [data-cd-theme="dark"] .table td, [data-cd-theme="dark"] .table th { color: var(--cd-ink); border-color: var(--cd-line); }
[data-cd-theme="dark"] .table thead th, [data-cd-theme="dark"] table.dataTable thead th { background: var(--cd-hover); color: var(--cd-muted); }
[data-cd-theme="dark"] .btn-default, [data-cd-theme="dark"] .btn-secondary, [data-cd-theme="dark"] .btn-outline-primary { background: var(--cd-surface); color: var(--cd-ink); border-color: var(--cd-line-2); }
[data-cd-theme="dark"] .modal-header, [data-cd-theme="dark"] .modal-footer { border-color: var(--cd-line); }
[data-cd-theme="dark"] .close, [data-cd-theme="dark"] .modal-title { color: var(--cd-ink); text-shadow: none; }
[data-cd-theme="dark"] .alert-info { color: #C5DCFA; border-color: rgba(90,140,230,.4); }
[data-cd-theme="dark"] .alert-success { color: #B5F0D9; border-color: rgba(76,214,165,.3); }
[data-cd-theme="dark"] .alert-warning { color: #FBDCA5; border-color: rgba(250,173,62,.3); }
[data-cd-theme="dark"] .alert-danger { color: #FFC8C2; border-color: rgba(255,142,131,.3); }
[data-cd-theme="dark"] .cdn-callout-danger { background: linear-gradient(180deg, var(--cd-surface), #1B1420); border-color: rgba(255,142,131,.35); }
[data-cd-theme="dark"] .cdn-callout-info { border-color: rgba(90,140,230,.45); }
[data-cd-theme="dark"] .cdn-btn-ghost, [data-cd-theme="dark"] .cdn-btn-outline { background: var(--cd-surface); }
[data-cd-theme="dark"] .cdp-tab.is-active, [data-cd-theme="dark"] .cdp-cycle.is-active { background: var(--cd-surface); color: var(--cd-ink); box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px var(--cd-line-2); }
[data-cd-theme="dark"] .cdp-card.is-featured { box-shadow: 0 0 0 1px var(--cd-brand), var(--shadow-2); }
[data-cd-theme="dark"] .cdp-ribbon, [data-cd-theme="dark"] .cdn-badge { color: #2B1A00; }
[data-cd-theme="dark"] .cd-hero { background-color: #050E20; }

/* ============================================================
   12. Tombol tema & dropdown "More" (disamakan dengan dropdown Store)
   ============================================================ */
.cdn-theme-btn .icon-sun { display: none; }
[data-cd-theme="dark"] .cdn-theme-btn .icon-sun { display: block; }
[data-cd-theme="dark"] .cdn-theme-btn .icon-moon { display: none; }
.cdn-theme-btn svg { transition: transform var(--dur-3) var(--ease-spring); }
.cdn-theme-btn:hover svg { transform: rotate(20deg) scale(1.08); }

.cdn-header .collapsable-dropdown-menu { padding: .4rem; min-width: 220px; }
.cdn-header .collapsable-dropdown-menu > li.dropdown-item { display: block; }
.cdn-header .collapsable-dropdown > a.dropdown-toggle { padding-right: .7rem !important; }

/* Crossfade saat ganti tema */
html.cdn-theme-anim, html.cdn-theme-anim *, html.cdn-theme-anim *::before, html.cdn-theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .25s ease, fill .25s ease !important;
}

/* ============================================================
   13. Keranjang belanja & checkout (standard_cart)
   ============================================================ */
body #order-standard_cart { color: var(--cd-ink); }
body #order-standard_cart .cart-body { padding-top: .25rem; }
body #order-standard_cart .header-lined { margin-bottom: 1.25rem; }
body #order-standard_cart .header-lined h1, body #order-standard_cart .font-size-36 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: var(--cd-ink); }
body #order-standard_cart .header-lined p, body #order-standard_cart p { color: var(--cd-muted); }

/* Sidebar kategori */
body #order-standard_cart .cart-sidebar { padding-right: 1.25rem; }
body #order-standard_cart .cart-sidebar .card, body #order-standard_cart .cart-sidebar .list-group { border-radius: var(--radius) !important; }
body #order-standard_cart .cart-sidebar .list-group-item { border: 0 !important; border-bottom: 1px solid var(--cd-line) !important; background: transparent !important; color: var(--cd-ink-2); font-size: .9rem; padding: .7rem 1rem; transition: background var(--dur-1), padding-left var(--dur-2) var(--ease-out), color var(--dur-1); }
body #order-standard_cart .cart-sidebar .list-group-item:last-child { border-bottom: 0 !important; }
body #order-standard_cart .cart-sidebar .list-group-item:hover { background: var(--cd-hover) !important; padding-left: 1.3rem; }
body #order-standard_cart .cart-sidebar .list-group-item.active { background: var(--cd-primary-light) !important; color: var(--cd-primary) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--cd-brand); }
body #order-standard_cart .cart-sidebar h3, body #order-standard_cart .cart-sidebar .card-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cd-muted); font-weight: 650; }

/* Daftar produk */
body #order-standard_cart .products .product { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 18px; padding: 1.5rem; margin-bottom: 1.25rem; overflow: hidden; }
body #order-standard_cart .products .product header { background: transparent; border: 0; padding: 0; margin: 0 0 1rem; box-shadow: none; }
body #order-standard_cart .products .product header span, body #order-standard_cart .products .product header .product-name { color: var(--cd-ink); font-size: 1.1rem; font-weight: 650; background: transparent; padding: 0; }
body #order-standard_cart .products .product div.product-desc { color: var(--cd-ink-2); font-size: .92rem; }
body #order-standard_cart .products .product div.product-desc ul { padding-left: 1.1rem; }
body #order-standard_cart .products .product footer { background: transparent; border: 0; padding: 1rem 0 0; margin: 0; }
body #order-standard_cart .products .product div.product-pricing { color: var(--cd-ink); font-size: 1rem; }
body #order-standard_cart .products .product div.product-pricing span.price { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body #order-standard_cart .products .product .btn-order-now { width: 100%; border-radius: 11px; min-height: 44px; font-weight: 600; }

/* Item keranjang */
body #order-standard_cart .view-cart-items-header { background: var(--cd-hover); border: 1px solid var(--cd-line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--cd-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; padding: .85rem 1.25rem; margin: 0; }
body #order-standard_cart .view-cart-items { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 1.25rem; overflow: hidden; }
body #order-standard_cart .view-cart-items .item { padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--cd-line); background: transparent; transition: background var(--dur-1); animation: cdn-rise var(--dur-3) var(--ease-out) both; }
body #order-standard_cart .view-cart-items .item:hover { background: var(--cd-hover); }
body #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
body #order-standard_cart .view-cart-items .item-title { font-weight: 650; color: var(--cd-ink); font-size: 1rem; }
body #order-standard_cart .view-cart-items .item-group, body #order-standard_cart .view-cart-items .item-domain { color: var(--cd-muted); font-size: .86rem; display: block; }
body #order-standard_cart .view-cart-items .item-price { font-weight: 700; font-size: 1.05rem; color: var(--cd-ink); font-variant-numeric: tabular-nums; }
body #order-standard_cart .view-cart-items .item-price .cycle { display: block; color: var(--cd-muted); font-weight: 400; font-size: .8rem; }
body #order-standard_cart .btn-remove-from-cart { color: var(--cd-faint); border-radius: 9px; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1); }
body #order-standard_cart .btn-remove-from-cart:hover { background: var(--cd-bad-bg); color: var(--cd-bad); transform: scale(1.08); }
body #order-standard_cart .view-cart-items .btn-link { color: var(--cd-primary); }
body #order-standard_cart .view-cart-empty, body #order-standard_cart .empty-cart { background: var(--cd-surface); border: 1px dashed var(--cd-line-2); border-radius: 18px; padding: 3rem 1.5rem; text-align: center; color: var(--cd-muted); }

/* Ringkasan pesanan */
body #order-standard_cart .secondary-cart-sidebar { position: sticky; top: 76px; align-self: flex-start; }
body #order-standard_cart .order-summary { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow-1); }
body #order-standard_cart .order-summary h2 { background: transparent; border: 0; padding: 0; margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--cd-ink); text-align: left; }
body #order-standard_cart .order-summary .summary-container { background: transparent; border: 0; padding: 0; }
body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals, body #order-standard_cart .order-summary .recurring-totals { border-color: var(--cd-line); color: var(--cd-ink-2); font-size: .92rem; }
body #order-standard_cart .order-summary .bordered-totals { border-top: 1px solid var(--cd-line); border-bottom: 1px solid var(--cd-line); padding: .75rem 0; margin: .75rem 0; }
body #order-standard_cart .order-summary .total-due-today span { color: var(--cd-muted); }
body #order-standard_cart .order-summary .total-due-today .amt { color: var(--cd-ink); font-size: 2rem; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
body #order-standard_cart .order-summary .product-name { font-weight: 600; color: var(--cd-ink); }
body #order-standard_cart .order-summary .product-group { color: var(--cd-muted); }
body #order-standard_cart .order-summary .btn-checkout, body #order-standard_cart .btn-checkout { width: 100%; min-height: 50px; border-radius: 12px; font-size: 1rem; font-weight: 650; background: var(--cd-btn-bg) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(21,53,106,.8); }
body #order-standard_cart .order-summary .btn-checkout:hover { background: var(--cd-btn-hover) !important; transform: translateY(-1px); }
body #order-standard_cart .order-summary .btn-checkout.disabled, body #order-standard_cart .btn-checkout:disabled { opacity: .5; pointer-events: none; box-shadow: none; }
body #order-standard_cart .order-summary .btn-continue-shopping { display: block; text-align: center; color: var(--cd-primary); font-weight: 600; margin-top: .75rem; }
body #order-standard_cart .view-cart-promotion-code, body #order-standard_cart .view-cart-tabs .tab-content, body #order-standard_cart .promo-code-input { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--radius); }
body #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 1px solid var(--cd-line); }
body #order-standard_cart .view-cart-tabs .tab-content { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 1.25rem; }

/* Form konfigurasi & checkout */
body #order-standard_cart .sub-heading, body #order-standard_cart .sub-heading-borderless { border: 0; margin: 1.75rem 0 1rem; height: auto; text-align: left; }
body #order-standard_cart .sub-heading span, body #order-standard_cart .sub-heading-borderless span { background: transparent; padding: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; color: var(--cd-ink); text-transform: none; }
body #order-standard_cart .sub-heading::after { content: ''; display: block; height: 1px; background: var(--cd-line); margin-top: .6rem; }
body #order-standard_cart .field, body #order-standard_cart .form-control { height: 46px; border: 1px solid var(--cd-line-2); border-radius: 11px; background: var(--cd-surface); color: var(--cd-ink); box-shadow: none; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
body #order-standard_cart textarea.field { height: auto; }
body #order-standard_cart .field:focus, body #order-standard_cart .form-control:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.16); outline: 0; }
body #order-standard_cart .field-container, body #order-standard_cart .product-info, body #order-standard_cart .domain-checker-container, body #order-standard_cart .account-select-container, body #order-standard_cart .signin-container { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--radius); }
body #order-standard_cart .account-select-container div.account { border-color: var(--cd-line); background: transparent; transition: background var(--dur-1), border-color var(--dur-1); }
body #order-standard_cart .account-select-container div.account.active { background: var(--cd-primary-light); border-color: var(--cd-brand); }
body #order-standard_cart .panel-addon { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-3); }
body #order-standard_cart .panel-addon:hover { transform: translateY(-3px); border-color: var(--cd-brand); box-shadow: var(--shadow-2); }
body #order-standard_cart .panel-addon .panel-add { background: var(--cd-hover); border-top: 1px solid var(--cd-line); color: var(--cd-primary); font-weight: 600; }
body #order-standard_cart .panel-addon-selected { border-color: var(--cd-brand); box-shadow: 0 0 0 1px var(--cd-brand); }
body #order-standard_cart .panel-addon-selected .panel-add { background: var(--cd-btn-bg); color: #fff; }
body #order-standard_cart .domain-selection-options .option { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 12px; transition: border-color var(--dur-1), background var(--dur-1); }
body #order-standard_cart .domain-selection-options .option:hover { background: var(--cd-hover); }
body #order-standard_cart .domain-selection-options .option-selected { background: var(--cd-primary-light); border-color: var(--cd-brand); }
body #order-standard_cart .domain-input-group .input-group-text, body #order-standard_cart .domain-input-group .btn { border-radius: 11px; }
body #order-standard_cart .domain-checker-available { color: var(--cd-ok); }
body #order-standard_cart .domain-checker-unavailable, body #order-standard_cart .domain-checker-invalid { color: var(--cd-bad); }
body #order-standard_cart .apply-credit-container, body #order-standard_cart .checkout-security-msg { background: var(--cd-hover); border: 1px solid var(--cd-line); border-radius: 12px; color: var(--cd-ink-2); }
body #order-standard_cart .btn-primary, body #order-standard_cart .btn-order-now, body #order-standard_cart .btn-success { background: var(--cd-btn-bg); border-color: var(--cd-btn-bg); color: #fff; border-radius: 11px; }
body #order-standard_cart .btn-primary:hover, body #order-standard_cart .btn-order-now:hover { background: var(--cd-btn-hover); border-color: var(--cd-btn-hover); }
body #order-standard_cart .iradio_square-blue, body #order-standard_cart .icheckbox_square-blue { filter: hue-rotate(-30deg) saturate(.9); }
body #order-standard_cart .modal-content { background: var(--cd-surface); }

@media (max-width: 991.98px) {
  body #order-standard_cart .secondary-cart-sidebar { position: static; }
  body #order-standard_cart .cart-sidebar { padding-right: 15px; }
}
@media (max-width: 575.98px) {
  body #order-standard_cart .view-cart-items .item { padding: 1rem; }
  body #order-standard_cart .order-summary { padding: 1.15rem; }
}

/* Fallback tanpa JS: tampilkan menu setelah 1.2 dtk */
@keyframes cdn-show { to { visibility: visible; } }
.cdn-menu { animation: cdn-show 0s linear 1.2s forwards; }

/* Menu harus dibatasi lebar kolomnya agar deteksi overflow (More) akurat */
@media (min-width: 1200px) {
  .cdn-nav { overflow: visible; }
  .cdn-nav .navbar-collapse { flex: 1 1 0 !important; min-width: 0; }
}

/* Tombol primer landing (custom.css) ikut token tombol agar kontras di dark mode */
.cd-btn-primary { background: var(--cd-btn-bg) !important; }
.cd-btn-primary:hover { background: var(--cd-btn-hover) !important; }

/* Cart: koreksi ukuran harga & latar zebra bawaan orderform */
body #order-standard_cart .view-cart-items .item { background: transparent !important; }
body #order-standard_cart .view-cart-items .item:hover { background: var(--cd-hover) !important; }
body #order-standard_cart .view-cart-items .item-price > span:first-child { font-size: 1.05rem !important; font-weight: 700; }
body #order-standard_cart .view-cart-items .item-price .cycle { font-size: .8rem !important; }

/* Mobile: hindari badge melayang menyebabkan scroll horizontal */
.cd-hero { overflow: hidden; }
@media (max-width: 575.98px) { .cd-float-badge { display: none; } }

/* ============================================================
   14. Perbaikan v3.2 (navy): sticky, padding, dropdown akun, footer, sidebar, domain
   ============================================================ */

/* Sticky header: theme.css memaksa html/body height:100% sehingga sticky berhenti setelah 1 layar */
html, body { height: auto !important; min-height: 100%; }

/* Dropdown akun: rata kanan, tidak terpotong */
.cdn-user { position: relative; }
.cdn-user-menu { right: 0 !important; left: auto !important; top: calc(100% + 8px) !important; margin: 0 !important; transform: none !important; min-width: 260px; max-width: min(320px, calc(100vw - 24px)); }

/* Padding card & tabel (teks tidak mepet pembatas) */
.card-body, .panel-body { padding: 1.25rem 1.5rem; }
.card-header, .panel-heading, .card-footer, .panel-footer { padding: 1rem 1.5rem !important; }
.list-group-item { padding: .85rem 1.5rem; }
.card .table th, .card .table td, .panel .table th, .panel .table td, .table-container .table th, .table-container .table td { padding: .9rem 1rem; }
.card .table th:first-child, .card .table td:first-child, .panel .table th:first-child, .panel .table td:first-child,
.table-container .table th:first-child, .table-container .table td:first-child { padding-left: 1.5rem; }
.card .table th:last-child, .card .table td:last-child, .panel .table th:last-child, .panel .table td:last-child,
.table-container .table th:last-child, .table-container .table td:last-child { padding-right: 1.5rem; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: .9rem 1.5rem; margin: 0; }
.dataTables_wrapper .dataTables_filter input { margin-left: .5rem; }
.table-container { overflow-x: auto; }
.alert { padding: .95rem 1.25rem; }
.modal-header, .modal-footer { padding: 1rem 1.5rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.client-home-cards .card-body { padding: 1.25rem 1.5rem; }
.tiles .tile, .client-home-panels .card { padding: 1.25rem 1.5rem; }
.card > .list-group, .panel > .list-group { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.list-group-flush > .list-group-item { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Sidebar (pengunjung): tanpa rounded ganda — card sudah rounded */
.sidebar .card, .cart-sidebar .card { overflow: hidden; }
.sidebar .list-group-item, .cart-sidebar .list-group-item, .card .list-group-item, .card-sidebar .list-group-item { border-radius: 0 !important; }
.sidebar .list-group-item.active, .cart-sidebar .list-group-item.active { border-radius: 0 !important; }

/* Footer: logo di baris sendiri, keterangan di bawahnya */
.cd-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.cd-footer-brand .brand-logo { display: block; margin: 0 0 1rem; }
.cd-footer-brand .brand-tagline { display: block; margin: 0 0 .6rem; }
.cd-footer-brand .brand-desc { display: block; max-width: 34ch; }

/* Tombol putih di section CTA: selalu terbaca (terang & gelap) */
.cd-btn-white { background: #fff !important; color: #0B2447 !important; }
.cd-btn-white:hover { background: #E7EDF8 !important; color: #0B2447 !important; }
.cd-btn-outline-white-solid { color: #fff !important; }

/* Bilah aksi pengganti sidebar (detail layanan/domain) */
.cdn-actionbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.cdn-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 .95rem; border-radius: 10px; border: 1px solid var(--cd-line-2); background: var(--cd-surface); color: var(--cd-ink) !important; font-size: .875rem; font-weight: 600; text-decoration: none !important; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); }
.cdn-action:hover { border-color: var(--cd-brand); background: var(--cd-hover); transform: translateY(-1px); }
.cdn-action.is-current { background: var(--cd-primary-light); color: var(--cd-primary) !important; border-color: transparent; }
.cdn-action i { color: var(--cd-faint); }

/* ============================================================
   15. Domain: daftar & transfer
   ============================================================ */
.cdd-switch { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--cd-track); border-radius: 12px; margin: 0 0 1.5rem; }
.cdd-switch a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1.15rem; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--cd-muted) !important; text-decoration: none !important; transition: background var(--dur-2) var(--ease-out), color var(--dur-1), box-shadow var(--dur-2); }
.cdd-switch a:hover { color: var(--cd-ink) !important; }
.cdd-switch a.is-active { background: var(--cd-surface); color: var(--cd-ink) !important; box-shadow: 0 1px 3px rgba(11,27,51,.15), 0 0 0 1px var(--cd-line); }
.cdd-switch svg { width: 16px; height: 16px; }

body #order-standard_cart .domain-checker-container { background: linear-gradient(135deg, var(--cd-surface) 0%, var(--cd-primary-light) 140%); border: 1px solid var(--cd-line); border-radius: 20px; box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 1.5rem; }
body #order-standard_cart .domain-checker-bg { background: transparent; padding: 2.25rem 1.5rem; margin: 0; }
body #order-standard_cart .domain-checker-bg .input-group-box, body #order-standard_cart .domain-checker-bg .input-group { background: var(--cd-surface); border: 1.5px solid var(--cd-line-2); border-radius: 14px; padding: .3rem; box-shadow: 0 10px 30px -18px rgba(11,27,51,.45); transition: border-color var(--dur-1), box-shadow var(--dur-2); flex-wrap: nowrap; }
body #order-standard_cart .domain-checker-bg .input-group:focus-within { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.16), 0 10px 30px -18px rgba(11,27,51,.45); }
body #order-standard_cart .domain-checker-bg .form-control { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 52px; font-size: 1.05rem; padding-left: 1rem; }
body #order-standard_cart .domain-checker-bg .btn-primary, body #order-standard_cart .domain-check-availability { height: 52px; border-radius: 11px !important; padding: 0 1.75rem; font-weight: 650; }

body #order-standard_cart .domain-checker-result-headline { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 16px; padding: 1.5rem; margin: 0 0 1.25rem; text-align: center; animation: cdn-rise var(--dur-3) var(--ease-out) both; }
body #order-standard_cart .domain-checker-available { color: var(--cd-ok); font-size: 1.15rem; font-weight: 650; }
body #order-standard_cart .domain-checker-unavailable, body #order-standard_cart .domain-checker-invalid { color: var(--cd-bad); font-weight: 600; }
body #order-standard_cart .domain-lookup-primary-results .headline, body #order-standard_cart .domain-price { font-size: 1.1rem; color: var(--cd-ink); }
body #order-standard_cart .domain-price .price { font-size: 1.8rem; font-weight: 750; letter-spacing: -.03em; margin-right: .75rem; font-variant-numeric: tabular-nums; }

body #order-standard_cart .spotlight-tlds { margin: 0 0 1.25rem; }
body #order-standard_cart .spotlight-tlds-container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
body #order-standard_cart .spotlight-tld-container { width: auto !important; float: none !important; padding: 0 !important; }
body #order-standard_cart .spotlight-tld { height: 100%; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 14px; padding: 1.1rem .75rem; text-align: center; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-3); }
body #order-standard_cart .spotlight-tld:hover { transform: translateY(-3px); border-color: var(--cd-brand); box-shadow: var(--shadow-2); }
body #order-standard_cart .spotlight-tld .price { display: block; margin: .35rem 0 .6rem; font-weight: 700; color: var(--cd-ink); }
body #order-standard_cart .spotlight-tld .btn { border-radius: 9px; font-weight: 600; width: 100%; }
body #order-standard_cart .spotlight-tld .btn-add-to-cart { background: var(--cd-btn-bg); color: #fff; border-color: var(--cd-btn-bg); }
body #order-standard_cart .spotlight-tld .btn.unavailable, body #order-standard_cart .spotlight-tld .btn.invalid { background: var(--cd-track); color: var(--cd-muted); border-color: transparent; }

body #order-standard_cart .suggested-domains { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 16px; overflow: hidden; margin: 0 0 1.5rem; }
body #order-standard_cart .suggested-domains .card-header, body #order-standard_cart .suggested-domains .panel-heading { background: transparent !important; font-weight: 650; border-bottom: 1px solid var(--cd-line) !important; }
body #order-standard_cart .domain-suggestion.list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.5rem; border: 0 !important; border-bottom: 1px solid var(--cd-line) !important; background: transparent; transition: background var(--dur-1); }
body #order-standard_cart .domain-suggestion.list-group-item:hover { background: var(--cd-hover); }
body #order-standard_cart .domain-suggestion .domain { font-weight: 650; color: var(--cd-ink); }
body #order-standard_cart .domain-suggestion .extension { color: var(--cd-primary); font-weight: 650; }
body #order-standard_cart .domain-suggestion .actions { position: static !important; display: flex; align-items: center; gap: .9rem; margin-left: auto; }
body #order-standard_cart .domain-suggestion .price { font-weight: 700; color: var(--cd-ink); font-variant-numeric: tabular-nums; }
body #order-standard_cart .domain-suggestion .btn-add-to-cart { border-radius: 9px; font-weight: 600; background: var(--cd-btn-bg); color: #fff; border-color: var(--cd-btn-bg); }
body #order-standard_cart .domain-suggestion .promo span { border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; background: var(--cd-orange-soft); color: var(--cd-orange-ink); }

body #order-standard_cart .domain-pricing .featured-tld { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 16px; padding: 1.25rem; margin-bottom: 1rem; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2); }
body #order-standard_cart .domain-pricing .featured-tld:hover { transform: translateY(-3px); border-color: var(--cd-brand); }
body #order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
body #order-standard_cart .tld-filters .badge { padding: .45rem .8rem; border-radius: 999px; font-weight: 600; background: var(--cd-track) !important; color: var(--cd-ink-2) !important; transition: background var(--dur-1), color var(--dur-1); }
body #order-standard_cart .tld-filters .badge:hover, body #order-standard_cart .tld-filters .badge.active { background: var(--cd-btn-bg) !important; color: #fff !important; }
body #order-standard_cart .domain-pricing .bg-white { background: var(--cd-surface) !important; border: 1px solid var(--cd-line); border-radius: 16px; overflow: hidden; }
body #order-standard_cart .tld-pricing-header { background: var(--cd-hover); padding: .9rem 0; color: var(--cd-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
body #order-standard_cart .tld-row { padding: .85rem 0; border-top: 1px solid var(--cd-line); transition: background var(--dur-1); }
body #order-standard_cart .tld-row:hover { background: var(--cd-hover); }

/* Transfer */
.cdd-steps { list-style: none; margin: 0 auto 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 820px; counter-reset: cdd; }
.cdd-steps li { position: relative; padding: 1rem 1.1rem 1rem 3.2rem; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 14px; font-size: .88rem; color: var(--cd-ink-2); line-height: 1.45; counter-increment: cdd; }
.cdd-steps li::before { content: counter(cdd); position: absolute; left: 1rem; top: 1rem; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--cd-primary-light); color: var(--cd-primary); font-weight: 700; font-size: .85rem; }
.cdd-steps strong { display: block; color: var(--cd-ink); font-size: .92rem; margin-bottom: .1rem; }
body #order-standard_cart #frmDomainTransfer .card { max-width: 820px; margin: 0 auto 1rem; }
body #order-standard_cart #frmDomainTransfer .card-header { background: transparent !important; border-bottom: 0 !important; padding-bottom: 0 !important; }
body #order-standard_cart #frmDomainTransfer .card-title { font-size: 1.1rem !important; font-weight: 700; }
body #order-standard_cart #frmDomainTransfer .card-footer { text-align: right; background: var(--cd-hover) !important; border-top: 1px solid var(--cd-line) !important; }
body #order-standard_cart #frmDomainTransfer .btn-transfer { min-height: 46px; padding: 0 1.6rem; font-weight: 650; }
body #order-standard_cart #frmDomainTransfer .col-sm-8 { flex: 0 0 100%; max-width: 100%; margin-left: 0; }

@media (max-width: 767.98px) {
  .cdd-steps { grid-template-columns: 1fr; }
  body #order-standard_cart .domain-suggestion.list-group-item { flex-wrap: wrap; padding: .9rem 1rem; }
  body #order-standard_cart .domain-checker-bg { padding: 1.5rem 1rem; }
  body #order-standard_cart .domain-checker-bg .domain-check-availability { padding: 0 1rem; }
}

/* Tombol primer di atas hero gelap: biru lebih terang agar kontras */
.cd-hero .cd-btn-primary, .cd-hero .cd-domain-bar button { background: #2F68C8 !important; color: #fff !important; }
.cd-hero .cd-btn-primary:hover, .cd-hero .cd-domain-bar button:hover { background: #3E78DA !important; }
.cd-cta .cd-btn-primary, .cd-stats-bg .cd-btn-primary { background: #2F68C8 !important; }

/* Sidebar kategori cart: tanpa radius ganda (card sudah rounded) + spotlight rapi */
body #order-standard_cart .cart-sidebar .list-group-item, body #order-standard_cart .cart-sidebar .list-group-item:first-child, body #order-standard_cart .cart-sidebar .list-group-item:last-child,
body #order-standard_cart .cart-sidebar .list-group-item.active { border-radius: 0 !important; }
body #order-standard_cart .spotlight-tlds { background: transparent !important; border: 0 !important; padding: 0 !important; }
body #order-standard_cart .spotlight-tlds-container { align-items: start; }
body #order-standard_cart .spotlight-tld { height: auto; }

/* ============================================================
   16. Parallax: orb dekoratif & hint kinerja
   ============================================================ */
.cd-section { position: relative; overflow: hidden; }
.cd-section > .container { position: relative; z-index: 1; }
.cdx-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; will-change: translate; }
.cdx-orb-1 { width: 360px; height: 360px; left: -120px; top: 8%; background: rgba(43,99,192,.22); }
.cdx-orb-2 { width: 280px; height: 280px; right: -80px; bottom: 6%; background: rgba(0,156,184,.20); }
.cdx-orb-3 { width: 320px; height: 320px; right: -100px; top: 10%; background: rgba(250,173,62,.16); }
[data-cd-theme="dark"] .cdx-orb-1 { background: rgba(43,99,192,.28); }
[data-parallax], [data-parallax-mouse], [data-parallax-fade] { will-change: translate; }
@media (prefers-reduced-motion: reduce) { .cdx-orb { display: none; } [data-parallax], [data-parallax-mouse], [data-parallax-fade] { translate: none !important; } }

/* ============================================================
   17. Hero banner visual (wanita + dashboard)
   ============================================================ */
.cd-hv { position: relative; height: 560px; display: flex; justify-content: center; align-items: flex-end; isolation: isolate; }
.cd-hv-arch {
  position: absolute; left: 50%; bottom: 0; z-index: 0; width: min(430px, 86%); height: 440px; transform: translateX(-50%);
  border-radius: 215px 215px 30px 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(165deg, #3A76D8 0%, #1E55B0 42%, #0F3270 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 50px 90px -34px rgba(0,0,0,.65);
}
.cd-hv-ring {
  position: absolute; left: 50%; bottom: 22px; z-index: 0; width: 500px; height: 500px; margin-left: -250px; border-radius: 50%;
  border: 1.5px dashed rgba(250,173,62,.55); animation: cd-hv-spin 60s linear infinite;
}
@keyframes cd-hv-spin { to { rotate: 360deg; } }
.cd-hv-img { position: relative; z-index: 2; display: block; height: 540px; width: auto; max-width: none; filter: drop-shadow(0 26px 28px rgba(3,10,28,.45)); user-select: none; -webkit-user-drag: none; }

.cd-hv-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; border-radius: 16px; text-decoration: none !important;
  animation: cdn-float 6s ease-in-out infinite;
}
.cd-hv-chip { padding: .6rem .9rem .6rem .65rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.cd-hv-chip b { display: block; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.02em; }
.cd-hv-chip i { display: block; font-style: normal; font-size: .72rem; color: rgba(255,255,255,.72); }
.cd-hv-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(92,200,219,.22); color: #8EE0EE; }
.cd-hv-ico-ok { background: rgba(250,173,62,.22); color: #FAC46B; }
.cd-hv-uptime { top: 76px; left: 0; animation-delay: -1.5s; }
.cd-hv-ssl { top: 210px; right: -6px; animation-delay: -3.2s; }
.cd-hv-price { left: -4px; bottom: 64px; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .9rem 1.15rem; background: #fff; color: #0B2447; box-shadow: 0 24px 44px -18px rgba(0,0,0,.55); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); animation-delay: -.6s; }
.cd-hv-price:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -18px rgba(0,0,0,.6); }
.cd-hv-k { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: #536480; }
.cd-hv-v { font-size: 1.6rem; font-weight: 750; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; color: #0B2447; }
.cd-hv-v small { font-size: .8rem; font-weight: 600; color: #536480; letter-spacing: 0; margin-left: .1rem; }
.cd-hv-v-sm { font-size: 1.15rem; }
.cd-hv-go { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .8rem; font-weight: 700; color: #15356A; }
.cd-hv-go svg { transition: transform var(--dur-2) var(--ease-out); }
.cd-hv-price:hover .cd-hv-go svg { transform: translateX(3px); }

@media (max-width: 1199.98px) { .cd-hv-uptime { left: -10px; } .cd-hv-ssl { right: -14px; } }
@media (max-width: 991.98px) {
  .cd-hv { height: 470px; margin-top: 2rem; }
  .cd-hv-img { height: 450px; }
  .cd-hv-arch { height: 370px; width: min(360px, 80%); border-radius: 180px 180px 26px 26px; }
  .cd-hv-ring { width: 420px; height: 420px; margin-left: -210px; }
  .cd-hv-price { left: 4%; bottom: 40px; }
  .cd-hv-uptime { left: 4%; top: 50px; }
  .cd-hv-ssl { right: 4%; top: 170px; }
}
@media (max-width: 575.98px) {
  .cd-hv { height: 400px; }
  .cd-hv-img { height: 380px; }
  .cd-hv-arch { height: 310px; }
  .cd-hv-ssl { display: none; }
  .cd-hv-price { padding: .7rem .9rem; }
  .cd-hv-v { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .cd-hv-ring, .cd-hv-card { animation: none; } }

/* Menu header: warna mengikuti token (tema bawaan memaksa #444 sehingga redup di dark mode) */
.cdn-header .cdn-menu > li > a, .cdn-header .cdn-menu > li > .nav-link { color: var(--cd-ink-2) !important; }
.cdn-header .cdn-menu > li > a:hover, .cdn-header .cdn-menu > li.active > a, .cdn-header .cdn-menu > li.show > a { color: var(--cd-ink) !important; }
/* Banner: chip SSL di kanan atas agar tidak menutupi tangan */
.cd-hv-ssl { top: 64px; right: -4px; }
@media (max-width: 991.98px) { .cd-hv-ssl { top: 60px; right: 4%; } }

/* Banner v2 (foto wanita-new): ukuran, bayangan lantai, kartu harga navy */
.cd-hv-img { height: 560px; }
.cd-hv::after { content: ''; position: absolute; left: 50%; bottom: -8px; z-index: 1; width: 380px; height: 40px; margin-left: -190px; background: radial-gradient(ellipse at center, rgba(3,10,28,.55), transparent 70%); filter: blur(6px); pointer-events: none; }
.cd-hv-price { background: #0B2447; color: #fff; border: 1px solid rgba(255,255,255,.2); left: -4px; bottom: 96px; }
.cd-hv-price .cd-hv-k { color: rgba(255,255,255,.72); }
.cd-hv-price .cd-hv-v, .cd-hv-price .cd-hv-v small { color: #fff; }
.cd-hv-price .cd-hv-v small { color: rgba(255,255,255,.7); }
.cd-hv-price .cd-hv-go { color: #FAC46B; }
@media (max-width: 991.98px) { .cd-hv-img { height: 450px; } .cd-hv-price { bottom: 70px; } }
@media (max-width: 575.98px) { .cd-hv-img { height: 380px; } .cd-hv::after { width: 280px; margin-left: -140px; } }

/* ============================================================
   18. Badge Google reCAPTCHA — sticky rapi di pojok kanan-bawah,
   tidak menimpa tombol/CTA di halaman pendek (login, dsb.)
   ============================================================ */
.grecaptcha-badge {
  right: 16px !important;
  bottom: 20px !important;
  box-shadow: 0 10px 24px -8px rgba(11,27,51,.35) !important;
  border-radius: 10px !important;
  overflow: hidden;
  transition: box-shadow .2s ease !important;
}
.grecaptcha-badge:hover { box-shadow: 0 14px 30px -8px rgba(11,27,51,.45) !important; }
@media (max-width: 420px) {
  .grecaptcha-badge { transform-origin: bottom right; }
}