/* Ibadah: tab utama, jadwal sholat, kiblat, tasbih, buku doa, dan panduan manasik.
   Warna mentah hanya dipakai di atas kartu hero gelap (onyx). */

.worship-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.worship-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.city-chip {
  min-height: var(--tap);
  border-color: var(--gold-border);
  color: var(--gold-strong);
  background: var(--gold-soft);
}

/* ---------- Kartu sholat berikutnya ---------- */
.prayer-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.prayer-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.prayer-hero__zone {
  padding: 3px 10px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--on-onyx-muted);
  text-transform: uppercase;
}

.prayer-hero__main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.prayer-hero__name {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.prayer-hero__time {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.prayer-hero__countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--on-onyx-muted);
}

.prayer-hero__countdown .num {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--on-onyx);
}

.prayer-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.prayer-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 2px;
  border-radius: var(--radius-sm);
}

.prayer-strip__item[data-current] {
  background: rgb(209 173 79 / 18%);
}

.prayer-strip__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--on-onyx-muted);
}

.prayer-strip__item[data-current] .prayer-strip__label {
  color: #e2c987;
}

.prayer-strip__time {
  font-size: var(--fs-sm);
  font-weight: 800;
}

/* ---------- Kartu fitur ---------- */
.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.feature__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--gold-border);
  border-radius: 15px;
  color: var(--gold);
  background: var(--gold-soft);
}

.card--gold .feature__icon {
  background: var(--surface);
}

.feature__title {
  font-weight: 800;
  line-height: 1.3;
}

.feature__sub {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}

.feature__count {
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

.dzikir-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dzikir-card .feature__icon {
  margin-bottom: 0;
}

.dzikir-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dzikir-card .progress {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
}

.daily-dua {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.daily-dua__arabic {
  font-size: 26px;
  line-height: 2.1;
}

.daily-dua__meaning {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.daily-dua__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--gold-strong);
}

/* ---------- Jadwal sholat ---------- */
.prayer-row[data-current] {
  background: var(--gold-soft);
}

.prayer-row__now {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--gold-strong);
}

