*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#1c2416;
  color:#4a3a28;
  font-family:"Cormorant Garamond",Georgia,serif;
  display:grid;place-items:center;
  min-height:100dvh;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* Sahne: telefonda tam ekran, masaüstünde 9:19.5 kutu */
.stage{
  position:relative;
  width:100vw;height:100dvh;
  overflow:hidden;
  container-type:size;
  background:#efe2cb;
  isolation:isolate;
}
@media (min-aspect-ratio:10/16){
  .stage{height:100dvh;width:calc(100dvh * 9 / 19.5);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
}

/* ---------- Sahne (en arka) ---------- */
.scene{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% 42%,rgba(255,250,238,.9),rgba(255,250,238,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(#f1e5cf,#e9d9bd);
}
.fountain{
  position:absolute;left:50%;bottom:-1.5cqh;
  width:92cqw;height:auto;
  transform:translate3d(-50%,0,0);
  transform-origin:50% 100%;
  opacity:0;
  will-change:transform;
}
.fountain.ready{opacity:1}
/* fıskiyede akan su ve kelebekler (perdenin arkasında) */
.life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- Perde (WebGL) ---------- */
.curtain{position:absolute;inset:0;width:100%;height:100%;display:block}

/* perde bağı: boncuklu kordon */
.tie{position:absolute;top:calc(53cqh - 3cqw);width:7.5cqw;height:auto;overflow:visible;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(70,45,20,.35))}
.tie-l{left:0}
.tie-r{right:0;transform:scaleX(-1)}
.cord-b{fill:none;stroke:#8e7147;stroke-width:5.2;stroke-linecap:round;stroke-dasharray:0 5.4}
.cord{fill:none;stroke:#f7ead0;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:0 5.4}

/* ---------- Ön plan gülleri ---------- */
.roses{position:absolute;inset:0;pointer-events:none}
.rose{
  position:absolute;bottom:-3cqh;width:44cqw;height:auto;
  opacity:0;will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(60,40,20,.25));
}
.rose.ready{opacity:1}
.rose-l{left:-9cqw;transform-origin:50% 100%}
.rose-r{right:-9cqw;transform-origin:50% 100%}

/* ---------- Yazılar ---------- */
.card{
  position:absolute;left:0;right:0;top:19cqh;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 16cqw;
  color:#4d3b27;
}
.t{
  display:block;opacity:0;
  transform:translate3d(0,10px,0);
  filter:blur(5px);
  transition:opacity .9s cubic-bezier(.22,.8,.26,1),transform 1.1s cubic-bezier(.22,.8,.26,1),filter .9s cubic-bezier(.22,.8,.26,1);
}
.card.in .t{opacity:1;transform:none;filter:none}
.card.reset .t{transition:none}
.heart{color:#5a4330;margin-bottom:2.2cqh}
.heart svg{width:3.6cqw;height:auto}
.kicker{font-style:italic;font-weight:500;font-size:4.6cqw;letter-spacing:.04em;color:#6a5238}
.names{font-weight:400;margin-top:2.4cqh;display:flex;flex-direction:column;align-items:center;line-height:.95}
.name{font-family:"Pinyon Script",cursive;font-size:13.5cqw;color:#3f2f1e}
.amp{font-family:"Pinyon Script",cursive;font-size:10cqw;line-height:1;color:#7a5c34;margin:.2cqh 0}
.when{margin-top:3cqh;font-size:4.1cqw;font-weight:600;letter-spacing:.03em;color:#4d3b27}
.where{margin-top:.9cqh;font-size:4.1cqw;font-style:italic;font-weight:500;color:#6a5238}

/* ---------- Altın zerreler ---------- */
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- Yarıktan sızan ışık ---------- */
.gap-light{
  position:absolute;top:0;bottom:0;left:50%;width:60cqw;margin-left:-30cqw;
  pointer-events:none;opacity:0;
  background:
    linear-gradient(90deg,rgba(255,214,150,0) 0%,rgba(255,222,168,.55) 38%,rgba(255,247,226,1) 50%,rgba(255,222,168,.55) 62%,rgba(255,214,150,0) 100%);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  transform:scaleX(.02);
}

/* ---------- Kapılar: menteşeden dönen kalın kanatlar ---------- */
.doors{
  position:absolute;inset:0;z-index:4;
  -webkit-perspective:470px;perspective:470px;
  -webkit-perspective-origin:50% 45%;perspective-origin:50% 45%;
}
.doors.gone{visibility:hidden}
.doorgl{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.doors.gl .doorgl{display:block}
.doors.gl .door{display:none}
/* WebKit'te güvenilir 3B: preserve-3d zinciri YOK. Her kanat kutusu yalnız perspektif verir;
   ön yüz, kalınlık ve arka yüz ayrı ayrı, JS'de hesaplanan tam dönüşümle çizilir,
   görünürlükleri de açıya göre JS'de açılıp kapanır. */
.door{
  position:absolute;top:0;bottom:0;width:50%;
  -webkit-perspective:470px;perspective:470px;
}
.door-l{left:0;-webkit-perspective-origin:100% 45%;perspective-origin:100% 45%}
.door-r{right:0;-webkit-perspective-origin:0 45%;perspective-origin:0 45%}
.clip,.edge,.back{-webkit-transform-origin:0 0;transform-origin:0 0;will-change:transform}
.clip{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.face,.relief{
  position:absolute;top:0;bottom:0;width:200%;
  background:#7d8a60 url(img/kapi.webp?v=abf65d9b) center/cover no-repeat;
}
.door-l .face,.door-l .relief{left:0}
.door-r .face,.door-r .relief{right:0}
/* kabartma derinliği: aynı dokunun ters çevrilmiş kopyası ışık yönünde kaydırılır (ek indirme yok) */
.relief{
  filter:grayscale(1) invert(1) contrast(1.4);
  mix-blend-mode:soft-light;opacity:.42;
  will-change:transform;
}
/* dönen yüzeyde kayan ışık yansıması */
.sheen{
  position:absolute;top:0;bottom:0;left:-50%;width:200%;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(255,244,214,0) 30%,rgba(255,244,214,.34) 47%,rgba(255,250,232,.5) 50%,rgba(255,244,214,.34) 53%,rgba(255,244,214,0) 70%);
  mix-blend-mode:soft-light;
}
/* kanat döndükçe yüzey ışıktan uzaklaşır: koyulaşma (madalyon dahil) */
.shade{position:absolute;inset:0;z-index:2;opacity:0;will-change:opacity}
.door-l .shade{background:linear-gradient(90deg,rgba(14,20,8,.72),rgba(14,20,8,.92))}
.door-r .shade{background:linear-gradient(270deg,rgba(14,20,8,.72),rgba(14,20,8,.92))}
/* kapıların ortasında boncuklu dikiş */
.seam{
  position:absolute;top:0;bottom:0;width:6px;
  background:
    radial-gradient(circle at 50% 50%,#fbf1d8 0,#e3cf9f 1.3px,#9c8458 2.2px,rgba(80,60,30,0) 2.8px) 0 0/6px 7px repeat-y,
    linear-gradient(90deg,rgba(40,50,25,.35),rgba(230,214,170,.25));
}
.door-l .seam{right:0;box-shadow:inset -1.5px 0 0 rgba(12,16,6,.75),inset -3px 0 3px rgba(12,16,6,.35)}
.door-r .seam{left:0;transform:scaleX(-1);box-shadow:inset -1.5px 0 0 rgba(12,16,6,.75),inset -3px 0 3px rgba(12,16,6,.35)}
/* kanat kalınlığı (40 px): koyu malzeme kesiti, iki kenarda pah ışığı, ortada boncuklu şerit */
.edge{
  position:absolute;top:0;bottom:0;width:40px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    radial-gradient(circle at 50% 50%,#fff7e3 0,#ecdaae 1.6px,#9c8453 2.8px,rgba(60,45,20,0) 3.4px) 50% 0/8px 8px repeat-y,
    linear-gradient(90deg,rgba(0,0,0,0) 36%,rgba(120,100,62,.9) 37%,rgba(222,204,158,.85) 40%,rgba(222,204,158,.85) 60%,rgba(120,100,62,.9) 63%,rgba(0,0,0,0) 64%),
    linear-gradient(90deg,rgba(214,226,170,.55) 0,rgba(214,226,170,0) 3px,rgba(0,0,0,0) calc(100% - 3px),rgba(10,14,5,.6) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,rgba(0,0,0,.06) 2px 5px),
    linear-gradient(90deg,#4a5732 0%,#39452a 22%,#2e3920 78%,#222b17 100%);
}
.door-l .edge{left:100%}
.door-r .edge{right:100%}
/* kanadın arka yüzü: krem kâğıt astar */
.back{
  position:absolute;inset:0;visibility:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(90,70,40,.18),rgba(90,70,40,0) 12%,rgba(90,70,40,0) 88%,rgba(90,70,40,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% 45%,#f6ecd8,#e6d6b8);
  box-shadow:inset 0 0 0 10px rgba(236,224,198,.9),inset 0 0 0 11px rgba(150,120,80,.35);
}
/* yarıktaki sıcak ışığın kalınlık yüzüne vurması */
.edge-lit{
  position:absolute;inset:0;opacity:0;will-change:opacity;
  background:linear-gradient(180deg,rgba(255,226,170,.15),rgba(255,236,196,.55) 45%,rgba(255,226,170,.2));
  mix-blend-mode:screen;
}
/* kanadın arkadaki perdeye düşen gölgesi ve zemine temas gölgesi (düz katmanlar, kanatların arkasında) */
.dshadow{
  position:absolute;top:0;bottom:0;width:calc(50% + 90px);opacity:0;will-change:transform,opacity;
}
.dshadow-l{left:0;transform-origin:0 50%;background:linear-gradient(90deg,rgba(35,24,10,.55) 0%,rgba(35,24,10,.42) calc(100% - 90px),rgba(35,24,10,0) 100%)}
.dshadow-r{right:0;transform-origin:100% 50%;background:linear-gradient(270deg,rgba(35,24,10,.55) 0%,rgba(35,24,10,.42) calc(100% - 90px),rgba(35,24,10,0) 100%)}
.contact{
  position:absolute;bottom:-18px;height:60px;width:calc(50% + 40px);opacity:0;will-change:transform,opacity;
  background:radial-gradient(60% 50% at 50% 50%,rgba(25,16,6,.7),rgba(25,16,6,0) 70%);
}
.contact-l{left:-20px;transform-origin:20px 50%}
.contact-r{right:-20px;transform-origin:calc(100% - 20px) 50%}

/* Madalyon: iki kanada bölünmüş tek dantel */
.medal{
  position:absolute;z-index:1;top:46cqh;width:52cqw;aspect-ratio:1;
  margin-top:-26cqw;
  /* madalyonun kendi kalınlığı (üst üste sert gölgeler) + yumuşak düşen gölge */
  filter:drop-shadow(0 1.2px 0 #c2b08c) drop-shadow(0 1.2px 0 #a8956f) drop-shadow(0 1.2px 0 #857252) drop-shadow(0 8px 10px rgba(20,28,10,.5));
}
.door-l .medal{left:calc(100% - 26cqw)}
.door-r .medal{left:-26cqw}
.medal img{width:100%;height:100%;display:block}
.medal-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#6b5433;text-align:center;
}
.mono{font-family:"Pinyon Script",cursive;font-size:9cqw;line-height:1;color:#5b4428}
.hint{margin-top:1.4cqw;font-size:2.5cqw;line-height:1.35;font-weight:600;letter-spacing:.14em;color:#7c6440}
.pulse .medal{animation:breathe 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes breathe{50%{transform:scale(1.018)}}

/* Kapı açılırken ekranı dolduran sıcak ışık */
.bloom{
  position:absolute;inset:-20%;
  pointer-events:none;opacity:0;z-index:5;
  background:radial-gradient(38% 50% at 50% 46%,rgba(255,248,230,1) 0%,rgba(255,228,176,.75) 30%,rgba(255,206,140,.28) 58%,rgba(255,200,130,0) 78%);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

/* ---------- Düğmeler ---------- */
.open-btn{
  position:absolute;inset:0;z-index:8;
  background:transparent;border:0;cursor:pointer;
}
.open-btn:focus-visible{outline:2px solid #f6e7c1;outline-offset:-6px}
.replay{
  position:absolute;z-index:9;
  right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(90,67,40,.25);
  background:rgba(255,249,236,.82);color:#5a4330;
  font:600 13px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em;
  box-shadow:0 4px 14px rgba(70,50,25,.15);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;opacity:0;
  transition:opacity .5s ease,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease;
}
.replay.show{opacity:1}
.replay:focus-visible{outline:2px solid #5a4330;outline-offset:2px}
.replay:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .replay:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(70,50,25,.2)}
  .replay:hover:active{transform:translateY(-2px) scale(.97)}
}

@media (prefers-reduced-motion:reduce){
  .pulse .medal{animation:none}
  .t{transform:none;filter:none;transition:opacity .6s ease}
  .replay{transition:opacity .3s ease}
  .replay:hover,.replay:active{transform:none}
}