/* ====================================================
   iMasjid – Display Screen CSS (Modern Premium v2.0)
   ==================================================== */

/* ====================================================
   COLOR THEME — ubah di sini untuk ganti tema
   ==================================================== */
:root {
  /* Primary (biru utama) */
  --clr-primary:        #1565C0;
  --clr-primary-light:  #1e88e5;
  --clr-primary-dark:   #0d3b86;
  --clr-primary-shadow: rgba(21, 101, 192, 0.35);
  --clr-primary-glow:   rgba(21, 101, 192, 0.25);
  --clr-active-shadow:  rgba(13,  59, 134, 0.55);

  /* Background layar utama */
  --clr-bg-start:       #c5d9f0;
  --clr-bg-mid:         #daeeff;
  --clr-bg-end:         #cfe5f5;

  /* Surface (kartu putih) */
  --clr-surface:        #ffffff;

  /* Teks */
  --clr-text:           #333333;
  --clr-text-med:       #444444;
  --clr-text-muted:     #666666;
  --clr-text-light:     #888888;

  /* Aksen / detik jam */
  --clr-accent-sec:     #90caf9;

  /* Dekorasi */
  --clr-divider:        #e0e0e0;
  --clr-dot:            #cfd8dc;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/montserrat-regular.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-regular.woff')  format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/montserrat-medium.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-medium.woff')  format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/montserrat-bold.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-bold.woff')  format('woff');
  font-weight: 700;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/montserrat-extrabold.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-extrabold.woff')  format('woff');
  font-weight: 800;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100vh;
  overflow: hidden;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  background: linear-gradient(150deg, var(--clr-bg-start) 0%, var(--clr-bg-mid) 50%, var(--clr-bg-end) 100%);
  cursor: none; /* kiosk — sembunyikan kursor */
}

/* Sembunyikan kursor di semua elemen child */
* { cursor: none !important; }

/* ---- Screen Wrapper ---- */
.screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* ====================================================
   HEADER
   ==================================================== */
.hdr {
  display: flex;
  align-items: center;
  background: var(--clr-surface);
  padding: 0 24px;
  height: 13vh;
  flex-shrink: 0;
  box-shadow: 0 3px 16px rgba(0,0,0,.12);
  border-radius: 0 0 20px 20px;
  gap: 20px;
}

.hdr-date {
  min-width: 210px;
  flex-shrink: 0;
}
.hdr-date .masehi {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.4;
}
.hdr-date .hijri {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-primary);
}

.hdr-divider {
  width: 2px;
  height: 52px;
  background: var(--clr-divider);
  border-radius: 2px;
  flex-shrink: 0;
}

.hdr-mosque {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.mosque-icon {
  width: 58px;
  height: 58px;
  background: var(--clr-primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.7rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--clr-primary-shadow);
}
.mosque-info .mosque-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.25;
}
.mosque-info .mosque-addr {
  font-size: .83rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

/* ====================================================
   MAIN CONTENT
   ==================================================== */
.main {
  display: flex;
  flex: 1;
  padding: 12px 20px 8px;
  gap: 16px;
  min-height: 0;
}

/* ---- Left Panel ---- */
.left-panel {
  width: 36%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Clock card */
.clock-card {
  background: var(--clr-surface);
  border-radius: 18px;
  text-align: center;
  padding: 10px 12px 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
  flex-shrink: 0;
}
.clock-card .clock-hm {
  font-size: 5.8rem;
  font-weight: 800;
  color: var(--clr-primary);
  line-height: 1;
  letter-spacing: -2px;
}
.clock-card .clock-sec {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--clr-accent-sec);
  vertical-align: super;
  margin-left: -4px;
}

/* Countdown card */
.countdown-card {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
  border-radius: 16px;
  padding: 12px 20px;
  text-align: center;
  box-shadow: 0 5px 22px var(--clr-primary-shadow);
  flex-shrink: 0;
}
.countdown-card .cd-label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.countdown-card .cd-time {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1.1;
}

/* Content / Slide text card */
.content-card {
  background: var(--clr-surface);
  border-radius: 16px;
  padding: 18px 20px;
  flex: 1;
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.content-card .ct-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--clr-primary);
  margin-bottom: 10px;
  line-height: 1.35;
}
.content-card .ct-body {
  font-size: .88rem;
  font-weight: 600;
  color: var(--clr-text-med);
  line-height: 1.65;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.content-card .ct-ref {
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-text-light);
  font-style: italic;
  margin-top: 10px;
}
.slide-dots {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.slide-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-dot);
  transition: background .3s, transform .3s;
}
.slide-dots span.active {
  background: var(--clr-primary);
  transform: scale(1.3);
}

