/* =========================================================
   Patricia & Kutlay — 29.08.2026
   ========================================================= */

:root{
  --ink:#111111;
  --ink-soft:#111111;
  --line:#111111;
  --paper:#ffffff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

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

html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

.daisy{
  width:100%; height:100%;
  color:var(--ink);
  display:block;
}

/* =========================================================
   1. ZARF PERDESİ
   ========================================================= */

.cover{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  perspective:1400px;
  transition:opacity .9s var(--ease-soft);
}
.cover.is-gone{ opacity:0; pointer-events:none; }
.cover.is-hidden{ display:none; }

.cover__inner{
  display:grid;
  grid-template-columns:auto;
  justify-items:center;
  transform-style:preserve-3d;
  animation:coverIn 1.3s var(--ease) both;
}
@keyframes coverIn{
  from{ opacity:0; transform:translateY(18px) scale(.97); }
  to{ opacity:1; transform:none; }
}

.envelope{
  position:relative;
  grid-area:1/1;
  width:min(76vw,300px);
  aspect-ratio:300/396;
  transform-style:preserve-3d;
  cursor:pointer;
  outline:none;
  transition:transform 1s var(--ease);
}
.envelope:focus-visible{ outline:1px solid var(--ink); outline-offset:22px; }

@media (hover:hover){
  .envelope:not(.is-open):hover{ transform:translateY(-6px); }
}

/* gövde */
.envelope__body{
  position:absolute;
  inset:0;
  border:1px solid var(--line);
  background:var(--paper);
  z-index:3;
  pointer-events:none;
}

/* kapak */
.envelope__flap{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:47.5%;
  transform-origin:top center;
  transform:rotateX(0deg);
  z-index:4;
  pointer-events:none;
  transition:transform 1.05s var(--ease-soft);
}
.envelope__flap svg{ width:100%; height:100%; display:block; }

.envelope__mono{
  position:absolute;
  top:34%; left:50%;
  transform:translate(-50%,-50%);
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(20px,5.5vw,26px);
  letter-spacing:.14em;
  text-indent:.14em;
  color:var(--ink);
  transition:opacity .35s var(--ease-soft);
}

.envelope.is-open .envelope__flap{ transform:rotateX(-178deg); }
.envelope.is-flap-back .envelope__flap{ z-index:1; }
.envelope.is-open .envelope__mono{ opacity:0; transition-duration:.2s; }

/* içerideki kart */
.mini{
  position:absolute;
  left:50%;
  bottom:3%;
  width:90%;
  height:92%;
  transform:translate(-50%,0);
  background:var(--paper);
  z-index:2;
  padding:5%;
  transition:transform 1.15s var(--ease), opacity .5s var(--ease-soft);
}
.mini__frame{
  height:100%;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9em;
  padding:8% 6%;
  text-align:center;
}
.mini__names{
  margin:0;
  font-family:"Pinyon Script",cursive;
  font-size:clamp(19px,5.6vw,26px);
  line-height:1.25;
  font-weight:400;
  white-space:nowrap;
}
.mini__date{
  margin:0;
  font-size:clamp(8px,2.2vw,10px);
  letter-spacing:.18em;
  line-height:2;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.mini__mono{
  margin:.2em 0 0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(17px,4.6vw,22px);
  letter-spacing:.16em;
  text-indent:.16em;
}
.mini__rule{
  display:block;
  width:34%;
  height:1px;
  background:var(--line);
}

.envelope.is-out .mini{ transform:translate(-50%,-58%); }

/* açılış son evresi: kart büyüyüp beyaza karışır */
.envelope.is-bloom{
  transform:scale(1.9);
  opacity:0;
  transition:transform 1.1s var(--ease), opacity .85s var(--ease-soft) .18s;
}

/* ipucu / teşekkür yazıları — ikisi de aynı hücreye yerleşir */
.cover__hint,.cover__thanks{
  grid-area:2/1;
  align-self:start;
  margin:clamp(34px,7vw,48px) 0 0;
  text-align:center;
  font-size:13px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:2;
  transition:opacity .6s var(--ease-soft);
}
.cover__hint span,.cover__thanks span{ display:block; }
.cover__hint em,.cover__thanks em{
  display:block;
  font-style:normal;
  font-size:11px;
  letter-spacing:.16em;
}
.cover__hint.is-gone{ opacity:0; }

.cover__thanks{ opacity:0; }
.cover__thanks.is-shown{ opacity:1; transition-delay:.35s; }

/* =========================================================
   2. DAVETİYE
   ========================================================= */

.page{
  opacity:0;
  visibility:hidden;
  padding:clamp(28px,6vw,64px) clamp(16px,5vw,32px) 0;
  transition:opacity .9s var(--ease-soft);
}
.page.is-shown{ opacity:1; visibility:visible; }
.page.is-closing{
  opacity:0;
  transform:translateY(-10px) scale(.985);
  transition:opacity .7s var(--ease-soft), transform .8s var(--ease);
}

/* giriş animasyonu */
.r{ opacity:0; transform:translateY(14px); }
.page.is-shown .r{
  animation:rise .95s var(--ease) both;
  animation-delay:var(--d,0s);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.card{
  max-width:520px;
  margin:0 auto;
  border:1px solid var(--line);
  padding:clamp(9px,2.4vw,14px);
}
.card__frame{
  border:1px solid var(--line);
  padding:clamp(30px,7vw,54px) clamp(20px,6vw,44px);
  text-align:center;
}

.mono{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(34px,9vw,50px);
  line-height:1;
  letter-spacing:.14em;
  text-indent:.14em;
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:clamp(14px,3vw,20px) auto;
  width:min(64%,240px);
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.divider .daisy{ width:21px; height:21px; flex:none; }
.divider--lg{ width:min(74%,270px); margin:clamp(24px,5.5vw,36px) auto; }
.divider--lg .daisy{ width:30px; height:30px; }

.names{
  margin:0;
  font-family:"Pinyon Script",cursive;
  font-weight:400;
  font-size:clamp(26px,8.2vw,50px);
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
}

.families{
  margin:clamp(16px,4vw,22px) 0 0;
  font-size:clamp(11px,2.9vw,13px);
  font-weight:400;
  letter-spacing:.22em;
  line-height:2;
  text-transform:uppercase;
}
.families + .families{ margin-top:clamp(10px,2.4vw,14px); }

.invite{
  margin:0;
  font-family:"Pinyon Script",cursive;
  font-size:clamp(24px,6.6vw,40px);
  line-height:1.45;
  font-weight:400;
  white-space:nowrap;
}
.invite:first-of-type{ margin-top:clamp(32px,8vw,50px); }

.details{
  margin:0;
  font-size:clamp(11px,2.9vw,13.5px);
  font-weight:400;
  letter-spacing:.2em;
  line-height:2.15;
  text-transform:uppercase;
}

.note{
  margin:clamp(20px,5vw,28px) 0 0;
  font-weight:400;
  font-size:clamp(10.5px,2.5vw,12px);
  letter-spacing:.06em;
  line-height:1.85;
  color:var(--ink);
}
.note a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(17,17,17,.55); }
.note--bold{
  margin-top:10px;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:400;
  color:var(--ink);
}

/* =========================================================
   3. RSVP
   ========================================================= */

.rsvp{
  max-width:520px;
  margin:clamp(46px,10vw,84px) auto 0;
  text-align:center;
  position:relative;
}

.step{
  display:none;
  opacity:0;
  transform:translateY(12px);
}
.step.is-active{
  display:block;
  animation:rise .8s var(--ease) both;
}
.step.is-leaving{
  display:block;
  animation:fall .38s var(--ease-soft) both;
}
@keyframes fall{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-10px); }
}

.rsvp__title{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(20px,5.4vw,27px);
  letter-spacing:.03em;
}
.rsvp__sub{
  margin:8px 0 0;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.rsvp__choices{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:clamp(26px,6vw,36px);
}

.btn{
  appearance:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:inherit;
  font-weight:400;
  padding:15px 30px;
  min-width:172px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  transition:background .45s var(--ease-soft), color .45s var(--ease-soft), transform .35s var(--ease);
}
.btn span{
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.btn em{
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
@media (hover:hover){
  .btn:hover{ background:var(--ink); color:var(--paper); }
}
.btn:active{ transform:scale(.985); }
.btn--solid{ width:100%; margin-top:10px; justify-content:center; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* form */
.form{
  margin-top:clamp(26px,6vw,34px);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.field{ display:block; }
.field__label{
  display:block;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:9px;
}
.field__label i{ font-style:normal; letter-spacing:.12em; }

.field input,.field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(17,17,17,.5);
  background:transparent;
  padding:10px 2px;
  font-family:inherit;
  font-size:15.5px;
  font-weight:400;
  color:var(--ink);
  border-radius:0;
  resize:none;
  transition:border-color .35s var(--ease-soft);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(17,17,17,.45); }
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.field.has-error input,.field.has-error textarea{ border-bottom-color:#b00020; }

/* sayaç */
.counter{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid rgba(17,17,17,.5);
  width:max-content;
}
.counter__btn{
  appearance:none;
  background:transparent;
  border:0;
  width:44px;
  height:44px;
  font-size:17px;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:background .3s var(--ease-soft), color .3s var(--ease-soft);
}
@media (hover:hover){ .counter__btn:hover{ background:var(--ink); color:var(--paper); } }
.counter input{
  width:64px;
  text-align:center;
  border:0;
  border-left:1px solid rgba(17,17,17,.4);
  border-right:1px solid rgba(17,17,17,.4);
  background:transparent;
  height:44px;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  -moz-appearance:textfield;
}
.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.link-back{
  appearance:none;
  background:none;
  border:0;
  color:var(--ink-soft);
  font-family:inherit;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px;
  margin:2px auto 0;
  transition:color .3s var(--ease-soft);
}
.link-back:hover{ color:var(--ink); }

/* teşekkür */
.step--thanks{ padding:10px 0 4px; }
.thanks-title{
  margin:0;
  font-family:"Pinyon Script",cursive;
  font-weight:400;
  font-size:clamp(32px,9vw,46px);
  line-height:1.2;
}
.thanks-sub{
  margin:10px 0 0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.thanks-note{
  margin:18px 0 0;
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  line-height:1.9;
}

/* footer */
.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:clamp(56px,12vw,96px) 0 clamp(34px,8vw,54px);
  font-family:"Cormorant Garamond",serif;
  font-size:14px;
  letter-spacing:.2em;
  color:var(--ink-soft);
}
.foot__dot{
  width:3px; height:3px;
  background:currentColor;
  border-radius:50%;
  display:block;
}

/* yükleniyor durumu */
.is-sending{ position:relative; }
.is-sending span::after{
  content:"";
  display:inline-block;
  width:1em;
  text-align:left;
  animation:dots 1.2s steps(4,end) infinite;
}
@keyframes dots{ 0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."} }

.err{
  margin:14px 0 0;
  font-size:11px;
  letter-spacing:.12em;
  color:#b00020;
  text-transform:uppercase;
}

/* erişilebilirlik */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .r{ opacity:1; transform:none; }
}