:root {
  --bg: #f7f7fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --ok: #c8f7c5;
  --bad: #ffd2d2;
  --btn: #111827;
  --btn-text: #ffffff;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e5e7eb; /* abu-abu lembut (mirip dashboard modern) */
  color: var(--text);
}

.container {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
}
h1 {
  margin: 0 0 8px 0;
  text-align: center; /* bikin teks di tengah */
  width: 100%;
}
header {
  text-align: center;
}
/* === Navbar styling === */
.navbar {
  background: #b3d9ff; /* biru muda lembut */
  color: #0d1b2a; /* warna teks sedikit gelap agar kontras */
  padding: 16px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease;
}
.navbar:hover {
  background: #a3cfff;
}
.nav-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* teks di tengah */
  justify-content: flex-start; /* ⬅️ hamburger ke kiri */
  text-align: center;
}

.nav-title {
  flex: 1; /* ⬅️ judul ambil sisa ruang */
  display: grid;
  justify-items: center; /* judul tetap center */
  text-align: center;
}

.navbar h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.navbar .subtitle {
  margin-top: 6px;
  font-size: 1rem;
  color: #12344d;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}
.mt12 {
  margin-top: 12px;
}
.mt24 {
  margin-top: 24px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.card-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gap {
  gap: 8px;
}
.pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eee;
}
button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--btn-text);
  cursor: pointer;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button.outline {
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
}
.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.form label {
  display: grid;
  gap: 6px;
}
.form input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat {
  background: #fafafa;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
}

/* =========================
   AUTH (Login/Register 1 page)
   ========================= */
.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;

  /* background gambar */
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("../img/hydrogen-bg.jpeg.jpeg") center / cover no-repeat fixed;
}

.auth-wrap {
  width: min(980px, 94vw);
  padding: 18px;
}

.auth-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  min-height: 520px;
}

.auth-side {
  position: relative;
  background: radial-gradient(circle at 20% 20%, #2de2e6, #0b4b5a);
  color: #fff;
  padding: 34px;
  display: flex;
  align-items: center;
}

.auth-side::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 40%;
  transform: rotate(10deg);
}

.auth-side-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.auth-ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}

.auth-side-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 18px auto;
  width: 75%;
}

.auth-main {
  padding: 34px;
  display: grid;
  align-items: center;
}

.auth-form {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}

.auth-form h2 {
  text-align: center;
  margin: 0 0 16px 0;
  font-size: 28px;
}

.auth-primary {
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #0b4b5a, #20d7d9);
  color: #fff;
}

.auth-switch {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}

.auth-switch a {
  color: #0b4b5a;
  font-weight: 600;
  text-decoration: none;
}

.hidden {
  display: none;
}

@media (max-width: 860px) {
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-side::after {
    right: -160px;
    top: -160px;
  }
}

/* =========================
   AUTH OVERLAY (mirip template gambar 2/3)
   ========================= */
/*.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #cfefff;
  margin: 0;
}*/

