/* ===== Davetiye ortak iskeleti — premium animasyonlar ===== */
.inv-root{
  --c:#b08d57;          /* ana renk (kullanıcı seçer) */
  /* Yumuşak ton ve parıltı artık --c'den türetilir → tema rengi değişince hepsi uyumlu değişir */
  --c-soft:color-mix(in srgb, var(--c) 42%, #ffffff);
  --c-glow:color-mix(in srgb, var(--c) 35%, transparent);
  --bg:#fbf8f3; --ink:#34302a; --muted:#8c8478;
  --serif:'Playfair Display',serif; --script:'Dancing Script',cursive;
  --sans:'Inter',sans-serif; --cg:'Cormorant Garamond',serif; --gv:'Great Vibes',cursive;
  /* Motion tokenları (emil-design-eng) — güçlü, kasıtlı eğriler */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}
.inv-root *{box-sizing:border-box;margin:0;padding:0}
.inv-root{font-family:var(--sans);color:var(--ink);background:var(--bg);overflow-x:hidden}
.inv-root img{max-width:100%;display:block}
.inv-wrap{width:min(680px,100%);margin-inline:auto;background:#fff;box-shadow:0 0 90px -20px rgba(0,0,0,.25);min-height:100vh;position:relative}

/* ===== Açılış: ZARF AÇILMA animasyonu ===== */
.opener{position:fixed;inset:0;z-index:100;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--c) 70%,#000) 0%,var(--ink) 100%);color:#fff;display:grid;place-items:center;text-align:center;cursor:pointer;transition:opacity .9s ease,visibility .9s}
.opener.hide{opacity:0;visibility:hidden}
.envelope{position:relative;width:280px;height:188px;margin:0 auto 30px;perspective:900px}
.env-body{position:absolute;inset:0;background:linear-gradient(145deg,#fff,#f3ece0);border-radius:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);overflow:hidden}
.env-letter{position:absolute;left:8%;right:8%;top:18%;bottom:8%;background:#fffdf9;border-radius:4px;display:grid;place-items:center;color:var(--c);font-family:var(--gv);font-size:1.8rem;transform:translateY(0);transition:transform .9s ease .3s;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.env-flap{position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(160deg,#f7f0e4,#e9ddca);transform-origin:top;transform:rotateX(0deg);transition:transform .8s ease;z-index:4;clip-path:polygon(0 0,100% 0,50% 100%)}
.env-seal{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c-soft),var(--c));color:#fff;display:grid;place-items:center;font-size:1.3rem;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:opacity .4s}
.opener.opening .env-flap{transform:rotateX(180deg);z-index:1}
.opener.opening .env-seal{opacity:0}
/* Zarf tipleri — flap kapağı şekli */
.env-oval .env-flap{clip-path:ellipse(75% 100% at 50% 0)}
.env-royal .env-flap{clip-path:polygon(0 0,100% 0,100% 35%,75% 78%,50% 100%,25% 78%,0 35%)}
.env-wax .env-flap{clip-path:polygon(0 0,100% 0,50% 100%)}
.env-wax .env-seal{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 80%,#fff),color-mix(in srgb,var(--c) 60%,#600));box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.3);border:1px solid color-mix(in srgb,var(--c) 50%,#400)}
/* İpli Mühür / Düğüm — zarfı çapraz saran altın ip + üzerinde mum mührü (referans: mühür-düğüm) */
.env-cord{display:none}
.env-knot .env-cord{display:block;position:absolute;z-index:5;pointer-events:none;border-radius:2px;
  background-image:linear-gradient(var(--cg,90deg),#8a6a2a,#e9cf86 38%,#fff6dd 50%,#d9b65e 62%,#8a6a2a);
  box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.45)}
.env-knot .env-cord-v{top:-3%;bottom:-3%;left:50%;width:10px;margin-left:-5px;--cg:90deg}
.env-knot .env-cord-h{left:-3%;right:-3%;top:50%;height:10px;margin-top:-5px;--cg:0deg}
/* mühür ipin üstünde "düğüm" gibi otursun — ince altın halka */
.env-knot .env-seal{box-shadow:0 6px 18px -4px rgba(0,0,0,.6),inset 0 2px 5px rgba(255,255,255,.45),inset 0 -3px 6px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--c) 32%,#3a1d0e)}
/* açılışta ip çözülür (düğüm açılır) */
.opener.opening .env-knot .env-cord-v{opacity:0;transform:scaleY(.2);transition:opacity .5s ease .05s,transform .6s var(--ease-out)}
.opener.opening .env-knot .env-cord-h{opacity:0;transform:scaleX(.2);transition:opacity .5s ease .05s,transform .6s var(--ease-out)}
.opener.opening .env-letter{transform:translateY(-120%)}
.opener .ttl{font-family:var(--gv);font-size:2.8rem;margin-top:6px}
.opener .meta{margin-top:12px;letter-spacing:4px;text-transform:uppercase;font-size:.78rem;opacity:.8}
.opener .tap{margin-top:34px;font-size:.92rem;border:1px solid rgba(255,255,255,.55);padding:12px 30px;border-radius:50px;display:inline-flex;gap:8px;align-items:center;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.opener .float-heart{position:absolute;font-size:1.2rem;opacity:0;animation:floatUp 4s linear infinite}
@keyframes floatUp{0%{opacity:0;transform:translateY(20px) scale(.6)}20%{opacity:.7}100%{opacity:0;transform:translateY(-180px) scale(1.1)}}

/* ----- Videolu açılış (settings.intro_video) ----- */
.op-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.opener.op-has-video{background:#000}
.opener.op-has-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.55) 100%)}
.opener.op-has-video .inner{position:relative;z-index:2}
.opener.op-has-video .op-names{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.opener.op-has-video .op-curtain{z-index:1}

/* ----- Sinematik kapak açılışı (settings.opener_cover) — video yokken premium his ----- */
.op-bg-cover{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;
  transform:scale(1.12);animation:kenBurns 16s ease-in-out infinite alternate;will-change:transform}
.opener.op-has-cover{background:#1a1410}
.opener.op-has-cover::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,.28) 42%,rgba(20,16,12,.72) 100%)}
.opener.op-has-cover .inner{position:relative;z-index:2}
.opener.op-has-cover .op-names{text-shadow:0 2px 26px rgba(0,0,0,.7)}
.opener.op-has-cover .op-curtain{z-index:1}
@keyframes kenBurns{0%{transform:scale(1.12) translate(0,0)}100%{transform:scale(1.22) translate(-1.5%,-2%)}}
@media(prefers-reduced-motion:reduce){.op-bg-cover{animation:none;transform:scale(1.05)}}

/* ===== İçerik açılış animasyonu (zarf açıldıktan sonra body.entered) ===== */
/* Varsayılan: ilk bölümler hafifçe görünür. open_anim'e göre giriş efekti. */
.inv-root[data-open-anim="fade"] body.entered,
body.entered .inv-root[data-open-anim="fade"]{}
.inv-root[data-open-anim] .inv-hero{will-change:transform,opacity}
/* entered sınıfı body'ye eklenince hero giriş yapar */
body:not(.entered) .inv-root[data-open-anim="fade"] .inv-hero{opacity:0}
body.entered .inv-root[data-open-anim="fade"] .inv-hero{animation:oaFade 1.1s var(--ease-out) both}
@keyframes oaFade{from{opacity:0}to{opacity:1}}

body:not(.entered) .inv-root[data-open-anim="slide-up"] .inv-hero{opacity:0}
body.entered .inv-root[data-open-anim="slide-up"] .inv-hero{animation:oaSlideUp 1s var(--ease-out) both}
@keyframes oaSlideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}

body:not(.entered) .inv-root[data-open-anim="zoom"] .inv-hero{opacity:0}
body.entered .inv-root[data-open-anim="zoom"] .inv-hero{animation:oaZoom 1.1s var(--ease-out) both}
@keyframes oaZoom{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}

/* "none" -> animasyon yok, anında görünür */

/* Müzik butonu */
.music-btn{position:fixed;bottom:22px;right:22px;z-index:60;width:54px;height:54px;border-radius:50%;background:var(--c);color:#fff;border:none;cursor:pointer;font-size:1.3rem;box-shadow:0 8px 24px -6px var(--c);display:grid;place-items:center;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.music-btn:hover{transform:scale(1.1)}
.music-btn:active{transform:scale(.94)}
.music-btn.spin{animation:rot 4s linear infinite}
.music-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--c);opacity:0}
.music-btn.spin::after{animation:ripple 2s ease-out infinite}
@keyframes ripple{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
@keyframes rot{to{transform:rotate(360deg)}}

/* ----- Çalar görünümleri (settings.player_style) ----- */
.music-btn .mb-wave{display:none;align-items:flex-end;gap:3px;height:18px}
.music-btn .mb-wave i{width:3px;height:6px;background:#fff;border-radius:2px}
/* Plak: vinyl plak görünümü — çalarken döner (.spin) */
.music-btn[data-ps="plak"]{background:radial-gradient(circle at 50% 50%,#2b2b2b 0 16%,var(--c) 17% 23%,#1f1f1f 24% 100%);box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.music-btn[data-ps="plak"] .mb-ic{width:16px;height:16px;border-radius:50%;background:var(--c);color:#fff;font-size:.7rem;display:grid;place-items:center;box-shadow:0 0 0 3px #1f1f1f}
/* Elegant: açık zemin, ince çerçeve */
.music-btn[data-ps="elegant"]{background:rgba(255,255,255,.94);color:var(--c);border:1.5px solid var(--c);box-shadow:0 10px 26px -10px var(--c)}
/* Dalga: ikon yerine animasyonlu ekolayzer çubukları */
.music-btn[data-ps="dalga"] .mb-ic{display:none}
.music-btn[data-ps="dalga"] .mb-wave{display:inline-flex}
.music-btn[data-ps="dalga"].spin{animation:none}
.music-btn[data-ps="dalga"].spin::after{animation:none}
.music-btn[data-ps="dalga"].spin .mb-wave i{animation:eqbar .9s ease-in-out infinite}
.music-btn[data-ps="dalga"] .mb-wave i:nth-child(2){animation-delay:.15s}
.music-btn[data-ps="dalga"] .mb-wave i:nth-child(3){animation-delay:.3s}
.music-btn[data-ps="dalga"] .mb-wave i:nth-child(4){animation-delay:.45s}
@keyframes eqbar{0%,100%{height:5px}50%{height:16px}}

/* Mod değiştirici (Klasik / Stories) */
.mode-switch{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:58;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--c-soft);border-radius:50px;padding:4px;display:flex;gap:2px;box-shadow:0 6px 20px -8px rgba(0,0,0,.3)}
.mode-switch button{border:none;background:none;padding:7px 16px;border-radius:50px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;transition:color .2s var(--ease-out),background .2s var(--ease-out)}
.mode-switch button.active{background:var(--c);color:#fff}
.mode-switch button:active{transform:scale(.96)}

/* ===== Bölümler ===== */
.inv-sec{padding:78px 30px;text-align:center;position:relative}
.inv-sec .lbl{font-family:var(--script);font-size:1.9rem;color:var(--c);margin-bottom:6px}
.inv-sec h3{font-family:var(--serif);font-size:1.95rem;margin-bottom:18px}
/* "Bölüm başlıklarını gizle" — etiket (Bizden/Büyük Güne) + başlık (Hikayemiz/Geri Sayım) + ayraç gizlenir */
.inv-root.no-sec-titles .inv-sec>.lbl,
.inv-root.no-sec-titles .inv-sec>h3,
.inv-root.no-sec-titles .inv-sec>.divider{display:none!important}

/* Reveal varyantları — net property + güçlü ease-out (girişte responsive his) */
.rv{opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);will-change:opacity,transform}
.rv.up{transform:translateY(40px)}
.rv.left{transform:translateX(-50px)}
.rv.right{transform:translateX(50px)}
.rv.zoom{transform:scale(.92)}      /* hiçbir şey yoktan belirmez: 0 yerine .92 */
.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.22s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.34s}

/* ===== Sayfalar-arası geçiş maskeleme (Livana tarzı) =====
   Belirli demolarda (data-tpl) bölümler scroll'da alttan yukarı clip-path
   maskesiyle açılır — perde gibi içerik "ortaya çıkar". */
.inv-root[data-mask] .inv-sec{
  clip-path:inset(14% 0 0 0);opacity:0;transform:translateY(46px) scale(.985);
  transition:clip-path 1.1s var(--ease-out),opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  will-change:clip-path,opacity,transform}
.inv-root[data-mask] .inv-sec.in{clip-path:inset(0 0 0 0);opacity:1;transform:none}
/* mask demolarında .rv'nin kendi transform'u devre dışı — çakışmasın */
.inv-root[data-mask] .inv-sec.rv{transform:translateY(46px) scale(.985)}
.inv-root[data-mask] .inv-sec.rv.in{transform:none}

.divider{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--c),transparent);margin:18px auto;position:relative}
.divider::before{content:"❧";position:absolute;top:-13px;left:50%;transform:translateX(-50%);color:var(--c);background:var(--bg);padding:0 10px;font-size:1.1rem;animation:swing 4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(6deg)}}

