/*
Theme Name: Ngepush Child
Description: Child theme GeneratePress untuk ngepush.com
Template: generatepress
Version: 1.3.0
Author: ngepush.com
Text Domain: ngepush-child
*/

/* Jangan pakai @import. GeneratePress memuat style.css parent dan child sendiri. */

:root {
  --ngp-orange: #ff6a1f;      /* warna merek (tengah gradien ikon) */
  --ngp-orange-deep: #b83f00; /* untuk teks/link di atas putih, kontras aman */
  --ngp-ink: #17171a;
  --ngp-muted: #5b5b63;
  --ngp-line: #e4e4e8;
}

/* Font: Plus Jakarta Sans (lisensi OFL), di-host sendiri, tanpa Google Fonts. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Dasar */
body { color: var(--ngp-ink); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
button, input, select { font-family: inherit; }
a { color: var(--ngp-orange-deep); }
a:hover, a:focus { color: var(--ngp-ink); }

/* Header & menu */
.site-header { border-bottom: 1px solid var(--ngp-line); }
.main-navigation .main-nav ul li a { font-weight: 600; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--ngp-orange-deep); }

/* Judul situs berupa teks disembunyikan secara visual (tetap terbaca pembaca layar) karena logo sudah memuat nama. */
.site-branding-container .site-logo ~ .site-branding {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Logo header. Ubah max-height jika terlalu besar atau kecil. */
.site-logo .header-image,
.header-image.is-logo-image { width: auto; max-width: 100%; height: auto; max-height: 44px; }
@media (max-width: 768px) {
  .site-logo .header-image,
  .header-image.is-logo-image { max-height: 36px; }
}

/* Keterbacaan artikel */
.entry-content { line-height: 1.75; }
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.6em; }

/* Tabel di artikel: bisa digeser di layar kecil */
.entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: .5rem .75rem; border: 1px solid var(--ngp-line); text-align: left; }

/* Teks "Terakhir diperbarui" */
.ngp-updated { margin: 0 0 1.25rem; font-size: .9rem; color: var(--ngp-muted); }

/* ===== Halaman depan ===== */
.home .entry-header { display: none; }
.home.separate-containers .inside-article { background: transparent; padding: 0; }
.home.separate-containers .site-main > * { margin-bottom: 0; }

.ngp-home section { padding: 2.5rem 0; }
.ngp-home h2 { margin: 0 0 .5rem; font-size: 1.6rem; }
.ngp-home .ngp-lead { margin: 0 0 1.5rem; color: var(--ngp-muted); max-width: 40rem; }

.ngp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; padding: 3rem 0 2rem; }
.ngp-hero h1 { margin: 0 0 1rem; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1; }
.ngp-hero p { margin: 0 0 1.5rem; max-width: 34rem; font-size: 1.1rem; color: var(--ngp-muted); }
.ngp-hero .ngp-tool { margin: 0; background: #fff; border-top: 4px solid var(--ngp-orange); }

.ngp-btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 8px; background: var(--ngp-orange); color: var(--ngp-ink); font-weight: 700; text-decoration: none; }
.ngp-btn:hover, .ngp-btn:focus { background: var(--ngp-ink); color: #fff; }

/* Urutan tool (benar-benar berurutan, jadi diberi nomor) */
.ngp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.ngp-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 1.1rem 0; border-top: 1px solid var(--ngp-line); counter-increment: s; }
.ngp-steps li::before { content: counter(s); font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--ngp-orange-deep); }
.ngp-steps a { font-size: 1.15rem; font-weight: 700; color: var(--ngp-ink); text-decoration: none; }
.ngp-steps a:hover, .ngp-steps a:focus { color: var(--ngp-orange-deep); text-decoration: underline; }
.ngp-steps p { margin: .15rem 0 0; color: var(--ngp-muted); }

/* Prinsip */
.ngp-points { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem 2rem; }
.ngp-points > div { padding-top: .75rem; border-top: 3px solid var(--ngp-orange); }
.ngp-points h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.ngp-points p { margin: 0; color: var(--ngp-muted); }

@media (max-width: 820px) {
  .ngp-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; }
}

/* Footer */
body .site-footer { background: var(--ngp-ink); }
.ngp-footer { color: #d7d7dc; }
.ngp-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 3rem 20px 2rem; }
.ngp-footer-brand img { display: block; width: auto; height: 40px; margin: 0 0 1rem; }
.ngp-footer-brand p { max-width: 22rem; margin: 0; color: #b4b4bc; }
.ngp-footer-title { margin: 0 0 .75rem; font-weight: 700; color: #fff; }
.ngp-footer ul { margin: 0; padding: 0; list-style: none; }
.ngp-footer li { margin: 0 0 .5rem; }
.ngp-footer a { color: #d7d7dc; text-decoration: none; }
.ngp-footer a:hover, .ngp-footer a:focus { color: #ff9a5c; text-decoration: underline; }
.ngp-footer-bar { border-top: 1px solid rgba(255, 255, 255, .14); }
.ngp-footer-bar p { max-width: 1200px; margin: 0 auto; padding: 1.1rem 20px; font-size: .9rem; color: #9a9aa3; }
@media (max-width: 820px) { .ngp-footer-inner { grid-template-columns: 1fr 1fr; } .ngp-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ngp-footer-inner { grid-template-columns: 1fr; } }