/* =========================================
   A DAY MADE JUST FOR YOU
   LAYOUT STYLES
========================================= */


/* 1. SITE SHELL
   Pembungkus seluruh halaman website
*/

.site-shell {
    width: 100%;
    max-width: 1200px;

    min-height: 100vh;
    min-height: 100svh;

    margin: 0 auto;

    padding: clamp(20px, 4vw, 48px);

    display: flex;
    flex-direction: column;

    gap: var(--space-lg);
}


/* 2. HEADER
   Bagian atas website
*/

.site-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding-bottom: var(--space-md);

    border-bottom: 1px solid var(--color-border);
}


/* Nama website di bagian kiri header */

.site-brand {
    font-size: var(--text-xs);

    font-weight: 600;

    letter-spacing: 0.12em;

    color: var(--color-text);
}


/* Indikator halaman di bagian kanan header */

.page-indicator {
    margin: 0;

    font-size: var(--text-xs);

    letter-spacing: 0.08em;

    color: var(--color-text-muted);
}


/* 3. MAIN CONTENT
   Tempat konten utama tujuh halaman berada
*/

.main-content {
    width: 100%;

    flex: 1;

    display: grid;

    place-items: center;
}


/* 4. FOOTER
   Bagian bawah website
*/

.site-footer {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-border);
}


/* Tulisan kecil di footer */

.site-footer p {
    margin: 0;

    font-size: var(--text-xs);

    color: var(--color-text-muted);
}


/* 5. MUSIC PLAYER
   Tombol kontrol musik
*/

.music-player {
    display: flex;
    align-items: center;
}


/* Tombol Play dan Pause */

.music-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-xs);

    padding: 9px 16px;

    background-color: var(--color-surface-soft);

    color: var(--color-text);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-full);

    transition: var(--transition-fast);
}


/* Efek saat mouse diarahkan ke tombol */

.music-toggle:hover {
    background-color: var(--color-dusty-rose);

    transform: translateY(-2px);
}


/* Efek saat tombol ditekan */

.music-toggle:active {
    transform: scale(0.97);
}


/* 6. GENERAL CONTAINER
   Wadah untuk konten halaman nantinya
*/

.page-container {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


/* Wadah dengan susunan vertikal */

.content-stack {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-lg);
}


/* 7. NAVIGATION
   Wadah tombol Next dan Back
*/

.page-navigation {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-top: var(--space-xl);
}


/* =========================================
   OPENING PAGE
========================================= */


/* Wadah utama opening page */

.opening-page {
    max-width: 680px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-lg);

    text-align: center;

    padding: var(--space-xl) 0;
}


/* Tulisan kecil di atas */

.eyebrow {
    margin: 0;

    font-size: var(--text-xs);

    font-weight: 600;

    letter-spacing: 0.18em;

    color: var(--color-muted-rose);
}


/* AREA AMPLOP */

.envelope-scene {
    position: relative;

    width: min(260px, 75vw);

    aspect-ratio: 1.5;

    margin: var(--space-md) auto;

    perspective: 900px;

    animation: floating 4s ease-in-out infinite;
}


/* Bentuk utama amplop */

.envelope {
    position: relative;

    width: 100%;
    height: 100%;
}


/* Bagian belakang amplop */

.envelope-back {
    position: absolute;

    inset: 0;

    background: var(--color-dusty-rose);

    border-radius: 8px;

    box-shadow: var(--shadow-soft);
}


/* Kertas surat di dalam amplop */

.envelope-letter {
    position: absolute;

    left: 10%;
    bottom: 8%;

    width: 80%;
    height: 90%;

    display: flex;

    align-items: flex-start;
    justify-content: center;

    padding-top: 24px;

    background: var(--color-surface);

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;

    border-radius: 5px;

    z-index: 2;

    transform: translateY(28px);

    transition: transform 0.8s ease;
}


/* Penutup berbentuk segitiga */

.envelope-flap {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 65%;

    background: #D7B7B2;

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    transform-origin: top;

    transition:
        transform 0.8s ease,
        z-index 0s 0.4s;

    z-index: 5;
}


/* Bagian depan amplop */

.envelope-front {
    position: absolute;

    inset: 0;

    background: #E8D6D2;

    clip-path: polygon(
        0 0,
        50% 58%,
        100% 0,
        100% 100%,
        0 100%
    );

    border-radius: 8px;

    z-index: 3;
}


/* Segel berbentuk hati */

.envelope-seal {
    position: absolute;

    top: 43%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background: var(--color-muted-rose);

    color: white;

    border-radius: 50%;

    font-size: 20px;

    z-index: 6;

    transition: opacity 0.4s ease;
}


/* ANIMASI AMPLOP TERBUKA */

.envelope-scene.is-open .envelope-flap {
    transform: rotateX(180deg);

    z-index: 0;
}

.envelope-scene.is-open .envelope-letter {
    transform: translateY(-55px);
}

.envelope-scene.is-open .envelope-seal {
    opacity: 0;
}


/* DEKORASI SPARKLE */

