/* ==========================================================================
   Tema 2 — "Heritage": blush / terrakota, kabartma zarf açılışı
   Renk ve yazı tipi ayarları :root altındadır.
   ========================================================================== */

:root {
  /* DÜZENLE: renkler */
  --cream: #fbf3ee;
  --cream-deep: #f5e6dc;
  --card: #fffaf6;
  --ink: #4a3b33;
  --ink-soft: #917f72;
  --terra: #c0714a;
  --terra-deep: #a55b37;
  --sage: #93a585;
  --wax: #a83f37;
  --line: #ecdccf;

  /* DÜZENLE: zarfın rengi — bordo kabartma çiçekli kâğıt */
  --env-light: #7d2938;
  --env-mid: #6b2130;
  --env-deep: #521826;
  --env-shadow: #330f1a;
  --env-gold: #d9b463;
  /* DÜZENLE: zarf fotoğrafı */
  --env-photo: url("../img/envelope.jpg");
  /* DÜZENLE: zarftan çıkan kartın arka plan görseli. Dikey (yaklaşık 9:16)
     ve üst tarafı boş bir görsel seç — yazılar oraya oturuyor. Dosya yoksa
     kart sade krem kâğıda düşer, tasarım bozulmaz. */
  --card-photo: url("../img/card-bg.jpg");
  /* Görselin düz zemin rengi. Görseli değiştirirsen buradan da güncelle,
     yoksa kartın kenarlarında ince bir renk farkı çizgisi görünür. */
  --card-sky: #e3e4de;

  --script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --page: 32rem;
  --gutter: clamp(1.25rem, 6vw, 2.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
  height: 100svh;
}

h1, h2, h3 {
  font-weight: 400;
  margin: 0;
}

p {
  margin: 0 0 1rem;
}

img {
  max-width: 100%;
  display: block;
}

/* display kuralları hidden özniteliğini ezmesin */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Ortak parçalar
   -------------------------------------------------------------------------- */

section {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(3rem, 11vw, 4.5rem) var(--gutter);
  text-align: center;
}

.script {
  font-family: var(--script);
  font-size: clamp(2.5rem, 10vw, 3.25rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.5rem;
}

.heart {
  display: block;
  color: var(--terra);
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--terra);
  color: var(--terra-deep);
}

.btn--solid {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  letter-spacing: 0.1em;
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  color: #fff;
}

.btn--wide {
  width: 100%;
  max-width: 20rem;
}

.btn__icon {
  font-size: 0.9em;
  line-height: 1;
}

svg.btn__icon {
  width: 0.85em;
  height: 1.05em;
  fill: currentColor;
  flex: none;
}

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Giriş — kabartma zarf + mum mührü
   -------------------------------------------------------------------------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--gutter);
  text-align: center;
  background-color: #1c1216;
  background-image:
    radial-gradient(70% 45% at 50% 42%, #2e1c22 0%, #1c1216 65%, #120b0e 100%);
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}

/* zarfın arkasındaki sıcak ışık — mekân fotoğrafındaki ampul parıltısı */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 30% at 50% 42%,
    rgba(217, 180, 99, 0.16) 0%,
    rgba(160, 60, 70, 0.10) 45%,
    rgba(28, 18, 22, 0) 100%);
}

.intro.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- zarf: iki kanatlı (gatefold) ---- */

.envelope {
  position: relative;
  /* DÜZENLE: fotoğrafın en-boy oranı (genişlik / yükseklik) */
  /* Zarf çok uzun (736/1308). Sadece genişliğe bakınca kısa telefonlarda
     (iPhone SE, 8) giriş ekranı taşıyor, zarfın üstü kesiliyor ve "Zarfı Aç"
     butonu ekranın altında kalıyordu. 33svh sınırı bunu engelliyor. */
  width: min(16.5rem, 64vw, 30svh);
  aspect-ratio: 736 / 1308;
  margin-bottom: 2rem;
  perspective: 1500px;
  animation: env-in 0.9s var(--ease) both;
  filter: drop-shadow(0 18px 40px rgba(12, 4, 8, 0.75));
}

