/* ==========================================================================
   Merve & Oguzhan — Dijital Dugun Davetiyesi
   Bolum 1: acilis (zarf) + sehir secimi
   Mobil oncelikli (390px). Renkler zarf ve arka plan videosundan alindi.
   ========================================================================== */

:root{
  /* ZEMINLER — tek sicak krem ailesi.
     Hepsinde kirmizi > yesil > mavi dengesi ayni; boylece zarf, secim kagidi
     ve fon videosu ayni dunyanin parcasi gibi durur. */
  /* Referansin (davetiye.bayogludijital.com) zemin rengi. Giris, secim,
     panel ve zaman kapsulu bu tonda. Tanimsiz kalirsa giris ekraninin
     zemini ve videonun kenar eritmesi calismaz. */
  --fildisi:      #FAF7F0;
  --ivory:        #FBF5EC;
  --ivory-deep:   #F2E9D9;
  --paper:        #FFFCF7;
  --kagit-isik:   #FDF7EB;
  --kagit-golge:  #EFE6D6;
  /* cizgi ve vurgu — hepsi tek sampanya/taupe ailesinden */
  --champagne:    #C1A264;
  --champagne-soft:#DFCBA2;
  --champagne-ink:#8A6C32;               /* kucuk yazilar icin koyu sampanya */
  --hat:          rgba(150,120,66,.34);  /* ince cizgi */
  --hat-soft:     rgba(150,120,66,.18);  /* daha silik cizgi */

  /* yazi hiyerarsisi — sicak koyu taupe ailesi */
  --ink:          #3E342A;               /* 1. seviye: isimler */
  --ink-2:        #574A3C;               /* 2. seviye: tarih, mekan, sehir */
  --ink-3:        #796956;               /* 3. seviye: aciklama, adres */

  /* kagida basilmis his — sadece beyaz alt isik, golge yok */
  --baski: 0 1px 0 rgba(255,255,255,.9);

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Rakamlar: Cormorant'in eski stil rakamlarinda "1" Turkce "i"ye benziyordu.
   Sayisal alanlarda Jost + duz (lining) rakam kullaniliyor. */
.rakam{
  font-family:var(--sans);
  font-feature-settings:"tnum" 1, "lnum" 1;
  font-variant-numeric:tabular-nums lining-nums;
}

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

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--fildisi);
  color:var(--ink);
  font-family:var(--serif);
  color-scheme:only light;               /* Android Chrome karartmasini engeller */
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  /* Cormorant varsayilan olarak eski stil rakam kullaniyor ve "1" Turkce "i"ye
     benziyor. Tum sitede duz (lining) rakam zorunlu. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

body{
  overflow:hidden;
  overscroll-behavior:none;
}

button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

/* ==========================================================================
   EKRANLAR
   ========================================================================== */

.screen{
  position:fixed; inset:0;
  overflow:hidden;
}
[hidden]{ display:none !important; }

/* ==========================================================================
   1. EKRAN — HOS GELDINIZ
   Karahindiba videosu 19 Agustos 2026'da musteri istegiyle KALDIRILDI.
   Giris artik yalniz yazidir: krem zeminde yumusakca belirir (asagidan
   yukselir + bulaniktan netlesir), bir sure durur, yavasca soner.
   ========================================================================== */

.screen--giris{
  background:var(--fildisi);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:opacity 1.4s ease;          /* sahnenin kapanisi (referansla ayni) */
}

.giris{
  width:100%;
  max-width:520px;
  text-align:center;
}

/* --- yazi --- */

