/*
 * Premium component system for the public portal.
 * Loaded after page-level styles so every card family receives a real visual
 * composition—not only a shared hover effect.
 */

body.public-site {
  --pc-forest-950: #052b1d;
  --pc-forest-900: #073c2b;
  --pc-forest-800: #0b533a;
  --pc-forest-700: #087b59;
  --pc-gold-700: #9c6a14;
  --pc-gold-500: #d6a23a;
  --pc-gold-300: #efd07b;
  --pc-gold-100: #fff0c8;
  --pc-cream: #fff9ec;
  --pc-mint: #e4f4e9;
  --pc-surface: linear-gradient(145deg, #fff9ec 0%, #f6e6bd 100%);
  --pc-surface-cool: linear-gradient(145deg, #eef8f1 0%, #d9eee0 100%);
  --pc-dark: linear-gradient(145deg, var(--pc-forest-800) 0%, var(--pc-forest-950) 100%);
  --pc-gold-surface: linear-gradient(145deg, #f8e6b8 0%, #e7c56e 100%);
  --pc-line: color-mix(in srgb, var(--sji-gold) 40%, var(--sji-line));
  --pc-shadow: 0 22px 55px rgba(3, 71, 31, .10), 0 8px 20px rgba(139, 100, 27, .07);
  --pc-shadow-hover: 0 30px 72px rgba(3, 71, 31, .16), 0 12px 28px rgba(139, 100, 27, .10);
}

/* Section rhythm: warm editorial surfaces rather than flat white strips. */
body.public-site.page-home :is(.home-profile, .home-why),
body.public-site.page-proses main,
body.public-site.page-tentang main,
body.public-site.page-kontak main {
  background:
    radial-gradient(circle at 8% 8%, rgba(214, 158, 28, .075), transparent 24rem),
    radial-gradient(circle at 92% 94%, rgba(1, 83, 41, .07), transparent 28rem),
    var(--sji-page) !important;
}

/* ── Universal premium frame for simple information cards ───────────── */
body.public-site.page-proses .card,
body.public-site.page-tentang .card,
body.public-site.page-kontak .card,
body.public-site .official-template-card,
body.public-site .package-addon,
body.public-site .format-commerce-card,
body.public-site .hki-panel,
body.public-site .checkout-panel,
body.public-site .cart-summary {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--pc-line) !important;
  border-radius: 22px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site.page-proses .card::before,
body.public-site.page-tentang .card::before,
body.public-site.page-kontak .card::before,
body.public-site .official-template-card::before,
body.public-site .package-addon::before,
body.public-site .format-commerce-card::before,
body.public-site .hki-panel::before,
body.public-site .checkout-panel::before,
body.public-site .cart-summary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--sji-green), var(--sji-gold));
}

body.public-site.page-proses .card::after,
body.public-site.page-tentang .card::after,
body.public-site.page-kontak .card::after,
body.public-site .official-template-card::after,
body.public-site .package-addon::after,
body.public-site .format-commerce-card::after,
body.public-site .checkout-panel::after,
body.public-site .cart-summary::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 118px;
  height: 118px;
  right: -42px;
  top: -48px;
  border-radius: 50%;
  border: 22px solid rgba(214, 158, 28, .075);
  background: rgba(1, 83, 41, .035);
}

/* ── Home: three main entry cards ───────────────────────────────────── */
body.public-site .home-market {
  margin-top: -34px !important;
}

body.public-site .home-market-grid {
  gap: 1.15rem !important;
}

body.public-site .home-market-card {
  min-height: 118px !important;
  grid-template-columns: 58px minmax(0, 1fr) 34px !important;
  gap: 1rem !important;
  padding: 1.2rem 1.15rem 1.2rem 1.35rem !important;
  isolation: isolate;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-market-card::before {
  width: 5px !important;
  height: auto !important;
  inset: 0 auto 0 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--market-bg), var(--sji-gold)) !important;
}

body.public-site .home-market-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -38px;
  top: -48px;
  width: 132px;
  height: 132px;
  border: 24px solid var(--market-glow);
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}

body.public-site .home-market-icon {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px !important;
  box-shadow: 0 12px 25px rgba(7, 43, 29, .18), inset 0 1px rgba(255, 255, 255, .2) !important;
}

body.public-site .home-market-card small {
  color: var(--sji-gold-deep) !important;
  letter-spacing: .15em !important;
}

body.public-site .home-market-card strong {
  font-size: 1.08rem !important;
}

body.public-site .home-market-arrow {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(214, 158, 28, .36);
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 7px 18px rgba(139, 100, 27, .10);
}

/* ── Home: profile plaques ──────────────────────────────────────────── */
body.public-site .home-profile-grid {
  gap: 1.15rem !important;
}

body.public-site .home-profile-card {
  min-height: 235px;
  padding: 1.35rem 1.3rem 1.25rem 1.45rem !important;
  isolation: isolate;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  background: var(--pc-surface-cool) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-profile-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--pf-accent), var(--sji-gold));
}

body.public-site .home-profile-card::after {
  content: none;
  display: none;
}

body.public-site .home-profile-icon {
  width: 54px !important;
  height: 54px !important;
  border: 1px solid rgba(214, 158, 28, .42);
  border-radius: 17px !important;
  background: var(--pc-dark) !important;
  color: var(--sji-gold-light) !important;
  box-shadow: 0 12px 26px rgba(3, 71, 31, .20) !important;
}

body.public-site .home-profile-card h3 {
  font-size: 1.08rem !important;
}

body.public-site .home-profile-cta {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(214, 158, 28, .24);
}

/* ── Home: newsroom receives a framed editorial composition ────────── */
body.public-site .editorial-lead,
body.public-site .editorial-stream {
  overflow: hidden;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .editorial-stream {
  background: var(--pc-surface) !important;
}

body.public-site .editorial-stream__head {
  border-bottom: 1px solid rgba(214, 158, 28, .25) !important;
  background: linear-gradient(100deg, rgba(1, 83, 41, .08), rgba(214, 158, 28, .08)) !important;
}

body.public-site .editorial-row {
  margin: .42rem .55rem;
  width: calc(100% - 1.1rem) !important;
  border: 1px solid transparent !important;
  border-radius: 15px;
}

body.public-site .editorial-row:hover {
  border-color: rgba(214, 158, 28, .36) !important;
  background: linear-gradient(100deg, rgba(1, 83, 41, .055), rgba(214, 158, 28, .07)) !important;
}

body.public-site .editorial-row__number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(214, 158, 28, .38);
  border-radius: 11px;
  background: #fffaf0;
}

/* ── Home: pricing cards inherit the approved service-page structure ─ */
body.public-site .home-package-grid {
  gap: 1.15rem !important;
}

