:root {
  --n-bg: #ffffff;
  --n-text: #0a0a0a;
  --n-muted: #6b7280;
  --n-accent: #0f6e4f;
  --n-line: #e5e7eb;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--n-bg);
  color: var(--n-text);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

.papan-min {
  height: 100vh;
  width: 100vw;
  display: grid;
  /* The body row gets a solid minimum height so its slider column - whose
     own content is entirely absolutely-positioned and so has ~0 intrinsic
     height - reliably stretches to a real, proportionate box instead of
     collapsing (which looked cropped) or being forced full-width-and-short
     (which made photos look shrunk). */
  grid-template-rows: auto auto auto minmax(320px, 1fr) auto;
  gap: 0;
}

.min-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-bottom: 3px solid var(--n-text);
}

.min-header .brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.min-header .brand img {
  width: 54px;
  height: 54px;
  border-radius: 0.75rem;
  object-fit: cover;
}

.min-header .brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--n-text);
  color: #fff;
}

.min-header h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 800;
}

.min-header p {
  margin: 0;
  color: var(--n-muted);
  font-size: 0.95rem;
}

.min-header .clock {
  text-align: right;
}

.min-header .time {
  font-size: 2.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.min-header .date {
  color: var(--n-muted);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.min-next {
  padding: 1.1rem 3rem;
  background: var(--n-accent);
  color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
}

.min-next .countdown-box { display: flex; align-items: baseline; gap: 0.75rem; }
.min-next .cd-label { font-size: 1.1rem; opacity: 0.85; }
.min-next .cd-value { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.prayer-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--n-line);
}

.prayer-tile {
  text-align: center;
  padding: 1rem 0.25rem;
  border-right: 1px solid var(--n-line);
}

.prayer-tile:last-child { border-right: none; }

.prayer-tile.next {
  background: var(--n-text);
  color: #fff;
}

.prayer-tile .label {
  font-size: 0.85rem;
  color: var(--n-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prayer-tile.next .label { color: #d1d5db; }

.prayer-tile .value {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.min-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 0;
  min-height: 0;
}

.min-body > section {
  padding: 1.25rem 2rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--n-line);
}

.min-body > section:last-child { border-right: none; }

.min-body h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n-muted);
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-area::-webkit-scrollbar { display: none; }

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--n-line);
  font-size: 1rem;
}

.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--n-muted); }
.info-row .v { font-weight: 700; text-align: right; }

.info-group-label {
  color: var(--n-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.6rem 0 0.1rem;
}

/* The slider column's own content (slider-track/empty/caption) is entirely
   absolutely-positioned, so it has ~0 intrinsic height on its own. Giving
   the .min-body row a solid minmax() floor (see .papan-min) and stretching
   this section to fill it means .slider-box - the inner frame - always gets
   a real, proportionate box (not a collapsed sliver, not a full-width
   short banner) for photos to sit in without looking shrunk or cropped. */
.slider-box {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 1rem;
  background: #f3f4f6;
}

.slider-box .slider-track {
  position: absolute;
  inset: 0;
}

.slider-box .slider-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.slider-box .slider-track img.active { opacity: 1; }

.slider-box .slider-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--n-muted);
}

.slider-box .slider-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  color: #fff;
  padding: 0.75rem 1rem 0.5rem;
  min-height: 1.5rem;
}

.slider-box .slider-caption h3 { margin: 0; font-size: 1rem; }
.slider-box .slider-caption p { margin: 0; font-size: 0.85rem; opacity: 0.85; }

.min-ticker {
  border-top: 3px solid var(--n-text);
  background: #f9fafb;
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.min-ticker .ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 35s linear infinite;
  font-size: 1.1rem;
  font-weight: 600;
}

.min-ticker .ticker-track span { margin-right: 4rem; }
.min-ticker .ticker-track span i { color: var(--n-accent); margin-right: 0.5rem; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (max-width: 900px) {
  html, body { height: auto; overflow: auto; }
  .papan-min { height: auto; min-height: 100vh; }
  .min-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.5rem; }
  .min-header .clock { text-align: left; }
  .prayer-grid { grid-template-columns: repeat(4, 1fr); }
  .prayer-tile { border-bottom: 1px solid var(--n-line); }
  .min-body { grid-template-columns: 1fr; }
  .min-body > section { border-right: none; border-bottom: 1px solid var(--n-line); max-height: 40vh; }
  .min-slider { max-height: none; }
  .slider-box { min-height: 220px; }
}