/* ═══════════════════════════════════════════════════════════
   Tuğba & Salih · Nişan Davetiyesi
   Tek sayfa, bağımlılık yok. Yalnızca transform ve opacity
   animasyonlanır; easing her yerde --ease.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant';
  src: url('assets/fonts/cormorant.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CoFo Sans';
  src: url('assets/fonts/cofosans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CoFo Sans';
  src: url('assets/fonts/cofosans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Yalnızca "çevir" kelimesi için. Beş glife indirgenmiş — 1.6 KB.
   Etiket değişirse font yeniden altkümelenmeli:
   pyftsubset caveat-500.ttf --text="çevir" --flavor=woff2 */
@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/caveat.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground:      #DFD1B4;
  --paper:       #F4EDDD;   /* zarf */
  --card:        #F6F0E2;   /* mektup — kuşe değil, dokulu ve mat */
  --ink:         #2A2118;
  --ink-soft:    #6B5B47;
  --ink-faint:   #A2907A;
  --ink-ghost:   #C2B096;
  --wax:         #A8443A;
  --wax-deep:    #7E3128;

  /* Kâğıt gölgesi: geniş ve yumuşak, altta ince bir temas çizgisi.
     Zemin açık olduğu için alfa düşük — koyu masadaki değerler açık
     kremin üstünde leke gibi duruyor. */
  --shadow-soft: 0 20px 32px -18px rgba(88, 62, 30, .5),
                 0  2px  6px  -3px rgba(88, 62, 30, .3);
  --shadow-card: 0 22px 36px -20px rgba(88, 62, 30, .54),
                 0  3px  8px  -3px rgba(88, 62, 30, .32);

  /* Kâğıdın dokusu.
     Önceki hâli iki yönde repeating-linear-gradient'ti; düzenli aralık
     ekran teli gibi bir ızgara üretiyordu — kâğıt değil, tül. Yerine iki
     katman feTurbulence: biri elyaf (yüksek frekans), biri hamurun
     dalgalanması (çok düşük frekans). İkisi de kahverengiye eşlenip
     düşük alfayla basılıyor. */
  --fibre:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0 0.15 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23a)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.99 0 0 0 0 0.94 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23b)' opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)' opacity='0.22'/%3E%3C/svg%3E");

  --serif: 'Cormorant', 'Iowan Old Style', Georgia, serif;
  --sans:  'CoFo Sans', ui-sans-serif, -apple-system, 'Helvetica Neue', sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* --ease'in tam aynadaki karşılığı: (1-x2, 1-y2, 1-x1, 1-y1).
     Sayfa çevrilirken ilk yarı bununla hızlanır, ikinci yarı --ease ile
     yavaşlar. İki yarıda da yavaşlayan eğri kullanılırsa kâğıt tam
     dikey konumda duruyormuş gibi bir ölü nokta oluşuyor. */
  --ease-in: cubic-bezier(1, 0, 0.68, 0.28);
  /* Yalnızca zarfın sahneden çekilmesi için. Bırakılan bir şey
     yavaşlayarak durmaz, hızlanarak düşer: y ≈ t². --ease ile
     inerken yolun dörtte üçünü ilk çeyrek saniyede bitirip
     kayboluyordu; düşmek değil, çekilmekti. */
  --ease-fall: cubic-bezier(0.33, 0, 0.67, 0.33);

  --pad: clamp(16px, 4.5vw, 34px);

  /* Zarfın kat izinin boyunca yoğunluk değişimi. Kâğıt tırnakla
     bastırılarak katlanır ve bastırma her santimde aynı değildir: iz
     kimi yerde dipten kırılır, kimi yerde ancak belli olur. Her
     yerinde aynı koyulukta bir çizgi, çizilmiş bir çizgidir. */
  --crease-noise-a: linear-gradient(90deg,
    rgba(0,0,0,.42)  0%, rgba(0,0,0,1)   5%, rgba(0,0,0,.7)  11%,
    rgba(0,0,0,1)   17%, rgba(0,0,0,.48) 23%, rgba(0,0,0,1)   30%,
    rgba(0,0,0,.82) 36%, rgba(0,0,0,.58) 41%, rgba(0,0,0,1)   48%,
    rgba(0,0,0,.88) 55%, rgba(0,0,0,1)   62%, rgba(0,0,0,.52) 69%,
    rgba(0,0,0,1)   76%, rgba(0,0,0,.74) 82%, rgba(0,0,0,1)   89%,
    rgba(0,0,0,.6)  95%, rgba(0,0,0,.38)100%);
  /* İkinci ritim — dikey biçimin kat izleri için. İzin çekirdeğiyle
     bükülme bandını aynı maskeyle kesince ikisi tıpatıp üst üste
     oturuyor ve düzensizlik yine desene dönüşüyor. */
  --crease-noise-b: linear-gradient(90deg,
    rgba(0,0,0,.55)  0%, rgba(0,0,0,.8)   7%, rgba(0,0,0,1)   13%,
    rgba(0,0,0,.62) 20%, rgba(0,0,0,1)   26%, rgba(0,0,0,.9)  33%,
    rgba(0,0,0,.5)  44%, rgba(0,0,0,1)   52%, rgba(0,0,0,.68) 58%,
    rgba(0,0,0,1)   66%, rgba(0,0,0,.46) 73%, rgba(0,0,0,.85) 81%,
    rgba(0,0,0,1)   87%, rgba(0,0,0,.55) 94%, rgba(0,0,0,.35)100%);
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground);
  background-image:
    radial-gradient(115% 85% at 50% -4%, rgba(252,244,226,.75) 0%, rgba(252,244,226,0) 56%),
    radial-gradient(100% 72% at 50% 108%, rgba(126,96,58,.24) 0%, rgba(126,96,58,0) 62%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── Grain ──────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .07;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── İskelet ────────────────────────────────────────────── */
.shell {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(12px, env(safe-area-inset-top)) var(--pad)
           max(14px, env(safe-area-inset-bottom));
  gap: clamp(8px, 2vh, 20px);
}

/* ── Başlık — masanın üstünde tek satır künye ───────────── */
.masthead { text-align: center; }

.masthead__kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(8.5px, 2.3vw, 10px);
  letter-spacing: .42em;
  line-height: 1.7;
  color: var(--ink-faint);
  margin: 0;
}

.amp {
  font-style: italic;
  font-weight: 300;
  color: var(--wax);
  padding: 0 .06em;
}

/* Zarf açılınca künye geri çekilir */
.masthead { transition: opacity 700ms var(--ease) 380ms; }
body.is-open .masthead { opacity: .55; }

/* ── Alt bant ───────────────────────────────────────────── */
.footbar {
  min-height: 62px;
  display: grid;
  place-items: center;
  text-align: center;
}

.hint {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(9px, 2.5vw, 10.5px);
  letter-spacing: .34em;
  line-height: 1.6;
  color: var(--wax-deep);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .9em;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.hint__arrow {
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .45;
}
body.is-open .hint {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.countdown {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease) 1740ms, transform 700ms var(--ease) 1740ms;
}
body.is-open .countdown { opacity: 1; transform: none; }
.countdown[hidden] { display: none; }

.countdown__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .36em;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 0 0 .7em;
}
.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 5vw, 30px);
}
.unit { display: block; text-align: center; }
.unit b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  font-size: clamp(19px, 5.4vw, 26px);
  line-height: 1.05;
  color: var(--ink);
}
.unit i {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 8px;
  letter-spacing: .22em;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-top: .5em;
}

/* ═══════════════════════════════════════════════════════════
   SAHNE — zarf ve mektup aynı hücreyi paylaşır
   ═══════════════════════════════════════════════════════════ */
.stage {
  display: grid;
  place-items: center;
  min-height: 0;
  /* Zarfın ölçüsü burada, çünkü zarf artık üç ayrı katman: arka yaprak,
     ön yaprak ve kapak. Üçü de aynı kutuyu okumazsa üst üste oturmuyor.
     Yazı boyu genişliğe bağlı — zarfın içindeki her ölçü em cinsinden.
     Zarf karttan geniş: kart zarfın içindeyken kenarından taşmasın.

     Üçüncü sınır yükseklik: iki biçimde de sahneye sığması gerekiyor,
     ama sınırı koyan şey farklı — yatayda zarfın kendi boyu, dikeyde
     açılmış A4'ün boyu. Değerler biçim bloklarında; burada yalnızca
     ortak olanlar var. dvh bir an 0 okunursa bölüm eksiye düşmesin
     diye her ikisinde de taban var. */
  --env-fs: calc(var(--env-w) / 38);
}
.stage > * { grid-area: 1 / 1; }

/* ═══════════════════════════════════════════════════════════
   ZARF
   Zarfın içindeki her ölçü em cinsinden; .envelope'un
   font-size'ı zarf genişliğine bağlı, böylece tek değişkenle
   bütün kompozisyon ölçekleniyor.
   ═══════════════════════════════════════════════════════════ */
