/*
 * Tunjuk.id — Tailwind-compatible theme
 * Bootstrap CSS diganti Tailwind CDN; file ini mencakup:
 *  - CSS variables (design tokens)
 *  - Bootstrap JS compatibility layer (collapse, dropdown, modal, navbar-nav)
 *  - Semua custom component CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
    --tj-primary: #f57c00;
    --tj-primary-dark: #e65100;
    --tj-primary-light: #fb8c00;
    --tj-nav: #2c2c2c;
    --tj-side-head: #2196f3;
    --tj-border: rgba(0, 0, 0, .1);
    --tj-body-bg: #f8f8f8;
    --tj-card-bg: #fff;
    --tj-text: #212529;
    --tj-text-muted: #6c757d;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background: var(--tj-body-bg);
    color: var(--tj-text);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 0;
}

a { color: var(--tj-primary); }
img { max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }

/* ====================================================
   BOOTSTRAP JS COMPATIBILITY — Collapse (navbar toggle)
   Bootstrap JS adds/removes .show on #mainNavbar
   ==================================================== */
.navbar-collapse {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-bottom: .5rem;
}
.navbar-collapse.show {
    display: flex;
}
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex: 1;
        padding-bottom: 0;
    }
}

/* ====================================================
   BOOTSTRAP JS COMPATIBILITY — Dropdown
   Bootstrap JS adds/removes .show on .dropdown-menu
   ==================================================== */
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    padding: .3rem 0;
    margin: 0;
    list-style: none;
    background: var(--tj-card-bg);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.dropdown-menu.show {
    display: block;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: .4rem 1rem;
    font-size: .875rem;
    font-family: 'Roboto', sans-serif;
    color: var(--tj-text);
    text-decoration: none;
    background: none;
    border: none;
    white-space: nowrap;
    transition: background .15s;
}
.dropdown-item:hover,
.dropdown-item.active {
    background: var(--tj-primary);
    color: #fff;
}
.dropdown-divider {
    height: 0;
    margin: .25rem 0;
    border: none;
    border-top: 1px solid var(--tj-border);
}
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}
/* Mobile (navbar collapsed): submenu tampil inline di bawah item, bukan overlay */
@media (max-width: 991.98px) {
    .dropdown-menu {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        min-width: 0;
    }
    .dropdown-item {
        color: rgba(255, 255, 255, .7);
    }
    .dropdown-item:hover,
    .dropdown-item.active {
        background: transparent;
        color: var(--tj-primary-light);
    }
    .dropdown-divider {
        border-color: rgba(255, 255, 255, .15);
    }
}

/* ====================================================
   BOOTSTRAP JS COMPATIBILITY — Modal
   Bootstrap JS sets style.display='block' + adds .show
   Bootstrap JS appends .modal-backdrop to body
   ==================================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1055;
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    background: rgba(0, 0, 0, .5);
}
.modal-dialog {
    position: relative;
    width: auto;
    max-width: 500px;
    margin: 1.75rem auto;
    padding: 0 1rem;
}
.modal-content {
    position: relative;
    background: var(--tj-card-bg);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem 1rem .5rem;
}
.modal-body {
    padding: 0 1.5rem 1.5rem;
}
.btn-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: .5;
    padding: .25rem;
    color: inherit;
}
.btn-close:hover { opacity: 1; }
.btn-close::before { content: '✕'; }

/* ====================================================
   NAVBAR NAV (generated by nav_helper.php)
   Classes: navbar-nav, nav-item, nav-link, etc.
   ==================================================== */
.navbar-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 992px) {
    .navbar-nav {
        flex-direction: row;
        flex: 1;
        align-items: center;
    }
}
.nav-item {
    position: relative;
}
.nav-link {
    display: block;
    padding: .5rem .9rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .95rem;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
    color: var(--tj-primary-light);
}
.nav-link.dropdown-toggle::after {
    display: inline-block;
    content: '';
    margin-left: .35em;
    vertical-align: .08em;
    border-top: .32em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

/* Saat mode pencarian aktif: sembunyikan menu */
#mainNavbar.searching .navbar-nav {
    display: none !important;
}
/* Bootstrap utility classes yang dipakai nav_helper */
.me-auto { margin-right: auto; }
.mb-2 { margin-bottom: .5rem; }
@media (min-width: 992px) { .mb-lg-0 { margin-bottom: 0 !important; } }