body.public-site .home-package-card {
  min-height: 245px !important;
  padding: 1.35rem 1.35rem 1.2rem 1.5rem !important;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-package-card::before {
  width: 5px !important;
  background: linear-gradient(180deg, var(--pkg-accent), var(--sji-gold)) !important;
}

body.public-site .home-package-card::after {
  right: -44px !important;
  top: -52px !important;
  width: 140px !important;
  height: 140px !important;
  border: 25px solid color-mix(in srgb, var(--pkg-accent) 8%, transparent);
  background: color-mix(in srgb, var(--sji-gold) 5%, transparent) !important;
}

body.public-site .home-package-card.is-featured {
  border-color: rgba(214, 158, 28, .72) !important;
  box-shadow: var(--pc-shadow-hover) !important;
}

body.public-site .home-package-price {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto !important;
  padding: .45rem .7rem;
  border: 1px solid rgba(1, 83, 41, .13);
  border-radius: 12px;
  background: rgba(1, 83, 41, .055);
}

body.public-site .home-package-link {
  padding-top: .85rem !important;
  border-top: 1px solid rgba(214, 158, 28, .28) !important;
}

/* ── Home: compact bookstore cards, still premium and scalable ─────── */
body.public-site .home-release-grid {
  align-items: stretch;
  gap: 1rem !important;
}

body.public-site .home-release-card {
  max-width: 164px !important;
}

body.public-site .home-release-card > .book-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--pc-line) !important;
  border-radius: 18px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-book-rail {
  border-bottom: 1px solid rgba(214, 158, 28, .35) !important;
  background: linear-gradient(105deg, #0c3b28, #164e38) !important;
}

body.public-site .home-release-category {
  color: #fff8e8 !important;
}

body.public-site .home-release-body {
  background:
    radial-gradient(circle at 100% 0, rgba(214, 158, 28, .08), transparent 5rem),
    var(--sji-paper) !important;
}

body.public-site .home-release-body h3 {
  min-height: 2.55em;
}

body.public-site .home-release-footer {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(214, 158, 28, .24);
}

/* ── Home: benefits become award plaques, not plain icon boxes ─────── */
body.public-site .home-why-grid {
  gap: 1rem !important;
}

body.public-site .home-why-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: 1.35rem 1rem 1.15rem !important;
  isolation: isolate;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  background: var(--pc-surface-cool) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-why-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--why-accent), var(--sji-gold));
}

body.public-site .home-why-card::after {
  content: none;
  display: none;
}

body.public-site .home-why-icon {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(214, 158, 28, .50);
  border-radius: 50% !important;
  background: var(--pc-dark) !important;
  color: var(--sji-gold-light) !important;
  box-shadow: 0 13px 28px rgba(3, 71, 31, .20) !important;
}

body.public-site .home-why-card h3 {
  margin-top: .25rem !important;
  font-size: 1rem !important;
}

/* ── Home: testimonial cards ───────────────────────────────────────── */
body.public-site .home-testimonial-card {
  position: relative;
  overflow: hidden;
  padding: 1.4rem !important;
  border: 1px solid var(--pc-line) !important;
  border-radius: 24px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .home-testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--sji-green), var(--sji-gold));
}

body.public-site .home-testimonial-card::after {
  content: "“";
  position: absolute;
  right: 1rem;
  top: .15rem;
  color: rgba(214, 158, 28, .10);
  font: 700 6rem/1 Georgia, serif;
  pointer-events: none;
}

/* ── Catalog: a premium retail frame, not a default product tile ───── */
body.public-site .catalog-grid {
  gap: 1.2rem !important;
}

body.public-site .catalog-card {
  position: relative;
  border: 1px solid var(--pc-line) !important;
  border-radius: 22px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .catalog-card-rail {
  min-height: 42px !important;
  border-bottom: 1px solid rgba(214, 158, 28, .40) !important;
  background: linear-gradient(105deg, #0c3b28, #164e38) !important;
}

body.public-site .catalog-cover-badge {
  border-color: rgba(241, 210, 122, .45) !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #fff8e8 !important;
  box-shadow: none !important;
}

body.public-site .catalog-cover-stage {
  border-bottom: 1px solid rgba(214, 158, 28, .32);
}

body.public-site .catalog-card-body {
  background:
    radial-gradient(circle at 100% 0, rgba(214, 158, 28, .09), transparent 7rem),
    var(--sji-paper) !important;
}

body.public-site .catalog-format-tools,
body.public-site .catalog-price-row {
  border-color: rgba(214, 158, 28, .25) !important;
}

/* ── Ordering, recommendations and cart ────────────────────────────── */
body.public-site .compact-recommendation-card,
body.public-site .book-recommend-card-v3,
body.public-site .cart-item,
body.public-site .checkout-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pc-line) !important;
  border-radius: 20px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .compact-recommendation-card::before,
body.public-site .book-recommend-card-v3::before,
body.public-site .cart-item::before,
body.public-site .checkout-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--sji-green), var(--sji-gold));
}

body.public-site .cart-summary {
  padding: 1.35rem !important;
}

body.public-site .cart-summary-total {
  margin-top: .8rem;
  padding: .9rem;
  border: 1px solid rgba(214, 158, 28, .30);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(1, 83, 41, .07), rgba(214, 158, 28, .09));
}

/* ── Book detail and tab panels ────────────────────────────────────── */
body.public-site .book-detail-main-v3,
body.public-site .book-tab-panel-v3,
body.public-site .book-author-v3 {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pc-line) !important;
  border-radius: 22px !important;
  background: var(--pc-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site .book-detail-main-v3::before,
body.public-site .book-tab-panel-v3::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--sji-green), var(--sji-gold));
}

/* ── Writer templates: numbered documents with publisher-grade frame ─ */
body.public-site .official-template-grid {
  gap: 1rem !important;
}

body.public-site .official-template-card {
  min-height: 210px;
  padding: 1.25rem 1.15rem 1.1rem 1.35rem !important;
}

body.public-site .official-template-icon {
  border: 1px solid rgba(214, 158, 28, .50) !important;
  background: var(--pc-dark) !important;
  color: var(--sji-gold-light) !important;
  box-shadow: 0 12px 26px rgba(3, 71, 31, .18) !important;
}

body.public-site .official-template-number {
  color: rgba(1, 83, 41, .08) !important;
  font-family: Georgia, serif;
}

/* ── Forms and contact blocks: refined panels instead of white boxes ─ */
body.public-site :is(.checkout-panel, .hki-panel, .official-template-library) > :is(h2, h3, h4):first-child,
body.public-site.page-kontak .card :is(.card-header, h3:first-child),
body.public-site.page-proses .card :is(.card-header, h3:first-child) {
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(214, 158, 28, .26);
}

