/*
 * Theme Name:        Medialis
 * Theme URI:         https://medialis.id
 * Description:       Tema WordPress premium untuk portal media online Indonesia. Majalah modern, teroptimasi SEO dan Google News.
 * Author:            Medialis Team
 * Author URI:        https://medialis.id
 * Version:           3.0.0
 * Requires at least: 6.3
 * Tested up to:      6.6
 * Requires PHP:      8.0
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       medialis
 * Tags:              news, magazine, journalism, seo, google-news, responsive
 */

/* ============================================================
   MEDIALIS v3 — Design System
   ============================================================ */

/* Fonts loaded async via PHP wp_head — tidak di sini agar tidak blokir render */

/* ── CSS Variables ── */
:root {
  --cp:    #8B1A1A;
  --cpd:   #5C0E0E;
  --cs:    #C5972A;
  --ca:    #1D4E89;
  --cdark: #111111;
  --ctext: #1F2937;
  --cmut:  #6B7280;
  --cbdr:  #E5E7EB;
  --cbg:   #F7F5F0;
  --csrf:  #FFFFFF;
  --cnav:  #1A1A1A;
  --cftr:  #111111;
  --fd:    'Playfair Display', Georgia, serif;
  --fb:    'Source Sans 3', system-ui, sans-serif;
  --fa:    'Playfair Display', Georgia, serif; /* Libre Baskerville dihapus - hemat 1 font request */
  --fs:    18px;
  --r:     12px;
  --rsm:   6px;
  --ease:  0.22s ease;
  --slow:  0.5s ease;
}

[data-theme="dark"] {
  --cbg:  #0F0F0F; --csrf: #1A1A1A;
  --ctext:#E5E7EB; --cmut: #9CA3AF;
  --cbdr: #2D2D2D;
}

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

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fb); font-size: 16px;
  line-height: 1.7; color: var(--ctext);
  background: var(--cbg);
  transition: background var(--ease), color var(--ease);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--ease); }
a:hover { color: var(--cp); }

.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; z-index:99999; }
.skip-link:focus { left:0; top:0; padding:10px 20px; background:var(--cp); color:#fff; font-weight:700; }

/* ── TICKER ── */
.m-ticker { background:var(--cp); border-bottom:2px solid var(--cs); overflow:hidden; }
.m-ticker__wrap { display:flex; align-items:center; height:34px; max-width:1280px; margin:0 auto; padding:0 20px; }
.m-ticker__label {
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  background:var(--cs); color:#111; font-size:10px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  padding:0 14px 0 10px; height:100%;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.m-ticker__track { flex:1; overflow:hidden; }
.m-ticker__scroll {
  display:inline-block; white-space:nowrap;
  color:#fff; font-size:13px; font-weight:600;
  padding-left:20px;
  animation:ticker 38s linear infinite;
}
.m-ticker__scroll:hover { animation-play-state:paused; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── HEADER ── */
.m-header {
  background:var(--csrf); border-bottom:3px solid var(--cp);
  position:sticky; top:0; z-index:1000;
  transition:box-shadow var(--ease);
}
.m-header.scrolled { box-shadow:0 4px 20px rgba(0,0,0,.1); }
.m-header__wrap {
  max-width:1280px; margin:0 auto; padding:0 20px;
  height:66px; display:flex; align-items:center;
  justify-content:space-between; gap:20px;
}
.m-logo { display:flex; flex-direction:column; line-height:1; flex-shrink:0; }
.m-logo__text { font-family:var(--fd); font-size:clamp(20px,3vw,28px); font-weight:900; letter-spacing:-.03em; text-transform:uppercase; color:var(--cp); }
.m-logo__text em { color:var(--cs); font-style:normal; }
.m-logo__sub { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--cmut); margin-top:2px; }
.m-logo img { max-height:46px; width:auto; }
.m-header__utils { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.m-icon-btn {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--cbdr); border-radius:var(--rsm);
  color:var(--ctext); background:transparent; cursor:pointer;
  transition:all var(--ease);
}
.m-icon-btn:hover { background:var(--cp); color:#fff; border-color:var(--cp); }

/* ── NAV BAR ── */
.m-nav { background:var(--cnav); border-bottom:1px solid rgba(255,255,255,.05); }
.m-nav__wrap {
  max-width:1280px; margin:0 auto; padding:0 20px;
  overflow-x:auto; scrollbar-width:none; display:flex;
}
.m-nav__wrap::-webkit-scrollbar { display:none; }
.m-nav .menu { display:flex; list-style:none; flex-wrap:nowrap; }
.m-nav .menu > li { position:relative; }
.m-nav .menu > li > a {
  display:flex; align-items:center; gap:4px;
  padding:11px 15px; font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.75); white-space:nowrap;
  border-bottom:3px solid transparent; transition:all var(--ease);
}
.m-nav .menu > li > a:hover,
.m-nav .menu > li.current-menu-item > a,
.m-nav .menu > li.current-menu-ancestor > a { color:var(--cs); border-bottom-color:var(--cs); }
.m-nav .menu-item-has-children > a::after {
  content:''; display:inline-block;
  width:0; height:0; border:4px solid transparent;
  border-top-color:currentColor; margin-top:2px;
  transition:transform var(--ease);
}
.m-nav .menu-item-has-children:hover > a::after { transform:rotate(180deg); }
.m-nav .sub-menu {
  position:absolute; top:100%; left:0; min-width:200px;
  background:var(--csrf); border:1px solid var(--cbdr);
  border-top:3px solid var(--cp);
  border-radius:0 0 var(--rsm) var(--rsm);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  list-style:none; z-index:100;
  opacity:0; visibility:hidden;
  transform:translateY(6px); transition:all .2s ease;
  padding:4px 0;
}
.m-nav .menu-item-has-children:hover > .sub-menu,
.m-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.m-nav .sub-menu li a {
  display:block; padding:10px 18px; font-size:13px; font-weight:600;
  color:var(--ctext); border-bottom:1px solid var(--cbdr); transition:all var(--ease);
}
.m-nav .sub-menu li:last-child a { border-bottom:none; }
.m-nav .sub-menu li a:hover { background:#FFF5F5; color:var(--cp); padding-left:24px; }

/* ── SEARCH OVERLAY ── */
.m-search {
  position:fixed; inset:0; background:rgba(0,0,0,.93);
  z-index:9999; display:none; place-items:center;
}
.m-search.is-open { display:grid; animation:fdIn .2s ease; }
.m-search__box { width:min(680px,90vw); position:relative; }
.m-search__input {
  width:100%; background:transparent; border:none;
  border-bottom:2px solid var(--cs); outline:none; color:#fff;
  font-family:var(--fd); font-size:clamp(20px,4vw,34px); padding:12px 0;
}
.m-search__input::placeholder { color:rgba(255,255,255,.3); }
.m-search__close {
  position:absolute; top:-60px; right:-10px;
  background:none; border:none; color:#fff;
  font-size:30px; cursor:pointer; opacity:.6; transition:opacity var(--ease);
}
.m-search__close:hover { opacity:1; }
.m-search__hint { color:rgba(255,255,255,.4); font-size:12px; margin-top:12px; text-align:center; }

/* Mobile menu */
.m-mobile { display:none; background:var(--csrf); border-top:1px solid var(--cbdr); max-height:70vh; overflow-y:auto; }
.m-mobile.is-open { display:block; }
.m-mobile ul { list-style:none; padding:8px 0; }
.m-mobile li a {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; font-size:14px; font-weight:600; color:var(--ctext);
  border-bottom:1px solid var(--cbdr); transition:all var(--ease);
}
.m-mobile li a:hover { background:#FFF5F5; color:var(--cp); }
.m-mobile .sub-menu { display:none; background:var(--cbg); }
.m-mobile .sub-menu.is-open { display:block; }
.m-mobile .sub-menu li a { padding-left:36px; font-size:13px; }

/* ── HERO (shared base) ── */
.m-hero { position:relative; background:#111; overflow:hidden; }

/* ═══════════════════════════════════════════════════════
   FLIPBOOK HEADLINE — CSS3 3-D Page-Turn Animation
   ═══════════════════════════════════════════════════════ */
.m-flipbook {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  background: #1a1409;
  padding: clamp(10px, 2.5vw, 20px) 0 0;
}

/* ── Section label "BACA TERBARU" ── */
.mfb-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--fd, serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #C5972A;
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1.5vw, 14px);
}
.mfb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C5972A;
  animation: mfb-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mfb-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(0.7); }
}

/* ── Book stage ── */
.mfb-stage.mfb-book {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  height: clamp(260px, 44vw, 480px);
  overflow: hidden;
  /* book shadow */
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
  border-radius: 2px 8px 8px 2px;
  background: #ede8dc;
}

/* Loading shimmer */
.mfb-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e8e0d0 25%, #f0ead8 50%, #e8e0d0 75%);
  background-size: 200% 100%;
  animation: mfb-shimmer 1.6s infinite;
  z-index: 0;
  pointer-events: none;
}
.mfb-stage.mfb-ready::before { display: none; }