/* ====================================================
   FORM CONTROL (search input di navbar)
   ==================================================== */
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: .95rem;
    font-family: 'Roboto', sans-serif;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    color: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: rgba(255, 255, 255, .55); }
.form-control:focus {
    background: rgba(255, 255, 255, .2);
    border-color: var(--tj-primary-light);
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .2);
}
/* Comment textarea override */
.comment-textarea.form-control {
    background: #fff;
    border-color: rgba(245, 124, 0, .28);
    color: var(--tj-text);
}
.comment-textarea.form-control::placeholder { color: #aaa; }
.comment-textarea.form-control:focus {
    background: #fff;
    border-color: var(--tj-primary);
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .14);
}

/* ====================================================
   WAKTU / METADATA
   ==================================================== */
.time {
    line-height: 1.4;
    font-weight: 500;
    font-size: 85%;
    margin: 0;
    opacity: .7;
}

/* ====================================================
   OVERLAY CARD (topnews) — caption gradient
   ==================================================== */
.overlay-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    transition: box-shadow .3s ease, transform .3s ease;
}
.overlay-card:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}
.overlay-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}
.overlay-card:hover img {
    transform: scale(1.06);
}
/* gradient gelap dari bawah agar judul selalu terbaca */
.overlay-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, 0) 62%);
    z-index: 1;
    pointer-events: none;
}
.overlay-card .overlay-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px;
    background: transparent;
    color: #fff;
}
.overlay-card .overlay-caption h4 {
    font-weight: 600;
    font-size: 1em;
    line-height: 1.32;
    margin: 0 0 5px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overlay-card .overlay-caption .time {
    color: #fff;
    opacity: .9;
}

/* topnews: 1 besar (8/12, 370px) + 2 bertumpuk (4/12) */
.topnews-big img { height: 370px; }
.topnews-big .overlay-caption { padding: 18px 16px; }
.topnews-big .overlay-caption h4 { font-size: 1.5rem; font-weight: 700; }
.topnews-small img { height: 183px; }
.topnews-small .overlay-caption { padding: 12px; }
.topnews-small .overlay-caption h4 { font-size: .98rem; -webkit-line-clamp: 2; }

@media (max-width: 767.98px) {
    .topnews-big img { height: 240px; }
    .topnews-big .overlay-caption h4 { font-size: 1.15rem; }
}

/* ====================================================
   HEADLINE CAROUSEL (Swiper) — kartu horizontal
   ==================================================== */
.carousel.swiper-container {
    overflow: hidden;
    position: relative;
    padding: 10px 0 16px;
}
/* fade tepi kiri/kanan sebagai isyarat masih ada slide lain */
.carousel.swiper-container::before,
.carousel.swiper-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 2;
    pointer-events: none;
}
.carousel.swiper-container::before {
    left: 0;
    background: linear-gradient(to right, var(--tj-body), rgba(248, 248, 248, 0));
}
.carousel.swiper-container::after {
    right: 0;
    background: linear-gradient(to left, var(--tj-body), rgba(248, 248, 248, 0));
}
.carousel .swiper-slide {
    width: 280px;
    height: auto;
}
.carousel-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--tj-text);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.carousel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}
.carousel-card img {
    width: 84px;
    min-width: 84px;
    height: 84px;
    object-fit: cover;
}
.carousel-card .carousel-card-body {
    padding: 8px 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carousel-card .carousel-card-body h4 {
    font-weight: 600;
    font-size: .85rem;
    margin: 0 0 4px 0;
    line-height: 1.3;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.carousel-card:hover .carousel-card-body h4 { color: var(--tj-primary); }
.carousel .swiper-button-next,
.carousel .swiper-button-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: #fff;
    color: var(--tj-primary);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    --swiper-navigation-size: 16px;
    z-index: 10;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* gambar panah sendiri (SVG) — tidak bergantung font bawaan Swiper yang hilang.
   pakai mask + currentColor agar warna ikut berubah saat hover */
.carousel .swiper-button-next::after,
.carousel .swiper-button-prev::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}
.carousel .swiper-button-prev::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}
.carousel .swiper-button-next::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}
.carousel .swiper-button-next:hover,
.carousel .swiper-button-prev:hover {
    background: var(--tj-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 124, 0, .4);
    transform: scale(1.08);
}
.carousel .swiper-button-next { right: 6px; }
.carousel .swiper-button-prev { left: 6px; }
/* di mobile cukup geser jari, sembunyikan panah */
@media (max-width: 767.98px) {
    .carousel .swiper-button-next,
    .carousel .swiper-button-prev { display: none; }
}

