.elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-container{max-width:1600px;min-height:610px;}.elementor-23431 .elementor-element.elementor-element-4439c0c0:not(.elementor-motion-effects-element-type-background), .elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D0C0C;background-image:url("ornament-bg1.png");background-position:top left;background-repeat:no-repeat;background-size:39% auto;}.elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-background-overlay{background-image:url("ornament-bg2.png");background-position:bottom right;background-repeat:no-repeat;background-size:26% auto;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23431 .elementor-element.elementor-element-4439c0c0{border-style:solid;border-color:#CB945F;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;z-index:1;}.elementor-23431 .elementor-element.elementor-element-4439c0c0, .elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-background-overlay{border-radius:50px 50px 50px 50px;}.elementor-23431 .elementor-element.elementor-element-136e1f66:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-23431 .elementor-element.elementor-element-136e1f66 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, #1F1E1E 0%, #000000 100%);}.elementor-23431 .elementor-element.elementor-element-136e1f66 > .elementor-element-populated{border-style:double;border-width:0px 5px 0px 5px;border-color:#CB945F;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 150px 0px 150px;--e-column-margin-right:150px;--e-column-margin-left:150px;}.elementor-23431 .elementor-element.elementor-element-136e1f66 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23431 .elementor-element.elementor-element-1fb93ece{--spacer-size:15px;}.elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:91%;}.elementor-23431 .elementor-element.elementor-element-62ab563 > .elementor-widget-container{margin:-143px 0px 0px 0px;}.elementor-23431 .elementor-element.elementor-element-1032ee2a{text-align:center;}.elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title{color:#FAFAFA;font-family:"David Libre", Sans-serif;font-size:25px;font-weight:normal;text-transform:capitalize;}.elementor-23431 .elementor-element.elementor-element-a8037dd{text-align:center;}.elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{color:#FAFAFA;font-family:"David Libre", Sans-serif;font-size:25px;font-weight:normal;text-transform:capitalize;}.elementor-23431 .elementor-element.elementor-element-a7690ee{text-align:center;}.elementor-23431 .elementor-element.elementor-element-a7690ee .elementor-heading-title{color:#CB945F;font-family:"Great Vibes", Sans-serif;font-weight:normal;}#modalInvitation .dialog-message{width:797px;height:auto;}#modalInvitation{justify-content:center;align-items:center;pointer-events:all;background-color:#0D0D0EF2;}#modalInvitation .dialog-widget-content{animation-duration:0.8s;border-radius:50px 50px 50px 50px;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:1024px){.elementor-23431 .elementor-element.elementor-element-136e1f66 > .elementor-element-populated{padding:50px 10px 50px 10px;}#modalInvitation .dialog-message{width:640px;}}@media(max-width:767px){.elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-container{min-height:320px;}.elementor-23431 .elementor-element.elementor-element-4439c0c0:not(.elementor-motion-effects-element-type-background), .elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top left;}.elementor-23431 .elementor-element.elementor-element-4439c0c0{border-width:2px 2px 2px 2px;}.elementor-23431 .elementor-element.elementor-element-136e1f66 > .elementor-element-populated{margin:0px 50px 0px 50px;--e-column-margin-right:50px;--e-column-margin-left:50px;padding:0px 0px 0px 0px;}.elementor-23431 .elementor-element.elementor-element-1fb93ece{--spacer-size:10px;}.elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:95%;}.elementor-23431 .elementor-element.elementor-element-62ab563 > .elementor-widget-container{margin:-85px 0px 0px 0px;}.elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title{font-size:18px;}.elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{font-size:18px;}#modalInvitation .dialog-message{width:329px;}#modalInvitation{justify-content:center;align-items:center;}}#modalInvitation .t8fadeIn{animation-name:t8fadeIn;}@keyframes t8fadeIn{from{opacity:0;}to{opacity:1;}}#modalInvitation .dialog-widget-content{animation-name:t8fadeIn;}#modalInvitation .t8slideOutDown{animation-name:t8slideOutDown;}@keyframes t8slideOutDown{from{transform:translate3d(0,0,0);}to{visibility:hidden;transform:translate3d(0,100%,0);}}.elementor-23431 .elementor-element.elementor-element-62ab563{text-align:center;}.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-family:"Great Vibes",Sans-serif;color:#D29D61;font-size:56px;line-height:1.25;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.4);}.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{font-family:"David Libre",Sans-serif;font-size:20px;letter-spacing:6px;}.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:38px;}@media(max-width:767px){.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-size:42px;}.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:30px;}}#modalInvitation .elementor-element-62ab563 > .elementor-widget-container{margin:-70px 0px 0px 0px;}@media(max-width:767px){#modalInvitation .elementor-element-62ab563 > .elementor-widget-container{margin:-30px 0px 0px 0px;}}
.elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{display:block;margin-top:6px;color:#CB945F;font-family:"Great Vibes",Sans-serif;font-size:32px;line-height:1.3;font-weight:normal;word-break:break-word;hyphens:none;overflow-wrap:anywhere;}@media(max-width:767px){.elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{font-size:24px;}}
/* --- .port-cover-fix : cover popup muat di HP --- */
.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{
    overflow-wrap:anywhere;word-break:break-word;hyphens:none;
    max-width:100%;
}
/* Nama pasangan & tanggal: menyusut di layar kecil, bukan melebar/memanjang. */
.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-size:clamp(26px,7.4vw,56px);}
.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{font-size:clamp(13px,3.4vw,20px);letter-spacing:clamp(2px,1.1vw,6px);}
.elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:clamp(18px,4.6vw,38px);}
.elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title{font-size:clamp(15px,4.4vw,25px);}
.elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{font-size:clamp(15px,4.4vw,25px);}
/* Nama tamu: BATAS 3 BARIS di semua lebar layar, bukan hanya mobile.
   Tanpa ini, nama tamu yang panjang di desktop (32px) mendorong tombol
   "Buka Undangan" keluar layar. Full name tetap tersedia di query ?to=. */
.elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{
    font-size:clamp(17px,5.2vw,32px);line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
}
/* Isi cover boleh_wrap di dalam bx-nya sendiri, bukan meluber ke luar. */
.elementor-23431 .elementor-element.elementor-element-4439c0c0 > .elementor-container{min-height:320px;overflow-wrap:anywhere;}
/* Popup: tinggi dibatasi viewport; tombol tetap bisa di-scroll sampai terlihat.
   Rantai height penting: .dialog-widget-content berposition absolute, sehingga
   max-height:100% di situ TIDAK resolve ke tinggi viewport (persentase terhadap
   containing block absolute yang tingginya ditentukan content, jadi tidak definite),
   hasilnya max-height diabaikan dan tombol terdorong keluar layar. Pakai satuan
   viewport langsung (vh) supaya selalu definite, dengan dvh untuk address bar
   mobile yang menyusut saat popup dibuka. */
#modalInvitation .dialog-widget-content{
    max-height:100vh;max-height:100dvh;
    box-sizing:border-box;
    /* frontend(2).min.css menulis
         .elementor-popup-modal .dialog-widget-content{background-color:#fff}
       dan #modalInvitation memang punya kelas elementor-popup-modal, jadi
       kotak popup berlatar PUTIH. Sebelumnya tidak terlihat karena isi popup
       pas sebesar kotak itu. Begitu .dialog-message diberi padding, section
       gelap (309x585) duduk di dalam kotak putih (329x613) dan pita putih
       10px kiri-kanan + 14px atas-bawah muncul sebagai "border putih".
       Samakan background kotak popup dengan section di dalamnya (#0D0C0C)
       supaya padding itu tidak pernah memperlihatkan putih. */
    background-color:#0D0C0C;
    overflow:hidden;
}
#modalInvitation .dialog-message{
    max-height:100vh;max-height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:16px;box-sizing:border-box;
    /* area scroll ikut gelap, tidak putih */
    background-color:#0D0C0C;
}
#modalInvitation .dialog-message::-webkit-scrollbar{width:4px;}
#modalInvitation .dialog-message::-webkit-scrollbar-thumb{background:#CB945F;border-radius:2px;}
/* ---------------------------------------------------------------------
   Sisi kiri dan kanan cover popup harus sama. Terukur di 320x568 s/d
   412x915: jarak kotak konten ke tepi kolom 50px di kiri tapi hanya
   20-25px di kanan, jadi satu sisi terlihat kosong (keluhan "ada garis
   kosong di bagian kanan").

   Penyebabnya bukan padding yang tidak simetris, tapi flex:
     .elementor-element-136e1f66 (kolom)  display:flex, width 300-305px
     └ .elementor-widget-wrap            margin:0 50px, border 5px
        └ 7 widget, display:flex, wrap:wrap
   Tersedia setelah margin 50+50 hanya 200-205px. Tapi min-content
   .elementor-widget-wrap = 220px, dan min-content itu datang dari
   <center> di widget 6fa909af, yang lebarnya tombol "Buka Undangan"
   (padding 10px 32px + font 16px = 200px, tidak mauwrap).

.elementor-widget-wrap adalah flex item dengan min-width:auto, jadi ia
   TIDAK boleh menyusut di bawah min-content. Hasilnya kotak meluber ke
   kanan: L=43+50=93 tapi R=323, bukan 298.

   Dua perbaikan, keduanya perlu:
     1. tombol dibuat responsif (padding & font clamp) supaya min-content
        turun di bawah ruang tersedia -> kotak muat, margin tetap 50/50,
        dan tampilan di desktop tidak berubah sama sekali karena nilai
        clamp maksimum sama dengan nilai aslinya;
     2. min-width:0 sebagai pengaman, supaya kalau nama atau label di masa
        depan lebih panjang, kotak tetap simetris (menyempit) alih-alih
        meluber ke satu sisi.
   --------------------------------------------------------------------- */
