/* Yüzük Kutusu: sade, modern; Playfair italik isimler, ince çizgiler, köşeli kartlar. */
:root { --f-display:"Playfair Display",Georgia,serif; --f-head:"Playfair Display",Georgia,serif; --f-body:"Playfair Display",Georgia,serif; --f-ui:"Montserrat",system-ui,sans-serif; }
body { --radius:0px; --btn-radius:0px; --h2-size:clamp(1.9rem,7vw,2.3rem); font-size:1.05rem; }
body::before { background:linear-gradient(180deg, var(--soft), var(--bg) 40%); }
h2 { font-style:italic; font-weight:400; }
.lead { font-size:1.12rem; line-height:1.85; }
.btn { font-weight:600; font-size:.74rem; letter-spacing:.2em; }

/* Açılış: kadife yüzük kutusu */
.tpl-yuzuk .opening { background:radial-gradient(70% 55% at 50% 45%, var(--paper), var(--soft)); transition:opacity .9s var(--ease) 1.2s, visibility 0s 2.3s; }
.ringbox { width:230px; height:220px; perspective:900px; }
.ringbox > span { position:absolute; left:50%; translate:-50% 0; }
.rb-glow { top:0; width:300px; height:300px; translate:-50% -16% !important; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--gold) 45%, transparent), transparent 62%); opacity:0; transition:opacity 1s .3s; }
.rb-base { bottom:0; width:220px; height:104px; border-radius:6px 6px 16px 16px; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff 4%), var(--deep)); box-shadow:inset 0 -14px 24px rgb(0 0 0 / .3), 0 26px 40px color-mix(in srgb, var(--deep) 35%, transparent); display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; z-index:2; }
.rb-base::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; background:color-mix(in srgb, var(--gold) 70%, #fff); opacity:.65; }
.rb-names { font:italic 400 1.05rem var(--f-display); color:color-mix(in srgb, var(--gold) 70%, #fff); white-space:nowrap; }
.rb-cushion { bottom:96px; width:190px; height:60px; border-radius:50% 50% 8px 8px / 70% 70% 8px 8px; background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--primary) 60%, #fff), var(--deep)); z-index:1; }
.rb-lid { bottom:100px; width:224px; height:96px; border-radius:16px 16px 6px 6px; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, #fff 8%), var(--primary) 55%, var(--deep)); box-shadow:inset 0 10px 20px rgb(255 255 255 / .14); transform-origin:50% 100%; transition:transform 1s cubic-bezier(.5,-.2,.3,1.3); z-index:4; }
.rb-lid::after { content:""; position:absolute; left:50%; bottom:-6px; width:26px; height:10px; translate:-50% 0; border-radius:3px; background:var(--gold); }
.rb-ring { bottom:120px; width:96px; color:var(--gold); z-index:3; transform:translateY(30px) scale(.6); opacity:0; transition:transform 1s var(--ease) .35s, opacity .6s .35s; }
.rb-ring svg { width:100%; display:block; filter:drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.spark { position:absolute; width:12px; height:12px; background:#fff; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity:0; }
.s1 { top:0; left:62%; } .s2 { top:24%; left:10%; width:8px; height:8px; } .s3 { top:6%; left:30%; width:6px; height:6px; }
.is-opening .rb-lid { transform:rotateX(108deg); }
.is-opening .rb-ring { transform:translateY(-6px) scale(1); opacity:1; }
.is-opening .rb-glow { opacity:1; }
.is-stage2 .spark { animation:twinkle 1s ease-in-out infinite; }
.is-stage2 .s2 { animation-delay:.3s; } .is-stage2 .s3 { animation-delay:.6s; }
@keyframes twinkle { 50% { opacity:1; transform:scale(1.4) rotate(45deg); } }
.is-stage2 .ringbox { transform:scale(1.25); transition:transform 1.4s var(--ease); }

/* Kapak */
.hero { gap:26px; }
.rings { width:min(64vw,250px); color:var(--gold); }
.rings svg { width:100%; display:block; overflow:visible; }
.is-open .r1 { stroke-dasharray:290; animation:draw 1.8s var(--ease) both .2s; }
.is-open .r2 { stroke-dasharray:290; animation:draw 1.8s var(--ease) both .5s; }
@keyframes draw { from { stroke-dashoffset:290; } }
.ring-photo { width:min(64vw,250px); aspect-ratio:1; margin:0; padding:10px; border:1px solid var(--gold); border-radius:50%; }
.ring-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.names { font:italic 400 clamp(3rem,13vw,4.4rem)/1.02 var(--f-display); color:var(--ink); }
.names em { font:400 1.1em/1 var(--f-display); color:var(--gold); margin:.05em 0; }
.date-box { display:grid; grid-template-columns:repeat(3,1fr); width:min(100%,360px); border-block:1px solid var(--gold); }
.date-box div { display:grid; padding:12px 4px; min-width:0; }
.date-box div + div { border-left:1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.date-box b { font:400 1.7rem/1.1 var(--f-display); color:var(--primary); }
.date-box small { font:500 .62rem var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); overflow-wrap:anywhere; }

/* Bölümler */
.cd div { border-radius:0; box-shadow:none; aspect-ratio:auto; padding:16px 0; }
.cd b { font-family:var(--f-display); font-weight:400; }
.families b { font-style:italic; }
.amp { font-family:var(--f-display); font-style:italic; }
.sign b { font:italic 400 2.3rem/1.2 var(--f-display); }
.detail-card { padding:4px 22px; }