@keyframes env-in {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.envelope__inside,
.envelope__top,
.envelope__card,
.envelope__flap {
  position: absolute;
  inset: 0;
  border-radius: 3px;
}

/* zarfın iç yüzeyi — kapaklar açılınca görünür */
.envelope__inside {
  z-index: 1;
  background:
    linear-gradient(to bottom, #2a0d15 0%, #45141f 38%, #3a1019 100%);
  box-shadow: inset 0 14px 26px -12px rgba(0, 0, 0, 0.9);
}

/* fotoğrafın üst üçgeni: arka panel, açılışta yerinde kalır */
.envelope__top {
  z-index: 2;
  background-image: var(--env-photo);
  background-size: 100% 100%;
  background-position: 0 0;
  clip-path: polygon(0% 0%, 100% 0%, 50.4% 39%);
}

/* içerideki kart.
   z-index kapaklardan (4, 5) yüksek: kart artık yukarı çıkmak yerine
   yerinde büyüdüğü için açılmış kapakların üstüne taşıyor; altta kalsaydı
   isimlerin uçlarını kapaklar örterdi. Kart açılışa kadar opacity 0
   olduğundan zarf kapalıyken dışarı sızmıyor. */
.envelope__card {
  z-index: 6;
  left: 8%;
  right: 8%;
  top: 11%;
  bottom: 11%;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.6rem 1rem 1rem;
  /* Görsel "contain" ile tamamı görünecek şekilde oturur — kırpılırsa köşk
     yukarı çıkıp yazıların üstüne biniyordu. Yanlarda kalan ince boşluklar
     görselin zemin rengiyle (--card-sky) doldurulduğu için dikiş görünmez.
     Üstteki perde, görsel değiştirilirse yazı okunaklı kalsın diye duruyor. */
  background-color: var(--card-sky);
  background-image:
    linear-gradient(to bottom,
      rgba(227, 228, 222, 0.9) 0%,
      rgba(227, 228, 222, 0.5) 26%,
      rgba(227, 228, 222, 0) 44%),
    var(--card-photo);
  background-size: auto, contain;
  background-position: center top, center bottom;
  background-repeat: no-repeat;
  box-shadow: 0 12px 30px -14px rgba(12, 4, 8, 0.9);
  opacity: 0;
  /* Yazılar ekran değil kart genişliğine göre ölçekleniyor: zarf kısa
     ekranlarda küçüldüğünde vw'ye bağlı ölçüler kartla orantısız kalıp
     satırları kırıyordu. */
  container-type: inline-size;
}

/* Kart içindeki yazılar. Paragrafların genel 16px alt boşluğu buradan
   sıfırlanıyor — ızgara zaten gap ile boşluk veriyor, ikisi üst üste
   binince tarih satırı köşkün kubbesine değiyordu. */
.envelope__card > * {
  margin: 0;
}

.envelope__eyebrow {
  /* Dar telefonlarda kart 172 px'e kadar iniyor; sabit boyutta bu satır
     ikiye kırılıp tarihi köşkün kubbesine itiyordu. Ölçüler kart
     genişliğiyle birlikte küçülüyor. */
  font-size: clamp(0.44rem, 5.8cqw, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

.envelope__names {
  font-family: var(--script);
  font-size: clamp(1.05rem, 12.5cqw, 1.95rem);
  line-height: 1.15;
  color: var(--ink);
}

.envelope__date {
  font-size: clamp(0.55rem, 7.2cqw, 0.85rem);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* İnce altın çizgiler — yazı bloğunu üstten ve alttan kapatır */
.envelope__rule {
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--env-gold) 22%, var(--env-gold) 78%, transparent);
  opacity: 0.85;
}

/* mühürlü kapaklar — mühür tam ortada olduğu için ikiye ayrılır */
.envelope__flap {
  background-image: var(--env-photo);
  background-size: 100% 100%;
  background-position: 0 0;
  will-change: transform;
}

.envelope__flap--left {
  z-index: 4;
  transform-origin: left center;
  clip-path: polygon(0% 0%, 50.4% 39%, 50.4% 100%, 0% 100%);
}

.envelope__flap--right {
  z-index: 5;
  transform-origin: right center;
  clip-path: polygon(100% 0%, 50.4% 39%, 50.4% 100%, 100% 100%);
}

/* kapak 90 dereceyi geçince arkası görünür: iç kâğıt bunu örter */
.envelope__flap::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to bottom, #4a1523 0%, #62202f 45%, #3f1220 100%);
}

/* ---- açılış: kanatlar sağa ve sola ---- */

.intro.is-opening .envelope__flap--left {
  animation: flap-left 1.5s cubic-bezier(0.5, 0, 0.25, 1) 0.25s forwards;
}

@keyframes flap-left {
  0%   { transform: rotateY(0deg);    filter: brightness(1); }
  100% { transform: rotateY(-126deg); filter: brightness(0.72); }
}

.intro.is-opening .envelope__flap--right {
  animation: flap-right 1.5s cubic-bezier(0.5, 0, 0.25, 1) 0.25s forwards;
}

@keyframes flap-right {
  0%   { transform: rotateY(0deg);   filter: brightness(1); }
  100% { transform: rotateY(126deg); filter: brightness(0.72); }
}

/* iç yüz, kapak 90 dereceyi geçerken belirir */
.intro.is-opening .envelope__flap::after {
  animation: flap-back 1.5s linear 0.25s forwards;
}

@keyframes flap-back {
  0%, 52%  { opacity: 0; }
  62%      { opacity: 1; }
  100%     { opacity: 1; }
}

/* ---- kâğıt dokusu ---- */

:root {
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Her zarf yüzeyine gren + ince lif dokusu. clip-path üst öğede
   olduğu için pseudo-element de aynı biçimde kırpılır. */
.envelope__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    var(--paper-noise),
    repeating-linear-gradient(96deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      rgba(120, 70, 26, 0.035) 1px 2px,
      transparent 2px 5px);
  background-size: 140px 140px, auto;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Arka planda görsel varken doku onu bulandırmasın diye hafif tutuluyor. */
.envelope__card::after {
  opacity: 0.2;
}


/* ---- açılış sırası: mühür → kapak → kart ---- */

/* Kart yerinde durup öne doğru büyür. Önceden translateY(-46%) ile yukarı
   çıkıyordu; küçük telefonlarda yazılar ekranın üstünden taşıyordu.
   Büyüme oranı ekran boyuna göre kademeli: kartın merkezi ekranın biraz
   üstünde kaldığı için asıl sınırı kısa ekranlar koyuyor.
   Ölçüm (kartın taşmadan büyüyebileceği tavan):
     320x568 -> 1.31   375x667 -> 1.41   390x844 -> 1.71   430x932 -> 1.79 */
.envelope__card {
  --card-pop: 1.28;
}

@media (min-height: 640px) {
  .envelope__card { --card-pop: 1.38; }
}

@media (min-height: 780px) {
  .envelope__card { --card-pop: 1.6; }
}

.intro.is-opening .envelope__card {
  animation: card-out 1.8s var(--ease) 1.5s forwards;
}

@keyframes card-out {
  0%   { opacity: 0; transform: scale(0.94); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: scale(var(--card-pop)); }
}

.intro.is-opening .envelope {
  animation: env-sink 1.2s var(--ease) 2.6s forwards;
}

@keyframes env-sink {
  to { transform: translateY(2.5rem); opacity: 0.85; }
}

/* açılırken alttaki yazı ve buton çekilsin */
.intro.is-opening .intro__script,
.intro.is-opening .intro__lead,
.intro.is-opening .intro__button {
  animation: fade-out 0.4s var(--ease) forwards;
}

@keyframes fade-out {
  to { opacity: 0; transform: translateY(0.5rem); }
}

.intro__script {
  position: relative;
  font-family: var(--script);
  font-size: clamp(2.5rem, 11vw, 3.25rem);
  color: #eeddc0;
  text-shadow: 0 2px 20px rgba(12, 6, 8, 0.7);
  margin: 0 0 0.9rem;
  animation: fade-up 1s var(--ease) 0.45s both;
}

/* DÜZENLE: davet cümlesi */
.intro__lead {
  max-width: 19rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #d9c6ae;
  text-shadow: 0 2px 14px rgba(12, 6, 8, 0.75);
  margin: 0 0 1.75rem;
  animation: fade-up 1s var(--ease) 0.65s both;
}

.intro__button {
  position: relative;
  background: var(--env-gold);
  border-color: var(--env-gold);
  color: #3a2410;
  animation: fade-up 1s var(--ease) 0.7s both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* Kısa ekranlarda (iPhone SE, 8 gibi) giriş ekranı taşıyordu: zarfın üstü
   kesiliyor, "Zarfı Aç" butonu ekranın altında kalıyordu. Bu blok .envelope
   ve .intro__* tanımlarından SONRA gelmeli — aynı özgüllükte olduğu için
   önce gelseydi sonraki kurallar bunu ezerdi. */
@media (max-height: 700px) {
  .intro         { padding-block: 0.75rem; }
  .intro__script { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 0.5rem; }
  .intro__lead   { font-size: 0.875rem; margin-bottom: 0.9rem; }
  .envelope      { margin-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   Müzik
   -------------------------------------------------------------------------- */

.music {
  position: fixed;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 0.9rem;
  z-index: 90;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 250, 246, 0.85);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.music__icon {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.8rem;
}

.music__icon span {
  width: 2px;
  height: 30%;
  background: var(--terra);
}

.music[aria-pressed="true"] .music__icon span {
  animation: bars 1.1s ease-in-out infinite;
}

.music[aria-pressed="true"] .music__icon span:nth-child(2) { animation-delay: 0.15s; }
.music[aria-pressed="true"] .music__icon span:nth-child(3) { animation-delay: 0.3s; }
.music[aria-pressed="true"] .music__icon span:nth-child(4) { animation-delay: 0.45s; }

@keyframes bars {
  0%, 100% { height: 25%; }
  50%      { height: 100%; }
}

/* --------------------------------------------------------------------------
   Kapak
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(5rem, 20svh, 9rem) var(--gutter) 5rem;
  text-align: center;
  overflow: hidden;
  background: var(--cream-deep);
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Yazının okunması için yumuşak açık perde */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 52% at 50% 22%, rgba(18, 10, 8, 0.72) 0%, rgba(18, 10, 8, 0.42) 55%, rgba(18, 10, 8, 0) 100%),
    linear-gradient(to bottom, rgba(14, 8, 6, 0.55) 0%, rgba(14, 8, 6, 0.15) 40%, rgba(14, 8, 6, 0) 70%, rgba(251, 243, 238, 0.95) 100%);
}

/* Süzülen yapraklar: fotoğrafın ve perdenin üstünde, yazının altında */
.hero__petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 24rem;
}

.hero__eyebrow {
  font-size: 0.9375rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f0dfc8;
  margin-bottom: 0.7rem;
  text-shadow: 0 2px 14px rgba(10, 6, 4, 0.8);
}

body:not(.is-locked) .hero__eyebrow {
  animation: fade-up 1.2s var(--ease) 0.15s both;
}

.hero__names {
  font-family: var(--script);
  font-size: clamp(3.6rem, 16.5vw, 5.25rem);
  line-height: 1.08;
  color: #fbf1e0;
  margin-bottom: 0.75rem;
  text-shadow: 0 3px 24px rgba(10, 6, 4, 0.75);
}

body:not(.is-locked) .hero__names {
  animation: fade-up 1.2s var(--ease) 0.35s both;
}

.hero__rule {
  display: block;
  width: 5.5rem;
  height: 1px;
  margin: 0 auto 0.9rem;
  background: #e0c48f;
}

body:not(.is-locked) .hero__rule {
  animation: fade-up 1.2s var(--ease) 0.5s both;
}

.hero__date {
  font-size: 1.0625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0dfc8;
  margin: 0;
  text-shadow: 0 2px 14px rgba(10, 6, 4, 0.8);
}

body:not(.is-locked) .hero__date {
  animation: fade-up 1.2s var(--ease) 0.65s both;
}

.hero__scroll {
  position: absolute;
  z-index: 1;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: #6b4a38;
  text-decoration: none;
}

.hero__chevron {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: chevron 2.2s ease-in-out infinite;
}

@keyframes chevron {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Aşk hikâyemiz — zaman çizelgesi
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  text-align: left;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--line);
}

.timeline__item {
  position: relative;
  padding-bottom: 2.25rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.55rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 4px var(--cream);
}

.timeline__year {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--terra);
  margin-bottom: 0.15rem;
}

.timeline__title {
  font-family: var(--script);
  font-size: 1.875rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.timeline__text {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Ailelerimiz
   -------------------------------------------------------------------------- */

.families__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.family {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  padding: 1.25rem 0.75rem;
}

.family__side {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
}

.family__names {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Geri sayım
   -------------------------------------------------------------------------- */

.countdown {
  background: var(--card);
  max-width: none;
  border-block: 1px solid var(--line);
}

.countdown > * {
  max-width: var(--page);
  margin-inline: auto;
}

.countdown__date {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.countdown__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.countdown__grid li {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.9rem 0.25rem;
  background: var(--cream);
}

.countdown__value {
  display: block;
  font-size: clamp(1.5rem, 7vw, 2.125rem);
  line-height: 1.1;
  color: var(--terra-deep);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

.countdown__done {
  font-family: var(--script);
  font-size: 1.75rem;
  color: var(--terra);
  margin: 1rem 0 0;
}

.countdown__remind {
  font-family: var(--script);
  font-size: 1.75rem;
  color: var(--ink);
  margin: 2rem 0 0.75rem;
}

.countdown__buttons {
  display: grid;
  gap: 0.6rem;
  max-width: 17rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Günün programı
   -------------------------------------------------------------------------- */

.program__ornament {
  width: min(18rem, 70%);
  margin: 0 auto 0.5rem;
}

.program__lead {
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}

.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.agenda__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.agenda__row:last-child {
  border-bottom: 0;
}

.agenda__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--sage);
  font-size: 0.9375rem;
  background: var(--card);
}

.agenda__time {
  display: inline-block;
  background: var(--terra);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.agenda__title {
  font-family: var(--script);
  font-size: 1.625rem;
  line-height: 1.1;
  margin-bottom: 0.1rem;
}

.agenda__text {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Ne zaman & nerede
   -------------------------------------------------------------------------- */

.where {
  background: var(--card);
  max-width: none;
  border-block: 1px solid var(--line);
}

.where > * {
  max-width: var(--page);
  margin-inline: auto;
}

.place {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1rem;
}

.place__title {
  font-family: var(--script);
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.place__when {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.5rem;
}

.place__name {
  font-size: 1.125rem;
  margin-bottom: 0.15rem;
}

.place__addr {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.map {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  margin-bottom: 1rem;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   Anı albümü · hava durumu
   -------------------------------------------------------------------------- */

.memories {
  background: var(--card);
  max-width: none;
  border-block: 1px solid var(--line);
}

.memories > * {
  max-width: var(--page);
  margin-inline: auto;
}

.memories__lead,
.weather__place {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.memories__status {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  min-height: 1.5rem;
}

.weather__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 1.375rem;
  color: var(--terra);
}

.weather__date {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.weather__place {
  margin-bottom: 0.25rem;
}

.weather__state {
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

.weather__temp {
  font-size: clamp(2.5rem, 12vw, 3.25rem);
  line-height: 1;
  color: var(--terra-deep);
  margin-bottom: 0.75rem;
}

.weather__note {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
}

.memories__form {
  max-width: 22rem;
  margin-inline: auto;
  display: grid;
  gap: 0.9rem;
}

.memories__field {
  display: block;
  text-align: left;
}

.memories__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.memories__form .btn--wide {
  justify-self: center;
}

.memories__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.memories__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--terra);
  transition: width 0.25s var(--ease);
}

.memories__status[data-state="ok"]    { color: var(--terra-deep); }
.memories__status[data-state="warn"]  { color: #9a6a2f; }
.memories__status[data-state="error"] { color: #a3564a; }

/* ---- canlı anı duvarı ---- */

.wall {
  margin-top: 2.5rem;
}

.wall__title {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 1rem;
}

.wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.4rem;
}

.wall__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: var(--cream-deep);
  animation: wall-in 0.7s var(--ease) both;
}

@keyframes wall-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.wall__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.wall__item:hover img,
.wall__item:focus-visible img {
  transform: scale(1.06);
}

.wall__note {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

.wall__note:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   RSVP
   -------------------------------------------------------------------------- */

.rsvp__lead {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.form {
  text-align: left;
}

.form__row {
  margin-bottom: 1.125rem;
}

.form__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.form__input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.85rem 0.9rem;
  transition: border-color 0.25s var(--ease);
}

.form__input::placeholder {
  color: #c3b2a5;
}

.form__input:focus {
  border-color: var(--terra);
}

textarea.form__input {
  resize: vertical;
}

.form__hint {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

.form .btn--wide {
  display: flex;
  margin: 1.5rem auto 0;
  text-transform: uppercase;
}

.form__status {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 1rem 0 0;
  min-height: 1.5rem;
}

.form__status[data-state="error"] {
  color: #a3564a;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  text-align: center;
  padding: clamp(3rem, 10vw, 4rem) var(--gutter);
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
}

.footer__names {
  margin-bottom: 0.25rem;
}

.footer__date {
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Erişilebilirlik ve baskı
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media print {
  .intro,
  .music,
  .hero__scroll,
  .countdown,
  .memories,
  .rsvp,
  .footer__share,
  .map {
    display: none !important;
  }

  body.is-locked { overflow: visible; height: auto; }
  .hero { min-height: auto; }
  .hero__art { display: none; }
}