/* 1. VARIABEL WARNA (Hanya satu tempat untuk mengatur warna) */
:root {
  --purple-main: #840d75;
  --purple-dark: #840d75;
  --light-blue: #ff55f6;
  --white-main: #ffffff;
}

/* 2. GLOBAL & UTILITY CLASSES */
html {
  scroll-behavior: smooth;
}

.bg-purple-main {
  background-color: var(--purple-main) !important;
}
.text-purple-main {
  color: var(--purple-main) !important;
}
.border-purple-main {
  border-color: var(--purple-main) !important;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
}
.text-light-blue {
  color: var(--light-blue) !important;
}

/* 3. NAVBAR (Glassmorphism) */
.navbar-glass {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #840d75;
}

/* 4. TOMBOL-TOMBOL (Buttons) */
.btn-register {
  background-color: var(--purple-main) !important;
  color: var(--white-main) !important;
  transition: all 0.3s ease-in-out;
}
.btn-register:hover {
  background-color: var(--purple-dark) !important;
  box-shadow: 0 4px 15px #840d75;
  transform: scale(1.05);
}

.btn-hero-cta {
  display: inline-block;
  background-color: var(--white-main) !important;
  color: var(--purple-main) !important;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.btn-hero-cta:hover {
  transform: scale(1.05);
  background-color: #f8f9fa !important;
}

.btn-cancel {
  width: 100%;
  background-color: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-cancel:hover {
  background-color: #dc2626;
  color: #ffffff;
  transform: scale(1.05);
}

/* 5. HERO & GALLERY */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--light-blue) 0%,
    var(--purple-main) 100%
  );
  position: relative;
  overflow: hidden;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #840d75, transparent);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.group:hover .gallery-overlay {
  opacity: 1;
}
.group:hover .gallery-img {
  transform: scale(1.1);
}

/* 6. ANIMASI */
@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeInSlide 0.8s ease-out forwards;
}
.delay-200 {
  animation-delay: 0.2s;
}

/* Reveal Animation on Scroll */
@keyframes revealAnim {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.reveal {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;
  animation: revealAnim linear both;
  animation-timeline: --revealing-image;
  animation-range: entry 10% cover 40%;
}

/* Paksa warna untuk tombol WhatsApp di section contact */
#contact a.bg-purple-main {
  background-color: #840d75 !important;
  color: #ffffff !important;
  display: inline-block;
}

/* Tambahan agar hover tetap bekerja */
#contact a.bg-purple-main:hover {
  background-color: #840d75 !important;
  opacity: 0.9;
}

/* Animasi Fade In */
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: fadeInPage 0.6s ease-out;
}

/* Tambahkan ini agar saat pindah halaman terasa halus */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s;
}

/* Berikan transisi halus */
#main-content {
  transition: opacity 300ms ease-in;
}

/* Saat HTMX sedang memproses (request), kurangi opacity-nya */
.htmx-request#main-content {
  opacity: 0.5;
}

/* Sembunyikan indikator secara default */
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease-in;
}

/* Munculkan indikator hanya saat ada request */
.htmx-request .htmx-indicator {
  display: inline-block;
  opacity: 1;
}

/* Atau jika ditaruh langsung pada elemen indikatornya */
.htmx-request.htmx-indicator {
  display: inline-block;
  opacity: 1;
}

/* --- HTMX & Loading Indicator Styles --- */

/* Container spinner agar di tengah layar */
.loader-container {
  display: none; /* Sembunyikan default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

/* Munculkan spinner hanya saat HTMX sedang request */
/* Catatan: HTMX otomatis menambahkan class .htmx-request ke body atau target */
.htmx-request .loader-container,
.htmx-request.loader-container {
  display: block;
}

/* Animasi Spinner Ring */
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #f3f3f3; /* Warna abu muda untuk lingkaran dasar */
  border-bottom-color: #840d75; /* Warna Ungu Utama */
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Membuat konten utama memudar & blur saat loading */
#main-content.htmx-request {
  opacity: 0.3;
  filter: blur(1px);
  transition: all 200ms ease-in-out;
}

/* Warna Kustom tambahan (jika tailwind belum di-config) */
.bg-purple-main {
  background-color: #840d75;
}
.text-purple-main {
  color: #840d75;
}

/* style.css */
aside {
  z-index: 50; /* Pastikan di atas konten */
  pointer-events: auto !important; /* Paksa agar bisa diklik */
}

/* Pastikan main content tidak menabrak sidebar */
#main-content {
  position: relative;
  z-index: 10;
}

/* Custom Style untuk SweetAlert */
.my-swal-popup {
  border-radius: 2rem !important; /* Biar membulat cantik */
  font-family: "Inter", sans-serif;
}

.my-swal-title {
  color: #840d75 !important; /* Ungu tua */
  font-weight: 800 !important;
}

