* { -webkit-font-smoothing: antialiased; }
body {
  background-color: #0a2a12;
  overscroll-behavior: none;
}
.bg-tv {
  background-image: url('./template-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.text-shadow { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }

/* Kartu hadis arch emas seperti layout-example.jpg */
.hadis-arch {
  background: #fffbeb;
  border: 4px solid #d4a017;
  border-radius: 28px;
  /* arch atas: sedikit lebih melengkung */
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
}
.hadis-inner {
  background: radial-gradient(ellipse at top, #fffef2 0%, #fefce8 55%, #fef9c3 100%);
  border-radius: 24px;
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
}
/* fallback inner arch ornament via pseudo */
.hadis-arch::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 18px;
  background: linear-gradient(to right, transparent, rgba(202,138,4,0.18), transparent);
  border-radius: 999px;
  pointer-events: none;
}

.glass-dark {
  background: rgba(12, 40, 20, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
}
.jadwal-footer {
  background: rgba(8, 44, 20, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
}
.prayer-active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #1a2e05 !important;
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(250,204,21,0.4);
}
.prayer-next {
  background: rgba(255,255,255,0.95) !important;
  color: #14532d !important;
  border: 2px solid #facc15 !important;
}
@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:0.85} }
@keyframes progress { from{width:0%} to{width:100%} }
.animate-progress { animation: progress 10s linear forwards; }

/* Coocaa 32" Smart TV optimization - 1366x768 / 1920x1080 landscape 16:9 */
@media screen and (min-width: 1280px) {
  .hadis-arch { max-width: 980px; }
  #hadisTitle { font-size: 26px; }
  #hadisText { font-size: 16px; }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  header { padding-top: 8px; padding-bottom: 8px; }
  main { padding-top: 8px; padding-bottom: 8px; }
  .hadis-inner { padding-top: 18px; padding-bottom: 18px; }
}
/* Portrait handling - tetap tampil tapi stack */
@media (orientation: portrait) {
  .bg-tv { background-size: cover; background-position: top center; }
  body { height: 100vh; height: 100dvh; }
  .hadis-arch { border-radius: 24px; border-top-left-radius: 32px; border-top-right-radius: 32px; }
}
@media (max-height: 600px) {
  .hadis-inner { padding-top: 14px; padding-bottom: 14px; }
  #hadisTitle { font-size: 18px; }
  #hadisText { font-size: 13px; line-height: 1.6; }
}

::-webkit-scrollbar { display: none; }
html,body { scrollbar-width: none; -ms-overflow-style: none; }