/* ══════════════════════════════════════════════════════════════
   Gaye & Hulusi — Dijital Davetiye
   Renk paletini değiştirmek için sadece :root bloğunu düzenleyin.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ══ RENK PALETİ — "Gül & Şarap" (romantik) ══
     Yapı rengi gül altını (rose gold), vurgu rengi gül pembesi,
     mühür şarap kırmızısı. Alternatif paletler bu dosyanın en
     altındadır: istediğinizi kopyalayıp aşağıdaki değerlerin
     üzerine yapıştırmanız yeterli. */
  --bg:            #2a1218;   /* Zarf sahnesi — derin şarap */
  --bg-2:          #4a1f2c;
  --paper:         #fff8f5;   /* Davetiye kâğıdı — pudra */
  --paper-2:       #fbe6e0;
  --ink:           #3a2027;   /* Ana metin — sıcak mürdüm */
  --ink-soft:      #7a5560;   /* İkincil metin */
  --gold:          #c98a78;   /* Gül altını — çizgi, çerçeve, ikon */
  --gold-lt:       #efc4b5;   /* Açık gül altını — koyu zeminde */
  --gold-dk:       #9e5a49;   /* Gül altını yazı — kâğıtta okunaklı */
  --accent:        #b4536a;   /* Gül pembesi — kalpler, vurgu */
  --accent-dk:     #8e3a52;
  --seal:          #9c3550;   /* Mühür — şarap */
  --seal-dk:       #6e2239;
  --line:          rgba(201,138,120,.42);
  --ok:            #2f7a4e;
  --err:           #b23a34;

  /* ---- TİPOGRAFİ ----
     script  : isimler, başlıklar, imza (el yazısı)
     display : mesaj, tarih, rakamlar (yumuşak serif)
     body    : açıklamalar, etiketler, butonlar (yuvarlak, samimi) */
  --font-script:  "Great Vibes", "Brush Script MT", "Segoe Script", cursive;
  --font-display: "Cormorant Infant", "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --font-body:    "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;

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

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;            /* 300 fazla inceydi — okunurluk için 400 */
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Cormorant'ın eski usul rakamları ("3I") yerine düz rakamlar */
  font-variant-numeric:lining-nums;
}
body.is-locked{ overflow:hidden; height:100dvh; }

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

/* ═══════════════════════════════════════════
   1. ZARF SAHNESİ
   ═══════════════════════════════════════════ */

/* Zarf ekranın tamamını kaplar — hem telefonda hem bilgisayarda.
   Bütün parçalar yüzde ile ölçüldüğü için her orana uyar. */
.scene{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(120% 90% at 50% 40%, var(--bg-2) 0%, var(--bg) 62%, #12080b 100%);
  perspective:2600px;
  transition:opacity .9s var(--ease), visibility .9s;
}
body.is-open .scene{ opacity:0; visibility:hidden; pointer-events:none; }

/* Arkadaki yumuşak ışık — zarf açılırken kenarlardan sızar */
.scene__glow{
  position:absolute; left:50%; top:50%;
  width:min(70vw,520px); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(239,196,181,.22) 0%, transparent 68%);
  filter:blur(22px);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.75 } 50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1 } }

.envelope{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:transform .8s var(--ease);
}
.envelope:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:-6px; }
body.is-open .envelope{ transform:scale(1.04); }