/* ===== panel transparan ===== */
.auth-body .auth-form input {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.auth-body .auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.auth-wrap {
  width: min(980px, 94vw);
  padding: 18px;
}

.auth-shell {
  position: relative;
  width: 100%;
  min-height: 560px;

  /* ini kunci: biar background gambar terlihat */
  background: transparent;

  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* Dua form masing-masing setengah */
.auth-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 34px;
  transition: all 0.6s ease-in-out;

  /* glass effect (hanya panel form) */
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.auth-panel--form {
  color: #fff;
}

.auth-panel--form label {
  color: rgba(255, 255, 255, 0.9);
}

.auth-panel--form h2 {
  margin: 0 0 14px 0;
  font-size: 30px;
}

.auth-form {
  width: min(360px, 92%);
}

.auth-form label {
  width: 100%;
}

.auth-forgot {
  text-align: center;
  margin: 4px 0 10px;
}

/* biar "Forgot Password ?" kelihatan di panel glass */
.auth-panel--form .auth-forgot {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-panel--form .auth-forgot:hover {
  color: #fff;
}

.auth-primary {
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #0b4b5a, #20d7d9);
  color: #fff;
  width: 100%;
  cursor: pointer;
}

/* posisi awal: login di kanan, register di kiri tapi disembunyiin */
.auth-signin {
  left: 50%;
  z-index: 2;
}

.auth-signup {
  left: 0;
  opacity: 0;
  z-index: 1;
}

/* Overlay container: menutupi setengah kiri/kanan & geser */
.auth-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  transition: transform 0.6s ease-in-out;
}

.auth-overlay {
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  background: radial-gradient(circle at 20% 20%, #2de2e6, #0b4b5a);
  color: #fff;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

/* dua panel di overlay */
.auth-overlay-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 34px;
}

.auth-overlay-panel h2 {
  margin: 0 0 10px 0;
  font-size: 36px;
}

.auth-overlay-panel p {
  margin: 0 0 18px 0;
  opacity: 0.95;
}

.auth-ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}

.auth-overlay-left {
  left: 0;
}

.auth-overlay-right {
  right: 0;
}

/* Link bawah */
.auth-switch {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}
.auth-switch a {
  color: #0b4b5a;
  font-weight: 700;
  text-decoration: none;
}

/* ====== MODE REGISTER (swap) ======
   Saat class aktif:
   - login form geser ke kiri
   - register form muncul di kanan
   - overlay geser ke kanan
*/
.auth-shell.is-right-panel-active .auth-signin {
  transform: translateX(-100%);
  opacity: 0; /* sembunyikan login */
  pointer-events: none;
}

.auth-shell.is-right-panel-active .auth-signup {
  transform: translateX(0); /* jangan dorong ke kanan */
  opacity: 1;
  z-index: 5; /* munculkan register */
  pointer-events: auto;
}

.auth-shell.is-right-panel-active .auth-overlay-container {
  transform: translateX(100%);
}

.auth-shell.is-right-panel-active .auth-overlay {
  transform: translateX(50%);
}

/* Mobile: jadi stack (tanpa overlay geser biar nggak rusuh) */
@media (max-width: 860px) {
  .auth-shell {
    min-height: 720px;
  }

  .auth-panel {
    width: 100%;
    position: relative;
    left: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .auth-overlay-container {
    display: none;
  }

  .auth-signup {
    display: none;
  }

  .auth-shell.is-right-panel-active .auth-signin {
    display: none;
  }
  .auth-shell.is-right-panel-active .auth-signup {
    display: grid;
  }
}

.auth-social {
  margin-top: 18px;
  text-align: center;
}

.auth-social-text {
  margin-top: -25px; /* NAIKKAN (nilai minus = ke atas) */
  margin-bottom: 12px;
  font-size: 14px;
  color: #777;
  text-align: center;
}

.auth-google {
  width: 100%;
  height: 46px;
  padding: 0 16px;

  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  font-weight: 600;
  color: #111;
}

.g-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.google-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;

  object-fit: cover;
  object-position: left;

  background: #fff;
  border: 1px solid #e5e7eb;
}

.auth-divider {
  margin: 18px 0 10px;
  font-size: 13px;
  color: #777;
  text-align: center;
}

.google-btn--full {
  width: 100%;
  height: 44px;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 14px;
  font-weight: 500;
  color: #555;

  transition: all 0.2s ease;
}

.google-btn--full img {
  width: 18px;
  height: 18px;
}

.google-btn--full:hover {
  background: #f7f7f7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ===== Forgot Password Modal ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  width: 100%;
  text-align: justify;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.modal-head {
  display: block !important; /* ⬅️ MATIKAN flex */
  position: relative;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-head h3 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.modal-x {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.modal-x:hover {
  opacity: 1;
}

.modal-sub {
  margin: 10px 0 12px;
  color: #666;
  font-size: 13px;
}

.modal-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  outline: none;
}

.modal-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.modal-msg {
  margin-top: 10px;
  min-height: 18px;
  font-size: 13px;
  color: #666;
}

/* ===== Modal Header: title center + close button red ===== */
.modal-head {
  position: relative;
  text-align: center; /* judul center */
  margin-bottom: 10px;
}

.modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  width: 100%; /* ⬅️ PAKSA FULL */
  text-align: center; /* ⬅️ PAKSA TENGAH */
}

/* tombol X merah */
.modal-x {
  position: absolute;
  top: -10px;
  right: -10px;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  border: none;
  background: #e53935;
  color: #fff;

  font-size: 20px;
  font-weight: 800;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.modal-x:hover {
  background: #c62828;
}

/* =========================
   SIDEBAR (Hamburger Menu)
   ========================= */
.hamburger {
  border: none;
  background: transparent;
  color: #0d1b2a;
  font-size: 22px;
  padding-left: 6px; /* lebih kecil */
  margin-left: 0; /* pastikan nol */
  cursor: pointer;
  border-radius: 12px;
}

.nav-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-left: 0;
}

.nav-title {
  display: grid;
  justify-items: center;
  text-align: center;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  transform: translateX(-110%);
  transition: transform 0.25s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar.open {
  transform: translateX(0);
}

.sb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
}

.sb-top {
  padding: 18px 16px 10px;
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef2ff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.sb-name {
  font-weight: 800;
}

.sb-email {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.sb-nav {
  padding: 8px 10px;
  display: grid;
  gap: 8px;
}

.sb-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: #111827;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.sb-item:hover {
  background: #f3f4f6;
}

.sb-item.active {
  background: #6366f1;
  color: #fff;
}

.sb-bottom {
  margin-top: auto;
  padding: 12px 10px 18px;
}

.sb-logout {
  width: 100%;
  background: #111827;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}

.page-section {
  display: block;
}
.page-section.hidden {
  display: none;
}

/* bikin halaman (card) ngisi tinggi layar */
.page-fill {
  min-height: calc(100vh - 140px); /* header + margin container */
  display: flex;
  flex-direction: column;
}

/* khusus realtime: 2x2 */
#realtime .stats {
  grid-template-columns: repeat(2, 1fr);
}

/* Header card realtime */
#realtime .card-head {
  position: relative; /* kunci utama */
  display: flex;
  justify-content: flex-end; /* update ke kanan */
  align-items: center;
  margin-bottom: 24px;
}

/* Judul benar-benar center */
#realtime .card-title-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25px; /* besar */
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

/* =========================
   REALTIME – STAT CARD BESAR
   ========================= */

/* grid 2x2 sudah benar, sekarang kita bikin tinggi */
#realtime .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr); /* ⬅️ penting */
  gap: 18px;
  flex: 1; /* ⬅️ isi ruang kosong */
}

/* tiap card stat dibuat fleksibel & besar */
#realtime .stat {
  display: flex;
  flex-direction: column;
  justify-content: center; /* ⬅️ vertikal tengah */
  align-items: center; /* ⬅️ horizontal tengah */
  min-height: 160px; /* ⬅️ tinggi minimum */
  padding: 24px;
}

/* label lebih besar */
#realtime .stat-label {
  font-size: 25px;
  margin-bottom: 10px;
}

