/* Homepage Enhancements - Premium Look */

/* Global Animation Timing */
.mini-thumb,
.card-post,
.card-post-hot,
.card-post-populer,
.media img {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mini-thumb img,
.card-post img,
.card-post-hot img,
.card-post-populer img,
.media img {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility: hidden;
}

/* 1. Sidebar Mini Posts (Berita Populer, Utama, Biro, etc.) */
.mini-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mini-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mini-thumb {
    width: 90px;
    height: 65px;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 8px;
    /* Rounded Corners */
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Effect for Sidebar Thumbnails */
.mini-post:hover .mini-thumb {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.mini-post:hover .mini-thumb img {
    transform: scale(1.1);
    /* Zoom Effect */
}

.mini-content {
    flex-grow: 1;
}

.mini-content h5 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* 2. Main Content Cards (Breaking News, etc.) */
.card-post {
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* Rounded */
}

.card-post img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.card-post h5 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.card-post h5 a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}

/* Hover Effect for Standard Cards */
.card-post:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-post:hover h5 a {
    color: #0056b3;
}

/* 3. Hot News & Special Report Cards */
.card-post-hot {
    position: relative;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.card-post-hot img {
    border-radius: 10px !important;
    /* Force rounded */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Hover Effect for Hot Cards */
.card-post-hot:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-post-hot h5 a {
    transition: color 0.3s;
}

.card-post-hot:hover h5 a {
    color: #d31d1d;
    /* Red for hot news */
}

/* 4. Populer Cards (Main Content) */
.card-post-populer {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.card-post-populer img {
    border-radius: 10px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.card-post-populer:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-post-populer:hover h5 a {
    color: #28a745;
    /* Green for popular */
}

/* 5. Latest News Media Objects */
.media img.rounded {
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.media:hover img.rounded {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.media-body h6 a {
    transition: color 0.3s;
}

.media:hover .media-body h6 a {
    color: #0056b3;
    text-decoration: none;
}

/* 6. Video Thumbnails */
.video-thumb-container {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.video-thumb-container img {
    transition: transform 0.5s ease, opacity 0.3s;
}

.video-thumb-container:hover img {
    transform: scale(1.1);
    opacity: 0.6 !important;
}

.video-thumb-container .play-icon {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-thumb-container:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.2);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}