/* ==========================================================================
   PROJECT-DETAIL.CSS - Styling khusus untuk template halaman isi (Project Detail)
   ========================================================================== */

/* --- 1. WRAPPER & NAVIGASI KEMBALI --- */
.detail-wrapper {
    padding: 150px 40px 100px 40px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 50;
    color: var(--sky-text);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8; /* Warna abu-abu redup */
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    transition: color 0.3s, transform 0.3s;
    cursor: none;
}

/* -- HOVER UPDATE: Diubah ke Biru agar konsisten dengan tombol lain -- */
.back-link:hover { 
    color: var(--color-figma-blue); 
    transform: translateX(-5px); /* Efek geser kiri sedikit saat dihover */
}


/* --- 2. HEADER PROJECT --- */
.detail-header { 
    text-align: left; 
    margin-bottom: 40px; 
}

.detail-category { 
    font-family: 'Caveat', cursive; 
    color: var(--color-orange); 
    font-size: 24px; 
    letter-spacing: 1px; 
}

.detail-title { 
    font-size: 56px; 
    font-weight: 900; 
    color: white;
    letter-spacing: -2px; 
    margin: -5px 0 16px 0; 
    text-transform: uppercase; 
    line-height: 1.1;
}

.detail-tags { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
}


/* --- 3. GAMBAR COVER (HERO) --- */
.detail-hero { 
    width: 100%; 
    border-radius: 24px; 
    overflow: hidden; 
    margin-bottom: 60px; 
    background: #0f172a; 
    box-shadow: 0 40px 90px rgba(0,0,0,0.35); 
    border: 1px solid rgba(255,255,255,0.05); 
}

.hero-image { 
    width: 100%; 
    height: auto; 
    max-height: 65vh; /* Membatasi tinggi agar tidak terlalu makan layar */
    object-fit: cover; 
    display: block; 
}


/* --- 4. LAYOUT BODY (GRID 2 KOLOM) --- */
.detail-body { 
    display: grid; 
    grid-template-columns: 1fr 2.5fr; /* Sidebar 1 bagian, Teks 2.5 bagian */
    gap: 60px; 
}


/* --- 5. SIDEBAR (INFO META & TOMBOL) --- */
.detail-sidebar { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

.meta-box { 
    border-bottom: 1px solid rgba(245, 239, 224, 0.1); 
    padding-bottom: 16px; 
}

.meta-label { 
    font-family: var(--font-mono); 
    font-size: 10px; 
    font-weight: 700; 
    color: #64748b; 
    letter-spacing: 1px; 
    display: block; 
    margin-bottom: 8px; 
}

.meta-value { 
    font-size: 15px; 
    font-weight: 600; 
    color: white; 
    line-height: 1.5; 
}

.meta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.w-full { 
    width: 100%; 
    justify-content: center; 
    text-align: center; 
}


/* --- 6. KONTEN ARTIKEL TEKS --- */
.detail-text-content { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; /* Jarak lega antar paragraf */
}

.section-heading { 
    font-family: 'Archivo Black', sans-serif; 
    font-size: 22px; 
    color: white; 
    letter-spacing: -0.5px; 
    text-transform: uppercase; 
    margin-bottom: 16px; 
}

.content-p { 
    font-size: 16px; 
    line-height: 1.8; /* Line height tinggi agar mudah dibaca */
    color: #cbd5e1; 
    font-weight: 400; 
}


/* --- 7. GALERI GRID --- */
.detail-gallery { 
    margin-top: 80px; 
    border-top: 1px solid rgba(245, 239, 224, 0.1); 
    padding-top: 80px; 
}

.text-center { 
    text-align: center; 
    margin-bottom: 40px; 
}

.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
}

.gallery-item { 
    border-radius: 16px; 
    overflow: hidden; 
    background: #0f172a; 
    border: 1px solid rgba(255,255,255,0.05); 
    aspect-ratio: 16/9; 
}

.gallery-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.4s; 
}

.gallery-item:hover img { 
    transform: scale(1.05); /* Efek zoom tipis saat kursor di atas gambar */
}


/* --- 8. STATE 404 (ERROR NOT FOUND) --- */
.not-found-state { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 60vh; 
    text-align: center; 
}


/* --- 9. RESPONSIF UNTUK MOBILE / TABLET --- */
@media (max-width: 850px) {
    .detail-wrapper { 
        padding: 120px 20px 80px 20px; 
    }
    
    .detail-body { 
        grid-template-columns: 1fr; /* Sidebar pindah ke atas teks */
        gap: 50px; 
    }
    
    .detail-sidebar {
        border-bottom: 1px solid rgba(245, 239, 224, 0.1);
        padding-bottom: 40px;
    }
    
    .meta-box {
        border: none;
        padding-bottom: 0;
    }
    
    .detail-title { 
        font-size: 40px; 
    }
    
    .gallery-grid { 
        grid-template-columns: 1fr; /* Galeri jadi 1 baris vertikal */
    }
}