/* Tema WHMCS "samudra" (T-113): perapian di atas Twenty-One + samudra.css website + ca.css preview. */
body.sd-t { font-family: Outfit, system-ui, sans-serif; background: var(--fog); color: var(--text); font-size: 15px; }
body.sd-t :where(h1, h2, h3, h4, h5) { font-family: inherit; color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
.ca-hero h1, .ft h4, .ca-slide h2, .ca-promo h3, .ca-upgrade h3, .masuk-kiri h2 { color: #fff; }
body.sd-t a { text-decoration: none; }
body.sd-t a:hover { text-decoration: none; }
.sd-main { min-height: 40vh; }
.sd-main.polos { background: #fff; }
.sd-konten-penuh, .sd-konten { min-width: 0; }

/* header: aksi akun */
.hd-akun { display: flex; align-items: center; gap: 8px; }
.hd-akun .ibtn { width: 40px; height: 40px; }
.akun-menu { position: relative; }
.akun-menu > summary { list-style: none; cursor: pointer; }
.akun-menu > summary::-webkit-details-marker { display: none; }
.akun b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.akun small { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.1; }
.akun-isi { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 230px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(10,13,26,.4); }
.akun-isi a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.akun-isi a:hover { background: var(--fog); }
.akun-isi a .ic { width: 18px; height: 18px; color: var(--mute); }
.akun-isi a.keluar { color: #B42318; border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 10px 10px; }
.akun-isi a.keluar .ic { color: #B42318; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
.btn-ink { background: var(--ink); color: #fff !important; }
.btn-white { background: #fff; color: var(--ink) !important; }

/* hero: breadcrumb bawaan WHMCS */
.ca-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; background: none; font-size: 13.5px; }
.ca-hero .breadcrumb-item { color: #8E94AE; padding: 0; }
.ca-hero .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: #5B6178; padding: 0 6px 0 0; float: none; }
.ca-hero .breadcrumb-item a { color: #8E94AE; }
.ca-hero .breadcrumb-item a:hover { color: #fff; }
.ca-hero .breadcrumb-item.active { color: #C9CDE0; }
.ca-hero h1 { margin: 0; }
.ca-hero .btn-blue { color: #fff !important; }

/* sidebar buat halaman yang ikut Twenty-One */
.sd-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.sd-side .card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 16px; box-shadow: none; }
.sd-side .card-header { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 18px; }
.sd-side .card-title { font-size: 15px; margin: 0; }
.sd-side .list-group-item { border: 0; padding: 10px 18px; font-size: 14.5px; color: var(--text); }
.sd-side .list-group-item.active { background: var(--blue-soft); color: var(--blue); }
.sd-konten .card, .sd-konten-penuh > .card:not(.c-daftar) { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.sd-konten .btn-primary, .sd-konten-penuh .btn-primary { background: var(--blue); border-color: var(--blue); border-radius: 12px; }
.sd-konten .form-control, .sd-konten-penuh .form-control { border-radius: 12px; border-color: var(--line); }

/* isi kosong */
.kosong { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--mute); }
.kosong .ic { width: 30px; height: 30px; color: #B4B9C9; }
.kosong b { color: var(--ink); font-size: 16px; }
.kosong .btn { margin-top: 10px; }
.kosong.kecil { padding: 18px 20px; flex-direction: row; justify-content: space-between; text-align: left; }
.ca-ringkas a.st { color: inherit; }
.ca-ringkas a.st:hover { border-color: #C4C9D6; }
.sv-act { justify-content: flex-end; }
.ca-reko img { height: 18px; width: auto; align-self: flex-start; }
.tk-mini { color: inherit; }
.tk-mini .av { font-size: 14px; }

/* daftar tiket */
.c-daftar { overflow: hidden; }
.c-daftar .c-item { color: inherit; }
.c-daftar .c-item:hover { background: var(--fog); }
.c-daftar .c-item .av .ic { width: 20px; height: 20px; }
.c-daftar .unread { min-width: 0; padding: 0 8px; }

/* tiket = chat satu kolom */
.chat.chat-satu { grid-template-columns: 1fr; height: auto; min-height: 0; }
.chat-satu .c-room-h .ibtn { flex: none; }
.chat-satu .c-room-h p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-satu .c-msgs { max-height: 62vh; min-height: 260px; }
.chat-satu .bub p:last-child { margin-bottom: 0; }
.chat-satu .bub img { max-width: 100%; height: auto; border-radius: 8px; }
.chat-satu a.file { color: inherit; text-decoration: none; }
.msg.saya a.file { color: #fff; }
.c-tulis-form { background: #fff; border-top: 1px solid var(--line); }
.c-tulis-form .c-tulis { border-top: 0; }
.c-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.c-tulis label.ibtn { cursor: pointer; margin: 0; flex: none; width: 44px; height: 44px; }
.c-info { margin: 0; padding: 0 18px 12px; font-size: 12px; color: var(--mute); }
.c-info span { color: var(--ink); font-weight: 600; margin-right: 6px; }

/* pengumuman & panduan */
.ann .ann-utama { grid-column: 1 / -1; }
.ann .ann-utama h3 { font-size: 24px; }
.ann a { color: inherit; }
.sd-hal { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.sd-hal a { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; }
.sd-hal a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sd-hal a.mati { opacity: .4; pointer-events: none; }
.kb-cari-isi { max-width: none; margin: 0 0 22px; border: 1px solid var(--line); }
.kat a { color: inherit; }
.art-list a { color: var(--ink); }

/* masuk */
.sd-t-login .masuk { min-height: calc(100vh - 150px); }
.sd-t-login .form h1 { font-size: 28px; }
.sd-t-login .ingat { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--text); font-weight: 500; }
.sd-t-login .form .btn-blue { width: 100%; height: 48px; margin-top: 18px; }
.sd-t-login .social-signin-btns, .sd-t-login .providerLinkingFeedback:empty { margin: 0; }

@media (max-width: 1000px) { .sd-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .hd-akun .ibtn, .akun span:not(.av) { display: none; }
  .akun { padding: 4px; }
  .sd-main { padding-bottom: 76px; }
  .ft { padding-bottom: 84px; }
  .chat.chat-satu { margin: 0; border-radius: 18px; border: 1px solid var(--line); }
  .chat-satu .c-msgs { max-height: none; }
  .kosong.kecil { flex-direction: column; text-align: center; }
}

/* halaman yang ikut Twenty-One: kecilin judul & rapiin kartu (detail layanan dll.) */
.sd-konten h1, .sd-konten h2 { font-size: 22px; }
.sd-konten h3 { font-size: 18px; }
.sd-konten h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.sd-konten .product-details .product-status { border-radius: 18px; overflow: hidden; }
.sd-konten .product-details .product-icon { border-radius: 18px 18px 0 0; }
.sd-konten .product-details-tab-container, .sd-konten .tab-content { border-radius: 0 18px 18px 18px; border-color: var(--line) !important; }
.sd-konten .nav-tabs .nav-link { border-radius: 12px 12px 0 0; font-weight: 600; }
.sd-konten .alert-warning { border-radius: 14px; background: var(--kuning-soft); border-color: #F3DFA8; color: #5C3D04; }
.sd-konten .btn-danger { border-radius: 12px; }
.sd-side .card-header .card-title, .sd-side .card-title { font-size: 15px !important; }
.sd-side .card { background: #fff; }

/* ===================== KERANJANG & CHECKOUT (standard_cart) ===================== */
.sd-step { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; }
.sd-step li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #8E94AE; font-size: 13.5px; font-weight: 600; }
.sd-step li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); font-style: normal; font-size: 12px; }
.sd-step li.ok { color: #fff; }
.sd-step li.ok i { background: var(--blue); color: #fff; }
.sd-cart .ca-hero { padding-bottom: 88px; }
#order-standard_cart { font-family: inherit; color: var(--text); }
#order-standard_cart .cart-sidebar, #order-standard_cart .sidebar-collapsed, #order-standard_cart .header-lined { display: none !important; }
#order-standard_cart .cart-body { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; padding: 0 !important; }
#order-standard_cart > .row { margin: 0; }
#order-standard_cart .btn { border-radius: 12px; font-weight: 600; box-shadow: none; }
#order-standard_cart .btn-success, #order-standard_cart .btn-primary, #order-standard_cart .btn-checkout, #order-standard_cart #btnCompleteOrder, #order-standard_cart #checkout, #order-standard_cart .btn-order-now { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
#order-standard_cart .btn-success:hover, #order-standard_cart .btn-primary:hover { background: var(--blue-d) !important; }
#order-standard_cart .form-control, #order-standard_cart .custom-select, #order-standard_cart select { border-radius: 12px; border: 1px solid var(--line); height: 46px; font-size: 15px; }
#order-standard_cart .form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.14); }
#order-standard_cart .sub-heading { margin: 26px 0 14px; border: 0; text-align: left; height: auto; }
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading .primary-bg-color { position: static; display: inline; padding: 0; background: none !important; color: var(--ink) !important; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
#order-standard_cart .field-help-text, #order-standard_cart .text-muted { color: var(--mute) !important; }
/* kartu paket */
#order-standard_cart .products .row-eq-height { display: contents; }
#order-standard_cart .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
#order-standard_cart .products .col-md-6 { max-width: none; width: auto; padding: 0; flex: none; }
#order-standard_cart .products .product { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 24px 48px -36px rgba(10,13,26,.35); }
#order-standard_cart .products .product header { padding: 0; margin: 0 0 4px; background: none; border: 0; }
#order-standard_cart .products .product header span { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
#order-standard_cart .products .product .product-desc { width: 100%; float: none; padding: 0; margin: 16px 0 0; order: 3; font-size: 14.5px; }
#order-standard_cart .products .product footer { width: 100%; float: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 0; padding: 0; text-align: left; order: 2; }
#order-standard_cart .products .product .product-pricing { color: var(--mute); font-size: 13px; }
#order-standard_cart .products .product .product-pricing .price { display: block; font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
#order-standard_cart .products .product .btn-order-now { width: 100%; height: 46px; margin-top: 14px; }
.sd-fitur { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.sd-fitur li { display: flex; gap: 9px; color: var(--ink); font-size: 14.5px; line-height: 1.4; }
.sd-fitur li .ic { width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
.sd-fitur li.no { color: var(--mute); }
.sd-fitur li.no .ic { color: #B4B9C9; }
/* domain */
#order-standard_cart .domain-selection-options .option { margin: 0 0 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
#order-standard_cart .domain-selection-options .option-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(35,61,255,.12); }
#order-standard_cart .domain-selection-options label { font-weight: 600; color: var(--ink); font-size: 15px; }
#order-standard_cart .input-group-text { border-radius: 12px 0 0 12px; background: var(--fog); border-color: var(--line); }
#order-standard_cart .domain-checker-result-headline, #order-standard_cart .domain-available { color: #12805C; }
/* atur paket */
#order-standard_cart .product-info { padding: 22px 24px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
#order-standard_cart .product-info .product-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
#order-standard_cart .addon-products .panel-addon { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: none; }
#order-standard_cart .addon-products .panel-addon .panel-price { background: var(--fog); color: var(--ink); font-weight: 600; }
#order-standard_cart .addon-products .panel-addon .panel-add { background: var(--ink); color: #fff; border-radius: 0; }
#order-standard_cart .addon-products .panel-addon-selected { border-color: var(--blue); }
#order-standard_cart .addon-products .panel-addon-selected .panel-add { background: var(--blue); }
#order-standard_cart .alert-warning, #order-standard_cart .alert-info { border-radius: 14px; background: var(--blue-soft); border-color: #D5DBFF; color: #1E2C9E; }
/* ringkasan pesanan */
#order-standard_cart .order-summary { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 24px 48px -36px rgba(10,13,26,.35); border-bottom-width: 1px; }
#order-standard_cart .order-summary h2 { margin: 0; padding: 16px 20px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; text-align: left; }
#order-standard_cart .order-summary .summary-container { padding: 16px 20px 20px; background: #fff; font-size: 14px; }
#order-standard_cart .order-summary .total-due-today .amt, #order-standard_cart .order-summary .amt { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
#order-standard_cart .order-summary .btn { width: 100%; height: 48px; }
#order-standard_cart #btnCompleteProductConfig { width: 100%; height: 48px; }
/* keranjang */
#order-standard_cart .view-cart-items-header { background: #fff !important; color: var(--mute) !important; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 14px 20px; }
#order-standard_cart .view-cart-items { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; background: #fff; overflow: hidden; }
#order-standard_cart .view-cart-items .item { padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fff; }
#order-standard_cart .view-cart-items .item-title { font-size: 17px; font-weight: 600; color: var(--ink); }
#order-standard_cart .view-cart-items .item-group { color: var(--mute); font-size: 13.5px; }
#order-standard_cart .view-cart-items .item-domain { color: var(--blue); font-size: 13.5px; }
#order-standard_cart .view-cart-items .item-price span:first-child { font-size: 18px; font-weight: 700; color: var(--ink); }
#order-standard_cart .view-cart-items .btn-link { color: var(--blue); }
#order-standard_cart .empty-cart .btn, #order-standard_cart #btnEmptyCart { background: none !important; border: 0 !important; color: var(--mute) !important; font-size: 13.5px; font-weight: 500; padding: 10px 0; height: auto; }
#order-standard_cart #btnEmptyCart:hover { color: #B42318 !important; }
#order-standard_cart .view-cart-tabs .nav-tabs { border: 0; }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { border: 0; border-radius: 10px; color: var(--ink); font-weight: 600; background: var(--fog); }
#order-standard_cart .view-cart-tabs .tab-content { border: 1px solid var(--line); border-radius: 0 16px 16px 16px; background: #fff; padding: 16px; }
#order-standard_cart .view-cart-tabs .input-group-prepend .btn, #order-standard_cart .view-cart-tabs .prepend-icon .field-icon { display: none; }
#order-standard_cart .view-cart-tabs .form-control { padding-left: 14px !important; }
/* checkout */
#order-standard_cart .account-select-container .account { border: 1px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 10px; padding: 14px 16px; }
#order-standard_cart .account-select-container .account.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(35,61,255,.12); }
#order-standard_cart #totalDueToday { border-radius: 16px; background: var(--ink); color: #fff; border: 0; padding: 18px 22px; font-size: 16px; }
#order-standard_cart #totalDueToday strong, #order-standard_cart #totalDueToday span { color: #fff; font-size: 22px; }
#order-standard_cart #paymentGatewaysContainer label { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin: 0 8px 8px 0; font-weight: 600; color: var(--ink); }
#order-standard_cart #btnCompleteOrder { height: 52px; padding: 0 32px; font-size: 16px; }
#order-standard_cart .checkout-security-msg { border-radius: 14px; background: #E5F6EF; border-color: #BFE8D6; color: #0E6B4A; }
#order-standard_cart .checkout-security-msg .fa-lock { color: #12805C; }
@media (max-width: 760px) { .sd-step li { font-size: 12px; padding: 4px 10px 4px 4px; } #order-standard_cart .products { grid-template-columns: 1fr; } }
/* kartu paket: isi dalam */
#order-standard_cart .products .product { padding: 0; overflow: hidden; }
#order-standard_cart .products .product header { padding: 22px 24px 0; }
#order-standard_cart .products .product footer { padding: 0 24px; }
#order-standard_cart .products .product .product-desc { padding: 0 24px 24px; }
#order-standard_cart .products .product .product-desc p { margin: 0; }
#order-standard_cart .products .product .product-desc ul:empty { display: none; }
#order-standard_cart .products .product .product-pricing br { display: none; }
#order-standard_cart .products .product .btn-order-now { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 0 16px; font-size: 15px; }
/* perapian keranjang v2 */
#order-standard_cart .products .product > * { width: 100% !important; max-width: none !important; float: none !important; }
#order-standard_cart .products .product .product-desc { width: 100% !important; order: 3; }
#order-standard_cart .products .product footer { width: 100% !important; text-align: left !important; }
#order-standard_cart .products .product .product-pricing { text-align: left !important; width: 100%; }
#order-standard_cart .products .product .btn-order-now { width: 100% !important; max-width: none !important; height: 46px !important; overflow: visible; }
#order-standard_cart .products .product .btn-order-now .fas { display: none; }
#order-standard_cart .products .product header { background: none !important; border: 0 !important; }
#order-standard_cart .products .product header span { font-size: 22px; }
/* teks penjelas di bawah judul hero (tadinya kebaca samar di latar gelap) */
#order-standard_cart > p:first-child, #order-standard_cart .cart-body > p:first-of-type, .sd-cart .ca-isi p.text-muted:first-child { display: none; }
/* total di ringkasan: jangan kotak hitam */
#order-standard_cart .order-summary .total-due-today { background: none !important; padding: 8px 0 0; text-align: right; }
#order-standard_cart .order-summary .total-due-today .amt { display: block; background: none !important; color: var(--ink) !important; padding: 0 !important; }
#order-standard_cart .order-summary .total-due-today span:not(.amt) { color: var(--mute); font-size: 13px; }
#order-standard_cart .order-summary { border-bottom: 1px solid var(--line) !important; }
#order-standard_cart .order-summary .continue-shopping, #order-standard_cart .order-summary a.btn-link { color: var(--blue) !important; font-weight: 600; }
/* kode promo */
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 8px 14px; font-size: 13.5px; }
#order-standard_cart .view-cart-tabs .tab-content form { display: flex; gap: 10px; }
#order-standard_cart .view-cart-tabs .tab-content .form-control { flex: 1; border-radius: 12px !important; }
#order-standard_cart .view-cart-tabs .tab-content .btn { border-radius: 12px !important; height: 46px; padding: 0 18px; background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
#order-standard_cart .view-cart-tabs .prepend-icon::before, #order-standard_cart .view-cart-tabs .field-icon, #order-standard_cart .view-cart-tabs .input-group-prepend { display: none !important; }
#order-standard_cart .view-cart-items .item { border-radius: 0; }
#order-standard_cart .view-cart-items { border-bottom: 1px solid var(--line) !important; }
/* checkout: judul seksi gak ketutup hero */
.sd-co .ca-hero { padding-bottom: 64px; }
#order-standard_cart .sub-heading { margin-top: 30px !important; }
#order-standard_cart .sub-heading::before, #order-standard_cart .sub-heading::after { display: none; }
#order-standard_cart .sub-heading span { font-size: 19px !important; }
#order-standard_cart .account-select-container .account .address, #order-standard_cart .account-select-container small { font-size: 13.5px; color: var(--mute); }
#order-standard_cart .account-select-container label { font-size: 15px; color: var(--ink); }
#order-standard_cart #totalDueToday { display: flex; align-items: center; justify-content: space-between; }
#order-standard_cart #paymentGatewaysContainer { text-align: left !important; }
#order-standard_cart .text-center:has(#btnCompleteOrder) { text-align: left !important; }
#order-standard_cart .checkout-security-msg { font-size: 13.5px; }
/* atur paket: addon cPanel */
#order-standard_cart .addon-products .panel-addon .panel-body { padding: 18px 20px; text-align: left; font-size: 14px; }
#order-standard_cart .addon-products .panel-addon label { font-size: 16px; font-weight: 600; color: var(--ink); }
#order-standard_cart .addon-products .panel-addon .panel-price, #order-standard_cart .addon-products .panel-addon .panel-add { padding: 10px 20px; font-size: 14px; text-align: left; }
#order-standard_cart .sub-heading + .addon-products, #order-standard_cart .addon-products { margin-top: 6px; }
/* perapian keranjang v3 (29/10) */
#order-standard_cart .view-cart-tabs .tab-content form, #order-standard_cart .view-cart-tabs .tab-content .input-group { display: flex; gap: 10px; background: none !important; padding: 0 !important; border: 0 !important; }
#order-standard_cart .view-cart-tabs .tab-content .input-group::before, #order-standard_cart .view-cart-tabs .tab-content .input-group::after { display: none !important; }
#order-standard_cart .view-cart-tabs .tab-content .form-control { height: 46px; border: 1px solid var(--line) !important; box-shadow: none !important; }
#order-standard_cart .view-cart-tabs .tab-content .btn { flex: none; width: auto !important; }
#order-standard_cart .order-summary .total-due-today { display: flex; flex-direction: column; align-items: flex-end; }
#order-standard_cart .order-summary .total-due-today .amt { font-size: 30px !important; order: 1; }
#order-standard_cart .order-summary .total-due-today span:not(.amt) { order: 2; }
/* checkout: kalimat penjelas & garis judul */
.sd-co #order-standard_cart > p, .sd-co .sd-konten-penuh > p, .sd-cart .ca-isi .text-muted.small:first-child { display: none !important; }
.sd-co .ca-hero { padding-bottom: 40px !important; }
.sd-co .ca-isi { margin-top: 0 !important; padding-top: 28px; }
#order-standard_cart .sub-heading { border: 0 !important; text-align: left !important; }
#order-standard_cart .sub-heading span { background: none !important; }
#order-standard_cart #paymentGatewaysContainer, #order-standard_cart #paymentGatewaysContainer + * { text-align: left !important; }
#order-standard_cart .account-select-container .account { background: #fff !important; }
#order-standard_cart .view-cart-tabs .tab-pane, #order-standard_cart .view-cart-tabs .tab-pane.promo { background: none !important; padding: 0 !important; }
/* pendaftaran */
.sd-t-clientregister .sd-konten-penuh { max-width: 820px; margin: 0 auto; }
.sd-t-clientregister .alert:empty, .sd-t-clientregister .alert-warning:empty, .sd-t-clientregister #registrationPasswordWarning:empty { display: none !important; }
.sd-t-clientregister .card { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.sd-t-clientregister .sub-heading { text-align: left; border: 0; }
.sd-t-clientregister .sub-heading span { background: none !important; color: var(--ink) !important; font-size: 19px; font-weight: 600; padding: 0; }
.sd-t-clientregister .form-control { height: 46px; border-radius: 12px; }
.sd-t-clientregister #btnRegister, .sd-t-clientregister input[type=submit] { height: 48px; padding: 0 32px; border-radius: 12px; background: var(--blue); border-color: var(--blue); }
.sd-t-clientregister .card h2, .sd-t-clientregister .card h3, .sd-t-clientregister .card-title { font-size: 19px !important; }
.sd-t-clientregister .card h3 + p, .sd-t-clientregister .card-title + p, .sd-t-clientregister .card i { font-size: 13.5px; }
.sd-t-clientregister .ca-hero { padding-bottom: 48px; }
.sd-t-clientregister .ca-isi { margin-top: 0; padding-top: 24px; }

/* ===== perapian menyeluruh 29/10: artikel, kategori, pengumuman, halaman ikut twenty-one ===== */
.art-satu { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.art-satu .art-isi { padding: 36px 44px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; }
.art-meta .ic { width: 16px; height: 16px; }
.art-meta a { margin-left: auto; color: var(--blue); font-weight: 600; }
.prose { max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--text); }
.prose > *:first-child { margin-top: 18px; }
.prose h2 { font-size: 21px !important; margin: 30px 0 10px; }
.prose h3 { font-size: 18px !important; margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ol, .prose ul { margin: 0 0 16px; padding-left: 26px; }
.prose ol li, .prose ul li { padding-left: 4px; margin-bottom: 8px; }
.prose ol li::before { content: none !important; }
.prose img { display: block; max-width: 100%; height: auto; margin: 14px 0; border-radius: 12px; border: 1px solid var(--line); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; }
.prose code { background: var(--fog); padding: 1px 6px; border-radius: 6px; font-size: 14px; }
.art-satu .bantu { margin-top: 26px; gap: 10px; }
.art-satu .bantu b { margin-right: auto; }
.art-samping { display: grid; gap: 16px; position: sticky; top: 90px; }
.art-list a { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.art-list a:last-child { border-bottom: 0; }
.art-list a:hover { background: var(--fog); }
.art-list a .ic { width: 18px; height: 18px; color: var(--mute); flex: none; margin-top: 1px; }
.art-list-besar a { padding: 16px 22px; }
.art-list-besar b { display: block; font-weight: 600; font-size: 15.5px; }
.art-list-besar small { display: block; margin-top: 3px; color: var(--mute); font-size: 13.5px; }
.sd-t-knowledgebasecat .kat { margin-bottom: 22px; }

/* skala judul & jarak buat semua halaman ikut twenty-one (profil, keamanan, domain, kontak, tiket baru, status, dll.) */
.sd-konten h1, .sd-konten .h1, .sd-konten-penuh .card h1 { font-size: 24px !important; }
.sd-konten h2, .sd-konten .h2, .sd-konten .card-title { font-size: 19px !important; }
.sd-konten h3, .sd-konten .h3 { font-size: 17px !important; }
.sd-konten h4, .sd-konten .h4, .sd-konten h5 { font-size: 15px !important; }
.sd-konten .card, .sd-konten-penuh > .card { margin-bottom: 20px; }
.sd-konten .card-body, .sd-konten-penuh > .card > .card-body { padding: 24px 26px; }
.sd-konten .card-header { padding: 16px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.sd-konten .form-group { margin-bottom: 16px; }
.sd-konten label, .sd-konten .form-control-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.sd-konten .form-control, .sd-konten .custom-select { height: 46px; border-radius: 12px; border-color: var(--line); font-size: 15px; }
.sd-konten textarea.form-control { height: auto; min-height: 120px; }
.sd-konten .btn { border-radius: 12px; font-weight: 600; }
.sd-konten .table { font-size: 14.5px; }
.sd-konten .table td, .sd-konten .table th { padding: 14px 16px; vertical-align: middle; border-color: var(--line); }
.sd-konten .table thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-bottom-width: 1px; }
.sd-konten .dataTables_wrapper { font-size: 14px; }
.sd-konten .alert { border-radius: 14px; }
.sd-konten .list-group-item { padding: 12px 18px; }
.sd-konten .btn-group .btn, .sd-konten .table-container .btn { white-space: nowrap; }
.sd-t-contact .sd-konten-penuh, .sd-t-supportticketsubmit-stepone .sd-konten, .sd-t-supportticketsubmit-steptwo .sd-konten { max-width: 860px; }
.sd-t-contact .sd-konten-penuh { margin: 0 auto; }

@media (max-width: 1000px) {
  .art-satu { grid-template-columns: 1fr; }
  .art-samping { position: static; }
}
@media (max-width: 760px) {
  .art-satu .art-isi { padding: 22px 18px; }
  .prose { font-size: 15.5px; }
  .art-meta a { margin-left: 0; }
  .sd-konten .card-body, .sd-konten-penuh > .card > .card-body { padding: 18px 16px; }
  .sd-konten h1, .sd-konten .h1 { font-size: 21px !important; }
  .sd-konten .table td, .sd-konten .table th { padding: 10px; }
  .sd-konten .btn-group { flex-wrap: wrap; gap: 6px; }
  .sd-konten .btn-group > .btn { flex: 1 1 auto; border-radius: 10px !important; }
  .sd-side .card { margin-bottom: 10px; }
}
.prose ol { list-style: decimal !important; counter-reset: none; display: block; padding-left: 26px; }
.prose ul { list-style: disc !important; }
.prose ol li, .prose ul li { position: static; padding-left: 4px; display: list-item; }
.prose ol li::marker { color: var(--blue); font-weight: 700; }
.art-list a > span { flex: 1; min-width: 0; }
.art-list a small, .art-list-besar small { margin-left: 0 !important; white-space: normal !important; overflow-wrap: anywhere; }
.art-list a, .art-list-besar b { white-space: normal; overflow-wrap: anywhere; }
.sd-konten-penuh > .card, .art-satu > * { min-width: 0; }
/* detail layanan */
.sd-t-clientareaproductdetails .product-details .product-status-text { border-radius: 0 0 18px 18px; }
.sd-t-clientareaproductdetails .product-details h4 { font-size: 13px !important; font-weight: 600; color: var(--mute) !important; text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 2px; }
.sd-t-clientareaproductdetails .product-details .col-md-6.text-center, .sd-t-clientareaproductdetails .product-details .text-center { text-align: left !important; }
.sd-t-clientareaproductdetails .tab-content .row > [class*=col-][class*=text-right] { text-align: left !important; font-weight: 600; color: var(--ink); }
.sd-t-clientareaproductdetails .tab-content .row { margin-bottom: 6px; }
.sd-t-clientareaproductdetails .nav-tabs { gap: 6px; border: 0; }
.sd-t-clientareaproductdetails .nav-tabs .nav-link { border: 1px solid var(--line) !important; background: #fff; }
.sd-t-clientareaproductdetails .nav-tabs .nav-link.active { background: var(--ink); color: #fff !important; border-color: var(--ink) !important; }
/* buat tiket: departemen jadi kartu */
.sd-t-supportticketsubmit-stepone .sd-konten-penuh { max-width: 860px; margin: 0 auto; }
.sd-t-supportticketsubmit-stepone .card-body .row > div, .sd-t-supportticketsubmit-stepone .card-body > div > div { margin: 0; }
.sd-t-supportticketsubmit-stepone .card-body a { color: var(--ink); }
.sd-t-supportticketsubmit-stepone .card-body .col-md-10, .sd-t-supportticketsubmit-stepone .card-body .offset-md-1 { margin-left: 0 !important; max-width: 100%; flex: 0 0 100%; }
.sd-t-supportticketsubmit-stepone .card-body h3, .sd-t-supportticketsubmit-stepone .card-body .h3, .sd-t-supportticketsubmit-stepone .card-body strong a { font-size: 17px !important; font-weight: 600; }
.sd-t-supportticketsubmit-stepone .card-body p { color: var(--mute); }
.sd-t-supportticketsubmit-stepone .card-body .row > div, .sd-t-supportticketsubmit-stepone .card-body > .row { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px !important; }
@media (max-width: 1000px) {
  .sd-t-clientareaproductdetails .sd-side { display: none; }
}
.sd-t-clientareaproductdetails .nav-tabs .nav-link.active, .sd-t-clientareaproductdetails .nav-tabs .nav-link.active * { background: var(--ink) !important; color: #fff !important; }
.sd-t-clientareaproductdetails .nav-tabs .nav-link { color: var(--ink) !important; padding: 9px 14px; font-size: 14px; }
.sd-t-clientareaproductdetails .nav-tabs .nav-item { margin: 0; }

/* ===================== ALUR PESAN GAYA HOSTINGER (owner 29/10 00:56) ===================== */
.sd-cart { background: #F6F7FB; }
.ca-hero.ca-hero-cart { background: #fff !important; color: var(--text); padding: 28px 0 24px !important; border-bottom: 1px solid var(--line); }
.ca-hero.ca-hero-cart::before, .ca-hero.ca-hero-cart::after { display: none !important; }
.ca-hero.ca-hero-cart .wrap { flex-direction: column; align-items: stretch; gap: 0; }
.ca-hero.ca-hero-cart h1 { color: var(--ink) !important; font-size: clamp(24px, 2.6vw, 32px) !important; }
.ca-hero.ca-hero-cart p { color: var(--mute); }
.sd-cart .ca-isi { margin-top: 0 !important; padding-top: 28px !important; }
.sd-step { display: none !important; }
/* progress bar */
.sd-prog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
.sd-prog li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13.5px; font-weight: 600; color: #9AA0B4; }
.sd-prog li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 3px; border-radius: 3px; background: var(--line); }
.sd-prog li:first-child::before { display: none; }
.sd-prog li.lewat::before, .sd-prog li.kini::before { background: var(--blue); }
.sd-prog li i { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--line); font-style: normal; font-size: 13.5px; color: #9AA0B4; }
.sd-prog li.lewat { color: var(--ink); }
.sd-prog li.lewat i { background: var(--blue); border-color: var(--blue); color: #fff; }
.sd-prog li.kini { color: var(--blue); }
.sd-prog li.kini i { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgba(35,61,255,.12); }
/* kartu putih lebih bersih */
#order-standard_cart .products .product, #order-standard_cart .product-info, #order-standard_cart .order-summary, #order-standard_cart .view-cart-items, #order-standard_cart .domain-selection-options .option { box-shadow: 0 1px 2px rgba(10,13,26,.04) !important; }
#order-standard_cart .order-summary { position: sticky; top: 90px; }
#order-standard_cart .order-summary h2 { background: #fff !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); font-size: 18px !important; padding: 18px 22px !important; }
#order-standard_cart .order-summary .btn { height: 52px !important; font-size: 16px; }
/* siklus bayar = kartu */
.sd-sembunyi { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sd-siklus { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 24px; }
.sd-sk { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 16px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sd-sk:hover { border-color: #B9C2FF; }
.sd-sk.on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
.sd-sk.on::after { content: "✓"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
.sd-sk .sk-nama { font-size: 15px; font-weight: 700; color: var(--ink); }
.sd-sk em { font-style: normal; padding: 2px 8px; border-radius: 99px; background: #E5F6EF; color: #12805C; font-size: 11.5px; font-weight: 700; }
.sd-sk b { margin-top: 6px; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.sd-sk b small { font-size: 13px; font-weight: 500; color: var(--mute); }
.sd-sk .sk-total { font-size: 12.5px; color: var(--mute); }
/* domain = tab */
.sd-dtab { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-bottom: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sd-dtab button { flex: 1 1 auto; border: 0; background: none; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mute); cursor: pointer; }
.sd-dtab button.on { background: var(--ink); color: #fff; }
.sd-dpilih .option { display: none !important; }
.sd-dpilih .option.sd-tampil { display: block !important; padding: 24px !important; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.sd-dpilih .option.sd-tampil > label, .sd-dpilih .option.sd-tampil .iradio_square-blue { display: none !important; }
.sd-dpilih .option.sd-tampil .domain-input-group { margin: 0 !important; }
#order-standard_cart .domain-input-group .row { row-gap: 10px; }
#order-standard_cart .domain-input-group .input-group-text { height: 52px; }
#order-standard_cart .domain-input-group .form-control, #order-standard_cart .domain-input-group select { height: 52px !important; font-size: 16px; }
#order-standard_cart .domain-input-group .btn { height: 52px; width: 100%; font-size: 16px; }
#order-standard_cart .domain-selection-options + p, #order-standard_cart .domain-promo-box { font-size: 13.5px; color: var(--mute); }
/* checkout bernomor */
#frmCheckout { counter-reset: lk; }
#frmCheckout .sub-heading { counter-increment: lk; display: flex !important; align-items: center; gap: 12px; margin: 30px 0 14px !important; }
#frmCheckout .sub-heading::before { content: counter(lk) !important; display: grid !important; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; position: static !important; border: 0 !important; }
#frmCheckout .sub-heading span { font-size: 20px !important; }
#order-standard_cart #paymentGatewaysContainer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
#order-standard_cart #paymentGatewaysContainer label { min-width: 200px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); }
#order-standard_cart #btnCompleteOrder { width: 100%; max-width: 420px; height: 56px; font-size: 17px; }
#order-standard_cart .checkout .form-group { margin-bottom: 14px; }
#order-standard_cart .checkout .prepend-icon .form-control { padding-left: 40px; }
@media (max-width: 760px) {
  .ca-hero.ca-hero-cart { padding: 18px 0 16px !important; }
  .sd-prog li span { font-size: 11px; }
  .sd-prog li i { width: 26px; height: 26px; font-size: 12px; }
  .sd-prog li::before { top: 12px; left: calc(-50% + 15px); right: calc(50% + 15px); }
  .sd-siklus { grid-template-columns: 1fr 1fr; }
  .sd-dtab button { flex: 1 1 100%; }
  #order-standard_cart .order-summary { position: static; }
  #order-standard_cart #paymentGatewaysContainer label { min-width: 0; flex: 1 1 100%; }
}

/* ===== detail layanan custom (owner 29/10 01:00) ===== */
.dl-kepala { display: flex; align-items: center; gap: 18px; padding: 24px 26px; margin-bottom: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.dl-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); flex: none; }
.dl-ic .ic { width: 28px; height: 28px; }
.dl-nama { min-width: 0; flex: 1; }
.dl-nama small { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.dl-nama h2 { font-size: 24px !important; margin: 2px 0 4px; }
.dl-nama p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mute); font-size: 14.5px; }
.dl-nama a { color: var(--blue); font-weight: 600; }
.dl-harga { text-align: right; flex: none; }
.dl-harga small { display: block; font-size: 12.5px; color: var(--mute); }
.dl-harga b { display: block; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.dl-harga span { font-size: 13px; color: var(--mute); }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dl-modul { text-align: left; }
.dl-modul .btn { border-radius: 12px; }
.dl-aksi { display: grid; gap: 10px; }
.dl-aksi .btn { width: 100%; justify-content: flex-start; height: 46px; padding: 0 16px; gap: 10px; }
.dl-aksi .btn .ic { width: 18px; height: 18px; }
.dl-batal { margin-top: 4px; text-align: center; font-size: 13.5px; color: var(--mute); }
.dl-batal:hover { color: #B42318; }
.info div b { text-align: right; }
.sd-t-clientareaproductdetails .ca-upgrade .btn { color: var(--ink) !important; }
@media (max-width: 1000px) { .dl-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .dl-kepala { flex-wrap: wrap; padding: 18px; }
  .dl-harga { text-align: left; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .dl-harga b { font-size: 20px; }
}

/* ===== sidebar WHMCS diganti tab pill di atas (owner 29/10 01:00) ===== */
.sd-tabnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px; margin-bottom: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sd-tabnav::-webkit-scrollbar { display: none; }
.sd-tabnav a { flex: none; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.sd-tabnav a:hover { color: var(--ink); background: var(--fog); }
.sd-tabnav a.on { background: var(--ink); color: #fff; }
.sd-tanpa-side { display: block !important; }
.sd-tanpa-side .sd-konten { max-width: 980px; }
.sd-tabnav:empty { display: none; }
/* kartu bootstrap di halaman ikut twenty-one dibikin senada kartu Samudra */
.sd-konten .card { border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: none !important; overflow: hidden; }
.sd-konten .card-header { background: #fff !important; }
.sd-konten .card-title i, .sd-konten h3 i, .sd-konten .fa-fw { display: none; }
.sd-konten .card-footer { background: var(--fog); border-top: 1px solid var(--line); }
.sd-konten .table-list thead th, .sd-konten .table thead th { background: #FAFBFD; }
.sd-konten .label.status, .sd-konten .badge { border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.sd-konten .status-active, .sd-konten .label-success { background: var(--hijau-soft) !important; color: var(--hijau) !important; }
.sd-konten .status-pending, .sd-konten .label-warning { background: var(--kuning-soft) !important; color: var(--kuning) !important; }
.sd-konten .nav-tabs { border: 0; gap: 6px; }
.sd-konten .nav-tabs .nav-link { border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff; color: var(--ink) !important; font-weight: 600; }
.sd-konten .nav-tabs .nav-link.active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.sd-konten .tab-content { border: 0 !important; padding-top: 14px; }
.sd-konten .dataTables_info, .sd-konten .dataTables_length, .sd-konten .dataTables_filter { font-size: 13px; color: var(--mute); }
.sd-konten .pagination .page-link { border-radius: 9px !important; margin: 0 2px; border-color: var(--line); color: var(--ink); }
.sd-konten .pagination .active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ===== form obrolan baru (owner 29/10 01:14) ===== */
.tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.tb-isi .card-b { padding: 28px; display: grid; gap: 18px; }
.tb-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tb-tiga { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.fld2 label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fld2 label small { font-weight: 500; color: var(--mute); }
.fld2 input[type=text], .fld2 input[type=email], .fld2 select, .fld2 textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.fld2 textarea { height: auto; min-height: 170px; padding: 13px 14px; line-height: 1.55; resize: vertical; }
.fld2 input:focus, .fld2 select:focus, .fld2 textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
.fld2 input:disabled { background: var(--fog); color: var(--mute); }
.tb-file { display: flex !important; align-items: center; gap: 10px; padding: 14px 16px !important; margin: 0 !important; border: 1.5px dashed #C4C9D6; border-radius: 12px; background: var(--fog); cursor: pointer; font-weight: 600 !important; color: var(--text) !important; position: relative; }
.tb-file:hover { border-color: var(--blue); }
.tb-file .ic { width: 20px; height: 20px; color: var(--blue); flex: none; }
.tb-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tb-ket { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.tb-aksi { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.tb-aksi .btn-blue { height: 50px; padding: 0 26px; font-size: 15.5px; color: #fff !important; }
.tb-aksi .btn-blue .ic { width: 18px; height: 18px; }
.tb-aksi .btn-line { height: 50px; }
#customFieldsContainer:empty, #autoAnswerSuggestions.w-hidden { display: none; }
@media (max-width: 1000px) { .tb-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tb-isi .card-b { padding: 18px; } .tb-dua { grid-template-columns: 1fr; } .tb-aksi .btn { flex: 1; } }

/* ===== alur pesan v2: kartu berikon ala Lagom + checkout 2 kolom (owner 29/10 01:14) ===== */
.sd-langkah { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.sd-langkah:first-child { margin-top: 0; }
.sd-langkah i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 13.5px; font-weight: 700; }
.sd-langkah small { font-size: 13px; font-weight: 500; color: var(--mute); }
/* domain */
.sd-dkartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sd-dk { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sd-dk:hover { border-color: #B9C2FF; }
.sd-dk .dk-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--fog); color: var(--ink); transition: background .15s, color .15s; }
.sd-dk .dk-ic .ic { width: 22px; height: 22px; color: inherit; }
.sd-dk .dk-t { display: grid; gap: 2px; min-width: 0; }
.sd-dk .dk-t b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sd-dk .dk-t small { font-size: 13px; color: var(--mute); line-height: 1.35; }
.sd-dk .dk-r { margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C4C9D6; }
.sd-dk.on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
.sd-dk.on .dk-ic { background: var(--blue); color: #fff; }
.sd-dk.on .dk-r { border: 6px solid var(--blue); }
.sd-dpilih .option.sd-tampil { padding: 20px !important; border-radius: 18px; }
#order-standard_cart .sd-dpilih .domain-input-group > .row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 0; }
#order-standard_cart .sd-dpilih .domain-input-group > .row > [class*=col-sm-8] { flex: 1 1 auto; max-width: none; margin: 0; padding: 0; }
#order-standard_cart .sd-dpilih .domain-input-group > .row > [class*=col-sm-2] { flex: 0 0 160px; max-width: 160px; padding: 0; }
#order-standard_cart .sd-dpilih .domains-row { display: flex; flex-wrap: nowrap; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
#order-standard_cart .sd-dpilih .domains-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
#order-standard_cart .sd-dpilih .domains-row > div { padding: 0; }
#order-standard_cart .sd-dpilih .domains-row > .col-9 { flex: 1 1 auto; max-width: none; }
#order-standard_cart .sd-dpilih .domains-row > .col-3 { flex: 0 0 128px; max-width: 128px; border-left: 1px solid var(--line); }
#order-standard_cart .sd-dpilih .domains-row .input-group-text { border: 0; border-radius: 0; background: var(--fog); color: var(--mute); padding: 0 14px; }
#order-standard_cart .sd-dpilih .domains-row .form-control, #order-standard_cart .sd-dpilih .domains-row select { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: #fff; }
#order-standard_cart .sd-dpilih .domain-input-group .btn { border-radius: 12px; font-weight: 600; }
.sd-dgratis { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--hijau-soft); color: var(--hijau) !important; font-size: 14px !important; }
.sd-dgratis .ic { width: 20px; height: 20px; color: var(--hijau); flex: none; }
.sd-dgratis b { font-weight: 600; }
/* atur paket */
.sd-pi-h { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sd-pi-h .pi-ic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.sd-pi-h .pi-ic .ic { width: 24px; height: 24px; color: inherit; }
.sd-pi-h .pi-t { display: grid; gap: 1px; }
.sd-pi-h .pi-t small { font-size: 13px; color: var(--mute); }
.sd-pi-h .pi-t b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.sd-pi-h .pi-ganti { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--blue) !important; }
.sd-pi-h .pi-ganti .ic { width: 16px; height: 16px; color: inherit; }
#order-standard_cart .product-info .sd-fitur { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.sd-siklus { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; margin: 0 0 6px !important; }
.sd-sk { padding: 22px 18px 18px !important; gap: 3px !important; }
.sd-sk.on::after { top: 14px !important; }
.sd-sk.terbaik { border-color: #B9C2FF; }
.sd-sk.terbaik.on { border-color: var(--blue); }
.sd-sk .sk-pita { position: absolute; top: -11px; left: 16px; padding: 3px 10px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; }
.sd-sk em { margin-top: 6px; }
.sd-sk em.kosong { visibility: hidden; padding: 0; height: 21px; }
.sd-sk s { margin-top: 8px; font-size: 13px; color: var(--mute); }
.sd-sk s.kosong { visibility: hidden; }
.sd-sk b { margin-top: 0 !important; font-size: 24px !important; }
.sd-sk .sk-total { margin-top: 4px; line-height: 1.4; }
#order-standard_cart .addon-products .panel-addon.sd-ad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#order-standard_cart .addon-products .panel-addon.sd-ad:hover { border-color: #B9C2FF; }
#order-standard_cart .addon-products .panel-addon.sd-ad .panel-body { grid-row: span 2; padding: 0 !important; color: var(--mute); font-size: 14px; line-height: 1.5; }
#order-standard_cart .addon-products .panel-addon.sd-ad label { display: flex; align-items: center; margin: 0 0 6px; }
#order-standard_cart .addon-products .panel-addon.sd-ad label .icheckbox_square-blue { position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; }
#order-standard_cart .addon-products .panel-addon.sd-ad label + br { display: none; }
.sd-ad-logo { display: inline-flex; align-items: center; gap: 8px; height: 26px; }
.sd-ad-logo img { height: 22px; width: auto; }
.sd-ad-logo .sd-plus { font-style: normal; font-weight: 600; color: var(--mute); }
#order-standard_cart .addon-products .panel-addon.sd-ad .panel-price { padding: 0 !important; background: none !important; text-align: right; }
#order-standard_cart .addon-products .panel-addon.sd-ad .panel-price b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
#order-standard_cart .addon-products .panel-addon.sd-ad .panel-price small { font-size: 12.5px; color: var(--mute); font-weight: 500; }
#order-standard_cart .addon-products .panel-addon.sd-ad .panel-add { justify-self: end; display: inline-flex; align-items: center; padding: 8px 16px !important; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 600; }
.panel-add .ad-udah { display: none; align-items: center; gap: 6px; }
.panel-add .ad-udah .ic { width: 16px; height: 16px; color: inherit; }
#order-standard_cart .addon-products .panel-addon.sd-ad.panel-addon-selected { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
#order-standard_cart .addon-products .panel-addon.sd-ad.panel-addon-selected .panel-add { border-color: var(--blue); background: var(--blue) !important; color: #fff !important; }
.panel-addon-selected .panel-add .ad-tambah { display: none; }
.panel-addon-selected .panel-add .ad-udah { display: inline-flex; }
#order-standard_cart .alert.sd-tanya { margin-top: 18px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--fog); color: var(--text); font-size: 14px; }
#order-standard_cart .alert.sd-tanya a { color: var(--blue) !important; font-weight: 600; }
#order-standard_cart .sd-promo-ring .float-right { color: var(--hijau); font-weight: 600; }
/* checkout 2 kolom */
.sd-co2 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.sd-co-kiri { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.sd-co-kiri .sd-langkah:first-child { margin-top: 0; }
.sd-co-kanan { position: sticky; top: 90px; display: grid; gap: 14px; }
.sd-ring, .sd-bayar { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.sd-ring .ring-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.sd-ring .ring-h b { font-size: 17px; font-weight: 600; color: var(--ink); }
.sd-ring .ring-h a { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--blue) !important; }
.sd-ring .ring-h a .ic { width: 15px; height: 15px; color: inherit; }
.sd-ring .ring-item { padding: 6px 20px; }
.sd-ring .ring-muat { padding: 12px 0; color: var(--mute); font-size: 14px; }
.sd-ring .ri { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sd-ring .ri + .ri { border-top: 1px dashed var(--line); }
.sd-ring .ri-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.sd-ring .ri-ic .ic { width: 20px; height: 20px; color: inherit; }
.sd-ring .ri-t { display: grid; min-width: 0; }
.sd-ring .ri-t b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sd-ring .ri-t small { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ring .ri-h { margin-left: auto; display: grid; text-align: right; }
.sd-ring .ri-h b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.sd-ring .ri-h small { font-size: 12px; color: var(--mute); }
.sd-ring .ring-baris { padding: 4px 20px 0; border-top: 1px solid var(--line); }
.sd-ring .ring-baris:empty { display: none; }
.sd-ring .rb { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--text); }
.sd-ring .rb.diskon span:last-child { color: var(--hijau); font-weight: 600; }
.sd-ring .ring-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 20px 0; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.sd-ring .ring-total span { font-size: 14px; color: var(--mute); }
.sd-ring .ring-total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.sd-bayar { padding: 20px; }
.sd-bayar .sd-langkah { margin: 0 0 14px; font-size: 17px; }
.sd-bayar #totalDueToday { display: none !important; }
#order-standard_cart .sd-bayar #paymentGatewaysContainer { margin: 0; }
#order-standard_cart .sd-bayar #paymentGatewaysContainer .text-center { display: grid; gap: 10px; text-align: left !important; }
#order-standard_cart .sd-gw { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
#order-standard_cart .sd-gw:has(.checked) { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,61,255,.12); }
#order-standard_cart .sd-gw .iradio_square-blue { order: 3; margin-left: auto !important; }
.sd-gw .gw-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--fog); color: var(--ink); }
.sd-gw .gw-ic .ic { width: 20px; height: 20px; color: inherit; }
.sd-gw .gw-t { display: grid; gap: 2px; }
.sd-gw .gw-t b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sd-gw .gw-t small { font-size: 12.5px; color: var(--mute); font-weight: 400; }
.sd-co-tombol { margin: 0; }
#order-standard_cart .sd-co-tombol #btnCompleteOrder { width: 100%; height: 56px; border-radius: 14px; font-size: 17px; font-weight: 600; }
.sd-aman { display: flex; gap: 8px; margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.sd-aman .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--hijau); }
@media (max-width: 1000px) {
  .sd-co2 { grid-template-columns: 1fr; }
  .sd-co-kanan { position: static; }
}
@media (max-width: 760px) {
  .sd-dkartu { grid-template-columns: 1fr; gap: 8px; }
  .sd-dk { padding: 14px; }
  .sd-dk .dk-ic { width: 40px; height: 40px; }
  #order-standard_cart .sd-dpilih .domain-input-group > .row { flex-direction: column; }
  #order-standard_cart .sd-dpilih .domain-input-group > .row > [class*=col-sm-2] { flex: 0 0 auto; max-width: none; }
  #order-standard_cart .sd-dpilih .domains-row > .col-3 { flex-basis: 104px; max-width: 104px; }
  #order-standard_cart .sd-dpilih .domains-row .input-group-text { padding: 0 10px; }
  .sd-dpilih .option.sd-tampil { padding: 14px !important; }
  #order-standard_cart .product-info .sd-fitur { grid-template-columns: 1fr; }
  .sd-siklus { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sd-sk { display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 18px 16px 14px !important; }
  .sd-sk .sk-nama { grid-column: 1; }
  .sd-sk em { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 4px; }
  .sd-sk em.kosong { display: none; }
  .sd-sk s { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 28px 0 0; }
  .sd-sk s.kosong { display: none; }
  .sd-sk b { grid-column: 2; grid-row: 2; justify-self: end; font-size: 20px !important; }
  .sd-sk .sk-total { grid-column: 1 / -1; }
  .sd-sk.on::after { top: 16px !important; right: 12px !important; }
  #order-standard_cart .addon-products .panel-addon.sd-ad { grid-template-columns: 1fr auto; padding: 16px; }
  #order-standard_cart .addon-products .panel-addon.sd-ad .panel-body { grid-column: 1 / -1; grid-row: auto; margin-bottom: 8px; }
  #order-standard_cart .addon-products .panel-addon.sd-ad .panel-price { text-align: left; }
  .sd-co-kiri { padding: 18px; }
  .sd-ring .ring-total b { font-size: 22px; }
}
.sd-sk em, .sd-sk s { display: inline-block !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; flex: none !important; }
.sd-sk em.kosong { height: 21px !important; }
#order-standard_cart .order-summary h2 { text-align: left !important; }
.sd-sk .kosong { padding: 0 !important; margin-top: 0 !important; border: 0 !important; background: none !important; }
.sd-sk em.kosong { margin-top: 6px !important; }
.sd-sk s.kosong { margin-top: 8px !important; }
#productAddonsContainer .sd-langkah, #frmConfigureProduct .sd-siklus + .sd-langkah { margin-top: 34px !important; }