/* =========================================================
   PIAUD THEME — Angkasa (Space)
   Tema visual kustom: kosmik, penuh rasa ingin tahu, tetap islami & hangat
   ========================================================= */

:root {
  /* Palet dominan: biru langit + aksen ceria */
  --bs-primary: #3EA8E0;      /* biru langit cerah */
  --bs-primary-rgb: 62, 168, 224;

  --bs-danger: #FF7A93;       /* aksen merah muda hangat */
  --bs-danger-rgb: 255, 122, 147;

  --bs-warning: #FFC94D;      /* kuning matahari */
  --bs-warning-rgb: 255, 201, 77;

  --bs-success: #4CC9A7;      /* hijau daun lembut */
  --bs-success-rgb: 76, 201, 167;

  --bs-info: #6FD3F7;         /* biru muda / awan */
  --bs-info-rgb: 111, 211, 247;

  --bs-purple: #8D7CC7;
  --bs-purple-rgb: 141, 124, 199;

  --bs-orange: #FF9F5A;
  --bs-orange-rgb: 255, 159, 90;

  --bs-blue: #0E6BA8;
  --bs-blue-rgb: 14, 107, 168;

  --bs-dark: #0E4C75;         /* biru laut tua, dipakai utk footer & aksen gelap */
  --bs-dark-rgb: 14, 76, 117;

  --piaud-cream: #EAF6FE;     /* biru langit sangat muda utk section terang */
  --piaud-navy: #0E4C75;
  --piaud-nebula-start: #2E8FD1;
  --piaud-nebula-end: #0E4C75;
}

/* ---------- Fonts ---------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .btn {
  font-family: "Baloo 2", "Heebo", sans-serif !important;
}

body {
  font-family: "Quicksand", "Roboto", sans-serif;
}

/* ---------- SVG fill utility overrides (decorative shapes) ---------- */
.fill-primary { fill: var(--bs-primary) !important; }
.fill-warning { fill: var(--bs-warning) !important; }
.fill-danger  { fill: var(--bs-danger) !important; }
.fill-orange  { fill: var(--bs-orange) !important; }
.fill-success { fill: var(--bs-success) !important; }
.fill-purple  { fill: var(--bs-purple) !important; }
.fill-blue    { fill: var(--bs-blue) !important; }

/* ---------- Soft light section background ---------- */
.bg-piaud-cream { background-color: var(--piaud-cream) !important; }

/* =========================================================
   STARFIELD — dipakai di hero, CTA banner, dan banner halaman gelap
   ========================================================= */