@keyframes mfb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Bottom padding after book ── */
.m-flipbook { padding-bottom: clamp(12px, 2.5vw, 24px); }

/* Canvas injected by engine */
#mfb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  z-index: 1;
}

/* ── Spine / progress bar ── */
.mfb-spine {
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: rgba(255,255,255,.1);
  z-index: 10;
  border-radius: 0 2px 2px 0;
}
.mfb-spine__fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(to bottom, var(--cs), var(--cp));
  border-radius: inherit;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Nav buttons ── */
.mfb-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 46px; height: 46px;
  border-radius: 5px;
  border: none; cursor: pointer;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), transform var(--ease), opacity var(--ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mfb-btn:hover:not(:disabled) { background: var(--cp); transform: translateY(-50%) scale(1.08); }
.mfb-btn:focus-visible { outline: 2px solid var(--cs); outline-offset: 3px; }
.mfb-btn:disabled { opacity: .25; cursor: default; }
.mfb-btn--prev { left: 14px; }
.mfb-btn--next { right: 14px; }

/* ── Dots ── */
.mfb-dots {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px;
  z-index: 10;
}
.mfb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none; cursor: pointer;
  padding: 0;
  transition: background var(--ease), width var(--ease), border-radius var(--ease);
}
.mfb-dot--active {
  background: var(--cs);
  width: 22px;
  border-radius: 4px;
}

/* ── Page counter ── */
.mfb-counter {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 10;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.35);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  letter-spacing: .06em;
}

/* ── Sound toggle button ── */
.mfb-snd {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 10;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), transform var(--ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mfb-snd:hover { background: var(--cp); transform: scale(1.1); }
.mfb-snd:focus-visible { outline: 2px solid var(--cs); outline-offset: 3px; }

/* ── Responsive ── */
@media(max-width:640px){
  .mfb-btn { width:38px; height:38px; }
  .mfb-btn--prev { left:8px; }
  .mfb-btn--next { right:8px; }
  .mfb-snd { display:none; } /* hide sound btn on small screens */
}

/* ── LAYOUT ── */
.m-wrap { max-width:1280px; margin:0 auto; padding:0 20px; }
.m-grid { display:grid; gap:32px; }
.m-grid--main { grid-template-columns:minmax(0,1fr) 300px; }
.m-grid--wide { grid-template-columns:minmax(0,1fr) 240px; }
.m-grid--left { grid-template-columns:300px minmax(0,1fr); }
.m-grid--full { grid-template-columns:1fr; }
@media(max-width:1024px) { .m-grid--main,.m-grid--wide,.m-grid--left { grid-template-columns:1fr; } }

/* ── SECTION HEADER ── */
.m-sh { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--cp); padding-bottom:10px; margin-bottom:18px; }
.m-sh__title {
  font-family:var(--fd); font-size:16px; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--ctext);
  display:flex; align-items:center; gap:8px;
}
.m-sh__title::before { content:''; display:inline-block; width:4px; height:20px; background:var(--cp); border-radius:2px; }
.m-sh__more {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cp); border:1.5px solid var(--cp); padding:4px 11px; border-radius:4px;
  transition:all var(--ease); white-space:nowrap;
}
.m-sh__more:hover { background:var(--cp); color:#fff; }

/* ── CARD ── */
.m-card { display:block; }
.m-card__img { overflow:hidden; border-radius:var(--r); background:var(--cbdr); }
.m-card__img img { width:100%; height:100%; object-fit:cover; transition:transform var(--slow); }
.m-card:hover .m-card__img img { transform:scale(1.04); }
.m-card__cat { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cp); border-left:2.5px solid var(--cp); padding-left:7px; margin:9px 0 6px; line-height:1; }
.m-card__title { font-family:var(--fd); font-weight:700; line-height:1.35; color:var(--ctext); transition:color var(--ease); }
.m-card:hover .m-card__title { color:var(--cp); }
.m-card__meta { font-size:11px; color:var(--cmut); margin-top:5px; }
.m-card__exc { font-size:13.5px; color:var(--cmut); line-height:1.6; margin-top:6px; }

/* Size variants */
.m-card--xl .m-card__img { aspect-ratio:16/10; }
.m-card--xl .m-card__title { font-size:clamp(18px,2.2vw,26px); }
.m-card--lg .m-card__img { aspect-ratio:16/10; }
.m-card--lg .m-card__title { font-size:clamp(15px,1.8vw,20px); }
.m-card--md .m-card__img { aspect-ratio:4/3; }
.m-card--md .m-card__title { font-size:15px; }
.m-card--sm { display:grid; grid-template-columns:82px 1fr; gap:12px; align-items:start; }
.m-card--sm .m-card__img { width:82px; height:58px; border-radius:8px; }
.m-card--sm .m-card__cat { margin:0 0 4px; }
.m-card--sm .m-card__title { font-size:13px; }

/* ── AD SLOT ── */
.m-ad {
  width:100%; min-height:90px; display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--cbdr); border-bottom:1px solid var(--cbdr);
  padding:12px 0; margin:20px 0; text-align:center; position:relative;
}
.m-ad::before {
  content:'IKLAN'; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--cmut);
  background:var(--cbg); padding:0 8px;
}

/* ── SINGLE ARTICLE ── */
#m-progress { position:fixed; top:0; left:0; height:3px; background:var(--cp); z-index:9999; width:0%; transition:width .1s linear; }

.m-art-header { padding-bottom:22px; border-bottom:1px solid var(--cbdr); margin-bottom:26px; }
.m-art-title { font-family:var(--fd); font-size:clamp(22px,4vw,42px); font-weight:900; line-height:1.2; letter-spacing:-.02em; color:var(--ctext); margin-bottom:14px; }
.m-art-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:12.5px; color:var(--cmut); }
.m-art-meta a.author { font-weight:700; color:var(--cp); }
.m-art-meta__author { font-weight:700; color:var(--cp); text-decoration:none; transition:color var(--ease); }
.m-art-meta__author:hover { color:var(--cs); }
.m-art-meta__sep { color:var(--cbdr); font-size:14px; opacity:.7; }

/* Featured image */
.m-feat-img { border-radius:var(--r); overflow:hidden; margin-bottom:6px; }
.m-feat-img img { width:100%; }
.m-feat-cap { font-size:12px; color:var(--cmut); font-style:italic; text-align:center; margin-bottom:26px; font-family:var(--fb); }

/* Table of Contents */
.m-toc {
  background:var(--cbg); border:1px solid var(--cbdr);
  border-left:4px solid var(--cp);
  border-radius:0 var(--rsm) var(--rsm) 0;
  padding:18px 22px; margin:28px 0;
}
.m-toc__ttl { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--cp); margin-bottom:12px; }
.m-toc ol { padding-left:20px; margin:0; display:flex; flex-direction:column; gap:6px; }
.m-toc li { font-size:13px; line-height:1.5; }
.m-toc li a { color:var(--ctext); transition:color var(--ease); }
.m-toc li a:hover { color:var(--cp); }
.m-toc li.h3 { margin-left:14px; font-size:12px; }

/* Entry content */
.m-entry { font-family:var(--fa); font-size:var(--fs); line-height:1.88; color:var(--ctext); }
.m-entry > p:first-of-type { font-size:1.04em; }
.m-entry > p:first-of-type::first-letter { float:none; font-size:inherit; font-weight:inherit; color:inherit; margin:0; padding:0; }
.m-lead { font-family:var(--fb); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.95em; }

/* DROP CAP — paragraf KEDUA */
.m-entry > p:nth-of-type(2)::first-letter {
  font-family:var(--fd); font-size:7em; font-weight:900;
  float:left; line-height:.82; margin:6px 14px 0 0;
  color:var(--cp); border-bottom:3px solid var(--cs);
  padding-bottom:2px; text-transform:uppercase;
}
.m-entry > p:nth-of-type(2)::after { content:''; display:table; clear:both; }