/* Interaction is the finishing layer, not the entire redesign. */
@media (hover: hover) and (pointer: fine) {
  body.public-site :is(
    .home-market-card, .home-profile-card, .home-package-card, .home-release-card > .book-card,
    .home-why-card, .home-testimonial-card, .catalog-card,
    .compact-recommendation-card, .book-recommend-card-v3, .official-template-card,
    .package-addon, .format-commerce-card, .cart-item
  ):hover {
    transform: translateY(-7px) !important;
    border-color: rgba(214, 158, 28, .72) !important;
    box-shadow: var(--pc-shadow-hover) !important;
  }
}

/* Mobile is composed separately: compact, scroll-safe, and touch-friendly. */
@media (max-width: 900px) {
  body.public-site .home-market {
    margin-top: -18px !important;
  }
  body.public-site .home-market-grid {
    grid-template-columns: 1fr !important;
    gap: .72rem !important;
  }
  body.public-site .home-market-card {
    min-height: 94px !important;
    grid-template-columns: 48px minmax(0, 1fr) 30px !important;
    padding: .88rem .8rem .88rem 1rem !important;
    border-radius: 18px !important;
  }
  body.public-site .home-market-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }
  body.public-site .home-profile-card {
    min-height: 205px;
  }
  body.public-site .home-package-card {
    min-height: 430px !important;
  }
  body.public-site .home-why-card {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  body.public-site .home-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
  body.public-site .home-profile-card {
    min-height: 190px;
    padding: 1rem .85rem .9rem 1rem !important;
    border-radius: 18px !important;
  }
  body.public-site .home-profile-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  body.public-site .home-profile-card::after {
    font-size: 2.7rem;
  }
  body.public-site .home-package-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  body.public-site .home-package-card {
    min-height: 0 !important;
    padding: 1rem .9rem .9rem 1.1rem !important;
    border-radius: 18px !important;
  }
  body.public-site .home-release-card {
    flex-basis: 150px !important;
    max-width: 150px !important;
  }
  body.public-site .home-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
  body.public-site .home-why-card {
    min-height: 205px;
    padding: 1rem .75rem .85rem !important;
    border-radius: 18px !important;
  }
  body.public-site .home-why-icon {
    width: 48px !important;
    height: 48px !important;
  }
  body.public-site :is(
    .catalog-card, .compact-recommendation-card, .book-recommend-card-v3,
    .cart-item, .checkout-panel, .official-template-card,
    .package-addon, .format-commerce-card, .hki-panel
  ) {
    border-radius: 18px !important;
  }
}

@media (max-width: 390px) {
  body.public-site .home-profile-grid,
  body.public-site .home-why-grid {
    grid-template-columns: 1fr !important;
  }
  body.public-site .home-profile-card,
  body.public-site .home-why-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-site :is(.home-market-card, .home-profile-card, .home-package-card, .home-why-card, .catalog-card) {
    transition: none !important;
  }
}

/* ======================================================================
 * Premium colour rollout v5.3
 * The service-package Premium card is the visual reference: saturated
 * forest green, restrained metallic gold and warm cream. Decorative card
 * numbering is deliberately removed from the public interface.
 * ====================================================================== */

/* Remove the previous numbered-template language everywhere it was purely
   decorative. Editorial entries remain identifiable by title and date. */
body.public-site .home-profile-card::after,
body.public-site .home-why-card::after {
  content: none !important;
  display: none !important;
}

body.public-site .official-template-number,
body.public-site .editorial-row__number,
body.public-site .mobile-menu-inner a > span {
  display: none !important;
}

body.public-site .editorial-row {
  grid-template-columns: minmax(0, 1fr) 30px !important;
}

/* Prominent home entry cards: these are now coloured destinations, not
   pale boxes with a coloured icon. */
body.public-site .home-market-card:nth-child(1),
body.public-site .home-market-card:nth-child(3) {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 24px 58px rgba(5, 43, 29, .25), 0 8px 22px rgba(156, 106, 20, .12) !important;
}

body.public-site .home-market-card:nth-child(2) {
  border-color: rgba(156, 106, 20, .38) !important;
  background: var(--pc-gold-surface) !important;
}

body.public-site .home-market-card:nth-child(2) strong {
  color: var(--pc-forest-950) !important;
}

body.public-site .home-market-card:nth-child(2) p {
  color: #2d493e !important;
  font-weight: 500;
}

body.public-site .home-market-card:nth-child(1) :is(strong, p),
body.public-site .home-market-card:nth-child(3) :is(strong, p) {
  color: #fff9ec !important;
}

body.public-site .home-market-card:nth-child(1) small,
body.public-site .home-market-card:nth-child(3) small {
  color: var(--pc-gold-300) !important;
}

body.public-site .home-market-card:nth-child(1) .home-market-arrow,
body.public-site .home-market-card:nth-child(3) .home-market-arrow {
  border-color: rgba(239, 208, 123, .42) !important;
  background: rgba(255, 249, 236, .10) !important;
  color: var(--pc-gold-300) !important;
}

/* Profile and benefit families alternate between premium forest and
   coloured parchment. Every text colour is explicit to prevent washout. */
body.public-site .home-profile-card,
body.public-site .home-why-card {
  border-color: rgba(156, 106, 20, .34) !important;
  background: var(--pc-gold-surface) !important;
}

body.public-site .home-profile-card:nth-child(even),
body.public-site .home-why-card:nth-child(even) {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 24px 58px rgba(5, 43, 29, .24), 0 8px 22px rgba(156, 106, 20, .12) !important;
}

body.public-site .home-profile-card:nth-child(even) :is(h3, p, .home-profile-cta),
body.public-site .home-why-card:nth-child(even) :is(h3, p) {
  color: #fff9ec !important;
}

body.public-site .home-profile-card:nth-child(even) .home-profile-cta {
  border-color: rgba(239, 208, 123, .28) !important;
  color: var(--pc-gold-300) !important;
}

body.public-site .home-profile-card:not(:nth-child(even)) :is(h3, p, .home-profile-cta),
body.public-site .home-why-card:not(:nth-child(even)) :is(h3, p) {
  color: var(--pc-forest-950) !important;
}

/* Pricing preview: the recommended package receives the same structural
   contrast as Premium on the full service page. */
