/* ============================================
   NORMA NEWS - Custom Stylesheet
   ============================================ */

/* ---- CSS Variables ---- */
:root {
    --primary: #4169E1;
    --primary-dark: #3457C5;
    --secondary: #1a1a2e;
    --accent: #6495ED;
    --primary-rgb: 65, 105, 225;
    --accent-rgb: 100, 149, 237;
    --nav-start: #4169E1;
    --nav-end: #6495ED;
    --dark: #111827;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --white: #ffffff;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Merriweather', Georgia, serif;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: #ffffff;
    color: var(--gray-700);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ---- Top Bar ---- */
.top-bar {
    font-size: 0.8rem;
    background: #0f0f1a !important;
    padding: 0;
}
.top-bar .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Admin row di top bar (hanya saat login) */
.top-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.btn-top-admin {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s;
    text-decoration: none;
}
.btn-top-admin:hover {
    background: rgba(255,255,255,0.2);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.4);
}
.btn-top-admin-add {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-dark);
}
.btn-top-admin-add:hover {
    background: var(--primary-dark);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.4);
}
.top-bar-admin-user {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    gap: 0.25rem;
}
.top-bar-admin-user i.top-bar-user-icon {
    color: #86efac;
    font-size: 0.9rem;
    margin-right: 0.25rem;
}
.top-bar-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(134, 239, 172, 0.6);
    margin-right: 0.35rem;
}

/* Label row: tanggal (kiri) + sosmed (kanan) */
.ticker-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}
.top-bar-right a {
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
    font-size: 0.85rem;
}
.top-bar-right a:hover { color: #fff; }

/* ---- Cuaca Hari Ini - Weather Ticker Strip (dibawah kategori bar) ---- */
.weather-ticker-strip {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid #334155;
    font-size: 0.75rem;
    color: #e2e8f0;
    overflow: hidden;
    height: 36px;
    display: flex;
    align-items: center;
    position: relative;
}
.weather-ticker-label {
    flex-shrink: 0;
    padding: 0 12px;
    font-weight: 700;
    font-size: 0.72rem;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 5px;
    border-right: 1px solid #334155;
    height: 100%;
    background: rgba(251, 191, 36, 0.08);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.weather-ticker-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 1rem;
    color: #60a5fa;
    font-size: 0.75rem;
}
.weather-ticker-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.weather-ticker-scroll::-webkit-scrollbar { display: none; }
.weather-ticker-track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    flex-shrink: 0;
}
.weather-ticker-item {
    padding: 0 1rem;
    border-right: 1px solid rgba(51, 65, 85, 0.5);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 100%;
}
.weather-ticker-item .wt-icon {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}
.weather-ticker-item .wt-city {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.73rem;
}
.weather-ticker-item .wt-temp {
    font-weight: 800;
    color: #38bdf8;
    font-size: 0.78rem;
}
.weather-ticker-item .wt-sep {
    color: #475569;
    font-size: 0.6rem;
    margin: 0 2px;
}
.weather-ticker-item .wt-desc {
    color: #94a3b8;
    font-size: 0.68rem;
}
.weather-ticker-item .wt-humidity {
    color: #64748b;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 3px;
}
.weather-ticker-item .wt-humidity i {
    font-size: 0.6rem;
    color: #38bdf8;
}

/* ---- Full Sticky Header (wraps logo+nav + weather ticker only, NOT top-bar) ---- */
.full-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1055;
    background: var(--white);
    transition: box-shadow 0.3s ease;
}
.full-sticky-header.is-stuck {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ---- Sticky Header Wrapper (logo + navigasi menyatu) ---- */
.sticky-header-wrapper {
    background: var(--white);
    display: flex;
    flex-direction: column;
}

/* ---- Header Content Width Alignment ---- */
.top-bar .container,
.mw-header .container,
.mw-navigation .container {
    padding-left: calc((100% - 1200px) / 2);
    padding-right: calc((100% - 1200px) / 2);
    max-width: 100%;
}
@media (max-width: 1200px) {
    .top-bar .container,
    .mw-header .container,
    .mw-navigation .container {
        padding-left: var(--bs-gutter-x, 0.75rem);
        padding-right: var(--bs-gutter-x, 0.75rem);
    }
}

/* =========================================
   MediaWP-Style Header
   ========================================= */
.mw-header {
    background: var(--white);
    padding: 0.65rem 0;
    position: relative;
}
.mw-header .header-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Brand / Logo */
.mw-header .header-brand {
    flex: 0 0 auto;
}
.mw-header .header-brand .brand-link {
    display: block;
    text-decoration: none;
    line-height: 1;
}
/* Brand name di ujung kanan navbar */
.mw-nav-brand-name {
    margin-left: auto !important;
    padding-left: 1.5rem;
}
.mw-nav-brand-name .nav-brand-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: default;
    padding: 8px 10px;
}
.mw-header .header-brand .brand-logo {
    max-height: 52px;
    width: auto;
    display: block;
}
/* Text logo — SELALU tampil sebagai fallback */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}
.logo-norma {
    font-weight: 900;
    font-size: 3.2rem;
    color: var(--primary);
    letter-spacing: 4px;
    line-height: 1;
}
.logo-news {
    font-weight: 800;
    font-size: 0.95rem;
    background: var(--dark);
    color: var(--white);
    padding: 3px 14px;
    border-radius: 3px;
    letter-spacing: 6px;
    display: inline-block;
}

/* Search — Clean Minimal Style */
.mw-header .header-search {
    flex: 1 1 auto;
    max-width: 320px;
}
.mw-header .header-search-form {
    width: 100%;
}
.mw-header .header-search-wrapper {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: #f8f9fa;
}
.mw-header .header-search-wrapper:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.mw-header .btn-search-icon {
    background: transparent;
    border: none;
    padding: 0.45rem 0.55rem 0.45rem 0.7rem;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: color 0.2s;
    flex-shrink: 0;
}
.mw-header .btn-search-icon:hover {
    color: var(--primary);
}
.mw-header .btn-mic-icon {
    background: transparent;
    border: none;
    padding: 0.45rem 0.55rem 0.45rem 0.4rem;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: color 0.2s;
    flex-shrink: 0;
    position: relative;
}
.mw-header .btn-mic-icon:hover {
    color: var(--primary);
}
.mw-header .btn-mic-icon.listening {
    color: var(--primary);
    animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); border-radius: 50%; }
    50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); border-radius: 50%; }
}
.mw-header .header-input-search {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.5rem 0.4rem;
    font-size: 0.82rem;
    font-family: var(--font-sans);
    color: var(--gray-700);
    background: transparent;
    min-width: 0;
}
.mw-header .header-input-search::placeholder {
    color: #aaa;
}

/* ============================================ */
/* Mobile Nav Search Bar (Hamburger Menu) — Clean Minimal */
/* ============================================ */
.mobile-nav-search-form {
    width: 100%;
}
.mobile-nav-search-bar {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: #f8f9fa;
    width: 100%;
}
.mobile-nav-search-bar:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.mnss-btn-search {
    background: transparent;
    border: none;
    padding: 0.65rem 0.6rem 0.65rem 0.75rem;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 0.2s;
    flex-shrink: 0;
}
.mnss-btn-search:hover,
.mnss-btn-search:active {
    color: var(--primary);
}
.mnss-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.65rem 0.5rem;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    color: var(--gray-700);
    background: transparent;
    min-width: 0;
    width: 100%;
}
.mnss-input::placeholder {
    color: #aaa;
}
.mnss-btn-mic {
    background: transparent;
    border: none;
    padding: 0.65rem 0.6rem 0.65rem 0.4rem;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 0.2s;
    flex-shrink: 0;
}
.mnss-btn-mic:hover,
.mnss-btn-mic:active {
    color: var(--primary);
}
.mnss-btn-mic.listening {
    color: var(--primary);
    animation: mic-pulse-mobile 1s ease-in-out infinite;
}
@keyframes mic-pulse-mobile {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); border-radius: 50%; }
    50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); border-radius: 50%; }
}

/* ============================================ */
/* Search Page Bar (search.php) — Clean Minimal */
/* ============================================ */
.search-page-bar {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: #f8f9fa;
    max-width: 600px;
    margin: 0 auto;
}
.search-page-bar:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.spb-btn-search {
    background: transparent;
    border: none;
    padding: 0.7rem 0.7rem 0.7rem 0.85rem;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.2s;
    flex-shrink: 0;
}
.spb-btn-search:hover {
    color: var(--primary);
}
.spb-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.7rem 0.5rem;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    color: var(--gray-700);
    background: transparent;
    min-width: 0;
}
.spb-input::placeholder {
    color: #aaa;
}
.spb-btn-mic {
    background: transparent;
    border: none;
    padding: 0.7rem 0.7rem 0.7rem 0.4rem;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.2s;
    flex-shrink: 0;
    position: relative;
}
.spb-btn-mic:hover {
    color: var(--primary);
}
.spb-btn-mic.listening {
    color: var(--primary);
    animation: mic-pulse-page 1s ease-in-out infinite;
}
@keyframes mic-pulse-page {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); border-radius: 50%; }
    50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); border-radius: 50%; }
}

/* Header Right */
.mw-header .header-right {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

/* Date in header */
.mw-header .header-date {
    font-size: 0.72rem;
    color: var(--gray-500);
    white-space: nowrap;
    font-weight: 500;
}

/* Social icons in header */
.mw-header .header-social {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.mw-header .header-social a {
    color: var(--gray-500);
    font-size: 0.82rem;
    padding: 0.2rem;
    transition: color 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mw-header .header-social a:hover {
    color: var(--primary);
}

/* Live Button (SCTV-style) */
.btn-live-sctv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0;
    transition: opacity 0.2s;
}
.btn-live-sctv:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Animated red dot — mimics SCTV live GIF */
.sctv-live-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
.sctv-live-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--primary);
    animation: sctv-dot-pulse 1.5s ease-in-out infinite;
}
.sctv-live-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
}
@keyframes sctv-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
}

.sctv-live-text {
    color: var(--primary);
    letter-spacing: 0.5px;
}
.sctv-live-sub {
    color: var(--primary);
    font-weight: 500;
    opacity: 0.8;
}

