/*
 Theme Name:   JournalArta
 Theme URI:    https://journalarta.com
 Description:  Professional news portal - inspired by detik.com layout
 Author:       JournalArta
 Template:     generatepress
 Version:      2.2.0
 Text Domain:  journalarta
*/

/* ============================================================
   DESIGN TOKENS  — Palet senada detik.com (navy + red)
   ============================================================ */
:root {
  /* ── Brand accent ── */
  --ja-red:         #e31e24;   /* merah utama (breaking, badge, hover) */
  --ja-red-dk:      #b71c1c;   /* merah gelap (hover state) */
  --ja-red-lite:    #ffebee;   /* merah sangat muda (background chip) */
  --ja-orange:      #e8531b;   /* aksen oranye-merah (logo suffix, tag) */

  /* ── Navy palette — kunci detik.com ── */
  --ja-navy:        #16213e;   /* nav bar utama */
  --ja-navy-dk:     #0d1b2a;   /* topbar / footer / header */
  --ja-navy-lite:   #1e3558;   /* hover item nav / dropdown bg */
  --ja-navy-border: rgba(255,255,255,.08); /* border dalam area navy */

  /* ── Neutrals ── */
  --ja-dark:        #212121;   /* teks konten */
  --ja-dark2:       #424242;   /* teks sekunder */
  --ja-gray:        #f5f5f5;   /* background halaman */
  --ja-gray2:       #e8e8e8;   /* border / divider halus */
  --ja-muted:       #757575;   /* meta, tanggal, label kecil */
  --ja-text:        #212121;
  --ja-white:       #ffffff;
  --ja-border:      #e0e0e0;

  /* ── Misc ── */
  --ja-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ja-serif:       Georgia, 'Times New Roman', serif;
  --ja-radius:      4px;
  --ja-shadow:      0 1px 4px rgba(0,0,0,.1);
  --ja-shadow-md:   0 2px 12px rgba(0,0,0,.15);
  --ja-width:       1200px;
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--ja-font);
  background: var(--ja-gray);
  color: var(--ja-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ja-red); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.ja-wrap {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* ============================================================
   2. TOP INFO BAR
   ============================================================ */
.ja-topbar {
  background: var(--ja-navy-dk);   /* deep navy — paling gelap */
  color: rgba(255,255,255,.65);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ja-navy-border);
}
.ja-topbar .ja-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ja-topbar-date { font-weight: 500; }
.ja-topbar-right { display: flex; gap: 16px; align-items: center; }
.ja-topbar-right a {
  color: rgba(255,255,255,.6);
  font-size: 11px;
  letter-spacing: .03em;
  transition: color .2s;
}
.ja-topbar-right a:hover { color: #fff; }

/* ============================================================
   3. HEADER — Logo + Search (navy seperti detik.com)
   ============================================================ */
.site-header {
  background: var(--ja-navy-dk) !important;  /* deep navy */
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.site-header .inside-header {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo — "Journal" putih + "Arta" orange-red (ala detik.com) */
.site-branding { flex-shrink: 0; }
.site-branding .site-title,
.site-branding .site-title a {
  color: #fff !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -1px;
  font-style: italic;
  text-decoration: none !important;
  line-height: 1 !important;
}
/* Suffix "Arta" pakai orange-red — mirip "com" di detikcom */
.site-branding .site-title a::after {
  content: 'Arta';
  color: var(--ja-orange);
}
/* Sembunyikan teks asli "JournalArta" dan tampilkan hanya "Journal" */
/* Note: karena WP render sebagai teks, kita style dua bagian via ::before / CSS trick */
.site-description {
  color: rgba(255,255,255,.55) !important;
  font-size: 10px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 3px !important;
}

/* Search box di header — field putih bening */
.ja-header-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  overflow: hidden;
  max-width: 340px;
  flex: 1;
  transition: border-color .2s;
}
.ja-header-search:focus-within {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.15);
}
.ja-header-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
}
.ja-header-search input::placeholder { color: rgba(255,255,255,.5); }
.ja-header-search button {
  background: var(--ja-navy);
  border: none;
  border-left: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s;
}
.ja-header-search button:hover { background: var(--ja-red); }

/* ============================================================
   4. NAVIGASI KATEGORI — navy seperti detik.com
   ============================================================ */
