/* Inter dimuat sebagai <link> di views/partials/header.ejs, dari
   /vendor/fonts/inter.css. Dulu ia sebuah @import ke fonts.googleapis.com di
   baris ini, dan itu dua masalah sekaligus: berkasnya datang dari host asing,
   dan @import baru ditemukan peramban setelah berkas ini selesai diurai —
   sehingga fontnya selalu berangkat terlambat, tidak pernah berbarengan. */

/*
 * KENAPA HIJAU DAN MERAHNYA LEBIH TUA DARIPADA YANG DIRANCANG SEMULA.
 *
 * --primary dulu hsl(165, 68%, 45%) dan --secondary hsl(352, 100%, 65%).
 * Keduanya cantik dan keduanya tidak terbaca: hijau itu hanya mencapai 2.29:1
 * di atas putih dan merah itu 3.24:1, sementara WCAG 2.1 AA menuntut 4.5:1
 * untuk teks. Angkanya bukan selera — 4.5:1 adalah titik saat teks masih
 * terbaca oleh mata dengan penglihatan 20/40, yaitu penglihatan orang berusia
 * enam puluhan dengan kacamata biasa. Sebagian pembeli lembaga ada di usia itu.
 *
 * Keduanya dipakai sebagai WARNA TEKS di banyak tempat — menu, kategori
 * produk, logo, tombol saring — bukan cuma sebagai latar. Jadi menggelapkan
 * tokennya menyelesaikan seluruhnya sekaligus, sementara menambal satu per
 * satu akan meninggalkan pemakaian berikutnya kembali gagal.
 *
 * Ronanya (hue) TIDAK diubah sama sekali; yang turun hanya kecerahannya. Situs
 * tetap hijau yang sama, hanya lebih teduh.
 *
 * KECERAHANNYA DIUKUR TERHADAP --bg-main, BUKAN PUTIH. Percobaan pertama
 * berhenti di 31% karena 4.57:1 di atas putih terlihat cukup — lalu menu di
 * bilah sisi tetap gagal, sebab latarnya hsl(210,20%,96%) yang sedikit lebih
 * gelap daripada putih, dan di sana rasionya cuma 4.17:1. Latar paling terang
 * yang benar-benar dipakai teks hijau adalah putih (kartu produk), tapi yang
 * MENENTUKAN adalah yang paling redup. 29% lulus keduanya: 5.11:1 di atas
 * putih, 4.66:1 di atas --bg-main, dan 5.11:1 untuk teks putih di atas hijau.
 * Diperiksa oleh `npm run check:a11y`.
 */
:root {
    --primary: hsl(165, 68%, 29%);      /* Green/Teal — 4.66:1 di atas --bg-main */
    --primary-hover: hsl(165, 68%, 20%);
    /*
     * Hijau untuk BIDANG BERISI yang teksnya putih — lencana, pil, panel.
     *
     * Terpisah dari --primary karena arah tuntutannya berlawanan: --primary
     * dibaca terhadap latar HALAMAN (dan karenanya ikut menerang di tema
     * gelap), sedangkan yang ini dibaca terhadap teks putih DI ATASNYA, yang
     * tidak pernah berubah. Ia tetap tua di kedua tema, dan memang harus.
     */
    --primary-solid: hsl(165, 68%, 29%); /* teks putih di atasnya 5.11:1 */
    --secondary: hsl(352, 68%, 50%);     /* Red highlight — 4.94:1 dgn teks putih */
    --bg-main: hsl(210, 20%, 96%);       /* Light grayish blue */
    --surface: hsl(0, 0%, 100%);
    --text-main: hsl(220, 15%, 20%);
    --text-muted: hsl(220, 10%, 45%);
    --border: hsl(220, 15%, 90%);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.12);
    --sidebar-width: 280px;
    
    /* Gradients */
    /* Digelapkan seiring --primary, supaya bagian bergradien tidak terlihat
       lebih muda daripada tombol di sebelahnya. Teks putih di atasnya kini
       5.11:1 di ujung hijau dan lebih tinggi lagi di ujung biru. */
    --grad-primary: linear-gradient(135deg, hsl(165, 68%, 29%), hsl(195, 80%, 29%));
    --grad-dark: linear-gradient(135deg, hsl(230, 20%, 20%), hsl(230, 25%, 12%));
    
    /* Rounded corners */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;
}

/*
 * KONTRAS ADALAH SIFAT PASANGAN, BUKAN SIFAT SATU WARNA.
 *
 * Hijau di atas dibuat lebih tua supaya terbaca di atas latar terang — dan itu
 * justru membuatnya GAGAL di sini, tempat latarnya hsl(220,20%,10%). Sekali
 * jalan `npm run check:a11y --gelap` menemukan 21 elemen yang tadinya lulus di
 * tema terang. Tidak ada satu nilai hijau yang benar untuk kedua tema; yang ada
 * hanya satu nilai per tema.
 *
 * Nilai di sini adalah hijau ASLI situs ini — hsl(165, 68%, 45%). Di atas latar
 * gelap ia sudah mencapai 6.80:1 sejak semula. Jadi tema gelap tidak pernah
 * bermasalah; yang perlu dijaga hanyalah agar perbaikan tema terang tidak
 * merembes ke sini.
 *
 * --grad-primary sengaja TIDAK dikembalikan ikut menerang. Ia dipakai sebagai
 * LATAR di balik teks putih, jadi yang menentukan bukan latar halamannya
 * melainkan teks di atasnya — dan teks putih menuntut gradien yang tua di tema
 * mana pun.
 */
[data-theme="dark"] {
    --primary: hsl(165, 68%, 45%);       /* 6.80:1 di atas --surface gelap */
    --primary-hover: hsl(165, 68%, 55%);
    --bg-main: hsl(220, 20%, 10%);
    --surface: hsl(220, 20%, 15%);
    --text-main: hsl(220, 15%, 88%);
    --text-muted: hsl(220, 10%, 60%);
    --border: hsl(220, 15%, 22%);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.45);
    --grad-dark: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(220, 15%, 80%));
}

