html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  color: black;
  /* Transisi untuk warna teks dan filter */
  transition: color 3s ease, filter 3s ease;
}

/* --- LOGIKA BACKGROUND CROSS-FADE --- */
/* Kita gunakan pseudo-element agar bisa transisi opacity gambar */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2; /* Di bawah konten dan di bawah overlay ::before */
  transition: opacity 3s ease-in-out;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Saat Siang */
body.bg-terbit::after {
  background-image: url("../bg.jpg");
  opacity: 1;
}

/* Saat Malam */
body.bg-maghrib::after {
  background-image: url("../bg-night.jpg");
  opacity: 1;
}

/* --- DARK MODE --- */
body.dark-mode {
  background-color: #000;
  color: #fff;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .donasi-target {
  color: #fff !important;
}

/* Overlay Gelap agar konten lebih terbaca */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.08); /* siang ringan */
  z-index: -1;
  transition: background 3s ease; /* Disamakan 3 detik agar sinkron */
}
body.dark-mode::after {
  filter: brightness(0.6); /* Mengurangi silau di malam hari */
}
body.dark-mode::before {
  background: rgba(
    0,
    0,
    0,
    0.55
  ); /* Malam lebih gelap agar teks putih menonjol */
}

/* Konten Box */
body.dark-mode .isi {
  background: rgba(12, 22, 38, 0.85); /* Sedikit lebih gelap agar elegan */
  transition: background 3s ease;
}

body.dark-mode .donasi-progress-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .donasi-progress-bar {
  filter: brightness(0.8); /* Redupkan sedikit lagi agar tidak silau */
  transition: filter 3s ease;
}
#app {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  padding: 40px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 140px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
}
@font-face {
  font-family: digital7;
  src: url(digital-7.woff);
}
@font-face {
  font-family: Impact;
  src: url(impact.ttf) format("truetype");
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  padding: 12px 40px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(46, 196, 0, 0.65) 0%,
    rgba(0, 97, 189, 0.65) 66%,
    rgba(0, 13, 158, 0.65) 100%
  );
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.header > * {
  position: relative;
  z-index: 2; /* teks, logo, jam */
}

body.bg-maghrib .header::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 40, 0.65),
    rgba(0, 0, 0, 0.85)
  );
}
.isi {
  width: 100%;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  margin-bottom: 20px;
}

.isi img {
  width: 360px;
  max-width: 100%;
  height: auto;
}
.text1 {
  margin-top: -36px;
  text-align: center;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 32px;
  color: rgb(218, 69, 0);
}
.text2 {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
.text3 {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
.text4 {
  margin-top: -18px;
}
.h1 {
  font-size: 24px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bolder;
  color: rgb(0, 112, 107);
}
.h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: -10px;
  margin-bottom: 20px;
}
.h3 {
  font-size: 16px;
  margin-top: -10px;
}
.h4 {
  margin-top: -2px;
  margin-bottom: -2px;
  line-height: 0.8; /* Dikurangi dari 1 menjadi 0.8 agar jarak antar baris teks makin rapat */
  font-size: 20px;
  display: block; /* Memastikan margin bekerja dengan baik pada elemen teks */
}
.donasi-progress-wrapper {
  width: 250px; /* Panjang bar */
  height: 20px; /* Tinggi tipis */
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin: -12px auto 0;
}
.donasi-progress-bar {
  /* Hapus background default #4caf50 agar tidak bentrok dengan gradasi JS */
  border-radius: 10px;
  transition: width 1s ease, background 0.5s ease; /* Tambah transisi background */
  text-align: right;
  padding-right: 15px;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: block;
  position: relative; /* Wajib untuk animasi ::after */
  overflow: hidden; /* Wajib agar kilatan tidak tumpah */
}
.donasi-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: flowLight 4s infinite ease-in-out;
}
.progress-low {
  background: linear-gradient(90deg, #ff4b2b, #ff416c) !important;
}

.progress-mid {
  background: linear-gradient(60deg, #fcbd59, #e67e22) !important;
  color: #064600 !important; /* Teks otomatis jadi Hitam agar terbaca di kuning */
}

.progress-high {
  background: linear-gradient(90deg, #00f260, #0575e6) !important;
  color: #fff !important;
}
.donasi-target {
  text-align: center;
  font-size: 18px;
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}
#blinkText {
  color: #222;
  transition: color 0.3s ease;
}
/* blink merah */
#blinkText.blink-red {
  color: #de1404;
}
/* DARK MODE */
body.dark-mode #blinkText {
  color: #ffffff;
}
body.dark-mode #blinkText.blink-red {
  color: #ff4d4d;
}
.footer {
  position: fixed !important;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 42px;
  padding: 12px 40px;
  margin-top: 80px !important;
  overflow: visible !important;
  /* position: relative; */
  z-index: 9999 !important;
  transition: z-index 0.2s step-end;
}
body.countdown-azan-active .footer {
  z-index: 10 !important; /* Turunkan drastis agar di bawah overlay */
  opacity: 0.3;
}
/* KODE FINAL: BORDER KEREN & DARK MODE BIRU */
.footer .prayer-box {
  position: relative;
  width: 140px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin: 5px;
  background: linear-gradient(145deg, #8a4b00 0%, #1a1a1a 100%);
  border: 3px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4) !important;
  overflow: visible !important;
  transition: all 0.5s ease;
  box-sizing: border-box !important;
  z-index: 10;
}

