/* ============================================
   MOBILE CSS RESET (Android + iOS)
   ============================================ */

/* Reset dasar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* hilangkan highlight biru Android */
}

/* Agar ukuran viewport akurat */
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* cegah auto-zoom iOS */
  touch-action: manipulation; /* hilangkan delay 300ms */
}

/* Responsif dasar */
img, video {
  max-width: 100%;
  display: block;
}

/* Typography */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  color: #000;
}

/* Link */
a {
  text-decoration: none;
  color: inherit;
}

/* List */
ul, ol {
  list-style: none;
}

/* Form default override khusus mobile */
input, textarea, select, button {
  font: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Hilangkan radius & shadow bawaan iOS input */
input, textarea {
  border-radius: 0;
}

/* Pastikan textarea tidak bisa di-resize secara horizontal */
textarea {
  resize: vertical;
}

/* Button reset */
button {
  cursor: pointer;
  padding: 0;
}

/* Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Agar scroll mobile smooth */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;  /* iOS scroll halus */
}

/* Disable long press callout pada iOS untuk gambar */
img {
  -webkit-touch-callout: none;
}


/* ROOT COLORS */ :root {
--primary-color: #007bff;
--font-size-base: 16px;
--spacing-unit: 1rem;
--color-red:#F08787;
--color-blue:#8CA9FF;
--color-yellow:#FFF2C6;
--color-green:#A3DC9A;
--color-violet:#8E7DBE;
--color-dark:#222;
} /* BASE */
html, body {
    position: relative;
    height: 100%;
}
body {
    font-family: "pt-sans";
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    /* Ganti 100vh dengan variabel */
    height: 100vh; /* Fallback untuk browser yang tidak mendukung JS/Variabel */
    height: var(--app-height);
    max-width: 75vh;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cards {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
} /* Corner Ornament */
.cards>.cards-content::before, .cards>.cards-content::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 10%;
    border-color: #a0522d;
    border-style: solid;
}
.cards>.cards-content::before {
    top: -1px;
    left: -1px;
    border-width: 3px 0 0 3px; /* Gabungan dari dua blok CSS */
}
.cards>.cards-content::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 3px 3px 0; /* Gabungan dari dua blok CSS */
}
.cards>.cards-content {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    max-width: 600px;
    position: relative;
    border: 1px solid #e0c9b6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cards>.cards-content>.cards-main {
    overflow-y: auto;
    height: calc( 100% - 180px);
    display: flex;
    flex-wrap: wrap;
	align-items: center;
    padding: 15px;
    gap: 15px;
}
.cards>.cards-content>.cards-header, .cards>.cards-content>.cards-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.cards>.cards-content>.cards-footer {
    height: 50px;
}
.heading {
    white-space: nowrap;
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
    line-height: 1;
    margin: 0;
    padding: 0 10px;
    font-family: 'Great Vibes', cursive;
    color: #8b4513;
    letter-spacing: 2px;
}
.box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
}
.box > .box-content {
    padding: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.box i {
    font-size: 40px;
    color: #8b4513;
}
.border {
    border: 1px solid #8b4513;
}
.border-top {
    border-top: 1px solid #8b4513;
}
.border-bottom {
    border-bottom: 1px solid #8b4513;
}
.border-left {
    border-left: 1px solid #8b4513;
}
.border-right {
    border-right: 1px solid #8b4513;
}
.color {
    color: #8b4513;
}
/* Ukuran font menggunakan CLAMP() untuk responsivitas */

/* SMALL TEXT (Contoh: Keterangan, Caption) */
.text-small {
    /* Ukuran: Min 0.8rem, Fleksibel, Maks 1.0rem */
    /* Mobile (terkecil): 12.8px | Desktop (terbesar): 16px */
    font-size: clamp(0.75rem, 1vw + 0.5rem, 0.85rem);
}
/* MEDIUM TEXT (Contoh: Paragraf Badan, Teks Default) */
.text-medium {
    /* Ukuran: Min 1.0rem, Fleksibel, Maks 1.4rem */
    /* Mobile: 16px | Desktop: 22.4px */
    font-size: clamp(1.0rem, 1.5vw + 0.5rem, 1.4rem);
}
/* LARGE TEXT (Contoh: Sub-Judul, Heading H3/H4) */
.text-large {
    /* Ukuran: Min 1.5rem, Fleksibel, Maks 2.5rem */
    /* Mobile: 24px | Desktop: 40px */
    font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
/* EXTRALARGE TEXT (Contoh: Judul Utama, Heading H1) */
.text-extralarge {
    /* Ukuran: Min 2.5rem, Fleksibel, Maks 4.0rem */
    /* Mobile (terbesar): 40px | Desktop (terbesar): 64px */
    font-size: clamp(2.5rem, 4vw + 2rem, 4.0rem);
}
.text-uppercase {
    text-transform: uppercase;
}
p, span, label, ul , h2 { /* Gabungan & Penyesuaian */
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.5;
    color: #4b3832;
}
.couple {
    font-family: "ORbitron";
}
ul {
    width: 100%;
}
.gallery-img {
    align-items: flex-end;
}
.quote-container {
    background: rgba(255,255,255,.8);
    padding: 15px 20px;
    max-height: 30vh;
    box-shadow: 0 0 5px #aaa;
}
#btn {
    width: auto;
    height: 50px;
}

@keyframes zoomToCenter {
0% {
opacity: 0;
}
75% {
transform: scale(2) translate(0, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
}
#playBtn {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    background: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #ddd;
    border: 1px solid #eee;
    color: #222;
    font-size: 10px;
}
.whishes {
    height: 100%;
}
.whishes .swiper-slide {
    height: auto;
    background: rgba(218, 165, 32, .03);
}
.whishes-content {
    padding: 15px 20px;
    width: 100%;
}
.whishes-content > header {
    padding: 0;
    margin: 0;
    position: relative;
}
.whishes-content > header > * {
    padding: 0;
    margin: 0;
}
.whishes-content > header > p {
    position: absolute;
    top: 0;
    right: 0;
}
.whishes-content > main {
    min-height: 60px;
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #eee;
}
/* AUTO SCROLL*/
  .auto-scroll {
    display: flex;
    flex-direction: column;
    animation: scrollUp 20s linear infinite;
  }

   .auto-scroll > .item {
    padding: 10px;
    font-size: 18px;
	padding-bottom: 70vh;
  }

  @keyframes scrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }

body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: Arial;
    overflow: hidden;
    transition: background-color 0.5s;
}
/* PRELOADER */
#loaderScreen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
    z-index: 100;
}
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #ffffff55;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#loadingText {
    font-size: 16px;
}
/* INTRO */
#introScreen {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #000;
    z-index: 90; /* Dibuat lebih tinggi dari main */
    color: #fff;
    text-align: center;
    padding: 20px;
}
#openBtn {
    /* ... (CSS yang sudah ada) ... */
    margin-top: 25px; /* Tambahkan margin agar terpisah dari Countdown */
    padding: 12px 28px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.5s;
    opacity: 0; /* Pastikan opacity 0 agar bisa di-fade in di JS */
}
/* Modifikasi untuk dynamicText (agar fokus hanya menampung teks) */
#dynamicText {
    font-size: 22px;
    min-height: 40px;
    transition: opacity 0.5s ease-in-out;
    position: relative;
    z-index: 8;
    margin-bottom: 20px; /* Tambahkan sedikit ruang di bawah teks dinamis */
}
/* MAIN APP */
#mainApp {
}
/* EFEK TIRAI */
#curtainOverlay {
    position: fixed;
    inset: 0;
    display: none; /* Awalnya sembunyi */
    z-index: 95; /* Harus di atas intro dan di bawah loader */
    pointer-events: none; /* Tidak menghalangi interaksi */
}
.curtain-half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #000; /* Warna tirai */
    transition: transform 1.5s ease-out; /* Durasi dan jenis animasi */
}
#curtainLeft {
    left: 0;
}
#curtainRight {
    right: 0;
}
/* Kelas untuk efek membuka */
.open-left {
    transform: translateX(-100%);
}
.open-right {
    transform: translateX(100%);
}
#fireworksCanvas {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
}
#opening .cards-content, #journey .cards-content, #event .cards-content, #place .cards-content, #gift .cards-content, #wish .cards-content, #closing .cards-content, #credit .cards-content {
    background-position: top left;
    background-clip: content-box;
    background-size: 300px 397.5px; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-repeat: no-repeat;
}
#journey .cards-content {
    background-size: contain; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top center;
}
#event .cards-content {
    background-size: contain; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: bottom left;
}
#place .cards-content {
    background-size: auto 100%; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top right;
}
#gift .cards-content {
    background-size: 60%; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top center;
}
#wish .cards-content {
    background-size: 100%; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top center;
}
#wish .cards-content {
    background-size: 100%; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top center;
}
#closing .cards-content {
    background-size: 100% auto; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */
    background-position: top right;
}
#credit .cards-content {
    background-size: contain; /* 3. Atur ukuran menjadi kecil (misalnya 100px x 100px) */

    background-position: top center;
}
/* countdown */
.countdown {
  gap: 15px;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
		display: none;

}