.envelope-sparkle {
    position: absolute;

    color: var(--color-muted-rose);

    font-size: 25px;
}

.envelope-sparkle:first-of-type {
    top: 0;
    left: -15px;
}

.envelope-sparkle:last-of-type {
    bottom: 0;
    right: -15px;

    animation-delay: 0.8s;
}


/* TEKS OPENING PAGE */

.opening-text {
    max-width: 500px;
}

.opening-text h1 {
    margin-bottom: var(--space-sm);

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 3rem);
}

.opening-text p {
    color: var(--color-text-muted);
}


/* TOMBOL UTAMA */

.primary-button {
    padding: 13px 30px;

    border: 1px solid var(--color-muted-rose);

    border-radius: var(--radius-full);

    background: var(--color-muted-rose);

    color: white;

    font-weight: 500;

    transition: var(--transition-normal);
}

.primary-button:hover {
    background: #916873;

    transform: translateY(-3px);

    box-shadow: var(--shadow-soft);
}

.primary-button:disabled {
    cursor: default;
    opacity: 0.75;
}


/* PESAN SETELAH AMPLOP DIBUKA */

.opening-note {
    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;

    animation: slideUp 0.7s ease both;
}


/* =========================================
   QUIZ PAGE
========================================= */


/* Wadah utama halaman kuis */

.quiz-page {
    max-width: 650px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-lg);

    text-align: center;

    padding: var(--space-xl) 0;
}


/* Judul halaman */

.quiz-heading {
    margin: 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 2.7rem);
}


/* Kalimat pengantar */

.quiz-intro {
    max-width: 430px;

    color: var(--color-text-muted);
}


/* KARTU KUIS */

.quiz-card {
    width: 100%;

    padding: clamp(20px, 5vw, 36px);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

    text-align: left;
}


/* PROGRESS BAR */

.quiz-progress {
    margin-bottom: var(--space-xl);
}

#quiz-progress-text {
    display: block;

    margin-bottom: var(--space-sm);

    color: var(--color-text-muted);

    font-size: var(--text-xs);

    letter-spacing: 0.06em;
}

.quiz-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    background-color: var(--color-surface-soft);

    border-radius: var(--radius-full);
}

.quiz-progress-fill {
    width: 33.33%;
    height: 100%;

    background-color: var(--color-muted-rose);

    border-radius: var(--radius-full);

    transition: width 0.4s ease;
}


/* JUDUL KECIL PERTANYAAN */

.quiz-question-title {
    margin-bottom: var(--space-sm);

    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-lg);
}


/* ISI PERTANYAAN */

.quiz-question {
    margin-bottom: var(--space-xl);

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: var(--text-lg);

    line-height: 1.6;

    font-weight: 500;
}


/* LABEL INPUT */

#quiz-form label {
    display: block;

    margin-bottom: var(--space-xs);

    color: var(--color-text-soft);

    font-size: var(--text-sm);
}


/* KOLOM JAWABAN */

#quiz-answer {
    width: 100%;

    min-height: 48px;

    padding: 12px 15px;

    background-color: #FCFAF9;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    color: var(--color-text);

    outline: none;

    transition: var(--transition-fast);
}

#quiz-answer:focus {
    border-color: var(--color-muted-rose);

    box-shadow: 0 0 0 3px rgba(167, 124, 131, 0.12);
}

#quiz-answer::placeholder {
    color: #B9A9A3;
}


/* FEEDBACK JAWABAN */

.quiz-feedback {
    margin-top: var(--space-sm);

    color: #A45D68;

    font-size: var(--text-sm);
}


/* TOMBOL BACK DAN NEXT */

.quiz-actions {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}


/* TOMBOL SEKUNDER */

.secondary-button {
    padding: 12px 20px;

    background-color: transparent;

    color: var(--color-text-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-full);

    transition: var(--transition-fast);
}

.secondary-button:hover {
    background-color: var(--color-surface-soft);
}


/* CATATAN KECIL */

.quiz-note {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-sm);
}


/* HALAMAN SETELAH SEMUA PERTANYAAN */

.quiz-complete {
    text-align: center;
}

.quiz-complete h2 {
    color: var(--color-text-soft);
}

.quiz-preview-note {
    margin-top: var(--space-lg);

    color: var(--color-text-muted);

    font-size: var(--text-xs);
}

/* =========================================
   PAGE 03 - BIRTHDAY PAGE
========================================= */


/* WADAH HALAMAN */

.birthday-page {
    max-width: 1000px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-xl);

    padding: var(--space-xl) 0;
}


/* SUSUNAN DUA KOLOM */

.birthday-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(300px, 1.1fr);

    align-items: center;

    gap: clamp(30px, 5vw, 65px);
}


/* KARTU KALENDER */

.birthday-calendar-card {
    width: 100%;

    padding: 28px;

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);
}


/* BAGIAN ATAS KALENDER */

.calendar-topline {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    color: var(--color-text-muted);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.13em;
}


/* NAMA BULAN */

.calendar-month {
    margin: 22px 0;

    text-align: center;

    color: var(--color-text-soft);

    font-size: 2.5rem;

    font-style: italic;
}