.main-navigation {
  background: var(--ja-navy) !important;   /* #16213e — signature detik */
  border-top: none !important;
}
.main-navigation .inside-navigation {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
.main-navigation ul { display: flex; flex-wrap: wrap; }
.main-navigation ul li a {
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 14px !important;
  display: block;
  transition: background .2s, color .2s !important;
  border-right: 1px solid var(--ja-navy-border);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  background: var(--ja-red) !important;
  color: #fff !important;
}
/* Dropdown */
.main-navigation ul ul {
  background: var(--ja-navy-lite) !important;  /* lighter navy */
  border: none !important;
  border-top: 2px solid var(--ja-red) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
  min-width: 180px !important;
}
.main-navigation ul ul li a {
  font-size: 12px !important;
  padding: 9px 14px !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* ============================================================
   5. BREAKING NEWS TICKER
   ============================================================ */
.ja-breaking {
  background: var(--ja-white);
  border-bottom: 1px solid var(--ja-border);
  font-size: 13px;
  overflow: hidden;
}
.ja-breaking .ja-wrap {
  display: flex;
  align-items: stretch;
  height: 36px;
}
.ja-breaking-label {
  background: var(--ja-red);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 14px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.ja-breaking-label::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 0; bottom: 0;
  border-left: 8px solid var(--ja-red);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
.ja-breaking-ticker {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 20px;
  flex: 1;
  position: relative;
}
.ja-breaking-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  animation: ja-ticker 40s linear infinite;
}
.ja-breaking-ticker-inner a {
  color: var(--ja-text);
  margin-right: 50px;
  font-weight: 500;
}
.ja-breaking-ticker-inner a:hover { color: var(--ja-red); }
@keyframes ja-ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ============================================================
   6. LAYOUT UTAMA
   ============================================================ */
.site-content {
  background: var(--ja-gray);
  padding: 16px 0 24px;
}
.ja-main-layout {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .ja-main-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   7. SECTION HEADER — seperti detik (garis merah + judul)
   ============================================================ */
.ja-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ja-red);
  margin-bottom: 14px;
  padding-bottom: 8px;
}
.ja-section-title {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ja-red);
  position: relative;
}
.ja-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--ja-red);
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
}
.ja-section-more {
  font-size: 11px;
  color: var(--ja-red);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid var(--ja-red);
  padding: 3px 10px;
  border-radius: 2px;
  transition: all .2s;
}
.ja-section-more:hover {
  background: var(--ja-red);
  color: #fff !important;
}

/* ============================================================
   8. HERO SECTION — artikel utama + daftar berita
   ============================================================ */
.ja-hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-bottom: 20px;
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  overflow: hidden;
  box-shadow: var(--ja-shadow);
}
@media (max-width: 700px) {
  .ja-hero { grid-template-columns: 1fr; }
}
/* Hero kiri — artikel featured besar */
.ja-hero-main {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.ja-hero-main .ja-hero-img {
  width: 100%; height: 360px;
  object-fit: cover;
  display: block;
}
/* Fallback: jika tidak ada gambar, beri gradient navy → merah */
.ja-hero-main:not(:has(.ja-hero-img)) {
  background: linear-gradient(135deg, var(--ja-navy-dk) 0%, var(--ja-navy) 60%, var(--ja-red) 100%);
}
.ja-hero-main:not(:has(.ja-hero-img)) .ja-hero-body {
  padding: 32px 20px;
}
.ja-hero-main:not(:has(.ja-hero-img)) h2 a { color: #fff; }
.ja-hero-main:not(:has(.ja-hero-img)) .ja-meta { color: rgba(255,255,255,.7); }
.ja-hero-main .ja-hero-body {
  padding: 16px;
  flex: 1;
}
.ja-hero-main .ja-cat-badge {
  background: var(--ja-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 8px;
}
.ja-hero-main h2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ja-text);
  margin-bottom: 8px;
}
.ja-hero-main h2 a { color: inherit; }
.ja-hero-main h2 a:hover { color: var(--ja-red); }
.ja-hero-main .ja-meta {
  font-size: 12px;
  color: var(--ja-muted);
}

/* Hero kanan — daftar berita terbaru */
.ja-hero-list {
  border-left: 1px solid var(--ja-border);
  display: flex;
  flex-direction: column;
}
.ja-hero-list-header {
  background: var(--ja-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 14px;
}
.ja-hero-list-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ja-gray2);
  transition: background .15s;
}
.ja-hero-list-item:hover { background: var(--ja-gray); }
.ja-hero-list-item:last-child { border-bottom: none; }
.ja-hero-list-thumb {
  width: 70px; height: 52px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.ja-hero-list-thumb-placeholder {
  width: 70px; height: 52px;
  background: var(--ja-gray2);
  border-radius: 2px;
  flex-shrink: 0;
}
.ja-hero-list-body {}
.ja-hero-list-body h4 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ja-text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ja-hero-list-body h4 a { color: inherit; }
.ja-hero-list-body h4 a:hover { color: var(--ja-red); }
.ja-hero-list-time {
  font-size: 11px;
  color: var(--ja-muted);
}

/* ============================================================
   9. ARTICLE CARDS GRID
   ============================================================ */
.ja-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) { .ja-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ja-grid { grid-template-columns: 1fr; } }