.btn-admin-mw {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-admin-mw:hover {
    background: var(--gray-200);
    color: var(--dark);
    text-decoration: none;
}
.btn-admin-mw i {
    font-size: 0.75rem;
}

/* Mobile hamburger */
.navbar-toggler-mw {
    background: transparent;
    border: 1.5px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    color: var(--gray-700);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-toggler-mw:hover {
    background: var(--gray-100);
    border-color: var(--gray-500);
}

/* =========================================
   MediaWP-Style Navigation Bar
   ========================================= */
.mw-navigation {
    background: linear-gradient(135deg, var(--nav-start), var(--nav-end), var(--primary), var(--accent), var(--primary), var(--nav-end), var(--nav-start));
    background-size: 300% 300%;
    animation: navGradientShift 8s ease infinite;
    padding: 0;
    position: relative;
    overflow: hidden;
}
/* Efek sinar bergerak kiri-kanan */
.mw-navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: navShine 4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
/* Efek sinar bergerak kanan-kiri */
.mw-navigation::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(270deg, transparent, rgba(var(--accent-rgb),0.3), transparent);
    animation: navShineReverse 5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes navGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes navShine {
    0% { left: -100%; }
    50% { left: 120%; }
    100% { left: -100%; }
}
@keyframes navShineReverse {
    0% { right: -100%; }
    50% { right: 120%; }
    100% { right: -100%; }
}
.mw-navigation .container {
    padding-top: 0;
    padding-bottom: 0;
}
.mw-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    z-index: 2;
}
.mw-nav-list::-webkit-scrollbar { display: none; }
.mw-nav-item {
    flex: 0 0 auto;
}
.mw-nav-item a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.mw-nav-item a i {
    font-size: 0.72rem;
}
.mw-nav-item a:hover {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}
.mw-nav-item.active a {
    color: #fbbf24;
    background: rgba(255,255,255,0.15);
    font-weight: 700;
}

/* Keep old logo-img class for backwards compatibility */
.logo-img { max-height: 72px; }

/* =========================================
   TRENDING VIDEO SECTION (Dark Layout)
   ========================================= */
.trending-video-section {
    background: #1a1a2e;
    border-radius: var(--radius, 8px);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}
/* Diagonal lines pattern */
.trending-video-section::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.02) 8px,
        rgba(255,255,255,0.02) 16px
    );
    pointer-events: none;
    z-index: 0;
}
.trending-video-section > * {
    position: relative;
    z-index: 1;
}

/* Title */
.trending-video-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.trending-video-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tv-text-trending {
    color: #ffffff;
}
.tv-text-video {
    color: #ffffff;
    padding-bottom: 3px;
    background: linear-gradient(to right, #6d28d9, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}
.tv-text-video::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(to right, #6d28d9, #ec4899);
    border-radius: 2px;
}

/* Grid */
.trending-video-grid {
    display: grid;
    gap: 0.75rem;
}

/* Featured card (large, top) */
.tv-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.2s;
    background: rgba(255,255,255,0.03);
}
.tv-featured:hover {
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* Small cards row */
.tv-row-small {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* Small card */
.tv-small {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.2s;
    background: rgba(255,255,255,0.03);
}
.tv-small:hover {
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* Card image */
.tv-card-img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.tv-featured .tv-card-img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 200px;
}
.tv-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.tv-featured:hover .tv-card-img img,
.tv-small:hover .tv-card-img img {
    transform: scale(1.05);
}

/* Play icon */
.tv-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    background: rgba(236, 72, 153, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    transition: transform 0.3s, background 0.3s;
    z-index: 2;
}
.tv-play-sm {
    width: 38px; height: 38px;
    font-size: 1.1rem;
}
.tv-featured:hover .tv-play-icon,
.tv-small:hover .tv-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(236, 72, 153, 1);
}

/* Card body */
.tv-card-body {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tv-small .tv-card-body {
    padding: 0.65rem 0.75rem;
}
.tv-card-title {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.tv-card-title-sm {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
}
.tv-card-meta {
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    font-weight: 400;
}

/* "Lihat Semua" link in Trending Video header */
.tv-see-all-link {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    margin-left: auto;
}
.tv-see-all-link:hover {
    color: #fff;
}

/* YouTube duration badge overlay */
.yt-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.3;
    z-index: 2;
    letter-spacing: 0.3px;
}
.yt-duration-sm {
    font-size: 0.62rem;
    padding: 1px 5px;
    bottom: 6px;
    right: 6px;
}

/* Skeleton loading for Trending Video YouTube */
.tv-sk-thumb {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: tvShimmer 1.5s ease-in-out infinite;
}
.tv-small .tv-sk-thumb { min-height: 110px; }
.tv-sk-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: tvShimmer 1.5s ease-in-out infinite;
    margin-bottom: 8px;
}
.tv-sk-w80 { width: 80%; }
.tv-sk-w90 { width: 90%; }
.tv-sk-w70 { width: 70%; }
.tv-sk-w85 { width: 85%; }
.tv-sk-w50 { width: 50%; }
.tv-sk-w40 { width: 40%; }
.tv-sk-w35 { width: 35%; }
@keyframes tvShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive — handled in main mobile breakpoint below */
@media (max-width: 479.98px) {
    .tv-row-small {
        grid-template-columns: 1fr;
    }
    .tv-see-all-link { font-size: 0.7rem; }
    .yt-duration-badge { font-size: 0.62rem; padding: 1px 4px; }
    .yt-duration-sm { font-size: 0.55rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .tv-row-small {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Mobile Menu Bar (5 kategori sticky) ---- */
/* Hidden on desktop by default, shown on mobile via media query */
.mobile-menu-bar {
    background: var(--white);
    border-bottom: 2px solid var(--primary);
    padding: 0;
    flex-shrink: 0;
    display: none;
}
.mobile-menu-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.mobile-menu-item {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0.45rem 0.25rem 0.4rem;
    text-decoration: none;
    color: var(--gray-500);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: var(--transition);
    position: relative;
    border-bottom: 2.5px solid transparent;
}
.mobile-menu-item i {
    font-size: 0.85rem;
    line-height: 1;
}
.mobile-menu-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-menu-item:hover,
.mobile-menu-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.mobile-menu-item.active i {
    color: var(--primary);
}

/* ---- Kategori Bar (kept for backward compat / mobile) ---- */
.kategori-bar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    border-top: 1px solid var(--gray-200);
    padding: 0;
}
.kategori-scroll {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kategori-scroll::-webkit-scrollbar { display: none; }
.kategori-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.6rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #555555;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.kategori-link:hover { color: var(--primary); background: transparent; }
.kategori-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.kategori-link i { font-size: 0.7rem; opacity: 0.7; }

/* ---- Two Card News (Homepage: Featured + Trending/Pilihan Tabs) ---- */
.two-card-news {
    background: transparent;
}
.news-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* LEFT: Featured Lead Card */
.featured-lead-card {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: #000;
    margin-bottom: 0.75rem;
}
.featured-lead-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
}
.featured-lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.featured-lead-card:hover .featured-lead-img img {
    transform: scale(1.05);
}
.featured-lead-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff;
}
.featured-lead-kategori {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}
.featured-lead-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-lead-meta {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Featured sub-list (sisa berita terbaru) */
.featured-sub-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.featured-sub-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.15s ease;
}
.featured-sub-item:last-child {
    border-bottom: none;
}
.featured-sub-item:hover {
    background: var(--gray-100);
}
.featured-sub-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.featured-sub-info {
    flex: 1;
    min-width: 0;
}
.featured-sub-info h6 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-sub-info small {
    color: var(--gray-500);
    font-size: 0.72rem;
}
.featured-sub-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
}
.featured-sub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* MIDDLE & RIGHT: News List Columns */
.news-list-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.news-list-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0 0.6rem;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 0;
}
.news-list-bar {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
}
.news-list-header--red .news-list-bar {
    background: var(--primary);
}
.news-list-header--teal .news-list-bar {
    background: #0d9488;
}
.news-list-header--red {
    border-bottom-color: var(--primary);
}
.news-list-header--teal {
    border-bottom-color: #0d9488;
}
.news-list-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: var(--dark);
}
.news-list-header--red .news-list-title {
    color: var(--primary);
}
.news-list-header--teal .news-list-title {
    color: #0d9488;
}

/* News List Items */
.news-list-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s ease;
}
.news-list-item:last-child {
    border-bottom: none;
}
.news-list-item:hover {
    background: var(--gray-100);
}
.news-list-item-text {
    flex: 1;
    min-width: 0;
}
.news-list-item-text h6 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.35;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-list-item-text small {
    color: var(--gray-500);
    font-size: 0.7rem;
}
.news-list-item-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
}
.news-list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* News Card Tabs */
.news-card-tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
}
.news-card-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.5rem;
    background: none;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    position: relative;
}
.news-card-tab:hover {
    color: var(--dark);
}
.news-card-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.news-card-tab.active[data-target="tab-headline"] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.news-card-tab.active[data-target="tab-terbaru"] {
    color: #d97706;
    border-bottom-color: #d97706;
}
.news-card-tab.active[data-target="tab-trending"] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.news-card-tab.active[data-target="tab-pilihan"] {
    color: #0d9488;
    border-bottom-color: #0d9488;
}
.news-card-tab-bar {
    display: none;
}

/* Tab Content */
.news-card-tab-content {
    display: none;
    padding: 0.25rem 0;
}
.news-card-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Trending number inside h6 */
.news-list-item-text h6 .trending-num {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--gray-300);
    line-height: 1;
    min-width: 22px;
}

/* Two Card News — Mobile */
@media (max-width: 767.98px) {
    .featured-lead-card {
        border-radius: 0;
    }
    .featured-lead-img {
        height: 200px;
    }
    .featured-lead-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
    }
    .news-card {
        border-radius: var(--radius);
    }
}

/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.search-box .form-control {
    border: 2px solid var(--gray-200);
    border-radius: 25px 0 0 25px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    width: 180px;
    transition: var(--transition);
}
.search-box .form-control:focus {
    border-color: var(--primary);
    box-shadow: none;
    width: 220px;
}
/* Mobile search - full width inside collapse menu */
#mainNav .search-box {
    width: 100%;
}
#mainNav .search-box .form-control {
    width: 100% !important;
    flex: 1;
    min-width: 0;
}
#mainNav .search-box .btn-search {
    flex-shrink: 0;
}

.search-box-mobile {
    display: flex;
}
.search-box-mobile .form-control {
    border: 1.5px solid var(--gray-200);
    border-radius: 20px 0 0 20px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    width: 110px;
    transition: var(--transition);
}
.search-box-mobile .form-control:focus {
    border-color: var(--primary);
    box-shadow: none;
    width: 140px;
}
.search-box-mobile .btn-search {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}
.btn-search {
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
    border-radius: 0 25px 25px 0;
    padding: 0.4rem 0.75rem;
    transition: var(--transition);
}
.btn-search:hover { background: var(--primary-dark); }

