/* ==========================================================
   DIYNEWS AUTHOR PROFILE PAGE VISUAL STYLE (MODULAR)
   Version : 1.0
   ========================================================== */
:root {
    --diy-author-primary: #dc3545;
    --diy-author-card: #ffffff;
    --diy-author-blue: #007bff;
}

/* Banner & Profile Setup */
.diy-author-header { 
    background: #e5e7eb; 
    height: 180px; 
    width: 100%;
}

.diy-author-profile-container { 
    margin: -75px auto 20px auto; 
    padding: 0 15px; 
    display: flex; 
    align-items: flex-end; 
    gap: 20px; 
}

.diy-author-photo { 
    width: 150px; 
    height: 150px; 
    border-radius: 50% !important; 
    background: #ffffff; 
    border: 5px solid white; 
    object-fit: cover; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.diy-author-info { 
    padding-bottom: 10px; 
}

.diy-author-info h1 { 
    margin: 0; 
    font-size: 1.8rem; 
    font-weight: 800;
    color: #111827;
}

.diy-author-info p {
    margin: 4px 0;
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 600;
}

.diy-author-socials { 
    margin-top: 8px; 
}

.diy-author-socials a { 
    color: var(--diy-author-primary); 
    margin-right: 15px; 
    font-weight: 700; 
    font-size: 0.85rem; 
}

/* Container Wrapper Layout */
.diy-author-wrapper { 
    display: flex; 
    margin: 30px auto 50px auto; 
    gap: 30px; 
    padding: 0 15px; 
}

/* Left Column Sidebar (300px) */
/* ==========================================================
   PERBAIKAN: AKTIFKAN FITUR STICKY PADA KOLOM KIRI PROFILE
   ========================================================== */
.diy-author-left { 
    width: 300px; 
    flex-shrink: 0; 
    
    /* AKTIVASI STICKY CORE */
    position: -webkit-sticky; /* Dukungan browser Safari */
    position: sticky;
    top: 20px; /* Jarak batas atas saat melayang mengunci layar */
    align-self: start; /* Wajib ada agar tinggi kolom kiri tidak molor */
}

.diy-author-card { 
    background: var(--diy-author-card); 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    border: 1px solid #eee;
    margin-bottom: 20px; 
}

.diy-author-card h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.diy-author-stats { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}

.diy-author-stat-box { 
    background: var(--diy-author-blue); 
    color: white; 
    padding: 15px 5px; 
    text-align: center; 
    border-radius: 6px; 
    font-size: 0.8rem; 
    font-weight: 500;
}

.diy-author-stat-box b { 
    display: block; 
    font-size: 1.3rem; 
    font-weight: 800;
}

/* Right Column Main Feed Area */
.diy-author-main { 
    flex: 1; 
    min-width: 0;
}

.diy-author-tabs { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 25px; 
    border-bottom: 2px solid #e5e7eb; 
}

.diy-author-tab { 
    padding: 10px 5px; 
    font-weight: 700; 
    color: #4b5563; 
}

.diy-author-tab.active { 
    color: var(--diy-author-primary); 
    border-bottom: 2px solid var(--diy-author-primary); 
    margin-bottom: -2px; 
}

/* Feed List Post Items Box */
.diy-author-feed-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.diy-author-article { 
    background: var(--diy-author-card); 
    padding: 16px; 
    border-radius: 8px; 
    display: flex; 
    gap: 20px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); 
    border: 1px solid #eee;
    align-items: center;
}

.diy-author-article-img { 
    width: 180px; 
    height: 110px; 
    background: #f3f4f6; 
    border-radius: 6px; 
    flex-shrink: 0; 
    overflow: hidden;
}

.diy-author-article-content {
    flex: 1;
    min-width: 0;
}

.diy-author-article-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    line-height: 1.4;
}

.diy-author-meta { 
    font-size: 0.8rem; 
    color: #9ca3af; 
    margin: 0;
}

/* BREAKPOINT MOBILE RESPONSIVE ADAPTATION */
/* ==========================================================
   PERBAIKAN MUTLAK: MATIKAN TOTAL STICKY DI VERSI MOBILE
   ========================================================== */
@media (max-width: 768px) {
    .diy-author-profile-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -60px;
    }
    .diy-author-socials {
        justify-content: center;
    }
    .diy-author-wrapper {
        flex-direction: column;
    }
    
    /* KUNCI PERBAIKAN: Memaksa kolom kiri kembali normal (tidak melayang) di HP */
    .diy-author-left {
        width: 100%;
        position: static !important; /* Menghapus total efek sticky khusus di mobile */
    }
    
    .diy-author-article {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .diy-author-article-img {
        width: 100%;
        height: 160px;
    }
}