/* =========================================================
   PKJ JODOH — FINAL CLEAN (Replace Total)
   Scope: .pkj-jodoh-page
   - H1 saja center
   - ads / affiliate / kurasi dihapus
   - desktop safe zone + mobile safe area
   ========================================================= */

/* =========================
   VARS / TOKENS
   ========================= */
.pkj-jodoh-page{
  --pkj-gold:#F2C94C;
  --pkj-gold-d:#E0B74A;

  --pkj-narrow:740px;
  --pkj-gutter:0px;
  --pkj-input-h:56px;
  --pkj-gap:14px;

  --pkj-safe:14px;
  --pkj-article-safe:18px;

  --pkj-desktop-offset:48px;
  --pkj-desktop-offset-wide:64px;
}

/* spacing bawah halaman */
.pkj-jodoh-page.pkj-jodoh-landing{ padding-bottom:72px; }
.pkj-jodoh-page.pkj-result{ padding-bottom:0; --pkj-narrow:720px; }

/* =========================================================
   HAPUS ADS / AFFILIATE / KURASI (kalau markup masih ada)
   ========================================================= */
.pkj-jodoh-page :is(
  .pkj-ad,
  .pkj-ad--result-top,
  .pkj-ad--result-mid,
  .pkj-ad--result-bottom,
  .pkj-affbox,
  .kj-curated,
  .kj-aff,
  .kj-aff-list,
  .kj-aff__item,
  .kj-aff-item,
  .kj_aff_item,
  #pkj-multiplex,
  ins.adsbygoogle
){
  display:none !important;
}

/* =========================
   HERO
   ========================= */
.pkj-jodoh-page .pkj-hero{
  background:none;
  padding:.25rem 0 0;
}
.pkj-jodoh-page .pkj-hero::before{ display:none; }

/* H1 — gold foil + drop shadow */
.pkj-jodoh-page .pkj-hero-h1,
.pkj-jodoh-page 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));
  text-align:center; /* ✅ H1 saja center */
}

/* Hero sub — default TIDAK dipaksa center */
.pkj-jodoh-page .pkj-hero-sub{
  color:#fff;
  opacity:.95;
  text-align:left;
  margin:.5rem 0;
}
.pkj-jodoh-page .pkj-hero-sub .t-muted{ color:#fff; opacity:.95; }
.pkj-jodoh-page .pkj-hero-sub .t-gold{ color:var(--pkj-gold); font-weight:700; }

/* =========================
   DESKTOP SAFE ZONE (CONTENT)
   ========================= */

/* Landing content (offset 48px) */
@media (min-width:1024px){
  .pkj-jodoh-page.pkj-jodoh-landing :is(
    .pkj-hero,
    .pkj-note,
    .pkj-article-hero,
    .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;
    padding-left:var(--pkj-gutter);
    padding-right:var(--pkj-gutter);
    box-sizing:border-box;
  }
}

/* Result content (offset 48px) */
@media (min-width:1024px){
  .pkj-jodoh-page.pkj-result :is(
    .pkj-hero-sub,
    h1.pkj-title,
    .pkj-hero-h1,
    .pkj-note,
    .pkj-meta-pill,
    .pkj-jodoh-fig,
    .pkj-box--wej,
    .pkj-box--weton,
    .pkj-share-buttons,
    .pkj-author-card,
    .pkj-disclaimer
  ){
    max-width:var(--pkj-narrow);
    margin-left:var(--pkj-desktop-offset);
    margin-right:auto;
    box-sizing:border-box;
  }
}

/* Desktop: hanya H1 center (subtitle tetap left) */
@media (min-width:1024px){
  .pkj-jodoh-page :is(.pkj-hero-h1, h1.pkj-title){
    text-align:center !important;
  }
  .pkj-jodoh-page .pkj-hero-sub{
    text-align:left !important;
  }
}

/* =========================
   FORM (Jodoh)
   ========================= */
.pkj-jodoh-page .pkj-weton-form{
  max-width:var(--pkj-narrow);
  margin:12px auto 14px;
  display:grid;
  grid-template-columns:1fr; /* mobile */
  gap:12px;
  align-items:stretch;
  justify-content:start;
}

/* Desktop: 2 input + tombol di bawah (tetap layout jodoh) */
@media (min-width:992px){
  .pkj-jodoh-page .pkj-weton-form{
    margin-left:var(--pkj-desktop-offset);
    margin-right:auto;
    grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);
    grid-template-rows:auto var(--pkj-input-h) auto; /* label | input | tombol */
    column-gap:14px;
    row-gap:4px;
    align-items:center;
  }

  /* Baris label */
  .pkj-jodoh-page .pkj-weton-form__label:nth-of-type(1){
    grid-column:1; grid-row:1;
    justify-self:end; align-self:end;
    padding-bottom:2px;
  }
  .pkj-jodoh-page .pkj-weton-form__label:nth-of-type(2){
    grid-column:2; grid-row:1;
    justify-self:end; align-self:end;
    padding-bottom:2px;
  }

  /* Baris input */
  .pkj-jodoh-page .pkj-weton-form .pkj-date-wrap:nth-of-type(1){
    grid-column:1; grid-row:2;
    height:var(--pkj-input-h);
  }
  .pkj-jodoh-page .pkj-weton-form .pkj-date-wrap:nth-of-type(2){
    grid-column:2; grid-row:2;
    height:var(--pkj-input-h);
  }

  /* Tombol bawah: lebar = 1 kolom input */
  .pkj-jodoh-page .pkj-weton-form :is(.pkj-btn-gold, .pkj-weton-form__btn){
    grid-column:1 / span 2;
    grid-row:3;
    justify-self:center;
    align-self:center;
    height:var(--pkj-input-h);
    padding:0 18px;
    box-sizing:border-box;
    width:calc((100% - 14px) / 2);
    min-width:260px;
    max-width:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0 !important;
  }

  /* anti overflow */
  .pkj-jodoh-page .pkj-weton-form > *{
    min-width:0;
    margin:0;
  }
}