/* angka diperbesar */
#realtime .stat-value {
  font-size: 30px; /* ⬅️ ini bikin “wah” */
  font-weight: 800;
}

/* =========================
   GRAFIK 4 CARD (2x2)
   ========================= */
#grafik.page-fill {
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

#grafik .charts4 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  flex: 1;
}

#grafik .chart-wrap {
  display: flex;
  flex-direction: column;
}

#grafik .chart-card {
  padding: 14px;
  flex: 1;
}

#grafik .chart-caption {
  text-align: center;
  margin-top: 10px;
  font-weight: 800;
  font-size: 16px;
}

.hidden {
  display: none !important;
}

.hist-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.hist-table-wrap {
  margin-top: 14px;
  overflow: auto;
  flex: 1;
}
.hist-table {
  width: 100%;
  border-collapse: collapse;
}
.hist-table th,
.hist-table td {
  border-bottom: 1px solid #e8e8e8;
  padding: 10px;
  text-align: left;
  font-size: 14px;
}
.hist-table th {
  background: #f6f7fb;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ===== Judul Data Historis ===== */
#historis .card-title-center {
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  margin: 0 auto 18px auto;
}

/* ===== Kontrol Data Historis ===== */
#historis .hist-controls {
  display: grid;
  grid-template-columns: 220px 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

