:root {
  --bg:        #faf6f0;
  --cream:     #f3eadf;
  --blush:     #e8d5d0;
  --sage:      #8a9a82;
  --sage-deep: #5f6e58;
  --ink:       #3a352f;
  --gold:      #b89a6b;
  --rose:      #c98b87;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:"Jost", sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

/* ─── ÜST MENÜ ─── */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:center;
  gap:2.2rem;
  padding:1.1rem;
  background:rgba(250,246,240,.85);
  backdrop-filter:blur(8px);
  z-index:50;
  border-bottom:1px solid rgba(184,154,107,.18);
}
.nav a {
  color:var(--sage-deep);
  text-decoration:none;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.nav a:hover { color:var(--ink); }
.nav a.active { border-bottom-color:var(--gold); color:var(--ink); }

/* ─── HERO / ANASAYFA ─── */
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 2rem 4rem;
  position:relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,213,208,.5), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(138,154,130,.28), transparent 45%),
    var(--bg);
}

.eyebrow {
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.6rem;
  opacity:0;
  animation:fadeUp 1s ease .2s forwards;
}

/* ─── ÇİFT FOTOĞRAFI (dairesel) ─── */
.couple-photo {
  width:clamp(150px, 38vw, 210px);
  aspect-ratio:1;
  margin:0 auto 1.8rem;
  border-radius:50%;
  padding:6px;
  background:linear-gradient(145deg, var(--gold), var(--blush));
  box-shadow:0 22px 45px -25px rgba(58,53,47,.55);
  opacity:0;
  animation:fadeUp 1.1s ease .35s forwards;
}
.couple-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--bg);
  display:block;
}

.names {
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  font-size:clamp(3.2rem, 11vw, 7rem);
  line-height:1;
  color:var(--ink);
  opacity:0;
  animation:fadeUp 1.1s ease .5s forwards;
}
.names .amp {
  display:block;
  font-style:italic;
  font-size:.5em;
  color:var(--rose);
  margin:.35rem 0;
}

.date {
  margin-top:1.8rem;
  font-size:.95rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sage-deep);
  opacity:0;
  animation:fadeUp 1.1s ease .8s forwards;
}

.welcome {
  max-width:540px;
  margin:2.2rem auto 0;
  font-size:1.08rem;
  color:#6b645b;
  opacity:0;
  animation:fadeUp 1.1s ease 1.05s forwards;
}

/* ─── TARİH & KONUM ─── */
.event-meta {
  margin-top:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
  font-family:"Cormorant Garamond", serif;
  font-size:1.35rem;
  color:var(--gold);
  letter-spacing:.02em;
  opacity:0;
  animation:fadeUp 1.1s ease .95s forwards;
}
.event-meta .dot { color:var(--blush); }

.scroll-cue {
  margin-top:3rem;
  opacity:0;
  animation:fadeUp 1s ease 1.4s forwards;
}
.scroll-cue a {
  color:var(--sage-deep);
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
}
.scroll-cue .arrow {
  width:1px; height:34px;
  background:linear-gradient(var(--sage-deep), transparent);
  animation:pulse 2s ease-in-out infinite;
}

.sprig { font-size:1.7rem; color:var(--sage); margin:1.2rem 0; opacity:.85; }

/* ─── ANASAYFA BUTONLARI ─── */
.hero-landing { padding-bottom:5rem; }
/* anasayfada metni biraz sıkılaştır ki butonlar yukarı gelsin */
.hero-landing .welcome { margin-top:1.4rem; font-size:1rem; max-width:500px; }
.hero-landing .sprig { margin:.7rem 0; }
.landing-actions {
  display:flex;
  gap:1.4rem;
  margin-top:2.8rem;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:680px;
  opacity:0;
  animation:fadeUp 1.1s ease 1.3s forwards;
}
.action-card {
  flex:1 1 240px;
  max-width:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  background:#fffdfa;
  border:1px solid var(--blush);
  border-radius:6px;
  padding:2.2rem 1.6rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 18px 40px -32px rgba(58,53,47,.5);
}
.action-card:hover {
  transform:translateY(-4px);
  border-color:var(--sage);
  box-shadow:0 26px 50px -30px rgba(58,53,47,.55);
}
.action-icon { font-size:2.2rem; }
.action-title {
  font-family:"Cormorant Garamond", serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
}
.action-sub {
  font-size:.88rem;
  color:#8a8276;
  line-height:1.45;
}