/* NAMA HARI */

.calendar-weekdays {
    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 5px;

    margin-bottom: 12px;

    text-align: center;
}

.calendar-weekdays span {
    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 600;
}


/* TANGGAL KALENDER */

.calendar-days {
    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 7px;
}


/* SETIAP KOTAK TANGGAL */

.calendar-day {
    position: relative;

    aspect-ratio: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--color-text);

    font-size: 13px;

    border-radius: 50%;
}


/* TANGGAL ULANG TAHUN */

.calendar-day.is-birthday {
    background-color: var(--color-muted-rose);

    color: white;

    font-weight: 700;

    animation: birthdayPulse 2.5s ease-in-out infinite;
}


/* HATI KECIL DI TANGGAL 5 */

.calendar-heart {
    position: absolute;

    top: -8px;

    right: -4px;

    color: var(--color-muted-rose);

    font-size: 13px;
}


/* BAGIAN BAWAH KALENDER */

.calendar-bottomline {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.13em;
}

.birthday-symbol {
    color: var(--color-muted-rose);

    font-size: 20px;
}


/* BAGIAN UCAPAN */

.birthday-greeting {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-sm);
}


/* LABEL KECIL */

.birthday-small-label {
    margin: 0;

    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.15em;
}


/* JUDUL BESAR */

.birthday-greeting h1 {
    margin: 0;

    color: var(--color-text-soft);

    font-size: clamp(2.3rem, 5vw, 3.5rem);

    line-height: 1.15;
}


/* SUBTITLE */

.birthday-subtitle {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* PESAN UTAMA */

.birthday-message {
    position: relative;

    margin-top: var(--space-md);

    padding-left: var(--space-lg);

    border-left: 2px solid var(--color-dusty-rose);
}

.birthday-message h2 {
    margin-bottom: var(--space-sm);

    color: var(--color-text-soft);

    font-size: var(--text-xl);
}

.birthday-message p {
    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.8;
}


/* DEKORASI KECIL */

.birthday-decoration {
    position: absolute;

    top: 0;

    right: 0;

    color: var(--color-muted-rose);

    animation: sparkle 2.5s ease-in-out infinite;
}


/* TANDA TANGAN */

.birthday-message .birthday-signature {
    margin-top: var(--space-md);

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;
}


/* FOOTER HALAMAN */

.birthday-footer-note {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-heading);

    font-size: var(--text-sm);

    font-style: italic;
}

/* =========================================
   PAGE 04 - THE GIRL I ADMIRE
========================================= */


/* WADAH UTAMA */

.gallery-page {
    max-width: 950px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-xl);

    padding: var(--space-xl) 0;
}


/* JUDUL GALERI */


.gallery-heading {
    width: 100%;
    max-width: 550px;
    min-width: 0;

    text-align: center;
    box-sizing: border-box;
}


.gallery-heading h1 {
    margin-bottom: var(--space-sm);

    color: var(--color-text-soft);

    font-size: clamp(2.2rem, 5vw, 3rem);
}

.gallery-heading p {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* GRID FOTO */


.gallery-grid {
    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: var(--space-lg);

    align-items: start;
}



/* KARTU FOTO */

.gallery-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-sm);

    padding: 10px;

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);

    transition: var(--transition-normal);
}


/* FOTO UTAMA */

.gallery-featured {
    grid-row: span 2;
}


/* FOTO YANG MEMANJANG */

.gallery-wide {
    grid-column: 1 / -1;
}


/* PLACEHOLDER FOTO */

.gallery-photo-placeholder {
    position: relative;

    width: 100%;

    min-height: 180px;

    aspect-ratio: 4 / 3;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: var(--space-sm);

    background:
        linear-gradient(
            145deg,
            #F3E9E6,
            #E8D6D2
        );

    color: var(--color-text-soft);

    overflow: hidden;

    border-radius: var(--radius-sm);

    font-size: var(--text-xs);

    letter-spacing: 0.1em;
}


/* FOTO UTAMA LEBIH BESAR */

.gallery-featured .gallery-photo-placeholder {
    aspect-ratio: 4 / 5;

    min-height: 350px;
}


/* FOTO KEEMPAT MEMILIKI RASIO LANDSCAPE */

.gallery-wide .gallery-photo-placeholder {
    aspect-ratio: 16 / 8;

    min-height: 180px;
}


/* ORNAMEN HATI */

.photo-heart {
    color: var(--color-muted-rose);

    font-size: 30px;

    animation: floating 3s ease-in-out infinite;
}


/* NOMOR FOTO */

.gallery-photo-placeholder small {
    position: absolute;

    bottom: 12px;

    right: 12px;

    color: var(--color-text-muted);

    font-size: 10px;
}


/* CAPTION FOTO */

.gallery-caption {
    margin: 0;

    padding: 5px 4px 8px;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-size: var(--text-sm);

    font-style: italic;

    line-height: 1.6;

    text-align: center;
}


/* EFEK SAAT FOTO DISENTUH / DIARAHKAN MOUSE */

