/* ==========================================================================
   1. WRAPPER UTAMA
   ========================================================================== */

.pnbyw-profil-wrap{
  position:relative;
  isolation:isolate;
  overflow:visible;
  padding:0;
  margin:0;
  background:transparent;
}

.pnbyw-profil-wrap::before,
.pnbyw-profil-wrap::after{
  content:none !important;
  display:none !important;
}

/* Judul internal disembunyikan karena judul halaman sudah ada */
.pnbyw-profil-heading{
  display:none !important;
}


/* ==========================================================================
   2. DAFTAR CARD
   ========================================================================== */

.pnbyw-profil-list{
  position:relative;
  z-index:2;
  display:grid;
  gap:16px;
}


/* ==========================================================================
   3. GROUP TITLE / JUDUL SUB BAGIAN
   ========================================================================== */

.pnbyw-profil-group-title{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  width:100%;
  margin:18px 0 12px;
  padding:8px 10px;

  text-align:center;
  color:#9a2109;
  font-size:1.15rem;
  font-weight:850;
  line-height:1.3;
  letter-spacing:-.01em;

  background:transparent;
  border:0;
  box-shadow:none;
}

.pnbyw-profil-group-title::before,
.pnbyw-profil-group-title::after{
  content:'';
  display:block;
  width:56px;
  height:2px;
  flex:0 0 auto;
  border-radius:999px;
}

.pnbyw-profil-group-title::before{
  background:linear-gradient(90deg, transparent, #d4a017);
}

.pnbyw-profil-group-title::after{
  background:linear-gradient(90deg, #d4a017, transparent);
}


/* ==========================================================================
   4. CARD PROFIL — BACKGROUND MA DI DALAM CARD
   ========================================================================== */

.pnbyw-profil-card{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:18px;
  align-items:center;

  padding:18px;
  border-radius:16px;

  border:1px solid rgba(226,215,201,.95);
  border-left:3px solid #d4a017;

  background-color:#fcfaf6;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 2px 10px rgba(0,0,0,.035),
    0 10px 24px rgba(154,33,9,.03);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.pnbyw-profil-card:hover{
  transform:translateY(-2px);
  border-color:rgba(154,33,9,.18);
  border-left-color:#9a2109;
  box-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 10px 24px rgba(154,33,9,.08);
}

/* Background gedung MA berada di dalam card */
.pnbyw-profil-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.86) 38%,
      rgba(255,255,255,.74) 62%,
      rgba(255,248,238,.58) 100%
    ),
    url("../../images/MA.png") right center / 44% auto no-repeat;
}

/* Ornamen halus di dalam card */
.pnbyw-profil-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 94% 18%, rgba(212,160,23,.09) 0%, transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(154,33,9,.035) 0%, transparent 28%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(154,33,9,.008) 41px,
      rgba(154,33,9,.008) 42px
    );
}

/* Semua isi card harus berada di atas background */
.pnbyw-profil-photo,
.pnbyw-profil-content{
  position:relative;
  z-index:2;
}


/* ==========================================================================
   5. FOTO PROFIL
   ========================================================================== */

.pnbyw-profil-photo{
  width:120px;
  height:148px;

  padding:0;
  margin:0;
  overflow:hidden;
  line-height:0;

  border-radius:12px;
  background:#fff;
  border:1px solid rgba(154,33,9,.10);

  box-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 6px 16px rgba(0,0,0,.06);
}

.pnbyw-profil-photo img,
.pnbyw-profil-photo img.aligncenter,
.pnbyw-profil-photo img.size-medium,
.pnbyw-profil-photo img.size-large,
.pnbyw-profil-photo .wp-image{
  display:block !important;

  width:100% !important;
  height:100% !important;
  max-width:none !important;
  min-width:100% !important;
  min-height:100% !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;

  object-fit:cover !important;
  object-position:center top !important;

  background:#fff !important;
  opacity:1 !important;
}

.pnbyw-profil-photo-empty{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#9a2109;
  background:#fff7f2;

  font-size:28px;
  font-weight:800;
  line-height:1;
}


/* ==========================================================================
   6. KONTEN PROFIL
   ========================================================================== */

.pnbyw-profil-content{
  min-width:0;
}

.pnbyw-profil-name{
  display:block;

  margin:0 0 12px;
  padding:0;
  border:0;

  color:#9a2109;
  font-size:1.12rem;
  font-weight:850;
  line-height:1.3;
  letter-spacing:-.01em;
}

/* Jika editor masih menyisakan h2, tampilannya dinormalkan.
   Tetap disarankan HTML final memakai div.pnbyw-profil-name. */
.pnbyw-profil-content h2.pnbyw-profil-name{
  margin:0 0 12px !important;
  padding:0 !important;
  border:0 !important;
  font-size:1.12rem !important;
  line-height:1.3 !important;
}


