/* Çağla & Yusuf - sayfa bölümleri: şerit, giriş, geri sayım, mekân, dilekler */

.section {
  position: relative;
  max-width: var(--width-page);
  margin: 0 auto;
  padding: 0 var(--space-gutter) var(--space-section);
}

.section--narrow {
  max-width: var(--width-prose);
}

.section--center {
  text-align: center;
}

/* --- Fotoğraf şeridi -------------------------------------------------- */

.strip {
  padding-top: clamp(2.75rem, 8vw, 5rem);
}

/* Altı kare: telefonda 2, geniş ekranda 3 sütun. */
.strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.875rem, 3vw, 1.625rem);
}

@media (min-width: 40rem) {
  .strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Polaroid oranı: alttaki geniş boşluk kartın beyaz payını verir. */
.strip__card {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 10px 10px 34px;
  box-shadow: var(--shadow-card);
}

/* Kareler dikey çekildiği için çerçeve de dikey; kare kırpma baş keserdi. */
.strip__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-surface-tint-soft), var(--color-surface-tint));
}

.strip__card:nth-child(even) .strip__frame {
  background: linear-gradient(160deg, var(--color-surface-tint), var(--color-surface-tint-soft));
}

.strip__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Giriş: DÜĞÜN + kalp ---------------------------------------------- */

.intro {
  padding-top: clamp(3.5rem, 10vw, 6.875rem);
}

.intro__heading {
  margin: 0 0 clamp(2.125rem, 7vw, 3.5rem);
}

.intro__heart {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  perspective: 700px;
}

/*
 * Tek elemanlı kalp: clip-path siluet, katmanlı gradyanlar hacim ve
 * ince bir doku verir; hafif dönüş üç boyutlu hissi tamamlar.
 */
.intro__heart-face {
  width: 100%;
  height: 100%;
  transform: rotateY(-14deg) rotateX(7deg);
  filter: drop-shadow(6px 10px 14px rgba(168, 36, 84, 0.28));
  background:
    radial-gradient(60% 55% at 32% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.4px) 5px 6px / 14px 14px,
    linear-gradient(125deg, #ffa3c6 0%, #f2578f 38%, #d21f65 70%, #96114b 100%);
  clip-path: path(
    'M100,182 C38,140 8,110 8,74 C8,42 32,20 62,20 C80,20 94,29 100,44 C106,29 120,20 138,20 C168,20 192,42 192,74 C192,110 162,140 100,182 Z'
  );
}

.intro__lede {
  margin-top: clamp(2.375rem, 8vw, 3.5rem);
}

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

.countdown__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.125rem);
}

.countdown__cell {
  flex: 1;
  min-width: 6rem;
  max-width: 11.25rem;
  border-radius: var(--radius-tile);
  background: linear-gradient(180deg, var(--color-surface-tint-soft), var(--color-surface-tint));
  padding: clamp(1.125rem, 2.4vw, 1.625rem) 8px;
  text-align: center;
}

.countdown__value {
  margin: 0;
  font-size: var(--text-numeral);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  margin: 6px 0 0;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-muted);
}

.countdown__past {
  text-align: center;
  font-size: var(--text-script-lg);
}

/* --- Mekân ------------------------------------------------------------ */

.venue {
  padding-inline: clamp(0.875rem, 4vw, 3rem);
  padding-bottom: clamp(2.875rem, 9vw, 5.625rem);
}

.venue__shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(2.125rem, 6vw, 3.5rem);
  align-items: center;
  border-radius: var(--radius-shell);
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding: clamp(2.375rem, 7vw, 4.25rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
}

.venue__heading {
  margin: 0 0 clamp(1.5rem, 4vw, 2.125rem);
  font-size: var(--text-heading-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-on-dark);
}

.venue__kind {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 3.4vw, 1.625rem);
  font-weight: 600;
}

.venue__when {
  margin: 0 0 4px;
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  font-weight: 500;
  color: var(--color-on-dark-soft);
}

.venue__address {
  margin: 0;
  font-size: clamp(0.875rem, 2.2vw, 1rem);
  font-style: normal;
  line-height: var(--leading-body);
  color: var(--color-on-dark-muted);
}

.venue__link {
  display: inline-block;
  margin-top: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.venue__link:hover {
  border-bottom-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.venue__invite {
  margin: 0 0 clamp(1.625rem, 5vw, 2.25rem);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  line-height: 1.3;
}

/* --- Tepki düğmeleri -------------------------------------------------- */

.reactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.875rem, 3vw, 1.875rem);
}

.reaction {
  position: relative;
  text-align: center;
}

.reaction__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 17vw, 5rem);
  height: clamp(4rem, 17vw, 5rem);
  border: 0;
  border-radius: 50%;
  background: var(--reaction-color, var(--color-accent-soft));
  color: var(--color-on-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.reaction--love .reaction__button {
  --reaction-color: var(--color-accent-soft);
  font-size: 1.625rem;
}

.reaction--cheer .reaction__button {
  --reaction-color: var(--color-accent-mid);
}

.reaction--wish .reaction__button {
  --reaction-color: var(--color-accent-deep);
}

.reaction__button:hover {
  background: var(--color-on-dark);
  color: var(--reaction-color);
}

.reaction__button:active {
  transform: scale(0.86);
}

.reaction__button.is-popped {
  animation: reactionPop 420ms var(--ease-out-soft);
}

.reaction__label {
  margin: 10px 0 0;
  font-size: var(--text-tiny);
  font-weight: 600;
  color: var(--color-accent-soft);
}

/* Basınca yukarı süzülen simge - yalnızca görsel geri bildirim. */
.reaction__spark {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 1.125rem;
  color: var(--color-on-dark);
  pointer-events: none;
  animation: sparkRise 900ms var(--ease-out-soft) forwards;
}

@keyframes reactionPop {
  0% {
    transform: scale(0.86);
  }
  55% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sparkRise {
  0% {
    opacity: 0.9;
    transform: translate(-50%, 0) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(1.25);
  }
}

/* --- Dilek defteri ---------------------------------------------------- */

.wishes__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: var(--width-form);
  margin: 0 auto;
}

.wishes__done {
  margin: 6px 0 0;
  font-size: var(--text-script-sm);
}

/* --- Kapanış ---------------------------------------------------------- */

/*
 * viewport-fit=cover sayfayı çentik ve durum çubuğu alanına kadar uzatır;
 * hero gradyanı yukarı taşıp telefonun saat çubuğuyla birleşir. Karşılığında
 * alttaki içerik ana ekran çubuğunun altında kalmasın diye pay veriyoruz.
 */
.thanks {
  position: relative;
  padding: clamp(3rem, 9vw, 5.625rem) var(--space-gutter);
  padding-bottom: calc(clamp(3rem, 9vw, 5.625rem) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: radial-gradient(70% 80% at 50% 0%, var(--color-surface-tint) 0%, var(--color-bg) 70%);
}

.thanks__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--text-script-lg);
  color: var(--color-accent);
}

.thanks__meta {
  margin: 14px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .reaction__spark {
    display: none;
  }
}