/* Zarf gövdesi — arka (kart yukarı çıkarken görünen iç yüz) */
.env__back{
  position:absolute; inset:0;
  background:linear-gradient(160deg,#f2d9d3 0%,#e6c3bb 100%);
  box-shadow:inset 0 0 140px rgba(110,34,57,.18);
}

/* İçindeki kart */
.env__card{
  position:absolute; left:8%; right:8%; top:8%;
  height:84%;
  background:linear-gradient(175deg,var(--paper) 0%,var(--paper-2) 100%);
  border-radius:6px;
  box-shadow:0 8px 30px rgba(60,20,30,.30);
  z-index:2;
  transform:translateY(6%) scale(.98);
  opacity:0;
  transition:transform 1.05s var(--ease) .45s, opacity .4s ease .45s;
  overflow:hidden;
}
body.is-open .env__card{
  opacity:1;
  transform:translateY(-64%) scale(1.02);
}
.env__card-inner{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  border:1px solid var(--line); margin:12px; border-radius:4px;
}
.env__card-orn{ color:var(--accent); font-size:clamp(18px,3vmin,30px); line-height:1; }
.env__card-names{
  margin:0; font-family:var(--font-script);
  font-size:clamp(36px,9vmin,84px); color:var(--ink); line-height:1.1;
}
.env__card-date{
  margin:0; font-family:var(--font-body); font-weight:600;
  font-size:clamp(11px,1.8vmin,15px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-dk);
}

/* Zarf ön cebi */
.env__front{
  position:absolute; inset:0; z-index:3;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px),
    linear-gradient(155deg,#f6dfd8 0%,#e8c6bd 100%);
  clip-path:polygon(0 22%, 50% 62%, 100% 22%, 100% 100%, 0 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.5) inset;
}
.env__front::before,
.env__front::after{
  content:""; position:absolute; top:0; bottom:0; width:56%;
  background:linear-gradient(120deg, rgba(90,30,45,.09), transparent 62%);
}
.env__front::before{ left:0;  clip-path:polygon(0 22%, 100% 78%, 0 100%); }
.env__front::after{ right:0; clip-path:polygon(100% 22%, 0 78%, 100% 100%); transform:scaleX(-1); }

/* Ön cebin gül altını ince çerçevesi (kapağın altında kalan kısmı kırpılır) */
.env__trim{
  position:absolute; inset:clamp(14px,3vmin,30px);
  border:1px solid rgba(158,90,73,.42); pointer-events:none;
}
.env__trim::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(158,90,73,.20);
}

/* Üst kapak */
.env__flap{
  position:absolute; left:0; right:0; top:0; height:62%;
  z-index:4;
  background:linear-gradient(180deg,#f8e6e0 0%,#eac8c0 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1s var(--ease), z-index 0s linear .5s;
  backface-visibility:hidden;
  filter:drop-shadow(0 6px 8px rgba(60,20,30,.22));
}
body.is-open .env__flap{ transform:rotateX(-178deg); z-index:1; }

/* Mühür — kapağın ucunda */
.seal{
  position:absolute; left:50%; top:62%;
  width:clamp(86px,17vmin,150px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:6;
  border:0; padding:0; cursor:pointer;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #c25a70 0%, var(--seal) 42%, var(--seal-dk) 100%);
  box-shadow:0 6px 16px rgba(40,10,20,.45), 0 0 0 1px rgba(0,0,0,.16) inset;
  display:grid; place-items:center;
  transition:transform .5s var(--ease), opacity .4s ease;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 6px 16px rgba(40,10,20,.45), 0 0 0 0 rgba(180,83,106,.55) }
  70%    { box-shadow:0 6px 16px rgba(40,10,20,.45), 0 0 0 22px rgba(180,83,106,0) }
}
.seal:hover{ transform:translate(-50%,-50%) scale(1.06); }
.seal__ring{
  position:absolute; inset:11%;
  border:1px solid rgba(255,225,225,.45); border-radius:50%;
}
.seal__text{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px,4vmin,34px);
  color:#fbe3e3; letter-spacing:.04em; line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
body.is-open .seal{
  animation:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.3) rotate(-28deg);
  transition:transform .45s var(--ease), opacity .35s ease;
}

.scene__hint{
  position:absolute; left:0; right:0; z-index:7;
  bottom:calc(clamp(14px,3vmin,30px) + 18px + env(safe-area-inset-bottom, 0px));
  margin:0; padding:0 20px; text-align:center;
  color:var(--gold-dk);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  animation:fadeInUp 1s ease .5s both;
  transition:opacity .3s;
  pointer-events:none;
}
body.is-open .scene__hint{ opacity:0; }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ═══════════════════════════════════════════
   2. DAVETİYE
   ═══════════════════════════════════════════ */

.invitation{
  opacity:0; visibility:hidden;
  transition:opacity .8s ease .35s, visibility .8s;
  padding:clamp(14px,3vw,40px) clamp(10px,3vw,24px) 60px;
  background:
    radial-gradient(70% 40% at 50% 0%,  rgba(239,196,181,.20) 0%, transparent 70%),
    radial-gradient(60% 45% at 88% 78%, rgba(180,83,106,.22)  0%, transparent 72%),
    radial-gradient(90% 55% at 50% 0%,  var(--bg-2) 0%, var(--bg) 55%, #12080b 100%) fixed;
  min-height:100dvh;
}
body.is-open .invitation{ opacity:1; visibility:visible; }

.paper{
  max-width:660px; margin:0 auto;
  background:
    radial-gradient(80% 45% at 12% 0%,   rgba(239,196,181,.38) 0%, transparent 62%),
    radial-gradient(70% 40% at 92% 100%, rgba(180,83,106,.14)  0%, transparent 66%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper-2) 100%);
  border-radius:var(--radius);
  padding:clamp(30px,7vw,64px) clamp(20px,6vw,58px) clamp(34px,7vw,56px);
  box-shadow:
    0 40px 90px -28px rgba(0,0,0,.85),
    0 0 0 1px rgba(201,138,120,.28);
  position:relative;
  overflow:hidden;
}
/* Kâğıdın altın iç çerçevesi */
.paper::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--line); border-radius:calc(var(--radius) - 5px);
  pointer-events:none;
}
/* Üst kenarda ince altın şerit — kâğıda derinlik verir */
.paper::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,
    transparent, var(--gold-lt) 18%, var(--gold) 50%, var(--gold-lt) 82%, transparent);
  pointer-events:none;
}

/* Açılış animasyonu — kademeli */
.reveal{ opacity:0; transform:translateY(22px); }
body.is-open .reveal{
  animation:riseIn .85s var(--ease) both;
}
body.is-open .hero{      animation-delay:.75s }
body.is-open .countdown{ animation-delay:.90s }
body.is-open .details{   animation-delay:1.02s }
body.is-open .actions{   animation-delay:1.12s }
body.is-open .dresscode{ animation-delay:1.18s }
body.is-open .program{   animation-delay:1.24s }
body.is-open .upload{    animation-delay:1.32s }
body.is-open .foot{      animation-delay:1.40s }
@keyframes riseIn{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

/* ---- Üst bölüm ---- */
.hero{ text-align:center; }
.hero__kicker{
  margin:0 0 18px; font-family:var(--font-display); font-style:italic;
  font-size:clamp(17px,4.4vw,21px); font-weight:500;
  letter-spacing:.04em; color:var(--accent);
}
/* İsimler yan yana; ekran çok darsa alt alta iner */
.hero__names{
  margin:0; font-family:var(--font-script); font-weight:400;
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:baseline; justify-content:center;
  column-gap:.22em; row-gap:0;
  line-height:1.15;
}
.hero__name{
  font-size:clamp(44px,12vw,84px); color:var(--ink);
  padding:0 .06em;              /* el yazısı harflerin kuyruğu kesilmesin */
}
.hero__amp{
  font-size:clamp(30px,8vw,56px); color:var(--accent);
}
.hero__heart{
  display:block; width:clamp(22px,6vw,30px); height:auto;
  margin:10px auto 0; fill:var(--accent);
  transform-origin:center;
  animation:heartbeat 1.6s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(180,83,106,.35));
}
@keyframes heartbeat{
  0%,100%{ transform:scale(1) }
  14%    { transform:scale(1.18) }
  28%    { transform:scale(1) }
  42%    { transform:scale(1.12) }
  70%    { transform:scale(1) }
}
.hero__message{
  margin:24px auto 0; max-width:40ch;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(19px,5vw,23px); line-height:1.75; color:var(--ink-soft);
}
.hero__sign{
  margin:24px 0 0; font-family:var(--font-script);
  font-size:clamp(30px,8vw,44px); line-height:1.2; color:var(--gold-dk);
}

/* Süsleme çizgisi */
.divider{
  display:flex; align-items:center; gap:12px;
  margin:clamp(28px,6vw,42px) auto;
  max-width:230px;
}
.divider__line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.divider__heart{ width:15px; height:15px; fill:var(--accent); flex:none; }

.section__title{
  margin:0 0 12px; text-align:center;
  font-family:var(--font-script); font-weight:400;
  font-size:clamp(40px,10vw,56px); line-height:1.15; color:var(--ink);
}

/* ---- Geri sayım ---- */
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,2vw,14px);
  margin-top:clamp(28px,6vw,40px);
}
.countdown__label{
  grid-column:1 / -1; margin:0 0 4px; text-align:center;
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dk);
}
.cd__item{
  text-align:center; padding:clamp(10px,3vw,16px) 4px;
  border:1px solid rgba(201,138,120,.45); border-radius:12px;
  background:linear-gradient(170deg, rgba(255,255,255,.85), rgba(239,196,181,.30));
  box-shadow:0 2px 8px -3px rgba(158,90,73,.30);
}
.cd__item b{
  display:block; font-family:var(--font-body); font-weight:600;
  font-size:clamp(24px,7vw,34px); color:var(--gold-dk); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.cd__item span{
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.countdown.is-past{ grid-template-columns:1fr; }
.countdown.is-past .cd__item{ padding:16px; }

/* ---- Tarih / mekân ---- */
.details{
  display:grid; gap:clamp(20px,5vw,30px);
  grid-template-columns:1fr;
  margin-top:clamp(30px,6vw,44px);
  text-align:center;
}
@media (min-width:560px){ .details{ grid-template-columns:1fr 1fr; } }
.detail__icon{
  display:block; height:26px; width:auto; margin:0 auto 10px;
  fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round;
}
.detail__icon-fill{ fill:var(--accent); stroke:none; }
.detail__label{
  margin:0 0 10px; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dk); font-weight:500;
}
.detail__main{
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(23px,5.8vw,28px); line-height:1.3; color:var(--ink);
}
.detail__sub{ margin:7px 0 0; font-size:15px; line-height:1.7; color:var(--ink-soft); }

/* ---- Butonlar ---- */
.actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(24px,5vw,34px);
}
.btn{
  appearance:none; cursor:pointer; font-family:var(--font-body); font-weight:500;
  font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 27px; border-radius:999px; text-decoration:none;
  transition:all .25s var(--ease);
  border:1px solid var(--gold); color:var(--gold-dk); background:transparent;
}
.btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.btn:active{ transform:translateY(1px); }
.btn--solid{
  background:linear-gradient(160deg, var(--gold) 0%, var(--gold-dk) 100%);
  border-color:var(--gold-dk); color:#fff;
  box-shadow:0 6px 16px -6px rgba(158,90,73,.7);
}
.btn--solid:hover{ background:var(--gold-dk); }
.btn--accent{ border-color:var(--accent); color:var(--accent-dk); }
.btn--accent:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--text{
  border:0; padding:6px 4px; text-transform:none; letter-spacing:.02em;
  font-size:13px; color:var(--ink-soft); text-decoration:underline;
}
.btn--text:hover{ background:transparent; color:var(--gold-dk); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.dresscode{
  margin:22px 0 0; text-align:center; font-size:13.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.dresscode:empty{ display:none; }

/* ---- Program ---- */
.program__list{ list-style:none; margin:18px 0 0; padding:0; max-width:360px; margin-inline:auto; }
.program__list li{
  display:flex; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px dashed var(--line);
}
.program__list li:last-child{ border-bottom:0; }
.program__list time{
  font-family:var(--font-body); font-weight:600; font-size:17px; color:var(--gold-dk);
  min-width:62px; font-variant-numeric:tabular-nums;
}
.program__list span{ font-size:16.5px; color:var(--ink); }

/* ═══════════════════════════════════════════
   3. FOTOĞRAF YÜKLEME
   ═══════════════════════════════════════════ */

.upload__intro{
  margin:0 auto 28px; max-width:42ch; text-align:center;
  font-size:15.5px; line-height:1.85; color:var(--ink-soft);
}

.field{ margin-bottom:20px; }
.field__label{
  display:block; margin-bottom:8px; font-weight:500;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk);
}
.field__label span{ text-transform:none; letter-spacing:.02em; color:var(--ink-soft); font-weight:400; }
.field__input{
  width:100%; padding:14px 16px;
  /* 16px altına düşürmeyin — iOS Safari odaklanınca sayfayı yakınlaştırır */
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:rgba(255,255,255,.6);
  border:1px solid var(--line); border-radius:9px;
  transition:border-color .2s, background .2s;
}
.field__input:focus{ outline:0; border-color:var(--gold); background:#fff; }
.field__hint{ margin:7px 0 0; font-size:13px; line-height:1.6; color:var(--ink-soft); }

/* Sürükle-bırak alanı */
.dropzone{
  border:1.5px dashed var(--gold); border-radius:13px;
  background:linear-gradient(165deg, rgba(255,255,255,.7), rgba(239,196,181,.20));
  padding:clamp(26px,7vw,40px) 20px; text-align:center; cursor:pointer;
  transition:all .25s var(--ease);
}
.dropzone:hover,
.dropzone:focus-visible{
  background:linear-gradient(165deg, rgba(255,255,255,.85), rgba(239,196,181,.4));
  border-color:var(--gold-dk); outline:0;
}
.dropzone.is-drag{
  background:rgba(239,196,181,.5); border-style:solid; transform:scale(1.01);
}
.dropzone__icon{ font-size:36px; display:block; margin-bottom:12px; filter:grayscale(.35); }
.dropzone__title{
  margin:0 0 7px; font-family:var(--font-display); font-weight:600;
  font-size:27px; color:var(--ink);
}
.dropzone__sub{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft); }

/* Kuyruk */
.queue{ margin-top:22px; }
.queue__bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.queue__stats{ font-size:13.5px; color:var(--ink-soft); }
.queue__stats b{ color:var(--gold-dk); font-weight:600; }
.queue__total{
  height:4px; border-radius:99px; background:rgba(201,138,120,.18); overflow:hidden;
}
.queue__total span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));
  transition:width .3s ease;
}
.queue__list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }

.qi{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center; gap:12px;
  padding:9px; border-radius:10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(201,138,120,.2);
  animation:riseIn .35s var(--ease) both;
}
.qi__thumb{
  width:46px; height:46px; border-radius:7px; object-fit:cover;
  background:rgba(201,138,120,.15); flex:none;
}
.qi__body{ min-width:0; }
.qi__name{
  margin:0; font-size:13.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qi__meta{ margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); }
.qi__bar{
  margin-top:6px; height:3px; border-radius:99px;
  background:rgba(201,138,120,.18); overflow:hidden;
}
.qi__fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));
  transition:width .25s ease;
}
.qi__state{ font-size:17px; line-height:1; width:22px; text-align:center; }
.qi.is-done .qi__fill{ background:var(--ok); }
.qi.is-done .qi__state{ color:var(--ok); }
.qi.is-error .qi__fill{ background:var(--err); }
.qi.is-error .qi__state{ color:var(--err); }
.qi.is-error .qi__meta{ color:var(--err); }
.qi__retry{
  border:1px solid var(--err); color:var(--err); background:transparent;
  font-family:var(--font-body); font-size:12.5px; font-weight:500;
  padding:6px 13px; border-radius:99px; cursor:pointer;
}
.qi__retry:hover{ background:var(--err); color:#fff; }

.upload__note{
  margin:20px 0 0; text-align:center; font-size:13px; line-height:1.75;
  color:var(--ink-soft);
}

/* Bildirim */
.toast{
  /* Boşken tamamen gizli olmalı; sadece transform ile itmek yetmiyor,
     içi boşken kutu küçüldüğü için ekranın altında siyah bir nokta kalıyordu. */
  visibility:hidden; opacity:0;
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,140%);
  z-index:200; max-width:min(92vw,420px);
  padding:14px 22px; border-radius:99px;
  background:var(--ink); color:var(--paper);
  font-size:14.5px; text-align:center; line-height:1.55;
  box-shadow:0 12px 34px rgba(0,0,0,.4);
  transition:transform .4s var(--ease), opacity .3s ease, visibility .4s;
}
.toast.is-show{ visibility:visible; opacity:1; transform:translate(-50%,0); }
.toast.is-error{ background:var(--err); }
.toast.is-ok{ background:var(--ok); }

/* ---- Alt bilgi ---- */
.foot{ text-align:center; }
.foot__names{
  margin:0; font-family:var(--font-script); font-weight:400;
  font-size:clamp(36px,9vw,48px); line-height:1.2; color:var(--gold-dk);
}
.foot__thanks{ margin:10px 0 0; font-size:15px; line-height:1.7; color:var(--ink-soft); }
.foot__contact{ margin:13px 0 0; font-size:15px; }
.foot__contact a{ color:var(--gold-dk); }

/* ---- Müzik butonu ---- */
.music{
  position:fixed; right:16px; bottom:16px; z-index:150;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--gold); background:rgba(42,18,24,.72);
  color:var(--gold-lt); font-size:17px; cursor:pointer;
  backdrop-filter:blur(6px);
  transition:opacity .3s, transform .2s;
  opacity:0; pointer-events:none;
}
body.is-open .music{ opacity:1; pointer-events:auto; }
.music:hover{ transform:scale(1.08); }
.music.is-off{ color:rgba(239,196,181,.4); }

/* Zorunlu alan uyarısı */
.field__input.is-invalid{
  border-color:var(--err); background:#fff5f4;
  animation:shake .4s var(--ease);
}
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-7px) } 40%{ transform:translateX(6px) }
  60%{ transform:translateX(-4px) } 80%{ transform:translateX(3px) }
}
.field__error{
  margin:7px 0 0; font-size:13px; font-weight:500; color:var(--err);
  display:none;
}
.field__error.is-show{ display:block; }

/* ═══════════════════════════════════════════
   4. NOT BIRAKMA
   ═══════════════════════════════════════════ */

.note{ margin-top:clamp(30px,7vw,44px); }

.note__area{
  width:100%; min-height:140px; resize:vertical;
  padding:16px 18px;
  font-family:var(--font-display); font-size:19px; font-style:italic;
  line-height:1.7; color:var(--ink);
  background:
    linear-gradient(165deg, rgba(255,255,255,.75), rgba(239,196,181,.14));
  border:1px solid var(--line); border-radius:11px;
  transition:border-color .2s, background .2s;
}
.note__area::placeholder{ color:var(--ink-soft); opacity:.6; }
.note__area:focus{ outline:0; border-color:var(--gold); background:#fff; }

.note__bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:7px;
}
.note__count{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.note__count.is-near{ color:var(--err); }

/* Canlı önizleme */
.note__preview{
  margin:20px auto 0; max-width:370px;
  transition:opacity .3s ease, transform .3s var(--ease);
}
.note__preview[hidden]{ display:none; }
.note__preview canvas{
  width:100%; height:auto; display:block; border-radius:5px;
  box-shadow:0 20px 46px -16px rgba(0,0,0,.5), 0 0 0 1px rgba(201,138,120,.30);
}
.note__cap{
  margin:11px 0 0; text-align:center; font-size:12.5px; color:var(--ink-soft);
}
.note__actions{ display:flex; justify-content:center; margin-top:18px; }

/* ═══════════════════════════════════════════
   5. ATMOSFER
   ═══════════════════════════════════════════ */

/* ---- Altın toz (ambience.js) ---- */
.dust{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:105;
}

/* ---- Köşe süslemeleri ---- */
.flourish{
  position:absolute; z-index:1;
  width:clamp(74px,17vw,136px); height:auto;
  pointer-events:none; opacity:0;
  fill:none;
}
.flourish--tl{ top:15px; left:15px; }
.flourish--br{ bottom:15px; right:15px; transform:rotate(180deg); }

.fl-stem{
  stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; fill:none;
  stroke-dasharray:260; stroke-dashoffset:260;
}
.fl-leaf{
  fill:rgba(180,83,106,.14);
  stroke:var(--accent); stroke-width:1.3; stroke-linejoin:round;
  opacity:0; transform-box:fill-box; transform-origin:center;
}
.fl-dot{
  fill:var(--gold); stroke:none;
  opacity:0; transform-box:fill-box; transform-origin:center;
}

body.is-open .flourish{ animation:flIn .8s ease .85s forwards; }
body.is-open .fl-stem{ animation:flDraw 1.7s var(--ease) .95s forwards; }
body.is-open .fl-leaf,
body.is-open .fl-dot{ animation:flPop .55s var(--ease) var(--d,1.4s) forwards; }

@keyframes flIn   { to{ opacity:1 } }
@keyframes flDraw { to{ stroke-dashoffset:0 } }
@keyframes flPop  { from{ opacity:0; transform:scale(.55) } to{ opacity:1; transform:scale(1) } }

/* Dar ekranda metne çok yaklaşıyor — küçült ve soluklaştır */
@media (max-width:520px){
  .flourish{ width:66px; }
  body.is-open .flourish{ animation-name:flInSoft; }
  @keyframes flInSoft{ to{ opacity:.55 } }
}

/* ---- Kaydırdıkça beliren bölümler ----
   Gizleme yalnızca JS "js-reveal" sınıfını ekledikten sonra devreye girer;
   böylece betik yüklenmezse içerik kaybolmaz, sadece animasyon olmaz. */
body.js-reveal .reveal-scroll{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
body.js-reveal .reveal-scroll.is-in{ opacity:1; transform:none; }

/* ---- Geri sayım rakamı değişimi ---- */
.cd__item b.is-tick{ animation:cdTick .45s var(--ease); }
@keyframes cdTick{
  from{ transform:translateY(-6px); opacity:.35 }
  to  { transform:none; opacity:1 }
}

/* ---- Erişilebilirlik: animasyon azaltma ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---- Çok küçük ekranlar ---- */
/* ══════════════════════════════════════════════════════════════
   ALTERNATİF RENK PALETLERİ
   Beğendiğinizi kopyalayıp dosyanın en üstündeki :root bloğundaki
   aynı isimli satırların üzerine yapıştırın.
   ══════════════════════════════════════════════════════════════

   ── Zümrüt & Altın (önceki tasarım, klasik) ──
   --bg:#17100c; --bg-2:#2c1d14; --paper:#fffcf4; --paper-2:#f8eed9;
   --ink:#1f1811; --ink-soft:#57483a;
   --gold:#c08a2e; --gold-lt:#eccb7d; --gold-dk:#8a5c12;
   --accent:#2f6b52; --accent-dk:#22513e;
   --seal:#a8323a; --seal-dk:#78202a;
   --line:rgba(192,138,46,.38);

   ── Bordo & Altın (daha sıcak, klasik) ──
   --bg:#1a0f0c; --bg-2:#33180f; --paper:#fffaf3; --paper-2:#f9e9dd;
   --gold:#c28b3a; --gold-lt:#eccb87; --gold-dk:#8d5a16;
   --accent:#8f2f3c; --accent-dk:#6d1f2b;
   --seal:#8f2f3c; --seal-dk:#661f28;
   --line:rgba(194,139,58,.4);

   ── Gül Kurusu & Bakır (yumuşak, romantik) ──
   --bg:#1d1113; --bg-2:#3a2024; --paper:#fffaf8; --paper-2:#f9e6e2;
   --gold:#c07f63; --gold-lt:#e8bda9; --gold-dk:#8a4f36;
   --accent:#7d4a54; --accent-dk:#5d3540;
   --seal:#a05460; --seal-dk:#733a45;
   --line:rgba(192,127,99,.4);

   ── Lacivert & Altın (gece düğünü, iddialı) ──
   --bg:#0c1120; --bg-2:#182543; --paper:#fffdf6; --paper-2:#f2f0e4;
   --gold:#c9a227; --gold-lt:#e9d284; --gold-dk:#8a6c0e;
   --accent:#22406e; --accent-dk:#162c4e;
   --seal:#1f3b66; --seal-dk:#13294a;
   --line:rgba(201,162,39,.4);
*/

@media (max-width:360px){
  .paper{ padding:26px 15px 30px; }
  .cd__item{ padding:10px 2px; }
  .cd__item span{ font-size:9.5px; letter-spacing:.06em; }
  .program__list time{ min-width:56px; font-size:19px; }
}