/* ==================================================
   DASAR
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f4f4;
    color: #222;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 92%;
    max-width: 1250px;
    margin: auto;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
    background: #ffffff;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
}

.header-inner {
    min-height: 0;
    height: 0;
}

.logo-link {
    display: block;
}

.logo {
    width: 200px;
    height: auto;
    display: block;
}


/* ==================================================
   NAVBAR KABATA.ID
================================================== */

.main-nav {
    width: 100%;
    background: #0b1f3a;
    border-bottom: 3px solid #e21b23;
    min-height: 58px;

    position: relative;
    z-index: 1000;
}

.main-nav .container {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 58px;
}

.nav-menu {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 58px;

    padding: 0 18px;

    color: #ffffff;
    background: transparent;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;

    position: relative;
    z-index: 1001;

    cursor: pointer;
}

.main-nav a:hover {
    background: #e21b23;
    color: #ffffff;
}

.main-nav a.active {
    background: #e21b23 !important;
    color: #ffffff !important;
}


/* ==================================================
   BREAKING NEWS
================================================== */

.breaking-wrapper {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

.breaking-box {
    display: flex;
    align-items: center;
    min-height: 45px;
}

.breaking-label {
    flex-shrink: 0;

    background: #e21b23;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    padding: 10px 16px;

    white-space: nowrap;

    position: relative;
    z-index: 2;
}

.breaking-text {
    flex: 1;
    overflow: hidden;
    padding-left: 20px;

    font-size: 15px;
    font-weight: 700;

    color: #111111;

    white-space: nowrap;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.breaking-text a {
    display: inline-block;

    color: #111111;

    text-decoration: none;

    padding-left: 0;

    font-size: 15px;
    font-weight: 700;

    animation: breakingScroll 12s linear infinite;

    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.breaking-text a:hover {
    color: #e21b23;
}

.breaking-text>span {
    color: #555555;
}



/* ==================================================
   ANIMASI BREAKING NEWS
================================================== */

@keyframes breakingScroll {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* ==================================================
   MAIN
================================================== */

.main-content {
    padding-top: 28px;
    padding-bottom: 0;
}

.section {
    margin-bottom: 15px;
}

.section-heading {
    border-bottom: 3px solid #071a36;
    margin-bottom: 18px;
}

.section-heading h2 {
    display: inline-block;
    background: #071a36;
    color: #ffffff;
    font-size: 18px;
    padding: 9px 16px;
    text-transform: uppercase;
}

/* ==================================================
   BERITA UTAMA - SLIDER
================================================== */

.featured-slider {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    min-height: 360px;
}

.featured-slide {
    display: none;
    grid-template-columns: 56% minmax(0, 1fr);
    gap: 16px;
    background: #ffffff;
    min-height: 360px;
}

.featured-slide.active {
    display: grid;
}

.featured-image {
    width: 100%;
    min-height: 0;
    height: auto;
   
    overflow: hidden;
}

.featured-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
   
}

.article-category {
    display: inline-block;
    color: #e21b23;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 9px;
    text-decoration: none;
}

.featured-info h1 {
    font-size: 31px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.featured-info h1 a {
    color: #111111;
    text-decoration: none;
}

.featured-info h1 a:hover {
    color: #e21b23;
}

.article-excerpt {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.article-meta {
    margin-top: 17px;
    color: #888;
    font-size: 12px;
}

.article-meta span {
    margin: 0 6px;
}


/* ==================================================
   GRID KONTEN
================================================== */

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 30px;
}


/* ==================================================
   BERITA TERBARU
================================================== */

.latest-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.latest-article {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    background: #ffffff;
    padding: 14px;
}

.latest-image {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}

.latest-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

.latest-info {
    padding: 5px 5px 5px 0;
}

.latest-info h3 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 9px;
}

.latest-info h3 a:hover {
    color: #e21b23;
}

.latest-info p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}


/* ==================================================
   TERPOPULER
================================================== */

.popular-section {
    background: #ffffff;
    padding: 0 18px 20px;
    height: fit-content;
}

.popular-section .section-heading {
    margin-left: -18px;
    margin-right: -18px;
}

.popular-list {
    display: flex;
    flex-direction: column;
}

.popular-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.popular-item:last-child {
    border-bottom: none;
}

.popular-number {
    font-size: 29px;
    font-weight: bold;
    color: #e21b23;
    text-align: center;
}

.popular-info h3 {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 7px;
}

.popular-info h3 a:hover {
    color: #e21b23;
}

.popular-info small {
    color: #999;
    font-size: 11px;
}


/* ==================================================
   FOOTER KABATA.ID
================================================== */

.site-footer {
    background: #071b3a;
    color: #ffffff;
    margin-top: 0;
    padding: 60px 0 0;
}


/* ==================================================
   AREA UTAMA FOOTER
================================================== */

.footer-grid {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.1fr 1fr;
    gap: 55px;
    padding: 0 20px 20px;
    align-items: start;
}


/* ==================================================
   LOGO / IDENTITAS
================================================== */

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.footer-brand p {
    margin: -10px 0 0;
    max-width: 280px;
    color: #d5dbe5;
    font-size: 13px;
    line-height: 1.6;
}


/* ==================================================
   KOLOM FOOTER
================================================== */

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin: 0 0 28px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ==================================================
   LINK FOOTER
================================================== */

.footer-column a {
    display: block;
    margin-bottom: 14px;
    color: #e2e7ef;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
}

.footer-column a:hover {
    color: #ed1c24;
}


/* ==================================================
   KONTAK
================================================== */

.footer-contact p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    color: #e2e7ef;
    font-size: 15px;
    line-height: 1.5;
}

.footer-contact i {
    width: 20px;
    color: #ed1c24;
    font-size: 17px;
    text-align: center;
}


/* ==================================================
   COPYRIGHT
================================================== */

.footer-bottom {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 22px 20px;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #d5dbe5;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}


/* ==================================================
   RESPONSIVE - TABLET
================================================== */

@media (max-width: 1000px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }

}


/* ==================================================
   RESPONSIVE - HP
================================================== */

@media (max-width: 700px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        padding: 40px 20px 30px;
    }

}


/* ==================================================
   RESPONSIVE - HP KECIL
================================================== */

@media (max-width: 500px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        padding: 20px;
    }

}

/* ==================================================
   TIGA KOLOM BERITA + IKLAN
================================================== */

.three-column-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px 250px;
    gap: 22px;
    margin-top: 10px;
    width: 100%;
    align-items: start;
}

.news-column {
    background: #ffffff;
    padding: 0 15px 20px;
    min-width: 0;
}

/* Kolom iklan */
.ad-column {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    padding-left: 0;
    padding-right: 0;
}


/* ==================================================
   SLIDER IKLAN SAMPING
================================================== */

.vertical-ad-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

.vertical-ad-slide {
    display: none;
    width: 100%;
}

.vertical-ad-slide.active {
    display: block;
}

.vertical-ad-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ==================================================
   VETO EKOLOGIS
================================================== */

.veto-column {
    border-top: none;
}

.veto-heading {
    border-bottom-color: #0b1f3a;
}

.veto-heading h2 {
    background: #0b1f3a;
}

.veto-column .article-category {
    color: #e21b23;
}

.empty-veto {
    text-align: center;
    padding: 40px 15px;
    color: #777;
}