#modalInvitation .button-undangan{
    /* Hanya padding yang adaptsi. Ukuran TULISAN sengaja tidak diubah:
       di 320px, isi tombol 132px + padding 2x16px + border 4px = 168px,
       masih muat di 190px yang tersedia, jadi label tetap 16px seperti
       desain aslinya. Kalau font-size ikut dikecilkan, tombol jadi tombol terlihat
       lebih kecil tanpa perlu. */
    padding:10px clamp(12px,5vw,32px);
    white-space:nowrap;
    max-width:100%;
    box-sizing:border-box;
}
#modalInvitation .elementor-element-136e1f66 > .elementor-element-populated,
#modalInvitation .elementor-element-136e1f66 > .elementor-element-populated > .elementor-element,
#modalInvitation .elementor-element-136e1f66 > .elementor-element-populated center{
    min-width:0;
    max-width:100%;
}
/* ---------------------------------------------------------------------
   Budget tinggi cover. Sumber masalahnya: sampul (gambar lingkaran) adalah
   penyumbang tinggi terbesar. Di desktop lebarnya 91% dari 797px = 725px
   tinggi, sehingga sampul saja hampir memenuhi jendela 900px. Jadi semua
   ukuran di cover diskalakan ke vh (tinggi jendela), bukan vw (lebar).
   --------------------------------------------------------------------- */