.envelope {
  --w: var(--env-w);
  font-size: var(--env-fs);
  width: var(--w);
  max-height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  perspective: 90em;
  /* Zarf mektubun ÖNÜNDE. Mektup arkada durduğu için kapalıyken kapak
     ve ön kapak onu tamamen örtüyor — görünmez olması için opacity'ye
     gerek kalmıyor. Kâğıdın "belirmesi" değil, zarfın çekilmesiyle
     ortaya çıkması gerekiyordu; sönümlenerek gelen bir kâğıt, elle
     çıkarılmış bir kâğıt gibi durmuyor. */
  /* Zarf gövdesi artık yalnızca ARKA yaprak; mektubun altında duruyor.
     Ön yaprak (.pocket) ayrı bir katman ve mektubun üstünde — kâğıt
     ikisinin arasından çıkıyor. */
  z-index: 0;
  /* Zarf, kapak açıldıktan sonra aşağı iniyor ve mektubu bırakıyor.
     Yol uzun: ağzının mektubun alt kenarını geçmesi gerekiyor, yoksa
     kâğıt hiç "çıkmış" olmuyor. */
  /* Zarf sönmüyor, çekiliyor. Yarı yolda saydamlaşınca elden bırakılmış
     bir zarf gibi değil, kapatılan bir katman gibi duruyordu — ölçüsü
     ekrandan çıkacak kadar uzun, hızı da ona göre. Yol viewport'a bağlı
     çünkü sahnenin neresinde durduğu ekranın boyuna bağlı. */
  transition: transform 900ms var(--ease-fall) 900ms;
  -webkit-tap-highlight-color: transparent;
}
.envelope:focus-visible {
  outline: 2px solid var(--wax);
  outline-offset: 10px;
  border-radius: 3px;
}
body.is-open .envelope {
  transform: translateY(calc(56vh + 22em)) scale(.97) rotate(-3.4deg);
  pointer-events: none;
}

.envelope__body {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--env-ar);
  transform: rotate(-1.4deg);
  transform-style: preserve-3d;
  background: var(--paper);
  background-image:
    var(--fibre),
    linear-gradient(168deg, rgba(255,251,238,.36) 0%, rgba(255,251,238,0) 42%,
                            rgba(120,92,58,.08) 100%);
  border-radius: .06em;
  box-shadow: var(--shadow-soft), inset 0 .08em 0 rgba(255,250,234,.45);
}

/* Zarfın içi — kapak açılınca görünen karanlık */
.envelope__inside {
  position: absolute;
  inset: 0 0 auto 0;
  height: 49%;
  border-radius: .3em .3em 0 0;
  /* Arka yaprağın iç yüzü. Mektubun arkasında kaldığı için opak:
     kâğıdın arkasındaki gölgeli kâğıt yüzeyi bu. */
  background: linear-gradient(180deg, #B49A73 0%, #C9B18C 46%, #DCCBA9 100%);
  box-shadow: inset 0 .6em 1.3em rgba(66,44,20,.5);
}
/* Kapalıyken kapak bu boşluğun üstünü örtüyor, içerisi karanlık.
   Kapak kalktıkça gölge de çekiliyor — sabit bir karanlık, ışığın
   hiç değişmediğini söyler ve sahneyi anında çizim gibi gösterir. */
.envelope__inside::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(46,29,11,.6) 0%, rgba(46,29,11,.3) 54%, rgba(46,29,11,.06) 100%);
  pointer-events: none;
}
body.is-open .envelope__inside::after {
  animation: inside-lighten 920ms var(--ease) 140ms both;
}
@keyframes inside-lighten {
  0%, 12% { opacity: 1; }
  100%    { opacity: .16; }
}

/* Adres bloğu */
/* Kapak
   Tek bir düzgün dönüş değil. Mühür kopmadan kapak kalkmaz; koptuğu
   an bir parça direnir, sonra kendi ağırlığıyla arkaya devrilir,
   dibe çarpıp azıcık geri yaylanır ve orada durur. Yumuşama eğrisi
   değişmiyor — fizik ara kareler arasında. */
.envelope__flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 49%;
  transform-origin: top center;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  border-radius: .3em .3em 0 0;
  background: #F7F1E3;
  background-image:
    var(--fibre),
    linear-gradient(174deg, rgba(255,251,238,.42) 0%, rgba(255,251,238,0) 56%,
                            rgba(120,92,58,.1) 100%);
  box-shadow: 0 .34em .8em -.26em rgba(70,46,20,.45);
}
body.is-open .envelope__flap {
  animation: flap-open 920ms var(--ease) 140ms both;
}
/* Dönüş yönü keyfî değil. Eksi yönde kapak izleyiciden uzağa devriliyor
   ve zarfın içi onu örtüyor — kapak açılmıyor, bir anda yok oluyordu.
   Artı yönde kapak öne doğru kalkıp üstten arkaya yatıyor. */
@keyframes flap-open {
  0%   { transform: rotateX(0deg); }
  8%   { transform: rotateX(2.4deg); }     /* mühür kopuyor, kapak zorlanıyor */
  20%  { transform: rotateX(13deg); }
  68%  { transform: rotateX(181.5deg); }   /* ağırlığıyla arkaya devriliyor */
  85%  { transform: rotateX(167.5deg); }   /* çarpıp geri yaylanıyor */
  100% { transform: rotateX(172.4deg); }
}

/* Kapağın üst kenarındaki ince kalkma — parlama değil, kâğıdın kalınlığı */
.flap__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,251,238,.5) 0%, rgba(255,251,238,0) 3%);
  pointer-events: none;
}

/* Kapağın arka yüzü — 90 dereceden sonra görünen taraf. Olmadığında
   kapak dönerken ortadan kayboluyor; kâğıdın iki yüzü olduğu bilgisi
   kaybolunca hareket bir anda ekran animasyonuna dönüşüyor.

   Ön yüzle aynı menteşede, aynı eğride, aynı yerde duruyor; tek farkı
   dikey eksende 180 derece çevrilmiş olması. İkisinin de arka yüzü
   kapalı, dolayısıyla her an yalnızca biri görünüyor. */
.flap__back {
  position: absolute;
  inset: 0 0 auto 0;
  height: 49%;
  display: block;
  transform-origin: top center;
  transform: rotateX(0deg) rotateY(180deg);
  backface-visibility: hidden;
  border-radius: .3em .3em 0 0;
  /* Zarfın içi dışı kadar işlenmez: daha soğuk, daha mat, ışığı
     ters yönden alır. */
  /* Belirgin biçimde daha koyu: açık kapak, mektupla aynı tonda kalırsa
     sahnede iki tane aynı kâğıt varmış gibi oluyor ve göz hangisinin
     mektup olduğunu seçemiyor. Ters yüz zaten ışığı ters alır. */
  background: #DFD0B2;
  background-image:
    var(--fibre),
    linear-gradient(186deg, rgba(104,78,44,.3) 0%, rgba(104,78,44,.08) 44%,
                            rgba(255,251,238,.18) 100%);
  box-shadow: inset 0 0 1.4em rgba(96,70,40,.34);
}
/* Kurumuş zamk şeridi */
.flap__back::before {
  content: '';
  position: absolute;
  left: 7%; right: 7%; bottom: 5%;
  height: 15%;
  background: linear-gradient(180deg,
    rgba(186,158,116,0) 0%, rgba(186,158,116,.3) 72%, rgba(186,158,116,.16) 100%);
  border-radius: .16em;
}
body.is-open .flap__back {
  animation: flap-open-back 920ms var(--ease) 140ms both;
}

/* ── Kapak katmanı ──────────────────────────────────────────
   Kapak zarfın çocuğuyken zarfın yığma bağlamına hapsoluyor ve
   mektubun altına hiç inemiyor: arkaya yatmış kapak, kâğıt zarftan
   çıkarken hep onun önünde kalıyor. Oysa kapak zarfın ARKASINA
   katlanır; kâğıt izleyiciye doğru çıkar, yani kapağın önünden geçer.

   Bu yüzden kapak sahnenin kendi düzeyinde ve derinliği zamanla
   değişiyor: 90 dereceyi geçene kadar mektubun üstünde (kapalıyken
   onu örtmesi gerekiyor), geçtikten sonra altında. Kutu zarf gövdesinin
   birebir aynısı — aynı genişlik, aynı em, aynı eğiklik — ki menteşe
   tam zarfın üst kenarında dursun. */
.flap-layer {
  --w: var(--env-w);
  font-size: var(--env-fs);
  width: var(--w);
  max-height: 100%;
  display: block;
  perspective: 90em;
  pointer-events: none;
  z-index: 3;
  transition: transform 900ms var(--ease-fall) 900ms;
}
.flap-layer__box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--env-ar);
  transform: rotate(-1.4deg);
  transform-style: preserve-3d;
}
/* Zarfla birlikte iniyor: kapak zarfın parçası, ayrı bir nesne değil. */
body.is-open .flap-layer {
  transform: translateY(calc(56vh + 22em)) scale(.97) rotate(-3.4deg);
}
/* Derinlik değişimi tek karede: kapak dikey konumu geçtiği an mektubun
   arkasına düşüyor. z-index ara değer almasın diye iki komşu kare. */
