/* =====================================================================
   Sarana Kartika Motor — tema Glassmorphism (gelap & terang)
   Satu berkas untuk situs publik dan semua dashboard (Bootstrap 4).
   Dimuat dari navbar.php / inc/sidebar.php / login.php, SESUDAH gaya
   bawaan tiap halaman, jadi berkas inilah yang menentukan tampilan.
   ===================================================================== */
:root {
  /* Palet: jingga #EB5B38 · arang #272A2D · krem #E6E4DC · biru #347CCB */
  --accent: #EB5B38; --accent-2: #d2441f; --accent-ink: #ffffff; --accent-rgb: 235,91,56;
  --blue: #5b9de6; --blue-2: #347CCB; --blue-rgb: 52,124,203;
  --radius: 18px; --radius-lg: 26px;
  --serif: 'Outfit', 'DM Sans', system-ui, sans-serif;   /* huruf judul (tebal) */
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ok: #5fd896; --warn: #f2b84b; --err: #ff8686; --info: #5b9de6;
}
html, html[data-theme="dark"] {
  --bg: #1b1d20; --bg2: #272A2D; --text: #E6E4DC; --muted: #9a9c9b;
  --glass: rgba(230,228,220,.06); --glass-2: rgba(230,228,220,.11);
  --stroke: rgba(230,228,220,.14); --stroke-2: rgba(230,228,220,.26);
  --shadow: 0 20px 50px rgba(0,0,0,.45); --field: rgba(0,0,0,.28);
  --blob1: rgba(235,91,56,.2); --blob2: rgba(52,124,203,.22); --solid: rgba(39,42,45,.97);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #E6E4DC; --bg2: #f4f3ee; --text: #272A2D; --muted: #666a6d;
  --glass: rgba(255,255,255,.5); --glass-2: rgba(255,255,255,.78);
  --stroke: rgba(255,255,255,.9); --stroke-2: rgba(39,42,45,.16);
  --shadow: 0 18px 40px rgba(60,50,40,.14); --field: rgba(255,255,255,.72);
  --blob1: rgba(235,91,56,.3); --blob2: rgba(52,124,203,.3); --solid: rgba(244,243,238,.97);
  --accent: #e04f2c; --accent-2: #c23f1e; --accent-ink: #ffffff; --accent-rgb: 224,79,44;
  --blue: #2a69b3; --blue-2: #347CCB;
  --ok: #1b8a4f; --warn: #9a6a00; --err: #c93838; --info: #2a69b3;
  color-scheme: light;
}

/* Variabel lama milik halaman dashboard diarahkan ke palet tema */
html[data-theme] {
  --text-dark: var(--text); --text-muted: var(--muted); --primary-blue: var(--text); --accent-blue: var(--accent);
  --light-blue: var(--glass-2); --bg-main: var(--bg); --card-shadow: var(--shadow);
  --gradient-primary: linear-gradient(135deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .05));
}
/* Warna latar yang ditulis langsung di atribut style */
html[data-theme] [style*="background-color: #fff"], html[data-theme] [style*="background-color:#fff"], html[data-theme] [style*="background: #fff"], html[data-theme] [style*="background:#fff"],
html[data-theme] [style*="background-color: #f8"], html[data-theme] [style*="background-color:#f8"], html[data-theme] [style*="background: #f8"], html[data-theme] [style*="background:#f8"],
html[data-theme] [style*="background-color: #e"], html[data-theme] [style*="background-color:#e"],
html[data-theme] [style*="background-color: #2a2a2a"], html[data-theme] [style*="background-color: #1a"], html[data-theme] [style*="background-color: #0b1120"], html[data-theme] [style*="background: #252525"] {
  background: var(--glass-2) !important; color: var(--text) !important; border-color: var(--stroke) !important; }

/* ---------- Dasar ---------- */
html[data-theme] body {
  margin: 0; min-height: 100vh; background: var(--bg) !important; color: var(--text);
  font-family: var(--sans) !important; font-size: 15px; line-height: 1.6; height: auto; display: block;
}
html[data-theme] body::before {
  content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none; width: auto; height: auto;
  background:
    radial-gradient(620px 420px at 8% 6%, var(--blob1), transparent 62%),
    radial-gradient(760px 520px at 94% 28%, var(--blob2), transparent 62%),
    radial-gradient(640px 520px at 46% 104%, var(--blob1), transparent 62%), var(--bg);
  animation: skmFloat 22s ease-in-out infinite;
}
html[data-theme] a { color: var(--blue); text-decoration: none; }
html[data-theme] a:hover { color: var(--blue); filter: brightness(1.15); text-decoration: none; }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5, html[data-theme] h6,
html[data-theme] .h1, html[data-theme] .h2, html[data-theme] .h3, html[data-theme] .h4, html[data-theme] .h5, html[data-theme] .h6 { color: var(--text); }
html[data-theme] hr { border-color: var(--stroke); }
html[data-theme] label { color: var(--text); }
html[data-theme] small, html[data-theme] .small { color: inherit; }
html[data-theme] code { color: var(--blue); }
html[data-theme] pre { color: var(--text); background: var(--field); border-radius: 12px; padding: 12px; }
.serif { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.kicker { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); display: block; }
.muted { color: var(--muted) !important; }
.glass {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
}
::selection { background: rgba(var(--accent-rgb), .35); }
html[data-theme] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 9px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Warna utilitas Bootstrap ---------- */
html[data-theme] .text-dark, html[data-theme] .text-body, html[data-theme] .text-black { color: var(--text) !important; }
html[data-theme] .text-muted, html[data-theme] .text-secondary, html[data-theme] .text-black-50 { color: var(--muted) !important; }
html[data-theme] .text-white-50 { color: var(--muted) !important; }
html[data-theme] .text-primary { color: var(--accent) !important; }
html[data-theme] .text-info, html[data-theme] .text-cyan { color: var(--blue) !important; }
html[data-theme] .text-success { color: var(--ok) !important; }
html[data-theme] .text-warning, html[data-theme] .text-gold { color: var(--warn) !important; }
html[data-theme] .text-danger { color: var(--err) !important; }
html[data-theme] .bg-white, html[data-theme] .bg-light { background: var(--glass) !important; color: var(--text); }
html[data-theme] .bg-dark, html[data-theme] .bg-secondary { background: var(--glass-2) !important; color: var(--text) !important; }
html[data-theme] .bg-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: var(--accent-ink) !important; }
html[data-theme] .bg-info { background: linear-gradient(135deg, #4a8fdc, var(--blue-2)) !important; color: #fff !important; }
html[data-theme] .bg-success { background: rgba(95,216,150,.2) !important; color: var(--ok) !important; }
html[data-theme] .bg-warning { background: rgba(242,184,75,.2) !important; color: var(--warn) !important; }
html[data-theme] .bg-danger { background: rgba(255,99,99,.2) !important; color: var(--err) !important; }
html[data-theme] .border, html[data-theme] .border-top, html[data-theme] .border-bottom,
html[data-theme] .border-left, html[data-theme] .border-right { border-color: var(--stroke) !important; }
html[data-theme] .shadow, html[data-theme] .shadow-sm, html[data-theme] .shadow-lg { box-shadow: var(--shadow) !important; }
html[data-theme] .rounded, html[data-theme] .rounded-lg { border-radius: 14px !important; }

/* ---------- Kartu ---------- */
html[data-theme] .card, html[data-theme] .card-custom, html[data-theme] .card-modern, html[data-theme] .card-dark,
html[data-theme] .mobile-card, html[data-theme] .welcome-card, html[data-theme] .stat-card, html[data-theme] .history-box,
html[data-theme] .feature-card, html[data-theme] .jumbotron, html[data-theme] .toast, html[data-theme] .card-login {
  background: var(--glass) !important; color: var(--text); border: 1px solid var(--stroke) !important; border-radius: var(--radius) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html[data-theme] .card .card, html[data-theme] .modal .card { box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme] .welcome-card::before { display: none; }
html[data-theme] .card-header, html[data-theme] .card-footer, html[data-theme] .card-header-dark,
html[data-theme] .mc-header, html[data-theme] .mc-footer {
  background: transparent !important; color: var(--text) !important; border-color: var(--stroke) !important;
}
html[data-theme] .card-header { font-weight: 600; padding: 14px 20px; }
html[data-theme] .card-header:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
html[data-theme] .card-body, html[data-theme] .mc-body { color: var(--text); }
html[data-theme] .card-title, html[data-theme] .card-title-gold, html[data-theme] .welcome-title, html[data-theme] .section-title { color: var(--text) !important; }
html[data-theme] .stat-value, html[data-theme] .mc-val { color: var(--text) !important; }
html[data-theme] .stat-label, html[data-theme] .mc-label { color: var(--muted) !important; }
html[data-theme] .list-group-item { background: transparent; color: var(--text); border-color: var(--stroke); }
html[data-theme] .media, html[data-theme] .timeline-date { color: var(--text); }

/* ---------- Tombol ---------- */
html[data-theme] .btn { border-radius: 999px; font-weight: 500; padding: .5rem 1.15rem; font-size: .9rem;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease, background-color .2s ease, border-color .2s ease; position: relative; }
html[data-theme] .btn:hover { transform: translateY(-2px); filter: none; }
html[data-theme] .btn:active { transform: translateY(0) scale(.97); }
html[data-theme] .btn:focus, html[data-theme] .btn.focus { box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .22); }
html[data-theme] .btn-sm { padding: .3rem .8rem; font-size: .8rem; }
html[data-theme] .btn-lg { padding: .7rem 1.6rem; font-size: 1rem; }
html[data-theme] .btn-block { display: block; width: 100%; }
html[data-theme] .btn-primary, html[data-theme] .btn-accent, html[data-theme] .btn-gold,
html[data-theme] .btn-hero, html[data-theme] .btn-login {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: var(--accent-ink) !important; border: 0 !important;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), .32), inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-theme] .btn-primary:hover, html[data-theme] .btn-accent:hover, html[data-theme] .btn-gold:hover { color: var(--accent-ink) !important; filter: brightness(1.08); }
html[data-theme] .btn-secondary, html[data-theme] .btn-light, html[data-theme] .btn-dark, html[data-theme] .btn-glass,
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-dark, html[data-theme] .btn-outline-light, html[data-theme] .btn-default {
  background: var(--glass-2) !important; color: var(--text) !important; border: 1px solid var(--stroke) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme] .btn-secondary:hover, html[data-theme] .btn-light:hover, html[data-theme] .btn-dark:hover, html[data-theme] .btn-glass:hover,
html[data-theme] .btn-outline-secondary:hover, html[data-theme] .btn-outline-dark:hover, html[data-theme] .btn-outline-light:hover { border-color: var(--accent) !important; color: var(--text) !important; }
html[data-theme] .btn-outline-primary {
  background: rgba(var(--accent-rgb), .1) !important; color: var(--accent) !important; border: 1px solid rgba(var(--accent-rgb), .4) !important; }