/* Penyesuaian Teks agar terlihat mewah di atas warna gelap */
.prayer-box h1 {
  font-size: 22px !important;
  color: #ffcc80 !important; /* Warna emas muda */
  letter-spacing: 1px;
  margin-bottom: 2px;
  opacity: 0.9;
}

.prayer-box .jam2 {
  font-size: 42px !important;
  font-family: digital7 !important;
  color: #ffffff !important;
  /* Glow tipis pada angka digital agar tegas */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Garis aksen kecil di bawah kotak (opsional untuk kesan modern) */
.footer .prayer-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
}
/* ===================================================
   OPTIMASI DARK MODE DISPLAY5 (BIRU CETAR & MERAH PASSED)
   =================================================== */

/* 1. BACKGROUND BOX BIRU CETAR (Mode Normal) */
body.dark-mode .footer .prayer-box {
  background: linear-gradient(160deg, #1e40af 0%, #020617 100%) !important;
  border: 3px solid #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;
  transition: all 0.5s ease;
}

/* 2. BACKGROUND BOX MERAH RUBY (Saat Waktu Lewat / Passed) */
body.dark-mode .footer .prayer-box.prayer-passed {
  background-image: none !important;
  background: linear-gradient(
    145deg,
    rgba(220, 30, 0, 0.4) 0%,
    rgba(10, 10, 10, 0.8) 100%
  ) !important;
  border: 3px solid rgba(255, 0, 0, 0.3) !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
}

body.dark-mode .footer .prayer-box h1 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  font-weight: bold;
}

/* 4. PENGATURAN TEKS PASSED (Agar Lebih Redup dari Jam Utama) */
body.dark-mode .footer .prayer-box.prayer-passed h1 {
  color: rgba(255, 255, 255, 0.5) !important; /* Putih agak transparan */
}

