/* ==========================================================================
   Tampilan layar masjid (utama + countdown adzan/iqomah)
   Satu skala "--u" mengikuti dimensi terkecil terhadap rasio 16:9, sehingga
   tata letak sama proporsinya di 1920x1080, 1366x768, 1280x720, 980x430, dst.
   ========================================================================== */

:root {
	--bg1: #0a3a31; --bg2: #14685a; --bg3: #052019;
	--gold: #d4ae55; --gold-hi: #f0d48a; --gold-soft: rgba(212, 174, 85, .18);
	--ink: #f3f7f5; --muted: #a9c3bb; --line: rgba(255, 255, 255, .12);
	--glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .085);
	--ok: #49d7a0;
	--u: min(1vh, .5625vw);
	--pad-y: calc(var(--u) * 2.6);
	--pad-x: calc(var(--u) * 3.2);
	--gap: calc(var(--u) * 2.2);
	--radius: calc(var(--u) * 2.4);
	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-ui);
	--font-arab: 'Scheherazade', 'Traditional Arabic', 'Amiri', serif;
}

@font-face {
	font-family: 'Scheherazade';
	src: url('../font/Scheherazade/Scheherazade-regular.woff2') format('woff2');
	font-weight: 400;
}
@font-face {
	font-family: 'Scheherazade';
	src: url('../font/Scheherazade/Scheherazade-bold.woff2') format('woff2');
	font-weight: 700;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body.ds {
	overflow: hidden;
	font: calc(var(--u) * 1.8)/1.35 var(--font-ui);
	color: var(--ink);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'%3E%3Crect x='15' y='15' width='30' height='30'/%3E%3Crect x='15' y='15' width='30' height='30' transform='rotate(45 30 30)'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(1100px 700px at 50% 40%, rgba(212, 174, 85, .10), transparent 65%),
		radial-gradient(1400px 800px at 10% -10%, var(--bg2), transparent 70%),
		linear-gradient(150deg, var(--bg1), var(--bg3) 85%);
	background-color: var(--bg3);
	-webkit-font-smoothing: antialiased;
	cursor: none;
}

/* ---------- kerangka ---------- */
.ds-screen {
	height: 100vh; padding: var(--pad-y) var(--pad-x);
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--gap);
}

/* ---------- header ---------- */
.ds-header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
.ds-brand { display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-width: 0; }
.ds-emblem {
	flex: none; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%;
	display: grid; place-items: center;
	background: radial-gradient(circle at 30% 25%, #1e8a73, #0e5445);
	box-shadow: 0 0 0 2px var(--gold-soft), 0 10px 24px -8px rgba(0, 0, 0, .6);
}
.ds-emblem svg { width: 58%; height: 58%; }
.ds-name { font-size: calc(var(--u) * 3); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); line-height: 1.15; white-space: nowrap; }
.ds-addr { font-size: calc(var(--u) * 1.8); color: var(--muted); margin-top: calc(var(--u) * .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ds-when { display: flex; align-items: center; gap: calc(var(--u) * 2.6); flex: none; }
.ds-date { text-align: right; line-height: 1.25; }
.ds-date .day { font-size: calc(var(--u) * 2.4); font-weight: 700; }
.ds-date .hijri { font-size: calc(var(--u) * 1.9); color: var(--muted); font-weight: 500; }
.ds-time {
	font-size: calc(var(--u) * 8); font-weight: 300; line-height: .9; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
	padding-left: calc(var(--u) * 2.6); border-left: 1px solid var(--line);
}
.ds-time .sec { color: var(--gold); font-weight: 400; }

/* ---------- area tengah ---------- */
.ds-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--gap); min-height: 0; }

/* bingkai slideshow */
.ds-frame { position: relative; min-height: 0; }
.ds-frame-in {
	position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #03140f;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 120px -30px rgba(212, 174, 85, .35);
}
.ds-corner { position: absolute; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border: calc(var(--u) * .55) solid var(--gold); pointer-events: none; z-index: 3; }
.ds-corner.tl { left: calc(var(--u) * -1); top: calc(var(--u) * -1); border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--radius) + var(--u)); }
.ds-corner.tr { right: calc(var(--u) * -1); top: calc(var(--u) * -1); border-left: 0; border-bottom: 0; border-top-right-radius: calc(var(--radius) + var(--u)); }
.ds-corner.bl { left: calc(var(--u) * -1); bottom: calc(var(--u) * -1); border-right: 0; border-top: 0; border-bottom-left-radius: calc(var(--radius) + var(--u)); }
.ds-corner.br { right: calc(var(--u) * -1); bottom: calc(var(--u) * -1); border-left: 0; border-top: 0; border-bottom-right-radius: calc(var(--radius) + var(--u)); }

