/*
Theme Name: Sasagu
Theme URI: https://sasagupapua.com
Author URI: https://sasagupapua.com
Description: Tema Berita WordPress Sasagu Papua. Desain identik dengan fomo.beritaxx.com dengan warna utama hijau #304d14 dan gradasi 10% #395022.
Author: Sasagu Papua
Version: 1.3.2
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sasagu
*/

/* ═══════════════════════════════════════════════════════════════════
   1. RESET & VARIABLES
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --sasagu-primary: #304d14;
    --sasagu-gradient: linear-gradient(to right, #304d14, #395022);
    --sasagu-accent: #395022;
    --sasagu-bg: #ffffff;
    --sasagu-surface: #f8fafc;
    --sasagu-text: #222222;
    --sasagu-text-muted: #64748b;
    --sasagu-border: #e2e8f0;
}

[data-theme="dark"] {
    --sasagu-primary: #85b958;
    --sasagu-gradient: linear-gradient(to right, #304d14, #395022);
    --sasagu-accent: #395022;
    --sasagu-bg: #222222;
    --sasagu-surface: #1e1e1e;
    --sasagu-text: #dddddd;
    --sasagu-text-muted: #aaaaaa;
    --sasagu-border: #333333;
}

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

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--sasagu-bg);
    color: var(--sasagu-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--sasagu-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #304d14;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.fomo_clear:after {
    content: "";
    display: table;
    clear: both;
}

.fomonews {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.fomo_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.fomo_flex {
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   2. HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.fomo_header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* Top Trending Bar */
.trend_header {
    background: linear-gradient(to right, #304d14, #395022);
    color: #ffffff;
    height: 38px;
    font-size: 12px;
}

.trend_header .fomo_container {
    height: 100%;
    justify-content: space-between;
}

.fomo_trend {
    display: inline-flex;
    align-items: center;
    background: #395022;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 3px;
}

.fomo_sosial {
    gap: 14px;
}

.fomo_sosial a {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.fomo_sosial a:hover {
    opacity: 0.8;
}

/* Dark Mode Switch */
.fomo_mode {
    display: inline-flex;
    align-items: center;
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 38px;
    cursor: pointer;
    margin: 0;
}

.theme-switch input {
    display: none;
}

.mode.round {
    background: rgba(255, 255, 255, 0.35);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
    border-radius: 34px;
}

.mode.round:before {
    background: #ffffff;
    bottom: 2px;
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    transition: .3s;
    width: 16px;
    border-radius: 50%;
}

input:checked + .mode.round {
    background: #ffffff;
}

input:checked + .mode.round:before {
    transform: translateX(18px);
    background: #304d14;
}

/* Main Header */
.main_header {
    padding: 16px 0;
}

.main_header .fomo_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fomo_logo a {
    display: inline-block;
}

.sasagu_logo_light {
    display: block;
    height: 48px;
    width: auto;
}

.sasagu_logo_dark {
    display: none;
    height: 48px;
    width: auto;
}

[data-theme="dark"] .sasagu_logo_light {
    display: none !important;
}

[data-theme="dark"] .sasagu_logo_dark {
    display: block !important;
}

/* Search Form */
.fomo_search {
    width: 320px;
}

.fomo_form_search {
    border: 1px solid rgba(48, 77, 20, 0.3);
    border-radius: 25px;
    background: #ffffff;
    display: flex;
    overflow: hidden;
    height: 38px;
}

.fomo_form_search form {
    display: flex;
    width: 100%;
    margin: 0;
}

.fomo_input {
    flex: 1;
}

.fomo_input input[type="text"] {
    border: 0;
    outline: none;
    padding: 8px 14px;
    width: 100%;
    height: 100%;
    font-size: 13px;
    background: transparent;
    color: inherit;
}

.fomo_button {
    background: linear-gradient(to right, #304d14, #395022);
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fomo_button button {
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fomo_sopen,
.fomo_bopen {
    display: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #304d14;
}

/* Flat Menu */
.fomo_flat_menu {
    background: #f4f6f3;
    border-top: 1px solid #e5e9e2;
    border-bottom: 1px solid #e5e9e2;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 14px;
}

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

.nav .thm.desktop {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.nav .thm.desktop li {
    position: relative;
}

.nav .thm.desktop li > a {
    display: block;
    padding: 12px 14px;
    color: #111111;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav .thm.desktop li:hover > a {
    color: #304d14;
}

.nav .thm.desktop li > a > span {
    background: #304d14;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.fomo_tanggal {
    color: #304d14;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   3. CONTENT LAYOUT (PRIMARY & SECONDARY)
   ═══════════════════════════════════════════════════════════════════ */
.fomo_content {
    padding: 20px 0 40px;
}

.header_ads,
.footer_ads {
    text-align: center;
    margin-bottom: 25px;
}

.header_ads img,
.footer_ads img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.area_content_outer {
    display: flex;
    gap: 30px;
}

.area_primary {
    flex: 1;
    min-width: 0;
}

.area_secondary {
    width: 320px;
    flex-shrink: 0;
}

.secondary_content.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   4. WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
.widget_block {
    margin-bottom: 30px;
}

.widget_block h3,
.fomo_w_category h3,
.fomo_w_block h3,
.fomo_s_num h3,
.fomo_s_late h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #304d14;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--sasagu-text);
}

.fomo_w_category h3 a,
.fomo_w_block h3 a {
    font-size: 11px;
    font-weight: 700;
    color: #304d14;
    border: 1px solid #304d14;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
}

.fomo_w_category h3 a:hover,
.fomo_w_block h3 a:hover {
    background: #304d14;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADLINE WIDGET (Tag: headline)
   Desktop: 1 Besar (Foto & Judul) + 4 Kecil di bawahnya (Foto Saja)
   Mobile: 5 Berita (Foto & Judul bisa diklik)
   ═══════════════════════════════════════════════════════════════════ */
.sasagu_headline_widget {
    margin-bottom: 25px;
}

/* DESKTOP VIEW */
.sasagu_hl_desktop {
    display: block !important;
}

.sasagu_hl_main {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #111111;
    margin-bottom: 12px;
    height: 420px;
    width: 100%;
}

.sasagu_hl_main_img {
    width: 100%;
    height: 100%;
}

.sasagu_hl_main_img a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.sasagu_hl_main_img img.hl_big_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease;
}

.sasagu_hl_main:hover img.hl_big_img {
    transform: scale(1.03);
}

.sasagu_hl_main_meta {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 50px 24px 22px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%) !important;
    z-index: 2;
    pointer-events: none;
}

.sasagu_hl_main_meta .hl_badge {
    display: inline-block;
    background: #304d14 !important;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    pointer-events: auto;
}

.sasagu_hl_main_title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    pointer-events: auto;
}

.sasagu_hl_main_title a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sasagu_hl_main_title a:hover {
    color: #85b958 !important;
}

/* 4 Kecil di Bawahnya: Foto Saja (bisa diklik) */
.sasagu_hl_sub_grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

.sasagu_hl_sub_item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #111111;
    height: 115px;
    width: 100%;
}

.sasagu_hl_sub_link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.sasagu_hl_sub_thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease;
}

.sasagu_hl_sub_item:hover .sasagu_hl_sub_thumb {
    transform: scale(1.06);
}

.sasagu_hl_sub_hover_title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sasagu_hl_sub_item:hover .sasagu_hl_sub_hover_title {
    opacity: 1;
}

/* MOBILE VIEW: 5 Berita (Foto & Judul Bisa Diklik) */
.sasagu_hl_mobile {
    display: none !important;
    flex-direction: column;
    gap: 14px;
}

.sasagu_hl_mob_item {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px dashed var(--sasagu-border);
    padding-bottom: 12px;
}

.sasagu_hl_mob_item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Item 1 di mobile: Format Besar */
.sasagu_hl_mob_item.is_primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 2px solid var(--sasagu-border);
    padding-bottom: 14px;
    margin-bottom: 2px;
}

.sasagu_hl_mob_item.is_primary .sasagu_hl_mob_thumb {
    width: 100%;
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
}

.sasagu_hl_mob_item.is_primary .sasagu_hl_mob_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sasagu_hl_mob_item.is_primary .sasagu_hl_mob_title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

/* Items 2-5 di mobile: List Horisontal (Foto di kiri, Judul di kanan) */
.sasagu_hl_mob_thumb {
    width: 110px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    background: #e2e8f0;
}

.sasagu_hl_mob_thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.sasagu_hl_mob_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sasagu_hl_mob_info {
    flex: 1;
}

.sasagu_hl_mob_info .hl_badge {
    display: inline-block;
    background: #304d14;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.sasagu_hl_mob_title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.sasagu_hl_mob_title a {
    color: var(--sasagu-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sasagu_hl_mob_title a:hover {
    color: #304d14;
}

/* Splide Slider Widget */
.s__num2.splide {
    margin-bottom: 25px;
}

.w_category {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #000000;
    aspect-ratio: 16 / 10;
}

.w_c_image {
    width: 100%;
    height: 100%;
}

.w_c_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.w_category:hover .w_c_image img {
    transform: scale(1.04);
}

.w_c_meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 12px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 65%, transparent 100%);
}

.w_c_date {
    font-size: 11px;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.w_c_title a {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category Block Grid Widget (1 Besar + 3 Kecil) */
.w_b_grid {
    display: flex;
    gap: 18px;
    margin-bottom: 25px;
}

.w_b_grid .w_grid:first-child {
    flex: 1.1;
}

.w_b_grid .w_grid:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.w_g_image {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    margin-bottom: 8px;
}

.w_g_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.w_g_meta .w_g_date {
    font-size: 11px;
    color: #888888;
    margin-bottom: 4px;
}

.w_g_meta .w_g_title a {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sasagu-text);
}

.w_g_right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.w_g_right img {
    width: 90px;
    height: 65px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.w_g_r_title a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sasagu-text);
}

.w_g_r_date {
    font-size: 11px;
    color: #888888;
    margin-top: 3px;
}

/* Trending Post Widget (7 Berita Terpopuler 7 Hari Terakhir) */
.sasagu_trending_item {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--sasagu-border);
}