[data-theme="dark"] iframe {
    filter: grayscale(1) invert(0.9) hue-rotate(180deg);
    opacity: 0.85;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Global Form Elements text color inherit */
input, select, textarea {
    color: var(--text-main);
}

select option {
    background-color: var(--surface);
    color: var(--text-main);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    display: flex;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/*
 * Lompat ke isi — tautan pertama di halaman, tak terlihat sampai ia difokus.
 *
 * Menu samping situs ini berisi belasan tautan dan muncul di SETIAP alamat.
 * Tanpa tautan ini, siapa pun yang menjelajah dengan papan ketik harus menekan
 * Tab belasan kali sebelum sampai ke isi — di setiap halaman, setiap kali.
 *
 * Disembunyikan dengan digeser keluar layar, BUKAN dengan display:none atau
 * visibility:hidden: keduanya mengeluarkan elemen dari urutan fokus sama
 * sekali, sehingga tautannya tidak akan pernah bisa dijangkau oleh satu-satunya
 * orang yang membutuhkannya.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    /* Latar gelap, bukan hijau merek: putih di atas --primary hanya 2.29:1.
       Tautan ini justru satu-satunya yang HANYA dibaca oleh orang yang
       membutuhkan kontras. */
    background: var(--text-main);
    color: var(--surface);
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: all 0.3s ease;
}

/*
 * Cincin fokus, dikembalikan.
 *
 * Baris ini dulunya `outline: none` di dalam aturan `button` di atas, dan itu
 * menghapus penanda fokus dari SETIAP tombol di seluruh situs sekaligus —
 * termasuk panel admin. Bagi siapa pun yang menjelajah dengan papan ketik,
 * akibatnya persis seperti kehilangan kursor tetikus: tombolnya masih bisa
 * ditekan, tapi tidak ada cara mengetahui yang mana yang sedang dipilih.
 *
 * Cacat ini nyaris tidak mungkin disadari oleh yang menulisnya, karena yang
 * menulis kode selalu memakai tetikus.
 *
 * :focus-visible, BUKAN :focus. Itu bedanya dengan sekadar menghapus baris
 * tadi: peramban hanya menyalakan cincin ini ketika fokus datang dari papan
 * ketik, jadi klik tetikus tetap bersih — dan alasan orang menulis
 * `outline: none` sejak awal hilang dengan sendirinya.
 *
 * Warnanya --text-main, bukan --primary: WCAG menuntut penanda fokus
 * berkontras 3:1 terhadap warna di sekitarnya, dan hijau merek ini hanya
 * mencapai 2.29:1 di atas putih. --text-main berlawanan dengan latar di kedua
 * tema sekaligus, jadi satu aturan cukup untuk terang dan gelap.
 */
:focus-visible {
    outline: 2px solid var(--text-main);
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * <iframe> ditulis terpisah, dan dengan :focus-within.
 *
 * Saat Tab masuk ke sebuah iframe, fokusnya berpindah ke DOKUMEN di dalamnya.
 * document.activeElement di halaman induk memang menunjuk <iframe> itu — tapi
 * elemennya sendiri TIDAK cocok dengan :focus maupun :focus-visible; diuji
 * langsung di Edge, keduanya menjawab false. Jadi dua aturan pertama yang
 * ditulis di sini tidak berpengaruh sama sekali, dan bingkainya tetap tanpa
 * penanda meski aturannya sudah ada di lembar gaya.
 *
 * :focus-within adalah satu-satunya yang cocok, karena memang itu yang terjadi:
 * fokusnya ada DI DALAM elemen ini, bukan pada elemennya.
 */
iframe:focus,
iframe:focus-within {
    outline: 2px solid var(--text-main);
    outline-offset: 2px;
}

/* ==================== LAYOUT: SIDEBAR & MAIN ==================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.sidebar__logo {
    height: 70px;
    padding: 0 24px;
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar__logo i {
    font-size: 28px;
}
.sidebar__close {
    display: none !important;
    font-size: 20px !important;
    cursor: pointer;
    color: var(--text-muted);
    margin-left: auto;
    transition: color 0.2s;
}
.sidebar__close:hover {
    color: var(--secondary);
}

.sidebar__nav {
    padding: 20px 15px;
    flex: 1;
    overflow-y: auto;
}

.nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.nav__item:hover, .nav__item.active {
    background: var(--bg-main);
    color: var(--primary);
}

.nav__item i {
    font-size: 18px;
}

/* -------------------- SIDEBAR COLLAPSIBLE GROUPS (multi-level) -------------------- */
/* Any number of groups may be open at once, and a group may contain another group. */

/* Dropped by JS after the saved open/closed state has been restored, so the
   restore itself doesn't animate on every page load. */
.sidebar__nav.no-anim .nav__submenu,
.sidebar__nav.no-anim .nav__submenu-inner,
.sidebar__nav.no-anim .nav__caret {
    transition: none !important;
}

.nav__group {
    margin-bottom: 8px;
}

.nav__toggle {
    width: 100%;
    margin-bottom: 0;
    background: transparent;
    border: none;
    font-size: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.nav__toggle .nav__text {
    flex: 1;
    min-width: 0;
}

.nav__item .nav__caret {
    font-size: 12px;
    opacity: 0.65;
    transition: transform 0.25s ease;
}

.nav__group.open > .nav__toggle .nav__caret {
    transform: rotate(180deg);
}

/* Parent of the currently open page stays highlighted even while collapsed. */
.nav__group.has-active > .nav__toggle {
    color: var(--primary);
}

/* 0fr -> 1fr animates to the real content height, so nesting works without
   hard-coding a max-height per level. */
.nav__submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.nav__group.open > .nav__submenu {
    grid-template-rows: 1fr;
}

/* Indent + guide rail live on the wrapper, so every extra nesting level indents
   one more step on its own — no per-level selectors to keep in sync. */
.nav__submenu-inner {
    overflow: hidden;
    min-height: 0;
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
    /* visibility (not display) keeps collapsed links out of the tab order
       without killing the transition */
    transition: visibility 0s linear 0.25s;
}

/* Written as :not(.open) rather than "hidden by default, visible when open".
   An explicit `visibility: visible` on the open state would win over the hidden
   value inherited from a collapsed ancestor, so an open group nested inside a
   collapsed one would keep its links focusable by Tab while invisible. */
.nav__group:not(.open) > .nav__submenu > .nav__submenu-inner {
    visibility: hidden;
}

.nav__group.open > .nav__submenu > .nav__submenu-inner {
    transition-delay: 0s;
}

.nav__submenu-inner .nav__item {
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 4px;
    /* The global `a`/`button` rules transition `all`, which would also animate the
       visibility inherited from the collapsing wrapper — leaving these links
       focusable by Tab for 0.3s after they have visually gone. Transition only
       what actually changes on hover. */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__submenu-inner .nav__item i {
    font-size: 15px;
}

.nav__submenu-inner .nav__toggle {
    margin-bottom: 0;
}

.nav__submenu-inner > .nav__group {
    margin-bottom: 4px;
}

.sidebar__footer {
    padding: 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    /*
     * Tanpa ini seluruh area admin & client meluber horizontal di layar sempit.
     * Flex item bawaannya `min-width: auto`, yang berarti ia MENOLAK menyusut di
     * bawah lebar intrinsik isinya - satu tabel lebar mendorong seluruh halaman
     * melebar, dan pembungkus `overflow-x: auto` di dalamnya tidak pernah
     * kebagian kesempatan menggulung isinya sendiri.
     *
     * Terukur pada viewport 420px: /admin/crm/leads 1025 -> 420,
     * /admin/invoices 824 -> 420, /admin/sales-orders 784 -> 420,
     * /admin/clients 584 -> 420. Pada 1440px tidak ada yang berubah.
     */
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 70px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: var(--shadow-sm);
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hamburger {
    display: none !important;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-primary {
    background: var(--grad-primary);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.4);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 14px;
}
.btn-secondary:hover {
    background: var(--bg-main);
}

/* ==================== HERO / INTRO ==================== */

.hero {
    padding: 60px 40px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    margin: 40px 40px 0;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(26, 188, 156, 0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero__title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 20px;
    background: var(--grad-dark);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__title .highlight {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__desc {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* ==================== PRODUCTS GRID ==================== */
.section {
    padding: 60px 40px;
}

.section__title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 30px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 30px;
}

.product-card {
    /* Wadah kueri, dipakai .product__price untuk mengukur ruang yang benar-
       benar tersedia. Lebar kartu tidak bisa ditebak dari lebar layar: gridnya
       auto-fill 1fr, jadi kartu di layar 1200px bisa 380px sementara di 700px
       jadi 300px pas. Menyetel ukuran huruf dengan vw akan salah di salah satu
       dari keduanya. */
    container-type: inline-size;
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.product__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.product__badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--secondary);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.product__badge.free {
    /* --primary-solid, bukan --primary: teksnya putih, jadi yang menentukan
       latarnya sendiri — bukan latar halaman yang berubah menurut tema. */
    background: var(--primary-solid);
}

.product__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product__category {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.product__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.product__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    height: 3em;
}

.product__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 15px;
}

/*
 * Harga selalu satu baris.
 *
 * Label terpanjang yang bisa muncul bukan "Rp 13.000" melainkan
 * "Mulai Rp 13.000 / pcs" — awalan "Mulai" untuk barang bervarian, akhiran
 * satuan untuk barang fisik (lihat priceLabel() di product-display.js). Pada
 * kartu selebar minimumnya, label itu patah jadi dua baris dan menaikkan
 * tinggi kartunya sendiri melenceng dari tetangganya.
 *
 * nowrap saja tidak menyelesaikannya, hanya menukar patah dengan meluber.
 * Karena itu ukuran hurufnya ikut lebar kartu: tetap 18px selama kartunya
 * lapang, menyusut hanya ketika ruangnya memang tidak ada. Ellipsis-nya jaring
 * pengaman, bukan perilaku yang diharapkan.
 */
.product__price {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(15px, 4.4cqi, 18px);
    font-weight: 800;
    color: var(--text-main);
}

/* Hanya barang fisik yang labelnya berakhiran satuan, dan satuannya teks bebas
   — "pcs" pendek, "batang" tidak. Batas bawahnya diturunkan di sini saja
   supaya harga produk digital, yang tidak pernah sepanjang itu, tidak ikut
   mengecil tanpa sebab. */
.product-card[data-kind="hardware"] .product__price {
    font-size: clamp(13px, 4.4cqi, 18px);
}

.product__actions {
    display: flex;
    gap: 10px;
    /* Tombolnya bulat dan berukuran tetap. Membiarkannya menyusut demi harga
       yang panjang membuat lingkarannya jadi lonjong. */
    flex-shrink: 0;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    color: var(--text-muted);
    transition: all 0.2s;
}
.btn-icon:hover {
    background: var(--primary);
    color: white;
}


/* ==================== LOGIN / AUTH UI ==================== */
.auth-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    padding: 20px;
}

.auth-card {
    background: var(--surface);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.auth-card h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
}

.auth-card p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    background: var(--bg-main);
    color: var(--text-main);
    transition: all 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.1);
}

.auth-card .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 10px;
}

.auth-switch {
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
}
.auth-switch a {
    color: var(--primary);
    font-weight: 600;
}

/*
 * Pesan yang menetap di dalam kartu auth.
 *
 * Toast menghilang setelah empat detik; kegagalan login perlu bertahan sampai
 * pengguna selesai membacanya. Rasio kontras ketiga variannya dijaga di atas
 * 4.5:1 terhadap latarnya, terang maupun gelap (ISO 9241-3 / WCAG 2.1 AA).
 */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.auth-alert--error {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.45);
    color: #c0392b;
}

.auth-alert--success {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.45);
    color: #1e8449;
}

.auth-alert--info {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.45);
    color: #2471a3;
}