body.is-open .flap-layer {
  animation: flap-depth 920ms var(--ease) 140ms forwards;
}
@keyframes flap-depth {
  0%, 37%   { z-index: 3; }   /* kapalıyken her şeyin önünde */
  38%, 100% { z-index: -1; }  /* arkaya katlandı: her şeyin arkasında */
}
@keyframes flap-open-back {
  0%   { transform: rotateX(0deg)     rotateY(180deg); }
  8%   { transform: rotateX(2.4deg)   rotateY(180deg); }
  20%  { transform: rotateX(13deg)    rotateY(180deg); }
  68%  { transform: rotateX(181.5deg) rotateY(180deg); }
  85%  { transform: rotateX(167.5deg) rotateY(180deg); }
  100% { transform: rotateX(172.4deg) rotateY(180deg); }
}

/* Katlama çizgisi — zarfın kendi kat izi, mektuptakiyle aynı
   düzensizlikte. Kenarlarda sönmesi zarfın kıvrımından; boyunca
   dalgalanması bastırmanın her yerde aynı olmamasından. */
.envelope__crease {
  position: absolute;
  left: 0; right: 0;
  top: 48.4%;
  height: 1px;
  transform: rotate(.05deg);
  background: linear-gradient(90deg,
    rgba(120,92,58,0) 0%, rgba(120,92,58,.4) 10%,
    rgba(120,92,58,.4) 90%, rgba(120,92,58,0) 100%);
  box-shadow: 0 1px 0 rgba(255,250,234,.55);
  -webkit-mask-image: var(--crease-noise-a);
          mask-image: var(--crease-noise-a);
}


/* ── Zarfın ön yaprağı ──────────────────────────────────────
   Zarf üç katman: arka yaprak (.envelope), kâğıt (.letter), ön yaprak
   (.pocket). Kâğıt ikisinin arasından çıkıyor. Tek parça bir zarfla bu
   gösterilemez — kâğıt ya hep zarfın önünde ya hep arkasında kalır ve
   "içinden çıkma" hiç olmaz.

   Kutu zarf gövdesinin birebir aynısı; boyanan yalnızca ağzın altı.
   Kâğıdın dokusu ve ışık gradyanı gövdeyle aynı fazda kalsın diye tam
   kutu boyanıp kırpılıyor, yeniden konumlandırılmıyor. */
.pocket {
  --w: var(--env-w);
  font-size: var(--env-fs);
  width: var(--w);
  max-height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
  transition: transform 900ms var(--ease-fall) 900ms;
}
body.is-open .pocket {
  transform: translateY(calc(56vh + 22em)) scale(.97) rotate(-3.4deg);
}

/* Zarfın üç katmanı, kâğıdın kendisi ve katlanan iki pay açılış boyunca
   kendi katmanlarında kalsın. Katman ayrımı hareketin ilk karesinde
   yapılırsa tökezleme oradan geliyor. Hepsi süreliğine: kalıcı bir
   will-change kâğıdı üç boyutlu bağlamda tutuyor ve içindeki harita
   çerçevesi bazı tarayıcılarda hiç boyanmıyor. */
body.is-open .envelope,
body.is-open .flap-layer,
body.is-open .pocket { will-change: transform; }
body.is-open:not(.unfolded) .letter { will-change: transform; }
.pocket__box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--env-ar);
  transform: rotate(-1.4deg);
}
.pocket__face {
  position: absolute;
  inset: 0;
  border-radius: .06em;
  background: var(--paper);
  background-image:
    var(--fibre),
    linear-gradient(168deg, rgba(255,251,238,.36) 0%, rgba(255,251,238,0) 42%,
                            rgba(120,92,58,.08) 100%);
  /* Kapağın alt kenarı %49'da; ön yaprak bir tık yukarıdan başlıyor ki
     ikisi kılpayı bindirsin. Tam aynı yüzdede buluştuklarında arada
     bir piksellik boşluk kalıyor ve kapalı zarfın ortasından kart
     görünüyor. */
  clip-path: inset(48.4% 0 0 0);
}
/* Ağzın kenarının karta düşen gölgesi. Kart ön yaprağın arkasında
   olduğu için gölge onun üstüne düşer; bu bant olmadan kart zarfın
   içinde değil, üstüne yapıştırılmış gibi duruyor. */
.pocket__lip {
  position: absolute;
  left: 0; right: 0;
  top: 48.4%;
  height: 2.4em;
  transform: translateY(-100%);
  background: linear-gradient(180deg,
    rgba(58,38,14,0) 0%, rgba(58,38,14,.1) 55%, rgba(58,38,14,.26) 100%);
}

/* ── Posta pulu ─────────────────────────────────────────── */
.stamp {
  --r: .38em;                    /* zımba deliği yarıçapı */
  position: absolute;
  top: 8%;
  right: 6%;
  width: 7.3em;
  aspect-ratio: 1 / 1.24;
  display: block;
  transform: rotate(2.2deg);
  filter: drop-shadow(0 .14em .3em rgba(120,96,68,.32));
}
.stamp__inner {
  position: absolute;
  inset: 0;
  display: block;
  background: #FBF5E6;
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0,    #0000 98%, #000 100%) 50% 0   / calc(4*var(--r)) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000 100%) 50% 100%/ calc(4*var(--r)) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 98%, #000 100%) 0 50%   / 100% calc(4*var(--r)) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000 100%) 100% 50%/ 100% calc(4*var(--r)) repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--r) at 50% 0,    #0000 98%, #000 100%) 50% 0   / calc(4*var(--r)) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000 100%) 50% 100%/ calc(4*var(--r)) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 98%, #000 100%) 0 50%   / 100% calc(4*var(--r)) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000 100%) 100% 50%/ 100% calc(4*var(--r)) repeat-y;
  mask-composite: intersect;
  overflow: hidden;
}
.stamp__frame {
  position: absolute;
  inset: .5em;
  border: 1px solid rgba(96,70,44,.7);
  box-shadow: inset 0 0 0 1px rgba(255,252,246,.9),
              inset 0 0 0 2px rgba(126,98,72,.2);
  pointer-events: none;
  z-index: 3;
}