.empty-veto strong {
    display: block;
    color: #0b1f3a;
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-veto p {
    font-size: 13px;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1000px) {

    .three-column-news {
        grid-template-columns: 1fr 1fr;
    }

    .veto-column {
        grid-column: span 2;
    }

}


@media (max-width: 650px) {

    .three-column-news {
        grid-template-columns: 1fr;
    }

    .veto-column {
        grid-column: auto;
    }

}

/* =========================
   IKLAN UTAMA
========================= */

.ad-header {
    margin: 10px 10px;
}

.ad-label {
    font-size: 15px;
    color: #333;
    margin-bottom: 6px;
}

.ad-box {
    position: relative;
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-box a {
    display: block;
    width: 100%;
    height: 100%;
}

.ad-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* ==================================================
   TOP BAR - SOSIAL MEDIA
================================================== */

.top-bar {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.top-bar-inner {
    min-height: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* SOSIAL MEDIA */

.social-media {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-media a {
    color: #071f41;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.social-media a:hover {
    color: #e21b23;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 700px) {

    .top-bar-inner {
        padding: 8px 0;
        flex-direction: column;
        gap: 10px;
    }

    .social-media {
        gap: 15px;
    }

}

/* ==================================================
   TOP BAR - SOSMED, LOGO & PENCARIAN
================================================== */

.top-bar {
    width: 100%;
    height: 70px;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 90px;
    box-sizing: border-box;

    position: relative;
    border-bottom: 1px solid #e5e5e5;
}


/* ==================================================
   SOSIAL MEDIA
================================================== */

.social-media {
    display: flex;
    align-items: center;
    gap: 22px;
}

.social-media a {
    color: #555555;
    font-size: 30px;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.2s;
}

.social-media a:hover {
    color: #111111;
}


/* ==================================================
   LOGO TENGAH KABATA.ID
================================================== */

.top-logo {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;

    z-index: 10;
}

.top-logo img {
    display: block;

    width: 200px;
    height: auto;

    object-fit: contain;
}

/* ==================================================
   PENCARIAN
================================================== */

.search-box {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.search-box input {
    width: 200px;
    height: 35px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #cccccc;
    border-right: none;

    font-size: 15px;
    outline: none;
}

.search-box input:focus {
    border-color: #071d3a;
}

.search-box button {
    width: 50px;
    height: 35px;

    border: none;

    background: #071d3a;
    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.search-box button:hover {
    background: #ed1c24;
}


/* ==================================================
   MENU AKTIF
================================================== */

.main-nav a.active {
    background: #e21b23 !important;
    color: #ffffff !important;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {

    .top-bar {
        padding: 0 30px;
    }

    .social-media {
        gap: 15px;
    }

    .social-media a {
        font-size: 23px;
    }

    .top-logo img {
        width: 160px;
    }

    .search-box input {
        width: 180px;
    }
}


@media (max-width: 700px) {

    .top-bar {
        height: auto;
        min-height: 65px;
        padding: 10px 20px;
    }

    .social-media {
        gap: 12px;
    }

    .social-media a {
        font-size: 20px;
    }

    .top-logo {
        position: absolute;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-decoration: none;
    }

    .top-logo img {
        width: 130px;
    }


/* ==================================================
   UKURAN STANDAR BANNER IKLAN KABATA.ID
   1200 x 400 px
================================================== */

.ad-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: auto;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
}

.ad-slider .ad-slide {
    display: none !important;
    width: 100%;
    height: 100%;
}

.ad-slider .ad-slide.active {
    display: block !important;
}

.ad-slider .ad-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Tombol kiri dan kanan */
.ad-prev,
.ad-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: rgba(11, 31, 58, 0.8);
    color: white;

    font-size: 28px;
    line-height: 38px;

    cursor: pointer;

    z-index: 5;
}

.ad-prev {
    left: 15px;
}

.ad-next {
    right: 15px;
}

.ad-prev:hover,
.ad-next:hover {
    background: #e21b23;
}

/* Titik indikator */
.ad-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;

    transform: translateX(-50%);

    display: flex;
    gap: 7px;

    z-index: 5;
}

.ad-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.7);

    cursor: pointer;
}

.ad-dot.active {
    background: #e21b23;
}

/* ==========================================
   FOTO BERITA TERBARU & VETO EKOLOGIS
   TAMPIL UTUH TANPA TERPOTONG
========================================== */

.latest-column .column-image,
.veto-column .column-image {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.latest-column .column-image img,
.veto-column .column-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   FINAL - FOTO BERITA TAMPIL UTUH TANPA TERPOTONG
========================================================= */

.three-column-news .column-image,
.latest-column .column-image,
.veto-column .column-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

.three-column-news .column-image img,
.latest-column .column-image img,
.veto-column .column-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* =====================================================
   LAYOUT BERITA + HEADLINE + IKLAN
===================================================== */

.three-column-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px 300px;
    gap: 22px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    align-items: stretch;
}

.news-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: #ffffff;
    padding: 0 15px 20px;
    box-sizing: border-box;
}

.ad-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* Kotak iklan */
.vertical-ad {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}


/* Link iklan */
.vertical-ad-link {
    display: block;
    width: 100%;
}


/* Gambar iklan */
.vertical-ad-link img {
    display: block;
    width: 300px;
    height: 250px;
    object-fit: cover;
    margin: 0 auto;
}

.vertical-ad-slide img {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin: 0 auto;
}

/* ==================================================
   HALAMAN KATEGORI BERITA
================================================== */

.category-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-item {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 20px;
    background: #ffffff;
    padding: 14px;
    border: 1px solid #e5e5e5;
}

.category-image {
    width: 230px;
    background: #ffffff;
    overflow: visible;
}

.category-image a {
    display: block;
    width: 100%;
}

.category-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: initial;
}

.category-info {
    padding: 5px 5px 5px 0;
}

.category-info h3 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 9px;
}

.category-info h3 a:hover {
    color: #e21b23;
}

/* ==================================================
   BERITA TERBARU - TAMPILAN RINGKAS
================================================== */

.latest-column .column-news-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;

    padding-bottom: 12px;
    margin-bottom: 12px;
}

.latest-column .column-image {
    width: 120px;
    height: auto;
    margin: 0;
    overflow: visible;
    background: #ffffff;
}

.latest-column .column-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: #ffffff;
}

.latest-column .column-content h3 {
    margin: 4px 0 7px;
    font-size: 15px;
    line-height: 1.35;
}

.latest-column .article-category {
    font-size: 12px;
}

.latest-column .article-meta {
    font-size: 11px;
}

/* ==================================================
   PENYAMAAN TINGGI TIGA KOLOM
================================================== */

.three-column-news {
    align-items: stretch;
}

.news-column {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Berita terbaru */
.latest-column .column-list {
    flex: 1;
}

/* Terpopuler */
.popular-column .popular-list {
    flex: 1;
}

/* Iklan */
.ad-column {
    display: flex;
    flex-direction: column;
}

/* ==================================================
   BACA JUGA
================================================== */

.read-more-box {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #071b3a;
}

.read-more-heading {
    margin-bottom: 12px;
}

.read-more-heading h2 {
    display: inline-block;
    margin: 0;
    padding: 8px 15px;
    background: #071b3a;
    color: #ffffff;
    font-size: 17px;
    text-transform: uppercase;
}

.read-more-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.read-more-item {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 10px;

    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.read-more-item:last-child {
    border-bottom: none;
}

.read-more-image {
    width: 75px;
    height: auto;
    overflow: visible;
    background: #ffffff;
}

.read-more-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: #ffffff;
}

.read-more-content .article-category {
    font-size: 10px;
    font-weight: 700;
    color: #e21b23;
}

.read-more-content h3 {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.3;
}

.read-more-content h3 a {
    color: #111111;
    text-decoration: none;
}

.read-more-content h3 a:hover {
    color: #e21b23;
}

/* ==================================================
   KABATA RESPONSIVE V2 - MOBILE / TABLET
   Tambahan override aman; desktop tetap dipertahankan.
================================================== */

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 2px;
}

.nav-menu {
    min-width: 0;
}

.top-bar,
.main-nav,
.breaking-wrapper,
.main-content,
.three-column-news,
.footer-grid {
    min-width: 0;
}

.featured-slide,
.latest-column .column-news-item,
.category-item,
.popular-item,
.read-more-item {
    min-width: 0;
}

.featured-info,
.latest-info,
.latest-column .column-content,
.popular-info,
.category-info,
.read-more-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .top-bar {
        padding: 0 30px;
    }

    .social-media {
        gap: 15px;
    }

    .social-media a {
        font-size: 24px;
    }

    .top-logo img {
        width: 165px;
    }

    .search-box input {
        width: 170px;
    }

    .main-nav a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }
}