html[data-theme] .btn-outline-primary:hover { background: rgba(var(--accent-rgb), .22) !important; }
html[data-theme] .btn-info { background: linear-gradient(135deg, #4a8fdc, var(--blue-2)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 20px rgba(var(--blue-rgb), .3); }
html[data-theme] .btn-outline-info { background: rgba(var(--blue-rgb), .14) !important; color: var(--blue) !important; border: 1px solid rgba(var(--blue-rgb), .45) !important; }
html[data-theme] .btn-success { background: linear-gradient(135deg, #34c77b, #1f9f5c) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 20px rgba(52,199,123,.28); }
html[data-theme] .btn-outline-success { background: rgba(95,216,150,.12) !important; color: var(--ok) !important; border: 1px solid rgba(95,216,150,.4) !important; }
html[data-theme] .btn-warning { background: linear-gradient(135deg, #f2b84b, #d99a22) !important; color: #2b1d00 !important; border: 0 !important; }
html[data-theme] .btn-outline-warning { background: rgba(242,184,75,.12) !important; color: var(--warn) !important; border: 1px solid rgba(242,184,75,.4) !important; }
html[data-theme] .btn-danger { background: linear-gradient(135deg, #f0606c, #c93f4b) !important; color: #fff !important; border: 0 !important; }
html[data-theme] .btn-outline-danger, html[data-theme] .btn-danger-soft { background: rgba(255,99,99,.14) !important; color: var(--err) !important; border: 1px solid rgba(255,99,99,.3) !important; }
html[data-theme] .btn-link { color: var(--blue); }
html[data-theme] .btn:disabled, html[data-theme] .btn.disabled { opacity: .5; transform: none; box-shadow: none; }
html[data-theme] .btn-icon { width: 36px; height: 36px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 50%; flex: none; }
html[data-theme] .btn-group > .btn { border-radius: 999px; }
html[data-theme] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-theme] .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html[data-theme] .close { color: var(--text); text-shadow: none; opacity: .7; }
html[data-theme] .close:hover { color: var(--text); opacity: 1; }

/* ---------- Form ---------- */
html[data-theme] .form-control, html[data-theme] .custom-select, html[data-theme] .form-control-dark, html[data-theme] .custom-file-label,
html[data-theme] select, html[data-theme] textarea, html[data-theme] input[type=text], html[data-theme] input[type=number],
html[data-theme] input[type=date], html[data-theme] input[type=search], html[data-theme] input[type=password], html[data-theme] input[type=email], html[data-theme] input[type=tel] {
  background-color: var(--field) !important; border: 1px solid var(--stroke) !important; color: var(--text) !important;
  border-radius: 12px !important; font-size: .92rem; transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-theme] .form-control, html[data-theme] .custom-select { padding: .55rem .85rem; height: auto; min-height: 40px; }
html[data-theme] .form-control-sm, html[data-theme] .custom-select-sm { min-height: 32px; padding: .3rem .7rem; font-size: .82rem; }
html[data-theme] .custom-select { padding-right: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%238e9aa6' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 8px 10px !important; }
html[data-theme] .form-control:focus, html[data-theme] .custom-select:focus, html[data-theme] select:focus, html[data-theme] textarea:focus, html[data-theme] input:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .18) !important; outline: 0; }
html[data-theme] .form-control::placeholder { color: var(--muted); opacity: .75; }
html[data-theme] .form-control:disabled, html[data-theme] .form-control[readonly] { opacity: .7; }
html[data-theme] select option, html[data-theme] select optgroup { background: var(--bg2); color: var(--text); }
html[data-theme] .input-group-text { background: var(--glass-2) !important; border: 1px solid var(--stroke) !important; color: var(--muted) !important; border-radius: 12px; }
html[data-theme] .input-group > .form-control:not(:last-child), html[data-theme] .input-group-prepend > .input-group-text, html[data-theme] .input-group-prepend > .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html[data-theme] .input-group > .form-control:not(:first-child), html[data-theme] .input-group-append > .input-group-text, html[data-theme] .input-group-append > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html[data-theme] .custom-file-label::after { background: var(--glass-2); color: var(--text); border-color: var(--stroke); }
html[data-theme] .custom-control-label::before { background: var(--field); border-color: var(--stroke-2); }
html[data-theme] .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent-2); border-color: var(--accent); }
html[data-theme] .form-text { color: var(--muted) !important; }
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=month]::-webkit-calendar-picker-indicator { filter: invert(.7); }
html[data-theme] input[type=file] { color: var(--text); }
html[data-theme] input[type=checkbox], html[data-theme] input[type=radio] { accent-color: var(--accent-2); }

/* ---------- Tabel ---------- */
html[data-theme] .table, html[data-theme] table.dataTable, html[data-theme] .table-dark-custom, html[data-theme] .table-excel, html[data-theme] .table-monitor {
  color: var(--text) !important; background: transparent !important; border-color: var(--stroke) !important; font-size: .9rem; }
html[data-theme] .table th, html[data-theme] .table td, html[data-theme] .table-bordered, html[data-theme] .table-bordered th, html[data-theme] .table-bordered td,
html[data-theme] .table-excel th, html[data-theme] .table-excel td, html[data-theme] .table-monitor th, html[data-theme] .table-monitor td {
  border-color: var(--stroke) !important; color: var(--text); background-color: transparent; vertical-align: middle; }
html[data-theme] .table thead th, html[data-theme] .thead-light th, html[data-theme] .thead-dark th, html[data-theme] .table-excel th, html[data-theme] .table-monitor th {
  background: var(--glass) !important; color: var(--muted) !important; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--stroke) !important; white-space: nowrap; }
html[data-theme] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(127,140,155,.06) !important; }
html[data-theme] .table-hover tbody tr:hover, html[data-theme] .table tbody tr:hover > * { background-color: var(--glass) !important; color: var(--text) !important; }
html[data-theme] .table tbody tr > * { transition: background-color .2s ease; }
html[data-theme] .table-primary > *, html[data-theme] .table-info > * { background: rgba(var(--blue-rgb), .14) !important; }
html[data-theme] .table-success > * { background: rgba(95,216,150,.12) !important; }
html[data-theme] .table-warning > * { background: rgba(242,184,75,.12) !important; }
html[data-theme] .table-danger > * { background: rgba(255,99,99,.12) !important; }
html[data-theme] .table-secondary > *, html[data-theme] .table-active > *, html[data-theme] .table-light > * { background: var(--glass) !important; }
html[data-theme] .table-responsive { border-radius: 14px; scrollbar-width: thin; }
html[data-theme] tfoot th, html[data-theme] tfoot td { background: var(--glass) !important; font-weight: 600; }

/* DataTables */
html[data-theme] .dataTables_wrapper { color: var(--text); font-size: .88rem; }
html[data-theme] .dataTables_wrapper .dataTables_length, html[data-theme] .dataTables_wrapper .dataTables_filter,
html[data-theme] .dataTables_wrapper .dataTables_info, html[data-theme] .dataTables_wrapper .dataTables_paginate { color: var(--muted) !important; }
html[data-theme] .dataTables_wrapper label { color: var(--muted); }
html[data-theme] table.dataTable thead .sorting::before, html[data-theme] table.dataTable thead .sorting::after,
html[data-theme] table.dataTable thead .sorting_asc::before, html[data-theme] table.dataTable thead .sorting_desc::after { color: var(--accent); }
html[data-theme] div.dt-buttons .btn { margin: 0 4px 6px 0; border-radius: 999px !important; }
html[data-theme] .page-link { background: var(--glass) !important; border: 1px solid var(--stroke) !important; color: var(--text) !important; border-radius: 999px !important; margin: 0 2px; min-width: 34px; text-align: center; }
html[data-theme] .page-item.active .page-link { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: var(--accent-ink) !important; border-color: transparent !important; }
html[data-theme] .page-item.disabled .page-link { opacity: .45; }

/* Select2 */
html[data-theme] .select2-container--default .select2-selection--single, html[data-theme] .select2-container--default .select2-selection--multiple,
html[data-theme] .select2-container--bootstrap4 .select2-selection { background: var(--field) !important; border: 1px solid var(--stroke) !important; border-radius: 12px !important; min-height: 40px; color: var(--text) !important; }
html[data-theme] .select2-container .select2-selection__rendered { color: var(--text) !important; line-height: 38px !important; }
html[data-theme] .select2-container .select2-selection__arrow { height: 38px !important; }
html[data-theme] .select2-dropdown { background: var(--solid) !important; border: 1px solid var(--stroke-2) !important; border-radius: 14px !important; color: var(--text); overflow: hidden; box-shadow: var(--shadow); }
html[data-theme] .select2-results__option { color: var(--text); font-size: .9rem; }
html[data-theme] .select2-results__option--highlighted, html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-container--bootstrap4 .select2-results__option--highlighted { background: rgba(var(--accent-rgb), .22) !important; color: var(--text) !important; }
html[data-theme] .select2-container--default .select2-results__option[aria-selected=true] { background: var(--glass-2); }
html[data-theme] .select2-search__field { background: var(--field) !important; color: var(--text) !important; border: 1px solid var(--stroke) !important; border-radius: 10px !important; }

/* ---------- Modal, dropdown, alert, lencana, tab ---------- */
html[data-theme] .modal-content, html[data-theme] .modal-content-dark { background: var(--solid) !important; color: var(--text) !important; border: 1px solid var(--stroke-2) !important; border-radius: 22px !important;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow); overflow: hidden; }
html[data-theme] .modal-header, html[data-theme] .modal-footer { border-color: var(--stroke) !important; background: transparent !important; color: var(--text) !important; }
html[data-theme] .modal-header .close { color: var(--text) !important; }
html[data-theme] .modal-title { font-weight: 600; font-size: 1.05rem; color: var(--text) !important; }
html[data-theme] .modal.fade .modal-dialog { transform: scale(.94) translateY(18px); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
html[data-theme] .modal.show .modal-dialog { transform: none; }
html[data-theme] .modal-backdrop.show { opacity: .62; }
html[data-theme] .dropdown-menu { background: var(--solid); border: 1px solid var(--stroke-2); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; color: var(--text); }
html[data-theme] .dropdown-item { color: var(--text); border-radius: 9px; font-size: .9rem; }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus { background: var(--glass-2); color: var(--text); }
html[data-theme] .dropdown-divider { border-color: var(--stroke); }
html[data-theme] .alert { border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); color: var(--text); }
html[data-theme] .alert-success { border-color: rgba(95,216,150,.4); background: rgba(95,216,150,.1); }
html[data-theme] .alert-danger { border-color: rgba(255,99,99,.4); background: rgba(255,99,99,.1); }
html[data-theme] .alert-warning { border-color: rgba(242,184,75,.4); background: rgba(242,184,75,.1); }
html[data-theme] .alert-info, html[data-theme] .alert-primary { border-color: rgba(var(--blue-rgb), .45); background: rgba(var(--blue-rgb), .12); }
html[data-theme] .alert .alert-link { color: var(--blue); }
html[data-theme] .badge { border-radius: 999px; padding: .32em .7em; font-weight: 600; font-size: .72rem; border: 1px solid transparent; }
html[data-theme] .badge-primary, html[data-theme] .badge-info, html[data-theme] .badge-soft-info, html[data-theme] .badge-soft-primary, html[data-theme] .bg-soft-primary {
  background: rgba(var(--blue-rgb), .16) !important; color: var(--blue) !important; border-color: rgba(var(--blue-rgb), .4); }
html[data-theme] .badge-success, html[data-theme] .badge-soft-success, html[data-theme] .bg-soft-success { background: rgba(95,216,150,.14) !important; color: var(--ok) !important; border-color: rgba(95,216,150,.32); }
html[data-theme] .badge-warning, html[data-theme] .badge-soft-warning, html[data-theme] .bg-soft-warning { background: rgba(242,184,75,.14) !important; color: var(--warn) !important; border-color: rgba(242,184,75,.32); }
html[data-theme] .badge-danger, html[data-theme] .badge-soft-danger, html[data-theme] .bg-soft-danger { background: rgba(255,99,99,.13) !important; color: var(--err) !important; border-color: rgba(255,99,99,.3); }
html[data-theme] .badge-secondary, html[data-theme] .badge-light, html[data-theme] .badge-dark, html[data-theme] .badge-soft, html[data-theme] .badge-warna {
  background: var(--glass-2) !important; color: var(--text) !important; border-color: var(--stroke); }
