/* src/assets/styles/global.css */

@font-face {
  font-family: 'namapengantin'; /* Ganti dengan nama yang Anda inginkan untuk memanggil font ini di CSS */
  src: url('../fonts/Gista Danes.woff2') format('woff2'); /* Sesuaikan path dan format jika Anda memiliki WOFF/WOFF2 */
  /* Jika Anda punya WOFF/WOFF2, tambahkan seperti ini untuk kompatibilitas yang lebih baik: */
  /*
    src: url('../fonts/NamaFontAnda.woff2') format('woff2'),
         url('../fonts/NamaFontAnda.woff') format('woff'),
         url('../fonts/NamaFontAnda.ttf') format('truetype');
    */
  font-weight: normal; /* Sesuaikan jika font Anda memiliki weight tertentu */
  font-style: normal; /* Sesuaikan jika font Anda memiliki style tertentu (italic, oblique) */
  font-display: swap; /* Direkomendasikan untuk performa: tampilkan font fallback dulu */
}

@font-face {
  font-family: 'name'; /* Anda bisa tetap menggunakan nama ini */
  src: url('../fonts/EmilysCandy-Regular.ttf') format('truetype'); /* DIUBAH: Ganti nama file di sini */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* 1. Beri nama panggilan untuk font Anda */
  font-family: 'FontPengantinBaru';
  /* 2. Beri tahu lokasi file font-nya */
  src: url('../fonts/pengantin.woff2') format('woff2'); /* Ganti nama file di sini */
  /* Opsi tambahan */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ini bagus untuk performa */
}

:root {
  /* === Palet Warna Baru: Tema "Material You" Blue === */

  /* -- Warna Primer (Berbasis Biru dari Terang ke Gelap) -- */
  --primary-lightest: #f0f7ff; /* Sangat terang, untuk latar belakang utama */
  --primary-light: #d4e5f7; /* Sedikit lebih gelap, untuk kartu/surface */
  --primary-medium: #4a90e2; /* Warna biru utama yang seimbang, untuk tombol/highlight */
  --primary-dark: #1e4a7d; /* Biru tua, untuk teks utama dan header */
  --primary-darkest: #0d2a4c; /* Biru paling gelap, untuk teks yang sangat kontras */

  /* -- Warna Aksen (Pelengkap) -- */
  --accent-teal: #429e9d; /* Aksen Teal/Hijau kebiruan yang serasi */
  --accent-gold: #d4af37; /* Aksen Emas untuk sentuhan mewah */

  /* -- Warna Netral & Teks -- */
  --text-on-dark-bg: #ffffff; /* Teks putih untuk latar belakang gelap */
  --text-on-light-bg: var(
    --primary-darkest
  ); /* Teks biru gelap untuk latar belakang terang */
  --border-color-soft: #bccde0; /* Warna garis tepi yang lembut */

  /* -- Mapping ke Variabel UI Lama Anda agar Konsisten -- */
  --main-bg-color: var(--primary-lightest);
  --main-text-color: var(--primary-dark);
  --card-bg-color: #ffffff;
  --button-primary-bg: var(--primary-medium);
  --button-primary-text: var(--text-on-dark-bg);
  --input-bg-color: #f8f9fa;
  --border-color: var(--border-color-soft);
  --shadow-color: rgba(30, 74, 125, 0.1); /* Bayangan berbasis biru */
  --hr-color: var(--border-color-soft);
  --icon-color: #8a9aab; /* Abu-abu kebiruan yang netral */

  /* -- Warna Khusus Tombol Welcome (Tidak Berubah) -- */
  --welcome-button-bg-normal: var(--primary-dark);
  --welcome-button-text-normal: var(--text-on-dark-bg);
  --welcome-button-border-normal: var(--text-on-dark-bg);
  --welcome-button-bg-hover: var(--text-on-dark-bg);
  --welcome-button-text-hover: var(--primary-dark);
  --welcome-button-border-hover: var(--primary-dark);

  /* -- Font & Variabel Lain (Tidak Berubah) -- */
  --fontSize-heading-lg: 3rem;
  --fontSize-heading-base: 2.8rem;
  --fontSize-text-base: 1rem;
  --sacramento: Sacramento, cursive;
  --arabic: 'Noto Naskh Arabic', serif;
  --shadow-md: 0 0 10px rgba(0, 0, 0, 0.3);
  --transition-small: all 0.3s ease;
}

/* -- Warna untuk Tema Gelap -- */
/*
body.dark-theme {
    --main-bg-color: #212529;
    --main-text-color: #e9ecef;
    --card-bg-color: #2c313a;
    --button-primary-bg: #e9ecef;
    --button-primary-text: #212529;
    --input-bg-color: #343a40;
    --border-color: #e9ecef;
    --icon-color: #adb5bd;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --hr-color: #e9ecef;

    --welcome-button-bg-normal: #e9ecef;
    --welcome-button-text-normal: #212529;
    --welcome-button-border-normal: #292121;

    --welcome-button-bg-hover: #292121;
    --welcome-button-text-hover: #e9ecef;
    --welcome-button-border-hover: #e9ecef;
}
*/

html {
  scroll-behavior: smooth;
  scrollbar-width: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  /* Menambahkan transisi untuk properti yang akan berubah saat tema berganti, agar transisi mulus */
  transition: background-color 0.5s ease, color 0.5s ease,
    border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--main-text-color); /* Menggunakan variabel warna teks utama */
  background-color: var(
    --main-bg-color
  ); /* Menggunakan variabel warna latar belakang utama */
  overflow-y: auto; /* Defaultnya scrolling tersembunyi */
  background-color: #1a1a1a;
}