.my-swal-button {
  padding: 12px 30px !important;
  border-radius: 12px !important;
  font-weight: bold !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animasi khusus jika ingin lebih smooth */
.swal2-show {
  animation: swal2-show 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* style.css */

/* Animasi sederhana untuk pesan validasi */
#msg {
  transition: all 0.3s ease;
  min-height: 15px;
}

/* Style untuk tombol yang dinonaktifkan */
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(1);
}

/* Penyesuaian ikon di dalam input */
.relative i {
  cursor: pointer;
  transition: color 0.2s;
}

.relative i:hover {
  color: #840d75;
}

/* Styling Section & Container */
.kegiatan-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.container-kegiatan {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px; /* Memberi ruang di kanan-kiri untuk tombol panah */
  position: relative;
}

.kegiatan-title {
  text-align: center;
  color: #8a198c; /* Warna ungu khas web Anda */
  margin-bottom: 40px;
  font-size: 28px;
  font-weight: bold;
  font-family: sans-serif;
}

/* Mengatur Dimensi Ukuran Album Slider */
.KegiatanSlider {
  width: 100%;
  padding-bottom: 50px !important; /* Ruang untuk titik penanda di bawah */
}

/* Mengunci Ukuran Box Foto Agar Konsisten & Tidak Kebesaran */
.KegiatanSlider .swiper-slide {
  height: 280px; /* Anda bisa ubah angka ini untuk mengatur tinggi album */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: transform 0.3s ease;
}

/* Memastikan Foto Mengisi Box dengan Rapi Tanpa Peyang */
.KegiatanSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Kustomisasi Warna Tombol Panah Navigasi sesuai Tema Ungu Anda */
.KegiatanSlider .swiper-button-next,
.KegiatanSlider .swiper-button-prev {
  color: #8a198c !important;
  transform: scale(0.7); /* Memperkecil sedikit tombol agar rapi */
}

/* Kustomisasi Warna Titik Bulat Aktif di Bawah */
.KegiatanSlider .swiper-pagination-bullet-active {
  background: #8a198c !important;
  width: 20px; /* Membuat efek titik aktif memanjang (elegan) */
  border-radius: 5px;
}

/* ==========================================================
   RESET & PENGATURAN DASAR LAYOUT (STICKY FOOTER FLEXBOX)
   ========================================================== */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8fafc; /* Background aplikasi yang bersih */
  color: #334155;
}

/* Pembungkus utama seluruh struktur halaman */
.wrapper-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Memastikan tinggi wrapper minimal setinggi layar */
  box-sizing: border-box;
}

/* Area konten utama (otomatis mengisi sisa ruang kosong) */
.main-content {
  flex: 1 0 auto; /* Mendorong footer ke paling bawah tanpa menutupi elemen lain */
  padding: 20px; /* Jarak aman di sekitar konten */
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================
   LAYOUT BINGKAI / PEMBATAS LAYAR (FRAMED FOOTER LAYOUT)
   ========================================================== */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #0f172a; /* Warna latar luar bingkai (Dark Slate) */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

/* Pembungkus Utama Layar */
.wrapper-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1400px; /* Batas lebar maksimum agar rapi di layar ultra-wide */
  margin: 0 auto; /* Mengetengahkan seluruh aplikasi di layar */
  background-color: #ffffff; /* Warna dasar area kerja/konten */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); /* Efek bayangan pembatas */
  border-left: 1px solid #334155;
  border-right: 1px solid #334155;
}

/* Area Konten Utama */
.main-content {
  flex: 1 0 auto;
  padding: 25px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================
   FOOTER MELAYANG (FIXED) + WARNA MATCHING TEMA
   ========================================================== */

/* Memberi jarak di paling bawah konten utama agar tidak tertutup footer */
body {
  padding-bottom: 70px !important; /* Mencegah konten paling bawah tertutup footer */
  margin: 0;
}

.main-footer {
  position: fixed; /* Membuat footer SELALU TAMPIL di layar */
  bottom: 0; /* Menempel tepat di dasar layar */
  left: 0;
  width: 100%; /* Membentang penuh dari kiri ke kanan */
  z-index: 9999; /* Memastikan selalu berada di lapisan paling atas */

  /* Kombinasi warna magenta ungu elegan yang senada dengan header/banner */
  background: linear-gradient(135deg, #701a75 0%, #4c1d95 100%);
  color: #f5d0fe;

  /* Mengatur posisi teks PASTI DI TENGAH */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 12px 15px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2); /* Efek bayangan atas */
  border-top: 3px solid #facc15; /* Aksen garis kuning emas yang serasi */
  box-sizing: border-box;
}

.main-footer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #f5d0fe;
}

.main-footer strong {
  color: #ffffff;
  font-weight: 600;
}

.main-footer .footer-sub {
  font-size: 11px;
  color: #fef08a; /* Warna kuning lembut untuk sub-teks */
  margin-top: 2px;
}

/* ===================================================
   STYLE FORMULIR CETAK PPDB (LETAK DI STYLE.CSS)
   =================================================== */