/* Label */
.pkj-jodoh-page .pkj-weton-form__label{
  color:#FFD45A;
  font-weight:700;
}

/* Input */
.pkj-jodoh-page .pkj-date-wrap{
  position:relative;
  height:var(--pkj-input-h);
}
.pkj-jodoh-page .pkj-weton-form__date{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:var(--pkj-input-h);
  min-inline-size:0;
  border-radius:16px;
  padding:0 14px;
  box-sizing:border-box;
  color:#F8FAFC;
  caret-color:#fff;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.085) 1.2px, transparent 1.3px) 0 0/12px 12px repeat,
    #0E1117;
  border:1px solid #E8C35A;
  box-shadow:0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.pkj-jodoh-page .pkj-weton-form__date:focus{
  outline:2px solid rgba(242,201,76,.35);
  outline-offset:1px;
}
.pkj-jodoh-page .pkj-weton-form__date::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.9;
}

/* Placeholder overlay */
.pkj-jodoh-page .pkj-date-wrap::after{
  content:"DD-MM-YYYY";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.92);
  font-weight:600;
  letter-spacing:.25px;
  pointer-events:none;
}
.pkj-jodoh-page .pkj-date-wrap.has-value::after{ content:""; }
.pkj-jodoh-page .pkj-date-wrap:not(.has-value) .pkj-weton-form__date::-webkit-datetime-edit{
  color:transparent;
}
.pkj-jodoh-page .pkj-date-wrap:focus-within::after{ opacity:.38; }

/* Tombol emas (umum) */
.pkj-jodoh-page .pkj-btn-gold,
.pkj-jodoh-page .pkj-weton-form__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.1rem;
  border-radius:20px;
  font-weight:700;
  color:#111;
  border:1px solid #E6C04F;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d3b147' stroke-width='1.2' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M12 2 L22 12 L12 22 L2 12 Z'/%3E%3Cpath d='M12 6 L18 12 L12 18 L6 12 Z'/%3E%3C/g%3E%3C/svg%3E") center/18px 18px repeat,
    linear-gradient(180deg,#fff7bf 0%,#ffe066 28%,#f7cf42 58%,#f1c40f 78%,#cfa50c 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.65);
  transition:filter .15s ease, transform .05s ease;
}
.pkj-jodoh-page :is(.pkj-btn-gold, .pkj-weton-form__btn):hover{ filter:brightness(1.06); }
.pkj-jodoh-page :is(.pkj-btn-gold, .pkj-weton-form__btn):active{ transform:translateY(1px); }