body.dark-mode .footer .prayer-box.prayer-passed .jam2 {
  color: #cccccc !important;
  opacity: 0.8 !important;
  text-shadow: 2px 2px 5px #000 !important;
}
/* --- DARK MODE: 10 Menit Sebelum (Glow) --- */
body.dark-mode .footer .prayer-box.prayer-glow {
  background: linear-gradient(160deg, #856404 0%, #ffc107 100%) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.6) !important;
  transform: scale(1.05);
}
/* Paksa teks jadi hitam pekat agar terbaca di background kuning */
body.dark-mode .footer .prayer-box.prayer-glow h1,
body.dark-mode .footer .prayer-box.prayer-glow .jam2 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* --- DARK MODE: 5 Menit Sebelum (Soon) --- */
body.dark-mode .footer .prayer-box.prayer-soon {
  background: linear-gradient(160deg, #7b0000 0%, #ff0000 100%) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.8) !important;
  animation: pulseSoon 1s infinite ease-in-out !important;
}
/* Paksa teks jadi putih menyala */
body.dark-mode .footer .prayer-box.prayer-soon h1,
body.dark-mode .footer .prayer-box.prayer-soon .jam2 {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}
/* Font saat Dark Mode */
body.dark-mode .prayer-box h1 {
  color: #ffffff !important;
}
body.dark-mode .prayer-box .jam2 {
  color: #60a5fa !important;
}
/* 5. Progress Bar Sholat (Tetap di bawah) */

/* 3. LIGHT MODE (Saat Waktu Lewat / Passed) */
.footer .prayer-box.prayer-passed {
  background-image: none !important;
  background: linear-gradient(
    145deg,
    rgba(220, 30, 0, 0.4) 0%,
    rgba(10, 10, 10, 0.8) 100%
  ) !important;
  border: 3px solid rgba(255, 0, 0, 0.3) !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
}

/* 4. PENGATURAN TEKS PASSED (Agar Lebih Redup dari Jam Utama) */
.footer .prayer-box.prayer-passed h1 {
  color: rgba(255, 255, 255, 0.5) !important; /* Putih agak transparan */
}

.footer .prayer-box.prayer-passed .jam2 {
  color: #cccccc !important;
  opacity: 0.8 !important;
  text-shadow: 2px 2px 5px #000 !important;
}
/* 2. Status Menuju Sholat (Merah Membesar) */
.footer .prayer-box.prayer-soon {
  background: linear-gradient(180deg, #ff5252, #b71c1c);
  border: 3px solid #660000 !important;
  animation: pulseSoon 1.2s infinite ease-in-out;
  opacity: 1;
  z-index: 10;
}

/* 3. Status Peringatan (Kuning Bercahaya) */
.footer .prayer-box.prayer-glow {
  background: #ffc107 !important; /* Paksa kuning terang */
  box-shadow: 0 0 30px #ffc107 !important;
  border: 3px solid #990000 !important;
  transform: scale(1.05); /* Sedikit membesar agar menonjol */
  z-index: 10;
}

/* Memaksa Teks di dalam Prayer Glow menjadi Hitam */
.footer .prayer-box.prayer-glow h1,
.footer .prayer-box.prayer-glow .jam2,
.footer .prayer-box.prayer-glow span {
  color: #000000 !important; /* Hitam pekat agar kontras */
  text-shadow: none !important; /* Hapus glow putih agar teks tajam */
  font-weight: 900 !important;
}

.footer .prayer-box.prayer-azan {
  background-image: linear-gradient(180deg, #ff4444, #880000) !important;
  border: 3px solid #ffffff !important;
  animation: azanRingan 1.5s infinite ease-in-out;
  z-index: 10;
}
.footer .prayer-box.prayer-azan h1,
.footer .prayer-box.prayer-azan .jam2 {
  color: #ffffff !important;
  /* Text shadow jauh lebih ringan daripada box-shadow */
  text-shadow: 1px 1px 2px #000;
}
@keyframes azanRingan {
  0%,
  100% {
    background-image: linear-gradient(180deg, #ff4444, #880000) !important;
    transform: scale(1) translateZ(0); /* Tambahkan translateZ agar GPU aktif */
  }
  50% {
    background-image: linear-gradient(180deg, #ff6666, #aa0000) !important;
    transform: scale(1.03) translateZ(0); /* Tetap zoom tapi dibantu GPU */
  }
}

.prayer-azan h1,
.prayer-azan .jam2,
.prayer-soon h1,
.prayer-soon .jam2 {
  color: #fff !important;
}
.prayer-box.prayer-soon h1,
.prayer-box.prayer-soon .jam2 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes pulseSoon {
  0% {
    transform: scale(1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  }
  50% {
    transform: scale(1.06); /* Lebih besar sedikit agar terlihat dari jauh */
    box-shadow: 0 0 35px rgba(244, 67, 54, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  }
}

.logo img {
  width: 250px;
  max-width: 100%;
  height: auto;
  margin-top: -10px;
}

.jam {
  margin-top: 10px;
  font-size: 38px;
  font-family: digital7;
  /* text-shadow: 0 0 20px #fff; */
  letter-spacing: 5px;
  color: #fff;
  user-select: none;
  opacity: 0.85;
  /* text-shadow: 0 0 14px rgba(255, 255, 255, 0.55); */
}
.hari {
  margin-top: -10px;
  font-size: 24px;
  /* text-shadow: 0 0 8px #fff; */
  color: #fff;
  user-select: none;
  margin-bottom: -10px;
  /* text-shadow: 0 0 6px rgba(255, 255, 255, 0.35); */
}

.tgl {
  font-size: 20px;
  color: #fff;
  user-select: none;
  margin-bottom: -30px;
}
/* masuk waktu azan */
.prayer-progress {
  position: absolute !important;
  /* Mepet dasar */
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important;
  background: rgba(0, 0, 0, 0.4) !important;

  /* KUNCI: Potong bar agar mengikuti lengkungan sudut bawah kotak */
  /* Nilai 17px-20px biasanya pas dengan border-radius 20px parent */
  border-radius: 0 0 17px 17px !important;

  /* Memastikan isi bar (progress-bar) juga terpotong sesuai radius ini */
  overflow: hidden !important;

  /* Hindari tumpang tindih dengan border kotak (3px) */
  margin: 0 0px 0px 0px !important;
  z-index: 1;
}
.prayer-progress-bar {
  height: 100% !important;
  width: 0%;
  background: linear-gradient(90deg, #ff4b2b, #ff416c) !important;

  /* Border pada bar yang berjalan */
  border: 1px solid rgba(255, 255, 255, 0.6) !important;

  /* Pastikan border tidak menambah ukuran bar */
  box-sizing: border-box !important;

  /* Sudut bar mengikuti jalur */
  border-radius: 0 0 10px 10px;
  transition: width 1s linear;
}

/* EFEK KILATAN KACA (Glossy Overlay) */
.prayer-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: 12px 12px 0 0;
}

.prayer-box.prayer-azan .prayer-progress-bar {
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.8);
  animation: pulseBar 2s infinite ease-in-out;
}

@keyframes pulseBar {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}
.dark-mode #updateDate {
  color: white !important;
}
.prayer-box.prayer-azan .prayer-progress {
  display: block !important;
}
.next-prayer {
  font-weight: bold;
  margin-top: 5px;
  margin-left: 0;
  text-align: center;
  color: #fff;
  line-height: 1.1;
}

@keyframes focusGlow {
  0%,
  100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  }
}

.next-prayer div {
  margin: 0;

  padding: 0;
}

#nextPrayerName {
  font-size: 26px;

  margin-bottom: 6px; /* default biasanya 15–20px */

  line-height: 1.1;
}

#countdown {
  font-size: 48px;

  font-weight: 800;

  line-height: 0.95;

  letter-spacing: -1px;
}

.countdown-normal {
  color: #ffffff;

  transition: color 0.5s ease;
}

/* countdown peringatan */

.countdown-warning {
  color: #ffeb3b !important; /* Kuning */

  text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);

  font-weight: bold;
}

.countdown-warning-glow {
  color: #ffeb3b !important; /* Kuning */

  text-shadow: 0 0 15px rgba(255, 235, 59, 0.7);

  font-weight: bold;
}

/* countdown bahaya (≤5 menit) */

.countdown-danger {
  color: #ff3b3b;

  animation: countdownBlink 1s infinite;
}

@keyframes countdownBlink {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

/* zoom lembut */

.countdown-zoom {
  /* animation: zoomPulse 1.2s ease-in-out infinite; */

  animation: none;
}

@keyframes zoomPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  } /* dari 1.08 */

  100% {
    transform: scale(1);
  }
}

#ramadhanBox {
  display: flex;

  border-radius: 14px;

  padding-left: 32px;

  padding-right: 32px;

  width: fit-content;

  margin-left: auto;

  margin-right: auto;
}