body.public-site .home-package-card {
  border-color: rgba(156, 106, 20, .38) !important;
  background: linear-gradient(145deg, #fff9ec 0%, #f7e9c7 58%, #eed8a0 100%) !important;
}

body.public-site .home-package-card:not(.is-featured) :is(h3, .home-package-summary, .home-package-features li, small) {
  color: var(--pc-forest-950);
}

body.public-site .home-package-card:not(.is-featured) .home-package-price {
  border-color: rgba(11, 83, 58, .18) !important;
  background: rgba(255, 253, 247, .68) !important;
  color: var(--pc-forest-700) !important;
}

body.public-site .home-package-card:not(.is-featured) .home-package-highlight {
  background: rgba(255, 253, 247, .72) !important;
}

body.public-site .home-package-card.is-featured {
  border-color: rgba(239, 208, 123, .64) !important;
  background: var(--pc-dark) !important;
  transform: translateY(-7px) scale(1.018);
  box-shadow: 0 30px 72px rgba(5, 43, 29, .28), 0 12px 28px rgba(156, 106, 20, .16) !important;
}

body.public-site .home-package-card.is-featured :is(h3, p, .home-package-price, .home-package-link) {
  color: #fff9ec !important;
}

body.public-site .home-package-card.is-featured .home-package-price {
  border-color: rgba(239, 208, 123, .38) !important;
  background: rgba(239, 208, 123, .12) !important;
  color: var(--pc-gold-300) !important;
}

body.public-site .home-package-card.is-featured .home-package-link {
  border-color: rgba(239, 208, 123, .28) !important;
}

/* Editorial and testimonial areas share the same publication-grade split. */
body.public-site .editorial-stream,
body.public-site .home-testimonial-card {
  border-color: rgba(156, 106, 20, .36) !important;
  background: var(--pc-surface) !important;
}

body.public-site .home-testimonial-card:nth-child(even) {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
}

body.public-site .home-testimonial-card:nth-child(even) :is(h3, h4, p, small, strong, span) {
  color: #fff9ec !important;
}

body.public-site .home-testimonial-card:nth-child(even) .text-warning {
  color: var(--pc-gold-300) !important;
}

/* Retail, cart and detail surfaces retain easy reading while gaining
   unmistakable green/gold structure. */
body.public-site :is(.catalog-card, .home-release-card > .book-card, .compact-recommendation-card, .book-recommend-card-v3),
body.public-site :is(.cart-item, .checkout-item, .cart-summary, .checkout-panel),
body.public-site :is(.book-detail-main-v3, .book-tab-panel-v3, .book-author-v3) {
  border-color: rgba(156, 106, 20, .38) !important;
  background: var(--pc-surface) !important;
}

body.public-site :is(.cart-summary, .checkout-panel) {
  background:
    linear-gradient(145deg, rgba(255, 249, 236, .96), rgba(239, 208, 123, .30)),
    var(--pc-surface) !important;
}

/* Generic public information cards on supporting pages are deliberately
   coloured rather than flat white. */
body.public-site.page-proses .card,
body.public-site.page-tentang .card,
body.public-site.page-kontak .card,
body.public-site .package-addon,
body.public-site .format-commerce-card,
body.public-site .hki-panel {
  border-color: rgba(156, 106, 20, .36) !important;
  background: var(--pc-surface-cool) !important;
}

body.public-site.page-proses .row > div:nth-child(even) .card,
body.public-site.page-tentang .row > div:nth-child(even) .card,
body.public-site.page-kontak .row > div:nth-child(even) .card {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
}

body.public-site.page-proses .row > div:nth-child(even) .card :is(h1, h2, h3, h4, h5, h6, p, span, small, li, strong),
body.public-site.page-tentang .row > div:nth-child(even) .card :is(h1, h2, h3, h4, h5, h6, p, span, small, li, strong),
body.public-site.page-kontak .row > div:nth-child(even) .card :is(h1, h2, h3, h4, h5, h6, p, span, small, li, strong) {
  color: #fff9ec !important;
}

/* ── Writer page: complete structural redesign ─────────────────────── */
body.public-site.page-naskah .writer-premium-page {
  background:
    radial-gradient(circle at 4% 8%, rgba(214, 162, 58, .14), transparent 28rem),
    radial-gradient(circle at 96% 35%, rgba(11, 83, 58, .12), transparent 32rem),
    #f8f1df !important;
}

body.public-site.page-naskah .author-page-nav {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 24px 58px rgba(5, 43, 29, .24), 0 8px 22px rgba(156, 106, 20, .12) !important;
}

body.public-site.page-naskah .author-page-nav a {
  color: #fff9ec !important;
}

body.public-site.page-naskah .author-page-nav a i {
  color: var(--pc-gold-300) !important;
}

body.public-site.page-naskah .author-page-nav a:hover,
body.public-site.page-naskah .author-page-nav a:focus-visible {
  background: rgba(239, 208, 123, .16) !important;
  color: var(--pc-gold-300) !important;
}

body.public-site.page-naskah .writer-benefit-card,
body.public-site.page-naskah .writer-guide-card,
body.public-site.page-naskah .writer-step-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(156, 106, 20, .38) !important;
  background: var(--pc-gold-surface) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.public-site.page-naskah :is(.writer-benefit-card, .writer-guide-card, .writer-step-card)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--pc-forest-700), var(--pc-gold-500));
}

body.public-site.page-naskah :is(.writer-benefit-card, .writer-guide-card, .writer-step-card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -54px;
  top: -58px;
  width: 142px;
  height: 142px;
  border: 24px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

body.public-site.page-naskah .writer-benefit-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid rgba(239, 208, 123, .48);
  border-radius: 15px;
  background: var(--pc-dark);
  color: var(--pc-gold-300);
  font-size: 1.1rem;
  box-shadow: 0 12px 24px rgba(5, 43, 29, .20);
}

body.public-site.page-naskah .writer-benefit-card :is(h3, p),
body.public-site.page-naskah .writer-guide-card :is(h3, li, strong),
body.public-site.page-naskah .writer-step-card :is(h4, p) {
  color: var(--pc-forest-950) !important;
}

body.public-site.page-naskah .writer-benefits-grid > div:nth-child(even) .writer-benefit-card,
body.public-site.page-naskah .writer-guides-grid > div:nth-child(2) .writer-guide-card,
body.public-site.page-naskah .writer-flow-grid > div:nth-child(4n+2) .writer-step-card,
body.public-site.page-naskah .writer-flow-grid > div:nth-child(4n+4) .writer-step-card {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 24px 58px rgba(5, 43, 29, .25), 0 8px 22px rgba(156, 106, 20, .12) !important;
}

body.public-site.page-naskah .writer-benefits-grid > div:nth-child(even) .writer-benefit-card :is(h3, p),
body.public-site.page-naskah .writer-guides-grid > div:nth-child(2) .writer-guide-card :is(h3, li, strong),
body.public-site.page-naskah .writer-flow-grid > div:nth-child(4n+2) .writer-step-card :is(h4, p),
body.public-site.page-naskah .writer-flow-grid > div:nth-child(4n+4) .writer-step-card :is(h4, p) {
  color: #fff9ec !important;
}

