/* Tema Samudra Host di atas Lagom2 (T-95). Gaya sama kayak tema WarungHosting/AUHost (T-22..T-27),
   warna dari logo Samudra: biru elektrik #233DFF + hitam. File ini cuma dimuat lewat hook samudra_tema.php. */

:root {
  --sd-biru: #233DFF;
  --sd-biru-tua: #1A2ED6;
  --sd-biru-muda: #E9ECFF;
  --sd-ink: #0A0D1A;
  --sd-ink-2: #141A33;
  --sd-teks: #2B3247;
  --sd-redup: #5B647A;
  --sd-garis: #E3E6EF;
  --sd-kabut: #F4F6FB;
  --sd-putih: #fff;
  --sd-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* owner 27/10: font mono (JetBrains, nol bertitik) gak dipakai lagi, semua angka/label pakai Outfit */
  --sd-mono: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-monospace: 'Outfit', system-ui, sans-serif;
  --sd-radius: 14px;
  --sd-wrap: 1180px;

  /* variabel Lagom2 → warna logo */
  --brand-primary: #233DFF;
  --brand-primary-lighter: #4A60FF;
  --brand-primary-lighter-2: #BCC4FF;
  --brand-primary-lighter-3: #DCE1FF;
  --brand-primary-lighter-4: #E9ECFF;
  --brand-primary-darker: #1A2ED6;
  --brand-primary-gradient-start: #233DFF;
  --brand-primary-gradient-end: #1A2ED6;
  --brand-secondary: #0A0D1A;
  --brand-secondary-darker: #000;
  --brand-secondary-gradient-start: #141A33;
  --brand-secondary-gradient-end: #0A0D1A;
  --brand-info: #233DFF;
  --font-family-base: 'Outfit';
  --body-bg: #F4F6FB;
}