/* Tombol emas di form: samakan tinggi input */
.pkj-jodoh-page .pkj-weton-form :is(.pkj-btn-gold, .pkj-weton-form__btn){
  height:var(--pkj-input-h);
  padding:0 18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   NOTE / BLOCKQUOTE
   ========================= */
.pkj-jodoh-page .pkj-note,
.pkj-jodoh-page .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-jodoh-page .pkj-note::before,
.pkj-jodoh-page .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-jodoh-page .pkj-note p,
.pkj-jodoh-page .pkj-introquote p{
  margin:0;
  line-height:1.6;
  color:#DDE3EE;
}

/* =========================
   HERO IMAGE / FIGURE
   ========================= */
.pkj-jodoh-page .pkj-article-hero{
  width:min(860px,100%);
  margin:14px auto 24px;
  border:2px solid #E8C35A;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(0,0,0,.45);
}
.pkj-jodoh-page .pkj-article-hero img,
.pkj-jodoh-page .pkj-jodoh-fig img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
}

/* =========================
   PROSE & FAQ
   ========================= */
.pkj-jodoh-page .prose-pkj{
  color:#E8EDF6;
  line-height:1.75;
}
.pkj-jodoh-page .prose-pkj h2{
  color:#FFD66A;
  margin:1.1rem 0 .55rem;
  line-height:1.25;
  border-bottom:1px dashed rgba(255,255,255,.12);
  padding-bottom:.25rem;
}
.pkj-jodoh-page .prose-pkj a{
  color:#FFD45A;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* FAQ details */
.pkj-jodoh-page .pkj-faq,
.pkj-jodoh-page details.pkj-faq{
  background:#0F141B;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  margin:.55rem 0;
  padding:.6rem .8rem;
  color:#EDEFF6;
}
.pkj-jodoh-page .pkj-faq > summary,
.pkj-jodoh-page details.pkj-faq > summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:#FFD45A;
}
.pkj-jodoh-page .pkj-faq > summary::marker,
.pkj-jodoh-page .pkj-faq > summary::-webkit-details-marker,
.pkj-jodoh-page details.pkj-faq > summary::marker,
.pkj-jodoh-page details.pkj-faq > summary::-webkit-details-marker{
  display:none;
}
.pkj-jodoh-page .pkj-faq > summary::after,
.pkj-jodoh-page details.pkj-faq > summary::after{
  content:"▾";
  float:right;
  color:#FFD45A;
  transition:transform .15s;
}
.pkj-jodoh-page .pkj-faq[open] > summary::after,
.pkj-jodoh-page details.pkj-faq[open] > summary::after{
  transform:rotate(180deg);
}
@media (min-width:1024px){
  .pkj-jodoh-page .pkj-faq,
  .pkj-jodoh-page details.pkj-faq{
    padding:.9rem 1rem;
  }
  .pkj-jodoh-page .pkj-faq > :not(summary),
  .pkj-jodoh-page details.pkj-faq > :not(summary){
    padding-inline:1.15rem;
  }
  .pkj-jodoh-page .pkj-faq p,
  .pkj-jodoh-page .pkj-faq li,
  .pkj-jodoh-page details.pkj-faq p,
  .pkj-jodoh-page details.pkj-faq li{
    line-height:1.7;
  }
}

/* FAQ header tweak (desktop) */
@media (min-width:992px){
  .pkj-jodoh-page.pkj-jodoh-landing .prose-pkj details.pkj-faq{
    margin-left:12px;
  }
  .pkj-jodoh-page.pkj-jodoh-landing .prose-pkj details.pkj-faq > summary{
    padding-left:18px !important;
  }
}

/* =========================
   DISCLAIMER
   ========================= */