/* RESET AREA CETAK */
.cetak-wrapper,
.cetak-wrapper * {
  box-sizing: border-box !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* LAYOUT TAMPILAN MONITOR */
body.bg-cetak-page {
  font-family: Arial, Helvetica, sans-serif !important;
  background-color: #525659 !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  color: #000 !important;
}

/* KERTAS F4 / FOLIO */
.cetak-wrapper {
  width: 215mm !important;
  min-height: 330mm !important;
  background-color: #ffffff !important;
  margin: 0 auto !important;
  padding: 15mm 20mm !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* KOP SURAT (MENGGUNAKAN TABEL AGAR SELALU RAPI) */
.cetak-wrapper .tabel-kop {
  width: 100% !important;
  border-bottom: 3px double #000 !important;
  padding-bottom: 10px !important;
  margin-bottom: 15px !important;
  border-collapse: collapse !important;
}

.cetak-wrapper .tabel-kop td {
  vertical-align: middle !important;
  border: none !important;
  padding: 0 !important;
}

.cetak-wrapper .logo-kop {
  width: 80px !important;
  height: 80px !important;
  display: block !important;
}

.cetak-wrapper .text-kop {
  text-align: center !important;
}

.cetak-wrapper .text-kop h2 {
  margin: 0 !important;
  font-size: 14pt !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: #000 !important;
}

.cetak-wrapper .text-kop h3 {
  margin: 4px 0 !important;
  font-size: 12pt !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: #000 !important;
}

.cetak-wrapper .text-kop p {
  margin: 0 !important;
  font-size: 8.5pt !important;
  color: #000 !important;
}

/* HEADER INFO REGISTRASI & FOTO */
.cetak-wrapper .tabel-header-info {
  width: 100% !important;
  margin-bottom: 15px !important;
  border-collapse: collapse !important;
}

.cetak-wrapper .tabel-header-info td {
  vertical-align: top !important;
  border: none !important;
  padding: 0 !important;
}

.cetak-wrapper .tabel-reg {
  width: 100% !important;
  border-collapse: collapse !important;
}

.cetak-wrapper .tabel-reg td {
  padding: 3px 0 !important;
  font-size: 9.5pt !important;
  vertical-align: top !important;
  color: #000 !important;
  border: none !important;
}

.cetak-wrapper .foto-top-box {
  width: 3cm !important;
  height: 4cm !important;
  border: 1px dashed #000 !important;
  text-align: center !important;
  font-size: 8.5pt !important;
  color: #444 !important;
  padding-top: 1.3cm !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
}

/* TABEL ISIAN DATA FORMULIR */
.cetak-wrapper .tabel-formulir {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 15px !important;
}

.cetak-wrapper .tabel-formulir td {
  padding: 4px 6px !important;
  vertical-align: top !important;
  font-size: 9.5pt !important;
  color: #000 !important;
  border: none !important;
}

.cetak-wrapper .section-head {
  background-color: #e5e7eb !important;
  font-weight: bold !important;
  padding: 6px !important;
  border: 1px solid #9ca3af !important;
  text-transform: uppercase !important;
  font-size: 9.5pt !important;
  color: #000 !important;
}

/* TANDA TANGAN KANAN */
.cetak-wrapper .box-ttd {
  float: right !important;
  text-align: center !important;
  width: 220px !important;
  font-size: 9.5pt !important;
  color: #000 !important;
  margin-top: 20px !important;
}

.cetak-wrapper .clear-fix {
  clear: both !important;
}

/* TOMBOL CETAK DI ATAS */
.no-print-area {
  width: 215mm !important;
  margin: 0 auto 15px auto !important;
  text-align: right !important;
}

.btn-cetak {
  background-color: #6b21a8 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  font-size: 13px !important;
}

.btn-cetak:hover {
  background-color: #581c87 !important;
}

/* ATURAN BROWSER SAAT CETAK / DOWNLOAD PDF */
@page {
  size: auto;
  margin: 0mm;
}

@media print {
  /* Hide modal session, banner alert, dan tombol cetak saat diprint */
  #sessionExpiredModal,
  .session-alert,
  .no-print-area,
  .btn-cetak,
  button {
    display: none !important;
  }

  body.bg-cetak-page {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cetak-wrapper {
    box-shadow: none !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 12mm 15mm !important;
    margin: 0 !important;
  }

  .cetak-wrapper .td-foto {
    text-align: right !important;
  }
}

/* --- Styling Scrollbar Tabel Responsif --- */
.table-scroll-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Mengunci lebar minimal tabel agar tidak kepotong di HP */
.table-scroll-container table {
  min-width: 950px !important;
}

/* Memaksa batang Scrollbar selalu terlihat di browser HP/Desktop */
.table-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
  background: #a855f7; /* Warna ungu pas dengan tema */
  border-radius: 8px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #7e22ce;
}