body.public-site.page-naskah .writer-guides-grid > div:nth-child(2) .writer-guide-card > div {
  border: 1px solid rgba(239, 208, 123, .42) !important;
  background: rgba(239, 208, 123, .13) !important;
  color: var(--pc-gold-300) !important;
}

body.public-site.page-naskah .writer-submit-banner {
  border: 1px solid rgba(239, 208, 123, .58) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 32px 80px rgba(5, 43, 29, .28), 0 12px 30px rgba(156, 106, 20, .16) !important;
}

body.public-site.page-naskah .writer-submit-banner h2 {
  color: #fff9ec !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

body.public-site.page-naskah .writer-submit-banner p {
  color: rgba(255, 249, 236, .82) !important;
}

body.public-site.page-naskah .writer-submit-banner .badge {
  border-color: rgba(239, 208, 123, .42) !important;
  background: rgba(239, 208, 123, .13) !important;
  color: var(--pc-gold-300) !important;
}

/* Pemesanan: one coherent premium command panel. These selectors are kept
   deliberately specific because the legacy card rollout also targets .order-step. */
body.public-site .order-sidebar .order-sidebar-head h3 {
  color: #fff9ec !important;
}

body.public-site .order-sidebar .order-step {
  min-height: 0 !important;
  padding: .78rem !important;
  border: 1px solid rgba(239, 208, 123, .20) !important;
  border-radius: 14px !important;
  background: rgba(255, 249, 236, .065) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.public-site .order-sidebar .order-step::before,
body.public-site .order-sidebar .order-step::after {
  display: none !important;
  content: none !important;
}

body.public-site .order-sidebar .order-step-number {
  border-color: rgba(255, 249, 236, .30) !important;
  background: linear-gradient(135deg, #efd07b, #c58b24) !important;
  color: #17261e !important;
  box-shadow: 0 8px 18px rgba(156, 106, 20, .20) !important;
}

body.public-site .order-sidebar .order-step strong {
  color: #fff9ec !important;
}

body.public-site .order-sidebar .order-step p {
  color: rgba(255, 249, 236, .72) !important;
}

body.public-site .order-product-summary {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.public-site.page-naskah .writer-submit-banner::before,
body.public-site.page-naskah .writer-submit-banner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(239, 208, 123, .20);
  border-radius: 50%;
}

body.public-site.page-naskah .writer-submit-banner::before {
  width: 270px;
  height: 270px;
  right: -90px;
  top: -120px;
  box-shadow: 0 0 0 36px rgba(239, 208, 123, .035), 0 0 0 72px rgba(239, 208, 123, .02);
}

body.public-site.page-naskah .writer-submit-banner::after {
  width: 140px;
  height: 140px;
  left: -62px;
  bottom: -80px;
}

body.public-site.page-naskah .official-template-library {
  border-color: rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  box-shadow: 0 30px 72px rgba(5, 43, 29, .27), 0 12px 28px rgba(156, 106, 20, .14) !important;
}

body.public-site.page-naskah .official-template-library :is(.official-template-kicker, h3) {
  color: var(--pc-gold-300) !important;
}

body.public-site.page-naskah .official-template-head p,
body.public-site.page-naskah .official-template-note {
  color: rgba(255, 249, 236, .78) !important;
}

body.public-site.page-naskah .official-template-card {
  border-color: rgba(239, 208, 123, .38) !important;
  background: linear-gradient(145deg, #fff9ec 0%, #f3dfaa 100%) !important;
}

body.public-site.page-naskah .official-template-card:nth-child(2) {
  border-color: rgba(239, 208, 123, .52) !important;
  background: linear-gradient(145deg, #0b533a 0%, #052b1d 100%) !important;
}

body.public-site.page-naskah .official-template-card:nth-child(2) :is(h4, p),
body.public-site.page-naskah .official-template-card:nth-child(2) .official-template-meta span {
  color: #fff9ec !important;
}

body.public-site.page-naskah .official-template-card:nth-child(2) .official-template-meta span {
  background: rgba(239, 208, 123, .12) !important;
}

body.public-site.page-naskah .official-template-card:not(:nth-child(2)) h4 {
  color: var(--pc-forest-950) !important;
}

body.public-site.page-naskah .official-template-card:not(:nth-child(2)) p {
  color: #2d493e !important;
  font-weight: 500;
}

body.public-site.page-naskah .official-template-card .word-download-btn {
  border-color: #103f84 !important;
  background: linear-gradient(145deg, #2168ca 0%, #12488f 100%) !important;
  box-shadow: 0 10px 22px rgba(18, 72, 143, .26), inset 0 1px rgba(255, 255, 255, .22) !important;
}

/* Layanan: replace generic white tiles with the same forest/gold visual
   language used by the premium publishing package. */
body.public-site.page-layanan .service-showcase-intro {
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(239, 208, 123, .48);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 5%, rgba(239, 208, 123, .17), transparent 18rem),
    linear-gradient(145deg, #0b533a 0%, #052b1d 100%);
  box-shadow: 0 30px 72px rgba(5, 43, 29, .24), 0 12px 28px rgba(156, 106, 20, .12);
}

body.public-site.page-layanan .service-showcase-intro::before,
body.public-site.page-layanan .service-showcase-intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(239, 208, 123, .20);
  border-radius: 50%;
}

body.public-site.page-layanan .service-showcase-intro::before {
  width: 250px;
  height: 250px;
  right: -68px;
  top: -118px;
  box-shadow: 0 0 0 38px rgba(239, 208, 123, .035);
}

body.public-site.page-layanan .service-showcase-intro::after {
  width: 118px;
  height: 118px;
  left: -52px;
  bottom: -66px;
}

body.public-site.page-layanan .service-showcase-intro__copy {
  z-index: 1;
}

body.public-site.page-layanan .service-showcase-kicker {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: .52rem .85rem;
  border: 1px solid rgba(239, 208, 123, .36);
  border-radius: 999px;
  background: rgba(239, 208, 123, .10);
  color: var(--pc-gold-300);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
}

body.public-site.page-layanan .service-showcase-intro h2 {
  color: #fff9ec !important;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
}

body.public-site.page-layanan .service-showcase-intro p {
  max-width: 680px;
  color: rgba(255, 249, 236, .78) !important;
  font-size: 1rem;
  line-height: 1.75;
}

body.public-site.page-layanan .service-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

body.public-site.page-layanan .service-showcase-card {
  --svc-background: linear-gradient(145deg, #fff9ec 0%, #f2dda5 100%);
  --svc-border: rgba(156, 106, 20, .36);
  --svc-shadow: 0 22px 52px rgba(5, 43, 29, .14), 0 8px 20px rgba(156, 106, 20, .10);
  --svc-title: var(--pc-forest-950);
  --svc-description: #3a5148;
  --svc-icon-border: rgba(156, 106, 20, .34);
  --svc-icon-background: var(--pc-forest-950);
  --svc-icon-color: var(--pc-gold-300);
  --svc-features-border: rgba(156, 106, 20, .20);
  --svc-features-background: rgba(255, 253, 247, .48);
  --svc-features-color: var(--pc-forest-900);
  --svc-check-color: var(--pc-gold-700);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 330px;
  border: 1px solid var(--svc-border);
  border-radius: 25px;
  background: var(--svc-background);
  box-shadow: var(--svc-shadow);
  transition: transform .26s cubic-bezier(.2,.75,.2,1), box-shadow .26s cubic-bezier(.2,.75,.2,1), border-color .26s ease;
}

body.public-site.page-layanan .service-showcase-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 132px;
  height: 132px;
  right: -46px;
  top: -52px;
  border: 22px solid rgba(156, 106, 20, .075);
  border-radius: 50%;
}

body.public-site.page-layanan .service-showcase-card:nth-child(even) {
  --svc-background: linear-gradient(145deg, #0b533a 0%, #052b1d 100%);
  --svc-border: rgba(239, 208, 123, .50);
  --svc-shadow: 0 26px 58px rgba(5, 43, 29, .24), 0 8px 20px rgba(156, 106, 20, .12);
  --svc-title: #fff9ec;
  --svc-description: #fff9ec;
  --svc-icon-border: rgba(239, 208, 123, .56);
  --svc-icon-background: linear-gradient(145deg, var(--pc-gold-300), var(--pc-gold-500));
  --svc-icon-color: var(--pc-forest-950);
  --svc-features-border: rgba(239, 208, 123, .20);
  --svc-features-background: rgba(255, 249, 236, .07);
  --svc-features-color: rgba(255, 249, 236, .84);
  --svc-check-color: var(--pc-gold-300);
}

body.public-site.page-layanan .service-showcase-card__body {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 1.35rem;
}

body.public-site.page-layanan .service-showcase-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid var(--svc-icon-border);
  border-radius: 16px;
  background: var(--svc-icon-background);
  color: var(--svc-icon-color);
  font-size: 1.12rem;
  box-shadow: 0 11px 24px rgba(5, 43, 29, .18), inset 0 1px rgba(255, 255, 255, .16);
}

body.public-site.page-layanan .service-showcase-card h3 {
  color: var(--svc-title) !important;
  font-size: 1.08rem;
  line-height: 1.25;
}

body.public-site.page-layanan .service-showcase-description {
  flex-grow: 1;
  color: var(--svc-description) !important;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.65;
}

body.public-site.page-layanan .service-showcase-features {
  display: grid;
  gap: .52rem;
  padding: .9rem;
  border: 1px solid var(--svc-features-border);
  border-radius: 15px;
  background: var(--svc-features-background);
}

body.public-site.page-layanan .service-showcase-features > div {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  color: var(--svc-features-color);
  font-size: .71rem;
  font-weight: 750;
  line-height: 1.35;
}

body.public-site.page-layanan .service-showcase-features i {
  flex: none;
  margin-top: .12rem;
  color: var(--svc-check-color);
  font-size: .68rem;
}

@media (hover:hover) and (pointer:fine) {
  body.public-site.page-layanan .service-showcase-card:hover {
    transform: translateY(-7px);
    border-color: rgba(214, 158, 28, .70);
    box-shadow: 0 32px 68px rgba(5, 43, 29, .22), 0 12px 26px rgba(156, 106, 20, .14);
  }
}

@media (max-width: 1024px) {
  body.public-site.page-layanan .service-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.public-site.page-layanan .service-showcase-intro {
    padding: 1.5rem 1rem;
    border-radius: 22px;
  }
  body.public-site.page-layanan .service-showcase-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  body.public-site.page-layanan .service-showcase-card {
    min-height: 0;
    border-radius: 20px;
  }
  body.public-site.page-layanan .service-showcase-card__body {
    padding: 1.05rem;
  }
}

body.public-site.page-naskah main .card.border-0.shadow-lg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(156, 106, 20, .42) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(214, 162, 58, .20), transparent 18rem),
    linear-gradient(145deg, #fff9ec 0%, #e4f4e9 100%) !important;
  box-shadow: 0 30px 72px rgba(5, 43, 29, .18), 0 12px 28px rgba(156, 106, 20, .10) !important;
}

body.public-site.page-naskah main .card.border-0.shadow-lg::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, var(--pc-forest-900), var(--pc-forest-700) 58%, var(--pc-gold-500));
}

body.public-site.page-naskah main .card.border-0.shadow-lg :is(h1, h2, h3, h4, label, strong) {
  color: var(--pc-forest-950) !important;
}

body.public-site.page-naskah main .card.border-0.shadow-lg :is(.form-control, .form-select) {
  border-color: rgba(156, 106, 20, .30) !important;
  background-color: rgba(255, 253, 247, .92) !important;
  color: var(--pc-forest-950) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

body.public-site.page-naskah main .card.border-0.shadow-lg :is(.form-control, .form-select):focus {
  border-color: var(--pc-gold-500) !important;
  box-shadow: 0 0 0 .22rem rgba(214, 162, 58, .16) !important;
}

body.public-site.page-naskah .writer-step-card > div:first-child {
  border: 1px solid rgba(239, 208, 123, .52) !important;
  background: var(--pc-dark) !important;
  color: var(--pc-gold-300) !important;
  box-shadow: 0 9px 20px rgba(5, 43, 29, .18);
}

body.public-site.page-naskah .writer-flow-grid > div:nth-child(even) .writer-step-card > div:first-child {
  background: rgba(239, 208, 123, .14) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.public-site.page-naskah :is(.writer-benefit-card, .writer-guide-card, .writer-step-card):hover {
    transform: translateY(-7px) !important;
    border-color: rgba(239, 208, 123, .78) !important;
    box-shadow: var(--pc-shadow-hover) !important;
  }
}

@media (max-width: 768px) {
  body.public-site .home-package-card.is-featured {
    transform: none;
  }

  body.public-site.page-naskah .writer-benefit-card {
    padding: 1rem !important;
  }

  body.public-site.page-naskah .writer-benefit-icon {
    width: 44px;
    height: 44px;
    margin-bottom: .75rem;
  }

  body.public-site.page-naskah .writer-guides-grid > div {
    width: 100%;
  }

  body.public-site.page-naskah .writer-submit-banner {
    padding: 1.5rem 1rem !important;
  }
}

@media (max-width: 430px) {
  body.public-site.page-naskah .writer-flow-grid > div {
    width: 100%;
  }

  body.public-site.page-naskah .writer-benefit-card {
    min-height: 190px;
  }
}

/* Tentang Kami — premium editorial composition */
body.public-site.page-tentang .about-premium {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(circle at 5% 10%, rgba(239, 208, 123, .22), transparent 25rem),
    radial-gradient(circle at 96% 35%, rgba(16, 111, 79, .14), transparent 28rem),
    linear-gradient(180deg, #fffdf7 0%, #f2f8f2 50%, #fffaf0 100%);
}

body.public-site.page-tentang .about-identity {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid rgba(174, 119, 25, .42);
  border-radius: 30px;
  background: #fffaf0;
  box-shadow: 0 30px 74px rgba(5, 43, 29, .15), 0 10px 28px rgba(174, 119, 25, .10);
}

body.public-site.page-tentang .about-identity::before,
body.public-site.page-tentang .about-intro__copy::before,
body.public-site.page-tentang .about-commitment::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--pc-forest-900), var(--pc-forest-600) 56%, var(--pc-gold-500));
}

body.public-site.page-tentang .about-identity__single {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  overflow: hidden;
  text-align: center;
  color: var(--pc-forest-950);
  background:
    radial-gradient(circle at 12% 16%, rgba(239, 208, 123, .22), transparent 18rem),
    radial-gradient(circle at 90% 88%, rgba(16, 111, 79, .12), transparent 22rem),
    linear-gradient(145deg, #fffdf7, #f7edcf 58%, #eef6ef);
}

body.public-site.page-tentang .about-identity__single::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -120px;
  border: 1px solid rgba(174, 119, 25, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(174, 119, 25, .06), 0 0 0 36px rgba(174, 119, 25, .035);
  pointer-events: none;
}

body.public-site.page-tentang .about-identity__single img,
body.public-site.page-tentang .about-identity__single strong,
body.public-site.page-tentang .about-identity__single .about-identity__legal-name {
  position: relative;
  z-index: 1;
}

body.public-site.page-tentang .about-identity__single strong {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  letter-spacing: .02em;
}

body.public-site.page-tentang .about-identity__legal-name {
  color: var(--pc-forest-700);
  font-size: clamp(.78rem, 1.3vw, .95rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.public-site.page-tentang .about-identity__publisher {
  min-height: 290px;
  background:
    radial-gradient(circle at 12% 18%, rgba(239, 208, 123, .23), transparent 15rem),
    linear-gradient(145deg, #fffdf7, #f7edcf);
  color: var(--pc-forest-950);
}

body.public-site.page-tentang .about-identity__legal {
  min-height: 290px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(239, 208, 123, .14), transparent 15rem),
    linear-gradient(145deg, var(--pc-forest-800), var(--pc-forest-950));
}

body.public-site.page-tentang .about-identity strong {
  font-size: clamp(.94rem, 1.6vw, 1.12rem);
  letter-spacing: .02em;
}

body.public-site.page-tentang .about-intro {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

body.public-site.page-tentang .about-intro__copy,
body.public-site.page-tentang .about-vision {
  position: relative;
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: var(--pc-shadow);
}

body.public-site.page-tentang .about-intro__copy {
  overflow: hidden;
  border: 1px solid rgba(174, 119, 25, .38);
  background:
    radial-gradient(circle at 100% 0, rgba(239, 208, 123, .22), transparent 16rem),
    linear-gradient(145deg, #fffdf7, #f9f1dc);
}

body.public-site.page-tentang .about-prose {
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: justify;
  text-justify: inter-word;
}

body.public-site.page-tentang .about-prose {
  margin-bottom: 1rem;
  color: #324d43 !important;
  font-size: clamp(.94rem, 1.3vw, 1.02rem);
  line-height: 1.88;
}

body.public-site.page-tentang .about-vision {
  display: grid;
  place-items: center;
  min-height: 100%;
  border: 1px solid rgba(239, 208, 123, .62);
  color: #fff;
  background:
    radial-gradient(circle at 105% -5%, rgba(239, 208, 123, .22), transparent 17rem),
    linear-gradient(145deg, var(--pc-forest-700), var(--pc-forest-950));
}

body.public-site.page-tentang .about-vision::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 210px;
  aspect-ratio: 1;
  border: 1px solid rgba(239, 208, 123, .25);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(239, 208, 123, .05), 0 0 0 70px rgba(239, 208, 123, .035);
}

body.public-site.page-tentang .about-vision h3 {
  color: var(--pc-gold-300) !important;
  font-size: clamp(1.45rem, 2vw, 1.9rem) !important;
}

body.public-site.page-tentang .about-vision__text {
  max-width: 36rem;
  color: rgba(255,255,255,.89) !important;
}

body.public-site.page-tentang .about-section {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

body.public-site.page-tentang .about-mission__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.35rem);
}

body.public-site.page-tentang .about-mission__item {
  grid-column: span 2;
  min-width: 0;
}

body.public-site.page-tentang .about-mission__item:nth-child(n+4) {
  grid-column: span 3;
}

body.public-site.page-tentang .about-mission__card,
body.public-site.page-tentang .about-value-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(174, 119, 25, .38);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(239, 208, 123, .24), transparent 12rem),
    linear-gradient(145deg, #fffdf7, #f6e8c0);
  box-shadow: var(--pc-shadow);
  transition: transform .26s cubic-bezier(.22,.8,.28,1), box-shadow .26s cubic-bezier(.22,.8,.28,1);
}

body.public-site.page-tentang .about-mission__card {
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
}

body.public-site.page-tentang .about-mission__item:nth-child(even) .about-mission__card {
  border-color: rgba(239, 208, 123, .55);
  background:
    radial-gradient(circle at 100% 0, rgba(239, 208, 123, .15), transparent 13rem),
    linear-gradient(145deg, var(--pc-forest-700), var(--pc-forest-950));
}

body.public-site.page-tentang .about-mission__icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(239, 208, 123, .55);
  background: var(--pc-forest-800);
  box-shadow: 0 12px 25px rgba(5,43,29,.16);
}

body.public-site.page-tentang .about-mission__item:nth-child(even) .about-mission__icon {
  background: linear-gradient(145deg, var(--pc-gold-300), var(--pc-gold-500));
}

body.public-site.page-tentang .about-mission__card h5,
body.public-site.page-tentang .about-value-card h3 {
  color: var(--pc-forest-950) !important;
  font-size: 1.05rem;
}

body.public-site.page-tentang .about-card-copy {
  color: #40594f;
  font-size: .86rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
  text-align: left;
}

body.public-site.page-tentang .about-mission__item:nth-child(even) :is(h5, .about-card-copy) {
  color: #fff !important;
}

body.public-site.page-tentang .about-values__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

body.public-site.page-tentang .about-value-card {
  min-width: 0;
  padding: 1.3rem;
}

body.public-site.page-tentang .about-value-card__number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border: 1px solid rgba(239,208,123,.6);
  border-radius: 14px;
  color: var(--pc-gold-300);
  background: var(--pc-forest-800);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
}

body.public-site.page-tentang .about-commitment {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(239, 208, 123, .55);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 100%, rgba(239, 208, 123, .13), transparent 20rem),
    linear-gradient(145deg, var(--pc-forest-700), var(--pc-forest-950));
  box-shadow: var(--pc-shadow-hover);
}