.prayer-row__time {
  flex: none;
  margin-right: var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.prayer-row__spacer {
  flex: none;
  width: 51px;
}

.prayer-week {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  text-align: center;
}

.prayer-week th,
.prayer-week td {
  padding: var(--space-3) 2px;
}

.prayer-week th:first-child {
  padding-left: var(--space-4);
  text-align: left;
}

.prayer-week td:last-child,
.prayer-week th:last-child {
  padding-right: var(--space-3);
}

.prayer-week thead th {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.prayer-week tbody tr {
  border-top: 1px solid var(--hairline);
}

.prayer-week tbody th {
  font-weight: 800;
  white-space: nowrap;
}

.prayer-week td {
  font-weight: 600;
  color: var(--ink-2);
}

.prayer-week tr[data-today] {
  background: var(--gold-soft);
}

.prayer-week tr[data-today] td {
  font-weight: 800;
  color: var(--ink);
}

/* ---------- Kompas kiblat ---------- */
.compass {
  --bearing: 0deg;

  position: relative;
  width: min(100%, 320px);
  margin: var(--space-2) auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  box-shadow:
    var(--shadow-float),
    inset 0 0 0 1px var(--gold-border);
  aspect-ratio: 1;
}

.compass__dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.compass__ring {
  fill: none;
  stroke: var(--gold-border);
}

.compass__ring--inner {
  stroke: var(--hairline-strong);
  stroke-dasharray: 2 4;
}

.compass__tick {
  stroke: var(--faint);
}

.compass__tick--major {
  stroke: var(--gold);
  stroke-width: 1.6;
}

.compass__cardinal {
  font-size: 11px;
  font-weight: 800;
  fill: var(--ink-2);
}

.compass__kaaba-halo {
  fill: var(--gold-logo);
}

.compass__kaaba {
  fill: none;
  stroke: var(--on-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lebar nol: wadah jarum berputar di pusat kompas tanpa menambah area gulir. */
.compass__needle {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 0;
  transform: rotate(var(--bearing));
  transition: transform 1600ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.compass__needle-body {
  position: absolute;
  top: 13%;
  left: 0;
  width: 14px;
  height: 37%;
  margin-left: -7px;
  background: var(--gold-gradient);
  filter: drop-shadow(0 4px 8px rgb(169 131 47 / 40%));
  transform-origin: 50% 100%;
  animation: compass-sway 4.2s ease-in-out infinite;
  clip-path: polygon(50% 0, 100% 100%, 50% 90%, 0 100%);
}

.compass[data-calibrating] .compass__needle-body {
  animation: compass-spin 2200ms var(--ease-ios);
}

@keyframes compass-sway {
  0%,
  100% {
    transform: rotate(-1.6deg);
  }

  50% {
    transform: rotate(1.6deg);
  }
}

@keyframes compass-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}

.compass__center {
  position: absolute;
  inset: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.compass__degree {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.compass__direction {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-card__label {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.stat-card__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.25;
}

.stat-card__unit {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Tasbih digital ---------- */
.tasbih__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.tasbih__arabic {
  font-size: 38px;
  line-height: 1.9;
  text-align: center;
}

.tasbih {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 288px);
  margin-inline: auto;
  border-radius: 50%;
  color: var(--on-onyx);
  background: var(--hero-gradient);
  box-shadow: var(--shadow-float);
  transition: transform var(--duration-fast) var(--ease);
  aspect-ratio: 1;
  user-select: none;
}

.tasbih:active {
  transform: scale(0.965);
}

.tasbih::after {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold-logo);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
}

.tasbih[data-pulse="tap"]::after {
  animation: tasbih-ripple 520ms var(--ease) both;
}

.tasbih[data-pulse="complete"]::after {
  border-width: 4px;
  animation: tasbih-ripple 1100ms var(--ease) 2 both;
}

@keyframes tasbih-ripple {
  from {
    transform: scale(1);
    opacity: 0.9;
  }

  to {
    transform: scale(1.16);
    opacity: 0;
  }
}

.tasbih__ring {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  transform: rotate(-90deg);
}

.tasbih__track,
.tasbih__progress {
  fill: none;
  stroke-width: 4;
}

.tasbih__track {
  stroke: rgb(255 255 255 / 10%);
}

.tasbih__progress {
  stroke: var(--gold-logo);
  stroke-linecap: round;
}

.tasbih__count {
  position: relative;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tasbih[data-pulse="complete"] .tasbih__count {
  color: #e2c987;
}

.tasbih__target {
  position: relative;
  margin-top: var(--space-1);
  font-weight: 700;
  color: var(--on-onyx-muted);
}

.tasbih__hint {
  position: relative;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--on-onyx-muted);
}

/* ---------- Buku doa ---------- */
.dua-row__number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--gold-strong);
  background: var(--gold-soft);
}

.dua-row__saved {
  display: inline-flex;
  flex: none;
  color: var(--gold);
}

.dua-row__saved .icon,
.dua-bookmark[aria-pressed="true"] .icon {
  fill: currentcolor;
}

.dua-bookmark[aria-pressed="true"] {
  color: var(--gold);
}

.dua-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.dua-card__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dua-card__source {
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

.dua-card__sizes {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.dua-tool {
  width: var(--tap);
  height: 38px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink);
  transition: background-color var(--duration-fast) var(--ease);
}

.dua-tool--large {
  font-size: var(--fs-xl);
}

.dua-tool:active:not(:disabled) {
  background: var(--surface-raised);
}

.dua-tool:disabled {
  opacity: 0.3;
}

/* <hr> di dalam flex kolom menyusut ke lebar nol karena margin auto bawaannya. */
.dua-card .divider {
  width: 100%;
  margin: 0;
}

.dua-card__arabic {
  line-height: 2.15;
}

.dua-card__arabic[data-size="sm"] {
  font-size: 24px;
}

.dua-card__arabic[data-size="md"] {
  font-size: 30px;
}

.dua-card__arabic[data-size="lg"] {
  font-size: 36px;
}

.dua-card__arabic[data-size="xl"] {
  font-size: 42px;
}

.dua-card__latin {
  font-style: italic;
  line-height: 1.65;
  color: var(--gold-strong);
}

.dua-card__meaning {
  line-height: 1.7;
  color: var(--ink-2);
}

.audio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.audio__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--on-gold);
  background: var(--gold-gradient);
  transition: transform var(--duration-fast) var(--ease);
}

.audio__toggle:active {
  transform: scale(0.92);
}

.audio__toggle .icon {
  margin-left: 2px;
  fill: currentcolor;
}

.audio__pause {
  width: 14px;
  height: 16px;
  border-inline: 5px solid currentcolor;
}

.audio__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.audio__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.audio__title {
  font-size: var(--fs-sm);
  font-weight: 800;
}

.audio__time {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.audio__track {
  background: var(--hairline-strong);
}

.audio__bar {
  transition: width 250ms linear;
}

/* Navigasi sebelum/berikut di footer detail doa dan langkah manasik. */
.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pager__btn {
  justify-content: flex-start;
  min-width: 0;
  padding-inline: var(--space-3);
  text-align: left;
}

.pager__btn--next {
  flex-direction: row-reverse;
  text-align: right;
}

.pager__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pager__label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.pager__title {
  font-size: var(--fs-sm);
}

/* ---------- Panduan manasik ---------- */
.guide-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.guide-hero__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.guide-step {
  align-items: flex-start;
}

.guide-step .timeline__dot {
  margin-top: var(--space-4);
}

.guide-step::before {
  top: 44px;
  bottom: calc(var(--space-4) * -1);
}

.guide-step__card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.guide-step:active .guide-step__card {
  transform: scale(0.985);
}

.guide-step__title {
  font-weight: 800;
  line-height: 1.3;
}

.guide-step__place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-strong);
}

.guide-step__summary {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.guide-photo {
  min-height: 196px;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.guide-photo .photo__glyph {
  top: 36%;
  left: 80%;
  width: 28%;
}

.guide-photo__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.guide-photo__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #e2c987;
  text-transform: uppercase;
}

.guide-photo__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.guide-photo__place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--on-onyx-muted);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bullet-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.55;
}

.bullet-list__number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--gold-strong);
  background: var(--gold-soft);
}

.bullet-list__item--danger .icon {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  color: var(--danger);
  background: var(--danger-soft);
  stroke-width: 2.4;
}