html[data-theme] .nav-tabs { border-bottom: 1px solid var(--stroke); }
html[data-theme] .nav-tabs .nav-link, html[data-theme] .nav-pills .nav-link { color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: .35rem 1rem; font-size: .88rem; margin: 0 4px 8px 0; }
html[data-theme] .nav-tabs .nav-link.active, html[data-theme] .nav-pills .nav-link.active { background: var(--glass-2) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
html[data-theme] .progress { background: var(--field); height: 6px; border-radius: 99px; }
html[data-theme] .progress-bar { background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 99px; }
html[data-theme] .breadcrumb { background: transparent; padding: 0; }
html[data-theme] .breadcrumb-item, html[data-theme] .breadcrumb-item.active { color: var(--muted); }
html[data-theme] .popover, html[data-theme] .tooltip-inner { background: var(--solid); color: var(--text); border: 1px solid var(--stroke-2); }
html[data-theme] .popover-header { background: var(--glass); color: var(--text); border-color: var(--stroke); }
html[data-theme] .popover-body { color: var(--text); }
html[data-theme] .img-thumbnail, html[data-theme] .img-preview-box { background: var(--glass); border-color: var(--stroke); border-radius: 12px; }

/* =====================================================================
   KERANGKA DASHBOARD (inc/sidebar.php)
   ===================================================================== */
html[data-theme] #wrapper { width: 100%; }
html[data-theme] #sidebar-wrapper {
  position: fixed; top: 14px; left: 14px; bottom: 14px; width: 268px; min-width: 0; max-width: none; min-height: 0; margin: 0;
  background: var(--glass) !important; border: 1px solid var(--stroke); border-radius: var(--radius-lg); color: var(--text);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  display: flex; flex-direction: column; overflow: hidden; z-index: 1040;
  transition: transform .28s cubic-bezier(.2,.7,.2,1); animation: skmRise .6s cubic-bezier(.2,.7,.2,1) both;
}
html[data-theme] #page-content-wrapper { margin-left: 296px !important; width: auto !important; min-width: 0; flex: 1 1 0%; padding: 14px 14px 30px 0; transition: margin .28s cubic-bezier(.2,.7,.2,1); background: transparent !important; }
html[data-theme] #wrapper.toggled #sidebar-wrapper { transform: translateX(-120%); margin-left: 0; }
html[data-theme] #wrapper.toggled #page-content-wrapper { margin-left: 14px !important; }
.sb-head { padding: 16px 20px 6px; flex: none; }
.sb-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.sb-dots span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.sb-dots span:nth-child(2) { background: #febc2e; } .sb-dots span:nth-child(3) { background: #28c840; }
.sb-brand { display: flex; align-items: center; gap: 10px; }
.sb-brand img { height: 34px; width: 34px; object-fit: contain; flex: none; }
.sb-brand-title { font-weight: 600; font-size: 1.02rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); line-height: 1.15; }
.sb-brand-title small { display: block; font-size: .6rem; letter-spacing: .3em; color: var(--muted) !important; text-transform: uppercase; font-weight: 500; }
.sb-sep { height: 1px; margin: 10px 20px; background: linear-gradient(90deg, transparent, var(--stroke-2), transparent); flex: none; }
.sb-profile { display: flex; align-items: center; gap: 12px; padding: 4px 20px; flex: none; }
.sb-profile small { color: var(--muted) !important; display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.sb-profile .nm { font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 700; font-size: .9rem; border: 1px solid var(--stroke-2); }
html[data-theme] #sidebar-wrapper .list-group { flex: 1; overflow-y: auto; padding-bottom: 12px !important; scrollbar-width: thin; scrollbar-color: var(--stroke-2) transparent; border-radius: 0; }
html[data-theme] #sidebar-wrapper .sidebar-heading { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; padding: 14px 20px 5px; font-weight: 700; background: none; }
html[data-theme] #sidebar-wrapper .list-group-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 20px; color: var(--text); font-size: .9rem; font-weight: 400; white-space: nowrap;
  background: transparent; border: 0 !important; border-radius: 0; margin: 0; position: relative; transition: background-color .2s ease, padding-left .25s ease; width: 100%;
}
html[data-theme] #sidebar-wrapper .list-group-item > i:first-child {
  width: 30px; height: 30px; flex: none; margin: 0; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; opacity: 1;
  background: var(--glass-2); border: 1px solid var(--stroke); color: var(--text) !important; transition: transform .25s ease;
}
html[data-theme] #sidebar-wrapper .list-group-item:hover { background: var(--glass); color: var(--text); padding-left: 25px; filter: none; }
html[data-theme] #sidebar-wrapper .list-group-item:hover > i:first-child { transform: scale(1.12); }
html[data-theme] #sidebar-wrapper .list-group-item.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink) !important; font-weight: 600; box-shadow: 0 6px 24px rgba(var(--accent-rgb), .3); }
html[data-theme] #sidebar-wrapper .list-group-item.active > i:first-child { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.4); color: var(--accent-ink) !important; }
html[data-theme] #sidebar-wrapper .dropdown-toggle::after { content: '\f107'; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; border: 0; margin-left: auto; font-size: .75rem; transition: transform .3s; }
html[data-theme] #sidebar-wrapper .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-180deg); }
html[data-theme] #sidebar-wrapper .dropdown-toggle.active:not([aria-expanded="false"]) { background: var(--glass-2); color: var(--text) !important; box-shadow: none; }
html[data-theme] #sidebar-wrapper .dropdown-toggle.active > i:first-child { background: var(--glass-2); border-color: var(--stroke); color: var(--accent) !important; }
html[data-theme] #sidebar-wrapper .sidebar-submenu { background: transparent; margin: 2px 14px 6px 34px; border-left: 1px solid var(--stroke-2); }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item { padding: 6px 12px 6px 16px; font-size: .85rem; border-radius: 0 999px 999px 0; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item::before { display: none; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item:hover { padding-left: 20px; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item > i:first-child { width: auto; height: auto; background: none; border: 0; font-size: .8rem; margin-right: 0 !important; color: var(--accent) !important; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item.active > i:first-child { color: var(--accent-ink) !important; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .sidebar-heading { padding: 10px 12px 4px 16px !important; }
html[data-theme] .badge-notif { margin-left: auto; min-width: 20px; height: 20px; border-radius: 99px; background: #ff4d5e; color: #fff; font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 6px; animation: skmPulse 2.2s ease-out infinite; flex: none; }
html[data-theme] #sidebar-wrapper .item-logout { margin-top: 6px; padding-top: 8px; border: 0 !important; }
html[data-theme] #sidebar-wrapper .item-logout:hover { background: rgba(255,99,99,.12); color: var(--err) !important; }
html[data-theme] #sidebar-wrapper .item-logout:hover > i:first-child { color: var(--err) !important; }
.sb-foot { flex: none; display: flex; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--stroke); align-items: center; }
.sb-foot span { font-size: .72rem; color: var(--muted); flex: 1; letter-spacing: .08em; text-transform: uppercase; }
.sb-backdrop { display: none; }

/* Bilah atas tiap halaman dashboard */
html[data-theme] #page-content-wrapper > .navbar, html[data-theme] #page-content-wrapper > nav, html[data-theme] .top-navbar {
  background: var(--glass) !important; border: 1px solid var(--stroke) !important; border-radius: 22px; padding: 10px 16px; margin: 0 0 18px;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14) !important; color: var(--text); animation: skmPop .55s cubic-bezier(.2,.7,.2,1) both;
}
html[data-theme] #page-content-wrapper .navbar-brand, html[data-theme] #page-content-wrapper .navbar-text, html[data-theme] #page-content-wrapper .nav-link { color: var(--text) !important; }
html[data-theme] #page-content-wrapper .navbar h1, html[data-theme] #page-content-wrapper .navbar h4, html[data-theme] #page-content-wrapper .navbar h5 { font-size: 1.1rem; margin: 0; font-weight: 600; }
html[data-theme] #menu-toggle { width: 38px; height: 38px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 50%; flex: none;
  background: var(--glass-2) !important; color: var(--text) !important; border: 1px solid var(--stroke) !important; box-shadow: none; }
html[data-theme] #page-content-wrapper > .container-fluid, html[data-theme] #page-content-wrapper > .container { padding-left: 4px; padding-right: 4px; }
@media (max-width: 991px) {
  html[data-theme] #sidebar-wrapper { transform: translateX(-120%); background: var(--solid) !important; left: 10px; top: 10px; bottom: 10px; }
  html[data-theme] #page-content-wrapper, html[data-theme] #wrapper.toggled #page-content-wrapper { margin-left: 0 !important; padding: 10px 10px 30px; }
  html[data-theme] #wrapper.toggled #sidebar-wrapper { transform: none; }
  html[data-theme] #wrapper.toggled::before { display: none; }
  html[data-theme] #wrapper.toggled .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1039; }
}

/* =====================================================================
   SITUS PUBLIK
   ===================================================================== */
.site-nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 28px)); z-index: 1030;
  border-radius: 999px; padding: 9px 12px 9px 20px; display: flex; align-items: center; gap: 18px; animation: skmNav .6s cubic-bezier(.2,.7,.2,1) both; }
.site-nav .brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.site-nav .brand img { height: 36px; width: auto; }
.brand-mark { font-family: var(--sans); letter-spacing: .22em; font-size: .92rem; font-weight: 500; color: var(--text); text-transform: uppercase; display: inline-block; line-height: 1.15; }
.brand-mark small { display: block; font-size: .5rem; letter-spacing: .5em; color: var(--muted) !important; text-transform: uppercase; margin-top: 3px; }
.site-nav .links { display: flex; gap: 28px; margin: 0 auto; }
html[data-theme] .site-nav .links a { color: var(--text); font-size: .86rem; padding: 4px 0; border-bottom: 1px solid transparent; opacity: .85; }
html[data-theme] .site-nav .links a:hover, html[data-theme] .site-nav .links a.on { border-color: var(--accent); opacity: 1; filter: none; }
.site-nav .tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 992px) { .site-nav .tools { margin-left: 0; } .site-nav [data-nav-toggle] { display: none !important; } }
@media (max-width: 991px) {
  .site-nav { border-radius: 24px; flex-wrap: wrap; padding: 10px 14px; }
  .site-nav .links { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; order: 5; margin: 6px 0 4px; }
  .site-nav.open .links { display: flex; }
  .site-nav .brand-mark { font-size: .78rem; letter-spacing: .14em; }
}
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 130px 0 80px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; animation: skmZoom 1.8s cubic-bezier(.2,.7,.2,1) both; }
.hero-bg video, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(27,29,32,.78) 42%, rgba(27,29,32,.18) 100%), linear-gradient(0deg, var(--bg), transparent 32%); }
html[data-theme="light"] .hero-bg::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(230,228,220,.84) 42%, rgba(230,228,220,.15) 100%), linear-gradient(0deg, var(--bg), transparent 32%); }
html[data-theme] .hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: 1.02; margin: 20px 0; letter-spacing: -.02em; text-transform: uppercase; text-shadow: none; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero h1 em.b { color: var(--blue); }
.hero p.lead { color: var(--muted); max-width: 470px; font-size: 1rem; font-weight: 400; }
.hero .rule { width: 46px; height: 1px; background: var(--stroke-2); margin: 26px 0; }
html[data-theme] .link-arrow { color: var(--text); font-size: .92rem; display: inline-flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--stroke-2); padding-bottom: 6px; }
html[data-theme] .link-arrow:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.link-arrow i { transition: transform .25s ease; } .link-arrow:hover i { transform: translateX(6px); }
.hero .kicker, .hero h1, .hero p, .hero .rule, .hero .link-arrow { animation: skmRise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .12s; } .hero p { animation-delay: .22s; } .hero .rule { animation-delay: .3s; } .hero .link-arrow { animation-delay: .38s; }
.page-head-pub { padding: 132px 0 26px; }
html[data-theme] .page-head-pub h1, html[data-theme] .section h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.015em; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; margin: 10px 0 14px; }
.section { padding: 76px 0; overflow-x: clip; }
.section.tight { padding: 30px 0 76px; }
.card-g { padding: 26px 24px; height: 100%; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.card-g:hover { transform: translateY(-5px); border-color: var(--stroke-2); }
.kpi-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 16px;
  color: var(--accent); background: var(--glass-2); border: 1px solid var(--stroke); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.card-g:hover > .kpi-ico { transform: scale(1.12) rotate(-6deg); }
.card-g h5 { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
.card-g p { color: var(--muted); font-size: .9rem; margin: 0; }

/* Kartu motor */
.moto { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; padding: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.moto:hover { transform: translateY(-6px); border-color: var(--stroke-2); }
.moto-img { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.82) 62%, rgba(255,255,255,.7)); border-bottom: 1px solid var(--stroke); }
.moto-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .5s ease; }
.moto:hover .moto-img img { transform: scale(1.07); }
.moto-tag { position: absolute; top: 12px; z-index: 2; padding: .2rem .7rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.moto-tag.l { left: 12px; background: rgba(39,42,45,.8); color: #f2b84b; border: 1px solid rgba(242,184,75,.4); }
.moto-tag.r { right: 12px; background: rgba(27,138,79,.9); color: #fff; }
.moto-tag.r.off { background: rgba(60,70,80,.85); }
.moto-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.moto-body .kicker { font-size: .62rem; margin-bottom: 4px; }
.moto-body h5 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.moto-body p { color: var(--muted); font-size: .84rem; flex: 1; margin-bottom: 14px; }
.moto-price { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; font-size: 1.55rem; line-height: 1; margin-bottom: 16px; color: var(--text); }
.moto-price small { font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; display: block; margin-bottom: 6px; }
.moto-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: .22rem .7rem; border-radius: 999px; font-size: .74rem; background: var(--glass-2); border: 1px solid var(--stroke); color: var(--text); margin: 0 6px 6px 0; }
.cta { position: relative; border-radius: var(--radius-lg); padding: 56px 48px; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 300px at 88% 20%, rgba(var(--accent-rgb), .28), transparent 65%); pointer-events: none; }
.cta > * { position: relative; }
@media (max-width: 575px) { .cta { padding: 36px 24px; } }
.steps { display: flex; margin: 18px 0 6px; }
.steps > div { flex: 1; text-align: center; position: relative; font-size: .72rem; color: var(--muted); }
.steps > div::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--stroke-2); }
.steps > div:first-child::before { display: none; }
.steps i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 6px;
  background: var(--bg2); border: 2px solid var(--stroke-2); font-style: normal; font-size: .75rem; }
.steps .on { color: var(--text); } .steps .on i { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: var(--accent); color: var(--accent-ink); }
.steps .on::before { background: var(--accent); }
.steps .now i { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .22); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
html[data-theme] .contact-grid > * { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 12px 14px; border-radius: 14px; background: var(--glass);
  border: 1px solid var(--stroke); min-width: 0; transition: transform .25s ease, border-color .25s ease; }
html[data-theme] .contact-grid a:hover { transform: translateY(-3px); border-color: var(--accent); filter: none; }
.contact-grid .kpi-ico { margin: 0; flex: none; width: 40px; height: 40px; }
.contact-grid small { display: block; color: var(--muted) !important; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-grid b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.contact-grid span:last-child { min-width: 0; }
.site-foot { padding: 40px 0 30px; margin-top: 30px; border-top: 1px solid var(--stroke); font-size: .86rem; color: var(--muted); }
.site-foot h6 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 14px; font-weight: 700; }
.site-foot .tag { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--text); margin: 14px 0; }
html[data-theme] .site-foot ul { list-style: none; padding: 0; margin: 0; }
html[data-theme] .site-foot li { padding: 3px 0; }
html[data-theme] .site-foot li a, html[data-theme] .site-foot a.plain { color: var(--text); opacity: .82; }
html[data-theme] .site-foot li a:hover, html[data-theme] .site-foot a.plain:hover { opacity: 1; color: var(--accent); }
html[data-theme] .social a { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--stroke); color: var(--text); margin-right: 6px; }
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1020; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, #34c77b, #1f9f5c); color: #fff !important; box-shadow: 0 10px 30px rgba(31,159,92,.45); transition: transform .25s ease; }
.wa-float:hover { transform: scale(1.1) rotate(-6deg); filter: none !important; }

/* Halaman masuk */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
html[data-theme] .auth-card { width: 100%; max-width: 420px; padding: 32px 30px; border-radius: var(--radius-lg) !important; animation: skmPop .6s cubic-bezier(.2,.7,.2,1) both; }
.auth-tools { position: fixed; top: 16px; right: 16px; z-index: 10; display: flex; gap: 8px; }
.back-home { position: fixed; top: 16px; left: 16px; z-index: 10; }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .7rem; letter-spacing: .2em; margin: 18px 0; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--stroke-2); }
.form-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: .3rem; font-weight: 600; display: block; }

/* ---------- Animasi ---------- */
@keyframes skmRise { from { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes skmPop { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes skmNav { from { opacity: 0; transform: translate(-50%, -18px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes skmFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2.5%, -3%) scale(1.06); } }
@keyframes skmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,94,.55); } 60% { box-shadow: 0 0 0 7px rgba(255,77,94,0); } }
@keyframes skmZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.reveal { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(4px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }
html.no-js .reveal { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- Cetak: selalu kertas putih ---------- */
@media print {
  html, html[data-theme] {
    --bg: #fff; --bg2: #fff; --text: #111; --muted: #555; --glass: transparent; --glass-2: transparent; --stroke: #bbb; --stroke-2: #999;
    --shadow: none; --field: #fff; --solid: #fff; --accent: #0c6d7a; --accent-2: #0c6d7a; --accent-ink: #fff;
    --ok: #1b8a4f; --warn: #7a5300; --err: #b02a2a;
  }
  html[data-theme] body { background: #fff !important; font-size: 12px; }
  html[data-theme] body::before, #sidebar-wrapper, .site-nav, .wa-float, .no-print, .sb-backdrop { display: none !important; }
  html[data-theme] #page-content-wrapper { margin: 0 !important; padding: 0 !important; }
  html[data-theme] .card, html[data-theme] .card-custom, html[data-theme] .card-modern, html[data-theme] .card-dark, html[data-theme] .mobile-card {
    box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0 !important; }
  html[data-theme] .table thead th, html[data-theme] tfoot th, html[data-theme] tfoot td { background: #eee !important; color: #111 !important; }
  * { animation: none !important; }
}

/* ---------- Kelas khusus halaman yang masih berlatar terang ---------- */
html[data-theme] .stat-icon-wrapper, html[data-theme] .btn-action, html[data-theme] .table-container, html[data-theme] .img-container,
html[data-theme] .top-toolbar, html[data-theme] .type-card, html[data-theme] .type-header, html[data-theme] .variant-item,
html[data-theme] .filter-box, html[data-theme] .filter-card, html[data-theme] .info-box, html[data-theme] .summary-box, html[data-theme] .box, html[data-theme] .panel {
  background: var(--glass) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
html[data-theme] .stat-icon-wrapper { background: var(--glass-2) !important; color: var(--accent) !important; border: 1px solid var(--stroke); border-radius: 14px; }
html[data-theme] .stat-icon-wrapper i { color: var(--accent) !important; }
html[data-theme] .btn-action { border: 1px solid var(--stroke) !important; border-radius: 16px; transition: transform .3s ease, border-color .3s ease; }
html[data-theme] .btn-action:hover { transform: translateY(-4px); border-color: var(--accent) !important; filter: none; }
html[data-theme] .type-card, html[data-theme] .table-container, html[data-theme] .top-toolbar { border: 1px solid var(--stroke) !important; border-radius: var(--radius); }
html[data-theme] .variant-img-wrap { background: rgba(255,255,255,.92) !important; border-radius: 12px; }
html[data-theme] .rank-1, html[data-theme] .rank-2, html[data-theme] .rank-3 { color: #1a1300 !important; }
html[data-theme] .info-petugas { background: var(--glass) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
html[data-theme] .status-proses { background: rgba(242,184,75,.14) !important; color: var(--warn) !important; border-color: rgba(242,184,75,.32) !important; }
html[data-theme] .status-selesai { background: rgba(95,216,150,.14) !important; color: var(--ok) !important; border-color: rgba(95,216,150,.32) !important; }
html[data-theme] .rank-n { background: var(--glass-2) !important; color: var(--text) !important; }

/* ---------- Perapian: jarak & garis seragam ---------- */
html[data-theme] .card-body { padding: 20px; }
html[data-theme] .card { margin-bottom: 18px; }
html[data-theme] .table th, html[data-theme] .table td { padding: .7rem .85rem; }
html[data-theme] .table-sm th, html[data-theme] .table-sm td { padding: .42rem .6rem; }
html[data-theme] .form-group { margin-bottom: 1rem; }
html[data-theme] .modal-body { padding: 20px 22px; }
html[data-theme] .modal-header, html[data-theme] .modal-footer { padding: 14px 22px; }
html[data-theme] #page-content-wrapper h1, html[data-theme] #page-content-wrapper h2, html[data-theme] #page-content-wrapper h3,
html[data-theme] #page-content-wrapper h4, html[data-theme] #page-content-wrapper h5 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
html[data-theme] .welcome-card { padding: 26px 28px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .2), rgba(var(--blue-rgb), .16)), var(--glass) !important; }
html[data-theme] .stat-icon-wrapper, html[data-theme] .stat-icon-wrapper i { color: var(--blue) !important; }
html[data-theme] .cta::before { background: radial-gradient(520px 300px at 88% 20%, rgba(var(--accent-rgb), .3), transparent 65%), radial-gradient(420px 260px at 10% 100%, rgba(var(--blue-rgb), .26), transparent 65%); }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item > i:first-child { color: var(--blue) !important; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item.active > i:first-child { color: var(--accent-ink) !important; }
html[data-theme] .steps .on i, html[data-theme] .avatar { color: #fff; }
html[data-theme] .stat-value { font-size: 1.3rem; line-height: 1.25; }


/* =====================================================================
   v3 — KACA BURAM (frosted) di atas cahaya jingga, sidebar bisa diciutkan
   ===================================================================== */
html, html[data-theme="dark"] {
  --bg: #171618; --bg2: #232225; --text: #F1EFE9; --muted: #a6a4a1;
  --glass: rgba(255,255,255,.085); --glass-2: rgba(255,255,255,.15);
  --stroke: rgba(255,255,255,.10); --stroke-2: rgba(255,255,255,.22);
  --shadow: 0 24px 60px rgba(0,0,0,.38); --field: rgba(0,0,0,.24);
  --solid: rgba(38,36,39,.96);
  --blob1: rgba(235,91,56,.46); --blob2: rgba(52,124,203,.26);
  --radius: 22px; --radius-lg: 30px;
}
html[data-theme="light"] {
  --bg: #E6E4DC; --bg2: #f5f4ef; --text: #272A2D; --muted: #6a6c6e;
  --glass: rgba(255,255,255,.46); --glass-2: rgba(255,255,255,.74);
  --stroke: rgba(255,255,255,.85); --stroke-2: rgba(39,42,45,.15);
  --shadow: 0 20px 46px rgba(80,60,40,.13); --field: rgba(255,255,255,.7);
  --solid: rgba(245,244,239,.97);
  --blob1: rgba(235,91,56,.34); --blob2: rgba(52,124,203,.28);
  --radius: 22px; --radius-lg: 30px;
}
/* Cahaya latar: satu pendar jingga besar di tengah-atas, biru lembut di bawah */
html[data-theme] body::before {
  inset: -8%;
  background:
    radial-gradient(900px 620px at 58% 22%, var(--blob1), transparent 64%),
    radial-gradient(700px 520px at 96% 92%, var(--blob2), transparent 62%),
    radial-gradient(560px 460px at 4% 96%, rgba(235,91,56,.16), transparent 62%),
    var(--bg);
  animation: skmFloat 26s ease-in-out infinite;
}

/* Kaca: lebih buram, tanpa garis keras, kilau tipis di tepi atas */
.glass,
html[data-theme] .card, html[data-theme] .card-custom, html[data-theme] .card-modern, html[data-theme] .card-dark,
html[data-theme] .mobile-card, html[data-theme] .welcome-card, html[data-theme] .stat-card, html[data-theme] .history-box,
html[data-theme] .feature-card, html[data-theme] .jumbotron, html[data-theme] .card-login,
html[data-theme] .type-card, html[data-theme] .table-container, html[data-theme] .top-toolbar {
  background: linear-gradient(180deg, var(--glass-2), var(--glass) 42%) !important;
  border: 1px solid var(--stroke) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
html[data-theme] .card .card, html[data-theme] .modal .card, html[data-theme] .card .mobile-card, html[data-theme] .type-card .variant-item {
  background: var(--glass) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 16px !important; }
/* Elemen "fixed" (modal) di dalam kartu: lepaskan efek yang mengurungnya */
html[data-theme] .card:has(.modal), html[data-theme] .card-custom:has(.modal), html[data-theme] .card-modern:has(.modal),
html[data-theme] .card-dark:has(.modal), html[data-theme] .mobile-card:has(.modal), html[data-theme] .table-container:has(.modal),
html[data-theme] .type-card:has(.modal) { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important; animation: none !important; }

/* ---------- Kartu: masuk bergiliran, terangkat saat disentuh ---------- */
@keyframes skmCard { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
html[data-theme] #page-content-wrapper .card, html[data-theme] #page-content-wrapper .card-custom, html[data-theme] #page-content-wrapper .card-modern,
html[data-theme] #page-content-wrapper .card-dark, html[data-theme] #page-content-wrapper .welcome-card, html[data-theme] #page-content-wrapper .stat-card,
html[data-theme] #page-content-wrapper .mobile-card, html[data-theme] #page-content-wrapper .type-card, html[data-theme] #page-content-wrapper .top-toolbar,
html[data-theme] #page-content-wrapper .table-container, html[data-theme] #page-content-wrapper .alert {
  animation: skmCard .55s cubic-bezier(.2,.7,.2,1) both;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
html[data-theme] #page-content-wrapper .row > [class*="col"]:nth-child(2) > * { animation-delay: .06s; }
html[data-theme] #page-content-wrapper .row > [class*="col"]:nth-child(3) > * { animation-delay: .12s; }
html[data-theme] #page-content-wrapper .row > [class*="col"]:nth-child(4) > * { animation-delay: .18s; }
html[data-theme] #page-content-wrapper .row > [class*="col"]:nth-child(n+5) > * { animation-delay: .22s; }
html[data-theme] #page-content-wrapper .card .card, html[data-theme] #page-content-wrapper .card .alert, html[data-theme] #page-content-wrapper .mobile-card .card { animation: none; }
html[data-theme] .stat-card:hover, html[data-theme] .card-modern:hover, html[data-theme] .mobile-card:hover, html[data-theme] .btn-action:hover {
  transform: translateY(-4px); border-color: var(--stroke-2) !important; box-shadow: 0 30px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2) !important; }
html[data-theme="light"] .stat-card:hover, html[data-theme="light"] .card-modern:hover, html[data-theme="light"] .mobile-card:hover {
  box-shadow: 0 26px 54px rgba(80,60,40,.2), inset 0 1px 0 #fff !important; }

/* Kepala kartu: judul rapi dengan aksen kecil */
html[data-theme] .card-header { padding: 16px 22px; font-family: var(--serif); font-weight: 600; font-size: .98rem; letter-spacing: -.005em; border-bottom: 1px solid var(--stroke) !important; }
html[data-theme] .card-header h1, html[data-theme] .card-header h2, html[data-theme] .card-header h3, html[data-theme] .card-header h4,
html[data-theme] .card-header h5, html[data-theme] .card-header h6 { font-size: .98rem; margin: 0; font-weight: 600; }
html[data-theme] .card-body { padding: 22px; }
html[data-theme] .card-footer { padding: 14px 22px; border-top: 1px solid var(--stroke) !important; }
html[data-theme] .card > .table-responsive:last-child, html[data-theme] .card > .card-body.p-0 { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }

/* Kartu ringkasan (angka) */
html[data-theme] .stat-card { padding: 20px 22px !important; position: relative; overflow: hidden; }
html[data-theme] .stat-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent); pointer-events: none; }
html[data-theme] .stat-label { font-size: .66rem !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
html[data-theme] .stat-value { font-family: var(--serif); font-weight: 700; font-size: 1.55rem !important; letter-spacing: -.02em; margin-top: 4px; }
html[data-theme] .stat-icon-wrapper { width: 46px; height: 46px; display: grid; place-items: center; flex: none; font-size: 1.05rem;
  background: linear-gradient(135deg, rgba(var(--blue-rgb), .34), rgba(var(--blue-rgb), .1)) !important; border: 1px solid rgba(var(--blue-rgb), .35) !important; border-radius: 15px; }
html[data-theme] .stat-icon-wrapper.icon-green { background: linear-gradient(135deg, rgba(95,216,150,.3), rgba(95,216,150,.08)) !important; border-color: rgba(95,216,150,.35) !important; }
html[data-theme] .stat-icon-wrapper.icon-green i { color: var(--ok) !important; }
html[data-theme] .stat-icon-wrapper.icon-orange { background: linear-gradient(135deg, rgba(var(--accent-rgb), .34), rgba(var(--accent-rgb), .1)) !important; border-color: rgba(var(--accent-rgb), .4) !important; }
html[data-theme] .stat-icon-wrapper.icon-orange i { color: var(--accent) !important; }
html[data-theme] .stat-card:hover .stat-icon-wrapper { transform: scale(1.1) rotate(-6deg); }
html[data-theme] .stat-icon-wrapper { transition: transform .35s cubic-bezier(.2,.7,.2,1); }

/* Kartu sambutan ala "hero" */
html[data-theme] .welcome-card { padding: 30px 32px !important; position: relative; overflow: hidden;
  background: radial-gradient(520px 260px at 82% 0%, rgba(var(--accent-rgb), .42), transparent 68%),
              radial-gradient(420px 240px at 100% 100%, rgba(var(--blue-rgb), .3), transparent 66%),
              linear-gradient(180deg, var(--glass-2), var(--glass)) !important; }
html[data-theme] .welcome-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem) !important; letter-spacing: -.02em; margin-bottom: 8px; }
html[data-theme] .welcome-card p { color: var(--muted) !important; }

/* Ubin "Akses Cepat" */
html[data-theme] .btn-action { background: var(--glass) !important; border-radius: 18px !important; padding: 18px 12px; }
html[data-theme] .btn-action i { color: var(--accent) !important; transition: transform .3s ease; }
html[data-theme] .btn-action:hover i { transform: scale(1.15) translateY(-2px); }
html[data-theme] .btn-action span, html[data-theme] .btn-action div { color: var(--text) !important; }

/* Tabel di dalam kartu: baris seperti "pil" lembut */
html[data-theme] .table thead th { padding-top: .85rem; padding-bottom: .85rem; }
html[data-theme] .table tbody tr { transition: transform .2s ease; }
html[data-theme] .table-hover tbody tr:hover > * { background-color: var(--glass-2) !important; }
html[data-theme] .dataTables_wrapper .dataTables_filter input, html[data-theme] .dataTables_wrapper .dataTables_length select { border-radius: 999px !important; padding: .32rem .9rem; min-height: 34px; margin-left: 6px; }
html[data-theme] .dataTables_wrapper .row:first-child { margin-bottom: 10px; align-items: center; }
html[data-theme] .dataTables_wrapper .row:last-child { margin-top: 12px; align-items: center; }

/* Tombol: kilau menyapu pada tombol utama */
@keyframes skmShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
html[data-theme] .btn-primary, html[data-theme] .btn-accent, html[data-theme] .btn-gold, html[data-theme] .btn-hero, html[data-theme] .btn-login { overflow: hidden; }
html[data-theme] .btn-primary::after, html[data-theme] .btn-accent::after, html[data-theme] .btn-gold::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-130%) skewX(-18deg); }
html[data-theme] .btn-primary:hover::after, html[data-theme] .btn-accent:hover::after, html[data-theme] .btn-gold:hover::after { animation: skmShine .8s ease; }
html[data-theme] .badge { transition: transform .2s ease; }
html[data-theme] .badge:hover { transform: scale(1.06); }

/* ---------- Bilah atas: tanpa tombol garis tiga di desktop ---------- */
html[data-theme] #page-content-wrapper > .navbar, html[data-theme] #page-content-wrapper > nav, html[data-theme] .top-navbar {
  border-radius: 24px; padding: 12px 22px !important; min-height: 64px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
@media (min-width: 992px) {
  html[data-theme] #menu-toggle, html[data-theme] .sidebar-toggle, html[data-theme] [id="sidebarToggle"] { display: none !important; }
  /* kelas "toggled" bawaan halaman tidak dipakai lagi di desktop */
  html[data-theme] #wrapper.toggled #sidebar-wrapper { transform: none; }
  html[data-theme] #wrapper.toggled #page-content-wrapper { margin-left: 296px !important; }
}

/* ---------- Sidebar ala Navagraphy: tombol ciut, cari menu, rel ikon ---------- */
html[data-theme] #sidebar-wrapper { width: 268px; transition: width .26s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
  background: linear-gradient(180deg, rgba(20,19,21,.62), rgba(20,19,21,.42)) !important; }
html[data-theme="light"] #sidebar-wrapper { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5)) !important; }
html[data-theme] #page-content-wrapper { transition: margin .26s cubic-bezier(.2,.7,.2,1); }
html[data-theme] .sb-collapse { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text);
  display: grid; place-items: center; font-size: .68rem; cursor: pointer; padding: 0; transition: transform .25s ease, border-color .2s ease, background-color .2s ease; }
html[data-theme] .sb-collapse:hover { border-color: var(--accent); transform: scale(1.1); }
html[data-theme] .sb-collapse:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); }
html[data-theme] .sb-collapse i { transition: transform .26s ease; }
html[data-theme] .sb-search { margin: 0 18px 4px; flex: none; }
html[data-theme] .sb-search input { border-radius: 999px !important; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .4rem 1rem; min-height: 34px; }
html[data-theme] .sb-search input::placeholder { letter-spacing: .14em; }
html[data-theme] #sidebar-wrapper .list-group-item { border-radius: 14px !important; margin: 1px 10px; width: auto; padding: 8px 12px; }
html[data-theme] #sidebar-wrapper .list-group-item:hover { padding-left: 16px; }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item { margin: 1px 0; border-radius: 0 12px 12px 0 !important; }
html[data-theme] #sidebar-wrapper .sidebar-heading { padding: 14px 22px 5px; }