/* ===== Hero (parallax) ===== */
.inv-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 30px;position:relative;background-size:cover;background-position:center;overflow:hidden}
.inv-hero .hero-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;will-change:transform;z-index:0}
/* Video kapak hero zemini: tam ekran cover (uyumsuz video kırpılarak sığar) + üstünde tint */
.inv-hero video.hero-bg-vid{inset:0;width:100%;height:100%;object-fit:cover}
.inv-hero .hero-bg-tint{position:absolute;inset:0;z-index:1}
.inv-hero>*{position:relative;z-index:2}
.inv-hero .names{font-family:var(--script);font-size:clamp(3rem,11vw,5.2rem);color:var(--c);line-height:1.05;animation:fadeDown 1.4s ease both}
.inv-hero .amp{display:block;font-size:.5em;margin:8px 0;color:var(--ink)}
.inv-hero .sub{letter-spacing:5px;text-transform:uppercase;font-size:.85rem;color:var(--muted);margin-top:14px;animation:fadeUp 1.4s ease .2s both}
.inv-hero .date-badge{margin-top:26px;border:1px solid var(--c);padding:12px 28px;border-radius:6px;font-family:var(--cg);font-size:1.2rem;animation:fadeUp 1.4s ease .4s both}
.inv-hero .scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--c);font-size:1.4rem;animation:bob 1.8s ease-in-out infinite;z-index:3}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Geri sayım */
.cd-grid{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.cd-ended{animation:oaZoom .8s var(--ease-out) both}
.cd-celebrate{font-size:3rem;animation:breathe 2s ease-in-out infinite}
.cd-end-text{font-family:var(--serif);font-size:1.4rem;color:var(--c);margin-top:8px;max-width:420px;margin-left:auto;margin-right:auto}
.cd-box{background:#fff;border:1px solid var(--c-soft);border-radius:16px;padding:18px 14px;min-width:80px;box-shadow:0 10px 30px -18px var(--c-glow);position:relative;overflow:hidden}
.cd-box::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 3.5s ease-in-out infinite}
@keyframes shimmer{0%{left:-100%}50%,100%{left:100%}}
.cd-box .num{font-family:var(--serif);font-size:2.3rem;color:var(--c);line-height:1;position:relative}
.cd-box .u{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:6px}

/* Hikaye */
.story-text{font-family:var(--cg);font-size:1.32rem;line-height:1.85;color:var(--ink);max-width:520px;margin:0 auto;white-space:pre-line}

/* Zaman çizelgesi (itinerary) */
.timeline{max-width:440px;margin:10px auto 0;text-align:left}
.tl-item{display:flex;gap:18px;padding:14px 0;position:relative}
.tl-item::before{content:"";position:absolute;left:23px;top:38px;bottom:-14px;width:2px;background:var(--c-soft)}
.tl-item:last-child::before{display:none}
.tl-dot{width:48px;height:48px;min-width:48px;border-radius:50%;background:var(--bg);border:2px solid var(--c);display:grid;place-items:center;font-size:1.3rem;z-index:1}
.tl-body b{font-family:var(--serif);font-size:1.1rem;color:var(--c);display:block}
.tl-body span{color:var(--muted);font-size:.9rem}

/* Detay/mekan */
.detail-card{background:#fff;border-radius:18px;padding:28px;max-width:480px;margin:14px auto 0;box-shadow:0 16px 40px -24px var(--c-glow);border:1px solid color-mix(in srgb,var(--c-soft) 50%,transparent)}
.detail-card .big{font-family:var(--serif);font-size:1.5rem;color:var(--c)}
.detail-card .addr{color:var(--muted);margin:8px 0 16px}
.map-btn{display:inline-flex;gap:8px;align-items:center;background:var(--c);color:#fff;padding:11px 24px;border-radius:50px;font-weight:600;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.map-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--c)}
.map-btn:active{transform:translateY(0) scale(.98)}

/* Kıyafet kodu */
.dress{display:inline-flex;gap:14px;align-items:center;background:#fff;border:1px dashed var(--c);border-radius:14px;padding:14px 24px;margin-top:8px}
.dress .dot{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--c-soft)}

/* Galeri */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:600px;margin:0 auto}
.gal-grid img{aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.gal-grid img:hover{transform:scale(1.05) rotate(-1deg);box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
/* Galeri videoları: her zaman 9:16 dikey çerçeve; uyumsuz video object-fit:cover ile sığar */
.gal-grid .gal-vid{aspect-ratio:9/16;object-fit:cover;width:100%;border-radius:10px;background:#000;
  grid-row:span 2;box-shadow:0 8px 20px -14px rgba(0,0,0,.5);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.gal-grid .gal-vid:hover{transform:scale(1.04);box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:none;place-items:center;padding:20px;cursor:zoom-out;backdrop-filter:blur(4px)}
.lightbox.show{display:grid;animation:fadeIn .3s}
.lightbox img{max-height:90vh;max-width:90vw;border-radius:10px;animation:zoomIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* Form (LCV + mesaj) */
.inv-form{max-width:420px;margin:0 auto;text-align:left}
.inv-form .f{margin-bottom:14px}
.inv-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px}
.inv-form input,.inv-form select,.inv-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--c-soft);border-radius:11px;font-family:inherit;background:#fff;transition:.2s}
.inv-form input:focus,.inv-form textarea:focus,.inv-form select:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c-glow)}
.inv-form button{width:100%;background:var(--c);color:#fff;border:none;padding:15px;border-radius:50px;font-weight:600;font-size:1rem;cursor:pointer;margin-top:6px;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.inv-form button:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px var(--c)}
.inv-form button:active{transform:translateY(0) scale(.98)}
.form-ok{color:#2f7a32;text-align:center;margin-top:12px;font-weight:600}
.form-err{color:#a23a3a;text-align:center;margin-top:12px}
.rsvp-done{text-align:center;padding:30px;animation:zoomIn .5s}
.rsvp-done .big-check{font-size:3rem;color:var(--c);animation:pop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.radio-row{display:flex;gap:10px;margin-bottom:14px}
.radio-row label{flex:1;border:1.5px solid var(--c-soft);border-radius:11px;padding:12px;text-align:center;cursor:pointer;font-size:.88rem;transition:.2s}
.radio-row input{display:none}
.radio-row label:has(input:checked){background:var(--c);color:#fff;border-color:var(--c);transform:scale(1.03)}

/* Mesaj duvarı */
.msg-wall{max-width:480px;margin:24px auto 0;text-align:left}
.msg-item{background:#fff;border-radius:14px;padding:14px 18px;margin-bottom:10px;border-left:3px solid var(--c);box-shadow:0 8px 22px -16px rgba(0,0,0,.4);animation:slideIn .5s}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.msg-item b{color:var(--c)}
.msg-item p{color:var(--muted);margin-top:4px}

/* QR davetiye kartı */
.qr-card{background:#fff;border-radius:16px;padding:24px;max-width:300px;margin:14px auto 0;box-shadow:0 16px 40px -24px var(--c-glow)}
.qr-card img{width:180px;height:180px;margin:0 auto}
.qr-card p{color:var(--muted);font-size:.85rem;margin-top:12px}

/* Footer */
.inv-foot{text-align:center;padding:50px 20px 104px;color:var(--muted);font-size:.85rem;background:#fff;position:relative}
.inv-foot .heart{font-family:var(--gv);font-size:2rem;color:var(--c)}
.inv-sign{margin-top:22px;text-align:center;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.66}
.inv-sign::before,.inv-sign::after{content:"·";color:var(--c);opacity:.6;margin:0 .55em}

/* ===== STORIES MODU ===== */
.stories{position:fixed;inset:0;z-index:80;background:#000;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility .4s}
.stories.active{opacity:1;visibility:visible;transform:scale(1)}
.story-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:50px 32px;opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform .6s ease;pointer-events:none;background-size:cover;background-position:center;color:#fff}
.story-slide.show{opacity:1;transform:scale(1);pointer-events:auto}
.story-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.65));z-index:0}
.story-slide>*{position:relative;z-index:1}
.story-bars{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:5px;z-index:10}
.story-bar{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.story-bar i{display:block;height:100%;width:0;background:#fff}
.story-bar.done i{width:100%}
.story-bar.active i{animation:fill 5s linear forwards}
@keyframes fill{to{width:100%}}
.story-nav{position:absolute;inset:0;display:flex;z-index:5}
.story-nav span{flex:1;cursor:pointer}
.story-close{position:absolute;top:32px;right:20px;color:#fff;font-size:1.6rem;z-index:11;cursor:pointer;background:rgba(0,0,0,.3);width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.story-slide .s-script{font-family:var(--gv);font-size:clamp(2.6rem,9vw,4rem);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.story-slide .s-big{font-family:var(--serif);font-size:2rem;margin-bottom:10px}
.story-slide .s-cd{display:flex;gap:14px;margin-top:18px}
.story-slide .s-cd div{background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border-radius:12px;padding:14px;min-width:64px}
.story-slide .s-cd b{font-size:1.6rem;display:block;font-family:var(--serif)}
.story-slide .s-cd span{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;opacity:.8}
.story-slide .s-btn{margin-top:24px;background:#fff;color:#222;padding:12px 28px;border-radius:50px;font-weight:600;border:none;cursor:pointer}

/* ===== MODERN TAKVİM ===== */
.cal-wrap{max-width:340px;margin:0 auto 26px;background:#fff;border-radius:16px;padding:26px 20px 22px;box-shadow:0 18px 44px -26px var(--c-glow);border:1px solid color-mix(in srgb,var(--c-soft) 45%,transparent);position:relative}
.cal-spiral{position:absolute;top:-9px;left:0;right:0;display:flex;justify-content:space-around;padding:0 26px}
.cal-spiral span{width:10px;height:18px;border-radius:6px;background:linear-gradient(180deg,#cfc3ad,#9a8f78);box-shadow:inset 0 -2px 3px rgba(0,0,0,.25)}
.cal-head{font-family:var(--serif);font-size:1.15rem;color:var(--c);text-align:center;letter-spacing:2px;margin-bottom:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:.66rem;font-weight:700;color:var(--muted);text-align:center;padding-bottom:6px;letter-spacing:.5px}
.cal-day{aspect-ratio:1;display:grid;place-items:center;font-size:.82rem;color:var(--ink);border-radius:9px;position:relative}
.cal-empty{visibility:hidden}
.cal-event{color:#fff;font-weight:700;position:relative;z-index:1}
.cal-event .cal-heart{position:absolute;inset:0;display:grid;place-items:center;font-size:2.1rem;color:var(--c);z-index:-1;animation:beat 1.6s ease-in-out infinite;font-style:normal}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.event-card{max-width:360px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px -26px var(--c-glow);border:1px solid color-mix(in srgb,var(--c-soft) 45%,transparent)}
.event-card .ev-date{background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 65%,#fff));color:#fff;padding:22px;text-align:center}
.ev-date .ev-day{font-family:var(--serif);font-size:3.2rem;line-height:1;display:block}
.ev-date .ev-mon{display:block;letter-spacing:3px;font-size:.82rem;margin-top:4px;opacity:.95}
.ev-date .ev-wd{display:block;font-size:.74rem;letter-spacing:1px;margin-top:8px;opacity:.85}
.event-card .ev-venue{padding:18px 22px 6px;text-align:center}
.ev-venue .ev-vn{font-family:var(--serif);font-size:1.15rem;color:var(--c)}
.ev-venue .ev-addr{color:var(--muted);font-size:.88rem;margin-top:4px}
.event-card .ev-actions{display:flex;gap:10px;padding:18px 22px 22px;flex-wrap:wrap}
.ev-btn{flex:1;min-width:130px;text-align:center;padding:12px;border-radius:50px;font-weight:600;font-size:.9rem;border:1.5px solid var(--c);color:var(--c);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .18s var(--ease-out)}
.ev-btn.primary{background:var(--c);color:#fff}
.ev-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--c)}
.ev-btn:active{transform:translateY(0) scale(.98)}

/* ===== ÇOKLU ETKİNLİK KARTLARI ===== */
.events-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;max-width:760px;margin:0 auto}
.ev-multi-card{flex:1 1 280px;max-width:340px;background:#fff;border-radius:18px;padding:26px 22px;text-align:center;box-shadow:0 18px 44px -28px var(--c-glow);border:1px solid color-mix(in srgb,var(--c-soft) 45%,transparent);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.ev-multi-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px var(--c-glow)}
.ev-multi-ico{font-size:2rem;color:var(--c);line-height:1}
.ev-multi-label{font-family:var(--serif);font-size:1.4rem;margin-top:8px;color:var(--ink)}
.ev-multi-date{margin-top:10px;font-size:.95rem;color:var(--muted)}
.ev-multi-time{font-size:1.6rem;font-weight:600;color:var(--c);margin-top:2px}
.ev-multi-venue{margin-top:12px;font-weight:600;font-size:.95rem}
.ev-multi-addr{font-size:.85rem;color:var(--muted);margin-top:2px}
.ev-multi-acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ev-multi-acts .ev-btn{min-width:0;padding:10px 8px;font-size:.82rem}

/* ===== KARŞILAMA MESAJI ===== */
.welcome-card{max-width:540px;margin:0 auto;text-align:center}
.welcome-greet{display:block;font-family:var(--script);font-size:1.8rem;color:var(--c);margin-bottom:6px}
.welcome-title{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin-bottom:10px}
.welcome-text{font-size:1.08rem;line-height:1.7;color:var(--muted)}

/* ===== DAVETİYE SÖZÜ / ALINTI ===== */
.quote-block{max-width:560px;margin:0 auto;position:relative;padding:10px 20px}
.quote-mark{font-size:3.4rem;color:var(--c);opacity:.5;line-height:1;display:block}
.quote-text{font-family:var(--serif);font-size:1.5rem;font-style:italic;line-height:1.55;color:var(--ink);margin-top:-6px}
.quote-author{margin-top:16px;font-family:var(--script);font-size:1.5rem;color:var(--c)}

/* ===== TARİHLİ ANILAR (kilometre taşları) ===== */
.ms-timeline{max-width:520px;margin:10px auto 0;text-align:left;position:relative}
.ms-timeline::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--c-soft),transparent)}
.ms-item{display:flex;gap:18px;padding:14px 0;position:relative}
.ms-dot{flex:0 0 48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--c-soft);display:grid;place-items:center;font-size:1.2rem;z-index:1;box-shadow:0 6px 16px -8px var(--c-glow)}
.ms-body b{font-family:var(--serif);font-size:1.18rem;color:var(--ink)}
.ms-date{display:block;font-size:.82rem;color:var(--c);font-weight:600;margin:2px 0}
.ms-body p{font-size:.92rem;color:var(--muted);margin-top:3px;line-height:1.5}

/* ===== HAVA DURUMU KARTI ===== */
.weather-card{max-width:300px;margin:0 auto;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,#fff),#fff);border-radius:22px;padding:26px 24px;text-align:center;box-shadow:0 18px 44px -26px var(--c-glow);border:1px solid color-mix(in srgb,var(--c-soft) 45%,transparent)}
.wx-city{font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:.82rem;color:var(--muted)}
.wx-main{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.wx-icon{font-size:2.8rem;line-height:1}
.wx-temp{font-family:var(--serif);font-size:3rem;color:var(--ink);line-height:1}
.wx-desc{margin-top:6px;font-size:1rem;color:var(--c);font-weight:500}
.wx-range{margin-top:8px;font-size:.92rem;color:var(--muted)}
.wx-note{margin-top:12px;font-size:.78rem;color:var(--muted);opacity:.8}

/* ===== ANI DEFTERİ / HATIRA KÖŞESİ ===== */
.mem-grid{column-count:2;column-gap:12px;max-width:560px;margin:26px auto 0}
.mem-card{break-inside:avoid;margin-bottom:12px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px -18px rgba(0,0,0,.45);border:1px solid color-mix(in srgb,var(--c-soft) 40%,transparent);animation:memIn .5s var(--ease-out)}
@keyframes memIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.mem-card img{width:100%;display:block;cursor:zoom-in;transition:transform .4s var(--ease-out)}
.mem-card:hover img{transform:scale(1.04)}
.mem-card figcaption{padding:12px 14px}
.mem-card figcaption p{font-family:var(--cg);font-size:1.05rem;color:var(--ink);line-height:1.5;margin-bottom:6px}
.mem-card figcaption b{color:var(--c);font-size:.85rem;font-weight:600}

/* ===== HEDİYE CÜZDANI / IBAN ===== */
.gift-card{max-width:380px;margin:0 auto;background:linear-gradient(135deg,#2a2620,#43392b);color:#f3ece0;border-radius:18px;padding:26px 24px;box-shadow:0 22px 50px -24px rgba(40,30,15,.7);position:relative;overflow:hidden}
.gift-card::before{content:"";position:absolute;top:-40%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,var(--c-glow),transparent 70%);pointer-events:none}
.gift-chip{width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#e6c98a,#b08d57);margin-bottom:22px;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
.gift-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.gift-row .gift-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;opacity:.7}
.gift-row .gift-val{font-weight:600;text-align:right}
.gift-iban{display:flex;align-items:center;gap:10px;margin-top:16px;background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.gift-iban code{flex:1;font-family:'Inter',monospace;font-size:.92rem;letter-spacing:.5px;word-break:break-all}
.iban-copy{background:var(--c);color:#fff;border:none;border-radius:50px;padding:9px 16px;font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease-out),background .18s var(--ease-out)}
.iban-copy:hover{background:var(--c-soft)}
.iban-copy:active{transform:scale(.95)}

@media(prefers-reduced-motion:reduce){
  .rv,.stagger>*{transition:none!important;opacity:1!important;transform:none!important}
  .inv-root[data-mask] .inv-sec{clip-path:none!important;opacity:1!important;transform:none!important}
  .stories{transition:opacity .2s!important;transform:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ===== Atmosfer / parçacık efektleri ===== */
.particles{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.pcl{position:absolute;top:-8%;will-change:transform;animation:pcl-fall linear infinite;color:var(--c);line-height:1}
.pcl-gold{color:#d9ba73;text-shadow:0 0 6px rgba(217,186,115,.6)}
@keyframes pcl-fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}
  10%{opacity:.8}
  90%{opacity:.7}
  100%{transform:translateY(110vh) translateX(40px) rotate(320deg);opacity:0}
}

/* ===== İletişim kartları ===== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:680px;margin:0 auto}
.contact-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:14px 16px;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.contact-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:700;font-size:1.1rem;font-family:var(--head,'Playfair Display',serif)}
.contact-info{flex:1;min-width:0;text-align:left}
.contact-info b{display:block;font-size:.98rem}
.contact-info span{font-size:.8rem;color:#888}
.contact-acts{display:flex;gap:7px}
.contact-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f3f0ea;text-decoration:none;font-size:1rem;transition:transform .18s var(--ease-out)}
.contact-btn.wa{background:#25d36622}
.contact-btn:active{transform:scale(.9)}

/* ===== Önemli notlar ===== */
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:720px;margin:0 auto}
.note-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:16px;text-align:left;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.note-ico{font-size:1.5rem;flex:none}
.note-body b{display:block;margin-bottom:4px}
.note-body p{font-size:.88rem;color:#777;line-height:1.5;margin:0}

/* ===== Anketler ===== */
.polls-wrap{display:flex;flex-direction:column;gap:18px;max-width:560px;margin:0 auto}
.poll-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;padding:20px;box-shadow:0 8px 26px rgba(0,0,0,.06)}
.poll-q{margin:0 0 14px;font-size:1.05rem;text-align:left}
.poll-opts{display:flex;flex-direction:column;gap:9px}
.poll-opt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f6f3ee;border:1.5px solid transparent;border-radius:12px;padding:12px 15px;cursor:pointer;font-size:.92rem;text-align:left;transition:border-color .2s var(--ease-out),transform .15s var(--ease-out)}
.poll-opt:active{transform:scale(.99)}
.poll-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--c) 18%,transparent);transition:width .6s var(--ease-out);z-index:0}
.poll-txt,.poll-pct{position:relative;z-index:1}
.poll-pct{font-weight:700;color:var(--c);opacity:0;transition:opacity .3s}
.poll-card.answered .poll-pct{opacity:1}
.poll-card.answered .poll-opt{cursor:default}
.poll-opt.voted{border-color:var(--c)}
.poll-total{margin-top:10px;font-size:.8rem;color:#999;text-align:right;min-height:1em}

/* ===== Şarkı talebi ===== */
.song-list{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:22px auto 0}
.song-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:11px 15px;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.song-note{font-size:1.1rem;flex:none}
.song-item b{display:block;font-size:.94rem}
.song-item span{font-size:.8rem;color:#999}
.song-item-yt{text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
.song-item-yt:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.1)}
.song-yt-thumb{position:relative;flex:none;width:74px;height:48px;border-radius:8px;background-size:cover;background-position:center;background-color:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden}
.song-yt-play{color:#fff;font-size:.8rem;background:rgba(0,0,0,.55);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:2px}

/* ===== Hatıra köşesi (foto duvarı) ===== */
.album-grid{column-count:3;column-gap:10px;max-width:760px;margin:24px auto 0}
.album-card{break-inside:avoid;margin:0 0 10px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.album-card img{width:100%;display:block;cursor:zoom-in}
.album-card figcaption{padding:8px 11px;font-size:.8rem;color:#777}
.album-card figcaption b{color:#555}
@media(max-width:640px){.album-grid{column-count:2}}

/* ===== Çoklu IBAN yığını ===== */
.gift-stack{display:flex;flex-direction:column;gap:16px;align-items:center}
.gift-owner{position:absolute;top:14px;right:18px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

/* =========================================================================
   FAZ 1 — ORTAK ALTYAPI: arka plan dokuları, güçlü zarf, flip-clock
   ========================================================================= */

/* ----- Arka plan doku kütüphanesi -----
   settings['bg_texture'] ile seçilir; .inv-root[data-bg="..."] üzerinden uygulanır.
   Tamamı saf CSS (gradient + SVG data-uri) — ek görsel dosyası yok, hızlı. */
.inv-root[data-bg]{background-attachment:fixed}

/* Suluboya pastel çiçek hissi — yumuşak renk lekeleri (romantik/bohem) */
.inv-root[data-bg="watercolor"]{
  background-color:#fbf6f3;
  background-image:
    radial-gradient(40% 32% at 12% 8%, color-mix(in srgb,var(--c) 22%,transparent), transparent 70%),
    radial-gradient(34% 28% at 88% 14%, rgba(180,205,170,.30), transparent 70%),
    radial-gradient(42% 34% at 78% 88%, color-mix(in srgb,var(--c) 16%,transparent), transparent 72%),
    radial-gradient(36% 30% at 18% 92%, rgba(200,180,210,.28), transparent 72%);
}
/* Kağıt dokusu — ince gren + sıcak ton (minimal/klasik) */
.inv-root[data-bg="paper"]{
  background-color:#f8f4ec;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.012) 0 1px, transparent 1px),
    linear-gradient(45deg, rgba(0,0,0,.012) 0 1px, transparent 1px),
    radial-gradient(60% 60% at 50% 0%, color-mix(in srgb,var(--c) 9%,transparent), transparent 70%);
  background-size:7px 7px,7px 7px,100% 100%;
}
/* Altın/mermer & koyu lüks (modern) */
.inv-root[data-bg="marble"]{
  background-color:#15121a;
  background-image:
    radial-gradient(50% 40% at 20% 12%, color-mix(in srgb,var(--c) 30%,transparent), transparent 72%),
    radial-gradient(46% 38% at 84% 84%, color-mix(in srgb,var(--c) 22%,transparent), transparent 74%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.025) 0 2px, transparent 2px 60px);
}
/* Geometrik & bohem — toprak tonu + ince dal/yaprak deseni */
.inv-root[data-bg="boho"]{
  background-color:#f6efe6;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--c) 14%,transparent) 0 2px, transparent 2.5px),
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb,var(--c) 8%,transparent), transparent 70%);
  background-size:26px 26px,100% 100%;
}
/* Düz romantik — ince köşegen renk geçişi (varsayılan zenginleştirme) */
.inv-root[data-bg="blush"]{
  background-color:#fbf7f4;
  background-image:linear-gradient(160deg, color-mix(in srgb,var(--c) 8%,#fff) 0%, #fbf7f4 45%, color-mix(in srgb,var(--c) 6%,#fff) 100%);
}
/* Noktalı — ince puantiye (zarif, ferah) */
.inv-root[data-bg="dots"]{
  background-color:#fbf8f3;
  background-image:radial-gradient(color-mix(in srgb,var(--c) 26%,transparent) 1.4px, transparent 1.6px);
  background-size:18px 18px;
}
/* İnce çizgi — dikey ipeksi şeritler */
.inv-root[data-bg="cizgi"]{
  background-color:#fbf8f3;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb,var(--c) 9%,transparent) 0 1px, transparent 1px 13px);
}
/* Geometrik — eşkenar dörtgen (baklava) örgü */
.inv-root[data-bg="geometrik"]{
  background-color:#f8f4ec;
  background-image:
    repeating-linear-gradient(60deg, color-mix(in srgb,var(--c) 10%,transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-60deg, color-mix(in srgb,var(--c) 10%,transparent) 0 1px, transparent 1px 22px);
}
/* Kafes — çapraz örgü (modern zarafet) */
.inv-root[data-bg="kafes"]{
  background-color:#f8f5ef;
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--c) 8%,transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--c) 8%,transparent) 0 1px, transparent 1px 16px);
}
/* Kalp deseni — minik kalpler (romantik) */
.inv-root[data-bg="kalp"]{
  background-color:#fdf7f5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 31s-9-5.4-9-11.3c0-3.4 2.7-5.2 5.1-5.2 2 0 3.3 1.2 3.9 2.4 .6-1.2 1.9-2.4 3.9-2.4 2.4 0 5.1 1.8 5.1 5.2C32 25.6 23 31 23 31z' fill='%23c08a72' fill-opacity='0.10'/%3E%3C/svg%3E");
  background-size:46px 46px;
}
/* Yıldız deseni — minik yıldızlar (gece teması) */
.inv-root[data-bg="yildiz"]{
  background-color:#f7f5ef;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14l1.8 5.2 5.2.2-4.1 3.3 1.5 5-4.4-2.9-4.4 2.9 1.5-5-4.1-3.3 5.2-.2z' fill='%23b08d57' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-size:48px 48px;
}
/* Botanik — zarif yaprak dalı (doğal/çiçekli) */
.inv-root[data-bg="botanik"]{
  background-color:#f7f6f0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%237d9b6e' stroke-opacity='0.22' stroke-width='1.1'%3E%3Cpath d='M14 56C26 44 30 30 28 14'/%3E%3Cpath d='M28 30c-5-2-9-1-13 3'/%3E%3Cpath d='M27 22c-4-2-8-1-11 2'/%3E%3Cpath d='M28 38c4-2 8-1 11 2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:70px 70px;
}
/* Damask — klasik saray motifi (lüks) */
.inv-root[data-bg="damask"]{
  background-color:#f7f3ea;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90' viewBox='0 0 60 90'%3E%3Cg fill='%23b08d57' fill-opacity='0.09'%3E%3Cpath d='M30 8c6 6 6 14 0 20-6-6-6-14 0-20zM30 62c6 6 6 14 0 20-6-6-6-14 0-20zM0 35c6 6 14 6 20 0-6-6-14-6-20 0zM40 35c6 6 14 6 20 0-6-6-14-6-20 0z'/%3E%3Ccircle cx='30' cy='35' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 90px;
}

/* Doku seçiliyken iç kart/section arkaplanları yarı saydam olur ki doku görünsün */
.inv-root[data-bg]:not([data-bg="none"]) .inv-sec{background:transparent}

/* ----- Yazı boyutu (settings.font_scale → data-fs) -----
   Öne çıkan tipografik öğeleri ortak --fs çarpanıyla ölçekler. Düzen bozulmaz,
   yalnızca yazı boyutu büyür/küçülür. Küçük | Normal | Büyük | Çok Büyük. */
.inv-root[data-fs]{--fs:1}
.inv-root[data-fs="sm"]{--fs:.9}
.inv-root[data-fs="lg"]{--fs:1.13}
.inv-root[data-fs="xl"]{--fs:1.28}
.inv-root[data-fs] .inv-hero .names{font-size:calc(clamp(3rem,11vw,5.2rem)*var(--fs))}
.inv-root[data-fs] .inv-hero .sub{font-size:calc(.85rem*var(--fs))}
.inv-root[data-fs] .inv-hero .date-badge{font-size:calc(1.2rem*var(--fs))}
.inv-root[data-fs] .inv-sec h3{font-size:calc(1.95rem*var(--fs))}
.inv-root[data-fs] .inv-sec .lbl{font-size:calc(1.9rem*var(--fs))}
.inv-root[data-fs] .story-text{font-size:calc(1.32rem*var(--fs))}
.inv-root[data-fs] .welcome-title{font-size:calc(1.7rem*var(--fs))}
.inv-root[data-fs] .welcome-text{font-size:calc(1.08rem*var(--fs))}
.inv-root[data-fs] .quote-text{font-size:calc(1.5rem*var(--fs))}
.inv-root[data-fs] .tl-body b,.inv-root[data-fs] .ms-body b{font-size:calc(1.14rem*var(--fs))}
.inv-root[data-fs] .detail-card .big{font-size:calc(1.5rem*var(--fs))}
.inv-root[data-fs] .welcome-greet{font-size:calc(1.8rem*var(--fs))}

/* ----- Güçlendirilmiş zarf (mum mührü + akıcı 3D açılış) ----- */
.envelope.env-lux{width:300px;height:200px}
.env-lux .env-body{background:linear-gradient(150deg,#fffdf8,#f0e7d6);box-shadow:0 40px 80px -28px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.5)}
.env-lux .env-flap{background:linear-gradient(160deg,#f7efe0,#e6d8bf);box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
/* Gerçekçi mum mührü — kabarık, ışık vuran, ince kenar */
.env-seal.seal-wax{
  width:58px;height:58px;font-family:'Great Vibes',var(--serif);font-size:1.15rem;
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb,var(--c) 86%,#fff) 0%, var(--c) 40%, color-mix(in srgb,var(--c) 62%,#400) 100%);
  box-shadow:0 6px 18px -4px rgba(0,0,0,.55), inset 0 2px 5px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.35);
  border:1px solid color-mix(in srgb,var(--c) 55%,#300);
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
/* Mührün dişli (mum damlası) kenarı */
.env-seal.seal-wax::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb,var(--c) 55%,#300) 60%, transparent 72%);
  clip-path:polygon(50% 0,62% 10%,78% 6%,82% 22%,97% 30%,90% 45%,100% 60%,86% 68%,88% 85%,72% 84%,62% 97%,50% 88%,38% 97%,28% 84%,12% 85%,14% 68%,0 60%,10% 45%,3% 30%,18% 22%,22% 6%,38% 10%);
}
/* İsimlerin zarf üstünde el yazısı görünmesi (kapaktaki gibi) */
.opener .env-names{position:absolute;top:-54px;left:0;right:0;font-family:var(--gv);font-size:2.1rem;color:var(--c);line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.opener .env-names .amp{display:block;font-size:.5em;opacity:.7;margin:-4px 0}
/* Açılışta zarf hafifçe büyüyüp kalkar */
.opener.opening .envelope{animation:envLift 1.1s var(--ease-out) both}
@keyframes envLift{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-6px) scale(1.03)}100%{transform:translateY(-22px) scale(1.06)}}

/* ===== Sinematik tam ekran açılış (perde + büyük zarf + mühür kırılması) ===== */
.opener-cine{overflow:hidden}
.opener-cine .inner{position:relative;z-index:3;transition:opacity .6s ease,transform .8s var(--ease-out)}
.opener-cine .envelope.env-lux{width:min(86vw,360px);height:min(57vw,240px);margin-bottom:38px}
.opener-cine .env-letter{font-size:2.4rem}
.opener-cine .env-seal.seal-wax{width:68px;height:68px;font-size:1.35rem}
.opener-cine .op-names{font-family:var(--gv);font-size:clamp(2.4rem,9vw,3.6rem);color:#fff;line-height:1.05;margin-bottom:26px;text-shadow:0 2px 14px rgba(0,0,0,.4);opacity:0;animation:opNamesIn 1.1s var(--ease-out) .25s both}
@keyframes opNamesIn{0%{opacity:0;transform:translateY(14px);letter-spacing:.12em}100%{opacity:1;transform:translateY(0);letter-spacing:0}}
.op-curtain{position:absolute;top:0;bottom:0;width:50.6%;z-index:5;pointer-events:none;
  background:
    /* kadife pile — dar ışık sırtı + geniş gölge oluk, yumuşak geçişli (gerçek kumaş hissi) */
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--c) 20%,#000) 0,
      color-mix(in srgb,var(--c) 30%,#000) 7px,
      color-mix(in srgb,var(--c) 72%,#3a1d0e) 22px,
      color-mix(in srgb,var(--c) 34%,#000) 30px,
      color-mix(in srgb,var(--c) 20%,#000) 44px),
    /* üstten alta ışık düşüşü — kadife derinliği */
    linear-gradient(180deg,color-mix(in srgb,var(--c) 50%,#1a0e06) 0%,color-mix(in srgb,var(--c) 28%,#000) 56%,var(--ink) 100%);
  box-shadow:inset 0 0 130px rgba(0,0,0,.6);transition:transform 1.15s cubic-bezier(.62,0,.16,1)}
/* perde boyunca yumuşak saten parlaması (ipeksi kadife) */
.op-curtain::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(90deg,transparent,rgba(255,238,200,.10) 45%,rgba(255,246,222,.18) 50%,rgba(255,238,200,.10) 55%,transparent)}
/* Perde iç kenarında parlak altın kordon (sahne perdesi şeridi) */
.op-curtain-l{left:0;transform:translateX(-101%);box-shadow:inset -18px 0 42px rgba(0,0,0,.5)}
.op-curtain-r{right:0;transform:translateX(101%);box-shadow:inset 18px 0 42px rgba(0,0,0,.5)}
.op-curtain-l::after,.op-curtain-r::after{content:"";position:absolute;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#f6e6b8,#caa15a 48%,#9a7634 74%,#f3d98a);box-shadow:0 0 12px rgba(243,217,138,.45)}
.op-curtain-l::after{right:0}
.op-curtain-r::after{left:0}

/* Parıltı patlaması — açılış anında merkezden saçılır */
.op-sparkles{position:absolute;inset:0;z-index:6;pointer-events:none;display:grid;place-items:center}
.op-spark{position:absolute;width:var(--sz,7px);height:var(--sz,7px);color:#ffe9a8;font-size:var(--sz,7px);line-height:1;
  display:grid;place-items:center;
  background:radial-gradient(circle,#fff 0%,#ffe9a8 45%,transparent 70%);border-radius:50%;
  filter:drop-shadow(0 0 6px #ffe6a0);opacity:0;
  animation:sparkFly .95s var(--ease-out) var(--d,0ms) forwards}
@keyframes sparkFly{
  0%{opacity:0;transform:translate(0,0) scale(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(1.1) rotate(120deg)}
}
.opener-cine.opening .inner{opacity:0;transform:scale(1.08)}
.opener-cine.opening .op-curtain-l{transform:translateX(0)}
.opener-cine.opening .op-curtain-r{transform:translateX(0)}
.opener-cine.curtain-open .op-curtain-l{transform:translateX(-101%);transition-duration:1.1s}
.opener-cine.curtain-open .op-curtain-r{transform:translateX(101%);transition-duration:1.1s}
.opener-cine.opening .env-seal{animation:sealCrack .55s var(--ease-out) both}
@keyframes sealCrack{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}40%{transform:translate(-50%,-50%) scale(1.18) rotate(-6deg)}100%{transform:translate(-50%,-58%) scale(.4) rotate(10deg);opacity:0}}

/* ====================================================================
   AÇILIŞ MEKANİZMASI — demo başına çeşitlilik
     rv-stage  = premium SAHNE PERDESİ (klasik/zümrüt/kına/bohem/nişan/sünnet)
     rv-doors  = çift KAPI (modern/minimal)
   Paneller dinlenmede ekran dışında; "Aç"a basınca içeri gelip premium açılır.
   ==================================================================== */
.op-tieback{display:none;position:absolute;z-index:1;pointer-events:none}

/* ---------- rv-stage: zengin kadife + altın saçak + püskül bağ ---------- */
.opener-cine.rv-stage .op-curtain{
  background:
    /* alt kenarda altın saçak (fringe) */
    radial-gradient(7px 12px at 12px 0, #e7c478 0 56%, transparent 60%) left bottom/24px 14px repeat-x,
    /* kadife pile — dar ışık sırtı + geniş gölge oluk */
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--c) 18%,#000) 0,
      color-mix(in srgb,var(--c) 32%,#000) 8px,
      color-mix(in srgb,var(--c) 78%,#3a1d0e) 23px,
      color-mix(in srgb,var(--c) 34%,#000) 31px,
      color-mix(in srgb,var(--c) 18%,#000) 46px),
    /* üstten alta ışık düşüşü — kadife derinliği */
    linear-gradient(180deg,color-mix(in srgb,var(--c) 52%,#1a0e06) 0%,color-mix(in srgb,var(--c) 26%,#000) 58%,var(--ink) 100%);
  box-shadow:inset 0 0 140px rgba(0,0,0,.6),inset 0 -22px 38px rgba(0,0,0,.45);
  transition:transform 1.25s cubic-bezier(.6,0,.12,1)}
/* perde yana toplanırken görünen altın püskül bağ */
.opener-cine.rv-stage .op-tieback{display:block;top:44%;width:26px;height:34px;border-radius:0 0 50% 50%;
  background:radial-gradient(circle at 50% 24%,#f6e6b8,#caa15a 55%,#9a7634);
  box-shadow:0 6px 14px rgba(0,0,0,.5)}
.op-curtain-l .op-tieback{right:8px}
.op-curtain-r .op-tieback{left:8px}
/* açılışta kumaş hafif kıvrılır (skew) — daha gerçek kumaş toplanması */
.opener-cine.rv-stage.curtain-open .op-curtain-l{transform:translateX(-101%) skewY(2deg)}
.opener-cine.rv-stage.curtain-open .op-curtain-r{transform:translateX(101%) skewY(-2deg)}

/* ---------- rv-doors: çift kapı (mimari — açık panel + altın çerçeve) ---------- */
.opener-cine.rv-doors{perspective:1700px}
.opener-cine.rv-doors .op-curtain{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,#f4ede2),color-mix(in srgb,var(--c) 24%,#e4d8c5));
  box-shadow:inset 0 0 70px rgba(120,90,50,.14);backface-visibility:hidden;
  transition:transform 1.3s cubic-bezier(.5,0,.1,1)}
/* kabartmalı iç çerçeve (kapı paneli hissi) */
.opener-cine.rv-doors .op-curtain::before{mix-blend-mode:normal;opacity:1;inset:16px;
  background:none;border:1.5px solid color-mix(in srgb,var(--c) 34%,#b9975b);border-radius:3px;
  box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--c) 7%,#fff),inset 0 0 34px rgba(150,110,60,.14)}
/* ortadaki ince altın çıta (iki kapının birleşme yeri) */
.opener-cine.rv-doors .op-curtain-l::after{right:0;width:4px;background:linear-gradient(180deg,#ecd9a8,#b9975b 60%,#8a6a35)}
.opener-cine.rv-doors .op-curtain-r::after{left:0;width:4px;background:linear-gradient(180deg,#ecd9a8,#b9975b 60%,#8a6a35)}
/* altın kapı kolu */
.opener-cine.rv-doors .op-tieback{display:block;top:50%;width:8px;height:46px;border-radius:6px;margin-top:-23px;
  background:linear-gradient(180deg,#ecd9a8,#9a7634);box-shadow:0 2px 7px rgba(0,0,0,.32)}
.opener-cine.rv-doors .op-curtain-l .op-tieback{right:22px;left:auto}
.opener-cine.rv-doors .op-curtain-r .op-tieback{left:22px;right:auto}
/* menteşe dış kenarda → kapılar viewer'a doğru dışa açılır */
.opener-cine.rv-doors .op-curtain-l{transform-origin:left center}
.opener-cine.rv-doors .op-curtain-r{transform-origin:right center}
.opener-cine.rv-doors.opening .op-curtain-l,
.opener-cine.rv-doors.opening .op-curtain-r{transform:translateX(0) rotateY(0)}
.opener-cine.rv-doors.curtain-open .op-curtain-l{transform:translateX(0) rotateY(-118deg)}
.opener-cine.rv-doors.curtain-open .op-curtain-r{transform:translateX(0) rotateY(118deg)}

/* ---------- rv-drape: yükselen kadife perde (yukarı kalkar) ---------- */
.opener-cine.rv-drape .op-curtain{
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--c) 18%,#000) 0,color-mix(in srgb,var(--c) 32%,#000) 8px,
      color-mix(in srgb,var(--c) 78%,#3a1d0e) 23px,color-mix(in srgb,var(--c) 34%,#000) 31px,
      color-mix(in srgb,var(--c) 18%,#000) 46px),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 52%,#1a0e06),color-mix(in srgb,var(--c) 26%,#000) 58%,var(--ink));
  box-shadow:inset 0 0 140px rgba(0,0,0,.6);transition:transform 1.2s cubic-bezier(.6,0,.15,1)}
.opener-cine.rv-drape .op-tieback{display:none}
.opener-cine.rv-drape.curtain-open .op-curtain-l,
.opener-cine.rv-drape.curtain-open .op-curtain-r{transform:translateY(-101%)}

/* ---------- rv-slide: ipeksi sürgü perde (yana kayar, tek yön) ---------- */
.opener-cine.rv-slide .op-curtain{
  background:linear-gradient(110deg,color-mix(in srgb,var(--c) 22%,#f3ece0),color-mix(in srgb,var(--c) 42%,#cdbfa6) 50%,color-mix(in srgb,var(--c) 22%,#e9dfca));
  box-shadow:inset 0 0 80px rgba(120,90,50,.18);transition:transform 1.25s cubic-bezier(.5,0,.15,1)}
.opener-cine.rv-slide .op-tieback{display:none}
.opener-cine.rv-slide.curtain-open .op-curtain-l,
.opener-cine.rv-slide.curtain-open .op-curtain-r{transform:translateX(106%)}

/* ---------- rv-split: yatay ikiye ayrılma (üst yukarı, alt aşağı) ---------- */
.opener-cine.rv-split .op-curtain{width:100%;height:50.4%;left:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 20%,#f1e9dc),color-mix(in srgb,var(--c) 34%,#d8cab2));
  box-shadow:inset 0 0 70px rgba(120,90,50,.16)}
.opener-cine.rv-split .op-curtain::after{display:none}
.opener-cine.rv-split .op-tieback{display:none}
.opener-cine.rv-split .op-curtain-l{top:0;bottom:auto;transform:translateY(-101%)}
.opener-cine.rv-split .op-curtain-r{top:auto;bottom:0;transform:translateY(101%)}
.opener-cine.rv-split.opening .op-curtain-l,
.opener-cine.rv-split.opening .op-curtain-r{transform:translateY(0)}
.opener-cine.rv-split.curtain-open .op-curtain-l{transform:translateY(-101%)}
.opener-cine.rv-split.curtain-open .op-curtain-r{transform:translateY(101%)}

/* ---------- rv-iris: diyafram (daire ortadan açılır) ---------- */
@property --rv-ir{syntax:'<percentage>';inherits:false;initial-value:0%}
.opener-cine.rv-iris .op-curtain{display:none}
.opener-cine.rv-iris{--rv-ir:0%;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--rv-ir),#000 calc(var(--rv-ir) + 0.6%));
          mask:radial-gradient(circle at 50% 50%,transparent var(--rv-ir),#000 calc(var(--rv-ir) + 0.6%));
  transition:--rv-ir 1.15s cubic-bezier(.6,0,.2,1)}
.opener-cine.rv-iris.curtain-open{--rv-ir:150%}

/* ---------- rv-envelope: zarf açılır + içine dalış (perde yok) ---------- */
.opener-cine.rv-envelope .op-curtain{display:none}
.opener-cine.rv-envelope.opening .envelope{animation:rvEnvZoom 1.5s var(--ease-out) .15s both}
@keyframes rvEnvZoom{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(6.5);opacity:0}}

/* ---------- rv-seal: mum mührü kırılır + içeri zoom (perde yok) ---------- */
.opener-cine.rv-seal .op-curtain{display:none}
.opener-cine.rv-seal.opening .inner{opacity:1;transform:scale(1.04)}
.opener-cine.rv-seal.curtain-open .inner{opacity:0;transform:scale(7);transition:transform 1.1s ease,opacity .9s ease}

/* ---------- rv-petal: yumuşak zoom + düşen yapraklar (bohem/zarif) ---------- */
.opener-cine.rv-petal .op-curtain{display:none}
.opener-cine.rv-petal.opening .inner{opacity:0;transform:scale(1.14);transition:opacity 1.2s ease,transform 1.5s ease}
.opener-cine.rv-petal .float-heart{font-size:1.7rem}
.opener-cine.rv-petal.opening .float-heart{animation:rvPetalFall 1.8s ease both}
@keyframes rvPetalFall{0%{opacity:0;transform:translateY(-20px) rotate(0)}30%{opacity:.9}100%{opacity:0;transform:translateY(120px) rotate(140deg)}}

/* ---------- rv-glow: ışıltı patlaması + dağılma (perde yok) ---------- */
.opener-cine.rv-glow .op-curtain{display:none}
.opener-cine.rv-glow.opening{animation:rvGlowFlash 1.7s ease both}
@keyframes rvGlowFlash{0%{filter:brightness(1) blur(0)}38%{filter:brightness(2.5) blur(1px)}100%{filter:brightness(1.3) blur(3px);opacity:0}}

/* ===== Zarf açılışı — ekranı dolduran premium çerçeve + ambiyans ===== */
/* Daha zengin, merkezi ışıltılı zemin (düz kahve yerine derinlik) */
.opener-cine.op-envelope{
  background:
    radial-gradient(82% 56% at 50% 46%, color-mix(in srgb,var(--c) 36%,#fff7ea) 0%, transparent 60%),
    radial-gradient(125% 100% at 50% 30%, color-mix(in srgb,var(--c) 42%,#1d140d) 0%, color-mix(in srgb,var(--c) 60%,#120c08) 72%, #0c0805 100%);
}
/* Ekranı dolduran ince çift altın çerçeve (davetiye kartı hissi) */
.opener-cine.op-envelope::before{
  content:"";position:absolute;inset:18px;z-index:2;pointer-events:none;border-radius:12px;
  border:1px solid rgba(243,217,138,.4);
  box-shadow:inset 0 0 0 5px rgba(243,217,138,.13), inset 0 0 70px rgba(0,0,0,.3)}
/* Üstte ve altta zarif altın süs ornamenti */
.opener-cine.op-envelope .op-names::before{
  content:"✦ ÖZEL DAVET ✦";display:block;font-family:var(--serif);font-size:.72rem;letter-spacing:.42em;
  color:rgba(243,217,138,.82);margin-bottom:18px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
/* Zarfın arkasında yumuşak ışıltı halesi */
.opener-cine.op-envelope .envelope.env-lux{
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--c) 30%,transparent))}
.opener-cine.op-envelope .env-lux .env-body{
  box-shadow:0 44px 90px -26px rgba(0,0,0,.66),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 6px color-mix(in srgb,var(--c) 14%,#fff8ec)}
/* Mühürde küçük parlak ışık noktası (daha gerçekçi mum) */
.opener-cine.op-envelope .env-seal.seal-wax::after{
  content:"";position:absolute;top:20%;left:28%;width:26%;height:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%);pointer-events:none}

/* ===== op-envelope alt-kişilikleri — her demo benzersiz açılır ===== */
/* (R) Klasik "Royal" — derin bordo/altın saray salonu, ışıltılı vinyet, geniş çerçeve */
.opener-cine.op-royal{
  background:
    radial-gradient(70% 48% at 50% 42%, color-mix(in srgb,var(--c) 30%,#fff4dd) 0%, transparent 58%),
    radial-gradient(140% 120% at 50% 26%, color-mix(in srgb,var(--c) 50%,#241208) 0%, #15090a 78%, #0a0405 100%)}
.opener-cine.op-royal::before{inset:14px;border:1px solid rgba(243,217,138,.55);
  box-shadow:inset 0 0 0 4px rgba(243,217,138,.18),inset 0 0 0 9px rgba(243,217,138,.08),inset 0 0 90px rgba(0,0,0,.42)}
.opener-cine.op-royal .op-names::before{content:"❦ DAVETLİSİNİZ ❦";letter-spacing:.5em;color:rgba(244,222,150,.92)}
.opener-cine.op-royal .op-names{text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 30px color-mix(in srgb,var(--c) 40%,transparent)}
/* dört köşede zarif altın köşe süsü */
.opener-cine.op-royal .inner::before,.opener-cine.op-royal .inner::after{
  content:"⚜";position:absolute;color:rgba(243,217,138,.7);font-size:1.5rem;top:-44px;animation:opGlow 3s ease-in-out infinite alternate}
.opener-cine.op-royal .inner::before{left:50%;transform:translateX(-50%)}
.opener-cine.op-royal .inner::after{display:none}

/* (B2) Bohem "Bloom" — yumuşak pudra/teracotta, sıcak gün ışığı, organik halka */
.opener-cine.op-bloom{
  background:
    radial-gradient(60% 42% at 50% 40%, #fff3ec 0%, transparent 62%),
    radial-gradient(130% 110% at 50% 22%, color-mix(in srgb,var(--c) 38%,#e8c6b4) 0%, color-mix(in srgb,var(--c) 55%,#7a4a3c) 72%, #3d2620 100%)}
.opener-cine.op-bloom::before{inset:20px;border:1px dashed rgba(255,255,255,.5);border-radius:18px;
  box-shadow:inset 0 0 60px rgba(120,60,40,.25)}
.opener-cine.op-bloom .op-names{color:#fff7f2;text-shadow:0 2px 16px rgba(90,40,30,.5)}
.opener-cine.op-bloom .op-names::before{content:"❀ ÖZEL DAVET ❀";letter-spacing:.4em;color:rgba(255,244,236,.9)}
.opener-cine.op-bloom .env-lux .env-body{box-shadow:0 40px 80px -26px rgba(80,40,30,.6),inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 6px rgba(255,247,240,.85)}
.opener-cine.op-bloom .float-heart{color:rgba(255,235,225,.7)}

/* (N) Kına "Night" — gece laciverti + altın hilal & yıldız, sıcak kına kırmızısı vurgu */
.opener-cine.op-night{
  background:
    radial-gradient(58% 40% at 50% 38%, color-mix(in srgb,var(--c) 26%,#3a1d3a) 0%, transparent 60%),
    radial-gradient(150% 130% at 50% 20%, #2a1340 0%, #160a2a 64%, #0a0518 100%)}
.opener-cine.op-night::before{inset:16px;border:1px solid rgba(243,217,138,.5);border-radius:6px;
  box-shadow:inset 0 0 0 4px rgba(243,217,138,.12),inset 0 0 80px rgba(0,0,0,.45)}
.opener-cine.op-night .op-names{color:#ffe9c2;text-shadow:0 0 22px rgba(243,217,138,.45),0 2px 16px rgba(0,0,0,.5)}
.opener-cine.op-night .op-names::before{content:"☾ KINA GECESİ ☆";letter-spacing:.42em;color:rgba(244,222,150,.92)}
.opener-cine.op-night .float-heart{color:rgba(243,217,138,.55)}
.opener-cine.op-night .env-lux .env-body{box-shadow:0 40px 90px -26px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 6px rgba(243,217,138,.18)}
/* küçük altın yıldız serpiştirme */
.opener-cine.op-night .inner::before{content:"✦   ✧   ⋆   ✧   ✦";position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  color:rgba(243,217,138,.6);font-size:.9rem;letter-spacing:.3em;animation:opGlow 2.6s ease-in-out infinite alternate}

/* ===== Şablona özel açılış varyantları ===== */
/* (A) Tipografik — Livana "zarif klasik": koyu zemin + büyük parıltılı el yazısı, zarf yok */
.op-typographic .envelope{display:none}
.op-typographic{background:radial-gradient(130% 110% at 50% 18%,color-mix(in srgb,var(--c) 28%,#1a1410) 0%,#120d0a 78%)}
.op-typographic .op-names{font-size:clamp(3rem,13vw,5.2rem);color:color-mix(in srgb,var(--c) 22%,#f6e6c4);
  text-shadow:0 0 26px color-mix(in srgb,var(--c) 45%,transparent),0 0 60px color-mix(in srgb,var(--c) 25%,transparent);
  margin-bottom:14px;animation:opGlow 3.4s ease-in-out infinite alternate,opNamesIn 1.2s var(--ease-out) both}
@keyframes opGlow{from{filter:brightness(1)}to{filter:brightness(1.18)}}
.op-typographic .op-names::after{content:"◆";display:block;font-size:.18em;color:color-mix(in srgb,var(--c) 60%,#caa15a);margin:14px auto 0;opacity:.8}
.op-typographic .meta{color:rgba(246,230,196,.7);letter-spacing:6px}
.op-typographic .tap{border-color:color-mix(in srgb,var(--c) 50%,#caa15a);color:#f6e6c4;letter-spacing:3px}

/* (B) Minimal — ferah, ince serif, açık zemin, hairline; zarf yok */
.op-minimal .envelope{display:none}
.op-minimal{background:linear-gradient(180deg,#fbfaf8,#f1ece6);color:#2a2622}
.op-minimal .float-heart{color:color-mix(in srgb,var(--c) 50%,#bbb)}
.op-minimal .op-names{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,8vw,3.4rem);letter-spacing:.04em;color:#2a2622;text-shadow:none;
  padding-bottom:20px;margin-bottom:22px;position:relative}
.op-minimal .op-names::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:1px;background:var(--c)}
.op-minimal .meta{color:#8a8178;letter-spacing:5px}
.op-minimal .tap{border-color:color-mix(in srgb,var(--c) 45%,#ccc);color:#3a352f}
/* Minimal varyantta perde açık renk olsun */
.op-minimal .op-curtain{background:linear-gradient(180deg,#fbfaf8,#ece5da)}

/* ----- Flip-clock geri sayım -----
   Mevcut .cd-box yapısını koruyarak görsel yükseltme; .num içine .flip-card eklenir. */
.cd-grid.flip .cd-box{background:linear-gradient(160deg,#fff,#f6f0e6);border:1px solid var(--c-soft);padding:16px 14px 12px;min-width:78px}
.cd-grid.flip .cd-box::before{display:none}
.flip-card{position:relative;display:inline-block;font-family:var(--serif);font-size:2.4rem;color:var(--c);line-height:1;perspective:240px;min-width:1.4em}
.flip-card .fc-static{display:block}
.flip-card .fc-top,.flip-card .fc-bottom{position:absolute;left:0;right:0;overflow:hidden;height:50%;background:transparent}
.flip-card .fc-top{top:0}
.flip-card .fc-bottom{bottom:0}
/* Hafif yatay ayraç çizgisi (flip-clock kart hissi) */
.flip-card::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:1px;background:color-mix(in srgb,var(--c) 22%,transparent);transform:translateY(-.5px);z-index:2}
.flip-card.flipping{animation:fcPulse .5s var(--ease-out)}
@keyframes fcPulse{0%{transform:translateY(0)}40%{transform:translateY(-3px)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .opener.opening .envelope{animation:none}
  .flip-card.flipping{animation:none}
  .op-spark{display:none}
  .op-curtain{transition-duration:.3s}
}

/* ===== Okuma ilerleme çubuğu ===== */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;
  background:linear-gradient(90deg,var(--c),var(--c-soft));transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear;pointer-events:none}

/* ===== Hızlı eylem dock'u (bölüm gezgini + paylaş + başa dön) ===== */
.inv-dock{position:fixed;right:22px;bottom:86px;z-index:60;display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s}
.inv-dock.show{opacity:1;visibility:visible;transform:none}
/* Müzik butonu yoksa dock daha aşağıda dursun */
.inv-root:not(:has(.music-btn)) .inv-dock{bottom:22px}
.dock-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--c-soft);background:#fff;color:var(--c);
  font-size:1.1rem;cursor:pointer;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.45);transition:transform .2s var(--ease-out),background .2s}
.dock-btn:hover{transform:scale(1.1);background:var(--c);color:#fff}
.dock-btn:active{transform:scale(.94)}

/* ===== Bölüm gezgini paneli ===== */
.sec-nav{position:fixed;right:0;top:0;bottom:0;width:min(300px,82vw);z-index:95;background:#fff;
  box-shadow:-12px 0 40px -16px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .34s var(--ease-drawer);
  display:flex;flex-direction:column;padding:22px 0}
.sec-nav.open{transform:none}
.sec-nav-head{font-family:var(--serif);font-size:1.3rem;color:var(--c);padding:0 24px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--c-soft) 50%,transparent);margin-bottom:8px}
.sec-nav-list{overflow-y:auto;display:flex;flex-direction:column;padding:0 12px}
.sec-nav-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:none;background:none;
  padding:13px 14px;border-radius:12px;font-family:var(--sans);font-size:1rem;color:var(--ink);cursor:pointer;
  transition:background .15s,color .15s}
.sec-nav-item:hover{background:color-mix(in srgb,var(--c) 8%,transparent);color:var(--c)}
.sn-ico{width:30px;height:30px;min-width:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font-size:.95rem}
.sec-nav-ov{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;backdrop-filter:blur(2px)}
.sec-nav-ov.show{opacity:1;visibility:visible}

/* Önizleme (editör iframe) modunda dock/gezgin/ilerleme gizli — kafa karıştırmasın */
.inv-root [data-preview] .inv-dock{display:none}

/* ===== Sesli not kaydedici (anı defteri) ===== */
.voice-rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  border:1px dashed color-mix(in srgb,var(--c) 45%,#cfc4b2);border-radius:12px;
  background:color-mix(in srgb,var(--c) 4%,#fff)}
.vr-btn{appearance:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.9rem;font-weight:600;
  padding:8px 14px;border-radius:50px;background:var(--c);color:#fff;transition:filter .15s,transform .1s;line-height:1}
.vr-btn:hover{filter:brightness(1.06)}
.vr-btn:active{transform:scale(.97)}
.vr-clear{background:transparent;color:#a9483c;border:1px solid #e6b9b2;padding:7px 11px}
.vr-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c);font-size:.95rem;letter-spacing:.04em}
.vr-dot{width:11px;height:11px;border-radius:50%;background:#e0463a;opacity:0;transition:opacity .2s}
.voice-rec[data-state="recording"] .vr-dot{opacity:1;animation:vrPulse 1s ease-in-out infinite}
@keyframes vrPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
.vr-audio{height:38px;max-width:100%;flex:1;min-width:180px}
.vr-hint{display:block;margin-top:6px;font-size:.78rem;color:#9b9081}
.mem-audio{width:100%;height:40px;margin-top:6px;display:block}