/* ========================================
   GLOBAL STYLES — MEDIA POSITIF (DIPERBARUI)
   Font utama: Inter (Google Fonts Variable Font)
   Elegan, profesional, mudah dibaca, konsisten
   ======================================== */

@import url(<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">);


/* --- FONT UTAMA: INTER (SEMUA ELEMEN) --- */
:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.65;
  color: #2d2d2d; /* sedikit lebih lembut dari #333 */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- HEADING: Lebih berwibawa, tapi tidak terlalu tebal --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* cukup tegas, tapi tetap elegan */
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

h1 {
  font-weight: 700;
  font-size: 2.25rem; /* 36px */
}

/* --- IZINKAN STRONG DAN B MENJADI TEBAL --- */
strong, b {
  font-weight: 700 !important;
}

/* --- DUKUNGAN UNTUK EDITOR (Quill, TinyMCE, dll) --- */
.ql-bold, .mce-content-body strong, .mce-content-body b {
  font-weight: 700 !important;
}

/* --- RESET & UTILITAS UMUM --- */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ===== CAROUSEL KATEGORI — STABILISASI LAYOUT ===== */
.keuangan-carousel-container,
.kesehatan-carousel-container,
.komunitas-carousel-container,
.keluarga-carousel-container {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 15px;
  transition: all 0.3s ease;
}

.keuangan-carousel-container:hover,
.kesehatan-carousel-container:hover,
.komunitas-carousel-container:hover,
.keluarga-carousel-container:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Jika ingin lebih aman, tambahkan ini juga */
.keuangan-news-row,
.kesehatan-news-row,
.komunitas-news-row,
.keluarga-news-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
  scroll-behavior: smooth;
  min-height: 180px; /* tinggi minimum untuk row */
}

/* Pastikan tombol panah tidak mengganggu layout */
.keuangan-carousel-btn,
.kesehatan-carousel-btn,
.komunitas-carousel-btn,
.keluarga-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0e9bd3;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s, transform 0.3s;
  z-index: 10;
}

.keuangan-carousel-btn:hover,
.kesehatan-carousel-btn:hover,
.komunitas-carousel-btn:hover,
.keluarga-carousel-btn:hover {
  background: #0b2b41;
  transform: translateY(-50%) scale(1.1);
}