/* Live Button */


/* Admin Button */
.btn-admin {
    background: var(--dark);
    color: var(--white);
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 1rem;
    border: none;
    transition: var(--transition);
}
.btn-admin:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-1px);
}

/* Header Action Buttons (Dashboard & Tambah Berita) */
.btn-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border: 1px solid transparent;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.btn-header-action i {
    font-size: 0.85rem;
}
.btn-header-action:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}
.btn-header-add {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary-dark);
}
.btn-header-add:hover {
    background: var(--primary-dark);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4);
}

/* ---- Badge Verifikasi Dewan Pers ---- */
.dewan-pers-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
    border-radius: 25px;
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    cursor: default;
    transition: var(--transition);
    flex-shrink: 0;
}
.dewan-pers-badge .rosette-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.dewan-pers-badge .rosette-icon svg {
    display: block;
}
.dewan-pers-badge .dewpers-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
}
.dewan-pers-badge .dewpers-text em {
    font-style: italic;
    font-size: 0.6rem;
    font-weight: 400;
    color: #42a5f5;
    letter-spacing: 0.01em;
}
.dewan-pers-badge:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    border-color: #64b5f6;
    box-shadow: 0 2px 8px rgba(0,102,204,0.15);
}
/* Footer variant (mobile only) */
.footer-dewan-pers {
    padding: 0.75rem 0 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dewan-pers-badge-footer {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(227,242,253,0.15) 0%, rgba(187,222,251,0.15) 100%);
    border-color: rgba(144,202,249,0.25);
}
.dewan-pers-badge-footer .dewpers-text em {
    color: rgba(66,165,245,0.7);
}

/* ---- Hero Slider (Two-Column: Big Image + News List) ---- */
.hero-slider {
    display: flex;
    flex-direction: row;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    height: 420px;
    background: #0f1117;
}

/* LEFT COLUMN: Big Featured Image */
.hero-left-col {
    flex: 0 0 58%;
    max-width: 58%;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.hero-left-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
}
.hero-big-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.hero-big-image.active {
    opacity: 1;
    pointer-events: auto;
}
.hero-big-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-big-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.75rem;
}
.hero-big-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin: 0.5rem 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-big-excerpt {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin: 0 0 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-read-more {
    display: inline-block;
    background: #d32f2f;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s;
    align-self: flex-start;
}
.hero-read-more:hover {
    background: #b71c1c;
    color: #ffffff;
}
.hero-badge {
    background: #d32f2f;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
}

/* Navigation arrows */
.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}
.hero-nav-btn:hover { background: rgba(0,0,0,0.7); }
.hero-nav-prev { left: 10px; }
.hero-nav-next { right: 10px; }

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}
.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}
.hero-dot.active { background: var(--primary); transform: scale(1.15); }

/* RIGHT COLUMN: Featured + Bullet List + Trending */
.hero-right-col {
    flex: 1;
    max-width: 42%;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    height: 100%;
    overflow: hidden;
}

/* Top: Featured story with image */
.hero-right-featured {
    padding: 0.85rem 1rem 0.5rem;
    flex-shrink: 0;
}
.hero-right-img-wrap {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.hero-right-img-wrap img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.hero-right-img-wrap:hover img { transform: scale(1.04); }
.hero-right-cat-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.hero-right-featured-title {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
a:hover .hero-right-featured-title { color: #ef5350; }

/* Middle: Bullet news list */
.hero-right-list {
    flex: 1;
    padding: 0.4rem 1rem;
    overflow-y: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
}
.hero-right-list::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.hero-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: opacity 0.2s;
}
.hero-bullet-item:hover { opacity: 0.8; }
.hero-bullet-item:last-child { border-bottom: none; }
.hero-bullet-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d32f2f;
    margin-top: 6px;
}
.hero-bullet-text {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bottom: Trending highlighted */
.hero-right-trending {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.hero-trending-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: #d32f2f;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.hero-trending-link i { margin-right: 4px; }
.hero-trending-link:hover { color: #ef5350; }

/* ---- Category Grid: 3-Column Layout ---- */
.category-grid-section {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.category-grid-row {
    display: flex;
    flex-direction: row;
    gap: 0;
}
.category-grid-col {
    flex: 1;
    min-width: 0;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
}
.category-grid-col:last-child {
    border-right: none;
}

/* Colored Header Bar */
.cg-header-bar {
    background-color: #d32f2f;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid rgba(0,0,0,0.15);
}
.cg-header-bar, .cg-header-bar * {
    color: #ffffff;
}
.cg-header-link {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    text-decoration: none;
    flex: 1;
}
.cg-header-link:hover {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.85;
}
.cg-header-more {
    color: #ffffff;
    font-size: 0.85rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.cg-header-more:hover {
    opacity: 1;
    color: #ffffff;
}

/* Featured Hero Card */
.cg-hero-card {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}
.cg-hero-img {
    width: 100%;
    min-height: 180px;
    overflow: hidden;
}
.cg-hero-img img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.cg-hero-card:hover .cg-hero-img img {
    transform: scale(1.05);
}
.cg-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
    pointer-events: none;
}
.cg-hero-cat {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.cg-hero-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cg-hero-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
}

/* News List */
.cg-news-list {
    padding: 6px 0;
}
.cg-news-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}
.cg-news-item:last-child {
    border-bottom: none;
}
.cg-news-item:hover {
    background: #fafafa;
}
.cg-news-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #eee;
}
.cg-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cg-news-info {
    flex: 1;
    min-width: 0;
}
.cg-news-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #222;
    line-height: 1.35;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cg-news-item:hover .cg-news-title {
    color: #d32f2f;
}
.cg-news-meta {
    font-size: 0.68rem;
    color: #999;
}

/* ---- Koleksi Carousel (Dark Card Slider) ---- */
.koleksi-carousel-section {
    background: #1a1a2e;
    padding: 1.25rem 0;
    margin-bottom: 0;
}
.koleksi-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}
.koleksi-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    letter-spacing: 1px;
}
.koleksi-title i {
    color: var(--warning);
}
.koleksi-nav-arrows {
    display: flex;
    gap: 0.5rem;
}
.koleksi-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1rem;
}
.koleksi-arrow:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
    transform: scale(1.08);
}
.koleksi-carousel-track-wrapper {
    overflow: hidden;
    padding: 0 1.25rem;
}
.koleksi-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.koleksi-carousel-track::-webkit-scrollbar { display: none; }

.koleksi-card {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: calc(25% - 0.75rem);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s ease, background 0.3s ease;
}
.koleksi-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.1);
}
.koleksi-card-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    min-height: 120px;
}
.koleksi-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.koleksi-card:hover .koleksi-card-img img {
    transform: scale(1.06);
}
.koleksi-card-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    padding: 4px 8px;
}
.koleksi-card-body {
    padding: 0.75rem;
}
.koleksi-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.koleksi-card:hover .koleksi-card-title {
    color: #fbbf24;
}
.koleksi-card-date {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
}

/* ---- Berita Terkini Section (Kompas-style: Hero + Thumbnail Grid) ---- */
.berita-terkini-section {
    padding: 0.5rem 0;
}
.berita-terkini-header {
    margin-bottom: 1rem;
}
.berita-terkini-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--dark);
    margin: 0;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}
.berita-terkini-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.berita-terkini-title i {
    color: var(--primary);
}

/* Hero Card */
.berita-terkini-hero {
    display: block;
    position: relative;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin-bottom: 1rem;
    background: #000;
    min-height: 320px;
}
.bt-hero-img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
}
.bt-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.berita-terkini-hero:hover .bt-hero-img img {
    transform: scale(1.04);
}
.bt-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.1) 70%, transparent 100%);
    min-height: 200px;
}
.bt-hero-content {
    padding: 1.5rem 1.5rem 1.25rem;
}
.bt-hero-kategori {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.6rem;
}
.bt-hero-judul {
    color: #ffffff;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 0.6rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.berita-terkini-hero:hover .bt-hero-judul {
    color: #fbbf24;
}
.bt-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
}

/* Thumbnail Grid Row */
.bt-grid-wrapper {
    position: relative;
    margin: 0 -0.25rem;
}
.bt-grid-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.bt-grid-track::-webkit-scrollbar { display: none; }

.bt-grid-card {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: calc(25% - 0.75rem);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bt-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: transparent;
}
.bt-card-img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.bt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.bt-grid-card:hover .bt-card-img img {
    transform: scale(1.06);
}
.bt-card-body {
    padding: 0.75rem;
}
.bt-card-judul {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.bt-grid-card:hover .bt-card-judul {
    color: var(--primary);
}
.bt-card-meta {
    color: var(--gray-500);
    font-size: 0.7rem;
}

/* Scroll Arrow */
.bt-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    background: rgba(255,255,255,0.95);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1rem;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.bt-scroll-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.3);
}
.bt-scroll-next {
    right: -8px;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .bt-grid-card {
        flex: 0 0 calc(33.333% - 0.667rem);
        min-width: calc(33.333% - 0.667rem);
    }
}
@media (max-width: 767.98px) {
    .berita-terkini-hero {
        min-height: 220px;
        border-radius: var(--radius, 8px);
    }
    .bt-hero-img {
        min-height: 220px;
    }
    .bt-hero-judul {
        font-size: 1.05rem;
        -webkit-line-clamp: 2;
    }
    .bt-hero-content {
        padding: 1rem;
    }
    .bt-grid-card {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
    }
    .bt-scroll-next {
        right: -4px;
    }
}
@media (max-width: 479.98px) {
    .bt-grid-card {
        flex: 0 0 calc(75% - 0.75rem);
        min-width: calc(75% - 0.75rem);
    }
}

/* ---- Pilihan Grid (4-Column News Grid) ---- */
.pilihan-grid-section {
    padding: 1.5rem 0 0.5rem;
}
.pilihan-grid-header {
    margin-bottom: 1rem;
}
.pilihan-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--dark);
    margin: 0;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}
.pilihan-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.pilihan-title i {
    color: var(--primary);
}
.pilihan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.pilihan-item {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pilihan-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.pilihan-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    min-height: 130px;
}
.pilihan-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.pilihan-item:hover .pilihan-img img {
    transform: scale(1.06);
}
.pilihan-body {
    padding: 0.75rem 0.85rem 0.85rem;
}
.pilihan-judul {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pilihan-item:hover .pilihan-judul {
    color: var(--primary);
}
.pilihan-meta {
    font-size: 0.72rem;
    color: var(--gray-500);
}

/* ---- Section Titles ---- */
.section-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--dark);
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 4px;
    background: var(--primary);
    border-radius: 2px;
}

