/* *****************************************************

    AnymHost Kawaii - child theme dari WHMCS Six (v2 "modern")
    Arah visual: bersih dan lega seperti tema WHMCS modern
    (header putih dua baris, kartu putih berbayang halus tanpa garis,
    sudut kecil, judul bagian berbobot ringan, footer abu terang),
    dengan identitas AnymHost (Plus Jakarta Sans, biru AnymHost).

    Template yang di-override: header.tpl dan footer.tpl.
    Selebihnya diwarisi dari Six.

    Isi:
      1.  Font (self-host)
      2.  Token
      3.  Global & tipografi
      4.  Header
      5.  Beranda: hero domain & shortcut
      6.  Tombol
      7.  Form
      8.  Kartu, panel, sidebar, tile
      9.  Tabel & pagination
      10. Label, status, alert
      11. Modal, popover, dropdown
      12. Judul halaman & breadcrumb
      13. Login
      14. Berita & pengumuman
      15. Footer
      16. Layout lebar
      17. Responsif & aksesibilitas

***************************************************** */

/* 1. Font ------------------------------------------------------------- */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
}

/* 2. Token ------------------------------------------------------------ */

:root {
    --ah-blue: #1f63f2;
    --ah-blue-dark: #174fcc;
    --ah-blue-light: #5b8cf7;
    --ah-blue-50: #edf3ff;
    --ah-blue-100: #d3e1fd;
    --ah-ink: #121826;
    --ah-navy: #0f1a33;
    --ah-body: #4b5565;
    --ah-muted: #8a93a3;
    --ah-surface: #f6f7f9;
    --ah-white: #ffffff;
    --ah-amber: #f2b33d;
    --ah-rust: #e0454b;
    --ah-sage: #8fc3a6;
    --ah-sage-dark: #1f9d55;
    --ah-line: #e8ebf0;
    --ah-line-strong: #d7dce4;
    --ah-radius-sm: 4px;
    --ah-radius: 6px;
    --ah-radius-lg: 8px;
    --ah-shadow: 0 2px 14px rgba(16, 24, 40, 0.06);
    --ah-shadow-hover: 0 10px 30px rgba(16, 24, 40, 0.1);
    --ah-ring: 0 0 0 3px rgba(31, 99, 242, 0.18);
    --ah-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ah-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ah-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 3. Global & tipografi ---------------------------------------------- */

body,
input,
button,
select,
textarea {
    font-family: var(--ah-font-body);
    color: var(--ah-body);
}

/* footer selalu di dasar layar pada halaman pendek */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ah-white);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body > section#main-body {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ah-font-heading);
    font-weight: 700;
    color: var(--ah-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--ah-blue);
    transition: color 0.2s var(--ah-ease);
}
a:hover,
a:focus {
    color: var(--ah-blue-dark);
}

::selection {
    background-color: var(--ah-blue);
    color: #fff;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--ah-blue);
    outline-offset: 2px;
}

.table,
.price,
.amt,
.stat {
    font-variant-numeric: tabular-nums;
}

section#main-body {
    padding: 44px 0 80px;
    background-color: transparent;
}

.ah-skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 1100;
    padding: 10px 16px;
    border-radius: var(--ah-radius);
    background: var(--ah-ink);
    color: #fff;
    font-weight: 600;
    transition: top 0.2s var(--ah-ease);
}
.ah-skip-link:focus {
    top: 12px;
    color: #fff;
}

/* 4. Header ----------------------------------------------------------- */

header.ah-header {
    position: relative;
    z-index: 1030;
    background-color: var(--ah-white);
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.05);
}

/* baris atas: logo kiri, utilitas kanan */
.ah-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}
.ah-header-top::before,
.ah-header-top::after {
    display: none;
}
.ah-header .logo {
    display: flex;
    align-items: center;
}
.ah-header .logo img {
    max-height: 38px;
    width: auto;
}
.ah-header .logo-text {
    color: var(--ah-ink);
    font-size: 1.5em;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ah-utils {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ah-utils > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--ah-radius);
    color: var(--ah-body);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s var(--ah-ease), color 0.2s var(--ah-ease);
}
.ah-utils > li > a:hover,
.ah-utils > li > a:focus {
    background-color: var(--ah-surface);
    color: var(--ah-ink);
    text-decoration: none;
}
.ah-utils > li > a i {
    font-size: 16px;
    color: var(--ah-ink);
}
.ah-utils .caret {
    opacity: 0.5;
}
.ah-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ah-blue-50);
    color: var(--ah-blue);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.ah-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ah-blue);
}
.ah-utils .btn-logged-in-admin i {
    color: var(--ah-rust);
}
.ah-toggle-wrap {
    display: none;
}

/* baris menu: tautan kiri, aksi kanan */
.ah-header #main-menu {
    background: transparent;
}
.ah-header .navbar-main {
    min-height: 60px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--ah-font-body);
    font-size: 15px;
}
.ah-header .navbar-main .navbar-nav > li > a {
    margin: 0;
    padding: 20px 16px;
    color: var(--ah-ink);
    font-weight: 500;
    line-height: 20px;
    background: transparent;
    transition: color 0.2s var(--ah-ease);
}
.ah-header .navbar-main .navbar-nav:not(.ah-nav-actions) > li:first-child > a {
    padding-left: 0;
}
.ah-header .navbar-main .navbar-nav > li > a:hover,
.ah-header .navbar-main .navbar-nav > li > a:focus,
.ah-header .navbar-main .navbar-nav > .open > a,
.ah-header .navbar-main .navbar-nav > .open > a:hover,
.ah-header .navbar-main .navbar-nav > .open > a:focus,
.ah-header .navbar-main .navbar-nav > .active > a,
.ah-header .navbar-main .navbar-nav > .active > a:hover,
.ah-header .navbar-main .navbar-nav > .active > a:focus {
    color: var(--ah-blue);
    background: transparent;
}
.ah-header .navbar-main .navbar-nav > li > a .caret {
    margin-left: 6px;
    opacity: 0.5;
}
.ah-header .navbar-main .navbar-nav > li > a .badge {
    margin-left: 4px;
    background-color: var(--ah-blue);
    color: #fff;
}
.ah-header .navbar-main li.account {
    background-color: transparent;
}
.ah-header .ah-nav-actions > li.ah-cta {
    display: flex;
    align-items: center;
    padding: 12px 0 12px 10px;
}
.ah-header .ah-nav-actions > li.ah-cta > a.btn {
    padding: 9px 18px;
    line-height: 20px;
}
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-primary {
    border: 1px solid var(--ah-blue);
    background-color: var(--ah-blue);
    color: #fff;
}
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-primary:hover,
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-primary:focus {
    border-color: var(--ah-blue-dark);
    background-color: var(--ah-blue-dark);
    color: #fff;
}
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-default {
    border: 1px solid var(--ah-line-strong);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-default:hover,
.ah-header .navbar-main .ah-nav-actions > li.ah-cta > a.btn-default:focus {
    border-color: var(--ah-ink);
    color: var(--ah-ink);
}

.ah-header .navbar-toggle {
    float: none;
    margin: 0;
    padding: 11px 10px;
    border: 1px solid var(--ah-line-strong);
    border-radius: var(--ah-radius);
    background: #fff;
}
.ah-header .navbar-toggle .icon-bar {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ah-ink);
    transition: transform 0.3s var(--ah-ease), opacity 0.2s var(--ah-ease);
}
.ah-header .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
    transform: translateY(6px) rotate(45deg);
}
.ah-header .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
    opacity: 0;
}
.ah-header .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 992px) {
    .ah-header .navbar-main > .container::before,
    .ah-header .navbar-main > .container::after,
    .ah-header .navbar-collapse::before,
    .ah-header .navbar-collapse::after {
        display: none;
    }
    .ah-header .navbar-collapse,
    .ah-header .navbar-collapse.collapse {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: auto !important;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
    .ah-header .navbar-nav {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
    }
    .ah-header .navbar-nav > li {
        float: none;
    }
    .ah-header .navbar-right {
        margin-right: 0;
    }
    /* dropdown terbuka saat hover */
    .ah-header .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
    }
    .ah-header .navbar-nav > li.dropdown > .dropdown-menu {
        margin-top: 0;
    }
}

@media (max-width: 991px) {
    .ah-util-label {
        display: none;
    }
    .ah-toggle-wrap {
        display: block;
        margin-left: 4px;
    }
    .ah-header .navbar-main {
        min-height: 0;
    }
    .ah-header .navbar-collapse {
        margin: 0 -24px;
        padding: 4px 24px 20px;
        border-top: 1px solid var(--ah-line);
        box-shadow: none;
    }
    .ah-header .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }
    .ah-header .navbar-collapse.in,
    .ah-header .navbar-collapse.collapsing {
        display: block !important;
    }
    .ah-header .navbar-nav,
    .ah-header .navbar-right {
        float: none !important;
        margin: 0;
    }
    .ah-header .navbar-nav > li {
        float: none;
    }
    .ah-header .navbar-main .navbar-nav > li > a,
    .ah-header .navbar-main .navbar-nav:not(.ah-nav-actions) > li:first-child > a {
        padding: 12px 0;
        border-bottom: 1px solid var(--ah-line);
    }
    .ah-header .ah-nav-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 14px;
    }
    .ah-header .ah-nav-actions > li.dropdown {
        flex: 1 1 100%;
    }
    .ah-header .ah-nav-actions > li.ah-cta {
        flex: 1 1 0;
        padding: 0;
    }
    .ah-header .ah-nav-actions > li.ah-cta > a.btn {
        display: block;
        width: 100%;
    }
    .ah-header .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        margin: 0 0 8px;
        padding: 4px 0 4px 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .ah-header .navbar-nav .open .dropdown-menu > li > a {
        padding: 9px 12px;
        color: var(--ah-body);
    }
}

/* 5. Beranda: hero domain & shortcut --------------------------------- */

section#home-banner {
    padding: 88px 0 96px;
    border-bottom: 0;
    background:
        radial-gradient(900px 320px at 50% 0%, rgba(31, 99, 242, 0.09), transparent 70%),
        var(--ah-white);
}
section#home-banner h2 {
    max-width: 780px;
    margin: 0 auto 32px;
    color: var(--ah-ink);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

/* kolom cari: kotak putih berbayang, tombol di dalamnya */
section#home-banner .input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px;
    border-radius: var(--ah-radius-lg);
    background: var(--ah-white);
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.1);
}
section#home-banner .input-group:focus-within {
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.1), var(--ah-ring);
}
section#home-banner .input-group .form-control {
    flex: 1 1 auto;
    width: auto;
    height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--ah-radius) !important;
    background: transparent;
    box-shadow: none;
    color: var(--ah-ink);
    font-size: 16px;
}
section#home-banner .input-group .form-control:focus {
    box-shadow: none;
}
section#home-banner .input-group-btn {
    display: flex;
    gap: 6px;
    width: auto;
    font-size: 15px;
}
section#home-banner .btn {
    height: 50px;
    margin: 0 !important;
    padding: 0 26px;
    border: 0;
    border-radius: var(--ah-radius) !important;
    font-weight: 600;
    box-shadow: none;
}
section#home-banner .btn.search {
    background-color: var(--ah-blue);
    color: #fff;
}
section#home-banner .btn.search:hover {
    background-color: var(--ah-blue-dark);
}
section#home-banner .btn.transfer {
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
}
section#home-banner .btn.transfer:hover {
    background-color: var(--ah-blue-100);
}

