/* =========================================================
   SUZANA · SEVGI · XIVA · LOLA · OYDIN · NAFIS
   ========================================================= */

/* ---------------- Mavzu ranglari ---------------- */
.t-suzana {
  --bg: #f8f0e1; --bg2: #fdf8ee; --ink: #2c2340; --muted: #7a6a5c;
  --accent: #a8232c; --accent-2: #3d6b4f; --gold: #c8922e; --card: #fffaf0e6;
  --line: #ead9bb; --intro-bg: #2a1a1c;
  --petal-a: #c8323b; --petal-b: #f2c14e; --petal-c: #fff6e6;
  --inner: #fff6e6; --inner-edge: #c8922e;
}
.t-sevgi {
  --bg: #fff1f2; --bg2: #fff8f7; --ink: #4a1626; --muted: #9a6672;
  --accent: #c0153f; --accent-2: #e07a8f; --gold: #d49a80; --card: #ffffffd9;
  --line: #f7d3da; --intro-bg: radial-gradient(120% 90% at 50% 35%, #fff6f7 0%, #ffd9df 60%, #f7b3c1 100%);
  --petal-a: #ff3d6e; --petal-b: #ff8fa3; --petal-c: #ffc2cf;
  --inner: #fff3f5; --inner-edge: #e07a8f;
}
.t-xiva {
  --bg: #f7efe3; --bg2: #fffaf2; --ink: #3a2618; --muted: #8a6f58;
  --accent: #157a86; --accent-2: #c46a2b; --gold: #c9963e; --card: #fffaf2e6;
  --line: #ead8bf; --intro-bg: radial-gradient(120% 90% at 50% 20%, #fffaf2 0%, #f3e2c7 60%, #e7c9a0 100%);
  --petal-a: #2bb3c0; --petal-b: #f6e2bd; --petal-c: #ffffff;
  --inner: #fff8ec; --inner-edge: #157a86;
}
.t-lola {
  --bg: #f3f8ee; --bg2: #fbfdf8; --ink: #1f3320; --muted: #647a62;
  --accent: #d62839; --accent-2: #3f8f3c; --gold: #e0a526; --card: #ffffffe0;
  --line: #dcebd2; --intro-bg: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #eaf5e1 60%, #d3eac1 100%);
  --petal-a: #e63946; --petal-b: #ffd166; --petal-c: #ff8fab;
  --inner: #fffdf6; --inner-edge: #3f8f3c;
}
.t-oydin {
  --bg: #0b1430; --bg2: #0e1938; --ink: #e8ecf7; --muted: #9aa6c4;
  --accent: #ecdca6; --accent-2: #9fb4e8; --gold: #ecdca6; --card: #ffffff0a;
  --line: #9fb4e833; --on-accent: #0b1430; --intro-bg: #050a1f;
  --petal-a: #fff4cf; --petal-b: #cfe0ff; --petal-c: #ecdca6;
}
.t-nafis {
  --bg: #faf8f4; --bg2: #ffffff; --ink: #2b2722; --muted: #8b8378;
  --accent: #a8823f; --accent-2: #8b8378; --gold: #c5a46d; --card: #ffffff;
  --line: #ece4d6; --intro-bg: #faf7f1;
  --petal-a: #ffffff; --petal-b: #efe3c8; --petal-c: #d9c08f;
}