.pkj-jodoh-page .pkj-disclaimer{
  position:relative;
  isolation:isolate;
  max-width:var(--pkj-narrow);
  margin:18px auto;
  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-jodoh-page .pkj-disclaimer b{ color:#F2C94C; }
.pkj-jodoh-page .pkj-disclaimer em{ color:#fff; opacity:.92; font-style:italic; }

.pkj-jodoh-page .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-jodoh-page .pkj-disclaimer > *{
  position:relative;
  z-index:1;
}

/* ikon info */
.pkj-jodoh-page .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-jodoh-page .pkj-disclaimer .ico::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#eaf3ff 0%, #bcd6f6 55%, #7ba1d7 100%);
}
.pkj-jodoh-page .pkj-disclaimer .ico::after{
  content:"i";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900;
  color:#fff;
}

@media (min-width:1024px){
  .pkj-jodoh-page .pkj-disclaimer{
    display:grid;
    grid-template-columns:64px 1fr;
    align-items:center;
    column-gap:16px;
    padding:18px 22px;
  }
  .pkj-jodoh-page .pkj-disclaimer .ico{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:56px;
    height:56px;
    border-radius:50%;
  }
}

/* =========================
   HALAMAN HASIL (RESULT)
   ========================= */
/* ✅ H1 hasil tetap gold foil (ikut style global), hanya atur size/spacing */
.pkj-jodoh-page.pkj-result :is(h1.pkj-title, .pkj-hero-h1){
  text-align:center !important;
  font-weight:900;
  line-height:1.12;
  font-size:clamp(28px,3vw,40px);
  margin-block:.25rem .55rem;
}

/* poster hasil */
.pkj-jodoh-page.pkj-result .pkj-jodoh-fig{
  margin-block:8px 18px;
}
.pkj-jodoh-page.pkj-result .pkj-jodoh-fig img{
  border:2px solid #E8C35A;
  box-shadow:0 18px 36px rgba(0,0,0,.45);
}

/* kartu hasil */
.pkj-jodoh-page.pkj-result .pkj-box--wej,
.pkj-jodoh-page.pkj-result .pkj-box--weton{
  position:relative;
  border-radius:12px;
  padding:.85rem 1rem;
  color:#EAF1FF;
  background:
    linear-gradient(#121821,#121821) padding-box,
    linear-gradient(135deg, rgba(255,213,120,.55), rgba(255,213,120,.15)) border-box;
  border:1px solid transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.pkj-jodoh-page.pkj-result .pkj-box--wej::before,
.pkj-jodoh-page.pkj-result .pkj-box--weton::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.12;
  background-image:
    radial-gradient(circle at 12px 12px, #ffd780 1px, transparent 1px),
    radial-gradient(circle at 0 0,       #ffd780 1px, transparent 1px);
  background-size:24px 24px, 24px 24px;
  background-position:0 0, 12px 12px;
}
.pkj-jodoh-page.pkj-result .pkj-box--wej .pkj-label,
.pkj-jodoh-page.pkj-result .pkj-box--weton .pkj-label{
  color:#FFD780;
  font-weight:800;
}

@media (min-width:800px){
  .pkj-jodoh-page.pkj-result .pkj-meta-weton{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
  }
}

/* caption */
.pkj-jodoh-page.pkj-result .pkj-jodoh-fig figcaption{
  color:#F2C94C;
  font-weight:800;
  text-align:center;
  letter-spacing:.3px;
  margin:.45rem auto 0;
}

/* =========================
   META PILL
   ========================= */
.pkj-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:fit-content;
  max-width:100%;
  padding:.5rem .9rem;
  border-radius:9999px;
  margin:.45rem 0 .2rem;
  font-weight:800;
  background:linear-gradient(180deg,#fff3a3 0%, #ffd95a 46%, #ffc93a 100%);
  color:#1a1a1a;
  border:1px solid rgba(214,165,26,.65);
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
.pkj-meta-pill .pill-kat{
  text-transform:uppercase;
  letter-spacing:.4px;
}
.pkj-meta-pill .pill-dot{
  opacity:.7;
  transform:translateY(-.5px);
}
.pkj-meta-pill .pill-neptu{
  font-weight:700;
  letter-spacing:.2px;
}
@media (max-width:420px){
  .pkj-meta-pill{
    font-size:.85rem;
    padding:.45rem .75rem;
  }
}
@media (min-width:421px){
  .pkj-meta-pill{ font-size:.9rem; }
}

/* =========================
   SHARE BUTTONS
   ========================= */
.pkj-share-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pkj-gap);
  max-width:860px;
  margin:.6rem auto 0;
  align-items:stretch;
  isolation:isolate;
}
@media (min-width:1024px){
  .pkj-share-buttons{
    grid-template-columns:repeat(4, minmax(0,1fr));
    max-width:var(--pkj-narrow);
    margin-left:var(--pkj-desktop-offset);
    margin-right:auto;
  }
}
.pkj-share__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:100%;
  min-height:44px;
  padding:.6rem .9rem;
  border-radius:18px;
  text-transform:uppercase;
  font-size:.82rem;
  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;
  box-sizing:border-box;
  position:relative;
}
.pkj-share__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  filter:brightness(1.03);
}
.pkj-share__btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.pkj-share__btn svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:currentColor;
}

/* =========================
   AUTHOR CARD
   ========================= */
.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:16px auto 18px;
  padding:16px 18px;
  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-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-author-card__media{ width:96px; height:96px; }
.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-author-card__name{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  font-size:1.25rem;
  color:#F2C94C;
}
.pkj-author-card__role{
  margin:.05rem 0 .25rem;
  color:#FFD780;
  font-weight:700;
  font-size:.95rem;
}
.pkj-author-card__bio{
  margin:.2rem 0 .4rem;
  line-height:1.65;
  color:#EAF1FF;
}
.pkj-author-card__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem .6rem;
}
.pkj-author-link{
  color:#FFD45A;
  text-decoration:underline;
  text-underline-offset:2px;
}
.pkj-author-card__links .sep{
  opacity:.6;
  color:#FFD45A;
}
.pkj-author-card__meta{
  margin-top:.2rem;
  font-size:.9rem;
  opacity:.9;
}
.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-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-soc-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 12px 20px rgba(0,0,0,.26);
}
.pkj-soc-btn svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

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

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