.stamp__sky {
  position: absolute;
  inset: .5em .5em auto .5em;
  height: 62%;
  display: block;
  background:
    radial-gradient(80% 68% at 50% 40%, #EADAB4 0%, #C9AC7C 52%, #9C7F52 100%);
  box-shadow: inset 0 0 1.4em rgba(88,62,32,.42);
  overflow: hidden;
}
.stamp__orbits {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.stamp__orbits circle {
  fill: none;
  stroke: rgba(56,38,18,.42);
  stroke-width: .8;
  stroke-dasharray: 1 3.4;
}

.jupiter {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.5em;
  transform: translate(-50%, -50%);
  display: block;
  filter: drop-shadow(0 .06em .12em rgba(96,68,40,.35)) saturate(1.12) contrast(1.06);
}
.jupiter img { width: 100%; height: auto; display: block; }

.orbit {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: orbit 22s linear infinite;
}
.orbit--1 { width: 3.9em; height: 3.9em; animation-duration: 13s; animation-delay: -3s; }
.orbit--2 { width: 4.7em; height: 4.7em; animation-duration: 19s; animation-delay: -11s; }
.orbit--3 { width: 5.5em; height: 5.5em; animation-duration: 27s; animation-delay: -6s; }
.orbit--4 { width: 6.3em; height: 6.3em; animation-duration: 37s; animation-delay: -19s; }

.moon {
  position: absolute;
  left: 0; top: 50%;
  width: .84em; height: .84em;
  margin: -.42em 0 0 -.42em;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  /* Üretimden gelen soğuk griyi pulun sıcak paletine çek */
  filter: sepia(.55) saturate(1.5) brightness(.92) contrast(1.15);
}
.moon--1 { background-image: url('assets/ay-1.webp'); }
.moon--2 { background-image: url('assets/ay-2.webp'); width: .7em; height: .7em; margin: -.35em 0 0 -.35em; }
.moon--3 { background-image: url('assets/ay-3.webp'); }
.moon--4 { background-image: url('assets/ay-4.webp'); width: .66em; height: .66em; margin: -.33em 0 0 -.33em; }

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.stamp__caption {
  position: absolute;
  left: .5em; right: .5em; bottom: .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 27%;
  gap: .3em;
}
.stamp__ts {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35em;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink);
}
.stamp__date {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .66em;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ── Damga ──────────────────────────────────────────────────
   Damga pulu iptal eder: mürekkep pulun üstüne biner ve kenarından
   taşıp zarfta devam eder — yan yana duran bir daire damga değil,
   süstür. Kalınlık ve saydamlık yay yay SVG'de; buraya stroke-width
   yazmak hepsini tek ağırlığa düşürür, yalpalama kaybolur. */
.postmark {
  position: absolute;
  top: 21%;
  right: 19%;
  width: 7.1em; height: 7.1em;
  transform: rotate(-11deg);
  opacity: .92;
  mix-blend-mode: multiply;
  overflow: visible;
}
.postmark path {
  fill: none;
  stroke: #4E2E25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.postmark text,
.postmark circle {
  fill: #4E2E25;
  stroke: none;
}
.postmark text {
  font-family: var(--sans);
  font-weight: 500;
}
.pm-yer { font-size: 12.5px; letter-spacing: 2.2px; }
.pm-gun { font-size: 16px;   letter-spacing: .6px; }
.pm-yil { font-size: 12px;   letter-spacing: 2.4px; }

/* ── Mühür ──────────────────────────────────────────────── */
.seal {
  position: absolute;
  left: 50%; top: 49%;
  width: 6.2em; height: 6.2em;
  margin: -3.1em 0 0 -3.1em;
  display: block;
  filter: drop-shadow(0 .22em .3em rgba(70,26,18,.62));
  animation: breathe 3.6s var(--ease) infinite;
  transition: transform 440ms var(--ease), opacity 440ms var(--ease);
}
.seal svg { width: 100%; height: 100%; display: block; }
.seal__blob { fill: url(#waxGrad); }
.seal__mark path {
  fill: none;
  stroke: rgba(255,248,244,.78);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.seal__mark .sprig { stroke-width: 1.7; opacity: .72; }
.seal__mark text {
  fill: rgba(255,242,236,.94);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
}
body.is-open .seal {
  transform: scale(1.28);
  opacity: 0;
  animation: none;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

/* ═══════════════════════════════════════════════════════════
   KART
   Düz, yatay, zarfla aynı ölçüde. Katlanmıyor: zarfın iki
   yaprağı arasında duruyor ve olduğu gibi yukarı çekiliyor.
   ═══════════════════════════════════════════════════════════ */
.letter {
  /* Zarfın %90'ı. Karttan geniş bir zarf gerekiyor — eşit olsalardı
     kart zarfın kenarından taşar ve "içinden çıkma" numarası bozulurdu.
     Oran A6 yatay (148×105); kapalıyken kart tamamen zarfın çizdiği
     dikdörtgenin içinde kalıyor, üstünü kapak, altını ön yaprak
     örtüyor. */
  width: var(--w);
  display: block;
  z-index: 1;
  /* Zarfın içindeyken zarfla aynı eğiklikte: gövde -1.4deg, sahnenin
     kalıcı .85deg'i bunun üstüne biniyor. */
  transform: rotate(-2.25deg);
  pointer-events: none;
}
/* Kart zarftan çekilip masaya bırakılıyor: önce zarfın içinde
   sürtünüyor, sonra ağzından kurtulup yukarı çıkıyor, tepede bir an
   fazla gidip geri oturuyor. Opaklık yok — kâğıt sönümlenerek gelmez.

   Dolgu "backwards", "both" değil: both ile son kare kalıcı olarak
   uygulanıyor ve .letter birim matrisle de olsa dönüşümlü kalıyor —
   içindeki harita iframe'inin boyanmamasına yol açan durum bu. */
body.is-open .letter {
  transform: none;
  pointer-events: auto;
  animation: letter-out 1060ms var(--ease) 880ms backwards;
}
/* Yol boyu: kâğıdın alt kenarı ön yaprağın ağzını (zarfın %48.4'ü)
   geçmek zorunda, yoksa hiç "çıkmış" olmuyor. Mesafe iki biçimde
   farklı — yatayda kartın tamamı, dikeyde yalnızca katlı payın alt
   üçte biri ağzın altında kalıyor — o yüzden --pull ile ölçekleniyor. */
@keyframes letter-out {
  0%   { transform: translateY(0)                                     rotate(-2.25deg); }
  14%  { transform: translateY(calc(var(--w) * -.018 * var(--pull)))  rotate(-2.1deg); }
  55%  { transform: translateY(calc(var(--w) * -.42  * var(--pull)))  rotate(-.75deg); }
  80%  { transform: translateY(calc(var(--w) *  .026 * var(--pull)))  rotate(.2deg); }
  92%  { transform: translateY(calc(var(--w) * -.007 * var(--pull)))  rotate(-.05deg); }
  100% { transform: none; }
}
/* Zarf açılınca odak buraya taşınıyor — okuyucu kartın başında olsun
   diye. Tarayıcı bu programatik odağa da halka çiziyor ve kâğıdın
   çevresinde mavi bir çerçeve beliriyor. Görünür olmamalı. */
.letter:focus { outline: none; }

.letter__stage {
  position: relative;
  height: 100%;
  transform: rotate(.85deg);          /* elden bırakılmış gibi */
}

/* Zarfın içindeki karanlık. Kapak kalktığında kart görünür oluyor ama
   hâlâ zarfın içinde — orada aldığı ışık masadaki ışık değil. Çekilme
   boyunca sönüyor. */
.letter__dim {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(52,33,12,.5) 0%, rgba(52,33,12,.34) 46%, rgba(52,33,12,.5) 100%);
}
body.is-open .letter__dim { animation: dim-out 1060ms var(--ease) 880ms backwards; }
@keyframes dim-out {
  0%   { opacity: 1; }
  46%  { opacity: .55; }
  100% { opacity: 0; }
}

/* ── Kâğıt ──────────────────────────────────────────────── */
.letter__flip {
  position: absolute;
  inset: 0;
  perspective: 170em;
}
.letter__paper {
  position: absolute;
  inset: 0;
  /* Kâğıdın kendisi ölçü birimi. Yazı boyutunu ekrana bağlarsak geniş
     ama kısa bir pencerede punto tavana vurup metin yaprağa sığmıyor;
     sayfaya bağlarsak yazı her zaman kâğıtla aynı oranda kalıyor. */
  container-type: size;
  container-name: sheet;
  transform-origin: 50% 50%;
  background: var(--card);
  background-image:
    var(--fibre),
    linear-gradient(168deg, rgba(255,251,238,.4) 0%, rgba(255,251,238,0) 46%,
                            rgba(120,92,58,.06) 100%);
  border-radius: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 380ms var(--ease),
              box-shadow 380ms var(--ease);
}
/* Baskı kartın üstünde baştan var; açılma onu "getirmiyor", ortaya
   çıkarıyor. Kapalıyken kartı kapak ve ön yaprak birlikte tamamen
   örtüyor, dolayısıyla gizlemek için opaklığa gerek yok — sönümlenerek
   gelen bir kâğıt zaten kâğıt gibi durmuyor. */
body.is-open .letter__paper {
  /* Dokunulacak yer kartın tamamı. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Bağlantı ve haritanın üstünde kâğıt değil, o öge tıklanıyor. */
body.is-open .letter__paper a,
body.is-open .letter__paper iframe { cursor: auto; }
body.is-open .letter__paper a { cursor: pointer; }

/* Kâğıt kenara geldiğinde masadan biraz kalkar — gölge sıkışır */
body.is-turning .letter__paper {
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 34px 54px -22px rgba(96, 70, 38, .42),
              0 6px 16px -6px rgba(96, 70, 38, .28);
}


/* Köşe kıvrımları */
.corner {
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
  z-index: 4;
  opacity: .5;
}
.corner--tl {
  top: 0; left: 0;
  background: linear-gradient(135deg, rgba(150,124,96,.16) 0%, rgba(150,124,96,0) 62%);
}
.corner--br {
  bottom: 0; right: 0;
  background: linear-gradient(315deg, rgba(150,124,96,.16) 0%, rgba(150,124,96,0) 62%);
}

/* ── Sayfa taşıyıcı ─────────────────────────────────────────
   z-index yok, bilerek: kendi yığma bağlamını kurarsa içindeki hiçbir
   öge kat izi katmanının üstüne çıkamıyor. Burada tam da bu gerekiyor —
   yazı izin üstünde, harita altında dursun. */
.pages {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.pages__track {
  position: absolute;
  inset: 0;
}
/* Kâğıt kaydırılmaz. Bir kartın içinde metin kaymaz; sığar ya da sığmaz.
   İki yüz de üst üste duruyor ve görünmeyen yüz display:none ile değil
   visibility ile gizleniyor. Sebebi harita: display:none bir çerçevenin
   ölçüsü sıfırdır, gömülü harita da sıfır boyuta göre yüklenip hiç karo
   istemez — kâğıt çevrildiği anda sıfırdan yüklenmeye başlıyor ve beyaz
   bir dikdörtgen olarak duruyordu. visibility ile çerçeve gerçek
   ölçüsünde yerleşiyor, karolarını önceden çekiyor; yalnızca boyanmıyor. */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(12px, 3.6cqh, 30px) clamp(16px, 6.2cqw, 32px) clamp(20px, 7cqh, 46px);
}
.page.is-on { visibility: visible; }

/* Kat izi kâğıdın yüzeyindeki bir kırık; mürekkep o yüzeyin üstünde
   duruyor. Bu yüzden yazı izin üstünde: iz koyu harflerin arkasında
   kayboluyor, harf aralarında ve boş kâğıtta görünmeye devam ediyor.
   Harita bunun dışında — basılı bir görselin üstünden iz geçer. */
.page > *,
.panel__face > * {
  position: relative;
  z-index: 3;
}
.page--flow .map { z-index: auto; }

.lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   SAYFA İÇERİĞİ
   Büyük harfli her satırda line-height ≥ 1.4 — aksi hâlde
   İ'nin noktası üstteki satıra değiyor. text-transform yok.
   ═══════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(8px, min(2.9cqw, 2.7cqh), 10px);
  letter-spacing: .3em;
  line-height: 1.75;
  color: var(--ink-faint);
  margin: 0;
  max-width: 27em;
}

.rule {
  width: clamp(24px, 8cqw, 46px);
  height: 1px;
  background: var(--ink-ghost);
  opacity: .7;
  margin: clamp(5px, 1.8cqh, 16px) 0;
  flex: 0 0 auto;
}

/* 1 · Davet
   İki ad yan yana, fotoğrafın sağında. Yatay kartta punto hem genişliğe
   hem yüksekliğe bakmak zorunda: kart alçaldıkça önce satır yüksekliği
   biter, min() ikisinden dar olanı seçiyor. */
.couples {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, 2.2cqw, 15px);
  margin: 0;
  white-space: nowrap;
}
.couple {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, min(7.2cqw, 15cqh), 42px);
  line-height: 1.16;
  letter-spacing: .015em;
  color: var(--ink);
}
.couple__amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, min(4.6cqw, 9.5cqh), 27px);
  line-height: 1;
  color: var(--wax);
}

/* Çocukluk fotoğrafı — karta yapıştırılmış küçük bir baskı. Kenarındaki
   krem paspartu, altındaki yumuşak gölge ve kılpayı eğriliği onu kâğıdın
   üstünde ayrı bir nesne yapıyor, basılmış bir görsel değil. */
.plate {
  margin: 0;
  padding: clamp(2.5px, 1.1cqh, 6px);
  background: #FBF6EA;
  box-shadow: 0 6px 14px -8px rgba(88, 62, 30, .5),
              0 1px 2px rgba(88, 62, 30, .2);
  transform: rotate(-1.1deg);
  min-height: 0;
  flex: 0 0 auto;
}
.plate picture { display: block; }
.plate img {
  display: block;
  height: clamp(52px, 34cqh, 150px);
  width: auto;
  max-width: 100%;
  /* Baskı, kâğıdın kendi ışığına biraz yaklaşsın; ham dosya kartın
     yanında fazla doygun kalıyor. */
  filter: saturate(.94) contrast(.99);
}
/* En küçük kartta (320×568) fotoğraf sözün satırlarıyla yer paylaşıyor.
   Kart biraz uzarsa baskı da büyüyor. */
@container sheet (min-height: 210px) {
  .v-yatay .plate img { height: clamp(60px, 40cqh, 175px); }
}

/* Tarih ve saat alt alta. Adların yanındaki sütun dar; yan yana
   dizilince satır "29 · 09 ·" / "2026" diye ortasından kırılıyor. */
.when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28em;
  margin: 0;
}
.when__date, .when__time { white-space: nowrap; }
.when__date, .when__time {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(8.5px, min(2.9cqw, 5.6cqh), 12px);
  letter-spacing: .18em;
  line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.when__time { font-weight: 400; color: var(--ink-soft); }

/* Davetin sözü. Önce şairin cümlesi (eğik, mühür renginde), altında
   çiftin kendi cümlesi (düz, daha sakin). Kartın uzun kenarını
   kullanıyor: dar bir sütuna sıkıştırılınca satır sayısı iki katına
   çıkıyor ve alt bant taşıyor. */
.verse {
  margin: 0;
  max-width: 46em;
}
.verse__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(9.5px, min(3.4cqw, 7cqh), 15px);
  line-height: 1.45;
  color: var(--wax-deep);
  margin: 0;
}
.verse__note {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(9px, min(3.1cqw, 6.4cqh), 13.5px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: clamp(3px, 1.2cqh, 9px) 0 0;
}

/* 2 · Aileler — her aile tek satır: ad ve soyad yan yana. Alt alta
   dizilince kartın alt bandı iki katına çıkıyor. Taraflar fotoğraftaki
   duruşa göre. */
.families {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 3.2cqw, 22px);
  width: 100%;
}
.family {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5em;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}
.family__given {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(8.5px, min(2.9cqw, 5.6cqh), 12.5px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.family__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(8px, min(2.7cqw, 5.2cqh), 11.5px);
  letter-spacing: .13em;
  line-height: 1.5;
  color: var(--ink);
}
.families__bar {
  width: 1px;
  flex: 0 0 1px;
  align-self: stretch;
  background: linear-gradient(180deg,
    rgba(150,124,96,0), rgba(150,124,96,.3) 30%,
    rgba(150,124,96,.3) 70%, rgba(150,124,96,0));
}


/* ── İkinci yüz: yer, menü, bağış ───────────────────────────
   Yatay kartta iki sütun: solda yer ve harita, sağda menü ve bağış.
   Tek sütuna dizilince blok kartın boyunun iki katı oluyor ve yazı
   kâğıdın içinde kaymak zorunda kalıyor. */
.cols {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(9px, 3.4cqw, 26px);
  width: 100%;
}
.col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Sol sütun biraz geniş: yer adı, adres ve harita orada. Menü
   satırları daha kısa, sağ sütun daralabilir. */
.col:first-of-type { flex: 1.18 1 0; }
.cols__bar {
  width: 1px;
  flex: 0 0 1px;
  background: linear-gradient(180deg,
    rgba(150,124,96,0), rgba(150,124,96,.28) 20%,
    rgba(150,124,96,.28) 80%, rgba(150,124,96,0));
}

.venue {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(13px, min(4.5cqw, 8.6cqh), 23px);
  line-height: 1.24;
  letter-spacing: .01em;
  margin: .2em 0 0;
  color: var(--ink);
}
.address {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(8.5px, min(2.75cqw, 5.2cqh), 12px);
  line-height: 1.42;
  color: var(--ink-soft);
  margin: .4em 0 0;
}

.map {
  width: 100%;
  margin: clamp(4px, 1.6cqh, 13px) 0 clamp(4px, 1.6cqh, 12px);
  padding: 4px;
  background: var(--paper);
  border: 1px solid rgba(150,124,96,.22);
  box-shadow: inset 0 1px 3px rgba(120,96,68,.12);
  /* Gömülü haritanın altında Google'ın künye şeridi ("Klavye
     kısayolları · Harita verileri · Şartlar"), üstünde Google ibaresi
     var; ikisi de davetiyenin dili değil. Çerçeve kutudan iki uçtan
     --map-chrome kadar uzun tutulup kırpılıyor — yalnızca alttan
     kırpsaydık haritanın merkezi kayar, iğne kutunun dibine düşerdi. */
  --map-chrome: 40px;
}
.map__crop {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(40px, 22cqh, 118px);
}
/* En küçük kartta harita ancak bir şerit kadar yer bulabiliyor; kart
   biraz uzarsa büyüyor. */
@container sheet (min-height: 215px) {
  .v-yatay .map__crop { height: clamp(58px, 30cqh, 132px); }
}
/* Yüklenmeden önce beyaz bir dikdörtgen olarak duruyordu; kâğıdın
   üstünde beyaz bir delik gibi. Kendi zemini kâğıt tonunda ve harita
   ancak boyandıktan sonra açılıyor. */
.map__crop iframe {
  display: block;
  background: #EEE6D4;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  position: absolute;
  top: calc(var(--map-chrome) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--map-chrome) * 2);
  border: 0;
  filter: saturate(.68) contrast(.94) sepia(.12) brightness(1.02);
}
.map__crop iframe.is-ready { opacity: 1; }

.cta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(8px, min(2.5cqw, 4.6cqh), 10px);
  letter-spacing: .26em;
  line-height: 1.6;
  color: var(--wax-deep);
  text-decoration: none;
  padding: .62em 1.25em;
  border: 1px solid rgba(180,121,107,.42);
  border-radius: 2px;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cta:hover { border-color: rgba(180,121,107,.8); }
.cta:active { transform: scale(.97); }
.cta:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; }