.m-entry p { margin-bottom:1.65em; }
.m-entry h2 { font-family:var(--fd); font-size:1.5em; font-weight:700; margin:2em 0 .7em; color:var(--ctext); border-left:4px solid var(--cp); padding-left:14px; }
.m-entry h3 { font-family:var(--fd); font-size:1.22em; font-weight:700; margin:1.8em 0 .65em; color:var(--ctext); }
.m-entry h4 { font-family:var(--fd); font-size:1.08em; font-weight:700; margin:1.5em 0 .6em; }
.m-entry blockquote { border-left:4px solid var(--cs); padding:14px 22px; margin:2em 0; background:rgba(197,151,42,.07); font-style:italic; font-size:1.06em; color:var(--cmut); border-radius:0 4px 4px 0; }
.m-entry a { color:var(--cp); text-decoration:underline; text-decoration-color:rgba(139,26,26,.3); text-underline-offset:3px; }
.m-entry a:hover { text-decoration-color:var(--cp); }
.m-entry ul,.m-entry ol { margin:1.2em 0 1.5em 1.6em; }
.m-entry li { margin-bottom:.5em; }
.m-entry img { border-radius:var(--rsm); margin:20px auto; }
.m-entry figcaption { font-size:12px; color:var(--cmut); text-align:center; font-style:italic; margin-top:6px; font-family:var(--fb); }
.m-entry table { border-collapse:collapse; width:100%; margin:1.5em 0; font-size:14px; }
.m-entry td,.m-entry th { border:1px solid var(--cbdr); padding:10px 14px; text-align:left; }
.m-entry th { background:var(--cbg); font-weight:700; font-family:var(--fb); }
.m-entry code { font-family:monospace; font-size:.88em; background:var(--cbg); padding:2px 6px; border-radius:3px; color:var(--cp); }
.m-entry pre { background:#1A1A1A; color:#E5E7EB; padding:20px; border-radius:var(--rsm); overflow-x:auto; font-size:13px; margin:1.5em 0; }

/* Share */
.m-share { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.m-share a,.m-share button {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:5px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; cursor:pointer; border:none;
  transition:opacity var(--ease), transform var(--ease);
}
.m-share a:hover,.m-share button:hover { opacity:.85; transform:translateY(-1px); }
.m-sh-fb { background:#1877F2; }
.m-sh-tw { background:#000; }
.m-sh-wa { background:#25D366; }
.m-sh-tg { background:#2AABEE; }
.m-sh-cp { background:transparent !important; border:1.5px solid var(--cbdr) !important; color:var(--ctext) !important; }

/* Author box */
.m-author { display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--cbg); border:1px solid var(--cbdr); border-radius:var(--r); margin-top:28px; }
.m-author__av { width:62px; height:62px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--cs); }
.m-author__av img { width:100%; height:100%; object-fit:cover; }
.m-author__lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cmut); margin-bottom:3px; }
.m-author__name { font-family:var(--fd); font-size:16px; font-weight:700; color:var(--cp); display:block; margin-bottom:5px; }
.m-author__bio { font-size:13px; color:var(--cmut); line-height:1.65; }

/* Post nav */
.m-postnav { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:36px; border:1px solid var(--cbdr); border-radius:var(--r); overflow:hidden; }
.m-postnav__item { padding:16px 18px; background:var(--csrf); transition:background var(--ease); display:flex; align-items:flex-start; gap:10px; }
.m-postnav__item:hover { background:var(--cbg); }
.m-postnav__item--next { flex-direction:row-reverse; text-align:right; }
.m-postnav__dir { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cmut); margin-bottom:3px; }
.m-postnav__title { font-family:var(--fd); font-size:13.5px; font-weight:700; color:var(--ctext); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--ease); }
.m-postnav__item:hover .m-postnav__title { color:var(--cp); }
@media(max-width:640px) { .m-postnav { grid-template-columns:1fr; } }

/* Related */
.m-related { margin-top:44px; padding-top:22px; border-top:2px solid var(--cp); }

/* ── SIDEBAR ── */
.m-sidebar { position:relative; }
.m-widget { margin-bottom:30px; }
.m-widget__title { font-family:var(--fd); font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; padding-bottom:8px; margin-bottom:14px; border-bottom:2px solid var(--cp); color:var(--ctext); display:flex; align-items:center; gap:7px; }
.m-widget__title::before { content:''; display:inline-block; width:3px; height:18px; background:var(--cp); border-radius:2px; }

/* Popular list */
.m-poplist { list-style:none; counter-reset:pop; }
.m-poplist li { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; padding:11px 0; border-bottom:1px solid var(--cbdr); counter-increment:pop; }
.m-poplist li:last-child { border-bottom:none; }
.m-poplist li::before { content:counter(pop,decimal-leading-zero); font-family:var(--fd); font-size:20px; font-weight:900; color:var(--cbdr); line-height:1.1; text-align:center; }
.m-poplist li:nth-child(1)::before { color:var(--cp); }
.m-poplist li:nth-child(2)::before { color:var(--cs); }
.m-poplist li a { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--ctext); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--ease); }
.m-poplist li a:hover { color:var(--cp); }
.m-poplist li time { font-size:10px; color:var(--cmut); display:block; margin-top:2px; }

/* Recent mini cards */
.m-recent { display:flex; flex-direction:column; }
.m-recent__item { display:grid; grid-template-columns:80px 1fr; gap:11px; padding:11px 0; border-bottom:1px solid var(--cbdr); }
.m-recent__item:last-child { border-bottom:none; }
.m-recent__img { width:80px; height:56px; border-radius:8px; overflow:hidden; background:var(--cbdr); }
.m-recent__img img { width:100%; height:100%; object-fit:cover; transition:transform var(--slow); }
.m-recent__item:hover .m-recent__img img { transform:scale(1.05); }
.m-recent__title { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--ctext); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--ease); }
.m-recent__item:hover .m-recent__title { color:var(--cp); }
.m-recent__time { font-size:10px; color:var(--cmut); display:block; margin-top:3px; }