/* ---- Headline Carousel (Light Theme) ---- */
.headline-carousel-section {
    padding: 0.25rem 0;
}
.headline-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.headline-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--dark);
    margin: 0;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}
.headline-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 45px; height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.headline-nav-arrows {
    display: flex;
    gap: 0.4rem;
}
.headline-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.9rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.headline-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.25);
}
.headline-carousel-track-wrapper {
    overflow: hidden;
}
.headline-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.headline-carousel-track::-webkit-scrollbar { display: none; }

.headline-carousel-card {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: calc(25% - 0.75rem);
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.headline-carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.headline-card-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.headline-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.headline-carousel-card:hover .headline-card-img img {
    transform: scale(1.05);
}
.headline-card-kategori {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 4px;
}
.headline-card-body {
    padding: 0.75rem 0.85rem;
}
.headline-card-judul {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}
.headline-carousel-card:hover .headline-card-judul {
    color: var(--primary);
}
.headline-card-meta {
    font-size: 0.7rem;
    color: #999;
}
.headline-card-meta i {
    color: #bbb;
}

/* Responsive: Headline Carousel */
@media (max-width: 1200px) {
    .headline-carousel-card {
        flex: 0 0 calc(33.333% - 0.67rem);
        min-width: calc(33.333% - 0.67rem);
    }
}
@media (max-width: 768px) {
    .headline-carousel-card {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
    }
    .headline-title { font-size: 1.15rem; }
}
@media (max-width: 480px) {
    .headline-carousel-card {
        flex: 0 0 calc(80% - 0.5rem);
        min-width: calc(80% - 0.5rem);
    }
}

/* ---- Berita Card ---- */
.berita-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.berita-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.berita-card .card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    min-height: 150px;
}
.berita-card .card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.berita-card:hover .card-img-wrap img { transform: scale(1.08); }
.berita-card .card-kategori {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
.berita-card .card-body {
    padding: 0.85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.berita-card .card-title {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--dark);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.berita-card .card-title:hover { color: var(--primary); }
.berita-card .card-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}
.berita-card .card-meta i { font-size: 0.7rem; }

/* ---- Berita List (Sidebar) ---- */
.berita-list-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-200);
    transition: var(--transition);
    align-items: center;
}
.berita-list-item:last-child { border-bottom: none; }
.berita-list-item:hover { padding-left: 0.4rem; }
.berita-list-item .thumb {
    width: 90px; min-width: 90px;
    height: 65px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}
.berita-list-item .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.berita-list-item .info h6 {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dark);
    margin-bottom: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.berita-list-item .info h6:hover { color: var(--primary); }
.berita-list-item .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.berita-list-item .info small {
    color: var(--gray-500);
    font-size: 0.7rem;
}

/* ---- Trending Number ---- */
.trending-num {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--gray-200);
    line-height: 1;
    min-width: 28px;
}

/* ---- Sidebar Box ---- */
.sidebar-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.sidebar-box .box-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid var(--primary);
}

/* ---- Sidebar Iklan Box (replaces OPINI sections) ---- */
.sidebar-iklan-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}
.sidebar-iklan-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.35rem 0;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}
.sidebar-iklan-label i {
    font-size: 0.7rem;
    color: var(--gray-400);
}
.sidebar-iklan-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sidebar-iklan-ph-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 300px;
    height: 250px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    color: var(--gray-400);
    font-size: 0.78rem;
    font-weight: 600;
}
.sidebar-iklan-ph-inner i {
    font-size: 1.5rem;
    color: var(--gray-300);
}
.sidebar-iklan-ph-inner small {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--gray-400);
}
.sidebar-iklan-box .sidebar-ad .ad-slot img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Video Cards (TikTok Style) ---- */
.video-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/9;
    background: #000;
}
.video-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.video-card:hover img { transform: scale(1.05); }
.video-card .video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.85rem;
}
.video-card .play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    background: rgba(0,102,204,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.video-card:hover .play-icon {
    background: var(--primary);
    transform: translate(-50%, -50%) scale(1.1);
}
.video-card .play-icon i {
    color: var(--white);
    font-size: 1.1rem;
    margin-left: 2px;
}
.video-card .video-title {
    color: var(--white);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card .video-meta {
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    margin-top: 0.2rem;
}
.video-card .video-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Video Section Horizontal Scroll (Mobile) */
.video-scroll-mobile {
    display: flex;
    overflow-x: auto;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.video-scroll-mobile::-webkit-scrollbar { display: none; }
.video-scroll-mobile .video-col {
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ---- Detail Page ---- */
.article-header {
    background: var(--white);
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.article-header h1 {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.45;
    color: var(--dark);
    margin-bottom: 0.75rem;
}
.article-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin-top: 0.35rem;
}
.article-kategori-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.article-meta-date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--gray-500);
    flex-wrap: wrap;
}
.article-meta-date span {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}
.article-meta-date span + span::before {
    content: '|';
    color: var(--gray-300);
    margin-right: 0.4rem;
}
.article-meta-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.article-meta-top .hak-jawab-link {
    margin-left: 0;
}
.article-meta .author-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.article-meta .author-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gray-200);
}
.article-meta .author-name {
    font-weight: 700;
    color: var(--dark);
    font-size: 0.88rem;
    white-space: nowrap;
}
.article-meta .author-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.article-meta .verified {
    color: #1d9bf0;
    font-size: 1.1rem;
}

/* ---- Layanan Hak Jawab ---- */
.hak-jawab-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 0.78rem;
    color: var(--gray-500);
    flex-wrap: wrap;
    align-self: center;
}
.hak-jawab-link > i {
    color: #16a34a;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.hak-jawab-link > span {
    font-weight: 600;
    color: var(--dark);
}
.hak-jawab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: #25d366;
    color: #fff !important;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition);
    margin-left: 0.15rem;
    white-space: nowrap;
}
.hak-jawab-btn:hover {
    background: #128c7e;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}
.hak-jawab-btn i {
    font-size: 0.78rem;
}
.hak-jawab-placeholder {
    font-size: 0.68rem;
    color: #6b7280;
    font-style: italic;
    margin-left: 0.15rem;
}
.hak-jawab-right {
    margin-left: auto;
}

.article-featured-img {
    max-width: 100%;
    margin: 1rem auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.article-featured-img img {
    width: 100%;
    display: block;
}
.article-featured-img .img-caption {
    font-size: 0.78rem;
    color: var(--gray-500);
    padding: 0.6rem 1rem;
    background: var(--gray-100);
    text-align: center;
}

.article-content {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--gray-700);
}
.article-content p { margin-bottom: 1.1rem; }
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 0.75rem 0; }
.article-content h2, .article-content h3 { font-family: var(--font-serif); margin: 1.25rem 0 0.6rem; }
.article-content a { color: var(--primary); text-decoration: underline; }

/* ============================================
   BACA JUGA — Inline Recommendation Block
   ============================================ */
.baca-juga-inline {
    margin: 1.8rem 0;
    padding: 0;
}
.baca-juga-label {
    font-weight: 700;
    font-size: 0.72rem;
    color: #e65100;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 2px;
}
.baca-juga-label i {
    font-size: 0.65rem;
}
.baca-juga-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
.baca-juga-card {
    display: flex;
    flex-direction: column;
    border-left: 3px solid #e65100;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e8 100%);
    border-radius: 0 8px 8px 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-decoration: none !important;
    overflow: hidden;
}
.baca-juga-card:hover {
    background: linear-gradient(135deg, #fff3e8 0%, #ffe8d6 100%);
    box-shadow: 0 3px 12px rgba(230, 81, 0, 0.12);
    transform: translateY(-1px);
}
.baca-juga-img {
    width: 100%;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}
.baca-juga-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.baca-juga-body {
    flex: 1;
    min-width: 0;
}
.baca-juga-kategori {
    font-size: 0.58rem;
    color: #e65100;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.baca-juga-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.baca-juga-card:hover .baca-juga-title {
    color: #e65100;
}
/* Mobile responsive */
@media (max-width: 576px) {
    .baca-juga-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
    }
    .baca-juga-card {
        padding: 0.4rem 0.5rem;
    }
    .baca-juga-img {
        height: 72px;
    }
    .baca-juga-label {
        font-size: 0.65rem;
        margin-bottom: 0.5rem;
    }
    .baca-juga-kategori {
        font-size: 0.52rem;
    }
    .baca-juga-title {
        font-size: 0.63rem;
        -webkit-line-clamp: 2;
    }
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}
.share-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-radius: 25px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--white);
    transition: var(--transition);
}
.share-buttons a:hover { color: var(--white); opacity: 0.85; }
.share-fb { background: #1877f2; }
.share-tw { background: #000; }
.share-wa { background: #25d366; }
.share-tg { background: #0088cc; }

/* ---- Pagination ---- */
.pagination .page-link {
    color: var(--gray-700);
    border-color: var(--gray-200);
    font-weight: 500;
    font-size: 0.85rem;
}
.pagination .page-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}

/* ---- Footer ---- */
/* ---- VIVA-Style Footer ---- */
.viva-footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    text-align: center;
    padding: 2.5rem 0 1.5rem;
    margin-top: 2rem;
    border-top: 4px solid var(--primary);
}

/* Row 1: Social Follow */
.viva-footer-follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.viva-footer-follow-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.viva-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.viva-footer-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
}
.viva-footer-social-icon:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

/* Row 2: Footer Links */
.viva-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.2rem 0.1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.viva-footer-links a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.viva-footer-links a:hover {
    color: #ffffff;
    background: rgba(var(--primary-rgb), 0.3);
}
.viva-footer-links a + a::before {
    content: '|';
    color: rgba(255,255,255,0.2);
    margin-right: 0.1rem;
    font-size: 0.7rem;
}

/* Row 3: Copyright */
.viva-footer-copyright {
    margin-bottom: 1.2rem;
}
.viva-footer-site-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #ffffff;
}
.viva-footer-copy-text {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-left: 0.3rem;
}