[data-theme="dark"] .auth-alert--error { color: #f5b7b1; }
[data-theme="dark"] .auth-alert--success { color: #a9dfbf; }
[data-theme="dark"] .auth-alert--info { color: #aed6f1; }

/* Kolom sandi dengan tombol perlihatkan/sembunyikan di dalamnya. */
.input-password {
    position: relative;
}

.input-password input {
    /* Ruang untuk tombolnya, supaya teks sandi tidak tertimpa ikon. */
    padding-right: 46px;
}

.input-password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.input-password__toggle:hover {
    color: var(--primary);
    background: var(--bg-main);
}

/* Jejak fokus dipertahankan: tombol ini harus bisa dicapai dengan Tab. */
.input-password__toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Keterangan di bawah kolom — mis. peringatan Caps Lock. */
.field-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #d35400;
    text-align: left;
}

/*
 * Tombol WhatsApp.
 *
 * Hijaunya #25d366 — warna resmi WhatsApp, dan sengaja TIDAK diubah: tombol
 * ajakan menghubungi lewat WhatsApp dikenali orang dari warna itu, dan
 * menggelapkannya membuat tombolnya berhenti terbaca sebagai WhatsApp.
 *
 * Yang diubah teksnya. Putih di atas hijau itu hanya 1.98:1 — kegagalan
 * kontras terparah di seluruh situs, dan justru pada tombol yang paling ingin
 * ditekan orang. Teks gelap di atas hijau yang sama mencapai 7.4:1 tanpa
 * menyentuh warna mereknya sedikit pun.
 *
 * Nilainya hex tetap, bukan var(--text-main): latarnya juga hex tetap, jadi
 * teks yang ikut berbalik di tema gelap akan menghasilkan terang-di-atas-terang.
 */
.btn-wa {
    background: #25d366;
    border-color: #25d366;
    color: #0a2e1f;
}

.btn-wa:hover {
    background: #1eb85a;
    border-color: #1eb85a;
    color: #0a2e1f;
}

/* Tombol yang tampil seperti tautan, tapi tetap sebuah <button>. */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.btn-link:hover:not(:disabled) {
    text-decoration: underline;
}

.btn-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ==================== DASHBOARD UI ==================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--surface);
    padding: 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background: rgba(26, 188, 156, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-info h4 {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.stat-info .value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
}


/* ==================== TABLES ==================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th, .data-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: var(--bg-main);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.data-table td {
    font-size: 14px;
    vertical-align: middle;
}

/* ==================== TICKET CHAT ==================== */
.chat-container {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 600px;
    overflow: hidden;
}

.chat-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-msg {
    max-width: 70%;
    display: flex;
    flex-direction: column;
}
.chat-msg.me {
    align-self: flex-end;
}
.chat-msg.them {
    align-self: flex-start;
}

.msg-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
}

.chat-msg.me .msg-bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg.them .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.msg-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.chat-msg.me .msg-info {
    text-align: right;
}

.chat-input {
    padding: 20px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
}
.chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: inherit;
    background: var(--bg-main);
    color: var(--text-main);
}
.chat-input button {
    background: var(--primary);
    color: white;
    width: 45px; height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==================== MODALS ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    padding: 20px;
}