.ds-slide {
	position: absolute; inset: 0; background: center / cover no-repeat;
	opacity: 0; transition: opacity 1.4s ease;
}
.ds-slide.on { opacity: 1; }
.ds-slide.zoom { animation: kenburns 24s ease-out both; }
.ds-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.ds-frame video.on { opacity: 1; }

/* kutipan (konten) */
.ds-quote { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); }
.ds-quote .q { grid-area: 1 / 1; align-self: center; opacity: 0; transition: opacity 1s ease; }
.ds-quote .q.on { opacity: 1; }
.ds-quote .ar { font-family: var(--font-arab); direction: rtl; line-height: 1.6; color: var(--gold-hi); margin: 0 0 .25em; }
.ds-quote .tx { font-family: var(--font-display); line-height: 1.35; margin: 0; }
.ds-quote .tx p { margin: 0; }

/* kutipan tanpa slideshow: panel penuh */
.ds-quote.big {
	position: relative; min-height: 0; border-radius: var(--radius); padding: calc(var(--u) * 4) calc(var(--u) * 6);
	background: var(--glass); border: 1px solid var(--line); text-align: center; overflow: hidden;
}
.ds-quote.big::before, .ds-quote.big::after {
	content: ""; position: absolute; left: 50%; width: calc(var(--u) * 18); height: 2px; transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ds-quote.big::before { top: calc(var(--u) * 2.4); }
.ds-quote.big::after { bottom: calc(var(--u) * 2.4); }
.ds-quote.big .q { padding: 0 calc(var(--u) * 2); }
.ds-quote.big .ar { font-size: calc(var(--u) * 6.2); }
.ds-quote.big .tx { font-size: calc(var(--u) * 4.4); font-weight: 500; }

/* kutipan di atas slideshow: keterangan bawah bingkai */
.ds-quote.caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 3);
	background: linear-gradient(180deg, transparent, rgba(3, 20, 15, .72) 45%, rgba(3, 20, 15, .92));
	text-align: center;
}
.ds-quote.caption .ar { font-size: calc(var(--u) * 3.8); }
.ds-quote.caption .tx { font-size: calc(var(--u) * 2.7); font-weight: 500; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

/* ---------- panel samping ---------- */
.ds-side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.ds-card {
	border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line);
	padding: calc(var(--u) * 2.4) calc(var(--u) * 2.6);
}
.eyebrow { font-size: calc(var(--u) * 1.6); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

.ds-next { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(212, 174, 85, .16), rgba(255, 255, 255, .04) 60%); border-color: rgba(212, 174, 85, .35); }
.ds-next .nm { font-size: calc(var(--u) * 5); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; margin-top: calc(var(--u) * .6); }
.ds-next .at { font-size: calc(var(--u) * 2); color: var(--muted); }
.ds-next .at b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-next .cd {
	margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 5.6); font-weight: 300; line-height: 1;
	font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ds-next .cd small { font-size: .34em; color: var(--muted); font-weight: 500; letter-spacing: .04em; margin-left: .3em; }
.ds-next .bar { margin-top: calc(var(--u) * 1.6); height: calc(var(--u) * .5); border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ds-next .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width 1s linear; }

.ds-info { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.ds-info .slides { flex: 1; min-height: 0; position: relative; }
.info-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease; overflow: hidden; }
.info-slide.on { opacity: 1; transform: none; }
.info-eyebrow { font-size: calc(var(--u) * 1.6); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: calc(var(--u) * 1); }
.info-title { font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.info-title.long { font-size: calc(var(--u) * 2.2); font-weight: 600; line-height: 1.35; -webkit-line-clamp: 9; }
.info-title p { margin: 0 0 .4em; }
.info-person { font-size: calc(var(--u) * 2.3); color: var(--gold-hi); margin-top: calc(var(--u) * .8); font-weight: 600; }
.info-meta { font-size: calc(var(--u) * 1.9); color: var(--muted); margin-top: calc(var(--u) * .6); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: calc(var(--u) * .75) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 2.1); }
.info-list li:last-child { border-bottom: 0; }
.info-list span { color: var(--muted); font-size: .85em; white-space: nowrap; }
.info-list b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dots { display: flex; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 1.2); }
.ds-dots i { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .4s, width .4s; }
.ds-dots i.on { background: var(--gold); width: calc(var(--u) * 2.4); border-radius: 99px; }