/* Row 4: Partner / Group Member */
.viva-footer-partner {
    margin-bottom: 1rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.viva-footer-partner-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
    text-align: center;
}
.viva-footer-partner-name {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.viva-footer-partner-name:hover {
    color: var(--primary);
}
.viva-footer-partner-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.viva-footer-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.viva-footer-partner-logo:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}
.viva-footer-partner-logo img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.viva-footer-partner-logo:hover img {
    opacity: 1;
}
.viva-footer-partner-logo-text {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.02em;
}
.viva-footer-partner-logo:hover .viva-footer-partner-logo-text {
    color: var(--primary);
}

/* Credits */
.viva-footer-credits {
    margin-bottom: 1rem;
}
.viva-footer-credits small {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}

/* Dewan Pers in VIVA Footer (Mobile) */
.viva-footer-dewan-pers {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.viva-footer-dewan-pers .dewan-pers-badge-footer {
    justify-content: center;
}

/* VIVA Footer Mobile — sama seperti desktop */
@media (max-width: 767.98px) {
    .viva-footer {
        padding: 2rem 0 1.2rem;
    }
    .viva-footer-links a {
        padding: 0.2rem 0.45rem;
    }
    .viva-footer-partner-logos {
        gap: 0.5rem;
    }
    .viva-footer-partner-logo {
        padding: 5px 10px;
    }
    .viva-footer-partner-logo img {
        height: 22px;
        max-width: 90px;
    }
    .viva-footer-partner-logo-text {
        font-size: 0.65rem;
    }
}

/* ---- 404 Page ---- */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.error-page h1 {
    font-size: 6rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}
.error-page p {
    font-size: 1.1rem;
    color: var(--gray-500);
}

/* ---- Search Results ---- */
.search-results .result-item {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    transition: var(--transition);
}
.search-results .result-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

/* ---- Author Page ---- */
.author-profile {
    text-align: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.author-profile .avatar-lg {
    width: 90px; height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary);
    margin-bottom: 0.75rem;
}

/* ---- Berita Pilihan ---- */
.pilihan-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 200px;
    cursor: pointer;
}
.pilihan-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.pilihan-card:hover img { transform: scale(1.05); }
.pilihan-card .pilihan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}
.pilihan-card .pilihan-overlay h5 {
    color: var(--white);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.pilihan-card .pilihan-overlay small {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
}

/* ---- Kategori Page ---- */
.kategori-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--white);
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-radius: 0;
}

/* ---- Admin Styles ---- */
.admin-sidebar {
    background: var(--secondary);
    min-height: 100vh;
    padding-top: 1rem;
}
@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        z-index: 1020;
    }
    /* Thin scrollbar for sidebar */
    .admin-sidebar::-webkit-scrollbar { width: 4px; }
    .admin-sidebar::-webkit-scrollbar-track { background: transparent; }
    .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
    .admin-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
}
.admin-sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: var(--white);
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary);
}
.admin-sidebar .nav-link i {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}
.admin-content {
    padding: 1.5rem;
    background: var(--gray-100);
    min-height: 100vh;
}
.admin-card {
    background: var(--white);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.stat-card {
    background: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.stat-card .stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
}
.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* ---- Tags ---- */
.tag-badge {
    display: inline-block;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
    margin: 0 0.2rem 0.2rem 0;
    transition: var(--transition);
}
.tag-badge:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
}

/* ---- Ad Slot (Iklan) ---- */
/* ============================================ */
/* IKLAN / ADS — Style mengikuti LiputanWP     */
/* ============================================ */

/* Base ad slot */
.ad-slot-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}
/* Single ad: keep centered */
.ad-slot-wrapper:has(.ad-slot:only-child) {
    flex-direction: column;
}
.ad-slot {
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: var(--transition);
    line-height: 0;
}
.ad-slot a {
    display: block;
    transition: opacity 0.3s;
}
.ad-slot a:hover { opacity: 0.85; }
.ad-slot img {
    border-radius: 0;
    display: block;
    margin: 0 auto;
}

/* ---- Billboard — Auto Size, Sticky Behind Content ---- */
.billboard-section {
    background: #f3f4f6;
    padding: 0.75rem 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 0;
    pointer-events: none;
}
.billboard-section .ad-slot,
.billboard-section .ad-slot a,
.billboard-section .ad-slot img {
    pointer-events: auto;
}
/* Single wrapper covers ALL content (header to footer) above the billboard — no gaps */
.page-content-layer {
    position: relative;
    z-index: 1051;
    background: #ffffff;
}
/* All content after billboard scrolls over it — solid backgrounds to hide billboard */
.top-bar,
main {
    position: relative;
    z-index: 1;
}
/* top-bar NOT sticky — scrolls away normally */
.top-bar {
    background: #1f2937;
}
.weather-ticker-strip {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
}
main {
    background: #ffffff;
}
/* Hero slider container — full-width white bg to cover billboard sides */
.container.py-3 {
    position: relative;
    z-index: 1;
}
.container.py-3::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    background: #ffffff;
    z-index: -1;
}
.viva-footer {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.billboard-ads {
    max-width: 970px;
    margin: 0 auto;
}
.billboard-ads .ad-slot {
    max-width: 970px;
    width: 100%;
    height: auto;
}
.billboard-ads .ad-slot img {
    max-width: 970px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Leaderboard — Auto Size, Antara Section ---- */
.leaderboard-section {
    padding: 0.75rem 0;
    text-align: center;
}
.leaderboard-ads {
    max-width: 728px;
    margin: 0 auto;
}
.leaderboard-ads .ad-slot {
    max-width: 728px;
    width: 100%;
    height: auto;
}
.leaderboard-ads .ad-slot img {
    max-width: 728px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Sidebar Ads — Auto Size ---- */
.sidebar-ad {
    margin-bottom: 1rem;
}
.sidebar-ad .ad-slot {
    max-width: 300px;
    width: 100%;
    height: auto;
}
.sidebar-ad .ad-slot img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}
/* Large rectangle sidebar — taller max-height */
.sidebar-ad.sidebar-large .ad-slot {
    max-height: 600px;
}
.sidebar-ad.sidebar-large .ad-slot img {
    max-height: 600px;
    object-fit: contain;
}

/* ---- Sidebar: ratakan tinggi dengan Tab Menu ---- */
.tab-sidebar-row {
    display: flex;
    align-items: stretch;
}
.tab-sidebar-row > [class*="col-lg-8"],
.tab-sidebar-row > [class*="col-md-7"] {
    display: flex;
    flex-direction: column;
}
.tab-sidebar-row > [class*="col-lg-8"] > .news-card,
.tab-sidebar-row > [class*="col-md-7"] > .news-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tab-sidebar-row > [class*="col-lg-8"] > .news-card > .news-card-tab-content.active,
.tab-sidebar-row > [class*="col-md-7"] > .news-card > .news-card-tab-content.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.tab-sidebar-row > [class*="col-lg-4"],
.tab-sidebar-row > [class*="col-md-5"] {
    display: flex;
    flex-direction: column;
}
.tab-sidebar-row .sidebar-ad {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tab-sidebar-row .sidebar-ad .ad-slot {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 100px;
}
.tab-sidebar-row .sidebar-ad .ad-slot img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Detail Page Ads — Auto Size ---- */
.iklan-detail-top,
.iklan-detail-bottom {
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
}
.iklan-detail-top .ad-slot,
.iklan-detail-bottom .ad-slot {
    max-width: 728px;
    width: 100%;
    height: auto;
}
.iklan-detail-top .ad-slot img,
.iklan-detail-bottom .ad-slot img {
    max-width: 728px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Sticky Bottom Ad — Auto Size ---- */
.sticky-ads-bottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 728px;
    max-width: 100%;
    height: auto;
    z-index: 9999;
    margin: 0 auto;
    background: rgba(255,255,255,0.97);
    text-align: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
    border-radius: 4px 4px 0 0;
}
.sticky-ads-bottom-inner {
    padding: 4px 8px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sticky-ads-bottom .ad-slot {
    max-width: 728px;
    width: 100%;
    height: auto;
    max-height: 200px;
}
.sticky-ads-bottom .ad-slot img {
    max-width: 728px;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    display: block;
}
.btn-ads-close {
    position: absolute;
    top: -30px;
    right: 0;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border: none;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-ads-close:hover { background: rgba(0,0,0,0.9); }
.ads-close-icon {
    position: relative;
    display: inline-flex;
    width: 10px;
    height: 10px;
}
.ads-close-icon:after,
.ads-close-icon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
}
.ads-close-icon:before { transform: rotate(-45deg); }

/* ---- Sticky Side Ads — Auto Size, Desktop Only ---- */
/* Referensi: Mediawp theme — position fixed dari tengah halaman */
.sticky-ads-side {
    position: fixed;
    max-width: 200px;
    width: auto;
    top: 100px;
    z-index: 989;
}
.sticky-ads-side .ad-slot {
    max-width: 200px;
    width: 100%;
    height: auto;
    max-height: 600px;
}
.sticky-ads-side .ad-slot img {
    max-width: 200px;
    width: 100%;
    height: auto;
    max-height: 600px;
    display: block;
}

/* ---- In-Article Inline Ad — Auto Size, Horizontal Layout ---- */
.ad-inline-wrapper {
    margin: 1.5rem 0;
    border-top: 1px dashed var(--gray-200);
    border-bottom: 1px dashed var(--gray-200);
    padding: 0.75rem 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}
.ad-inline-wrapper .ad-slot {
    max-width: 100%;
    width: auto;
    height: auto;
    flex: 1 1 300px;
    min-width: 0;
}
.ad-inline-wrapper .ad-slot img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Single ad in inline: don't stretch, keep natural size */
.ad-inline-wrapper:has(.ad-slot:only-child) {
    display: block;
}
.ad-inline-wrapper:has(.ad-slot:only-child) .ad-slot {
    max-width: 728px;
    margin: 0 auto;
}

/* ---- Ad Label (kecil di pojok) ---- */
.ad-slot-wrapper::before {
    content: "Advertisement";
    display: block;
    font-size: 9px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 991.98px) {
    /* Tablet: sidebar ads fill width, auto height */
    .sidebar-ad .ad-slot {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 400px;
    }
    .sidebar-ad .ad-slot img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
    }
    .sidebar-ad.sidebar-large .ad-slot {
        max-height: 500px;
    }
    .sidebar-ad.sidebar-large .ad-slot img {
        max-height: 500px;
    }
}

@media (max-width: 767.98px) {
    .billboard-ads .ad-slot {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 150px;
    }
    .billboard-ads .ad-slot img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: contain;
    }
    .leaderboard-ads .ad-slot,
    .iklan-detail-top .ad-slot,
    .iklan-detail-bottom .ad-slot,
    .sticky-ads-bottom .ad-slot {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100px;
    }
    .leaderboard-ads .ad-slot img,
    .iklan-detail-top .ad-slot img,
    .iklan-detail-bottom .ad-slot img,
    .sticky-ads-bottom .ad-slot img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100px;
        object-fit: contain;
    }
    /* Inline ads: stack vertically on mobile, smaller */
    .ad-inline-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }
    .ad-inline-wrapper .ad-slot {
        flex: 1 1 auto;
        max-height: 100px;
    }
    .ad-inline-wrapper .ad-slot img {
        max-height: 100px;
        object-fit: contain;
    }
    .ad-inline-wrapper:has(.ad-slot:only-child) .ad-slot {
        max-height: 100px;
    }
    .sidebar-ad .ad-slot {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 250px;
    }
    .sidebar-ad .ad-slot img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: contain;
    }
    .sidebar-ad.sidebar-large .ad-slot {
        max-height: 350px;
    }
    .sidebar-ad.sidebar-large .ad-slot img {
        max-height: 350px;
    }
    .sticky-ads-side { display: none !important; }
    .billboard-section,
    .leaderboard-section {
        padding: 0.4rem 0;
    }
}