.menu {
  list-style: none;
  margin: .35em 0 0;
  padding: 0;
}
.menu li {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(9px, min(2.95cqw, 5.4cqh), 13.5px);
  line-height: 1.5;
  color: var(--ink);
}
.menu__sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(8.5px, min(2.7cqw, 5cqh), 12px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: clamp(3px, 1.2cqh, 10px) 0 0;
}

.giving {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(8.5px, min(2.8cqw, 5cqh), 12.5px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.giving b { font-weight: 600; }
.tegv {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(10px, min(3.2cqw, 5.8cqh), 14px);
  letter-spacing: .3em;
  line-height: 1.6;
  color: var(--wax-deep);
  margin: clamp(4px, 1.4cqh, 11px) 0 0;
}


/* ═══════════════════════════════════════════════════════════
   UYARLAMA
   ═══════════════════════════════════════════════════════════ */

/* Alçak ekran (yatay telefon, küçük dizüstü). Kartın boyu ekrandan
   arta kalana bağlı; alçaldıkça önce başlık, sonra alt bant küçülüyor,
   dolayısıyla kart için ayrılan pay da geri veriliyor. Sabit 196px'lik
   pay yatay telefonda kartı tabana sıkıştırıp ikinci yüzü kırpıyordu. */
@media (max-height: 620px) {
  .countdown__label { margin-bottom: .5em; }
}
@media (max-height: 480px) {
  .masthead__kicker { display: none; }
  .footbar { min-height: 48px; }
  .unit b { font-size: 17px; }
}

/* Geniş ekranda kart biraz daha ferah. --env-fs ve kartın genişliği
   buradan türüyor; tek değişken yetiyor. */
@media (min-width: 720px) and (min-height: 660px) {

}

/* ── Hareket azaltma ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .letter__dim { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   İKİNCİ YÜZ
   Yer, harita, menü ve bağış tek kartta, iki sütun. Sığmazsa
   kâğıdın içinde kayar; alt kenardaki solma daha fazlası
   olduğunu söyler.
   ═══════════════════════════════════════════════════════════ */
/* Kâğıt kaydırılmaz — iki yüzü de değil. Bir kartın içinde metin
   kaymaz; sığar ya da sığmaz. İçerik iki sütuna bölündükten sonra her
   telefon boyutunda sığıyor, dolayısıyla kaçış yoluna da gerek yok. */
.page--flow {
  justify-content: center;
  padding-top: clamp(11px, 4cqh, 24px);
  padding-bottom: clamp(11px, 4cqh, 26px);
}
/* Menü sütununun ayracı iki bloğu ayırıyor; kartın kendi çizgisiyle
   aynı ölçüde. */
.page--flow .eyebrow { line-height: 1.5; }
.page--flow .rule { margin: clamp(4px, 1.4cqh, 12px) 0; }

/* Kâğıdın kendi kenar gölgesi — masaya değdiği yer */
.letter__paper::after,
.envelope__body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(120,92,58,.07);
  border-radius: inherit;
}
.letter__paper::after { z-index: 3; }

/* ═══════════════════════════════════════════════════════════
   ÇEVİRME İŞARETİ
   Kâğıdın sağ alt köşesinde "çevir" ve iki ucu birbirine bakan
   üçgen — aradaki noktalı eksen kâğıdın döndüğü çizgi. Düğme
   değil, elle düşülmüş bir not: dokunulacak yer kâğıdın kendisi.
   ═══════════════════════════════════════════════════════════ */
.turn {
  position: absolute;
  right: clamp(8px, 3.2cqw, 18px);
  bottom: clamp(5px, 2.2cqh, 11px);
  z-index: 6;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #9B8C74;
  opacity: 0;
  transition: opacity 600ms var(--ease) 2000ms, color 300ms var(--ease);
}
body.is-open .turn { opacity: 1; }

.turn__word {
  font-family: 'Caveat', var(--serif);
  font-weight: 500;
  font-size: clamp(12px, 6cqh, 17px);
  line-height: 1;
  letter-spacing: .01em;
}
.turn__icon {
  width: clamp(14px, 6.6cqh, 19px);
  height: auto;
  fill: currentColor;
  overflow: visible;
}
.turn__axis line {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════
   İKİ BİÇİM
   Aynı içerik, iki davetiye. Biçim <html>'in sınıfında ve
   sayfa açılmadan önce (head'deki satır içi betikle) konuyor;
   ertelenmiş betiğe bırakılsaydı önce yanlış düzen çizilirdi.

     YATAY — düz kart, zarfla aynı ölçüde, katlanmaz.
     DİKEY — A4, üçe katlı, DL zarftan çıkıp açılır.

   Ortak olan her şey yukarıda; burada yalnızca ayrıştıkları
   yerler var.
   ═══════════════════════════════════════════════════════════ */

/* ── YATAY ──────────────────────────────────────────────── */
.v-yatay .stage {
  --env-ar: .70;
  --env-w: max(240px, min(94vw, 400px, calc((100dvh - 196px) / .70)));
}
.v-yatay .letter {
  --w: calc(var(--env-w) * .92);
  --pull: 1;
  aspect-ratio: 1 / .74;          /* A6 yatay */
}

/* Paneller yatayda erir: display:contents ile çocukları doğrudan
   sayfanın ızgarasına yerleşiyor. Böylece dikeydeki kat bölünmesi
   yatay kompozisyonu kısıtlamıyor — fotoğrafla adlar yan yana,
   söz ve aileler tam genişlikte. */
.v-yatay .panel,
.v-yatay .panel__face { display: contents; }
.v-yatay .panel__back,
.v-yatay .letter__creases { display: none; }

.v-yatay .page--one {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "plate   lead"
    "verse   verse"
    "fam     fam";
  align-content: center;
  justify-items: center;
  align-items: center;
  row-gap: clamp(4px, 1.6cqh, 11px);
  column-gap: clamp(9px, 3.4cqw, 26px);
  /* Alt dolgu köşedeki "çevir" notunun bandını da içeriyor — aksi
     hâlde aile satırının sağ ucu notun altına giriyor. */
  padding: clamp(9px, 3.4cqh, 20px) clamp(13px, 4.4cqw, 30px)
           clamp(17px, 8cqh, 29px);
}
.v-yatay .page--one .eyebrow  { grid-area: eyebrow; }
.v-yatay .plate               { grid-area: plate; }
.v-yatay .lead                { grid-area: lead; }
.v-yatay .verse               { grid-area: verse; }
.v-yatay .page--one .families { grid-area: fam; }

/* ── DİKEY ──────────────────────────────────────────────── */
.v-dikey .stage {
  --env-ar: .5;                   /* DL zarf: 220 × 110 */
  /* Sınırı koyan şey zarf değil, açılmış A4. Boyu kâğıt genişliğinin
     1.4142 katı, kâğıt da zarfın %90'ı — yani 1.2728 × --env-w. Zarfa
     göre ölçseydik açılan yaprak sahneden taşardı. */
  --env-w: max(200px, min(94vw, 400px, calc((100dvh - 200px) / 1.2728)));
}
.v-dikey .letter {
  --w: calc(var(--env-w) * .9);
  --pull: .715;
  aspect-ratio: 1 / 1.4142;       /* A4 dikey */
}
/* Katlıyken görünen şey ortadaki üçte bir; gölge de yalnızca onun
   üstüne düşmeli, yoksa boş A4 kutusu koyu bir dikdörtgen oluyor. */
.v-dikey .letter__dim { top: 33.333%; bottom: 33.333%; }

.v-dikey .page--one {
  display: grid;
  /* Sütun ve satır hizalaması açıkça yazılıyor: .page'in ortak
     kuralındaki justify/align-content ızgarada tek sütunu içeriğe göre
     daraltıp panelleri sıfıra indiriyor — panellerin içi mutlak
     konumlu olduğu için içerik genişliği sıfır. */
  grid-template-columns: 100%;
  grid-template-rows: repeat(3, 1fr);
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  padding: 0;
  perspective: 150em;
}
.v-dikey .panel {
  position: relative;
  min-height: 0;
  transform-style: preserve-3d;
}
.v-dikey .panel__face,
.v-dikey .panel__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
/* Kâğıdın yüzeyi katlıyken panellerin üstünde: ortada üçte bir kâğıt
   var, tam boy bir yaprak değil. Işık gradyanı üçe bölünmüş tek bir
   gradyan — her panel kendi payını gösteriyor, yoksa aynı ışık üç kez
   tekrarlanıyor. */
.v-dikey .panel__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.7cqh, 15px);
  padding: clamp(8px, 2.1cqh, 18px) clamp(16px, 6.2cqw, 32px);
  background: var(--card);
  background-image:
    var(--fibre),
    linear-gradient(168deg, rgba(255,251,238,.4) 0%, rgba(255,251,238,0) 46%,
                            rgba(120,92,58,.06) 100%);
  background-size: auto, auto, auto, 100% 300%;
}
/* Her blok kendi katının ortasında. İzlerine yaslandıklarında hepsi
   yaprağın beline toplanıyor, üst ve alt altıda birler bomboş kalıyordu. */
.v-dikey .panel--a .panel__face { background-position: 0 0, 0 0, 0 0, 0 0%; }
.v-dikey .panel--b .panel__face { background-position: 0 0, 0 0, 0 0, 0 50%; }
/* Alt payın dolgusu köşedeki "çevir" notunun bandını da içeriyor —
   aksi hâlde aile satırının sağ ucu notun altına giriyor. */
.v-dikey .panel--c .panel__face {
  background-position: 0 0, 0 0, 0 0, 0 100%;
  padding-bottom: clamp(22px, 7cqh, 38px);
}

/* Panelin dışa bakan yüzü. Boş kâğıt değil: kâğıdın öbür yüzü orada
   duruyor. Üst payın dışına ikinci yüzün üst üçte biri, alt payın
   dışına alt üçte biri denk geliyor — ne fazlası ne de öteki pay. */
.v-dikey .panel__back {
  transform: rotateX(180deg);
  background: var(--card);
  background-image: var(--fibre);
  box-shadow: inset 0 0 2.4em rgba(104, 76, 40, .13);
}

/* Kat yatay eksende döndüğü için o üçte bir baş aşağı görünüyor: ayna
   değil, nokta yansıması — soldaki solda kalır, üstteki alta iner.
   Katlı kâğıdı elinde çevirdiğinde gördüğün şey bu.

   Pencere payın kendi ölçüsünde ve kırpıyor; içindeki kutu tam
   yaprak boyunda, yalnızca doğru üçte biri denk gelecek kadar
   kaydırılmış. Kopya kâğıdın kendi ölçü kabının içinde durduğu için
   cqw/cqh birimleri aslıyla aynı sonucu veriyor — düzen birebir
   tutuyor, ikinci bir ölçü hesabı gerekmiyor. */
.v-dikey .panel__print {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: rotate(180deg);
  /* Zarfın içindeki gölgede duran bir yüz; mürekkep tam kuvvetinde
     okunursa kâğıdın hangi yüzüne baktığımız belirsizleşiyor. */
  opacity: .74;
}
.v-dikey .panel__printbox {
  position: absolute;
  left: 0; right: 0;
  height: 300%;
}
.v-dikey .panel--a .panel__printbox { top: 0; }
.v-dikey .panel--c .panel__printbox { top: -200%; }
/* Kopya, taşıyıcısı görünür olduğu için görünür; sıradaki yüz değil. */
.v-dikey .panel__print .page { visibility: visible; }
/* Haritanın çerçevesi kopyalanmıyor — ikinci bir Google gömmesi hem ağ
   trafiği hem de açılış sırasında iş demek. Yerinde kalan şey kutunun
   kendi zemini: basılı bir görselin kâğıttaki yeri. */
.v-dikey .panel__print .map__crop { background: #EAE1CD; }

/* Kat sırası: önce alt pay ortanın üstüne, sonra üst pay onun üstüne
   kapanır. Yığında en üstte ÜST pay durur, açarken de ilk o kalkar. */
.v-dikey .panel--b { z-index: 1; }
.v-dikey .panel--c { z-index: 2; }
.v-dikey .panel--a { z-index: 3; }

.v-dikey .panel--a { transform-origin: bottom center; transform: rotateX(180deg); }
.v-dikey .panel--c { transform-origin: top center;    transform: rotateX(180deg); }

/* Önce üst pay kalkar, o yolun yarısını geçtikten sonra alt pay
   açılmaya başlar. İkisi birlikte kalkınca kâğıt açılmıyor, iki kanat
   birden çarpıyordu; sıra girince el gibi okunuyor. Süreler de kısa —
   açılma bir gösteri değil, davetiyeye giden yol. */
.v-dikey body.is-open .panel--a { animation: ac-ust 760ms var(--ease) 1760ms forwards; }
.v-dikey body.is-open .panel--c { animation: ac-alt 800ms var(--ease) 2220ms forwards; }
.v-dikey body.is-open:not(.unfolded) .panel--a,
.v-dikey body.is-open:not(.unfolded) .panel--c { will-change: transform; }

/* Serbest kenar izleyiciye doğru kalkıyor: üst pay 180°'den 360°'ye,
   alt pay 180°'den 0°'ye gidince ikisi de öne devrilir. Ters yönde
   dönerlerse kâğıdın arkasından dolanıyorlar — açan bir el değil,
   çalışan bir menteşe gibi duruyor.

   Ara kareler sık, çünkü --ease çok öne yüklü bir eğri ve CSS onu HER
   kare aralığına ayrı ayrı uyguluyor: üç kareyle yazılmış bir kat,
   süresinin dörtte birinde yolun neredeyse tamamını bitirip kalanını
   sürünerek geçiyor — açılma değil, kesme gibi duruyor. Aralıklar
   kısalınca eğrinin içerideki dağılımı görünmez oluyor ve kavis
   karelerin çizdiği yolu izliyor: önce ağır (kâğıt diri), dikeyi
   geçince hızlı, sonuna doğru yavaşlayıp azıcık geri yaylanıyor. */
@keyframes ac-ust {
  0%   { transform: rotateX(180deg); }
  10%  { transform: rotateX(187deg); }
  20%  { transform: rotateX(201deg); }
  30%  { transform: rotateX(222deg); }
  40%  { transform: rotateX(248deg); }
  50%  { transform: rotateX(277deg); }
  60%  { transform: rotateX(304deg); }
  70%  { transform: rotateX(328deg); }
  80%  { transform: rotateX(347deg); }
  88%  { transform: rotateX(359deg); }
  94%  { transform: rotateX(364deg); }
  100% { transform: rotateX(360deg); }
}
@keyframes ac-alt {
  0%   { transform: rotateX(180deg); }
  10%  { transform: rotateX(173deg); }
  20%  { transform: rotateX(159deg); }
  30%  { transform: rotateX(138deg); }
  40%  { transform: rotateX(112deg); }
  50%  { transform: rotateX(83deg); }
  60%  { transform: rotateX(56deg); }
  70%  { transform: rotateX(32deg); }
  80%  { transform: rotateX(13deg); }
  88%  { transform: rotateX(1deg); }
  94%  { transform: rotateX(-4deg); }
  100% { transform: rotateX(0deg); }
}

/* Dönen yüzeyin ışığa göre açısı sürekli değişir: katlıyken zarfın
   gölgesinde, dönerken kuvvetli, düzleşirken sıfır. */
.v-dikey .panel--a .panel__face::after,
.v-dikey .panel--c .panel__face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(96,64,26,.34) 0%, rgba(96,64,26,.12) 58%, rgba(96,64,26,0) 100%);
}
.v-dikey .panel--c .panel__face::after {
  background: linear-gradient(180deg,
    rgba(96,64,26,0) 0%, rgba(96,64,26,.12) 42%, rgba(96,64,26,.34) 100%);
}
.v-dikey body.is-open .panel--a .panel__face::after { animation: kat-isik 760ms var(--ease) 1760ms forwards; }
.v-dikey body.is-open .panel--c .panel__face::after { animation: kat-isik 800ms var(--ease) 2220ms forwards; }
@keyframes kat-isik {
  0%   { opacity: .92; }
  25%  { opacity: .78; }
  50%  { opacity: .5; }
  75%  { opacity: .22; }
  100% { opacity: 0; }
}