/* ─── ORTAK BÖLÜM KAPSAYICI (yükleme + dilek) ─── */
.section {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6rem 1.5rem 4rem;
  background:linear-gradient(180deg, var(--bg), #f5ede3);
}

.card {
  background:#fffdfa;
  border:1px solid var(--blush);
  border-radius:4px;
  max-width:560px;
  width:100%;
  padding:clamp(2rem, 6vw, 3.5rem);
  text-align:center;
  box-shadow:0 30px 70px -40px rgba(58,53,47,.45);
}

.card h2 {
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  font-size:clamp(2rem, 6vw, 2.8rem);
  color:var(--ink);
  margin-bottom:.6rem;
}
.card .sub {
  color:#7a736a;
  font-size:1rem;
  margin-bottom:2.2rem;
}

/* ─── FOTOĞRAF YÜKLEME ─── */
.dropzone {
  display:block;
  border:1.5px dashed var(--sage);
  border-radius:4px;
  padding:2.6rem 1.4rem;
  cursor:pointer;
  transition:all .25s ease;
  background:#fbf7f1;
}
.dropzone:hover, .dropzone.drag {
  background:#f3eadf;
  border-color:var(--sage-deep);
}
.dropzone .icon { font-size:2.4rem; margin-bottom:.8rem; }
.dropzone strong {
  font-weight:500;
  color:var(--sage-deep);
  border-bottom:1px solid var(--sage);
}
.dropzone p { color:#8a8276; font-size:.9rem; margin-top:.5rem; }

input[type=file] { display:none; }

.previews {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(86px,1fr));
  gap:.6rem;
  margin-top:1.6rem;
}
.thumb {
  position:relative;
  aspect-ratio:1;
  border-radius:3px;
  overflow:hidden;
  background:#eee;
}
.thumb img, .thumb video { width:100%; height:100%; object-fit:cover; }
.thumb-tag {
  position:absolute;
  bottom:4px; right:5px;
  font-size:.7rem;
  color:#fff;
  background:rgba(58,53,47,.6);
  border-radius:3px;
  padding:1px 5px;
}
.thumb .state {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  background:rgba(58,53,47,.45);
  color:#fff;
}
.thumb.done .state { background:rgba(138,154,130,.55); }

/* ─── DİLEK DEFTERİ FORMU ─── */
.field { text-align:left; margin-bottom:1.3rem; }
.field label {
  display:block;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage-deep);
  margin-bottom:.5rem;
}
.field label .req { color:var(--rose); }
.field input, .field textarea {
  width:100%;
  border:1px solid var(--blush);
  border-radius:3px;
  background:#fbf7f1;
  padding:.85rem 1rem;
  font-family:"Jost", sans-serif;
  font-size:1rem;
  font-weight:300;
  color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus {
  outline:none;
  border-color:var(--sage);
  background:#fff;
}
.field textarea { resize:vertical; min-height:130px; line-height:1.6; }

/* ─── "ya da" AYIRICI ─── */
.divider {
  display:flex;
  align-items:center;
  gap:1rem;
  margin:1.8rem 0 1.4rem;
  color:#a89f93;
}
.divider::before, .divider::after {
  content:"";
  flex:1;
  height:1px;
  background:var(--blush);
}
.divider span {
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ─── SES KAYDI ─── */
.voice {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.rec-btn {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  background:#fbf7f1;
  border:1px solid var(--blush);
  border-radius:40px;
  padding:.8rem 1.8rem;
  cursor:pointer;
  font-family:"Jost", sans-serif;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage-deep);
  transition:border-color .2s ease, background .2s ease;
}
.rec-btn:hover { border-color:var(--sage); }
.rec-dot {
  width:11px; height:11px;
  border-radius:50%;
  background:var(--rose);
  flex-shrink:0;
}
.rec-btn.recording { border-color:var(--rose); color:var(--rose); }
.rec-btn.recording .rec-dot { animation:blink 1s steps(2,start) infinite; }

.rec-timer {
  font-size:.9rem;
  color:var(--sage-deep);
  letter-spacing:.05em;
  min-height:1.2em;
}
.rec-playback { width:100%; margin-top:.4rem; }
.rec-clear {
  background:none;
  border:none;
  color:#a89f93;
  font-family:"Jost", sans-serif;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.rec-clear:hover { color:var(--rose); }

@keyframes blink { 50% { opacity:.25; } }

/* ─── DURUM + BUTON ─── */
.status {
  margin-top:1.6rem;
  font-size:.95rem;
  color:var(--sage-deep);
  min-height:1.4em;
}

.btn {
  margin-top:1rem;
  background:var(--sage-deep);
  color:#fff;
  border:none;
  padding:.95rem 2.6rem;
  font-family:"Jost", sans-serif;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:3px;
  cursor:pointer;
  transition:background .25s ease, transform .15s ease;
}
.btn:hover { background:var(--ink); transform:translateY(-2px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.footnote {
  margin-top:2.4rem;
  font-size:.8rem;
  color:#a89f93;
  letter-spacing:.05em;
}

footer {
  text-align:center;
  padding:2.5rem 1rem;
  font-size:.78rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  background:#f5ede3;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:.3; }
  50%     { opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; }
  .eyebrow,.names,.date,.welcome,.scroll-cue { opacity:1 !important; }
}

/* ════════════════════════════════════════════
   MOBİL — anasayfa sıkıştırma + alt aksiyon çubuğu
════════════════════════════════════════════ */

/* SABİT ALT AKSİYON ÇUBUĞU (sadece mobilde görünür) */
.mobile-bar {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:60;
  background:rgba(255,253,250,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--blush);
  box-shadow:0 -10px 30px -20px rgba(58,53,47,.4);
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.mobile-bar a {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  text-decoration:none;
  color:var(--sage-deep);
  padding:.5rem .3rem;
  border-radius:8px;
  font-size:.72rem;
  letter-spacing:.06em;
  transition:background .2s ease;
}
.mobile-bar a:active { background:var(--cream); }
.mobile-bar a.active { color:var(--ink); }
.mobile-bar .mb-icon { font-size:1.25rem; line-height:1; }

@media (max-width: 640px) {
  /* alt çubuğu göster */
  .mobile-bar { display:flex; }
  /* alt çubuk içeriği örtmesin diye sayfalara boşluk */
  body { padding-bottom:4.8rem; }

  /* anasayfayı sıkılaştır: foto + isimler küçülsün, butonlar yukarı gelsin */
  .hero-landing { padding:3.4rem 1.4rem 1.5rem; min-height:auto; }
  .hero-landing .eyebrow { margin-bottom:.6rem; font-size:.68rem; }
  .couple-photo { width:96px; margin-bottom:.7rem; }
  .hero-landing .names { font-size:2.4rem; }
  .hero-landing .names .amp { margin:0; }
  .hero-landing .date { margin-top:.7rem; font-size:.72rem; }
  .event-meta { margin-top:.5rem; font-size:1rem; }
  .hero-landing .sprig { margin:.35rem 0; font-size:1.1rem; }
  .hero-landing .welcome { margin-top:.7rem; font-size:.9rem; line-height:1.5; }
  .landing-actions { margin-top:1.2rem; gap:.8rem; }
  .action-card { padding:1.2rem 1.1rem; flex-basis:auto; }
  .action-icon { font-size:1.6rem; }
  .action-title { font-size:1.2rem; }
  .action-sub { font-size:.82rem; }
}