@media (min-width: 992px) {
  html.sb-collapsed[data-theme] #page-content-wrapper,
  html.sb-collapsed[data-theme] #wrapper.toggled #page-content-wrapper { margin-left: 106px !important; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) { width: 78px; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-brand-title,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-dots,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-search,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-profile > div,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-heading,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-submenu,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-foot span,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-foot a,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-collapse,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .dropdown-toggle::after { display: none !important; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-head { padding: 20px 0 6px; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-brand,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-profile,
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .sb-foot { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .list-group-item { font-size: 0; justify-content: center; gap: 0; padding: 8px 0; margin: 2px 14px; position: relative; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .list-group-item > i:first-child { font-size: .85rem; }
  html.sb-collapsed[data-theme] #sidebar-wrapper:not(:hover):not(:focus-within) .badge-notif { position: absolute; top: 2px; right: 4px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; }
  /* diciutkan tetapi sedang disentuh: melebar sementara di atas konten */
  html.sb-collapsed[data-theme] #sidebar-wrapper:hover, html.sb-collapsed[data-theme] #sidebar-wrapper:focus-within { box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); background: var(--solid) !important; }
  html.sb-collapsed[data-theme] .sb-collapse i { transform: rotate(180deg); }
}
@media (max-width: 991px) {
  html[data-theme] .sb-collapse { display: none; }
  html[data-theme] #sidebar-wrapper { width: 280px; }
}

/* ---------- Situs publik: kaca yang sama ---------- */
.site-nav.glass { background: linear-gradient(180deg, var(--glass-2), var(--glass)) !important; }
html[data-theme] .moto, html[data-theme] .card-g, html[data-theme] .cta { border-radius: 24px; }
html[data-theme] .moto:hover, html[data-theme] .card-g:hover { box-shadow: 0 30px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2) !important; }
html[data-theme="light"] .moto:hover, html[data-theme="light"] .card-g:hover { box-shadow: 0 26px 54px rgba(80,60,40,.2), inset 0 1px 0 #fff !important; }
html[data-theme] .kpi-ico { background: linear-gradient(135deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .08)); border-color: rgba(var(--accent-rgb), .35); }
html[data-theme] .auth-card { background: linear-gradient(180deg, var(--glass-2), var(--glass)) !important; }
html[data-theme] .sb-search { margin-top: 12px; }
html[data-theme] #sidebar-wrapper .sb-profile + .sb-sep { display: none; }


/* =====================================================================
   v4 — SIDEBAR DI LAYAR KECIL
   Sebab macet: animasi masuk sidebar (skmRise, fill "both") berakhir di
   "transform: none" dan nilai itu MENGALAHKAN translateX(-120%) yang
   menyembunyikan sidebar, jadi sidebar selalu terbuka dan tidak bisa
   ditutup. Sekarang animasinya hanya memudar (tanpa transform) dan
   buka/tutup memakai kelas html.sb-open yang dikendalikan tema.js.
   ===================================================================== */
@keyframes skmFade { from { opacity: 0; } to { opacity: 1; } }
html[data-theme] #sidebar-wrapper { animation: skmFade .5s ease both; }

@media (max-width: 991px) {
  html[data-theme] #sidebar-wrapper,
  html[data-theme] #wrapper.toggled #sidebar-wrapper {
    transform: translateX(calc(-100% - 24px)); animation: none; visibility: hidden;
    left: 10px; top: 10px; bottom: 10px; width: min(300px, calc(100vw - 56px)); z-index: 1050;
    background: var(--solid) !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
  }
  html.sb-open[data-theme] #sidebar-wrapper,
  html.sb-open[data-theme] #wrapper.toggled #sidebar-wrapper {
    transform: none; visibility: visible;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
  html[data-theme] .sb-backdrop,
  html[data-theme] #wrapper.toggled .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 1045; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .28s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  html.sb-open[data-theme] .sb-backdrop { opacity: 1; pointer-events: auto; }
  html.sb-open, html.sb-open body { overflow: hidden; }

  /* tombol bulat di kepala sidebar menjadi tombol TUTUP */
  html[data-theme] .sb-collapse { display: grid; width: 34px; height: 34px; font-size: .8rem; }
  html[data-theme] .sb-collapse i { transform: none !important; }

  /* konten selalu selebar layar; tombol garis tiga selalu terlihat */
  html[data-theme] #page-content-wrapper,
  html[data-theme] #wrapper.toggled #page-content-wrapper,
  html.sb-collapsed[data-theme] #page-content-wrapper { margin-left: 0 !important; padding: 10px 10px 30px; }
  html[data-theme] #menu-toggle { display: inline-grid !important; }
  html[data-theme] #page-content-wrapper > .navbar, html[data-theme] #page-content-wrapper > nav, html[data-theme] .top-navbar { padding: 10px 14px !important; border-radius: 20px; }
  html[data-theme] #page-content-wrapper > .container-fluid, html[data-theme] #page-content-wrapper > .container { padding-left: 2px !important; padding-right: 2px !important; }
  html[data-theme] .welcome-card { padding: 22px 20px !important; }
  html[data-theme] .card-body { padding: 16px; }
  html[data-theme] .card-header { padding: 14px 16px; }
}
html[data-theme] .sb-fab { position: fixed; top: 14px; left: 14px; z-index: 1040; box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 991px) { html[data-theme] body:has(.sb-fab) #page-content-wrapper { padding-top: 62px; } }


/* ---------- Tabel laporan ---------- */
html[data-theme] .tabel-laporan { border-collapse: separate; border-spacing: 0; }
html[data-theme] .tabel-laporan th, html[data-theme] .tabel-laporan td { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--stroke) !important; }
html[data-theme] .tabel-laporan thead th { position: sticky; top: 0; z-index: 1; }
html[data-theme] .tabel-laporan tbody td { padding: .8rem .85rem; font-size: .88rem; }
html[data-theme] .tabel-laporan .sel-alamat { max-width: 240px; white-space: normal; line-height: 1.35; }
html[data-theme] .tabel-laporan td.text-right { font-variant-numeric: tabular-nums; }
html[data-theme] .tabel-laporan tr.baris-batal > td { opacity: .55; }
html[data-theme] .tabel-laporan tr.baris-batal > td:nth-child(n+7):nth-child(-n+9) { text-decoration: line-through; }
html[data-theme] .tabel-laporan tfoot th { border-top: 1px solid var(--stroke-2) !important; border-bottom: 0 !important; font-size: .82rem; text-transform: none; letter-spacing: 0; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html[data-theme] .dataTables_wrapper .dt-buttons .btn { margin-right: 6px; }


/* ---------- Katalog: tab kategori & kartu tipe ---------- */
.kat-tab { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); max-width: 100%; }
html[data-theme] .kat-tab a { padding: .5rem 1.25rem; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 500; transition: color .2s ease, background-color .25s ease, transform .2s ease; }
html[data-theme] .kat-tab a:hover { color: var(--text); filter: none; transform: translateY(-1px); }
html[data-theme] .kat-tab a.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35); }
@media (max-width: 575px) { .kat-tab { border-radius: 22px; } html[data-theme] .kat-tab a { padding: .45rem .95rem; font-size: .82rem; } }

@keyframes skmApung { 0%, 100% { transform: translateY(0) scale(1.06); } 50% { transform: translateY(-6px) scale(1.06); } }
html[data-theme] .kat-card { color: var(--text); position: relative; isolation: isolate; }
html[data-theme] .kat-card:hover { color: var(--text); filter: none; border-color: rgba(var(--accent-rgb), .55) !important; transform: translateY(-8px); }
.kat-card::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--blue-2)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.kat-card:hover::after, .kat-card:focus-visible::after { transform: scaleX(1); }
.kat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kat-card .moto-img { height: 190px; background: radial-gradient(closest-side, #ffffff, #f3f1ea 70%, #e7e4da); }
.kat-card .moto-img::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 14px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); transition: transform .5s ease, opacity .5s ease; }
.kat-card .moto-img img { position: relative; z-index: 1; padding: 14px 14px 20px; }
.kat-card:hover .moto-img img { animation: skmApung 2.4s ease-in-out infinite; transform: scale(1.06); }
.kat-card:hover .moto-img::after { transform: scaleX(.86); opacity: .7; }
.kat-card .moto-body { padding: 16px 18px 18px; }
.kat-card .moto-body h5 { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: -.005em; margin: 0 0 8px; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kat-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kat-meta span { font-size: .7rem; padding: .18rem .6rem; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--stroke); color: var(--muted); white-space: nowrap; }
.kat-meta i { color: var(--blue); margin-right: 3px; font-size: .68rem; }
.kat-card .moto-price { font-size: 1.3rem; margin-bottom: 14px; color: var(--text); }
.kat-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--stroke);
  font-size: .8rem; font-weight: 600; color: var(--accent); }
.kat-cta i { transition: transform .3s ease; }
.kat-card:hover .kat-cta i { transform: translateX(6px); }
@media (max-width: 575px) {
  .kat-card .moto-img { height: 130px; }
  .kat-card .moto-body { padding: 12px 12px 14px; }
  .kat-card .moto-body h5 { font-size: .86rem; }
  .kat-card .moto-price { font-size: 1.02rem; margin-bottom: 10px; }
  .kat-card .moto-tag { font-size: .56rem; top: 8px; padding: .14rem .5rem; }
  .kat-card .moto-tag.l { left: 8px; } .kat-card .moto-tag.r { right: 8px; }
  .kat-meta span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kat-card:hover .moto-img img { animation: none; } }

/* Gambar motor selalu pas di dalam kotaknya (tidak ikut tinggi asli berkas) */
.moto-img img, .kat-card .moto-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
html[data-theme] .stat-value { white-space: nowrap; font-size: clamp(1.05rem, 1.45vw, 1.5rem) !important; }
html[data-theme] .stat-card > div:first-child { min-width: 0; }
html[data-theme] .stat-card .small { white-space: normal; line-height: 1.35; margin-top: 2px; }


/* ---------- Kotak pilih yang bisa dicari (assets/js/cepat.js) ---------- */
.skm-cari { position: relative; }
.skm-cari-asli { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; z-index: 0; }
html[data-theme] .skm-cari-tombol { position: relative; z-index: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  padding-right: 2.2rem !important; width: 100%; display: block;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%239a9c9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: right .8rem center !important; }
html[data-theme] .skm-cari-tombol.kosong { color: var(--muted) !important; }
html[data-theme] .skm-cari.buka .skm-cari-tombol { border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .18) !important; }
.skm-cari-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1060; padding: 8px; border-radius: 16px;
  background: var(--solid); border: 1px solid var(--stroke-2); box-shadow: var(--shadow); min-width: 240px; animation: skmPop .18s ease both; }
.skm-cari.buka .skm-cari-panel { display: block; }
.skm-cari.ke-atas .skm-cari-panel { top: auto; bottom: calc(100% + 6px); }
html[data-theme] .skm-cari-input { border-radius: 999px !important; min-height: 36px; padding: .35rem .95rem; font-size: .88rem; margin-bottom: 6px; }
.skm-cari-daftar { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.skm-cari-butir { padding: 8px 12px; border-radius: 10px; font-size: .88rem; color: var(--text); cursor: pointer; line-height: 1.35; }
.skm-cari-butir.sorot, .skm-cari-butir:hover { background: var(--glass-2); }
.skm-cari-butir.dipilih { color: var(--accent); font-weight: 600; }
.skm-cari-butir.mati { opacity: .45; cursor: not-allowed; }
.skm-cari-nihil { padding: 10px 12px; font-size: .8rem; color: var(--muted); text-align: center; }
.input-group > .skm-cari { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575px) { .skm-cari-daftar { max-height: 42vh; } .skm-cari-butir { padding: 11px 12px; } }

/* ---------- Manajemen User ---------- */
.saring-level { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke); }
.saring-level button { border: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-size: .78rem; font-weight: 500; padding: .32rem .85rem; border-radius: 999px; cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.saring-level button small { opacity: .7; margin-left: 2px; }
.saring-level button:hover { color: var(--text); }
.saring-level button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.saring-level button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .saring-level { border-radius: 18px; } }
html[data-theme] .tabel-user .avatar { width: 38px; height: 38px; font-size: .85rem; }
html[data-theme] .tabel-user tr.baris-nonaktif > td:not(:last-child):not(:nth-last-child(2)) { opacity: .5; }
html[data-theme] .saklar { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
html[data-theme] .saklar i { position: relative; width: 34px; height: 19px; border-radius: 999px; background: var(--field); border: 1px solid var(--stroke-2); transition: background-color .25s ease, border-color .25s ease; flex: none; }
html[data-theme] .saklar i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--muted); transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease; }
html[data-theme] .saklar.on { color: var(--ok); }
html[data-theme] .saklar.on i { background: rgba(95,216,150,.25); border-color: rgba(95,216,150,.5); }
html[data-theme] .saklar.on i::after { transform: translateX(15px); background: var(--ok); }
html[data-theme] a.saklar:hover { filter: none; color: var(--text); }
html[data-theme] a.saklar:hover i { border-color: var(--accent); }
html[data-theme] .tabel-laporan .btn-icon { width: 32px; height: 32px; font-size: .78rem; }


/* =====================================================================
   v6 — KESAN 3D & ANIMASI
   Kedalaman dibuat dari: bayangan berlapis, tepi atas terang + tepi bawah
   gelap (bevel), tombol "timbul" yang bisa ditekan, kartu yang miring
   mengikuti kursor (assets/js/tema.js), dan elemen masuk dengan perspektif.
   Semua gerak dimatikan bila perangkat meminta "kurangi gerakan".
   ===================================================================== */