body.public-site.page-tentang .about-commitment h2 {
  color: var(--pc-gold-300) !important;
}

body.public-site.page-tentang .about-commitment .about-prose {
  color: rgba(255,255,255,.9) !important;
}

body.public-site.page-tentang .about-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(174, 119, 25, .45);
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.28), transparent 15rem),
    linear-gradient(135deg, #f8e4a8, #e2b94f);
  box-shadow: 0 26px 62px rgba(103, 72, 16, .17);
}

body.public-site.page-tentang .about-cta :is(h3, p) {
  color: var(--pc-forest-950) !important;
}

body.public-site.page-tentang .about-cta .btn-outline-light {
  border: 1px solid rgba(5, 43, 29, .48) !important;
  color: var(--pc-forest-900) !important;
  background: rgba(255, 253, 247, .94) !important;
  box-shadow: 0 12px 28px rgba(5, 43, 29, .14) !important;
}

body.public-site.page-tentang .about-cta .btn-outline-light:hover,
body.public-site.page-tentang .about-cta .btn-outline-light:focus-visible {
  border-color: var(--pc-forest-900) !important;
  color: #fff !important;
  background: var(--pc-forest-800) !important;
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  body.public-site.page-tentang :is(.about-mission__card, .about-value-card):hover {
    transform: translateY(-7px);
    box-shadow: var(--pc-shadow-hover);
  }
}

