/*
Theme Name: MediaKalsel News
Theme URI: https://mediakalsel.com
Author: Custom Build
Author URI: https://mediakalsel.com
Description: Tema berita portal ala MediaKalsel.com — header dengan logo & pencarian, menu navigasi gelap, running text berita utama, grid berita headline + iklan sidebar, blok kategori (Religi, Ragam), sidebar Pos Terpopuler bernomor, dan footer dengan sosial media. Dibangun 100% custom sesuai referensi tata letak & warna.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mediakalsel
Tags: news, blog, two-columns, right-sidebar, custom-menu, featured-images, sticky-post

MediaKalsel News is a custom WordPress theme.
*/

/* =====================================================
   0. VARIABEL WARNA (HASIL SAMPLING PIXEL DARI SCREENSHOT ASLI)
   ===================================================== */
:root{
  --mk-black: #171717;         /* teks judul & logo utama */
  --mk-text: #1a1a1a;
  --mk-text-light: #6b7280;    /* meta / tanggal abu-abu */
  --mk-border: #e9eaec;        /* garis pemisah tipis */
  --mk-bg: #ffffff;            /* background halaman: PUTIH, bukan abu */
  --mk-bg-footer: #f5f5f5;     /* footer abu sangat terang */
  --mk-white: #ffffff;

  --mk-gold-logo: #f5c518;     /* ".com" pada logo — emas terang */
  --mk-gold-eyebrow: #d99a2c;  /* label kategori (satu warna untuk semua) */
  --mk-gold-btn: #eebc4b;      /* tombol CARI — emas/tan lebih pucat */
  --mk-gold-btn-dark: #d9a53a;

  /* gradient dipakai di ticker & strip highlight — hasil sampling: emas ke coklat gelap/hitam */
  --mk-gradient: linear-gradient(90deg, #e3b34a 0%, #a3822f 30%, #6b551f 60%, #241d10 100%);

  --font-heading: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-logo: Georgia, 'Times New Roman', 'Noto Serif', serif; /* dikondensasi via transform, lihat .mk-logo */
}

/* =====================================================
   1. RESET DASAR
   ===================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--mk-text);
  background: var(--mk-bg);
  font-size: 15px;
  line-height: 1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ font-family: var(--font-heading); margin:0; line-height:1.25; }
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* =====================================================
   2. TOP BAR: LOGO + PENCARIAN
   ===================================================== */
.mk-topbar{
  background: var(--mk-white);
  border-bottom: 1px solid var(--mk-border);
}
.mk-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px;
}

/* ---- LOGO: teks kondensasi bold hitam + ".com" emas ----
   Situs asli pakai font masthead serif kondensasi kontras tinggi.
   Kami tiru pakai serif tebal + transform scaleX untuk efek kondensasi,
   supaya tidak bergantung pada font berbayar yang tidak tersedia. */
.mk-logo{
  display:flex;
  align-items:baseline;
  font-family: var(--font-logo);
  font-weight:900;
  font-size:34px;
  color:#111;
  white-space:nowrap;
  line-height:1;
  transform: scaleX(0.86);
  transform-origin: left center;
  letter-spacing:-0.5px;
}
/* Kalau admin upload logo GAMBAR sendiri, batasi ukurannya secara paksa
   supaya tidak pernah tampil kebesaran meski file asli besar/beresolusi tinggi. */
.mk-logo img,
.mk-logo .custom-logo{
  max-height:44px !important;
  width:auto !important;
  height:auto !important;
  transform:none;
}
.mk-logo .mk-logo-accent{ color: var(--mk-gold-logo); font-weight:900; }
.mk-logo .mk-logo-dotcom{ color: var(--mk-gold-logo); font-weight:900; }

