@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ==========================================================================
   Sunda — palet warna & tipografi
   ========================================================================== */
:root {
    --bs-primary: #7A1522;
    --bs-primary-rgb: 122, 21, 34;
    --bs-secondary: #C9A227;
    --bs-secondary-rgb: 201, 162, 39;
    --bs-secondary-2: #FBF1DE;
    --bs-secondary-2-rgb: 251, 241, 222;
    --sunda-maroon-dark: #4A0D16;
    --sunda-ink: #2b1810;
}

body {
    background-color: var(--bs-secondary-2);
    font-family: "Cormorant Garamond", serif;
    color: var(--sunda-ink);
}

.font-alt {
    font-family: "Playfair Display", serif !important;
}

p, .fs-5 {
    font-size: 1.15rem !important;
}

/* ==========================================================================
   Ornamen : batik kawung, garis emas, sudut motif
   ========================================================================== */
.batik-bg {
    background-color: var(--bs-primary);
    background-image: url("../img/batik-kawung.svg");
    background-repeat: repeat;
    background-size: 60px 60px;
}

.batik-bg.bg-overlay::before {
    background: linear-gradient(180deg, rgba(74, 13, 22, .92), rgba(74, 13, 22, .85));
}

.bg-overlay::before {
    background: rgba(74, 13, 22, .55) !important;
}

.section-divider.divider-primary {
    background-image: url("../img/section-divider-maroon.svg") !important;
}

.section-divider.divider-secondary {
    background-image: url("../img/section-divider-gold.svg") !important;
}

.ornament-corner.ornament-primary:before,
.ornament-corner.ornament-primary:after,
.ornament-corner.ornament-light:before,
.ornament-corner.ornament-light:after {
    background-image: url("../img/ornament-corner-gold.svg") !important;
    opacity: .9;
}

/* Bingkai lengkung gapura untuk foto — pengganti clip-path bawaan */
.sunda-frame {
    position: relative;
    padding: 10px;
    background: linear-gradient(145deg, var(--bs-secondary), #8a6a12);
    clip-path: polygon(50% 0%, 100% 18%, 100% 100%, 0% 100%, 0% 18%);
}

.sunda-frame .frame-inner {
    clip-path: polygon(50% 0%, 100% 18%, 100% 100%, 0% 100%, 0% 18%);
    overflow: hidden;
    background: #1c0a0d;
}

.sunda-frame .frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Kartu / panel bergaya surat kerajaan
   ========================================================================== */
.bg-white {
    background-color: var(--bs-secondary-2) !important;
    border: 1px solid rgba(var(--bs-secondary-rgb), .55) !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-secondary-rgb), .12) !important;
}

.sep-line {
    border-color: var(--bs-secondary) !important;
    opacity: .8;
}

hr.border-secondary {
    border-top: 2px solid var(--bs-secondary) !important;
}

.text-muted {
    color: #6b4a3a !important;
}

/* ==========================================================================
   Tombol & aksen emas
   ========================================================================== */
.btn {
    background: linear-gradient(180deg, #dcb948, var(--bs-secondary));
    border: 2px solid var(--sunda-maroon-dark);
    color: var(--sunda-maroon-dark) !important;
    letter-spacing: .12em;
    border-radius: 2px;
}

.btn:hover {
    background: var(--bs-secondary);
    color: #fff !important;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
header nav.navbar {
    background: linear-gradient(180deg, var(--bs-primary), var(--sunda-maroon-dark));
    border-bottom: 2px solid var(--bs-secondary);
}

header .nav-link {
    color: var(--bs-secondary-2) !important;
    font-family: "Playfair Display", serif;
    letter-spacing: .06em;
}

header .nav-link:hover {
    color: var(--bs-secondary) !important;
}

.sunda-brand {
    font-family: "Playfair Display", serif;
    color: var(--bs-secondary-2);
    letter-spacing: .08em;
    font-size: 1.1rem;
}

.navbar-toggler.bg-secondary {
    background: var(--bs-secondary) !important;
}

/* ==========================================================================
   Modal sampul — surat pembuka
   ========================================================================== */
#modal-cover .modal-content {
    background: var(--bs-secondary-2);
    border: 3px double var(--bs-secondary);
}

#modal-cover .modal-footer {
    border-top: 1px solid rgba(var(--bs-secondary-rgb), .5);
}

/* ==========================================================================
   Countdown
   ========================================================================== */
#countdown .card {
    background: var(--sunda-maroon-dark) !important;
    border: 1px solid var(--bs-secondary);
    color: var(--bs-secondary-2);
}

#countdown .card span {
    color: var(--bs-secondary-2);
}

#countdown .card .fs-2 {
    font-family: "Playfair Display", serif;
    color: var(--bs-secondary);
}

/* ==========================================================================
   Galeri & sudut kartu foto
   ========================================================================== */
.gallery-wrapper .item {
    border: 2px solid var(--bs-secondary);
}

/* ==========================================================================
   Ucapan / RSVP
   ========================================================================== */
#rsvp .form-control,
#rsvp input.border,
#rsvp select.border,
#rsvp textarea.border {
    background: #fff;
    border-color: var(--bs-secondary) !important;
}

#send-message {
    background: linear-gradient(180deg, #dcb948, var(--bs-secondary)) !important;
    border-color: var(--sunda-maroon-dark) !important;
}

/* ==========================================================================
   Ikon play / pause audio
   ========================================================================== */
#play, #pause {
    background-color: rgba(74, 13, 22, .85) !important;
    border: 1px solid var(--bs-secondary);
}