.piaud-space {
  position: relative;
  background: radial-gradient(ellipse at top, var(--piaud-nebula-start) 0%, var(--piaud-navy) 65%, #07071f 100%);
  overflow: hidden;
}
.piaud-space::before,
.piaud-space::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 25% 65%, #fff, transparent 60%),
    radial-gradient(2px 2px at 40% 10%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 80%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 70% 35%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 60%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 15%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 15% 90%, #fff, transparent 60%),
    radial-gradient(1.7px 1.7px at 60% 55%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 33% 40%, #fff, transparent 60%);
  background-size: 380px 380px;
  opacity: .55;
  animation: piaud-twinkle 4.5s ease-in-out infinite alternate;
  z-index: 0;
}
.piaud-space::after {
  background-size: 520px 520px;
  background-position: 40px 60px;
  opacity: .3;
  animation-duration: 6.5s;
  animation-delay: .8s;
}
.piaud-space > * {
  position: relative;
  z-index: 1;
}
.piaud-space h1, .piaud-space h2, .piaud-space h3, .piaud-space h4,
.piaud-space h5, .piaud-space h6,
.piaud-space p, .piaud-space li, .piaud-space span {
  color: #fff;
}
.piaud-space .text-muted { color: rgba(255,255,255,0.7) !important; }
@keyframes piaud-twinkle {
  0%   { opacity: .2; }
  50%  { opacity: .6; }
  100% { opacity: .35; }
}

/* ---------- Playful rounded buttons ---------- */
.btn {
  border-radius: 50px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.btn-lg { padding: 0.9rem 2rem !important; }
.btn-danger-soft {
  background-color: rgba(var(--bs-danger-rgb), 0.15) !important;
  color: var(--bs-danger) !important;
  border: none;
  transition: all .25s ease;
}
.btn-danger-soft:hover {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.btn-round { border-radius: 50% !important; }

/* ---------- Cards: softer corners + gentle hover lift ---------- */
.card {
  border-radius: 1.1rem !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card.shadow:hover,
.rounded-3.shadow:hover {
  transform: translateY(-4px);
}

/* ---------- Navbar ---------- */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--bs-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-primary) !important;
}

/* ---------- Counter / stat cards on dashboard ---------- */
.piaud-stat-card {
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.piaud-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(11,11,46,0.15) !important;
}

/* ---------- Feature icon circles (Kenapa Memilih PIAUD section) ---------- */
.piaud-icon-circle {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 1.1rem;
  transition: transform .3s ease;
}
.piaud-feature-card:hover .piaud-icon-circle {
  transform: scale(1.1) rotate(-4deg);
}
.piaud-feature-card {
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.piaud-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.25rem 2.5rem rgba(11,11,46,0.12);
}

/* ---------- Gentle floating animation for hero decorative badges ---------- */
@keyframes piaud-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.piaud-float {
  animation: piaud-float 3.5s ease-in-out infinite;
}
.piaud-float-delay {
  animation: piaud-float 3.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
.piaud-float-delay2 {
  animation: piaud-float 4.2s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* ---------- Hero badge chips (Akreditasi, Lokasi, Fasilitas) — versi gelap ---------- */
.piaud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 50px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}
.piaud-chip i { color: var(--bs-warning); }

/* Chip versi terang, dipakai di atas latar putih/terang */
.piaud-chip-light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  border-radius: 50px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- Dotted pattern divider ---------- */
.piaud-dots {
  background-image: radial-gradient(var(--bs-warning) 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.35;
}

/* ---------- Twinkling star accent icons ---------- */
.piaud-twinkle-icon {
  animation: piaud-twinkle-scale 2.4s ease-in-out infinite;
}
@keyframes piaud-twinkle-scale {
  0%, 100% { opacity: .55; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* =========================================================
   GALERI AKTIVITAS — slider ilustrasi kegiatan anak usia dini
   ========================================================= */
.piaud-gallery-item {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 1.75rem rgba(14,76,117,0.15);
  background: #fff;
}
.piaud-gallery-item img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
.piaud-gallery-item:hover img {
  transform: scale(1.06);
}
.piaud-gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem 0.9rem;
  background: linear-gradient(0deg, rgba(14,76,117,0.85) 0%, rgba(14,76,117,0) 100%);
}
.piaud-gallery-caption h6 {
  color: #fff;
  margin-bottom: 0;
  font-size: 0.98rem;
}
.tiny-slider .tns-controls [data-controls] {
  background-color: #fff !important;
  color: var(--bs-primary) !important;
  box-shadow: 0 0.4rem 1rem rgba(14,76,117,0.18);
}

/* ---------- Awan dekoratif (dipakai di hero, section sky blue) ---------- */
.piaud-cloud {
  position: absolute;
  opacity: 0.9;
  pointer-events: none;
}
@keyframes piaud-cloud-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(18px); }
  100% { transform: translateX(0); }
}
.piaud-cloud-drift {
  animation: piaud-cloud-drift 8s ease-in-out infinite;
}

/* =========================================================
   DUO PWA MOBILE STYLE
   Navbar melayang, drawer menu, bottom nav bar, dark mode ringan
   ========================================================= */

/* ---------- Navbar melayang ala app (mobile/tablet) ---------- */
@media (max-width: 1199.98px) {
  header.navbar-sticky {
    background: transparent !important;
    padding: 10px 12px 0;
  }
  header.navbar-sticky .navbar {
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0.5rem 1.5rem rgba(14,76,117,0.12);
    padding: 6px 8px;
  }
  header.navbar-sticky .navbar .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.piaud-navbtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  border: none;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.piaud-navbtn:hover { background: rgba(var(--bs-primary-rgb), 0.2); }

/* ---------- Offcanvas drawer ala Duo PWA ---------- */
.piaud-drawer {
  width: min(320px, 88vw) !important;
  border: none;
  padding: 14px;
  background: var(--piaud-cream);
}
.piaud-drawer-hero {
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  padding: 1.5rem 1.25rem;
  color: #fff;
  background: radial-gradient(ellipse at top, var(--piaud-nebula-start) 0%, var(--piaud-navy) 80%);
}
.piaud-drawer-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
}
.piaud-drawer-profile {
  background: #fff;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  box-shadow: 0 0.35rem 1rem rgba(14,76,117,0.08);
}
.piaud-drawer-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8CA3B5;
  text-transform: uppercase;
  margin: 20px 4px 8px;
}
.piaud-drawer-list {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1rem rgba(14,76,117,0.08);
}
.piaud-drawer-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #1B2B3A;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(14,76,117,0.06);
}
.piaud-drawer-list a:last-child { border-bottom: none; }
.piaud-drawer-list a .chev { margin-left: auto; color: #B7C4CE; }
.piaud-drawer-list a.active { color: var(--bs-primary); }
.piaud-drawer-list a.active .piaud-mini-icon { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb),0.18); }
.piaud-mini-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.piaud-drawer-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 1rem;
  padding: 12px 14px;
  box-shadow: 0 0.35rem 1rem rgba(14,76,117,0.08);
}

