/* ==========================================================
   DIYNEWS SINGLE POST
   Version : 1.0
   ========================================================== */



/* ==========================================================
   1. SINGLE LAYOUT
   ========================================================== */

.diy-single-layout{

    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;

    gap:40px;

    align-items:start;

    margin:30px auto;

}



/* ==========================================================
   2. CONTENT AREA
   ========================================================== */

.diy-single-content{

    min-width:0;

}



/* ==========================================================
   3. SIDEBAR
   ========================================================== */

.diy-single-sidebar{

    position:sticky;

    top:20px;

    align-self:start;

}



/* ==========================================================
   4. ARTICLE WRAPPER
   ========================================================== */

.diy-single{

    background:#fff;

    border-radius:8px;

    padding:18px;

    box-shadow:0 1px 6px rgba(0,0,0,.06);

}



/* ==========================================================
   5. HEADER
   ========================================================== */

.diy-single-header{

    margin-bottom:32px;

}

.diy-single-header>*:last-child{

    margin-bottom:0;

}



/* ==========================================================
   6. CATEGORY
   ========================================================== */

.diy-category{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:18px;

}

.diy-category a{

    display:inline-block;

    background:#d9091b;

    color:#fff;

    padding:6px 12px;

    border-radius:4px;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    text-transform:uppercase;

    transition:.25s;

}

.diy-category a:hover{

    background:#b30716;

}



/* ==========================================================
   7. TITLE
   ========================================================== */

.diy-title{

    font-size:44px;

    font-weight:800;

    line-height:1.18;

    color:#202124;

}



/* ==========================================================
   8. META
   ========================================================== */


