:root{
  --rca-red-1:#8B0E23;
  --rca-red-2:#C2152F;
  --rca-dark:#0B0F19;
  --rca-text:#111827;
  --rca-muted:#6b7280;
  --rca-bg:#0B0F19;
  --rca-surface:#0f172a;
  --rca-border:rgba(255,255,255,.12);
  --rca-card:#0d1324;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:#0B0F19 !important;
  color:#eef2ff;
}
a{text-decoration:none}
.container{max-width:1120px;}

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

.navbar{
  background:linear-gradient(135deg,#6b0f1a,#9f1d2c) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  min-height:72px;
}

.navbar .nav-link{
  color:#fff !important;
  font-weight:600;
  font-size:12px !important;
}

.navbar .nav-link:hover{
  color:#ffdede !important;
}

.navbar .btn{
  font-size:12px !important;
  padding:6px 14px !important;
}

.brand-logo img{
  width:44px !important;
  height:44px !important;
  border-radius:50%;
  background:#fff;
  padding:6px;
  object-fit:contain;
}

.brand-title{
  color:#fff !important;
  font-weight:900;
  font-size:1.05rem;
}

.brand-tagline{
  color:rgba(255,255,255,.9) !important;
  font-size:.72rem;
}

/* ================= CARD ================= */

.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  color:#eef2ff;
}

.small-muted{
  color:rgba(255,255,255,.70);
  font-size:.9rem;
}

/* ================= TABLE ================= */

.table{color:#eef2ff;}
.table thead th{
  color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.12);
}
.table td, .table th{
  border-color:rgba(255,255,255,.10);
  vertical-align:middle;
}

/* ================= ADMIN BUTTON FIX ================= */

.admin-actions .btn{
  border-radius:10px;
  font-weight:600;
  padding:6px 12px;
}

.admin-actions .btn-view{
  background:#1f2937;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}

.admin-actions .btn-edit{
  background:#2563eb;
  color:#fff;
  border:none;
}

.admin-actions .btn-toggle{
  background:#f59e0b;
  color:#fff;
  border:none;
}

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

footer{
  background:#111827;
  border-top:1px solid rgba(255,255,255,.08);
}

footer .container{
  padding-top:25px;
  padding-bottom:15px;
}

.footer-bottom{
  background:#0b0f19;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
  color:rgba(255,255,255,.6);
  padding:10px 0;
}

/* ================= FLOATING WA ================= */

.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  text-decoration:none;
}

.wa-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.wa-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:#fff;
  padding:6px;
  object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .2s ease;
}

.wa-float:hover .wa-icon{
  transform:scale(1.06);
}

.wa-label{
  background:#25D366;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

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

@media(max-width:768px){
  .brand-tagline{display:none;}
}
.navbar-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-brand > div:last-child{
  display: flex;
  flex-direction: column;   /* bikin title & tagline vertikal */
}

.brand-text{
  display:flex;
  flex-direction:column;   /* ini yang bikin turun ke bawah */
}

.brand-title{
  font-weight:800;
  color:#fff;
  line-height:1.1;
}

.brand-tagline{
  font-size:12px;
  color:rgba(255,255,255,.85);
  margin-top:2px;
  display:block;
}

/* ================= HERO ================= */

.hero-wrap{
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.14), transparent 50%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, #6b0f1a 0%, #9f1d2c 45%, #e83b4a 100%);
  position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.hero-inner{
  padding:72px 30px;
  text-align:center;
}

.hero-title{
  font-size:clamp(2.2rem, 4.6vw, 4rem);
  font-weight:900;
  letter-spacing:-.6px;
  color:#fff;
  margin:0;
}

.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:rgba(255,255,255,.9);
  margin-top:12px;
  max-width: 850px;
}

