/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL OPTIMIZATION
   ========================================================================== */
:root {
  --gradient1: #821c1c;
  --gradient2: #2d2d2d;
  --footergradient1: #545454;
  --footergradient2: #000;
  --title: #222222;        /* Dioptimalkan untuk kontras teks yang lebih tajam */
  --garis: #e4b622;
  --titlepost: #ffffff;
  --utama: #821c1c;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Mengurangi FOIT/CLS */
  --bgmenu: #821c1c;
  --menucolor: #ffffff;
  --menuhover: #e4b622;
  --colorfooter: #ffffff;
}

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

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #212529;          /* Kontras ramah Google Accessibility (Rasio > 4.5:1) */
  background-color: #f8f9fa; /* Lebih cerah, mengurangi ketegangan mata penjelajah */
  font-size: 15px;         /* Standar kenyamanan membaca teks artikel terbaru */
  line-height: 1.6;        /* Mempercepat pemindaian baris kata oleh mata */
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
}

a {
  background-color: transparent;
  color: #212529;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

/* ==========================================================================
   2. ICON FONTS PERFORMANCE (ANTI-RENDER BLOCKING)
   ========================================================================== */
[class^="icon-"], [class*=" icon-"],
[class^="icons-"], [class*=" icons-"] {
  font-family: 'icomoon', 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* Unicode Icons mapping */
.icons-search:before { content: "\e93d"; }
.icon-line:before { content: "\e901"; }
.icon-photo:before { content: "\e902"; }
.icon-play:before { content: "\e903"; }
.icon-twitter:before { content: "\f099"; }
.icon-facebook:before { content: "\f09a"; }
.icon-feed:before, .icon-rss:before { content: "\f09e"; }
.icon-globe:before { content: "\f0ac"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-caret-down:before { content: "\f0d7"; }
.icon-angle-left:before { content: "\f104"; }
.icon-angle-right:before { content: "\f105"; }
.icon-angle-up:before { content: "\f106"; }
.icon-angle-down:before { content: "\f107"; }
.icon-youtube:before { content: "\f16a"; }
.icon-instagram:before { content: "\f16d"; }
.icon-google:before { content: "\f1a0"; }
.icon-whatsapp:before { content: "\f232"; }
.icons-category:before { content: "\e900"; }
.icons-home:before { content: "\e925"; }
.icons-attach:before { content: "\e903"; }
.icons-back-arrow:before { content: "\e904"; }
.icons-back:before { content: "\e905"; }
.icons-backspace:before { content: "\e906"; }
.icons-backward:before { content: "\e907"; }
.icons-bookmark:before { content: "\e909"; }
.icons-calandar:before { content: "\e90a"; }
.icons-call:before { content: "\e90b"; }
.icons-camera:before { content: "\e90c"; }
.icons-check:before { content: "\e912"; }
.icons-close:before { content: "\e914"; }
.icons-comment:before { content: "\e915"; }
.icons-configure:before { content: "\e916"; }
.icons-copy:before { content: "\e917"; }
.icons-cut:before { content: "\e918"; }
.icons-delete:before { content: "\e919"; }
.icons-disabled:before { content: "\e91a"; }
.icons-edit:before { content: "\e91b"; }
.icons-emoji-smile:before { content: "\e91c"; }
.icons-export:before { content: "\e91d"; }
.icons-file:before { content: "\e91e"; }
.icons-folder:before { content: "\e91f"; }
.icons-forward-arrow:before { content: "\e920"; }
.icons-forward-1:before { content: "\e921"; }
.icons-forward:before { content: "\e922"; }
.icons-heart:before { content: "\e923"; }
.icons-hide:before { content: "\e924"; }
.icons-image:before { content: "\e926"; }
.icons-layout:before { content: "\e927"; }
.icons-link:before { content: "\e928"; }
.icons-loading:before { content: "\e929"; }
.icons-location:before { content: "\e92a"; }
.icons-lock:before { content: "\e92b"; }
.icons-mail:before { content: "\e92c"; }
.icons-map:before { content: "\e92d"; }
.icons-menu-left:before { content: "\e92e"; }
.icons-menu-right:before { content: "\e92f"; }
.icons-more-vert:before { content: "\e931"; }
.icons-more:before { content: "\e932"; }
.icons-notification:before { content: "\e933"; }
.icons-paste:before { content: "\e934"; }
.icons-pause:before { content: "\e935"; }
.icons-play:before { content: "\e936"; }
.icons-plus:before { content: "\e937"; }
.icons-profile:before { content: "\e939"; }
.icons-refresh:before { content: "\e93a"; }
.icons-resize:before { content: "\e93b"; }
.icons-send:before { content: "\e93e"; }
.icons-settings:before { content: "\e93f"; }
.icons-sound-muted:before { content: "\e940"; }
.icons-sound-playing:before { content: "\e941"; }
.icons-star:before { content: "\e942"; }
.icons-tag:before { content: "\e943"; }
.icons-thumbs-up-1:before { content: "\e944"; }
.icons-thumbs-up:before { content: "\e945"; }
.icons-time:before { content: "\e946"; }
.icons-view:before { content: "\e947"; }
.icons-wifi:before { content: "\e948"; }

.icon-play {
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  transition: all .2s ease;
  box-shadow: 0 0 0 5px rgba(0,0,0,.4);
  border-radius: 24px;
}

/* ==========================================================================
   3. GRID LAYOUT & CONTAINERS (FAST RENDERING)
   ========================================================================== */
.content {
  background-color: #ffffff;
  display: block;
}
.content.boxed {
  max-width: 1024px;
  margin: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 1024px;
}

/* Columns */
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%; max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* ==========================================================================
   4. PERFORMANCE ANIMATION (SKELETON LAZY LOADING)
   ========================================================================== */
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
.media-image {
  background: #e9ecef;
  position: relative;
  overflow: hidden;
  content-visibility: auto; /* Mempercepat pemuatan halaman panjang */
}
.media-image:after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.2) 20%, rgba(255,255,255,.5) 60%, rgba(255,255,255,0));
  animation: shimmer 2s infinite;
  content: "";
}
.media-image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}
.media-link:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  cursor: pointer;
}