/* ====================================================
   TOPIC NEWS LIST (sidebar)
   ==================================================== */
.topic-list {
    counter-reset: topic;
    list-style: none;
    padding: 0;
    margin: 0;
}
.topic-list li {
    border-bottom: 1px solid var(--tj-border);
}
.topic-list li:last-child { border-bottom: none; }
.topic-list li a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .9rem;
    text-decoration: none;
    color: inherit;
    transition: background .2s;
}
.topic-list li a:hover { background: rgba(245, 124, 0, .05); }
.topic-list li a:hover .topic-title { color: var(--tj-primary-dark); }
.topic-list .topic-num {
    counter-increment: topic;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    color: var(--tj-primary);
    background: rgba(245, 124, 0, .12);
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topic-list .topic-num::before { content: counter(topic); }
.topic-list .topic-title {
    font-weight: 500;
    font-size: .88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

/* ====================================================
   NEWS CARDS — kartu vertikal home (3 kolom, gambar atas)
   ==================================================== */
.news-home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}
@media (min-width: 768px) {
    .news-home-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }
}

.news-card {
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .28s ease, box-shadow .28s ease;
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .13);
}
.news-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--tj-text);
}
.news-card-thumb {
    overflow: hidden;
}
.news-card-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.news-card:hover .news-card-img {
    transform: scale(1.08);
}
.news-card-body {
    padding: .7rem .8rem .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-title {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.4;
    margin: 0 0 6px;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card a:hover .news-card-title { color: var(--tj-primary); }
.news-card .time { margin-top: auto; }

/* ====================================================
   NEWS LIST GRID — item horizontal (kategori/topik/cari)
   ==================================================== */
.news-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
@media (min-width: 768px) {
    .news-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
/* Item featured (berita pertama, gambar besar) spans full width */
.news-list-featured {
    grid-column: 1 / -1;
}

.news-list-panel {
    padding: 0;
}

.news-empty {
    padding: 1.1rem 1.3rem;
    background: #fff;
    color: var(--tj-text-muted);
    border: 1px dashed rgba(0, 0, 0, .14);
    border-radius: 12px;
    margin-top: .5rem;
    text-align: center;
}

/* ====================================================
   HORIZONTAL NEWS ITEM — thumbnail kiri + teks kanan
   ==================================================== */
.news-hitem {
    display: flex;
    align-items: stretch;
    min-height: 96px;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    padding-right: .9rem;
    height: 100%;
    text-decoration: none;
    color: var(--tj-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.news-hitem:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .12);
}
.hitem-thumb {
    width: 118px;
    min-width: 118px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: .9rem;
    align-self: stretch;
}
.news-hitem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.news-hitem:hover img {
    transform: scale(1.08);
}
.news-hitem .py-2 {
    padding-top: .6rem;
    padding-bottom: .6rem;
    align-self: center;
    min-width: 0;
}
.news-hitem h4 {
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.4;
    margin: 0 0 5px 0;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-hitem:hover h4 {
    color: var(--tj-primary);
}

/* berita pertama (featured): thumbnail besar, judul besar */
.news-hitem-featured {
    min-height: 210px;
}
.news-hitem-featured .hitem-thumb {
    width: 260px;
    min-width: 260px;
}
.news-hitem-featured h4 {
    font-size: 1.6rem;
    line-height: 1.25;
    -webkit-line-clamp: 3;
}
@media (max-width: 767.98px) {
    .news-hitem-featured {
        min-height: 120px;
    }
    .news-hitem-featured .hitem-thumb {
        width: 120px;
        min-width: 120px;
    }
    .news-hitem-featured h4 {
        font-size: 1.1rem;
        -webkit-line-clamp: 3;
    }
}

/* Iklan di sela daftar */
.news-list-panel ins.adsbygoogle {
    border: 1px solid var(--tj-border);
    border-radius: 2px;
    height: 80px;
}

/* ====================================================
   "LIHAT SELEBIHNYA" BUTTON
   ==================================================== */
.more-news a,
a.more-news,
button.more-news {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin: 8px auto;
    padding: .6rem 1.8rem;
    text-align: center;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tj-primary);
    background: #fff;
    border: 1.5px solid var(--tj-primary);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}
.more-news a:hover, a.more-news:hover, button.more-news:hover {
    color: #fff;
    background: var(--tj-primary);
    box-shadow: 0 6px 16px rgba(245, 124, 0, .3);
    transform: translateY(-1px);
}

/* ====================================================
   SIDEBAR PANEL
   ==================================================== */
.side-panel {
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
    overflow: hidden;
    background: #fff;
}
.side-panel .side-head {
    background: #fff;
    color: var(--tj-nav);
    border-bottom: 1px solid var(--tj-border);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.side-head-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    background: rgba(33, 150, 243, .15);
    color: var(--tj-side-head);
}
.side-head-icon.icon-fire {
    background: rgba(245, 124, 0, .15);
    color: var(--tj-primary);
}

/* ====================================================
   TRENDING LIST (sidebar)
   ==================================================== */
.trending-list { padding: .2rem 0; }
.trending-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .9rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--tj-border);
    transition: background .2s;
}
.trending-item:last-child { border-bottom: none; }
.trending-item:hover { background: rgba(245, 124, 0, .04); }
.trending-item:hover .trending-title { color: var(--tj-primary-dark); }
.trending-thumb {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.trending-info { flex: 1; min-width: 0; }
.trending-title {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tj-nav);
    transition: color .2s;
    margin-bottom: 4px;
}
.trending-date {
    font-size: .78rem;
    color: var(--tj-primary);
    font-weight: 500;
}
.side-more {
    border-top: 1px solid var(--tj-border);
    padding: .55rem 1rem;
    text-align: center;
}
.side-more a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tj-primary);
    transition: color .2s;
}
.side-more a:hover { color: var(--tj-primary-dark); }