.gallery-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 28px rgba(118, 91, 88, 0.12);
}


/* BAGIAN APRESIASI */

.gallery-appreciation {
    width: 100%;

    max-width: 680px;

    padding: clamp(22px, 5vw, 38px);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    text-align: center;
}

.gallery-appreciation h2 {
    margin: var(--space-md) 0;

    color: var(--color-text-soft);

    font-size: var(--text-xl);
}

.gallery-appreciation p:not(.eyebrow) {
    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.9;
}


/* PENUTUP APRESIASI */

.gallery-signature {
    margin-top: var(--space-lg);

    color: var(--color-text-soft) !important;

    font-family: var(--font-heading);

    font-style: italic;
}

/* =========================================
   GALLERY - REAL PHOTOS
========================================= */


/* Mengatur foto asli di dalam kartu galeri */

.gallery-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: inherit;
}


/* Label nomor foto berada di atas gambar */

.gallery-photo-placeholder small {
    z-index: 2;

    padding: 5px 9px;

    background: rgba(245, 239, 235, 0.85);

    border-radius: var(--radius-full);
}

/* =========================================
   PAGE 05 - DREAMS PAGE
========================================= */


/* WADAH UTAMA */

.dreams-page {
    width: 100%;
    max-width: 900px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-xl);

    padding: var(--space-xl) 0;
}


/* JUDUL HALAMAN */

.dreams-heading {
    width: 100%;
    max-width: 650px;

    text-align: center;
}

.dreams-heading h1 {
    margin: var(--space-md) 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 3rem);
}

.dreams-heading > p:last-child {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* KARTU PEMBUKA */

.dreams-intro-card {
    position: relative;

    width: 100%;
    max-width: 720px;

    padding: clamp(25px, 5vw, 45px);

    overflow: hidden;

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    text-align: center;
}

.dreams-intro-label {
    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.15em;
}

.dreams-intro-card h2 {
    color: var(--color-text-soft);

    font-size: var(--text-xl);

    margin: var(--space-md) 0;
}

.dreams-intro-card > p:not(.dreams-intro-label) {
    max-width: 470px;

    margin: 0 auto;

    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.8;
}


/* ORNAMEN KARTU PEMBUKA */

.dreams-intro-decoration {
    position: absolute;

    top: 15px;
    right: 22px;

    color: var(--color-muted-rose);

    font-size: 24px;

    animation: sparkle 2.5s ease-in-out infinite;
}

.dreams-intro-flower {
    display: block;

    margin-top: var(--space-md);

    color: var(--color-muted-rose);

    font-size: 25px;

    animation: floating 3s ease-in-out infinite;
}


/* DAFTAR CERITA */

.dreams-stories {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-md);

    align-items: stretch;
}


/* KARTU CERITA */

.dreams-story-card {
    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: var(--space-lg);

    padding: 25px 22px;

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

    transition: var(--transition-normal);
}


/* KARTU CERITA HIGHLIGHT */

.dreams-story-highlight {
    background-color: var(--color-surface-soft);
}


/* NOMOR CERITA */

.dreams-story-number {
    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-size: 2rem;

    font-style: italic;
}


/* KONTEN CERITA */

.dreams-story-content {
    min-width: 0;
}

.dreams-story-label {
    color: var(--color-text-muted);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.12em;
}


/* JUDUL SETIAP CERITA */

.dreams-story-content h2 {
    color: var(--color-text-soft);

    font-size: 1.35rem;

    line-height: 1.3;

    overflow-wrap: break-word;
}


/* PARAGRAF CERITA */

.dreams-story-content > p:last-child {
    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.85;

    overflow-wrap: break-word;
}


/* SIMBOL KECIL */

.dreams-story-symbol {
    align-self: flex-end;

    color: var(--color-muted-rose);

    font-size: 22px;
}


/* EFEK HOVER */

.dreams-story-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 12px 28px rgba(118, 91, 88, 0.12);
}


/* BAGIAN PENUTUP */

.dreams-closing {
    width: 100%;
    max-width: 650px;

    padding: var(--space-lg);

    text-align: center;
}

.dreams-closing h2 {
    color: var(--color-text-soft);

    font-size: var(--text-xl);

    font-style: italic;
}

.dreams-closing p {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}

.dreams-closing span {
    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-sm);
}

/* =========================================
   PAGE 06 - THE GREAT BIAS SURPRISE
========================================= */


/* WADAH UTAMA */

.bias-page {
    width: 100%;
    max-width: 760px;

    padding: var(--space-xl) 0;

    margin: 0 auto;
}


/* WADAH CERITA */

.bias-stage,
.bias-scene-content {
    width: 100%;
    min-width: 0;
}

.bias-scene-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-xl);

    text-align: center;
}

.bias-scene-content.page-enter {
    animation: fadeIn 0.5s ease both;
}


/* DESKRIPSI UMUM */

.bias-description {
    max-width: 480px;

    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.8;
}


/* KALIMAT HIGHLIGHT */

.bias-highlight {
    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-lg);
}