@media (max-width: 991px) {
  body.public-site.page-tentang .about-mission__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.public-site.page-tentang .about-mission__item,
  body.public-site.page-tentang .about-mission__item:nth-child(n+4) {
    grid-column: auto;
  }
  body.public-site.page-tentang .about-mission__item:last-child {
    grid-column: 1 / -1;
  }
  body.public-site.page-tentang .about-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  body.public-site.page-tentang .about-premium {
    padding: 2.35rem 0 6.2rem;
  }
  body.public-site.page-tentang .about-identity {
    border-radius: 22px;
  }
  body.public-site.page-tentang .about-identity__publisher,
  body.public-site.page-tentang .about-identity__legal {
    min-height: 220px;
  }
  body.public-site.page-tentang :is(.about-intro__copy, .about-vision, .about-commitment, .about-cta) {
    border-radius: 22px;
  }
  body.public-site.page-tentang .about-mission__grid,
  body.public-site.page-tentang .about-values__grid {
    grid-template-columns: 1fr;
  }
  body.public-site.page-tentang .about-mission__item:last-child {
    grid-column: auto;
  }
  body.public-site.page-tentang .about-cta .btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: .35rem 0 !important;
  }
}

/* ── Clean geometry rollout: remove decorative corner orbs and rings ───────
   The cards keep their premium forest/gold palette, borders, depth and accent
   rails. Only the generic circular background ornaments are removed. */