.side-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.side-panel .side-date {
    color: var(--tj-primary);
    font-size: .78rem;
    font-weight: 500;
}

/* ====================================================
   HALAMAN DETAIL
   ==================================================== */
.detail-article {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.detail-header { padding: 1.4rem 1.5rem .9rem; }
.detail-title {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--tj-text);
    margin-bottom: .7rem;
}
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--tj-text-muted);
    margin-bottom: .85rem;
}
.detail-source-badge {
    display: inline-flex;
    align-items: center;
    background: var(--tj-primary);
    color: #fff;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.detail-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .4;
    flex-shrink: 0;
    display: inline-block;
}
.detail-share-top {
    border-top: 1px solid var(--tj-border);
    padding-top: .65rem;
}
.detail-img-wrap {
    width: 100%;
    overflow: hidden;
    max-height: 440px;
}
.detail-img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}
.detail-body { padding: 1.25rem 1.5rem 1.5rem; }
.detail-share-bottom {
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--tj-border);
}
.detail-related-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tj-text-muted);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}
.detail-related-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--tj-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Related news grid */
.detail-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
@media (min-width: 768px) {
    .detail-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .detail-title { font-size: 1.25rem; }
    .detail-header { padding: 1rem 1rem .75rem; }
    .detail-body { padding: 1rem 1rem 1.25rem; }
    .detail-img, .detail-img-wrap { max-height: 220px; }
    .detail-img { height: 220px; }
}
.news-content img { max-width: 100%; height: auto; }
/* Prose resets inside article body (Tailwind preflight removes default margins/sizes) */
.news-content p { margin-bottom: .75rem; }
.news-content h1 { font-size: 1.8rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.news-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.news-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .5rem; }
.news-content h4 { font-size: 1.1rem; font-weight: 600; margin: .85rem 0 .4rem; }
.news-content ul, .news-content ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.news-content ul { list-style: disc; }
.news-content ol { list-style: decimal; }
.news-content li { margin-bottom: .25rem; }
.news-content blockquote { border-left: 3px solid var(--tj-primary); padding-left: 1rem; margin: 1rem 0; color: var(--tj-text-muted); }
.news-content strong { font-weight: 700; }
.news-content a { color: var(--tj-primary); text-decoration: underline; }

