/* ===========================================================
   Индивидуальный облик шаблонов приглашений (коллекция 2026).
   Подключается после experience.css и переопределяет её.
   Аспан, Ақ Ниет и Күміс Толқын остаются как были —
   здесь только остальные тринадцать.

   Каждый шаблон = палитра + фон (--art, слоями) + эмблема
   (вместо буквы-монограммы) + своя типографика.
   Графика лежит в static/art/*.svg.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Forum&family=Comfortaa:wght@500;600;700&family=Unbounded:wght@500;700&family=Bad+Script&display=swap');

/* --- фото гостя: общее поведение --- */
/* если фото загружено, эмблема не нужна — иначе два «герба» подряд */
.cover-paper:has(.guest-photo:not([hidden])) .design-monogram,
.gate-card:has(.guest-photo:not([hidden])) .design-monogram{display:none!important}

/* --- фон слоями: у каждого слоя свой повтор --- */
.design-art{background-repeat:var(--art-repeat,repeat)}

/* --- размеры эмблемы в разных местах сайта --- */
.design-art{--em:96px}
.card-face{--em:74px}
.feature-art,.hero-card{--em:60px}
.cover-paper{--em:clamp(96px,17vw,128px)}
.gate-card{--em:104px}

/* ===========================================================
   ОБЩАЯ ОСНОВА НОВЫХ ШАБЛОНОВ
   =========================================================== */
:is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
    .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-qurmet,
    .design-aq-tilek,.design-tusau){--frame:0px;--art-position:center;--art-size:cover}

:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .design-names{
  font-family:'Cormorant Garamond','Playfair Display',serif;font-weight:500;letter-spacing:-.01em;line-height:1.08}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .amp{
  font-family:'Cormorant Garamond',serif;font-style:italic}

/* эмблема на месте буквы-монограммы */
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .design-monogram{
  display:grid!important;place-items:center;font-size:0!important;line-height:1;opacity:1!important;
  border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;
  width:calc(var(--em) * var(--em-k,1))!important;height:auto!important;aspect-ratio:var(--em-ratio,1);
  margin:0 auto 18px!important;background:var(--emblem) center/contain no-repeat!important;
  color:var(--tone);letter-spacing:0!important}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .gate-seal{
  border:0;border-radius:0;width:calc(var(--em) * var(--em-k,1));height:auto;aspect-ratio:var(--em-ratio,1);
  background:var(--emblem) center/contain no-repeat;margin:26px 0 22px}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .gate-seal:before{display:none}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .gate-seal span{display:none}

/* без эмблемы — только надпись */
:is(.design-kun,.design-besik,.design-shattyq,.design-tusau) .design-monogram{display:none!important}

/* обложка — вертикальная открытка, а не растянутый лист */
:is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
    .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-qurmet,
    .design-aq-tilek,.design-tusau) .cover-paper{
  max-width:min(600px,calc((100svh - 48px) * .74));padding:clamp(70px,11vh,110px) clamp(40px,7vw,64px) 64px;
  border-radius:14px;box-shadow:0 30px 80px #0d0a1a40,0 2px 10px #0d0a1a1f}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .cover-paper .design-names{
  font-size:clamp(2.7rem,5.4vw,4.3rem)}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .gate-names{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.4rem,6vw,3.5rem);line-height:1.08}

/* на тёмных шаблонах «вуаль» конверта только мутнит рисунок — убираем */
.invitation:is(.design-aru,.design-altyn,.design-saltanat,
    .design-qudalyq,.design-qurmet) .gate-card:after{display:none}
.invitation:is(.design-aru,.design-altyn,.design-saltanat,
    .design-qudalyq,.design-qurmet,.design-batyr) .intro-gate{
  background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--paper) 82%,#fff),color-mix(in srgb,var(--paper) 55%,#000))}

/* карточки каталога — единый ритм */
:is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
    .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-qurmet,
    .design-aq-tilek,.design-tusau).card-face{
  padding:44px 26px 34px!important;border-radius:14px!important}
:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek).card-face .design-names{font-size:2.15rem}

/* внутренние экраны: заголовки в тон шаблону */
.invitation:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) :is(h2,h3,.venue-name,.guest-signoff,.event-date>span,.cd-cell b){
  font-family:'Cormorant Garamond',serif;font-weight:500}
.invitation:is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
    .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) h2{font-size:clamp(2.6rem,4.6vw,3.9rem)}

/* рамка-орнамент из картинки, которая не растягивается по углам */
:is(.design-saukele,.design-batyr).design-art:after,
:is(.design-saukele,.design-batyr) .design-art:after{
  content:'';position:absolute;inset:var(--fi,8px);z-index:-2;pointer-events:none;
  border:1px solid transparent;border-image:var(--frame-img) 300 fill / var(--fw,84px) stretch round;
  background:none;opacity:1}
/* мягкое свечение по центру — поверх рамки, под текстом */
:is(.design-saukele,.design-batyr).design-art:before,
:is(.design-saukele,.design-batyr) .design-art:before{
  display:block;content:'';inset:0;border:0;opacity:1;z-index:-1;background:var(--glow)}
.card-face{--fw:78px;--fi:6px}
.feature-art,.hero-card{--fw:58px;--fi:4px}
.cover-paper{--fw:clamp(92px,17vw,138px);--fi:10px}
.gate-card{--fw:112px;--fi:10px}

/* ===========================================================
   АРУ МІНЕЗ · ұзату той
   Лунный вечер в сливовом шёлке, золотая арка и үкі невесты.
   =========================================================== */