@media (max-width: 800px) {
    .top-bar {
        height: 50px;
        min-height: 50px;
        padding: 0 14px;
    }

    .social-media {
        gap: 10px;
    }

    .social-media a {
        font-size: 20px;
    }

    .top-logo {
        width: 180px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .top-logo img {
        width: 135px;
    }

    .top-logo .slogan-wrapper {
        position: static;
        transform: none;
        width: 165px;
        height: 14px;
        margin-top: 1px;
    }

    .top-logo .slogan-running {
        font-size: 7px;
        letter-spacing: 0.8px;
        line-height: 14px;
        animation: none;
    }

    .search-box {
        margin-left: auto;
    }

    .search-box input {
        display: none;
    }

    .search-box button {
        width: 40px;
        height: 36px;
        font-size: 17px;
    }

    .main-nav {
        min-height: 48px;
    }

    .nav-container {
        position: relative;
        min-height: 48px;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        width: 100%;
        background: #0b1f3a;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
        flex-direction: column;
        z-index: 1100;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .main-nav .nav-menu a {
        width: 100%;
        height: auto;
        min-height: 46px;
        justify-content: flex-start;
        padding: 12px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        font-size: 14px;
        white-space: normal;
    }

    .breaking-box {
        min-height: 42px;
    }

    .breaking-label {
        padding: 9px 12px;
        font-size: 11px;
    }

    .breaking-text {
        min-width: 0;
        padding-left: 12px;
        font-size: 13px;
    }

    .breaking-text a {
        font-size: 13px;
    }

    .main-content {
        padding-top: 18px;
    }

    .container {
        width: calc(100% - 24px);
        max-width: none;
    }

    .ad-header {
        margin: 8px 0 18px;
    }

    .ad-slider {
        width: 100%;
        aspect-ratio: 3 / 1;
        border-radius: 6px;
    }

    .featured-slider {
        min-height: 0;
    }

    .featured-slide,
    .featured-slide.active {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .featured-image,
    .featured-image img {
        min-height: 0;
        height: auto;
    }

    .featured-image img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
}

    .featured-info {
        padding: 18px 16px 20px;
    }

    .featured-info h1 {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .article-excerpt {
        font-size: 14px;
        line-height: 1.55;
    }

    .article-meta {
        margin-top: 12px;
    }

    .content-grid,
    .three-column-news {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ad-column,
    .news-column,
    .latest-column,
    .headline-column,
    .veto-column {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .latest-column .column-news-item {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
    }

    .latest-column .column-image {
        width: 105px;
        height: 78px;
    }

    .latest-column .column-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .latest-column .column-content h3 {
        font-size: 15px;
    }

    .popular-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .ad-column .vertical-ad-slide img,
    .vertical-ad-link img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 36px 16px 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .top-bar {
        padding: 0 10px;
    }

    .social-media a {
        font-size: 18px;
    }

    .social-media {
        gap: 8px;
    }

    .top-logo {
        width: 145px;
    }

    .top-logo img {
        width: 112px;
    }

    .top-logo .slogan-wrapper {
        display: none;
    }

    .search-box button {
        width: 36px;
        height: 34px;
        font-size: 16px;
    }

    .section-heading {
        margin-bottom: 12px;
    }

    .section-heading h2 {
        font-size: 15px;
        padding: 8px 12px;
    }

    .featured-info {
        padding: 16px 14px 18px;
    }

    .featured-info h1 {
        font-size: 21px;
    }

    .article-excerpt {
        font-size: 13px;
    }

    .latest-column .column-news-item {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
    }

    .latest-column .column-image {
        width: 90px;
        height: 68px;
    }

    .latest-column .column-content h3 {
        font-size: 14px;
    }

    .latest-column .article-category {
        font-size: 10px;
    }

    .latest-column .article-meta {
        font-size: 10px;
    }

    .popular-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .popular-number {
        font-size: 24px;
    }

    .popular-info h3 {
        font-size: 14px;
    }

    .read-more-item {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .read-more-image {
        width: 68px;
        height: 52px;
    }

    .read-more-content h3 {
        font-size: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 14px 24px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-column h3 {
        margin-bottom: 16px;
        font-size: 15px;
    }

    .footer-column a {
        font-size: 14px;
        margin-bottom: 10px;
    }
}

@media (max-width: 380px) {
    .top-logo {
        width: 132px;
    }

    .top-logo img {
        width: 102px;
    }

    .social-media a {
        font-size: 17px;
    }

    .search-box button {
        width: 34px;
    }

    .container {
        width: calc(100% - 18px);
    }
}



/* ==================================================
   KABATA FINAL - MENU HP GESER HORIZONTAL
   Tidak menggunakan hamburger.
================================================== */

@media (max-width: 800px) {
    .main-nav {
        width: 100%;
        min-height: 48px;
        overflow: hidden;
    }

    .main-nav .nav-container {
        width: 100%;
        max-width: none;
        min-height: 48px;
        margin: 0;
        padding: 0;
        display: block;
    }

    .main-nav .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 48px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #0b1f3a;
        border-top: 0;
        box-shadow: none;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .main-nav .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .main-nav .nav-menu a {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-bottom: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

    .nav-toggle {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .main-nav .nav-menu a {
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 12px !important;
    }
}

.footer-column.footer-redaksi h3::after {
    display: none !important;
}

.footer-column.footer-redaksi h3 {
    font-size: 16px !important;
    margin-bottom: 0 !important;
}

.footer-column.footer-redaksi h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

/* =========================================
   HASIL PENCARIAN
========================================= */

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-result-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #ffffff;
    box-sizing: border-box;
}

.search-result-image {
    flex: 0 0 220px;
    width: 220px;
}

.search-result-image img {
    width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
}

.search-result-content {
    min-width: 0;
}

.search-result-content h3 {
    margin: 8px 0 10px;
    font-size: 22px;
    line-height: 1.35;
    color: #071f41;
}

.search-result-content h3 a {
    color: inherit;
    text-decoration: none;
}

.search-result-content h3 a:hover {
    color: #ed1c24;
}

.search-result-content p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.6;
}

/* HP */
@media (max-width: 700px) {

    .search-result-item {
        display: block;
        padding: 15px;
    }

    .search-result-image {
        width: 100%;
    }

    .search-result-image img,
    .search-result-image .photo-placeholder {
        width: 100%;
        height: auto;
        min-height: 180px;
    }

    .search-result-content h3 {
        font-size: 19px;
    }
}

/* =========================================
   BREAKING NEWS - SATU JUDUL BERGANTIAN
========================================= */

.breaking-text {
    position: relative;
    width: 100%;
    min-height: 24px;
    overflow: hidden;
}

.breaking-ticker {
    position: relative;
    width: 100%;
    height: 45px;
    overflow: hidden;

    display: flex;
    align-items: center;
}

.breaking-ticker a {
    position: absolute;
    top: 50%;
    left: 0;

    display: block;

    width: max-content;
    max-width: none;

    white-space: nowrap;

    color: #222;
    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    line-height: 18px;
}

.breaking-ticker a:hover {
    color: #ed1c24;
}

.breaking-data {
    display: none;
}

/* =========================================
   FOOTER DESKTOP
   4 kolom tetap berjejer horizontal
   Isi masing-masing kolom rata kiri
========================================= */

@media (min-width: 801px) {

    .site-footer .footer-grid {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        display: grid;
        grid-template-columns:
            1.15fr 1fr 1fr 0.85fr;
        column-gap: 50px;
        align-items: start;
    }

    /* Logo dan deskripsi */
    .site-footer .footer-brand {
        text-align: left;
    }

    .site-footer .footer-brand .footer-logo {
        display: block;
        margin: 0 auto 25px;
    }

    .site-footer .footer-brand p {
        position: relative;
        top: -25px;
        text-align: left;
        margin-top: 0;
    }

    /* Semua kolom tetap rata kiri */
    .site-footer .footer-column {
        text-align: left;
        display: block;
    }

    /* Judul kolom */
    .site-footer .footer-column h3 {
        text-align: left;
        margin: 0 0 10px;
    }

    /* Garis tepat di bawah judul */
    .site-footer .footer-line {
        display: block;
        width: 100px;
        height: 3px;
        background: #ed1c24;
        margin: 0 0 22px;
    }

    /* Garis khusus LAYANANAN INFORMASI */
    .site-footer .footer-column:nth-child(2) .footer-line {
        width: 193px;
    }

    /* Garis khusus KONTAK */
    .site-footer .footer-column:nth-child(3) .footer-line {
        width: 66px;
    }

    /* Isi layanan */
    .site-footer .footer-column>a {
        display: block;
        width: 100%;
        text-align: left;
    }

    /* Kontak */
    .site-footer .footer-contact {
        width: 100%;
        text-align: left;
    }

    .site-footer .footer-contact p {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        justify-content: flex-start;
    }

}

/* Naikkan deskripsi di bawah logo */
.site-footer .footer-brand p {
    margin-top: 0;
}

/* Naikkan area copyright */
.site-footer .footer-bottom {
    margin-top: -30px;
}

/* ==================================================
   KABATA FINAL - CEGAH HALAMAN GESER KIRI KANAN
   DAN RAPATKAN LAYOUT RESPONSIF
================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Semua gambar tidak boleh melewati layar */
img,
video,
iframe {
    max-width: 100%;
}

/* Konten utama tidak boleh melewati viewport */
.main-content {
    width: 92%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
   LAPTOP / DESKTOP
================================================== */

@media (min-width: 801px) {

    .featured-slide {
        width: 100%;
        max-width: 100%;
    }

    .three-column-news {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .news-column,
    .ad-column {
        min-width: 0;
        max-width: 100%;
    }

    .latest-column .column-news-item,
    .popular-item,
    .read-more-item {
        min-width: 0;
    }
}

/* ==================================================
   HP
   SEMUA BLOK MENYESUAIKAN LEBAR LAYAR
================================================== */

@media (max-width: 800px) {

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-content {
        width: calc(100% - 24px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .featured-slider,
    .featured-slide,
    .three-column-news,
    .news-column,
    .ad-column {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Berita utama menjadi satu blok utuh */
    .featured-slide,
    .featured-slide.active {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .featured-image {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .featured-image img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    
    }

    .featured-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Tiga kolom menjadi satu alur */
    .three-column-news {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .latest-column,
    .headline-column,
    .ad-column {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Hilangkan batas lebar gambar iklan samping */
    .ad-column .vertical-ad-slide img,
    .ad-column .vertical-ad-link img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* Gambar berita mengikuti kotaknya */
    .column-image,
    .column-image img,
    .read-more-image,
    .read-more-image img {
        max-width: 100%;
    }
}

/* =========================================
   FINAL - LAYOUT MENYATU TANPA JARAK BESAR
========================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.main-content {
    margin-bottom: 0;
}

.main-content>.section:last-child,
.main-content>.three-column-news:last-child {
    margin-bottom: 0;
}

.site-footer {
    width: 100%;
    margin-top: 0 !important;
}

/* =========================================
   FINAL - UKURAN TEKS LEBIH KECIL
========================================= */

/* Menu utama */
.main-nav a {
    font-size: 13px !important;
}

/* Judul bagian:
   BERITA UTAMA, BERITA TERBARU,
   HEADLINE, BACA JUGA, dll. */
.section-heading h2 {
    font-size: 16px !important;
}

/* Judul footer:
   LAYANAN INFORMASI, KONTAK, REDAKSI */
.site-footer .footer-column h3 {
    font-size: 15px !important;
}

/* Tulisan link menu footer */
.site-footer .footer-column a {
    font-size: 14px !important;
}

/* =========================================
   FINAL - PERKECIL JUDUL + ISI
========================================= */

/* JUDUL BAGIAN */
.section-heading h2 {
    font-size: 16px !important;
}

/* ISI BERITA TERBARU */
.latest-column .column-content h3 {
    font-size: 14px !important;
}

.latest-column .article-category {
    font-size: 11px !important;
}

.latest-column .article-meta {
    font-size: 10px !important;
}

/* ISI HEADLINE */
.headline-column .popular-number {
    font-size: 24px !important;
}

.headline-column .popular-info h3 {
    font-size: 14px !important;
}

.headline-column .popular-info small {
    font-size: 10px !important;
}

/* ISI BACA JUGA */
.read-more-content .article-category {
    font-size: 9px !important;
}

.read-more-content h3 {
    font-size: 12px !important;
}

/* FOOTER:
   LAYANAN INFORMASI, KONTAK, REDAKSI */
.site-footer .footer-column h3 {
    font-size: 15px !important;
}

/* Isi layanan informasi */
.site-footer .footer-column a {
    font-size: 13px !important;
}

/* Isi kontak */
.site-footer .footer-contact p {
    font-size: 13px !important;
}

.site-footer .footer-contact i {
    font-size: 15px !important;
}

/* Link REDAKSI */
.site-footer .footer-redaksi h3 a {
    font-size: 15px !important;
}

/* =========================================
   FINAL - PERKECIL LAGI SEMUA TEKS
========================================= */

/* Judul bagian */
.section-heading h2 {
    font-size: 14px !important;
}

/* BERITA UTAMA */
.featured-info h1 {
    font-size: 25px !important;
}

.article-excerpt {
    font-size: 13px !important;
}

.article-meta {
    font-size: 10px !important;
}

/* BERITA TERBARU */
.latest-column .column-content h3 {
    font-size: 13px !important;
}

.latest-column .article-category {
    font-size: 10px !important;
}

.latest-column .article-meta {
    font-size: 9px !important;
}

/* HEADLINE */
.headline-column .popular-number,
.popular-number {
    font-size: 21px !important;
}

.headline-column .popular-info h3,
.popular-info h3 {
    font-size: 13px !important;
}

.headline-column .popular-info small,
.popular-info small {
    font-size: 9px !important;
}

/* BACA JUGA - dipaksa lebih kecil */
.read-more-heading h2 {
    font-size: 14px !important;
}

.read-more-content .article-category {
    font-size: 8px !important;
}

.read-more-content h3 {
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.read-more-content {
    font-size: 10px !important;
}

/* FOOTER */
.site-footer .footer-column h3 {
    font-size: 14px !important;
}

.site-footer .footer-column a {
    font-size: 12px !important;
}

.site-footer .footer-contact p {
    font-size: 12px !important;
}

.site-footer .footer-contact i {
    font-size: 14px !important;
}

/* REDAKSI */
.site-footer .footer-redaksi h3,
.site-footer .footer-redaksi h3 a {
    font-size: 14px !important;
}

/* DESKRIPSI DI BAWAH LOGO */
.site-footer .footer-brand p {
    font-size: 12px !important;
}

/* COPYRIGHT PALING BAWAH */
.site-footer .footer-bottom p {
    font-size: 11px !important;
}

/* ==================================================
   FINAL - KONTEN MENYATU TANPA KOTAK PUTIH
================================================== */

/* Seluruh halaman menggunakan bidang putih */
html,
body {
    background: #ffffff !important;
}

/* Area konten utama penuh */
.main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* Isi tetap rapi di tengah */
.main-content>.container {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
}

/* Hapus tampilan kotak putih per kolom */
.three-column-news .news-column,
.three-column-news .ad-column,
.three-column-news .veto-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Jangan beri pembatas putih di sekitar kolom */
.three-column-news {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Foto tetap rapi dan tidak keluar area */
.latest-column .column-image,
.latest-column .column-image img,
.veto-column .column-image,
.veto-column .column-image img,
.ad-column img {
    max-width: 100% !important;
}

/* Berita terbaru tetap dua bagian:
   foto + teks */
.latest-column .column-news-item {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    background: transparent !important;
}

/* Headline tetap rapi */
.headline-column .popular-item {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    background: transparent !important;
    align-items: start !important;
}

/* Baca juga tetap rapi */
.read-more-item {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    background: transparent !important;
}

/* Desktop */
@media (min-width: 801px) {

    .three-column-news {
        grid-template-columns:
            minmax(0, 1fr) 320px 300px !important;

        gap: 22px !important;
    }

}

/* HP */
@media (max-width: 800px) {

    .main-content>.container {
        width: calc(100% - 20px);
        max-width: none;
    }

    .three-column-news {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .latest-column .column-news-item {
        grid-template-columns: 90px minmax(0, 1fr) !important;
    }

    .headline-column .popular-item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

}

/* ==================================================
   KABATA FIX FINAL - POSISI KONTEN MODE DESKTOP DI HP
   .main-content pada index.php adalah elemen .container itu sendiri,
   jadi tidak boleh dibuat full-width tanpa margin auto.
================================================== */
.main-content {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 800px) {
    .main-content {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==================================================
   KABATA FIX 2026-08-26 - LAYOUT KONSISTEN + HP MODE DESKTOP
   Dibuat untuk menyamakan header, lebar konten, dan grid
   pada beranda, kategori, serta perangkat touch yang
   menggunakan mode "Situs desktop".
================================================== */

/* Fondasi lebar yang sama di semua halaman */
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

.container,
.main-nav .container,
.main-content {
    box-sizing: border-box;
}

.container {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.main-content {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.main-nav {
    width: 100%;
    overflow: hidden;
}

.main-nav .nav-container {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Hindari perbedaan posisi ketika scrollbar vertikal muncul/hilang */
html {
    scrollbar-gutter: stable;
}

/* --------------------------------------------------
   PERANGKAT TOUCH / HP DALAM MODE SITUS DESKTOP
   Chrome Android dapat memakai viewport desktop (>800px),
   sehingga @media max-width:800px tidak aktif. Selector
   pointer/hover ini membuat layout tetap responsif.
-------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .top-bar {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 14px !important;
    }

    .social-media {
        gap: 10px !important;
    }

    .social-media a {
        font-size: 20px !important;
    }

    .top-logo {
        width: 180px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .top-logo img {
        width: 135px !important;
    }

    .top-logo .slogan-wrapper {
        position: static !important;
        width: 165px !important;
        height: 14px !important;
        margin-top: 1px !important;
        transform: none !important;
    }

    .top-logo .slogan-running {
        font-size: 7px !important;
        line-height: 14px !important;
        animation: none !important;
    }

    .search-box input {
        display: none !important;
    }

    .search-box button {
        width: 40px !important;
        height: 36px !important;
        font-size: 17px !important;
    }

    .main-nav {
        min-height: 48px !important;
        height: 48px !important;
        overflow: hidden !important;
    }

    .main-nav .nav-container {
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .main-nav .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .main-nav .nav-menu a {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .breaking-box {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        margin: 0 !important;
    }

    .breaking-label {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }

    .breaking-text {
        min-width: 0 !important;
        padding-left: 12px !important;
        font-size: 13px !important;
    }

    .breaking-ticker,
    .breaking-text {
        overflow: hidden !important;
    }

    .main-content {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 18px !important;
    }

    .ad-header {
        margin: 8px 0 18px !important;
        width: 100% !important;
    }

    .ad-box,
    .ad-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .featured-slider,
    .featured-slide,
    .featured-slide.active {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .featured-slide,
    .featured-slide.active {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        gap: 0 !important;
    }

    .featured-image,
    .featured-image img,
    .featured-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .featured-image img {
        height: auto !important;
        object-fit: contain !important;
    }

    .three-column-news {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .news-column,
    .latest-column,
    .headline-column,
    .ad-column,
    .veto-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .latest-column .column-news-item {
        grid-template-columns: 90px minmax(0, 1fr) !important;
        min-width: 0 !important;
    }

    .latest-column .column-image {
        width: 90px !important;
        height: 68px !important;
    }

    .headline-column .popular-item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        min-width: 0 !important;
    }

    .read-more-item {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        min-width: 0 !important;
    }

    /* Kategori: satu kolom penuh pada HP walaupun mode desktop aktif */
    .category-list,
    .category-item,
    .category-image,
    .category-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .category-item {
        display: block !important;
        padding: 12px !important;
        overflow: hidden !important;
    }

    .category-image {
        margin: 0 0 12px 0 !important;
    }

    .category-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .category-info {
        padding: 0 !important;
    }

    .category-info h3,
    .category-info .article-excerpt {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .site-footer .footer-grid {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        grid-template-columns: 1fr !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --------------------------------------------------
   ARTICLE: paksa header memakai fondasi yang sama.
   Artikel memiliki CSS inline lama yang mendefinisikan
   .container/.main-nav secara global.
-------------------------------------------------- */
body.article-page .container {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.article-page .main-nav {
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
    border-bottom: 3px solid #e21b23 !important;
    background: #0b1f3a !important;
}

body.article-page .main-nav .nav-container {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (hover: none) and (pointer: coarse) {
    body.article-page .main-nav {
        min-height: 48px !important;
        height: 48px !important;
    }

    body.article-page .main-nav .nav-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}


/* ==================================================
   KABATA V5 - KUNCI LEBAR LAYOUT & FOTO
   Halaman kategori/artikel tidak boleh membuat
   viewport melebar hanya karena ukuran gambar/konten.
================================================== */

html, body {
    max-width: 100%;
    overflow-x: clip;
}

.container,
.main-content,
.main-content > .container,
.category-list,
.category-item,
.category-info,
.article-wrapper,
.article-wrapper > .container,
.article-box,
.article-content {
    box-sizing: border-box;
    min-width: 0;
}

.main-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.main-content > .container {
    width: min(92%, 1250px);
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

/* Jangan biarkan gambar menentukan lebar parent. */
img, video, iframe, svg {
    max-width: 100% !important;
}

/* Kategori desktop: gambar tetap 230px, teks mengambil sisa. */
.category-list {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.category-item {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 230px minmax(0, 1fr);
}

.category-image {
    width: 230px;
    max-width: 230px;
    min-width: 0;
}

.category-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.category-info {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Artikel: kotak dan foto tidak boleh melebihi container. */
.article-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.article-wrapper > .container {
    width: min(92%, 1250px);
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.article-box {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.article-image,
.article-image img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box;
}

.article-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.article-content img,
.article-content video,
.article-content iframe,
.article-content table {
    max-width: 100% !important;
    width: auto;
    height: auto !important;
}

.article-content table {
    display: block;
    overflow-x: auto;
}

/* Baca juga tidak boleh berubah menjadi gambar besar. */
.read-more-item {
    min-width: 0;
    grid-template-columns: 75px minmax(0, 1fr) !important;
}

.read-more-image,
.read-more-image img {
    width: 75px !important;
    max-width: 75px !important;
    min-width: 0 !important;
    height: auto !important;
}

.read-more-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Desktop mode pada perangkat touch: pakai satu fondasi lebar yang aman. */
@media (hover: none) and (pointer: coarse) {
    .main-content > .container,
    .article-wrapper > .container {
        width: calc(100% - 20px) !important;
        max-width: none !important;
    }

    .category-item {
        grid-template-columns: 1fr !important;
    }

    .category-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .read-more-item {
        grid-template-columns: 68px minmax(0, 1fr) !important;
    }

    .read-more-image,
    .read-more-image img {
        width: 68px !important;
        max-width: 68px !important;
    }

    .article-box {
        width: 100% !important;
        max-width: none !important;
        padding: 25px 15px !important;
    }
}

@media (max-width: 800px) {
    .main-content > .container,
    .article-wrapper > .container {
        width: calc(100% - 20px);
        max-width: none;
    }

    .category-item {
        grid-template-columns: 1fr;
    }

    .category-image {
        width: 100%;
        max-width: 100%;
    }
}
}

/* ==========================================================
   KABATA - MODE "SITUS DESKTOP" DI HP ANDROID
   Hanya aktif jika Chrome Android memakai Situs Desktop.
   HP normal dan laptop TIDAK terkena aturan ini.
========================================================== */
@media (min-width: 700px) {
    html.desktop-site-mode,
    html.desktop-site-mode body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Semua bidang utama kembali memakai lebar yang sama dan terpusat. */
    html.desktop-site-mode .container,
    html.desktop-site-mode .main-content,
    html.desktop-site-mode .main-nav .nav-container,
    html.desktop-site-mode .breaking-box {
        width: 92% !important;
        max-width: 1250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* HEADER */
    html.desktop-site-mode .top-bar {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 4% !important;
        width: 100% !important;
    }

    html.desktop-site-mode .social-media {
        gap: 12px !important;
    }

    html.desktop-site-mode .social-media a {
        font-size: 21px !important;
    }

    html.desktop-site-mode .top-logo {
        width: 180px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    html.desktop-site-mode .top-logo img {
        width: 140px !important;
    }

    html.desktop-site-mode .search-box {
        display: flex !important;
        margin-left: auto !important;
    }

    html.desktop-site-mode .search-box input {
        display: block !important;
        width: 135px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    html.desktop-site-mode .search-box button {
        width: 38px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    /* NAVBAR UTUH, TERPUSAT, TIDAK TERPUTUS */
    html.desktop-site-mode .main-nav {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        overflow: hidden !important;
    }

    html.desktop-site-mode .main-nav .nav-container {
        display: flex !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    html.desktop-site-mode .main-nav .nav-menu {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 44px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    html.desktop-site-mode .main-nav .nav-menu a {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 5px !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: 9px !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }

    /* BREAKING NEWS */
    html.desktop-site-mode .breaking-box {
        min-height: 36px !important;
        height: 36px !important;
    }

    html.desktop-site-mode .breaking-label {
        padding: 8px 12px !important;
        font-size: 10px !important;
    }

    html.desktop-site-mode .breaking-text,
    html.desktop-site-mode .breaking-ticker {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 11px !important;
    }

    html.desktop-site-mode .breaking-ticker a {
        font-size: 11px !important;
    }

    /* KONTEN UTAMA */
    html.desktop-site-mode .main-content {
        padding-top: 14px !important;
        width: 92% !important;
        max-width: 1250px !important;
    }

    /* IKLAN UTAMA TETAP BERGANTIAN */
    html.desktop-site-mode .ad-header {
        width: 100% !important;
        margin: 8px 0 16px !important;
    }

    html.desktop-site-mode .ad-box,
    html.desktop-site-mode .ad-slider {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html.desktop-site-mode .ad-slider {
        aspect-ratio: 3 / 1 !important;
        overflow: hidden !important;
    }

    html.desktop-site-mode .ad-slider .ad-slide {
        display: none !important;
    }

    html.desktop-site-mode .ad-slider .ad-slide.active {
        display: block !important;
    }

    html.desktop-site-mode .ad-slider .ad-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* BERITA UTAMA = LAYOUT DESKTOP */
    html.desktop-site-mode .featured-slider {
        width: 100% !important;
        min-height: 0 !important;
    }

    html.desktop-site-mode .featured-slide,
    html.desktop-site-mode .featured-slide.active {
        display: grid !important;
        grid-template-columns: 56% minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    html.desktop-site-mode .featured-image,
    html.desktop-site-mode .featured-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    html.desktop-site-mode .featured-info {
        padding: 6px 8px 10px 0 !important;
    }

    html.desktop-site-mode .featured-info h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    html.desktop-site-mode .article-excerpt {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    /* BERITA TERBARU | HEADLINE | IKLAN = 3 KOLOM SEJAJAR */
    html.desktop-site-mode .three-column-news {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 210px !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        align-items: start !important;
    }

    html.desktop-site-mode .three-column-news .news-column,
    html.desktop-site-mode .three-column-news .ad-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
    }

    html.desktop-site-mode .section-heading {
        margin-bottom: 10px !important;
    }

    html.desktop-site-mode .section-heading h2 {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    html.desktop-site-mode .latest-column .column-news-item {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }

    html.desktop-site-mode .latest-column .column-image {
        width: 72px !important;
        height: auto !important;
    }

    html.desktop-site-mode .latest-column .column-content h3 {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    html.desktop-site-mode .latest-column .article-category {
        font-size: 7px !important;
    }

    html.desktop-site-mode .latest-column .article-meta {
        font-size: 7px !important;
    }

    html.desktop-site-mode .headline-column .popular-item {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 7px 0 !important;
    }

    html.desktop-site-mode .headline-column .popular-number {
        font-size: 15px !important;
    }

    html.desktop-site-mode .headline-column .popular-info h3 {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    html.desktop-site-mode .headline-column .popular-info small {
        font-size: 7px !important;
    }

    /* IKLAN KEDUA DI SAMPING HEADLINE + BACA JUGA DI BAWAHNYA */
    html.desktop-site-mode .ad-column {
        display: block !important;
    }

    html.desktop-site-mode .vertical-ad-slider {
        width: 100% !important;
    }

    html.desktop-site-mode .vertical-ad-slide {
        width: 100% !important;
    }

    html.desktop-site-mode .vertical-ad-slide img,
    html.desktop-site-mode .vertical-ad-link img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    html.desktop-site-mode .read-more-box {
        width: 100% !important;
        margin-top: 12px !important;
        padding-top: 8px !important;
    }

    html.desktop-site-mode .read-more-heading {
        margin-bottom: 8px !important;
    }

    html.desktop-site-mode .read-more-heading h2 {
        font-size: 11px !important;
        padding: 6px 9px !important;
    }

    html.desktop-site-mode .read-more-item {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding-bottom: 7px !important;
        margin-bottom: 7px !important;
    }

    html.desktop-site-mode .read-more-image,
    html.desktop-site-mode .read-more-image img {
        width: 50px !important;
        max-width: 50px !important;
        height: auto !important;
    }

    html.desktop-site-mode .read-more-content .article-category {
        font-size: 6px !important;
    }

    html.desktop-site-mode .read-more-content h3 {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    /* FOOTER MODE DESKTOP */
    html.desktop-site-mode .site-footer {
        width: 100% !important;
        overflow: hidden !important;
    }

    html.desktop-site-mode .site-footer .footer-grid {
        width: 92% !important;
        max-width: 1080px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: 1.15fr 1fr 1fr 0.85fr !important;
        gap: 20px !important;
    }
}

/* ==========================================================
   KABATA v5 - HP ANDROID + SITUS DESKTOP
   Target: layout desktop seperti tampilan desktop yang diperkecil
   tanpa mengubah HP normal maupun laptop.
========================================================== */
@media (min-width: 700px) {
    html.desktop-site-mode body {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    /* Kanvas desktop tunggal: semua bagian memakai lebar dan pusat yang sama. */
    html.desktop-site-mode .top-bar,
    html.desktop-site-mode .main-nav .nav-container,
    html.desktop-site-mode .breaking-box,
    html.desktop-site-mode .main-content {
        width: min(92vw, 1250px) !important;
        max-width: 1250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* NAVBAR: jangan setiap menu memenuhi kolom secara paksa.
       Menu mengikuti ukuran teks seperti layout desktop asli. */
    html.desktop-site-mode .main-nav .nav-container {
        overflow: hidden !important;
    }

    html.desktop-site-mode .main-nav .nav-menu {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    html.desktop-site-mode .main-nav .nav-menu a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: 0 9px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    /* Pastikan seluruh area isi benar-benar satu kanvas desktop. */
    html.desktop-site-mode .main-content > .container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ======================================================
       3 KOLOM: BERITA TERBARU | HEADLINE | IKLAN + BACA JUGA
       Kolom iklan wajib berada di sebelah kanan Headline.
    ====================================================== */
    html.desktop-site-mode .three-column-news {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 210px) !important;
        grid-auto-flow: row !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        align-items: start !important;
    }

    html.desktop-site-mode .three-column-news > .latest-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    html.desktop-site-mode .three-column-news > .headline-column {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    html.desktop-site-mode .three-column-news > .ad-column {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html.desktop-site-mode .ad-column .vertical-ad-slide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html.desktop-site-mode .ad-column .vertical-ad-slide img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    html.desktop-site-mode .ad-column .read-more-box {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding-top: 8px !important;
        box-sizing: border-box !important;
    }

    html.desktop-site-mode .ad-column .read-more-item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html.desktop-site-mode .ad-column .read-more-image,
    html.desktop-site-mode .ad-column .read-more-image img {
        width: 48px !important;
        max-width: 48px !important;
    }
}

/* ==========================================================
   KABATA v6 - FIX SEBENARNYA UNTUK CHROME "SITUS DESKTOP"
   ----------------------------------------------------------------
   Chrome Android dapat mengubah User-Agent menjadi desktop ketika
   "Situs desktop" dicentang. Karena itu class desktop-site-mode
   ditentukan oleh JavaScript berdasarkan kemampuan touch + viewport.

   ATURAN INI HANYA AKTIF SAAT class desktop-site-mode ADA.
   HP normal dan laptop tidak diubah.
========================================================== */

html.desktop-site-mode body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* Satu kanvas yang sama untuk header, navbar, breaking news, dan isi. */
html.desktop-site-mode .top-bar,
html.desktop-site-mode .main-nav .nav-container,
html.desktop-site-mode .breaking-box,
html.desktop-site-mode .main-content {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* NAVBAR: semua menu berada di tengah dan tidak berkumpul di kiri. */
html.desktop-site-mode .main-nav {
    width: 100% !important;
    overflow: hidden !important;
}

html.desktop-site-mode .main-nav .nav-container {
    display: flex !important;
    justify-content: center !important;
    overflow: hidden !important;
}

html.desktop-site-mode .main-nav .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html.desktop-site-mode .main-nav .nav-menu a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 8.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Konten benar-benar terpusat. */
html.desktop-site-mode .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* BERITA UTAMA tetap dua kolom seperti desktop. */
html.desktop-site-mode .featured-slide,
html.desktop-site-mode .featured-slide.active {
    display: grid !important;
    grid-template-columns: 56% minmax(0, 1fr) !important;
    gap: 12px !important;
}

/* TIGA KOLOM WAJIB SEJAJAR:
   Berita Terbaru | Headline | Iklan + Baca Juga */
html.desktop-site-mode .three-column-news {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 210px !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: start !important;
}

html.desktop-site-mode .three-column-news > .latest-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html.desktop-site-mode .three-column-news > .headline-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html.desktop-site-mode .three-column-news > .ad-column {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Iklan kedua berada tepat di kolom kanan Headline. */
html.desktop-site-mode .ad-column .vertical-ad-slide,
html.desktop-site-mode .ad-column .vertical-ad-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
}

/* Baca Juga tetap di bawah iklan dalam kolom yang sama. */
html.desktop-site-mode .ad-column .read-more-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
}

html.desktop-site-mode .ad-column .read-more-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px !important;
}

html.desktop-site-mode .ad-column .read-more-image,
html.desktop-site-mode .ad-column .read-more-image img {
    width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
}

/* Iklan utama tetap berganti. Jangan biarkan CSS mobile mematikannya. */
html.desktop-site-mode .ad-slider .ad-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

html.desktop-site-mode .ad-slider .ad-slide[style*="display: block"],
html.desktop-site-mode .ad-slider .ad-slide.active {
    display: block !important;
}

/* ==========================================================
   KABATA v7 - PERBAIKAN AKHIR MODE "SITUS DESKTOP" DI HP
   Fokus hanya pada mode desktop-site-mode.
   HP normal dan laptop tidak disentuh.
========================================================== */

/* 1) BERITA UTAMA: hanya SATU slide yang tampil pada satu waktu.
   JavaScript sudah menambah/menghapus class .active. */
html.desktop-site-mode .featured-slider {
    position: relative !important;
    overflow: hidden !important;
}

html.desktop-site-mode .featured-slider .featured-slide {
    display: none !important;
    width: 100% !important;
    grid-template-columns: 56% minmax(0, 1fr) !important;
    gap: 12px !important;
}

html.desktop-site-mode .featured-slider .featured-slide.active {
    display: grid !important;
}

/* 2) IKLAN KEDUA: hanya SATU gambar tampil, lalu JavaScript
   menggantinya setiap 4 detik. Jangan tampilkan berjajar. */
html.desktop-site-mode .ad-column .vertical-ad-slide {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
}

html.desktop-site-mode .ad-column .vertical-ad-slide.active {
    display: block !important;
}

html.desktop-site-mode .ad-column .vertical-ad-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 3) BACA JUGA tetap berada di bawah SATU iklan aktif. */
html.desktop-site-mode .ad-column .read-more-box {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* 4) KATEGORI: gunakan kanvas desktop yang sama seperti beranda. */
html.desktop-site-mode.category-page,
html.desktop-site-mode body {
    overflow-x: hidden !important;
}

html.desktop-site-mode .category-list {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

html.desktop-site-mode .category-item {
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html.desktop-site-mode .category-image {
    width: 230px !important;
    max-width: 230px !important;
    min-width: 0 !important;
}

html.desktop-site-mode .category-info {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 5px 5px 5px 0 !important;
}

html.desktop-site-mode .category-info h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
}

/* 5) Pastikan semua halaman yang memakai header memakai
   kanvas yang sama dan berada di tengah. */
html.desktop-site-mode .top-bar,
html.desktop-site-mode .main-nav .nav-container,
html.desktop-site-mode .breaking-box,
html.desktop-site-mode .main-content {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* KABATA v8: mode Situs Desktop - Berita Utama satu slide saja. */
html.desktop-site-mode .featured-slider { position: relative !important; overflow: hidden !important; width: 100% !important; }
html.desktop-site-mode .featured-slider .featured-slide { display: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: 56% minmax(0,1fr) !important; gap: 12px !important; box-sizing: border-box !important; float: none !important; position: relative !important; left: auto !important; transform: none !important; }
html.desktop-site-mode .featured-slider .featured-slide.active { display: grid !important; }
html.desktop-site-mode .featured-slider .featured-image, html.desktop-site-mode .featured-slider .featured-info { min-width: 0 !important; max-width: 100% !important; }


/* ==========================================================
   KABATA v9 - PENYEMPURNAAN ARTIKEL & BREAKING NEWS
   Fokus:
   1. Foto artikel benar-benar terpusat.
   2. Jarak judul -> meta -> foto -> caption -> isi lebih nyaman.
   3. BREAKING NEWS selalu rata tengah secara vertikal.
   Tidak mengubah slider, navbar, atau layout Beranda.
========================================================== */

/* BREAKING NEWS: label dan teks selalu berada di tengah secara vertikal. */
.breaking-box {
    display: flex !important;
    align-items: center !important;
}

.breaking-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

.breaking-text {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}

.breaking-ticker {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
}

.breaking-ticker a {
    line-height: 1.2 !important;
}

/* ARTIKEL: beri ruang yang jelas antara setiap bagian. */
body.article-page .article-box {
    text-align: left !important;
}

body.article-page .article-box .back {
    display: inline-block !important;
    margin-bottom: 14px !important;
}

body.article-page .article-box > .category {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

body.article-page .article-title {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    line-height: 1.2 !important;
}

body.article-page .meta {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    line-height: 1.6 !important;
}

/* Foto tidak boleh terdorong ke kanan oleh aturan lain. */
body.article-page .article-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.article-page .article-image > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    position: static !important;
    box-sizing: border-box !important;
}

body.article-page .article-caption {
    display: block !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

body.article-page .article-content {
    margin-top: 24px !important;
    padding-top: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

body.article-page .article-content p {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Mode Situs Desktop di HP: tetap gunakan pusat kanvas yang sudah benar. */
html.desktop-site-mode body.article-page .article-wrapper > .container {
    margin-left: auto !important;
    margin-right: auto !important;
}

html.desktop-site-mode body.article-page .article-box {
    margin-left: auto !important;
    margin-right: auto !important;
}

html.desktop-site-mode body.article-page .article-image,
html.desktop-site-mode body.article-page .article-image > img {
    margin-left: auto !important;
    margin-right: auto !important;
}

html.desktop-site-mode .breaking-box {
    align-items: center !important;
}

html.desktop-site-mode .breaking-label,
html.desktop-site-mode .breaking-text,
html.desktop-site-mode .breaking-ticker {
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================
   KABATA v10 - FINAL ARTIKEL + POSISI VERTIKAL BREAKING NEWS
   - Tidak mengubah Beranda, kategori, navbar, atau slider.
========================================================== */

/* Teks ticker yang position:absolute benar-benar di tengah tinggi bar. */
.breaking-ticker a,
.breaking-text .breaking-ticker a {
    top: 50% !important;
    margin-top: -9px !important;
    line-height: 18px !important;
}

/* Ruang artikel dibuat senyaman tampilan laptop. */
body.article-page .article-title {
    margin-bottom: 18px !important;
}
body.article-page .meta {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    line-height: 1.65 !important;
}
body.article-page .article-caption {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    line-height: 1.55 !important;
}
body.article-page .article-content {
    margin-top: 32px !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}
body.article-page .article-content p {
    margin: 0 0 9px !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* HP normal: jarak tetap lega, tetapi tidak berlebihan. */
@media (max-width: 699px) {
    body.article-page .article-title { margin-bottom: 16px !important; }
    body.article-page .meta { margin-bottom: 24px !important; line-height: 1.6 !important; }
    body.article-page .article-caption { margin-top: 11px !important; line-height: 1.5 !important; }
    body.article-page .article-content { margin-top: 28px !important; font-family: Arial, sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; }
    body.article-page .article-content p,
    body.article-page .article-content div {
        margin-top: 0 !important;
        margin-bottom: 9px !important;
        font-family: Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* HP + Situs Desktop: foto diberi ruang kiri/kanan yang sama agar pusat visualnya tepat. */
html.desktop-site-mode body.article-page .article-wrapper > .container {
    width: 92% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html.desktop-site-mode body.article-page .article-box {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
html.desktop-site-mode body.article-page .article-image {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
}
html.desktop-site-mode body.article-page .article-image > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    position: static !important;
    transform: none !important;
}
html.desktop-site-mode body.article-page .article-caption {
    width: 100% !important;
    box-sizing: border-box !important;
}
html.desktop-site-mode body.article-page .article-title {
    margin-bottom: 18px !important;
}
html.desktop-site-mode body.article-page .meta {
    margin-bottom: 28px !important;
}
html.desktop-site-mode body.article-page .article-content {
    margin-top: 32px !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Isi berita: paragraf dan daftar mengikuti format editor admin. */
body.article-page .article-content ul,
body.article-page .article-content ol {
     margin: 0 0 9px !important;
     padding-left: 25px !important;
     font-family: Arial, sans-serif !important;
     font-size: 16px !important;
     line-height: 1.5 !important;
     list-style-position: outside !important;
}

body.article-page .article-content li {
     margin: 0 !important;
     padding: 0 !important;
     font-family: Arial, sans-serif !important;
     font-size: 16px !important;
     line-height: 1.5 !important;
}

body.article-page .article-content h2 {
     font-family: Arial, sans-serif !important;
     font-size: 18px !important;
     line-height: 1.4 !important;
     margin: 18px 0 8px !important;
}

body.article-page .article-content blockquote {
     font-family: Arial, sans-serif !important;
     font-size: 16px !important;
     line-height: 1.5 !important;
     margin: 12px 0 !important;
     padding: 8px 18px !important;
}

/* ==========================================================
   KABATA v11 - CAPTION & MENU AKTIF
   Hanya mengatur caption foto dan warna menu aktif.
========================================================== */

/* Caption foto: lebih kecil dan miring. */
html body.article-page .article-caption {
    font-size: 12px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #666666 !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
}

/* Menu aktif: tetap navy seperti navbar, bukan merah. */
html body .main-nav a.active,
html body .main-nav a.active:visited,
html body .main-nav a.active:hover,
html body .main-nav a.active:focus {
    background: #061a33 !important;
    color: #ffffff !important;
}


/* ==========================================================
   KABATA v18 - SOSIAL MEDIA DIPINDAHKAN KE FOOTER
   - Ikon sosial media dihapus dari area atas.
   - Ikon sosial media tampil terpusat di footer pada semua perangkat.
   - Tidak mengubah Sticky Header, navbar, slider, atau konten lainnya.
========================================================== */

/* Pastikan tidak ada ruang/elemen sosial media yang tersisa di top bar. */
.top-bar > .social-media,
.top-bar-inner > .social-media {
    display: none !important;
}

/* Footer social media: satu baris, tepat di tengah. */
.site-footer .footer-social {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    margin: 4px auto 0 !important;
    padding: 0 20px 18px !important;
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
}

.site-footer .footer-social a {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    transition: opacity .2s ease, transform .2s ease !important;
}

.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus {
    color: #ffffff !important;
    opacity: .8 !important;
    transform: translateY(-1px) !important;
}

/* Footer dibuat 3 kolom utama agar Logo, Redaksi, Kontak seimbang. */
.site-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    justify-items: center !important;
}

.site-footer .footer-brand,
.site-footer .footer-column {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
}

.site-footer .footer-contact {
    width: 100% !important;
}

.site-footer .footer-contact p {
    justify-content: center !important;
}

/* Copyright tetap satu baris dan di tengah. */
.site-footer .footer-bottom {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

/* HP: tetap rapi dan terpusat. */
@media (max-width: 700px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }

    .site-footer .footer-social {
        gap: 18px !important;
        padding-bottom: 16px !important;
    }
}

/* HP + Situs Desktop: footer tetap tiga kolom seperti desktop. */
@media (min-width: 700px) {
    html.desktop-site-mode .site-footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        justify-items: center !important;
    }

    html.desktop-site-mode .site-footer .footer-social {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================
   KABATA v19 - PERBAIKAN TERBATAS
   1. Sticky global untuk Top Bar + Navbar + Breaking News.
   2. Bentuk foto berita mengikuti sudut melengkung Baca Juga.
   Tidak mengubah layout, slider, ukuran, warna, atau footer.
========================================================== */

/* Header atas, navbar, dan breaking news menempel sebagai SATU kesatuan. */
.kabata-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
}

/* Pastikan elemen di dalam header tidak mempunyai lapisan yang menimpa. */
.kabata-sticky-header .top-bar,
.kabata-sticky-header .main-nav,
.kabata-sticky-header .breaking-wrapper {
    position: relative !important;
}

/* Bentuk foto berita disamakan dengan gaya gambar Baca Juga. */
.featured-image,
.featured-image img,
.latest-column .column-image,
.latest-column .column-image img,
.veto-column .column-image,
.veto-column .column-image img,
.category-image,
.category-image img,
.article-image,
.article-image > img,
.three-column-news .column-image,
.three-column-news .column-image img {
    border-radius: 8px !important;
}

/* Bingkai gambar tetap rapi mengikuti sudut gambar. */
.featured-image,
.latest-column .column-image,
.veto-column .column-image,
.category-image,
.article-image,
.three-column-news .column-image {
    overflow: hidden !important;
}

/* ==========================================================
   KABATA v20 - STICKY HEADER AKTIF
   Hanya mengaktifkan kembali header sticky tanpa mengubah
   desain, slider, navbar, gambar, atau footer yang sudah benar.
========================================================== */
.kabata-sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
}

/* Header tetap satu kesatuan saat halaman di-scroll. */
.kabata-sticky-header .top-bar,
.kabata-sticky-header .main-nav,
.kabata-sticky-header .breaking-wrapper {
    position: relative !important;
}

/* KABATA - PENYESUAIAN POSISI LOGO TENGAH
   Hanya menurunkan logo sedikit agar lebih tepat di tengah.
   Tidak mengubah elemen lain.
*/
.top-logo {
    top: calc(50% + 5px) !important;
}


/* ==========================================================
   KABATA HEADER FIX 2026-09-01
   RULE INI HARUS BERADA PALING AKHIR STYLE.CSS
========================================================== */

.kabata-sticky-header {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.kabata-sticky-header > .top-bar,
.kabata-sticky-header > .main-nav,
.kabata-sticky-header > .breaking-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.kabata-sticky-header > .breaking-wrapper {
    background: #ffffff !important;
}

.kabata-sticky-header > .breaking-wrapper > .breaking-box,
.kabata-sticky-header .breaking-wrapper .container.breaking-box {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

.kabata-sticky-header .breaking-text {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.kabata-sticky-header .breaking-label {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

html.desktop-site-mode .kabata-sticky-header .breaking-wrapper .container.breaking-box {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   KABATA - BREAKING NEWS LAPTOP
   Geser label merah sedikit ke kiri.
   Hanya layar laptop/desktop; HP tidak disentuh.
========================================================== */

/* ==========================================================
   KABATA - SEARCH HP NORMAL (SITUS DESKTOP OFF)
   Masalah yang diperbaiki:
   CSS touch sebelumnya menyembunyikan input pencarian
   dengan display:none. Di HP normal input dibuat tampil
   kembali dengan ukuran kecil agar utuh dan bisa disentuh.

   HP Situs Desktop dan laptop TIDAK diubah.
========================================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 699px) {
    html:not(.desktop-site-mode) .top-bar {
        position: relative !important;
        overflow: visible !important;
    }

    html:not(.desktop-site-mode) .search-box {
        display: flex !important;
        align-items: center !important;
        width: 125px !important;
        max-width: 125px !important;
        min-width: 125px !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 100 !important;
    }

    html:not(.desktop-site-mode) .search-box input {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        height: 32px !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    html:not(.desktop-site-mode) .search-box input::placeholder {
        font-size: 9px !important;
    }

    html:not(.desktop-site-mode) .search-box button {
        display: flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 32px !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 101 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

/* ==========================================================
   KABATA - KATEGORI MENGIKUTI KANVAS HEADER PUTIH
   Hanya untuk mode "Situs Desktop" di HP.
   Header putih TIDAK diubah.
   ========================================================== */
@media (min-width: 700px) {
    html.desktop-site-mode body.category-page .category-list {
        width: min(92vw, 1250px) !important;
        max-width: 1250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html.desktop-site-mode body.category-page .category-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}