/*
 * A closed modal must not be laid out at all.
 *
 * `opacity: 0` alone makes it invisible and unclickable but keeps its box, and
 * its contents still push the page wider: every admin page overflowed
 * horizontally on a narrow screen because of modals nobody had opened. On
 * /admin/about-settings at 420px the document grew to 673px purely from the
 * payment-verification modal's fixed 270px columns.
 *
 * The cost is the fade-in, which cannot run from `display: none` without
 * `transition-behavior: allow-discrete`. A modal that appears instantly is a
 * fair trade for pages that fit their screen.
 */
.modal-overlay:not(.active) {
    display: none;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--surface);
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    transform: translateY(20px);
    transition: all 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal {
    transform: translateY(0);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
}
.modal-close {
    background: none;
    font-size: 20px;
    color: var(--text-muted);
}
.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .hamburger {
        display: block !important;
    }
    .sidebar__close {
        display: block !important;
    }
}

/* ==================== PRODUCT DETAIL VIEW ==================== */
.detail-section {
    padding-top: 20px;
}

.detail-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.detail-main {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-image-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    background: var(--surface);
    height: 400px;
}

.detail-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.detail-image-wrapper:hover img {
    transform: scale(1.03);
}

.detail-content-card {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.detail-title-text {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-main);
    line-height: 1.2;
}

.detail-section-subtitle {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    color: var(--text-main);
}

.detail-desc-text {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
}

.detail-features-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.detail-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.detail-features-list li i {
    font-size: 16px;
}

/*
 * Pemilih varian di halaman detail.
 *
 * Kelas `is-selectable` sempat dipasang kedua penggambar tanpa pernah ada
 * aturannya di sini, sehingga seluruh keadaan tombol — termasuk mana yang
 * sedang terpilih — dikerjakan dengan menulis style sebaris dari JavaScript.
 * Itu berarti keadaan terpilih hanya bisa dibaca dari properti gaya, dan
 * hanya bisa dihapus dengan menuliskannya kembali satu per satu.
 *
 * Sekarang keadaannya kelas, dan JavaScript hanya memindahkannya.
 */
.detail-variant-option.is-selectable:hover {
    border-color: var(--primary);
}

.detail-variant-option.is-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    box-shadow: 0 0 0 1px var(--primary) inset;
}

.detail-sidebar {
    flex: 1;
    position: sticky;
    top: 90px;
}

.pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.pricing-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

.pricing-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
}

.pricing-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
}

.pricing-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.benefit-item i {
    color: var(--primary);
}