/* SCENE 01 - AMPLOP PESAN */

.bias-envelope {
    width: 100%;
    max-width: 600px;

    min-height: 350px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: var(--space-md);

    padding: 35px;

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);
}

.bias-envelope-icon {
    display: block;

    color: var(--color-muted-rose);

    font-size: 65px;

    animation: floating 3s ease-in-out infinite;
}

.bias-envelope h1 {
    margin: 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 2.7rem);
}


/* SCENE 02 - PESAN WONWOO */

.bias-message-card {
    width: 100%;
    max-width: 620px;

    padding: clamp(20px, 5vw, 35px);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

    text-align: left;
}


/* PROFIL PESAN */

.bias-profile {
    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);
}

.bias-profile-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: 50%;

    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-size: 25px;
}

/* FOTO PROFIL WONWOO */

.bias-profile-photo {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    border: 1px solid var(--color-border);

    background-color: var(--color-surface-soft);
}

.bias-profile-info h2 {
    margin: 0;

    color: var(--color-text-soft);

    font-size: var(--text-lg);
}

.bias-profile-info p {
    margin: 3px 0 0;

    color: var(--color-text-muted);

    font-size: var(--text-xs);
}


/* PENANDA FAN-MADE */

.bias-message-label {
    margin-bottom: var(--space-md);

    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.12em;
}


/* ISI PESAN */

.bias-message-content {
    padding: clamp(20px, 4vw, 30px);

    background-color: var(--color-surface-soft);

    border-radius: var(--radius-md);

    text-align: center;
}

.bias-message-content h2 {
    color: var(--color-text-soft);

    font-family: var(--font-body);

    font-size: clamp(1.3rem, 4vw, 1.8rem);

    font-weight: 600;
}

.bias-message-content > p[lang="ko"] {
    color: var(--color-text);

    font-size: var(--text-sm);

    line-height: 2;
}


/* GARIS PEMISAH PESAN */

.bias-message-divider {
    width: 45px;
    height: 1px;

    margin: var(--space-lg) auto;

    background-color: var(--color-muted-rose);
}


/* TERJEMAHAN INDONESIA */

.bias-translation {
    margin: 0;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-size: var(--text-base);

    font-style: italic;

    line-height: 1.9;
}


/* DISCLAIMER */

.bias-disclaimer {
    margin: var(--space-md) 0 0;

    color: var(--color-text-muted);

    font-size: 10px;

    line-height: 1.6;

    text-align: center;
}


/* SCENE 03 - HADIAH */

.bias-gift-intro,
.bias-closing-scene {
    width: 100%;
    max-width: 600px;

    min-height: 320px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: var(--space-md);

    padding: 35px;

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);
}

.bias-gift-symbol,
.bias-closing-symbol {
    color: var(--color-muted-rose);

    font-size: 45px;

    animation: floating 3s ease-in-out infinite;
}

.bias-gift-intro h1,
.bias-closing-scene h1 {
    margin: 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 2.6rem);
}


/* SCENE 04 - GALERI FOTO */

.bias-gallery-scene {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-md);
}

.bias-gallery-scene h1 {
    margin: 0;

    color: var(--color-text-soft);

    font-size: clamp(1.8rem, 5vw, 2.5rem);
}


/* TEMPAT FOTO */

.bias-photo-placeholder {
    position: relative;

    width: min(100%, 400px);

    aspect-ratio: 4 / 5;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: var(--space-sm);

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #F3E9E6,
            #E8D6D2
        );

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    color: var(--color-text-soft);

    font-size: var(--text-sm);

    letter-spacing: 0.08em;

    box-shadow: var(--shadow-soft);
}


/* LABEL FOTO */

.bias-photo-placeholder small {
    position: absolute;

    right: 14px;
    bottom: 14px;

    padding: 6px 12px;

    background-color: rgba(255, 255, 255, 0.85);

    border-radius: var(--radius-full);

    color: var(--color-text-soft);

    font-size: 10px;

    letter-spacing: 0;
}


/* CAPTION FOTO */

.bias-photo-caption {
    max-width: 450px;

    margin: 0;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-lg);
}


/* NOMOR FOTO */

.bias-photo-counter {
    margin: 0;

    color: var(--color-text-muted);

    font-size: var(--text-xs);

    letter-spacing: 0.1em;
}


/* SCENE 07 - FOTO KEJUTAN */

.bias-personal-photo {
    border: 2px solid var(--color-muted-rose);

    animation: scaleIn 0.7s ease both;
}

.bias-surprise-scene {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-md);

    text-align: center;
}

.bias-surprise-scene h1 {
    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 2.8rem);
}

.bias-surprise-scene h2 {
    margin: var(--space-sm) 0 0;

    color: var(--color-muted-rose);

    font-size: var(--text-xl);
}


/* SCENE 08 - PENUTUP */

.bias-closing-scene {
    text-align: center;
}

.bias-closing-heart {
    color: var(--color-muted-rose);

    font-size: 30px;

    animation: sparkle 2s ease-in-out infinite;
}


/* NAVIGASI */