/* =========================
   MOBILE HERO TWEAKS (FINAL)
   ========================= */
@media (max-width:575.98px){
  .pkj-jodoh-page .pkj-hero{ padding-top:1rem; }

  /* H1 tetap center */
  .pkj-jodoh-page .pkj-hero-h1,
  .pkj-jodoh-page h1.pkj-title{
    text-align:center !important;
    line-height:1.05;
    margin:0 0 .35rem;
    font-size:clamp(22px,7vw,30px);
  }

  /* khusus hasil: center + sedikit kecil */
  .pkj-jodoh-page.pkj-result :is(.pkj-hero-h1, h1.pkj-title){
    text-align:center !important;
    font-size:clamp(20px,6.4vw,28px);
  }

  .pkj-jodoh-page .pkj-hero-year{
    display:block;
    font-size:clamp(20px,8vw,28px);
    margin-top:.1rem;
    background:inherit;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:900;
    letter-spacing:.02em;
  }

  /* mobile subtitle boleh center agar rapi */
  .pkj-jodoh-page .pkj-hero-sub{
    font-size:clamp(12.5px,3.6vw,14.5px);
    line-height:1.3;
    text-align:center;
    margin:.25rem auto 0;
  }
}

/* =========================
   MOBILE SAFE AREA (GENERAL)
   ========================= */
