/* ============================================================
   Dijital Düğün Davetiyesi - Stil
   Beyaz + pastel, soft, gala (calla) çiçekli tema
   ============================================================ */

:root{
  --cream:    #fbf6f1;
  --cream-2:  #f3e9df;
  --blush:    #f6e4e1;
  --blush-2:  #efd3cf;
  --sage:     #e3ece1;
  --gold:     #c7a76b;
  --gold-2:   #b8975a;
  --ink:      #5a4d44;
  --ink-soft: #8a7c70;
  --white:    #fffdfb;
  --shadow:   rgba(120, 90, 70, .18);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --script:'Great Vibes', cursive;
  --sans:  'Jost', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--cream); }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #fff 0%, var(--cream) 55%, var(--cream) 120%);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Akan yapraklar canvas - her şeyin üstünde ama tıklanamaz */
#petals{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:60;
}

/* ---------- Ortak tipografi yardımcıları ---------- */
.script-sm{ font-family:var(--script); font-size:clamp(1.4rem,4vw,2.1rem); color:var(--gold); letter-spacing:.5px; }
.script-md{ font-family:var(--script); font-size:clamp(2rem,6vw,3.2rem); color:var(--gold); }
.sec-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,6vw,3.2rem); color:var(--ink);
  letter-spacing:.5px; text-align:center;
}
.sec-sub{
  text-align:center; color:var(--ink-soft);
  font-size:clamp(.95rem,2.4vw,1.1rem); font-weight:300;
  max-width:620px; margin:.9rem auto 0; line-height:1.6;
}

/* ====================================================
   1) ZARF AÇILIŞ EKRANI
   ==================================================== */