.ja-card {
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  overflow: hidden;
  box-shadow: var(--ja-shadow);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.ja-card:hover {
  box-shadow: var(--ja-shadow-md);
  transform: translateY(-2px);
}
.ja-card-img-wrap {
  overflow: hidden;
  height: 175px;
  background: var(--ja-gray2);
  position: relative;
}
.ja-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ja-card:hover .ja-card-img-wrap img { transform: scale(1.05); }
.ja-card-cat {
  position: absolute;
  bottom: 8px; left: 8px;
  background: var(--ja-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 2px;
}
.ja-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.ja-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ja-text);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.ja-card-title a { color: inherit; }
.ja-card-title a:hover { color: var(--ja-red); }
.ja-card-meta {
  font-size: 11px;
  color: var(--ja-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}
.ja-card-meta .ja-dot { color: var(--ja-border); }

/* ============================================================
   10. LIST ARTICLE — berita per kategori (dengan nomor)
   ============================================================ */
.ja-list-article {
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  overflow: hidden;
  box-shadow: var(--ja-shadow);
  margin-bottom: 20px;
}
.ja-list-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ja-gray2);
  align-items: flex-start;
  transition: background .15s;
}
.ja-list-item:hover { background: #fafafa; }
.ja-list-item:last-child { border-bottom: none; }
.ja-list-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--ja-gray2);
  min-width: 28px;
  line-height: 1;
  padding-top: 2px;
}
.ja-list-thumb {
  width: 80px; height: 60px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.ja-list-thumb-ph {
  width: 80px; height: 60px;
  background: var(--ja-gray2);
  border-radius: 2px;
  flex-shrink: 0;
}
.ja-list-content {}
.ja-list-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--ja-red);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
  display: block;
}
.ja-list-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ja-text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ja-list-title a { color: inherit; }
.ja-list-title a:hover { color: var(--ja-red); }
.ja-list-meta { font-size: 11px; color: var(--ja-muted); }

/* ============================================================
   11. SIDEBAR
   ============================================================ */
.ja-sidebar { display: flex; flex-direction: column; gap: 16px; }

