/* TITLE UNDERLINE FIX - SHORTER RED LINE */
/* Memperpendek garis merah di bawah judul section */

/* Override default title8 underline dari color11.css */
.title8:before {
    width: 60px !important; /* Shortened from 100% to 60px */
    max-width: 60px !important;
    background: #dc3545 !important; /* Change to red color */
    height: 3px !important;
    border-radius: 2px !important;
}

.title8:hover:before {
    width: 60px !important; /* Keep same width on hover */
    max-width: 60px !important;
}

/* Specific fixes for different sections */

/* Berita Utama title */
.berita-utama-section .title8:before,
.title8.berita-utama-title:before {
    width: 50px !important;
    max-width: 50px !important;
    background: #dc3545 !important;
}

/* Video GenOne title */
.video-genone-section .title8:before,
.title8.video-genone-title:before {
    width: 50px !important;
    max-width: 50px !important;
    background: #dc3545 !important;
}

/* Review Pengguna title */
.review-section .title8:before,
.title8.review-title:before {
    width: 50px !important;
    max-width: 50px !important;
    background: #dc3545 !important;
}

/* Motor Terbaru title */
.motor-section .title8:before,
.title8.motor-title:before {
    width: 50px !important;
    max-width: 50px !important;
    background: #dc3545 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .title8:before {
        width: 40px !important;
        max-width: 40px !important;
        height: 2px !important;
    }
    
    .title8:hover:before {
        width: 40px !important;
        max-width: 40px !important;
    }
}

@media (max-width: 576px) {
    .title8:before {
        width: 35px !important;
        max-width: 35px !important;
        height: 2px !important;
    }
    
    .title8:hover:before {
        width: 35px !important;
        max-width: 35px !important;
    }
}

/* Ensure consistent styling across all title sections */
.title8 {
    text-align: center !important;
    position: relative !important;
}

.title8 h4 {
    text-align: center !important;
    position: relative !important;
    display: inline-block !important;
}

/* Override any conflicting ::after pseudo-elements from other CSS files */
.title8 h4::after {
    display: none !important;
    content: none !important;
}

/* Force the :before pseudo-element to be visible and properly styled */
.title8:before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
}

/* Additional specificity for stubborn cases */
section .title8:before,
div.title8:before,
.container .title8:before {
    width: 60px !important;
    max-width: 60px !important;
    background: #dc3545 !important;
    height: 3px !important;
}

/* Mobile specific overrides */
@media (max-width: 768px) {
    section .title8:before,
    div.title8:before,
    .container .title8:before {
        width: 40px !important;
        max-width: 40px !important;
        height: 2px !important;
    }
}

@media (max-width: 576px) {
    section .title8:before,
    div.title8:before,
    .container .title8:before {
        width: 35px !important;
        max-width: 35px !important;
        height: 2px !important;
    }
}