/* ========== PKJ — SHARED UI (untuk SEMUA halaman PKJ) ========== */
/* Catatan tata letak (mengikut gaya "page jodoh"):
   - Desktop (≥1024px): kolom kiri dgn offset 48px (ubah via --pkj-desktop-offset)
   - Mobile (≤575.98px): safe area kiri/kanan 14px (ubah via --pkj-mobile-safe)
   - Tidak memaksa center container; alignment teks diatur per-halaman.
*/

.pkj-container{
  --pkj-narrow: 740px;         /* lebar patokan semua blok */
  --pkj-desktop-offset: 48px;  /* rail kiri desktop */
  --pkj-mobile-safe: 14px;     /* safe area mobile */
  box-sizing: border-box;
}

/* ---------- RAIL LAYOUT: letak & lebar konsisten ---------- */
/* Desktop: ikut rail kiri */
@media (min-width:1024px){
  .pkj-container :is(
    .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: var(--pkj-desktop-offset);
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Mobile: safe area */
@media (max-width:575.98px){
  .pkj-container :is(
    .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;
  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:#EDEFF6; 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:#F2C94C; }
.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 dgn blok lain */
  margin-top:.6rem; align-items:stretch;     /* horizontal ikut rail */
}
@media (min-width:1024px){
  .pkj-container .pkj-share-buttons{
    grid-template-columns: repeat(2, 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 */
  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:#EDEFF6;
}
.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; }
.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:#F2C94C; }
.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-soc-btn{
  display:flex; align-items:center; justify-content:center;
  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; margin-right:.35rem; }

@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; }
  .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). */