/* input & select seragam */
#historis .hist-controls select,
#historis .hist-controls input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* tombol Load di ujung kanan */
#historis #histLoad {
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* Center teks kontrol historis (dropdown + tanggal) */
#historis .hist-controls select,
#historis .hist-controls input {
  text-align: center;
  text-align-last: center; /* penting untuk select di Chrome/Edge */
}

/* Center header + isi tabel historis */
#historis .hist-table th,
#historis .hist-table td {
  text-align: center;
  vertical-align: middle;
}

#historis .hist-table th,
#historis .hist-table td {
  white-space: nowrap;
}

/* =========================
   HEADER TRANSPARAN (ALA GAMBAR 1)
   ========================= */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topnav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.topnav .hamburger {
  color: #fff; /* hamburger jadi putih */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
}

.topnav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.topnav-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
}

.topnav-links a.is-active {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* kasih ruang karena header fixed */
body {
  padding-top: 64px;
}

/* =========================
   BERANDA VIDEO HERO
   ========================= */
.beranda-hero {
  position: relative;
  height: calc(100vh - 64px);
  overflow: hidden;

  /* FULL LEBAR layar walau di dalam .container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* kalau mau bener2 rata, hilangkan radius */
  border-radius: 0;
}

/* video full cover */
.beranda-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay gelap kiri seperti contoh */
.beranda-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.25) 65%,
    rgba(0, 0, 0, 0.1) 100%
  );
  display: flex;
  align-items: center;
}

.beranda-content {
  width: min(720px, 92vw);
  padding: 26px;

  /* mentok kiri */
  margin-left: 0;
}

.beranda-title {
  margin: 0 0 12px 0;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.08;
  font-weight: 900;
  text-transform: none;
  text-align: left;
  color: #00d5f1; /* cyan */
}

.beranda-desc {
  margin: 0 0 18px 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
}

.beranda-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.beranda-btn {
  border: none;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  background: #fff;
  color: #111;
}

.beranda-mini {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* biar pill kebaca di beranda */
.beranda-hero .pill {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =========================
   TRANSISI HALAMAN (ELEGAN)
   ========================= */
.page-section {
  transition: opacity 260ms ease, transform 260ms ease;
}

.page-section.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

.page-section.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== header: brand center & tanpa tombol home ===== */
.topnav-inner {
  position: relative;
}

.brand-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* rapihin teks brand */
.brand-text {
  font-size: 16px;
  font-weight: 800;
}

/* ===== indikator mesin glow ===== */
.machine-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mi-label {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.mi-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 800;
  min-width: 44px;
  text-align: center;
}

/* saat ON: glow hijau di pinggir */
.machine-indicator.is-on {
  border-color: rgba(34, 197, 94, 0.8);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35),
    0 0 18px rgba(34, 197, 94, 0.55), 0 0 48px rgba(34, 197, 94, 0.35);
}

/* saat OFF: no glow */
.machine-indicator.is-off {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.18);
}

/* pill ON/OFF biar ikut gaya */
.machine-indicator.is-on .mi-pill {
  border-color: rgba(34, 197, 94, 0.7);
  background: rgba(34, 197, 94, 0.18);
}

.machine-indicator.is-off .mi-pill {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

/* =========================
   REALTIME HERO (video + glass)
   ========================= */
.realtime-hero {
  position: relative;
  min-height: calc(100vh - 120px);
  border-radius: 18px;
  overflow: none;
}

.realtime-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.realtime-overlay {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.realtime-glass {
  width: min(1100px, 96vw);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}

/* grid realtime */
.stats-rt {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 800px) {
  .stats-rt {
    grid-template-columns: 1fr;
  }
}

/* Card per parameter */
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.55;
  transition: 0.2s ease;
}

.stat.is-on {
  opacity: 1;
}

/* Warna “menyala” saat ON */
.stat-v.is-on {
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.25);
}
.stat-i.is-on {
  box-shadow: 0 0 0 2px rgba(11, 45, 91, 0.45), 0 18px 40px rgba(0, 0, 0, 0.25);
}
.stat-p.is-on {
  box-shadow: 0 0 0 2px rgba(126, 200, 255, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.25);
}
.stat-h2.is-on {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.45), 0 18px 40px rgba(0, 0, 0, 0.25);
}

