/* * assets/css/front-page.css
 * FINAL BOSS: The Ethereal Gates + Wisp Cursor + Awakening Sequence.
 * OVERPOWERED MOBILE EDITION (Monolith Void Accordion)
 */

:root {
    --base-bg: #09090b;
    --base-text: #e4e4e7;
    --orb-color: rgba(255, 255, 255, 0.05);
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-ui: 'Segoe UI', Tahoma, sans-serif;
}

html[data-home-vibe="alam"] { --orb-color: rgba(74, 124, 89, 0.3); --base-bg: #050a06; }
html[data-home-vibe="misteri"] { --orb-color: rgba(212, 175, 55, 0.15); --base-bg: #0a070e; }
html[data-home-vibe="psikologi"] { --orb-color: rgba(147, 123, 175, 0.25); --base-bg: #070608; }
html[data-home-vibe="novel"] { --orb-color: rgba(166, 138, 109, 0.25); --base-bg: #14110e; }

/* KUNCI WISP: Bunuh kursor bawaan di Desktop! */
@media (min-width: 1024px) {
    body, a, button, .ethereal-gate { cursor: none !important; }
}

body.home {
    background-color: var(--base-bg) !important;
    color: var(--base-text) !important;
    font-family: var(--font-ui);
    transition: background-color 1.5s ease, color 1.5s ease;
    overflow-x: hidden;
}

/* =========================================
   KURSOR KUPU-KUPU MAGIS
   ========================================= */
.butterfly-cursor {
    position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
    will-change: transform;
    display: none; /* Sembunyiin di HP biar kaga menuhin layar sentuh */
}

@media (min-width: 1024px) {
    .butterfly-cursor { display: block; }
}

.bf-core {
    position: relative; width: 40px; height: 40px; transform-style: preserve-3d;
    filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.25));
    transform: rotateX(45deg);
}

.bf-wing {
    position: absolute; top: 0; width: 20px; height: 40px;
    background-size: contain; background-repeat: no-repeat;
}

.bf-wing.left { left: 0; transform-origin: right center; background-position: right center; }
.bf-wing.right { right: 0; transform-origin: left center; background-position: left center; }

.bf-core.flying .bf-wing.left { animation: flapL var(--flap-speed, 0.15s) infinite alternate ease-in-out; }
.bf-core.flying .bf-wing.right { animation: flapR var(--flap-speed, 0.15s) infinite alternate ease-in-out; }
.bf-core.resting .bf-wing.left { animation: flapLRest 1.5s infinite alternate ease-in-out; }
.bf-core.resting .bf-wing.right { animation: flapRRest 1.5s infinite alternate ease-in-out; }

@keyframes flapL { 0% { transform: rotateY(10deg); } 100% { transform: rotateY(70deg); } }
@keyframes flapR { 0% { transform: rotateY(-10deg); } 100% { transform: rotateY(-70deg); } }
@keyframes flapLRest { 0% { transform: rotateY(10deg); } 100% { transform: rotateY(35deg); } }
@keyframes flapRRest { 0% { transform: rotateY(-10deg); } 100% { transform: rotateY(-35deg); } }

/* =========================================
   AWAKENING SEQUENCE (ANIMASI MASUK)
   ========================================= */
@keyframes heroAwaken {
    from { opacity: 0; filter: blur(15px); transform: scale(0.95); }
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes gateAwaken {
    from { opacity: 0; transform: translateY(120px); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

body.is-loaded .home-hero { animation: heroAwaken 2s ease-out backwards; }

body.is-loaded .ethereal-gate { animation: gateAwaken 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) backwards; }
body.is-loaded .ethereal-gate:nth-child(1) { animation-delay: 0.3s; }
body.is-loaded .ethereal-gate:nth-child(2) { animation-delay: 0.5s; }
body.is-loaded .ethereal-gate:nth-child(3) { animation-delay: 0.7s; }
body.is-loaded .ethereal-gate:nth-child(4) { animation-delay: 0.9s; }

/* =========================================
   AMBIENT BACKGROUND & VIBE PARTICLES
   ========================================= */
.home-ambient-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none; overflow: hidden; perspective: 1000px;
}
.ambient-orb {
    position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
    background: radial-gradient(circle, var(--orb-color) 0%, transparent 70%);
    transform: translate(-50%, -50%); border-radius: 50%; filter: blur(60px);
    transition: background 1.5s ease; will-change: transform;
}
.ambient-noise {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.8; z-index: 1;
}

.vibe-particle-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 1s ease, visibility 1s; }
html[data-home-vibe="alam"] .layer-alam { opacity: 1; visibility: visible; }
.alam-ring { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vw; max-width: 1200px; max-height: 1200px; transform: translate(-50%, -50%) rotate(0deg); animation: spinRing 40s linear infinite; }
.alam-item { position: absolute; top: 50%; left: 50%; width: 120px; height: 80px; margin: -40px 0 0 -60px; background-size: cover; background-position: center; border: 2px solid rgba(74, 124, 89, 0.4); border-radius: 4px; box-shadow: 0 0 20px rgba(74, 124, 89, 0.2); animation: counterSpin 40s linear infinite; }
@keyframes spinRing { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes counterSpin { 100% { transform: rotate(-360deg); } }

html[data-home-vibe="misteri"] .layer-misteri { opacity: 1; visibility: visible; }
.mist-item { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; background-size: contain; background-repeat: no-repeat; transform: translate(var(--startX), var(--startY)) translateZ(-500px) rotate(var(--startRot)); opacity: 0; filter: blur(10px); transition: all 2s cubic-bezier(0.16, 1, 0.3, 1); }
html[data-home-vibe="misteri"] .mist-item { transform: translate(var(--endX), var(--endY)) translateZ(0) rotate(var(--endRot)); opacity: 0.6; filter: blur(0px); }

html[data-home-vibe="psikologi"] .layer-psiko { opacity: 1; visibility: visible; }
.psiko-item { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(147, 123, 175, 0.15) 0%, transparent 60%); background-size: contain; background-repeat: no-repeat; background-position: center; mix-blend-mode: screen; animation: inkPulse var(--pulseTime) ease-in-out infinite alternate; }
@keyframes inkPulse { 0% { transform: scale(0.8) rotate(var(--rot)); opacity: 0; filter: blur(5px); } 100% { transform: scale(1.2) rotate(var(--rot)); opacity: 0.8; filter: blur(0px); } }

html[data-home-vibe="novel"] .layer-novel { opacity: 1; visibility: visible; }
.novel-item { position: absolute; bottom: -20%; width: 100px; height: 140px; background: rgba(166, 138, 109, 0.05); border: 1px solid rgba(166, 138, 109, 0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.5); background-size: contain; background-repeat: no-repeat; animation: floatUp var(--floatTime) linear infinite; }
@keyframes floatUp { 0% { transform: translateY(0) rotate(var(--rotStart)); opacity: 0; } 20% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { transform: translateY(-120vh) rotate(var(--rotEnd)); opacity: 0; } }

/* =========================================
   HERO SECTION
   ========================================= */
.home-wrapper { max-width: 1400px; margin: 0 auto; padding: 8rem 2rem 2rem; position: relative; z-index: 2; }
.home-hero { text-align: center; margin-bottom: 6rem; min-height: 120px; }
.hero-title { font-family: var(--font-serif); font-size: 4.5rem; font-weight: normal; letter-spacing: 15px; text-transform: uppercase; margin: 0 0 1.5rem 0; text-shadow: 0 0 30px rgba(255,255,255,0.1); }
.hero-tagline { font-size: 1.1rem; opacity: 0.6; letter-spacing: 3px; text-transform: uppercase; transition: opacity 0.5s ease; }


/* =========================================
   GERBANG ETHEREAL (EXPANDING FLEX CARDS)
   ========================================= */
.ethereal-gates-container {
    display: flex; flex-direction: row; height: 550px; width: 100%; gap: 1.5rem; margin-bottom: 8rem;
}

.ethereal-gate {
    position: relative; flex: 1; border-radius: 20px; background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; text-decoration: none; color: inherit;
    transition: flex 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.7s ease, border-color 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    display: flex; align-items: flex-end; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    will-change: flex, filter;
}

.gate-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
    opacity: 0.8; z-index: 1; transition: opacity 0.5s ease;
}

/* --- KONDISI HOVER (GERBANG TERBUKA) --- */
.ethereal-gates-container:hover .ethereal-gate { flex: 0.6; filter: brightness(0.5); }
.ethereal-gates-container .ethereal-gate:hover { flex: 3.5; filter: brightness(1); background-color: rgba(255, 255, 255, 0.06); }

.ethereal-gate[data-vibe="alam"]:hover { border-color: rgba(104, 179, 126, 0.4); box-shadow: 0 0 40px rgba(104, 179, 126, 0.1); }
.ethereal-gate[data-vibe="misteri"]:hover { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 0 40px rgba(212, 175, 55, 0.1); }
.ethereal-gate[data-vibe="psikologi"]:hover { border-color: rgba(147, 123, 175, 0.4); box-shadow: 0 0 40px rgba(147, 123, 175, 0.1); }
.ethereal-gate[data-vibe="novel"]:hover { border-color: rgba(166, 138, 109, 0.4); box-shadow: 0 0 40px rgba(166, 138, 109, 0.1); }


/* --- KONTEN DI DALAM GERBANG --- */

/* =========================================
   ARTEFAK TERSEGEL (FULL BACKGROUND GAMBAR)
   ========================================= */
.gate-relic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Pastikan dia di bawah gradasi gate-bg (z-index: 1) */
    opacity: 0; /* Sembunyi total pas pintu nutup */
    transition: opacity 0.8s ease;
    pointer-events: none;
    border-radius: 20px;
    overflow: hidden;
}