@media(min-width:768px){
    .elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:min(91%,40vh);max-height:40vh;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-size:clamp(26px,5.6vh,48px);}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{font-size:clamp(11px,1.9vh,17px);letter-spacing:clamp(1px,.5vh,5px);}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:clamp(16px,3.4vh,30px);}
    .elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title,
    .elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{font-size:clamp(14px,2.4vh,21px);}
    .elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{font-size:clamp(16px,3.1vh,27px);}
}
/* Jendela pendek: rapatkan lebih jauh (900px ke bawah, 768px, 640px,
   HP landscape). Dipisah dari blok desktop karena punya budget lebih kecil. */
@media(max-height:1000px){
    .elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:min(91%,28vh);max-height:28vh;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-size:clamp(22px,5.2vh,34px);}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{font-size:clamp(10px,1.9vh,13px);letter-spacing:clamp(1px,.4vh,3px);}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:clamp(14px,2.6vh,22px);}
    .elementor-23431 .elementor-element.elementor-element-62ab563 > .elementor-widget-container{margin-top:-30px;}
    .elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title,
    .elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{font-size:clamp(13px,2.2vh,17px);}
    .elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{font-size:clamp(15px,3vh,22px);max-height:3.9em;}
    #modalInvitation .dialog-message{padding:14px 10px;}
}
@media(max-width:767px){
    .elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:min(74%,40vh);max-height:40vh;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{margin-top:-24px;}
    .elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{max-height:3.75em;}
}
@media(max-height:620px){
    .elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:min(58%,22vh);max-height:22vh;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{font-size:clamp(19px,4.6vh,27px);margin-top:-26px;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{font-size:9px;letter-spacing:1px;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:14px;}
    .elementor-23431 .elementor-element.elementor-element-1032ee2a .elementor-heading-title,
    .elementor-23431 .elementor-element.elementor-element-a8037dd .elementor-heading-title{font-size:12px;}
    .elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{font-size:15px;max-height:3.6em;}
    #modalInvitation .dialog-message{padding:10px 8px;}
}
/* HP landscape (tinggi 390-430px): sampul masih memakan budget meski sudah
   dibatasi max-height:22vh. Perkecil juga elemen spacer Elementor, karena
   meski tampak kosong tetap memakai ruang vertikal. */
@media(max-height:500px){
    .elementor-23431 .elementor-element.elementor-element-5b37a08 img{width:min(46%,16vh);max-height:16vh;}
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{margin-top:-34px;}
    /* Spacer Elementor before the cover image */
    .elementor-23431 .elementor-element.elementor-element-1fb93ece{--spacer-size:4px;}
    .elementor-23431 .elementor-element.elementor-element-a8037dd .nama-tamu{max-height:2.6em;}
    #modalInvitation .dialog-message{padding:8px 6px;}
    /* Jarak antar widget Elementor (margin-bottom bawaan 20px) membuat tombol
       "Buka Undangan" terdorong 44px melewati dasar layar landscape 844x390
       (btnBottom=425, vh=390). Empat widget dirapatkan jadi 8px: hemat 48px.

       Widget GAMBAR (5b37a08) sengaja TIDAK disentuh: margin bawahnya 20px
       adalah bagian dari sela gambar -> nama, dan sela glyph PAWIWAHAN dari
       dasar gambar = 20 + margin-top kotak nama (-18px) + offset baris pertama
       (8px di landscape) = 10px, batas minimum agar tidak tertimpa. */
    #modalInvitation .elementor-element-1fb93ece,
    #modalInvitation .elementor-element-62ab563,
    #modalInvitation .elementor-element-1032ee2a,
    #modalInvitation .elementor-element-a8037dd{margin-bottom:8px;}
}
/* ---------------------------------------------------------------------
   Nama pasangan di popup TUMPENG pada HP: dikecilkan lagi.
   Blok ini sengaja diletakkan TERAKHIR, setelah semua blok max-height di
   atas. Alasannya: di HP pendek (320x568) blok max-height:620px masih aktif
   dan menimpa nilai max-width:767px karena ditulis belakangan, sehingga
   ukuran nama tetap 26px dan tulisan "Ni Wayan Nadia" hanya bersisa 8px dari
   bingkai. Menaruh blok ini di akhir membuat satu aturan tunggal yang
   berlaku untuk semua HP.

   Skala memakai vw (lebar layar), bukan vh, karena yang membatasi adalah
   lebar kotak popup yang hanya ~190-195px dan praktis konstan di semua HP.
   Font berbasis vh justru membesar di HP jangkung: pada 390x844, 5.2vh =
   43px dan kena batas atas 34px, padahal kotaknya tidak ikut membesar.
   Padding horizontal 8px menyisakan ruang agar tulisan tidak pernah menyentuh
   garis emas walaupun nama yang dipakai panjang.
   --------------------------------------------------------------------- */
@media(max-width:767px){
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-mempelai{
        font-size:clamp(20px,6.3vw,26px);
        padding:0 8px;
        max-width:100%;
        box-sizing:border-box;
    }
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-acara{
        font-size:clamp(9px,2.4vw,11px);
        letter-spacing:clamp(1px,.6vw,2px);
    }
    .elementor-23431 .elementor-element.elementor-element-62ab563 .nama-dan{font-size:clamp(13px,3.2vw,17px);}
}
/* ---------------------------------------------------------------------
   .port-sambut : gambar sambut (sampul-depan.webp) TIDAK boleh tertimpa
   tulisan PAWIWAHAN.

   Gejala diukur sebelum perbaikan (Puppeteer, gap = PAWIWAHAN.Ke atas
   gambar.Ke bawah, negatif berarti tumpang tindih):
     1920x1080 -50px | 1440x900 -50px | 1366x768 -50px | 1280x720 -50px
     768x1024  -50px | 1024x768 -50px | 844x390 -50px | 667x375 -14px
     390x844   -10px | 412x915  -10px | 360x640 -10px | 320x568  -10px

   Penyebab: margin atas kotak nama ditulis sumber dengan selektor ID
   (#modalInvitation .elementor-element-62ab563 > .elementor-widget-container
   {margin:-70px 0 0 0} di base, dan -30px pada max-width:767px). Selektor ID
   punya bobot lebih tinggi (1,2,0) daripada semua aturan kelas milik port
   berapa pun urutannya, jadi aturan kita yang memakai selektor kelas TIDAK
   PERNAH berlaku. Hasilnya desktop selalu memakai -70px: kotak nama naik 50px
   ke atas gambar dan baris PAWIWAHAN masuk ke dalam foto.

   Ukuran: margin bawah widget gambar 20px, jadi jarak glyph dari dasar gambar
   = 20 + marginTop(kotak) + offsetLine. Dengan -18px: kotak mulai 2px di
   bawah dasar gambar, sehingga nol tumpang tindih; offsetLine terukur
   8-18px memberi sela 10-22px di semua viewport.

   Aturan .nama-mempelai{margin-top:-26px/-34px} di atas ikut menentukan:
   margin atas anak pertama ikut runtuh (collapse) dengan margin atas induknya,
   dan yang dipakai adalah yang paling negatif. Karena itu margin itu dinolkan
   di sini, kalau tidak -26px/-34px itulah yang berlaku dan gambar tertimpa
   lagi. Angka -18px juga sudah diperiksa terhadap budget tinggi: tombol tetap
   terlihat tanpa scroll (844x390 sisa 9px, 667x375 sisa 9px, 1440x900 sisa 123px).
   --------------------------------------------------------------------- */
#modalInvitation .elementor-element-62ab563 > .elementor-widget-container{margin-top:-18px;}
#modalInvitation .elementor-element-62ab563 .nama-mempelai{margin-top:0;}