/* ---- Right Panel ---- */
.right-panel {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.18);
  position: relative;
  min-height: 0;
}
.right-panel .r-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .8s ease;
}
.right-panel .r-img.fade-out { opacity: 0; }

/* ====================================================
   PRAYER BAR
   ==================================================== */
.prayer-bar {
  display: flex;
  padding: 0 20px 10px;
  gap: 10px;
  flex-shrink: 0;
}
.prayer-item {
  flex: 1;
  background: var(--clr-primary);
  border-radius: 14px;
  padding: 9px 6px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 12px var(--clr-primary-glow);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.prayer-item.active {
  background: linear-gradient(160deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
  box-shadow: 0 5px 22px var(--clr-active-shadow);
  transform: translateY(-4px) scale(1.03);
}
.prayer-item .p-name {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .85;
  margin-bottom: 3px;
}
.prayer-item .p-time {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
}

/* ====================================================
   RUNNING TEXT BAR
   ==================================================== */
.running-bar {
  background: var(--clr-primary);
  color: #fff;
  height: 7vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0 20px;
  gap: 14px;
}
.running-bar .rt-badge {
  background: var(--clr-surface);
  color: var(--clr-primary);
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.marquee-wrap {
  overflow: hidden;
  flex: 1;
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  animation: ticker linear infinite;
}
@keyframes ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ====================================================
   WEATHER BADGE (header)
   ==================================================== */
.hdr-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hdr-weather .w-icon {
  font-size: 2rem;
  line-height: 1;
}
.hdr-weather .w-info { text-align: right; }
.hdr-weather .w-temp {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--clr-primary);
  line-height: 1;
}
.hdr-weather .w-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ====================================================
   CONTENT-CARD — MODE BADGE & AYAT
   ==================================================== */
.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--clr-primary);
  background: var(--clr-bg-start);
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 8px;
  align-self: flex-start;
  transition: background .4s, color .4s;
}
.content-card[data-mode="ayat"] .ct-badge {
  background: var(--clr-primary);
  color: #fff;
}

/* Ayat mode — title (nama surah) */
.content-card[data-mode="ayat"] .ct-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-primary-dark);
  text-align: center;
  border-bottom: 2px solid var(--clr-primary);
  padding-bottom: 7px;
  margin-bottom: 10px;
}
/* Teks Arab */
.ct-arabic {
  direction: rtl;
  text-align: right;
  font-size: 1.35rem !important;
  line-height: 2.4 !important;
  color: var(--clr-primary-dark) !important;
  font-family: 'Traditional Arabic', 'Scheherazade New', 'Arabic Typesetting', serif !important;
  font-weight: 600;
  display: block !important;      /* override -webkit-box */
  -webkit-line-clamp: unset !important;
}
/* Terjemahan */
.content-card[data-mode="ayat"] #ct-body2 {
  font-style: italic;
  text-align: center;
  color: var(--clr-text-muted);
  font-size: .84rem;
  margin-top: 8px;
}
/* Sembunyikan dots saat mode ayat */
.content-card[data-mode="ayat"] .slide-dots { display: none; }