.sasagu_trend_circle_wrap {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 2px solid #304d14;
    background: #2a3d16;
}

.sasagu_trend_circle_link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.sasagu_trend_thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sasagu_trend_circle_overlay {
    position: absolute;
    inset: 0;
    background: rgba(48, 77, 20, 0.48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.sasagu_trend_circle_wrap:hover .sasagu_trend_circle_overlay {
    background: rgba(48, 77, 20, 0.25);
}

.sasagu_trend_num_italic {
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    line-height: 1;
}

.sasagu_trending_bottom_index {
    text-align: right;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--sasagu-border);
}

.trending_index_btn {
    font-size: 11px;
    font-weight: 700;
    color: #304d14;
    text-transform: uppercase;
    border: 1px solid #304d14;
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.trending_index_btn:hover {
    background: #304d14;
    color: #ffffff !important;
}

.number_title a {
    color: var(--sasagu-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.number_title a:hover {
    color: #304d14;
}

/* Latest Post Sidebar Widget */
.fomo_s_f_late .fomo_late_img {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    margin-bottom: 8px;
}

.fomo_s_f_late .fomo_late_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fomo_s_f_late .w_g_r_title a {
    font-size: 14px;
    font-weight: 700;
}

.fomo_s_f_late .w_g_r_date a {
    color: #304d14;
    font-weight: 600;
}

/* Category List Widget */
.fomo_s_c_loop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dotted var(--sasagu-border);
}

.cat_title a {
    font-size: 13px;
    font-weight: 600;
    color: var(--sasagu-text);
}

.cat_title a:hover {
    color: #304d14;
}

.cat_time span {
    font-size: 11px;
    color: #888888;
    white-space: nowrap;
    margin-left: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   5. CLASSIC NEWS LOOP (HOME & ARCHIVE)
   ═══════════════════════════════════════════════════════════════════ */
.late_news {
    margin-top: 20px;
}

.loop_classic {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sasagu-border);
}

.classic_img {
    width: 250px;
    height: 165px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
}

.classic_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.loop_classic:hover .classic_img img {
    transform: scale(1.03);
}

.classic_over {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.classic_title a {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sasagu-text);
}

.classic_title a:hover {
    color: #304d14;
}

.classic_time_mini {
    font-size: 12px;
    color: #888888;
    margin-top: 8px;
}

.classic_time_mini a {
    color: #304d14;
    font-weight: 600;
}

/* Load More Button */
.btn__looping {
    text-align: center;
    margin: 30px 0;
}

.btn__more {
    background: #ffffff;
    color: #304d14;
    border: 2px solid #304d14;
    padding: 10px 32px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
}

.btn__more:hover {
    background: #304d14;
    color: #ffffff;
}

.lazy_nomore {
    display: inline-block;
    padding: 8px 20px;
    background: var(--sasagu-surface);
    color: #888888;
    border-radius: 20px;
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   6. SINGLE POST
   ═══════════════════════════════════════════════════════════════════ */
.nav_breadcrumb {
    font-size: 12px;
    color: #888888;
    margin-bottom: 16px;
}

.nav_breadcrumb a {
    color: #304d14;
}

.fomo_the_title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--sasagu-text);
}

/* Post Metabar (Kiri: Hari tanggal tahun jam WIT | Kanan: Kategori) */
.sasagu_post_metabar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--sasagu-border);
    margin-bottom: 20px;
}