/* ==========================================================================
   5. COMPONENT STRUCTURES & ACCESSIBILITY TARGET
   ========================================================================== */
.widget-header { position: relative; }
.widget-header .title {
  font-size: 20px;
  color: var(--title);
  margin-top: 0;
  font-weight: 600;
}
.widget-header .title:after {
  content: "";
  position: absolute;
  bottom: -5px; left: 0;
  background: var(--garis);
  width: 70px; height: 4px;
  border-radius: 50em;
}
.widget { display: block; margin-bottom: 30px; }

/* Ad & Billboard Optimization */
.billboard { margin: 15px 0; display: block; }
.billboard .widget {
  margin: 0 auto;
  justify-content: center;
  max-width: 100%;
  width: 970px;
  height: auto;
  display: block;
  text-align: center;
}
.billboard img { display: block; max-width: 100%; height: auto; }

/* Header App */
header.header-app {
  height: 50px;
  position: relative;
  background: #ffffff;
}
.header-app-box.box-left { display: flex; justify-content: flex-start; }
.header-app-box.box-right { display: flex; justify-content: flex-end; }
.app-logo { display: flex; justify-content: center; padding: 10px 0; }
.app-logo img { display: block; max-height: 30px; width: auto; }

/* Social Icons Touch Target */
.social-app-box { display: flex; }
.social-app-item { margin: 9px 4px; }
.social-app-link {
  font-size: 16px;
  width: 44px;  /* Sesuai standar kenyamanan sentuh Google Mobile-Friendly */
  height: 44px; /* Sesuai standar kenyamanan sentuh Google Mobile-Friendly */
  padding: 12px;
  color: #ffffff;
  background: #eff0f6;
  display: flex;
  border-radius: 50em;
  align-items: center;
  justify-content: center;
}
.header-date { padding: 15px 0; font-size: 13px; color: #6c757d; }
.header-app-item { padding: 0 15px; border-right: 1px solid #eee; position: relative; }
.header-app-box.box-left .header-app-item:first-child { padding-left: 0; }
.header-app-box.box-right .header-app-item:last-child { padding-right: 0; border: 0; }
.header-app-box.box-right .header-app-item:first-child { border-left: 1px solid #eee; }

.mode, .btn-search, .btn-network {
  padding: 13px 0;
  background: transparent;
  border: 0; outline: 0;
  display: flex; align-content: center; flex-wrap: wrap; justify-content: center;
  cursor: pointer;
  min-height: 48px; /* Target sentuh minimal Google Tap Target */
}
.mode i.dark {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-0.000000, -0.000000)' stroke='%2354565d' stroke-width='1.6'%3E%3Cpath d='M21,12.79 C20.56,17.52 16.51,21.1 11.76,20.95 C7,20.81 3.18,16.99 3.04,12.23 C2.89,7.48 6.47,3.43 11.21,3 C9.15,5.78 9.43,9.66 11.88,12.11 C14.33,14.56 18.21,14.84 21,12.79 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 24px; height: 24px; background-repeat: no-repeat; background-position: center;
}
.mode i.light {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1V3' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 21V23' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.22 4.22L5.64 5.64' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.36 18.36L19.78 19.78' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 12H3' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12H23' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.22 19.78L5.64 18.36' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.36 5.64L19.78 4.22' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: invert(57%) sepia(0%) saturate(61%) hue-rotate(240deg) brightness(105%) contrast(97%);
  width: 24px; height: 24px; background-repeat: no-repeat; background-position: center;
}
.btn-search i, .btn-network i { font-size: 24px; }
.mode span, .btn-search span, .btn-network span { font-size: 13px; color: #212529; flex: 1; display: flex; align-content: center; height: 100%; margin: auto 0 auto 10px; }

.box-header { position: sticky; top: 0; z-index: 999; }

/* Navigation */
nav.app-nav { background: var(--bgmenu); position: relative; top: 0; z-index: 99; }
.app-nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; }
.app-nav ul li { position: relative; }
.app-nav ul > li > a { color: var(--menucolor); padding: 12px 15px; display: block; font-weight: 600; min-height: 48px; }
.app-nav ul > li > a:hover { color: var(--menuhover); }
.app-nav ul > li.current-menu-item > a { color: var(--menuhover); }
.app-nav ul.sub-menu { position: absolute; background: #ffffff; display: none; flex-wrap: wrap; width: 250px; border-radius: 5px; top: 44px; left: 0; padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.app-nav ul.sub-menu li { width: 50%; }
.app-nav ul.sub-menu a { color: #212529; padding: 8px 0; display: block; }
.app-nav ul li.menu-item-has-children:hover .sub-menu { display: flex; }
.nav-wrap { display: flex; justify-content: center; }
.nav-home a { color: var(--menucolor); padding: 12px 15px; display: block; background: rgba(0,0,0,0.2); }

/* Panels & Search Form */
.network-box { position: absolute; right: 0; width: 350px; background: #ffffff; top: 50px; box-shadow: 0 4px 12px rgba(0,0,0,.15); border-radius: 5px; overflow: hidden; transform: translateX(110px); display: none; z-index: 100; }
.header-app-item.netbox:hover .network-box { display: block; }
.network-box ul { list-style: none; margin: 0; display: flex; flex-wrap: wrap; padding: 0 5px 10px; }
.network-box ul li { width: 50%; }
.network-box ul li a { font-size: 12px; display: block; padding: 12px 5px; font-weight: 600; text-transform: uppercase; }
.network-box ul li a:hover { color: var(--utama); }

.form-search { position: absolute; right: 0; background: #ffffff; top: 50px; box-shadow: 0 4px 12px rgba(0,0,0,.15); border-radius: 5px; overflow: hidden; transform: translateX(60px); padding: 10px; width: 300px; display: none; z-index: 100; }
.input-search { display: block; width: 100%; border: 1px solid #ced4da; padding: 10px 12px; outline: 0; border-radius: 4px; font-size: 14px; }
.header-app-item.searchbox:hover .form-search { display: block; }
.header-app-box.box-right .icons, .header-app-box.box-right .icon { color: #54565d; }

/* ==========================================================================
   6. ARTICLE SLIDERS & CARDS (SEO OPTIMIZED CLS)
   ========================================================================== */
.slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: 0; }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:after { clear: both; }
.slick-track:after, .slick-track:before { display: table; content: ''; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
.slick-initialized .slick-slide { display: block; }

.slider-image { width: 100%; height: 0; border-radius: 5px; overflow: hidden; padding-bottom: 60%; }
.slider-item { position: relative; overflow: hidden; border-radius: 5px; }
.slider-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 160px 20px 20px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%); z-index: 9; text-align: center; }
.slider-title h2 { font-size: 24px; margin: 0 0 10px 0; line-height: 1.3; font-weight: 600; }
.slider-title h2 a { color: #ffffff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slider-category a { background: var(--utama); font-weight: 600; padding: 4px 10px; color: #ffffff; font-size: 11px; text-transform: uppercase; margin-bottom: 10px; display: inline-block; border-radius: 3px; }
.slider-snippet { color: #ced4da; max-width: 400px; display: inline-block; font-size: 13px; }
.slider-snippet p { margin-bottom: 0; }
.slider-date { color: #ffffff; font-size: 12px; }

/* Slick Dots Google Mobile Friendly Target (48x48px clickable wrapper via padding) */
.slick-dots { list-style: none; display: flex; justify-content: center; margin: 0; padding: 15px 0; position: relative; }
.slick-dots li { position: relative; display: inline-block; margin: 0 6px; padding: 10px 5px; cursor: pointer; }
.slick-dots button { border: 0; background: #b6b6b6; display: block; outline: none; font-size: 0; color: transparent; padding: 0; height: 12px; width: 12px; cursor: pointer; border-radius: 50em; transition: all 0.2s ease; }
.slick-dots li.slick-active button { width: 40px; background: var(--utama); }

/* List Terkini */
.terkini-item { position: relative; display: flex; flex-wrap: wrap; margin-bottom: 20px; align-items: center; border-bottom: 1px solid #dee2e6; padding-bottom: 20px; }
.terkini-item:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.terkini-image { width: 188px; height: 0; border-radius: 5px; overflow: hidden; padding-bottom: 20%; margin-right: 15px; }
.terkini-content { flex: 1; }
.terkini-meta { display: flex; align-items: center; }
.terkini-category, .terkini-category a { font-weight: 600; padding: 3px 0; font-size: 11px; text-transform: uppercase; color: var(--utama); }
.terkini-date { font-size: 11px; padding: 3px 5px; color: #6c757d; }
.terkini-title h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; }
.terkini-title h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #212529; }
.post-content .list-title a:hover, .related-title a:hover, .tag-title a:hover, .terkini-title h2 a:hover, .popular-title a:hover, .list-title a:hover { color: var(--utama); }
.terkini-snippet { margin-top: 10px; }
.terkini-snippet p { margin: 0; color: #495057; font-size: 14px; }

main { display: block; padding: 20px 0; }

/* Inline Slider 1 */
.slider1-box { margin: 0 -5px; }
.slider1-item { position: relative; padding: 0 5px; border-radius: 5px; overflow: hidden; }
.slider1-image { width: 100%; height: 0; border-radius: 5px; overflow: hidden; padding-bottom: 150%; margin-right: 15px; }
.slider1-content { position: absolute; bottom: 0; left: 0; padding: 15px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%); z-index: 9; right: 0; margin: 0 5px; border-radius: 5px; overflow: hidden; top: 0; display: flex; align-items: flex-end; }
.slider1-title h2 { margin: 0; font-size: 14px; font-weight: 600; }
.slider1-title h2 a { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: #ffffff; }

/* Slick Navigation Target Size */
.slick-arrow { width: 44px; height: 44px; font-size: 24px; background: #f9f9fa; display: flex; align-items: center; justify-content: center; border-radius: 50em; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; color: #212529; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: none; cursor: pointer; }
.arrow-left { left: -10px; }
.arrow-right { right: -10px; }
.slider1.slider-bg { background-color: var(--gradient1); background-image: linear-gradient(62deg, var(--gradient1) 0%, var(--gradient2) 100%); padding: 20px; border-radius: 5px; }
.slider1.slider-bg .widget-header h3 { margin-top: 0; color: var(--titlepost); }

/* Topics & Badges */
.topik-box { margin: 0 -5px; }
.topik-item { position: relative; padding: 0 5px; }
.topik-image { width: 100%; height: 0; border-radius: 5px; overflow: hidden; padding-bottom: 54%; }
.topik-content { position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 9; right: 0; margin: 0 5px; border-radius: 5px; overflow: hidden; top: 0; display: flex; justify-content: center; padding: 0 10px; align-items: center; flex-direction: column; }
.topik-title h2 { font-size: 14px; margin: 0; text-align: center; font-weight: 600; }
.topik-title h2 a { color: #ffffff; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.topik-count { background: var(--utama); font-weight: 600; padding: 4px 10px; color: #ffffff; font-size: 11px; text-transform: uppercase; border-radius: 4px; }
.slider1-more { background: var(--utama); font-weight: 600; padding: 4px 10px; color: #ffffff; font-size: 11px; text-transform: uppercase; position: absolute; top: 5px; z-index: 9; right: 10px; border-radius: 4px; }

.btn-index { display: inline-block; padding: 8px 18px; background: #413f45; color: #ffffff; border-radius: 50em; font-size: 12px; text-transform: uppercase; font-weight: 600; }
.widget-footer { padding: 15px 0; display: block; text-align: center; border-top: 1px solid #dee2e6; margin-top: 20px; }

/* Parallax Ads Safe Layout */
.adx-parallax { background: #1d2327; }
.adx-parallax .parallax-box { padding-right: 15px; padding-left: 15px; margin: 0 auto; width: 100%; height: 250px; position: relative; max-width: 970px; }
.adx-parallax .parallax-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip: rect(auto,auto,auto,auto); }
.adx-parallax .parallax-wrap .widget { width: 970px; height: auto; position: fixed; transform: translateZ(0); margin: 0 auto; max-width: 970px; left: 0; right: 0; }
.parallaxads { margin: 0 auto; width: 100%; height: 300px; position: relative; background: #1d2327; }
.parallaxads-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip: rect(auto,auto,auto,auto); }
.parallaxads-wrap { height: auto; position: fixed; top: 0; transform: translateZ(0); margin: 0 auto; max-width: 640px; width: 100%; }
.parallaxads-wrap img { margin: 0 auto; display: block; max-width: 100%; height: auto; }
.parallaxads span { position: absolute; bottom: 0; left: 0; right: 0; display: block; background: var(--utama); color: #ffffff; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 9px; z-index: 9; padding: 2px 0; }

/* Tags & Lists */
.tag-item { padding: 5px 0; }
.tag-box { display: flex; align-items: baseline; font-size: 16px; }
.hastag { color: var(--utama); margin-right: 8px; font-size: 16px; }
.tag-title { font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0; }

.popularpos .widget-content { border-radius: 5px; overflow: hidden; }
.popular-item { display: flex; align-items: center; position: relative; padding: 15px; }
.popular-number { width: 50px; text-align: center; height: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 100em; font-size: 26px; margin-right: 15px; background: rgba(0,0,0,0.05); }
.popular-content { flex: 1; }
.popular-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.popular-title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #212529; }
.popular-item:nth-child(odd) { background: #f8f9fa; }
.popular-item:nth-child(even) { background: #e9ecef; }

.list-item { align-items: center; position: relative; padding-bottom: 15px; display: flex; border-bottom: 1px solid #dee2e6; margin-bottom: 15px; }
.list-item:last-child { border: 0; margin-bottom: 0; }
.list-hastag { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #e9ecef; border-radius: 50em; font-size: 18px; margin-right: 15px; color: var(--utama); }
.list-content { flex: 1; }
.list-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.list-title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #212529; }
aside .list-title { font-size: 15px; }
.list.list-custom .list-item { display: flex; flex-direction: column; align-items: flex-start; }
.list.list-custom .list-content { flex: unset; }
.list-date, .list.list-custom .list-item .list-date { font-size: 11px; padding: 3px 5px 3px 0; color: #6c757d; }
.list-network-name { font-weight: 600; padding: 3px 0; font-size: 11px; text-transform: uppercase; color: var(--utama); }
.list-network-date { font-size: 11px; padding: 3px 5px; color: #6c757d; }
.list-network { display: flex; }
.related-date:before, .list-network-date:before, .terkini-date:before { content: "\00B7"; margin-right: 5px; font-size: 11px; display: inline-block; font-weight: bold; }

/* ==========================================================================
   7. SINGLE POST & BREADCRUMBS (SEO SCHEMA FRIENDLY)
   ========================================================================== */
.breadcrumb { padding: 0 0 15px 0; }
.breadcrumb .breadcrumb-wrap { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; }
.breadcrumb .breadcrumb-item { display: flex; align-items: center; background: transparent; margin-right: 5px; font-weight: 600; border-bottom: 3px solid var(--utama); font-size: 14px; }
.breadcrumb .breadcrumb-item:first-child a { display: flex; flex-direction: column; align-items: center; }
.breadcrumb .breadcrumb-item i { font-size: 16px; font-weight: bold; }
.breadcrumb-link { display: flex; width: 100%; height: 100%; align-items: center; padding: 10px 15px; color: #495057; }

.post-title { margin-bottom: 15px; }
.post-title h1 { margin: 30px 0; font-size: 32px; line-height: 1.3; text-align: center; font-weight: 700; color: #111111; }
.post-subheader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.post-meta { display: flex; font-size: 14px; }
.post-meta-author { color: #6c757d; }
.post-meta-author a { color: var(--utama); font-weight: 600; }
.post-meta-date { color: #6c757d; margin-left: 5px; }
.post-share { display: flex; justify-content: flex-end; }

figure { padding: 0; margin: 0 0 20px 0; }
.featured-image img { width: 100%; height: auto; border-radius: 5px; display: block; }
.post-featured figcaption { font-size: 13px; color: #6c757d; padding: 8px 0; text-align: center; font-style: italic; }

/* Typography & Content Spacing for Google Discover Core */
.post-content { font-size: 16px; line-height: 1.7; color: #212529; }
.post-content p { margin-bottom: 1.5rem; word-wrap: break-word; }
.post-content a { color: var(--utama); border-bottom: 1px solid rgba(130, 28, 28, 0.2); padding-bottom: 1px; }
.post-content a:hover { border-bottom-color: var(--utama); }
.bottom-share { padding-top: 30px; }

.btn-network .icons-bookmark:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16,20a4,4,0,1,1,4-4A4,4,0,0,1,16,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,16,14Z'/%3E%3Cpath d='M5,20a4,4,0,1,1,4-4A4,4,0,0,1,5,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,5,14Z'/%3E%3Cpath d='M10,31a4,4,0,1,1,4-4A4,4,0,0,1,10,31Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,10,25Z'/%3E%3Cpath d='M22,31a4,4,0,1,1,4-4A4,4,0,0,1,22,31Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,22,25Z'/%3E%3Cpath d='M27,20a4,4,0,1,1,4-4A4,4,0,0,1,27,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,27,14Z'/%3E%3Cpath d='M22,9a4,4,0,1,1,4-4A4,4,0,0,1,22,9Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,22,3Z'/%3E%3Cpath d='M10,9a4,4,0,1,1,4-4A4,4,0,0,1,10,9Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,10,3Z'/%3E%3C/svg%3E");
  width: 24px; height: 24px; display: block; background-size: 24px; background-repeat: no-repeat;
  filter: invert(26%) sepia(0%) saturate(239%) hue-rotate(134deg) brightness(93%) contrast(92%);
}

.post-content h2, .post-content h3, .post-content h4, .post-content h5 { color: #111111; font-weight: 700; margin: 30px 0 15px 0; line-height: 1.3; }
.post-content h2 { font-size: 24px; }
.post-content h3 { font-size: 21px; }

.post-content .list-title { font-size: 15px; margin: 0; font-weight: 600; }
.post-content .widget-header .title { font-size: 18px; color: var(--title); margin-top: 0; margin-bottom: 20px; }
.post-content .list .widget-content { display: flex; flex-wrap: wrap; margin: 0 -10px; align-items: flex-start; }
.post-content .list .widget-content .list-item { width: 50%; padding: 0 10px; border: none; }

/* ==========================================================================
   8. PAGINATION & FOOTER FIXES (TAP TARGETS)
   ========================================================================== */
.post-pagination { padding-top: 20px; display: block; }
.post-pagination-box { background: #f8f9fa; padding: 15px; display: flex; justify-content: space-between; border-radius: 5px; align-items: center; border: 1px solid #dee2e6; }
.post-pagination-label { font-weight: 600; }
.post-pagination-number { display: flex; align-items: center; }

/* Pagination Buttons Target Size 44x44px for easy mobile clicks */
.post-page-numbers {
  min-width: 44px;
  height: 44px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50em;
  margin-left: 6px;
  font-weight: 600;
  border: 1px solid var(--utama);
  color: #212529;
  padding: 0 10px;
  transition: all 0.2s ease;
}
.post-page-numbers:hover {
  background: var(--utama);
  color: #ffffff;
}

.pagination-nextprev .post-page-numbers:hover,
.pagination-nextprev .post-page-numbers {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: var(--utama);
}

/* Memperbaiki kode Anda yang terputus di baris akhir */
.btn-next { 
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 15px;
  color: var(--utama);
  font-weight: 600;
}

/* ==========================================================================
   9. RESPONSIVE MOBILE OPTIMIZATION (ANTI-OVERFLOW)
   ========================================================================== */
@media (max-width: 991px) {
  .billboard .widget { width: 100%; height: auto; }
  .terkini-image { width: 120px; padding-bottom: 25%; }
  .post-title h1 { font-size: 26px; }
}

@media (max-width: 768px) {
  .row { margin-right: -10px; margin-left: -10px; }
  .col, [class*="col-"] { padding-right: -10px; padding-left: -10px; }
  .app-nav ul { flex-wrap: wrap; }
  .terkini-item { flex-direction: column; align-items: flex-start; }
  .terkini-image { width: 100%; padding-bottom: 56.25%; margin-right: 0; margin-bottom: 12px; }
  .post-content .list .widget-content .list-item { width: 100%; }
}