.text-success {
    color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.pricing-actions {
    display: flex;
    flex-direction: column;
}

/* Responsive detail page */
@media (max-width: 992px) {
    .detail-layout {
        flex-direction: column;
    }
    .detail-sidebar {
        width: 100%;
        position: static;
    }
    .detail-image-wrapper {
        height: 300px;
    }
}

/* ==================== CUSTOM TOAST NOTIFICATIONS ==================== */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    width: calc(100% - 48px);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 
                0 1px 3px rgba(0, 0, 0, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    pointer-events: auto;
    overflow: hidden;
    position: relative;
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="dark"] .toast {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 
                0 1px 3px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


.toast--hiding {
    animation: toast-slide-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 18px;
}

.toast__content {
    flex: 1;
}

.toast__message {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
}

.toast__close {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 16px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.toast__close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Toast variants styling */
.toast--success {
    border-left: 4px solid var(--primary);
}
.toast--success .toast__icon {
    background: rgba(26, 188, 156, 0.1);
    color: var(--primary);
}

.toast--error {
    border-left: 4px solid var(--secondary);
}
.toast--error .toast__icon {
    background: rgba(255, 74, 96, 0.1);
    color: var(--secondary);
}

.toast--warning {
    border-left: 4px solid hsl(45, 100%, 50%);
}
.toast--warning .toast__icon {
    background: rgba(255, 193, 7, 0.1);
    color: hsl(45, 100%, 45%);
}

.toast--info {
    border-left: 4px solid hsl(210, 100%, 55%);
}
.toast--info .toast__icon {
    background: rgba(13, 110, 253, 0.1);
    color: hsl(210, 100%, 50%);
}

/* Keyframe animations */
@keyframes toast-slide-in {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Mobile responsive styles */
@media (max-width: 576px) {
    /*
     * On a 360px phone the topbar's own 40px side padding plus the status pill
     * and the user dropdown did not fit, and the topbar pushed every admin and
     * client page to 398px wide. Trimming the padding and hiding the realtime
     * status pill - decoration, not a control - makes the row fit.
     */
    .topbar {
        padding: 0 16px;
    }
    .sse-status {
        display: none !important;
    }
    .section {
        padding: 32px 16px;
    }
    /*
     * Long unbreakable strings (paths, tokens, URLs shown in Settings) cannot
     * wrap on their own and drag the page wider than the screen.
     */
    code, pre {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #toast-container {
        top: auto;
        bottom: 24px;
        right: 12px;
        left: 12px;
        max-width: none;
        width: calc(100% - 24px);
    }
    @keyframes toast-slide-in {
        from {
            transform: translateY(120%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @keyframes toast-slide-out {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(120%);
            opacity: 0;
        }
    }
}

/* ==================== STATS SECTION ==================== */
.stats-section {
    padding: 20px 40px 40px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.stats-card {
    background: var(--surface);
    padding: 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.stats-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(26, 188, 156, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.stats-card__info {
    display: flex;
    flex-direction: column;
}
.stats-card__value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}
.stats-card__label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==================== FEATURES SECTION ====================
   Dipakai dua bagian di beranda: "Layanan Kami" (lima kartu) dan "Kenapa
   Memilih SantriDev?" (empat kartu). Tata letaknya sama, hanya jumlah
   kolomnya yang berbeda — lihat blok KOLOM di bawah. */
.features-grid,
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    container-type: inline-size;
}

/* Kartunya punya bidang sendiri, bukan hanya saat disentuh kursor.
   Sebelumnya latar dan garis tepi baru muncul saat :hover, sehingga dalam
   keadaan diam kartunya tak berbatas — jarak antar kartu terbaca sebagai
   kekosongan, bukan sebagai pemisah. Karena latar diam sudah terisi,
   :hover kini beralih menandai dengan warna utama dan bayangan. */
.feature-card {
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    background: var(--bg-main);
    border: 1px solid var(--border);
}
.feature-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}
.feature-card__icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: var(--grad-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.2);
    flex-shrink: 0;
}
.feature-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
}
.feature-card__desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==================== KOLOM ====================
   Dulu keduanya memakai satu aturan yang sama, `repeat(auto-fit,
   minmax(220px, 1fr))`, dan itu menyerahkan jumlah kolom sepenuhnya pada
   peramban tanpa memberitahunya ada berapa kartu. Hasilnya empat kolom
   sempit di layar lebar: "Layanan Kami" menyisakan kartu kelima sendirian
   dengan tiga kolom kosong di sebelahnya, dan di kedua bagian kolom
   sesempit 220px mematahkan judul jadi dua baris — yang justru menambah
   ruang kosong di dalam kartunya.

   Jumlah kolom karena itu ditetapkan, dan angkanya mengikuti jumlah kartu:
   lima layanan turun 3 / 2 / 1 (baris terakhir berisi dua, merapat ke
   tengah lewat justify-content), empat alasan turun 4 / 2 / 1 sehingga
   setiap barisnya selalu penuh dan tidak pernah ada kartu yatim.

   Batasnya ditanya ke @container, bukan ke @media, karena sidebar selebar
   280px membuat lebar layar bukan lagi petunjuk lebar isi: pada layar
   1100px isinya cuma 660px, dan tiga kolom di sana menyisakan kartu
   selebar 201px — persis kesempitan yang mau dihindari. Peramban lawas
   yang tidak paham @container jatuh ke satu kolom; menumpuk, tapi utuh. */
@container (min-width: 620px) {
    .features-grid .feature-card,
    .services-grid .feature-card {
        flex: 0 1 calc((100% - 24px) / 2);
    }
}
@container (min-width: 940px) {
    .services-grid .feature-card {
        flex: 0 1 calc((100% - 48px) / 3);
    }
}
@container (min-width: 1080px) {
    .features-grid .feature-card {
        flex: 0 1 calc((100% - 72px) / 4);
    }
}

/* ==================== TESTIMONIALS SECTION ==================== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.testimonial-card {
    background: var(--bg-main);
    padding: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    background: var(--surface);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.testimonial-card__quote {
    position: relative;
    margin-bottom: 24px;
}
.testimonial-card__quote i {
    font-size: 24px;
    color: rgba(26, 188, 156, 0.2);
    margin-bottom: 12px;
    display: block;
}
.testimonial-card__quote p {
    font-size: 14px;
    color: var(--text-main);
    font-style: italic;
    line-height: 1.6;
}
.testimonial-card__user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(26, 188, 156, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.testimonial-card__meta h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
}
.testimonial-card__meta span {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================== FAQ SECTION ==================== */
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary {
    user-select: none;
}
.faq-item[open] {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 20px rgba(26, 188, 156, 0.05);
}
.faq-item[open] summary i {
    transform: rotate(180deg);
    color: var(--primary);
}
.faq-item summary i {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* ==================== ABOUT US SECTION ==================== */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin: 0 40px 40px;
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.about-info h3, .about-maps h3 {
    color: var(--primary);
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-info p {
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 30px;
    text-align: justify;
}

.about-info ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-info ul li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.about-info ul li:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.about-info ul li i {
    color: var(--primary);
    font-size: 20px;
    background: rgba(20, 184, 166, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.about-maps iframe {
    width: 100%;
    height: 350px;
    border: none;
    border-radius: var(--radius-sm);
    display: block;
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        margin: 0 20px 20px;
        padding: 30px 20px;
        gap: 30px;
    }
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
    .stats-section, .faq-section, .cta-section {
        padding: 20px 20px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .services-section, .features-section, .testimonials-section, .how-it-works-section, .trusted-by-section {
        padding: 40px 20px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .hero {
        margin: 20px 20px 0 !important;
        padding: 40px 20px !important;
    }
    .hero__title {
        font-size: 32px !important;
    }
}

/* ==================== NOTIF BADGE ==================== */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    line-height: 1;
    animation: notif-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes notif-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

/* Nav item flex so badge stays at far right */
.nav__item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* ==================== LIVE CHAT ENHANCEMENTS ==================== */
.chat-msg {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    animation: chat-fadein 0.3s ease;
}

@keyframes chat-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg.me { align-items: flex-end; }
.chat-msg.them { align-items: flex-start; }

.msg-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-msg.me .msg-bubble {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg.them .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.chat-msg.unread .msg-bubble {
    border-left: 3px solid var(--secondary);
}

.msg-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

/* SSE Connection status indicator */
.sse-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    border: 1px solid var(--border);
}

.sse-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #95a5a6;
    flex-shrink: 0;
}

.sse-status.connected .dot {
    background: #2ecc71;
    animation: notif-pulse 2s ease-in-out infinite;
}

.sse-status.disconnected .dot { background: #e74c3c; }

/* ==================== STATS SECTION ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 0 40px;
}
.stats-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
.stats-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
.stats-card__icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    background: rgba(26, 188, 156, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.stats-card__info {
    display: flex;
    flex-direction: column;
}
.stats-card__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}
.stats-card__label {
    font-size: 13px;
    color: var(--text-muted);
}

/* ==================== HOW IT WORKS SECTION ==================== */
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}
.step-card {
    position: relative;
    background: var(--bg-main);
    border: 1px solid var(--border);
    padding: 35px 24px 28px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}
.step-card:hover {
    transform: translateY(-5px);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.step-card__number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 36px;
    font-weight: 800;
    /*
     * Dulu beropasitas 0.15 dan hanya mencapai 1.13:1 — praktis tak terlihat.
     * Itu memang niatnya (nomor langkah sebagai hiasan), tapi angkanya BUKAN
     * hiasan: ia satu-satunya yang memberi tahu urutan langkah. Sekarang 3.4:1,
     * lulus ambang teks besar (36px/800 → 3:1).
     *
     * Ditulis rgba(), bukan var(--primary) + opacity, karena opacity berlaku ke
     * seluruh elemen dan tidak bisa dibaca alat ukur mana pun dari warna
     * hitungannya — check-a11y.js justru akan melewatinya sebagai "tidak bisa
     * dinilai". Nilainya = --primary hsl(165,68%,29%); ubah bersamaan.
     */
    color: rgba(24, 124, 99, 0.85);
}

/* Pasangannya di tema gelap — lihat catatan di blok [data-theme="dark"]. */
[data-theme="dark"] .step-card__number {
    color: rgba(37, 193, 154, 0.85);
    font-family: inherit;
    line-height: 1;
}
.step-card__icon {
    font-size: 26px;
    color: var(--primary);
    margin-bottom: 20px;
}
.step-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
}
.step-card__desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==================== TRUSTED BY SECTION ==================== */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 10px;
}
.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    color: var(--text-muted);
}
.logo-item i {
    font-size: 20px;
    color: var(--text-muted);
    transition: color 0.3s;
}
.logo-item span {
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
}
.logo-item:hover {
    border-color: var(--primary);
    background: var(--bg-main);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.logo-item:hover i {
    color: var(--primary);
}

/* ==================== CTA SECTION ==================== */
.cta-banner {
    background: linear-gradient(135deg, hsl(165, 68%, 35%), hsl(195, 80%, 25%));
    border-radius: var(--radius-lg);
    padding: 55px 40px;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.cta-banner__content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}
.cta-banner__title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.cta-banner__desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.7;
}
.cta-banner__actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==================== PRATINJAU DOKUMEN (INVOICE / KWITANSI) ==================== */
/*
    Pratinjau invoice selalu memakai palet terang, apa pun tema yang dipilih.

    Pembungkusnya memaksa latar putih -- sebuah dokumen memang putih, dan
    pratinjau yang berbeda dari hasil cetaknya tidak ada gunanya. Tapi teks di
    dalamnya digambar dengan var(--text-main) dan var(--text-muted), yang di
    tema gelap bernilai abu-abu terang. Hasilnya tulisan terang di atas kertas
    putih: nomor dokumen, nama instansi, dan seluruh baris tabel praktis
    menghilang, dan yang paling parah justru kolom nominalnya.

    Diperbaiki dengan menimpa variabelnya DI SINI, bukan dengan menambal satu
    per satu gaya sebaris di app.js. Custom property diwariskan ke seluruh
    keturunan, jadi satu blok ini menyelesaikan setiap var(--...) di dalam
    struk -- termasuk yang belum ditulis hari ini.
*/
#receipt-print-wrapper {
    --text-main: hsl(220, 15%, 20%);
    --text-muted: hsl(220, 10%, 40%);
    --border: hsl(220, 15%, 82%);
    --surface: #fff;
    --bg-main: #fff;
    color: hsl(220, 15%, 20%);
}

/* ==================== PRINT STYLES FOR INVOICE RECEIPT ==================== */
@media print {
    body * {
        visibility: hidden !important;
    }
    /* Tombol aksi di dalam struk (mis. "Cetak kwitansi") tidak ada artinya di
       atas kertas -- sembunyikan sebelum aturan visible di bawah menampilkannya. */
    #receipt-print-wrapper .no-print {
        display: none !important;
    }
    #modal-view-invoice, #modal-view-invoice-client,
    #printable-invoice-container, #printable-invoice-container-client,
    #receipt-print-wrapper, #receipt-print-wrapper * {
        visibility: visible !important;
    }
    .modal-overlay {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .modal {
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .modal-header, .modal-footer, .modal-close {
        display: none !important;
    }
    #receipt-print-wrapper {
        border: 1px solid #000 !important;
        padding: 20px !important;
        color: #000 !important;
        background: #fff !important;
    }
}

/* ==================== TOMSELECT SEARCHABLE SELECT STYLING ==================== */
.ts-control {
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-main) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
}
.ts-control input {
    color: var(--text-main) !important;
    font-size: 13px !important;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15) !important;
}
.ts-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm) !important;
    z-index: 100000 !important;
    font-size: 13px !important;
}
.ts-dropdown .option {
    padding: 10px 14px !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
}
.ts-dropdown .option.active, .ts-dropdown .option:hover {
    background: rgba(46, 204, 113, 0.12) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   TOPBAR USER DROPDOWN COMPONENT & RESPONSIVE STYLES
   ========================================================================== */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 5px 12px 5px 6px;
    border-radius: var(--radius-full);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.user-dropdown__toggle:hover {
    border-color: var(--primary);
    background: var(--bg-main);
}

.user-dropdown__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-dropdown__info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.user-dropdown__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown__role {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: capitalize;
}

.user-dropdown__arrow {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.user-dropdown.open .user-dropdown__arrow {
    transform: rotate(180deg);
}

.user-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 1050;
    display: none;
    animation: fadeIn 0.15s ease-out;
}

.user-dropdown.open .user-dropdown__menu {
    display: block;
}

.user-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.user-dropdown__item:hover {
    background: var(--bg-main);
    color: var(--primary);
}

.user-dropdown__item.danger {
    color: #e74c3c;
}

.user-dropdown__item.danger:hover {
    background: rgba(231, 76, 60, 0.08);
    color: #c0392b;
}

/* Responsive adjustment for Mobile Header */
@media (max-width: 576px) {
    .user-dropdown__info {
        display: none;
    }
    .user-dropdown__toggle {
        padding: 4px 8px 4px 4px;
        border-radius: 50px;
    }
    .user-dropdown__menu {
        right: -5px;
        width: 210px;
    }
}

/* Single-line Benefit Items with Ellipsis Truncation */
.pricing-benefits {
    overflow: hidden;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.benefit-item i {
    flex-shrink: 0;
}

.benefit-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Quill Rich Text Editor Custom Styling */
.ql-toolbar.ql-snow {
    border-color: var(--border) !important;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    background: var(--bg-main);
}

.ql-container.ql-snow {
    border-color: var(--border) !important;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
}

[data-theme="dark"] .ql-stroke {
    stroke: var(--text-main) !important;
}

[data-theme="dark"] .ql-fill {
    fill: var(--text-main) !important;
}

[data-theme="dark"] .ql-picker {
    color: var(--text-main) !important;
}

/* Detail Product Description Rich HTML Content Styling */
.detail-desc-text {
    line-height: 1.7;
    color: var(--text-main);
}

.detail-desc-text p {
    margin-bottom: 12px;
}

.detail-desc-text h1,
.detail-desc-text h2,
.detail-desc-text h3,
.detail-desc-text h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.detail-desc-text ul,
.detail-desc-text ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.detail-desc-text li {
    margin-bottom: 6px;
}

.detail-desc-text b,
.detail-desc-text strong {
    font-weight: 700;
    color: var(--text-main);
}

/* Product Share Social Buttons Styling & Hover Animations */
.btn-share {
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-share:hover {
    transform: translateY(-2px);
    opacity: 0.92;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-share:active {
    transform: translateY(0);
}


/* ==================== BADGE ==================== */
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge i { margin-right: 5px; font-size: 11px; }

/* ==================== CRM ==================== */

/* Ringkasan corong di atas daftar lead */
.crm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.crm-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.crm-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.crm-stat__value { font-size: 22px; font-weight: 800; color: var(--text-main); margin-top: 4px; line-height: 1.2; }
.crm-stat__hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.crm-stat--alert { border-color: #e67e22; }
.crm-stat--alert .crm-stat__value { color: #e67e22; }

/* Penyaring cepat; .is-active ditandai dari app.js */
.crm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.crm-chip:hover { border-color: var(--primary); color: var(--primary); }
.crm-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/*
 * Status lead: tiga warna tegas, dibaca sekilas.
 * Ini sumbu "masih ada potensi atau tidak" - sengaja dibedakan tampilannya
 * dari tahap di bawahnya, supaya keduanya tidak terbaca sebagai satu daftar.
 */
.crm-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.crm-status--open { background: rgba(52, 152, 219, .14); color: #2980b9; }
.crm-status--won { background: rgba(46, 204, 113, .16); color: #27ae60; }
.crm-status--lost { background: rgba(231, 76, 60, .14); color: #c0392b; }

/* Tahap: rangkaian langkah, bukan dropdown */
/*
 * Kepala halaman detail peluang.
 *
 * Ukuran di sini adalah urutan baca. Judulnya memegang keterangan yang paling
 * mengenali peluang ini, dan baris di bawahnya memegang sisanya — kontak,
 * institusi, nomor peluang — dengan bobot yang jelas lebih ringan supaya tidak
 * ikut bersaing.
 */
.crm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.crm-head__main { min-width: 0; }
.crm-head__title { margin: 0 0 6px; font-size: 22px; line-height: 1.25; color: var(--text-main); overflow-wrap: anywhere; }
.crm-head__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; }
.crm-head__sep { opacity: .45; }

/*
 * Ajakan mengisi produk yang belum ditentukan.
 *
 * Bergaris putus-putus karena itulah yang membedakan "tempat kosong yang
 * menunggu diisi" dari sebuah tombol biasa — dan karena isian ini memang boleh
 * dibiarkan kosong, ia tidak boleh terlihat sekeras tombol yang menuntut.
 */
.crm-head__fill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px; border-radius: var(--radius-full);
    border: 1px dashed var(--border); background: none;
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s ease;
}
.crm-head__fill:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }

/*
 * Label kecil huruf besar di panel CRM.
 *
 * Gaya ini tadinya ditulis ulang secara inline di setiap tempat yang
 * memerlukannya, jadi mengubah satu di antaranya berarti membuat sisanya
 * berbeda tanpa ada yang menyadarinya.
 */
.crm-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 600;
}

/* Blok tahap: label, keterangan cara pakai, lalu deretannya */
.crm-stage-block { margin-top: 20px; }
.crm-stage-block__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.crm-stage-block__hint { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

.crm-stepper { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-step {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all .2s ease;
}
.crm-step:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.crm-step.is-current { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.crm-step.is-current:hover:not(:disabled) { color: #fff; }
.crm-step.is-done { border-color: var(--primary); color: var(--primary); }
/* Titik penanda tahap berjalan lebih kecil dari centang, supaya tidak berat */
.crm-step__icon { font-size: 9px; }
.crm-step.is-done .crm-step__icon { font-size: 10px; }
/* Peluang tertutup: tahap tetap terlihat, tapi tidak bisa digeser */
.crm-stepper.is-frozen .crm-step { cursor: not-allowed; opacity: .55; transform: none; }
.crm-stepper.is-frozen .crm-step.is-current { opacity: .85; }

/*
 * Tombol aksi, dua kelompok.
 *
 * Kiri memutuskan nasib penawarannya, kanan sekadar mengurus catatannya. Yang
 * kanan dibuat tenang dengan sengaja: sebelumnya "Hapus" berjajar sebagai
 * tombol bergaris penuh sejajar "Menangkan Peluang", dan dua tindakan yang
 * sejauh itu bedanya tidak boleh terlihat sederajat.
 */
.crm-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px 24px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.crm-actions__group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.crm-actions__group--manage { margin-left: auto; }

.crm-btn-quiet {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: none; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: all .15s ease;
}
.crm-btn-quiet:hover { background: var(--bg-main); color: var(--text-main); }
.crm-btn-quiet--danger:hover { background: rgba(231, 76, 60, .12); color: #e74c3c; }

/* Sempit: kelompok kelola turun ke bawah, bukan berdesakan di kanan */
@media (max-width: 600px) {
    .crm-actions__group--manage { margin-left: 0; }
}

/*
 * Bagian lanjutan pada form lead.
 *
 * Bukan sekadar menyembunyikan isian: yang dibeli di sini adalah kesan pertama
 * saat modal terbuka. Tertutup, yang terlihat tiga isian dan satu baris ajakan;
 * terbuka, semuanya kembali seperti semula. Karena itu ringkasannya dibuat
 * jelas-jelas bisa diklik — bagian yang tidak terlihat bisa diklik sama saja
 * dengan bagian yang dihapus.
 */
.crm-more { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.crm-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--primary); user-select: none; }
/* Segitiga bawaan dibuang di kedua mesin, diganti ikon sendiri agar bisa diputar */
.crm-more > summary::-webkit-details-marker { display: none; }
.crm-more > summary::marker { content: ''; }
.crm-more__caret { font-size: 11px; transition: transform .2s ease; }
.crm-more[open] > summary .crm-more__caret { transform: rotate(90deg); }
.crm-more__hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }

/*
 * Nilai menggantung per tahap pada bagan corong dashboard.
 * Kolom paling boros tempat di baris yang sudah punya empat kolom, jadi ia
 * yang pertama menyingkir di layar sempit — jumlah lead lebih penting
 * daripada rupiahnya kalau hanya satu yang muat.
 */
.crm-stage-value { width: 96px; text-align: right; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) { .crm-stage-value { display: none; } }

/*
 * Peluang lain milik kontak yang sama, di panel kanan halaman detail.
 *
 * Dibuat sebagai tombol, bukan tautan bergaya: seluruh baris bisa ditekan, dan
 * itu yang diharapkan orang dari daftar yang berpindah halaman.
 */
.crm-sibling { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-main); cursor: pointer; transition: all .2s ease; }
.crm-sibling:hover { border-color: var(--primary); }
.crm-sibling__name { font-weight: 700; font-size: 13px; color: var(--text-main); flex: 1; min-width: 0; }
.crm-sibling__meta { font-size: 11px; color: var(--text-muted); flex-basis: 100%; }

/* Target deal yang sudah lewat sementara peluang masih terbuka */
.crm-date-late { color: #e74c3c; font-weight: 700; }
.crm-date-late i { margin-right: 4px; }

/* Timeline aktivitas */
.crm-timeline { position: relative; padding-left: 26px; }
.crm-timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.crm-timeline__item { position: relative; padding: 0 0 20px 0; }
.crm-timeline__dot { position: absolute; left: -24px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--primary); }
.crm-timeline__dot.is-pending { border-color: #f39c12; color: #f39c12; }
.crm-timeline__dot.is-late { border-color: #e74c3c; color: #e74c3c; }
.crm-timeline__meta { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.crm-timeline__title { font-weight: 700; color: var(--text-main); font-size: 14px; }
.crm-timeline__body { font-size: 13px; color: var(--text-muted); margin-top: 4px; white-space: pre-wrap; }

/* Kelompok agenda */
.crm-agenda-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 22px; overflow: hidden; }
.crm-agenda-group__head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm-agenda-group__title { font-weight: 700; font-size: 15px; color: var(--text-main); display: flex; align-items: center; gap: 9px; }
.crm-agenda-group__note { font-size: 12px; color: var(--text-muted); flex-basis: 100%; }
.crm-agenda-item { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.crm-agenda-item:last-child { border-bottom: none; }
.crm-agenda-item__main { flex: 1; min-width: 220px; }
.crm-agenda-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

/*
 * Detail lead: dua kolom di layar lebar, satu kolom di layar sempit.
 *
 * Sebelumnya `minmax(280px, 1fr)` dipasang inline untuk kolom kanan. Itu
 * menahan dua kolom tetap berdampingan pada lebar BERAPA PUN: di 420px kolom
 * kiri tersisa ~50px dan teksnya terpecah satu huruf per baris. Batas 900px di
 * bawah ini yang membuatnya menumpuk, bukan menyempit.
 */
.crm-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) {
    .crm-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions, Refund Policy)
   ========================================================================== */
.legal-container {
    padding: 40px 20px 80px;
    max-width: 860px;
    margin: 0 auto;
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.btn-back-home:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface);
    transform: translateX(-4px);
}

.legal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 44px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.legal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--grad-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.legal-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.legal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.legal-meta span:nth-child(2) {
    color: var(--primary);
}

.legal-content {
    line-height: 1.85;
    color: var(--text-main);
    font-size: 0.95rem;
}

.legal-content p {
    margin-bottom: 18px;
}

.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 32px 0 14px 0;
    padding: 12px 18px;
    background: var(--bg-main);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-content ul,
.legal-content ol {
    margin: 12px 0 24px 0;
    padding-left: 0;
    list-style: none;
}

.legal-content ul li,
.legal-content ol li {
    position: relative;
    padding: 10px 16px 10px 28px;
    margin-bottom: 8px;
    background: var(--bg-main);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.legal-content ul li::before {
    content: '•';
    position: absolute;
    left: 12px;
    top: 9px;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    .legal-card {
        padding: 28px 20px;
    }
    .legal-title {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   SITE FOOTER COMPONENT
   ========================================================================== */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: 60px;
    padding: 60px 0 30px 0;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-primary);
}

.site-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 48px;
}

.site-footer__col--brand {
    padding-right: 20px;
}

.site-footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 16px;
}

.site-footer__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

.site-footer__socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 16px;
    transition: all 0.25s ease;
}

.footer-social-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.footer-social-btn.facebook:hover { background: #1877f2; border-color: #1877f2; }
.footer-social-btn.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #dc2743; }
.footer-social-btn.youtube:hover { background: #ff0000; border-color: #ff0000; }
.footer-social-btn.tiktok:hover { background: #000000; border-color: #000000; }
.footer-social-btn.github:hover { background: #24292e; border-color: #24292e; }

.site-footer__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.site-footer__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__links li {
    margin-bottom: 12px;
}

.site-footer__links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.site-footer__links a i {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.site-footer__links a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.site-footer__links a:hover i {
    color: var(--primary);
}

.site-footer__info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.site-footer__info-list i {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.site-footer__bottom {
    border-top: 1px solid var(--border);
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.site-footer__legal-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-footer__legal-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__legal-links a:hover {
    color: var(--primary);
}

.site-footer__legal-links span {
    color: var(--border);
}

@media (max-width: 992px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .site-footer__container {
        padding: 0 20px;
    }
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}