.sasagu_post_metabar .meta_date {
    font-size: 13px;
    color: var(--sasagu-text-muted);
    font-weight: 600;
}

.sasagu_post_metabar .meta_cat_badge {
    background: linear-gradient(to right, #304d14, #395022);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Container safety to prevent overflow */
.primary_content,
.primary_big,
.fomo_article {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Featured Image & Caption */
.primary_featured {
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

.primary_featured img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.primary_featured .wp-caption-text {
    font-size: 13px;
    color: var(--sasagu-text-muted);
    font-style: italic;
    background: var(--sasagu-surface);
    padding: 8px 14px;
    margin: 0;
    border-left: 3px solid #304d14;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Atribusi Redaksi Berdampingan: Penulis (Kiri) dan Editor (Kanan) */
.sasagu_post_authors {
    display: flex;
    gap: 16px;
    background: var(--sasagu-surface);
    border: 1px solid var(--sasagu-border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 25px;
}

.sasagu_author_col {
    flex: 1;
    min-width: 0;
}

.sasagu_author_card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sasagu_author_thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #304d14;
    background: #e2e8f0;
}

.sasagu_author_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sasagu_author_info {
    flex: 1;
    min-width: 0;
}

.sasagu_author_role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sasagu-text-muted);
    letter-spacing: 0.3px;
    display: block;
}

.sasagu_author_name {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sasagu_author_name a {
    color: var(--sasagu-text);
}

.sasagu_author_name a:hover {
    color: #304d14;
}

/* Article Content */
.fomo_article {
    font-size: 16px;
    line-height: 1.85;
    color: var(--sasagu-text);
}

.fomo_article p {
    margin-bottom: 20px;
}

.fomo_article a {
    color: #304d14;
    text-decoration: underline;
}

.fomo_article blockquote {
    border-left: 4px solid #304d14;
    margin: 20px 0;
    padding: 10px 20px;
    background: var(--sasagu-surface);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE IN-POST PHOTOS, CAPTIONS, & MEDIA (Classic Editor & Gutenberg)
   ═══════════════════════════════════════════════════════════════════ */
/* Semua Gambar di Dalam Berita */
.fomo_article img,
.primary_content img,
.primary_big img,
.entry-content img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    border-radius: 6px;
}

/* WordPress Image Caption Box (.wp-caption) */
.fomo_article .wp-caption,
.wp-caption,
div.wp-caption {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 18px auto 22px !important;
    clear: both !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.fomo_article .wp-caption a,
.wp-caption a {
    display: block;
    max-width: 100% !important;
}

.fomo_article .wp-caption img,
.wp-caption img,
div.wp-caption img,
.wp-caption a img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 6px;
    object-fit: contain;
}

/* Teks Caption di Bawah Foto */
.fomo_article .wp-caption-text,
.wp-caption-text,
p.wp-caption-text,
.fomo_article figcaption,
figcaption,
.wp-element-caption {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--sasagu-text-muted) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    margin: 8px 0 16px 0 !important;
    padding: 8px 14px !important;
    background: var(--sasagu-surface) !important;
    border-left: 3px solid #304d14 !important;
    border-radius: 0 6px 6px 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
}

/* Gutenberg Block Image & Gallery */
figure.wp-block-image,
.wp-block-image {
    max-width: 100% !important;
    width: 100% !important;
    margin: 18px 0 22px !important;
    box-sizing: border-box !important;
}

figure.wp-block-image img,
.wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

.wp-block-gallery {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Alignment Posisi Foto */
.fomo_article .aligncenter,
.aligncenter,
div.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
    max-width: 100% !important;
    text-align: center;
}

.fomo_article .alignnone,
.alignnone {
    display: block !important;
    margin: 18px auto !important;
    max-width: 100% !important;
}

.fomo_article .alignleft,
.alignleft {
    float: left;
    margin: 8px 20px 18px 0 !important;
    max-width: 50% !important;
}

.fomo_article .alignright,
.alignright {
    float: right;
    margin: 8px 0 18px 20px !important;
    max-width: 50% !important;
}

@media (max-width: 768px) {
    .fomo_article .alignleft,
    .fomo_article .alignright,
    .alignleft,
    .alignright {
        float: none !important;
        margin: 16px auto !important;
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Responsif untuk Video Embed & Iframe di Dalam Berita */
.fomo_article iframe,
.fomo_article video,
.fomo_article embed,
.fomo_article object {
    max-width: 100% !important;
    box-sizing: border-box;
    border-radius: 6px;
}

/* Tags */
.fomo_tags {
    margin: 30px 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fomo_tags a {
    background: rgba(48, 77, 20, 0.08);
    color: #304d14;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fomo_tags a:hover {
    background: #304d14;
    color: #ffffff;
}

/* Share Buttons (Hanya 4 Icon: Facebook, WA, Email, Copy Link) */
.fomo_share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 25px 0 15px;
    padding: 16px 0;
    border-top: 1px solid var(--sasagu-border);
    border-bottom: 1px solid var(--sasagu-border);
    position: relative;
}

.fomo_share span:first-child {
    font-weight: 700;
    font-size: 13px;
    margin-right: 6px;
}

.fomo_share a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: transform 0.2s ease;
}

.fomo_share a:hover {
    transform: translateY(-2px);
}

.share_facebook { background: #1877f2; }
.share_whatsapp { background: #25d366; }
.share_email    { background: #0284c7; }
.share_link     { background: #304d14; }

#copy-notification {
    visibility: hidden;
    opacity: 0;
    background: #333333;
    color: #ffffff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    transition: opacity 0.3s ease;
    margin-left: 8px;
}

/* Saluran WhatsApp & Info Redaksi Box */
.sasagu_wa_channel_box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 18px 0 30px;
}

.wa_channel_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(48, 77, 20, 0.25);
}

.wa_channel_text {
    font-weight: 800;
    font-size: 15px;
    color: #166534;
}

.btn_join_wa_channel {
    background: #25d366;
    color: #ffffff !important;
    padding: 9px 20px;
    border-radius: 25px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 3px 8px rgba(37, 211, 102, 0.35);
}

.btn_join_wa_channel:hover {
    background: #20ba5a;
    transform: translateY(-1px);
}

.wa_channel_bottom {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.wa_direct_link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #15803d;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 4px;
}

.wa_direct_link:hover {
    color: #166534;
}

[data-theme="dark"] .sasagu_wa_channel_box {
    background: #18281a !important;
    border-color: #27432a !important;
}

[data-theme="dark"] .wa_channel_text {
    color: #85b958 !important;
}

[data-theme="dark"] .wa_channel_bottom {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .wa_direct_link {
    color: #85b958 !important;
}

/* Related Posts */
.fomo_related {
    margin-top: 40px;
}

.related_heads {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #304d14;
}

.related_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.rel_post {
    border-radius: 6px;
    overflow: hidden;
}

.rel_img {
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 6px;
}

.rel_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rel_post:hover .rel_img img {
    transform: scale(1.04);
}

.rel_time {
    font-size: 11px;
    color: #888888;
    margin-bottom: 4px;
}

.rel_title a {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sasagu-text);
}

.rel_title a:hover {
    color: #304d14;
}

/* Archive Head */
.archive_head {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #304d14;
    color: var(--sasagu-text);
}

/* Halaman Populer (/populer/) Tabs */
.sasagu_populer_tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.sasagu_tab_btn {
    background: var(--sasagu-surface);
    border: 1px solid var(--sasagu-border);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    color: var(--sasagu-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sasagu_tab_btn:hover,
.sasagu_tab_btn.active {
    background: #304d14;
    color: #ffffff;
    border-color: #304d14;
}

.sasagu_tab_pane {
    display: none;
}

.sasagu_tab_pane.active {
    display: block;
}

.sasagu_populer_loop {
    align-items: center;
}

.populer_rank_badge {
    font-size: 32px;
    font-weight: 900;
    font-style: italic;
    color: #304d14;
    min-width: 44px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .populer_rank_badge {
    color: #85b958 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.fomo_footer {
    background: #ffffff;
    border-top: 1px solid var(--sasagu-border);
    padding: 30px 0 20px;
    margin-top: 40px;
}

.footer_area {
    text-align: center;
}

.footer_menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    gap: 20px;
    flex-wrap: wrap;
}

.footer_menu li a {
    font-weight: 600;
    font-size: 13px;
    color: var(--sasagu-text);
}

.fomo_footer .fomo_social {
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.fomo_footer .fomo_social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #304d14;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fomo_footer .fomo_social a:hover {
    background: #304d14;
    color: #ffffff;
}

.fomo_footer_text {
    max-width: 600px;
    margin: 0 auto 20px;
    font-size: 13px;
    color: var(--sasagu-text-muted);
}

.copyright {
    font-size: 12px;
    color: var(--sasagu-text-muted);
    border-top: 1px solid var(--sasagu-border);
    padding-top: 20px;
}

.fomo_footer_logo {
    margin-bottom: 12px;
}

.fomo_footer_logo img {
    height: 36px;
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   8. FLOATING ADS & PARALLAX MOBILE
   ═══════════════════════════════════════════════════════════════════ */
.fomo_float_ads {
    position: fixed;
    top: 140px;
    z-index: 99;
}

.left_ads {
    left: 10px;
}

.right_ads {
    right: 10px;
}

.side_float {
    position: relative;
}

.side_float span {
    position: absolute;
    top: -22px;
    right: 0;
    background: #000000;
    color: #ffffff;
    padding: 1px 7px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 2px;
}

body.ofloat .fomo_float_ads {
    display: none !important;
}

.mob_float {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: none;
}

.mob_close {
    background: #304d14;
    color: #ffffff;
    text-align: center;
    padding: 6px 0;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

body.moveads .mob_float {
    display: none !important;
}

/* Mobile Drawer */
.mobile_drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    z-index: 10000;
    transition: left 0.3s ease;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 20px;
}

body.oside .mobile_drawer {
    left: 0;
}

.mobile_drawer_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #304d14;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.mobile_drawer_title {
    font-size: 16px;
    font-weight: 800;
    color: #304d14;
}

.mobile_drawer_close {
    cursor: pointer;
}

.mobmenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobmenu li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 700;
    font-size: 14px;
    color: #222222;
}

.close_all {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}

body.oside .close_all,
body.osearch .close_all {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   9. DEVICE VIEW UTILITIES (Desktop Only / Mobile Only) & HL Switch
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .hide-on-mobile {
        display: none !important;
    }
    .sasagu_hl_desktop {
        display: none !important;
    }
    .sasagu_hl_mobile {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .hide-on-desktop {
        display: none !important;
    }
    .sasagu_hl_mobile {
        display: none !important;
    }
    .sasagu_hl_desktop {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body,
[data-theme="dark"] .fomo_content,
[data-theme="dark"] .fomo_header,
[data-theme="dark"] .fomo_footer,
[data-theme="dark"] .mobile_drawer {
    background: #222222 !important;
    color: #dddddd !important;
}

[data-theme="dark"] a {
    color: #ffffff;
}

[data-theme="dark"] .sasagu_hl_mob_thumb {
    background: #333333 !important;
}

[data-theme="dark"] .sasagu_hl_mob_title a {
    color: #ffffff !important;
}

[data-theme="dark"] .sasagu_hl_mob_title a:hover {
    color: #85b958 !important;
}

[data-theme="dark"] .sasagu_hl_mob_item {
    border-color: #333333 !important;
}

[data-theme="dark"] .fomo_flat_menu {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .nav .thm.desktop li > a,
[data-theme="dark"] .mobmenu li a {
    color: #ffffff !important;
}

[data-theme="dark"] .fomo_tanggal {
    color: #85b958 !important;
}

[data-theme="dark"] .fomo_form_search {
    background: #2a2a2a !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .fomo_input input[type="text"] {
    color: #ffffff !important;
}

[data-theme="dark"] .sasagu_post_authors,
[data-theme="dark"] .primary_featured .wp-caption-text,
[data-theme="dark"] .wp-caption-text,
[data-theme="dark"] figcaption,
[data-theme="dark"] .wp-element-caption,
[data-theme="dark"] .sasagu_tax_header {
    background: #2a2a2a !important;
    border-color: #383838 !important;
    color: #cccccc !important;
}

[data-theme="dark"] .sasagu_author_name a {
    color: #ffffff !important;
}

[data-theme="dark"] .loop_classic,
[data-theme="dark"] .sasagu_post_metabar,
[data-theme="dark"] .fomo_share {
    border-color: #333333 !important;
}

[data-theme="dark"] .btn__more {
    background: #222222 !important;
    color: #85b958 !important;
    border-color: #85b958 !important;
}

[data-theme="dark"] .btn__more:hover {
    background: #304d14 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .fomo_footer .fomo_social a {
    background: #333333 !important;
    color: #85b958 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11. RESPONSIVE MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
    .fomo_float_ads {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .fomo_sopen,
    .fomo_bopen {
        display: inline-flex;
    }

    .fomo_search,
    .nav .thm.desktop,
    .fomo_tanggal {
        display: none;
    }

    body.osearch .fomo_search {
        display: block;
        position: absolute;
        top: 86px;
        left: 15px;
        right: 15px;
        width: auto;
        z-index: 9999;
    }

    .area_content_outer {
        flex-direction: column;
    }

    .area_secondary {
        width: 100%;
    }

    .mob_float {
        display: block;
    }

    .loop_classic {
        gap: 14px;
    }

    .classic_img {
        width: 130px;
        height: 95px;
    }

    .classic_title a {
        font-size: 15px;
    }

    .related_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .w_b_grid {
        flex-direction: column;
    }

    .sasagu_post_authors {
        flex-direction: column;
        gap: 12px;
    }

    .fomo_the_title {
        font-size: 22px;
    }

    .related_list {
        grid-template-columns: 1fr;
    }

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

    .btn_join_wa_channel {
        width: 100%;
        justify-content: center;
    }
}