/* ---------- jadwal shalat ---------- */
.ds-prayers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.pr {
	position: relative; text-align: center; border-radius: var(--radius);
	padding: calc(var(--u) * 1.8) calc(var(--u) * 1) calc(var(--u) * 1.6);
	background: var(--glass); border: 1px solid var(--line);
	transition: opacity .6s, background .6s, border-color .6s, transform .6s;
}
.pr .nm { font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pr .tm { font-size: calc(var(--u) * 6.6); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: calc(var(--u) * .3) 0; }
.pr .im { font-size: calc(var(--u) * 1.8); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.35em; transition: opacity .5s; }
.pr .im b { color: var(--ink); font-weight: 600; }
.pr.passed { opacity: .5; }
.pr.next {
	background: linear-gradient(170deg, rgba(212, 174, 85, .32), rgba(212, 174, 85, .08));
	border-color: var(--gold); transform: translateY(calc(var(--u) * -.6));
	box-shadow: 0 0 0 1px var(--gold), 0 20px 50px -20px rgba(212, 174, 85, .55);
}
.pr.next .nm { color: var(--gold-hi); }
.pr .tag {
	position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
	font-size: calc(var(--u) * 1.3); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: #0a3a31; background: var(--gold); padding: .25em .9em; border-radius: 99px; white-space: nowrap; display: none;
}
.pr.next .tag { display: block; }

/* ---------- notifikasi (reload) ---------- */
.ds-toast {
	position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 20;
	padding: calc(var(--u) * 3) calc(var(--u) * 5); border-radius: var(--radius); text-align: center;
	background: rgba(5, 32, 25, .94); border: 1px solid var(--gold); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
	font-size: calc(var(--u) * 3); font-weight: 700; opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none;
}
.ds-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ds-toast small { display: block; font-size: .6em; font-weight: 500; color: var(--muted); margin-top: .3em; }

/* ---------- layar countdown (adzan / iqomah) ---------- */
.cd-screen { height: 100vh; padding: var(--pad-y) var(--pad-x); display: grid; grid-template-rows: auto 1fr auto; transition: opacity 1.2s ease; }
.cd-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
.cd-eyebrow { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.cd-title { font-size: calc(var(--u) * 6.4); font-weight: 800; letter-spacing: -.01em; margin: calc(var(--u) * .6) 0 calc(var(--u) * 3); }
.cd-ring { position: relative; margin: 0 auto; width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.cd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cd-ring .track { stroke: rgba(255, 255, 255, .08); }
.cd-ring .prog { stroke: url(#cdGold); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(212, 174, 85, .55)); }
.cd-num {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-size: calc(var(--u) * 15); font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.cd-num.long { font-size: calc(var(--u) * 11); }
.cd-msg { margin: calc(var(--u) * 3.4) auto 0; min-height: 3.2em; display: grid; max-width: calc(var(--u) * 120); }
.cd-msg p { grid-area: 1 / 1; margin: 0; font-size: calc(var(--u) * 3); color: var(--muted); opacity: 0; transition: opacity 1s ease; line-height: 1.4; }
.cd-msg p.on { opacity: 1; }
.cd-big {
	font-size: calc(var(--u) * 13); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; color: var(--ink);
	text-shadow: 0 0 calc(var(--u) * 6) rgba(212, 174, 85, .45); animation: glow 1.6s ease-in-out infinite;
}
.cd-big small { display: block; font-size: .32em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .6em; text-shadow: none; }
.cd-footer { text-align: center; color: var(--muted); font-size: calc(var(--u) * 2); }
.cd-footer b { color: var(--ink); font-variant-numeric: tabular-nums; }
body.sleep { background: #000 !important; }
body.sleep .cd-screen { opacity: 0; }

@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }