/* =============================================================
   Davetiye — ön yüz stilleri
   Renkler :root üzerinden layout.php'de basılır (--gold, --soft)
   ============================================================= */

:root{
  --ink:        #33302c;
  --ink-soft:   #6f6862;
  --line:       rgba(0,0,0,.09);
  --bg:         #fbf8f4;
  --paper:      #fffdfa;
  --radius:     18px;
  --shadow:     0 10px 40px -18px rgba(60,45,30,.35);
  --shadow-lift:0 26px 60px -30px rgba(60,45,30,.5);
  --wa:         #25d366;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:     'Parisienne', cursive;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --safe-b:     env(safe-area-inset-bottom, 0px);
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  overflow-x:hidden;
}

/* Yumuşak, çok yavaş hareket eden arka plan ışıkları */
body::before{
  content:''; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 12%, color-mix(in srgb, var(--gold) 16%, transparent), transparent),
    radial-gradient(closest-side at 84% 22%, color-mix(in srgb, var(--gold) 10%, transparent), transparent),
    radial-gradient(closest-side at 50% 88%, color-mix(in srgb, var(--gold) 13%, transparent), transparent);
  animation:drift 26s ease-in-out infinite alternate;
}
/* İnce kâğıt dokusu */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(120,100,70,.07) .5px, transparent .5px);
  background-size:4px 4px;
}
@keyframes drift{
  from{ transform:translate3d(-2%, -1%, 0) scale(1); }
  to  { transform:translate3d(2%, 2%, 0) scale(1.08); }
}

img,video{ max-width:100%; display:block; }
a{ color:var(--gold); }

.script{ font-family:var(--script); font-weight:400; }
.muted{ color:var(--ink-soft); }
.small{ font-size:.85rem; }
.opt{ color:var(--ink-soft); font-size:.85em; }

/* =============================================================
   Açılış perdesi (JS tarafından eklenir)
   ============================================================= */
.intro{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gold) 14%, var(--bg)), var(--bg) 70%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro.is-open{ opacity:0; visibility:hidden; }
.intro__inner{
  text-align:center; max-width:340px;
  animation:introIn 1s var(--ease) both;
}
@keyframes introIn{ from{ opacity:0; transform:translateY(24px) scale(.96); } to{ opacity:1; transform:none; } }

.env{
  position:relative; width:min(78vw, 280px); aspect-ratio:1.5/1;
  margin:0 auto 30px; cursor:pointer;
  filter:drop-shadow(0 18px 34px rgba(80,60,35,.28));
}
.env__body{
  position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(160deg, #fffdf9, #f6efe4);
  border:1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.env__flap{
  position:absolute; left:0; right:0; top:0; height:62%;
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 22%, #fffdf9), #f4ebdd);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center; transform:rotateX(0deg);
  transition:transform .8s var(--ease);
  border-radius:10px 10px 0 0;
}
.env__pocket{
  position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(180deg, transparent 38%, #fbf5ec 38%);
  clip-path:polygon(0 100%, 0 30%, 50% 72%, 100% 30%, 100% 100%);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}
.env__seal{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 78%, #fff), var(--gold));
  color:#fff; font-family:var(--script); font-size:1.5rem; line-height:1;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.35);
  animation:sealPulse 2.6s ease-in-out infinite;
}
@keyframes sealPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.07); } }

.env.is-open .env__flap{ transform:rotateX(178deg); }
.env.is-open .env__seal{ opacity:0; transform:translate(-50%,-50%) scale(.4); transition:.4s; animation:none; }