/* Katlıyken masaya değen şey üçte birlik yığın, tam yaprak değil. */
.v-dikey body:not(.unfolded) .letter__paper { background: none; box-shadow: none; }
.v-dikey body:not(.unfolded) .letter__paper::after { display: none; }
.v-dikey body:not(.unfolded) .panel--b { box-shadow: var(--shadow-card); }

/* Açılma bitti. Panellerin üç boyutlu bağlamı kalkıyor: preserve-3d
   her paneli kendi yığma bağlamına hapsediyor ve kat izi katmanı
   panelin zemini ile yazısının arasına giremiyor. Düzleştikten sonra
   buna gerek yok. */
.v-dikey body.unfolded .panel {
  transform: none;
  animation: none;
  transform-style: flat;
  z-index: auto;
}
.v-dikey body.unfolded .panel__face { backface-visibility: visible; }
.v-dikey body.unfolded .panel__face::after,
.v-dikey body.unfolded .panel__back { display: none; }

/* İkinci yüz dikeyde tek sütun; boy zaten fazlasıyla var. Sütun
   ayracı da yatay bir çizgiye dönüşüyor. */
.v-dikey .cols {
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5cqh, 15px);
}
.v-dikey .col,
.v-dikey .col:first-of-type { flex: 0 0 auto; width: 100%; }
.v-dikey .cols__bar {
  width: clamp(24px, 8cqw, 46px);
  height: 1px;
  flex: 0 0 1px;
  align-self: center;
  background: var(--ink-ghost);
  opacity: .7;
}
/* Dikeyde boy bol: harita ve satır araları ferah durabiliyor. */
.v-dikey .map__crop { height: clamp(74px, 15cqh, 190px); }
.v-dikey .page--flow { padding-top: clamp(12px, 3.4cqh, 28px); padding-bottom: clamp(12px, 3.4cqh, 30px); }
.v-dikey .cols { gap: clamp(5px, 1.2cqh, 13px); }
.v-dikey .venue { font-size: clamp(17px, min(6cqw, 5.4cqh), 30px); }
.v-dikey .address { font-size: clamp(10.5px, min(3.4cqw, 3cqh), 14px); line-height: 1.5; }
.v-dikey .menu li { font-size: clamp(11px, min(3.7cqw, 3.2cqh), 16px); line-height: 1.52; }
.v-dikey .menu__sub,
.v-dikey .giving { font-size: clamp(10.5px, min(3.4cqw, 3cqh), 14.5px); line-height: 1.55; }
.v-dikey .tegv { font-size: clamp(12px, min(4cqw, 3.4cqh), 17px); }
.v-dikey .cta { font-size: clamp(8.5px, min(2.9cqw, 2.6cqh), 11px); padding: .72em 1.4em; }
.v-dikey .plate img { height: clamp(60px, 26cqh, 190px); }

