/* Tema modern Kas Masjid Agung Ushuluddin (override Argon Dashboard) */
:root {
  --mau-950: #03231a;
  --mau-900: #063a2a;
  --mau-800: #0a4a35;
  --mau-700: #0e5f44;
  --mau-600: #127a56;
  --mau-500: #16a06e;
  --mau-400: #35c18c;
  --mau-100: #dcf3e8;
  --mau-50: #eff9f4;
  --gold-500: #c9973a;
  --gold-400: #e2b860;
  --gold-300: #f0d48c;
  --rose-500: #e5484d;
  --rose-100: #fde7e8;
  --ink: #0d1f19;
  --ink-2: #33463f;
  --muted: #6b7c75;
  --line: rgba(13, 31, 25, .08);
  --bg: #f2f6f4;
  --card: #ffffff;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(13, 31, 25, .04), 0 14px 34px -14px rgba(6, 58, 42, .18);
  --shadow-lg: 0 2px 4px rgba(13, 31, 25, .05), 0 26px 50px -18px rgba(6, 58, 42, .30);
  --font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body, .card, .btn, .form-control, .form-select, .table, h1, h2, h3, h4, h5, h6, p, span, a, label, input, select, textarea, button {
  font-family: var(--font) !important;
}

body.g-sidenav-show {
  background: var(--bg) !important;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.01em; }

/* ---------- pita atas ---------- */
body > .min-height-300.bg-success {
  background:
    radial-gradient(600px 260px at 88% 0%, rgba(226, 184, 96, .35), transparent 70%),
    radial-gradient(520px 300px at 10% 110%, rgba(53, 193, 140, .35), transparent 70%),
    linear-gradient(120deg, var(--mau-950) 0%, var(--mau-800) 55%, var(--mau-700) 100%) !important;
  min-height: 320px !important;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
body > .min-height-300.bg-success::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f0d48c' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 100%);
}

/* ---------- sidebar ---------- */
#sidenav-main.sidenav {
  background:
    radial-gradient(280px 220px at 0% 0%, rgba(226, 184, 96, .16), transparent 70%),
    linear-gradient(180deg, var(--mau-900) 0%, var(--mau-950) 100%) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px -24px rgba(3, 35, 26, .55) !important;
  border: 1px solid rgba(240, 212, 140, .10) !important;
}
#sidenav-main::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  pointer-events: none;
  border-radius: 0 0 24px 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='%23f0d48c' fill-opacity='.07'%3E%3Cpath d='M120 18c-22 18-40 30-40 54v38h80V72c0-24-18-36-40-54z'/%3E%3Crect x='44' y='40' width='12' height='70' rx='6'/%3E%3Crect x='184' y='40' width='12' height='70' rx='6'/%3E%3Cpath d='M50 26l6 14H44zM190 26l6 14h-12z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 92% auto no-repeat;
}
#sidenav-main .sidenav-header, #sidenav-main .navbar-collapse { position: relative; z-index: 1; }
#sidenav-main::after { z-index: 0; opacity: .8; }
#sidenav-main .sidenav-header { height: auto !important; }
#sidenav-main .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px !important;
  white-space: normal !important;
}
#sidenav-main .navbar-brand-img {
  width: 40px;
  height: 40px !important;
  max-height: 40px !important;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 212, 140, .25), rgba(240, 212, 140, .05));
  border: 1px solid rgba(240, 212, 140, .25);
  object-fit: contain;
}
#sidenav-main .navbar-brand > span {
  color: rgba(255, 255, 255, .65) !important;
  font-size: .64rem !important;
  letter-spacing: .14em;
  line-height: 1.35;
  margin: 0 !important;
  text-transform: uppercase;
}
#sidenav-main .navbar-brand > span strong {
  display: block;
  color: #fff;
  font-size: .9rem;
  letter-spacing: .02em;
  font-weight: 800;
}
#sidenav-main hr.horizontal.dark {
  background-image: linear-gradient(90deg, transparent, rgba(240, 212, 140, .22), transparent) !important;
  opacity: 1;
}
#sidenav-main h6 {
  color: var(--gold-300) !important;
  opacity: .7 !important;
  font-size: .62rem !important;
  letter-spacing: .16em !important;
}
#sidenav-main .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .74) !important;
  border-radius: 14px !important;
  margin: 2px 12px !important;
  padding: 10px 12px !important;
  font-weight: 500;
  transition: background .25s, color .25s, transform .25s;
  background: transparent !important;
  box-shadow: none !important;
}
#sidenav-main .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  transform: translateX(3px);
}
#sidenav-main .navbar-nav .nav-link.active {
  color: #fff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(226, 184, 96, .26), rgba(226, 184, 96, .07)) !important;
  box-shadow: inset 0 0 0 1px rgba(240, 212, 140, .32), 0 10px 24px -12px rgba(226, 184, 96, .55) !important;
}
#sidenav-main .navbar-nav .nav-link .icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  flex: 0 0 32px;
}
#sidenav-main .navbar-nav .nav-link.active .icon {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500)) !important;
}
#sidenav-main .navbar-nav .nav-link .icon i,
#sidenav-main .navbar-nav .nav-link .icon svg { color: var(--gold-300) !important; opacity: 1 !important; }
#sidenav-main .navbar-nav .nav-link.active .icon i,
#sidenav-main .navbar-nav .nav-link.active .icon svg { color: var(--mau-950) !important; }
#sidenav-main .ps__thumb-y { background: rgba(240, 212, 140, .35) !important; }
#sidenav-main .ps__rail-y:hover, #sidenav-main .ps__rail-y.ps--clicking { background: transparent !important; }
.mau-side-foot {
  position: relative;
  z-index: 1;
  margin: 18px 14px 20px;
  padding: 14px;
  border-radius: 16px;
  color: rgba(255, 255, 255, .75);
  font-size: .72rem;
  line-height: 1.5;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(240, 212, 140, .14);
}
.mau-side-foot b { color: var(--gold-300); display: block; font-size: .78rem; margin-bottom: 2px; }