.design-aru{--paper:#2a1530;--tone:#f6dfcf;--wash:#331a3a;--gold:#e5c38b;
  --art:linear-gradient(118deg,transparent 22%,#ffffff12 38%,transparent 52%,#ffffff0a 70%,transparent 84%),
    radial-gradient(120% 55% at 50% -5%,#b4628a70,transparent 62%),
    radial-gradient(90% 45% at 50% 108%,#7a356f99,transparent 70%),
    linear-gradient(180deg,#311838,#1d0d24);
  --art-size:100% 100%,100% 100%,100% 100%,100% 100%;
  --art-repeat:no-repeat;
  --art-position:center,center,center,center;
  --emblem:url('/static/art/uki.svg');--em-ratio:160/205;--em-k:.62}
.design-aru.design-art:before,.design-aru .design-art:before,.card .design-aru.design-art.card-face:before{
  border:1px solid var(--gold);inset:16px;opacity:.75;border-radius:999px 999px 12px 12px;
  box-shadow:inset 0 0 0 7px transparent,inset 0 0 0 8px #e5c38b55}
.design-aru .design-names{font-style:italic;font-weight:500}
.design-aru .design-kicker,.design-aru .design-date{color:var(--gold)}
.design-aru .design-kicker{letter-spacing:.32em}
.design-aru.card-face{border-radius:160px 160px 14px 14px!important;padding-top:70px!important}
.invitation.design-aru .cover-paper{border-radius:999px 999px 14px 14px;padding-top:clamp(110px,16vh,150px)}
.invitation.design-aru .gate-card{border-radius:999px 999px 12px 12px;padding-top:96px}
.invitation.design-aru .invite-btn{background:var(--gold);border-color:var(--gold);color:#2a1530!important}
.invitation.design-aru .invite-screen:not(.cover-screen){background-image:linear-gradient(118deg,transparent 30%,#ffffff08 45%,transparent 60%)}

/* ===========================================================
   САУКЕЛЕ ӘНІ · ұзату той
   Жемчужная бумага, золотая рамка-ою и силуэт саукеле.
   =========================================================== */
.design-saukele{--paper:#f0ebe1;--tone:#77511f;--wash:#f8f4ec;
  --art:radial-gradient(65% 45% at 50% 46%,#fffdf8,#fffdf800 72%),linear-gradient(#f2eee5,#ece6d9);
  --art-size:100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center,center;
  --frame-img:url('/static/kazakh-gold.webp');
  --glow:radial-gradient(52% 38% at 50% 47%,#fffdf8e6,#fffdf800 75%);
  --emblem:url('/static/art/saukele.svg');--em-ratio:200/260;--em-k:.7}
.design-saukele .design-names{font-weight:600;color:#6a4519}
.design-saukele .design-kicker{letter-spacing:.34em;opacity:.8}
.design-saukele .design-date{letter-spacing:.24em}
.invitation.design-saukele .cover-paper{padding-inline:clamp(70px,12vw,120px)}
.invitation.design-saukele .invite-btn{background:linear-gradient(135deg,#a9813f,#7a5321);border:0}

/* ===========================================================
   БАТЫР ТҰЯҒЫ · сүндет той
   Изумрудный бархат, золотая рамка и восьмиконечная звезда.
   =========================================================== */
.design-batyr{--paper:#0a342a;--tone:#ecd69e;--wash:#0e3d31;
  --art:radial-gradient(70% 50% at 50% 42%,#155343,#0a342a00 72%),linear-gradient(#0b382d,#082a22);
  --art-size:100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center,center;
  --frame-img:url('/static/emerald-gold.webp');
  --glow:radial-gradient(50% 36% at 50% 45%,#1f6e5799,#1f6e5700 75%);
  --emblem:url('/static/art/star8.svg');--em-ratio:1;--em-k:.9}
.design-batyr .design-names{font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.12}
.design-batyr .design-kicker{letter-spacing:.36em}
.design-batyr .design-date{letter-spacing:.22em;opacity:.92}
.design-batyr.card-face .design-names{font-size:1.75rem}
.invitation.design-batyr .cover-paper .design-names{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.invitation.design-batyr .cover-paper{padding-inline:clamp(70px,12vw,120px)}
.invitation.design-batyr .invite-btn{background:linear-gradient(135deg,#f3dfa6,#c99e52);border:0;color:#0a342a!important}

/* ===========================================================
   КҮН СӘУЛЕСІ · сүндет той (светлый)
   Восходящее солнце за именем, облака, тёплый персик.
   =========================================================== */
.design-kun{--paper:#ffeedd;--tone:#8c4a22;--wash:#fff7ee;
  --art:url('/static/art/cloud-day.svg'),url('/static/art/sun.svg'),linear-gradient(#ffe6c9,#ffd9b9 60%,#ffcfae);
  --art-size:100% auto,135% auto,100% 100%;--art-repeat:no-repeat;
  --art-position:center bottom,center 34%,center}
.design-kun .design-names{font:700 2.1rem/1.2 'Comfortaa',sans-serif;letter-spacing:-.02em}
.design-kun .design-kicker{letter-spacing:.28em;font-weight:700}
.design-kun .design-date{letter-spacing:.2em;font-weight:600}
.design-kun .design-names,.design-kun .gate-names{text-shadow:0 2px 18px #fff6e8}
.invitation.design-kun .cover-paper .design-names{font:700 clamp(2.6rem,5.6vw,4.2rem)/1.15 'Comfortaa',sans-serif}
.invitation.design-kun .gate-names{font-family:'Comfortaa',sans-serif;font-weight:700}
.design-kun .gate-seal{background:#fff8ee;border:0;box-shadow:0 10px 26px #a75f3330}
.design-kun .gate-seal:before{border-color:#e7b48a}
.design-kun .gate-seal span{font:700 1.7rem 'Comfortaa',sans-serif;font-style:normal}
.invitation.design-kun .invite-btn{background:linear-gradient(135deg,#f0915a,#c8602f);border:0}

/* ===========================================================
   АЛТЫН ҒАСЫР · мерейтой
   Чёрное ар-деко: золотой веер, ступенчатые углы, Forum.
   =========================================================== */
.design-altyn{--paper:#0c0a08;--tone:#f0d493;--wash:#15120d;
  --art:url('/static/art/deco-frame.svg'),
    radial-gradient(60% 40% at 50% 44%,#4a37184d,transparent 72%),
    linear-gradient(#100d0a,#070605);
  --art-size:100% 100%,100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center,center,center;
  --emblem:url('/static/art/deco.svg');--em-ratio:300/140;--em-k:1.9}
.design-altyn.design-art:before,.design-altyn .design-art:before,.card .design-altyn.design-art.card-face:before{display:none}
.design-altyn .design-names{font-family:'Forum',serif;font-weight:400;text-transform:uppercase;letter-spacing:.08em;line-height:1.15;
  background:linear-gradient(180deg,#fff0c4,#e5bd68 55%,#b98a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.design-altyn .design-kicker{letter-spacing:.42em}
.design-altyn .design-date{letter-spacing:.3em}
.design-altyn.card-face .design-names{font-size:1.65rem}
.invitation.design-altyn .cover-paper .design-names{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.invitation.design-altyn .gate-names{font-family:'Forum',serif;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.9rem,5vw,2.8rem)}
.invitation.design-altyn .cover-paper{border-radius:4px}
.invitation.design-altyn .invite-btn{background:linear-gradient(135deg,#f6e2a8,#c9973f);border:0;color:#0c0a08!important;border-radius:2px;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}
.invitation.design-altyn :is(h2,h3,.venue-name){font-family:'Forum',serif!important;text-transform:uppercase;letter-spacing:.06em}

/* ===========================================================
   САЛТАНАТ КЕШІ · мерейтой
   Винный бархат, золотой лавровый венок с инициалами.
   =========================================================== */
.design-saltanat{--paper:#4a1418;--tone:#f6ddb0;--wash:#541a1e;
  --art:linear-gradient(120deg,transparent 25%,#ffffff10 40%,transparent 55%),
    radial-gradient(80% 55% at 50% 36%,#8e3b2ccc,transparent 70%),
    linear-gradient(170deg,#5c1b1e,#360c11);
  --art-size:100% 100%,100% 100%,100% 100%;--art-repeat:no-repeat;
  --art-position:0 0,center,center;
  --emblem:url('/static/art/laurel.svg');--em-ratio:240/230;--em-k:1.15}
.design-saltanat.design-art:before,.design-saltanat .design-art:before,.card .design-saltanat.design-art.card-face:before{
  border:1px solid #e9c487;inset:16px;opacity:.6;box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6px #e9c48755}
.design-saltanat .design-monogram,.design-saltanat .gate-seal span{
  font:italic 500 calc(var(--em) * .36)/1 'Cormorant Garamond',serif!important;color:#f3d79c;padding-bottom:6%!important}
.design-saltanat .gate-seal span{display:block;font-size:2.4rem!important}
.design-saltanat .design-names{font-style:italic}
.design-saltanat .design-kicker{letter-spacing:.34em;color:#e9c487}
.invitation.design-saltanat .invite-btn{background:linear-gradient(135deg,#f3d79c,#c48f45);border:0;color:#4a1418!important}

/* ===========================================================
   БЕСІК ЖЫРЫ · бесік той
   Акварельная колыбельная: месяц, облака, пастель.
   =========================================================== */
.design-besik{--paper:#fbf7ef;--tone:#4f6283;--wash:#f6f4f0;--ring:#a9b9d3;
  --art:radial-gradient(60% 40% at 50% 46%,#fffdf8d9,#fffdf800 72%),url('/static/baby-moon.webp');
  --art-size:100% 100%,cover;--art-repeat:no-repeat;--art-position:center,center}
.design-besik .design-names{font-style:italic;font-weight:500}
.design-besik .design-kicker{letter-spacing:.32em;color:#a68a4f}
.design-besik .design-date{color:#7d8aa3;letter-spacing:.2em}
.invitation.design-besik .cover-paper{padding-bottom:clamp(120px,18vh,180px)}
.invitation.design-besik .gate-card{padding-bottom:110px}
.design-besik .gate-seal{border-color:#c6ab6f}
.design-besik .gate-seal:before{border-color:#c6ab6f66}
.invitation.design-besik .invite-btn{background:#4f6283;border-color:#4f6283;border-radius:99px}
.invitation.design-besik .invite-screen:not(.cover-screen){background-image:radial-gradient(70% 40% at 80% 0%,#dfe8f5,transparent 70%)}

/* ===========================================================
   ШАТТЫҚ КҮНІ · день рождения
   Шампань, золотое конфетти и крупная чёрная типографика.
   =========================================================== */
.design-shattyq{--paper:#f7f0e4;--tone:#1c1712;--wash:#fbf6ee;--ring:#c9a24e;
  --art:url('/static/art/confetti-gold.svg'),
    radial-gradient(70% 50% at 50% 45%,#fffaf0,#fffaf000 72%),
    linear-gradient(160deg,#f9f3e9,#eadcc4);
  --art-size:320px 320px,100% 100%,100% 100%;--art-repeat:repeat,no-repeat,no-repeat;
  --art-position:0 0,center,center}
.design-shattyq.design-art:before,.design-shattyq .design-art:before,.card .design-shattyq.design-art.card-face:before{
  border:1px solid #c9a24e;inset:14px;opacity:.7}
.design-shattyq .design-names{font:700 2.3rem/1.04 'Unbounded','Manrope',sans-serif;letter-spacing:-.04em;text-transform:uppercase;color:#1c1712}
.design-shattyq .amp{color:#b08636}
.design-shattyq .design-kicker{display:inline-block;border:1px solid #c9a24e;border-radius:99px;padding:6px 16px;letter-spacing:.24em;color:#8c6420;background:#fffaf0b3}
.design-shattyq .design-date{letter-spacing:.24em;color:#8c6420;font-weight:700}
.design-shattyq.card-face .design-names{font-size:1.9rem}
.invitation.design-shattyq .cover-paper .design-names{font:700 clamp(2.4rem,5.6vw,4.3rem)/1.04 'Unbounded',sans-serif;text-transform:uppercase}
.invitation.design-shattyq .gate-names{font:700 clamp(2rem,6vw,3rem)/1.06 'Unbounded',sans-serif;text-transform:uppercase;color:#1c1712}
.design-shattyq .gate-seal{border:2px solid #c9a24e;background:#fffaf0}
.design-shattyq .gate-seal:before{border-color:#c9a24e66}
.design-shattyq .gate-seal span{font:700 1.4rem 'Unbounded',sans-serif;font-style:normal}
.invitation.design-shattyq .invite-btn{background:#1c1712;border:0;color:#f0d79a!important;border-radius:99px;letter-spacing:.06em}
.invitation.design-shattyq :is(h2,h3){font-family:'Unbounded',sans-serif;font-weight:500;letter-spacing:-.03em}
.invitation.design-shattyq h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.invitation.design-shattyq .invite-screen:not(.cover-screen){background-image:url('/static/art/confetti-gold.svg');background-size:420px}
/* ===========================================================
   САЛТАНАТТЫ ҚҰДАЛЫҚ · құдалық
   Бордовый бархат, золотой шаңырақ и ою-лента.
   =========================================================== */
.design-qudalyq{--paper:#3d0d18;--tone:#f3dba8;--wash:#46111e;
  --art:url('/static/art/band.svg'),url('/static/art/band.svg'),
    radial-gradient(70% 50% at 50% 42%,#7b2338,transparent 72%),
    linear-gradient(#47101d,#2a0710);
  --art-size:44px auto,44px auto,100% 100%,100% 100%;
  --art-repeat:repeat-x,repeat-x,no-repeat,no-repeat;
  --art-position:center 24px,center calc(100% - 24px),center,center;
  --emblem:url('/static/art/shanyrak.svg');--em-ratio:1;--em-k:1}
.design-qudalyq.design-art:before,.design-qudalyq .design-art:before,.card .design-qudalyq.design-art.card-face:before{inset:14px;border:3px double #e8c88a;opacity:.7}
.design-qudalyq .design-names{font-weight:600;font-size:2rem}
.design-qudalyq .design-kicker{letter-spacing:.36em;color:#e8c88a}
.design-qudalyq .design-date{letter-spacing:.24em}
.design-qudalyq.card-face .design-names{font-size:1.75rem}
.design-qudalyq.card-face{padding:62px 26px 56px!important}
.design-qudalyq.card-face .design-caption{display:none}
.invitation.design-qudalyq .cover-paper{padding-top:clamp(96px,13vh,120px);padding-bottom:96px}
.invitation.design-qudalyq .gate-card{padding-top:84px;padding-bottom:80px}
.invitation.design-qudalyq .cover-paper .design-names{font-size:clamp(2.2rem,4.6vw,3.5rem)}
.invitation.design-qudalyq .gate-names{font-size:clamp(2rem,5vw,2.9rem)}
.invitation.design-qudalyq .invite-btn{background:linear-gradient(135deg,#f3dba8,#c4924a);border:0;color:#3d0d18!important}

/* ===========================================================
   ҚАЛЫҢ МАЛ КЕШІ · құдалық
   Степь на закате: тёплое небо и барханы.
   =========================================================== */
.design-qalyn{--paper:#f8e7cd;--tone:#55290f;--wash:#fcf2e3;
  --art:url('/static/art/steppe.svg'),linear-gradient(#fcefdc 0%,#f8dfbd 52%,#f0c595 100%);
  --art-size:100% auto,100% 100%;--art-repeat:no-repeat;--art-position:center bottom,center;
  --emblem:url('/static/art/band.svg');--em-ratio:80/38;--em-k:1.2}
.design-qalyn.design-art:before,.design-qalyn .design-art:before,.card .design-qalyn.design-art.card-face:before{border:1px solid #8a532f;inset:16px;opacity:.45;border-radius:999px 999px 10px 10px}
.design-qalyn .design-monogram{filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.62)}
.design-qalyn .gate-seal{filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.62)}
.design-qalyn .design-names{font-weight:600;font-size:2rem}
.design-qalyn .design-kicker{letter-spacing:.34em}
.design-qalyn .design-date{letter-spacing:.24em}
.design-qalyn.card-face{border-radius:160px 160px 14px 14px!important;justify-content:flex-start!important;padding-top:64px!important}
.design-qalyn.card-face .design-names{font-size:1.65rem}
.design-qalyn.card-face .design-caption{display:none}
.invitation.design-qalyn .cover-paper{border-radius:999px 999px 14px 14px;padding-top:clamp(110px,15vh,140px);padding-bottom:clamp(150px,24vh,220px)}
.invitation.design-qalyn .cover-paper .design-names{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.invitation.design-qalyn .gate-card{border-radius:999px 999px 12px 12px;padding-top:100px;padding-bottom:150px}
.invitation.design-qalyn .gate-names{font-size:clamp(1.9rem,5vw,2.7rem)}
.invitation.design-qalyn .invite-btn{background:#55290f;border-color:#55290f;color:#fcefdc!important}

/* ===========================================================
   ҚҰРМЕТ ПЕН ЕС · ас шақыру
   Тихий графит, серебряная линия. Без праздничных деталей.
   =========================================================== */
.design-qurmet{--paper:#1d2329;--tone:#e3e8ec;--wash:#232a31;
  --art:radial-gradient(80% 50% at 50% 30%,#3a4652aa,transparent 70%),linear-gradient(#232b33,#161b20);
  --art-size:100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center,center;
  --emblem:url('/static/art/divider-silver.svg');--em-ratio:280/24;--em-k:1.9}
.design-qurmet.design-art:before,.design-qurmet .design-art:before,.card .design-qurmet.design-art.card-face:before{border:1px solid #c9d1d8;inset:18px;opacity:.35}
.design-qurmet .design-names{font-weight:500}
.design-qurmet .design-kicker{letter-spacing:.38em;opacity:.75}
.design-qurmet .design-date{letter-spacing:.24em;opacity:.8}
.design-qurmet .design-monogram{order:9;margin:22px auto 0!important}
.invitation.design-qurmet .invite-btn{background:transparent;border:1px solid #c9d1d8;color:#e3e8ec!important}

/* ===========================================================
   АҚ ТІЛЕК · ас шақыру (светлый)
   Тёплая бумага с зерном, сепия, тишина.
   =========================================================== */
.design-aq-tilek{--paper:#f4efe5;--tone:#51473a;--wash:#faf7f0;
  --art:url('/static/art/grain.svg'),radial-gradient(80% 60% at 50% 35%,#fffdf8,transparent 75%),linear-gradient(#f6f2e9,#ebe3d3);
  --art-size:240px 240px,100% 100%,100% 100%;--art-repeat:repeat,no-repeat,no-repeat;--art-position:0 0,center,center;
  --emblem:url('/static/art/divider-sepia.svg');--em-ratio:280/24;--em-k:1.9}
.design-aq-tilek.design-art:before,.design-aq-tilek .design-art:before,.card .design-aq-tilek.design-art.card-face:before{border:1px solid #8a7a64;inset:18px;opacity:.4;border-radius:999px 999px 6px 6px}
.design-aq-tilek .design-names{font-style:italic;font-weight:500}
.design-aq-tilek .design-kicker{letter-spacing:.38em;opacity:.75}
.design-aq-tilek .design-monogram{order:9;margin:22px auto 0!important}
.design-aq-tilek.card-face{border-radius:160px 160px 14px 14px!important;padding-top:70px!important}
.invitation.design-aq-tilek .cover-paper{border-radius:999px 999px 14px 14px;padding-top:clamp(120px,17vh,160px)}
.invitation.design-aq-tilek .gate-card{border-radius:999px 999px 10px 10px;padding-top:100px}
.invitation.design-aq-tilek .invite-btn{background:#51473a;border-color:#51473a}

/* ===========================================================
   АЛҒАШҚЫ ҚАДАМ · тұсаукесер
   Мятная нежность, следы малыша и разрезанная ала жіп.
   =========================================================== */
.design-tusau{--paper:#e8f4ed;--tone:#2a5844;--wash:#f3faf6;
  --art:url('/static/art/footprints.svg'),url('/static/art/ala-jip.svg'),
    radial-gradient(70% 50% at 50% 34%,#ffffff,#ffffff00 70%),
    linear-gradient(#eef8f2,#d5ebdf);
  --art-size:34% auto,112% auto,100% 100%,100% 100%;--art-repeat:no-repeat;
  --art-position:right 8% bottom 12%,center bottom 5%,center,center}
.design-tusau .design-names{font:700 2.05rem/1.2 'Comfortaa',sans-serif;letter-spacing:-.02em;overflow-wrap:normal;hyphens:manual}
.design-tusau.card-face .design-names{font-size:1.55rem}
.design-tusau .design-kicker{letter-spacing:.28em;font-weight:700}
.design-tusau .design-date{letter-spacing:.2em;font-weight:600}
.design-tusau.card-face{border-radius:22px!important;justify-content:flex-start!important;padding-top:70px!important}
.invitation.design-tusau .cover-paper{border-radius:28px;padding-bottom:clamp(150px,22vh,200px)}
.invitation.design-tusau .cover-paper .design-names{font:700 clamp(2.5rem,5.4vw,4rem)/1.15 'Comfortaa',sans-serif}
.invitation.design-tusau .gate-card{border-radius:24px;padding-bottom:130px}
.invitation.design-tusau .gate-names{font-family:'Comfortaa',sans-serif;font-weight:700}
.design-tusau .gate-seal span{font:700 1.6rem 'Comfortaa',sans-serif;font-style:normal}
.invitation.design-tusau .invite-btn{background:#2a5844;border-color:#2a5844;border-radius:99px}

/* ===========================================================
   мелкие экраны
   =========================================================== */
@media(max-width:760px){
  .card-face{--em:58px;--fw:60px}
  :is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
      .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-qurmet,
      .design-aq-tilek,.design-tusau).card-face{padding:34px 16px 24px!important}
  :is(.design-aru,.design-saukele,.design-batyr,.design-altyn,.design-saltanat,.design-besik,
      .design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek).card-face .design-names{font-size:1.55rem}
  .design-aru.card-face,.design-aq-tilek.card-face,.design-qalyn.card-face{padding-top:52px!important}
  .design-besik.card-face{padding-top:70px!important}
  .design-shattyq.card-face .design-names,.design-batyr.card-face .design-names,.design-qudalyq.card-face .design-names,
  .design-altyn.card-face .design-names,.design-qalyn.card-face .design-names{font-size:1.3rem}
  .design-kun.card-face .design-names,.design-tusau.card-face .design-names{font-size:1.5rem}
  .cover-paper{--fw:96px}
  :is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
      .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-qurmet,
      .design-aq-tilek,.design-tusau) .cover-paper{max-width:none;padding:90px 34px 70px}
  .invitation:is(.design-saukele,.design-batyr) .cover-paper{padding-inline:62px}
  .invitation.design-besik .cover-paper{padding-top:150px}
  .invitation.design-aru .cover-paper,.invitation.design-qalyn .cover-paper,.invitation.design-aq-tilek .cover-paper{padding-top:120px}
}
/* ===========================================================
   ФОТО ГЕРОЕВ ПРАЗДНИКА
   Крупное фото в рамке, которая продолжает стиль шаблона:
   арка, медальон, ар-деко, полароид или мягкая виньетка.
   Фото есть и на конверте, и на обложке.
   =========================================================== */
.design-art .guest-photo,.gate-card .gate-photo{
  display:block;width:min(74%,340px);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
  margin:6px auto 30px;border:0;border-radius:4px;
  --ring:var(--tone);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ring) 35%,transparent),0 26px 60px #0b081a40,0 6px 14px #0b081a1f;
  outline:1px solid #ffffffb3;outline-offset:-12px}
.design-art .guest-photo[hidden],.gate-card .gate-photo[hidden]{display:none}
.gate-card .gate-photo{width:min(62%,250px);margin:22px auto 22px}
.gate-card:has(.gate-photo:not([hidden])) .gate-seal{display:none}
/* мягкое появление */
.design-art .guest-photo:not([hidden]){animation:photo-in 1.1s cubic-bezier(.2,.75,.3,1) both}
@keyframes photo-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* золотое кольцо там, где есть золото */
:is(.design-aru,.design-saltanat,.design-besik,.design-saukele,.design-batyr,.design-qudalyq,.design-altyn) :is(.guest-photo,.gate-photo){--ring:#e5c38b}
.design-saukele :is(.guest-photo,.gate-photo){--ring:#b08a45}

/* Медальон: батыр и құдалық — круг с двойным золотым кольцом */
:is(.design-batyr,.design-qudalyq) :is(.guest-photo,.gate-photo){
  width:min(64%,280px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 4px var(--paper),0 0 0 6px #e5c38b,0 0 0 13px var(--paper),0 0 0 14px #e5c38b88,0 30px 70px #0009;
  outline:1px dashed #e5c38b66;outline-offset:22px}
:is(.design-batyr,.design-qudalyq) .gate-photo{width:min(54%,210px)}

/* Ар-деко: алтын — прямоугольник со ступенчатой золотой рамкой */
.design-altyn :is(.guest-photo,.gate-photo){
  border-radius:2px;aspect-ratio:3/4;width:min(66%,300px);filter:contrast(1.04) saturate(.92);
  box-shadow:0 0 0 3px #0c0a08,0 0 0 4px #e5c38b,0 0 0 10px #0c0a08,0 0 0 11px #e5c38b99,0 30px 70px #000c;
  outline:none}

/* Полароид с голографической каймой: шаттық */
.design-shattyq :is(.guest-photo,.gate-photo){
  border-radius:6px;aspect-ratio:4/5;width:min(64%,290px);transform:rotate(-3deg);
  border:12px solid #fffdf8;border-bottom-width:44px;background:#fffdf8;
  box-shadow:0 2px 0 #e8dcc6,0 30px 60px #3a2a1033;outline:none;animation:none}

/* Мягкая виньетка, тающая в фоне: бесік, ақ ниет, күн */
:is(.design-besik,.design-aq-niet,.design-kun) :is(.guest-photo,.gate-photo){
  width:min(86%,400px);border-radius:50% 50% 46% 46%/42% 42% 58% 58%;box-shadow:none;outline:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,transparent 100%)}

/* Память: құрмет — овал, тонкое серебро, приглушённые цвета */
.design-qurmet :is(.guest-photo,.gate-photo){
  width:min(56%,240px);aspect-ratio:4/5;border-radius:50%;filter:saturate(.55) contrast(1.02);
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px #c9d1d899,0 24px 50px #0008;outline:1px solid #c9d1d833;outline-offset:12px}
.design-aq-tilek :is(.guest-photo,.gate-photo){filter:sepia(.18) saturate(.8);--ring:#8a7a64}

/* Детские: мягкая «капля» с белой каймой */
.design-tusau :is(.guest-photo,.gate-photo){
  border-radius:46% 54% 52% 48%/52% 46% 54% 48%;aspect-ratio:1;width:min(66%,290px);
  box-shadow:0 0 0 8px #ffffffd9,0 20px 50px #2a58443a;outline:2px dashed #2a584440;outline-offset:16px}

/* старые три шаблона — та же арка в их цветах */
.design-aspan :is(.guest-photo,.gate-photo){--ring:#713248}
.design-tolqyn :is(.guest-photo,.gate-photo){--ring:#20565d}

/* фото на карточке-обложке: имена чуть компактнее, чтобы всё влезло на экран */
.cover-paper:has(.guest-photo:not([hidden])) .design-names{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.cover-paper:has(.guest-photo:not([hidden])) .design-kicker{margin-bottom:22px}
.invitation:not(.design-aru,.design-qalyn,.design-aq-tilek,.design-besik,.design-aspan) .cover-paper:has(.guest-photo:not([hidden])){padding-top:clamp(56px,8vh,80px)}

@media(max-width:760px){
  .design-art .guest-photo{width:min(80%,300px);margin-bottom:24px;outline-offset:10px}
  :is(.design-batyr,.design-qudalyq) .guest-photo{width:min(70%,240px);outline-offset:16px}
  .gate-card .gate-photo{width:min(60%,210px)}
}
/* высокий конверт с фото не должен обрезаться на телефоне */
.intro-gate{overflow-y:auto;place-items:safe center}

/* ===========================================================
   БЕЗ ФОТО — та же рамка, но с эмблемой или инициалами внутри,
   чтобы обложка не выглядела пустой.
   =========================================================== */
:is(.design-aru,.design-saltanat,.design-batyr,.design-qudalyq,.design-altyn){--ring:#e5c38b}
.design-saukele{--ring:#b08a45}
.invitation:is(.design-aru,.design-saukele,.design-batyr,.design-kun,.design-altyn,.design-saltanat,
    .design-besik,.design-shattyq,.design-qudalyq,.design-qalyn,.design-tusau)
  .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  display:grid!important;place-items:center;width:clamp(124px,36%,190px)!important;height:auto!important;aspect-ratio:1!important;
  border-radius:50%!important;margin:6px auto 36px!important;
  background:var(--emblem,none) center/56% auto no-repeat,
    radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--ring,var(--tone)) 20%,transparent),color-mix(in srgb,var(--ring,var(--tone)) 5%,transparent) 75%)!important;
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px color-mix(in srgb,var(--ring,var(--tone)) 65%,transparent),0 22px 50px #0b081a33!important;
  outline:1px solid color-mix(in srgb,var(--ring,var(--tone)) 38%,transparent);outline-offset:12px}
/* инициалы там, где нет эмблемы */
.invitation:is(.design-kun,.design-besik,.design-shattyq,.design-tusau)
  .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  font:italic 500 clamp(2.6rem,7vw,3.6rem)/1 'Cormorant Garamond',serif!important;color:var(--tone);letter-spacing:.04em!important}
.invitation.design-saltanat .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  background-size:80% auto,100% 100%!important;font-size:2.4rem!important}
/* формы рамок — как у фото */
.invitation:is(.design-batyr,.design-qudalyq) .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:50%!important;
  box-shadow:0 0 0 4px var(--paper),0 0 0 6px #e5c38b,0 0 0 13px var(--paper),0 0 0 14px #e5c38b88,0 24px 60px #0008!important;
  outline:1px dashed #e5c38b66;outline-offset:22px}
.invitation.design-altyn .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:3/4!important;border-radius:2px!important;background-size:74% auto,100% 100%!important;outline:none;
  box-shadow:0 0 0 3px #0c0a08,0 0 0 4px #e5c38b,0 0 0 10px #0c0a08,0 0 0 11px #e5c38b99,0 24px 60px #000c!important}
.invitation.design-shattyq .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:50%!important;outline:1px solid #c9a24e66;outline-offset:10px;
  font-family:'Unbounded',sans-serif!important;font-style:normal!important;font-weight:700!important;font-size:2.4rem!important;
  background:#fffaf0!important;box-shadow:0 0 0 2px #c9a24e,0 20px 50px #3a2a1022!important}
.invitation.design-tusau .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:46% 54% 52% 48%/52% 46% 54% 48%!important;font-family:'Comfortaa',sans-serif!important;font-style:normal!important;font-weight:700!important;
  background:#ffffffb3!important;box-shadow:0 0 0 8px #ffffff80,0 18px 40px #2a58442e!important;outline:2px dashed #2a584440;outline-offset:16px}
.invitation:is(.design-kun,.design-besik) .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:50%!important;outline:none}
.invitation.design-kun .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  font-family:'Comfortaa',sans-serif!important;font-style:normal!important;font-weight:700!important;background:#fff8eecc!important;box-shadow:0 0 0 8px #ffffff80,0 18px 40px #a75f3333!important}
.invitation.design-besik .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  background:#fffdf8cc!important;box-shadow:0 0 0 1px #c6ab6f,0 0 0 8px #fbf7ef,0 0 0 9px #c6ab6f66,0 18px 40px #4f628322!important}.invitation:is(.design-kun,.design-besik,.design-shattyq,.design-tusau)
  .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{opacity:1!important}
.invitation.design-besik .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{color:#4f6283}
.invitation.design-shattyq .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{color:#1c1712}

/* в окошке предпросмотра полосу прокрутки не показываем */
html:has(body[data-preview="true"]){scrollbar-width:none}
html:has(body[data-preview="true"])::-webkit-scrollbar{display:none}

/* ===========================================================
   НОВАЯ ВОЛНА 2026 — восемь актуальных дизайнов
   Зәйтүн Бағы, Алтын Мөр, Алатау Таңы, Қызғалдақ, Нәзік,
   Ұлан, Інжу, Шарлар.
   =========================================================== */
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar){
  --frame:0px;--art-position:center;--art-size:cover}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) :is(.design-names,.gate-names){
  font-family:'Cormorant Garamond','Playfair Display',serif;font-weight:500;letter-spacing:-.01em;line-height:1.08}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) .amp{font-family:'Cormorant Garamond',serif;font-style:italic}
/* эмблемы */
:is(.design-mor,.design-nazik,.design-ulan,.design-inju) .design-monogram{
  display:grid!important;place-items:center;font-size:0!important;line-height:1;opacity:1!important;
  border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;
  width:calc(var(--em) * var(--em-k,1))!important;height:auto!important;aspect-ratio:var(--em-ratio,1);
  margin:0 auto 18px!important;background:var(--emblem) center/contain no-repeat!important;color:var(--tone);letter-spacing:0!important}
:is(.design-mor,.design-nazik,.design-ulan,.design-inju) .gate-seal{
  border:0;border-radius:0;width:calc(var(--em) * var(--em-k,1));height:auto;aspect-ratio:var(--em-ratio,1);
  background:var(--emblem) center/contain no-repeat;margin:26px 0 22px}
:is(.design-mor,.design-nazik,.design-ulan,.design-inju) .gate-seal:before{display:none}
:is(.design-nazik,.design-ulan) .gate-seal span{display:none}
:is(.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-sharlar) .design-monogram{display:none!important}
/* обложка-открытка */
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar) .cover-paper{
  max-width:min(600px,calc((100svh - 48px) * .74));padding:clamp(70px,11vh,110px) clamp(40px,7vw,64px) 64px;
  border-radius:14px;box-shadow:0 30px 80px #0d0a1a40,0 2px 10px #0d0a1a1f}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) .cover-paper .design-names{font-size:clamp(2.7rem,5.4vw,4.3rem)}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) .gate-names{font-size:clamp(2.4rem,6vw,3.5rem)}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar).card-face{padding:44px 26px 34px!important;border-radius:14px!important}
:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju).card-face .design-names{font-size:2.15rem}
.invitation:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) :is(h2,h3,.venue-name,.guest-signoff,.event-date>span,.cd-cell b){
  font-family:'Cormorant Garamond',serif;font-weight:500}
.invitation:is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju) h2{font-size:clamp(2.6rem,4.6vw,3.9rem)}

/* ---------- ЗӘЙТҮН БАҒЫ · свадьба: шалфей и оливковые ветви ---------- */
.design-zaitun{--paper:#f7f5ee;--tone:#3c4730;--wash:#fbfaf5;--ring:#8d9a6c;
  --art:url('/static/art/olive-l.svg'),url('/static/art/olive-r.svg'),
    radial-gradient(60% 42% at 50% 50%,#fffef9,#fffef900 72%),linear-gradient(#f8f7f0,#eceee2);
  --art-size:82% auto,82% auto,100% 100%,100% 100%;--art-repeat:no-repeat;
  --art-position:left -6% top -1%,right -6% bottom -1%,center,center}
.design-zaitun.design-art:before,.design-zaitun .design-art:before,.card .design-zaitun.design-art.card-face:before{border:1px solid #8d9a6c;inset:14px;opacity:.45}
.design-zaitun .design-names{font-style:italic}
.design-zaitun .design-kicker{letter-spacing:.34em;color:#7d8b5e}
.design-zaitun .design-date{letter-spacing:.24em;color:#6b7650}
.invitation.design-zaitun .cover-paper{padding-block:clamp(110px,16vh,150px) clamp(110px,16vh,150px)}
.invitation.design-zaitun .invite-btn{background:#4f5b3f;border-color:#4f5b3f;border-radius:99px}
.invitation.design-zaitun .invite-screen:not(.cover-screen){background-image:url('/static/art/olive-l.svg');background-repeat:no-repeat;background-size:min(60%,340px) auto;background-position:left -4% top 0}

/* ---------- АЛТЫН МӨР · свадьба: хлопковая бумага и сургучная печать ---------- */
.design-mor{--paper:#f4ede1;--tone:#4f1a22;--wash:#faf6ef;--ring:#b8955a;
  --art:url('/static/art/grain.svg'),radial-gradient(65% 45% at 50% 45%,#fffbf3,#fffbf300 72%),linear-gradient(#f6f0e5,#ebe1cf);
  --art-size:240px 240px,100% 100%,100% 100%;--art-repeat:repeat,no-repeat,no-repeat;--art-position:0 0,center,center;
  --emblem:url('/static/art/seal.svg');--em-ratio:1;--em-k:1.05}
.design-mor.design-art:before,.design-mor .design-art:before,.card .design-mor.design-art.card-face:before{
  border:1px solid #b8955a;inset:14px;opacity:.8;box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6px #b8955a66}
.design-mor .design-monogram,.design-mor .gate-seal span{
  font:600 calc(var(--em) * .27)/1 'Cormorant Garamond',serif!important;color:#f3cfc4!important;letter-spacing:.04em!important;
  text-shadow:0 -1px 0 #5a0e1a,0 1px 0 #d9707e88}
.design-mor .gate-seal span{display:block;font-size:1.9rem!important;font-style:normal}
.design-mor .design-names{font-weight:500;letter-spacing:.01em}
.design-mor .design-kicker{letter-spacing:.42em;color:#9a7a45}
.design-mor .design-date{letter-spacing:.3em;color:#7d5f3a}
.invitation.design-mor .invite-btn{background:#6e1f2b;border-color:#6e1f2b;letter-spacing:.06em}

/* ---------- АЛАТАУ ТАҢЫ · свадьба: рассвет над снежными вершинами ---------- */
.design-alatau{--paper:#f1f1f6;--tone:#2a3a5e;--wash:#f6f7fb;--ring:#8e9dcb;
  --art:url('/static/art/alatau.svg'),radial-gradient(70% 30% at 50% 78%,#ffd9c4cc,#ffd9c400 70%),
    linear-gradient(#eef1f8 0%,#f3eef3 48%,#f9e3d8 78%);
  --art-size:100% auto,100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center bottom,center,center}
.design-alatau .design-kicker{letter-spacing:.36em;color:#a8735d}
.design-alatau .design-date{letter-spacing:.24em;color:#5b6a91}
.design-alatau .design-names{font-weight:500}
.design-alatau.card-face{justify-content:flex-start!important;padding-top:58px!important}
.design-alatau.card-face .design-caption{display:none}
.invitation.design-alatau .cover-paper{padding-bottom:clamp(170px,26vh,240px)}
.invitation.design-alatau .gate-card{padding-bottom:150px}
.invitation.design-alatau .invite-btn{background:#2a3a5e;border-color:#2a3a5e;border-radius:99px}

/* ---------- ҚЫЗҒАЛДАҚ · ұзату: букет алых тюльпанов ---------- */
.design-qyzgaldaq{--paper:#fbf4ec;--tone:#7a1f2e;--wash:#fff9f3;--ring:#d9485f;
  --art:url('/static/art/tulips.svg'),radial-gradient(60% 40% at 50% 38%,#fffdf9,#fffdf900 72%),linear-gradient(#fdf8f1,#f5e6d8);
  --art-size:74% auto,100% 100%,100% 100%;--art-repeat:no-repeat;--art-position:center bottom 2%,center,center}
.design-qyzgaldaq.design-art:before,.design-qyzgaldaq .design-art:before,.card .design-qyzgaldaq.design-art.card-face:before{
  border:1px solid #d9485f;inset:14px;opacity:.35;border-radius:999px 999px 10px 10px}
.design-qyzgaldaq .design-names{font-style:italic;font-weight:600}
.design-qyzgaldaq .design-kicker{letter-spacing:.34em;color:#4f7a48}
.design-qyzgaldaq .design-date{letter-spacing:.24em}
.design-qyzgaldaq.card-face{border-radius:160px 160px 14px 14px!important;justify-content:flex-start!important;padding-top:74px!important}
.design-qyzgaldaq.card-face .design-caption{display:none}
.invitation.design-qyzgaldaq .cover-paper{border-radius:999px 999px 14px 14px;padding-top:clamp(120px,17vh,160px);padding-bottom:clamp(200px,30vh,280px)}
.invitation.design-qyzgaldaq .gate-card{border-radius:999px 999px 12px 12px;padding-top:100px;padding-bottom:190px}
.invitation.design-qyzgaldaq .invite-btn{background:#b5283f;border-color:#b5283f;border-radius:99px}

/* ---------- НӘЗІК · сырға салу: пудра, атласный бант, жемчуг ---------- */
.design-nazik{--paper:#f9eaeb;--tone:#7f3f4d;--wash:#fdf4f4;--ring:#d98a96;
  --art:url('/static/art/pearl-swag.svg'),url('/static/art/pearl-swag.svg'),
    radial-gradient(60% 42% at 50% 48%,#fffafa,#fffafa00 72%),linear-gradient(#fcf1f1,#f2d8db);
  --art-size:220px auto,220px auto,100% 100%,100% 100%;--art-repeat:repeat-x,repeat-x,no-repeat,no-repeat;
  --art-position:center 10px,center calc(100% - 4px),center,center;
  --emblem:url('/static/art/bow.svg');--em-ratio:200/190;--em-k:1.05}
.design-nazik .design-names{font-style:italic}
.design-nazik .design-kicker{letter-spacing:.34em;color:#b07280}
.design-nazik .design-date{letter-spacing:.24em}
.design-nazik.card-face{padding-top:52px!important}
.invitation.design-nazik .invite-btn{background:#b9707f;border-color:#b9707f;border-radius:99px}
.invitation.design-nazik .invite-screen:not(.cover-screen){background-image:url('/static/art/pearl-swag.svg');background-repeat:repeat-x;background-size:220px auto;background-position:center 8px}

/* ---------- ҰЛАН · сүндет: небесный голубой, белое золото, ою ---------- */
.design-ulan{--paper:#e9f2fa;--tone:#1d4a73;--wash:#f3f8fc;--ring:#c9a24e;
  --art:url('/static/art/band.svg'),url('/static/art/band.svg'),
    radial-gradient(70% 50% at 50% 44%,#ffffff,#ffffff00 72%),linear-gradient(#f2f7fc,#d6e6f4);
  --art-size:44px auto,44px auto,100% 100%,100% 100%;--art-repeat:repeat-x,repeat-x,no-repeat,no-repeat;
  --art-position:center 24px,center calc(100% - 24px),center,center;
  --emblem:url('/static/art/star8.svg');--em-ratio:1;--em-k:.95}
.design-ulan.design-art:before,.design-ulan .design-art:before,.card .design-ulan.design-art.card-face:before{inset:14px;border:3px double #c9a24e;opacity:.75}
.design-ulan .design-names{font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.12}
.design-ulan .design-kicker{letter-spacing:.36em;color:#a8822f}
.design-ulan .design-date{letter-spacing:.22em}
.design-ulan.card-face{padding:62px 26px 56px!important}
.design-ulan.card-face .design-names{font-size:1.75rem!important}
.design-ulan.card-face .design-caption{display:none}
.invitation.design-ulan .cover-paper{padding-block:clamp(96px,13vh,120px) 96px}
.invitation.design-ulan .cover-paper .design-names{font-size:clamp(2.2rem,4.6vw,3.5rem)!important}
.invitation.design-ulan .invite-btn{background:#1d4a73;border-color:#1d4a73;color:#f3dfa6!important}

/* ---------- ІНЖУ · юбилей: жемчуг и серебро ---------- */
.design-inju{--paper:#eef0f4;--tone:#3b4252;--wash:#f6f7f9;--ring:#aab2c2;
  --art:url('/static/art/pearl-swag.svg'),radial-gradient(60% 42% at 50% 44%,#ffffff,#ffffff00 72%),linear-gradient(160deg,#f7f8fa,#dde1e8);
  --art-size:240px auto,100% 100%,100% 100%;--art-repeat:repeat-x,no-repeat,no-repeat;--art-position:center 12px,center,center;
  --emblem:url('/static/art/pearl-ring.svg');--em-ratio:1;--em-k:1.15}
.design-inju.design-art:before,.design-inju .design-art:before,.card .design-inju.design-art.card-face:before{border:1px solid #aab2c2;inset:16px;opacity:.7}
.design-inju .design-monogram,.design-inju .gate-seal span{font:italic 500 calc(var(--em) * .34)/1 'Cormorant Garamond',serif!important;color:#5a6274!important}
.design-inju .gate-seal span{display:block;font-size:2.2rem!important}
.design-inju .design-names{font-style:italic}
.design-inju .design-kicker{letter-spacing:.38em;color:#7d8597}
.design-inju .design-date{letter-spacing:.26em}
.design-inju.card-face{padding-top:56px!important}
.invitation.design-inju .invite-btn{background:linear-gradient(135deg,#9aa3b5,#5d6679);border:0;border-radius:99px}

/* ---------- ШАРЛАР · детский день рождения ---------- */
.design-sharlar{--paper:#fff7f1;--tone:#4f3f74;--wash:#fffaf6;--ring:#f49bb3;
  --art:url('/static/art/balloons.svg'),url('/static/art/balloons.svg'),
    radial-gradient(60% 40% at 50% 55%,#ffffff,#ffffff00 72%),linear-gradient(#fff9f4,#fde9ee);
  --art-size:46% auto,30% auto,100% 100%,100% 100%;--art-repeat:no-repeat;
  --art-position:right -8% top -3%,left -6% top 8%,center,center}
.design-sharlar .design-names{font:700 2.1rem/1.15 'Comfortaa',sans-serif;letter-spacing:-.02em}
.design-sharlar .design-kicker{letter-spacing:.26em;font-weight:700;color:#e0708f}
.design-sharlar .design-date{letter-spacing:.2em;font-weight:600}
.design-sharlar.card-face{padding-top:110px!important}
.design-sharlar.card-face .design-names{font-size:1.75rem}
.invitation.design-sharlar .cover-paper{padding-top:clamp(170px,26vh,230px)}
.invitation.design-sharlar .cover-paper .design-names{font:700 clamp(2.6rem,5.6vw,4.2rem)/1.15 'Comfortaa',sans-serif}
.invitation.design-sharlar .gate-card{padding-top:150px}
.invitation.design-sharlar .gate-names{font-family:'Comfortaa',sans-serif;font-weight:700}
.design-sharlar .gate-seal span{font:700 1.6rem 'Comfortaa',sans-serif;font-style:normal}
.invitation.design-sharlar .invite-btn{background:linear-gradient(135deg,#f49bb3,#ab98f2);border:0;border-radius:99px}
.invitation.design-sharlar :is(h2,h3){font-family:'Comfortaa',sans-serif;font-weight:700;letter-spacing:-.02em}
.invitation.design-sharlar h2{font-size:clamp(2rem,3.6vw,2.8rem)}

/* ---------- фото в новых шаблонах ---------- */
.design-ulan :is(.guest-photo,.gate-photo){
  width:min(64%,280px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 4px var(--paper),0 0 0 6px #c9a24e,0 0 0 13px var(--paper),0 0 0 14px #c9a24e88,0 30px 70px #1d4a7333;
  outline:1px dashed #c9a24e66;outline-offset:22px}
.design-sharlar :is(.guest-photo,.gate-photo){
  border-radius:46% 54% 52% 48%/52% 46% 54% 48%;aspect-ratio:1;width:min(66%,290px);
  box-shadow:0 0 0 8px #ffffffd9,0 20px 50px #4f3f7433;outline:2px dashed #f49bb380;outline-offset:16px}
.design-inju :is(.guest-photo,.gate-photo){border-radius:50%;aspect-ratio:4/5;width:min(58%,250px)}
.design-mor :is(.guest-photo,.gate-photo){border-radius:4px;aspect-ratio:4/5;width:min(64%,290px);outline-offset:10px}

/* ---------- без фото — рамка-медальон ---------- */
.invitation:is(.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar)
  .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  display:grid!important;place-items:center;width:clamp(124px,36%,190px)!important;height:auto!important;aspect-ratio:1!important;
  border-radius:50%!important;margin:6px auto 36px!important;opacity:1!important;
  background:var(--emblem,none) center/56% auto no-repeat,
    radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--ring) 18%,#fff),color-mix(in srgb,var(--ring) 6%,#fff) 75%)!important;
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px color-mix(in srgb,var(--ring) 70%,transparent),0 22px 50px #0b081a22!important;
  outline:1px solid color-mix(in srgb,var(--ring) 40%,transparent);outline-offset:12px}
.invitation:is(.design-zaitun,.design-alatau,.design-qyzgaldaq)
  .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  font:italic 500 clamp(2.6rem,7vw,3.6rem)/1 'Cormorant Garamond',serif!important;color:var(--tone);letter-spacing:.04em!important}
.invitation.design-sharlar .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:46% 54% 52% 48%/52% 46% 54% 48%!important;font:700 2.6rem/1 'Comfortaa',sans-serif!important;color:var(--tone)}
.invitation.design-ulan .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:50%!important;background-size:62% auto,100% 100%!important;
  box-shadow:0 0 0 4px var(--paper),0 0 0 6px #c9a24e,0 0 0 13px var(--paper),0 0 0 14px #c9a24e88,0 24px 60px #1d4a7322!important;
  outline:1px dashed #c9a24e66;outline-offset:22px}
.invitation.design-inju .cover-paper:not(:has(.guest-photo:not([hidden]))) .design-monogram{
  aspect-ratio:1!important;border-radius:50%!important;background-size:86% auto,100% 100%!important;outline:none;
  box-shadow:0 18px 40px #3b425222!important;font-size:2.6rem!important}

@media(max-width:760px){
  :is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar).card-face{padding:34px 16px 24px!important}
  :is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-inju).card-face .design-names{font-size:1.55rem}
  .design-ulan.card-face .design-names,.design-sharlar.card-face .design-names{font-size:1.3rem!important}
  .design-qyzgaldaq.card-face{padding-top:52px!important}
  .design-sharlar.card-face{padding-top:80px!important}
  :is(.design-zaitun,.design-mor,.design-alatau,.design-qyzgaldaq,.design-nazik,.design-ulan,.design-inju,.design-sharlar) .cover-paper{max-width:none;padding:90px 34px 70px}
  .invitation.design-alatau .cover-paper{padding-bottom:180px}
  .invitation.design-qyzgaldaq .cover-paper{padding-top:120px;padding-bottom:210px}
  .invitation.design-sharlar .cover-paper{padding-top:160px}
}.design-zaitun.card-face .design-caption{display:none}

/* ===========================================================
   КОНВЕРТ: кнопка-печать вместо обычной кнопки
   =========================================================== */
.invitation{--seal:#8a1d2e;--seal-ink:#f6dccf}
.invitation:is(.design-aru,.design-altyn,.design-saltanat,.design-qudalyq,.design-batyr,.design-aq-niet,.design-saukele){--seal:#c99a4a;--seal-ink:#3a2708}
.invitation.design-zaitun{--seal:#6b7650;--seal-ink:#f3f1e4}
.invitation.design-besik{--seal:#7d8fb3;--seal-ink:#fbf7ef}
.invitation.design-tusau{--seal:#2a5844;--seal-ink:#e8f4ed}
.invitation.design-kun{--seal:#d0703c;--seal-ink:#fff3e6}
.invitation.design-sharlar{--seal:#e0708f;--seal-ink:#fff}
.invitation.design-nazik{--seal:#c98593;--seal-ink:#fff}
.invitation.design-inju{--seal:#8e97aa;--seal-ink:#fff}
.invitation.design-ulan{--seal:#1d4a73;--seal-ink:#f3dfa6}
.invitation.design-alatau{--seal:#2a3a5e;--seal-ink:#f1f1f6}
.invitation.design-qyzgaldaq{--seal:#b5283f;--seal-ink:#fff}
.invitation.design-shattyq{--seal:#1c1712;--seal-ink:#f0d79a}
.invitation.design-qurmet{--seal:#5b6773;--seal-ink:#e3e8ec}
.invitation.design-aq-tilek{--seal:#6a5d4c;--seal-ink:#f4efe5}
.invitation.design-tolqyn{--seal:#20565d;--seal-ink:#eaf4f2}
.invitation.design-qalyn{--seal:#7f4424;--seal-ink:#fcefdc}
.gate-seal-btn{position:relative;display:grid;place-items:center;width:104px!important;height:104px;margin-top:34px;border:0;border-radius:50%;cursor:pointer;padding:0!important;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--seal) 55%,#fff),var(--seal) 52%,color-mix(in srgb,var(--seal) 65%,#000));
  box-shadow:0 14px 30px #0000004d,inset 0 0 0 7px #00000014,inset 0 0 0 9px #ffffff2e,inset 0 -6px 12px #00000026;
  animation-delay:.6s;transition:transform .25s}
.gate-seal-btn:before{content:'';position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--seal);opacity:.55;animation:seal-pulse 2.2s ease-out infinite}
.gate-seal-btn span{font:700 .78rem/1 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--seal-ink);text-shadow:0 -1px 0 #0003}
.gate-seal-btn:hover{transform:scale(1.05) rotate(-3deg)}
@keyframes seal-pulse{from{transform:scale(.92);opacity:.7}to{transform:scale(1.25);opacity:0}}
@media(max-width:760px){.gate-seal-btn{width:92px!important;height:92px;margin-top:28px}}

/* ===========================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА В ПРИГЛАШЕНИИ
   =========================================================== */
.lang-toggle{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:2px;padding:4px;border-radius:99px;
  background:#fffef8eb;box-shadow:0 3px 20px #20121522;backdrop-filter:blur(10px);font:700 .72rem/1 'Manrope',sans-serif}
.lang-toggle a{padding:8px 12px;border-radius:99px;color:#7a6c62;text-decoration:none;letter-spacing:.04em}
.lang-toggle a[aria-current=true]{background:#3c3034;color:#fff}
@media(max-width:760px){.lang-toggle{top:12px}.lang-toggle a{padding:7px 10px}.demo-ribbon{max-width:calc(50% - 64px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ===========================================================
   КАЛЕНДАРЬ МЕСЯЦА
   =========================================================== */
.cal{max-width:330px;margin:26px auto 6px;padding:20px 18px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--tone) 22%,transparent);
  background:color-mix(in srgb,var(--paper) 60%,transparent)}
.cal-title{font:500 1.5rem/1.2 'Cormorant Garamond','Playfair Display',serif;margin:0 0 14px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 2px;text-align:center;font-size:.86rem;font-variant-numeric:tabular-nums}
.cal-grid span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%}
.cal-wd{font-size:.62rem!important;letter-spacing:.08em;text-transform:uppercase;opacity:.55;aspect-ratio:auto!important;padding-bottom:4px}
.cal-day{position:relative;background:var(--tone);color:var(--paper);font-weight:700;box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent)}
.cal-day:after{content:'♥';position:absolute;top:-9px;right:-5px;font-size:.7rem;color:var(--tone)}
.invitation:is(.design-qurmet,.design-aq-tilek) .cal-day:after{content:none}

/* ===========================================================
   ФОТО: три формата
   1) фото во весь фон под текстом — тёмные шаблоны
   2) фото сверху с плавным переходом в бумагу — светлые
   3) фото в рамке (арка, медальон…) — остальные
   =========================================================== */
.invitation:is(.design-aq-niet,.design-altyn,.design-saltanat,.design-aru,.design-qudalyq) :is(.cover-paper .guest-photo,.gate-card .gate-photo):not([hidden]){
  position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;transform:none!important;
  z-index:-1;filter:brightness(.42) saturate(.85);-webkit-mask-image:none!important;mask-image:none!important;animation:none}
.invitation:is(.design-aq-niet,.design-altyn,.design-saltanat,.design-aru,.design-qudalyq) :is(.cover-paper,.gate-card):has(:is(.guest-photo,.gate-photo):not([hidden])){
  outline:1px solid #e5c38b99;outline-offset:-18px}
.invitation:is(.design-aq-niet,.design-altyn,.design-saltanat,.design-aru,.design-qudalyq) :is(.cover-paper,.gate-card):has(:is(.guest-photo,.gate-photo):not([hidden])) :is(.design-names,.gate-names,.design-kicker,.gate-kicker,.design-date,.gate-date,.cover-invitation){
  text-shadow:0 2px 24px #000c}
.invitation:is(.design-aq-niet,.design-altyn,.design-saltanat,.design-aru,.design-qudalyq) .cover-paper:has(.guest-photo:not([hidden])){padding-top:clamp(160px,28vh,260px)!important}
.invitation:is(.design-aq-niet,.design-altyn,.design-saltanat,.design-aru,.design-qudalyq) .gate-card:has(.gate-photo:not([hidden])){padding-top:140px}

.invitation:is(.design-zaitun,.design-alatau,.design-kun,.design-besik,.design-qyzgaldaq,.design-aspan,.design-nazik,.design-qalyn,.design-tolqyn,.design-batyr,.design-sharlar,.design-tusau) :is(.cover-paper .guest-photo,.gate-card .gate-photo):not([hidden]){
  position:absolute;left:0;right:0;top:0;width:100%!important;height:min(54svh,520px)!important;max-width:none;aspect-ratio:auto;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;transform:none!important;z-index:-1;object-position:50% 28%;
  -webkit-mask-image:linear-gradient(#000 52%,transparent)!important;mask-image:linear-gradient(#000 52%,transparent)!important;animation:none}
.invitation:is(.design-zaitun,.design-alatau,.design-kun,.design-besik,.design-qyzgaldaq,.design-aspan,.design-nazik,.design-qalyn,.design-tolqyn,.design-batyr,.design-sharlar,.design-tusau) .gate-card .gate-photo:not([hidden]){height:min(42svh,380px)!important}
.invitation:is(.design-zaitun,.design-alatau,.design-kun,.design-besik,.design-qyzgaldaq,.design-aspan,.design-nazik,.design-qalyn,.design-tolqyn,.design-batyr,.design-sharlar,.design-tusau) .cover-paper:has(.guest-photo:not([hidden])){padding-top:calc(min(54svh,520px) - 60px)!important}
.invitation:is(.design-zaitun,.design-alatau,.design-kun,.design-besik,.design-qyzgaldaq,.design-aspan,.design-nazik,.design-qalyn,.design-tolqyn,.design-batyr,.design-sharlar,.design-tusau) .gate-card:has(.gate-photo:not([hidden])){padding-top:calc(min(42svh,380px) - 40px)}
.invitation:is(.design-zaitun,.design-alatau,.design-kun,.design-besik,.design-qyzgaldaq,.design-aspan,.design-nazik,.design-qalyn,.design-tolqyn,.design-batyr,.design-sharlar,.design-tusau) :is(.cover-paper,.gate-card):has(:is(.guest-photo,.gate-photo):not([hidden])) .design-kicker{
  display:inline-block;padding:6px 14px;border-radius:99px;background:color-mix(in srgb,var(--paper) 85%,transparent)}
/* ===========================================================
   ОБРАЗЕЦ: нижняя панель «Создать такое приглашение»
   =========================================================== */
.demo-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:75;
  display:flex;gap:8px;width:min(520px,calc(100% - 24px));padding:7px;border-radius:999px;
  background:#16131ce6;backdrop-filter:blur(14px);box-shadow:0 14px 40px #0006,0 0 0 1px #ffffff1f;font-family:'Manrope',sans-serif}
.demo-bar a{text-decoration:none;display:flex;align-items:center;justify-content:center;border-radius:999px}
.demo-bar-back{padding:0 18px;color:#e9e3f2!important;font-size:.82rem;font-weight:600;background:#ffffff14;white-space:nowrap}
.demo-bar-back:hover{background:#ffffff26}
.demo-bar-go{flex:1;flex-direction:column;gap:1px;min-height:52px;padding:6px 16px;color:#1a1206!important;
  background:linear-gradient(135deg,#fbe7b0,#e2b764 45%,#b8873b);box-shadow:0 6px 22px #e8c27a55;transition:transform .2s}
.demo-bar-go:hover{transform:translateY(-1px)}
.demo-bar-go b{font-size:.92rem;font-weight:800;letter-spacing:.01em}
.demo-bar-go small{font-size:.7rem;font-weight:600;opacity:.75}
body[data-demo=true]:not([data-preview=true]) .screen-nav{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body[data-demo=true]:not([data-preview=true]) .invite-screen{padding-bottom:160px}
.demo-ribbon{pointer-events:none}
@media(max-width:420px){.demo-bar-back span{display:none}.demo-bar-back{padding:0 16px;font-size:1rem}}

/* ===========================================================
   СГЕНЕРИРОВАННЫЕ КАРТИНКИ (12 главных шаблонов)
   Фон — бумага открытки, сцена — фото по умолчанию.
   =========================================================== */
.design-aspan{--art:url('/static/art/img/aspan-bg.webp')}
.design-aru{--art:url('/static/art/img/aru-bg.webp')}
.design-saukele{--art:url('/static/art/img/saukele-bg.webp');--frame-img:none;--glow:none}
.design-zaitun{--art:url('/static/art/img/zaitun-bg.webp')}
.design-alatau{--art:url('/static/art/img/alatau-bg.webp')}
.design-qyzgaldaq{--art:url('/static/art/img/qyzgaldaq-bg.webp')}
.design-batyr{--art:url('/static/art/img/batyr-bg.webp');--frame-img:none;--glow:none}
.design-besik{--art:url('/static/art/img/besik-bg.webp')}
.design-altyn{--art:url('/static/art/img/altyn-bg.webp')}
.design-qudalyq{--art:url('/static/art/img/qudalyq-bg.webp')}
.design-sharlar{--art:url('/static/art/img/sharlar-bg.webp')}
.design-tusau{--art:url('/static/art/img/tusau-bg.webp')}
:is(.design-aspan,.design-aru,.design-saukele,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-batyr,
    .design-besik,.design-altyn,.design-qudalyq,.design-sharlar,.design-tusau){
  --art-size:100% 100%;--art-repeat:no-repeat;--art-position:center}
/* рамки и узоры уже нарисованы на картинке — свои линии убираем */
:is(.design-aru,.design-qudalyq,.design-zaitun,.design-qyzgaldaq,.design-saukele,.design-batyr).design-art:before,
:is(.design-aru,.design-qudalyq,.design-zaitun,.design-qyzgaldaq,.design-saukele,.design-batyr) .design-art:before,
.card :is(.design-aru,.design-qudalyq,.design-zaitun,.design-qyzgaldaq,.design-saukele,.design-batyr).design-art.card-face:before{display:none}
:is(.design-saukele,.design-batyr).design-art:after,:is(.design-saukele,.design-batyr) .design-art:after{display:none}
.invitation.design-saukele .cover-paper{padding-inline:clamp(60px,13vw,110px)}

/* ---------- сцена на карточке каталога и на первом экране ---------- */
.design-art:is(.card-face,.hero-card) .guest-photo{display:block;animation:none}
/* сверху с переходом */
:is(.design-aspan,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-batyr,.design-besik,.design-sharlar,.design-tusau):is(.card-face,.hero-card) .guest-photo{
  position:absolute;left:0;right:0;top:0;width:100%!important;height:62%!important;max-width:none;aspect-ratio:auto;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;transform:none!important;z-index:-1;object-fit:cover;object-position:50% 30%;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
:is(.design-aspan,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-batyr,.design-besik,.design-sharlar,.design-tusau):is(.card-face,.hero-card):has(.guest-photo){
  justify-content:flex-end!important;padding-top:20px!important;padding-bottom:30px!important}
/* на весь фон */
:is(.design-aru,.design-altyn,.design-qudalyq):is(.card-face,.hero-card) .guest-photo{
  position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;z-index:-1;object-fit:cover;object-position:50% 25%;filter:brightness(.62)}
:is(.design-aru,.design-altyn,.design-qudalyq):is(.card-face,.hero-card):has(.guest-photo){
  justify-content:flex-end!important;padding-top:20px!important;padding-bottom:30px!important;outline:1px solid #e5c38b88;outline-offset:-12px}
:is(.design-aru,.design-altyn,.design-qudalyq):is(.card-face,.hero-card):has(.guest-photo):after{
  content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 35%,#000a);display:block!important}
:is(.design-aru,.design-altyn,.design-qudalyq):is(.card-face,.hero-card):has(.guest-photo) :is(.design-names,.design-kicker,.design-date){text-shadow:0 2px 16px #000c}
/* в рамке-фотографии (саукеле) */
.design-saukele:is(.card-face,.hero-card) .guest-photo{width:56%!important;aspect-ratio:4/5;object-fit:cover;margin:0 auto 14px!important;border-radius:3px;
  box-shadow:0 0 0 1px #b08a4566,0 12px 26px #3a2a1033;outline:1px solid #ffffffb3;outline-offset:-7px}
/* если есть сцена — эмблема и подпись на карточке не нужны */
:is(.card-face,.hero-card):has(.guest-photo) :is(.design-monogram,.design-caption){display:none!important}
:is(.card-face,.hero-card):has(.guest-photo) .design-names{font-size:1.85rem}
.design-saukele:is(.card-face,.hero-card):has(.guest-photo) .design-names{font-size:1.6rem}
:is(.design-aspan,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-besik,.design-sharlar,.design-tusau):is(.card-face,.hero-card):has(.guest-photo) .design-kicker{
  display:inline-block;padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--paper) 85%,transparent);margin-bottom:10px}
.design-batyr:is(.card-face,.hero-card):has(.guest-photo) .design-kicker{margin-bottom:8px}

/* в приглашении у «фото на весь фон» сцена чуть светлее, чем фото клиента */
.invitation:is(.design-aru,.design-altyn,.design-qudalyq) :is(.cover-paper .guest-photo,.gate-card .gate-photo)[src*="-scene.webp"]{filter:brightness(.55)}
/* ===========================================================
   КОНВЕРТ НА ВЕСЬ ЭКРАН
   Четыре клапана из фактурной бумаги, сургучная печать в центре.
   Нажали → печать ломается, верхний клапан откидывается,
   остальные разъезжаются, под ними — обложка приглашения.
   Анимируются только transform и opacity — без подтормаживаний.
   =========================================================== */
.env-gate{--env:color-mix(in srgb,var(--paper) 86%,var(--tone) 14%);--env-ink:var(--tone);--env-line:#ffffff8c;
  display:block;padding:0;background:color-mix(in srgb,var(--env) 70%,#000);overflow:hidden;
  transition:background-color .6s ease .55s}
.invitation:is(.design-aq-niet,.design-altyn,.design-batyr,.design-qudalyq,.design-aru,.design-saltanat,.design-qurmet,.design-ulan) .env-gate{
  --env:color-mix(in srgb,var(--paper) 90%,#fff 10%);--env-line:#e5c38b99}
.envx{position:absolute;top:0;bottom:0;left:50%;width:min(100%,calc(100svh * .62));transform:translateX(-50%);perspective:1600px}
.envx-flap{position:absolute;inset:0;will-change:transform;backface-visibility:visible;
  background-color:var(--env);background-image:url('/static/art/paper-grain.png');background-size:160px}
.envx-l{clip-path:polygon(0 0,52% 50%,0 100%);
  background-image:url('/static/art/paper-grain.png'),linear-gradient(90deg,#ffffff0d,#0000001f 52%);background-size:160px,100% 100%}
.envx-r{clip-path:polygon(100% 0,48% 50%,100% 100%);
  background-image:url('/static/art/paper-grain.png'),linear-gradient(270deg,#ffffff0d,#0000001f 52%);background-size:160px,100% 100%}
.envx-b{clip-path:polygon(0 100%,50% 47%,100% 100%);
  background-image:url('/static/art/paper-grain.png'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L50 47 L100 100' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    radial-gradient(70% 30% at 50% 50%,#00000026,transparent 70%),linear-gradient(180deg,#0000000a,#ffffff12);
  background-size:160px,100% 100%,100% 100%,100% 100%}
.envx-t{clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:50% 0;
  background-image:url('/static/art/paper-grain.png'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L50 57 L100 0' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#ffffff1f,#ffffff05 45%,#00000014);
  background-size:160px,100% 100%,100% 100%}
.invitation:is(.design-aq-niet,.design-altyn,.design-batyr,.design-qudalyq,.design-aru,.design-saltanat,.design-qurmet,.design-ulan) :is(.envx-t,.envx-b){
  filter:none}
.invitation:is(.design-aq-niet,.design-altyn,.design-batyr,.design-qudalyq,.design-aru,.design-saltanat,.design-qurmet,.design-ulan) .envx-t{
  background-image:url('/static/art/paper-grain.png'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L50 57 L100 0' fill='none' stroke='%23e5c38b' stroke-opacity='.85' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#ffffff14,#00000014);background-size:160px,100% 100%,100% 100%}
.invitation:is(.design-aq-niet,.design-altyn,.design-batyr,.design-qudalyq,.design-aru,.design-saltanat,.design-qurmet,.design-ulan) .envx-b{
  background-image:url('/static/art/paper-grain.png'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L50 47 L100 100' fill='none' stroke='%23e5c38b' stroke-opacity='.7' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    radial-gradient(70% 30% at 50% 50%,#00000040,transparent 70%);background-size:160px,100% 100%,100% 100%}

/* надписи на конверте */
.envx-kicker{position:absolute;left:0;right:0;top:15%;margin:0;text-align:center;font:600 .7rem/1.6 'Manrope',sans-serif;
  letter-spacing:.34em;text-transform:uppercase;color:var(--env-ink);opacity:.75}
.envx-addr{position:absolute;left:6%;right:6%;top:60%;z-index:4;text-align:center;color:var(--env-ink);will-change:transform,opacity}
.env-gate.is-open .envx-addr{transform:translateY(60vh);opacity:0;transition:transform .8s cubic-bezier(.6,0,.25,1) .55s,opacity .5s ease .6s}
.envx .env-names{margin:0;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.02;color:var(--env-ink);overflow-wrap:normal}
.envx .env-names .amp{display:inline-block;font-size:.62em;margin:2px 0;opacity:.8}
.envx-date{margin:12px 0 0;font:600 .72rem/1.4 'Manrope',sans-serif;letter-spacing:.24em;opacity:.8}
.envx-guest{margin:14px 0 0;font:italic 500 1.05rem/1.4 'Cormorant Garamond',serif;opacity:.9}
.envx-hint{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;
  font:500 .78rem/1.6 'Manrope',sans-serif;color:var(--env-ink);opacity:.75;animation:hint-blink 2.4s ease-in-out infinite}
.envx-hint small{font-size:.68rem;opacity:.75}
body[data-demo=true] .envx-hint{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@keyframes hint-blink{50%{opacity:.4}}

/* сургучная печать неровной формы */
.envx-seal{position:absolute;left:50%;top:50%;z-index:5;width:clamp(92px,26vw,118px);aspect-ratio:1;border:0;padding:0;cursor:pointer;
  transform:translate(-50%,-50%);display:grid;place-items:center;background:none;
  filter:drop-shadow(0 6px 10px #0000004d);will-change:transform,opacity}
.envx-seal:before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--seal) 50%,#fff),var(--seal) 48%,color-mix(in srgb,var(--seal) 60%,#000) 92%);
  -webkit-mask:url('/static/art/seal.svg') center/contain no-repeat;mask:url('/static/art/seal.svg') center/contain no-repeat}
.envx-seal:after{content:'';position:absolute;inset:21%;border-radius:50%;
  box-shadow:inset 0 2px 4px #0000004d,inset 0 -1px 0 #ffffff40,0 1px 0 #ffffff2e;border:1px solid #00000026}
.envx-seal span{position:relative;z-index:1;font:400 clamp(1.5rem,6.4vw,1.95rem)/1 'Bad Script','Cormorant Garamond',cursive;color:var(--seal-ink);
  text-shadow:0 -1px 0 #00000059,0 1px 0 #ffffff33}
.envx-seal{animation:seal-breathe 2.6s ease-in-out infinite}
@keyframes seal-breathe{50%{transform:translate(-50%,-50%) scale(1.045)}}

/* открытие */
.env-gate.is-open{opacity:1;transform:none;pointer-events:none;background-color:transparent;animation:none}
.env-gate.is-open .envx-seal{animation:seal-break .45s cubic-bezier(.5,0,.75,0) forwards}
@keyframes seal-break{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.14) rotate(4deg)}
  100%{transform:translate(-50%,-50%) scale(.2) rotate(-25deg);opacity:0}}
.env-gate.is-open .envx-t{transform:rotateX(180deg);opacity:0;
  transition:transform .7s cubic-bezier(.45,0,.25,1) .25s,opacity .3s ease .75s}
.env-gate.is-open .envx-l{transform:translateX(-101%);transition:transform .75s cubic-bezier(.6,0,.25,1) .6s}
.env-gate.is-open .envx-r{transform:translateX(101%);transition:transform .75s cubic-bezier(.6,0,.25,1) .6s}
.env-gate.is-open .envx-b{transform:translateY(101%);transition:transform .8s cubic-bezier(.6,0,.25,1) .55s}
.env-gate.is-open .envx-hint{opacity:0;animation:none;transition:opacity .2s}
@media(prefers-reduced-motion:reduce){.envx-seal,.envx-hint{animation:none}.env-gate.is-open .envx-flap{transition-duration:.01s}}
/* ===========================================================
   РУКОПИСНЫЕ ИМЕНА (как в лучших приглашениях)
   =========================================================== */
:is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
    .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat) :is(.design-names,.gate-names){
  font-family:'Bad Script','Cormorant Garamond',cursive!important;font-style:normal!important;font-weight:400!important;
  letter-spacing:0!important;text-transform:none!important;line-height:1.05!important}
:is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
    .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat) .amp{font-family:'Bad Script',cursive!important;font-style:normal!important}
:is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
    .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat).card-face .design-names{font-size:2.5rem!important}
:is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
    .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat).hero-card .design-names{font-size:2.2rem!important}
.invitation:is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
    .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat) .cover-paper .design-names{font-size:clamp(3.2rem,9vw,5.2rem)!important}
/* у шаблонов без рукописи имена на конверте — шрифтом шаблона */
.invitation:is(.design-batyr,.design-ulan,.design-altyn,.design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .env-names{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.5rem,6vw,2rem)}
.invitation:is(.design-shattyq) .env-names{font:700 clamp(1.3rem,5.5vw,1.8rem)/1.1 'Unbounded',sans-serif;text-transform:uppercase}
.invitation:is(.design-sharlar,.design-tusau,.design-kun) .env-names{font:700 clamp(1.4rem,6vw,1.9rem)/1.15 'Comfortaa',sans-serif}
@media(max-width:760px){
  :is(.design-aspan,.design-aru,.design-zaitun,.design-alatau,.design-qyzgaldaq,.design-mor,.design-nazik,
      .design-saukele,.design-tolqyn,.design-besik,.design-inju,.design-saltanat).card-face .design-names{font-size:1.9rem!important}}
/* имя на открытке в конверте — рукописью, поверх стилей заголовков шаблона */
.invitation .envx .env-names{font-family:'Bad Script','Cormorant Garamond',cursive!important;font-weight:400!important;font-style:normal!important;text-transform:none!important;letter-spacing:0!important}
.invitation:is(.design-batyr,.design-ulan,.design-altyn,.design-qudalyq,.design-qalyn,.design-qurmet,.design-aq-tilek) .envx .env-names{font-family:'Cormorant Garamond',serif!important;font-weight:600!important}
.invitation.design-shattyq .envx .env-names{font-family:'Unbounded',sans-serif!important;font-weight:700!important;text-transform:uppercase!important}
.invitation:is(.design-sharlar,.design-tusau,.design-kun) .envx .env-names{font-family:'Comfortaa',sans-serif!important;font-weight:700!important}