/* ── Kat izleri (yalnızca dikey) ─────────────────────────────
   Üçe katlanmış bir kâğıt açıldığında izler kalır. Her iz iki parça:
   önce kâğıdın o çizgiye doğru büküldüğü geniş yumuşak bant, üstünde
   saç teli kadar çekirdek. Çukurun çekirdeği koyu — kırığın dibi ışık
   almıyor. Tepeninki açık — lifler kırıldığı için ışığı geri veriyor;
   açık ton beyaz değil sıcak krem, mat kâğıtta yansıma yok.

   İkisi de birbirinden birkaç yüzde derece farklı açıda, boyunca
   düzensiz, ve kâğıdın kenarından taşacak kadar geniş: elle katlanmış
   kâğıtta iz tam yatay olmaz ve uçlarının nerede bittiği görünmez.
   Her yerinde aynı koyulukta bir çizgi, çizilmiş bir çizgidir. */
.letter__creases {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms var(--ease);

  /* İki iz iki görünümden birini alır; hangisinin hangisini aldığı
     kâğıdın hangi yüzüne baktığımıza bağlı, o yüzden görünümler
     değişken olarak tanımlanıp yüz değişince takas ediliyor. */
  --band-1: var(--band-valley);
  --core-1: var(--core-dark);
  --band-2: var(--band-ridge);
  --core-2: var(--core-light);

  /* ÇUKUR: üstünde inen kâğıt gölgede, altında kalkan kâğıt ışıkta. */
  --band-valley: linear-gradient(180deg,
    rgba(108, 80, 44, 0)     0%, rgba(108, 80, 44, .14)  40%,
    rgba(255, 250, 234, .3) 60%, rgba(255, 250, 234, 0) 100%);
  --core-dark: linear-gradient(180deg,
    rgba(104, 76, 40, 0)    0%, rgba(104, 76, 40, .5)  34%,
    rgba(104, 76, 40, .5)  64%, rgba(104, 76, 40, 0)  100%);

  /* TEPE: üstünde kalkan kâğıt ışıkta, altında gölge. */
  --band-ridge: linear-gradient(180deg,
    rgba(255, 250, 234, 0)   0%, rgba(255, 250, 234, .25) 34%,
    rgba(108, 80, 44, .11)  62%, rgba(108, 80, 44, .17)  78%,
    rgba(108, 80, 44, 0)   100%);
  --core-light: linear-gradient(180deg,
    rgba(255, 250, 234, 0)    0%, rgba(255, 250, 234, .68) 36%,
    rgba(255, 250, 234, .68) 66%, rgba(255, 250, 234, 0)  100%);
}
.v-dikey body.unfolded .letter__creases { opacity: 1; }