.giris__metin{
  padding:0 22px;
  animation:girisYazi 2.2s cubic-bezier(.16,.85,.2,1) .35s both;
}
@keyframes girisYazi{
  0%  { opacity:0; transform:translateY(16px); filter:blur(7px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}

/* Yavasca sonus. Belirme animasyonu "both" ile bittigi karede DURUR ve o
   kareyi zorlar; sinifla verilen opacity/filter degerlerini ezer. Bu yuzden
   sonus de bir ANIMASYON olmak zorunda — animasyon animasyonu degistirir. */
.giris__metin.is-sonuyor{
  animation:girisYaziSonus 1.6s ease forwards;
}
@keyframes girisYaziSonus{
  0%  { opacity:1; transform:none; filter:blur(0); }
  100%{ opacity:0; transform:translateY(-10px); filter:blur(5px); }
}

.giris__imza{
  margin:0 0 14px;
  font-family:var(--sans);
  font-weight:300;
  font-size:10px;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.giris__hos{
  margin:0;
  font-family:'Great Vibes', 'Cormorant Garamond', cursive;
  font-weight:400;
  font-size:clamp(38px, 10vw, 60px);
  line-height:1.1;
  letter-spacing:0;
  color:var(--ink);
}

/* --- muzik daveti --- */

.giris__ses{
  margin-top:26px;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.giris__ses.is-gor{ opacity:1; }

.giris__ses-kutu{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--hat);
  border-radius:100px;
  background:rgba(255,253,248,.6);
}
.giris__ses-kutu svg{
  width:15px; height:15px;
  fill:none; stroke:var(--champagne);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  animation:sesNabiz 2.2s ease-in-out infinite;
}
@keyframes sesNabiz{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.giris__ses-kutu span{
  font-family:var(--sans); font-weight:300;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3);
}

/* Sahnenin cikisi: once kart soner (JS ile), sonra bu sinifla tum sahne
   yavasca kapanir. Referanstaki ritmin aynisi. */
.screen--giris.is-cikiyor{
  opacity:0;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .giris__metin{ animation:none; }
  .giris__ses-kutu svg{ animation:none; }
}

/* ==========================================================================
   2. EKRAN — DAVETIYE KAGIDI
   Zarfin icinden cikan kartin ekrani doldurmus hali.
   Kagit tonu, kabartma motifler ve cerceve acilis.mp4'teki karttan alindi.
   ========================================================================== */

.screen--kagit{
  background:#EFE6D6;
  display:grid; place-items:center;
}

.kagit{
  position:absolute; inset:0;
  overflow:hidden;
  display:grid; place-items:center;
  /* Kagit: sarimtirak degil ama zarfla ayni sicak krem ailesinde.
     Kirmizi>yesil>mavi dengesi zarf ve fon videosuyla ayni. */
  background:radial-gradient(126% 92% at 50% 58%,
    #FFFCF7 0%, #FCF7EF 34%, #F7F0E4 68%, #EFE6D6 100%);
  transform-origin:50% 58%;
}

/* kagit dokusu — ince gren + cok hafif lif */
.kagit__doku{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.36;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='220' height='220' filter='url(%23n)' opacity='0.34'/></svg>");
  background-size:220px 220px;
}

/* ince kabartma cerceve — disda tek cizgi, icinde ikinci ince cizgi */
.kagit__cerceve{
  position:absolute;
  inset:min(4.6vw, 22px);
  pointer-events:none;
  border:1px solid var(--hat);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.kagit__cerceve::after{
  content:"";
  position:absolute; inset:5px;
  border:1px solid var(--hat-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.5);
}

/* kose motifleri */
.kagit__motif{
  position:absolute;
  width:min(31vw, 150px);
  height:auto;
  pointer-events:none;
  user-select:none;
}
.kagit__motif--ust-sol{ left:min(5.6vw,26px);  top:min(5.6vw,26px); }
.kagit__motif--ust-sag{ right:min(5.6vw,26px); top:min(5.6vw,26px); transform:scaleX(-1); }
.kagit__motif--alt-sol{ left:min(5.6vw,26px);  bottom:min(5.6vw,26px); transform:scaleY(-1); opacity:.62; }
.kagit__motif--alt-sag{ right:min(5.6vw,26px); bottom:min(5.6vw,26px); transform:scale(-1,-1); opacity:.62; }

.kagit__kalp{
  position:absolute;
  left:50%; top:min(7.4vw,34px);
  transform:translateX(-50%);
  width:min(13vw, 62px);
  height:auto;
  pointer-events:none;
}

/* --- kagit uzerindeki yazi --- */

.kagit__icerik{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:0 30px;
  text-align:center;
}

.kagit__isim{
  margin:0;
  font-size:38px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.045em;
  text-indent:.045em;                    /* harf araligini optik olarak dengeler */
  color:var(--ink);
  /* kagida basilmis his: ust kenarda ince beyaz isik, altta cok hafif derinlik */
  text-shadow:0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(120,96,58,.08);
}
.kagit__isim span{
  font-weight:500;
  font-size:.82em;
  letter-spacing:0;
  color:var(--champagne-ink);
  padding:0 .06em;
}

.kagit__cizgi{
  display:block;
  width:58px; height:1px;
  margin:20px auto 0;
  background:linear-gradient(90deg, transparent, rgba(168,138,84,.75) 50%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
}

.kagit__soru{
  margin:22px 0 0;
  /* tek satirda kalsin diye ekran genisligine gore olceklenir */
  font-size:min(22px, 5.7vw);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--ink-2);
  text-shadow:var(--baski);
}

/* --- secimler: kutu degil, kagida islenmis tipografi --- */

/* Iki secim yan yana; aralarinda ince dikey ayrac.
   Dokunulabilir oldugu anlasilsin diye hafif zemin + alt cizgi tepkisi var. */
.secimler{
  margin-top:38px;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
}

.secimler__ayrac{
  flex:0 0 1px;
  align-self:center;
  width:1px; height:136px;
  margin:0;
  background:linear-gradient(180deg, transparent, var(--hat) 50%, transparent);
}

.secim{
  flex:1 1 0;
  min-width:0;
  display:block;
  padding:16px 6px 18px;
  text-align:center;
  border-radius:2px;
  background:rgba(255,255,255,0);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.secim:focus-visible{ outline:1px solid var(--champagne-ink); outline-offset:4px; }

@media (hover:hover){
  .secim:hover{ background:rgba(255,255,255,.45); transform:translateY(-2px); }
  .secim:hover .secim__alt{ width:76%; background:linear-gradient(90deg, transparent, var(--champagne-ink) 50%, transparent); }
  .secim:hover .secim__sehir{ color:#2F2820; }
}
.secim:active{ transform:scale(.985); background:rgba(255,255,255,.58); }
.secim:active .secim__alt{ width:76%; background:linear-gradient(90deg, transparent, var(--champagne-ink) 50%, transparent); }

.secim__sehir{
  display:block;
  font-size:min(31px, 8.1vw);
  font-weight:600;
  line-height:1.08;
  letter-spacing:.035em;
  text-indent:.035em;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.95);
  transition:color .45s var(--ease);
}

.secim__alt{
  display:block;
  width:50%; height:1px;
  margin:12px auto 0;
  background:linear-gradient(90deg, transparent, rgba(160,128,72,.72) 50%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:width .45s var(--ease), background .45s var(--ease);
}

.secim__tarih{
  display:block;
  margin-top:13px;
  font-family:var(--sans);
  font-size:min(10px, 2.65vw);
  font-weight:500;
  letter-spacing:.13em;
  text-indent:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  font-variant-numeric:lining-nums;
  color:var(--champagne-ink);
}

.secim__gun{
  display:block;
  margin-top:5px;
  font-family:var(--sans);
  font-size:min(9px, 2.45vw);
  font-weight:400;
  letter-spacing:.18em;
  text-indent:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-3);
}

.secim__mekan{
  display:block;
  margin-top:11px;
  font-size:min(17px, 4.4vw);
  font-style:italic;
  font-weight:400;
  line-height:1.32;
  color:var(--ink-3);
  text-shadow:var(--baski);
}

/* --- kagidin cozulmesi --- */

.screen--kagit.is-cozuluyor .kagit{
  opacity:0;
  transform:scale(1.055);
  filter:brightness(1.14) saturate(.94);
  transition:opacity .95s var(--ease), transform 1.15s var(--ease), filter .95s var(--ease);
}
.screen--kagit.is-cozuluyor .kagit__icerik{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}

/* --- kagit sahnesinin acilisi ---
   ESKIDEN: sahne bir anda tam gorunurlukte patliyordu; yalniz kagit hafifce
   kuculuyordu. Motifler, cerceve ve kalp hic yumusamadan geliyordu.
   SIMDI: once zemin yumusakca acilir, sonra cerceve, motifler ve kalp
   sirayla belirir, en son yazilar gelir. Giris sahnesi sonerken bunun
   altinda kaldigi icin gecis "kesme" degil "gecisme" gibi durur. */

.screen--kagit{
  opacity:0;
  transition:opacity 1.5s var(--ease);
}
.screen--kagit.is-in{ opacity:1; }

.screen--kagit.is-in .kagit{
  animation:kagitOtur 2.2s var(--ease) backwards;
}
@keyframes kagitOtur{
  from{ transform:scale(1.04); }
  to  { transform:scale(1); }
}

/* Kagit sussleri sirayla belirir.
   DIKKAT: bitis karesi bilerek YAZILMADI. Alt motiflerin kendi opakligi
   .62'dir; "to{opacity:1}" yazilirsa o incelik bozulur. Eksik biten
   keyframe elemanin kendi degerine doner. */
@keyframes kagitOge{ from{ opacity:0; } }

.screen--kagit.is-in .kagit__cerceve{ animation:kagitOge 1.7s var(--ease) .30s backwards; }
.screen--kagit.is-in .kagit__motif  { animation:kagitOge 2.0s var(--ease) .45s backwards; }
.screen--kagit.is-in .kagit__kalp   { animation:kagitOge 2.0s var(--ease) .65s backwards; }

/* ==========================================================================
   3. EKRAN — ANA DAVETIYE
   Kagit dunyasinin devami: krem zemin, sampanya sac cizgiler, kabartma yazi.
   Kutu / panel yok; her bolum kagida yazilmis gibi akar.
   ========================================================================== */

.screen--davetiye{
  background:var(--ivory);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

.bg-video{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}

.bg-wash{
  position:fixed; inset:0;
  z-index:1;
  /* Hafif krem yikama. Video zaten yumusatildigi icin sadece yazinin
     oturdugu seridi biraz sakinlestirir; goruntuyu olduren beyaz yok. */
  background:
    radial-gradient(122% 60% at 50% 50%, rgba(253,248,240,.34) 0%, rgba(253,248,240,0) 74%),
    linear-gradient(180deg,
      rgba(252,246,236,.40) 0%,
      rgba(251,244,233,.46) 45%,
      rgba(249,241,228,.50) 100%);
}

.dv{
  position:relative; z-index:2;
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:
    calc(env(safe-area-inset-top) + 58px)
    28px
    calc(env(safe-area-inset-bottom) + 46px);
  text-align:center;
}

/* --- baslik --- */

.dv__ust{
  margin:0;
  font-family:var(--sans);
  font-size:10px;
  font-weight:400;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ISIMLER — referanstaki gibi ALT ALTA, arada el yazisi sampanya "&".
   Tek satirlik "Merve & Oguzhan" kaldirildi; ilk ekran artik yalniz bu. */
.dv__ad{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 11vw, 74px);
  line-height:1.06;
  letter-spacing:0;
  color:var(--ink);
}
.dv__ve{
  margin:2px 0;
  font-family:'Great Vibes', 'Cormorant Garamond', cursive;
  font-weight:400;
  font-size:clamp(38px, 10vw, 64px);
  line-height:1;
  color:var(--champagne-ink);
}

/* alt aciklama — ilk ekrandaki tek cumle */
.dv__davet{
  margin:18px 0 0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(16px, 4.2vw, 21px);
  line-height:1.75;
  color:var(--ink-3);
}

/* eski tek satirlik isim yalniz imzada kaldi */
.dv__isim{
  margin:19px 0 0;
  font-size:min(41px, 10.6vw);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.035em;
  text-indent:.035em;                    /* son harf araligini telafi eder */
  white-space:nowrap;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(120,96,58,.07);
}
/* ayrac olarak duz "&": italik swash yerine sade, kucuk ve sampanya */
.dv__isim span{
  font-style:normal;
  font-weight:500;
  font-size:.80em;
  letter-spacing:0;
  padding:0 .07em;
  color:var(--champagne-ink);
}

/* susleme: iki ince cizgi arasinda kucuk baklava — tam merkezli */
.suslu{
  position:relative;
  display:block;
  width:112px; height:5px;
  margin:24px auto;
  background:none;
}
.suslu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:2px;
  height:1px;
  /* ortada baklava icin bosluk birakan cift cizgi */
  background:linear-gradient(90deg,
    transparent 0%, rgba(160,128,72,.62) 26%, rgba(160,128,72,.62) 41%, transparent 43%,
    transparent 57%, rgba(160,128,72,.62) 59%, rgba(160,128,72,.62) 74%, transparent 100%);
}
.suslu::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--champagne-ink);
}
/* Ustteki ve alttaki ayrac AYNI olmali (20 Agustos, Halid).
   Genislik farki kaldirildi; yalniz dikey aralik farkli. */
.suslu--kucuk{ width:112px; margin:22px auto; }

.dv__tarih{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  letter-spacing:.13em;
  text-indent:.13em;
  font-variant-numeric:lining-nums;
  color:var(--ink-2);
}

.dv__mekan{
  margin:11px 0 0;
  font-size:21px;
  font-style:italic;
  font-weight:400;
  color:var(--ink-3);
  text-shadow:var(--baski);
}

/* --- asagi kaydirma ipucu ---
   Referanstaki gibi: ekranin altina sabit, "AŞAĞI KAYDIRIN" yazisi ve
   zipplayan altin ok. Ilk kaydirmada kaybolur. */
.dv__ok{
  position:fixed;
  left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom) + 22px);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease, transform .6s ease;
}
.dv__ok.is-gor{ opacity:1; }
.dv__ok.is-gizli{ opacity:0; transform:translateY(10px); }

.dv__ok-yazi{
  font-family:var(--sans);
  font-weight:300;
  font-size:10px;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:8px;
  opacity:.85;
}
.dv__ok-ok{
  width:22px; height:22px;
  color:var(--champagne-ink);
  animation:okZipla 1.9s ease-in-out infinite;
}
.dv__ok-ok svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
@keyframes okZipla{
  0%,100%{ transform:translateY(0);   opacity:.65; }
  50%    { transform:translateY(7px); opacity:1; }
}

/* --- bolumler --- */

.dv__bolum{ margin-top:44px; }

.dv__baslik{
  margin:0 0 24px;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.30em;
  text-indent:.30em;
  text-transform:uppercase;
  color:var(--champagne-ink);
}

/* Bolumler arasi ayrac: eskiden 1x34 px DIKEY cizgiydi; sayfanin geri
   kalanindaki yatay elmasli ayracin yaninda kopmus bir cizgi gibi duruyordu
   (20 Agustos, Halid). Artik ayni dil kullaniliyor — HTML'de bu ogeler
   "suslu suslu--kucuk" sinifina gecirildi; asagidaki kural yalnizca aralik
   icin duruyor. */
.dv__bolum + .suslu--kucuk, .dv__soz + .suslu--kucuk{ margin:34px auto 0; }

/* --- geri sayim --- */

.sayac{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.sayac__birim{
  flex:1;
  position:relative;
  padding:0 2px;
}
.sayac__birim + .sayac__birim::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:1px; height:34px;
  background:linear-gradient(180deg, transparent, rgba(168,138,84,.30), transparent);
}
.sayac__sayi{
  display:block;
  font-family:var(--sans);
  font-size:31px;
  font-weight:400;
  line-height:1;
  letter-spacing:.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.sayac__etiket{
  display:block;
  margin-top:12px;
  font-family:var(--sans);
  font-size:9px;
  font-weight:400;
  letter-spacing:.20em;
  text-indent:.20em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.sayac__gecti{
  margin:0;
  font-size:21px;
  font-style:italic;
  font-weight:400;
  color:var(--ink-2);
}

/* --- program --- */

.program{
  list-style:none;
  margin:0; padding:0;
}
.program li{
  padding:17px 0;
  border-top:1px solid var(--hat-soft);
}
.program li:first-child{ border-top:0; }

.program__saat{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  text-indent:.22em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--champagne-ink);
}
.program__ad{
  display:block;
  margin-top:8px;
  font-size:22px;
  font-style:italic;
  font-weight:400;
  color:var(--ink);
  text-shadow:var(--baski);
}

/* --- adres --- */

.dv__yer{
  margin:0;
  font-size:24px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  text-shadow:var(--baski);
}
.dv__adres{
  margin:12px 0 0;
  font-size:18px;
  font-style:italic;
  font-weight:400;
  line-height:1.62;
  font-variant-numeric:lining-nums;
  color:var(--ink-3);
}

.yol{
  display:inline-block;
  margin-top:26px;
  padding:13px 26px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border:1px solid rgba(150,120,66,.46);
  background:rgba(255,253,248,.46);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.yol::after{ content:"  →"; letter-spacing:0; }
@media (hover:hover){
  .yol:hover{ background:rgba(255,253,248,.82); border-color:var(--champagne-ink); }
}
.yol:active{ background:rgba(255,253,248,.85); border-color:var(--champagne-ink); }

/* --- katilim (RSVP) --- */

.dv__not{
  margin:-10px 0 30px;
  font-size:18px;
  font-style:italic;
  font-weight:400;
  color:var(--ink-3);
}

.alan{ display:block; }

.alan__etiket{
  display:block;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--champagne-ink);
}

.alan__giris{
  display:block;
  width:100%;
  margin-top:14px;
  padding:8px 2px 13px;
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  text-align:center;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(150,120,66,.50);
  border-radius:0;
  outline:none;
  -webkit-appearance:none;
  transition:border-color .35s var(--ease);
}
.alan__giris::placeholder{
  color:rgba(121,105,86,.52);
  font-weight:400;
  font-style:italic;
}
.alan__giris:focus{ border-bottom-color:var(--champagne-ink); }

/* Tarayicinin otomatik doldurma boyamasi (Chrome'da mavi/sari kutu) davetiye
   dunyasini bozuyordu. Zemini seffaf birakip yaziyi kendi rengimizde tutuyoruz.
   Chrome zemini bir gecisle boyadigi icin gecis suresi sonsuza yakin verilir. */
.alan__giris:-webkit-autofill,
.alan__giris:-webkit-autofill:hover,
.alan__giris:-webkit-autofill:focus,
.alan__giris:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink);
  background-color:transparent !important;
  transition:background-color 100000s ease-in-out 0s;
  caret-color:var(--ink);
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
}
.alan__giris:autofill{
  -webkit-text-fill-color:var(--ink);
  background-color:transparent !important;
  transition:background-color 100000s ease-in-out 0s;
}

.katilim{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:36px;
}
.katilim__sec{
  padding:6px 4px;
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
  color:var(--ink-2);
  transition:color .35s var(--ease);
}
@media (hover:hover){
  .katilim__sec:hover{ color:var(--ink); }
  .katilim__sec:hover .katilim__alt{ transform:scaleX(.85); background:var(--hat); }
}
.katilim__alt{
  display:block;
  width:100%; height:1px;
  margin-top:11px;
  background:var(--hat);
  transform:scaleX(.55);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.katilim__sec.is-secili{ color:var(--ink); font-weight:500; }
.katilim__sec.is-secili .katilim__alt{
  transform:scaleX(1);
  background:var(--champagne-ink);
}

.kisi{ margin-top:36px; }
.kisi__sayac{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin-top:16px;
}
.kisi__dugme{
  width:38px; height:38px;
  display:grid; place-items:center;
  font-family:var(--sans);
  font-size:18px;
  font-weight:400;
  line-height:1;
  color:var(--champagne-ink);
  border:1px solid var(--hat);
  border-radius:50%;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.kisi__dugme:active{ border-color:var(--champagne-ink); color:var(--ink); }
.kisi__sayi{
  min-width:46px;
  font-family:var(--sans);
  font-size:27px;
  font-weight:400;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

.gonder{
  display:block;
  margin:42px auto 0;
  padding:17px 52px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid rgba(150,120,66,.52);
  background:rgba(255,252,246,.58);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
@media (hover:hover){
  .gonder:hover{ background:rgba(255,252,246,.88); border-color:var(--champagne-ink); }
}
.gonder:active{ background:rgba(255,252,246,.9); border-color:var(--champagne-ink); }

.gonder[disabled]{
  opacity:.55;
  cursor:default;
}

/* --- kayit alindiktan sonra --- */

.tesekkur{
  animation:fadeUp .8s var(--ease) backwards;
}
.tesekkur__ad{
  margin:0;
  font-size:25px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  text-shadow:var(--baski);
}
.tesekkur__not{
  margin:12px auto 0;
  max-width:300px;
  font-size:18px;
  font-style:italic;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-3);
}
.tesekkur__ek{
  margin:10px 0 0;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--champagne-ink);
}
.tesekkur__ek:empty{ display:none; }

.tesekkur__yeni{
  display:block;
  margin:14px auto 0;
  padding:.7em 1.1em;
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.20em;
  text-indent:.20em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:1px solid var(--hat-soft);
}

.tesekkur__degis{
  margin-top:24px;
  padding:.7em 1.1em;
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--champagne-ink);
  border-bottom:1px solid var(--hat);
}

.rsvp__durum{
  margin:20px auto 0;
  max-width:300px;
  min-height:1em;
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.75;
  color:var(--ink-3);
}
.rsvp__durum.is-uyari{ color:#96513F; }

/* --- alt --- */

.dv__alt{ margin-top:58px; }

.dv__imza{
  margin:0;
  font-size:25px;
  font-weight:400;
  font-style:italic;
  color:var(--ink-2);
  text-shadow:var(--baski);
}
.dv__imza span{ color:var(--champagne-ink); }

.sehir-degis{
  margin-top:28px;
  padding:.7em 1.1em;
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--champagne-ink);
  border-bottom:1px solid var(--hat);
}

/* --- giris animasyonu ---
   Ogeler varsayilan olarak gorunur; animasyon "backwards" ile calisir.
   Boylece animasyon herhangi bir sebeple calismazsa icerik yine de gorunur. */

.screen--kagit.is-in .reveal{
  animation:fadeUp 1.1s cubic-bezier(.16,.85,.2,1) var(--d,0s) backwards;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); filter:blur(5px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}

/* ==========================================================================
   ISIK PERDESI — video sonundaki ivory isiktan arayuze gecis
   ========================================================================== */

.veil{
  position:fixed; inset:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 55%, #FFFFFF 0%, #FEF9F0 38%, #F8EEDC 72%, #F3E6D2 100%);
  transition:opacity .9s var(--ease);
}
.veil.is-on{
  opacity:1;
  transition:opacity .55s cubic-bezier(.5,0,.75,0);   /* videonun isigiyla ayni hizda kapanir */
}
/* kagit cozulurken gecen yumusak isik */
.veil.is-yumusak{
  opacity:.62;
  transition:opacity .5s var(--ease);
}

/* ==========================================================================
   SES DUGMESI
   ========================================================================== */

.sound{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 14px);
  right:calc(env(safe-area-inset-right) + 14px);
  z-index:70;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--hat);
  background:rgba(255,253,249,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:1;
}
.sound svg{
  width:17px; height:17px;
  fill:none;
  stroke:var(--champagne-ink);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sound .sound__body{ fill:rgba(168,138,78,.14); }
.sound .sound__slash{ opacity:0; transition:opacity .25s var(--ease); }
.sound .sound__wave{ opacity:1; transition:opacity .25s var(--ease); }

.sound[aria-pressed="false"] .sound__slash{ opacity:1; }
.sound[aria-pressed="false"] .sound__wave{ opacity:0; }

/* ==========================================================================
   GENIS EKRAN
   ========================================================================== */

@media (min-width:768px){
  .kagit__icerik{ max-width:620px; }
  .kagit__isim{ font-size:34px; }
  .kagit__soru{ font-size:34px; }
  .kagit__motif{ width:min(16vw, 178px); }
  .kagit__kalp{ width:min(8vw, 76px); top:38px; }
  .kagit__cerceve{ inset:30px; }
  .kagit__motif--ust-sol, .kagit__motif--ust-sag{ top:34px; }
  .kagit__motif--alt-sol, .kagit__motif--alt-sag{ bottom:34px; }
  .kagit__motif--ust-sol, .kagit__motif--alt-sol{ left:34px; }
  .kagit__motif--ust-sag, .kagit__motif--alt-sag{ right:34px; }

  .secimler{ margin-top:52px; }
  .secimler__ayrac{ height:158px; margin:0 30px; }
  .secim{ padding:20px 16px 22px; }
  .secim__sehir{ font-size:42px; }
  .secim__tarih{ font-size:11px; letter-spacing:.18em; text-indent:.18em; }
  .secim__gun{ font-size:10px; }
  .secim__mekan{ font-size:20px; }
  .kagit__isim{ font-size:48px; }
  .kagit__soru{ font-size:27px; }
  .screen--davetiye{ background:linear-gradient(180deg, var(--ivory) 0%, #F7F0E4 100%); }

  .dv{ max-width:520px; padding-top:calc(env(safe-area-inset-top) + 76px); }
  .dv__isim{ font-size:52px; }
  .dv__tarih{ font-size:17px; letter-spacing:.16em; text-indent:.16em; }
  .dv__mekan{ font-size:24px; margin-top:13px; }
  .sayac__sayi{ font-size:38px; }
  .program__ad{ font-size:24px; }
  .dv__yer{ font-size:27px; }
  .dv__adres{ font-size:19px; }
}

/* ==========================================================================
   HAREKET AZALTMA
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .seal__ring{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .screen--kagit.is-in .reveal{ animation:none; }
  .screen--kagit.is-in .kagit{ animation:none; }
  /* sahne ve susleri beklemeden goster — is-in gelmese bile bos ekran kalmasin */
  .screen--kagit{ opacity:1; transition:none; }
  .screen--kagit.is-in .kagit__cerceve,
  .screen--kagit.is-in .kagit__motif,
  .screen--kagit.is-in .kagit__kalp{ animation:none; }
  .dv{ animation:none; }
  .dv__ok-ok{ animation:none; }
  .gorun{ opacity:1; transform:none; filter:none; }
  .gorun.is-gor{ animation:none; }
  .veil{ transition-duration:.3s; }
}

/* ==========================================================================
   2. EKRAN — SECIM: CANLANDIRMA
   Kutu/kart yapilmadi. Tipografi guclendirildi; dokunulabilirlik her zaman
   gorunur bir sampanya alt cizgisiyle ve hafif sicak zeminle belli edildi.
   ========================================================================== */

.screen--kagit{ background:var(--fildisi); }
.kagit{
  /* Girisin acik krem zemininden kopmasin: ayni aile, cok hafif derinlik. */
  background:radial-gradient(128% 94% at 50% 52%,
    #FFFFFF 0%, #FDFBF6 34%, #FAF7F0 68%, #F4EFE4 100%);
}
.kagit__doku{ opacity:.30; }

.kagit__isim{ font-size:min(41px, 10.6vw); }
.kagit__soru{
  color:var(--ink-2);
  font-size:min(23px, 5.9vw);
}

/* her secimin arkasinda cok hafif sicak bir alan; dokunulacak yeri belli eder */
.secim{
  position:relative;
  padding:18px 8px 20px;
  background:
    radial-gradient(72% 60% at 50% 46%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 72%);
  transition:transform .4s var(--ease), background .4s var(--ease);
}

.secim__sehir{
  font-size:min(33px, 8.6vw);
  font-weight:600;
  color:#33291F;
}

/* alt cizgi HER ZAMAN gorunur: burasi dokunulabilir bir secim */
.secim__alt{
  width:62%;
  height:1.5px;
  margin-top:13px;
  background:linear-gradient(90deg, transparent, rgba(150,118,58,.85) 50%, transparent);
  transition:width .4s var(--ease), background .4s var(--ease);
}

.secim__tarih{ color:#7A5C24; font-weight:500; }
.secim__mekan{ color:var(--ink-2); }

@media (hover:hover){
  .secim:hover{
    background:radial-gradient(72% 62% at 50% 46%, rgba(255,255,255,.9) 0%, rgba(255,252,244,0) 74%);
    transform:translateY(-2px);
  }
  .secim:hover .secim__alt{ width:88%; }
}
.secim:active{
  transform:scale(.986);
  background:radial-gradient(72% 62% at 50% 46%, rgba(255,255,255,.96) 0%, rgba(255,250,240,0) 76%);
}
.secim:active .secim__alt{ width:92%; }

/* dokunma ipucu — misafir dokunulabilir oldugunu kacirmasin diye belirgin */
.secim__ipucu{
  display:block;
  margin-top:12px;
  font-family:var(--sans);
  /* 390 px'te tek satirda kalmali: harf araligi bilerek dar tutuldu */
  font-size:10px;
  font-weight:500;
  letter-spacing:.09em;
  text-indent:.09em;
  text-transform:uppercase;
  color:var(--champagne-ink);
  animation:ipucuNefes 3.4s ease-in-out infinite;
}
@keyframes ipucuNefes{
  0%,100%{ opacity:.72; }
  50%    { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .secim__ipucu{ animation:none; opacity:1; }
}

/* ==========================================================================
   GERI SAYIM — tam genislikte fotografli bolum
   Fotograf: beyaz gul buketi + bordo aile cuzdani. Sicak isigi korunur;
   okunabilirlik icin yalnizca hafif ivory tul ve kenar erimesi eklenir.
   ========================================================================== */

.dv__bolum--sayac{
  position:relative;
  margin-top:52px;
  padding:52px 0 48px;
  isolation:isolate;
}

.sayac-fon{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  overflow:hidden;
  /* Fotograf kaldirildi (musteri istegi). Yerine davetiyenin kendi
     sicak krem yikamasi kaldi; bolum yine tam genislikte durur. */
  background:
    radial-gradient(120% 78% at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,252,247,0) 72%),
    linear-gradient(180deg, rgba(250,247,240,0) 0%, rgba(247,242,231,.55) 26%, rgba(247,242,231,.55) 74%, rgba(250,247,240,0) 100%);
}

.sayac-ic{ position:relative; width:100%; }

.dv__bolum--sayac .dv__baslik{
  color:#7A5C24;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.dv__bolum--sayac .sayac__sayi{
  font-size:38px;
  font-weight:500;
  color:var(--ink);
  text-shadow:var(--baski);
}
.dv__bolum--sayac .sayac__etiket{
  color:#6B5A45;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.dv__bolum--sayac .sayac__birim + .sayac__birim::before{
  background:linear-gradient(180deg, transparent, rgba(140,110,58,.45), transparent);
}

/* rakam yuvarlanirken tek tek haneler */
.sayac__sayi .hane{
  display:inline-block;
  min-width:.62em;
  text-align:center;
}
.sayac__sayi.is-donuyor{ color:#5A4A33; }

/* ==========================================================================
   EYLEMLER — yol tarifi + takvime ekle
   ========================================================================== */

.dv__bolum--eylem{ margin-top:34px; }

.eylemler{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.eylem{
  flex:1 1 0;
  min-width:132px;
  max-width:190px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 16px;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-indent:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,253,248,.78);
  border:1px solid rgba(150,120,66,.52);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .14s var(--ease);
}
.eylem__simge{
  width:15px; height:15px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--champagne-ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (hover:hover){
  .eylem:hover{ background:#FFFDF8; border-color:var(--champagne-ink); }
}
.eylem:active{ transform:translateY(1px); background:#FFFDF8; border-color:var(--champagne-ink); }
.eylem:focus-visible{ outline:1px solid var(--champagne-ink); outline-offset:3px; }

.eylem__not{
  margin:14px 0 0;
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--champagne-ink);
  min-height:1em;
}

@media (min-width:480px){
  .dv__bolum--sayac{ padding:64px 0 66px; }
  .dv__bolum--sayac .sayac__sayi{ font-size:38px; }
}

/* ILK EKRAN = yalnizca isim blogu.
   Referansta oldugu gibi baska hicbir sey gorunmez; tarih, mekan ve geri
   sayim katlanin altindadir. Yukseklik, .dv'nin ust dolgusu dusulerek
   hesaplanir; boylece blogun alti tam ekran alt kenarina denk gelir. */
.dv__bas{
  min-height:calc(100svh - env(safe-area-inset-top) - 58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@supports not (height: 100svh){
  .dv__bas{ min-height:calc(100vh - env(safe-area-inset-top) - 58px); }
}

/* ==========================================================================
   KAYDIRMA ANIMASYONU
   Bolum ekrana girince yazilar/sayilar asagidan yukselerek ve netlesip
   belirir. Referanstaki (davetiye.bayogludijital.com) ritmin aynisi.
   ========================================================================== */

.gorun{ opacity:0; transform:translateY(26px); filter:blur(6px); }
.gorun.is-gor{
  animation:gorunGel 1.5s cubic-bezier(.16,.85,.2,1) var(--d,0s) forwards;
}
@keyframes gorunGel{
  to{ opacity:1; transform:none; filter:blur(0); }
}
/* JS calismazsa (veya cok eski tarayici) icerik yine de gorunur */
.no-js .gorun, .gorun.is-hazir{ opacity:1; transform:none; filter:none; }

/* --- fotografin uzerindeki kontroller ---
   Bant artik fotografli oldugu icin dugmeler daha dolu bir zemin ve daha
   belirgin bir cerceve aliyor; cicek dokusunun uzerinde kaybolmasinlar. */

.sayac-ic .eylemler{ margin-top:34px; }

.dv__bolum--sayac .eylem{
  background:rgba(255,253,248,.86);
  border-color:rgba(150,120,66,.52);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
@media (hover:hover){
  .dv__bolum--sayac .eylem:hover{ background:#FFFEFB; border-color:var(--champagne-ink); }
}
.dv__bolum--sayac .eylem:active{ background:#FFFEFB; border-color:var(--champagne-ink); }

.dv__bolum--sayac .eylem__not{
  color:#6B5324;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* ==========================================================================
   DONEN TARIH (slot) — referanstan uyarlandi
   Referansta koyu fotograf uzerinde beyaz yaziydi; burada acik krem zeminde
   koyu yazi ve sampanya cerceve olarak calisiyor.
   ========================================================================== */

.slot{ margin:0 0 4px; }

.slot__satir{
  display:flex; align-items:center; justify-content:center;
}

/* her rakam bir pencere: icindeki serit dikey kayar */
.slot__rakam{
  position:relative; display:inline-block;
  width:clamp(27px, 7.2vw, 38px);
  height:clamp(42px, 11vw, 58px);
  overflow:hidden; margin:0 1.5px;
  border-radius:3px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px rgba(150,120,66,.30);
  transition:box-shadow .3s var(--ease);
  /* Kirpmayi compositor'a da zorlar. Bkz. asagidaki NOT. */
  contain:paint;
}
.slot__rakam .serit{
  position:absolute; left:0; top:0; width:100%;
}
.slot__rakam .serit span{
  display:block;
  height:clamp(42px, 11vw, 58px);
  line-height:clamp(42px, 11vw, 58px);
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px, 8.2vw, 44px);
  color:var(--ink); text-align:center;
  font-variant-numeric:tabular-nums lining-nums;
}

/* durunca sampanya vurgu */
.slot__rakam.oturdu{
  box-shadow:inset 0 0 0 1px rgba(150,120,66,.62), 0 2px 14px rgba(150,120,66,.14);
  background:rgba(255,255,255,.85);
}

.slot__ayir{
  display:inline-block; margin:0 3px;
  font-family:var(--serif);
  font-size:clamp(24px, 6.4vw, 34px);
  color:rgba(150,120,66,.55); line-height:1;
}

/* gun adi — o da slot gibi doner */
.slot__gun{ margin-top:12px; display:flex; justify-content:center; }
/* ⚠️ NOT — 20 Ağustos 2026, CANLIDA GORULEN HATA:
   Serit'lerde "will-change:transform" vardi. Chrome bu seritleri ayri bir
   compositor katmanina alinca kutunun "overflow:hidden" kirpmasi GPU tarafinda
   uygulanmiyordu: geri sayim bolumunden uzaklasip TEKRAR DONULDUGUNDE serit
   butun haliyle tasip gorunuyordu (rakamlar ust uste, "CUMARTESI" iki kez).
   Headless/GPU kapali testte GORUNMEZ — yalnizca gercek Chrome'da cikar.
   Cozum: will-change kaldirildi + kutulara contain:paint verildi.
   Bu iki satiri geri alma. */
.slot__kutu{
  position:relative; display:inline-block;
  width:150px;                      /* JS gercek genisligi olcup verir */
  height:clamp(19px, 4.8vw, 24px);
  overflow:hidden; padding:0 4px;
  contain:paint;
}
.slot__kutu .serit{ position:absolute; left:0; top:0; width:100%; }
.slot__kutu .serit span{
  display:block;
  height:clamp(19px, 4.8vw, 24px);
  line-height:clamp(19px, 4.8vw, 24px);
  font-family:var(--sans); font-weight:400;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; text-align:center;
}
.slot__kutu.oturdu .serit span{ color:var(--champagne-ink); }

/* ekran okuyucu ve JS calismazsa gorunen yedek */
.slot__okunur{
  margin:10px 0 0;
  font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.slot.is-hazir + .slot__okunur{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ayrac: cizgi — elmas — cizgi */
.ayrac-b{
  display:flex; align-items:center; justify-content:center;
  margin:20px 0 18px;
}
.ayrac-b__cizgi{
  width:44px; height:1px;
  background:linear-gradient(90deg, transparent, var(--champagne));
}
.ayrac-b__cizgi--sag{
  background:linear-gradient(90deg, var(--champagne), transparent);
}
.ayrac-b__elmas{
  width:4px; height:4px; margin:0 10px;
  background:var(--champagne);
  transform:rotate(45deg);
}

/* bandin altindaki italik soz */
.dv__soz{
  margin:26px 0 0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(17px, 4.6vw, 20px);
  color:var(--ink-3);
  text-shadow:var(--baski);
}