:root {
      --hijau-tua: #064420;
      --kuning-emas: #e3b505;
      --putih: #ffffff;
      --abu-muda: #f5f5f5;
    }

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

    html, body {
      height: 100%;
      width: 100%;
      font-family: "Poppins", sans-serif;
      background-color: var(--abu-muda);
    }

    /* ===== Loader ===== */
    #loader {
      position: fixed;
      inset: 0;
      background: var(--putih);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 9999;
      opacity: 1;
      visibility: visible;
      transition: opacity 1s ease, visibility 1s ease;
    }

    #loader img {
      width: 130px;
      animation: spinPulse 2s infinite ease-in-out;
    }

    @keyframes spinPulse {
      0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
      50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
      100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
    }

    #loader p {
      margin-top: 15px;
      color: var(--hijau-tua);
      font-weight: 600;
      letter-spacing: 1px;
    }

    /* ===== Main Content ===== */
    #main-content {
      opacity: 0;
      visibility: hidden;
      transition: opacity 1s ease, visibility 1s ease;
      display: flex;
      min-height: 100vh;
    }

    /* ===== Sidebar ===== */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 230px;
      height: 100%;
      background: var(--hijau-tua);
      color: var(--putih);
      padding-top: 20px;
      transition: transform 0.3s ease;
      overflow-y: auto;
      z-index: 1000;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
    }

    .sidebar-header h2 {
      color: var(--kuning-emas);
      font-weight: 700;
      font-size: 22px;
    }

    /* Tombol panah dalam sidebar (mobile) */
    .toggle-btn {
      background: var(--kuning-emas);
      color: var(--hijau-tua);
      border: none;
      border-radius: 5px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 18px;
      display: none;
    }

    /* Tombol panah luar (mobile) */
    .floating-btn {
      position: fixed;
      top: 15px;
      left: 10px;
      background: var(--kuning-emas);
      color: var(--hijau-tua);
      border: none;
      border-radius: 5px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 20px;
      z-index: 1200;
      display: none;
      box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    }

    .sidebar ul {
      list-style: none;
      margin-top: 30px;
    }

    .sidebar ul li {
      position: relative;
      padding: 15px 25px;
      cursor: pointer;
      transition: 0.2s;
      white-space: nowrap;
    }

    .sidebar ul li.active {
      background: none; /* hilangkan background ganda */
      color: inherit;   /* biar teks tetap ikut warna default */
    }

    /* ===== Submenu ===== */
    .submenu {
      position: absolute;
      top: 0; /* sejajarkan tepat dengan item induk */
      left: 100%;
      background: var(--hijau-tua);
      display: none;
      flex-direction: column;
      min-width: 180px;
      border-left: 3px solid var(--kuning-emas);
      border-radius: 0 8px 8px 0;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
      z-index: 2000;
      pointer-events: auto;
    }

    .submenu li {
      color: var(--putih);
      padding: 12px 20px;
      transition: background 0.2s;
    }

    .submenu li:hover {
      background-color: var(--kuning-emas);
      color: var(--hijau-tua);
    }

    /* Hover submenu aktif di desktop */
    @media (min-width: 769px) {
      .sidebar {
        overflow: visible !important; /* biar submenu tidak terpotong */
      }
      .sidebar ul li.has-submenu:hover > .submenu {
        display: flex !important;
        animation: slideRight 0.3s ease;
      }
    }

    @keyframes slideRight {
      from { transform: translateX(-10px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    /* ===== Konten ===== */
    .content {
      flex: 1;
      margin-left: 230px;
      padding: 30px;
      transition: margin-left 0.3s ease;
      background-color: var(--abu-muda);
    }

    .content h1 {
      color: var(--hijau-tua);
      font-size: 24px;
    }

    .card {
      background: var(--putih);
      border-radius: 10px;
      padding: 20px;
      margin-top: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    /* ===== Mobile ===== */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-230px);
        overflow-y: auto !important;
      }

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

      .toggle-btn {
        display: inline-block;
      }

      .floating-btn {
        display: block;
      }

      .content {
        margin-left: 0;
        padding-top: 70px;
      }

      /* Submenu di mobile tampil di bawah, klik-based */
      .submenu {
        position: relative;
        left: 0;
        top: 0;
        border-left: none;
        margin-left: 20px;
        border-top: 2px solid var(--kuning-emas);
        box-shadow: none;
      }
    }
    
    /* === Styling Link di Sidebar === */
.sidebar ul li a {
  color: var(--putih);
  text-decoration: none;
  display: block;
  padding: 10px 15px;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}


/* Saat di-hover */
.sidebar ul li a:hover {
  background-color: #c1a100;   /* kuning emas */
  color: #004d00;              /* hijau tua */
  font-weight: bold;
}

/* Item aktif (halaman yang sedang dibuka) */
.sidebar ul li.active a {
  background-color: #ffcc00;   /* kuning emas terang */
  color: #004d00;              /* hijau tua */
  font-weight: bold;
}

.submenu li a {
  color: #fff;
  text-decoration: none;
  padding: 8px 20px;
  display: block;
}

.submenu li a:hover {
  background-color: #c1a100;
  color: #004d00;
}

/* ==== Hapus semua underline link di seluruh halaman ==== */
a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none !important;
}

/* ===== PERBAIKAN ACTIVE MENU AGAR TIDAK DOUBLE ===== */

/* ===== FIX: Hanya submenu aktif yang kuning ===== */

/* Style menu utama aktif (misal: Beranda) */
.sidebar ul > li.active > a {
  background-color: var(--kuning-emas);
  color: var(--hijau-tua);
  font-weight: bold;
}

/* Style submenu aktif (misal: Foto) */
.sidebar ul li.has-submenu ul.submenu li.active > a {
  background-color: var(--kuning-emas);
  color: var(--hijau-tua);
  font-weight: bold;
}

/* Pastikan parent submenu (Posting) TIDAK ikut kuning */
.sidebar ul li.has-submenu.active > span,
.sidebar ul li.has-submenu > span {
  background: none !important;
  color: var(--putih) !important;
  font-weight: normal !important;
}

/* Hover efek tetap berjalan */
.sidebar ul li.has-submenu > span:hover {
  background-color: #0c3f24;
  color: var(--kuning-emas);
}

/* Hover submenu */
.sidebar ul li.has-submenu ul.submenu li a:hover {
  background-color: #c1a100;
  color: #004d00;
}