/* =========================================
   STYLE KHUSUS HALAMAN LOGBOOK (FULL WIDTH EDITORIAL)
   ========================================= */

.logbook-gallery-section {
    width: 100%;
    background-color: #fff;
    /* 🔥 HAPUS padding kiri-kanan agar mentok layar 🔥 */
    padding: 0 0 120px 0; 
}

.logbook-masonry {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Jarak super lega antar cerita */
    width: 100%;
    /* 🔥 HAPUS batasan lebar, biarkan 100% ujung ke ujung 🔥 */
    max-width: 100%; 
    margin: 0; 
}

.logbook-story-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
}

/* Wadah Gambar: Proporsi Sinematik Ultra-Wide (21:9) */
.logbook-image-wrapper {
    width: 100%;
    aspect-ratio: 21 / 9; 
    overflow: hidden;
    background: #FAFAFA;
    margin-bottom: 30px; 
}

.logbook-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.logbook-story-card:hover .logbook-image-wrapper img {
    transform: scale(1.03);
}

/* Kontainer Teks di Bawah Gambar */
.logbook-story-content {
    text-align: center; 
    padding: 0 20px;
    width: 100%;
    /* Teks tetap dibatasi lebarnya di tengah agar mata nyaman membaca */
    max-width: 800px; 
    margin: 0 auto; 
}

.logbook-story-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #D4A373;
    display: block;
    margin-bottom: 12px;
}

.logbook-story-title {
    font-size: 36px; /* Lebih besar untuk mengimbangi gambar raksasa */
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: #111;
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s;
}

.logbook-story-card:hover .logbook-story-title {
    color: #4A5D4E; 
}

/* =========================================
   LOGBOOK SLIDER SYSTEM
   ========================================= */

/* Wadah Utama Slider */
.logbook-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9; 
    overflow: hidden;
    background: #111;
    margin-bottom: 30px;
}

/* Rel tempat foto berjejer ke samping */
.logbook-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.logbook-slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tombol Navigasi (Hanya muncul jika foto > 1) */
.logbook-slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    pointer-events: none; /* Agar tidak menghalangi klik ke kartu */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logbook-story-card:hover .logbook-slider-nav {
    opacity: 1;
}

.lb-nav-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* Tombol tetap bisa diklik */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.lb-nav-btn:hover {
    background: #fff;
    color: #111;
}

@media (max-width: 768px) {
    .logbook-image-wrapper { aspect-ratio: 4 / 3; }
    .logbook-slider-nav { opacity: 1; } /* Di HP navigasi selalu terlihat */
}

/* =========================================
   LOGBOOK SLIDER DOTS (INDIKATOR BAWAH)
   ========================================= */
.logbook-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.lb-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Agar tetap terlihat walau foto putih */
}

/* Titik yang sedang aktif */
.lb-dot.active {
    background-color: #ffffff;
    transform: scale(1.3); /* Sedikit membesar */
}


@media (max-width: 768px) {
    .logbook-image-wrapper { 
        aspect-ratio: 4 / 3; 
    }
    
    /* 🔥 KUNCI: Sembunyikan panah navigasi di layar HP 🔥 */
    .logbook-slider-nav { 
        display: none !important; 
    }
}
/* =========================================
   RESPONSIVITAS MOBILE (HP)
   ========================================= */
@media (max-width: 768px) {
    .logbook-gallery-section {
        padding: 0 0 80px 0; 
    }

    .logbook-masonry {
        gap: 60px; 
    }

    .logbook-image-wrapper {
        /* Di HP, gambar dibuat 4:3 (sedikit mengotak) agar tidak terlalu pipih/tipis */
        aspect-ratio: 4 / 3; 
        margin-bottom: 20px;
    }

    .logbook-story-content {
        padding: 0 20px; 
    }

    .logbook-story-title {
        font-size: 26px; 
    }
}