.home-shortcuts {
    padding: 8px 0 24px;
    border: 0;
    background: var(--ah-white);
    color: var(--ah-ink);
}
.home-shortcuts .lead {
    margin: 0;
    color: var(--ah-ink);
    font-family: var(--ah-font-heading);
    font-size: 22px;
    font-weight: 300;
    line-height: 120px;
}
.home-shortcuts ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
}
.home-shortcuts li {
    float: none;
    width: auto;
    padding: 0;
    border: 0;
}
.home-shortcuts li:first-child {
    border: 0;
}
.home-shortcuts li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 120px;
    padding: 20px 14px;
    border-radius: var(--ah-radius-lg);
    background: var(--ah-white);
    color: var(--ah-ink);
    box-shadow: var(--ah-shadow);
    transition: transform 0.4s var(--ah-ease), box-shadow 0.4s var(--ah-ease);
}
.home-shortcuts li a:hover,
.home-shortcuts li a:focus {
    transform: translateY(-4px);
    box-shadow: var(--ah-shadow-hover);
    text-decoration: none;
}
.home-shortcuts li i {
    color: var(--ah-blue);
    font-size: 26px;
}
.home-shortcuts li p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}
.home-shortcuts li span {
    display: none !important;
}

/* 6. Tombol ----------------------------------------------------------- */

.btn {
    padding: 9px 18px;
    border-radius: var(--ah-radius-sm);
    font-family: var(--ah-font-body);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.25s var(--ah-ease), border-color 0.25s var(--ah-ease), box-shadow 0.25s var(--ah-ease), color 0.25s var(--ah-ease), transform 0.25s var(--ah-ease);
}
.btn:active,
.btn.active {
    box-shadow: none;
    transform: translateY(1px);
}
.btn-lg {
    padding: 13px 26px;
    font-size: 15px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}
.btn-xs {
    padding: 3px 9px;
}

.btn-primary,
.btn-info {
    border-color: var(--ah-blue);
    background-color: var(--ah-blue);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    border-color: var(--ah-blue-dark);
    background-color: var(--ah-blue-dark);
    color: #fff;
}

.btn-default {
    border: 1px solid var(--ah-line-strong);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: var(--ah-ink);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}

/* tombol lembut ala "Transfer"/"New Contact" */
.btn-info.btn-soft,
.btn-soft {
    border-color: var(--ah-blue-50);
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
}

.btn-success {
    border-color: var(--ah-sage-dark);
    background-color: var(--ah-sage-dark);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    border-color: #188246;
    background-color: #188246;
    color: #fff;
}

.btn-warning {
    border-color: var(--ah-amber);
    background-color: var(--ah-amber);
    color: var(--ah-ink);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    border-color: #dc9b22;
    background-color: #dc9b22;
    color: var(--ah-ink);
}

.btn-danger {
    border-color: var(--ah-rust);
    background-color: var(--ah-rust);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    border-color: #c4363c;
    background-color: #c4363c;
    color: #fff;
}

.btn-link {
    color: var(--ah-blue);
}

.btn[disabled],
.btn.disabled {
    opacity: 0.5;
}

/* 7. Form ------------------------------------------------------------- */

.form-control {
    height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--ah-line-strong);
    border-radius: var(--ah-radius-sm);
    background-color: var(--ah-white);
    color: var(--ah-ink);
    font-size: 15px;
    box-shadow: none;
    transition: border-color 0.2s var(--ah-ease), box-shadow 0.2s var(--ah-ease);
}
textarea.form-control {
    height: auto;
}
.form-control:focus {
    border-color: var(--ah-blue);
    box-shadow: var(--ah-ring);
}
.form-control::placeholder {
    color: #a0a7b4;
}
.form-control[disabled],
.form-control[readonly] {
    background-color: var(--ah-surface);
}

.input-group-addon {
    border: 1px solid var(--ah-line-strong);
    border-radius: var(--ah-radius-sm);
    background-color: var(--ah-surface);
    color: var(--ah-body);
}

label,
.control-label {
    margin-bottom: 6px;
    color: var(--ah-body);
    font-size: 14px;
    font-weight: 500;
}

.has-error .form-control {
    border-color: var(--ah-rust);
}
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(224, 69, 75, 0.18);
}
.has-error .help-block,
.has-error .control-label {
    color: var(--ah-rust);
}
.has-success .form-control {
    border-color: var(--ah-sage-dark);
}

/* 8. Kartu, panel, sidebar, tile ------------------------------------- */

.panel {
    margin-bottom: 24px;
    border: 0;
    border-radius: var(--ah-radius-lg);
    background-color: var(--ah-white);
    box-shadow: var(--ah-shadow);
    overflow: hidden;
}
.panel-default > .panel-heading,
.panel-heading {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}
.panel-title,
.panel-heading h3 {
    color: var(--ah-ink);
    font-family: var(--ah-font-heading);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.panel-title > i {
    display: none;
}
.panel-title .btn {
    border: 0;
    background: var(--ah-blue-50) !important;
    color: var(--ah-blue) !important;
    font-size: 12.5px;
}
.panel-body {
    padding: 22px 24px;
}
.panel-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--ah-line);
    background-color: var(--ah-white);
}
.panel-primary > .panel-heading {
    border-color: var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}

/* aksen panel beranda klien: tanpa garis tebal */
.panel[class*="panel-accent-"] {
    border-top: 0;
}

.list-group-item {
    border-color: var(--ah-line);
    color: var(--ah-body);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    border-color: var(--ah-line);
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
}
a.list-group-item:hover,
a.list-group-item:focus {
    background-color: var(--ah-surface);
    color: var(--ah-ink);
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
    padding: 16px 24px;
}

/* sidebar: tanpa kartu, judul ringan, tautan dengan ikon */
.sidebar .panel-sidebar {
    margin-bottom: 32px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.sidebar .panel-sidebar > .panel-heading {
    padding: 0 0 12px;
    border: 0;
    background: transparent;
}
.sidebar .panel-sidebar .panel-title {
    font-size: 20px;
    font-weight: 400;
}
.sidebar .panel-sidebar .panel-title > i:not(.panel-minimise) {
    display: none;
}
.sidebar .panel-sidebar .panel-minimise {
    float: right;
    color: #c2c8d2;
}
.sidebar .panel-sidebar .panel-body {
    padding: 0 0 8px;
}
.sidebar .panel-sidebar .list-group {
    margin: 0;
}
.sidebar .panel-sidebar .list-group-item {
    padding: 8px 12px;
    border: 0;
    border-radius: var(--ah-radius);
    background: transparent;
    color: var(--ah-body);
    font-size: 14.5px;
    transition: background-color 0.2s var(--ah-ease), color 0.2s var(--ah-ease);
}
.sidebar .panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform) {
    color: #b7bec9;
}
.sidebar .panel-sidebar a.list-group-item:hover,
.sidebar .panel-sidebar a.list-group-item:focus {
    background: var(--ah-surface);
    color: var(--ah-ink);
}
.sidebar .panel-sidebar a.list-group-item:hover i.far,
.sidebar .panel-sidebar a.list-group-item:hover i.fas {
    color: var(--ah-blue) !important;
}
.sidebar .panel-sidebar a.list-group-item.active,
.sidebar .panel-sidebar a.list-group-item.active:focus,
.sidebar .panel-sidebar a.list-group-item.active:hover {
    border: 0;
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
    font-weight: 600;
}
.sidebar .panel-sidebar a.list-group-item.active i,
.sidebar .panel-sidebar a.list-group-item.active:focus i,
.sidebar .panel-sidebar a.list-group-item.active:hover i {
    color: var(--ah-blue);
}
.sidebar .panel-sidebar .list-group-item .badge {
    background-color: var(--ah-surface);
    color: var(--ah-body);
}
.sidebar .panel-sidebar .panel-footer {
    padding: 8px 0 0;
    border: 0;
    background: transparent;
}

/* tile statistik beranda klien: angka besar tipis di tengah */
.tiles {
    margin-bottom: 28px;
}
.tiles .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
.tiles .row::before,
.tiles .row::after {
    display: none;
}
.tiles .row > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}
.tiles .row > .tile {
    position: relative;
    display: block;
    border: 0;
    border-radius: var(--ah-radius-lg);
    background-color: var(--ah-white);
    box-shadow: var(--ah-shadow);
    text-align: center;
    transition: transform 0.4s var(--ah-ease), box-shadow 0.4s var(--ah-ease);
}
.tiles .row > .tile > a {
    display: block;
    padding: 40px 16px 32px;
    color: inherit;
    text-decoration: none;
}
.tiles .row > .tile:hover {
    transform: translateY(-4px);
    background-color: var(--ah-white);
    box-shadow: var(--ah-shadow-hover);
}
.tile .icon {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #c2c8d2;
    font-size: 14px;
}
.tile .stat {
    margin: 0;
    color: var(--ah-blue);
    font-family: var(--ah-font-heading);
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
}
.tile .title {
    margin-top: 12px;
    color: var(--ah-ink);
    font-size: 17px;
    font-weight: 400;
    text-transform: none;
    opacity: 1;
}
.tile .highlight {
    display: none;
}

.well {
    border: 0;
    border-radius: var(--ah-radius-lg);
    background: var(--ah-surface);
    box-shadow: none;
}

/* 9. Tabel & pagination ---------------------------------------------- */

.table > thead > tr > th {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-body);
    font-family: var(--ah-font-body);
    font-size: 13px;
    font-weight: 500;
}
.table > tbody > tr > td {
    padding: 16px 18px;
    border-top: 1px solid var(--ah-line);
    color: var(--ah-ink);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}
.table-hover > tbody > tr {
    transition: background-color 0.2s var(--ah-ease);
}
.table-hover > tbody > tr:hover {
    background-color: var(--ah-surface);
}
.table-container,
.dataTables_wrapper {
    border-radius: var(--ah-radius-lg);
    background: var(--ah-white);
    box-shadow: var(--ah-shadow);
}
table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--ah-line);
}

.pagination > li > a,
.pagination > li > span {
    margin: 0 2px;
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius-sm) !important;
    color: var(--ah-ink);
}
.pagination > li > a:hover,
.pagination > li > a:focus {
    border-color: var(--ah-line-strong);
    background-color: var(--ah-surface);
    color: var(--ah-ink);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    border-color: var(--ah-blue-50);
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
}

/* 10. Label, status, alert ------------------------------------------- */