.ramadhan-title {
  font-size: 16px;

  color: #7fffd4;

  letter-spacing: 1px;
}

#ramadhanCountdown {
  font-size: 18px;

  font-weight: bold;

  color: #ffffff;

  margin-left: 10px;
}

/* =====================

   MODAL AZAN LAYOUT (TV 40 INCH OPTIMIZED)

   ===================== */

/* 1. Container Utama Modal */

.azan-modal-container {
  background: rgba(0, 0, 0, 0.95) !important;

  border: 5px solid #2e7d32 !important;

  border-radius: 50px !important;

  overflow: hidden;

  height: 90vh; /* Mengunci tinggi agar tidak muncul scroll */

  width: 90vw;

  margin: auto;

  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

/* 2. Body Modal dengan Flexbox */

.azan-modal-body {
  display: flex;

  flex-direction: column;

  justify-content: space-around; /* Menyebar elemen secara vertikal */

  align-items: center;

  text-align: center;

  padding: 30px !important;

  height: 100%;

  box-sizing: border-box;
}

/* 3. Judul "Memasuki Waktu Azan" */

.azan-title {
  color: #ffd700 !important;

  font-size: 3.5vw !important; /* Ukuran proporsional TV */

  font-weight: bold !important;

  text-transform: uppercase;

  margin: 0 !important;

  letter-spacing: 2px;
}

/* 4. Wrapper & Gambar Azan */

.azan-image-wrapper {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 15px 0;
}

.azan-img {
  width: 80%; /* Gambar besar namun tetap aman */

  max-height: 45vh; /* Batas maksimal tinggi agar tidak scroll */

  border-radius: 30px;

  object-fit: cover;

  box-shadow: 0 0 30px rgba(46, 125, 50, 0.5);

  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* 5. Nama Sholat (ASHAR, ZUHUR, dll) */

.azan-sholat-name {
  color: #ffffff !important;

  font-size: 10vw !important; /* Sangat besar agar terbaca dari jauh */

  font-weight: bold !important;

  font-family: "serif", "Times New Roman";

  line-height: 1;

  margin: 10px 0 !important;

  text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);
}

/* 6. Kutipan Hadits */

.azan-quote {
  color: #cccccc !important;

  font-size: 1.8vw !important;

  margin: 0 !important;

  font-style: italic;

  max-width: 85%;

  line-height: 1.4;
}

/* Animasi Masuk Modal agar halus */

@keyframes azanFocus {
  from {
    transform: scale(0.8);

    opacity: 0;
  }

  to {
    transform: scale(1);

    opacity: 1;
  }
}

#ModalAzan.show .azan-modal-container {
  animation: azanFocus 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop {
  display: none !important;
}

#ModalAzan.modal {
  z-index: 99999;
}