.intro__title{
  margin:0 0 6px; font-family:var(--script); font-size:2.1rem; color:var(--gold); line-height:1.2;
}
.intro__hint{
  margin:0; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  animation:hintBlink 2.4s ease-in-out infinite;
}
@keyframes hintBlink{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

body.is-locked{ overflow:hidden; }

/* =============================================================
   Serpilen yapraklar / ışıltılar
   ============================================================= */
.petals{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.petal{
  position:absolute; top:-8vh; width:10px; height:10px; border-radius:60% 0 60% 0;
  background:color-mix(in srgb, var(--gold) 55%, #fff);
  opacity:0; animation:fall linear infinite;
}
@keyframes fall{
  0%   { opacity:0; transform:translate3d(0,-10vh,0) rotate(0deg); }
  10%  { opacity:.7; }
  90%  { opacity:.5; }
  100% { opacity:0; transform:translate3d(14vw,108vh,0) rotate(540deg); }
}

/* ---------- Üst menü ---------- */
.topnav{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:center; gap:6px;
  padding:10px calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.topnav a{
  position:relative;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  padding:9px 18px; border-radius:100px; transition:.25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.topnav a:hover{ color:var(--gold); }
.topnav a.is-active{ background:var(--soft); color:var(--gold); }

/* Sayfa okuma ilerleme çizgisi */
.topnav::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px;
  width:var(--progress, 0%);
  background:linear-gradient(90deg, transparent, var(--gold));
  transition:width .1s linear;
}

/* ---------- Flash ---------- */
.flash{
  margin:14px auto 0; max-width:560px;
  padding:12px 18px; border-radius:12px;
  font-size:.92rem; text-align:center;
  animation:rise .5s var(--ease) both;
}
.flash--success{ background:#e8f5ec; color:#1f6b3c; }
.flash--error{   background:#fdecec; color:#9b2226; }

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:2;
  min-height:min(92svh, 900px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:76px 22px 72px;
}
/* İnce altın çerçeve */
.hero__inner{
  position:relative;
  padding:clamp(30px, 8vw, 54px) clamp(20px, 6vw, 44px);
}
.hero__inner::before,
.hero__inner::after{
  content:''; position:absolute; width:clamp(46px,14vw,74px); height:clamp(46px,14vw,74px);
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  opacity:0; animation:frameIn 1.1s var(--ease) .55s forwards;
}
.hero__inner::before{ top:0; left:0; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.hero__inner::after{ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 6px 0; }
@keyframes frameIn{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }

.hero__eyebrow{
  margin:0 0 20px; font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft);
  animation:rise 1s var(--ease) .15s both;
}
.hero__names{
  position:relative; margin:0; line-height:1.05;
  font-size:clamp(3.1rem, 15vw, 6.4rem);
  color:var(--gold);
  background:linear-gradient(100deg,
      var(--gold) 0%,
      color-mix(in srgb, var(--gold) 45%, #fff8e6) 42%,
      var(--gold) 62%, var(--gold) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroName 1.4s var(--ease) .3s both, shine 7s ease-in-out 2s infinite;
}
@keyframes heroName{
  from{ opacity:0; transform:translateY(28px) scale(.94); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes shine{
  0%,100%{ background-position:120% 0; }
  50%    { background-position:-40% 0; }
}
.hero__names .amp{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:.4em; margin:.02em 0;
  -webkit-text-fill-color:var(--ink-soft); color:var(--ink-soft);
  animation:ampIn 1s var(--ease) .75s both;
}
@keyframes ampIn{ from{ opacity:0; transform:rotate(-14deg) scale(.5); } to{ opacity:1; transform:none; } }

.hero__rule{
  width:min(220px, 60vw); height:14px; margin:24px auto 0;
  position:relative;
  animation:ruleIn 1s var(--ease) .95s both;
}
.hero__rule::before,
.hero__rule::after{
  content:''; position:absolute; top:50%; height:1px; width:calc(50% - 14px);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, transparent));
}
.hero__rule::before{ left:0; }
.hero__rule::after{ right:0; transform:scaleX(-1); }
.hero__rule i{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:7px; height:7px; background:var(--gold); border-radius:1px;
}
@keyframes ruleIn{ from{ opacity:0; transform:scaleX(.2); } to{ opacity:1; transform:none; } }

.hero__date{
  margin:20px 0 8px; font-family:var(--serif); font-size:clamp(1.25rem, 5vw, 1.55rem);
  letter-spacing:.04em;
  animation:rise 1s var(--ease) 1.05s both;
}
.hero__venue{
  margin:0; color:var(--ink-soft); letter-spacing:.18em; font-size:.8rem; text-transform:uppercase;
  animation:rise 1s var(--ease) 1.2s both;
}

.hero__scroll{
  position:absolute; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  animation:rise 1s var(--ease) 1.5s both;
}
.hero__scroll::after{
  content:''; width:1px; height:46px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollPulse 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollPulse{
  0%,100%{ transform:scaleY(.35); opacity:.35; }
  50%    { transform:scaleY(1);   opacity:1; }
}

@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ---------- Bölümler ve kâğıt kartlar ---------- */
.section{ position:relative; z-index:2; padding:22px 18px; }
.section--wide{ padding-inline:12px; }
.card-page{ padding:60px 18px; }

.paper{
  position:relative;
  max-width:620px; margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 26px;
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* iç ince altın çizgi */
.paper::before{
  content:''; position:absolute; inset:7px; border-radius:calc(var(--radius) - 6px);
  border:1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  pointer-events:none;
}
.paper--center{ text-align:center; }
.paper--greet{
  text-align:center; border-color:transparent;
  background:linear-gradient(150deg, var(--soft), color-mix(in srgb, var(--paper) 70%, var(--soft)));
}

.section__title{
  margin:0 0 22px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.45rem, 5.5vw, 1.7rem); text-align:center; letter-spacing:.02em;
}
.section__title::after{
  content:''; display:block; width:44px; height:1px;
  background:var(--gold); margin:12px auto 0; opacity:.6;
  transform-origin:center; transform:scaleX(0);
  transition:transform .8s var(--ease) .2s;
}
.is-in .section__title::after{ transform:scaleX(1); }

.ornament{
  text-align:center; color:var(--gold); font-size:1.6rem; margin-bottom:16px;
  animation:sway 5s ease-in-out infinite;
}
@keyframes sway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }

.greet__label{ margin:0; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); }
.greet__name{ margin:6px 0 10px; font-family:var(--serif); font-size:clamp(1.6rem, 7vw, 2rem); }
.greet__text{ margin:0; font-size:.9rem; color:var(--ink-soft); }

.invite-text{
  margin:0; text-align:center;
  font-family:var(--serif); font-size:clamp(1.18rem, 4.6vw, 1.32rem); line-height:1.9;
}
.story-text{ margin:22px 0 0; text-align:center; color:var(--ink-soft); font-size:.98rem; }

/* ---------- Kaydırınca beliren ---------- */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* =============================================================
   Gelin & damat — gerçek portreler çizimli gövdelerin üzerinde
   ============================================================= */
.couple{ overflow:hidden; }
.couple__stage{
  position:relative; max-width:620px; margin:0 auto;
  height:clamp(290px, 78vw, 400px);
}
.couple__ground{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width:min(78%, 420px); height:16px; border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
}

/* --- Sahne dekoru: ışıklar, kemer, halı, mumlar --- */
.scene{ position:absolute; left:0; right:0; }
.scene--lights{ top:0; height:clamp(30px, 9vw, 44px); overflow:visible; }
.scene--lights .wire{
  fill:none; stroke:color-mix(in srgb, var(--ink) 22%, transparent); stroke-width:1;
}
.scene--lights circle{
  r:3.4; fill:color-mix(in srgb, var(--gold) 55%, #fff);
  opacity:.35;
}
.couple.is-set .scene--lights circle{
  animation:glow 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .18s);
}
@keyframes glow{
  0%,100%{ opacity:.3;  filter:none; }
  50%    { opacity:1;   filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 75%, transparent)); }
}

/* SVG "replaced" eleman olduğu için auto ölçüler kendi en-boy oranından gelir
   ve left/right/bottom yok sayılır; bu yüzden iki ölçü de açıkça verilir. */
.scene--arch{
  --arch-top:clamp(24px, 7vw, 38px);
  top:var(--arch-top); bottom:auto;
  width:100%; height:calc(100% - var(--arch-top) - 26px);
}
.arch__post, .arch__bow{
  fill:none; stroke:color-mix(in srgb, #6b5637 45%, transparent); stroke-width:3; stroke-linecap:round;
}
.arch__vine{
  fill:none; stroke:#7f9160; stroke-width:7; stroke-linecap:round;
  stroke-dasharray:2 9;
  opacity:0;
}
.couple.is-set .arch__vine{ animation:vineIn 1.4s var(--ease) .1s forwards; }
@keyframes vineIn{ from{ opacity:0; stroke-width:2; } to{ opacity:.85; stroke-width:7; } }

/* Kemer çiçekleri JS ile yay boyunca dizilir */
.arch__blooms circle{ transform-box:fill-box; transform-origin:center; transform:scale(0); }
.couple.is-set .arch__blooms circle{
  animation:bloom .55s var(--ease) forwards;
  animation-delay:calc(.25s + var(--i) * .045s);
}
@keyframes bloom{
  0%  { transform:scale(0)   rotate(-40deg); opacity:0; }
  70% { transform:scale(1.2) rotate(6deg);   opacity:1; }
  100%{ transform:scale(1)   rotate(0);      opacity:1; }
}

/* Arabanın geldiği yol */
.couple__road{
  position:absolute; left:-4%; right:-4%; bottom:0;
  height:clamp(46px, 13vw, 64px);
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--ink) 5%, transparent) 45%,
    color-mix(in srgb, var(--ink) 9%, transparent));
  opacity:0; transition:opacity .9s var(--ease);
}
/* yol çizgisi tekerleklerin altında kalsın */
.couple__road::after{
  content:''; position:absolute; left:6%; right:6%; bottom:12px;
  border-top:1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
}
.couple.is-set .couple__road{ opacity:1; }

.couple__candles{ position:absolute; inset:auto 4% 6px; height:60px; pointer-events:none; }
.couple__candles span{
  position:absolute; bottom:0; width:5px; height:16px; border-radius:2px;
  background:linear-gradient(180deg, #fffdf8, color-mix(in srgb, var(--soft) 80%, #fff));
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  opacity:0;
}
.couple__candles span::before{
  content:''; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  width:5px; height:8px; border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #fff6dc, var(--gold));
  filter:blur(.3px);
}
.couple__candles span:nth-child(1){ left:6%;  height:22px; }
.couple__candles span:nth-child(2){ left:16%; height:16px; }
.couple__candles span:nth-child(3){ left:26%; height:12px; }
.couple__candles span:nth-child(4){ right:26%; height:12px; }
.couple__candles span:nth-child(5){ right:16%; height:16px; }
.couple__candles span:nth-child(6){ right:6%;  height:22px; }
.couple.is-set .couple__candles span{
  animation:candleIn .5s var(--ease) forwards, flicker 2.2s ease-in-out infinite 1s;
  animation-delay:calc(.5s + var(--i) * .09s), calc(1s + var(--i) * .2s);
}
@keyframes candleIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes flicker{ 0%,100%{ filter:brightness(1); } 45%{ filter:brightness(1.25); } }

/* =============================================================
   Gelin arabası — soldan gelir, durur, kapısı açılır, sonra gider
   ============================================================= */
.couple__car{
  position:absolute; left:50%; bottom:clamp(12px, 3.6vw, 20px);
  width:min(82%, 440px); height:auto; overflow:visible;
  transform:translateX(-50%); z-index:2;
  filter:drop-shadow(0 10px 14px rgba(60,45,30,.16));
}
.car__body{ fill:#fffdf9; stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-width:2; }
.car__glass{ fill:color-mix(in srgb, #9fb6c4 55%, #fff); stroke:color-mix(in srgb, var(--ink) 22%, transparent); stroke-width:1.5; }
.car__doorway{ fill:#6f6054; }
.car__panel{ fill:#fffdf9; stroke:color-mix(in srgb, var(--ink) 26%, transparent); stroke-width:1.6; }
.car__handle{ stroke:var(--gold); stroke-width:3; stroke-linecap:round; fill:none; }
.car__belt{ stroke:color-mix(in srgb, var(--gold) 60%, transparent); stroke-width:2; fill:none; }
.car__lamp{ fill:color-mix(in srgb, var(--gold) 65%, #fff); }
.car__tail{ fill:#c0453f; opacity:.85; }
.car__tyre{ fill:#2c2b30; }
.car__rim{ fill:color-mix(in srgb, var(--gold) 35%, #fff); }
.car__spoke{ stroke:#2c2b30; stroke-width:1.6; fill:none; }
.car__ribbon{ fill:none; stroke:color-mix(in srgb, var(--gold) 75%, #fff); stroke-width:3; stroke-linecap:round; }
.car__bow ellipse, .car__bow circle{ fill:var(--gold); }
.car__flowers circle{ fill:#fffdf9; stroke:color-mix(in srgb, var(--gold) 60%, transparent); stroke-width:1.5; }
.can{ fill:#cbb9a2; stroke:color-mix(in srgb, var(--ink) 25%, transparent); stroke-width:1.2; }
.can__string{ stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-width:1.4; fill:none; }

/* Kapı ön kenarından menteşelenir */
.car__door{
  transform-box:fill-box; transform-origin:100% 70%;
  transition:transform .55s var(--ease);
}
.couple.is-open .car__door{ transform:rotate(7deg) translate(-2px, 1px); }

/* Sahne kurulmadan araba solda bekler */
.couple.is-armed .couple__car{ opacity:0; transform:translateX(-260%); }

.couple.is-drive .couple__car{ animation:carIn 2s cubic-bezier(.2,.85,.25,1) forwards; }
@keyframes carIn{
  0%  { opacity:0; transform:translateX(-260%); }
  10% { opacity:1; }
  86% { transform:translateX(-45%); }
  100%{ opacity:1; transform:translateX(-50%); }
}
.couple.is-away .couple__car{ animation:carOut 1.8s cubic-bezier(.55,0,.85,.4) forwards; }
@keyframes carOut{
  0%  { opacity:1; transform:translateX(-50%); }
  20% { transform:translateX(-58%); }
  100%{ opacity:0; transform:translateX(230%); }
}

/* Tekerlekler yalnızca araba hareket hâlindeyken döner */
.car__wheel{ transform-box:fill-box; transform-origin:center; }
.couple.is-drive .car__wheel{ animation:wheelSpin .5s linear infinite; }
.couple.is-stopped .car__wheel{ animation:none; }
.couple.is-away .car__wheel{ animation:wheelSpin .38s linear infinite; }
@keyframes wheelSpin{ to{ transform:rotate(360deg); } }

/* Yolda hafif zıplama */
.car__shell{ transform-box:fill-box; transform-origin:50% 100%; }
.couple.is-drive .car__shell{ animation:carBounce .34s ease-in-out infinite alternate; }
@keyframes carBounce{ from{ transform:translateY(0) rotate(-.3deg); } to{ transform:translateY(-2.5px) rotate(.3deg); } }

.car__cans{ transform-box:fill-box; transform-origin:100% 0; }
.couple.is-drive .car__cans, .couple.is-away .car__cans{ animation:cansJig .28s ease-in-out infinite alternate; }
@keyframes cansJig{ from{ transform:rotate(-7deg); } to{ transform:rotate(7deg); } }

/* Korna: araba durur durmaz */
.car__honk{
  fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; opacity:0;
  transform-box:fill-box; transform-origin:0 50%;
}
.couple.is-stopped .car__honk{ animation:honk 1.1s ease-out 2; }
@keyframes honk{
  0%  { opacity:0; transform:translateX(-6px) scale(.7); }
  35% { opacity:.9; }
  100%{ opacity:0; transform:translateX(8px) scale(1.15); }
}

.mate{
  position:absolute; bottom:clamp(16px, 4.5vw, 26px); left:50%; margin:0;
  width:clamp(82px, 23vw, 130px);
  aspect-ratio:100/150;
  z-index:3;
}
/* Gövde çizimi */
.mate__body{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ink-skin  { fill:#e8c8ad; }
.ink-dress { fill:#fffdf9; stroke:rgba(0,0,0,.10); stroke-width:.8; }
.ink-dress-2{ fill:color-mix(in srgb, var(--gold) 10%, #fffdf9); }
.ink-suit  { fill:#2c2b30; }
.ink-shirt { fill:#fdfcfa; }
.ink-gold  { fill:var(--gold); color:var(--gold); }

/* Gerçek fotoğraf: daire maskesi yok, PNG'nin kendi konturu kullanılır.
   Alt kenarı gövdenin omuz hizasına biner ki portre gövdeye otursun. */
.mate__head{
  position:absolute; left:50%; bottom:93%;
  width:88%; height:auto; max-height:none;
  transform:translate(-50%, 0);
  transform-origin:50% 100%;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 8px 12px rgba(60,45,30,.2));
  z-index:2;
  /* Portrenin alt kenarı gövdenin içinde yumuşakça kaybolsun:
     omuzlu ya da düz kesilmiş fotoğraflarda çizgi/ikinci kütle izlenimi oluşmaz */
  -webkit-mask-image:linear-gradient(180deg, #000 72%, rgba(0,0,0,.35) 90%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 72%, rgba(0,0,0,.35) 90%, transparent 100%);
}
/* Gelinin duvağı fotoğrafın arkasında kalır.
   Ortalama transform ile değil left/right ile yapılır; aksi hâlde
   yürüyüş animasyonunun transform'u yatay ortalamayı ezer. */
.mate__veil{
  position:absolute; left:-9%; right:-9%; bottom:64%;
  height:70%;
  background:linear-gradient(180deg,
    color-mix(in srgb, #fff 62%, transparent),
    color-mix(in srgb, #fff 22%, transparent) 60%,
    transparent);
  border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  opacity:.7; z-index:1;
}

/* Varsayılan (JS yok / animasyon kapalı): çift ortada yan yana durur */
.mate{ transform-origin:50% 100%; }
.mate--bride{ transform:translateX(-102%); }
.mate--groom{ transform:translateX(2%); }
.mate--groom .mate__head{ width:84%; }

/* JS animasyonu kuracaksa çift önce arabanın içindedir: görünmez ve küçük */
.couple.is-armed .mate--bride{ opacity:0; transform:translateX(-44%) scale(.45); }
.couple.is-armed .mate--groom{ opacity:0; transform:translateX(-56%) scale(.45); }

.couple__hearts{
  position:absolute; left:50%; bottom:54%; transform:translateX(-50%);
  width:80px; height:90px; pointer-events:none; z-index:4;
}
.couple__hearts span{
  position:absolute; bottom:0; left:50%;
  color:var(--gold); font-size:1.1rem; opacity:0;
}
/* --- Buluşma anında parlayan yüzük --- */
.couple__ring{
  position:absolute; left:50%; bottom:44%; transform:translate(-50%, 0) scale(0);
  width:clamp(34px, 9vw, 46px); height:auto; overflow:visible;
  opacity:0; z-index:4;
}
.ring__band{ fill:none; stroke:var(--gold); stroke-width:5; }
.ring__stone{ fill:color-mix(in srgb, var(--gold) 40%, #fff); stroke:var(--gold); stroke-width:2; }
.ring__spark{ stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; opacity:0; }
.couple.is-met .couple__ring{ animation:ringPop 2.6s var(--ease) .5s both; }
.couple.is-met .ring__spark{ animation:sparkle 2.2s ease-out .9s both; }
@keyframes ringPop{
  0%  { opacity:0; transform:translate(-50%, 20px) scale(.2) rotate(-25deg); }
  25% { opacity:1; transform:translate(-50%, -6px) scale(1.15) rotate(4deg); }
  40% { transform:translate(-50%, 0) scale(1) rotate(0); }
  80% { opacity:1; transform:translate(-50%, -4px) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -22px) scale(.85); }
}
@keyframes sparkle{
  0%  { opacity:0; transform:scale(.4) rotate(0); }
  35% { opacity:.95; transform:scale(1.1) rotate(30deg); }
  100%{ opacity:0; transform:scale(1.35) rotate(60deg); }
}

/* --- Konfeti / gül yaprağı yağmuru (JS doldurur) --- */
.couple__confetti{ position:absolute; inset:-10% 0 0; pointer-events:none; overflow:hidden; z-index:5; }
.conf{
  position:absolute; top:-8%;
  width:8px; height:11px; border-radius:60% 0 60% 0;
  opacity:0;
  animation:confFall linear forwards;
}
@keyframes confFall{
  0%  { opacity:0;  transform:translate3d(0,0,0) rotate(0); }
  10% { opacity:1; }
  100%{ opacity:0;  transform:translate3d(var(--dx, 20px), 340px, 0) rotate(var(--rot, 540deg)); }
}

.couple__caption{
  margin:14px 0 0; text-align:center;
  font-family:var(--script); font-size:1.7rem; color:var(--gold);
}
.couple.is-armed .couple__caption{ opacity:0; transform:translateY(10px); }
.couple__caption span{ font-family:var(--serif); font-style:italic; font-size:.6em; color:var(--ink-soft); }

/* --- 1. aşama: arabadan inip öne doğru yürürler --- */
.couple.is-out .mate--bride{ animation:stepOutLeft 1.9s var(--ease) forwards; }
.couple.is-out .mate--groom{ animation:stepOutRight 1.9s var(--ease) .2s forwards; }
@keyframes stepOutLeft{
  0%  { opacity:0; transform:translateX(-44%) scale(.45); }
  15% { opacity:1; }
  100%{ opacity:1; transform:translateX(-102%) scale(1); }
}
@keyframes stepOutRight{
  0%  { opacity:0; transform:translateX(-56%) scale(.45); }
  15% { opacity:1; }
  100%{ opacity:1; transform:translateX(2%) scale(1); }
}

/* yürürken zıplama, etek salınımı, kol ve bacak hareketi */
.couple.is-out .mate__body,
.couple.is-out .mate__head,
.couple.is-out .mate__veil,
.couple.is-out .mate__bouquet{ animation:bob .52s ease-in-out 5 alternate; }
.couple.is-out .mate__head{ animation-name:bobHead; }
@keyframes bob    { from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
@keyframes bobHead{ from{ transform:translate(-50%,0) rotate(-2deg); } to{ transform:translate(-50%,-6px) rotate(2deg); } }

.couple.is-out .mate__skirt{ animation:skirt .7s ease-in-out 4 alternate; transform-origin:50% 20%; }
@keyframes skirt{ from{ transform:skewX(2.5deg); } to{ transform:skewX(-2.5deg); } }

.couple.is-out .mate__leg{ transform-origin:50% 52%; }
.couple.is-out .mate__leg--l{ animation:stride .52s ease-in-out 5 alternate; }
.couple.is-out .mate__leg--r{ animation:stride .52s ease-in-out 5 alternate reverse; }
@keyframes stride{ from{ transform:rotate(-9deg); } to{ transform:rotate(9deg); } }

.couple.is-out .mate__arm{ transform-origin:50% 14%; }
.couple.is-out .mate--groom .mate__arm--l{ animation:swing .52s ease-in-out 5 alternate; }
.couple.is-out .mate--groom .mate__arm--r{ animation:swing .52s ease-in-out 5 alternate reverse; }
@keyframes swing{ from{ transform:rotate(-7deg); } to{ transform:rotate(7deg); } }

.mate__bouquet{
  position:absolute; left:14%; top:42%; width:28%;
  transform:rotate(-12deg); z-index:3;
}

/* --- 2. aşama: buluşma --- */
/* animation:none olduğu için is-armed'daki opacity:0 geri gelmesin */
.couple.is-met .mate--bride{ animation:none; opacity:1; transform:translateX(-96%) rotate(3deg); transition:transform .9s var(--ease); }
.couple.is-met .mate--groom{ animation:none; opacity:1; transform:translateX(-4%) rotate(-3deg); transition:transform .9s var(--ease); }
.couple.is-met .mate__head{ animation:none; }
.couple.is-met .mate--bride .mate__head{ transform:translate(-50%,0) rotate(7deg); transition:transform .9s var(--ease); }
.couple.is-met .mate--groom .mate__head{ transform:translate(-50%,0) rotate(-7deg); transition:transform .9s var(--ease); }
.couple.is-met .mate__body,
.couple.is-met .mate__veil,
.couple.is-met .mate__bouquet,
.couple.is-met .mate__skirt,
.couple.is-met .mate__leg,
.couple.is-met .mate__arm{ animation:none; }

.couple.is-met .couple__hearts span{ animation:floatHeart 2.6s ease-out infinite; }
.couple.is-met .couple__hearts span:nth-child(2){ animation-delay:.5s; font-size:.8rem; }
.couple.is-met .couple__hearts span:nth-child(3){ animation-delay:1s;  font-size:1.4rem; }
.couple.is-met .couple__hearts span:nth-child(4){ animation-delay:1.5s; font-size:.9rem; }
.couple.is-met .couple__hearts span:nth-child(5){ animation-delay:2s;  font-size:1.1rem; }
@keyframes floatHeart{
  0%  { opacity:0;  transform:translate(-50%, 0) scale(.4); }
  20% { opacity:.9; }
  100%{ opacity:0;  transform:translate(calc(-50% + var(--drift, 12px)), -90px) scale(1.1); }
}
.couple__hearts span:nth-child(odd){ --drift:-16px; }

.couple.is-met .couple__caption{
  opacity:1; transform:none; transition:opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
}

/* Dokunulunca çift birbirine sarılır gibi yaklaşır */
.couple.is-met .couple__stage{ cursor:pointer; }
.couple.is-hug .mate--bride{ transform:translateX(-84%) rotate(6deg); }
.couple.is-hug .mate--groom{ transform:translateX(-16%) rotate(-6deg); }

@media (max-width:560px){
  .couple__stage{ height:clamp(280px, 82vw, 340px); }
  .couple__caption{ font-size:1.5rem; }
}

/* Animasyon kapalıysa çift ortada, kalpler gizli */
@media (prefers-reduced-motion:reduce){
  .couple .mate--bride{ opacity:1 !important; transform:translateX(-102%) !important; }
  .couple .mate--groom{ opacity:1 !important; transform:translateX(2%) !important; }
  .couple .couple__car{ opacity:1 !important; transform:translateX(-50%) !important; animation:none !important; }
  .couple__caption{ opacity:1 !important; transform:none !important; }
  .couple__halay{ opacity:1 !important; transform:none !important; }
}

/* =============================================================
   Halay — çift arabadan indikten sonra hemen altta halay başlar
   (sahne kapalıysa aynı sıra düğün detayları kartında görünür)
   ============================================================= */
.halay{
  position:relative;
  margin:22px -10px -12px;
  padding-top:10px;
}
/* Sahnenin altındaki halay: çift inince belirir */
.couple__halay{
  max-width:620px; margin:6px auto 0;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.couple.is-party .couple__halay{ opacity:1; transform:none; }
.couple__halay .halay{ margin:0; }
.halay__row{ display:block; width:100%; height:auto; overflow:visible; }
.halay__floor{
  stroke:color-mix(in srgb, var(--gold) 40%, transparent);
  stroke-width:1.5; stroke-linecap:round; fill:none;
}

.d-skin  { fill:#e8c8ad; }
.d-hair  { fill:#3f3833; }
.d-hair2 { fill:#5c4632; }
.d-suit  { fill:#2c2b30; }
.d-suit2 { fill:#4a4f5c; }
.d-dress { fill:color-mix(in srgb, var(--gold) 55%, #fff); }
.d-dress2{ fill:#b8697a; }
.d-leg   { fill:#2c2b30; }
.d-leg2  { fill:#e8c8ad; }
.d-arm{
  stroke:#e8c8ad; stroke-width:5; stroke-linecap:round; fill:none;
}
.dancer--f .d-arm{ stroke:#e8c8ad; }
.dancer__kerchief path{ fill:#c0453f; }

/* Sıradaki her kişi bir öncekinden biraz sonra zıplar: halay dalgası */
.dancer{ transform-box:fill-box; transform-origin:50% 100%; }
.paper.is-in .dancer,
.couple.is-party .dancer{
  animation:hop .62s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * .105s);
}
@keyframes hop{
  from{ transform:translateY(0)    rotate(-2deg) scaleY(1); }
  to  { transform:translateY(-9px) rotate(2deg)  scaleY(1.03); }
}
/* mendil ayrı ritimde savrulur */
.dancer__kerchief{ transform-box:fill-box; transform-origin:100% 100%; }
.paper.is-in .dancer__kerchief,
.couple.is-party .dancer__kerchief{ animation:kerchief 1.24s ease-in-out infinite; }
@keyframes kerchief{
  0%,100%{ transform:rotate(-18deg) translateY(0); }
  50%    { transform:rotate(16deg)  translateY(-5px); }
}

.halay__notes{
  position:absolute; left:0; right:0; top:-6px; height:60px;
  pointer-events:none;
}
.halay__notes span{
  position:absolute; bottom:0;
  color:color-mix(in srgb, var(--gold) 80%, transparent);
  font-size:1rem; opacity:0;
}
.halay__notes span:nth-child(1){ left:18%; }
.halay__notes span:nth-child(2){ left:42%; font-size:1.25rem; }
.halay__notes span:nth-child(3){ left:63%; font-size:.9rem; }
.halay__notes span:nth-child(4){ left:82%; font-size:1.1rem; }
.paper.is-in .halay__notes span,
.couple.is-party .halay__notes span{ animation:noteUp 3.4s ease-out infinite; }
.paper.is-in .halay__notes span:nth-child(2),
.couple.is-party .halay__notes span:nth-child(2){ animation-delay:.8s; }
.paper.is-in .halay__notes span:nth-child(3),
.couple.is-party .halay__notes span:nth-child(3){ animation-delay:1.6s; }
.paper.is-in .halay__notes span:nth-child(4),
.couple.is-party .halay__notes span:nth-child(4){ animation-delay:2.4s; }
@keyframes noteUp{
  0%  { opacity:0;  transform:translate(0,10px) rotate(-8deg) scale(.7); }
  20% { opacity:.9; }
  100%{ opacity:0;  transform:translate(14px,-52px) rotate(14deg) scale(1.1); }
}

@media (max-width:560px){
  .halay{ margin:18px -14px -14px; }
}

/* ---------- Geri sayım ---------- */
.countdown{
  max-width:620px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.cd{
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:18px 6px; text-align:center;
  box-shadow:0 8px 26px -22px rgba(60,45,30,.7);
}
.cd::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--gold) 16%, transparent) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:sheen 6s ease-in-out infinite;
}
.cd:nth-child(2)::after{ animation-delay:.4s; }
.cd:nth-child(3)::after{ animation-delay:.8s; }
.cd:nth-child(4)::after{ animation-delay:1.2s; }
@keyframes sheen{ 0%,70%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }

.cd__n{
  display:block; font-family:var(--serif); font-size:clamp(1.6rem, 7.5vw, 2rem);
  line-height:1; color:var(--gold); font-variant-numeric:tabular-nums;
}
.cd__n.is-tick{ animation:tick .45s var(--ease); }
@keyframes tick{
  0%  { transform:translateY(-40%); opacity:0; filter:blur(3px); }
  100%{ transform:none; opacity:1; filter:blur(0); }
}
.cd__l{ display:block; margin-top:7px; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- Detay listesi ---------- */
.details{ list-style:none; margin:0 0 20px; padding:0; }
.details li{
  display:grid; grid-template-columns:96px 1fr; gap:14px;
  padding:13px 0; border-bottom:1px dashed var(--line);
}
.details li:last-child{ border-bottom:0; }
.details__k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding-top:3px; }
.details__v{ font-size:1rem; }
.details--sm li{ padding:10px 0; }

/* ---------- Butonlar ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px;
  padding:13px 26px; border:1px solid var(--gold); border-radius:100px;
  font-family:var(--sans); font-size:.86rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--gold); background:transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .25s, color .25s, box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:var(--soft); }
.btn:active{ transform:scale(.97); }
.btn--primary{
  background:linear-gradient(120deg, var(--gold), color-mix(in srgb, var(--gold) 72%, #fff));
  color:#fff; border-color:transparent;
  box-shadow:0 12px 26px -16px color-mix(in srgb, var(--gold) 90%, #000);
}
.btn--primary:hover{ filter:brightness(1.06); }
.btn--ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--wide{ width:100%; }
.btn--wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.btn--wa:hover{ background:#1eb958; border-color:#1eb958; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* dokunuşta yayılan halka */
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:currentColor; opacity:.25; pointer-events:none;
  animation:ripple .6s var(--ease) forwards;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- RSVP ---------- */
.paper--rsvp{ scroll-margin-top:78px; }

/* adım göstergesi */
.steps-dots{ display:flex; justify-content:center; gap:7px; margin:0 0 20px; }
.steps-dots i{
  width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--gold) 25%, transparent);
  transition:.35s var(--ease);
}
.steps-dots i.is-on{ background:var(--gold); width:22px; border-radius:100px; }
.steps-dots i.is-done{ background:color-mix(in srgb, var(--gold) 60%, transparent); }

.step{ display:none; }
.step.is-active{ display:block; animation:stepIn .45s var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
.step.is-active.is-back{ animation-name:stepInBack; }
@keyframes stepInBack{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }

.step__q{
  margin:0 0 20px; text-align:center;
  font-family:var(--serif); font-size:clamp(1.15rem, 4.8vw, 1.28rem);
}
.step__hint{ margin:-12px 0 16px; text-align:center; font-size:.84rem; color:var(--ink-soft); }
.step__nav{ display:flex; gap:10px; margin-top:24px; }

.choice{ display:grid; gap:12px; }
.choice__opt{ position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.choice__opt input{ position:absolute; opacity:0; inset:0; }
.choice__opt span{
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:58px; padding:16px 44px 16px 18px; text-align:center;
  border:1px solid var(--line); border-radius:16px;
  background:#fff; transition:.25s var(--ease);
  font-size:1rem;
}
/* seçim işareti */
.choice__opt span::after{
  content:''; position:absolute; right:16px; top:50%;
  width:20px; height:20px; margin-top:-10px; border-radius:50%;
  border:1px solid var(--line); transition:.25s var(--ease);
}
.choice__opt:hover span{ border-color:var(--gold); transform:translateY(-1px); }
.choice__opt input:checked + span{
  border-color:var(--gold);
  background:linear-gradient(140deg, var(--soft), #fff);
  box-shadow:0 10px 28px -20px color-mix(in srgb, var(--gold) 90%, #000);
  animation:pick .4s var(--ease);
}
.choice__opt input:checked + span::after{
  background:var(--gold); border-color:var(--gold);
  box-shadow:inset 0 0 0 2px #fff;
}
@keyframes pick{ 0%{ transform:scale(1); } 45%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.choice__opt input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.choice--sm .choice__opt span{ min-height:52px; padding:13px 44px 13px 16px; font-size:.94rem; }

/* Sayaç */
.counter__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px dashed var(--line);
}
.counter__label{ font-size:1rem; }
.counter__ctrl{ display:flex; align-items:center; gap:4px; }
.counter__btn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:1.3rem; line-height:1; cursor:pointer;
  transition:transform .16s var(--ease), border-color .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.counter__btn:hover{ border-color:var(--gold); color:var(--gold); }
.counter__btn:active{ transform:scale(.88); }
.counter__ctrl input{
  width:58px; text-align:center; border:0; background:transparent;
  font-family:var(--serif); font-size:1.6rem; color:var(--ink);
  -moz-appearance:textfield;
}
.counter__ctrl input.is-bump{ animation:bump .32s var(--ease); }
@keyframes bump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.28); color:var(--gold); } 100%{ transform:scale(1); } }
.counter__ctrl input::-webkit-outer-spin-button,
.counter__ctrl input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.counter__total{ margin:18px 0 0; text-align:center; color:var(--ink-soft); }
.counter__total strong{ color:var(--gold); font-family:var(--serif); font-size:1.4rem; }
.counter__warn{ margin:8px 0 0; text-align:center; color:#9b2226; font-size:.86rem; animation:shake .4s; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* Form alanları */
.field{ margin-bottom:16px; }
.field label{
  display:block; margin-bottom:7px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.field input, .field textarea{
  width:100%; padding:14px 15px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  font-family:var(--sans); font-size:16px; color:var(--ink); /* 16px: iOS zoom engeli */
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);
}
.field input[readonly]{ background:var(--soft); }
.field textarea{ resize:vertical; }

/* Kaydedilmiş yanıt */
.answered{ text-align:center; animation:rise .6s var(--ease) both; }
.answered__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 22px; border-radius:100px;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
}
.answered__badge::before{
  content:''; width:8px; height:8px; border-radius:50%; background:currentColor;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.4; } }
.answered__badge--yes{ background:#e8f5ec; color:#1f6b3c; }
.answered__badge--no{  background:#f3f0ec; color:var(--ink-soft); }
.answered__people{ margin:18px 0 6px; font-family:var(--serif); font-size:1.55rem; }
.answered__people span{ display:block; font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); }
.answered__thanks{ margin:0 0 18px; color:var(--ink-soft); font-size:.95rem; }

/* Toplam sayaç */
.tally{
  margin-top:26px; padding-top:22px; border-top:1px dashed var(--line);
  text-align:center;
}
.tally__head{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.tally__head strong{ font-family:var(--serif); font-size:1.7rem; color:var(--gold); }
.tally__detail{ margin:4px 0 0; font-size:.86rem; color:var(--ink-soft); }

/* ---------- Otel ---------- */
.paper--hotel{ scroll-margin-top:78px; overflow:hidden; transition:opacity .4s var(--ease); }
.paper--hotel.is-dim{ opacity:.7; }
.paper--hotel::before{ display:none; }
.hotel__img{
  width:calc(100% + 52px); margin:-36px -26px 24px;
  height:210px; object-fit:cover;
  transition:transform .8s var(--ease);
}
.paper--hotel:hover .hotel__img{ transform:scale(1.04); }
.hotel__name{ margin:0 0 8px; text-align:center; font-family:var(--serif); font-size:1.4rem; }
.hotel__desc{ margin:0 0 20px; text-align:center; color:var(--ink-soft); font-size:.95rem; }
.hotel__actions{ display:grid; gap:10px; }

/* ---------- Galeri ---------- */
.gallery-head{ text-align:center; padding:56px 20px 10px; }
.gallery-head h1{ margin:0 0 8px; font-size:clamp(2.4rem,9vw,3.6rem); color:var(--gold); animation:heroName 1.2s var(--ease) both; }
.gallery-head p{ margin:0 auto; max-width:520px; }

.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:32px 18px; margin-bottom:16px;
  border:2px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:16px; background:var(--soft);
  cursor:pointer; text-align:center; transition:.25s var(--ease);
}
.dropzone:hover, .dropzone.is-over{ border-color:var(--gold); background:#fff; transform:translateY(-2px); }
.dropzone input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; }
.dropzone__icon{ font-size:1.9rem; color:var(--gold); line-height:1; }
.dropzone__text{ font-size:1rem; }
.dropzone__hint{ font-size:.8rem; color:var(--ink-soft); }
.dropzone__files{ font-size:.84rem; color:var(--gold); margin-top:6px; }

.grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.tile{
  position:relative; display:block; aspect-ratio:1;
  border-radius:12px; overflow:hidden; background:var(--soft);
}
.tile img, .tile video{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.tile:hover img, .tile:hover video{ transform:scale(1.06); }
.tile__play{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:1.5rem; text-shadow:0 2px 10px rgba(0,0,0,.5);
  background:linear-gradient(transparent 40%, rgba(0,0,0,.35));
  pointer-events:none;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,12,.94);
  padding:56px 12px;
  animation:fadeIn .3s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox[hidden]{ display:none; }
.lightbox__stage{ max-width:min(96vw,1200px); max-height:82vh; display:flex; }
.lightbox__stage img, .lightbox__stage video{
  max-width:100%; max-height:82vh; object-fit:contain; border-radius:8px;
  animation:zoomIn .35s var(--ease) both;
}
@keyframes zoomIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.lightbox__close, .lightbox__nav{
  position:absolute; background:rgba(255,255,255,.1); color:#fff;
  border:0; border-radius:50%; cursor:pointer; line-height:1;
  width:46px; height:46px; font-size:1.6rem; transition:.2s;
}
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.24); }
.lightbox__close{ top:14px; right:14px; }
.lightbox__nav--prev{ left:10px; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:10px; top:50%; transform:translateY(-50%); }
.lightbox__caption{
  position:absolute; bottom:16px; left:0; right:0;
  text-align:center; color:rgba(255,255,255,.82); font-size:.9rem; margin:0; padding:0 20px;
}

/* ---------- Bölüm arası süsleme ---------- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:6px 18px; color:color-mix(in srgb, var(--gold) 70%, transparent);
}
.divider::before, .divider::after{
  content:''; height:1px; flex:0 1 90px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent));
}
.divider::after{ transform:scaleX(-1); }
.divider span{ font-size:.8rem; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; z-index:2; text-align:center; padding:60px 20px calc(48px + var(--safe-b)); }
.site-footer .script{ margin:0; font-size:2.1rem; color:var(--gold); }
.hashtag{ margin:6px 0 0; font-size:.8rem; letter-spacing:.16em; color:var(--ink-soft); }

/* ---------- Duyarlı: mobil ince ayar ---------- */
@media (max-width:560px){
  .section{ padding:16px 14px; }
  .paper{ padding:30px 20px; border-radius:20px; }
  .paper::before{ inset:6px; }
  .hotel__img{ width:calc(100% + 40px); margin:-30px -20px 20px; height:170px; }
  .details li{ grid-template-columns:1fr; gap:2px; padding:11px 0; }
  .details__k{ padding-top:0; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; }
  .countdown{ gap:7px; }
  .cd{ padding:14px 4px; border-radius:14px; }
  .cd__l{ font-size:.55rem; letter-spacing:.12em; }
  .hero{ padding:60px 18px 84px; }
  .topnav a{ padding:9px 15px; font-size:.75rem; }
  .step__nav{ position:sticky; bottom:calc(10px + var(--safe-b)); }
  .site-footer .script{ font-size:1.9rem; }
}

@media (max-width:380px){
  .choice__opt span{ font-size:.92rem; padding-right:40px; }
  .counter__ctrl input{ width:48px; font-size:1.4rem; }
  .counter__btn{ width:42px; height:42px; }
}

/* Dokunmatik cihazlarda hover efektlerini kapat */
@media (hover:none){
  .choice__opt:hover span{ transform:none; border-color:var(--line); }
  .paper--hotel:hover .hotel__img{ transform:none; }
  .tile:hover img, .tile:hover video{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .petals, .intro{ display:none !important; }
  .section__title::after{ transform:scaleX(1); }
}