.label,
.badge {
    padding: 0.35em 0.65em;
    border-radius: var(--ah-radius-sm);
    font-family: var(--ah-font-body);
    font-weight: 600;
}
.label-default,
.badge {
    background-color: var(--ah-surface);
    color: var(--ah-body);
}
.label-primary,
.label-info {
    background-color: var(--ah-blue-50);
    color: var(--ah-blue);
}
.label-success {
    background-color: #e3f6ea;
    color: #188246;
}
.label-warning {
    background-color: #fdf1d8;
    color: #8a5d06;
}
.label-danger {
    background-color: #fde8e9;
    color: #c4363c;
}

.label.status {
    border: 0;
}
.label.status-active,
.label.status-paid,
.label.status-completed {
    background-color: #e3f6ea;
    color: #188246;
}
.label.status-pending,
.label.status-unpaid,
.label.status-pending-transfer,
.label.status-payment-pending {
    background-color: #fdf1d8;
    color: #8a5d06;
}
.label.status-suspended,
.label.status-terminated,
.label.status-cancelled,
.label.status-overdue,
.label.status-fraud,
.label.status-expired {
    background-color: #fde8e9;
    color: #c4363c;
}

.alert {
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--ah-radius);
}
.alert-info {
    border-color: var(--ah-blue-100);
    background-color: var(--ah-blue-50);
    color: #163f99;
}
.alert-success {
    border-color: #c4ebd3;
    background-color: #eefaf2;
    color: #146b3a;
}
.alert-warning {
    border-color: #f6dfa8;
    background-color: #fdf7e8;
    color: #7a5205;
}
.alert-danger {
    border-color: #f6c9cb;
    background-color: #fdeeef;
    color: #a82d33;
}

/* 11. Modal, popover, dropdown --------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--ah-radius-lg);
    box-shadow: 0 30px 80px -20px rgba(16, 24, 40, 0.35);
    overflow: hidden;
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ah-line);
}
.modal-body {
    padding: 24px;
}
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--ah-line);
    background-color: var(--ah-white);
}
.modal-title {
    font-family: var(--ah-font-heading);
    font-size: 20px;
    font-weight: 400;
}
.modal-backdrop.in {
    opacity: 0.4;
    background-color: var(--ah-ink);
}
.modal-content.panel-primary > .modal-header,
.modal-content.panel-primary > .panel-heading {
    background-color: var(--ah-white);
    color: var(--ah-ink);
}

.dropdown-menu {
    min-width: 220px;
    margin-top: 0;
    padding: 8px;
    border: 0;
    border-radius: var(--ah-radius-lg);
    background-color: var(--ah-white);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
}
.dropdown-menu > li > a {
    padding: 9px 12px;
    border-radius: var(--ah-radius);
    color: var(--ah-body);
    transition: background-color 0.2s var(--ah-ease), color 0.2s var(--ah-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.ah-header .navbar-nav .dropdown-menu > li > a:hover,
.ah-header .navbar-nav .dropdown-menu > .active > a {
    color: var(--ah-blue);
    background-color: var(--ah-blue-50);
}
.dropdown-menu .divider {
    margin: 6px 4px;
    background-color: var(--ah-line);
}

.popover {
    border: 0;
    border-radius: var(--ah-radius-lg);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
    font-family: var(--ah-font-body);
}
.popover-user-notifications {
    padding: 6px 8px;
}
.popover-user-notifications ul li {
    border-bottom-color: var(--ah-line);
}
.popover-user-notifications ul li a {
    border-radius: var(--ah-radius);
    color: var(--ah-body);
}
.popover-user-notifications ul li a:hover {
    background-color: var(--ah-surface);
    color: var(--ah-ink);
}
.language-popover {
    background-color: var(--ah-white);
    background-image: none;
}
.language-popover.popover.bottom > .arrow:after {
    border-bottom-color: var(--ah-white);
}
.language-popover .popover-content li a {
    color: var(--ah-body);
}
.language-popover .popover-content li a:hover {
    color: var(--ah-blue);
}

/* 12. Judul halaman & breadcrumb ------------------------------------- */

.header-lined {
    margin: 0 0 36px;
    padding: 0;
    border-bottom: 0;
}
.header-lined h1,
div.header-lined h1 {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    color: var(--ah-ink);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
div.header-lined h1 small {
    display: block;
    margin-top: 8px;
    color: var(--ah-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
}
.header-lined .breadcrumb,
div.header-lined .breadcrumb,
.breadcrumb {
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    font-size: 13.5px;
}
.breadcrumb > li,
.breadcrumb > li > a {
    color: var(--ah-body);
}
.breadcrumb > li + li::before {
    color: #c2c8d2;
}
.breadcrumb > .active {
    color: var(--ah-blue);
}

/* 13. Login ----------------------------------------------------------- */

.logincontainer {
    position: relative;
    margin-top: 8px;
    margin-bottom: 40px;
    padding: 36px 44px 40px;
    border-radius: var(--ah-radius-lg);
    background-color: var(--ah-white);
    box-shadow: 0 16px 50px rgba(16, 24, 40, 0.09);
}
.logincontainer::before {
    content: "";
    display: block;
    width: 104px;
    height: 104px;
    margin: -12px auto 0;
    background: url("../img/anym-chan.webp") center / contain no-repeat;
}
.logincontainer .header-lined {
    margin-bottom: 28px;
    text-align: center;
}
.logincontainer div.header-lined h1 {
    font-size: 32px;
}
.logincontainer .login-form .btn-primary {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 13px 18px;
    font-size: 15px;
}
.logincontainer .login-form .btn-default {
    border: 0;
    background: transparent;
    color: var(--ah-blue);
}

/* 14. Berita & pengumuman -------------------------------------------- */

.announcement-single {
    margin: 0 0 20px;
    padding: 24px 28px;
    border-radius: var(--ah-radius-lg);
    background-color: var(--ah-white);
    box-shadow: var(--ah-shadow);
    transition: box-shadow 0.4s var(--ah-ease), transform 0.4s var(--ah-ease);
}
.announcement-single:hover {
    transform: translateY(-3px);
    box-shadow: var(--ah-shadow-hover);
}
.announcement-single h3 {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.5;
}
.announcement-single h3 a {
    color: var(--ah-ink);
}
.announcement-single h3 a:hover,
.announcement-single h3 a:focus {
    color: var(--ah-blue);
    text-decoration: none;
}
.announcement-single .label-default {
    display: inline-block;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    color: var(--ah-muted);
    font-size: 0.68em;
    font-weight: 500;
}
.announcement-single blockquote,
div.announcement-single blockquote {
    margin: 10px 0 0;
    padding: 0;
    border-left: 0;
    color: var(--ah-body);
    font-size: 0.95em;
    line-height: 1.7;
}
.announcement-single .label-warning {
    padding: 0;
    background: transparent;
    color: var(--ah-blue);
    font-size: 0.95em;
}

/* 15. Footer ---------------------------------------------------------- */

section#footer.ah-footer {
    margin: 0;
    padding: 72px 0 0;
    border-top: 0;
    background:
        linear-gradient(180deg, var(--ah-surface), #fbfbfc);
    color: var(--ah-body);
    font-size: 15px;
    line-height: 1.7;
}
.ah-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
}
.ah-footer-logo {
    display: inline-flex;
    align-items: center;
    color: var(--ah-ink);
    font-size: 1.4em;
    font-weight: 800;
}
.ah-footer-logo img {
    max-height: 36px;
}
.ah-footer-brand p {
    max-width: 320px;
    margin: 18px 0 0;
    font-size: 14px;
}
.ah-footer-col h4 {
    margin: 4px 0 18px;
    color: var(--ah-ink);
    font-size: 19px;
    font-weight: 500;
}
.ah-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ah-footer-col li {
    margin: 0 0 10px;
}
section#footer.ah-footer a {
    color: var(--ah-body);
}
section#footer.ah-footer a:hover,
section#footer.ah-footer a:focus {
    color: var(--ah-blue);
    text-decoration: none;
}
.ah-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 64px;
    padding: 24px 0;
    border-top: 1px solid var(--ah-line);
    font-size: 13.5px;
}
.ah-footer-bottom p {
    margin: 0;
}
section#footer.ah-footer .back-to-top {
    float: none;
    flex: 0 0 auto;
}
section#footer.ah-footer .back-to-top i {
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--ah-radius);
    background: transparent;
    color: var(--ah-ink);
    line-height: 36px;
    text-align: center;
    opacity: 1;
    transition: background-color 0.3s var(--ah-ease), transform 0.3s var(--ah-ease);
}
section#footer.ah-footer .back-to-top:hover i,
section#footer.ah-footer .back-to-top:focus i {
    background-color: var(--ah-white);
    color: var(--ah-blue);
    transform: translateY(-2px);
}

/* 16. Layout lebar (maks 1440px, gutter 48px seperti landing) -------- */

@media (min-width: 768px) {
    .container {
        width: 100%;
        max-width: 1440px;
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (min-width: 1200px) {
    .container {
        padding-left: 48px;
        padding-right: 48px;
    }
    #main-body > .container > .row > .col-md-3.sidebar {
        width: 22%;
    }
    #main-body > .container > .row > .col-md-9.pull-md-right {
        width: 78%;
    }
}

/* 17. Responsif & aksesibilitas -------------------------------------- */

@media (max-width: 991px) {
    .ah-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ah-footer-brand {
        grid-column: 1 / -1;
    }
    .tiles .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .home-shortcuts .lead {
        line-height: 1.4;
        padding: 16px 0;
    }
    div.header-lined h1 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14.5px;
    }
    .ah-header-top {
        min-height: 64px;
    }
    .ah-header .logo img {
        max-height: 32px;
    }
    .ah-header .navbar-collapse {
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    section#main-body {
        padding: 28px 0 56px;
    }
    section#home-banner {
        padding: 48px 0 56px;
    }
    section#home-banner .input-group {
        flex-wrap: wrap;
    }
    section#home-banner .input-group .form-control,
    section#home-banner .input-group-btn {
        flex: 1 1 100%;
    }
    section#home-banner .input-group-btn .btn {
        flex: 1 1 0;
        padding: 0 14px;
    }
    .home-shortcuts ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    div.header-lined h1 {
        font-size: 28px;
    }
    .panel-heading,
    .panel-body {
        padding-left: 18px;
        padding-right: 18px;
    }
    .tile .stat {
        font-size: 44px;
    }
    .announcement-single {
        padding: 18px 20px;
    }
    .logincontainer {
        padding: 24px 20px 28px;
    }
    .ah-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
    .ah-footer-bottom {
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* 18. Hero malam, footer ringkas, halaman auth (v3) ---------------------- */

/* footer: hanya baris hak cipta */
body section#footer.ah-footer {
    padding: 22px 0;
    border-top: 1px solid var(--ah-line);
    background: var(--ah-white);
    text-align: center;
}
body section#footer.ah-footer .ah-copyright {
    margin: 0;
    color: var(--ah-body);
    font-size: 13.5px;
}