.envelope-screen{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(130% 100% at 50% 0%, #fff 0%, var(--cream) 55%, #f3e3de 120%);
  transition:opacity 1s ease, visibility 1s;
  padding:1rem;
  touch-action:none; overscroll-behavior:contain;   /* yanlış kaydırmayı önle */
}
.envelope-screen.opened{ opacity:0; visibility:hidden; pointer-events:none; }

.env-scene{
  position:relative; perspective:1600px;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}

.env-hint{
  font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:clamp(1rem,3vw,1.25rem); letter-spacing:.5px;
  animation:floaty 2.6s ease-in-out infinite; transition:opacity .4s ease;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

/* ---------- ZARF ---------- */
.envelope{
  position:relative; perspective:1000px;
  width:min(90vw,440px); aspect-ratio:1.5/1;
  cursor:pointer; transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
.envelope:focus-visible{ outline:2px dashed var(--gold); outline-offset:16px; }
/* önce kapak açılır (zarf yerinde durur), sonra letter-up'ta aşağı kayar */
.envelope.letter-up{ transform:translateY(16vh); }

/* zeminde yumuşak gölge */
.env-shadow{
  position:absolute; left:8%; right:8%; bottom:-8%; height:18%; z-index:0;
  background:radial-gradient(50% 100% at 50% 0%, rgba(120,90,70,.30), transparent 72%);
  filter:blur(7px); transition:opacity 1s ease, transform 1s ease;
}
.envelope.opening .env-shadow{ transform:scale(1.05); opacity:.8; }

/* zarf gövdesi (arka kâğıt) */
.envelope::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:14px;
  background:linear-gradient(135deg,#fffdfa 0%,#f7eee0 55%,#f0e4d3 100%);
  box-shadow:inset 0 0 0 1px rgba(199,167,107,.32),
             inset 0 1px 0 rgba(255,255,255,.8),
             0 18px 30px rgba(120,90,70,.16), 0 30px 60px rgba(120,90,70,.20);
}

/* ön yüz: TAM KAPALI dikdörtgen + zarif altın detaylar */
.env-pocket{
  position:absolute; inset:0; z-index:5; border-radius:14px;
  background:linear-gradient(160deg,#fbf2e4,#efdec8);
  box-shadow:inset 0 0 0 1px rgba(199,167,107,.28),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -12px 26px rgba(150,115,80,.08);
}
/* alt kapak gölgesi (derinlik) */
.env-pocket::before{
  content:""; position:absolute; inset:0; border-radius:14px;
  clip-path:polygon(0 100%, 100% 100%, 50% 32%);
  background:linear-gradient(0deg, rgba(150,115,80,.09), transparent 70%);
}
/* köşelerden ortaya inen ince altın dikiş çizgileri */
.env-pocket::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(199,167,107,.40) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left,  transparent calc(50% - .5px), rgba(199,167,107,.40) 50%, transparent calc(50% + .5px));
}

/* açılınca beliren koyu iç boşluk (zarf ağzı) — açık görünümü sağlar */
.env-mouth{
  position:absolute; top:0; left:0; right:0; height:54%; z-index:6;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg,#c3a684 0%,#d8c4a6 55%,#ecdcc6 100%);
  box-shadow:inset 0 3px 10px rgba(90,65,45,.35);
  opacity:0; transition:opacity .5s ease .3s;
}
.envelope.opening .env-mouth{ opacity:1; }

/* üst kapak (3B açılır) */
/* kapalı üst kapak (ön yüz, ucu aşağı) */
.env-flap{
  position:absolute; top:0; left:0; right:0; height:64%; z-index:8;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(165deg,#fdf6ea 0%,#f3e6d2 70%,#ecdcc4 100%);
  box-shadow:0 6px 12px rgba(120,90,70,.12);
  transform-origin:top center;
  transition:opacity .45s ease, transform .55s cubic-bezier(.6,0,.25,1);
}
/* kapak ucunda küçük altın baklava detayı */
.env-flap::after{
  content:""; position:absolute; left:50%; bottom:0; width:9px; height:9px;
  transform:translate(-50%,50%) rotate(45deg);
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 1px 3px rgba(150,110,80,.45);
}
/* tıklayınca kapalı kapak yukarı kalkıp kaybolur */
.envelope.opening .env-flap{ opacity:0; transform:scaleY(.8); }

/* açılan üst kapak: yukarı doğru katlanarak açılır (ucu YUKARI, pudra astar) */
.env-flap-open{
  position:absolute; left:0; right:0; bottom:100%; height:64%; z-index:7;
  clip-path:polygon(0 100%,100% 100%,50% 0);
  background:
    repeating-linear-gradient(-45deg, rgba(199,167,107,.16) 0 8px, transparent 8px 16px),
    linear-gradient(0deg,#f0d8d2,#e7cbc4);
  box-shadow:inset 0 0 0 1px rgba(199,167,107,.3), 0 -6px 14px rgba(120,90,70,.10);
  transform-origin:bottom center; transform:scaleY(0); opacity:0;
  transition:transform .8s cubic-bezier(.2,.8,.2,1) .1s, opacity .3s ease .1s;
}
.envelope.opening .env-flap-open{ transform:scaleY(1); opacity:1; }
/* kapak açılınca zarf içi koyulaşır (derinlik) */
.envelope.opening .env-pocket{
  box-shadow:inset 0 0 0 1px rgba(199,167,107,.28),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 18px 28px rgba(120,90,70,.20);
}

/* mum mührü (parçalanabilir) */
.wax{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  z-index:9; width:clamp(64px,17vw,84px); aspect-ratio:1; padding:0; border:0;
  background:transparent; cursor:pointer;
  filter:drop-shadow(0 8px 13px rgba(120,40,35,.42));
  transition:filter .6s ease;
}
/* mühür parçaları (4 üçgen, birleşince tam daire) */
.wax .shard{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(120% 120% at 38% 28%, #e0938a 0%, #c4615a 45%, #a14a44 75%, #7e3833 100%);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.40), inset 0 -6px 11px rgba(0,0,0,.32);
  transition:transform .85s cubic-bezier(.45,.05,.55,.95), opacity .85s ease;
}
.wax .shard.t{ clip-path:polygon(50% 50%, 0 0, 100% 0); }
.wax .shard.r{ clip-path:polygon(50% 50%, 100% 0, 100% 100%); }
.wax .shard.b{ clip-path:polygon(50% 50%, 100% 100%, 0 100%); }
.wax .shard.l{ clip-path:polygon(50% 50%, 0 100%, 0 0); }

/* ortadaki Z & E - mührün koyu tonu, kabartma hissi */
.wax .wax-label{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:1px;
  font-family:var(--serif); font-weight:700; letter-spacing:.5px;
  font-size:clamp(.95rem,3.8vw,1.2rem);
  color:#5e2723;
  text-shadow:0 1px 0 rgba(255,255,255,.22), 0 -1px 1px rgba(0,0,0,.42);
  transition:opacity .3s ease, transform .3s ease;
}
.wax .wax-label i{ font-style:normal; opacity:.85; font-size:.72em; }

/* KIRILMA: parçalar dört yöne savrulur, yazı söner */
.envelope.opening .wax{ filter:drop-shadow(0 8px 13px rgba(120,40,35,0)); }
.envelope.opening .wax .wax-label{ opacity:0; transform:scale(.5); }
.envelope.opening .wax .shard.t{ transform:translate(-12%,-125%) rotate(-42deg); opacity:0; }
.envelope.opening .wax .shard.r{ transform:translate(125%,-14%)  rotate(50deg);  opacity:0; }
.envelope.opening .wax .shard.b{ transform:translate(14%,125%)   rotate(38deg);  opacity:0; }
.envelope.opening .wax .shard.l{ transform:translate(-125%,16%)  rotate(-48deg); opacity:0; }

/* ---------- İÇİNDEKİ DAVETİYE KARTI ---------- */
.letter{
  position:absolute; left:7%; right:7%; bottom:7%; z-index:4; opacity:0;
  transform-origin:center bottom; transform:translateY(8%) scale(.96);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .55s ease, z-index 0s .1s;
  will-change:transform, opacity;
}
.envelope.letter-up .letter{ opacity:1; transform:translateY(-58%) scale(1); z-index:10; }

.letter-card{
  position:relative; text-align:center;
  background:linear-gradient(180deg,#fffefb,#fdf6ea);
  border-radius:8px; padding:clamp(1.1rem,4.5vw,2rem) clamp(.9rem,4vw,1.6rem);
  box-shadow:0 18px 40px rgba(150,110,80,.26), inset 0 0 0 1px rgba(199,167,107,.25);
}
.letter-card::before{ content:""; position:absolute; inset:8px; border:1px solid var(--gold);
  opacity:.45; border-radius:4px; pointer-events:none; }
.lc-corner{ position:absolute; width:16px; height:16px; border:2px solid var(--gold); opacity:.7; }
.lc-corner.tl{ top:5px; left:5px; border-right:0; border-bottom:0; }
.lc-corner.tr{ top:5px; right:5px; border-left:0; border-bottom:0; }
.lc-corner.bl{ bottom:5px; left:5px; border-right:0; border-top:0; }
.lc-corner.br{ bottom:5px; right:5px; border-left:0; border-top:0; }

.lc-mono{ font-family:var(--serif); font-weight:600; color:var(--gold-2);
  font-size:clamp(1rem,4vw,1.2rem); letter-spacing:1px; }
.lc-mono i{ font-style:normal; opacity:.65; }
.lc-kicker{ font-family:var(--sans); font-weight:500; letter-spacing:.26em;
  font-size:clamp(.55rem,2.4vw,.66rem); color:var(--ink-soft); margin-top:.4rem; }
.lc-rule{ display:flex; align-items:center; justify-content:center; gap:9px;
  color:var(--gold); margin:.55rem 0; font-size:.85rem; }
.lc-rule span{ width:clamp(26px,8vw,42px); height:1px; background:var(--gold); opacity:.7; }
.lc-couple{ font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(1.3rem,6vw,2rem); line-height:1.2; }
.lc-date{ font-family:var(--serif); letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(.66rem,2.8vw,.78rem); color:var(--gold-2); margin-top:.4rem; }
.lc-note{ font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  font-size:clamp(.78rem,3.2vw,.92rem); margin-top:.55rem; line-height:1.4; }
.lc-floral{ width:clamp(70px,18vw,104px); aspect-ratio:1/1; margin:.5rem auto 0;
  background:url(../img/guvercin-yuzuk.png) center/contain no-repeat; }

/* kart içeriği aşamalı belirir */
.letter-card > *{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.letter-card > .lc-corner{ transform:none; transition:opacity .6s ease; }
.envelope.reveal-letter .letter-card > *{ opacity:1; transform:none; }
.envelope.reveal-letter .lc-kicker{ transition-delay:.12s; }
.envelope.reveal-letter .lc-rule{ transition-delay:.22s; }
.envelope.reveal-letter .lc-couple{ transition-delay:.32s; }
.envelope.reveal-letter .lc-date{ transition-delay:.46s; }
.envelope.reveal-letter .lc-note{ transition-delay:.58s; }
.envelope.reveal-letter .lc-floral{ transition-delay:.7s; }

/* ====================================================
   KAYDIRMALI ALAN (scroll-snap)
   ==================================================== */
.scroller{
  height:100vh; height:100dvh;
  overflow:hidden;                 /* zarf açılana kadar kaydırma kapalı */
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  opacity:0;
  transition:opacity 1s ease .2s;
}
.scroller.active{ opacity:1; overflow-y:scroll; }
.scroller::-webkit-scrollbar{ width:0; }

.snap{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-height:100vh; min-height:100dvh;
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(2rem,6vw,4rem) 1.2rem;
  overflow:hidden;
}
/* Bölümler arası nazik renk geçişi */
#sec-hero    { background:radial-gradient(120% 90% at 50% 10%, #fff, var(--cream)); }
#sec-greet   { background:linear-gradient(180deg, var(--cream), #fff); }
#sec-message { background:radial-gradient(120% 90% at 50% 50%, #fff, var(--sage) 160%); }
#sec-families{ background:linear-gradient(180deg, #fff, var(--blush) 180%); }
#sec-venues  { background:linear-gradient(180deg, var(--cream), #fff); }
#sec-rsvp    { background:radial-gradient(120% 90% at 50% 0%, #fff, var(--cream)); }
#sec-photos  { background:linear-gradient(180deg, #fff, var(--sage) 200%); }
#sec-thanks  { background:radial-gradient(120% 100% at 50% 50%, #fff, var(--blush) 160%); }

/* ---------- Reveal animasyonu ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ====================================================
   1) HERO
   ==================================================== */
.hero-inner{ text-align:center; }
.couple-name{
  font-family:var(--script); font-weight:400;
  font-size:clamp(1.5rem,8.2vw,7rem); color:var(--ink);
  line-height:1.1; margin:.4rem 0 .2rem;
  white-space:nowrap;            /* mobilde tek satır */
}
.rule{ display:flex; align-items:center; justify-content:center; gap:10px; margin:1rem 0 1.6rem; }
.rule::before,.rule::after{ content:""; width:clamp(40px,18vw,120px); height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.rule .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }

.countdown{ display:flex; gap:clamp(.6rem,2.5vw,1.4rem); justify-content:center; }
.cd-box{ min-width:64px; background:rgba(255,255,255,.6); backdrop-filter:blur(4px); border:1px solid rgba(199,167,107,.3); border-radius:14px; padding:.7rem .5rem; box-shadow:0 8px 20px rgba(150,110,80,.1); }
.cd-box span{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,5vw,2rem); color:var(--gold-2); }
.cd-box label{ font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); }

.scroll-note{ position:absolute; bottom:78px; left:50%;
  font-family:var(--serif); font-style:italic; color:var(--gold-2); text-align:center;
  font-size:clamp(.82rem,3vw,1rem); letter-spacing:.3px; white-space:nowrap;
  transform:translateX(-50%); animation:noteFloat 2.6s ease-in-out infinite; }
@keyframes noteFloat{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-7px);} }
.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid var(--gold); border-radius:14px; }
.scroll-cue span{ position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--gold); border-radius:2px; transform:translateX(-50%); animation:cue 1.6s infinite; }
@keyframes cue{ 0%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,16px);} }