.bias-navigation {
    max-width: 650px;

    margin-top: var(--space-md);
}

/* =========================================
   PAGE 07 - A LETTER FROM MY HEART
========================================= */


/* WADAH UTAMA */

.letter-page {
    width: 100%;

    max-width: 760px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: var(--space-xl);

    padding: var(--space-xl) 0;
}


/* JUDUL HALAMAN */

.letter-heading {
    width: 100%;

    text-align: center;
}

.letter-heading h1 {
    margin: var(--space-md) 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 3rem);
}

.letter-heading p:last-child {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* AMPLOP */

.letter-envelope-stage {
    position: relative;

    width: min(270px, 75vw);

    aspect-ratio: 1.5;

    margin: var(--space-lg) auto;

    perspective: 900px;

    animation: floating 4s ease-in-out infinite;
}


/* BENTUK AMPLOP */

.letter-envelope {
    position: relative;

    width: 100%;
    height: 100%;
}


/* BELAKANG AMPLOP */

.letter-envelope-back {
    position: absolute;

    inset: 0;

    background: var(--color-dusty-rose);

    border-radius: 8px;

    box-shadow: var(--shadow-soft);
}


/* KERTAS KECIL DI DALAM AMPLOP */

.letter-envelope-paper {
    position: absolute;

    left: 10%;
    bottom: 8%;

    width: 80%;
    height: 85%;

    display: flex;

    justify-content: center;
    align-items: flex-start;

    padding-top: 25px;

    background: white;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;

    border-radius: 5px;

    z-index: 2;

    transition: transform 0.8s ease;
}


/* TUTUP AMPLOP */

.letter-envelope-flap {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 65%;

    background: #D7B7B2;

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    transform-origin: top;

    transition: transform 0.8s ease;

    z-index: 5;
}


/* DEPAN AMPLOP */

.letter-envelope-front {
    position: absolute;

    inset: 0;

    background: #E8D6D2;

    clip-path: polygon(
        0 0,
        50% 58%,
        100% 0,
        100% 100%,
        0 100%
    );

    border-radius: 8px;

    z-index: 3;
}


/* SEGEL AMPLOP */

.letter-envelope-seal {
    position: absolute;

    top: 43%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    background: var(--color-muted-rose);

    color: white;

    border-radius: 50%;

    font-size: 21px;

    z-index: 6;

    transition: opacity 0.4s ease;
}


/* ANIMASI AMPLOP */

.letter-envelope-stage.is-open .letter-envelope-flap {
    transform: rotateX(180deg);
}

.letter-envelope-stage.is-open .letter-envelope-paper {
    transform: translateY(-45px);
}

.letter-envelope-stage.is-open .letter-envelope-seal {
    opacity: 0;
}


/* INSTRUKSI BUKA SURAT */

.letter-instruction {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-heading);

    font-style: italic;

    text-align: center;
}


/* KERTAS SURAT */

.letter-paper {
    width: 100%;

    padding: clamp(25px, 6vw, 55px);

    background-color: #FFFCFA;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);
}


/* MENGHORMATI ATRIBUT HIDDEN */

.letter-paper[hidden],
.letter-closing[hidden] {
    display: none !important;
}


/* HEADER KERTAS */

.letter-paper-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding-bottom: var(--space-md);

    margin-bottom: var(--space-xl);

    border-bottom: 1px solid var(--color-border);
}

.letter-paper-header p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 10px;

    letter-spacing: 0.12em;
}

.letter-paper-header span {
    color: var(--color-muted-rose);

    font-size: 22px;
}


/* ISI SURAT */

.letter-content {
    color: var(--color-text);

    font-size: var(--text-base);

    line-height: 2;

    text-align: left;
}

.letter-content h2 {
    margin-bottom: var(--space-lg);

    color: var(--color-text-soft);

    font-size: var(--text-xl);

    font-style: italic;
}

.letter-content p {
    margin-bottom: var(--space-lg);

    color: var(--color-text);

    line-height: 2;
}


/* TANDA TANGAN */

.letter-content .letter-signature {
    margin-top: var(--space-2xl);

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-style: italic;
}


/* BAGIAN BAWAH KERTAS */

.letter-paper-footer {
    padding-top: var(--space-lg);

    margin-top: var(--space-xl);

    border-top: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-sm);

    text-align: center;
}


/* ONE LAST THING */

.letter-closing {
    position: relative;

    width: 100%;

    max-width: 680px;

    padding: clamp(30px, 6vw, 50px);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    text-align: center;
}

.letter-closing h2 {
    margin: var(--space-md) 0;

    color: var(--color-text-soft);

    font-size: var(--text-2xl);

    font-style: italic;
}

.letter-closing p {
    color: var(--color-text-muted);

    font-size: var(--text-sm);

    line-height: 1.8;
}

.closing-main-message {
    color: var(--color-text-soft) !important;

    font-family: var(--font-heading);

    font-size: var(--text-lg) !important;

    font-style: italic;
}

.closing-heart {
    display: block;

    margin-top: var(--space-lg);

    color: var(--color-muted-rose);

    font-family: var(--font-heading);

    font-style: italic;

    font-size: var(--text-base);
}