.crease {
  position: absolute;
  left: -4%; right: -4%;
  height: 0;
  display: block;
}
.crease::before,
.crease::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
}
.crease--valley { top: 33.333%; }
.crease--ridge  { top: 66.667%; }

.crease--valley::before {
  top: -9px; height: 20px;
  transform: rotate(-.045deg);
  background-image: var(--band-1);
  -webkit-mask-image: var(--crease-noise-b);
          mask-image: var(--crease-noise-b);
}
.crease--valley::after {
  top: -1.1px; height: 2.2px;
  transform: rotate(.075deg);
  background-image: var(--core-1);
  -webkit-mask-image: var(--crease-noise-a);
          mask-image: var(--crease-noise-a);
}
.crease--ridge::before {
  top: -8px; height: 22px;
  transform: rotate(.06deg);
  background-image: var(--band-2);
  -webkit-mask-image: var(--crease-noise-a);
          mask-image: var(--crease-noise-a);
}
.crease--ridge::after {
  top: -1px; height: 2px;
  transform: rotate(-.09deg);
  background-image: var(--core-2);
  -webkit-mask-image: var(--crease-noise-b);
          mask-image: var(--crease-noise-b);
}

/* Aynı kâğıdın öbür tarafı. Bir kat izi iki yüzden zıt görünür: önde
   içe dönükse arkada dışa dönüktür. Yaprak dikey eksende döndüğü için
   izin boyunca yoğunluk deseni de ters yönden okunmalı — scaleX(-1).
   Sınıf tam çevirmenin ortasında, kâğıt dik konumdayken değişiyor. */
.v-dikey body.is-back .letter__creases {
  --band-1: var(--band-ridge);
  --core-1: var(--core-light);
  --band-2: var(--band-valley);
  --core-2: var(--core-dark);
  transform: scaleX(-1);
}

/* ── Biçim düğmesi ──────────────────────────────────────────
   Davetiyenin parçası değil: iki yönü karşılaştırmak için. Seçim
   localStorage'a yazılıp sayfa yenileniyor — zarfın üç katmanı
   açıldıktan sonra DOM'dan siliniyor, dolayısıyla yerinde geri
   sarmak yeniden kurmak demek olurdu. */
.vswitch {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: 8px;
  z-index: 95;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  /* Bulanık zemin yok: sabit konumlu bir backdrop-filter, altındaki
     her kare için arka planı yeniden örnekliyor — açılış boyunca
     bedeli doğrudan kare hızından çıkıyor. */
  background: rgba(252, 246, 234, .92);
  border: 1px solid rgba(150, 124, 96, .3);
}
.vswitch button {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .16em;
  line-height: 1;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vswitch button[aria-pressed="true"] {
  background: var(--wax);
  color: #FBF3E8;
}
.vswitch button:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }
/* Dikeyde koreografi katlanma kadar daha sürüyor; not da o kadar
   sonra beliriyor. */
.v-dikey .turn { transition: opacity 600ms var(--ease) 3080ms, color 300ms var(--ease); }
/* Alçak ekranda dikey biçim de payını geri alıyor. A4 dikey bir
   yaprağın yatay telefona sığmadığı gerçeği değişmiyor — bu yalnızca
   kâğıdın olabildiğince büyük kalmasını sağlıyor. */
@media (max-height: 620px) {
  .v-dikey .stage { --env-w: max(170px, min(94vw, 400px, calc((100dvh - 150px) / 1.2728))); }
}
@media (max-height: 480px) {
  .v-dikey .stage { --env-w: max(150px, min(94vw, 400px, calc((100dvh - 106px) / 1.2728))); }
}
/* En küçük yaprakta (320×568) ikinci yüz ancak bu ölçülerle sığıyor. */
@container sheet (max-height: 400px) {
  .v-dikey .map__crop { height: 44px; }
  .v-dikey .menu li { line-height: 1.4; }
  .v-dikey .menu__sub,
  .v-dikey .giving { line-height: 1.42; }
  .v-dikey .page--flow { padding-top: 10px; padding-bottom: 10px; }
}

/* Ekrana göre uyarlama — biçim bloklarından sonra gelmek zorunda:
   aynı özgüllükte (.v-* .stage) yazıldıkları için kazanan sonuncusu. */
@media (max-height: 620px) {
  .v-yatay .stage { --env-w: max(220px, min(94vw, 400px, calc((100dvh - 150px) / .70))); }
}
@media (max-height: 480px) {
  .v-yatay .stage { --env-w: max(200px, min(94vw, 400px, calc((100dvh - 112px) / .70))); }
}
@media (min-width: 720px) and (min-height: 660px) {
  .v-yatay .stage { --env-w: 470px; }
  .v-dikey .stage { --env-w: 430px; }
}
/* Yatay telefon. A4 dikey bir yaprak 360 piksellik bir boya sığmıyor —
   bu tabaka kesilmeyi olabildiğince azaltıyor, ama dikey biçimin
   yatay telefonda yeri yok. Karşılaştırmanın kendi cevabı bu. */
@container sheet (max-height: 320px) {
  .v-dikey .map__crop { height: 34px; }
  .v-dikey .venue { font-size: 13px; line-height: 1.2; }
  .v-dikey .address,
  .v-dikey .menu li,
  .v-dikey .menu__sub,
  .v-dikey .giving { font-size: 8.5px; line-height: 1.26; }
  .v-dikey .menu__sub { margin-top: 2px; }
  .v-dikey .tegv { font-size: 11px; margin-top: 2px; }
  .v-dikey .page--flow .rule { margin: 3px 0; }
  .v-dikey .cta { font-size: 8px; padding: .5em 1em; }
  .v-dikey .cols { gap: 4px; }
  .v-dikey .page--flow { padding: 8px 10px; }
}