.stat-info {
  display: grid;
  gap: 2px;
}
.stat-value {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}
.stat-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* Gauge bundar (conic gradient) */
.gauge {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  --pct: 0;
  --color: #ffffff;

  background: conic-gradient(
    var(--color) calc(var(--pct) * 1%),
    rgba(255, 255, 255, 0.16) 0
  );
  position: relative;
  flex: 0 0 auto;
}

.gauge::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================
   REALTIME - style mirip Gambar 1 (tanpa header)
   aman karena semua di-scope ke #realtime
   ========================= */

#realtime .stats-rt {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  #realtime .stats-rt {
    grid-template-columns: 1fr;
  }
}

/* Outer card besar */
#realtime .rt-card {
  border-radius: 26px;
  padding: 18px;
}

/* warna outer per card (mirip gambar 1) */
#realtime .rt-v {
  /* ===== Tegangan: base abu + overlay biru (mirip gambar referensi) ===== */
  #realtime .rt-v {
    position: relative;
    border-radius: 26px;
    padding: 26px; /* ruang supaya base kelihatan */
    background: #d9d9d9; /* base abu-abu */
    border: 2px solid rgba(30, 64, 175, 0.55); /* garis biru luar */
  }

  /* inner box tetap, tapi kita halusin agar menyatu */
  #realtime .rt-v .rt-innerbox {
    border-radius: 20px;
    padding: 16px 18px;
    border: 1.5px solid rgba(15, 23, 42, 0.3);
    background: rgba(255, 255, 255, 0.35);
  }

  /* header "Tegangan (V)" center dan lebih “header” */
  #realtime .rt-v .rt-title {
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 12px;
    color: rgba(15, 23, 42, 0.92);
  }
  #realtime .rt-v .rt-outer {
    margin: 4px; /* bikin overlay sedikit masuk ke dalam base */
  }
} /* biru muda */
#realtime .rt-i {
  background: #93addd;
} /* biru lebih gelap */
#realtime .rt-p {
  background: #e8f2dc;
} /* hijau pucat */
#realtime .rt-h2 {
  background: #a8cf8b;
} /* hijau */

/* Inner box (border dobel + radius besar) */
#realtime .rt-innerbox {
  border-radius: 22px;
  padding: 16px 18px;
  border: 2px solid rgba(15, 23, 42, 0.35);
  background: rgba(255, 255, 255, 0.35);
}

/* Judul di atas tengah */
#realtime .rt-title {
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
  color: rgba(15, 23, 42, 0.9);
}

/* Row: gauge kiri, nilai kanan */
#realtime .rt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Box kanan */
#realtime .rt-valuebox {
  text-align: right;
  min-width: 150px;
}

#realtime .rt-label {
  font-weight: 800;
  color: rgba(15, 23, 42, 0.9);
}

#realtime .rt-value {
  margin-top: 6px;
  font-weight: 900;
  font-size: 20px;
  color: rgba(15, 23, 42, 0.95);
}

/* ===== Gauge: override tampilannya biar “ring” tebel seperti gambar 1 ===== */
#realtime .rt-gauge {
  width: 92px;
  height: 92px;
  position: relative;
  border-radius: 50%;
  /* default pct 0 */
  --pct: 0;
  /* warna hijau ring */
  --ring: #2e7d32;
  /* warna sisa ring */
  --rest: #e5e7eb;

  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--rest) 0);
}

/* lubang tengah */
#realtime .rt-gauge::after {
  content: "";
  position: absolute;
  inset: 14px; /* tebal ring */
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