html, html[data-theme="dark"] {
  --sh-3d: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.35),
           0 1px 2px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.24), 0 24px 48px rgba(0,0,0,.34);
  --sh-3d-naik: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35),
           0 2px 4px rgba(0,0,0,.3), 0 18px 30px rgba(0,0,0,.34), 0 44px 80px rgba(0,0,0,.46);
  --tepi-tombol: #9c3214; --tepi-kaca: rgba(0,0,0,.45); --tepi-biru: #1f5596; --tepi-hijau: #14703f; --tepi-merah: #8f2630; --tepi-kuning: #9a6c10;
  --bola-1: rgba(235,91,56,.55); --bola-2: rgba(52,124,203,.5);
}
html[data-theme="light"] {
  --sh-3d: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(39,42,45,.08),
           0 1px 2px rgba(60,50,40,.1), 0 8px 16px rgba(60,50,40,.08), 0 24px 44px rgba(60,50,40,.12);
  --sh-3d-naik: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(39,42,45,.08),
           0 2px 4px rgba(60,50,40,.12), 0 18px 30px rgba(60,50,40,.13), 0 40px 70px rgba(60,50,40,.18);
  --tepi-tombol: #a8381a; --tepi-kaca: rgba(39,42,45,.2);
  --bola-1: rgba(235,91,56,.45); --bola-2: rgba(52,124,203,.4);
}

/* ---------- Latar: dua bola cahaya 3D yang melayang & ikut kursor ---------- */
@keyframes skmBola { 0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1); } 50% { transform: translate3d(calc(var(--px, 0px) + 18px), calc(var(--py, 0px) - 26px), 0) scale(1.07); } }
html[data-theme] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.34), transparent 22%) 86% 12% / 210px 210px no-repeat,
    radial-gradient(circle at 50% 50%, var(--bola-1), transparent 70%) 86% 12% / 210px 210px no-repeat,
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.28), transparent 22%) 6% 88% / 150px 150px no-repeat,
    radial-gradient(circle at 50% 50%, var(--bola-2), transparent 70%) 6% 88% / 150px 150px no-repeat;
  filter: blur(6px); opacity: .55; animation: skmBola 14s ease-in-out infinite; will-change: transform;
}

/* ---------- Kartu: tebal, berlapis, bertepi ---------- */
.glass,
html[data-theme] .card, html[data-theme] .card-custom, html[data-theme] .card-modern, html[data-theme] .card-dark,
html[data-theme] .mobile-card, html[data-theme] .welcome-card, html[data-theme] .stat-card, html[data-theme] .history-box,
html[data-theme] .feature-card, html[data-theme] .card-login, html[data-theme] .type-card, html[data-theme] .table-container, html[data-theme] .top-toolbar,
html[data-theme] #page-content-wrapper > .navbar, html[data-theme] #page-content-wrapper > nav, html[data-theme] .top-navbar, html[data-theme] #sidebar-wrapper {
  box-shadow: var(--sh-3d) !important;
}
html[data-theme] .card .card, html[data-theme] .modal .card, html[data-theme] .card .mobile-card, html[data-theme] .type-card .variant-item {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.2) !important; }
html[data-theme] .modal-content { box-shadow: var(--sh-3d-naik) !important; }
html[data-theme] .dropdown-menu, .skm-cari-panel { box-shadow: var(--sh-3d-naik); }

/* Masuk dengan perspektif (seperti lembaran yang ditegakkan) */
@keyframes skmCard { from { opacity: 0; transform: perspective(1100px) rotateX(16deg) translateY(34px) scale(.965); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes skmPop  { from { opacity: 0; transform: perspective(900px) rotateX(-14deg) scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
html[data-theme] #page-content-wrapper .card, html[data-theme] #page-content-wrapper .card-custom, html[data-theme] #page-content-wrapper .card-modern,
html[data-theme] #page-content-wrapper .card-dark, html[data-theme] #page-content-wrapper .welcome-card, html[data-theme] #page-content-wrapper .stat-card,
html[data-theme] #page-content-wrapper .mobile-card, html[data-theme] #page-content-wrapper .type-card, html[data-theme] #page-content-wrapper .top-toolbar,
html[data-theme] #page-content-wrapper .table-container { animation-duration: .7s; transform-origin: 50% 100%; }
.reveal { transform: perspective(1100px) rotateX(14deg) translateY(36px) scale(.96); transform-origin: 50% 100%; }
.reveal.in { transform: none; }

/* Kartu yang miring mengikuti kursor (kelas dipasang tema.js) */
.skm-3d { transform-style: preserve-3d; will-change: transform; }
html[data-theme] .skm-3d.miring {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.015) !important;
  box-shadow: var(--sh-3d-naik) !important; transition: transform .08s linear, box-shadow .3s ease, border-color .3s ease !important; animation: none !important;
}
html[data-theme] .skm-3d { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease; }
.skm-kilau { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--kx, 50%) var(--ky, 0%), rgba(255,255,255,.22), transparent 60%); mix-blend-mode: screen; }
.skm-3d.miring > .skm-kilau { opacity: 1; }
html[data-theme="light"] .skm-kilau { mix-blend-mode: normal; background: radial-gradient(260px circle at var(--kx, 50%) var(--ky, 0%), rgba(255,255,255,.7), transparent 60%); }
html[data-theme] .stat-card, html[data-theme] .card-g, html[data-theme] .btn-action { position: relative; overflow: hidden; }

/* Gambar motor terasa "keluar" dari kartu */
.moto-img img { filter: drop-shadow(0 14px 12px rgba(0,0,0,.28)); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.moto:hover .moto-img img, .skm-3d.miring .moto-img img { transform: scale(1.1) translateY(-4px); filter: drop-shadow(0 26px 18px rgba(0,0,0,.34)); }
.kat-card:hover .moto-img img { animation: none; }

/* ---------- Tombol timbul: punya tepi bawah, turun saat ditekan ---------- */
html[data-theme] .btn { transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, filter .2s ease, background-color .2s ease, border-color .2s ease; }
html[data-theme] .btn-primary, html[data-theme] .btn-accent, html[data-theme] .btn-gold, html[data-theme] .btn-hero, html[data-theme] .btn-login {
  box-shadow: 0 4px 0 var(--tepi-tombol), 0 12px 22px rgba(var(--accent-rgb), .36), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.14) !important; }
html[data-theme] .btn-info { box-shadow: 0 4px 0 var(--tepi-biru), 0 12px 22px rgba(var(--blue-rgb), .32), inset 0 1px 0 rgba(255,255,255,.4) !important; }
html[data-theme] .btn-success { box-shadow: 0 4px 0 var(--tepi-hijau), 0 12px 22px rgba(52,199,123,.28), inset 0 1px 0 rgba(255,255,255,.4) !important; }
html[data-theme] .btn-danger { box-shadow: 0 4px 0 var(--tepi-merah), 0 12px 22px rgba(240,96,108,.28), inset 0 1px 0 rgba(255,255,255,.35) !important; }
html[data-theme] .btn-warning { box-shadow: 0 4px 0 var(--tepi-kuning), 0 12px 22px rgba(242,184,75,.26), inset 0 1px 0 rgba(255,255,255,.5) !important; }
html[data-theme] .btn-secondary, html[data-theme] .btn-light, html[data-theme] .btn-dark, html[data-theme] .btn-glass,
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-dark, html[data-theme] .btn-outline-light,
html[data-theme] .btn-outline-primary, html[data-theme] .btn-outline-info, html[data-theme] .btn-outline-success,
html[data-theme] .btn-outline-warning, html[data-theme] .btn-outline-danger {
  box-shadow: 0 3px 0 var(--tepi-kaca), 0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22) !important; }
html[data-theme] .btn:hover { transform: translateY(-2px); }
html[data-theme] .btn:active, html[data-theme] .btn.active:active { transform: translateY(3px) !important; box-shadow: 0 0 0 transparent, inset 0 2px 5px rgba(0,0,0,.3) !important; transition-duration: .05s; }
html[data-theme] .btn-sm:active { transform: translateY(2px) !important; }
html[data-theme] .btn:disabled, html[data-theme] .btn.disabled { box-shadow: none !important; transform: none !important; }
html[data-theme] .btn-link, html[data-theme] .close { box-shadow: none !important; }
/* riak saat diklik */
@keyframes skmRiak { to { transform: scale(2.6); opacity: 0; } }
.skm-riak { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.45); transform: scale(0); animation: skmRiak .6s ease-out forwards; z-index: 2; }
html[data-theme] .btn { overflow: hidden; }

/* ---------- Isian "cekung", lencana & ikon "cembung" ---------- */
html[data-theme] .form-control, html[data-theme] .custom-select, html[data-theme] .skm-cari-tombol {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.07); }
html[data-theme="light"] .form-control, html[data-theme="light"] .custom-select, html[data-theme="light"] .skm-cari-tombol {
  box-shadow: inset 0 2px 4px rgba(39,42,45,.1), 0 1px 0 #fff; }
html[data-theme] .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.18); }
html[data-theme] .stat-icon-wrapper, html[data-theme] .kpi-ico, html[data-theme] .avatar,
html[data-theme] #sidebar-wrapper .list-group-item > i:first-child {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.26); }
html[data-theme] #sidebar-wrapper .sidebar-submenu .list-group-item > i:first-child { box-shadow: none; }
html[data-theme] .saklar i { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
html[data-theme] .saklar i::after { box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
html[data-theme] .progress { box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
html[data-theme] .kat-tab, html[data-theme] .saring-level { box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.08); }
html[data-theme] .kat-tab a.on, html[data-theme] .saring-level button.on { box-shadow: 0 3px 0 var(--tepi-tombol), 0 8px 16px rgba(var(--accent-rgb), .35), inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- Sidebar: butir aktif timbul, butir masuk bergiliran ---------- */
html[data-theme] #sidebar-wrapper .list-group-item.active:not(.dropdown-toggle) {
  box-shadow: 0 3px 0 var(--tepi-tombol), 0 10px 22px rgba(var(--accent-rgb), .38), inset 0 1px 0 rgba(255,255,255,.4) !important; transform: translateY(-1px); }
@keyframes skmMasukKiri { from { opacity: 0; transform: translateX(-18px) rotateY(18deg); } to { opacity: 1; transform: none; } }
html[data-theme] #sidebar-wrapper .list-group > .list-group-item, html[data-theme] #sidebar-wrapper .list-group > .sidebar-heading {
  animation: skmMasukKiri .5s cubic-bezier(.2,.7,.2,1) both; transform-origin: left center; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(1) { animation-delay: .05s; } html[data-theme] #sidebar-wrapper .list-group > *:nth-child(2) { animation-delay: .09s; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(3) { animation-delay: .13s; } html[data-theme] #sidebar-wrapper .list-group > *:nth-child(4) { animation-delay: .17s; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(5) { animation-delay: .21s; } html[data-theme] #sidebar-wrapper .list-group > *:nth-child(6) { animation-delay: .25s; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(7) { animation-delay: .29s; } html[data-theme] #sidebar-wrapper .list-group > *:nth-child(8) { animation-delay: .33s; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(9) { animation-delay: .37s; } html[data-theme] #sidebar-wrapper .list-group > *:nth-child(10) { animation-delay: .41s; }
html[data-theme] #sidebar-wrapper .list-group > *:nth-child(n+11) { animation-delay: .45s; }
html[data-theme] #sidebar-wrapper .list-group-item.active:not(.dropdown-toggle) { animation-name: skmMasukKiri; }
@keyframes skmLompat { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-4px) scale(1.12); } 60% { transform: translateY(0) scale(.96); } }
html[data-theme] .badge-notif { animation: skmPulse 2.2s ease-out infinite, skmLompat 2.6s ease-in-out infinite; }