@media (min-width: 1200px) {
    /* Posisi sticky sides dari tengah halaman — referensi Mediawp */
    .sticky-ads-left {
        left: 50%;
        margin-left: -735px; /* setengah container ~570px + iklan 160px + gap 5px */
    }
    .sticky-ads-right {
        right: 50%;
        margin-right: -735px;
    }
}

@media (min-width: 1400px) {
    /* Layar lebih lebar — tambahkan jarak */
    .sticky-ads-left {
        margin-left: -770px;
    }
    .sticky-ads-right {
        margin-right: -770px;
    }
}

/* ---- Video Modal: Mobile-friendly overlay fix ---- */
.video-modal-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    cursor: pointer;
}
.video-modal-close-hint {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 6;
    pointer-events: none;
    animation: videoHintFade 2s ease forwards;
    text-align: center;
}
@keyframes videoHintFade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
/* Mobile: show tap-to-close overlay on video modal */
@media (max-width: 767.98px) {
    .video-modal-overlay {
        display: block;
    }
    .video-modal-close-hint {
        display: block;
    }
    /* Make video modal close button much larger on mobile */
    #videoModal .modal-header {
        padding: 0.4rem !important;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }
    #videoModal .btn-close {
        width: 36px !important;
        height: 36px !important;
        filter: brightness(0) invert(1);
        opacity: 1 !important;
    }
    #videoModal .modal-body {
        position: relative;
    }
}

/* ---- Back to Top ---- */
.back-to-top {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    width: 38px; height: 38px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 9999;
    transition: var(--transition);
}
.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}
.back-to-top.show { display: flex; }

/* ---- Breadcrumb ---- */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
}
.breadcrumb-item a { color: var(--gray-500); }
.breadcrumb-item.active { color: var(--primary); }

/* ---- Loading ---- */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius);
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Admin Login ---- */
.login-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-xl);
}

/* ---- Misc ---- */
.text-danger { color: var(--primary) !important; }
.bg-danger { background-color: var(--primary) !important; }
.border-danger { border-color: var(--primary) !important; }

/* ============================================
   RESPONSIVE - Mobile = Desktop
   ============================================ */

/* Navbar: wrap on mobile instead of collapsing */
.navbar-expand-lg {
    flex-wrap: wrap;
}
.navbar-expand-lg .navbar-brand {
    flex-shrink: 0;
}
.navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: 100%;
}
.mw-header .container {
    flex-wrap: wrap;
    align-items: center;
}

/* Logo: responsive sizing */
@media (max-width: 575.98px) {
    .logo-norma { font-size: 2rem; letter-spacing: 3px; }
    .logo-news { font-size: 0.78rem; padding: 2px 10px; letter-spacing: 5px; }
}

/* Dewan Pers Badge: smaller on mobile */
@media (max-width: 575.98px) {
    .dewan-pers-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
    .dewan-pers-badge svg { width: 14px; height: 14px; }
    .dewan-pers-badge .dewpers-text em { font-size: 0.5rem; }
    .dewan-pers-badge .dewpers-text {
        font-size: 0.7rem;
    }
}

/* Search Box: responsive - keep inline like desktop */
@media (max-width: 575.98px) {
    .search-box {
        /* Keep search inline, NOT full-width below */
        order: unset;
        width: auto;
        margin-top: 0;
    }
    .search-box .form-control {
        width: 120px !important;
        padding: 0.3rem 0.6rem;
        font-size: 0.78rem;
    }
    .search-box .form-control:focus {
        width: 140px !important;
    }
    .search-box .btn-search {
        padding: 0.3rem 0.5rem;
    }
    .navbar-expand-lg .navbar-brand {
        flex: 0 0 auto;
    }
    .dewan-pers-badge {
        display: none !important;
    }
}
@media (min-width: 576px) {
    .dewan-pers-badge {
        display: inline-flex !important;
    }
}

/* Hero Slider: responsive */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-slider { height: 360px; }
    .hero-left-col { flex: 0 0 58%; max-width: 58%; }
    .hero-left-image-wrap { min-height: 360px; }
    .hero-right-col { max-width: 42%; max-height: none; }
    .hero-right-img-wrap img { height: 110px; }
    .hero-right-featured-title { font-size: 0.82rem; }
    .hero-bullet-text { font-size: 0.76rem; }
    .hero-big-title { font-size: 1.2rem; }
    .hero-big-excerpt { -webkit-line-clamp: 2; }
    .koleksi-card { flex: 0 0 calc(33.333% - 0.67rem); min-width: calc(33.333% - 0.67rem); }
    .pilihan-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    /* Category Grid: responsive tablet */
    .category-grid-row {
        flex-wrap: wrap;
    }
    .category-grid-col {
        flex: 0 0 50%;
        max-width: 50%;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
    }
    .category-grid-col:nth-child(2) {
        border-right: none;
    }
    .category-grid-col:nth-child(3) {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none;
        border-top: none;
    }
    .cg-hero-img, .cg-hero-img img {
        min-height: 150px;
    }
    .cg-hero-title {
        font-size: 0.85rem;
    }
}
@media (max-width: 767.98px) {
    .hero-slider { flex-direction: column; height: auto; border-radius: var(--radius); }
    .hero-left-col { flex: none; max-width: 100%; height: 240px; }
    .hero-left-image-wrap { min-height: 240px; }
    .hero-big-overlay { padding: 1rem; }
    .hero-big-title { font-size: 1rem; margin: 0.3rem 0 0.2rem; }
    .hero-big-excerpt { font-size: 0.72rem; -webkit-line-clamp: 2; }
    .hero-read-more { font-size: 0.65rem; padding: 5px 12px; }
    .hero-right-col { flex: none; max-width: 100%; height: auto; max-height: 280px; display: flex; }
    .hero-right-img-wrap img { height: 100px; }
    .hero-right-featured { padding: 0.7rem 0.85rem 0.4rem; }
    .hero-right-featured-title { font-size: 0.8rem; }
    .hero-right-list { padding: 0.3rem 0.85rem; }
    .hero-bullet-item { padding: 0.4rem 0; gap: 0.5rem; }
    .hero-bullet-text { font-size: 0.73rem; }
    .hero-right-trending { padding: 0.4rem 0.85rem 0.6rem; }
    .hero-trending-link { font-size: 0.68rem; }
    .hero-nav-btn { width: 28px; height: 28px; font-size: 0.85rem; }
    .hero-badge { font-size: 0.5rem; padding: 2px 6px; }
    .hero-dots { bottom: 6px; }
    /* Category Grid: responsive mobile */
    .category-grid-col {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none !important;
        border-bottom: 1px solid #e8e8e8;
    }
    .category-grid-col:last-child {
        border-bottom: none;
    }
    .cg-hero-img, .cg-hero-img img {
        min-height: 140px;
    }
    .cg-news-item {
        padding: 7px 12px;
    }
}

/* Koleksi Carousel: responsive */
@media (max-width: 767.98px) {
    .koleksi-carousel-section { padding: 1rem 0; }
    .koleksi-title { font-size: 0.95rem; }
    .koleksi-arrow { width: 30px; height: 30px; font-size: 0.85rem; }
    .koleksi-card { flex: 0 0 calc(50% - 0.5rem); min-width: calc(50% - 0.5rem); }
    .koleksi-card-title { font-size: 0.78rem; -webkit-line-clamp: 2; }
    .koleksi-card-body { padding: 0.5rem; }
    .koleksi-card-badge { font-size: 0.55rem; padding: 3px 6px; }
    .koleksi-card-date { font-size: 0.62rem; }
    .pilihan-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .pilihan-title { font-size: 1.1rem; }
    .pilihan-judul { font-size: 0.8rem; -webkit-line-clamp: 2; }
    .pilihan-body { padding: 0.6rem 0.7rem 0.7rem; }
    .pilihan-meta { font-size: 0.65rem; }
}

/* Section Title: responsive */
@media (max-width: 575.98px) {
    .section-title { font-size: 1.25rem; }
}

