/* ============================================
   PERFORMANCE OPTIMIZATION CSS
   ============================================ */

/* ============ FONT DISPLAY SWAP ============ */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-display: swap;
}

/* ============ PREVENT LAYOUT SHIFT ============ */
img {
  /* Biar tidak ada layout shift saat gambar loading */
  aspect-ratio: auto;
  background: #f5f5f5;
}

img[loading="lazy"] {
  content-visibility: auto;
}

/* Aspect ratio untuk card gambar biar tidak shift */
.card img {
  aspect-ratio: 16 / 9;
}

.hero-main img {
  aspect-ratio: 16 / 9;
}

/* ============ SMOOTH SCROLLING (GPU) ============ */
html {
  scroll-behavior: smooth;
}

/* ============ WILL-CHANGE UNTUK ANIMASI ============ */
.tombol-promo,
.hero-main img,
.card img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============ SAVE-DATA MODE ============ */
.save-data-mode * {
  animation: none !important;
  transition: none !important;
}

.save-data-mode .ticker-track {
  animation: none !important;
}

.save-data-mode #reading-progress,
.save-data-mode #wa-floating {
  display: none !important;
}

/* ============ SKELETON LOADING ============ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ REDUCE MOTION (Aksesibilitas) ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ CONTENT VISIBILITY ============ */
.section,
.card,
.editor-card,
.csirt-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============ CRITICAL CSS INLINE (Mini) ============ */
/* Bagian ini di-inline biar cepat render di atas */
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #fff;
}