/* ==========================================================================
   11 · Gift (Wedding Gift)
   Referensi: 10.00 Wedding Gift - 1.png (Amplop Digital) & - 2.png (Kirim Hadiah)
   (frame 412 × 917). Konten di tengah layar; saat pindah tab, tinggi isi
   dianimasikan (tabs.js) sehingga seluruh konten bergeser halus seperti desain.
   ========================================================================== */

.gift {
  --gift-gutter: clamp(1rem, 5.83vw, 1.5rem); /* 24px di frame 412 */
  --gift-muted: color-mix(in srgb, var(--color-ink) 60%, var(--color-paper));
  /* Ruang ekstra di bawah layar pertama (seperti Love Story): tamu bisa scroll
     sampai tombol paling bawah (mis. Salin Alamat) berada di tengah layar
     sebelum snap ke section berikutnya. Tampilan awal tetap persis desain,
     karena konten tetap di tengah layar pertama. */
  --gift-extra: 20svh;

  /* clip (bukan hidden) supaya bunga sticky di dalamnya tetap bekerja */
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--frame-h) + var(--gift-extra));
  padding: 2rem var(--gift-gutter) calc(2rem + var(--gift-extra));
}

/* Bunga matahari terpotong di kiri atas. Menempel (sticky) selama tamu
   scroll di section ini, dan tidak ikut bergeser saat pindah tab.
   Pembungkus setinggi 0 di awal section; konten di-tengah-kan lewat
   margin auto (bukan justify-content) supaya pembungkus tetap di atas. */
.gift__sticky {
  position: sticky;
  top: 2rem;
  z-index: 0;
  height: 0;
  margin-inline: calc(-1 * var(--gift-gutter));
}

.gift__flower {
  position: absolute;
  top: 0.54rem; /* 40.6px dari atas layar */
  left: -6.2rem;
  width: 12.25rem; /* 196px */
  aspect-ratio: 1;
}

.gift__flower img {
  width: 100%;
  height: 100%;
}

.gift__content {
  position: relative;
  z-index: 1;
  /* Di tengah layar pertama (ruang ekstra di bawahnya tidak ikut dihitung) */
  margin-block: auto;
}

/* --- Judul & deskripsi --------------------------------------------------- */

.gift__title {
  font-size: clamp(3.75rem, 17.43vw, 4.4875rem); /* 71.8px di frame 412 */
  font-weight: 200;
  line-height: 1;
  text-align: right;
}

.gift__title-line {
  display: block;
}

.gift__desc {
  margin-top: 1.2rem;
  font-size: 0.875rem; /* 14px */
  line-height: 1.4286; /* 20px */
  text-align: right;
}

/* --- Tab ------------------------------------------------------------------ */

.gift__tabs {
  --tab-gap: 0.29rem; /* ±4.7px */
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tab-gap);
  margin-top: 1.49rem;
}

.gift__tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 2.75rem; /* 44px */
  border: 1px solid var(--color-ink);
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: var(--color-ink);
  transition: border-color var(--dur-base) var(--ease-snap);
}

.gift__tab[aria-selected="true"] {
  border-color: transparent;
}

.gift__tab .icon {
  font-size: 1.375rem;
}

/* Blok kuning tab aktif — bergeser ke tab yang dipilih */
.gift__tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - var(--tab-gap)) / 2);
  height: 100%;
  background: var(--color-accent);
  transform: translateX(calc(var(--tab-index, 0) * (100% + var(--tab-gap))));
  transition: transform 420ms var(--ease-overshoot);
}

/* --- Kartu ---------------------------------------------------------------- */

.gift__panels {
  margin-top: 0.75rem;
  transition: height 380ms var(--ease-snap);
}

.gift__panel {
  display: grid;
  gap: 0.54rem;
  transition:
    opacity var(--dur-exit) var(--ease-snap),
    transform var(--dur-exit) var(--ease-snap);
}

/* Isi tab lama turun-hilang */
.gift__panel.is-leaving {
  opacity: 0;
  transform: translateY(0.75rem);
}

/* Isi tab baru naik bergantian */
.gift__panel.is-entering > * {
  animation: gift-panel-in 600ms var(--ease-snap) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes gift-panel-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.gift__card {
  padding: 0.944rem 1rem 0.88rem;
  border: 1px solid var(--color-ink);
}

.gift__bank {
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--gift-muted);
}

.gift__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

.gift__number {
  font-size: clamp(1.625rem, 7.77vw, 2rem); /* 32px di frame 412 */
  line-height: 1;
}

.gift__holder {
  margin-top: 0.73rem;
  font-size: 0.875rem; /* 14px */
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* Tombol salin: ikon → centang + "Tersalin" selama 2 detik */
.gift__copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem;
  margin: -0.25rem;
  color: var(--color-ink);
}

.gift__copy .icon {
  font-size: 1.375rem;
  transition: transform var(--dur-base) var(--ease-overshoot);
}

.gift__copied {
  /* Melayang di samping ikon, tidak memakan tempat */
  position: absolute;
  left: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition:
    opacity var(--dur-fast) var(--ease-snap),
    transform var(--dur-fast) var(--ease-snap);
}

.is-copied .icon {
  transform: scale(1.15);
}

.is-copied .gift__copied {
  opacity: 1;
  transform: none;
}

/* --- Kartu alamat (Kirim Hadiah) ----------------------------------------- */

.gift__address dt {
  margin-top: 0.94rem;
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gift-muted);
}

.gift__address dt:first-child {
  margin-top: 0;
}

.gift__address dd {
  margin-top: 0.26rem;
  font-size: 1rem; /* 16px */
  line-height: 1.18;
}

.gift__address a {
  text-decoration: none;
}

.gift__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.975rem;
}

.gift__card--address {
  padding-top: 0.87rem;
  padding-bottom: 0.94rem;
}

.gift__actions .button {
  min-height: 2.75rem; /* 44px */
}

@media (prefers-reduced-motion: reduce) {
  .gift__tab-indicator,
  .gift__panels,
  .gift__panel {
    transition: none;
  }

  .gift__panel.is-entering > * {
    animation: none;
  }
}