/* Top Bar: responsive */
@media (max-width: 575.98px) {
    .top-admin-row {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .btn-top-admin { font-size: 0.62rem; padding: 0.15rem 0.4rem; }
    .top-bar-admin-user { font-size: 0.68rem; }
    .ticker-label-row { flex-wrap: wrap; gap: 0.25rem; }
}

/* Kategori Bar: same styling as desktop on all screens */
@media (max-width: 575.98px) {
    /* kategori-link keeps desktop font-size and padding */
}

/* Berita Cards: responsive */
@media (max-width: 575.98px) {
    .berita-card .card-title { font-size: 0.9rem; }
    .berita-card .card-body { padding: 0.65rem; }
    .berita-card .card-meta { font-size: 0.68rem; }
}

/* Article/Detail Page: responsive */
@media (max-width: 575.98px) {
    .article-header { padding: 1rem; }
    .article-header h1 { font-size: 1.35rem; }
    .article-content { font-size: 0.95rem; line-height: 1.7; }
    .article-meta-top { flex-wrap: nowrap; gap: 0; }
    .article-meta .author-info { flex-shrink: 0; gap: 0.4rem; }
    .article-meta .author-avatar { width: 34px; height: 34px; }
    .article-meta .author-name { font-size: 0.78rem; }
    .hak-jawab-right { margin-left: auto; flex-shrink: 0; }
    .hak-jawab-link { font-size: 0.7rem; gap: 0.15rem; }
    .hak-jawab-btn { font-size: 0.52rem; padding: 0.06rem 0.3rem; }
    .share-buttons a { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
}

/* Weather Ticker: responsive */
@media (max-width: 575.98px) {
    .weather-ticker-strip { height: 32px; }
    .weather-ticker-label { padding: 0 8px; font-size: 0.65rem; }
    .weather-ticker-track .wt-icon { font-size: 0.85rem; }
    .weather-ticker-track .wt-city { font-size: 0.68rem; }
    .weather-ticker-track .wt-temp { font-size: 0.72rem; }
    .weather-ticker-track .wt-desc { font-size: 0.6rem; }
    .weather-ticker-item { padding: 0 0.6rem; gap: 4px; }
    .wt-sep { display: none; }
}

/* Footer: responsive (legacy cleanup — old footer removed) */

/* Sidebar: always visible (same as desktop) */
@media (max-width: 991.98px) {
    aside.col-lg-4.mt-4.mt-lg-0 {
        margin-top: 1rem !important;
    }
    .sticky-top { top: 60px !important; }
}

/* Pagination: responsive */
@media (max-width: 575.98px) {
    .pagination .page-link { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
}

/* Kategori Header: responsive */
@media (max-width: 575.98px) {
    .kategori-header { padding: 1rem 0; }
    .kategori-header h1 { font-size: 1.25rem; }
}

/* Author Page: responsive */
@media (max-width: 575.98px) {
    .author-profile .avatar-lg { width: 70px; height: 70px; }
}

/* Back to Top: responsive */
@media (max-width: 575.98px) {
    .back-to-top { width: 34px; height: 34px; bottom: 1rem; right: 1rem; font-size: 0.85rem; }
}

/* Gallery Grid */
.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Toast notification */
.toast-container {
    position: fixed;
    top: 1rem; right: 1rem;
    z-index: 9999;
}

/* ============================================
   RESPONSIVE - MOBILE FIRST FIXES
   ============================================ */

/* ---- Tablet (max 992px) ---- */
@media (max-width: 991.98px) {
    .mw-header { padding: 0.5rem 0; }
    .logo-norma { font-size: 3rem; letter-spacing: 4px; }
    .logo-news { font-size: 1rem; letter-spacing: 6px; }
    .logo-img { max-height: 80px; }
    .navbar-brand { flex-shrink: 0; }
    .mw-header .header-search { max-width: 240px; }
    .mw-header .header-date { display: none; }

    .weather-ticker-strip { font-size: 0.68rem; }
    .weather-ticker-label { font-size: 0.62rem; padding: 0 8px; }
    .weather-ticker-item { padding: 0 0.7rem; }
    .wt-sep { display: none; }

    .hero-slider { margin-bottom: 1rem; }
    .hero-left-image-wrap { min-height: 200px; }
    .hero-big-title { font-size: 1.05rem; }
    .hero-big-excerpt { font-size: 0.7rem; -webkit-line-clamp: 1; }
    .hero-read-more { font-size: 0.65rem; padding: 5px 12px; }
    .hero-badge { font-size: 0.5rem; padding: 2px 6px; }

    .section-title { font-size: 1.3rem; margin-bottom: 1rem; }

    .berita-card .card-title { font-size: 0.95rem; }
    .berita-card .card-body { padding: 0.75rem; }

    .berita-list-item .thumb { width: 75px; min-width: 75px; height: 55px; }
    .berita-list-item .info h6 { font-size: 0.82rem; }

    .sidebar-box { padding: 0.85rem; }

    .pilihan-card { height: 170px; }
    .pilihan-card .pilihan-overlay h5 { font-size: 0.82rem; }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 767.98px) {
    /* Container: reduce horizontal padding on mobile */
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* =============================== */
    /* TOP BAR: Hide sosmed row on mobile (duplicate with header) */
    /* =============================== */
    .ticker-label-row { display: none !important; }

    /* Weather ticker: compact on mobile */
    .weather-ticker-strip { font-size: 0.62rem; height: 30px; }
    .weather-ticker-label { font-size: 0.58rem; padding: 0 6px; gap: 3px; }
    .weather-ticker-item { padding: 0 0.4rem; gap: 3px; }
    .weather-ticker-track .wt-icon { font-size: 0.8rem; }
    .weather-ticker-track .wt-city { font-weight: 600; }
    .weather-ticker-track .wt-desc { display: none; }
    .weather-ticker-track .wt-humidity { display: none; }
    .wt-sep { display: none; }

    /* =============================== */
    /* STICKY HEADER: Clean compact layout */
    /* =============================== */
    .sticky-header-wrapper { z-index: 1055; }
    .mw-header { padding: 0.4rem 0; }
    .mw-header .header-box { gap: 0.4rem; }

    /* Logo: shrinkable on mobile so hamburger stays visible */
    .mw-header .header-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    .mw-header .header-brand .brand-link { max-width: 100%; }
    .mw-header .header-brand .brand-logo { max-height: 36px; max-width: calc(100vw - 120px); object-fit: contain; }
    .mw-header .header-right { flex-shrink: 0; }
    .logo-norma { font-size: 2rem; letter-spacing: 2.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .logo-news { font-size: 0.65rem; padding: 2px 8px; letter-spacing: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .logo-img { max-height: 36px; width: auto; }
    .mw-header .brand-logo { max-height: 36px; }
    .mw-nav-brand-name .nav-brand-text { font-size: 0.7rem; padding: 7px 8px; }

    /* Search: HIDE on mobile header (available in hamburger menu) */
    .mw-header .header-search { display: none !important; }

    /* Header right: compact — only LIVE + hamburger visible */
    .mw-header .header-right { gap: 0.25rem; }
    .mw-header .header-date { display: none; }
    .mw-header .header-social { display: none !important; }
    .dewan-pers-badge { display: none !important; }
    .btn-admin-mw { display: none !important; }
    .btn-live-sctv { font-size: 0.78rem; }
    .btn-live-sctv .sctv-live-sub { display: none; }
    .sctv-live-dot { width: 8px; height: 8px; }
    .sctv-live-dot::after { width: 4px; height: 4px; }

    /* Hamburger button: bigger and more visible */
    .navbar-toggler-mw {
        border: 2px solid var(--gray-300);
        border-radius: 6px;
        padding: 0.35rem 0.55rem;
        font-size: 1.3rem;
        margin-left: 0.15rem;
    }

    /* Mobile nav controls */
    .search-box-mobile { display: none !important; }

    /* =============================== */
    /* MW NAVIGATION: Full-width scrollable on mobile */
    /* =============================== */
    .mw-navigation {
        display: block !important;
    }
    .mw-navigation .container {
        padding-left: 0;
        padding-right: 0;
    }
    .mw-nav-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .mw-nav-list::-webkit-scrollbar { display: none; }
    .mw-nav-item a {
        scroll-snap-align: start;
        font-size: 0.7rem;
        padding: 7px 8px;
    }
    .mw-nav-item a i {
        font-size: 0.65rem;
    }

    /* Mobile bottom menu bar: HIDDEN since kategori-bar now shows all categories */
    .mobile-menu-bar {
        display: none !important;
    }
    body { padding-bottom: 0 !important; }

    /* Hero slider: smaller on mobile */
    .hero-slider { margin-bottom: 0.5rem; border-radius: var(--radius); }
    .hero-left-col { height: 200px; }
    .hero-left-image-wrap { min-height: 200px; }
    .hero-big-title { font-size: 0.9rem; margin: 0.3rem 0 0.2rem; }
    .hero-right-col { max-height: 240px; }
    .hero-right-img-wrap img { height: 90px; }
    .hero-right-featured-title { font-size: 0.75rem; }
    .hero-bullet-text { font-size: 0.7rem; }
    .hero-nav-btn { width: 26px; height: 26px; font-size: 0.85rem; }
    .hero-nav-prev { left: 5px; }
    .hero-nav-next { right: 5px; }
    .hero-dots { bottom: 5px; }
    .hero-dot { width: 7px; height: 7px; }
    .hero-badge { font-size: 0.48rem; padding: 2px 5px; }

    /* Section titles */
    .section-title { font-size: 1.1rem; padding-bottom: 0.4rem; margin-bottom: 0.6rem; }
    .section-title::after { width: 35px; height: 3px; }

    /* 3-column section: Headline/Terbaru/Trending stack vertically */
    .row.g-4.mb-4 > [class*="col-lg"] {
        margin-bottom: 0.75rem;
    }

    /* Headline card: full width, horizontal layout on mobile */
    .berita-card .card-img-wrap { aspect-ratio: 16/9; min-height: 120px; }
    .berita-card .card-kategori { font-size: 0.52rem; padding: 2px 5px; top: 5px; left: 5px; }
    .berita-card .card-title { font-size: 0.88rem; -webkit-line-clamp: 2; line-height: 1.3; }
    .berita-card .card-body { padding: 0.6rem; }
    .berita-card .card-meta { font-size: 0.65rem; }

    /* Berita list items in sidebar/terbaru */
    .berita-list-item { gap: 0.5rem; padding: 0.45rem 0; }
    .berita-list-item .thumb { width: 60px; min-width: 60px; height: 45px; border-radius: 6px; }
    .berita-list-item .info h6 { font-size: 0.78rem; -webkit-line-clamp: 2; line-height: 1.25; margin-bottom: 0.15rem; }
    .berita-list-item .info small { font-size: 0.62rem; }

    /* === MOBILE IMAGE FIX: min-height fallback for all image containers === */
    .hero-slide img { min-height: 100px; }
    .koleksi-card-img { min-height: 100px; }
    .pilihan-img { min-height: 100px; }
    .news-list-item-thumb { min-height: 40px; }
    .featured-sub-thumb { min-height: 35px; }
    .tv-card-img { min-height: 120px; }
    /* Ensure images inside containers are always visible */
    .berita-card .card-img-wrap img,
    .koleksi-card-img img,
    .pilihan-img img,
    .hero-slide img {
        width: 100% !important;
        height: auto !important;
        min-height: 80px;
        object-fit: cover;
        display: block;
    }

    /* Trending section */
    .trending-num { font-size: 1.1rem; min-width: 22px; }
    .d-flex.align-items-start.gap-3.py-3 h6 { font-size: 0.75rem !important; }

    /* Sidebar box */
    .sidebar-box { padding: 0.65rem; margin-bottom: 0.5rem; }
    .sidebar-box .box-title { font-size: 0.78rem; padding-bottom: 0.4rem; margin-bottom: 0.4rem; }

    /* Kategori news grid: 2 columns on mobile */
    .row.g-3 > [class*="col-lg-3"].col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Video cards */
    .video-card .play-icon { width: 34px; height: 34px; }
    .video-card .play-icon i { font-size: 0.85rem; }
    .video-card .video-title { font-size: 0.68rem; }
    .video-card .video-badge { font-size: 0.5rem; }
    .video-scroll-mobile .video-col { min-width: 200px; }

    /* Article detail page */
    .article-header { padding: 0.85rem; }
    .article-header h1 { font-size: 1.55rem; margin-bottom: 0.4rem; line-height: 1.45; }
    .article-meta { padding: 0; gap: 0; }
    .article-meta-top { gap: 0; flex-wrap: nowrap; }
    .article-meta .author-info { gap: 0.35rem; flex-shrink: 0; }
    .article-meta .author-avatar { width: 32px; height: 32px; }
    .article-meta .author-name { font-size: 0.75rem; }
    .article-meta .verified { font-size: 0.85rem; }
    .article-meta-bottom { padding-left: calc(32px + 0.35rem); font-size: 0.65rem; gap: 0.4rem; }
    .hak-jawab-right { margin-left: auto; flex-shrink: 0; }
    .hak-jawab-btn { font-size: 0.5rem; padding: 0.06rem 0.3rem; }
    .hak-jawab-link { font-size: 0.68rem; gap: 0.15rem; }
    .hak-jawab-link > i { font-size: 0.75rem; }
    .hak-jawab-link > span:not(.hak-jawab-btn):not(.hak-jawab-placeholder) { font-size: 0.68rem; }
    .article-featured-img { margin: 0.5rem auto; border-radius: var(--radius); }
    .article-content { font-size: 0.9rem; line-height: 1.65; }
    .article-content p { margin-bottom: 0.75rem; }

    /* Share buttons */
    .share-buttons { gap: 0.25rem; margin: 0.5rem 0; padding: 0.4rem 0; }
    .share-buttons a { padding: 0.25rem 0.5rem; font-size: 0.68rem; }

    /* Pilihan cards: 2 columns on mobile */
    .row.g-3 > [class*="col-lg-4"][class*="col-md-6"].col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .pilihan-card { height: 130px; border-radius: 6px; }
    .pilihan-card .pilihan-overlay { padding: 0.6rem; }
    .pilihan-card .pilihan-overlay h5 { font-size: 0.85rem; line-height: 1.2; }
    .pilihan-card .pilihan-overlay small { font-size: 0.62rem; }

    /* Kategori page header */
    .kategori-header { padding: 1rem 0; margin-bottom: 0.75rem; }

    /* Error page */
    .error-page h1 { font-size: 4rem; }
    .error-page p { font-size: 0.9rem; }

    /* Tags */
    .tag-badge { font-size: 0.62rem; padding: 2px 6px; }

    /* Breadcrumb */
    .breadcrumb { font-size: 0.68rem; }

    /* Pagination */
    .pagination .page-link { font-size: 0.78rem; padding: 0.3rem 0.55rem; }

    /* Ad slots: more compact */
    .billboard-section, .leaderboard-section { padding: 0.25rem 0; }

    /* Mobile header: compact inline layout like desktop */
    #mainNav .container { padding: 0.4rem 12px; }
    /* Search box inline */
    #mainNav .search-box {
        width: 100%;
    }
    #mainNav .search-box .form-control {
        width: 100% !important;
        border-radius: 20px 0 0 20px;
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }
    #mainNav .search-box .form-control:focus { width: 100% !important; }
    #mainNav .search-box .btn-search {
        border-radius: 0 20px 20px 0;
        padding: 0.3rem 0.5rem;
    }

    /* Main content area: reduce padding */
    main.py-3 { padding-top: 0.5rem !important; padding-bottom: 0.75rem !important; }

    /* =============================== */
    /* TRENDING VIDEO: Full-width on mobile */
    /* =============================== */
    .trending-video-section {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
        padding: 0.65rem 0.5rem;
        overflow: hidden;
    }
    .trending-video-header {
        margin-bottom: 0.5rem;
        padding-left: 0.25rem;
    }
    .trending-video-title {
        font-size: 0.95rem;
        gap: 6px;
    }
    .trending-video-grid {
        gap: 0.4rem;
    }
    /* Featured card: vertical stack */
    .tv-featured {
        grid-template-columns: 1fr;
        border-radius: 6px;
    }
    .tv-featured .tv-card-img {
        aspect-ratio: 16/9;
        height: auto;
        min-height: 0;
    }
    .tv-featured .tv-card-body {
        padding: 0.5rem 0.4rem;
    }
    .tv-featured .tv-card-title {
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
        line-height: 1.3;
        margin-bottom: 0.2rem;
    }
    /* Small cards: 2-column grid */
    .tv-row-small {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    .tv-small {
        border-radius: 6px;
    }
    .tv-small .tv-card-img {
        aspect-ratio: 16/9;
    }
    .tv-small .tv-card-body {
        padding: 0.4rem;
    }
    .tv-small .tv-card-title-sm {
        font-size: 0.7rem;
        -webkit-line-clamp: 2;
        line-height: 1.25;
    }
    /* Play icon: smaller */
    .tv-play-icon {
        width: 36px; height: 36px;
        font-size: 1rem;
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
    }
    .tv-play-sm {
        width: 28px; height: 28px;
        font-size: 0.85rem;
    }
    .tv-card-meta {
        font-size: 0.6rem;
    }
}

/* Desktop: hide mobile menu bar (kategori bar handles navigation) */
@media (min-width: 768px) {
    .mobile-menu-bar { display: none !important; }
    body { padding-bottom: 0 !important; }
}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 479.98px) {
    .container { padding-left: 0.5rem; padding-right: 0.5rem; }

    .logo-norma { font-size: 1.6rem; letter-spacing: 1.5px; }
    .logo-news { font-size: 0.58rem; padding: 2px 7px; letter-spacing: 2.5px; }
    .logo-img { max-height: 30px; width: auto; }
    .mw-header .brand-logo { max-height: 28px; max-width: calc(100vw - 100px); object-fit: contain; }
    .mw-nav-brand-name { display: none !important; }
    /* Search even more compact on small phones */
    .mw-header .header-search { max-width: 130px; flex: 1 1 130px; }
    .mw-header .header-input-search { font-size: 0.68rem; }
    .mw-header .btn-search-icon,
    .mw-header .btn-mic-icon { padding: 0.35rem 0.45rem; font-size: 0.72rem; }
    .mw-header .header-right { gap: 0.2rem; }
    .btn-live-sctv { font-size: 0.72rem; }
    .btn-admin-mw { padding: 0.15rem 0.35rem; font-size: 0.55rem; }
    .mw-nav-item a { font-size: 0.65rem; padding: 5px 6px; }

    /* Trending video: flush edges on small screens */
    .trending-video-section {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 0.5rem 0.4rem;
    }
    .trending-video-title { font-size: 0.85rem; gap: 5px; }
    .trending-video-header { padding-left: 0.15rem; margin-bottom: 0.4rem; }
    .trending-video-grid { gap: 0.35rem; }
    .tv-featured .tv-card-title { font-size: 0.78rem; }
    .tv-featured .tv-card-body { padding: 0.4rem 0.3rem; }
    .tv-small .tv-card-title-sm { font-size: 0.65rem; }
    .tv-small .tv-card-body { padding: 0.35rem; }
    /* Single column for small cards on very small screens */
    .tv-row-small {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .tv-play-icon { width: 34px; height: 34px; font-size: 1rem; }
    .tv-play-sm { width: 26px; height: 26px; font-size: 0.75rem; }
    .tv-card-meta { font-size: 0.55rem; }

    /* Footer logo di small mobile */
    .footer-brand .logo-norma { font-size: 1.8rem; }
    .footer-brand .logo-news { font-size: 0.7rem; padding: 2px 10px; letter-spacing: 4px; }

    /* Top bar: compact on very small screens */
    .top-bar { font-size: 0.7rem; }
    .ticker-label-row { padding: 0.2rem 0; }
    .top-bar-right { gap: 0.4rem; }
    .weather-ticker-strip { font-size: 0.58rem; height: 28px; }
    .weather-ticker-label { font-size: 0.52rem; padding: 0 5px; gap: 2px; }
    .weather-ticker-loading { font-size: 0.58rem; }
    .weather-ticker-item { padding: 0 0.3rem; gap: 2px; }
    .weather-ticker-track .wt-icon { font-size: 0.75rem; }
    .weather-ticker-track .wt-temp { font-weight: 700; }
    .weather-ticker-track .wt-desc { display: none; }
    .weather-ticker-track .wt-humidity { display: none; }
    .wt-sep { display: none; }

    .hero-left-image-wrap { min-height: 150px; }
    .hero-big-title { font-size: 0.88rem; }
    .hero-nav-btn,
    .hero-dots { display: none; }

    .berita-card .card-title { font-size: 0.82rem; }
    .berita-card .card-body { padding: 0.5rem; }
    .berita-list-item .thumb { width: 52px; min-width: 52px; height: 40px; border-radius: 5px; }
    .berita-list-item .info h6 { font-size: 0.72rem; -webkit-line-clamp: 2; }

    .trending-num { font-size: 1rem; min-width: 20px; }

    .section-title { font-size: 1rem; }

    /* kategori-link: same styling as desktop - no overrides */

    .article-header { padding: 0.65rem; }
    .article-header h1 { font-size: 1.4rem; line-height: 1.25; }

    .pilihan-card { height: 110px; }
    .pilihan-card .pilihan-overlay h5 { font-size: 0.78rem; }
    .pilihan-card .pilihan-overlay small { font-size: 0.58rem; }

    /* 2-col grid on very small mobile */
    .row.g-3 > [class*="col-lg-3"].col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .sidebar-box { padding: 0.5rem; margin-bottom: 0.4rem; }

    .footer-title { font-size: 0.8rem; }
    .footer-links a { font-size: 0.7rem; }

    .video-scroll-mobile .video-col { min-width: 200px; }

    .pagination .page-link { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
}

/* ---- Lazy load ---- */
img[data-src] { opacity: 0; transition: opacity 0.3s; }
img.loaded { opacity: 1; }

/* ---- Print ---- */
@media print {
    .sticky-header-wrapper, .top-bar, .site-footer, .share-buttons, .back-to-top { display: none !important; }
    .article-content { font-size: 12pt; }
}