/* ---------- Bottom navigation bar (mobile) ---------- */
.piaud-bottomnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: 0 -0.35rem 1.25rem rgba(14,76,117,0.12);
  padding: 8px 6px calc(6px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
}
@media (max-width: 1199.98px) {
  .piaud-bottomnav { display: flex; }
  body { padding-bottom: 78px; }
}
.piaud-bottomnav .piaud-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #8CA3B5;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  padding-top: 4px;
}
.piaud-bottomnav .piaud-bn-item i { font-size: 1.2rem; }
.piaud-bottomnav .piaud-bn-item.active { color: var(--bs-primary); }
.piaud-bottomnav .piaud-bn-home {
  flex: 0 0 auto;
  margin-top: -30px;
}
.piaud-bottomnav .piaud-bn-home .piaud-bn-home-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb),0.4);
  border: 4px solid #fff;
}
.piaud-bottomnav .piaud-bn-home span { color: #1B2B3A; margin-top: 2px; }

/* =========================================================
   DARK MODE ringan (khusus komponen kustom PIAUD)
   ========================================================= */
html[data-theme="dark"] body {
  background-color: #0B2436;
  color: #DCE7EF;
}
html[data-theme="dark"] header.navbar-sticky .navbar,
html[data-theme="dark"] .piaud-drawer,
html[data-theme="dark"] .piaud-bottomnav,
html[data-theme="dark"] .piaud-drawer-profile,
html[data-theme="dark"] .piaud-drawer-list,
html[data-theme="dark"] .piaud-drawer-toggle-row,
html[data-theme="dark"] .card,
html[data-theme="dark"] .piaud-feature-card,
html[data-theme="dark"] .piaud-gallery-item,
html[data-theme="dark"] .bg-white {
  background-color: #123852 !important;
  color: #DCE7EF;
}
html[data-theme="dark"] .piaud-drawer { background-color: #0B2436; }
html[data-theme="dark"] .navbar-nav .nav-link,
html[data-theme="dark"] .piaud-drawer-list a,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] p, html[data-theme="dark"] .text-body {
  color: #E8F1F7;
}
html[data-theme="dark"] .text-muted { color: #8CA3B5 !important; }
html[data-theme="dark"] footer.bg-dark { background-color: #071722 !important; }
html[data-theme="dark"] .bg-piaud-cream { background-color: #0E2E44 !important; }
html[data-theme="dark"] .piaud-navbtn { background: rgba(255,255,255,0.1); color: #fff; }

/* ---------- Dark mode: cakupan tambahan untuk halaman data (tabel, form, DataTables, dsb) ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card.border {
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border {
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .table {
  color: #DCE7EF;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
  --bs-table-border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .table thead {
  color: #fff;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0E2E44 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #DCE7EF !important;
}
html[data-theme="dark"] .form-control::placeholder {
  color: #8CA3B5;
}
html[data-theme="dark"] .dropdown-menu {
  background-color: #123852;
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dropdown-item {
  color: #DCE7EF;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}
/* DataTables khusus */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: #DCE7EF;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #DCE7EF !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}
html[data-theme="dark"] .page-link {
  background-color: #123852;
  border-color: rgba(255,255,255,0.08);
  color: #DCE7EF;
}
html[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
html[data-theme="dark"] .modal-content {
  background-color: #123852;
  color: #DCE7EF;
}
html[data-theme="dark"] .breadcrumb-item a { color: #8CA3B5; }
html[data-theme="dark"] .list-group-item {
  background-color: transparent;
  color: #DCE7EF;
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] hr { border-color: rgba(255,255,255,0.1); }

/* Dark mode toggle switch (dipakai di drawer) */
.piaud-dm-toggle {
  width: 46px; height: 26px;
  border-radius: 50px;
  background: #D8E3EA;
  position: relative;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: background .25s ease;
}
.piaud-dm-toggle .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  color: #FFB627;
  transition: transform .25s ease;
}
html[data-theme="dark"] .piaud-dm-toggle { background: var(--bs-primary); }
html[data-theme="dark"] .piaud-dm-toggle .knob {
  transform: translateX(20px);
  color: #123852;
}