/* Beranda. Warna mentah hanya dipakai di atas kartu hero gelap (onyx), sesuai aturan token. */

/* Angka emas di atas kartu hero (dipakai juga oleh kartu sholat di Ibadah). */
.gold-text {
  color: transparent;
  background: var(--gold-gradient);
  background-clip: text;
}

/* <button> bawaan browser memakai align-items: flex-start, sehingga anak kartu-tombol berkolom tidak melebar penuh. */
.home-trip__main,
.home-trip--upcoming,
.home-product,
.home-nearest .trip-card {
  align-items: stretch;
}

/* ---------- Header: menempel di atas, berubah jadi kaca dan mengecil saat digulir ---------- */
.home-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc((var(--safe-top) + var(--space-4)) * -1) calc(var(--gutter) * -1) 0;
  padding: calc(var(--safe-top) + var(--space-3)) var(--gutter) var(--space-3);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.home-header[data-scrolled] {
  border-bottom-color: var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
}

.home-header__avatar {
  flex: none;
  border-radius: 15px;
  transition: transform var(--duration) var(--ease-ios);
}

.home-header__avatar:active {
  transform: scale(0.92);
}

.home-header__greeting {
  flex: 1;
  min-width: 0;
}

.home-header__salam {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--muted);
  transition:
    margin-top var(--duration) var(--ease-ios),
    opacity var(--duration-fast) var(--ease);
}

/* Salam dilipat dengan margin negatif (bukan overflow) supaya nama naik mulus tanpa memotong teks. */
.home-header[data-scrolled] .home-header__salam {
  margin-top: -20px;
  opacity: 0;
}

.home-header__name {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.home-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
}

/* ---------- Kartu perjalanan ---------- */
.home-trips {
  gap: 0;
}

/* Ruang vertikal ekstra supaya bayangan kartu tidak terpotong oleh area gulir horizontal. */
.home-trips__track {
  align-items: stretch;
  margin-bottom: calc(var(--space-5) * -1);
  padding-block: var(--space-4) var(--space-8);
}

.home-trips__track > .home-trip {
  width: 100%;
  box-shadow: var(--shadow-soft);
}

.home-trip {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  color: var(--on-onyx);
}

/* Ornamen geometris samar untuk kartu hero onyx (perjalanan, sholat berikutnya, panduan manasik). */
.hero-pattern::before {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='%23ecd9a3' stroke-opacity='.13'%3E%3Cpath d='M28 2 36 20 54 28 36 36 28 54 20 36 2 28 20 20Z'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  mask-image: linear-gradient(215deg, #000 0%, transparent 58%);
  pointer-events: none;
  content: "";
}

.hero-pattern > * {
  position: relative;
}

.home-trip .progress {
  display: block;
  width: 100%;
}

.home-trip__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
}

.home-trip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 24px;
}

.home-trip__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #e2c987;
  text-transform: uppercase;
}

.home-trip__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7bd6ad;
}

.home-trip__pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: home-ping 1.8s var(--ease) infinite;
  content: "";
}

@keyframes home-ping {
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

.home-trip__hint {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--on-onyx-muted);
}

.home-trip__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

.home-trip__day,
.home-trip__count-value {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.home-trip__day {
  font-size: var(--fs-display);
}

.home-trip__city {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.home-trip__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.home-trip__meta {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--on-onyx-muted);
}

.home-trip__main .progress {
  margin-top: var(--space-2);
}

.home-trip__agenda {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--radius-md);
  text-align: left;
  background: rgb(255 255 255 / 7%);
  transition: background-color var(--duration-fast) var(--ease);
}

.home-trip__agenda:active,
.home-trip__shortcut:active {
  background: rgb(255 255 255 / 14%);
}

.home-trip__agenda > .icon {
  color: var(--on-onyx-muted);
}

.home-trip__agenda-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #e2c987;
  background: rgb(209 173 79 / 18%);
}

.home-trip__agenda-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.home-trip__agenda-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--on-onyx-muted);
  text-transform: uppercase;
}

.home-trip__agenda-title {
  font-weight: 800;
  line-height: 1.35;
}

.home-trip__agenda-place {
  font-size: var(--fs-xs);
  color: var(--on-onyx-muted);
}

.home-trip__shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-trip__shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background: rgb(255 255 255 / 7%);
  transition: background-color var(--duration-fast) var(--ease);
}

.home-trip__shortcut .icon {
  color: #e2c987;
}

.home-trip__shortcut--danger,
.home-trip__shortcut--danger .icon {
  color: #f3a795;
}

.home-trip--upcoming {
  text-align: left;
}

.home-trip__countdown {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: auto;
  padding-block: var(--space-3);
}

.home-trip__count {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.home-trip__count-value {
  font-size: 64px;
  line-height: 0.95;
}

.home-trip__count-unit {
  padding-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--on-onyx-muted);
}

.home-trip__overall {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 4px;
}

.home-trip__overall-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
}

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

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

.home-trip__part {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-trip__part-head {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--on-onyx-muted);
}

.home-trip__part-head .num {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--on-onyx);
}

.home-invite {
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.home-invite__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.home-invite__ghost {
  border-color: rgb(255 255 255 / 24%);
  color: var(--on-onyx);
}

.home-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.home-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--faint);
  transition:
    width var(--duration) var(--ease-ios),
    background-color var(--duration) var(--ease-ios);
}

.home-dots__dot[data-active] {
  width: 20px;
  background: var(--gold);
}

/* ---------- Perlu tindakan ---------- */
.home-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: var(--space-1);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--danger);
  vertical-align: 2px;
  background: var(--danger-soft);
}

.home-task__amount {
  display: block;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Menu cepat ---------- */
.home-menu {
  gap: var(--space-2) var(--space-1);
}

/* ---------- Sorotan toko ---------- */
.home-product {
  display: flex;
  flex-direction: column;
  width: 156px;
}

.home-product__photo {
  height: 108px;
  border-radius: 0;
}

.home-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.home-product__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
}

.home-product__price {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--gold-strong);
}

/* ---------- Sholat berikutnya ---------- */
.home-prayer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

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

.home-prayer__name {
  font-size: var(--fs-lg);
  font-weight: 800;
}

.home-prayer__countdown {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
}

.home-prayer__countdown-value {
  font-weight: 800;
  color: var(--gold-strong);
}

.home-closing {
  margin-top: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}