.ja-widget {
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  box-shadow: var(--ja-shadow);
  overflow: hidden;
}
.ja-widget-header {
  background: var(--ja-navy);   /* navy — konsisten dengan nav */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-left: 3px solid var(--ja-red);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ja-widget-header a {
  color: rgba(255,255,255,.6) !important;
  font-size: 10px;
}
/* Trending widget */
.ja-trending-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ja-gray2);
  align-items: flex-start;
}
.ja-trending-item:last-child { border-bottom: none; }
.ja-trending-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--ja-red);
  min-width: 22px;
  line-height: 1;
}
.ja-trending-num.top3 { color: var(--ja-red); }
.ja-trending-num.rest { color: var(--ja-gray2); }
.ja-trending-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ja-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ja-trending-title a { color: inherit; }
.ja-trending-title a:hover { color: var(--ja-red); }
/* Tag cloud widget */
.ja-tags { padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ja-tags a {
  background: var(--ja-gray);
  color: var(--ja-text);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid var(--ja-border);
  transition: all .2s;
}
.ja-tags a:hover {
  background: var(--ja-red);
  color: #fff !important;
  border-color: var(--ja-red);
}

/* ============================================================
   12. SINGLE POST
   ============================================================ */
.single .site-content { padding: 20px 0; }
.single .ja-single-wrap {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .single .ja-single-wrap { grid-template-columns: 1fr; }
}
.ja-article-box {
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  box-shadow: var(--ja-shadow);
  padding: 24px 28px;
}
/* Breadcrumb */
.ja-breadcrumb {
  font-size: 12px;
  color: var(--ja-muted);
  margin-bottom: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ja-breadcrumb a { color: var(--ja-red); }
.ja-breadcrumb span { color: var(--ja-border); }
/* Article header */
.ja-article-cat {
  background: var(--ja-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 12px;
}
.single .entry-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--ja-text) !important;
  margin-bottom: 12px !important;
  font-family: var(--ja-font) !important;
}
.ja-article-meta {
  font-size: 12px;
  color: var(--ja-muted);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--ja-border);
  border-bottom: 1px solid var(--ja-border);
  margin-bottom: 20px;
}
.ja-article-meta strong { color: var(--ja-text); }
/* Content */
.single .entry-content {
  font-size: 16px;
  line-height: 1.85;
  color: #333;
}
.single .entry-content p { margin-bottom: 1.3em; }
.single .entry-content h2 {
  font-size: 20px; font-weight: 800;
  margin: 1.8em 0 .8em;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ja-red);
}
.single .entry-content h3 {
  font-size: 17px; font-weight: 700;
  margin: 1.5em 0 .7em;
}
.single .entry-content blockquote {
  border-left: 4px solid var(--ja-red);
  background: var(--ja-red-lite);
  padding: 14px 18px;
  margin: 1.5em 0;
  border-radius: 0 var(--ja-radius) var(--ja-radius) 0;
  font-style: italic;
  color: #555;
}
.single .entry-content img {
  border-radius: var(--ja-radius);
  margin: 1em auto;
}
/* Share bar */
.ja-share-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--ja-border);
  margin-top: 20px;
  flex-wrap: wrap;
}
.ja-share-label { font-size: 12px; font-weight: 600; color: var(--ja-muted); }
.ja-share-btn {
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ja-share-btn.fb  { background: #1877f2; }
.ja-share-btn.tw  { background: #1da1f2; }
.ja-share-btn.wa  { background: #25d366; }
.ja-share-btn.tg  { background: #0088cc; }
/* Source credit */
.jab-source-credit {
  background: #fafafa;
  border: 1px solid var(--ja-border) !important;
  border-left: 4px solid var(--ja-red) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  border-radius: 0 var(--ja-radius) var(--ja-radius) 0;
  margin-top: 24px !important;
  color: var(--ja-muted) !important;
}

/* ============================================================
   13. FOOTER — navy gelap, seirama dengan header
   ============================================================ */
.site-footer {
  background: var(--ja-navy-dk) !important;   /* deep navy */
  color: rgba(255,255,255,.7) !important;
  padding: 0 !important;
  margin-top: 20px;
  border-top: 3px solid var(--ja-navy);
}
.ja-footer-widgets {
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 32px 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) {
  .ja-footer-widgets { grid-template-columns: 1fr; gap: 24px; }
}
.ja-footer-brand .ja-logo-text {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
/* Suffix "Arta" orange di logo footer */
.ja-footer-brand .ja-logo-text::after {
  content: '.com';
  color: var(--ja-orange);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.ja-footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  max-width: 280px;
}
.ja-footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ja-footer-col ul li { margin-bottom: 8px; }
.ja-footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,.6) !important;
  transition: color .2s;
}
.ja-footer-col ul li a:hover { color: #fff !important; }
.ja-footer-bar {
  background: rgba(0,0,0,.4);  /* sedikit lebih gelap dari footer body */
  padding: 14px 16px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  text-align: center;
  border-top: 1px solid var(--ja-navy-border);
}
/* Sembunyikan footer bawaan GP — digantikan ja-footer custom */
.site-footer .inside-footer { display: none; }
footer.site-info { display: none !important; }

/* ============================================================
   14. PAGINATION
   ============================================================ */
.ja-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 20px 0;
}
.ja-pagination a, .ja-pagination span {
  padding: 7px 13px;
  background: var(--ja-white);
  border: 1px solid var(--ja-border);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ja-text);
  transition: all .2s;
}
.ja-pagination a:hover { background: var(--ja-red); color: #fff !important; border-color: var(--ja-red); }
.ja-pagination .current { background: var(--ja-red); color: #fff !important; border-color: var(--ja-red); }

/* ============================================================
   15. UTILITIES & RESPONSIF
   ============================================================ */
.ja-badge {
  display: inline-block;
  background: var(--ja-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
}
.ja-time { font-size: 11px; color: var(--ja-muted); }

/* Override GP defaults */
.generate-columns-container { max-width: none !important; }
.site-content .content-area { max-width: none !important; padding: 0 !important; }
.inside-article { padding: 0 !important; }
.entry-header, .entry-footer { padding: 0 !important; }
.entry-content { margin: 0 !important; }
.page-hero-section { display: none; }

/* Sembunyikan elemen GP yang tidak dipakai */
.entry-meta, .post-image { display: none; }

@media (max-width: 600px) {
  .site-branding .site-title { font-size: 24px !important; }
  .ja-hero { grid-template-columns: 1fr; }
  .ja-article-box { padding: 16px; }
  .single .entry-title { font-size: 20px !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --ja-gray:   #111;
    --ja-gray2:  #222;
    --ja-white:  #1c1c1c;
    --ja-text:   #e8e8e8;
    --ja-border: #333;
    --ja-muted:  #999;
  }
}

/* ============================================================
   16. SINGLE POST — 2-KOLOM (70% konten / 30% sidebar)
   ============================================================ */

/* Wrapper yang membungkus #primary + sidebar  */
.ja-single-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: var(--ja-width);
  margin: 0 auto;
  padding: 16px 16px 0;
  box-sizing: border-box;
}

/* Kolom konten utama — ambil sisa ruang setelah sidebar */
.ja-single-wrap #primary {
  flex: 1 1 0;
  min-width: 0;         /* mencegah overflow teks panjang */
  max-width: calc(100% - 324px); /* 300px sidebar + 24px gap */
}

/* Override GP grid padding/max-width di dalam wrapper kita */
.ja-single-wrap .inside-article {
  padding: 24px !important;
}
.ja-single-wrap .entry-content {
  font-size: 16px;
  line-height: 1.8;
}
.ja-single-wrap .entry-content p { margin-bottom: 1.2em; }
.ja-single-wrap .entry-content img {
  border-radius: var(--ja-radius);
  margin: 8px 0;
}

/* Sidebar kanan single post */
.ja-single-sidebar {
  width: 300px;
  flex-shrink: 0;
  padding-top: 0;
}

/* Sticky sidebar saat scroll */
@supports (position: sticky) {
  .ja-single-sidebar { position: sticky; top: 16px; }
}

/* ============================================================
   17. SIDEBAR SINGLE POST — WIDGETS
   ============================================================ */

.ja-sw-widget {
  background: var(--ja-white);
  border-radius: var(--ja-radius);
  box-shadow: var(--ja-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Header widget — garis merah di kiri */
.ja-sw-header {
  background: var(--ja-navy);   /* navy — konsisten dengan nav bar */
  color: #fff;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-left: 3px solid var(--ja-red);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Terpopuler items ── */
.ja-sw-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ja-gray2);
  transition: background .15s;
  text-decoration: none;
}
.ja-sw-item:last-child { border-bottom: none; }
.ja-sw-item:hover { background: var(--ja-gray); }

.ja-sw-thumb {
  width: 72px; height: 54px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.ja-sw-thumb-ph {
  width: 72px; height: 54px;
  background: var(--ja-gray2);
  border-radius: 2px;
  flex-shrink: 0;
}

.ja-sw-body { flex: 1; min-width: 0; }

.ja-sw-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ja-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  transition: color .15s;
}
.ja-sw-item:hover .ja-sw-title { color: var(--ja-red); }

.ja-sw-meta {
  font-size: 10px;
  color: var(--ja-muted);
}

/* ── Slot Iklan ── */
.ja-sw-ad .ja-sw-header {
  background: var(--ja-gray2);
  color: var(--ja-muted);
  border-left-color: var(--ja-border);
}
.ja-ad-slot { padding: 12px; }
.ja-ad-placeholder {
  width: 100%;
  height: 250px;
  background: var(--ja-gray);
  border: 2px dashed var(--ja-border);
  border-radius: var(--ja-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ja-muted);
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
}
.ja-ad-placeholder span {
  font-size: 11px;
  font-weight: 400;
  color: #ccc;
}

/* ── Daftar Kategori ── */
.ja-sw-catlist { padding: 4px 0; }
.ja-sw-catlist li { border-bottom: 1px solid var(--ja-gray2); }
.ja-sw-catlist li:last-child { border-bottom: none; }
.ja-sw-catlist li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--ja-text);
  transition: color .15s, background .15s;
}
.ja-sw-catlist li a:hover {
  color: var(--ja-red);
  background: var(--ja-gray);
}
.ja-sw-cat-count {
  background: var(--ja-gray2);
  color: var(--ja-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

/* ============================================================
   18. RESPONSIF SINGLE POST
   ============================================================ */
@media (max-width: 900px) {
  .ja-single-wrap {
    flex-direction: column;
    padding: 12px;
    gap: 16px;
  }
  .ja-single-wrap #primary {
    max-width: 100%;
  }
  .ja-single-sidebar {
    width: 100%;
    position: static; /* disable sticky di mobile */
  }
  /* Sidebar di mobile: tampilkan row */
  .ja-sw-widget { margin-bottom: 16px; }
}

@media (max-width: 600px) {
  .ja-single-wrap { padding: 8px; }
  .ja-single-wrap .inside-article { padding: 16px !important; }
}