:root {
  --biru: #0404d2;
  --merah: #e1232b;
  --kuning: #f1e808;
  --hijau: #04ea23;
  --putih: #ffffff;
  --abu: #d8d4bd;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
}

/* ===================== */
/* GLOBAL SETUP          */
/* ===================== */

body {
  background: linear-gradient(135deg, #0404d2 0%, #e1232b 100%);
  color: var(--putih);
  font-family: 'Hind', sans-serif;
  padding: 20px;
}

/* Typography */
h1:not(.carousel-title),
h2:not(.carousel-title),
h3,
h4 {
  color: var(--biru);
}

p {
  color: var(--abu);
}

/* ===================== */
/* LIQUID GLASS EFFECT   */
/* ===================== */

.glass-effect {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.container,
.content-sm,
#register,
#products,
.footer,
.navbar,
.carousel,
.form-control,
.btn-theme {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* ===================== */
/* NAVBAR                */
/* ===================== */

.navbar {
  background-color: rgba(4, 4, 210, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.nav-item-child {
  color: var(--abu) !important;
}
.nav-item-child:hover {
  color: var(--kuning) !important;
}

/* ===================== */
/* CAROUSEL              */
/* ===================== */

.carousel-inner .item {
  position: relative;
}

.carousel .carousel-title,
.carousel h1,
.carousel h2 {
  color: #fff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.carousel .carousel-title {
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.3);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff !important;
}

/* Posisi teks agar muncul di tengah carousel */
.carousel-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 10;
  color: white;
}

/* Gambar slider tidak menutup teks */
.carousel-inner .item img {
  z-index: 1;
  position: relative;
}

/* Tombol slider */
.carousel-control {
  background: none;
  filter: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.carousel-control.left,
.carousel-control.right {
  width: 5%;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* ===================== */
/* FORM                  */
/* ===================== */

input.form-control,
select.form-control,
textarea.form-control {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--biru);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

/* ===================== */
/* BUTTON                */
/* ===================== */

.btn-theme {
  background-color: var(--biru);
  color: var(--putih);
  border: none;
}

.btn-theme:hover {
  background-color: var(--merah);
  color: var(--putih);
}

.btn-white-brd {
  border: 2px solid var(--putih);
  color: var(--putih);
}

.btn-white-brd:hover {
  background-color: var(--kuning);
  color: var(--hitam);
}

/* ===================== */
/* SECTION REGISTER      */
/* ===================== */

#register h2,
#register p,
#register label {
  color: var(--biru);
}

/* ===================== */
/* FOOTER                */
/* ===================== */

.footer {
  background-color: rgba(4, 4, 210, 0.2);
  color: var(--putih);
}

.footer a {
  color: var(--kuning);
}

.footer a:hover {
  color: var(--merah);
}

/* ===================== */
/* SECTION PRODUCTS      */
/* ===================== */

#products {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 60px 15px;
  position: relative;
  z-index: 1;
}

/* ===================== */
/* RESPONSIVE            */
/* ===================== */

@media (max-width: 767px) {
  .navbar {
    background-color: var(--biru) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .navbar-brand {
    font-size: 1rem;
  }

  .btn-sm {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

.carousel-inner .item {
  position: relative;
}

.carousel-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 10;
  text-align: center;
  color: white;
}

.carousel-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.carousel-inner .item img {
  width: 100%;
  height: auto;
  z-index: 1;
}

/* Agenda Section - Judul putih */
#agenda h2 {
  color: var(--putih);
}

/* Merchandise Section - Judul section */
#products h2 {
  color: var(--putih);
}

/* Merchandise items - Nama produk */
#products h4 a {
  color: var(--putih);
}

/* Optional: Ubah deskripsi produk agar lebih kontras */
#products p {
  color: var(--abu);
}

/* ===================== */
/* ADMIN TABLE STYLING   */
/* ===================== */

/* Teks tabel tetap hitam agar mudah dibaca */
.table td, .table th {
  color: #000;
}

/* Baris tabel: selang-seling putih dan abu muda */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #ffffff;
}
.table-striped tbody tr:nth-of-type(even) {
  background-color: #f1f1f1;
}

/* Header tabel tetap biru tua dan teks putih */
.table thead {
  background-color: var(--biru);
  color: var(--putih);
}

/* ===================== */
/* ADMIN PAGE COLOR FIX  */
/* ===================== */

.navbar-brand,
.navbar .btn-outline-danger,
h2.text-center {
  color: var(--putih) !important;
}

/* Jika tombol Logout masih merah dengan border, ubah warnanya */
.navbar .btn-outline-danger {
  border-color: var(--putih);
  color: var(--putih);
}

.navbar .btn-outline-danger:hover {
  background-color: var(--merah);
  color: var(--putih);
  border-color: var(--merah);
}

/* Halaman admin */
.badge {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: white;
}
.badge-success { background-color: #28a745; }
.badge-warning { background-color: #ffc107; }
.badge-danger  { background-color: #dc3545; }
.badge-secondary { background-color: #6c757d; }

.container h2,
.container a.btn,
.container label,
.container .form-control,
.container .dataTables_length label,
.container .dataTables_info,
.container .dataTables_paginate {
  color: var(--putih) !important;
}

.dataTables_length label {
  color: var(--putih);
}

.form-group label {
  color: var(--biru);
}

#register input.form-control,
#register select.form-control,
#register label,
#register textarea.form-control {
  color: var(--biru) !important;
}

#register ::placeholder {
  color: var(--biru) !important;
  opacity: 1;
}

/* ===================== */
/* CONTACT SECTION       */
/* ===================== */

#contact h3,
#contact a {
  color: var(--kuning); /* Judul dan nama contact kuning */
}

#contact li,
#contact i {
  color: var(--putih); /* Nomor telepon dan ikon putih */
}

#contact a:hover {
  color: var(--merah); /* Warna saat hover agar tetap punya efek */
}