/* ========== PKJ — SHARED UI (untuk SEMUA halaman PKJ) ========== */
/* Catatan tata letak:
   - Desktop (≥1024px): container CENTER (max-width via --pkj-narrow)
   - Mobile (≤575.98px): safe area kiri/kanan 14px (ubah via --pkj-mobile-safe)
   - Alignment teks tetap diatur per-halaman (shared UI hanya atur lebar/posisi blok)
*/

.pkj-container{
  --pkj-narrow: 740px;         /* lebar patokan semua blok */
  --pkj-desktop-offset: 48px;  /* legacy token (boleh dipakai page-specific) */
  --pkj-mobile-safe: 14px;     /* safe area mobile */

  /* visual tokens (shared fallback) */
  --pkj-gold: #F2C94C;
  --pkj-text: #EDEFF6;

  box-sizing: border-box;
}

/* Optional: biar anak-anak lebih aman sizing */
.pkj-container *,
.pkj-container *::before,
.pkj-container *::after{
  box-sizing: border-box;
}

/* ---------- RAIL LAYOUT: letak & lebar konsisten ---------- */
/* Desktop: CENTER */
@media (min-width:1024px){
  .pkj-container :where(
    .pkj-hero,
    .pkj-hero-h1,
    h1.pkj-title,
    .pkj-hero-sub,
    .pkj-note,
    .pkj-introquote,
    .pkj-article-hero,
    .pkj-jodoh-fig,
    .pkj-box--wej,
    .pkj-box--weton,
    .prose-pkj,
    .pkj-faq,
    .pkj-disclaimer,
    .pkj-author-card,
    .pkj-share-buttons,
    .pkj-meta-pill
  ){
    max-width: var(--pkj-narrow);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Mobile: safe area */
@media (max-width:575.98px){
  .pkj-container :where(
    .pkj-hero,
    .pkj-hero-h1,
    h1.pkj-title,
    .pkj-hero-sub,
    .pkj-note,
    .pkj-introquote,
    .pkj-article-hero,
    .pkj-jodoh-fig,
    .pkj-box--wej,
    .pkj-box--weton,
    .prose-pkj,
    .pkj-faq,
    .pkj-disclaimer,
    .pkj-author-card,
    .pkj-share-buttons,
    .pkj-meta-pill
  ){
    max-width: calc(100% - (var(--pkj-mobile-safe) * 2));
    margin-left: var(--pkj-mobile-safe);
    margin-right: var(--pkj-mobile-safe);
    box-sizing: border-box;
  }
}

/* ---------- H1 — gold foil + drop shadow (visual) ---------- */
.pkj-container .pkj-hero-h1,
.pkj-container h1.pkj-title{
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 44px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  background: linear-gradient(180deg,#fff7bf 0%,#ffe066 28%,#f7cf42 58%,#f1c40f 78%,#cfa50c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.40)) drop-shadow(0 6px 18px rgba(245,194,59,.18));
}
/* ⚠️ Tidak memaksa text-align di desktop; biarkan page-specific yang atur */

/* ---------- NOTE / BLOCKQUOTE ---------- */
.pkj-container .pkj-note,
.pkj-container .pkj-introquote{
  position: relative;
  margin: .9rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  color: #DDE3EE;
  border: 1px solid rgba(245,194,59,.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23b07f05' stroke-opacity='.10' stroke-width='.8'%3E%3Cpath d='M0 9h18M9 0v18'/%3E%3Cpath d='M0 0l18 18M18 0L0 18'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, rgba(245,194,59,.10), rgba(245,194,59,.03));
  background-size: 18px 18px, auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.pkj-container .pkj-note::before,
.pkj-container .pkj-introquote::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg,#ffe066,#f1c40f 60%,#d4ac0d);
  box-shadow: 0 0 0 1px rgba(245,194,59,.45);
}
.pkj-container .pkj-note p,
.pkj-container .pkj-introquote p{
  margin: 0;
  line-height: 1.6;
  color: #DDE3EE;
}

/* ---------- DISCLAIMER ---------- */
.pkj-container .pkj-disclaimer{
  position: relative;
  isolation: isolate;
  margin-top: 18px;
  margin-bottom: 18px; /* horizontal ikut rail */
  padding: 16px 20px 16px 100px;
  border-radius: 20px;
  background: linear-gradient(180deg,#151b23 0%, #11161d 100%);
  color: var(--pkj-text);
  line-height: 1.65;
  border: 1px solid #e0bf62;
  box-shadow:
    0 0 0 1px rgba(255,213,120,.25),
    0 16px 34px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.pkj-container .pkj-disclaimer b{ color: var(--pkj-gold); }
.pkj-container .pkj-disclaimer em{
  color: #fff;
  opacity: .92;
  font-style: italic;
}
.pkj-container .pkj-disclaimer::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .35;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23d6b25a' stroke-opacity='.22' stroke-width='.9'%3E%3Cpath d='M0 9h18M9 0v18'/%3E%3Cpath d='M0 0l18 18M18 0L0 18'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, rgba(245,194,59,.16), rgba(245,194,59,.05));
  background-size: 18px 18px, auto;
}
.pkj-container .pkj-disclaimer > *{
  position: relative;
  z-index: 1;
}

/* Icon “i” */
.pkj-container .pkj-disclaimer .ico{
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 7px, transparent 8px),
    linear-gradient(180deg,#ffeaa0 0%, #d7a62d 100%);
  border: 2px solid #d6a11a;
  box-shadow:
    0 0 0 1px rgba(255,213,120,.40),
    0 10px 20px rgba(0,0,0,.35),
    inset 0 2px 6px rgba(255,255,255,.45);
}
.pkj-container .pkj-disclaimer .ico::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg,#eaf3ff 0%, #bcd6f6 55%, #7ba1d7 100%);
}
.pkj-container .pkj-disclaimer .ico::after{
  content: "i";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* Desktop layout (ikut rail) */
@media (min-width:1024px){
  .pkj-container .pkj-disclaimer{
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    column-gap: 16px;
    padding: 18px 22px 18px 36px;
  }
  .pkj-container .pkj-disclaimer .ico{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }
  .pkj-container .pkj-disclaimer::before{
    opacity: .38;
    background-size: 16px 16px, auto;
  }
}

/* ---------- SHARE BUTTONS ---------- */
.pkj-container .pkj-share-buttons{
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  max-width: var(--pkj-narrow);   /* konsisten dengan blok lain */
  margin-top: .6rem;              /* horizontal ikut rail */
  align-items: stretch;
}
.pkj-container .pkj-share-buttons > *{
  min-width: 0;
}

@media (min-width:1024px){
  .pkj-container .pkj-share-buttons{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-flow: row;
  }
  .pkj-container .pkj-share-buttons > :last-child:nth-child(odd){
    grid-column: 1 / -1;
  }
}

.pkj-container .pkj-share__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--pkj-gold, #C9A227);
  color: #111;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pkj-container .pkj-share__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  filter: brightness(1.03);
}
.pkj-container .pkj-share__btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.pkj-container .pkj-share__btn svg{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

/* ---------- Author Card ---------- */
.pkj-container .pkj-author-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: var(--pkj-narrow,740px);
  margin-top: 16px;
  margin-bottom: 18px; /* horizontal ikut rail */
  padding: 16px 18px;  /* ⬅️ penting: mobile padding (sebelumnya rawan hilang) */
  border-radius: 16px;
  border: 1px solid rgba(245,194,59,.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23b07f05' stroke-opacity='.10' stroke-width='.8'%3E%3Cpath d='M0 9h18M9 0v18'/%3E%3Cpath d='M0 0l18 18M18 0L0 18'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, #141820, #10151c);
  box-shadow: 0 14px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--pkj-text);
}
.pkj-container .pkj-author-card--batik::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,213,120,.25) inset;
}

.pkj-container .pkj-author-card__media{
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}
.pkj-container .pkj-author-card__avatar{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 3px solid #E8C35A;
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55);
  background: #0f141b;
}

.pkj-container .pkj-author-card__name{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.25rem;
  color: var(--pkj-gold);
}
.pkj-container .pkj-author-card__role{
  margin: .05rem 0 .25rem;
  color: #FFD780;
  font-weight: 700;
  font-size: .95rem;
}
.pkj-container .pkj-author-card__bio{
  margin: .2rem 0 .4rem;
  line-height: 1.65;
  color: #EAF1FF;
}

.pkj-container .pkj-author-card__links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem .6rem;
}
.pkj-container .pkj-author-link{
  color: #FFD45A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkj-container .pkj-author-card__links .sep{
  opacity: .6;
  color: #FFD45A;
}