.gate-relic img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bikin full se-layar kartu kaga gepeng */
    filter: brightness(0.6) grayscale(0.2); /* Gelapin fotonya dikit biar teks judul tetep kebaca jelas! */
    transform: scale(1.1); /* Posisi awal agak nge-zoom */
    transition: transform 3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Saat Gerbang Mekar (Disorot/Disentuh) */
.ethereal-gate:hover .gate-relic,
.ethereal-gate:active .gate-relic,
.ethereal-gate:focus-within .gate-relic {
    opacity: 1; /* Munculin gambarnya! */
}

/* Efek sinematik: Pas kebuka, fotonya pelan-pelan zoom-out */
.ethereal-gate:hover .gate-relic img,
.ethereal-gate:active .gate-relic img,
.ethereal-gate:focus-within .gate-relic img {
    transform: scale(1); 
}

/* ========================================= */

.gate-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: var(--font-serif); font-size: 3rem; color: rgba(255, 255, 255, 0.2);
    z-index: 1; transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Pas gerbang mekar, Angka Romawi memudar menghilang biar gambarnya yang jadi fokus! */
.ethereal-gate:hover .gate-icon { opacity: 0; transform: translate(-50%, 0) scale(0.6); }

.gate-content {
    position: relative; z-index: 3; padding: 2.5rem; width: 100%;
    opacity: 0; transform: translateY(30px); transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); white-space: nowrap; 
}
.ethereal-gate:hover .gate-content { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

.gate-content h2 { font-family: var(--font-serif); font-size: 2.5rem; font-weight: normal; letter-spacing: 4px; text-transform: uppercase; margin: 0; color: #fff; }
.gate-line { width: 40px; height: 2px; background-color: #fff; margin: 1.5rem 0; transition: width 0.5s ease; }
.ethereal-gate:hover .gate-line { width: 80px; }
.gate-content p { font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 2rem 0; opacity: 0.8; }

.gate-action {
    display: inline-block; font-family: var(--font-ui); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
    padding: 0.8rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-out; 
}
.ethereal-gate:hover .gate-action:hover { background-color: #fff; color: #000; }

.ethereal-gate[data-vibe="alam"]:hover h2 { color: #68b37e; text-shadow: 0 0 15px rgba(104, 179, 126, 0.4); }
.ethereal-gate[data-vibe="alam"]:hover .gate-line { background-color: #68b37e; }
.ethereal-gate[data-vibe="misteri"]:hover h2 { color: #d4af37; text-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }
.ethereal-gate[data-vibe="misteri"]:hover .gate-line { background-color: #d4af37; }
.ethereal-gate[data-vibe="psikologi"]:hover h2 { color: #937baf; text-shadow: 0 0 15px rgba(147, 123, 175, 0.4); }
.ethereal-gate[data-vibe="psikologi"]:hover .gate-line { background-color: #937baf; }
.ethereal-gate[data-vibe="novel"]:hover h2 { color: #a68a6d; text-shadow: 0 0 15px rgba(166, 138, 109, 0.4); }
.ethereal-gate[data-vibe="novel"]:hover .gate-line { background-color: #a68a6d; }


/* =========================================
   LOG EKSPEDISI
   ========================================= */
.recent-log-section { max-width: 900px; margin: 0 auto 4rem; }
.log-header { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; }
.log-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: normal; font-style: italic; color: rgba(255,255,255,0.6); margin: 0; white-space: nowrap; }
.log-divider { height: 1px; flex-grow: 1; background: linear-gradient(to right, rgba(255,255,255,0.1), transparent); }
.log-list { display: flex; flex-direction: column; gap: 1rem; }

.log-item { 
    display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; 
    border: 1px solid rgba(255,255,255,0.03); border-radius: 8px; background-color: rgba(255,255,255,0.01); 
    text-decoration: none; color: inherit; position: relative; overflow: hidden;
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, border-color 0.4s ease; 
}
.log-item.is-visible { opacity: 1; transform: translateX(0); }

.log-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background-color: rgba(255,255,255,0.1); transition: width 0.4s ease, background-color 0.4s ease; z-index: 0; }
.log-item:hover { transform: translateX(10px); background-color: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.log-item[data-source="alam"]:hover::before { width: 100%; background-color: rgba(74, 124, 89, 0.1); }
.log-item[data-source="misteri"]:hover::before { width: 100%; background-color: rgba(212, 175, 55, 0.1); }
.log-item[data-source="psikologi"]:hover::before { width: 100%; background-color: rgba(147, 123, 175, 0.1); }
.log-item[data-source="novel"]:hover::before { width: 100%; background-color: rgba(166, 138, 109, 0.1); }
.log-item > * { position: relative; z-index: 1; }
.log-meta { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 150px; }
.log-date { font-size: 0.8rem; opacity: 0.5; letter-spacing: 2px; }
.log-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; padding: 0.3rem 0.6rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; display: inline-block; align-self: flex-start; opacity: 0.7; }
.log-heading { flex-grow: 1; font-family: var(--font-serif); font-size: 1.4rem; font-weight: normal; margin: 0; padding: 0 2rem; }
.log-arrow { font-size: 1.5rem; opacity: 0; transform: translateX(-15px); transition: all 0.4s ease; }
.log-item:hover .log-arrow { opacity: 1; transform: translateX(0); }

/* =========================================
   RESPONSIVITAS (HP & TABLET)
   🔥 MODE OVERPOWERED MOBILE (THE MONOLITH) 🔥
   ========================================= */
@media (max-width: 992px) {
    .home-wrapper { padding-top: 6rem; }
    .ethereal-gates-container { height: 450px; }
    .hero-title { font-size: 3.5rem; letter-spacing: 10px; }
    .gate-content h2 { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem; letter-spacing: 5px; }
    .hero-tagline { font-size: 0.85rem; letter-spacing: 2px; padding: 0 1rem; }
    
    .ethereal-gates-container { 
        flex-direction: column; 
        height: 85vh; 
        min-height: 600px; 
        gap: 0.6rem;
        margin-bottom: 5rem;
    }
    
    .ethereal-gate { 
        flex: 1; 
        align-items: center; 
        border-radius: 12px;
        opacity: 0.5;
        filter: grayscale(0.8) brightness(0.6);
        box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    }
    
    .ethereal-gates-container .ethereal-gate:hover, 
    .ethereal-gates-container .ethereal-gate:active,
    .ethereal-gates-container .ethereal-gate:focus-within { 
        flex: 8; 
        opacity: 1;
        filter: grayscale(0) brightness(1);
        border-color: rgba(255,255,255,0.2);
        background-color: rgba(255,255,255,0.05);
    }
    
    /* Aura Denyut Magis spesifik per pilar di HP! */
    .ethereal-gate[data-vibe="alam"]:hover, .ethereal-gate[data-vibe="alam"]:active { animation: pulseAlam 3s infinite alternate; border-color: rgba(104, 179, 126, 0.5); }
    .ethereal-gate[data-vibe="misteri"]:hover, .ethereal-gate[data-vibe="misteri"]:active { animation: pulseMisteri 3s infinite alternate; border-color: rgba(212, 175, 55, 0.5); }
    .ethereal-gate[data-vibe="psikologi"]:hover, .ethereal-gate[data-vibe="psikologi"]:active { animation: pulsePsiko 3s infinite alternate; border-color: rgba(147, 123, 175, 0.5); }
    .ethereal-gate[data-vibe="novel"]:hover, .ethereal-gate[data-vibe="novel"]:active { animation: pulseNovel 3s infinite alternate; border-color: rgba(166, 138, 109, 0.5); }

    @keyframes pulseAlam { 0% { box-shadow: inset 0 0 20px rgba(104, 179, 126, 0.05), 0 10px 30px rgba(0,0,0,0.8); } 100% { box-shadow: inset 0 0 50px rgba(104, 179, 126, 0.2), 0 15px 40px rgba(0,0,0,0.9); } }
    @keyframes pulseMisteri { 0% { box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05), 0 10px 30px rgba(0,0,0,0.8); } 100% { box-shadow: inset 0 0 50px rgba(212, 175, 55, 0.2), 0 15px 40px rgba(0,0,0,0.9); } }
    @keyframes pulsePsiko { 0% { box-shadow: inset 0 0 20px rgba(147, 123, 175, 0.05), 0 10px 30px rgba(0,0,0,0.8); } 100% { box-shadow: inset 0 0 50px rgba(147, 123, 175, 0.2), 0 15px 40px rgba(0,0,0,0.9); } }
    @keyframes pulseNovel { 0% { box-shadow: inset 0 0 20px rgba(166, 138, 109, 0.05), 0 10px 30px rgba(0,0,0,0.8); } 100% { box-shadow: inset 0 0 50px rgba(166, 138, 109, 0.2), 0 15px 40px rgba(0,0,0,0.9); } }

    .gate-content { 
        padding: 1.5rem; 
        text-align: center; 
        white-space: normal; 
        transform: translateY(50px);
        opacity: 0;
    }
    
    .ethereal-gate:hover .gate-content,
    .ethereal-gate:active .gate-content {
        transform: translateY(0);
        opacity: 1;
        transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s;
    }

    .gate-content h2 { font-size: 1.8rem; letter-spacing: 3px; }
    .gate-line { margin: 1rem auto; }
    
    .gate-action { 
        display: inline-block; 
        margin-top: 1rem;
        padding: 0.6rem 1.2rem;
        font-size: 0.7rem;
    }
    
    /* --- KUNCI FIX LOG EKSPEDISI: MODE LACI BERGANTIAN (HP) --- */
    .recent-log-section { overflow-x: hidden; padding: 0 1rem; } /* Biar layar kaga goyang pas laci geser */
    .log-list { gap: 0.8rem; }
    
    .log-item { 
        flex-direction: row; 
        align-items: center; 
        gap: 1rem; 
        padding: 1rem 1.2rem; 
        opacity: 0; 
        background-color: rgba(255,255,255,0.02);
    }
    
    /* Laci Ganjil: Masuk dari Kiri */
    .log-item:nth-child(odd) {
        transform: translateX(-50px);
    }
    
    /* Laci Genap: Masuk dari Kanan, Tata Letak Dibalik! */
    .log-item:nth-child(even) {
        transform: translateX(50px);
        flex-direction: row-reverse;
        text-align: right;
    }
    
    /* Pindahin Garis Warna (::before) ke Kanan buat Laci Genap */
    .log-item:nth-child(even)::before {
        left: auto;
        right: 0;
    }
    
    /* Animasi saat tersorot scroll (Muncul) */
    .log-item.is-visible { 
        transform: translateX(0); 
        opacity: 1; 
    }
    
    /* Efek Sentuh HP (Ganjil masuk kanan, Genap masuk kiri) */
    .log-item:nth-child(odd):active { transform: translateX(10px); }
    .log-item:nth-child(even):active { transform: translateX(-10px); }
    
    /* Ukuran elemen dibikin imut & rapet */
    .log-meta { flex: 0 0 85px; gap: 0.3rem; }
    .log-item:nth-child(even) .log-badge { align-self: flex-end; } /* Lencana rata kanan */
    
    .log-date { font-size: 0.65rem; }
    .log-badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
    .log-heading { padding: 0; font-size: 0.95rem; line-height: 1.4; flex-grow: 1; }
    .log-arrow { display: none; }

    /* KUNCI FIX BACKGROUND HP: Hapus sistem ngambang lama, paksa full 100% layar! */
    .gate-relic {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: none !important;
        border-radius: 12px; /* Ngikutin lengkungan gerbang pas di HP */
    }
    
    .ethereal-gate:hover .gate-relic,
    .ethereal-gate:active .gate-relic {
        top: 0;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.6rem; letter-spacing: 3px; }
    .gate-icon { font-size: 2rem; }
    /* Biar di HP kentang layarnya kaga kepenuhan */
    .ethereal-gates-container { height: 80vh; min-height: 500px; }
}
/* =========================================
   FIX VISIBILITAS KARTU (OLED & LOW BRIGHTNESS)
   ========================================= */

/* 1. Terangin Angka Romawi (Berlaku buat Desktop & HP) */
.gate-icon {
    color: rgba(255, 255, 255, 0.45) !important; /* Naik dari 0.2 ke 0.45 biar kaga tenggelam */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important; /* Pendaran tipis di angkanya */
}

/* 2. Terangin Wujud Kartu di HP saat Belum Dibuka */
@media (max-width: 768px) {
    .ethereal-gate { 
        /* Rombak filter gelapnya biar ramah layar OLED */
        opacity: 0.85 !important; 
        filter: grayscale(0.5) brightness(0.9) !important; 
        
        /* Kasih garis tepi transparan biar wujud kartunya keliatan tegas */
        border: 1px solid rgba(255, 255, 255, 0.12) !important; 
        
        /* Bayangan luar biar kartunya ngambang dan misah dari background web */
        box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.4) !important;
    }
}

/* =========================================
   FIX VISIBILITAS KARTU (OLED & LOW BRIGHTNESS)
   ========================================= */

/* 1. Terangin Angka Romawi (Berlaku buat Desktop & HP) */
.gate-icon {
    color: rgba(255, 255, 255, 0.7) !important; /* Naik drastis ke 0.7 biar beneran nyala */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; /* Glow dibikin lebih tebal dan terang */
}

/* 2. Terangin Wujud Kartu di HP saat Belum Dibuka */
@media (max-width: 768px) {
    .ethereal-gate { 
        /* Rombak filter gelapnya biar ramah layar OLED */
        opacity: 0.95 !important; 
        filter: grayscale(0.4) brightness(1.1) !important; /* Kaca layarnya diterangin dikit */
        
        /* Kasih garis tepi transparan biar wujud kartunya keliatan tegas */
        border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Border diputihin lagi ke 25% biar jelas kotak/bentuknya */
        
        /* Bayangan luar biar kartunya ngambang dan misah dari background web */
        box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.6) !important;
    }
}