/* hero beranda: malam berbintang seperti landing */
body section#home-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 68vh, 700px);
    margin: 0;
    padding: 72px 0 96px;
    overflow: hidden;
    isolation: isolate;
    background: #071124 url("../img/meadow-night-hero.webp") center bottom / cover no-repeat;
    color: #ecf3fd;
    text-align: center;
}
body section#home-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 17, 36, 0.62) 0%, rgba(7, 17, 36, 0.18) 42%, rgba(7, 17, 36, 0.72) 100%);
}
body section#home-banner > .container {
    width: 100%;
}
body section#home-banner h2 {
    max-width: 820px;
    margin: 0 auto 28px;
    color: #ecf3fd;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(32px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(2, 8, 24, 0.55);
    text-wrap: balance;
}
body section#home-banner .input-group {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid rgba(150, 190, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 20, 46, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(2, 8, 24, 0.5);
}
body section#home-banner .input-group:focus-within {
    border-color: rgba(96, 176, 255, 0.7);
    box-shadow: 0 20px 60px rgba(2, 8, 24, 0.5), 0 0 0 3px rgba(96, 176, 255, 0.22);
}
body section#home-banner .input-group .form-control {
    height: 48px;
    padding: 0 20px;
    border-radius: 999px !important;
    color: #ecf3fd;
}
body section#home-banner .input-group .form-control::placeholder {
    color: rgba(236, 243, 253, 0.55);
}
body section#home-banner .btn {
    height: 48px;
    padding: 0 26px;
    border-radius: 999px !important;
    font-weight: 700;
}
body section#home-banner .btn.search {
    background-color: #60b0ff;
    color: #051024;
}
body section#home-banner .btn.search:hover {
    background-color: #82c2ff;
}
body section#home-banner .btn.transfer {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(96, 176, 255, 0.55);
    color: #60b0ff;
}
body section#home-banner .btn.transfer:hover {
    background-color: rgba(96, 176, 255, 0.14);
}

/* beranda: tidak ada isi lain, jadi area utama tidak memberi ruang kosong */
body:has(#home-banner) #main-body {
    min-height: 0;
    padding: 0;
}

@media (max-width: 767px) {
    body section#home-banner {
        min-height: 0;
        padding: 56px 0 72px;
    }
    body section#home-banner .input-group {
        flex-wrap: wrap;
        border-radius: 24px;
    }
    body section#home-banner .input-group .form-control {
        flex: 1 1 100%;
        height: 46px;
    }
    body section#home-banner .input-group-btn {
        flex: 1 1 100%;
    }
    body section#home-banner .input-group-btn .btn {
        flex: 1 1 0;
        padding: 0 14px;
    }
}

/* halaman login, register, lupa kata sandi: latar malam + kartu */
body:not(:has(#order-standard_cart)):has(.logincontainer) #main-body,
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body {
    padding: 56px 0 72px;
    background: #071124 url("../img/meadow-night-hero.webp") center bottom / cover no-repeat;
}
#main-body .logincontainer {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 36px 36px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 28px 70px rgba(2, 8, 24, 0.5);
}
#main-body .logincontainer.with-social {
    max-width: 480px;
}
#main-body .logincontainer .row > [class*="col-sm-"] {
    float: none;
    width: 100%;
}
#main-body .logincontainer .row > .col-sm-5 {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ah-line);
    text-align: center;
}
#main-body .logincontainer .btn {
    border-radius: 999px;
}
#main-body .logincontainer .login-form .btn-primary {
    min-height: 48px;
}
#main-body .logincontainer .header-lined small {
    display: block;
    margin-top: 4px;
    color: var(--ah-body);
    font-size: 14px;
    font-weight: 400;
}
/* register: judul putih di atas latar malam, form dalam kartu */
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .sidebar,
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .breadcrumb {
    display: none;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .container > .row > [class*="col-md-"] {
    float: none;
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined {
    margin-bottom: 20px;
    border: 0;
    text-align: center;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined h1 {
    color: #ecf3fd;
    text-shadow: 0 2px 20px rgba(2, 8, 24, 0.55);
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined h1 small {
    display: block;
    margin-top: 6px;
    color: rgba(236, 243, 253, 0.8);
    font-size: 15px;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .main-content form.using-password-strength {
    padding: 32px 36px 36px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 28px 70px rgba(2, 8, 24, 0.5);
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body form.using-password-strength .sub-heading {
    margin: 24px 0 14px;
    border: 0;
    text-align: left;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body form.using-password-strength .sub-heading:first-child {
    margin-top: 0;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body form.using-password-strength .sub-heading span {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--ah-ink);
    font-size: 17px;
    font-weight: 700;
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body form.using-password-strength .btn {
    border-radius: 999px;
}
@media (max-width: 767px) {
    #main-body .logincontainer,
    body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .main-content form.using-password-strength {
        padding: 24px 20px 28px;
        border-radius: 16px;
    }
}

/* perbaikan beranda & judul login */
body section#home-banner {
    flex: 1 0 auto;
}
body:has(#home-banner) #main-body {
    display: none;
}
body .home-shortcuts {
    margin: 0;
    padding: 32px 0 40px;
    background: var(--ah-surface);
}
#main-body .logincontainer .header-lined h1 {
    line-height: 1.2;
}
#main-body .logincontainer .header-lined small {
    line-height: 1.5;
}

/* register: judul seksi tidak terpotong */
body #main-body form.using-password-strength .sub-heading {
    height: auto;
    overflow: visible;
    line-height: 1.4;
}
body #main-body form.using-password-strength .sub-heading span {
    top: auto;
    line-height: 1.4;
}


/* 19. Mode terang/gelap, dashboard kartu, slider layanan (v4) ------------ */

/* gambar hero mengikuti tema */
html {
    --ah-hero-img: url("../img/meadow-night-hero.webp");
    --ah-hero-fg: #ecf3fd;
    --ah-card-glass: rgba(255, 255, 255, 0.97);
}
html[data-theme="light"] {
    --ah-hero-img: url("../img/meadow-day-hero.webp");
    --ah-hero-fg: #0f1a33;
}
html[data-theme="dark"] {
    --ah-hero-img: url("../img/meadow-night-hero.webp");
    --ah-hero-fg: #ecf3fd;
    --ah-card-glass: rgba(12, 22, 42, 0.93);
    color-scheme: dark;

    --ah-blue: #4a8bff;
    --ah-blue-dark: #6aa0ff;
    --ah-blue-light: #7fb0ff;
    --ah-blue-50: #11264a;
    --ah-blue-100: #1b3a70;
    --ah-ink: #ecf3fd;
    --ah-navy: #ecf3fd;
    --ah-body: #a9b6cc;
    --ah-muted: #7f8da6;
    --ah-surface: #0a1325;
    --ah-white: #0f1a30;
    --ah-line: #1f2d47;
    --ah-line-strong: #2b3d5f;
    --ah-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    --ah-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] body {
    background-color: var(--ah-surface);
    color: var(--ah-body);
}
html[data-theme="dark"] #order-standard_cart {
    --ah-blue: #4a8bff;
    --ah-blue-dark: #6aa0ff;
    --ah-blue-50: #11264a;
    --ah-blue-100: #1b3a70;
    --ah-ink: #ecf3fd;
    --ah-navy: #ecf3fd;
    --ah-body: #a9b6cc;
    --ah-surface: #0a1325;
    --ah-line: #1f2d47;
}

/* komponen Bootstrap/Six yang memakai warna tetap */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-sidebar,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-content,
html[data-theme="dark"] .tiles .tile,
html[data-theme="dark"] .announcement-single,
html[data-theme="dark"] .ah-header,
html[data-theme="dark"] .ah-header .navbar-main,
html[data-theme="dark"] #order-standard_cart .product-info,
html[data-theme="dark"] #order-standard_cart .products .product,
html[data-theme="dark"] #order-standard_cart .products .product footer,
html[data-theme="dark"] #order-standard_cart .panel-addon,
html[data-theme="dark"] #order-standard_cart .view-cart-items,
html[data-theme="dark"] #order-standard_cart .view-cart-items-header,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item,
html[data-theme="dark"] #order-standard_cart .order-summary,
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option,
html[data-theme="dark"] #order-standard_cart .ah-cycle-box {
    border-color: var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-body);
}
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--ah-line);
    background-color: transparent;
    color: var(--ah-ink);
}
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .header-lined h1,
html[data-theme="dark"] .navbar-main .navbar-nav > li > a,
html[data-theme="dark"] .ah-header a {
    color: var(--ah-ink);
}
html[data-theme="dark"] a {
    color: var(--ah-blue);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field,
html[data-theme="dark"] .iti__selected-flag {
    border-color: var(--ah-line-strong);
    background-color: #0b1629;
    color: var(--ah-ink);
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--ah-muted);
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly] {
    background-color: #0d1a30;
}
html[data-theme="dark"] .table,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
    border-color: var(--ah-line);
    background-color: transparent;
    color: var(--ah-body);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: rgba(74, 139, 255, 0.07);
}
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb > li,
html[data-theme="dark"] .breadcrumb > .active {
    background: transparent;
    color: var(--ah-muted);
}
html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .list-group-item {
    color: var(--ah-body);
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] a.list-group-item:hover {
    background-color: var(--ah-blue-50);
    color: var(--ah-ink);
}
html[data-theme="dark"] .btn-default {
    border-color: var(--ah-line-strong);
    background-color: transparent;
    color: var(--ah-ink);
}
html[data-theme="dark"] .btn-default:hover {
    background-color: var(--ah-blue-50);
    color: var(--ah-ink);
}
html[data-theme="dark"] .label-default {
    background-color: var(--ah-blue-50);
    color: var(--ah-blue-light);
}
html[data-theme="dark"] hr {
    border-color: var(--ah-line);
}
html[data-theme="dark"] .ah-header .logo {
    padding: 6px 12px;
    border-radius: 12px;
    background: #fff;
}
html[data-theme="dark"] section#footer.ah-footer {
    background: var(--ah-white);
    color: var(--ah-body);
}
html[data-theme="dark"] .ah-header .navbar-toggle {
    border-color: var(--ah-line-strong);
    background: var(--ah-white);
}
html[data-theme="dark"] .ah-header .navbar-toggle .icon-bar {
    background-color: var(--ah-ink);
}

/* tombol tema */
.ah-theme-wrap {
    display: flex;
    align-items: center;
}
.ah-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ah-ink);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s var(--ah-ease);
}
.ah-theme-toggle:hover,
.ah-theme-toggle:focus-visible {
    background: var(--ah-blue-50);
    color: var(--ah-blue);
}
.ah-theme-toggle .ah-icon-sun {
    display: none;
}
html[data-theme="dark"] .ah-theme-toggle .ah-icon-moon {
    display: none;
}
html[data-theme="dark"] .ah-theme-toggle .ah-icon-sun {
    display: inline-block;
}