/* =================== PARDA (curtain) =================== */
.intro-curtain { display: block; cursor: pointer; background: #140b0c; }
.t-oydin .intro-curtain { background: #03061a; }
.cur-stage {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, #fff6dc 0%, #f6c66b 30%, #8a3f10 70%, #1a0c06 100%);
}
.t-oydin .cur-stage { background: radial-gradient(ellipse 60% 50% at 50% 55%, #ffffff 0%, #cfe0ff 30%, #2a3d73 70%, #050a1f 100%); }
.cur-panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 1;
  transition: transform 2.1s cubic-bezier(.6,.05,.25,1) .25s;
  filter: drop-shadow(0 0 18px #0009);
}
.cur-panel svg { width: 100%; height: 100%; display: block; }
.cur-l { left: 0; transform-origin: 0 0; }
.cur-r { right: 0; transform-origin: 100% 0; }
.t-oydin .cur-panel svg rect:first-child { filter: brightness(.8); }
.cur-valance { position: absolute; top: 0; left: 0; width: 100%; height: 13svh; z-index: 3; filter: drop-shadow(0 6px 10px #0007); transition: transform 1.6s ease .5s; }
.cur-card {
  position: absolute; z-index: 4; inset: 0; margin: auto; height: max-content;
  width: min(82vw, 330px); padding: 30px 18px 26px; text-align: center; border-radius: 22px;
  background: #fffaf0f2; box-shadow: 0 30px 60px -20px #000a, inset 0 0 0 1px #c8922e55, inset 0 0 0 7px #fffaf0, inset 0 0 0 8px #c8922e88;
  animation: giftIn 1.2s cubic-bezier(.2,.9,.25,1.2) both .4s;
  transition: opacity .6s ease, transform .8s ease;
}
.t-oydin .cur-card { background: #0b1430e8; box-shadow: 0 30px 60px -20px #000, inset 0 0 0 1px #ecdca655, inset 0 0 0 7px #0b1430, inset 0 0 0 8px #ecdca688; }
.cur-card .intro-kicker { color: var(--accent-2); }
.cur-title { margin: 6px 0 14px; font: 600 clamp(34px, 10vw, 44px)/1.02 "Cormorant Garamond", serif; color: var(--accent); }
.cur-mono { display: inline-flex; align-items: center; gap: 6px; font: 600 26px "Cormorant Garamond", serif; color: var(--ink); padding: 6px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cur-mono i { color: var(--gold); font-size: .8em; }
.cur-hint {
  position: absolute; left: 0; right: 0; bottom: calc(5svh + env(safe-area-inset-bottom)); z-index: 4;
  width: max-content; max-width: calc(100% - 32px); margin: 0 auto; white-space: nowrap;
  padding: 12px 22px; border-radius: 99px; background: #000a; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #f6dc95; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  animation: fadeUp 1s ease both 1s, glowPill 2.4s ease-in-out infinite 2s;
}
.intro-curtain.opening .cur-l { transform: translateX(-62%) scaleX(.38) skewY(2deg); }
.intro-curtain.opening .cur-r { transform: translateX(62%) scaleX(.38) skewY(-2deg); }
.intro-curtain.opening .cur-valance { transform: translateY(-110%); }
.intro-curtain.opening .cur-card { opacity: 0; transform: scale(1.15); animation: none; }
.intro-curtain.opening .cur-hint { opacity: 0; transition: opacity .4s; animation: none; }

/* =================== YURAK (heart) =================== */
.intro-heart .heart-title { margin: 0 0 26px; font: 400 clamp(40px, 12vw, 54px)/1.05 "Marck Script", "Great Vibes", "Cormorant Garamond", serif; color: #b0123d; animation: fadeDown 1.1s ease both .35s; }
.intro-heart .intro-kicker { color: #c96a7e; }
.heart-btn { position: relative; width: min(72vw, 300px); aspect-ratio: 300 / 280; margin: 0 auto; cursor: pointer; outline: none; animation: giftIn 1.2s cubic-bezier(.2,.9,.25,1.2) both .5s; }
.heart-btn svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 24px 30px #a50f3755); }
.heart-btn:not(.open) svg { animation: heartbeat 1.6s ease-in-out infinite 1.8s; }
.heart-glow { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, #ff8fa366 0%, #ff8fa300 65%); animation: pulse 2s ease-in-out infinite; }
.hb-half { transition: transform 1.1s cubic-bezier(.5,-0.3,.3,1), opacity .8s ease .5s; transform-box: view-box; }
.hb-l { transform-origin: 150px 270px; }
.hb-r { transform-origin: 150px 270px; }
.heart-btn.open .hb-l { transform: translate(-70px, 30px) rotate(-28deg); opacity: 0; }
.heart-btn.open .hb-r { transform: translate(70px, 30px) rotate(28deg); opacity: 0; }
.heart-btn.open .heart-glow { animation: glowPulse 1.2s ease-out both; }
.hb-mono { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: 400 44px/1 "Marck Script", "Great Vibes", serif; color: #fff; text-shadow: 0 2px 10px #8e0b3277; pointer-events: none; transition: opacity .4s; }
.hb-mono i { font-size: .6em; margin: 0 4px; font-style: normal; }
.heart-btn.open .hb-mono { opacity: 0; }
.intro-heart.opening .heart-title, .intro-heart.opening .intro-hint, .intro-heart.opening .intro-kicker { opacity: 0; transform: translateY(-12px); transition: .5s; animation: none; }
.float-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.float-hearts span {
  position: absolute; left: var(--x); bottom: -30px; width: calc(18px * var(--s)); height: calc(18px * var(--s)); opacity: 0;
  background: #ff8fa3; transform: rotate(45deg); animation: heartRise var(--t) linear var(--d) infinite;
}
.float-hearts span::before, .float-hearts span::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: inherit; }
.float-hearts span::before { left: -50%; } .float-hearts span::after { top: -50%; }
@keyframes heartRise { 0% { transform: translateY(0) rotate(45deg); opacity: 0; } 10% { opacity: .55; } 100% { transform: translateY(-110svh) translateX(30px) rotate(45deg); opacity: 0; } }

/* =================== NAFIS: oq-oltin konvert =================== */
.t-nafis .intro-env { background: #faf7f1; }
.t-nafis .env-title { color: #a8823f; }
.t-nafis .intro-env .intro-kicker { color: #8b8378; }
.t-nafis .env-back { background: linear-gradient(#efe9df, #e4dccd); }
.t-nafis .env-front { background: linear-gradient(165deg, #ffffff, #f1ece3); }
.t-nafis .env-front::before { background: linear-gradient(to top right, transparent 49.6%, #c5a46d77 50%, transparent 50.6%), linear-gradient(to top left, transparent 49.6%, #c5a46d77 50%, transparent 50.6%); }
.t-nafis .env-flap { background: linear-gradient(#fbf9f5, #ebe4d8); }
.t-nafis .env-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49.4%, #c5a46d 50%, transparent 50.6%), linear-gradient(to bottom left, transparent 49.4%, #c5a46d 50%, transparent 50.6%); opacity: .6; }
.t-nafis .env-seal { background: radial-gradient(circle at 35% 30%, #f7e3a8, #c9a24f 55%, #8e6a26); color: #fffaf0; box-shadow: 0 4px 10px #0004, inset 0 -3px 6px #0003, 0 0 0 3px #c9a24f, 0 0 0 4px #8e6a26; }
.t-nafis .env-seal::after { border-color: #fffaf088; }
.t-nafis .env-letter::before { border-color: #e2d3b4; }
.t-nafis .letter-inner small { color: #a8823f; }
.t-nafis .letter-inner b { color: #2b2722; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 26px; letter-spacing: .08em; text-transform: uppercase; }
.t-nafis .letter-inner b i { color: #c5a46d; }

/* =================== SAHIFALAR =================== */
/* Suzana */
.t-suzana .cover-text { margin-top: 13svh; text-shadow: 0 0 18px #fbf4e6, 0 0 4px #fbf4e6; }
.t-suzana .names { color: #2c2340; }
.t-suzana .names .amp { color: #a8232c; }
.t-suzana .title { color: #a8232c; }
.t-suzana .countdown div { background: #2e2a4f; box-shadow: 0 10px 22px -12px #2e2a4f; }
.t-suzana .the-day svg { fill: #a8232c; }
.t-suzana .final-text { margin-top: 18svh; text-shadow: 0 0 18px #fbf4e6, 0 0 4px #fbf4e6; }
.t-suzana .final-text h3 { color: #a8232c; }
.suz-spin { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
.suz-spin.r { animation-direction: reverse; }

/* Sevgi */
.t-sevgi .names, .t-sevgi .final-text h3, .t-sevgi .title { font-family: "Marck Script", "Great Vibes", "Cormorant Garamond", serif; font-weight: 400; }
.t-sevgi .names { font-size: clamp(56px, 16vw, 80px); color: #8e0b32; line-height: .98; }
.t-sevgi .names.long { font-size: clamp(42px, 11.5vw, 58px); }
.t-sevgi .names.xlong { font-size: clamp(32px, 8.6vw, 44px); }
.t-sevgi .names .amp { color: #e07a8f; }
.t-sevgi .title { font-size: clamp(42px, 12vw, 54px); }
.t-sevgi .cover-text, .t-sevgi .final-text { text-shadow: 0 0 22px #fff3f0, 0 0 6px #fff3f0; }
.t-sevgi .cover-text { margin-top: 17svh; }
.t-sevgi .final-text { margin-top: 20svh; }
.t-sevgi .final-text h3 { color: #c0153f; font-size: clamp(54px, 15vw, 70px); }
.t-sevgi .countdown div { background: linear-gradient(160deg, #ff6b88, #c0153f); }
.t-sevgi .scene .hang { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3.6s ease-in-out infinite; animation-delay: var(--d); }
.t-sevgi .scene .fairy { animation: twinkle 2s ease-in-out infinite; animation-delay: var(--d); }
.t-sevgi .scene .bokeh circle { animation: twinkle 4s ease-in-out infinite; animation-delay: var(--d); }
.t-sevgi .scene .balloon { animation: bob 4s ease-in-out infinite; animation-delay: var(--d); }
.t-sevgi .scene .beat { transform-box: fill-box; transform-origin: center; animation: heartbeat 1.8s ease-in-out infinite; }

/* Xiva */
.t-xiva .cover-text, .t-xiva .final-text { text-shadow: 0 0 20px #fbf3e2, 0 0 4px #fff; }
.t-xiva .cover-text { margin-top: 12svh; }
.t-xiva .final-text { margin-top: 16svh; }
.t-xiva .names { color: #3a2618; }
.t-xiva .names .amp { color: #157a86; }
.t-xiva .title { color: #157a86; }
.t-xiva .countdown div { background: linear-gradient(160deg, #1aa3a8, #12606b); }
.t-xiva .scene .birds { animation: drift 18s linear infinite alternate; }

/* Lola */
.t-lola .cover-text, .t-lola .final-text { text-shadow: 0 0 22px #ffffffe6, 0 0 3px #fff; }
.t-lola .names { color: #1f3320; }
.t-lola .names .amp { color: #d62839; }
.t-lola .countdown div { background: linear-gradient(160deg, #e5383b, #b5162a); }
.t-lola .scene .tulip { animation: sway 4s ease-in-out infinite; animation-delay: var(--d); }
.t-lola .scene .fly { animation: flyAround 12s ease-in-out infinite; }
.t-lola .scene .fly2 { animation-duration: 15s; animation-direction: reverse; }
.t-lola .scene .fly3 { animation-duration: 10s; animation-delay: -4s; }
.t-lola .scene .wing { transform-box: fill-box; transform-origin: center; animation: flap .35s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes flyAround { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40px, -30px); } 50% { transform: translate(10px, -60px); } 75% { transform: translate(-30px, -20px); } }

/* Oydin (qorong'i) */
.t-oydin .page { box-shadow: 0 0 80px #000; }
.t-oydin .title, .t-oydin .final-text h3 {
  background: linear-gradient(180deg, #fffaf0, #ecdca6 55%, #b9a46a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t-oydin .names { color: #f3ecd4; }
.t-oydin .names .amp { color: #ecdca6; }
.t-oydin .cover-text, .t-oydin .final-text { text-shadow: 0 2px 20px #000c; }
.t-oydin .cover-text { margin-top: 18svh; }
.t-oydin .final-text { margin-top: 20svh; }
.t-oydin .cover-kicker { color: #9fb4e8; }
.t-oydin .cover-date, .t-oydin .final-names { color: #cdd6ee; }
.t-oydin .scroll-hint, .t-oydin .lang, .t-oydin .music-btn { background: #0b1430cc; color: #ecdca6; box-shadow: none; border: 1px solid #ecdca633; }
.t-oydin .lang button { color: #9aa6c4; }
.t-oydin .lang button.active { background: linear-gradient(#f6ecc8, #c9b77e); }
.t-oydin .btn-solid { background: linear-gradient(180deg, #f6ecc8, #c9b77e); border-color: #c9b77e; }
.t-oydin .btn-line, .t-oydin .pill { color: #ecdca6; border-color: #ecdca666; }
.t-oydin .countdown div { background: #ffffff0d; color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.t-oydin .countdown b { color: #ecdca6; }
.t-oydin .calendar, .t-oydin .place-card, .t-oydin .rsvp-done { background: #ffffff08; box-shadow: none; }
.t-oydin .the-day svg { fill: #ecdca6; }
.t-oydin .the-day i { color: #0b1430; }
.t-oydin .t-ic { background: #0e1938; border-color: #ecdca655; color: #ecdca6; }
.t-oydin .field input, .t-oydin .field textarea, .t-oydin .choice label, .t-oydin .stepper { background: #ffffff0a; color: var(--ink); border-color: #9fb4e833; }
.t-oydin .field ::placeholder { color: #7d89a8; }
.t-oydin .place-card .pin circle { fill: #0e1938; }
.t-oydin .map-embed iframe { filter: invert(.9) hue-rotate(185deg) saturate(.6) brightness(.95) contrast(.95); }
.t-oydin .scene .fireflies circle { animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }

/* Nafis */
.t-nafis .names { font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(38px, 11vw, 54px); color: #2b2722; }
.t-nafis .names.long { font-size: clamp(30px, 8.5vw, 40px); }
.t-nafis .names.xlong { font-size: clamp(24px, 6.6vw, 32px); }
.t-nafis .names .amp { text-transform: none; color: #b08d57; font-size: .7em; }
.t-nafis .cover-text { margin-top: 21svh; }
.t-nafis .final-text { margin-top: 24svh; }
.t-nafis .title { font-style: italic; font-weight: 500; color: #a8823f; }
.t-nafis .final-text h3 { font-style: italic; font-weight: 500; color: #a8823f; }
.t-nafis .countdown div { background: transparent; color: var(--ink); border: 1px solid #d9c9a6; box-shadow: none; }
.t-nafis .countdown b { color: #a8823f; font-weight: 500; }
.t-nafis .btn-solid { background: linear-gradient(180deg, #d8bd86, #a8823f); border-color: #a8823f; }
.t-nafis .the-day svg { fill: #c5a46d; }
.t-nafis .calendar, .t-nafis .place-card { box-shadow: 0 18px 40px -30px #a8823f; }
.t-nafis .scene .glints use { transform-box: fill-box; transform-origin: center; animation: twinkle 3s ease-in-out infinite; animation-delay: var(--d); }

/* Uzun ismlar */
.t-suzana .names.long, .t-xiva .names.long, .t-lola .names.long, .t-oydin .names.long { font-size: clamp(34px, 9.5vw, 46px); }
.intro-curtain::before { display: none; }