/* HRD Forum - Single Article Styles (extracted from inline <style> for caching) */

/* Mengunci warna background header khusus di halaman artikel agar menu putih terlihat tajam */
  .site-header, 
  header[class*="site-"], 
  header#masthead,
  .main-navigation-wrapper {
      background-color: #0B1F33 !important; /* Warna Deep Navy Blue Resmi HRD Forum */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
      z-index: 9999 !important;
  }

  /* Memberikan ruang bernapas agar judul artikel turun anggun di bawah baris menu navigasi */
  .single-post-wrapper {
      padding: 170px 0 60px 0 !important; 
      background-color: #ffffff;
      font-family: 'Inter', -apple-system, sans-serif !important;
  }

  /* Penyempurnaan Estetika Kategori Artikel agar Tampak Mahal */
  .post-meta-top {
      margin-bottom: 1.5rem;
  }
  .post-meta-top a {
      color: #c8a24a !important; 
      text-decoration: none !important;
      text-transform: uppercase !important;
      font-weight: 700 !important;
      font-size: 0.85rem !important;
      letter-spacing: 0.15em !important; 
      font-family: 'Inter', sans-serif !important;
  }

  /* JUDUL UTAMA MCKINSEY STYLE */
  .post-main-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 3.2rem !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
      color: #0B1F33 !important; 
      letter-spacing: -0.01em !important;
      margin-bottom: 1.8rem !important;
  }

  /* Info Penulis & Tanggal */
  .post-meta-info {
      font-family: 'Inter', sans-serif !important;
      font-size: 0.95rem !important;
      color: #64748b !important;
      margin-bottom: 3rem !important;
      display: flex;
      gap: 15px;
      align-items: center;
      flex-wrap: wrap;
  }
  .post-meta-info strong {
      color: #0B1F33;
  }

  /* SUB-JUDUL DI DALAM ARTIKEL (H2 & H3) */
  .post-editorial-content h2, 
  .post-editorial-content h3 {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #0B1F33 !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      margin-top: 2.5rem !important;
      margin-bottom: 1rem !important;
  }
  .post-editorial-content h2 { font-size: 2rem !important; }
  .post-editorial-content h3 { font-size: 1.6rem !important; }

  /* TEKS ISI ARTIKEL (CLEAN INTER SANS-SERIF) */
  .post-editorial-content {
      font-family: 'Inter', -apple-system, sans-serif !important;
      font-size: 1.15rem !important;
      line-height: 1.85 !important;
      color: #2d3748 !important;
      letter-spacing: -0.003em !important;
  }
  .post-editorial-content p {
      margin-bottom: 1.85rem !important;
  }

  /* 🔍 GAYA DESIGN MESIN PENCARI (SEARCH BAR) PREMIUM EDITORIAL */
  .hr-article-search-section {
      margin-top: 5rem;
      padding: 3.5rem 2rem;
      background-color: #F8FAFC; 
      border-radius: 8px;
      border: 1px solid #E2E8F0;
      text-align: center;
  }

  .hr-article-search-section h3 {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 1.6rem !important;
      color: #0B1F33 !important;
      font-weight: 800 !important;
      margin: 0 0 0.5rem 0 !important;
  }

  .hr-article-search-section p {
      font-family: 'Inter', sans-serif !important;
      font-size: 0.95rem !important;
      color: #64748b !important;
      margin: 0 0 2rem 0 !important;
  }

  .hr-search-form-wrapper {
      max-width: 550px;
      margin: 0 auto;
  }

  .hr-search-capsule {
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid #CBD5E1;
      padding: 6px 6px 6px 20px;
      border-radius: 6px; 
      transition: all 0.4s cubic-bezier(.22,.61,.36,1);
      box-shadow: 0 4px 12px rgba(11, 31, 51, 0.03);
  }

  .hr-search-capsule:focus-within {
      border-color: #c8a24a !important;
      box-shadow: 0 10px 25px rgba(200, 162, 74, 0.12);
  }

  .hr-search-input {
      background: none !important;
      border: none !important;
      color: #0B1F33 !important;
      font-size: 1rem !important;
      flex: 1 !important;
      outline: none !important;
      font-family: 'Inter', sans-serif !important;
      padding: 10px 10px 10px 0 !important;
  }

  .hr-search-input::placeholder {
      color: #94A3B8;
  }

  .hr-search-submit-btn {
      background: #0B1F33 !important; 
      color: #ffffff !important;
      border: none !important;
      cursor: pointer !important;
      padding: 0 24px !important;
      height: 46px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.9rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      text-transform: uppercase !important;
      border-radius: 4px !important;
      transition: all 0.3s ease !important;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .hr-search-submit-btn:hover {
      background: #c8a24a !important; 
      color: #0B1F33 !important;
  }

  /* GAYA ARSITEKTUR KOMPONEN ARTIKEL RELEVAN (4 KOLOM HORIZONTAL) */
  .hr-related-section {
      margin-top: 5rem;
      padding-top: 4rem;
      border-top: 1px solid #e2e8f0;
  }
  
  .hr-related-section h2.related-section-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 2rem !important;
      color: #0B1F33 !important;
      font-weight: 800 !important;
      margin-bottom: 2.5rem !important;
  }

  .related-articles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.75rem; 
  }

  .related-card {
      text-decoration: none !important;
      display: block;
  }

  .related-thumb {
      width: 100%;
      height: 140px; 
      overflow: hidden;
      border-radius: 6px;
      background: #0B1F33;
      margin-bottom: 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .related-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .related-card:hover .related-thumb img {
      transform: scale(1.05);
  }

  .related-card h3 {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 1.15rem !important; 
      font-weight: 700 !important;
      color: #0B1F33 !important;
      line-height: 1.4 !important;
      margin: 0 0 0.6rem 0 !important;
      transition: color 0.3s ease;
  }

  .related-card:hover h3 {
      color: #c8a24a !important; 
  }

  .related-card p {
      font-family: 'Inter', sans-serif !important;
      font-size: 0.9rem !important;
      color: #64748b !important;
      line-height: 1.5 !important;
      margin: 0 !important;
  }

  @media (max-width: 1024px) {
      .related-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  }
  @media (max-width: 640px) {
      .related-articles-grid { grid-template-columns: 1fr; }
      .hr-search-capsule { flex-direction: column; padding: 12px; gap: 12px; }
      .hr-search-input { width: 100%; text-align: center; padding: 4px 0 !important; }
      .hr-search-submit-btn { width: 100%; }
  }

/* Base style yang sebelumnya inline di beberapa elemen, sekarang di-consolidate di sini */
.meta-reading-time {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.post-featured-image-wrap {
    margin-bottom: 50px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
}

.related-thumb-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0B1F33 0%, #1e293b 100%);
}