/* hero mengikuti tema */
body section#home-banner {
    background-image: var(--ah-hero-img);
}
html[data-theme="light"] body section#home-banner {
    background-color: #cfe6ff;
}
html[data-theme="light"] body section#home-banner::before {
    background: linear-gradient(180deg, rgba(255, 252, 244, 0.6) 0%, rgba(255, 252, 244, 0.08) 48%, rgba(255, 252, 244, 0.4) 100%);
}
html[data-theme="light"] body section#home-banner h2 {
    color: var(--ah-hero-fg);
    text-shadow: 0 1px 18px rgba(255, 255, 255, 0.75);
}
html[data-theme="light"] body section#home-banner .input-group {
    border-color: rgba(31, 99, 242, 0.2);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 50px rgba(16, 40, 90, 0.22);
}
html[data-theme="light"] body section#home-banner .input-group .form-control {
    color: #121826;
}
html[data-theme="light"] body section#home-banner .input-group .form-control::placeholder {
    color: rgba(18, 24, 38, 0.5);
}
html[data-theme="light"] body section#home-banner .btn.search {
    background-color: #1f63f2;
    color: #fff;
}
html[data-theme="light"] body section#home-banner .btn.search:hover {
    background-color: #174fcc;
}
html[data-theme="light"] body section#home-banner .btn.transfer {
    box-shadow: inset 0 0 0 1px rgba(31, 99, 242, 0.45);
    color: #1f63f2;
}
html[data-theme="light"] body section#home-banner .btn.transfer:hover {
    background-color: rgba(31, 99, 242, 0.08);
}