.closing-sparkle {
    display: block;

    color: var(--color-muted-rose);

    font-size: 28px;

    animation: sparkle 2.5s ease-in-out infinite;
}


/* ANIMASI MUNCULNYA SURAT */

.letter-reveal {
    animation: slideUp 0.9s ease both;
}


/* NAVIGASI SURAT */

.letter-navigation {
    max-width: 650px;
}

/* =========================================
   PAGE 04 - GALLERY DETAIL MODAL
========================================= */


/* LATAR POP-UP */

.gallery-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(65, 47, 45, 0.58);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.25s ease both;
}


/* MEMASTIKAN POP-UP TERSEMBUNYI */

.gallery-modal[hidden] {
    display: none !important;
}


/* KARTU POP-UP */

.gallery-modal-panel {
    position: relative;

    width: 100%;

    max-width: 620px;

    max-height: 88vh;

    overflow-y: auto;

    padding: clamp(22px, 5vw, 36px);

    background: #F5EFEB;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

    text-align: center;

    animation: scaleIn 0.3s ease both;
}


/* TOMBOL X */

.gallery-modal-close {
    position: absolute;

    top: 14px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    background: transparent;

    border: none;

    color: var(--color-text-soft);

    font-size: 28px;

    cursor: pointer;

    transition: var(--transition-fast);
}

.gallery-modal-close:hover {
    color: var(--color-muted-rose);

    transform: rotate(90deg);
}


/* LABEL FOTO */

.gallery-modal-label {
    margin: 0 35px var(--space-lg);

    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.13em;
}


/* FOTO DI DALAM POP-UP */

.gallery-modal-image {
    width: 100%;

    max-height: 350px;

    object-fit: contain;

    background: var(--color-surface-soft);

    border-radius: var(--radius-md);
}


/* JUDUL DESKRIPSI */

.gallery-modal-panel h2 {
    margin: var(--space-lg) 0;

    color: var(--color-text-soft);

    font-size: var(--text-xl);

    font-style: italic;
}


/* DESKRIPSI PANJANG */

.gallery-modal-description {
    color: var(--color-text);

    font-size: var(--text-sm);

    line-height: 1.9;

    text-align: left;

    white-space: pre-line;

    overflow-wrap: break-word;
}


/* TOMBOL KEMBALI */

.gallery-modal-back {
    margin-top: var(--space-xl);

    min-height: 44px;
}


/* AREA CARD BISA DIKLIK */

.gallery-card-trigger {
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* INDIKATOR READ THE STORY */

.gallery-more {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 4px 4px 8px;

    color: var(--color-muted-rose);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.04em;

    transition: var(--transition-fast);
}


/* ANIMASI KECIL TANDA PANAH */

.gallery-more span {
    transition: transform 0.2s ease;
}


/* SAAT CARD DIARAHKAN MOUSE */

.gallery-card-trigger:hover .gallery-more {
    color: var(--color-text-soft);

    gap: 10px;
}

.gallery-card-trigger:hover .gallery-more span {
    transform: translate(3px, -3px);
}


/* FOKUS KEYBOARD */

.gallery-card-trigger:focus-visible {
    outline: 2px solid var(--color-muted-rose);

    outline-offset: 5px;
}

/* =========================================
   PAGE 07 - DOCUMENTATION BUTTON
========================================= */


/* WADAH BUTTON */



/* BUTTON DOCUMENTATION */

.documentation-button {
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.07em;
    opacity: 0.85;
    cursor: pointer;
    transition: var(--transition-fast);
}

.documentation-button:hover {
    background-color: var(--color-surface-soft);
    color: var(--color-muted-rose);
    border-color: var(--color-muted-rose);
}

.documentation-button:active {
    transform: scale(0.97);
}

/* Pastikan tombol benar-benar tersembunyi */
.documentation-button[hidden] {
    display: none !important;
}



/* =========================================
   PAGE 08 - BEHIND THE SCENES
========================================= */


/* WADAH UTAMA */

.documentation-page {
    width: 100%;

    max-width: 950px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--space-xl);

    padding: var(--space-xl) 0;
}


/* JUDUL HALAMAN */

.documentation-heading {
    width: 100%;

    max-width: 600px;

    text-align: center;
}

.documentation-heading h1 {
    margin: var(--space-md) 0;

    color: var(--color-text-soft);

    font-size: clamp(2rem, 5vw, 3rem);
}

.documentation-heading p:last-child {
    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* GRID DOKUMENTASI */

.documentation-gallery {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: var(--space-md);
}


/* CARD FOTO */

.documentation-card {
    min-width: 0;

    padding: 8px;

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);

    transition: var(--transition-normal);
}


/* EFEK HOVER */

.documentation-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(118, 91, 88, 0.12);
}


/* TEMPAT FOTO */

.documentation-photo-placeholder {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: var(--space-xs);

    background:
        linear-gradient(
            145deg,
            #F3E9E6,
            #E8D6D2
        );

    border-radius: var(--radius-sm);

    color: var(--color-text-soft);

    font-size: 10px;

    letter-spacing: 0.08em;

    overflow: hidden;
}