.mk-search{
  flex:1;
  max-width:520px;
  display:flex;
}
.mk-search input[type="search"]{
  flex:1;
  border:1px solid var(--mk-border);
  border-right:none;
  border-radius:6px 0 0 6px;
  padding:11px 16px;
  font-size:14px;
  outline:none;
  background:#e9e9e9;
  color:#444;
}
.mk-search input[type="search"]::placeholder{ color:#8a8a8a; }
.mk-search button{
  background: var(--mk-gold-btn);
  border:none;
  color:#1a1a1a;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  padding:0 26px;
  border-radius:0 6px 6px 0;
  cursor:pointer;
  transition:background .15s ease;
}
.mk-search button:hover{ background: var(--mk-gold-btn-dark); }

.mk-topbar-tools{ display:flex; align-items:center; gap:14px; }
.mk-darkmode-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--mk-border);
  display:flex;align-items:center;justify-content:center;
  background:#fff; cursor:pointer; flex-shrink:0; color:#333;
}
.mk-mobile-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.mk-mobile-toggle span{ display:block; width:22px; height:2px; background:#111; margin:4px 0; border-radius:2px; }

/* =====================================================
   3. NAVIGASI UTAMA — PUTIH, TEKS HITAM BOLD UPPERCASE
   ===================================================== */
.mk-navbar{ background: var(--mk-white); border-bottom:1px solid var(--mk-border); }
.mk-navbar-inner{ display:flex; align-items:center; }
.mk-nav-menu,
.mk-nav-menu ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.mk-nav-menu li{
  list-style:none !important;
  margin:0 !important;
}
.mk-nav-menu li a{
  display:block !important;
  padding:14px 16px !important;
  color:#151515 !important;
  font-family: var(--font-body) !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  background:transparent !important;
  border:none;
  transition: color .15s ease;
}
.mk-nav-menu li a:visited{ color:#151515 !important; }
.mk-nav-menu li a:hover,
.mk-nav-menu li.current-menu-item a{
  color: var(--mk-gold-btn-dark) !important;
}
.mk-nav-menu li.menu-item-has-children{ position:relative; }
.mk-nav-menu .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background: #fff; z-index:50; display:none;
  border:1px solid var(--mk-border);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.mk-nav-menu li.menu-item-has-children:hover .sub-menu{ display:block; }
.mk-nav-menu .sub-menu li a{ text-transform:none !important; font-weight:500 !important; padding:11px 16px !important; }
.mk-nav-menu .sub-menu li a:hover{ background:#faf7f0 !important; }

/* =====================================================
   4. RUNNING TEXT / TICKER — GRADIENT EMAS→GELAP, TANPA LABEL
   ===================================================== */
.mk-ticker{
  background: var(--mk-gradient);
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
.mk-ticker-track{
  flex:1;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  min-height:38px;
}
.mk-ticker-track ul{
  display:flex;
  gap:56px;
  white-space:nowrap;
  animation: mk-scroll 34s linear infinite;
  padding-left:100%;
}
.mk-ticker-track:hover ul{ animation-play-state:paused; }
.mk-ticker-track li a{ color:#fff; font-weight:700; font-size:13.5px; padding:8px 0; }
@keyframes mk-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* =====================================================
   5. LAYOUT UTAMA (KONTEN + SIDEBAR)
   ===================================================== */
.mk-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:26px;
  padding:22px 16px 40px;
  max-width:1200px;
  margin:0 auto;
}
.mk-main{ min-width:0; }
.mk-sidebar{ min-width:0; }

/* ---- Eyebrow kategori: SATU WARNA EMAS untuk semua kategori ---- */
.mk-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color: var(--mk-gold-eyebrow);
  margin-bottom:4px;
}
/* kelas kategori lama dipertahankan agar kompatibel, semua diseragamkan jadi emas */
.mk-eyebrow.cat-hukum,
.mk-eyebrow.cat-daerah,
.mk-eyebrow.cat-news,
.mk-eyebrow.cat-nasional,
.mk-eyebrow.cat-kesehatan,
.mk-eyebrow.cat-ekbis{ color: var(--mk-gold-eyebrow); }

/* ---- HERO: berita utama besar — FLAT, tanpa border/shadow ---- */
.mk-hero{
  display:grid;
  grid-template-columns: 1fr;
  background:#fff;
  margin-bottom:24px;
}
.mk-hero-thumb{ position:relative; }
.mk-hero-thumb img{ width:100%; aspect-ratio:16/8.6; object-fit:cover; border-radius:4px; }
.mk-hero-body{ padding:16px 0 0; }
.mk-hero-body .mk-meta{ font-size:13px; color: var(--mk-text-light); margin-bottom:8px; }
.mk-hero-title{
  font-size:28px;
  font-weight:800;
  color:#111;
  margin-bottom:10px;
  letter-spacing:-0.2px;
}
.mk-hero-title a:hover{ color: var(--mk-gold-btn-dark); }
.mk-hero-excerpt{ font-size:15px; color:#3a3f45; }

/* ---- Berita Utama Lainnya (3 kolom kecil) ---- */
.mk-subhead{
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:16px;
  display:block;
  color:#141414;
}
.mk-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:30px;
}
.mk-card{ background:#fff; }
.mk-card-thumb{ position:relative; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.mk-card-thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.mk-card .mk-meta{ font-size:12px; color: var(--mk-text-light); margin-bottom:4px; }
.mk-card .mk-card-title{ font-size:15px; font-weight:700; color:#111; line-height:1.4; }
.mk-card .mk-card-title a:hover{ color: var(--mk-gold-btn-dark); }

/* ---- Highlight strip: PAKAI GRADIENT SAMA DENGAN TICKER ---- */
.mk-highlight-strip{
  background: var(--mk-gradient);
  color:#fff;
  padding:11px 18px;
  font-size:14.5px;
  font-weight:700;
  margin-bottom:20px;
  border-radius:3px;
}
.mk-highlight-strip a{ color:#fff; }

/* ---- Blok kategori (Religi, dsb): judul bold hitam polos ---- */
.mk-section{ margin-bottom:34px; }
.mk-section-title{
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#141414;
  margin-bottom:18px;
}

/* ---- Daftar berita panjang (list utama di kolom tengah) ---- */
.mk-post-list{ display:flex; flex-direction:column; gap:20px; }
.mk-post-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  padding-bottom:20px;
  border-bottom:1px solid var(--mk-border);
}
.mk-post-row:last-child{ border-bottom:none; padding-bottom:0; }
.mk-post-row .mk-thumb{ border-radius:4px; overflow:hidden; }
.mk-post-row .mk-thumb img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.mk-post-row .mk-row-meta{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.mk-post-row .mk-row-meta .mk-eyebrow{ margin-bottom:0; }
.mk-post-row .mk-row-meta .mk-meta{ font-size:12.5px; color: var(--mk-text-light); }
.mk-post-row .mk-post-title{ font-size:18px; font-weight:800; color:#111; margin:0 0 6px; }
.mk-post-row .mk-post-title a:hover{ color: var(--mk-gold-btn-dark); }
.mk-post-row .mk-post-excerpt{ font-size:14px; color:#585d63; }

.mk-pagination{ text-align:center; margin-top:16px; }
.mk-pagination a, .mk-pagination span{
  display:inline-block; padding:9px 26px; border:1px solid #d5d7da;
  color:#333; font-weight:700; font-size:13px; border-radius:4px; letter-spacing:.02em;
}
.mk-pagination a:hover{ background:#141414; border-color:#141414; color:#fff; }

/* =====================================================
   6. SIDEBAR: IKLAN, POS TERPOPULER, RAGAM
   ===================================================== */
.mk-widget{ margin-bottom:26px; }
.mk-widget-title{
  font-size:16px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#141414;
  margin-bottom:16px;
}
.mk-ad-slot{
  display:block;
  background:#fff;
  overflow:hidden;
  margin-bottom:24px;
  border-radius:4px;
}
.mk-ad-slot img{ width:100%; display:block; }
.mk-ad-slot.is-empty{
  aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  color:#9aa2ab; font-size:12.5px; background:#f0f1f3;
  border:1px dashed #d5d7da;
  text-align:center; padding:16px;
}

/* Pos Terpopuler: TANPA nomor — item pertama besar dengan foto, sisanya teks saja */
.mk-popular-list{ display:flex; flex-direction:column; }
.mk-popular-item{
  padding:14px 0;
  border-bottom:1px solid var(--mk-border);
}
.mk-popular-item:first-child{ padding-top:0; }
.mk-popular-item:last-child{ border-bottom:none; }
.mk-popular-item .mk-pop-thumb{ border-radius:4px; overflow:hidden; margin-bottom:10px; }
.mk-popular-item .mk-pop-thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.mk-popular-item .mk-eyebrow{ margin-bottom:4px; }
.mk-popular-item .mk-pop-title{ font-size:14.5px; font-weight:700; color:#111; line-height:1.4; }
.mk-popular-item .mk-pop-title a:hover{ color: var(--mk-gold-btn-dark); }

/* Ragam: 2 kolom thumbnail kecil */
.mk-ragam-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mk-ragam-grid .mk-card-thumb img{ aspect-ratio:1/1; }
.mk-ragam-grid .mk-meta{ font-size:11px; }
.mk-ragam-grid .mk-card-title{ font-size:13px; }

/* =====================================================
   7. FOOTER — ABU-ABU TERANG, IKON KOTAK BERWARNA
   ===================================================== */
.mk-footer{ background: var(--mk-bg-footer); color:#555; margin-top:20px; border-top:1px solid var(--mk-border); }
.mk-footer-inner{ padding:40px 16px 22px; text-align:center; }
.mk-footer-logo{
  font-family: var(--font-logo); font-weight:900; font-size:32px; color:#141414;
  margin-bottom:20px; transform:scaleX(0.86); display:inline-block; letter-spacing:-0.5px;
}
.mk-footer-logo .mk-logo-accent{ color: var(--mk-gold-logo); }
.mk-social{ display:flex; justify-content:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.mk-social a{
  width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .15s ease, opacity .15s ease;
}
.mk-social a:hover{ transform:translateY(-2px); opacity:.9; }
.mk-social a.social-facebook{ background:#3b5998; }
.mk-social a.social-twitter{ background:#141414; }
.mk-social a.social-whatsapp{ background:#25d366; }
.mk-social a.social-telegram{ background:#229ed9; }
.mk-social a.social-instagram{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.mk-social a.social-youtube{ background:#ff0000; }
.mk-social a.social-tiktok{ background:#141414; }
.mk-footer-menu{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; font-size:13.5px; color:#666; margin-bottom:16px; }
.mk-footer-menu a:hover{ color:#141414; }
.mk-footer-bottom{
  border-top:1px solid #e2e2e2;
  padding-top:16px; font-size:12.5px; color:#8a8a8a;
}

/* =====================================================
   8. SINGLE / PAGE / ARCHIVE
   ===================================================== */
.mk-single-header{ margin-bottom:16px; }
.mk-single-title{ font-size:30px; font-weight:800; color:#111; margin-bottom:10px; letter-spacing:-0.3px; }
.mk-single-meta{ font-size:13px; color: var(--mk-text-light); margin-bottom:16px; }
.mk-single-thumb{ margin-bottom:18px; border-radius:4px; overflow:hidden; }
.mk-single-content{ font-size:16px; line-height:1.8; color:#212528; }
.mk-single-content p{ margin:0 0 18px; }
.mk-single-content img{ border-radius:4px; margin:10px 0; }
.mk-single-content h2,.mk-single-content h3{ margin:26px 0 12px; }
.mk-single-content blockquote{
  border-left:4px solid var(--mk-gold-btn-dark); margin:20px 0; padding:8px 18px; color:#444; font-style:italic; background:#f7f7f8;
}
.mk-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.mk-tags a{ background:#f0f0f0; padding:6px 12px; border-radius:20px; font-size:12px; }
.mk-archive-title{
  font-size:24px; font-weight:800; text-transform:uppercase; margin-bottom:22px; color:#141414;
}
.mk-comments{ margin-top:34px; }

/* =====================================================
   9. RESPONSIVE — DIRAPIKAN UNTUK MOBILE
   ===================================================== */
@media (max-width: 992px){
  .mk-layout{ grid-template-columns:1fr; }
  .mk-hero-title{ font-size:23px; }
}
@media (max-width: 768px){
  .mk-topbar-inner{ flex-wrap:wrap; gap:12px; padding:12px 16px; }
  .mk-logo{ font-size:24px; order:1; }
  .mk-topbar-tools{ order:2; margin-left:auto; }
  .mk-search{ order:3; max-width:100%; width:100%; flex-basis:100%; }
  .mk-mobile-toggle{ display:block; }

  .mk-navbar-inner{ position:relative; }
  .mk-nav-menu{
    display:none !important; flex-direction:column; width:100%;
    position:absolute; top:100%; left:0; background:#fff !important; z-index:80;
    border:1px solid var(--mk-border); border-top:none;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    max-height:70vh; overflow-y:auto;
  }
  .mk-nav-menu.is-open{ display:flex !important; }
  .mk-nav-menu li{ width:100%; }
  .mk-nav-menu li a{
    border-bottom:1px solid var(--mk-border) !important;
    padding:14px 18px !important;
    width:100%;
  }
  .mk-nav-menu li:last-child a{ border-bottom:none !important; }
  .mk-nav-menu .sub-menu{ position:static; box-shadow:none; border:none; background:#faf7f0 !important; display:none; }

  .mk-ticker-track li a{ font-size:12.5px; }

  .mk-layout{ padding:16px 14px 32px; gap:30px; }
  .mk-grid-3{ grid-template-columns:1fr; gap:18px; }
  .mk-post-row{ grid-template-columns:1fr; gap:10px; }
  .mk-post-row .mk-thumb img{ aspect-ratio:16/9; }
  .mk-post-row .mk-post-title{ font-size:16.5px; }
  .mk-ragam-grid{ grid-template-columns:1fr 1fr; }
  .mk-hero-title{ font-size:21px; }
  .mk-hero-thumb img{ aspect-ratio:4/3; }
  .mk-single-title{ font-size:23px; }
  .mk-footer-logo{ font-size:26px; }
}
@media (max-width: 420px){
  .mk-logo{ font-size:21px; }
  .mk-search button{ padding:0 16px; font-size:12px; }
}