/* halaman auth mengikuti tema */
body:not(:has(#order-standard_cart)):has(.logincontainer) #main-body,
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body {
    background-image: var(--ah-hero-img);
}
#main-body .logincontainer,
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body .main-content form.using-password-strength {
    background: var(--ah-card-glass);
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined h1 {
    color: var(--ah-hero-fg);
}
body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined h1 small {
    color: var(--ah-hero-fg);
    opacity: 0.8;
}
html[data-theme="light"] body:not(:has(#order-standard_cart)):has(.ah-cta):has(.main-content form.using-password-strength) #main-body div.header-lined h1 {
    text-shadow: 0 1px 18px rgba(255, 255, 255, 0.75);
}
/* garis pemisah bawaan Six di kolom login dihapus */
#main-body .logincontainer .row > [class*="col-sm-"] {
    border: 0;
}
#main-body .logincontainer .login-form,
#main-body .logincontainer .col-sm-7,
#main-body .logincontainer .col-sm-5 {
    border-left: 0;
    border-right: 0;
}
#main-body .logincontainer .col-sm-5:empty,
#main-body .logincontainer .col-sm-5:not(:has(.social-signin-btns *)) {
    display: none;
}

/* shortcut beranda: kartu yang senada dengan hero */
body .home-shortcuts {
    position: relative;
    margin: 0;
    padding: 40px 0 56px;
    border: 0;
    background: var(--ah-surface);
}
body .home-shortcuts > .container > .row {
    display: block;
}
body .home-shortcuts .row > [class*="col-"] {
    float: none;
    width: 100%;
}
body .home-shortcuts .lead {
    display: block !important;
    margin: 0 0 20px;
    color: var(--ah-ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
}
body .home-shortcuts .col-md-4 {
    display: block !important;
}
body .home-shortcuts ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body .home-shortcuts ul li {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}
body .home-shortcuts ul li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 22px;
    border: 1px solid var(--ah-line);
    border-radius: 16px;
    background: var(--ah-white);
    box-shadow: var(--ah-shadow);
    color: var(--ah-ink);
    text-align: left;
    transition: transform 0.35s var(--ah-ease), border-color 0.2s var(--ah-ease), box-shadow 0.35s var(--ah-ease);
}
body .home-shortcuts ul li a:hover,
body .home-shortcuts ul li a:focus-visible {
    border-color: var(--ah-blue);
    box-shadow: var(--ah-shadow-hover);
    text-decoration: none;
    transform: translateY(-3px);
}
body .home-shortcuts ul li a i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 14px;
    background: var(--ah-blue-50);
    color: var(--ah-blue);
    font-size: 20px;
}
body .home-shortcuts ul li a p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    color: var(--ah-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
body .home-shortcuts ul li a p span {
    color: var(--ah-blue);
    transition: transform 0.25s var(--ah-ease);
}
body .home-shortcuts ul li a:hover p span {
    transform: translateX(4px);
}
@media (max-width: 991px) {
    body .home-shortcuts ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* dashboard: tombol biru */
.btn-success,
.btn-info,
a.btn-success,
input.btn-success {
    border-color: var(--ah-blue);
    background-color: var(--ah-blue);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    border-color: var(--ah-blue-dark);
    background-color: var(--ah-blue-dark);
    color: #fff;
}
.panel-sidebar .panel-footer .btn,
.client-home-panels .btn-xs,
.client-home-panels .btn-default {
    border-radius: 999px;
}
.panel-footer .btn-success,
.panel-footer .btn-default {
    border-color: var(--ah-blue);
    background-color: var(--ah-blue);
    color: #fff;
}

/* dashboard: kartu statistik */
.tiles .tile {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.tiles .tile > a {
    position: relative;
    display: block;
    padding: 22px;
    border: 1px solid var(--ah-line);
    border-radius: 16px;
    background: var(--ah-white);
    box-shadow: var(--ah-shadow);
    text-align: left;
    transition: transform 0.35s var(--ah-ease), border-color 0.2s var(--ah-ease), box-shadow 0.35s var(--ah-ease);
}
.tiles .tile > a:hover,
.tiles .tile > a:focus-visible {
    border-color: var(--ah-blue);
    box-shadow: var(--ah-shadow-hover);
    text-decoration: none;
    transform: translateY(-3px);
}
.tiles .tile .icon {
    position: static;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 0 16px;
    border-radius: 12px;
    background: var(--ah-blue-50);
    color: var(--ah-blue);
    font-size: 17px;
}
.tiles .tile .stat {
    margin: 0;
    color: var(--ah-ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: left;
}
.tiles .tile .title {
    margin-top: 8px;
    color: var(--ah-body);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.tiles .tile .highlight {
    display: none;
}

/* dashboard: panel menjadi kartu seragam */
.client-home-panels .panel {
    overflow: hidden;
    border: 1px solid var(--ah-line);
    border-top: 1px solid var(--ah-line);
    border-radius: 16px;
    background: var(--ah-white);
    box-shadow: var(--ah-shadow);
}
.client-home-panels .panel > .panel-heading {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ah-line);
    background: transparent;
}
.client-home-panels .panel > .panel-heading .panel-title {
    font-size: 16px;
    font-weight: 700;
}
.client-home-panels .panel .list-group-item {
    border-color: var(--ah-line);
    background: transparent;
}
.client-home-panels .panel .panel-body {
    color: var(--ah-body);
}

/* slider layanan di atas dashboard */
.ah-promo {
    padding: 28px 0 0;
    background: transparent;
}
.ah-promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ah-promo-head h2 {
    margin: 0;
    color: var(--ah-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ah-promo-nav {
    display: flex;
    gap: 8px;
}
.ah-promo-nav button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ah-line);
    border-radius: 999px;
    background: var(--ah-white);
    color: var(--ah-ink);
    cursor: pointer;
    transition: background-color 0.2s var(--ah-ease), color 0.2s var(--ah-ease), border-color 0.2s var(--ah-ease);
}
.ah-promo-nav button:hover,
.ah-promo-nav button:focus-visible {
    border-color: var(--ah-blue);
    background: var(--ah-blue);
    color: #fff;
}
.ah-promo-track {
    display: flex;
    gap: 16px;
    padding: 4px 2px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ah-promo-track::-webkit-scrollbar {
    display: none;
}
.ah-promo-track:focus-visible {
    outline: 2px solid var(--ah-blue);
    outline-offset: 2px;
}
.ah-slide {
    position: relative;
    flex: 0 0 calc((100% - 32px) / 3);
    min-height: 184px;
    padding: 24px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b1d44, #1f63f2);
    box-shadow: 0 10px 30px rgba(16, 40, 100, 0.22);
    color: #ecf3fd;
    scroll-snap-align: start;
}
.ah-slide-s2 { background: linear-gradient(135deg, #0f2a6b, #3a86ff); }
.ah-slide-s3 { background: linear-gradient(135deg, #071124, #1f4fb8); }
.ah-slide-s4 { background: linear-gradient(135deg, #12306e, #4a9bff); }
.ah-slide-s5 { background: linear-gradient(135deg, #0a2a5c, #2a6fe0); }
.ah-slide-s6 { background: linear-gradient(135deg, #10224a, #2f7bf0); }
.ah-slide-icon {
    position: absolute;
    right: -6px;
    bottom: -16px;
    color: #fff;
    font-size: 124px;
    line-height: 1;
    opacity: 0.13;
    pointer-events: none;
}
.ah-slide h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ah-slide p {
    max-width: 82%;
    margin: 0;
    color: rgba(236, 243, 253, 0.85);
    font-size: 14px;
    line-height: 1.55;
}
.ah-slide-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #60b0ff;
    color: #051024;
    font-size: 13.5px;
    font-weight: 700;
    transition: background-color 0.2s var(--ah-ease), transform 0.25s var(--ah-ease);
}
.ah-slide-cta:hover,
.ah-slide-cta:focus-visible {
    background: #82c2ff;
    color: #051024;
    text-decoration: none;
    transform: translateX(2px);
}
@media (max-width: 991px) {
    .ah-slide {
        flex-basis: calc((100% - 16px) / 2);
    }
}
@media (max-width: 575px) {
    .ah-slide {
        flex-basis: 86%;
    }
    .ah-slide p {
        max-width: 100%;
    }
    .tiles .tile .stat {
        font-size: 30px;
    }
}


/* 19b. Perbaikan kontras dark mode & urutan mobile */
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-info,
html[data-theme="dark"] a.btn-danger {
    color: #fff;
}
html[data-theme="dark"] a.ah-slide-cta {
    color: #051024;
}
html[data-theme="dark"] .ah-promo-nav button:hover {
    color: #fff;
}
html[data-theme="dark"] .verification-banner,
html[data-theme="dark"] .email-verification {
    border-color: var(--ah-line);
    background: var(--ah-white);
    color: var(--ah-body);
}
html[data-theme="dark"] .alert {
    border-color: var(--ah-line-strong);
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning {
    background-color: var(--ah-blue-50);
    color: var(--ah-ink);
}
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .status-active {
    background-color: rgba(52, 199, 123, 0.18);
    color: #6fe3a5;
}
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    border-color: var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-body);
}
html[data-theme="dark"] .nav-tabs > li > a {
    color: var(--ah-body);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover {
    border-color: var(--ah-line);
    background-color: var(--ah-white);
    color: var(--ah-ink);
}
html[data-theme="dark"] .modal-backdrop.in {
    opacity: 0.7;
}
html[data-theme="dark"] .close {
    color: var(--ah-ink);
    text-shadow: none;
}

/* mobile: konten utama tampil sebelum sidebar */
@media (max-width: 991px) {
    #main-body > .container > .row {
        display: flex;
        flex-direction: column;
    }
    #main-body > .container > .row > .main-content {
        order: 1;
    }
    #main-body > .container > .row > .sidebar {
        order: 2;
    }
    #main-body > .container > .row > .clearfix {
        display: none;
    }
}


/* 20. Slider di bawah judul dashboard, selebar kontainer (v5) */
.ah-promo {
    padding: 0 15px;
    margin: 4px 0 12px;
}
.ah-promo-inner {
    width: 100%;
}
@media (min-width: 1200px) {
    .ah-slide {
        flex-basis: calc((100% - 48px) / 4);
    }
}
@media (min-width: 992px) {
    body:has(.ah-promo) #main-body > .container > .row {
        display: grid;
        grid-template-columns: minmax(0, 22%) minmax(0, 1fr);
        align-items: start;
    }
    body:has(.ah-promo) #main-body > .container > .row::before,
    body:has(.ah-promo) #main-body > .container > .row::after,
    body:has(.ah-promo) #main-body > .container > .row > .clearfix {
        display: none;
    }
    body:has(.ah-promo) #main-body > .container > .row > .col-md-9:not(.main-content) {
        grid-column: 1 / -1;
        grid-row: 1;
        float: none;
        width: auto;
        left: auto;
        right: auto;
    }
    body:has(.ah-promo) #main-body > .container > .row > .ah-promo {
        grid-column: 1 / -1;
        grid-row: 2;
        float: none;
        width: auto;
    }
    body:has(.ah-promo) #main-body > .container > .row > .sidebar {
        grid-column: 1;
        grid-row: 3;
        float: none;
        width: auto;
        left: auto;
        right: auto;
    }
    body:has(.ah-promo) #main-body > .container > .row > .sidebar-secondary {
        grid-row: 4;
    }
    body:has(.ah-promo) #main-body > .container > .row > .main-content {
        grid-column: 2;
        grid-row: 3 / span 2;
        float: none;
        width: auto;
        left: auto;
        right: auto;
    }
}

/* 21. Dashboard ala Lagom: slider panjang di kolom utama, kartu profil biru, stat tengah (v10) */
.ah-hs{position:relative;margin:0 0 24px;border:1px solid var(--ah-line);border-radius:18px;background:var(--ah-white);box-shadow:var(--ah-shadow);overflow:hidden}
.ah-hs-tabs{display:flex;gap:2px;padding:6px 14px 0;overflow-x:auto;border-bottom:1px solid var(--ah-line);scrollbar-width:none}
.ah-hs-tabs::-webkit-scrollbar{display:none}
.ah-hs-tab{flex:0 0 auto;margin:0 0 -1px;padding:12px 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--ah-body);font:600 14px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .2s var(--ah-ease),border-color .2s var(--ah-ease)}
.ah-hs-tab:hover{color:var(--ah-blue)}
.ah-hs-tab.is-active{color:var(--ah-blue);border-bottom-color:var(--ah-blue)}
.ah-hs-stage{display:grid}
.ah-hs-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;min-height:250px;opacity:0;visibility:hidden;transition:opacity .5s var(--ah-ease),visibility .5s}
.ah-hs-slide.is-active{opacity:1;visibility:visible}
.ah-hs-copy{padding:30px 20px 30px 36px}
.ah-hs-copy h3{margin:0 0 12px;color:var(--ah-ink);font:800 30px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.02em}
.ah-hs-copy p{max-width:46ch;margin:0 0 20px;color:var(--ah-body);font-size:15px;line-height:1.6}
.ah-hs-cta{padding:10px 22px;border-radius:999px;font-weight:700}
.ah-hs-cta i{margin-left:6px}
.ah-hs-art{position:relative;display:grid;place-items:center;align-self:stretch;min-height:220px;overflow:hidden;background:linear-gradient(135deg,#2f6bff,#72a8ff)}
.ah-hs-art>i{position:relative;z-index:1;color:#fff;font-size:104px;filter:drop-shadow(0 12px 24px rgba(5,16,36,.25))}
.ah-hs-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}
.ah-hs-orb-a{width:220px;height:220px;top:-70px;right:-50px}
.ah-hs-orb-b{width:150px;height:150px;bottom:-50px;left:-30px;background:rgba(255,255,255,.12)}
.ah-hs-s2 .ah-hs-art{background:linear-gradient(135deg,#0ea5e9,#6ee0ff)}
.ah-hs-s3 .ah-hs-art{background:linear-gradient(135deg,#3b4bff,#8a7bff)}
.ah-hs-s4 .ah-hs-art{background:linear-gradient(135deg,#0b9d8a,#5fe3c3)}
.ah-hs-s5 .ah-hs-art{background:linear-gradient(135deg,#1d4ed8,#4a8bff)}
.ah-hs-s6 .ah-hs-art{background:linear-gradient(135deg,#0f766e,#38bdf8)}
.ah-hs-bar{height:3px;background:var(--ah-line)}
.ah-hs-bar span{display:block;width:0;height:100%;background:var(--ah-blue)}
@keyframes ahHsBar{from{width:0}to{width:100%}}
.panel-sidebar[menuitemname="Client Details"]{border:0;border-radius:18px;background:linear-gradient(145deg,#1f5eff,#4a8bff);box-shadow:0 14px 30px rgba(31,94,255,.28);color:#fff;overflow:hidden}
.panel-sidebar[menuitemname="Client Details"] .panel-heading,.panel-sidebar[menuitemname="Client Details"] .panel-footer{border:0;background:transparent}
.panel-sidebar[menuitemname="Client Details"] .panel-title,.panel-sidebar[menuitemname="Client Details"] .panel-body,.panel-sidebar[menuitemname="Client Details"] .panel-body strong,.panel-sidebar[menuitemname="Client Details"] .panel-minimise{color:#fff}
.panel-sidebar[menuitemname="Client Details"] .panel-body{font-size:14px;line-height:1.6}
.panel-sidebar[menuitemname="Client Details"] .panel-body strong{font-size:18px}
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn,html[data-theme="dark"] .panel-sidebar[menuitemname="Client Details"] .panel-footer .btn{border:0;border-radius:999px;background:#fff;color:#1f5eff;font-weight:700;box-shadow:none}
.panel-sidebar[menuitemname="Client Contacts"],.panel-sidebar[menuitemname="Client Shortcuts"]{border:0;border-radius:0;background:transparent;box-shadow:none}
.panel-sidebar[menuitemname="Client Contacts"] .panel-heading,.panel-sidebar[menuitemname="Client Shortcuts"] .panel-heading{border:0;background:transparent}
.panel-sidebar[menuitemname="Client Contacts"] .list-group-item,.panel-sidebar[menuitemname="Client Shortcuts"] .list-group-item,html[data-theme="dark"] .panel-sidebar[menuitemname="Client Contacts"] .list-group-item,html[data-theme="dark"] .panel-sidebar[menuitemname="Client Shortcuts"] .list-group-item{border:0;background:transparent;color:var(--ah-blue);font-weight:600}
.panel-sidebar[menuitemname="Client Contacts"] .list-group-item:hover,.panel-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover{background:var(--ah-blue-50)}
.panel-sidebar[menuitemname="Client Contacts"] .sidebar-menu-item-icon,.panel-sidebar[menuitemname="Client Shortcuts"] .sidebar-menu-item-icon,.panel-sidebar[menuitemname="Client Contacts"] .panel-title i,.panel-sidebar[menuitemname="Client Shortcuts"] .panel-title i{color:var(--ah-blue)}
.panel-sidebar[menuitemname="Client Details"] .panel-heading{padding:18px 20px 4px}
.panel-sidebar[menuitemname="Client Details"] .panel-body{padding:6px 20px 14px}
.panel-sidebar[menuitemname="Client Details"] .panel-footer{padding:0 20px 20px}
.tiles .tile>a{padding:34px 16px 26px;text-align:center}
.tiles .tile .icon{position:absolute;top:14px;right:14px;width:auto;height:auto;margin:0;border-radius:0;background:transparent;color:#9aa8bd;font-size:18px}
.tiles .tile .stat{color:var(--ah-blue);font-size:54px;font-weight:300;text-align:center}
.tiles .tile:has(.bg-color-gold) .stat{color:#e5484d}
.tiles .tile .title{margin-top:12px;color:var(--ah-ink);font-size:17px;font-weight:600;text-align:center}
@media (max-width:767px){.ah-hs-slide{grid-template-columns:minmax(0,1fr);min-height:0}.ah-hs-art{display:none}.ah-hs-copy{padding:22px 18px}.ah-hs-copy h3{font-size:23px}.tiles .tile .stat{font-size:42px}}


/* 22. Dashboard v3: slider ilustrasi, kartu berwarna, tautan blog/WhatsApp, tabel, ikon tema (v11) */
.ah-theme-toggle .ah-ic{display:block}
.ah-theme-toggle .ah-icon-sun{display:none}
html[data-theme="dark"] .ah-theme-toggle .ah-icon-sun{display:block}
html[data-theme="dark"] .ah-theme-toggle .ah-icon-moon{display:none}

body:has(.ah-hs) .main-content{display:flex;flex-direction:column;gap:24px}
body:has(.ah-hs) .main-content>*{margin:0;min-width:0}
body:has(.ah-hs) .main-content>script{display:none}
body:has(.ah-hs) .ah-hs{order:1}
body:has(.ah-hs) .tiles{order:2}
body:has(.ah-hs) .client-home-panels{order:3}
body:has(.ah-hs) .ah-dash-links{order:4}
body:has(.ah-hs) .main-content>form:has(.home-kb-search){display:none}
#ticketsPanel,#announcementsPanel,#registerDomainPanel{display:none}
.client-home-panels .col-sm-6:not(:has(.panel:not(#ticketsPanel):not(#announcementsPanel):not(#registerDomainPanel))){display:none}
.client-home-panels .row{margin:0}
.client-home-panels [class*="col-"]{width:100%;padding:0;float:none}
.client-home-panels .panel{margin:0 0 24px}
.tiles{margin:0;padding:0}
.tiles .row{margin:0}

.ah-hs{margin:0}
.ah-hs-slide{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:300px}
.ah-hs-copy{padding:32px 24px 32px 36px}
.ah-hs-copy h3{font-size:28px}
.ah-hs-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.ah-hs-points li{position:relative;padding-left:26px;color:var(--ah-ink);font-size:14px;font-weight:600}
.ah-hs-points li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--ah-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f63f2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.ah-hs-art{display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(31,99,242,.10)),var(--ah-hero-img) center bottom/cover no-repeat}
.ah-ill{display:block;width:100%;max-width:390px;height:auto;filter:drop-shadow(0 18px 22px rgba(10,20,50,.22));font-family:var(--ah-font-body)}
.ah-ill .il-card{fill:var(--ah-white);stroke:var(--ah-line);stroke-width:1}
.ah-ill .il-cloud{fill:var(--ah-white)}
.ah-ill .il-bl{fill:var(--ah-blue-50)}
.ah-ill .il-b{fill:var(--ah-blue)}
.ah-ill .il-ink{fill:#16254a}
.ah-ill .il-mut{fill:var(--ah-line-strong)}
.ah-ill .il-ok{fill:#1f9d55}
.ah-ill .il-am{fill:#f2b33d}
.ah-ill .il-rust{fill:#e0454b}
.ah-ill .il-term{fill:#0b1226}
.ah-ill .il-mutd{fill:#24324f}
.ah-ill .il-t{font-size:12px;font-weight:700;fill:var(--ah-ink)}
.ah-ill .il-s{font-size:10px;font-weight:600;fill:var(--ah-body)}
.ah-ill .il-h{font-size:18px;font-weight:800;fill:var(--ah-ink)}
.ah-ill .il-tw{font-size:11px;font-weight:700;fill:#fff}
.ah-ill .il-code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#7ee2a8}
.ah-ill .il-code2{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#9fb3d9}
.ah-ill .il-chk{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ah-ill .il-float{animation:ahFloat 6s ease-in-out infinite;transform-box:fill-box}
@keyframes ahFloat{50%{transform:translateY(-5px)}}
.ah-hs-slide.is-active .ah-hs-copy>*{animation:ahRise .6s var(--ah-ease) both}
.ah-hs-slide.is-active .ah-hs-copy>*:nth-child(2){animation-delay:.06s}
.ah-hs-slide.is-active .ah-hs-copy>*:nth-child(3){animation-delay:.12s}
.ah-hs-slide.is-active .ah-hs-copy>*:nth-child(4){animation-delay:.18s}
@keyframes ahRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ah-ill .il-float,.ah-hs-slide.is-active .ah-hs-copy>*{animation:none}}
.ah-hs-cta,.ah-hs-cta:hover{color:#fff}

.ah-dash-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ah-dash-link{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--ah-line);border-radius:16px;background:var(--ah-white);box-shadow:var(--ah-shadow);color:var(--ah-ink);text-decoration:none;transition:transform .35s var(--ah-ease),box-shadow .35s var(--ah-ease),border-color .2s var(--ah-ease)}
.ah-dash-link:hover,.ah-dash-link:focus-visible{transform:translateY(-3px);box-shadow:var(--ah-shadow-hover);text-decoration:none;color:var(--ah-ink);border-color:var(--lc)}
.ah-dash-blog{--lc:var(--ah-blue)}
.ah-dash-wa{--lc:#1faa59}
.ah-dash-link-ic{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--lc) 13%,transparent);color:var(--lc);font-size:22px}
.ah-dash-link-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ah-dash-link-tx strong{color:var(--ah-ink);font-size:16px}
.ah-dash-link-tx span{color:var(--ah-body);font-size:13px;line-height:1.5}
.ah-dash-link-go{flex:0 0 auto;color:var(--lc);transition:transform .3s var(--ah-ease)}
.ah-dash-link:hover .ah-dash-link-go{transform:translateX(4px)}

.tiles .tile{--tc:#1f63f2}
.tiles .tile:nth-child(2){--tc:#0e9f6e}
.tiles .tile:nth-child(3){--tc:#7c5cff}
.tiles .tile:nth-child(4){--tc:#e5484d}
html[data-theme="dark"] .tiles .tile{--tc:#6aa0ff}
html[data-theme="dark"] .tiles .tile:nth-child(2){--tc:#3ddc97}
html[data-theme="dark"] .tiles .tile:nth-child(3){--tc:#a58bff}
html[data-theme="dark"] .tiles .tile:nth-child(4){--tc:#ff7a7f}
.tiles .tile>a{border-top:4px solid var(--tc)}
.tiles .tile>a:hover,.tiles .tile>a:focus-visible{border-color:var(--ah-line);border-top-color:var(--tc)}
.tiles .tile .stat,.tiles .tile:has(.bg-color-gold) .stat{color:var(--tc)}
.tiles .tile .icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--tc) 13%,transparent);color:var(--tc);font-size:15px}

.panel-sidebar[menuitemname="Client Details"]{position:relative}
.panel-sidebar[menuitemname="Client Details"]::before{content:"";position:absolute;top:-46px;right:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.panel-sidebar[menuitemname="Client Details"] .panel-heading{display:flex;align-items:center;padding:20px 20px 0}
.panel-sidebar[menuitemname="Client Details"] .panel-title{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.panel-sidebar[menuitemname="Client Details"] .panel-minimise{display:none}
.panel-sidebar[menuitemname="Client Details"] .panel-body{padding:10px 20px 18px;overflow-wrap:anywhere;word-break:normal;font-size:14px;line-height:1.65}
.panel-sidebar[menuitemname="Client Details"] .panel-body strong{display:block;margin-bottom:4px;font-size:20px;line-height:1.3}
.panel-sidebar[menuitemname="Client Details"] .panel-footer{padding:0 20px 20px}
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;white-space:normal}

.sidebar .panel-sidebar .list-group-item{border:0;border-radius:10px;margin:2px 8px;padding:9px 12px;width:auto}
.sidebar .panel-sidebar .list-group-item .badge{border-radius:999px;background:var(--ah-blue-50);color:var(--ah-blue);font-weight:700}
.sidebar .panel-sidebar .list-group-item.active,.sidebar .panel-sidebar .list-group-item.active:hover{background:var(--ah-blue-50);color:var(--ah-blue);font-weight:700}
.sidebar .panel-sidebar .list-group-item:hover{background:var(--ah-blue-50)}

.table-container{border:1px solid var(--ah-line);border-radius:16px;background:var(--ah-white);box-shadow:var(--ah-shadow);overflow:hidden}
.table-container .dataTables_wrapper{background:transparent}
.table-container .dataTables_wrapper .listtable{background:transparent}
.table-container .dataTables_info{float:left;margin:0;padding:18px 20px;background:transparent;color:var(--ah-body);font-size:13px}
.table-container .dataTables_filter{float:right;margin:0;padding:12px 20px;background:transparent}
.table-container .dataTables_filter input{width:220px;height:38px;border:1px solid var(--ah-line-strong);border-radius:999px;background:var(--ah-white);color:var(--ah-ink);padding:0 16px;box-shadow:none}
.table-container .dataTables_filter input:focus{border-color:var(--ah-blue);box-shadow:var(--ah-ring)}
.table-container .table-list{clear:both;width:100%;margin:0}
.table-container .table-list thead th{border:0;border-top:1px solid var(--ah-line);border-bottom:1px solid var(--ah-line);background-color:var(--ah-surface);color:var(--ah-body);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px}
.table-container .table-list tbody td{padding:14px 16px;border-top:1px solid var(--ah-line);color:var(--ah-body);vertical-align:middle}
.table-container .table-list tbody tr:first-child td{border-top:0}
.table-container .table-list tbody tr:hover td{background:var(--ah-blue-50)}
.table-container .table-list td.dataTables_empty{padding:44px 16px;text-align:center;color:var(--ah-muted)}
.table-container .dataTables_length{float:left;margin:0;padding:14px 20px;background:transparent;color:var(--ah-body);font-size:13px}
.table-container .dataTables_length select{height:34px;border:1px solid var(--ah-line-strong);border-radius:999px;background-color:var(--ah-white);color:var(--ah-ink);padding:0 12px;box-shadow:none}
.table-container .dataTables_paginate{float:right;margin:0;padding:12px 20px;background:transparent}
.table-container .pagination{margin:0}
.table-container .pagination>li>a,.table-container .pagination>li>span{margin:0 2px;border:1px solid var(--ah-line-strong);border-radius:999px;background:var(--ah-white);color:var(--ah-body);padding:6px 14px}
.table-container .pagination>.active>a,.table-container .pagination>.active>a:hover{border-color:var(--ah-blue);background:var(--ah-blue);color:#fff}
.table-container .pagination>.disabled>a{opacity:.5}
.table-container .dataTables_wrapper::after{content:"";display:block;clear:both}
.table-container .label.status,.table .label.status{display:inline-block;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:var(--sc,#4b5565);background:color-mix(in srgb,var(--sc,#8a93a3) 14%,transparent)}
.label.status-active,.label.status-paid,.label.status-open,.label.status-answered,.label.status-completed{--sc:#1f9d55}
.label.status-pending,.label.status-unpaid,.label.status-customer-reply,.label.status-pending-transfer,.label.status-draft{--sc:#c98512}
.label.status-suspended,.label.status-overdue,.label.status-fraud,.label.status-terminated,.label.status-expired{--sc:#e5484d}
.label.status-cancelled,.label.status-closed,.label.status-refunded,.label.status-collections{--sc:#6b7585}
html[data-theme="dark"] .label.status-active,html[data-theme="dark"] .label.status-paid,html[data-theme="dark"] .label.status-open,html[data-theme="dark"] .label.status-answered{--sc:#3ddc97}
html[data-theme="dark"] .label.status-pending,html[data-theme="dark"] .label.status-unpaid,html[data-theme="dark"] .label.status-customer-reply{--sc:#f2b33d}
html[data-theme="dark"] .label.status-suspended,html[data-theme="dark"] .label.status-overdue,html[data-theme="dark"] .label.status-terminated{--sc:#ff7a7f}

@media (max-width:991px){.ah-hs-slide{min-height:0}.ah-hs-copy{padding:26px 22px}}
@media (max-width:767px){.ah-hs-art{display:none}.ah-hs-slide{grid-template-columns:minmax(0,1fr)}.ah-dash-links{grid-template-columns:minmax(0,1fr);gap:16px}.table-container .dataTables_info,.table-container .dataTables_filter,.table-container .dataTables_length,.table-container .dataTables_paginate{float:none;text-align:left}.table-container .dataTables_filter input{width:100%}}

.ah-hs .ah-hs-slide .ah-hs-art{background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(31,99,242,.10)),var(--ah-hero-img) center bottom/cover no-repeat}
html[data-theme="dark"] .ah-hs .ah-hs-slide .ah-hs-art{background:linear-gradient(180deg,rgba(5,16,36,0) 30%,rgba(5,16,36,.35)),var(--ah-hero-img) center bottom/cover no-repeat}
.client-home-panels [class*="col-"]{display:flex;flex-direction:column;gap:24px}
.client-home-panels .panel{margin:0}
.client-home-panels .row{margin-bottom:0}

html[data-theme="dark"] .panel-sidebar[menuitemname="Client Contacts"],html[data-theme="dark"] .panel-sidebar[menuitemname="Client Shortcuts"]{background:transparent;border-color:transparent;box-shadow:none}
html[data-theme="dark"] .panel-sidebar[menuitemname="Client Contacts"] .panel-heading,html[data-theme="dark"] .panel-sidebar[menuitemname="Client Shortcuts"] .panel-heading{background:transparent}

.table-container .dataTables_filter label{margin:0;display:block}
.table-container .dataTables_filter input,.table-container .dataTables_wrapper .dataTables_filter input{width:240px!important;height:40px!important;margin:0!important;border:1px solid var(--ah-line-strong)!important;border-radius:999px!important;background:var(--ah-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 14px center/16px no-repeat!important;color:var(--ah-ink)!important;padding:0 16px 0 40px!important;box-shadow:none!important}
.table-container .table-list>thead>tr>th,.table-container .table-list thead th{border:0!important;border-top:1px solid var(--ah-line)!important;border-bottom:1px solid var(--ah-line)!important;background-color:var(--ah-surface)!important;text-align:left}
.table-container .table-list>thead>tr>th:first-child{padding-left:20px}
.sidebar .panel-sidebar .list-group-item .badge{float:right;margin-top:0}

/* 22b. Mode gelap: form dan komponen bawaan */
html[data-theme="dark"] .form-control,html[data-theme="dark"] .field,html[data-theme="dark"] input[type="text"],html[data-theme="dark"] input[type="email"],html[data-theme="dark"] input[type="password"],html[data-theme="dark"] input[type="tel"],html[data-theme="dark"] input[type="search"],html[data-theme="dark"] input[type="number"],html[data-theme="dark"] input[type="url"],html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .input-group-addon,html[data-theme="dark"] .bootstrap-select>.dropdown-toggle{background-color:var(--ah-surface)!important;border-color:var(--ah-line-strong)!important;color:var(--ah-ink)!important;box-shadow:none}
html[data-theme="dark"] .form-control::placeholder,html[data-theme="dark"] .field::placeholder,html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--ah-muted);opacity:1}
html[data-theme="dark"] .form-control:focus,html[data-theme="dark"] .field:focus,html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{border-color:var(--ah-blue)!important;box-shadow:var(--ah-ring)}
html[data-theme="dark"] .form-control[disabled],html[data-theme="dark"] .form-control[readonly],html[data-theme="dark"] input[disabled],html[data-theme="dark"] input[readonly]{background-color:var(--ah-white)!important;color:var(--ah-body)!important}
html[data-theme="dark"] select option{background:var(--ah-surface);color:var(--ah-ink)}
html[data-theme="dark"] .field-icon,html[data-theme="dark"] .prepend-icon .field-icon i{color:var(--ah-muted)}
html[data-theme="dark"] .marketing-email-optin{border-color:var(--ah-line);background:var(--ah-surface);color:var(--ah-body)}
html[data-theme="dark"] .marketing-email-optin h4{color:var(--ah-ink)}
html[data-theme="dark"] .bootstrap-switch{border-color:var(--ah-line-strong);background:var(--ah-surface)}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label{background:var(--ah-line-strong)}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off{background:var(--ah-line);color:var(--ah-body)}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{background:var(--ah-blue);color:#fff}
html[data-theme="dark"] .progress{background:var(--ah-line);box-shadow:none}
html[data-theme="dark"] .intl-tel-input .selected-flag{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .intl-tel-input .country-list{background:var(--ah-white);border-color:var(--ah-line);color:var(--ah-body);box-shadow:var(--ah-shadow-hover)}
html[data-theme="dark"] .intl-tel-input .country-list .country.highlight,html[data-theme="dark"] .intl-tel-input .country-list .country:hover{background:var(--ah-blue-50)}
html[data-theme="dark"] .intl-tel-input .country-list .divider{border-color:var(--ah-line)}
html[data-theme="dark"] label,html[data-theme="dark"] .control-label{color:var(--ah-body)}
html[data-theme="dark"] label.checkbox,html[data-theme="dark"] label.radio,html[data-theme="dark"] .checkbox,html[data-theme="dark"] .radio{color:var(--ah-ink)}
html[data-theme="dark"] .alert-info{background:rgba(74,139,255,.12);border-color:rgba(74,139,255,.35);color:#cfe0ff}
html[data-theme="dark"] .alert-success{background:rgba(61,220,151,.12);border-color:rgba(61,220,151,.35);color:#b8f1d6}
html[data-theme="dark"] .alert-warning{background:rgba(242,179,61,.12);border-color:rgba(242,179,61,.35);color:#fbe3ae}
html[data-theme="dark"] .alert-danger,html[data-theme="dark"] .errorbox{background:rgba(255,122,127,.12);border-color:rgba(255,122,127,.35);color:#ffc9cb}
html[data-theme="dark"] .table>thead>tr>th,html[data-theme="dark"] .table>tbody>tr>td{border-color:var(--ah-line);color:var(--ah-body)}
html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd){background:rgba(255,255,255,.02)}
html[data-theme="dark"] hr{border-color:var(--ah-line)}
html[data-theme="dark"] .pagination>li>a,html[data-theme="dark"] .pagination>li>span{background:var(--ah-white);border-color:var(--ah-line-strong);color:var(--ah-body)}
html[data-theme="dark"] .modal-header,html[data-theme="dark"] .modal-footer{border-color:var(--ah-line)}
html[data-theme="dark"] .close{color:var(--ah-ink);text-shadow:none}


/* 23. Dashboard v4: slider gradient, kartu saldo, banner verifikasi, tanpa panel layanan aktif (v12) */
#servicesPanel{display:none}
.client-home-panels:not(:has(.panel:not(#servicesPanel):not(#ticketsPanel):not(#announcementsPanel):not(#registerDomainPanel))){display:none}

.ah-hs .ah-hs-slide .ah-hs-art{--m1:#dfe4ff;--m2:#e2ebff;--m3:#ffe8d4;--m4:#d6f4ec;background:radial-gradient(60% 70% at 12% 18%,var(--m1),transparent 72%),radial-gradient(55% 60% at 88% 12%,var(--m2),transparent 72%),radial-gradient(60% 60% at 8% 94%,var(--m3),transparent 72%),radial-gradient(55% 65% at 94% 92%,var(--m4),transparent 72%),#f5f7ff}
.ah-hs .ah-hs-s2 .ah-hs-art{--m1:#d2edff;--m4:#dcf6f3}
.ah-hs .ah-hs-s3 .ah-hs-art{--m1:#ebdcff;--m3:#ffdff0}
.ah-hs .ah-hs-s4 .ah-hs-art{--m1:#ffe9cf;--m2:#ffe3d6;--m4:#e1ecff}
.ah-hs .ah-hs-s6 .ah-hs-art{--m1:#d3f5e8;--m2:#d9f0ff}
html[data-theme="dark"] .ah-hs .ah-hs-slide .ah-hs-art{--m1:rgba(104,84,230,.55);--m2:rgba(214,118,40,.30);--m3:rgba(59,107,255,.28);--m4:rgba(20,150,150,.45);background:radial-gradient(60% 70% at 12% 18%,var(--m1),transparent 72%),radial-gradient(55% 60% at 88% 12%,var(--m2),transparent 72%),radial-gradient(60% 60% at 8% 94%,var(--m3),transparent 72%),radial-gradient(55% 65% at 94% 92%,var(--m4),transparent 72%),#0b1330}
html[data-theme="dark"] .ah-hs .ah-hs-s2 .ah-hs-art{--m1:rgba(30,150,230,.5)}
html[data-theme="dark"] .ah-hs .ah-hs-s3 .ah-hs-art{--m1:rgba(150,80,230,.55);--m3:rgba(230,70,150,.25)}
html[data-theme="dark"] .ah-hs .ah-hs-s4 .ah-hs-art{--m1:rgba(230,140,40,.42);--m2:rgba(230,90,70,.28)}
html[data-theme="dark"] .ah-hs .ah-hs-s6 .ah-hs-art{--m1:rgba(20,170,140,.5);--m2:rgba(40,130,230,.3)}

.panel-sidebar[menuitemname="Client-Balance"]{position:relative;margin-bottom:16px;border:0;border-radius:18px;background:linear-gradient(145deg,#1f5eff,#4a8bff);box-shadow:0 14px 30px rgba(31,94,255,.28);color:#fff;overflow:hidden}
.panel-sidebar[menuitemname="Client-Balance"]::before{content:"";position:absolute;top:-46px;right:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.panel-sidebar[menuitemname="Client-Balance"] .panel-heading,.panel-sidebar[menuitemname="Client-Balance"] .panel-footer{border:0;background:transparent}
.panel-sidebar[menuitemname="Client-Balance"] .panel-heading{display:flex;align-items:center;padding:20px 20px 0}
.panel-sidebar[menuitemname="Client-Balance"] .panel-title{margin:0;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.panel-sidebar[menuitemname="Client-Balance"] .panel-minimise{display:none}
.panel-sidebar[menuitemname="Client-Balance"] .list-group{margin:0;background:transparent}
.panel-sidebar[menuitemname="Client-Balance"] .list-group-item,html[data-theme="dark"] .panel-sidebar[menuitemname="Client-Balance"] .list-group-item{margin:0;padding:10px 20px 18px;border:0;background:transparent!important;color:#fff}
.panel-sidebar[menuitemname="Client-Balance"] .list-group-item h4{margin:0;color:#fff;font-size:26px;font-weight:800;line-height:1.2;text-align:left!important;overflow-wrap:anywhere}
.panel-sidebar[menuitemname="Client-Balance"] .panel-footer{padding:0 20px 20px}
.panel-sidebar[menuitemname="Client-Balance"] .panel-footer .btn,html[data-theme="dark"] .panel-sidebar[menuitemname="Client-Balance"] .panel-footer .btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:0;border-radius:999px;background:#fff;color:#1f5eff;font-weight:700;box-shadow:none}

.verification-banner,.verification-banner.email-verification{padding:12px 0;border:0;border-bottom:1px solid #f1d58a;background:#fff6dc;color:#5c4200}
.verification-banner .text{color:#5c4200;font-weight:600}
.verification-banner i{color:#d98e04}
.verification-banner .btn-default{border:0;border-radius:999px;background:var(--ah-blue);color:#fff;font-weight:700}
.verification-banner .close{color:#5c4200;opacity:.7;text-shadow:none}
html[data-theme="dark"] .verification-banner,html[data-theme="dark"] .verification-banner.email-verification{border-bottom-color:rgba(242,179,61,.4);background:rgba(242,179,61,.14);color:#fbe3ae}
html[data-theme="dark"] .verification-banner .text{color:#fbe3ae}
html[data-theme="dark"] .verification-banner i{color:#f2b33d}
html[data-theme="dark"] .verification-banner .close{color:#fbe3ae}

.verification-banner .btn.btn-default,.verification-banner .btn-resend-verify-email,html[data-theme="dark"] .verification-banner .btn.btn-default{border:0!important;border-radius:999px;background:var(--ah-blue)!important;color:#fff!important;font-weight:700}