body.countdown-center #app {
  filter: brightness(0.3) !important; /* Hanya gelapkan, tanpa blur */
  transition: filter 0.5s ease;
}
body.countdown-center #countdownCenter {
  display: flex;
  opacity: 1;
}

#countdownCenter {
  position: fixed !important;
  inset: 0;
  z-index: 20000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  transition: opacity 0.4s ease;
}

#countdownCenter .box {
  text-align: center;
}

#countdownCenter .label {
  font-size: 100px;
  color: #ffd54f;
  margin-bottom: -100px;
}

#countdownCenter .time {
  font-size: 360px;
  font-family: digital7;
  color: #ffffff;
  letter-spacing: 6px;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}
body.countdown-center .footer {
  z-index: 100 !important; /* Diturunkan drastis agar tertutup #countdownCenter */
}
body.countdown-center .next-prayer {
  opacity: 0.2;
  transform: scale(0.95);
}

#sleepOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1); /* gelap */
  z-index: 999999 !important;
  pointer-events: auto; /* wajib supaya bisa diklik */
  transition: opacity 0.3s;
}

#sleepOverlay.active {
  display: flex;
}

#sleepOverlay:not(.active) {
  display: none;
}

body.dark-mode .prayer-box.prayer-azan {
  background-image: linear-gradient(180deg, #ff4444, #880000) !important;
  border: 3px solid #ffffff !important;
  animation: azanRingan 1.5s infinite ease-in-out;
  z-index: 10;
}
body.dark-mode .prayer-box.prayer-azan h1,
body.dark-mode .prayer-box.prayer-azan .jam2 {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px #000;
}

#ayatOverlay {
  position: fixed;

  top: 20px; /* Sedikit diturunkan agar tidak mepet layar atas */

  left: 50%;

  transform: translateX(-50%) translateY(-50px); /* Mulai dari lebih atas agar tidak terlihat sama sekali */

  max-width: 500px; /* Dilebarkan sedikit agar teks panjang tidak terlalu menumpuk */

  text-align: center;

  background: rgba(
    0,
    0,
    0,
    0.8
  ); /* Sedikit lebih transparan agar terlihat mewah */

  color: #fff;

  font-size: 1.3rem; /* Sedikit lebih besar untuk layar 40 inch */

  padding: 15px 25px;

  border-radius: 15px; /* Lebih bulat memberikan kesan lebih modern */

  z-index: 9997;

  opacity: 0;

  pointer-events: none; /* Agar tidak mengganggu jika ada klik di TV */

  /* Gunakan cubic-bezier untuk pergerakan slide yang lebih "mahal" */

  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

#ayatOverlay.show {
  transform: translateX(-50%) translateY(0);

  opacity: 1;
}

