/* ==========================================================================
   1. RESET, VARIABLES & CANVAS
   ========================================================================== */
:root {
    --bg-dark: #070709; 
    --text-main: #f5f5f5;
    --text-muted: #8e8e8e;
    --accent-gold: #E5C07B; 
    --gold-glow: rgba(229, 192, 123, 0.2);
    --error: #FF6B6B;
    --success: #48C774;
    
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Outfit', sans-serif;
    --font-hand: 'Sacramento', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) { * { cursor: none; } }

/* PERBAIKAN 1: Pindahkan overflow-x: hidden ke body agar Smooth Scroll bekerja! */
html { scroll-behavior: smooth; }
body { 
    background-color: var(--bg-dark); 
    color: var(--text-main); 
    font-family: var(--font-body); 
    background-image: radial-gradient(circle at 50% 0%, #15151c 0%, var(--bg-dark) 50%); 
    overflow-x: hidden; 
}

#particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.8; }

/* ==========================================================================
   2. CUSTOM CURSOR
   ========================================================================== */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 99999999; pointer-events: none; }
.cursor-dot { width: 8px; height: 8px; background: var(--accent-gold); }
.cursor-ring { width: 40px; height: 40px; border: 1px solid var(--gold-glow); transition: width 0.2s, height 0.2s, background 0.2s; }

/* ==========================================================================
   3. LAYER MANAGEMENT & TRANSITIONS
   ========================================================================== */
.full-screen-layer { position: fixed; inset: 0; background: var(--bg-dark); display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 1s ease, transform 1s ease, visibility 1s; }
.slide-up { transform: translateY(-100%); opacity: 0; visibility: hidden; }

.view-master { position: relative; width: 100%; z-index: 5; opacity: 0; transition: opacity 1.5s ease 0.5s; display: none; overflow-x: hidden; }
.view-master.visible { opacity: 1; display: block; }
.view-section { width: 100%; padding-bottom: 50px; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease, visibility 0.8s; }
.view-section.hidden-layer { position: absolute; top: 0; left: 0; transform: translateX(-30px); opacity: 0; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; }
.view-section.visible { position: relative; transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; height: auto; overflow: visible; }