/* ---------- topbar ---------- */
#navbarBlur.navbar-main {
  border-radius: 18px !important;
  transition: background .3s, box-shadow .3s;
}
#navbarBlur.navbar-main.blur {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 10px 30px -14px rgba(6, 58, 42, .35) !important;
}
#navbarBlur .breadcrumb-item a, #navbarBlur .breadcrumb-item { color: rgba(255, 255, 255, .7) !important; font-size: .78rem; }
#navbarBlur h6 { color: #fff !important; font-weight: 800 !important; font-size: 1.05rem !important; letter-spacing: -.01em; }
#navbarBlur.blur .breadcrumb-item a, #navbarBlur.blur .breadcrumb-item, #navbarBlur.blur .breadcrumb-item::before { color: var(--muted) !important; }
#navbarBlur.blur h6 { color: var(--ink) !important; }
#navbarBlur.blur .sidenav-toggler-line { background: var(--ink) !important; }
.mau-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.mau-chip .dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--mau-950);
  font-size: .7rem; font-weight: 800;
}
.mau-chip .clock { font-variant-numeric: tabular-nums; color: var(--gold-300); }
#navbarBlur.blur .mau-chip { color: var(--ink); background: var(--mau-50); border-color: var(--line); }
#navbarBlur.blur .mau-chip .clock { color: var(--mau-600); }