/* ORNAMEN FOTO */

.documentation-heart {
    color: var(--color-muted-rose);

    font-size: 25px;

    animation: floating 3s ease-in-out infinite;
}


/* PENUTUP DOKUMENTASI */

.documentation-closing {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--space-xs);

    text-align: center;
}

.documentation-closing span {
    color: var(--color-muted-rose);

    font-size: 24px;
}

.documentation-closing p {
    margin: 0;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-size: var(--text-sm);

    font-style: italic;
}

/* =========================================
   PAGE 08 - DOCUMENTATION GALLERY UPDATE
========================================= */


/* GALERI */

.documentation-gallery {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: var(--space-md);
}


/* CARD FOTO SEBAGAI BUTTON */

.documentation-card {
    width: 100%;
    min-width: 0;

    display: flex;

    flex-direction: column;
    align-items: stretch;

    gap: var(--space-sm);

    padding: 9px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);

    text-align: center;

    cursor: pointer;

    font-family: var(--font-body);

    transition: var(--transition-normal);

    -webkit-tap-highlight-color: transparent;
}


/* EFEK HOVER */

.documentation-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(118, 91, 88, 0.12);
}


/* AREA FOTO */

.documentation-photo-frame {
    width: 100%;

    overflow: hidden;

    border-radius: var(--radius-sm);

    aspect-ratio: 4 / 3;
}


/* FOTO ASLI */

.documentation-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.4s ease;
}


.documentation-card:hover .documentation-image {
    transform: scale(1.035);
}


/* PLACEHOLDER */

.documentation-photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--space-xs);

    background: linear-gradient(
        145deg,
        #F3E9E6,
        #E8D6D2
    );

    color: var(--color-text-soft);

    font-size: var(--text-xs);

    letter-spacing: 0.08em;
}


.documentation-photo-placeholder span {
    color: var(--color-muted-rose);

    font-size: 26px;

    animation: floating 3s ease-in-out infinite;
}


/* CAPTION */

.documentation-caption {
    margin: 0;

    color: var(--color-text-soft);

    font-family: var(--font-heading);

    font-size: var(--text-sm);

    font-style: italic;

    line-height: 1.5;
}


/* READ THE STORY */

.documentation-more {
    display: block;

    padding-bottom: 4px;

    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.04em;

    transition: var(--transition-fast);
}


.documentation-card:hover .documentation-more {
    color: var(--color-text-soft);

    text-decoration: underline;
}


/* FOKUS KEYBOARD */

.documentation-card:focus-visible {
    outline: 2px solid var(--color-muted-rose);

    outline-offset: 4px;
}


/* =========================================
   PAGE 08 - DOCUMENTATION MODAL
========================================= */


/* LATAR POP-UP */

.documentation-modal {
    position: fixed;

    inset: 0;

    z-index: 1100;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 24px;

    background: rgba(65, 47, 45, 0.58);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.25s ease both;
}


.documentation-modal[hidden] {
    display: none !important;
}


/* KARTU POP-UP */

.documentation-modal-panel {
    position: relative;

    width: 100%;
    max-width: 620px;

    max-height: 88vh;

    overflow-y: auto;

    padding: clamp(22px, 5vw, 36px);

    background: #F5EFEB;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

    text-align: center;

    animation: scaleIn 0.3s ease both;
}


/* TOMBOL TUTUP */

.documentation-modal-close {
    position: absolute;

    top: 14px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    background: transparent;

    border: none;

    color: var(--color-text-soft);

    font-size: 28px;

    cursor: pointer;

    transition: var(--transition-fast);
}


.documentation-modal-close:hover {
    color: var(--color-muted-rose);

    transform: rotate(90deg);
}


/* LABEL FOTO */

.documentation-modal-label {
    margin: 0 35px var(--space-lg);

    color: var(--color-muted-rose);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.12em;
}


/* FOTO POP-UP */

.documentation-modal-media {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}


.documentation-modal-image {
    display: block;

    width: 100%;

    max-height: 350px;

    object-fit: contain;

    background: var(--color-surface-soft);

    border-radius: var(--radius-md);
}


/* PLACEHOLDER POP-UP */

.modal-photo-placeholder {
    width: 100%;

    max-width: 450px;

    aspect-ratio: 4 / 3;

    border-radius: var(--radius-md);
}


/* JUDUL CERITA */

.documentation-modal-panel h2 {
    margin: var(--space-lg) 0;

    color: var(--color-text-soft);

    font-size: var(--text-xl);

    font-family: var(--font-heading);

    font-style: italic;
}


/* DESKRIPSI */

.documentation-modal-description {
    color: var(--color-text);

    font-size: var(--text-sm);

    line-height: 1.9;

    text-align: left;

    white-space: pre-line;

    overflow-wrap: break-word;
}


/* TOMBOL KEMBALI */

.documentation-modal-back {
    margin-top: var(--space-xl);

    min-height: 44px;
}