/* REVEAL ANIMATION */
.reveal-item { opacity: 0; transform: translateY(40px); transition: all 1s ease; }
.reveal-item.active { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   4. COMPONENT: BUTTONS
   ========================================================================== */
.btn-gold { 
    background: linear-gradient(135deg, var(--accent-gold), #c99824);
    border: none; border-radius: 50px; color: #000 !important; padding: 15px 40px; 
    font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; 
    position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; 
    display: inline-flex; justify-content: center; align-items: center;
    box-shadow: 0 5px 15px rgba(229, 192, 123, 0.3), inset 0 2px 2px rgba(255,255,255,0.4); margin: 0 auto; text-align: center;
}
.btn-gold::before { content: ''; position: absolute; inset: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: 0.5s; z-index: -1; }
.btn-gold:hover { color: #000 !important; letter-spacing: 4px; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(229, 192, 123, 0.5), inset 0 2px 2px rgba(255,255,255,0.5); }
.btn-gold:hover::before { left: 100%; }
.btn-full { width: 100%; margin-top: 15px; display: block; }

.gallery-btn-wrapper { text-align: center; margin-top: 20px; margin-bottom: 50px; padding: 0 20px; }

.btn-secret-small { background: transparent; border: 1px solid #333; color: #555; padding: 8px 24px; border-radius: 30px; font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; transition: all 0.5s ease; display: inline-block; }
.btn-secret-small:hover { border-color: var(--accent-gold); color: var(--accent-gold); box-shadow: 0 0 15px var(--gold-glow); transform: scale(1.05); }

/* ==========================================================================
   5. AUTH MODAL & KAPSUL KERTAS SOBEK
   ========================================================================== */
.auth-form { width: 100%; max-width: 380px; background: rgba(255,255,255,0.02); padding: 50px 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(15px); margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 30000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.5s ease; }
.modal-overlay.active-modal { opacity: 1; visibility: visible; }
.modal-box { position: relative; transform: translateY(20px) scale(0.95); transition: 0.5s ease; text-align: center; }
.modal-overlay.active-modal .modal-box { transform: translateY(0) scale(1); }
.modal-title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 10px; }

.btn-close { position: absolute; top: -15px; right: -15px; width: 45px; height: 45px; background: var(--bg-dark); border: 2px solid var(--accent-gold); border-radius: 50%; color: var(--accent-gold); font-size: 1.8rem; display: flex; justify-content: center; align-items: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 10; }
.btn-close:hover { background: var(--error); color: #FFF; border-color: var(--error); transform: rotate(90deg) scale(1.1); box-shadow: 0 0 20px rgba(255, 107, 107, 0.4); }

.input-wrapper { position: relative; margin-bottom: 25px; text-align: left; }
.input-wrapper input { width: 100%; padding: 12px 5px; background: transparent; border: none; border-bottom: 1px solid #444; color: var(--text-main); font-size: 1.1rem; outline: none; transition: 0.3s; }
.input-wrapper label { position: absolute; top: 12px; left: 5px; color: var(--text-muted); pointer-events: none; transition: 0.3s; font-size: 1rem; }
.input-wrapper input:focus ~ label, .input-wrapper input:not(:placeholder-shown) ~ label { top: -12px; font-size: 0.8rem; color: var(--accent-gold); }
.error-msg { color: var(--error); font-size: 0.85rem; min-height: 20px; margin-bottom: 15px; text-align: center; }

/* Kertas Sobek */
.torn-paper-wrapper { position: relative; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8)); transform: translateY(30px) scale(0.95); transition: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal-overlay.active-modal .torn-paper-wrapper { transform: translateY(0) scale(1); }
.torn-paper { background: #fdf6e3; color: #312b2b; padding: 50px 40px; width: 90vw; max-width: 500px; position: relative; font-family: var(--font-hand); font-size: 2rem; line-height: 1.4; text-align: center; }
.torn-paper::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: linear-gradient(45deg, transparent 33.333%, #fdf6e3 33.333%, #fdf6e3 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #fdf6e3 33.333%, #fdf6e3 66.667%, transparent 66.667%); background-size: 20px 20px; }
.torn-paper::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; height: 10px; background: linear-gradient(45deg, #fdf6e3 33.333%, transparent 33.333%, transparent 66.667%, #fdf6e3 66.667%), linear-gradient(-45deg, #fdf6e3 33.333%, transparent 33.333%, transparent 66.667%, #fdf6e3 66.667%); background-size: 20px 20px; }
.signature-text { margin-top: 30px; text-align: right; font-weight: bold; font-size: 1.5rem; }

/* ==========================================================================
   6. SCREENS: WELCOME & SPLASH
   ========================================================================== */
#welcome-screen { z-index: 20000; }
.welcome-container { text-align: center; padding: 0 20px; width: 100%; display: flex; flex-direction: column; align-items: center;}
.time-greeting { font-size: 1.2rem; color: var(--accent-gold); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 5px; opacity: 0.8;}
.brand-title { font-family: var(--font-heading); font-size: 4.5rem; color: var(--accent-gold); margin-bottom: 10px; font-weight: 300; letter-spacing: 2px;}
.brand-subtitle { color: var(--text-muted); margin-bottom: 40px; font-size: 1.1rem; line-height: 1.6; text-align: center; }

#splash-screen { z-index: 15000; }
.splash-inner { text-align: center; padding: 0 20px; width: 100%; display: flex; flex-direction: column; align-items: center;}
.splash-title { font-family: var(--font-heading); font-size: 2.8rem; color: var(--accent-gold); margin-bottom: 10px; font-style: italic; min-height: 60px; }
.splash-subtitle { font-family: var(--font-hand); font-size: 2.5rem; color: var(--text-muted); margin-bottom: 40px; text-align: center; min-height: 50px; }
.hidden-btn { opacity: 0; pointer-events: none; transform: translateY(20px); transition: 1s ease; }
.hidden-btn.show-btn { opacity: 1; pointer-events: auto; transform: translateY(0); }
.typing-cursor::after { content: '|'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   7. LOVE COUNTER SECTION
   ========================================================================== */
.love-counter-section { padding: 80px 20px; text-align: center; background: rgba(255,255,255,0.01); border-top: 1px solid rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.03); margin-top: 50px; }
.counter-title { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-gold); margin-bottom: 30px; font-style: italic; }
.counter-box { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; max-width: 800px; margin: 0 auto; }
.time-unit { background: rgba(0,0,0,0.5); border: 1px solid rgba(212, 175, 55, 0.2); padding: 15px 25px; border-radius: 12px; min-width: 100px; backdrop-filter: blur(5px); display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.time-unit span { font-size: 2.5rem; font-weight: bold; color: #FFF; font-family: var(--font-body); text-shadow: 0 0 10px var(--gold-glow); }
.time-unit small { color: var(--accent-gold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; }

/* ==========================================================================
   8. AUDIO, BACK TO TOP & LAYOUT
   ========================================================================== */
.audio-controller { position: fixed; bottom: 30px; right: 30px; background: rgba(10,10,12,0.85); border: 1px solid var(--gold-glow); padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 15px; z-index: 9000; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.track-info { display: flex; align-items: center; gap: 12px; }
#track-name { font-size: 0.8rem; letter-spacing: 1px; color: var(--text-main); margin-top: 2px; }
.music-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.music-bars .bar { width: 3px; background: var(--accent-gold); border-radius: 1px; height: 4px; }
.music-bars.playing .bar { animation: equalize 1s infinite alternate; }
.music-bars.playing .bar:nth-child(2) { animation-delay: 0.3s; }
.music-bars.playing .bar:nth-child(3) { animation-delay: 0.6s; }
@keyframes equalize { 0% { height: 4px; } 100% { height: 14px; } }

.ctrl-btn { background: none; border: none; color: var(--accent-gold); transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.ctrl-btn.pulse { animation: pulseWarning 1.5s infinite; color: var(--error); } 
@keyframes pulseWarning { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.ctrl-btn:hover { transform: scale(1.1); color: #FFF; }

.btn-back-to-top { position: fixed; bottom: 30px; left: 30px; width: 45px; height: 45px; background: rgba(10,10,12,0.85); border: 1px solid var(--gold-glow); border-radius: 50%; color: var(--accent-gold); font-size: 1.2rem; display: flex; justify-content: center; align-items: center; z-index: 9000; backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.btn-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-back-to-top:hover { background: var(--accent-gold); color: var(--bg-dark); transform: translateY(-5px); box-shadow: 0 10px 20px var(--gold-glow); }

/* PERBAIKAN 2: Teks "Ikuti Relnya" Tidak Menabrak Gambar */
.hero-section { 
    position: relative; /* Menahan posisi absolute di dalamnya */
    min-height: 100vh;  /* Memastikan memenuhi layar sepenuhnya & mendorong timeline ke bawah */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}
.hero-title { font-family: var(--font-heading); font-size: 4.5rem; color: var(--accent-gold); font-weight: 400; text-shadow: 0 10px 30px var(--gold-glow);}
.hero-subtitle { font-size: 1.1rem; letter-spacing: 6px; color: var(--text-muted); text-transform: uppercase; margin-top: 10px; }
.scroll-down { position: absolute; bottom: 30px; color: var(--accent-gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

/* Footer Puisi Mesin Tik */
.album-footer { text-align: center; padding: 100px 20px; border-top: 1px solid rgba(255,255,255,0.03); }
.footer-poetry { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-gold); font-style: italic; min-height: 80px; font-weight: 300; }

/* ==========================================================================
   9. TIMELINE & FRAMES (Rel & Foto)
   ========================================================================== */
.winding-timeline { width: 100%; max-width: 900px; margin: 0 auto; padding: 50px 20px; }
.timeline-item { position: relative; width: 50%; padding: 60px 40px; border: none; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; border-right: 4px dashed var(--accent-gold); border-bottom: 4px dashed var(--accent-gold); border-radius: 0 100px 100px 0; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; border-left: 4px dashed var(--accent-gold); border-bottom: 4px dashed var(--accent-gold); border-radius: 100px 0 0 100px; }
.timeline-item:first-child { border-top-right-radius: 0; }
.timeline-item:last-child { border-bottom: none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.timeline-item .frame-box { display: inline-block; margin-bottom: 30px; }

.photo-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: 0.5s; border-radius: inherit; }
.photo-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(40%); transition: all 0.6s ease; }
.photo-wrapper::after { content: ''; position: absolute; inset: 0; background: rgba(212, 175, 55, 0.2); opacity: 0; transition: 0.4s; }
.photo-wrapper:hover .photo-img { filter: grayscale(0%); transform: scale(1.05); }
.photo-wrapper:hover::after { opacity: 1; }

.frame-squircle-float { border: 2px solid rgba(212, 175, 55, 0.4); padding: 10px; width: 260px; border-radius: 40px; transition: 0.5s; background: transparent; }
.frame-squircle-float .photo-wrapper { border-radius: 30px; }
.frame-squircle-float:hover { border-color: var(--accent-gold); box-shadow: 0 15px 40px var(--gold-glow); transform: translateY(-5px); }

.frame-neumorph-glass { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 20px; border-radius: 12px; box-shadow: inset 2px 2px 10px rgba(0,0,0,0.5); width: 270px; transition: 0.5s; backdrop-filter: blur(5px); }
.frame-neumorph-glass:hover { border-color: var(--accent-gold); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

.frame-dark-neon { background: #000; padding: 2px; width: 250px; position: relative; transition: 0.5s; overflow: hidden; }
.frame-dark-neon::before { content: ''; position: absolute; inset: -15px; background: conic-gradient(from 90deg, transparent, var(--accent-gold), transparent); animation: neonSpin 3s linear infinite; opacity: 0.4; }
.frame-dark-neon .photo-wrapper { background: #000; z-index: 2; border-radius: 0; }
.frame-dark-neon:hover { transform: scale(1.03); }
.frame-dark-neon:hover::before { opacity: 1; }
@keyframes neonSpin { 100% { transform: rotate(360deg); } }

.story-date { font-size: 0.8rem; letter-spacing: 3px; color: var(--accent-gold); text-transform: uppercase; margin-bottom: 8px; display: block; }
.story-title { font-family: var(--font-heading); font-size: 2.3rem; color: #FFF; margin-bottom: 12px; font-weight: 400; }
.story-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }

/* ==========================================================================
   10. GALLERY VIEW
   ========================================================================== */
#gallery-view { padding-top: 100px; }
.gallery-header { text-align: center; margin-bottom: 60px; padding: 0 20px; }
.gallery-title { font-family: var(--font-heading); font-size: 3.5rem; color: var(--accent-gold); margin-bottom: 15px; text-shadow: 0 5px 15px var(--gold-glow); }
.btn-back { color: var(--text-muted); text-decoration: none; font-size: 1rem; border-bottom: 1px solid #444; padding-bottom: 5px; transition: 0.3s; display: inline-block; margin-bottom: 20px; }
.btn-back:hover { color: var(--accent-gold); border-color: var(--accent-gold); letter-spacing: 1px; }

.gallery-grid { column-count: 3; column-gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.gallery-item { break-inside: avoid; margin-bottom: 20px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.03); opacity: 0; transform: translateY(40px); }

.gallery-grid.play-anim .gallery-item { animation: fadeUpGal 0.8s ease forwards; }
@keyframes fadeUpGal { to { opacity: 1; transform: translateY(0); } }

.gallery-grid .gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-grid .gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-grid .gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-grid .gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-grid .gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-grid .gallery-item:nth-child(6) { animation-delay: 0.6s; }

.gallery-item .photo-img { width: 100%; aspect-ratio: auto; filter: grayscale(20%); transition: transform 0.6s ease, filter 0.6s ease; }
.gallery-item:hover .photo-img { filter: grayscale(0%); transform: scale(1.05); }

/* TEKS PENUTUP GALERI */
.gallery-quote-section { text-align: center; padding: 80px 20px 40px 20px; margin-top: 20px; max-width: 800px; margin-left: auto; margin-right: auto; }
.quote-divider { width: 60px; height: 2px; background: var(--accent-gold); margin: 0 auto 30px auto; box-shadow: 0 0 10px var(--gold-glow); }
.gallery-quote { font-family: var(--font-heading); font-size: 2.5rem; color: var(--accent-gold); font-style: italic; margin-bottom: 20px; line-height: 1.4; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.gallery-quote-sub { font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); letter-spacing: 3px; text-transform: uppercase; }

/* ==========================================================================
   11. LIGHTBOX DENGAN NAVIGASI
   ========================================================================== */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px); z-index: 999999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.4s ease; padding: 20px; }
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-content { max-width: 85vw; max-height: 85vh; object-fit: contain; transform: scale(0.9); transition: transform 0.4s; border-radius: 4px; box-shadow: 0 0 40px rgba(0,0,0,0.8); }
.lightbox-overlay.active .lightbox-content { transform: scale(1); }
.btn-close-lightbox { position: absolute; top: 30px; right: 40px; background: none; border: none; color: var(--text-muted); font-size: 3rem; z-index: 10; transition: 0.3s;}
.btn-close-lightbox:hover { color: var(--accent-gold); transform: rotate(90deg); }

.lb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 1px solid var(--accent-gold); color: var(--accent-gold); width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; transition: 0.3s; z-index: 15; backdrop-filter: blur(5px); }
.lb-nav-btn:hover { background: var(--accent-gold); color: var(--bg-dark); transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px var(--gold-glow); }
#lb-prev { left: 30px; }
#lb-next { right: 30px; }

.loader-circle { position: absolute; width: 40px; height: 40px; border: 3px solid var(--gold-glow); border-top: 3px solid var(--accent-gold); border-radius: 50%; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   12. RESPONSIVE MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    * { cursor: auto; } .cursor-dot, .cursor-ring { display: none; }
    .brand-title, .hero-title { font-size: 3rem; }
    .btn-gold { padding: 12px 25px; font-size: 1rem; max-width: 90%; white-space: normal; line-height: 1.4; }
    .timeline-item { width: 100%; padding: 40px 20px 40px 40px; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; text-align: left; border: none; border-left: 4px dashed var(--accent-gold); border-radius: 0; }
    .timeline-item::before { content: ''; position: absolute; top: 40px; left: -10px; width: 16px; height: 16px; background: var(--bg-dark); border: 2px solid var(--accent-gold); border-radius: 50%; z-index: 10; }
    .btn-back-to-top { bottom: 20px; left: 20px; width: 40px; height: 40px; font-size: 1rem; }
    .audio-controller { bottom: 20px; right: 20px; padding: 8px 15px; }
    .torn-paper { padding: 40px 20px; font-size: 1.5rem; width: 95vw; }
    .time-unit { min-width: 70px; padding: 10px 15px; }
    .time-unit span { font-size: 1.8rem; }
    .lb-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
    #lb-prev { left: 10px; } #lb-next { right: 10px; }
    .footer-poetry { font-size: 1.5rem; }
    .gallery-quote { font-size: 1.8rem; }
    .gallery-quote-sub { font-size: 0.85rem; }
}

/* ==========================================================================
   13. CUSTOM SCROLLBAR (DESKTOP)
   ========================================================================== */
::-webkit-scrollbar { width: 10px; background-color: var(--bg-dark); }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-gold), #b8860b); border-radius: 10px; border: 2px solid var(--bg-dark); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f9e29c, var(--accent-gold)); }
* { scrollbar-width: thin; scrollbar-color: var(--accent-gold) var(--bg-dark); }