@keyframes slideDownUp {
  0%,
  100% {
    opacity: 0;

    transform: translateX(-50%) translateY(-30px);
  }

  10%,
  90% {
    opacity: 1;

    transform: translateX(-50%) translateY(0);
  }
}

.news-ticker-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* Sedikit diperlebar untuk kenyamanan visual */
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center; /* Menengahkan secara vertikal */
  border-top: 3px solid #963e0b;
  z-index: 1000;
  overflow: hidden;
  padding: 0; /* Pastikan tidak ada padding yang mendorong teks */
}

.ticker-label {
  background: #963e0b;
  color: white;
  padding: 0 25px;
  height: 100%;
  display: flex;
  align-items: center; /* Label teks di tengah */
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ticker-content-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

#news-content {
  padding: 4px;
  color: #ffffff;
  font-size: 1.2rem; /* Ukuran teks berita */
  line-height: 1; /* Menghindari spasi tambahan di atas/bawah teks */
  white-space: nowrap;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease;
  will-change: transform, opacity;
  display: inline-block;
}

/* Keadaan saat teks sedang slide out (Ke Atas) */
.ticker-hidden {
  opacity: 0;
  transform: translateY(-20px) !important; /* Gerakan keluar ke atas */
}

/* =====================

   TV 40 INCH LAYOUT

   ===================== */