body { font-family: var(--sd-font); color: var(--sd-teks); background: var(--sd-kabut); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .main-header-title { font-family: var(--sd-font); color: var(--sd-ink); letter-spacing: -0.02em; }
.sd-wrap { max-width: var(--sd-wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- buang navigasi samping Lagom, konten selebar layar ---------- */
.app-nav, .main-top, .main-footer, .dark-mode-switcher, .main-body-sidebar-secondary { display: none !important; }
.app-main { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; max-width: none !important; }
body.lagom-layout-left-wide .app-main, body[class*="lagom-layout-left"] .app-main { left: 0 !important; }
.main-body > .container, .main-header > .container { max-width: var(--sd-wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- header atas ---------- */
.sd-top { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.sd-top.sd-scrolled { border-bottom-color: var(--sd-garis); box-shadow: 0 6px 24px -18px rgba(10,13,26,.5); }
.sd-top-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.sd-logo { display: flex; align-items: center; flex: none; }
.sd-logo img { height: 40px; width: auto; display: block; }
.sd-menu { flex: 1; min-width: 0; }
.sd-menu .menu-primary { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; flex-direction: row !important; height: auto !important; }
.sd-menu .menu-primary > li { position: relative; margin: 0; height: auto !important; }
.sd-menu .menu-primary > li > a { display: flex; align-items: center; gap: 6px; height: 40px !important; padding: 0 12px !important; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--sd-ink) !important; text-decoration: none; background: none !important; white-space: nowrap; }
.sd-menu .menu-primary > li > a:hover, .sd-menu .menu-primary > li.active > a { background: var(--sd-biru-muda) !important; color: var(--sd-biru) !important; }
.sd-top .sd-menu .menu-primary > li > a { color: #0A0D1A !important; -webkit-text-fill-color: #0A0D1A; text-shadow: none !important; opacity: 1 !important; }
.sd-top .sd-menu .menu-primary > li > a:hover, .sd-top .sd-menu .menu-primary > li.active > a, .sd-top .sd-menu .menu-primary > li > a:focus-visible { color: #233DFF !important; -webkit-text-fill-color: #233DFF; background: #EEF1FF !important; outline: 2px solid transparent; }
.sd-menu .menu-primary > li > a svg, .sd-menu .menu-primary > li > a img, .sd-menu .menu-primary > li > a .ls, .sd-menu .menu-primary > li > a i:not(.caret), .sd-menu .menu-primary > li > a [class*="icon"] { display: none !important; }
.sd-menu .menu-primary > li > a.dropdown-toggle::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); margin-left: 4px; opacity: .6; position: static !important; }
.sd-menu .menu-primary > li > a .caret, .sd-menu .menu-primary > li > a .arrow { display: none !important; }
.sd-menu .menu-primary > li > .dropdown-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; min-width: 240px; width: auto !important; max-width: 560px; padding: 8px !important; margin: 0 !important; border: 1px solid var(--sd-garis) !important; border-radius: var(--sd-radius) !important; background: #fff !important; box-shadow: 0 24px 48px -20px rgba(10,13,26,.35) !important; display: none; height: auto !important; transform: none !important; }
.sd-menu .menu-primary > li.open > .dropdown-menu, .sd-menu .menu-primary > li:hover > .dropdown-menu, .sd-menu .menu-primary > li:focus-within > .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; }
.sd-menu .menu-primary > li.is-right > .dropdown-menu { left: auto !important; right: 0 !important; }
.sd-menu .dropdown-menu a { display: flex !important; align-items: center; gap: 8px; padding: 9px 12px !important; border-radius: 10px; color: var(--sd-teks) !important; font-size: 14px; font-weight: 500; white-space: nowrap; background: none !important; }
.sd-menu .dropdown-menu a:hover { background: var(--sd-kabut) !important; color: var(--sd-biru) !important; }
.sd-top .sd-menu .dropdown-menu a { color: #22263A !important; -webkit-text-fill-color: #22263A; }
.sd-menu .dropdown-menu svg, .sd-menu .dropdown-menu img { width: 18px !important; height: 18px !important; }
.sd-menu .dropdown-menu .dropdown-header, .sd-menu .dropdown-menu h5, .sd-menu .dropdown-menu .dropdown-mega-title { font-family: var(--sd-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-redup); padding: 10px 12px 4px; margin: 0; }
.sd-panel-tutup { display: none; }

.sd-aksi { display: flex; align-items: center; gap: 8px; flex: none; }
.sd-aksi .top-nav { display: flex !important; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; position: static !important; }
.sd-aksi .top-nav > li { position: relative; }
.sd-aksi .top-nav > li > a { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--sd-garis); border-radius: 10px; background: #fff; color: var(--sd-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.sd-aksi .top-nav > li > a:hover { border-color: var(--sd-biru); color: var(--sd-biru) !important; }
.sd-aksi .top-nav .dropdown-menu { border-radius: var(--sd-radius) !important; border: 1px solid var(--sd-garis) !important; box-shadow: 0 24px 48px -20px rgba(10,13,26,.35) !important; }
.sd-aksi > a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--sd-biru); color: #fff !important; font-weight: 600; text-decoration: none; }
.sd-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--sd-garis); border-radius: 12px; background: #fff; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; }
.sd-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--sd-ink); }
.sd-overlay { display: none; }

/* ---------- band judul gelap ---------- */
.main-header.sd-band, .main-header { position: relative; overflow: hidden; margin: 0 !important; padding: 44px 0 40px !important; background-color: var(--sd-ink) !important; background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px), radial-gradient(60% 120% at 85% 0%, rgba(35,61,255,.45), transparent 60%) !important; background-size: 22px 22px, 100% 100% !important; }
.main-header .container { padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; }
.main-header .main-header-title, .main-header h1 { color: #fff !important; font-size: clamp(30px, 4vw, 46px); font-weight: 700; margin: 0; letter-spacing: -0.03em; }
.main-header .breadcrumb, .main-header .breadcrumb a { color: rgba(255,255,255,.65) !important; background: none; }
.main-body { background: var(--sd-kabut); padding-top: 32px; padding-bottom: 56px; }

/* ---------- kartu, panel, form, tombol ---------- */
.panel, .panel-sidebar, .package, .card, .tile, .login-wrapper, .section .panel { border: 1px solid var(--sd-garis) !important; border-radius: var(--sd-radius) !important; box-shadow: 0 1px 2px rgba(10,13,26,.04) !important; background: #fff; }
.panel-sidebar .panel-heading, .panel-sidebar .panel-title { font-family: var(--sd-font); font-weight: 700; color: var(--sd-ink); }
.panel-sidebar .list-group-item.active, .panel-sidebar .list-group-item.active:hover { background: var(--sd-biru-muda) !important; color: var(--sd-biru) !important; border-color: transparent !important; }
.package { transition: transform .2s, box-shadow .2s, border-color .2s; }
.package:hover { transform: translateY(-3px); border-color: var(--brand-primary-lighter-2) !important; box-shadow: 0 22px 40px -26px rgba(35,61,255,.55) !important; }
.package-title { font-family: var(--sd-font) !important; font-weight: 700 !important; color: var(--sd-ink) !important; }
.package-price .price, .price-amount, .package .price { font-family: var(--sd-mono) !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--sd-ink) !important; }
.btn { font-family: var(--sd-font); font-weight: 600; border-radius: 12px; }
.btn-primary, .btn-success, .btn-order-now { background: var(--sd-biru) !important; border-color: var(--sd-biru) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(35,61,255,.8); }
.btn-primary:hover, .btn-success:hover, .btn-order-now:hover { background: var(--sd-biru-tua) !important; border-color: var(--sd-biru-tua) !important; }
.btn-default, .btn-outline { border-radius: 12px; border-color: var(--sd-garis) !important; }
.form-control, .form-control:focus { border-radius: 12px; }
.form-control:focus { border-color: var(--sd-biru) !important; box-shadow: 0 0 0 4px rgba(35,61,255,.14) !important; }
a { color: var(--sd-biru); }

/* ---------- halaman login (Lagom "full page") ---------- */
.page-login .main-body, .page-type-full .main-body { min-height: 0 !important; background-color: var(--sd-kabut); background-image: radial-gradient(rgba(10,13,26,.09) 1px, transparent 1px); background-size: 22px 22px; padding: 56px 0 72px; }
.page-type-full .main-body-content { width: 100% !important; max-width: none !important; margin: 0 !important; flex: 1 1 auto; display: flex; justify-content: center; min-height: 0 !important; }
.page-login .login { margin: 0 auto !important; max-width: 460px; width: 100%; }
.page-login .login-wrapper { border-radius: 20px !important; box-shadow: 0 30px 60px -36px rgba(10,13,26,.45) !important; overflow: hidden; }
.page-login .login-body { padding: 40px 40px 32px !important; }
.page-login .login-header { display: none !important; }
.page-login .login-title, .page-login h1, .page-login h2 { text-align: left; font-size: 34px; font-weight: 700; }
.page-login .login-footer { background: var(--sd-kabut); border-top: 1px solid var(--sd-garis); }

/* ---------- footer ---------- */
.sd-foot { background: var(--sd-ink); color: rgba(255,255,255,.66); padding: 64px 0 28px; font-size: 15px; }
.sd-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.sd-foot-logo img { height: 44px; width: auto; display: block; }
.sd-foot-brand p { margin: 18px 0 0; max-width: 320px; line-height: 1.6; }
.sd-foot h3 { font-family: var(--sd-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 4px 0 18px; }
.sd-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sd-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.sd-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sd-foot-bawah { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.sd-foot-bawah p { margin: 0; color: rgba(255,255,255,.45); }
.sd-foot-link { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- HP & tablet ---------- */
@media (max-width: 1199px) {
  .sd-top-in { gap: 12px; height: 64px; }
  .sd-logo img { height: 34px; }
  .sd-burger { display: inline-flex; }
  .sd-aksi .top-nav > li > a { padding: 0 10px; }
  .sd-aksi .top-nav .nav-item-currency, .sd-aksi .top-nav > li > a > span:not([class*="badge"]) { display: none; }
  .sd-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #fff; z-index: 1050; transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding: 64px 16px 24px; box-shadow: -24px 0 48px -24px rgba(10,13,26,.45); visibility: hidden; }
  .sd-open .sd-menu { transform: none; visibility: visible; }
  .sd-overlay { display: block; position: fixed; inset: 0; background: rgba(10,13,26,.45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .sd-open .sd-overlay { opacity: 1; pointer-events: auto; }
  .sd-open { overflow: hidden; }
  .sd-panel-tutup { display: inline-flex; position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--sd-garis); border-radius: 12px; background: #fff; font-size: 26px; line-height: 1; color: var(--sd-ink); cursor: pointer; }
  .sd-menu .menu-primary { flex-direction: column !important; align-items: stretch; gap: 2px; }
  .sd-menu .menu-primary > li > a { height: 48px !important; font-size: 16px; }
  .sd-menu .menu-primary > li > .dropdown-menu { position: static !important; box-shadow: none !important; border: 0 !important; padding: 0 0 6px 12px !important; max-width: none; min-width: 0; }
  .sd-menu .menu-primary > li:hover > .dropdown-menu { display: none !important; }
  .sd-menu .menu-primary > li.open > .dropdown-menu { display: block !important; }
}
@media (max-width: 991px) {
  .sd-foot-grid { grid-template-columns: 1fr 1fr; }
  .sd-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .sd-wrap, .main-body > .container, .main-header > .container { padding-left: 16px; padding-right: 16px; }
  .main-header { padding: 32px 0 28px !important; }
  .page-login .main-body { padding: 28px 0 40px; }
  .page-login .login { padding: 0 16px; }
  .page-login .login-body { padding: 28px 22px 24px !important; }
  .sd-foot { padding-top: 48px; }
  .sd-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .sd-foot-bawah { flex-direction: column; align-items: flex-start; }
}

/* ---------- v1.1: perbaikan dari foto ---------- */
body { padding-top: 0 !important; }
/* harga gak boleh patah baris */
.package-price .price, .price-amount, .package .price { font-size: clamp(24px, 2.3vw, 32px) !important; white-space: nowrap; }
/* judul panel samping masuk ke dalam kotak */
.panel-sidebar { overflow: hidden; }
.panel-sidebar > .panel-heading { padding: 16px 18px 6px !important; margin: 0 !important; background: none !important; border: 0 !important; }
.panel-sidebar > .panel-heading .panel-title, .panel-sidebar .panel-title { font-size: 16px !important; }
.panel-sidebar .list-group, .panel-sidebar .panel-body { padding: 4px 8px 12px !important; }
.panel-sidebar .list-group-item { border: 0 !important; border-radius: 10px !important; padding: 9px 10px !important; }
/* login: kartu utuh, latar bertitik penuh */
.page-type-full .app-main, .page-type-full .main-body, .page-type-full .main-body-content, .page-login .login, .page-login .login-wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
.page-type-full .main-body-content { background: transparent !important; padding: 0 !important; }
.page-login .main-body { display: block !important; }
.page-login .login-wrapper { overflow: hidden !important; }
.page-login .login-footer { padding: 18px 24px !important; text-align: center; }
/* panel menu HP yang lagi ngumpet di kanan jangan bikin halaman melebar */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* efek kaca bikin panel fixed nempel ke header, dan lapisan gelap nutup menu: di HP/tablet header polos & naik di atas lapisan */
@media (max-width: 1199px) {
  .sd-top { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .sd-open .sd-top { z-index: 1060; }
  .sd-menu { height: 100vh; height: 100dvh; }
}
/* submenu (Store dll): tanpa bullet & gambar promo Lagom, rapih di panel HP maupun dropdown laptop */
.sd-menu .dropdown-menu ul, .sd-menu .dropdown-menu li { list-style: none !important; margin: 0; padding: 0; }
.sd-menu .dropdown-menu li::before, .sd-menu .dropdown-menu li::marker { content: none !important; }
.sd-menu .dropdown-menu img, .sd-menu .dropdown-menu .dropdown-banner, .sd-menu .dropdown-menu [class*="promo"] { display: none !important; }
.sd-menu .dropdown-menu svg, .sd-menu .dropdown-menu i, .sd-menu .dropdown-menu .ls { display: none !important; }
.sd-menu .dropdown-menu > ul > li > a:not([href]), .sd-menu .dropdown-menu > ul > li > span, .sd-menu .dropdown-menu .dropdown-title { font-family: var(--sd-mono); font-size: 11px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-redup) !important; padding: 12px 12px 4px !important; }
@media (max-width: 1199px) {
  .sd-menu .dropdown-menu a { white-space: normal; font-size: 15px; padding: 10px 12px !important; }
}

/* ---------- v2: header waktu login (cart/notifikasi cuma ikon, nama akun dipendekin) ---------- */
.sd-top-in { gap: 20px; }
.sd-menu .menu-primary > li > a { padding: 0 10px !important; }
.sd-aksi .top-nav > li > a > span:not([class*="badge"]):not([class*="count"]):not([class*="avatar"]):not(.caret) { display: none; }
.sd-aksi .top-nav > li > a { padding: 0 10px; min-width: 40px; justify-content: center; }
.sd-aksi .top-nav > li.my-account > a > span:not([class*="badge"]):not(.caret) { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1299px) { .sd-aksi .top-nav > li.my-account > a > span:not([class*="badge"]):not(.caret) { display: none; } }
/* notifikasi: cuma ikon (teksnya bukan <span>) */
.sd-aksi .top-nav > li:not(.my-account):not(.nav-item-currency) > a { font-size: 0 !important; gap: 0; }
.sd-aksi .top-nav > li:not(.my-account):not(.nav-item-currency) > a [class*="badge"], .sd-aksi .top-nav > li:not(.my-account):not(.nav-item-currency) > a [class*="count"] { font-size: 11px !important; }
/* halaman daftar: kartu lebih lebar biar kolom form gak patah */
.page-clientregister .login { max-width: 820px !important; }
.page-clientregister .login-body { padding: 40px 48px 32px !important; }
.page-clientregister .login-title, .page-clientregister h1 { text-align: left; }
@media (max-width: 575px) { .page-clientregister .login-body { padding: 28px 20px 24px !important; } }
/* balikin teks mata uang & akun (kehapus aturan "cuma ikon") */
.sd-aksi .top-nav > li.nav-item-currency > a, .sd-aksi .top-nav > li.nav-item-currency > a * { font-size: 14px !important; }
.sd-aksi .top-nav > li.nav-item-currency > a span { display: inline !important; }
@media (min-width: 1300px) {
  .sd-aksi .top-nav > li.my-account > a span:not([class*="badge"]):not(.caret) { display: inline-block !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
}

/* ---------- T-97: kartu transfer bank + upload bukti (hook sd-bukti-transfer.php), versi minimalis ---------- */
.sd-bukti { margin: 0 0 20px; padding: 24px; background: #fff; border: 1px solid var(--sd-garis); border-radius: 16px; display: grid; gap: 16px; scroll-margin-top: 90px; }
.sd-bukti-head { display: grid; gap: 2px; }
.sd-bukti-label { font-family: var(--sd-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-redup); }
.sd-bukti h2 { font-size: 20px; line-height: 1.25 !important; font-weight: 700; margin: 0 !important; padding: 0; }
.sd-rek { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--sd-garis); border-radius: 12px; background: var(--sd-kabut); }
.sd-rek-bank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--sd-garis); font-family: var(--sd-font); font-size: 13px; font-weight: 800; color: #0060AF; letter-spacing: .02em; }
.sd-rek-isi { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sd-rek-no { font-family: var(--sd-mono); font-size: 19px; font-weight: 700; color: var(--sd-ink); letter-spacing: .03em; }
.sd-rek-nama { font-size: 13px; color: var(--sd-redup); }
.sd-salin { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--sd-garis); border-radius: 9px; background: #fff; color: var(--sd-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.sd-salin:hover { border-color: var(--sd-biru); color: var(--sd-biru); }
.sd-salin.ok { border-color: #2d9f46; color: #2d9f46; }
.sd-salin.ok span { display: none; }
.sd-salin.ok::after { content: 'Tersalin'; }
.sd-salin-kecil { height: 28px; padding: 0 8px; }
.sd-salin-kecil.ok::after { content: ''; }
.sd-bukti-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.sd-bukti-meta > div { display: grid; gap: 2px; }
.sd-bukti-meta dt { font-size: 12px; font-weight: 500; color: var(--sd-redup); margin: 0; }
.sd-bukti-meta dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sd-ink); }
.sd-bukti-up { border-top: 1px solid var(--sd-garis); padding-top: 16px; }
.sd-bukti-up > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--sd-biru); font-size: 15px; }
.sd-bukti-up > summary::-webkit-details-marker { display: none; }
.sd-bukti-up > summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.sd-bukti-up[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.sd-bukti-form { display: grid; gap: 12px; margin-top: 14px; }
.sd-bukti-form label { display: grid; gap: 6px; margin: 0; font-weight: 500; font-size: 13px; color: var(--sd-redup); }
.sd-bukti-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-drop { position: relative; display: grid !important; justify-items: center; gap: 2px; padding: 18px 16px; border: 1.5px dashed var(--brand-primary-lighter-2); border-radius: 12px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sd-drop:hover, .sd-drop.ada { border-color: var(--sd-biru); background: var(--sd-biru-muda); }
.sd-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sd-drop-teks { font-size: 14px; font-weight: 600; color: var(--sd-biru); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-drop-info { font-size: 12px; color: var(--sd-redup); }
.sd-bukti-kirim { justify-self: start; padding: 10px 22px; }
.sd-bukti-info { padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.sd-bukti-ok { background: #E7F8EB; color: #1E6B35; }
.sd-bukti-gagal { background: #FDECEC; color: #9B1C1C; }
@media (max-width: 575px) {
  .sd-bukti { padding: 18px; border-radius: 14px; }
  .sd-rek { flex-wrap: wrap; gap: 10px 12px; }
  .sd-rek-no { font-size: 17px; }
  .sd-bukti-meta, .sd-bukti-dua { grid-template-columns: 1fr; }
  .sd-bukti-kirim { justify-self: stretch; }
}
.sd-rek-isi, .sd-rek-no, .sd-rek-nama, .sd-bukti-meta dt, .sd-bukti-meta dd { line-height: 1.35 !important; }
@media (max-width: 575px) {
  .sd-rek { flex-wrap: nowrap; padding: 12px; }
  .sd-rek-bank { width: 42px; }
  .sd-rek-nama { font-size: 12px; }
  .sd-salin:not(.sd-salin-kecil) { width: 36px; padding: 0; justify-content: center; }
  .sd-salin:not(.sd-salin-kecil) span, .sd-salin.ok::after { display: none; }
  .sd-bukti-meta { grid-template-columns: 1fr 1fr; }
}
/* angka sejajar tanpa font mono */
.package-price .price, .price-amount, .package .price, .sd-rek-no, .sd-bukti-meta dd, .main-sidebar [class*="price"], [class*="total"] { font-variant-numeric: tabular-nums; }
.sd-bukti-label, .sd-foot h3, .sd-menu .dropdown-menu .dropdown-header { letter-spacing: .12em; }

/* ---------- T-101 Order v1: halaman order senada samudrahost.com (kartu paket, langkah, ringkasan gelap) ---------- */
/* langkah 1-4 di band judul */
.sd-langkah { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; list-style: none; margin: 0 0 18px; padding: 0; }
.sd-langkah li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-size: 14px; font-weight: 600; }
.sd-langkah li + li::before { content: ''; width: 22px; height: 1px; background: rgba(255,255,255,.25); margin-right: 2px; }
.sd-langkah b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 700; }
.sd-langkah li.udah b { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.sd-langkah li.kini { color: #fff; }
.sd-langkah li.kini b { background: var(--sd-biru); border-color: var(--sd-biru); color: #fff; box-shadow: 0 0 0 4px rgba(35,61,255,.3); }
.page-order .main-header-label { display: inline-flex; margin-top: 14px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.7) !important; font-size: 14px; }
.page-order .main-header-label * { color: inherit !important; background: none !important; }
.page-order .main-header-label .main-header-label-name { color: #fff !important; font-weight: 600; margin-left: 4px; }
.page-order .section-title, .page-order .section-header h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--sd-ink) !important; letter-spacing: -0.02em; }

/* pilih paket: kategori jadi pil, sidebar dibuang, kartu kayak di web */
.page-products .main-sidebar { display: none !important; }
.page-products .main-grid { display: block !important; }
.page-products .main-content { width: 100% !important; max-width: none !important; }
body.sd-kat-ada .main-content .categories-collapsed, body.sd-kat-ada .main-content .categories-collapsed.visible-xs { display: none !important; }
.sd-kat { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; overflow-x: auto; scrollbar-width: none; }
.sd-kat::-webkit-scrollbar { display: none; }
.sd-kat a { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--sd-garis); background: #fff; color: var(--sd-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .15s, background .15s; }
.sd-kat a:hover { border-color: var(--sd-biru); }
.sd-kat a.aktif { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff !important; }
.sd-kat a.sd-kat-domain { margin-left: auto; color: var(--sd-biru) !important; border-color: var(--brand-primary-lighter-3); background: var(--sd-biru-muda); }
#products > .row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin: 0 !important; padding-top: 14px; }
#products > .row > [class*="col"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
#products .package { position: relative; overflow: visible !important; height: 100%; display: flex !important; flex-direction: column !important; text-align: left !important; padding: 28px 24px 24px !important; border-radius: 20px !important; box-shadow: 0 24px 48px -32px rgba(10,13,26,.35) !important; }
#products .package:hover { transform: translateY(-3px); }
#products .package-side { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; border: 0 !important; background: none !important; display: block !important; }
#products .package-side-left { flex: 1 1 auto !important; }
#products .package-header { padding: 0 !important; text-align: left !important; }
#products .package-title { font-size: 24px !important; margin: 0 !important; text-align: left !important; }
#products .package-body { padding: 0 !important; }
#products .package-footer { margin-top: auto !important; padding-top: 22px !important; display: flex !important; flex-direction: column; align-items: stretch !important; }
#products .package-footer .package-price, #products .package-header .package-price { text-align: left !important; align-items: flex-start !important; }
#products .package-footer .package-price { order: -1; margin: 0 0 18px; }
#products .package .price { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: flex-start !important; gap: 2px 8px; text-align: left !important; font-size: 16px !important; white-space: normal !important; }
#products .package .price * { text-align: left !important; margin: 0 !important; width: auto !important; }
#products .package .price-starting-from { flex: 0 0 100%; font-size: 13px; font-weight: 500; color: var(--sd-redup); }
#products .package .price-amount { font-size: 34px !important; font-weight: 700; color: var(--sd-ink); line-height: 1.1; white-space: nowrap; }
#products .package .price-cycle { font-size: 14px; font-weight: 500; color: var(--sd-redup); }
#products .package .price-cycle::before { content: '/ '; }
#products .btn-order-now { width: 100%; margin: 0 !important; }
.sd-pita { position: absolute; top: -13px; left: 24px; z-index: 2; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 99px; color: #fff; background: var(--sd-ink); box-shadow: 0 8px 18px -8px rgba(10,13,26,.6); }
#products .package.sd-hemat { border: 2px solid var(--sd-ink) !important; }
#products .package.sd-pilihan { border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #233DFF, #8C9BFF, #233DFF) border-box !important; box-shadow: 0 30px 60px -30px rgba(35,61,255,.65) !important; }
.sd-pilihan .sd-pita { background: linear-gradient(135deg, #233DFF, #5468FF); }

/* daftar fitur (dari deskripsi produk WHMCS) */
.sd-fitur-siap { text-align: left !important; }
.sd-fitur { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--sd-garis); display: grid; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--sd-ink); }
.sd-fitur li { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.sd-fitur svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sd-biru); }
.sd-fitur li.no { color: var(--sd-redup); }
.sd-fitur li.no svg { color: #B4B9C9; }
.sd-fitur li.bonus span { font-weight: 600; color: var(--sd-biru); }

/* pilih domain */
.panel-choose-domain { border-radius: 20px !important; overflow: hidden; }
.panel-domain-option { padding: 28px !important; }
.panel-domain-option .box { border-radius: 16px !important; border: 1.5px solid var(--sd-garis) !important; transition: border-color .15s, background .15s, box-shadow .15s; }
.panel-domain-option label.radio:hover .box { border-color: var(--brand-primary-lighter-2) !important; }
.panel-domain-option label.radio:has(.radio-styled.checked) .box { border-color: var(--sd-biru) !important; background: var(--sd-biru-muda) !important; box-shadow: 0 16px 32px -24px rgba(35,61,255,.7); }
.panel-domain-option .box-text-title { font-size: 17px !important; font-weight: 700 !important; color: var(--sd-ink) !important; }
.panel-domain-option .box-text-subtitle { color: var(--sd-redup) !important; }
.panel-domain-search-primary { background-color: var(--sd-ink) !important; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px), radial-gradient(70% 140% at 90% 0%, rgba(35,61,255,.55), transparent 60%) !important; background-size: 22px 22px, 100% 100% !important; padding: 36px 28px !important; }
.panel-domain-search-primary .form-control, .panel-domain-search-primary .tld-select, .panel-domain-search-primary .dropdown-toggle { border-radius: 12px !important; border: 0 !important; height: 56px; }
.panel-domain-search-primary .btn { height: 56px; border-radius: 12px !important; background: var(--sd-biru) !important; border-color: var(--sd-biru) !important; color: #fff !important; padding: 0 28px; box-shadow: 0 12px 26px -12px rgba(35,61,255,.9); }
.panel-domain-search-primary .btn:hover { background: var(--sd-biru-tua) !important; }
.page-order .message-success { border-radius: 16px !important; }

/* atur paket: info produk, siklus tagihan */
.product-config-info { border-radius: 20px !important; }
.product-config-info .panel-body { padding: 28px !important; }
.product-config-info h2 { font-size: 24px !important; font-weight: 700 !important; margin: 0 !important; }
.product-config-info .sd-fitur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.page-order .panel-check { border-radius: 14px !important; border: 1.5px solid var(--sd-garis) !important; box-shadow: none !important; transition: border-color .15s, background .15s; }
.page-order .panel-check:hover { border-color: var(--brand-primary-lighter-2) !important; }
.page-order .panel-check.checked { border-color: var(--sd-biru) !important; background: var(--sd-biru-muda) !important; }
.page-order .panel-check.checked .panel-collapse, .page-order .panel-check.checked .panel-body { background: #fff; border-radius: 0 0 12px 12px; }
.page-order .check-title, .page-order .panel-check .check-content span { color: var(--sd-ink) !important; font-weight: 600; }

/* ringkasan pesanan: kartu gelap kayak CTA di web */
.page-order .panel-summary { background-color: var(--sd-ink) !important; background-image: radial-gradient(80% 60% at 100% 0%, rgba(35,61,255,.45), transparent 70%) !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 30px 60px -30px rgba(10,13,26,.6) !important; color: rgba(255,255,255,.75); overflow: hidden; }
.page-order .panel-summary .panel-heading, .page-order .panel-summary .panel-body, .page-order .panel-summary .panel-footer { background: transparent !important; border-color: rgba(255,255,255,.12) !important; }
.page-order .panel-summary .panel-title { color: #fff !important; font-size: 20px !important; font-weight: 700 !important; }
.page-order .panel-summary .list-item, .page-order .panel-summary .item-name, .page-order .panel-summary .price-total { color: rgba(255,255,255,.72) !important; }
.page-order .panel-summary .item-value, .page-order .panel-summary .main-item, .page-order .panel-summary .list-item-main .item-name { color: #fff !important; }
.page-order .panel-summary .list-item.faded, .page-order .panel-summary .list-item-title { color: rgba(255,255,255,.45) !important; text-transform: uppercase; font-size: 11px !important; letter-spacing: .12em; font-weight: 600; }
.page-order .panel-summary .summary-list { border-color: rgba(255,255,255,.12) !important; }
.page-order .panel-summary .summary-list + .summary-list, .page-order .panel-summary .panel-footer { border-top: 1px solid rgba(255,255,255,.12) !important; }
.page-order .panel-summary .panel-footer::after, .page-order .panel-summary .panel-footer::before { display: none !important; }
.page-order .panel-summary .price-amount { color: #fff !important; font-size: 38px !important; }
.page-order .panel-summary .btn-checkout { width: 100%; height: 54px; font-size: 17px; }
.page-order .panel-summary .btn-checkout:disabled, .page-order .panel-summary .btn-checkout.disabled { opacity: .5; }

/* keranjang & checkout */
.page-order .panel-cart { border-radius: 20px !important; overflow: hidden; }
.page-order .cart-heading { background: var(--sd-kabut) !important; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-redup) !important; }
.page-order .cart-item-title-main { font-size: 17px !important; font-weight: 700 !important; color: var(--sd-ink) !important; }
.page-order .cart-item-title-small { color: var(--sd-biru) !important; font-weight: 500; }
.page-order .cart-item-pricing .btn { border-radius: 10px !important; font-weight: 700; }
.page-order .search-box-primary { background: #fff !important; background-image: none !important; border: 1.5px dashed var(--brand-primary-lighter-2) !important; border-radius: 16px !important; padding: 16px !important; box-shadow: none !important; }
.page-order .search-box-primary::before, .page-order .search-box-primary::after { display: none !important; }
.page-order .search-box-primary .form-control { border: 1px solid var(--sd-garis) !important; height: 48px; }
.page-order .search-box-primary .btn { height: 48px; border-radius: 12px !important; background: var(--sd-ink) !important; border-color: var(--sd-ink) !important; color: #fff !important; padding: 0 22px; }
.page-order .billing-details-form h6 { font-size: 15px !important; font-weight: 700 !important; color: var(--sd-ink) !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 14px; }
.page-order .control-label, .page-order .billing-details-form label { color: var(--sd-teks); font-weight: 500; }
.page-order .billing-details-form .form-control { height: 48px; border-color: var(--sd-garis); }
.page-order .checkout-security-msg { background: var(--sd-kabut) !important; border: 1px solid var(--sd-garis) !important; color: var(--sd-redup) !important; border-radius: 14px !important; font-size: 13px; }
.page-order .checkout-security-msg * { color: inherit !important; }
.page-order .panel-switch { border-radius: 14px !important; }

/* tablet & HP */
@media (max-width: 1199px) {
  #products > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* paket di HP geser ke samping kayak di web */
  #products > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px !important; padding: 16px 16px 24px; scrollbar-width: none; }
  #products > .row::-webkit-scrollbar { display: none; }
  #products > .row > [class*="col"] { flex: 0 0 min(84%, 330px) !important; scroll-snap-align: center; }
  #products .package:hover { transform: none; }
  #products .package { height: auto; }
  #products .package-footer { margin-top: 0 !important; }
  .sd-kat { margin: 0 -16px 8px; padding: 0 16px; }
  .sd-kat a.sd-kat-domain { margin-left: 0; }
  .sd-langkah li:not(.kini) span { display: none; }
  .sd-langkah li + li::before { width: 14px; }
  .panel-domain-option { padding: 16px !important; }
  .panel-domain-search-primary { padding: 22px 16px !important; }
  .product-config-info .panel-body { padding: 20px !important; }
  .product-config-info .sd-fitur { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { #products .package, #products .package:hover { transform: none; transition: none; } }
.page-order .order-summary-mob .btn-checkout { background: var(--sd-biru) !important; border-color: var(--sd-biru) !important; color: #fff !important; font-weight: 700; }
.page-order .order-summary-mob .btn-checkout * { color: #fff !important; }

/* ---------- Header v3 (owner 27/10 13:59): sama kayak samudrahost.com ---------- */
@property --sd-sudut { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sd-promo { position: relative; z-index: 1031; height: 38px; padding: 0 16px; overflow: hidden; background: var(--sd-biru); color: #fff; font-size: 14px; text-align: center; }
.sd-promo-roll { position: relative; height: 38px; }
.sd-promo-roll span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: sdPromoGanti 10s infinite; }
.sd-promo-roll span:nth-child(2) { animation-delay: -5s; }
.sd-promo-roll em { font-style: normal; white-space: nowrap; }
.sd-promo b { font-weight: 700; }
.sd-promo a { color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
@keyframes sdPromoGanti { 0%, 44% { opacity: 1; transform: none; } 50%, 94% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }

.sd-titik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sd-biru); animation: sdTitik 1.8s ease-out infinite; }
.sd-menu .menu-primary > li > a i.sd-titik { display: inline-block !important; margin-left: 2px; }
@keyframes sdTitik { 0% { box-shadow: 0 0 0 0 rgba(35,61,255,.55); } 70% { box-shadow: 0 0 0 8px rgba(35,61,255,0); } 100% { box-shadow: 0 0 0 0 rgba(35,61,255,0); } }
.sd-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* desktop: dropdown Layanan bergambar */
.sd-drop { position: relative; }
.sd-mega { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; width: 620px; padding: 12px; border: 1px solid var(--sd-garis); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -24px rgba(10,13,26,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.sd-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sd-drop:hover .sd-mega, .sd-drop:focus-within .sd-mega { opacity: 1; visibility: visible; transform: none; }
.sd-mega-list { display: grid; gap: 4px; }
.sd-menu a.sd-mega-card { display: flex !important; align-items: center; gap: 14px; padding: 12px !important; border-radius: 14px; color: var(--sd-ink) !important; -webkit-text-fill-color: currentColor; text-decoration: none; white-space: normal; }
.sd-mega-card:hover { background: var(--sd-kabut); }
.sd-mega-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sd-biru-muda); color: var(--sd-biru); transition: background .2s, color .2s; }
.sd-mega-card:hover .sd-mega-ic { background: var(--sd-biru); color: #fff; }
.sd-mega-tx { display: grid; gap: 2px; }
.sd-mega-tx b { font-size: 15px; font-weight: 650; }
.sd-mega-tx small { font-size: 13px; color: var(--sd-redup); font-weight: 400; }
.sd-mega-tx b i, .sd-mgrid i { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 99px; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 2px; background: linear-gradient(110deg, #1A2ED6, #233DFF 30%, #7D8DFF 50%, #233DFF 70%, #1A2ED6); background-size: 220% 100%; animation: sdChip 3.2s linear infinite; box-shadow: 0 6px 14px -6px rgba(35,61,255,.9); }
@keyframes sdChip { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.sd-menu .sd-hot { border: 1.5px solid transparent !important; background: linear-gradient(160deg, #F4F6FF, #fff) padding-box, conic-gradient(from var(--sd-sudut), #233DFF, #9AA8FF, #E9ECFF, #5468FF, #233DFF) border-box !important; animation: sdPutar 4s linear infinite; }
@keyframes sdPutar { to { --sd-sudut: 360deg; } }
.sd-menu a.sd-promo-kartu { position: relative; isolation: isolate; overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 18px !important; border-radius: 16px; color: #fff !important; -webkit-text-fill-color: #fff; text-decoration: none; white-space: normal; background: radial-gradient(120% 80% at 100% 0%, rgba(140,155,255,.55), transparent 60%), linear-gradient(160deg, #233DFF, #0A0D1A) !important; background-size: 100% 100%, 180% 180% !important; animation: sdPromoAlir 6s ease-in-out infinite alternate; }
.sd-promo-kartu::before { content: ''; position: absolute; z-index: -1; width: 180px; height: 180px; top: -70px; right: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(140,155,255,.75), transparent 70%); animation: sdCahaya 5s ease-in-out infinite alternate; }
.sd-promo-kartu::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: sdKilau 3.6s ease-in-out infinite; }
.sd-promo-kartu small { font-size: 12px; color: #C9CDE0 !important; -webkit-text-fill-color: #C9CDE0; font-weight: 500; }
.sd-promo-kartu b { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.sd-promo-kartu span { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.sd-promo-kartu span .sd-ic { width: 16px; height: 16px; transition: transform .2s; }
.sd-promo-kartu:hover span .sd-ic { transform: translateX(4px); }
@keyframes sdPromoAlir { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
@keyframes sdCahaya { from { transform: translate(0, 0) scale(1); opacity: .7; } to { transform: translate(-50px, 40px) scale(1.25); opacity: 1; } }
@keyframes sdKilau { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* tombol Masuk / Daftar (belum login) */
.sd-aksi > a.sd-btn-garis, .sd-aksi > a.sd-btn-biru, .sd-mact a { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 14px; text-decoration: none; }
.sd-aksi > a.sd-btn-garis, .sd-mact .sd-btn-garis { background: #fff; border: 1px solid var(--sd-garis); color: var(--sd-ink) !important; }
.sd-aksi > a.sd-btn-garis:hover { border-color: var(--sd-biru); color: var(--sd-biru) !important; }
.sd-aksi > a.sd-btn-biru, .sd-mact .sd-btn-biru { background: var(--sd-biru); border: 1px solid var(--sd-biru); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(35,61,255,.8); }
.sd-tamu .sd-aksi .top-nav > li.my-account { display: none !important; }
.sd-hp-saja { display: none; }

/* tombol garis-tiga jadi X + titik promo */
.sd-burger { position: relative; width: 46px; height: 46px; border-radius: 14px; }
.sd-burger .sd-bar { position: relative; display: block; width: 20px; height: 14px; background: none; border-radius: 0; }
.sd-burger .sd-bar i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--sd-ink); transition: transform .25s, opacity .2s, top .25s; }
.sd-burger .sd-bar i:nth-child(1) { top: 0; } .sd-burger .sd-bar i:nth-child(2) { top: 6px; } .sd-burger .sd-bar i:nth-child(3) { top: 12px; }
.sd-open .sd-burger .sd-bar i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.sd-open .sd-burger .sd-bar i:nth-child(2) { opacity: 0; }
.sd-open .sd-burger .sd-bar i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.sd-burger .sd-titik { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border: 2px solid #fff; box-sizing: content-box; }
.sd-open .sd-burger { border-color: var(--sd-biru); background: var(--sd-biru-muda); }
.sd-open .sd-burger .sd-titik { display: none; }

/* HP & tablet: panel kartu di bawah header, bukan laci samping */
@media (max-width: 1199px) {
  .sd-lebar-saja { display: none !important; }
  .sd-panel-tutup { display: none !important; }
  .sd-menu { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; bottom: auto; width: auto; height: auto !important; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--sd-garis); border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -30px rgba(10,13,26,.5); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
  .sd-open .sd-menu { transform: none; opacity: 1; visibility: visible; }
  .sd-hp-saja { display: block; }
  .sd-hp-bawah { display: flex; flex-direction: column; gap: 14px; }
  .sd-tamu .sd-menu .menu-primary { display: none !important; }
  .sd-menu .menu-primary > li > a { border-bottom: 1px solid var(--sd-garis); border-radius: 0; padding: 0 4px !important; }
  .sd-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sd-menu .sd-mgrid a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--sd-garis); border-radius: 16px; color: var(--sd-ink) !important; font-size: 14px; font-weight: 650; line-height: 1.25; text-decoration: none; background: #fff; }
  .sd-mgrid .sd-mega-ic { width: 38px; height: 38px; border-radius: 11px; }
  .sd-mgrid .sd-ic { width: 20px; height: 20px; }
  .sd-mgrid i { position: absolute; top: 12px; right: 10px; margin: 0; }
  .sd-menu a.sd-promo-kartu { padding: 16px 18px !important; border-radius: 18px; }
  .sd-promo-kartu b { font-size: 18px; }
  .sd-promo-kartu span { margin-top: 6px; }
  .sd-mlinks { display: grid; border-top: 1px solid var(--sd-garis); }
  .sd-menu .sd-mlinks a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--sd-garis); color: var(--sd-ink) !important; font-size: 15px; font-weight: 600; text-decoration: none; }
  .sd-mlinks a::after { content: '›'; color: var(--sd-redup); font-size: 20px; line-height: 1; }
  .sd-mact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sd-mact a { height: 48px; }
}
@media (max-width: 560px) {
  .sd-promo, .sd-promo-roll { height: 46px; }
  .sd-promo-roll em { white-space: normal; font-size: 12.5px; line-height: 1.3; display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-promo-roll span:nth-child(2) { display: none; }
  .sd-promo-roll span, .sd-titik, .sd-mega-tx b i, .sd-mgrid i, .sd-menu .sd-hot, .sd-menu a.sd-promo-kartu, .sd-promo-kartu::before, .sd-promo-kartu::after { animation: none; }
}
.sd-ngumpet { display: none !important; }
/* header v3 rapihan: tombol menu HP di kanan, kartu dropdown rata kiri, tanpa kotak garis */
.sd-aksi { margin-left: auto; }
.sd-menu-tamu > li, .sd-menu-tamu > li:hover, .sd-menu-tamu > li:focus-within { outline: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.sd-menu-tamu > li > a:focus { outline: 0 !important; }
.sd-mega, .sd-mega-tx, .sd-mega-tx b, .sd-mega-tx small, .sd-promo-kartu { text-align: left !important; }
.sd-mega-tx b { display: block; }
/* form daftar ringkas: semua isian satu kolom, sejajar */
.sd-daftar-ringkas #personalInformation .row { display: block !important; margin: 0 !important; }
.sd-daftar-ringkas #personalInformation .row > *, .sd-daftar-ringkas #personalInformation > [class*="col-"] { width: 100% !important; max-width: none !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; }