/* ==========================================================================
   Penerbit: gaya pastel lembut (1.1.0)
   Dimuat paling akhir. Mengganti token warna dan bentuk, lalu menata ulang
   komponen utama: header, hero, statistik, kartu, tombol, CTA, footer.
   ========================================================================== */

:root {
    /* Palet */
    --pn-bg:             #fcf8f3;
    --pn-bg-soft:        #f6efe7;
    --pn-white:          #ffffff;
    --pn-border:         #eadfd2;
    --pn-border-light:   #f2e9de;
    --pn-text:           #3a2a22;
    --pn-text-muted:     #7d6e65;
    --pn-text-light:     #a99b91;

    --pn-accent:         #cf5a3d;   /* koral: tombol utama, kontras 4.6:1 dengan putih */
    --pn-accent-hover:   #b84a30;
    --pn-highlight:      #cf5a3d;
    --pn-highlight-rgb:  207, 90, 61;
    --pn-highlight-soft: rgba(207, 90, 61, .10);
    --pn-ink:            #3a2a22;
    --pn-gold:           #b9791a;

    /* Warna kartu */
    --pn-mint:    #dcebe6;
    --pn-peach:   #fadbd0;
    --pn-butter:  #fdeec9;
    --pn-sky:     #dde9f7;
    --pn-lilac:   #eadcf0;
    --pn-teal:    #2f6f64;
    --pn-link:    #a8432a;

    /* Bentuk dan bayangan lembut */
    --pn-radius:      16px;
    --pn-radius-lg:   28px;
    --pn-shadow-sm:   0 4px 14px rgba(125, 86, 62, .08), inset 0 1px 0 rgba(255,255,255,.8);
    --pn-shadow-md:   0 10px 28px rgba(125, 86, 62, .13), inset 0 1px 0 rgba(255,255,255,.8);
    --pn-shadow-lg:   0 18px 44px rgba(125, 86, 62, .16);

    /* Huruf membulat tanpa unduhan font. Memakai font bawaan perangkat. */
    --pn-font:       ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
    --pn-font-serif: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body { background: var(--pn-bg); color: var(--pn-text); font-family: var(--pn-font); }
a { color: var(--pn-link); }
h1, h2, h3, h4 { letter-spacing: -.01em; }

/* ---------- Tombol ---------- */
.pnb-btn { border-radius: 999px; border-width: 0; padding: 12px 28px; box-shadow: var(--pn-shadow-sm); }
.pnb-btn--primary { background: var(--pn-accent); color: #fff; box-shadow: 0 8px 18px rgba(207, 90, 61, .32); }
.pnb-btn--primary:hover { background: var(--pn-accent-hover); box-shadow: 0 10px 22px rgba(207, 90, 61, .4); }
.pnb-btn--ghost { background: #fff; color: var(--pn-text); }
.pnb-btn--ghost:hover { background: var(--pn-butter); color: var(--pn-text); }
.pnb-btn--light { background: #fff; color: var(--pn-accent-hover); }

/* ---------- Header ---------- */
.pnb-header { background: rgba(252, 248, 243, .88); border-bottom: 0; box-shadow: 0 8px 24px rgba(125, 86, 62, .07); border-radius: 0 0 28px 28px; }
.pnb-header__inner { height: 72px; }
.pnb-logo-text { color: var(--pn-text); font-weight: 800; }
.pnb-nav-menu > li > a { border-radius: 999px; padding: 9px 16px; color: var(--pn-text); font-weight: 600; }
.pnb-nav-menu > li > a:hover,
.pnb-nav-menu > li.current-menu-item > a,
.pnb-nav-menu > li.current-menu-ancestor > a { background: var(--pn-mint); color: var(--pn-teal); }
.pnb-header-cta-btn { border-radius: 999px; background: var(--pn-accent); color: #fff; box-shadow: 0 6px 14px rgba(207, 90, 61, .3); }
.pnb-header-cta-btn:hover { background: var(--pn-accent-hover); color: #fff; }
.pnb-mobile-menu { background: var(--pn-bg); border-radius: 0 0 28px 28px; box-shadow: var(--pn-shadow-md); }

/* ---------- Hero: kartu persik besar ---------- */
.pnb-hero { background: transparent; border-bottom: 0; padding: 24px 24px 0; }
.pnb-hero__inner {
    background: linear-gradient(135deg, var(--pn-peach) 0%, #fbe6dc 100%);
    border-radius: 36px;
    box-shadow: var(--pn-shadow-md);
    padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);
}
.pnb-eyebrow {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .75); color: var(--pn-accent-hover);
    font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.pnb-hero__title { font-weight: 800; color: var(--pn-text); }
.pnb-hero__text { color: #6a564c; }
.pnb-hero__cover { border-radius: 18px; box-shadow: var(--pn-shadow-lg); overflow: hidden; }
.pnb-hero__placeholder { border-radius: 28px; background: #fff; box-shadow: var(--pn-shadow-md); color: var(--pn-accent); }

/* ---------- Statistik: empat kartu warna ---------- */
.pnb-stats { background: transparent; color: var(--pn-text); padding: 24px 24px 0; }
.pnb-stats__list { padding: 0; gap: 20px; text-align: left; }
.pnb-stats__item { padding: 22px 24px; border-radius: 24px; box-shadow: var(--pn-shadow-sm); background: var(--pn-mint); display: flex; flex-direction: column; gap: 4px; }
.pnb-stats__item:nth-child(4n+2) { background: var(--pn-peach); }
.pnb-stats__item:nth-child(4n+3) { background: var(--pn-butter); }
.pnb-stats__item:nth-child(4n+4) { background: var(--pn-sky); }
.pnb-stats__value { color: var(--pn-text); font-size: 2rem; font-weight: 800; line-height: 1.1; }
.pnb-stats__label { color: var(--pn-teal); font-weight: 700; }

/* ---------- Bagian ---------- */
.pnb-section--soft { background: transparent; }
.pnb-section__title { font-weight: 800; }
.pnb-section__more { padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--pn-shadow-sm); color: var(--pn-text); font-weight: 700; }

/* ---------- Layanan, alur, kategori: kartu berwarna ---------- */
.pnb-feature, .pnb-step, .pnb-cat-card {
    background: var(--pn-mint); border: 0; border-radius: 28px; box-shadow: var(--pn-shadow-sm);
}
.pnb-feature:nth-child(4n+2), .pnb-step:nth-child(4n+2), .pnb-cat-grid li:nth-child(4n+2) .pnb-cat-card { background: var(--pn-peach); }
.pnb-feature:nth-child(4n+3), .pnb-step:nth-child(4n+3), .pnb-cat-grid li:nth-child(4n+3) .pnb-cat-card { background: var(--pn-butter); }
.pnb-feature:nth-child(4n+4), .pnb-step:nth-child(4n+4), .pnb-cat-grid li:nth-child(4n+4) .pnb-cat-card { background: var(--pn-sky); }
.pnb-feature__title, .pnb-step__title, .pnb-cat-card__name { font-weight: 800; color: var(--pn-text); }
.pnb-feature__text, .pnb-step__text, .pnb-cat-card__count { color: #6a564c; }

/* ---------- Kartu buku ---------- */
.pnb-book-card__cover { border-radius: 22px; box-shadow: var(--pn-shadow-md); overflow: hidden; background: var(--pn-butter); }
.pnb-book-card__link:hover .pnb-book-card__cover { box-shadow: var(--pn-shadow-lg); }
.pnb-book-card__placeholder { color: var(--pn-accent); background: var(--pn-peach); }
.pnb-book-card__title { font-weight: 800; }
.pnb-book-card__price { color: var(--pn-teal); font-weight: 800; }
.pnb-book-card__badge { border-radius: 999px; padding: 4px 12px; font-weight: 700; box-shadow: var(--pn-shadow-sm); }
.pnb-book-card__badge--baru { background: var(--pn-teal); }
.pnb-book-card__badge--terlaris { background: var(--pn-gold); }

/* ---------- Kartu artikel ---------- */
.pnb-post-card { background: #fff; border: 0; border-radius: 28px; box-shadow: var(--pn-shadow-sm); }
.pnb-post-card:hover { box-shadow: var(--pn-shadow-md); }
.pnb-post-card__cat { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--pn-sky); color: #35557f; font-weight: 700; }
.pnb-post-card__title { font-weight: 800; }

/* ---------- Katalog: pencarian dan filter ---------- */
.pnb-catalog__toolbar input[type="search"],
.pnb-catalog__toolbar select,
.search-field { border: 0; border-radius: 999px; background: #fff; box-shadow: var(--pn-shadow-sm); padding-inline: 20px; }
.pnb-filter-btn { border: 0; border-radius: 999px; background: #fff; box-shadow: var(--pn-shadow-sm); font-weight: 700; color: var(--pn-text); }
.pnb-filter-btn.active { background: var(--pn-teal); color: #fff; }
.pnb-filter-btn.active .pnb-filter-count { color: #fff; }

/* ---------- Detail buku ---------- */
.pnb-book-single__cover { border-radius: 28px; overflow: hidden; box-shadow: var(--pn-shadow-lg); background: var(--pn-butter); }
.pnb-book-single__price { color: var(--pn-teal); font-weight: 800; }
.pnb-book-specs { background: var(--pn-mint); border-radius: 24px; padding: 18px 22px; }
.pnb-book-single__cat { padding: 4px 12px; border-radius: 999px; background: var(--pn-mint); color: var(--pn-teal); font-weight: 700; }

/* ---------- CTA: kartu koral ---------- */
.pnb-cta { background: transparent; padding: 0 24px clamp(48px, 7vw, 88px); }
.pnb-cta__inner {
    width: min(100%, 1140px);
    background: linear-gradient(135deg, #de7050 0%, #cf5a3d 100%);
    border-radius: 36px; box-shadow: 0 18px 40px rgba(207, 90, 61, .3);
    padding: clamp(40px, 6vw, 72px) 24px;
}
.pnb-cta__title { font-weight: 800; }
.pnb-cta__text { color: rgba(255, 255, 255, .92); }
.pnb-cta__contact, .pnb-cta__contact a { color: #fff; }

/* ---------- CTA di akhir artikel ---------- */
.pnb-post-cta { background: var(--pn-peach); border: 0; border-radius: 28px; box-shadow: var(--pn-shadow-sm); }
.pnb-post-cta__title { font-weight: 800; }
.pnb-post-cta__text { color: #6a564c; }

/* ---------- Footer: panel hijau pastel ---------- */
.site-footer { background: var(--pn-mint); color: #4b3a31; border-radius: 36px 36px 0 0; margin-top: 24px; }
.site-footer__name, .site-footer__heading { color: var(--pn-text); }
.site-footer a { color: var(--pn-teal); font-weight: 600; }
.site-footer a:hover { color: var(--pn-link); }
.site-footer__copy { color: #6a564c; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .pnb-hero { padding: 16px 16px 0; }
    .pnb-hero__inner { border-radius: 28px; }
    .pnb-stats { padding: 16px 16px 0; }
    .pnb-stats__list { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pnb-stats__item { padding: 16px 18px; }
    .pnb-cta { padding-inline: 16px; }
    .pnb-cta__inner { border-radius: 28px; }
}

/* ---------- Penyesuaian ritme (1.1.0) ---------- */
.pnb-section { padding-block: clamp(32px, 5vw, 56px); }
/* Sampul tanpa gambar berganti warna agar rak tidak monoton */
.pnb-book-card:nth-child(4n+2) .pnb-book-card__placeholder { background: var(--pn-mint);   color: var(--pn-teal); }
.pnb-book-card:nth-child(4n+3) .pnb-book-card__placeholder { background: var(--pn-butter); color: var(--pn-gold); }
.pnb-book-card:nth-child(4n+4) .pnb-book-card__placeholder { background: var(--pn-sky);    color: #35557f; }