/* ====================================================
   2) KARŞILAMA
   ==================================================== */
.greet-inner{ text-align:center; max-width:760px; }
.greet-name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,6.5vw,3.4rem); color:var(--ink); margin:.6rem 0 1rem; line-height:1.2; }
.greet-text{ color:var(--ink-soft); font-weight:300; font-size:clamp(1rem,3vw,1.25rem); }

/* ====================================================
   3) MESAJ ÇERÇEVESİ
   ==================================================== */
.frame{ position:relative; width:min(90vw,640px); padding:clamp(2rem,7vw,3.5rem); background:rgba(255,255,255,.55); backdrop-filter:blur(3px); border-radius:6px; }
.frame::before{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); opacity:.55; border-radius:2px; }
.frame-corner{ position:absolute; width:34px; height:34px; border:2px solid var(--gold); }
.frame-corner.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.frame-corner.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.frame-corner.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.frame-corner.br{ bottom:0; right:0; border-left:0; border-top:0; }
.frame-inner{ position:relative; text-align:center; }
.frame-flower{ width:clamp(120px,26vw,170px); aspect-ratio:1/1; margin:0 auto .8rem; background:url(../img/guvercin-yuzuk.png) center/contain no-repeat; animation:floaty 4s ease-in-out infinite; }
.message-text{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,4.6vw,2.1rem); line-height:1.5; color:var(--ink); }
.message .script-md{ margin-top:1.4rem; }