.cd-box {
  background: #ffffff20;
  padding: 10px 18px;
  border-radius: 10px;
  text-align: center;
  backdrop-filter: blur(5px);
  font-size: 22px;
  color: #fff;
  font-weight: bold;
}

.cd-box span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
	color: white;
}

/* Pastikan Countdown dan Tombol berada di atas kanvas kembang api */
.countdown, #openBtn {
    position: relative; /* Penting agar z-index bekerja dengan baik */
    z-index: 10; /* Berikan nilai lebih tinggi dari z-index: 8 pada dynamicText */
}
#fireworksCanvas {
    /* ... */
    z-index: 1;
}
#dynamicText {
    /* ... */
    z-index: 8;/* ... */
}
.ctn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 0 0;
}
.ctn > i {
    font-size: 30px;
}
.ctn > * {
    padding: 0;
    margin: 0;
}
.w100 {
    width: 100%;
}
.w50 {
    width: calc( 50% - 15px);
}
.online-gifts {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
}
/* ATM CARD */
.atm-card {
    background: linear-gradient(135deg, #0c3c78, #0f58b4);
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    opacity: .8;
    width: 100%;
}
.bank {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.rekening-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rekening {
    font-size: 20px;
    letter-spacing: 1px;
}
.copy-btn {
    background: #ffffff44;
    border: 1px solid #fff;
    padding: 5px 12px;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}
.copy-btn:hover {
    background: #fff;
    color: #0f58b4;
}
/* QRIS BOX */
.qris-box {
    background: rgba(255,255,255,.4);
    padding: 20px;
    max-width: 350px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    text-align: center;
}
.qris-box img {
    width: 200px;
    height: 200px;
}
/* DOWNLOAD BUTTON */
.download-btn {
    display: block;
    padding: 12px;
    background: #0c3c78;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
.download-btn:hover {
    background: #0f58b4;
}
.support-team {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(255,255,255,.5);
    border-radius: 12px;
    padding: 15px;
    box-shadow: inset 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
}
.support-team li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}
.support-team li:last-child {
    border-bottom: none;
}
.support-team li span:first-child {
    font-weight: 600;
    color: #333;
}
.support-team li span:last-child {
    color: #555;
    text-align: right;
    max-width: 55%;
    word-wrap: break-word;
}