@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }

  #app {
    width: 100vw;

    min-height: 100vh;

    padding: 24px 40px;

    padding-bottom: 140px;
  }

  /* HEADER */

  .header {
    height: 120px;

    padding: 12px 30px;
  }

  /* NEXT PRAYER */

  .next-prayer {
    font-size: 46px;

    line-height: 1.1;

    text-align: left;
  }

  /* JAM KANAN */

  .jam {
    font-size: 56px;

    opacity: 0.9;
  }

  .hari {
    font-size: 28px;
  }

  .tgl {
    font-size: 24px;
  }

  /* LOGO */

  .logo img {
    width: 520px;
  }

  /* ISI TENGAH */

  .isi {
    position: relative;

    margin-top: 110px;

    padding: 28px 32px;

    border-radius: 28px;

    /* Ganti ke putih yang lebih transparan agar gambar masjid di belakang tetap menyatu */

    background: rgba(255, 255, 255, 0.7);

    /* Vignette Inset - Inilah yang memberikan efek 'dalam' */

    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);

    /* Border putih tipis sebagai aksen 'kaca' */

    border: 3px solid rgba(255, 255, 255, 0.2);

    /* Tambahkan transisi agar halus saat perubahan konten */

    transition: all 0.5s ease;
  }

  .text1 {
    font-size: 60px;
  }

  .h1 {
    font-size: 32px;
  }

  .h2 {
    font-size: 28px;
  }

  .h3 {
    font-size: 16px;
  }

  .h4 {
    font-size: 14px;
  }

  .isi img {
    width: 200px;
  }

  .col-lg {
    border-radius: 18px;
  }
}
.dot {
  width: 14px; /* Ukuran diperbesar dari 12px */
  height: 14px; /* Ukuran diperbesar dari 12px */
  border-radius: 50%;
  position: fixed;
  top: 5px; /* Jarak dari atas */
  left: 50%; /* Ubah dari 15px ke 50% untuk posisi tengah */
  transform: translateX(-50%);
  z-index: 1000000;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box; /* Agar border tidak menambah ukuran bulatan */
  transition: background-color 0.5s ease;
}

/* HIJAU: Terkoneksi (Glow halus) */
.dot.online {
  background-color: #2ecc71;
  box-shadow: 0 0 12px #2ecc71, 0 0 20px rgba(46, 204, 113, 0.5);
  animation: pulseGreen 3s infinite ease-in-out;
}

/* MERAH: Terputus (Blink Cepat) */
.dot.offline {
  background-color: #e74c3c;
  box-shadow: 0 0 15px #e74c3c;
  animation: blinkOffline 0.8s steps(1) infinite;
}