.diy-meta-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; margin-top: 25px; font-size:14px; }
        .diy-avatar { width: 45px; height: 45px; border-radius: 50%; background: #dc2626; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; }
        .diy-avatar img {
    border-radius: 50%;
    display: block; /* Menghilangkan celah kosong di bawah gambar */
    object-fit: cover; /* Memastikan foto tidak distorsi atau gepeng */
}
        .diy-meta-text { margin-left: 12px; display: flex; flex-direction: column; }
        .diy-admin-name { font-weight: bold; color: #333; line-height: 1.2; }
        .diy-date { font-size: 0.85rem; color: #777;     font-size: 0.65rem; }
        
        /* Share Buttons */
        .diy-share-buttons { display: flex; gap: 8px; }
        .diy-btn-share { width: 35px; height: 35px; border-radius: 50%; border: none; cursor: pointer; color: white; font-weight: bold; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
        .diy-btn-share:hover { opacity: 0.8; }
        .diy-btn-fb { background-color: #1877f2; }
        .diy-btn-x { background-color: #000000; }
        .diy-btn-wa { background-color: #25d366; }
        


/* ==========================================================
   9. FEATURED IMAGE
   ========================================================== */

.diy-featured-image{
    margin:25px 0;
}

.diy-featured-image img{
    width:100%;
    max-height:520px;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:6px;
}

.diy-caption { font-size: 0.85rem; color: #777; font-style: italic; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
/* ==========================================================
   10. CONTENT
   ========================================================== */

.diy-content{

    font-size:20px;

    line-height:2;

    color:#222;

}

.diy-content p{

}

.diy-content h2{

    margin:45px 0 20px;

    font-size:34px;

    font-weight:700;

}

.diy-content h3{

    margin:35px 0 18px;

    font-size:28px;

}

.diy-content img{

    max-width:100%;

    height:auto;

    border-radius:8px;

}

.diy-content a{

    color:#0d6efd;

    text-decoration:none;

}

.diy-content a:hover{

    text-decoration:underline;

}

/* ==========================================================
   12. TAGS
   ========================================================== */        
        
        .diy-tags-section { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }
        .diy-tag { display: inline-block; background: #e5e7eb; padding: 5px 12px; border-radius: 6px; font-size: 0.85rem; margin-right: 8px; margin-bottom: 8px; color: #4b5563; }

/* ==========================================================
   13. RELATED POST
   ========================================================== */
    .diy-related-box { display: flex; gap: 15px; align-items: center; background: #fff5f5; border-left: 4px solid #dc2626; padding: 15px; margin: 30px 0; border-radius: 4px; }
        .diy-related-thumb { width: 100px; background: #ddd; border-radius: 4px; flex-shrink: 0; object-fit: cover; }
        .diy-related-content { flex: 1; min-width: 0; } 
        .diy-related-title { font-weight: bold; color: #dc2626; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 4px; }
        .diy-related-link { 
            color: #333 !important; font-weight: 700; text-decoration: none; display: block; font-size: 1rem;
            /* 2-line clamp logic */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }
        .diy-related-link:hover { color: #dc2626; text-decoration: underline; }

/* ==========================================================
   11. Komentar Button
   ========================================================== */


        .diy-post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; flex-wrap: wrap; gap: 15px; }
        .diy-btn-comment { background: #333; color: white; padding: 8px 20px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; transition: background 0.2s; }
        .diy-btn-comment:hover { background: #555; }
        
        
/* ==========================================================
   11. Relations Grid
   ========================================================== */
        .diy-grid-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 30px; }
        .diy-grid-main { display: flex; flex-direction: column; gap: 20px; padding-top:20px; }
        .diy-grid-section-title { font-size: 1.3rem; margin-bottom: 20px; color: #1a1a1a; border-left: 5px solid #dc2626; padding-left: 10px; font-weight: 700; }
        
        .diy-cat { color: #dc2626; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; margin-bottom: 4px; display: block; }
        .diy-meta { color: #888; font-size: 0.75rem; margin-top: 5px; }
        .diy-link { 
            font-size: 0.95rem; font-weight: 600; color: #111; text-decoration: none; display: block; 
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
            line-height: 1.4; transition: color 0.2s;
        }
        .diy-link:hover { color: #dc2626; }
        .diy-thumb { background: #eee; flex-shrink: 0; border-radius: 4px; overflow: hidden; }

        /* Model 1: Classic List */
        .diy-grid-1 .diy-item { display: flex; gap: 15px; padding: 12px; background: #fff; border-radius: 8px; border: 1px solid #eee; transition: transform 0.2s; }
        .diy-grid-1 .diy-item:hover { transform: translateX(5px); border-color: #dc2626; }

        /* Model 2: Grid 2x2 */
        .diy-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .diy-grid-2 .diy-item { background: #fff; padding: 15px; border-radius: 10px; border: 1px solid #eee; transition: box-shadow 0.2s; }
        .diy-grid-2 .diy-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

        /* Model 3: Card Style */
        .diy-grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .diy-grid-3 .diy-item { overflow: hidden; transition: transform 0.2s; }
        .diy-grid-3 .diy-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        .diy-grid-3 .diy-thumb { width: 100%; height: 140px; }
        .diy-grid-3 .diy-content { padding: 15px; }

        /* Model 4: Minimalist List */
        .diy-grid-4 .diy-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #eee; align-items: flex-start; }
        .diy-grid-4 .diy-thumb { width: 90px; height: 70px; }

        .diy-sidebar { display: flex; flex-direction: column; gap: 20px; }
        .diy-sidebar-box { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
            

/* ==========================================================
   11. BREADCRUMB
   ========================================================== */
        
        .diy-breadcrumb {
            font-size: 13px;
            color: #777777;
            margin-bottom: 40px;
        }
        .diy-breadcrumb a {
            color: #1e3a8a; /* Warna biru link */
            text-decoration: none;
            font-weight: 500;
        }
        .diy-breadcrumb a:hover {
            text-decoration: underline;
        }
        .diy-breadcrumb .current-crumb {
            color: #555555;
            font-weight: 400;
        }

            

/* ==========================================================
   11. RESPONSIVE
   ========================================================== */

@media(max-width:991px){

.diy-single-layout{

grid-template-columns:1fr;

gap:30px;

}

.diy-single{

padding:25px;

}

}

@media(max-width:768px){
.diy-featured-image{
    margin:25px 0;
}

.diy-featured-image img{
    width:100%;
    max-height:220px;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:6px;
}
.diy-single{

background:none;

box-shadow:none;

padding:16px;

border-radius:0;

}


.diy-title{

font-size:25px;

line-height:1.35;

}

.diy-meta{

font-size:13px;

gap:8px;

}

.diy-content {
    font-size: 16px;
    line-height: 1.5;
}


}