.hero-actions{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn-hero{
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
}

.btn-hero-primary{
  background:#fff;
  color:#0b0f19;
  border:1px solid rgba(255,255,255,.22);
}

.btn-hero-primary:hover{
  background:rgba(255,255,255,.92);
}

.btn-hero-ghost{
  color:#fff;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.22);
}

.btn-hero-ghost:hover{
  background:rgba(0,0,0,.28);
}
/* ===== Fix warna header tabel download ===== */
.table thead th{
  background: #111827 !important;   /* dark navy */
  color: #ffffff !important;        /* putih */
  font-weight: 700;
  border-color: rgba(255,255,255,.1);
}

/* Hover baris */
.table tbody tr:hover{
  background: rgba(255,255,255,.05);
}

/* ===== Fix text penjelasan download ===== */
.download-desc{
  color: #ffffff !important;
  opacity: 0.85;
}
.download-info{
  color:#ffffff !important;
  font-weight:500;
}

/* ===== Fix tombol Login & Daftar ===== */

.navbar .btn-outline-dark{
  color:#ffffff !important;
  border:2px solid #ffffff !important;   /* lebih tebal */
  font-weight:600;
}

.navbar .btn-outline-dark:hover{
  background:#ffffff !important;
  color:#8B0E23 !important;  /* maroon saat hover */
}

.navbar .btn-dark{
  color:#ffffff !important;
  border:2px solid #ffffff !important;
  font-weight:600;
}

.navbar .btn-dark:hover{
  background:#ffffff !important;
  color:#8B0E23 !important;
}
.welcome-box{
  background: linear-gradient(135deg,#8B0E23,#C2152F);
  color:#fff;
  border-radius:16px;
  padding:20px;
  text-align:center;
  font-weight:700;
  box-shadow:0 15px 35px rgba(0,0,0,.3);
}
/* ===== Maroon wrapper khusus slideshow (bukan seluruh halaman) ===== */
.slideshow-section{
  background: transparent;   /* HAPUS merah */
  padding: 40px 0 20px;
  margin-top: 20px;
}

/* Carousel box tampil elegan di tengah */
.slideshow-section .carousel{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}

/* Gambar: zoom-out sedikit (tidak terlalu close up) */
.rca-slide-img{
  height: 360px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(0.92);     /* zoom out */
  transition: transform .5s ease;
}

/* Optional: saat hover sedikit zoom-in biar hidup */
#rcaCarousel:hover .rca-slide-img{
  transform: scale(0.95);
}

/* Caption lebih rapi */
.rca-slide-caption{
  background: rgba(0,0,0,.45);
  padding: 10px 14px;
  border-radius: 14px;
  display: inline-block;
}

/* ================= DASHBOARD SLIDESHOW FIX ================= */
/* Area sekitar slideshow HARUS hitam */
.slideshow-section{
  background: #0B0F19 !important;  /* hitam */
  padding: 26px 0 14px !important;
  margin-top: 14px !important;
}

/* Container jangan ikut kasih background */
.slideshow-section .container{
  background: transparent !important;
}

/* Bungkus maroon hanya pada "box" carousel */
.slideshow-section .carousel{
  background: linear-gradient(135deg,#6b0f1a,#9f1d2c) !important; /* maroon */
  padding: 18px !important;                /* ini bikin ada bingkai maroon */
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.45) !important;
}

/* Dalam carousel jangan kebawa background maroon */
.slideshow-section .carousel-inner{
  background: transparent !important;
  border-radius: 18px !important;
}

/* Foto: zoom-out sedikit */
.slideshow-section .rca-slide-img{
  height: 360px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(0.92);
  transition: transform .5s ease;
}

/* Caption rapi */
.slideshow-section .rca-slide-caption{
  background: rgba(0,0,0,.45);
  padding: 10px 14px;
  border-radius: 14px;
  display: inline-block;
}
/* ===== PAKSA HALAMAN (AREA KONTEN) TETAP HITAM ===== */
body,
main,
main.container,
main.container.py-4,
main > .container,
.container {
  background: transparent !important; /* jangan ikut maroon */
}

body {
  background: #0B0F19 !important;     /* hitam */
}

/* kalau ada section/page wrapper yang kebetulan maroon */
section, .section, .page, .content, .content-wrap {
  background: transparent !important;
}

/* ===== KHUSUS DASHBOARD: area konten hitam ===== */
body.dashboard-page main,
body.dashboard-page main.container {
  background: transparent !important;
}