@keyframes pulseGreen {
  0%,
  100% {
    /* Tetap sertakan translateX(-50%) agar posisi tidak lari ke samping */
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
}

@keyframes blinkOffline {
  50% {
    opacity: 0.1;
  }
}
.jamaah-popup {
  display: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 110px;
  top: -42px;
  overflow: hidden !important;
  background: linear-gradient(145deg, #065535, #0a7a4c) !important;
  border: 2px solid #d4af37 !important;
  border-radius: 10px;
  padding: 5px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 10000 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* Kilat kaca sekarang akan terpotong oleh overflow:hidden */
.jamaah-popup::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%; /* Mulai lebih jauh ke kiri agar bersih */
  width: 50px; /* Lebar kilatan dibuat tetap */
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: rotate(25deg);
  animation: kilatKaca 8s infinite ease-in-out;
  pointer-events: none; /* Supaya tidak bisa diklik */
}

@keyframes kilatKaca {
  0% {
    left: -150%;
  }
  30% {
    left: 150%;
  } /* Lewat dengan cepat di awal */
  100% {
    left: 150%;
  } /* Sisanya diam/nunggu */
}
.jamaah-popup.show {
  display: flex !important;
  animation: kenyalNempel 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes kenyalNempel {
  0% {
    opacity: 0;
    top: 0px; /* Muncul dari dalam prayer-box */
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
    top: -50px; /* Membal sedikit ke atas */
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    top: -42px; /* Posisi akhir: nempel sebagian */
    transform: scale(1);
  }
}

/* .panah-bawah {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) !important;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #d4af37 !important;
} */

.jamaah-popup span {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: #ffeb3b !important;
  line-height: 0.8 !important;
  margin-top: 2px !important;
  margin-bottom: 2px;
}

/* 1. Mencegah Lag saat Modal Azan muncul */
#ModalAzan.fade .modal-dialog {
  transition: transform 0.3s ease-out !important;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.modal-backdrop {
  will-change: opacity;
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.modal-backdrop.fade {
  transition: opacity 0.2s linear !important;
  opacity: 0.7 !important;
}

.azan-img {
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  image-rendering: -webkit-optimize-contrast;
}

#newsTicker,
.marquee,
.azan-sholat-name {
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
.modal,
.modal.fade .modal-dialog,
.modal-backdrop,
.modal-backdrop.fade {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
  transform: none !important;
}
body.modal-open #app,
body.modal-open .footer,
body.modal-open .news-ticker-container,
body.modal-open .header,
body.modal-open .dot {
  /* dot indikator online juga ikut gelap */
  filter: brightness(0.1) !important;
  transition: filter 0.8s ease-in-out;
}
.modal-backdrop.show {
  background-color: #000 !important;
  opacity: 0.9 !important; /* Menutup sisa cahaya di luar elemen */
  z-index: 99998 !important;
}
#ModalAzan .modal-content {
  /* Memberikan glow tipis agar kotak modal terlihat mewah di atas kegelapan */
  box-shadow: 0 0 50px rgba(46, 125, 50, 0.5) !important;
  border: 2px solid rgba(255, 255, 255, 0.2);
  filter: brightness(
    1
  ) !important; /* Pastikan modalnya sendiri tidak ikut gelap */
}

/* Jika Mas ingin prayer-box benar-benar redup total */
body.modal-open .prayer-box {
  box-shadow: none !important; /* Hilangkan glow kotak sholat agar tidak bocor cahayanya */
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.modal-open .container,
.modal-open .container-fluid,
.modal-open #main-content {
  filter: none !important;
  -webkit-filter: none !important;
}

.modal-content {
  box-shadow: none !important;
  border: 2px solid #fff;
}

body.azan-pushed .prayer-box,
body.azan-pushed .prayer-progress-bar,
body.azan-pushed .prayer-glow,
body.azan-pushed .prayer-soon,
body.azan-pushed .prayer-azan {
  animation: none !important;
  transition: none !important;
}

#main-content,
.container-fluid {
  position: relative;
  z-index: 1;
}
#ticker-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}
#countdownOverlay {
  display: flex !important; /* Tetap flex agar konten di tengah */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; /* Naikkan sedikit agar aman dari elemen lain */
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #000814;
  background-image: linear-gradient(
    45deg,
    #001233 25%,
    transparent 25%,
    transparent 50%,
    #001233 50%,
    #001233 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px; /* Garis lebih elegan */
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 80, 157, 0.3);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5000 !important;
}

#countdownBigIqomah {
  color: #ff003c;
  font-size: 35vh;
  font-weight: 900;
  line-height: 0.8;
  margin: 0;
  /* Glow Fokus & Tajam */
  text-shadow: 0 0 8px rgba(255, 0, 60, 0.7);

  /* Efek Gradasi pada Angka */
  background: linear-gradient(to bottom, #ff4d6d, #cc0030);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -2px;
}

.label-iqomah {
  color: #00b4d8;
  font-size: 4vw;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: -15px; /* Menarik angka ke atas agar rapat */
  letter-spacing: 5px;
  text-shadow: 0 0 10px rgba(0, 180, 216, 0.5);
}

.pesan-iqomah {
  font-size: 2.5vw;
  color: #ffeb3b;
  font-weight: 500;
  margin-top: 35px; /* Sedikit dirapatkan dari 25px */
  letter-spacing: 1px;
}

/* State Aktif (Muncul) */
#countdownOverlay.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}