@media (max-width:575.98px){
  .pkj-jodoh-page{
    overflow-x:hidden;
  }

  .pkj-jodoh-page :is(
    .pkj-hero,
    .pkj-weton-form,
    .pkj-note,
    .pkj-article-hero,
    .pkj-jodoh-fig,
    .pkj-box--wej,
    .pkj-box--weton,
    .pkj-share-buttons,
    .pkj-author-card,
    .pkj-disclaimer,
    .prose-pkj,
    details.pkj-faq,
    .pkj-faq,
    .pkj-meta-pill
  ){
    max-width:calc(100% - (var(--pkj-safe) * 2));
    margin-left:var(--pkj-safe);
    margin-right:var(--pkj-safe);
    box-sizing:border-box;
  }

  .pkj-jodoh-page img,
  .pkj-jodoh-page svg,
  .pkj-jodoh-page video,
  .pkj-jodoh-page canvas{
    display:block;
    max-width:100%;
    height:auto;
  }

  .pkj-jodoh-page table,
  .pkj-jodoh-page pre,
  .pkj-jodoh-page code{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .pkj-jodoh-page .prose-pkj h2,
  .pkj-jodoh-page .prose-pkj h3{
    padding-inline:2px;
  }
  .pkj-jodoh-page .prose-pkj ul,
  .pkj-jodoh-page .prose-pkj ol{
    padding-left:1.1rem;
  }
}

/* Mobile extra-safe khusus area artikel */
@media (max-width:575.98px){
  .pkj-container .prose-pkj{
    max-width:calc(100% - (var(--pkj-article-safe) * 2));
    margin-left:var(--pkj-article-safe) !important;
    margin-right:var(--pkj-article-safe) !important;
    padding-inline:4px;
    box-sizing:border-box;
  }

  .pkj-container .prose-pkj h2{
    font-size:clamp(19px,5.6vw,22px);
    line-height:1.25;
    margin:10px 0 8px;
    padding-inline:2px;
  }
  .pkj-container .prose-pkj p,
  .pkj-container .prose-pkj li{
    font-size:15.5px;
    line-height:1.8;
    padding-inline:2px;
  }
  .pkj-container .prose-pkj ul,
  .pkj-container .prose-pkj ol{
    padding-left:1.35rem;
    margin:6px 0 12px;
  }

  .pkj-container .prose-pkj a{
    font-size:15px;
  }
}
/* =========================================================
   PKJ JODOH — DESKTOP CENTER OVERRIDE (tempel paling bawah)
   Tujuan: center kolom konten desktop, bukan center semua teks
   ========================================================= */

/* Desktop center untuk semua blok utama (landing + result) */
@media (min-width:1024px){
  .pkj-jodoh-page :is(
    .pkj-hero,
    .pkj-note,
    .pkj-introquote,
    .pkj-article-hero,
    .prose-pkj,
    .pkj-faq,
    .pkj-disclaimer,
    .pkj-author-card,
    .pkj-share-buttons,
    .pkj-meta-pill,
    .pkj-jodoh-fig,
    .pkj-box--wej,
    .pkj-box--weton,
    .pkj-hero-sub,
    .pkj-hero-h1,
    h1.pkj-title
  ){
    max-width: var(--pkj-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* kalau ada tweak FAQ yang dorong ke kiri, netralkan */
  .pkj-jodoh-page.pkj-jodoh-landing .prose-pkj details.pkj-faq{
    margin-left: 0 !important;
  }

  /* share buttons desktop tetap center */
  .pkj-jodoh-page .pkj-share-buttons{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Form jodoh pakai breakpoint 992px di CSS lama, jadi override di breakpoint yang sama */
@media (min-width:992px){
  .pkj-jodoh-page .pkj-weton-form{
    max-width: var(--pkj-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width:1024px){
  .pkj-jodoh-page .pkj-meta-pill{
    display:flex !important;
    width:fit-content;
    max-width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-content:center;
  }
}
/* =========================================================
   FIX JARAK FORM -> TOMBOL (DESKTOP) | CEK JODOH RESULT/LANDING
   ========================================================= */
@media (min-width: 992px){
  .pkj-jodoh-page .pkj-weton-form{
    /* rapatkan jarak antar baris grid */
    row-gap: 0 !important;            /* sebelumnya 4px / bisa ketiban css lain */
    align-content: start !important;   /* cegah grid menyebar vertikal */
    margin-top: 10px;                  /* opsional: sedikit rapat dari atas */
    margin-bottom: 8px;                /* opsional: rapatkan ke elemen bawah */
  }

  .pkj-jodoh-page .pkj-weton-form :is(.pkj-btn-gold, .pkj-weton-form__btn){
    /* naikkan tombol sedikit agar lebih dekat ke input */
    margin-top: -2px !important;
  }
}