/* ---------- Tabel: baris masuk bergiliran, terangkat saat disentuh ---------- */
@keyframes skmBaris { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html[data-theme] #page-content-wrapper .table tbody tr { animation: skmBaris .45s ease both; }
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(1) { animation-delay: .10s; } html[data-theme] #page-content-wrapper .table tbody tr:nth-child(2) { animation-delay: .14s; }
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(3) { animation-delay: .18s; } html[data-theme] #page-content-wrapper .table tbody tr:nth-child(4) { animation-delay: .22s; }
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(5) { animation-delay: .26s; } html[data-theme] #page-content-wrapper .table tbody tr:nth-child(6) { animation-delay: .30s; }
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(7) { animation-delay: .34s; } html[data-theme] #page-content-wrapper .table tbody tr:nth-child(8) { animation-delay: .38s; }
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(n+9) { animation-delay: .42s; }
html[data-theme] .table-hover tbody tr:hover > *:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Situs publik ---------- */
html[data-theme] .hero h1 { text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.2), 0 3px 0 rgba(0,0,0,.16), 0 12px 26px rgba(0,0,0,.45); }
html[data-theme="light"] .hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(60,50,40,.22); }
html[data-theme] .page-head-pub h1, html[data-theme] .section h2 { text-shadow: 0 2px 0 rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.28); }
html[data-theme="light"] .page-head-pub h1, html[data-theme="light"] .section h2 { text-shadow: 0 1px 0 #fff, 0 8px 18px rgba(60,50,40,.14); }
html[data-theme] .site-nav.glass { box-shadow: var(--sh-3d-naik) !important; }
@keyframes skmGoyang { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-5deg); } }
.wa-float { box-shadow: 0 5px 0 #157a45, 0 16px 30px rgba(31,159,92,.5), inset 0 1px 0 rgba(255,255,255,.45); animation: skmGoyang 3.4s ease-in-out infinite; }
.wa-float:active { transform: translateY(4px); box-shadow: 0 1px 0 #157a45; }
html[data-theme] .steps i { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 8px rgba(0,0,0,.25); }
html[data-theme] .kat-card::after { height: 4px; box-shadow: 0 0 14px rgba(var(--accent-rgb), .7); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body::after { animation: none; }
  .skm-3d.miring { transform: none !important; }
  .reveal { transform: none; }
}
@media print { html[data-theme] body::after { display: none !important; } }


/* ---------- Grafik dashboard (assets/js/grafik.js) ---------- */
.skm-grafik-ringkas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; margin: 4px 0 16px; }
.skm-grafik-ringkas small { display: block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.skm-grafik-ringkas b { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.skm-grafik-ringkas b span { font-family: var(--sans); font-size: .74rem; font-weight: 500; color: var(--muted); }
.skm-grafik-legenda { margin-left: auto; font-size: .74rem; color: var(--muted); white-space: nowrap; display: flex; align-items: center; }
.skm-grafik-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
@media (max-width: 575px) { .skm-grafik-legenda { margin-left: 0; flex-basis: 100%; } .skm-grafik-ringkas b { font-size: 1.05rem; } }
html[data-theme] #pieChart { max-width: 230px; margin: 0 auto; display: block; }
.skm-grafik-ringkas b i { font-style: normal; }


/* ---------- Kinerja halaman berisi ratusan baris ---------- */
/* Animasi masuk hanya untuk 12 baris pertama; sisanya langsung tampil. */
html[data-theme] #page-content-wrapper .table tbody tr:nth-child(n+13) { animation: none !important; }
/* Kartu daftar versi ponsel bisa ratusan: tanpa buram latar & tanpa animasi satu per satu. */
html[data-theme] .mobile-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--glass-2) !important; }
html[data-theme] #page-content-wrapper .mobile-card:nth-of-type(n+7) { animation: none !important; }
/* Baris di luar layar tidak perlu dihitung tata letaknya sampai digulir. */
html[data-theme] #page-content-wrapper .mobile-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }

/* =====================================================================
   v7 — SISA KELAS HALAMAN YANG MASIH TERANG
   Ditemukan lewat pemindaian semua blok <style> halaman dashboard
   (bukan hanya halaman yang kebetulan dibuka): kotak pilihan survei di
   form Prospek, panel impor, kartu tugas driver, dan lencana status.
   ===================================================================== */
html[data-theme] .bg-radio-group, html[data-theme] .bg-head-panel, html[data-theme] .flow-container, html[data-theme] .task-card,
html[data-theme] .box-log, html[data-theme] .scroll-box, html[data-theme] .card-stnk, html[data-theme] .card-stnk-info,
html[data-theme] .card-header-custom, html[data-theme] .mobile-card-header, html[data-theme] .mobile-card-footer, html[data-theme] .th-sub {
  background: var(--glass) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
html[data-theme] .bg-radio-group { border: 1px solid var(--stroke) !important; border-radius: 14px; padding: 14px 16px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2); }
html[data-theme] .task-card, html[data-theme] .flow-container, html[data-theme] .card-stnk, html[data-theme] .card-stnk-info, html[data-theme] .box-log {
  border: 1px solid var(--stroke) !important; border-radius: 16px; }
/* kolom tabel yang "menempel" saat digulir harus buram penuh agar teks di bawahnya tidak tembus */
html[data-theme] .col-sticky-1, html[data-theme] .col-sticky-2 { background: var(--solid) !important; color: var(--text) !important; }

/* pilihan radio & centang: teksnya ikut warna tema */
html[data-theme] .custom-control-label, html[data-theme] .form-check-label { color: var(--text) !important; }
html[data-theme] .custom-control { padding-top: 3px; padding-bottom: 3px; }
html[data-theme] .custom-control-input:disabled ~ .custom-control-label { color: var(--muted) !important; }

/* teks yang ditulis gelap oleh halaman */
html[data-theme] .form-section-title, html[data-theme] .text-modal, html[data-theme] .val-text, html[data-theme] .type-title,
html[data-theme] .info-value, html[data-theme] .value-field, html[data-theme] .m-value, html[data-theme] .m-label { color: var(--text) !important; }
html[data-theme] .m-label, html[data-theme] .info-label { color: var(--muted) !important; }
html[data-theme] .form-section-title { font-family: var(--serif); font-weight: 700; border-color: var(--stroke) !important; }
html[data-theme] .text-rose { color: var(--err) !important; }

/* lencana status buatan halaman */
html[data-theme] .bg-soft-secondary, html[data-theme] .status-badge, html[data-theme] .badge-leasing {
  background: var(--glass-2) !important; color: var(--text) !important; border: 1px solid var(--stroke) !important; }
html[data-theme] .status-verif, html[data-theme] .status-verifikasi, html[data-theme] .badge-prospek {
  background: rgba(242,184,75,.14) !important; color: var(--warn) !important; border: 1px solid rgba(242,184,75,.32) !important; }
html[data-theme] .badge-deal { background: rgba(95,216,150,.14) !important; color: var(--ok) !important; border: 1px solid rgba(95,216,150,.32) !important; }
html[data-theme] .badge-incomplete { background: rgba(255,99,99,.13) !important; color: var(--err) !important; border: 1px solid rgba(255,99,99,.3) !important; }
html[data-theme] .btn-batal { background: rgba(255,99,99,.14) !important; color: var(--err) !important; border: 1px solid rgba(255,99,99,.3) !important; }
html[data-theme] .variant-add-btn:hover { background: var(--glass-2) !important; color: var(--text) !important; }

/* warna yang ditulis langsung di atribut style */
html[data-theme] [style*="background: #e"], html[data-theme] [style*="background:#e"],
html[data-theme] [style*="background: white"], html[data-theme] [style*="background:white"],
html[data-theme] [style*="background-color: white"], html[data-theme] [style*="background-color:white"] {
  background: var(--glass-2) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
html[data-theme] [style*="color: #000"], html[data-theme] [style*="color:#000"], html[data-theme] [style*="color: #111"], html[data-theme] [style*="color:#111"],
html[data-theme] [style*="color: #222"], html[data-theme] [style*="color:#222"], html[data-theme] [style*="color: #333"], html[data-theme] [style*="color:#333"],
html[data-theme] [style*="color: #444"], html[data-theme] [style*="color:#444"], html[data-theme] [style*="color: black"], html[data-theme] [style*="color:black"] {
  color: var(--text) !important; }


/* =====================================================================
   v8 — KINERJA
   Lapisan latar dulu bergerak terus (dan ikut kursor). Karena hampir semua
   panel memakai backdrop-filter, setiap gerakan latar memaksa browser
   menghitung ulang buram di SEMUA panel tiap bingkai -> terasa lemot,
   terutama di laptop kantor. Sekarang latar diam dan buramnya lebih ringan.
   ===================================================================== */
html[data-theme] body::before, html[data-theme] body::after { animation: none !important; will-change: auto; }
html[data-theme] body::after { filter: none; transform: none; }
.glass,
html[data-theme] .card, html[data-theme] .card-custom, html[data-theme] .card-modern, html[data-theme] .card-dark,
html[data-theme] .welcome-card, html[data-theme] .stat-card, html[data-theme] .history-box, html[data-theme] .feature-card,
html[data-theme] .card-login, html[data-theme] .type-card, html[data-theme] .table-container, html[data-theme] .top-toolbar,
html[data-theme] #page-content-wrapper > .navbar, html[data-theme] #page-content-wrapper > nav, html[data-theme] .top-navbar {
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
/* kartu di dalam kartu tidak perlu buram sendiri */
html[data-theme] .card .card, html[data-theme] .card .stat-card, html[data-theme] .card .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-bg video { background: #1b1d20 url("../img/hero-sampul.jpg") center / cover no-repeat; }


/* ---------- Pembagi halaman (tabel biasa & kartu ponsel) ---------- */
.skm-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin: 12px 2px 4px; }
.skm-pager small { color: var(--muted); font-size: .8rem; }
.skm-pager > div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.skm-pager button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass);
  color: var(--text); font-family: var(--sans); font-size: .85rem; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.skm-pager button:hover:not(:disabled) { border-color: var(--accent); }
.skm-pager button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 3px 0 var(--tepi-tombol), 0 8px 16px rgba(var(--accent-rgb), .3); }
.skm-pager button:disabled { opacity: .4; cursor: default; }
.skm-pager span { color: var(--muted); padding: 0 2px; }
/* pemilih "Tampil 10 baris" DataTables tampil rapi */
html[data-theme] .dataTables_wrapper .dataTables_length select { width: auto !important; display: inline-block; }


/* =====================================================================
   v9 — PONSEL: TABEL BISA DIGESER & MENGETIK TIDAK TERSENDAT
   1) `.card > .table-responsive:last-child { overflow: hidden }` ikut
      mengenai `<div class="card-body table-responsive">` (misalnya Draft
      Proses di sales/penawaran.php) -> tabel terpotong, tidak bisa digeser.
   2) Di layar sentuh, keyboard yang muncul mengubah tinggi layar; setiap
      panel ber-backdrop-filter lalu dihitung ulang -> ketikan terasa lambat.
      Latar tema hanya gradasi halus yang diam, jadi buramnya nyaris tak
      terlihat bedanya; di layar sentuh buram dimatikan.
   3) Huruf kolom isian < 16px membuat Safari iPhone memperbesar halaman
      setiap kali kolom disentuh.
   ===================================================================== */
html[data-theme] .table-responsive,
html[data-theme] .card > .table-responsive:last-child {
  overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
html[data-theme] .table-responsive > .table { margin-bottom: 0; }

@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-theme] #sidebar-wrapper, html[data-theme] .modal-content, html[data-theme] .dropdown-menu,
  html[data-theme] .select2-dropdown, html[data-theme] .skm-cari-daftar, html[data-theme] .site-nav { background-color: var(--solid) !important; }
  /* tanpa animasi masuk & efek miring: lebih ringan saat menggulir */
  html[data-theme] #page-content-wrapper .card, html[data-theme] #page-content-wrapper .table tbody tr,
  html[data-theme] .reveal, html[data-theme] .skm-3d { animation: none !important; transform: none !important; will-change: auto !important; }
  html[data-theme] .table tbody tr > * { transition: none; }
  /* 16px = Safari tidak memperbesar halaman saat kolom disentuh */
  html[data-theme] .form-control, html[data-theme] .custom-select, html[data-theme] select, html[data-theme] textarea,
  html[data-theme] input[type=text], html[data-theme] input[type=number], html[data-theme] input[type=date], html[data-theme] input[type=search],
  html[data-theme] input[type=password], html[data-theme] input[type=email], html[data-theme] input[type=tel], html[data-theme] .form-control-lg,
  html[data-theme] .form-control-sm { font-size: 16px !important; }
  /* tabel lebar: kolom tidak diperas, cukup digeser */
  html[data-theme] .table-responsive > .table { min-width: 640px; }
  html[data-theme] .table-responsive > .table td, html[data-theme] .table-responsive > .table th { white-space: normal; }
}