body.public-site :is(
  .home-market-card,
  .home-package-card,
  .writer-benefit-card,
  .writer-guide-card,
  .writer-step-card,
  .service-showcase-card,
  .about-identity__single,
  .about-vision,
  .package-story,
  .service-package-hero
)::after,
body.public-site.page-proses .card::after,
body.public-site.page-tentang .card::after,
body.public-site.page-kontak .card::after,
body.public-site :is(.official-template-card,.package-addon,.format-commerce-card,.checkout-panel,.cart-summary)::after,
body.public-site.page-naskah .writer-submit-banner::before,
body.public-site.page-naskah .writer-submit-banner::after,
body.public-site.page-layanan .service-showcase-intro::before,
body.public-site.page-layanan .service-showcase-intro::after,
body.public-site .editorial-lead__visual::before,
body.public-site .home-packages::before,
body.public-site .catalog-editorial-hero::before,
body.public-site .service-package-head::before,
body.public-site .order-commerce-hero::before,
body.public-site .order-sidebar::before,
body.public-site .order-hero-ticket::before,
body.public-site .order-hero-ticket::after {
  content: none !important;
  display: none !important;
}

/* Flat, intentional gradients replace all radial spotlight backgrounds. */
body.public-site.page-proses main,
body.public-site.page-tentang main,
body.public-site.page-kontak main {
  background: var(--sji-page) !important;
}

body.public-site .home-release-body,
body.public-site .catalog-card-body {
  background: var(--sji-paper) !important;
}

body.public-site .editorial-lead__visual {
  background: linear-gradient(155deg,#0f5d49,#087b65 58%,#006b4d) !important;
}

body.public-site.page-naskah .writer-premium-page {
  background: linear-gradient(180deg,#fbf5e8 0%,#f3f7ef 52%,#fbf6eb 100%) !important;
}

body.public-site.page-layanan .service-showcase-intro {
  background: linear-gradient(145deg,#0b533a 0%,#052b1d 100%) !important;
}

body.public-site.page-naskah main .card.border-0.shadow-lg {
  background: linear-gradient(145deg,#fff9ec 0%,#e4f4e9 100%) !important;
}

body.public-site.page-tentang .about-premium {
  background: linear-gradient(180deg,#fffdf7 0%,#f2f8f2 50%,#fffaf0 100%) !important;
}

body.public-site.page-tentang .about-identity__single {
  background: linear-gradient(145deg,#fffdf7,#f7edcf 58%,#eef6ef) !important;
}

body.public-site.page-tentang .about-identity__publisher {
  background: linear-gradient(145deg,#fffdf7,#f7edcf) !important;
}

body.public-site.page-tentang .about-identity__legal,
body.public-site.page-tentang .about-vision,
body.public-site.page-tentang .about-commitment,
body.public-site.page-tentang .about-mission__item:nth-child(even) .about-mission__card {
  background: linear-gradient(145deg,var(--pc-forest-700),var(--pc-forest-950)) !important;
}

body.public-site.page-tentang .about-intro__copy {
  background: linear-gradient(145deg,#fffdf7,#f9f1dc) !important;
}

body.public-site.page-tentang .about-mission__card {
  background: linear-gradient(145deg,#fffdf7,#f6e8c0) !important;
}

body.public-site.page-tentang .about-cta {
  background: linear-gradient(135deg,#f8e4a8,#e2b94f) !important;
}