/* Category badges */
.m-badges { display:flex; flex-wrap:wrap; gap:6px; }
.m-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1.5px solid var(--cbdr); border-radius:4px; font-size:11px; font-weight:700; color:var(--ctext); transition:all var(--ease); }
.m-badge:hover { border-color:var(--cp); color:var(--cp); background:#FFF5F5; }
.m-badge small { font-size:9px; color:var(--cmut); }

/* ── ARCHIVE ── */
.m-arc-banner { background:linear-gradient(135deg,var(--cp) 0%,#3D0A0A 100%); padding:44px 0; }
.m-arc-label { font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; }
.m-arc-title { font-family:var(--fd); font-size:clamp(26px,5vw,50px); font-weight:900; color:#fff; line-height:1.1; letter-spacing:-.02em; }
.m-arc-desc { font-size:14px; color:rgba(255,255,255,.7); max-width:600px; line-height:1.65; margin-top:8px; }

/* ── PAGINATION ── */
.m-pages { display:flex; justify-content:center; gap:5px; flex-wrap:wrap; padding:28px 0; }
.m-pages .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1.5px solid var(--cbdr); border-radius:5px; font-size:14px; font-weight:600; color:var(--ctext); transition:all var(--ease); }
.m-pages a.page-numbers:hover,.m-pages .page-numbers.current { background:var(--cp); border-color:var(--cp); color:#fff; }
.m-pages .dots { border-color:transparent; background:transparent; }

/* ── FOOTER ── */
/* ════════════════════════════════════════════════════════════
   FOOTER — Elegan, responsif, dikontrol via panel
   Variabel: --ft-bg, --ft-text, --ft-link, --ft-accent,
             --ft-border, --ft-btm-bg, --ft-ff, --ft-fs, --ft-hs
   ════════════════════════════════════════════════════════════ */
.m-footer {
  background: var(--ft-bg, var(--cftr));
  color: var(--ft-text, rgba(255,255,255,.62));
  font-family: var(--ft-ff, var(--fb));
  font-size: var(--ft-fs, 13px);
  margin-top: 52px;
}

/* ── TOP: area 4 kolom ── */
.m-footer__top {
  padding: clamp(36px,6vw,64px) 0 clamp(32px,5vw,56px);
  border-bottom: 1px solid var(--ft-border, rgba(255,255,255,.07));
}
.m-footer__grid {
  display: grid;
  gap: clamp(24px,4vw,44px);
  /* Grid dikontrol via class .m-footer--{layout} di bawah */
  grid-template-columns: repeat(4, minmax(0,1fr)); /* fallback */
}
/* Grid per layout */
.m-footer--4col .m-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.m-footer--3col .m-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
.m-footer--2col .m-footer__grid { grid-template-columns: 1.2fr 1fr; }
.m-footer--centered .m-footer__grid { grid-template-columns: 1fr; text-align:center; }
.m-footer--centered .m-footer__social { justify-content:center; }

/* ── Brand kolom ── */
.m-footer__brand-col { display:flex; flex-direction:column; gap:0; }
.m-footer__logo-wrap { margin-bottom: 14px; }
.m-footer__logo-img { display:block; max-height:42px; width:auto; }
.m-footer__logo-img--invert { filter:brightness(0) invert(1); opacity:.88; }
.m-footer__logo-text {
  font-family: var(--fd);
  font-size: clamp(20px,3vw,26px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}
.m-footer__logo-text span { color:#fff; }
.m-footer__logo-text em { color:var(--ft-accent,var(--cs)); font-style:normal; }

.m-footer__desc {
  font-size: var(--ft-fs, 13px);
  color: var(--ft-text, rgba(255,255,255,.45));
  line-height: 1.72;
  margin-bottom: 6px;
  max-width: 280px;
}
.m-footer__tagline {
  font-size: 11.5px;
  color: rgba(255,255,255,.28);
  font-style: italic;
  letter-spacing: .04em;
  margin-bottom: 0;
}
.m-footer--centered .m-footer__desc,
.m-footer--centered .m-footer__tagline { max-width:none; }

/* ── Sosial ── */
.m-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.m-footer__sb {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform .15s;
  text-decoration: none;
}
.m-footer__sb:hover {
  background: var(--ft-accent, var(--cp));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
.m-footer__no-social {
  font-size:11px; margin-top:12px;
}
.m-footer__no-social a { color:rgba(255,255,255,.25); }
.m-footer__no-social a:hover { color:var(--cs); }

/* ── Nav kolom ── */
.m-footer__nav-col {}
.m-footer__col-ttl {
  font-size: var(--ft-hs, 10px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ft-border, rgba(255,255,255,.07));
}

/* Links — 2 kolom jika banyak item */
.m-footer__links {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.m-footer__links--2col { grid-template-columns: 1fr 1fr; }
.m-footer__links li a {
  display: block;
  font-size: var(--ft-fs, 13px);
  color: var(--ft-link, rgba(255,255,255,.5));
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color var(--ease), padding-left .15s;
  text-decoration: none;
}
.m-footer__links li a:hover {
  color: var(--ft-accent, var(--cs));
  padding-left: 5px;
}
.m-footer__links li:last-child a { border-bottom: none; }

/* ── RSS kolom ── */
.m-footer__rss-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
  line-height: 1.68;
  margin-bottom: 16px;
}
.m-footer__rss-btns { display:flex; flex-direction:column; gap:9px; }
.m-footer__rss-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  transition: all .18s;
}
.m-footer__rss-btn--primary {
  background: var(--ft-accent, var(--cp));
  color: #fff;
  border: 2px solid transparent;
}
.m-footer__rss-btn--primary:hover { opacity:.85; transform:translateY(-1px); }
.m-footer__rss-btn--secondary {
  background: transparent;
  color: rgba(255,255,255,.45);
  border: 1.5px solid rgba(255,255,255,.14);
}
.m-footer__rss-btn--secondary:hover {
  border-color: var(--ft-accent, var(--cs));
  color: var(--ft-accent, var(--cs));
}

/* ── Bottom bar ── */
.m-footer__btm-wrap {
  background: var(--ft-btm-bg, rgba(0,0,0,.22));
  border-top: 1px solid var(--ft-border, rgba(255,255,255,.06));
}
.m-footer__btm {
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,.28);
}
.m-footer__copy a { color:rgba(255,255,255,.38); text-decoration:none; }
.m-footer__copy a:hover { color:var(--cs); }
.m-footer__legal { display:flex; flex-wrap:wrap; gap:0; list-style:none; }
.m-footer__legal li a {
  color: rgba(255,255,255,.28);
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,.1);
  font-size: 11px;
  text-decoration: none;
  transition: color var(--ease);
}
.m-footer__legal li:last-child a { border-right:none; }
.m-footer__legal li a:hover { color:var(--cs); }
.m-footer__powered a { color:rgba(255,255,255,.2); }
.m-footer__powered a:hover { color:rgba(255,255,255,.4); }

/* ════════════ RESPONSIVE ════════════ */

/* Tablet: 2 kolom */
@media (max-width:960px) {
  .m-footer--4col .m-footer__grid { grid-template-columns: 1fr 1fr; }
  .m-footer--3col .m-footer__grid { grid-template-columns: 1fr 1fr; }
  .m-footer__links--2col { grid-template-columns: 1fr; }
}

/* Mobile lebar: 2 kolom */
@media (max-width:700px) {
  .m-footer--4col .m-footer__grid,
  .m-footer--3col .m-footer__grid,
  .m-footer--2col .m-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
  /* Brand kolom: full width */
  .m-footer--4col .m-footer__brand-col,
  .m-footer--3col .m-footer__brand-col {
    grid-column: 1 / -1;
  }
  .m-footer__desc { max-width: none; }
  .m-footer__btm { flex-direction:column; align-items:flex-start; gap:8px; }
  .m-footer__legal { gap:0; }
}

/* Mobile kecil: 1 kolom */
@media (max-width:420px) {
  .m-footer--4col .m-footer__grid,
  .m-footer--3col .m-footer__grid,
  .m-footer--2col .m-footer__grid { grid-template-columns:1fr; }
  .m-footer__top { padding:28px 0 24px; }
  .m-footer__rss-btns { flex-direction:row; flex-wrap:wrap; }
}

/* ── UTILITY ── */
.lc2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lc4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

#m-btt { position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:var(--cp); color:#fff; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(139,26,26,.4); z-index:500; transition:all var(--ease); }
#m-btt.on { display:flex; }
#m-btt:hover { background:var(--cpd); transform:translateY(-2px); }

@keyframes fdIn { from{opacity:0} to{opacity:1} }

/* Dark mode patches */
[data-theme="dark"] .m-header { background:#1A1A1A; }
[data-theme="dark"] .m-card__title { color:#E5E7EB; }
[data-theme="dark"] .m-sh__title { color:#E5E7EB; }
[data-theme="dark"] .m-art-title { color:#F0EDE8; }
[data-theme="dark"] .m-entry { color:#D0CCC5; }
[data-theme="dark"] .m-widget__title { color:#E5E7EB; }
[data-theme="dark"] .m-toc { background:#1A1A1A; border-color:#2D2D2D; }
[data-theme="dark"] .m-author { background:#1A1A1A; border-color:#2D2D2D; }
[data-theme="dark"] .m-poplist li a,.m-recent__title { color:#E5E7EB; }
[data-theme="dark"] .mfb-btn { background:rgba(255,255,255,.12); }
[data-theme="dark"] .mfb-counter { background:rgba(0,0,0,.5); }

/* Responsive */
@media(max-width:768px) {
  .m-header__wrap { height:56px; }
  .m-postnav { grid-template-columns:1fr; }
  .m-entry { font-size:15.5px; }
  .m-entry > p:nth-of-type(2)::first-letter { font-size:5.5em; line-height:.82; }
  .m-card--sm { grid-template-columns:70px 1fr; }
  .m-card--sm .m-card__img { width:70px; height:52px; }
}

/* Custom blocks */
.m-ib { display:flex; gap:13px; align-items:flex-start; padding:15px 20px; margin:22px 0; }
.m-ib__icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex-shrink:0; }
.m-ib__title { font-weight:700; font-size:14px; margin-bottom:5px; color:#1F2937; }
.m-ib__body { font-size:14px; line-height:1.7; color:#374151; }

.m-pq { text-align:center; padding:26px 30px; margin:30px 0; }
.m-pq__mark { font-size:50px; line-height:1; font-family:Georgia,serif; margin-bottom:4px; }
.m-pq blockquote { font-family:Georgia,serif; font-style:italic; font-size:1.32em; line-height:1.6; margin:0 0 12px; }
.m-pq cite { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-style:normal; display:block; }

.m-stat-row { display:grid; gap:13px; margin:26px 0; }
.m-stat { padding:18px; text-align:center; border-radius:10px; }
.m-stat__num { font-family:Georgia,serif; font-size:2em; font-weight:900; line-height:1; }
.m-stat__lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#6B7280; margin-top:5px; }

.m-tl { margin:26px 0; }
.m-tl__hd { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.15em; color:var(--cp); border-left:3px solid var(--cp); padding-left:10px; margin-bottom:18px; }
.m-tl__body { position:relative; padding-left:26px; border-left:2px solid var(--cbdr); }
.m-tl__item { position:relative; margin-bottom:18px; }
.m-tl__dot { position:absolute; left:-33px; width:13px; height:13px; border-radius:50%; border:2px solid #fff; top:4px; }
.m-tl__time { font-size:11px; font-weight:700; margin-bottom:3px; }
.m-tl__text { font-size:14px; color:#374151; line-height:1.6; }

.m-ns { display:flex; gap:10px; align-items:flex-start; padding:18px 22px; margin:26px 0; border-radius:0 8px 8px 0; }
.m-sep { text-align:center; padding:22px 0; margin:6px 0; }

/* ══════════════════════════════════════════════════════════════
   PRINT — @media print
   Menghasilkan output cetak 2 kolom rapi seperti tampilan layar.
   Dropcap dipertahankan. Teks mengalir natural antar kolom.
   ══════════════════════════════════════════════════════════════ */
@media print {

    /* ── 1. Sembunyikan elemen non-konten ── */
    .m-header, .m-nav, .m-ticker, .m-hero, .m-flipbook,
    .m-sidebar, .m-footer, .m-ad, .m-related, .m-share,
    .m-ad-breakout, .m-hero-widget-area, .m-headline-slider-wrap,
    .m-headline-grid-wrap, #m-btt, #m-progress, #m-toc-toggle,
    .mfb-btn, .mfb-dots, .mfb-counter, .mfb-spine,
    .m-postnav, .m-breaking, .m-comments-wrap,
    nav, button, .m-hamburger { display: none !important; }

    /* ── 2. Reset dasar halaman — TANPA override warna global ── */
    html, body {
        margin: 0;
        padding: 0;
        font-size: 11pt;
        line-height: 1.6;
        background: #fff !important;
        color: #000 !important;
    }

    .m-wrap {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── 3. Pertahankan 2 kolom saat cetak — persis seperti layar ── */
    .m-entry--col-2,
    .m-entry--col-mobile-2,
    [data-template="book"] .m-entry,
    [data-template="newspaper-clean"] .m-entry {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        -webkit-column-width: 140px !important;
        column-width: 140px !important;
        column-gap: 20pt !important;
        -webkit-column-gap: 20pt !important;
        column-rule: 0.5pt solid #ccc !important;
    }
    .m-entry--col-3,
    .m-entry--col-mobile-3,
    [data-template="tabloid"] .m-entry {
        -webkit-column-count: 3 !important;
        column-count: 3 !important;
        -webkit-column-width: 90px !important;
        column-width: 90px !important;
        column-gap: 14pt !important;
        -webkit-column-gap: 14pt !important;
        column-rule: 0.5pt solid #ccc !important;
    }

    /* ── 4. Konten artikel ── */
    .m-entry {
        font-size: 11pt;
        line-height: 1.75;
        max-width: 100% !important;
        color: #000 !important;
    }

    /* Paragraf boleh terpotong wajar antar halaman/kolom */
    .m-entry p,
    .m-entry li {
        break-inside: auto;
        orphans: 3;
        widows: 3;
        color: #000 !important;
    }

    /* Heading tidak terputus dari paragraf berikutnya */
    .m-entry h2,
    .m-entry h3,
    .m-entry h4 {
        break-after: avoid;
        break-inside: avoid;
        column-span: all;
        color: #000 !important;
        border-color: #ccc !important;
    }

    /* ── 5. Gambar ── */
    .m-entry img {
        max-width: 100% !important;
        height: auto !important;
        break-inside: avoid;
        display: block;
    }
    .m-entry figure { break-inside: avoid; page-break-inside: avoid; }
    .m-entry figcaption { font-size: 9pt; color: #555 !important; text-align: center; }

    /* ── 6. Gambar utama artikel — span 2 kolom ── */
    .m-feat-img,
    .m-entry > figure:first-child,
    .m-entry > .wp-block-image:first-child {
        column-span: all;
        -webkit-column-span: all;
        margin-bottom: 14pt;
    }

    /* ── 7. Dropcap — pertahankan persis seperti di layar ── */
    .m-entry > p:nth-of-type(2)::first-letter {
        font-family: var(--fd, Georgia, serif) !important;
        font-size: 7em !important;
        font-weight: 900 !important;
        float: left !important;
        line-height: .82 !important;
        margin: 6px 14px 0 0 !important;
        color: var(--cp, #8B1A1A) !important;
        border-bottom: 3px solid var(--cs, #C5972A) !important;
        padding-bottom: 2px !important;
        text-transform: uppercase !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── 8. Pull Quote & Kutipan Narasumber ── */
    .m-pq {
        border: 1.5pt solid #bbb !important;
        border-left: 4pt solid #555 !important;
        background: transparent !important;
        padding: 10pt 14pt !important;
        margin: 12pt 0 !important;
        break-inside: avoid;
    }
    .m-pq blockquote { font-size: 12pt !important; color: #111 !important; }
    .m-ns {
        border-left: 4pt solid #aaa !important;
        background: transparent !important;
        padding: 8pt 12pt !important;
        break-inside: avoid;
    }

    /* ── 9. Judul artikel ── */
    .m-single-title, .entry-title, h1 {
        font-size: 20pt !important;
        line-height: 1.3 !important;
        color: #000 !important;
        break-after: avoid;
        column-span: all;
        -webkit-column-span: all;
    }

    /* ── 10. Meta artikel ── */
    .m-entry-meta, .m-byline {
        font-size: 9pt;
        color: #555 !important;
        margin-bottom: 10pt;
        column-span: all;
        -webkit-column-span: all;
    }

    /* ── 11. Konten utama full-width ── */
    .m-single-wrap, .m-content, main, article {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    /* ── 12. Sembunyikan URL tautan & watermark ── */
    .m-entry a[href]::after { content: "" !important; }
    .m-wm-logo { display: none !important; }

}



/* ══════════════════════════════════════════════════════════════
   FIX: Responsive tanpa bergantung Tailwind CDN
   ══════════════════════════════════════════════════════════════ */

/* Desktop nav tampil, mobile nav sembunyi di desktop */
.m-nav-desktop { display:block; }
.m-hamburger   { display:inline-flex; } /* tombol hamburger selalu ada */

@media (min-width:1024px) {
  /* Desktop: hamburger sembunyi, nav desktop tampil */
  .m-hamburger { display:none !important; }
  .m-mobile    { display:none !important; }
}
@media (max-width:1023px) {
  /* Mobile: nav desktop sembunyi */
  .m-nav-desktop { display:none !important; }
}

/* ── Dark Mode: pastikan CSS custom props override Tailwind ── */
[data-theme="dark"] {
  color-scheme: dark;
  background-color: var(--cbg) !important;
  color: var(--ctext) !important;
}
[data-theme="dark"] body {
  background-color: var(--cbg);
  color: var(--ctext);
}
[data-theme="dark"] .m-sticky,
[data-theme="dark"] #m-sticky {
  background: var(--csrf) !important;
}
[data-theme="dark"] .m-nav,
[data-theme="dark"] .m-nav-desktop { background: var(--cnav) !important; }
[data-theme="dark"] .m-footer { background: var(--cftr) !important; }
[data-theme="dark"] .m-card,
[data-theme="dark"] .m-widget,
[data-theme="dark"] .m-related { background: var(--csrf); border-color: var(--cbdr); }
[data-theme="dark"] a:not(.m-sh-fb):not(.m-sh-tw):not(.m-sh-wa):not(.m-sh-tg) { color: inherit; }

/* ============================================================
   BUG FIXES — Tambahan utility class yang hilang
   ============================================================ */

/* .hidden — dibutuhkan oleh tabbed layout di index.php sebelum Tailwind CDN dimuat */
.hidden { display: none !important; }

/* .sm-thumb — thumbnail di layout minimal, tampil pada layar >= 480px */
.sm-thumb { display: none; }
@media (min-width: 480px) { .sm-thumb { display: block; } }


/* ============================================================
   ARTICLE TEMPLATES — 5 style dari panel
   ============================================================ */

/* ── Standard (default) ── */
[data-template="standard"] .m-art-title { font-size:clamp(22px,4.5vw,38px); }

/* ── Book / Magazine ── */
[data-template="book"] {
    font-family: Georgia, 'Times New Roman', serif;
}
[data-template="book"] .m-art-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(24px,4vw,40px);
    font-weight: 700;
    letter-spacing: -.01em;
    border-bottom: 2px solid var(--cp);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
[data-template="book"] .m-entry {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.85;
    column-gap: 36px;
}
/* book: 2 kolom di semua ukuran, tahan zoom */
[data-template="book"] .m-entry {
    -webkit-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-width: 140px !important;
    column-width: 140px !important;
}
@media(max-width:480px) {
    [data-template="book"] .m-entry {
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
        -webkit-column-width: auto !important;
        column-width: auto !important;
    }
}
[data-template="book"] .m-entry p { text-indent: 1.4em; margin-bottom: 0; }
[data-template="book"] .m-entry p:first-child { text-indent: 0; }

/* ── Tabloid ── */
[data-template="tabloid"] .m-art-title {
    font-size: clamp(28px,6vw,52px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.03em;
    color: var(--ctext);
}
[data-template="tabloid"] .m-art-header {
    border-bottom: 4px solid var(--cp);
    padding-bottom: 16px;
    margin-bottom: 20px;
}
[data-template="tabloid"] .m-entry {
    font-size: 15px;
    line-height: 1.65;
    column-gap: 28px;
    column-rule: 1px solid var(--cbdr);
}
/* tabloid: 2 kolom mobile, 3 kolom desktop — tahan zoom */
@media(min-width:1px) {
    [data-template="tabloid"] .m-entry {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        -webkit-column-width: 130px !important;
        column-width: 130px !important;
    }
}
@media(max-width:400px) {
    [data-template="tabloid"] .m-entry {
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
        -webkit-column-width: auto !important;
        column-width: auto !important;
    }
}
@media(min-width:960px) {
    [data-template="tabloid"] .m-entry {
        -webkit-column-count: 3 !important;
        column-count: 3 !important;
        -webkit-column-width: 90px !important;
        column-width: 90px !important;
    }
}
[data-template="tabloid"] figure img {
    filter: contrast(1.05) saturate(1.1);
}

/* ── Magazine Top (hero image above title) ── */
[data-template="magazine-top"] .m-art-title {
    font-size: clamp(22px,4.5vw,42px);
    font-weight: 900;
    letter-spacing: -.025em;
}

/* ── Newspaper Clean ── */
[data-template="newspaper-clean"] .m-entry {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.75;
    column-gap: 32px;
    column-rule: 1px solid var(--cbdr);
}
/* newspaper-clean: 2 kolom mulai 480px, 3 kolom desktop — tahan zoom */
@media(min-width:480px) {
    [data-template="newspaper-clean"] .m-entry {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        -webkit-column-width: 140px !important;
        column-width: 140px !important;
    }
}
@media(min-width:960px) {
    [data-template="newspaper-clean"] .m-entry {
        -webkit-column-count: 3 !important;
        column-count: 3 !important;
        -webkit-column-width: 90px !important;
        column-width: 90px !important;
    }
}
[data-template="newspaper-clean"] .m-art-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(24px,4vw,40px);
    font-weight: 700;
    text-align: center;
    border-top: 3px double var(--ctext);
    border-bottom: 1px solid var(--ctext);
    padding: 12px 0;
    margin-bottom: 20px;
    letter-spacing: .01em;
}
[data-template="newspaper-clean"] .m-art-header {
    text-align: center;
}
[data-template="newspaper-clean"] .m-art-meta {
    justify-content: center;
}

/* ── RECENT POSTS SECTION (single.php after comments) ── */
@media (max-width: 680px) {
  .m-recent-posts > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .m-recent-posts > div[style*="grid-template-columns: 1fr 1fr"] > div[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--cbdr);
    padding-top: 16px;
    margin-top: 4px;
  }
  .m-recent-posts > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  .m-recent-posts > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════
   KOLOM TEKS MANUAL — dari Setting Panel "Kolom Teks Artikel"
   Class ditambahkan ke .m-entry oleh single.php
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   LAYOUT KOLOM ARTIKEL — Tahan zoom hingga 120%
   WAJIB: pisahkan column-count dan column-width sebagai
   properti terpisah — shorthand "columns: 2 140px" tidak
   didukung konsisten di semua browser mobile.
   ════════════════════════════════════════════════════════ */

/* 2 kolom — berlaku di semua layar termasuk HP zoom 120% */
.m-entry--col-2 {
    -webkit-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-width: 140px !important;
    column-width: 140px !important;
    column-gap: 24px;
    -webkit-column-gap: 24px;
    column-rule: 1px solid var(--cbdr);
}

/* 3 kolom — berlaku di semua layar */
.m-entry--col-3 {
    -webkit-column-count: 3 !important;
    column-count: 3 !important;
    -webkit-column-width: 90px !important;
    column-width: 90px !important;
    column-gap: 16px;
    -webkit-column-gap: 16px;
    column-rule: 1px solid var(--cbdr);
}

/* Pastikan container artikel tidak menyempit */
.m-entry--col-2,
.m-entry--col-3 {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 2 kolom — HANYA mobile (≤768px), desktop tetap 1 kolom */
@media(min-width:769px) {
    .m-entry--col-mobile-2,
    .m-entry--col-mobile-3 {
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
    }
}
@media(max-width:768px) {
    .m-entry--col-mobile-2 {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        -webkit-column-width: 130px !important;
        column-width: 130px !important;
        column-gap: 16px;
        column-rule: 1px solid var(--cbdr);
    }
    .m-entry--col-mobile-3 {
        -webkit-column-count: 3 !important;
        column-count: 3 !important;
        -webkit-column-width: 85px !important;
        column-width: 85px !important;
        column-gap: 10px;
        column-rule: 1px solid var(--cbdr);
    }
}

/* Ukuran font kolom diperkecil agar teks tidak terpotong */
.m-entry--col-2,
.m-entry--col-mobile-2,
[data-template="book"] .m-entry,
[data-template="newspaper-clean"] .m-entry {
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.78;
}
.m-entry--col-3,
.m-entry--col-mobile-3,
[data-template="tabloid"] .m-entry {
    font-size: clamp(12px, 1.5vw, 15px);
    line-height: 1.65;
}

/* Gambar dalam kolom: tidak keluar dari kolom */
.m-entry--col-2 img,
.m-entry--col-3 img,
.m-entry--col-mobile-2 img,
.m-entry--col-mobile-3 img {
    width: 100%;
    break-inside: avoid;
    column-span: none;
}

/* Heading span semua kolom */
.m-entry--col-2 h2,
.m-entry--col-3 h2,
.m-entry--col-mobile-2 h2,
.m-entry--col-mobile-3 h2 {
    column-span: all;
    border-left: none;
    border-top: 3px double var(--ctext);
    border-bottom: 1px solid var(--cbdr);
    padding: 10px 0 8px;
    margin: 1.5em 0 .8em;
    text-align: center;
    letter-spacing: .01em;
}

/* Drop cap tetap terlihat di kolom */
.m-entry--col-2 > p:nth-of-type(2)::first-letter,
.m-entry--col-3 > p:nth-of-type(2)::first-letter,
.m-entry--col-mobile-2 > p:nth-of-type(2)::first-letter,
.m-entry--col-mobile-3 > p:nth-of-type(2)::first-letter {
    font-size: 2.8em;
}

/* Blokquote tetap dalam kolom — tidak keluar memanjang */
.m-entry--col-2 blockquote,
.m-entry--col-3 blockquote,
.m-entry--col-mobile-2 blockquote,
.m-entry--col-mobile-3 blockquote {
    column-span: none;
    -webkit-column-span: none;
    break-inside: avoid;
    margin: 1.2em 0;
    /* Pastikan lebar tidak melebihi kolom */
    width: 100%;
    box-sizing: border-box;
}

/* Pull Quote Medialis dalam kolom: tetap proporsional, tidak memanjang */
.m-entry--col-2 .m-pq,
.m-entry--col-3 .m-pq,
.m-entry--col-mobile-2 .m-pq,
.m-entry--col-mobile-3 .m-pq {
    column-span: none;
    -webkit-column-span: none;
    break-inside: avoid;
    width: 100%;
    box-sizing: border-box;
    margin: 1.2em 0;
    padding: 18px 20px;
}
.m-entry--col-2 .m-pq blockquote,
.m-entry--col-3 .m-pq blockquote,
.m-entry--col-mobile-2 .m-pq blockquote,
.m-entry--col-mobile-3 .m-pq blockquote {
    font-size: 1.1em;
}

/* Kutipan Narasumber (m-ns) dalam kolom: tetap dalam kolom */
.m-entry--col-2 .m-ns,
.m-entry--col-3 .m-ns,
.m-entry--col-mobile-2 .m-ns,
.m-entry--col-mobile-3 .m-ns {
    column-span: none;
    -webkit-column-span: none;
    break-inside: avoid;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 0.95em;
}

/* Layar SANGAT kecil (<280px): paksa 1 kolom */
@media(max-width:280px) {
    .m-entry--col-2,
    .m-entry--col-3,
    .m-entry--col-mobile-2,
    .m-entry--col-mobile-3 { -webkit-columns: 1 !important; columns: 1 !important; }
}


/* ── SLOT IKLAN BAWAH FLIPBOOK ── */
.m-ad-flip-wrap {
  padding: 12px 0 8px !important;
}
.m-ad-flip-wrap .m-ad {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
}
/* Banner gambar custom */
.m-ad-flip-wrap .m-ad img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r, 4px);
}
/* Responsive: banner ≤ lebar layar */
.m-ad-flip-wrap .m-ad ins,
.m-ad-flip-wrap .m-ad > * {
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
   IKLAN BREAKOUT — full-width di dalam layout 2/3 kolom
   Teknik: column-span:all + clear:both + negatif margin
   ════════════════════════════════════════════════════════════ */

/* Base breakout — berlaku di semua layout */
.m-ad-breakout {
  /* Keluar dari CSS columns */
  column-span: all;
  -webkit-column-span: all;

  /* Reset margin/padding kolom */
  width: 100%;
  clear: both;
  float: none;
  display: block;

  /* Jarak vertikal */
  margin: 1.5em 0;
  padding: 0;

  /* Label iklan */
  position: relative;
}

/* Label "IKLAN" kecil di atas */
.m-ad-breakout::before {
  content: 'IKLAN';
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cmut, #9ca3af);
  margin-bottom: 5px;
}

/* Konten iklan: center + max-width */
.m-ad-breakout > *,
.m-ad-breakout ins,
.m-ad-breakout a,
.m-ad-breakout img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

/* Gambar iklan responsif */
.m-ad-breakout img {
  width: 100%;
  border-radius: var(--r, 4px);
}

/* ── Slot 6: Atas artikel — border separator ── */
.m-ad-breakout--top {
  margin-top: 0;
  margin-bottom: 1.8em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--cbdr, #e5e7eb);
}
.m-ad-breakout--top::before {
  margin-bottom: 8px;
}

/* ── Fallback untuk browser yang tidak support column-span:all ──
   Gunakan transform + full-viewport-width trick */
@supports not (column-span: all) {
  .m-entry--col-2 .m-ad-breakout,
  .m-entry--col-3 .m-ad-breakout,
  .m-entry--col-mobile-2 .m-ad-breakout,
  .m-entry--col-mobile-3 .m-ad-breakout {
    /* Tidak bisa breakout — tampilkan normal saja */
    width: 100%;
    margin: 1.2em 0;
  }
}

/* ── Pastikan .m-ad-breakout TIDAK berada di dalam .m-entry ──
   single.php sudah menaruhnya di luar div.m-entry
   CSS ini untuk keamanan extra */
.m-entry .m-ad-breakout {
  column-span: all;
  width: 100%;
}

/* ── AdSense ins element ── */
.m-ad-breakout ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile: kurangi margin */
@media (max-width: 600px) {
  .m-ad-breakout { margin: 1em 0; }
  .m-ad-breakout--top { margin-bottom: 1.2em; }
}

/* ════════════════════════════════════════════════════════════
   HERO WIDGET AREA — alternatif flipbook di homepage
   ════════════════════════════════════════════════════════════ */
.m-hero-widget-area {
  margin: 0 0 8px;
}
.m-hero-widget {
  margin-bottom: 24px;
}
.m-hero-widget:last-child { margin-bottom: 0; }
.m-hero-widget__title {
  font-family: var(--fd);
  font-size: clamp(1rem,2.5vw,1.4rem);
  font-weight: 800;
  border-left: 4px solid var(--cp);
  padding-left: 12px;
  margin-bottom: 16px;
  color: var(--ctext);
}

/* ── Slot iklan: tidak punya dimensi jika kosong ──
   .m-ad hanya muncul jika medialis_ad() mengisi konten */
.m-ad {
  text-align: center;
}
.m-ad:empty { display: none !important; }

/* Slot iklan 5 (bawah flipbook) */
.m-ad--slot-5 {
  padding: 8px 0 4px;
}
/* Slot iklan 1 (banner atas konten) */
.m-ad--slot-1 {
  padding: 4px 0 8px;
}
/* Jika slot kosong, sembunyikan wrap-nya juga */
.m-wrap:has(.m-ad:empty) { display: none !important; }

/* Fallback untuk browser tanpa :has() */
@supports not selector(:has(*)) {
  .m-wrap { min-height: 0; }
}

/* Responsif iklan */
.m-ad img,
.m-ad ins { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════
   HEADLINE SLIDER & HEADLINE GRID — Blok Widget Hero Opsional
   Digunakan di widget area "Headline Opsional" ketika flipbook
   tidak aktif. Shortcode: [medialis_headline_slider] dan
   [medialis_headline_grid].
   ══════════════════════════════════════════════════════════════ */

/* Wrapper area widget hero */
.m-hero-widget-area {
    margin-bottom: 20px;
}

/* ── Headline Slider ── */
.m-headline-slider-wrap {
    width: 100%;
    border-radius: var(--r, 8px);
    overflow: hidden;
}
.m-headline-slider {
    user-select: none;
    -webkit-user-select: none;
}
.m-headline-slider .mhs-prev,
.m-headline-slider .mhs-next {
    opacity: 0;
    transition: opacity .25s;
}
.m-headline-slider:hover .mhs-prev,
.m-headline-slider:hover .mhs-next {
    opacity: 1;
}
@media (max-width: 600px) {
    .m-headline-slider .mhs-prev,
    .m-headline-slider .mhs-next {
        display: none !important;
    }
}

/* ── Headline Grid ── */
.m-headline-grid-wrap {
    width: 100%;
}
.m-headline-grid article a:hover h3,
.m-headline-grid article a:focus h3 {
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 640px) {
    .m-headline-grid--featured-4 > div,
    .m-headline-grid--featured-2 > div > div:first-child,
    .m-headline-grid--magazine > div > div:first-child {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    .m-headline-grid--featured-4 > div > div:first-child {
        grid-row: auto !important;
        height: 200px;
    }
    .m-headline-grid--featured-4 > div > div:not(:first-child),
    .m-headline-grid--featured-2 > div > div:last-child,
    .m-headline-grid--magazine > div > div:last-child {
        display: none;
    }
    .m-headline-grid--grid-3 > div {
        grid-template-columns: 1fr !important;
    }
    .m-headline-grid--grid-3 > div > div:not(:first-child) {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   WATERMARK THUMBNAIL — CSS Overlay
   Wrapper .m-wm-wrap diinjeksi via filter post_thumbnail_html
   saat mode "Semua Thumbnail" aktif. Gambar asli tidak diubah.
   ══════════════════════════════════════════════════════════════ */
.m-wm-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0; /* hapus gap bawah img */
}

.m-wm-wrap img:first-child {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-wm-logo {
    position: absolute;
    pointer-events: none;
    max-width: none;     /* jangan dibatasi parent */
    z-index: 2;
    /* opacity & ukuran diset inline via PHP */
}

/* Pastikan tidak mengganggu aspect ratio card */
.m-card .m-wm-wrap,
.m-hero .m-wm-wrap,
.m-flipbook .m-wm-wrap {
    width: 100%;
    height: 100%;
}

/* Sembunyikan di print — sudah tercakup di @media print utama */

/* ══════════════════════════════════════════════════════════════
   MEDIALIS WEEKLY STORY
   Thumbnail strip + full-screen story viewer
   ══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.m-weekly {
    margin: 24px 0;
}
.m-weekly__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.m-weekly__title {
    font-family: var(--fd, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--ctext);
    margin: 0;
    padding-left: 10px;
    border-left: 4px solid var(--cp);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.m-weekly__more {
    font-size: .78rem;
    font-weight: 700;
    color: var(--cp);
    text-decoration: none;
    letter-spacing: .04em;
}
.m-weekly__more:hover { text-decoration: underline; }

/* ── Thumbnail strip (horizontal scroll) ── */
.m-weekly__strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.m-weekly__strip::-webkit-scrollbar { display: none; }

/* ── Thumbnail card ── */
.m-weekly__thumb {
    flex: 0 0 160px;
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #1e293b;
    transition: transform .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
}
.m-weekly__thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.m-weekly__thumb:focus-visible {
    outline: 3px solid var(--cp);
    outline-offset: 2px;
}
.m-weekly__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.m-weekly__thumb:hover img { transform: scale(1.06); }

/* Ring animasi — mirip Instagram story belum dibaca */
.m-weekly__thumb::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cp) 0%, var(--cs, #C5972A) 100%);
    z-index: 0;
    opacity: 1;
}
.m-weekly__thumb::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 11px;
    background: var(--cbg, #fff);
    z-index: 1;
}
.m-weekly__thumb img,
.m-weekly__thumb-overlay {
    position: relative;
    z-index: 2;
}

.m-weekly__thumb-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 9px;
}
.m-weekly__thumb-periode {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 4px;
    display: block;
}
.m-weekly__thumb-title {
    font-family: var(--fd, Georgia, serif);
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   STORY VIEWER — Full-screen overlay
   ══════════════════════════════════════════════════════════════ */

/* Lock scroll saat viewer terbuka */
body.m-story-open {
    overflow: hidden;
}

.m-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: none;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.m-story-viewer.is-open {
    display: flex;
    opacity: 1;
    pointer-events: all;
}
.m-story-viewer.is-closing {
    display: flex;
    opacity: 0;
    pointer-events: none;
}

/* ── Progress bars ── */
.m-story-progress {
    display: flex;
    gap: 4px;
    padding: 10px 12px 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.m-story-progress__bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    overflow: hidden;
}
.m-story-progress__fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
}

/* ── Header ── */
.m-story-header {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}
.m-story-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.m-story-brand__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp, #8B1A1A) 0%, var(--cs, #C5972A) 100%);
    border: 2px solid #fff;
    display: block;
}
.m-story-brand__name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.m-story-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
}
.m-story-close:hover { background: rgba(0,0,0,.7); }

/* ── Slides container ── */
.m-story-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Individual slide ── */
.m-story-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.m-story-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* Background image */
.m-story-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/* Gradient overlay */
.m-story-slide__grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.08) 70%,
        transparent 100%
    );
}

/* Content area */
.m-story-slide__content {
    position: relative;
    z-index: 2;
    padding: 28px 22px 48px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.m-story-slide__cat {
    display: inline-block;
    background: var(--cp, #8B1A1A);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.m-story-slide__meta {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.m-story-slide__title {
    font-family: var(--fd, Georgia, serif);
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 12px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.m-story-slide__excerpt {
    font-size: clamp(13px, 2.5vw, 15px);
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    margin: 0 0 20px;
}
.m-story-slide__cta {
    display: inline-block;
    background: var(--cp, #8B1A1A);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 24px;
    text-decoration: none !important;
    letter-spacing: .04em;
    transition: background .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.m-story-slide__cta:hover {
    background: var(--cs, #C5972A);
    transform: translateY(-1px);
}

/* ── Nav buttons (tap area kiri/kanan) ── */
.m-story-nav {
    position: absolute;
    top: 0;
    /* Sisakan ruang bawah untuk CTA button */
    bottom: 140px;
    width: 35%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}
.m-story-nav--prev { left: 0; }
.m-story-nav--next { right: 0; }

/* CTA harus di atas nav area */
.m-story-slide__cta {
    position: relative;
    z-index: 10;
}

/* ── Desktop: batasi lebar viewer ── */
@media (min-width: 600px) {
    .m-story-viewer {
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,.88);
        /* Pastikan viewer selalu di atas semua elemen */
        z-index: 999999;
    }
    /* Wrapper yang menjadi containing block untuk progress, header, dan slides */
    .m-story-viewer .m-story-wrap {
        position: relative;
        width: 390px;
        height: min(85vh, 720px);
        flex-shrink: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 24px 80px rgba(0,0,0,.7);
    }
    .m-story-viewer .m-story-slides {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
    }
    .m-story-viewer .m-story-progress {
        position: absolute;
        top: 0; left: 0; right: 0;
        max-width: none;
        margin: 0;
        z-index: 10;
    }
    .m-story-viewer .m-story-header {
        position: absolute;
        top: 22px; left: 0; right: 0;
        max-width: none;
        margin: 0;
        z-index: 10;
    }
    .m-story-viewer .m-story-nav {
        position: absolute;
        top: 0; bottom: 0;
        width: 35%;
        z-index: 5;
    }
    .m-story-viewer .m-story-nav--prev { left: 0; }
    .m-story-viewer .m-story-nav--next { right: 0; }
    .m-story-slide { border-radius: 18px; }
}
    .m-story-slide { border-radius: 18px; }
}

/* ── Weekly di dalam artikel / sidebar ── */
.m-weekly--compact .m-weekly__thumb {
    flex: 0 0 110px;
    height: 165px;
}
.m-weekly--compact .m-weekly__thumb-title { font-size: 10px; }

/* ── Print: sembunyikan ── */
@media print {
    .m-weekly, .m-story-viewer { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE WIDGET ZONES — Zona A, B, C & Sidebar Eksklusif
   ══════════════════════════════════════════════════════════════ */

/* Zona umum */
.m-hp-zone {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 28px;
}

/* Zona A — bawah hero, full width */
.m-hp-zone--a {
    padding: 0;
    margin-top: 4px;
}

/* Zona B — tengah konten, sedikit aksen pembeda */
.m-hp-zone--b {
    padding: 20px 0;
    border-top: 2px solid var(--cbdr);
    border-bottom: 2px solid var(--cbdr);
    margin: 8px 0 28px;
}

/* Zona C — bawah konten */
.m-hp-zone--c {
    padding: 20px 0 8px;
    border-top: 1px solid var(--cbdr);
}

/* Widget dalam zona: tidak ada padding ekstra */
.m-hp-widget {
    margin-bottom: 20px;
}
.m-hp-widget:last-child { margin-bottom: 0; }

/* Judul widget zona */
.m-hp-widget__title {
    font-family: var(--fd, Georgia, serif);
    font-size: 1rem;
    font-weight: 900;
    color: var(--ctext);
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 4px solid var(--cp);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Print: sembunyikan zona widget */
@media print {
    .m-hp-zone { display: none !important; }
}

/* ════════════════════════════════════════════════
   BANNER ATAS (DI ATAS NAVBAR)
   Muncul di atas header, hilang saat scroll turun,
   muncul kembali saat scroll naik
   ════════════════════════════════════════════════ */
#m-top-banner {
  width: 100%;
  overflow: hidden;
  background: transparent;
  transition: max-height .35s ease, opacity .3s ease;
  max-height: 300px;
  opacity: 1;
  will-change: max-height, opacity;
}

#m-top-banner.m-top-banner--hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.m-top-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Gambar banner responsif */
.m-top-banner__inner img {
  max-width: 100%;
  height: auto;
  display: block;
}

.m-top-banner__inner a {
  display: block;
  width: 100%;
  line-height: 0;
}

/* Dark mode */
[data-theme="dark"] #m-top-banner {
  background: transparent;
}

/* ════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ════════════════════════════════════════════════ */

/* content-visibility: auto — browser skip render elemen di luar viewport
   Efek besar di homepage panjang dengan banyak rubrik */
.m-footer,
.m-related,
.m-comments {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Pastikan gambar tidak blokir layout sebelum dimuat */
img {
  font-size: 0; /* Sembunyikan alt text saat loading */
}
img[loading="lazy"] {
  background: #f3f4f6;
}

/* Hindari layout shift pada thumbnail */
.m-card__img,
.m-art-img-wrap {
  background: var(--cbg);
}

/* Kurangi animasi untuk prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .m-ticker__scroll { animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* will-change hanya pada elemen yang benar-benar animasi */
.m-ticker__scroll { will-change: transform; }
.mfv-page { will-change: transform; }
/* Hapus will-change dari elemen statis */
#m-sticky { will-change: auto; }