/* ---------- kartu ---------- */
.main-content .card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  background: var(--card);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.main-content .card:hover { box-shadow: var(--shadow-lg) !important; }
.main-content .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 1.25rem 1.5rem !important;
}
.main-content .card .card-header h5, .main-content .card .card-header h6 { font-weight: 800; }
.mau-in { animation: mauUp .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes mauUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* kartu statistik */
.mau-stat { overflow: hidden; position: relative; }
.mau-stat:hover { transform: translateY(-4px); }
.mau-stat::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--glow, rgba(22, 160, 110, .10));
  pointer-events: none;
}
.mau-stat p.text-uppercase, .mau-stat .text-uppercase { color: var(--muted) !important; font-size: .68rem !important; letter-spacing: .1em; font-weight: 700 !important; }
.mau-stat h4, .mau-stat h5 {
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 1.3vw, 1.4rem) !important;
  white-space: nowrap;
  margin-top: 4px;
}
[class*="col"] > .mau-stat { height: 100%; }
.mau-stat .row > .col-8 { position: relative; z-index: 1; }
.icon-shape { border-radius: 14px !important; }
.bg-gradient-primary { background-image: linear-gradient(135deg, var(--mau-400), var(--mau-700)) !important; }
.bg-gradient-success { background-image: linear-gradient(135deg, #34d3b4, #0f8a74) !important; }
.bg-gradient-warning { background-image: linear-gradient(135deg, var(--gold-300), var(--gold-500)) !important; }
.bg-gradient-danger { background-image: linear-gradient(135deg, #ff8a8e, #d93a40) !important; }
.bg-gradient-info { background-image: linear-gradient(135deg, #3fc6c6, #12808f) !important; }
.text-primary { color: var(--mau-600) !important; }
.text-success { color: var(--mau-500) !important; }

/* hero dashboard */
.mosque-hero {
  position: relative;
  border-radius: 26px !important;
  overflow: hidden;
  min-height: 250px;
  background:
    linear-gradient(100deg, rgba(3, 35, 26, .95) 0%, rgba(6, 58, 42, .82) 42%, rgba(6, 58, 42, .25) 75%, rgba(6, 58, 42, .05) 100%),
    url("../../../assets/img/mau-malam.webp") 70% 40% / cover no-repeat !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(240, 212, 140, .18);
}
.mosque-hero::before { display: none !important; }
.mosque-hero .mosque-hero-visual { display: none !important; }
.mosque-hero .mosque-hero-content { position: relative; z-index: 1; min-height: 250px; display: flex; align-items: center; }
.mosque-hero .mosque-hero-text { max-width: 640px; }
.mosque-hero-tag {
  background: rgba(240, 212, 140, .14) !important;
  color: var(--gold-300) !important;
  border: 1px solid rgba(240, 212, 140, .3) !important;
  border-radius: 999px !important;
  letter-spacing: .14em;
}
.mau-hero-title {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 14px 0 6px;
  line-height: 1.15;
}
.mau-hero-title em { font-style: normal; color: var(--gold-300); }
.mau-hero-sub { color: rgba(255, 255, 255, .72); font-size: .9rem; margin: 0 0 18px; }
.mau-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.mau-hero-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: .78rem; font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.mau-hero-meta b { color: var(--gold-300); font-variant-numeric: tabular-nums; }

/* ---------- tombol ---------- */
.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  box-shadow: none !important;
  transition: transform .2s, box-shadow .2s, filter .2s !important;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-primary, .btn.bg-gradient-primary {
  background: linear-gradient(135deg, var(--mau-500), var(--mau-700)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(18, 122, 86, .7) !important;
}
.btn-info, .btn.bg-gradient-info {
  background: linear-gradient(135deg, #2ab3a0, #0f7a6e) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-success, .btn.bg-gradient-success { background: linear-gradient(135deg, var(--mau-400), var(--mau-600)) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger, .btn.bg-gradient-danger { background: linear-gradient(135deg, #f26b70, #cf343a) !important; border-color: transparent !important; color: #fff !important; }
.btn-warning, .btn.bg-gradient-warning { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)) !important; border-color: transparent !important; color: var(--mau-950) !important; }
.btn-secondary, .btn.bg-gradient-secondary { background: #e8efec !important; border-color: transparent !important; color: var(--ink) !important; }
.btn-outline-primary { color: var(--mau-600) !important; border-color: rgba(18, 122, 86, .35) !important; background: var(--mau-50) !important; }
.btn-outline-primary:hover { background: var(--mau-100) !important; }
.btn-outline-danger { color: var(--rose-500) !important; border-color: rgba(229, 72, 77, .35) !important; background: #fff6f6 !important; }
.btn-outline-success { color: var(--mau-600) !important; border-color: rgba(22, 160, 110, .35) !important; background: var(--mau-50) !important; }

/* ---------- form ---------- */
.main-content label, .main-content .form-control-label, .main-content .form-label {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: .76rem !important;
  margin-bottom: 6px;
}
.form-control, .form-select, .dataTables_wrapper select, .dataTables_wrapper input[type=search] {
  border-radius: 12px !important;
  border: 1px solid #dbe5e0 !important;
  background-color: #fbfdfc !important;
  padding: .62rem .9rem !important;
  font-size: .86rem !important;
  color: var(--ink) !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.form-control:focus, .form-select:focus, .dataTables_wrapper input[type=search]:focus {
  border-color: var(--mau-500) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(22, 160, 110, .14) !important;
}
.form-control[readonly], .form-control:disabled { background-color: #eef3f1 !important; }
.input-group-text { border-radius: 12px 0 0 12px !important; border-color: #dbe5e0 !important; background: #fbfdfc !important; color: var(--mau-600) !important; }

/* ---------- tabel ---------- */
.main-content .table {
  color: var(--ink-2);
  --bs-table-striped-bg: rgba(22, 160, 110, .035);
  --bs-table-accent-bg: transparent;
  --bs-table-hover-bg: var(--mau-50);
}
.main-content .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(22, 160, 110, .035); color: var(--ink-2); }
.main-content .table thead th {
  background: #f3f8f5 !important;
  color: var(--muted) !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--line) !important;
  padding: .85rem .9rem !important;
  white-space: nowrap;
}
.main-content .table thead th:first-child { border-radius: 12px 0 0 12px; }
.main-content .table thead th:last-child { border-radius: 0 12px 12px 0; }
.main-content .table td {
  border-color: var(--line) !important;
  vertical-align: middle;
  font-size: .82rem;
  padding: .8rem .9rem !important;
}
.main-content .table tbody tr { transition: background .2s; }
.main-content .table tbody tr:hover { background: var(--mau-50) !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--muted) !important; font-size: .8rem; }
.dataTables_wrapper .dataTables_filter input { border-radius: 999px !important; padding-left: 1rem !important; }
.page-item .page-link, .dataTables_wrapper .paginate_button .page-link {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  margin: 0 2px;
}
.page-item.active .page-link {
  background: linear-gradient(135deg, var(--mau-500), var(--mau-700)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .02em; }

/* ---------- alert ---------- */
.alert { border-radius: 16px !important; border: 0 !important; font-weight: 600; }
.alert-success { background: linear-gradient(135deg, var(--mau-500), var(--mau-700)) !important; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(18, 122, 86, .8); }
.alert-danger { background: linear-gradient(135deg, #f26b70, #cf343a) !important; color: #fff !important; }
.alert-warning { background: linear-gradient(135deg, var(--gold-300), var(--gold-400)) !important; color: var(--mau-950) !important; }

/* ---------- lain-lain ---------- */
.fixed-plugin { display: none !important; }
footer.footer .copyright, footer.footer a { color: var(--muted) !important; font-size: .76rem; }
.main-content a:not(.btn):not(.nav-link):not(.page-link) { color: var(--mau-600); }
::selection { background: rgba(226, 184, 96, .35); }
* { scrollbar-width: thin; scrollbar-color: rgba(18, 122, 86, .35) transparent; }

/* tombol logout sidebar */
#sidenav-main .sidenav-footer { position: relative; z-index: 1; }
#sidenav-main .sidenav-footer .btn {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(240, 212, 140, .35) !important;
  color: var(--gold-300) !important;
}
#sidenav-main .sidenav-footer .btn:hover { background: rgba(240, 212, 140, .14) !important; color: #fff !important; }

/* bar navigasi bawah (mobile) — gaya korporat: monokrom, rata bawah, indikator aktif */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .mobile-bottom-bar { padding: 0 !important; }
  .mobile-bottom-bar-inner {
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #e4ebe8 !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 20px -14px rgba(13, 31, 25, .35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    gap: 0 !important;
    padding: 0 4px env(safe-area-inset-bottom) !important;
  }
  .mobile-bottom-item {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
    color: #6b7c75 !important;
    font-size: .66rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    gap: 3px !important;
    padding: 10px 2px 8px !important;
    min-height: 60px;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-item .mobile-bottom-icon,
  .mobile-bottom-item:nth-child(n) .mobile-bottom-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 1.08rem !important;
  }
  .mobile-bottom-icon svg, .mobile-bottom-icon i { color: inherit !important; width: 1.08rem; height: 1.08rem; }
  .mobile-bottom-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mau-600);
    transform: translateX(-50%);
    transition: width .25s ease;
  }
  .mobile-bottom-item.active { color: var(--mau-700) !important; font-weight: 800 !important; }
  .mobile-bottom-item.active::before { width: 34px; }
  .mobile-bottom-item:active { background: var(--mau-50) !important; }
}
.login-brand { margin-bottom: 16px; }

/* ---------- halaman login ---------- */
body:has(.login-shell) { background: var(--mau-950) !important; }
.login-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(700px 420px at 92% 4%, rgba(226, 184, 96, .28), transparent 70%),
    radial-gradient(640px 420px at 0% 100%, rgba(53, 193, 140, .25), transparent 70%),
    linear-gradient(135deg, var(--mau-950) 0%, var(--mau-900) 60%, #0b2f24 100%) !important;
  overflow: hidden;
}
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f0d48c' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
}
.login-shell .login-section { position: relative; z-index: 1; background: transparent !important; }
.login-shell .login-section::before, .login-shell .login-section::after { display: none !important; }
.login-card {
  background: rgba(255, 255, 255, .97) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(240, 212, 140, .25) !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6) !important;
  padding: clamp(28px, 4vw, 44px) !important;
}
.login-pill {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400)) !important;
  color: var(--mau-950) !important;
  box-shadow: 0 10px 22px -12px rgba(226, 184, 96, .9) !important;
  font-weight: 800 !important;
}
.login-title { color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.login-subtitle { color: var(--muted) !important; }
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--mau-50);
  border: 1px solid var(--mau-100);
}
.login-brand img { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; }
.login-brand b { display: block; color: var(--ink); font-size: .92rem; }
.login-brand small { color: var(--muted); font-size: .74rem; }
.login-input .input-group-text { background: var(--mau-50) !important; color: var(--mau-600) !important; border-right: 0 !important; }
.login-input .form-control { border-left: 0 !important; }
.login-shell .form-check-input:checked { background-color: var(--mau-500) !important; border-color: var(--mau-500) !important; }
.login-link { color: var(--mau-600) !important; font-weight: 700; font-size: .85rem; }
.login-action {
  background: linear-gradient(135deg, var(--mau-500), var(--mau-700)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  font-size: 1rem !important;
  box-shadow: 0 16px 30px -14px rgba(18, 122, 86, .85) !important;
}
.login-action:hover { filter: brightness(1.06); }
.login-aside {
  position: relative;
  border-radius: 30px !important;
  overflow: hidden;
  min-height: 560px;
  background:
    linear-gradient(180deg, rgba(3, 35, 26, .25) 0%, rgba(3, 35, 26, .55) 45%, rgba(3, 35, 26, .95) 100%),
    url("../../../assets/img/mau-malam.webp") center / cover no-repeat !important;
  border: 1px solid rgba(240, 212, 140, .25) !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7) !important;
}
.login-aside::before, .login-aside::after { display: none !important; }
.login-aside .login-3d-wrap, .login-shell .login-3d-mini { display: none !important; }
.login-aside-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end !important;
  gap: 22px;
  padding: 40px !important;
}
.login-aside h2 { color: #fff !important; font-weight: 800 !important; font-size: clamp(1.6rem, 2.4vw, 2.3rem) !important; line-height: 1.15; letter-spacing: -.02em; }
.login-aside h2 em { font-style: normal; color: var(--gold-300); }
.login-aside p { color: rgba(255, 255, 255, .78) !important; }
.login-chip {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(240, 212, 140, .3) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}

/* ---------- responsif ---------- */
@media (max-width: 1199.98px) {
  #sidenav-main.sidenav { border-radius: 0 24px 24px 0 !important; }
  .g-sidenav-pinned .main-content::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(3, 35, 26, .45);
    backdrop-filter: blur(2px);
    z-index: 1000;
  }
}
@media (max-width: 767.98px) {
  body > .min-height-300.bg-success { min-height: 260px !important; border-radius: 0 0 28px 28px; }
  .mosque-hero, .mosque-hero .mosque-hero-content { min-height: 230px; }
  .mosque-hero { background-position: 75% center !important; }
  .mau-hero-meta span { font-size: .72rem; padding: 7px 11px; }
  .main-content .card .card-header { padding: 1rem 1.1rem !important; }
  .mau-chip .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mau-in { animation: none !important; }
  .main-content .card, .btn, #sidenav-main .nav-link { transition: none !important; }
}

/* ---------- sidebar tetap (desktop): menempel di kiri, setinggi layar, tanpa scroll ---------- */
@media (min-width: 1200px) {
  #sidenav-main.sidenav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 250px !important;
    max-width: 250px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(240, 212, 140, .14) !important;
    box-shadow: 8px 0 30px -18px rgba(3, 35, 26, .6) !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    transform: none !important;
  }
  #sidenav-main::after { border-radius: 0; height: 140px; }
  #sidenav-main .sidenav-header { flex: 0 0 auto; }
  #sidenav-main .navbar-brand { padding: clamp(10px, 1.8vh, 18px) 18px clamp(8px, 1.4vh, 14px) !important; }
  #sidenav-main .sidenav-header + hr { margin: 0 0 2px !important; }
  #sidenav-main .navbar-collapse {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
  }
  #sidenav-main .navbar-collapse > .navbar-nav { padding-bottom: 0; margin-bottom: 0; }
  #sidenav-main .ps__rail-y, #sidenav-main .ps__rail-x { display: none !important; }
  /* jarak vertikal menyesuaikan tinggi layar */
  #sidenav-main .navbar-nav > .nav-item.mt-3 { margin-top: clamp(2px, .9vh, 10px) !important; }
  #sidenav-main .navbar-nav > .nav-item.mt-3 h6 { margin: 0 0 1px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.6; }
  #sidenav-main .navbar-nav hr.horizontal { display: none; }
  #sidenav-main .mau-grp { margin: clamp(4px, 1vh, 12px) 12px 0 !important; }
  #sidenav-main .mau-grp span { padding: 5px 10px; }
  #sidenav-main .navbar-nav .nav-link {
    margin: 1px 12px !important;
    padding: clamp(3px, .7vh, 8px) 10px !important;
    min-height: 0 !important;
  }
  #sidenav-main .navbar-nav .nav-link .icon { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
  #sidenav-main .navbar-nav .nav-link:hover { transform: none; }
  #sidenav-main .sidenav-footer { flex: 0 0 auto; margin: 6px 12px 12px !important; }
  #sidenav-main .sidenav-footer .btn { margin: 0 !important; padding: 8px 12px !important; }
  #sidenav-main .mau-side-foot { display: none; }
  /* konten utama mulai tepat di samping sidebar */
  .g-sidenav-show .main-content:not(.login-shell) { margin-left: 250px !important; }
}
/* layar pendek (mis. laptop 1366x768): sembunyikan judul kecil per menu, label grup tetap ada */
@media (min-width: 1200px) and (max-height: 760px) {
  #sidenav-main .navbar-nav > .nav-item.mt-3 { display: none !important; }
  #sidenav-main .mau-grp { margin-top: 8px !important; }
  #sidenav-main .navbar-nav .nav-link { padding: 4px 10px !important; }
}
@media (min-width: 1200px) and (max-height: 560px) {
  #sidenav-main .navbar-brand > span { display: none; }
  #sidenav-main .navbar-nav .nav-link .icon { width: 26px !important; height: 26px !important; flex-basis: 26px; }
  #sidenav-main .navbar-nav .nav-link { padding: 2px 10px !important; font-size: .82rem; }
  #sidenav-main .mau-grp { margin-top: 4px !important; }
  #sidenav-main .mau-grp span { padding: 3px 8px; }
}

/* ---------- halaman login: pastikan tidak terkena aturan sidebar & notifikasi lebih halus ---------- */
.main-content.login-shell { margin-left: 0 !important; }
.login-shell .alert {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  border: 1px solid #bfe5d2 !important;
  background: #ecf8f2 !important;
  color: #0e5f44 !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
  background-image: none !important;
}
.login-shell .alert::before {
  content: "";
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: #16a06e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.login-shell .alert-danger, .login-shell .alert-warning { border-color: #f3c2c4 !important; background: #fdf0f0 !important; color: #a3262c !important; }
.login-shell .alert-danger::before, .login-shell .alert-warning::before {
  background: #d93a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.login-shell .alert .close, .login-shell .alert .btn-close { margin-left: auto; }