.pkj-container .pkj-author-card__meta{
  margin-top: .2rem;
  font-size: .9rem;
  opacity: .9;
}

.pkj-container .pkj-author-card__soc{
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .6rem;
  margin-top: .6rem;
}
.pkj-container .pkj-author-card__soc > *{
  min-width: 0;
}

.pkj-container .pkj-soc-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  height: 42px;
  padding: 0 .8rem;
  border-radius: 9999px;
  background: linear-gradient(180deg,#fff3a3 0%, #ffd95a 46%, #ffc93a 100%);
  color: #111;
  font-weight: 800;
  font-size: .85rem;
  text-decoration: none;
  border: 1px solid rgba(214,165,26,.65);
  box-shadow: 0 8px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pkj-container .pkj-soc-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 20px rgba(0,0,0,.26);
}
.pkj-container .pkj-soc-btn svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: inline-block;
  flex: 0 0 16px;
}

@media (max-width:360px){
  .pkj-container .pkj-author-card__media{ width: 88px; height: 88px; }
  .pkj-container .pkj-soc-btn{ height: 40px; font-size: .8rem; }
}

/* Desktop: dua kolom (tetap ikut rail, text kiri) */
@media (min-width:960px){
  .pkj-container .pkj-author-card{
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 18px 22px;
  }
  .pkj-container .pkj-author-card__media{
    width: 120px;
    height: 120px;
    grid-column: 1;
    justify-self: center;
    align-self: center;
  }
  .pkj-container .pkj-author-card > *:not(.pkj-author-card__media){
    grid-column: 2;
    min-width: 0;
  }
  .pkj-container .pkj-author-card__name{ font-size: 1.35rem; }
  .pkj-container .pkj-author-card__role{ font-size: 1rem; }
  .pkj-container .pkj-author-card__links{ justify-content: flex-start; }
  .pkj-container .pkj-author-card__soc{
    max-width: none;
    grid-template-columns: repeat(3,minmax(0,1fr));
    justify-items: start;
    margin-top: .5rem;
  }
}

/* ---------- Utilitas warna teks (tanpa mengubah alignment) ---------- */
.pkj-narr .pkj-hero-sub { color:#fff; }
.pkj-narr .pkj-narr__h2 { color:#fff; }
.pkj-narr .pkj-narr__text,
.pkj-narr .pkj-narr__text p { color:#fff; }
.pkj-narr .pkj-narr__text[style] { opacity:1 !important; }

/* ⚠️ Tidak ada aturan global .pkj-hero-sub { text-align:center } di sini.
   Jika perlu center, atur di CSS halaman terkait (landing saja, misalnya). */