.mobile-container {
  width: 100%;
  max-width: 450px; /* Atur lebar maksimal bingkai */
  margin: 0 auto; /* Otomatis menempatkannya di tengah */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  background-color: var(--main-bg-color); /* Warna latar undangan */
}

body.active {
  overflow-y: auto; /* Mengaktifkan scrolling saat body mendapatkan kelas 'active' (untuk home screen) */
}

/* Kelas untuk mencegah scrolling saat popup aktif */
body.popup-active {
  overflow: hidden !important; /* Memaksa scrolling tersembunyi */
}

body::-webkit-scrollbar {
  display: none;
}

p {
  line-height: 1.7rem;
}

.audio button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background-color: var(--card-bg-color); /* Latar belakang tombol audio */
  color: var(--main-text-color); /* Ikon tombol audio */
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  cursor: pointer;

  /* Transisi untuk properti transformasi dan warna tema */
  transition: 1.5s transform ease, background-color 0.3s ease, color 0.3s ease;
  z-index: 90; /* Pastikan di atas elemen lain, tapi di bawah popup */
  box-shadow: 0 0 8px var(--shadow-color); /* Menggunakan variabel warna bayangan */
}

.audio button.show {
  transform: translateX(0);
}

.audio button.active {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    /* Pertahankan posisi sambil berputar */
    transform: translateX(0) rotate(0deg);
  }
  100% {
    /* Pertahankan posisi sambil berputar */
    transform: translateX(0) rotate(360deg);
  }
}

@keyframes upAndDown {
  0%,
  100% {
    transform: translateY(-0.8rem);
  }
  50% {
    transform: translateY(0.8rem);
  }
}

.attendance-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Latar belakang overlay gelap */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; /* Lebih tinggi dari elemen lain */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.attendance-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.attendance-popup {
  background-color: var(
    --card-bg-color
  ); /* Menggunakan variabel warna latar belakang card */
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 8px 16px var(--shadow-color); /* Menggunakan variabel warna bayangan */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Border tetap statis untuk tampilan pop-up */
  max-width: 90%;
  width: 400px;
  transform: scale(0.8);
  opacity: 0;
  /* Transisi untuk properti transformasi, opasitas, dan warna tema */
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.5s ease,
    color 0.5s ease;
}

.attendance-popup-overlay.active .attendance-popup {
  transform: scale(1);
  opacity: 1;
}

.attendance-popup h3 {
  font-size: 1.8rem;
  font-family: var(--sacramento);
  margin-bottom: 1rem;
  color: var(--main-text-color); /* Menggunakan variabel warna teks utama */
}

.attendance-popup p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
  color: var(--main-text-color); /* Menggunakan variabel warna teks utama */
}

.attendance-popup .popup-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.attendance-popup .popup-buttons button {
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--border-color); /* Menggunakan variabel warna border */
  background-color: var(
    --main-bg-color
  ); /* Menggunakan variabel warna latar belakang utama untuk tombol */
  color: var(
    --main-text-color
  ); /* Menggunakan variabel warna teks utama untuk teks tombol */
  border-radius: 15px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Gaya hover untuk tombol "Hadir" */
.attendance-popup .popup-buttons button#confirm-hadir:hover {
  background-color: #4caf50; /* Hijau statis saat hover */
  color: white; /* Putih statis saat hover */
  border-color: #4caf50; /* Hijau statis statis saat hover */
}

/* Gaya hover untuk tombol "Tidak Hadir" */
.attendance-popup .popup-buttons button#confirm-tidak-hadir:hover {
  background-color: #f44336; /* Merah statis saat hover */
  color: white; /* Putih statis saat hover */
  border-color: #f44336; /* Merah statis saat hover */
}

/* Gaya untuk Tombol Pengalih Tema */
.theme-toggle-button {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--border-color); /* Menggunakan variabel warna border */
  background-color: var(
    --card-bg-color
  ); /* Menggunakan variabel warna latar belakang card untuk tombol */
  color: var(
    --main-text-color
  ); /* Menggunakan variabel warna teks utama untuk ikon */
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1rem;
  top: 1rem; /* Sesuaikan posisi sesuai kebutuhan */
  cursor: pointer;
  z-index: 90; /* Sama seperti tombol audio, atau lebih tinggi jika diinginkan */
  box-shadow: 0 0 8px var(--shadow-color); /* Menggunakan variabel warna bayangan */
  /* Transisi untuk properti background-color, color, border-color, dan box-shadow */
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle-button i {
  transition: transform 0.3s ease, color 0.3s ease; /* Transisi untuk transformasi dan warna ikon */
}

.theme-toggle-button:hover {
  background-color: var(
    --main-text-color
  ); /* Latar belakang saat hover (warna teks utama) */
  color: var(
    --main-bg-color
  ); /* Warna teks saat hover (warna latar belakang utama) */
  border-color: var(
    --main-text-color
  ); /* Warna border saat hover (warna teks utama) */
}

.theme-toggle-button.light i {
  transform: rotate(0deg);
}

.theme-toggle-button.dark i {
  transform: rotate(180deg);
}

main .scroll-content {
  position: relative;
  z-index: 1;

  /* --- UBAH BAGIAN INI --- */
  background-color: var(--primary-light); /* Ganti dengan path gambar Anda */
  background-size: cover; /* Agar gambar menutupi seluruh area */
  background-position: center; /* Posisi gambar di tengah */

  /* ----------------------- */

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
  margin-top: -37vh;
  border-top-left-radius: 120px;
  border-top-right-radius: 0px;
  overflow: hidden;
}

body.scroll-locked {
  overflow: hidden !important;
}