/* ==========================================================================
   7. DATA PROFIL — FIELD SEJAJAR
   ========================================================================== */

.pnbyw-profil-data{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 12px;
}

.pnbyw-profil-row{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:10px;
  align-items:center;

  min-height:46px;
  padding:9px 12px;

  background:rgba(255,255,255,.78);
  border:1px solid rgba(229,220,208,.92);
  border-radius:10px;

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.pnbyw-profil-row span{
  display:block;

  color:#2f3541;
  font-size:12px;
  font-weight:700;
  line-height:1.35;

  white-space:nowrap;
}

.pnbyw-profil-row strong{
  display:block;

  color:#374151;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  text-align:left;

  overflow-wrap:anywhere;
}

/* Unit Kerja full lebar agar tidak sempit */
.pnbyw-profil-row:nth-child(5){
  grid-column:1 / -1;
  grid-template-columns:140px minmax(0,1fr);
}


/* ==========================================================================
   8. VARIASI TIPE HALAMAN
   ========================================================================== */

.pnbyw-profil-hakim .pnbyw-profil-card{
  border-left-color:#d4a017;
}

.pnbyw-profil-kepaniteraan .pnbyw-profil-card{
  border-left-color:#b98521;
}

.pnbyw-profil-kesekretariatan .pnbyw-profil-card{
  border-left-color:#c4942e;
}

.pnbyw-profil-cpns .pnbyw-profil-card{
  border-left-color:#d4a017;
}


/* ==========================================================================
   9. KOMPATIBILITAS CONTENT WORDPRESS
   ========================================================================== */

.entry-content .pnbyw-profil-wrap img,
.page .pnbyw-profil-wrap img,
.pnbyw-single-content .pnbyw-profil-wrap img{
  max-width:none !important;
}

.entry-content .pnbyw-profil-wrap p,
.page .pnbyw-profil-wrap p,
.pnbyw-single-content .pnbyw-profil-wrap p{
  text-align:inherit;
}

.pnbyw-profil-wrap table,
.pnbyw-profil-wrap tbody,
.pnbyw-profil-wrap tr,
.pnbyw-profil-wrap td,
.pnbyw-profil-wrap th{
  border:0 !important;
}


/* ==========================================================================
   10. RESPONSIVE TABLET
   ========================================================================== */

@media (max-width:900px){
  .pnbyw-profil-card{
    grid-template-columns:100px minmax(0,1fr);
    gap:14px;
    padding:16px;
  }

  .pnbyw-profil-card::before{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.88) 45%,
        rgba(255,252,246,.72) 100%
      ),
      url("../../images/MA.png") right center / 46% auto no-repeat;
  }

  .pnbyw-profil-photo{
    width:100px;
    height:126px;
  }

  .pnbyw-profil-data{
    grid-template-columns:1fr;
  }

  .pnbyw-profil-row,
  .pnbyw-profil-row:nth-child(5){
    grid-template-columns:140px minmax(0,1fr);
    grid-column:auto;
  }
}


/* ==========================================================================
   11. RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width:640px){
  .pnbyw-profil-list{
    gap:13px;
  }

  .pnbyw-profil-group-title{
    margin:16px 0 10px;
    font-size:1rem;
  }

  .pnbyw-profil-group-title::before,
  .pnbyw-profil-group-title::after{
    width:34px;
  }

  .pnbyw-profil-card{
    grid-template-columns:1fr;
    text-align:center;
    padding:16px;
  }

  .pnbyw-profil-card::before{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,252,247,.82) 100%
      ),
      url("../../images/MA.png") center bottom / 78% auto no-repeat;
  }

  .pnbyw-profil-photo{
    width:120px;
    height:148px;
    margin:0 auto;
  }

  .pnbyw-profil-name{
    text-align:center;
  }

  .pnbyw-profil-data{
    grid-template-columns:1fr;
    text-align:left;
  }

  .pnbyw-profil-row,
  .pnbyw-profil-row:nth-child(5){
    grid-template-columns:125px minmax(0,1fr);
    grid-column:auto;
    background:rgba(255,255,255,.82);
  }
}

@media (max-width:420px){
  .pnbyw-profil-card{
    padding:14px;
  }

  .pnbyw-profil-row,
  .pnbyw-profil-row:nth-child(5){
    grid-template-columns:1fr;
    align-items:start;
    gap:4px;
  }

  .pnbyw-profil-row span{
    white-space:normal;
  }

  .pnbyw-profil-row span,
  .pnbyw-profil-row strong{
    font-size:11px;
  }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .pnbyw-profil-card{
    transition:none;
  }

  .pnbyw-profil-card:hover{
    transform:none;
  }
}