/* ====================================================
   4) AİLELER
   ==================================================== */
.fam-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1rem,5vw,3rem); width:min(92vw,820px); text-align:center; }
.fam-names{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,4.6vw,2.2rem); color:var(--ink); line-height:1.3; }
.fam-surname{ font-family:var(--script); font-size:clamp(1.4rem,5vw,2.4rem); color:var(--gold); margin-top:.2rem; }
.fam-and{ font-family:var(--script); font-size:clamp(2.4rem,9vw,4rem); color:var(--blush-2); }

/* ====================================================
   5) DÜĞÜN YERLERİ
   ==================================================== */
.venues .sec-title{ margin-bottom:clamp(1.4rem,4vw,2.4rem); }
.venue-list{ display:flex; flex-direction:column; gap:1.4rem; width:min(92vw,560px); }
.venue-card{ text-align:center; background:rgba(255,255,255,.62); backdrop-filter:blur(3px); border:1px solid rgba(199,167,107,.28); border-radius:16px; padding:clamp(1.4rem,5vw,2.2rem); box-shadow:0 12px 30px rgba(150,110,80,.1); }
.venue-date{ display:inline-block; font-family:var(--sans); font-weight:500; letter-spacing:1px; color:var(--gold-2); background:var(--cream); border-radius:30px; padding:.4rem 1.1rem; font-size:clamp(.8rem,2.4vw,.95rem); margin-bottom:.8rem; }
.venue-name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,5vw,2rem); color:var(--ink); }
.venue-addr{ color:var(--ink-soft); font-weight:300; margin:.5rem 0 1rem; line-height:1.5; }
.venue-map{ display:inline-block; text-decoration:none; color:var(--gold-2); border:1px solid var(--gold); border-radius:30px; padding:.5rem 1.3rem; font-size:.9rem; transition:.25s; }
.venue-map:hover{ background:var(--gold); color:#fff; }
.venue-sep{ display:flex; justify-content:center; }
.venue-sep span{ width:8px; height:8px; border-radius:50%; background:var(--blush-2); box-shadow:-16px 0 0 var(--sage),16px 0 0 var(--sage); }

/* ====================================================
   6) LCV FORMU
   ==================================================== */
.rsvp-inner,.photos-inner{ width:min(94vw,560px); }
.rsvp-form,.photo-form{ margin-top:clamp(1.4rem,4vw,2rem); display:flex; flex-direction:column; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; text-align:left; }
.field label{ font-size:.85rem; color:var(--ink-soft); letter-spacing:.3px; }
.field label span{ color:#c98f86; }
.field input,.field select,.field textarea,.ph-name{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:rgba(255,255,255,.8);
  border:1px solid rgba(199,167,107,.4);
  border-radius:12px; padding:.8rem 1rem; width:100%;
  transition:.2s; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus,.ph-name:focus{
  border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,167,107,.15); background:#fff;
}
.field textarea{ resize:vertical; }

.btn{
  font-family:var(--sans); font-size:1rem; font-weight:500; letter-spacing:1px;
  color:#fff; cursor:pointer; border:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-radius:30px; padding:.95rem 1.6rem; margin-top:.4rem;
  box-shadow:0 10px 24px rgba(184,151,90,.35);
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(184,151,90,.45); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.form-msg{ text-align:center; font-size:.95rem; min-height:1.2em; margin-top:.3rem; }
.form-msg.ok{ color:#5c8a5c; }
.form-msg.err{ color:#c0706a; }

/* ====================================================
   7) FOTOĞRAF YÜKLEME
   ==================================================== */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center; cursor:pointer;
  border:2px dashed rgba(199,167,107,.5); border-radius:18px;
  padding:clamp(1.6rem,6vw,2.6rem) 1rem;
  background:rgba(255,255,255,.55); transition:.25s;
}
.dropzone.drag,.dropzone:hover{ border-color:var(--gold); background:#fff; }
.dz-icon{ font-size:2rem; }
.dz-title{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); }
.dz-sub{ font-size:.85rem; color:var(--ink-soft); }

.preview-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:.6rem; }
.preview-grid:empty{ display:none; }
.preview-item{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(150,110,80,.18); }
.preview-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.preview-item .pv-file{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:.78rem; font-weight:500; color:var(--gold-2);
  background:repeating-linear-gradient(45deg,#faf5ef,#faf5ef 8px,#f4ebde 8px,#f4ebde 16px); }
.preview-item button{ position:absolute; top:3px; right:3px; width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-size:.9rem; line-height:1; }

.progress{ height:8px; border-radius:6px; background:rgba(199,167,107,.2); overflow:hidden; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .2s; }

/* ====================================================
   8) TEŞEKKÜRLER
   ==================================================== */
.thanks-inner{ text-align:center; max-width:680px; }
.thanks-title{ font-family:var(--script); font-size:clamp(3rem,14vw,7rem); color:var(--gold); line-height:1.05; }
.thanks-sub{ color:var(--ink-soft); font-weight:300; font-size:clamp(1rem,3vw,1.25rem); margin:1rem 0 .4rem; }

/* ====================================================
   CALLA (GALA) ÇİÇEĞİ SÜSLERİ
   ==================================================== */
:root{
  --calla:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'><g fill='none'><path d='M60 150 C58 110 40 95 30 80' stroke='%23a9c4a0' stroke-width='5' stroke-linecap='round'/><path d='M30 82 C12 70 8 96 26 100 C36 102 40 92 30 82 Z' fill='%23bcd6b2'/><path d='M60 150 C66 120 78 104 92 92' stroke='%23a9c4a0' stroke-width='4' stroke-linecap='round'/><path d='M40 60 C35 25 78 10 92 36 C70 30 58 44 70 70 C80 64 78 84 60 84 C44 84 36 76 40 60 Z' fill='%23ffffff' stroke='%23ecd9c4' stroke-width='1.5'/><path d='M58 40 C60 52 60 66 60 80' stroke='%23e6b94f' stroke-width='7' stroke-linecap='round'/></g></svg>");
}
.calla{ position:absolute; width:clamp(90px,22vw,180px); height:clamp(120px,28vw,240px); background:var(--calla) center/contain no-repeat; opacity:.9; pointer-events:none; filter:drop-shadow(0 8px 14px rgba(150,120,90,.15)); }
.calla-tl{ top:-14px; left:-12px; transform:rotate(-18deg); }
.calla-tr{ top:-14px; right:-12px; transform:scaleX(-1) rotate(-18deg); }
.calla-br{ bottom:-14px; right:-10px; transform:rotate(160deg); }
.calla-bl{ bottom:-14px; left:-10px; transform:scaleX(-1) rotate(160deg); }
.calla{ animation:sway 6s ease-in-out infinite; transform-origin:bottom center; }
@keyframes sway{ 0%,100%{ rotate:-2deg;} 50%{ rotate:2deg;} }

/* ====================================================
   GERÇEK GÖRSEL SÜSLEMELER + JS ÇERÇEVELER
   ==================================================== */

/* İçerik daima süslemelerin üstünde kalsın */
.hero-inner,.greet-inner,.frame,.fam-wrap,.venues .sec-title,.venue-list,
.rsvp-inner,.photos-inner,.thanks-inner{ position:relative; z-index:2; }

/* ---- Köşe çiçek demetleri (gerçek görseller) ---- */
.corner{
  position:absolute; z-index:1; pointer-events:none;
  background-size:contain; background-repeat:no-repeat;
  opacity:0; animation:decoFade 1.5s ease .15s forwards;
  transform-origin:center; will-change:opacity;
}
.corner.sway{ animation:decoFade 1.5s ease .15s forwards, decoSway 9s ease-in-out 1.6s infinite; }
@keyframes decoFade{ to{ opacity:.97; } }
@keyframes decoSway{ 0%,100%{ rotate:-1deg; } 50%{ rotate:1deg; } }

.corner-tr{ top:-8px; right:-8px;  width:clamp(135px,29vw,320px); aspect-ratio:922/732; background-image:url(../img/sag-ust.png); background-position:top right; }
.corner-tl{ top:-8px; left:-8px;   width:clamp(135px,29vw,320px); aspect-ratio:922/732; background-image:url(../img/sag-ust.png); background-position:top left;  transform:scaleX(-1); }
.corner-bl{ bottom:-8px; left:-8px; width:clamp(145px,32vw,370px); aspect-ratio:1168/830; background-image:url(../img/sol-alt.png); background-position:bottom left; }
.corner-br{ bottom:-8px; right:-8px;width:clamp(145px,32vw,370px); aspect-ratio:1168/830; background-image:url(../img/sol-alt.png); background-position:bottom right; transform:scaleX(-1); }

/* ---- Yan ve alt buketler ---- */
.side-bouquet{ position:absolute; z-index:1; pointer-events:none; background-size:contain; background-repeat:no-repeat; opacity:0; animation:decoFade 1.7s ease .3s forwards; }
.side-cicek{ left:0; bottom:0; width:clamp(90px,17vw,175px); aspect-ratio:518/990; background-image:url(../img/cicek.png); background-position:bottom left; }
.side-long{ right:-6px; top:50%; translate:0 -50%; width:clamp(105px,18vw,195px); aspect-ratio:684/968; background-image:url(../img/long-flower.png); background-position:center right; }

.bottom-bouquet{ position:absolute; z-index:1; pointer-events:none; left:50%; bottom:0; translate:-50% 0;
  width:min(560px,86vw); aspect-ratio:2482/1246; background:url(../img/bottom.png) bottom center/contain no-repeat;
  opacity:0; animation:decoRise 1.8s ease .25s forwards; }
@keyframes decoRise{ from{ opacity:0; transform:translateY(26px);} to{ opacity:.97; transform:none;} }

/* ---- Tematik aksanlar: yüzük, güvercin, buket, halka ---- */
.accent{ background-size:contain; background-repeat:no-repeat; background-position:center; }
.accent-rings{ width:clamp(78px,15vw,128px); aspect-ratio:1592/882; background-image:url(../img/yuzuk.png); margin:0 auto .5rem; }
.accent-doves{ width:clamp(150px,32vw,225px); aspect-ratio:1/1; background-image:url(../img/guvercin-yuzuk.png); margin:0 auto 1rem; animation:floaty 4s ease-in-out infinite; }
.accent-ringflower{ width:clamp(120px,28vw,180px); aspect-ratio:1/1; background-image:url(../img/flower-ring.png); margin:0 auto .6rem; }

/* Aileler arası ince dikey ayraç */
.fam-divider{ position:relative; width:1px; align-self:stretch; min-height:120px; justify-self:center;
  background:linear-gradient(180deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent); }
.fam-divider::after{ content:"❦"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--gold); font-size:1.1rem; background:#fff; padding:.25rem 0; line-height:1; }

/* ---- Çerçeveli kart görünümleri ---- */
.framed{ position:relative; }
.greet-inner.framed,.rsvp-inner.framed,.photos-inner.framed,.fam-wrap.framed{
  background:rgba(255,255,255,.58); backdrop-filter:blur(3px);
  border-radius:16px; box-shadow:0 18px 44px rgba(150,110,80,.13);
  padding:clamp(1.8rem,5.5vw,3rem);
}
.fam-wrap{ width:min(94vw,860px); }
.fam-wrap.framed{ width:min(92vw,860px); }
.fam-title{ margin-bottom:clamp(1.4rem,4.5vw,2.4rem); }

/* LCV bölümü: daha derli toplu */
.rsvp .sec-title{ font-size:clamp(1.5rem,4.6vw,2.2rem); }
.rsvp-inner.framed{ padding:clamp(1.3rem,4.5vw,2.1rem); }
.rsvp .sec-sub{ margin-top:.45rem; }
.rsvp-form{ gap:.7rem; margin-top:clamp(.9rem,3vw,1.3rem); }
.rsvp .field{ gap:.25rem; }

/* Teşekkür sayfası: yazılar alttaki buketin üstünde, dikeyde ortalı */
#sec-thanks{ justify-content:center; padding-bottom:clamp(150px,40vw,250px); }
.thanks-inner .accent-doves{ margin-bottom:.6rem; }

/* ---- JS ile çizilen animasyonlu çerçeve ---- */
.js-frame{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.jf-content{ position:relative; z-index:1; }
.jf-rect{ fill:none; stroke:var(--gold); stroke-width:1.4; vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1) .15s; }
.jf-rect.jf-inner{ stroke-opacity:.4; transition-delay:.5s; }
.in .jf-rect{ stroke-dashoffset:0; }
.jf-dot{ fill:var(--gold); opacity:0; transition:opacity .6s ease 1.5s; }
.in .jf-dot{ opacity:.85; }

/* ---- Açılış öncesi yükleme ekranı ---- */
#preloader{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.1rem;
  background:radial-gradient(120% 90% at 50% 30%,#fff,var(--cream) 70%,var(--blush));
  transition:opacity .7s ease, visibility .7s; }
#preloader.done{ opacity:0; visibility:hidden; }
.pre-flower{ width:108px; height:108px; background:url(../img/flower.png) center/contain no-repeat; animation:prePulse 1.8s ease-in-out infinite; }
.pre-name{ font-family:var(--script); font-size:clamp(1.6rem,6vw,2.2rem); color:var(--gold); }
.pre-bar{ width:140px; height:3px; border-radius:3px; background:rgba(199,167,107,.25); overflow:hidden; }
.pre-bar span{ display:block; height:100%; width:40%; background:var(--gold); border-radius:3px; animation:preBar 1.1s ease-in-out infinite; }
@keyframes prePulse{ 0%,100%{ transform:scale(.92); opacity:.8;} 50%{ transform:scale(1.05); opacity:1;} }
@keyframes preBar{ 0%{ transform:translateX(-130%);} 100%{ transform:translateX(330%);} }

/* Envelope ekranı köşe süslemeleri biraz daha hafif */
.envelope-screen .corner{ opacity:0; animation:decoFade 1.6s ease .4s forwards; }

/* Mobil ince ayar */
@media (max-width:520px){
  .calla{ opacity:.7; }
  .fam-grid{ gap:.7rem; }
  .fam-names{ font-size:clamp(1rem,4.4vw,1.4rem); }
  .fam-surname{ font-size:clamp(1.1rem,5vw,1.6rem); }
  .fam-divider{ min-height:90px; }
  .side-bouquet{ display:none; }
  .corner{ opacity:.85; }
  .corner-tr,.corner-tl{ width:42vw; }
  .corner-bl,.corner-br{ width:46vw; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .corner,.side-bouquet,.bottom-bouquet{ opacity:.95 !important; }
  .jf-rect{ stroke-dashoffset:0 !important; }
  .jf-dot{ opacity:.85 !important; }
  #preloader{ display:none !important; }
}