/* ═══════════════════════════════════════════════════════════════
   UI ROMBAK TOTAL — layout baru + kartu profesional
   ═══════════════════════════════════════════════════════════════ */

/* ── LOGIN (tetap split) ─────────────────────────────────────── */
.masuk-layar {
  background: #070a12 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.login-split { display: flex; width: 100%; height: 100%; min-height: 100vh; min-height: 100dvh; }
.login-kiri {
  flex: 1.15;
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 40%, #0f172a 100%);
  color: #fff;
  padding: 52px 60px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.login-kiri::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 80% 20%, rgba(139,92,246,.25), transparent 60%);
  pointer-events: none;
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 52px; position: relative; z-index: 1; }
.login-logo {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; color: #fff;
  box-shadow: 0 12px 32px rgba(139,92,246,.4);
}
.login-nama { font-size: 22px; font-weight: 750; }
.login-tag { font-size: 12.5px; opacity: .7; margin-top: 2px; }
.login-judul { font-size: 38px; font-weight: 800; line-height: 1.15; margin: 0 0 18px; letter-spacing: -.9px; position: relative; z-index: 1; }
.login-deskripsi { font-size: 15.5px; opacity: .8; max-width: 400px; line-height: 1.65; margin: 0 0 36px; position: relative; z-index: 1; }
.login-fitur { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.login-fitur span {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  padding: 7px 16px; border-radius: 24px; font-size: 12.5px; font-weight: 550;
}
.login-kanan { flex: .85; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-form { width: 100%; max-width: 400px; }
.login-form h1 { font-size: 30px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.6px; }
.login-sub { color: var(--teks-3); margin: 0 0 30px; font-size: 14.5px; }
.login-form label { display: block; font-size: 12.5px; font-weight: 650; color: var(--teks-2); margin: 18px 0 7px; letter-spacing: .02em; }
.login-form .input {
  width: 100%; padding: 14px 16px; border-radius: 14px; font-size: 15px;
  background: var(--panel-2); border: 1.5px solid var(--garis-kuat); color: var(--teks);
  transition: border .2s, box-shadow .2s;
}
.login-form .input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.login-form .btn {
  margin-top: 26px; padding: 15px; font-size: 15.5px; font-weight: 700; border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border: none; color: #fff;
  box-shadow: 0 8px 24px rgba(139,92,246,.35);
}
.login-form .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.masuk-pesan { margin-top: 16px; min-height: 22px; font-size: 13.5px; }

@media (max-width: 900px) {
  .login-split { flex-direction: column; }
  .login-kiri { padding: 36px 24px; }
  .login-judul { font-size: 30px; }
  .login-kanan { padding: 28px 20px; }
}

/* ── LAYOUT UTAMA: kiri + konten + kanan ─────────────────────── */
.shell {
  display: grid !important;
  grid-template-columns: 220px 1fr 280px;
  grid-template-rows: auto 1fr;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 220px !important;
  height: 100% !important;
  flex-direction: column !important;
  border-right: 1px solid var(--garis) !important;
  border-bottom: none !important;
  padding: 0 !important;
  background: var(--panel-padat) !important;
  position: relative !important;
  transform: none !important;
}
.merek { padding: 20px 16px !important; border-bottom: 1px solid var(--garis) !important; }
.merek-ikon {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
  color: #fff !important; font-size: 18px !important;
}
.nav { flex-direction: column !important; padding: 12px 10px !important; overflow: visible !important; }
.nav-label { display: block !important; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--teks-3); padding: 12px 10px 6px; }
.nav-item {
  padding: 10px 12px !important; border-radius: 10px !important; margin-bottom: 2px !important;
  font-size: 13.5px !important;
}
.nav-item.aktif {
  background: linear-gradient(90deg, rgba(139,92,246,.2), rgba(139,92,246,.05)) !important;
  color: #c4b5fd !important;
}
.nav-item.aktif::before { display: none !important; }
.sidebar-bawah { margin-top: auto; padding: 12px !important; border-top: 1px solid var(--garis); }

/* Konten utama */
.utama {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex; flex-direction: column; min-width: 0;
  overflow: hidden;
}
.kepala {
  padding: 16px 24px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--garis) !important;
}
.isi { padding: 20px 24px 40px !important; overflow-y: auto; }

/* ── KARTU PROFESIONAL ───────────────────────────────────────── */
.kartu {
  border-radius: 18px !important;
  border: 1px solid var(--garis) !important;
  background: var(--panel-2) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  overflow: hidden;
}
.kartu-kepala {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--garis);
  background: rgba(139,92,246,.04);
}
.kartu-kepala h3 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.kartu-isi { padding: 18px 20px !important; }

/* Stat cards lebih menarik */
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}
.stat-kartu, .stat-item {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  border: 1px solid var(--garis) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.stat-kartu .nilai, .stat-nilai {
  font-size: 26px !important; font-weight: 800 !important;
  background: linear-gradient(90deg, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Kolom 2 */
.kolom-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .kolom-2 { grid-template-columns: 1fr; } }

/* Sembunyikan versi jika masih muncul dari JS */
#merekVersi { display: none !important; }

/* Mobile: sidebar kanan sembunyi, nav jadi drawer */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    position: fixed !important; left: 0; top: 0; bottom: 0; z-index: 50;
    width: 240px !important; transform: translateX(-100%) !important;
  }
  body.nav-terbuka .sidebar { transform: translateX(0) !important; }
  
  .utama { grid-column: 1; }
  .nav-buka { display: flex !important; }
}

/* Tema terang */
html[data-tema="terang"] .login-kiri { background: linear-gradient(145deg, #4c1d95, #1e40af); }
html[data-tema="terang"] .nav-item.aktif { color: #6d28d9 !important; background: rgba(139,92,246,.12) !important; }
html[data-tema="terang"] .kartu { box-shadow: 0 6px 20px rgba(15,23,42,.08) !important; }

/* ── Kartu dashboard lebih profesional ── */
.kartu-kepala h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
}
.aksi-cepat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aksi-cepat .btn, .aksi-cepat button, .aksi-cepat a {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 600;
}
#dasborCepat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 4px !important;
}

/* ── Panel kanan ─────────────────────────────────────────────── */
.panel-kanan {
  grid-column: 3;
  grid-row: 1 / -1;
  background: var(--panel-padat);
  border-left: 1px solid var(--garis);
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kartu-kanan {
  margin: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.2) !important;
}
.kartu-kanan .kartu-isi {
  max-height: 280px;
  overflow-y: auto;
}

/* ── Banner Dasbor ───────────────────────────────────────────── */
.dasbor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #06b6d4 100%);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 12px 32px rgba(124,58,237,.35);
}
.dasbor-judul {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.1;
}
.dasbor-sub {
  font-size: 14px;
  opacity: .85;
  margin-top: 4px;
}
.dasbor-banner-kanan {
  display: flex;
  gap: 8px;
}
.dasbor-badge {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 650;
}
.dasbor-badge-soft {
  background: rgba(255,255,255,.12);
}

/* ── Kinerja Sistem lebih profesional ────────────────────────── */
#hal-dasbor .kartu:has(#dasborSistem) {
  background: var(--panel-2) !important;
  border: 1px solid var(--garis) !important;
}
#hal-dasbor .kartu:has(#dasborSistem) .kartu-kepala {
  background: linear-gradient(90deg, rgba(124,58,237,.12), transparent);
  border-bottom: 1px solid var(--garis);
}
/* Mobile: panel kanan sembunyi */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr !important; }
  .panel-kanan { display: none; }
  .utama { grid-column: 1; }
}