/* ====================================================
   KOMENTAR
   ==================================================== */
.comment-section {
    padding-top: 1.5rem;
    margin-top: .5rem;
    border-top: 1px solid var(--tj-border);
}
.comment-list-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tj-text);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--tj-primary);
}
.comment-list-head i { color: var(--tj-primary); }
.comment-form-wrap {
    background: rgba(245, 124, 0, .04);
    border: 1px solid rgba(245, 124, 0, .2);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
}
.comment-form-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tj-primary);
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.comment-user-info {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--tj-text-muted);
    background: #fff;
    border: 1px solid var(--tj-border);
    border-radius: 8px;
    padding: .35rem .65rem;
    margin-bottom: .7rem;
}
.comment-user-info strong { color: var(--tj-text); }
.comment-user-info a {
    color: var(--tj-primary);
    font-size: .78rem;
    margin-left: auto;
    text-decoration: none;
}
.comment-user-info a:hover { text-decoration: underline; }
.comment-input-wrap {
    position: relative;
    margin-bottom: .5rem;
}
.comment-textarea {
    padding-right: 2.8rem !important;
    border-radius: 10px !important;
    resize: vertical;
    font-size: .92rem;
}
.comment-emoji-btn {
    position: absolute;
    right: .55rem;
    bottom: .5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s, transform .15s;
}
.comment-emoji-btn:hover { opacity: 1; transform: scale(1.2); }
.comment-emoji-picker-wrap { position: relative; }
.comment-emoji-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 200;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    border-radius: 12px;
    display: none;
}
.comment-emoji-picker.show { display: block; }
.comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-char-count { font-size: .75rem; color: var(--tj-text-muted); }
.comment-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--tj-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .4rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.comment-submit-btn:hover { background: var(--tj-primary-dark); color: #fff; }
.comment-submit-btn.comment-submit-sm { padding: .32rem .75rem; font-size: .82rem; }
.comment-avatar { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; }
.comment-avatar-sm { width: 38px; height: 38px; object-fit: cover; flex-shrink: 0; }
.comment-item:last-child { border-bottom: none !important; }
.comment-reply {
    padding-left: .75rem;
    border-left: 2px solid var(--tj-border);
}
.comment-action {
    cursor: pointer;
    color: var(--tj-text-muted);
    text-decoration: none;
    transition: .2s;
}
.comment-action:hover { color: var(--tj-primary); }
#commentContainer p { word-break: break-word; }

/* ====================================================
   GOOGLE / FACEBOOK SIGN-IN BUTTON
   ==================================================== */
.gsi-material-button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #747775;
    border-radius: 4px;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: .25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: 240px;
}
.gsi-material-button .gsi-material-button-state {
    transition: opacity .218s;
    inset: 0;
    opacity: 0;
    position: absolute;
}
.gsi-material-button:not(:disabled):hover {
    box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px rgba(60,64,67,.15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state { background: #303030; opacity: .08; }
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state { background: #303030; opacity: .12; }
.gsi-material-button .gsi-material-button-content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}
.gsi-material-button .gsi-material-button-contents {
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}
.signin-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b5998;
    color: #fff;
    min-width: 240px;
    border-radius: 4px;
    height: 40px;
    font-size: .875rem;
    font-weight: 500;
    border: none;
    text-decoration: none;
    padding: 0 16px;
    gap: .5rem;
}
.signin-facebook:hover { background-color: #2d4373; color: #fff; }

/* ====================================================
   FOOTER
   ==================================================== */
.footer-tunjuk {
    font-size: .85rem;
    padding: 14px 20px;
    margin-top: 16px;
    border-top: 2px dotted rgba(0, 0, 0, .2);
    background: #fff;
}
.footer-tunjuk a {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--tj-text);
    text-decoration: none;
    margin-right: 1rem;
}
.footer-tunjuk a:hover { color: var(--tj-primary); }

/* ====================================================
   SCROLL TO TOP BUTTON
   ==================================================== */
.totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tj-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.totop img { width: 20px; height: 20px; }

/* ====================================================
   UTILITY
   ==================================================== */
.hide { display: none !important; }

/* Bootstrap JS compat — toggled by main.js for search form */
.d-none { display: none !important; }
.flex-grow-1 { flex: 1 1 auto; }
.me-2 { margin-right: .5rem; }

/* ====================================================
   READING PREFERENCES
   Diterapkan via atribut pada <html>:
   data-theme (light|dark), data-fontsize (-2..3), data-width (narrow|medium|large)
   ==================================================== */

/* ---- Lebar layout ---- (medium = default 1070px) */
html[data-width="narrow"] .max-w-content { max-width: 880px; }
html[data-width="large"]  .max-w-content { max-width: 1320px; }

/* ---- Ukuran huruf artikel ---- */
html { --reading-scale: 1; }
html[data-fontsize="-2"] { --reading-scale: .85; }
html[data-fontsize="-1"] { --reading-scale: .925; }
html[data-fontsize="1"]  { --reading-scale: 1.1; }
html[data-fontsize="2"]  { --reading-scale: 1.25; }
html[data-fontsize="3"]  { --reading-scale: 1.4; }

.news-content {
    font-size: calc(1rem * var(--reading-scale));
    line-height: 1.75;
}
/* heading artikel pakai em agar ikut skala parent */
.news-content h1 { font-size: 1.8em; }
.news-content h2 { font-size: 1.5em; }
.news-content h3 { font-size: 1.25em; }
.news-content h4 { font-size: 1.1em; }
.detail-title { font-size: calc(1.7rem * var(--reading-scale)); }
@media (max-width: 767.98px) {
    .detail-title { font-size: calc(1.25rem * var(--reading-scale)); }
}

/* ---- Mode malam ---- */
html[data-theme="dark"] {
    --tj-nav: #1b1b1b;
    --tj-border: rgba(255, 255, 255, .10);
    --tj-body-bg: #121212;
    --tj-card-bg: #1e1e1e;
    --tj-text: #e8e6e3;
    --tj-text-muted: #9aa0a6;
}
/* utility Tailwind yang memaku warna terang harus diturunkan ke token gelap */
html[data-theme="dark"] .bg-tj-body { background-color: var(--tj-body-bg); }
html[data-theme="dark"] .bg-white { background-color: var(--tj-card-bg); }
/* permukaan yang sebelumnya hardcoded #fff */
html[data-theme="dark"] .carousel-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .news-hitem,
html[data-theme="dark"] .news-empty,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .side-panel .side-head,
html[data-theme="dark"] .detail-article,
html[data-theme="dark"] .comment-user-info,
html[data-theme="dark"] .footer-tunjuk,
html[data-theme="dark"] .more-news a,
html[data-theme="dark"] a.more-news,
html[data-theme="dark"] button.more-news {
    background: var(--tj-card-bg);
}
/* border kartu yang pakai rgba(0,0,0,..) jadi tak terlihat di gelap */
html[data-theme="dark"] .carousel-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .news-hitem {
    border-color: var(--tj-border);
}
/* teks yang dipatok ke --tj-nav (gelap saat terang) agar tetap terbaca */
html[data-theme="dark"] .trending-title,
html[data-theme="dark"] .side-panel .side-head {
    color: var(--tj-text);
}
/* textarea komentar */
html[data-theme="dark"] .comment-textarea.form-control,
html[data-theme="dark"] .comment-textarea.form-control:focus {
    background: var(--tj-card-bg);
    color: var(--tj-text);
}
html[data-theme="dark"] .comment-textarea.form-control::placeholder { color: var(--tj-text-muted); }
/* fade tepi carousel mengikuti warna gelap */
html[data-theme="dark"] .carousel.swiper-container::before {
    background: linear-gradient(to right, var(--tj-body-bg), rgba(18, 18, 18, 0));
}
html[data-theme="dark"] .carousel.swiper-container::after {
    background: linear-gradient(to left, var(--tj-body-bg), rgba(18, 18, 18, 0));
}

/* ---- Panel pengaturan baca ---- */
.reading-panel { max-width: calc(100vw - 3rem); }
.rs-btn {
    border: 1px solid var(--tj-border);
    background: transparent;
    color: var(--tj-text);
    border-radius: 8px;
    padding: .4rem .5rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
}
.rs-btn:hover { border-color: var(--tj-primary); color: var(--tj-primary); }
.rs-btn.active {
    background: var(--tj-primary);
    border-color: var(--tj-primary);
    color: #fff;
}

/* ====================================================
   PROFIL / AKUN (avatar di header + dropdown)
   ==================================================== */
.profile-wrap { position: relative; flex-shrink: 0; }
.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--tj-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow .2s ease, transform .2s ease;
}
.profile-avatar:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .avatar-initials {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    font-family: 'Roboto Condensed', sans-serif;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.profile-avatar.guest { background: #9aa0a6; color: #fff; font-size: 1rem; }

.profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    min-width: 230px;
    background: var(--tj-card-bg);
    color: var(--tj-text);
    border: 1px solid var(--tj-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.profile-menu-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--tj-border);
}
.profile-menu-name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.profile-menu-email {
    font-size: .8rem;
    color: var(--tj-text-muted);
    margin-top: 2px;
    word-break: break-all;
}
.profile-menu .profile-logout {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem;
    color: var(--tj-text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.profile-menu .profile-logout:hover { background: rgba(245, 124, 0, .08); color: var(--tj-primary); }
.profile-menu .profile-logout i { color: var(--tj-primary); }

/* ====================================================
   COMMENT LIST (halaman news detail)
   ==================================================== */
#commentContainer { margin-top: .25rem; }

.comment-item {
    display: flex;
    gap: .8rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tj-border);
}
.comment-item:last-child { border-bottom: none; }

/* Avatar: lingkaran dengan ikon di belakang sebagai fallback bila foto gagal */
.comment-ava {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e9ecef;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    overflow: hidden;
}
.comment-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comment-ava-sm { width: 34px; height: 34px; font-size: .9rem; }

.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    margin-bottom: .1rem;
}
.comment-name { font-weight: 700; font-size: .92rem; color: var(--tj-text); }
.comment-date { font-size: .74rem; color: var(--tj-text-muted); }
.comment-text {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--tj-text);
    margin: .15rem 0 .6rem;
    word-break: break-word;
}
.comment-text p { margin: 0 0 .4rem; }
.comment-text p:last-child { margin-bottom: 0; }

.comment-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.comment-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tj-text-muted);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.comment-action:hover { background: rgba(245, 124, 0, .1); color: var(--tj-primary); }
.comment-action i { font-size: .8rem; }

/* Balasan: indent dengan garis kiri */
.comment-replies {
    margin-top: .75rem;
    padding-left: .9rem;
    border-left: 2px solid var(--tj-border);
}
.comment-replies .comment-item { border-bottom: none; padding: .6rem 0; }

.comment-empty {
    padding: 1.6rem 1.25rem;
    text-align: center;
    color: var(--tj-text-muted);
    font-size: .9rem;
    background: rgba(0, 0, 0, .02);
    border: 1px dashed var(--tj-border);
    border-radius: 12px;
}

html[data-theme="dark"] .comment-ava { background: rgba(255, 255, 255, .08); color: #888; }
html[data-theme="dark"] .comment-empty { background: rgba(255, 255, 255, .03); }