/* teks % di tengah */
#realtime .rt-gauge .gauge-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.65);
}

/* =========================
   REALTIME – CARD HIJAU MUDA
   ========================= */

/* card utama realtime */
.realtime-glass {
  background: rgba(209, 250, 229, 0.92); /* hijau muda */
  border: 1px solid rgba(34, 197, 94, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* grid card kecil */
.stats-rt .stat {
  background: rgba(140, 187, 154, 0.95); /* hijau lebih terang */
  border: 1px dashed rgba(34, 197, 94, 0.35);
  border-radius: 18px;
  transition: all 0.25s ease;
}

/* label */
.stats-rt .stat-label {
  color: #065f46; /* hijau tua */
  font-weight: 700;
}

/* value angka */
.stats-rt .stat-value {
  color: #064e3b;
  font-size: 34px;
  font-weight: 900;
}

/* efek nyala realtime */
.stats-rt .stat.is-on {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35),
    0 12px 30px rgba(34, 197, 94, 0.35);
  transform: translateY(-2px);
}

/* ======================================
   WARNA BACKGROUND PER CARD REALTIME
   ====================================== */

/* TEGANGAN – KUNING */
.stat-v {
  background: #fef9c3; /* kuning lembut */
  border: 1px dashed #facc15;
}
.stat-v .stat-label,
.stat-v .stat-value {
  color: #854d0e;
}

/* ARUS – BIRU TUA */
.stat-i {
  background: #dbeafe; /* biru muda tua */
  border: 1px dashed #1e40af;
}
.stat-i .stat-label,
.stat-i .stat-value {
  color: #1e3a8a;
}

/* DAYA – BIRU MUDA */
.stat-p {
  background: #e0f2fe; /* biru muda */
  border: 1px dashed #38bdf8;
}
.stat-p .stat-label,
.stat-p .stat-value {
  color: #075985;
}

/* H2 – HIJAU TUA */
.stat-h2 {
  background: #dcfce7; /* hijau */
  border: 1px dashed #16a34a;
}
.stat-h2 .stat-label,
.stat-h2 .stat-value {
  color: #166534;
}

/* =========================
   CARD TEGANGAN – STRUKTUR BERSIH (FINAL)
   ========================= */

#realtime .rt-v {
  box-sizing: border-box;
  background: #d9d9d9; /* CARD 1: abu-abu */
  border: 2px solid #1e40af; /* garis biru */
  border-radius: 28px;
  padding: 16px; /* ruang untuk card 2 */
  overflow: hidden; /* 🔥 KUNCI: tidak boleh bocor */
}

/* CARD 2 – biru muda (DI DALAM CARD 1) */
#realtime .rt-v .rt-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #dbe7fb; /* biru muda */
  border: 2px solid #1e40af;
  border-radius: 22px;
  padding: 18px 20px;
}

/* Paksa realtime tetap 2x2 walau class "stats" kepencet kehapus */
.stats-rt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 800px) {
  .stats-rt {
    grid-template-columns: 1fr;
  }
}

/* =========================
   REALTIME: semua card ikut style "Tegangan"
   ========================= */

/* semua card realtime jadi container 2 lapis */
#realtime #cardV,
#realtime #cardI,
#realtime #cardP,
#realtime #cardH2 {
  box-sizing: border-box;
  border-radius: 28px;
  padding: 16px; /* ruang untuk card dalam */
  overflow: hidden; /* biar gak bocor */
  border: 2px solid #1e40af; /* garis luar (biru) */
}

/* card dalam (yang berisi judul, gauge, nilai) */
#realtime #cardV .rt-inner,
#realtime #cardI .rt-inner,
#realtime #cardP .rt-inner,
#realtime #cardH2 .rt-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 18px 20px;
  border: 2px solid #1e40af;
}

/* ===== WARNA OUTER (card 1) ===== */
#realtime #cardV {
  background: #d9d9d9;
} /* abu-abu base */
#realtime #cardI {
  background: #8fa9d8;
} /* biru sedang */
#realtime #cardP {
  background: #d9d9d9;
} /* abu-abu base (mirip contoh) */
#realtime #cardH2 {
  background: #a8cf8b;
} /* hijau */

/* ===== WARNA INNER (card 2) ===== */
#realtime #cardV .rt-inner {
  background: #dbe7fb;
} /* biru muda */
#realtime #cardI .rt-inner {
  background: #dbe7fb;
} /* biru muda */
#realtime #cardP .rt-inner {
  background: #eef6df;
} /* hijau pucat */
#realtime #cardH2 .rt-inner {
  background: #cfe6b9;
} /* hijau muda */

/* opsional: judul lebih tegas dan center (biar konsisten) */
#realtime .rt-title {
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 12px;
}

/* =========================
   CARD ARUS – FINAL FIX
   ========================= */

/* CARD 1 (outer) – ABU-ABU */
#realtime #cardI {
  box-sizing: border-box;
  background: #d9d9d9; /* ABU-ABU */
  border: 2px solid #1e40af; /* garis biru */
  border-radius: 28px;
  padding: 16px; /* ruang card 2 */
  overflow: hidden; /* 🔥 KUNCI anti bocor */
}

/* CARD 2 (inner) – BIRU TUA */
#realtime #cardI .rt-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #8fa9d8; /* BIRU TUA */
  border: 2px solid #1e40af;
  border-radius: 22px;
  padding: 20px 22px;
}

/* Tegangan: Gauge kiri, Nilai kanan, keduanya agak ke tengah */
#realtime #cardV .rt-row {
  display: flex;
  align-items: center;
  justify-content: center; /* bikin isi ke tengah */
  gap: 110px; /* jarak antar gauge & nilai (atur) */
}

/* pastikan gauge dan nilai tidak melebar aneh */
#realtime #cardV .rt-gauge {
  flex: 0 0 auto;
}

#realtime #cardV .rt-valuebox {
  flex: 0 0 auto;
  text-align: left; /* “Nilai:” rapi */
  min-width: 140px; /* biar kolom nilai stabil */
}

/* =========================
   Perbesar & rapikan teks Nilai (Tegangan)
   ========================= */

/* tulisan "Nilai :" */
#realtime #cardV .rt-label {
  font-size: 20px; /* BESARIN */
  font-weight: 700; /* TEBEL */
  color: #1f2937; /* abu gelap */
  margin-bottom: 6px;
  margin-left: 40px; /* <<< ATUR SENDIRI (px) */
}

/* angka nilai: 12 V */
#realtime #cardV .rt-value {
  font-size: 22px; /* lebih dominan */
  font-weight: 900; /* bold kuat */
  color: #0f172a;
  line-height: 1.2;
  margin-left: 40px; /* <<< ATUR SENDIRI (px) */
}

/* =========================
   SAMAKAN SEMUA CARD DENGAN TEGANGAN
   (Arus, Daya, H2)
   ========================= */

/* 1. Samakan layout baris (gauge + nilai ke tengah) */
#realtime #cardI .rt-row {
  margin-left: 40px; /* <<< ATUR SENDIRI (px) */
}
#realtime #cardP .rt-row,
#realtime #cardH2 .rt-row {
  display: flex;
  align-items: center;
  justify-content: center; /* ke tengah */
  gap: 110px; /* sama seperti Tegangan */
}

/* 2. Samakan ukuran & posisi gauge */
#realtime #cardI .rt-gauge,
#realtime #cardP .rt-gauge,
#realtime #cardH2 .rt-gauge {
  flex: 0 0 auto;
}

/* 3. Samakan posisi & ukuran kolom Nilai */
#realtime #cardI .rt-valuebox,
#realtime #cardP .rt-valuebox,
#realtime #cardH2 .rt-valuebox {
  flex: 0 0 auto;
  min-width: 140px;
  text-align: left;
  transform: translateX(20px); /* sama seperti Tegangan */
}

/* 4. Samakan font "Nilai :" */
#realtime #cardI .rt-label,
#realtime #cardP .rt-label,
#realtime #cardH2 .rt-label {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 6px;
}

/* 5. Samakan font angka nilai */
#realtime #cardI .rt-value,
#realtime #cardP .rt-value,
#realtime #cardH2 .rt-value {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

/* Fine-tuning posisi Nilai khusus ARUS */
#realtime #cardI .rt-valuebox {
  transform: translateX(-12px); /* lebih ke kiri */
}

/* =========================
   KONTROL - style mirip gambar 2
   ========================= */

.kontrol-shell {
  border-radius: 26px;
  padding: 22px;
}

.kontrol-titlebar {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.kontrol-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}

.kontrol-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.gen-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(15, 23, 42, 0.18);
}

.gi-label {
  font-weight: 800;
}

.gi-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e5e7eb; /* default OFF */
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-weight: 900;
}

.kontrol-last {
  color: #6b7280;
  font-size: 12px;
}

/* Card kendali tengah */
.kontrol-maincard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 18px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid rgba(15, 23, 42, 0.22);
}

.km-left {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
}

.km-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.km-center {
  flex: 1;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
}

.km-btn {
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.25);
  background: #e5e7eb; /* default OFF */
  color: #111827;
  font-weight: 900;
  cursor: pointer;
}

/* Saat ON -> tombol hijau */
.km-btn.is-on {
  background: #22c55e;
  border-color: #16a34a;
  color: #ffffff;
}

/* judul pengaturan koneksi */
.kontrol-koneksi-title {
  margin-top: 16px;
  font-weight: 900;
  font-size: 20px;
}

/* ===== Card Kendali ===== */
.control-card {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #cfd3da;
  border-radius: 18px;
  background: #fff;
}

/* kiri */
.control-left {
  display: flex;
  justify-content: center;
}

/* Logo Generator */
.gen-logo {
  width: 150px;
  height: auto;
}

/* tengah */
.control-center {
  text-align: center;
}

.control-center h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

/* kanan */
.control-right {
  display: flex;
  justify-content: center;
}

/* ===== Tombol Power ===== */
.power-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #bfc3ca;
  background: #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

/* Logo Button Kontrol */
.power-btn img {
  width: 50px;
  height: auto;
}

.power-btn span {
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
}

/* ===== State ON ===== */
.power-btn.is-on {
  background: #22c55e;
  border-color: #16a34a;
  color: #fff;
}

/* Sembunyikan teks ON/OFF di tombol power */
#btnToggleText {
  display: none;
}

/* ====== GRAFIK 2x2 (sesuai struktur kamu) ====== */
.charts4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* wadah tiap grafik + caption */
.chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* card grafik (inner putih) */
.chart-wrap .chart-card {
  border-radius: 26px;
  padding: 16px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* biar canvas rapi dan tinggi stabil */
.chart-wrap .chart-card canvas {
  width: 100% !important;
  height: 220px !important; /* bisa kamu naik/turun */
  display: block;
}

/* caption bawah (judul tiap grafik) */
.chart-caption {
  text-align: center;
  font-weight: 700;
}

/* ====== “frame” tipis di dalam card (mirip gambar 1) ====== */
.chart-wrap .chart-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* ====== WARNA GARIS + SHADOW per card (urut sesuai HTML kamu) ====== */
/* 1) Tegangan - biru muda */
.charts4 .chart-wrap:nth-child(1) .chart-card {
  border: 3px solid #7ec8ff;
  box-shadow: 0 0 18px rgba(126, 200, 255, 0.65);
}

/* 2) Arus - biru tua */
.charts4 .chart-wrap:nth-child(2) .chart-card {
  border: 3px solid #1e3a8a;
  box-shadow: 0 0 18px rgba(30, 58, 138, 0.65);
}

/* 3) Daya - hijau muda */
.charts4 .chart-wrap:nth-child(3) .chart-card {
  border: 3px solid #86efac;
  box-shadow: 0 0 18px rgba(134, 239, 172, 0.65);
}

/* 4) H2 - hijau tua */
.charts4 .chart-wrap:nth-child(4) .chart-card {
  border: 3px solid #166534;
  box-shadow: 0 0 18px rgba(22, 101, 52, 0.65);
}