/* =========================================================
   BAGIAN 23 — UI UPGRADE PESERTA PUBLIK / CANDIDATE SHOWCASE
========================================================= */

:root{
  --showcase-navy:#0b2a67;
  --showcase-navy-2:#163f91;
  --showcase-gold:#d8ad52;
  --showcase-paper:#f6f9ff;
  --showcase-text:#14223a;
  --showcase-muted:#61708a;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.peserta-showcase-page{
  background:
    radial-gradient(circle at 8% 12%,rgba(42,110,225,.12),transparent 24%),
    radial-gradient(circle at 90% 12%,rgba(216,173,82,.12),transparent 20%),
    linear-gradient(180deg,#f8fbff 0%,#edf4fc 100%);
  background-attachment:fixed;
}

.showcase-hero{
  position:relative;
  overflow:hidden;
  padding:42px 0 26px;
}

.showcase-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 20%,rgba(216,173,82,.17),transparent 16%),
    radial-gradient(circle at 18% 24%,rgba(31,92,199,.11),transparent 24%);
  pointer-events:none;
}

.showcase-hero-inner{
  width:min(1380px,calc(100% - 36px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);
  gap:26px;
  align-items:stretch;
}

.showcase-hero-copy,
.showcase-hero-panel{
  position:relative;
  z-index:1;
}

.showcase-hero-copy{
  padding:38px 0 14px;
}

.showcase-hero-copy .eyebrow,
.mini-label{
  margin:0 0 12px;
  color:var(--showcase-gold);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
}

.showcase-hero-copy h1{
  margin:0;
  color:var(--showcase-navy);
  font-size:clamp(2.8rem,6vw,5.8rem);
  line-height:.96;
  letter-spacing:-.05em;
}

.showcase-hero-copy .lead{
  max-width:720px;
  margin:18px 0 0;
  color:var(--showcase-muted);
  font-size:1.02rem;
  line-height:1.8;
}

.showcase-stat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.showcase-stat-box{
  position:relative;
  overflow:hidden;
  padding:18px 18px 16px;
  border:1px solid rgba(11,42,103,.08);
  border-radius:20px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 38px rgba(8,35,82,.06);
}

.showcase-stat-box::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:94px;
  height:94px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(216,173,82,.20),transparent 68%);
  transform:translate(34px,-32px);
}

.showcase-stat-box span{
  position:relative;
  z-index:1;
  display:block;
  color:var(--showcase-muted);
  font-size:.8rem;
  font-weight:700;
}

.showcase-stat-box strong{
  position:relative;
  z-index:1;
  display:block;
  margin-top:6px;
  color:var(--showcase-navy);
  font-size:2.2rem;
  line-height:1;
  letter-spacing:-.04em;
}

.showcase-hero-panel{
  min-height:100%;
}

.showcase-panel-glow{
  position:absolute;
  inset:18px 24px 20px 24px;
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 16%,rgba(216,173,82,.25),transparent 16%),
    linear-gradient(135deg,#071c48,#0b2a67 45%,#2167d1 100%);
  box-shadow:0 26px 64px rgba(11,42,103,.18);
}

.showcase-panel-glow::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.1;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.2px),
    linear-gradient(45deg,rgba(216,173,82,.24) 1px,transparent 1px);
  background-size:16px 16px,78px 78px;
  border-radius:34px;
}

.showcase-panel-card{
  position:absolute;
  left:48px;
  right:48px;
  bottom:42px;
  z-index:2;
  padding:26px 24px 22px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:26px;
  background:rgba(255,255,255,.86);
  box-shadow:0 18px 46px rgba(5,22,56,.16);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.panel-label{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:#edf4ff;
  color:var(--showcase-gold);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.showcase-panel-card h2{
  margin:14px 0 8px;
  color:var(--showcase-navy);
  font-size:clamp(1.6rem,2.8vw,2.5rem);
  line-height:1.1;
}

.showcase-panel-card p{
  margin:0;
  color:var(--showcase-muted);
  line-height:1.7;
}

.panel-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.panel-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid #dce6f4;
  background:#fff;
  color:var(--showcase-navy);
  font-size:.72rem;
  font-weight:800;
}

.showcase-shell{
  padding-top:30px;
}

.showcase-head{
  margin-bottom:24px;
}

.showcase-counter{
  padding:10px 14px;
  font-size:.82rem;
  box-shadow:0 10px 24px rgba(23,85,177,.08);
}

.showcase-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  margin-bottom:24px;
  border:1px solid rgba(11,42,103,.075);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(8,35,82,.06);
}

.showcase-filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter-pill{
  border:1px solid #d6e1f1;
  background:#fff;
  color:var(--showcase-navy);
  padding:11px 16px;
  border-radius:999px;
  font-family:inherit;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  transition:all .22s ease;
}

.filter-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(23,85,177,.10);
}

.filter-pill.active{
  border-color:transparent;
  background:linear-gradient(135deg,#0b2a67,#1755b1);
  color:#fff;
  box-shadow:0 12px 26px rgba(23,85,177,.18);
}

.showcase-search-wrap{
  flex:0 1 360px;
}

.showcase-search{
  width:100%;
  padding:13px 16px;
  border:1px solid #d6e1f1;
  border-radius:15px;
  background:#fff;
  color:var(--showcase-text);
  font:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.showcase-search:focus{
  border-color:#8fb0ec;
  box-shadow:0 0 0 4px rgba(23,85,177,.10);
}

.showcase-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.showcase-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(11,42,103,.08);
  border-radius:28px;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 48px rgba(7,31,80,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.showcase-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -65px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(23,85,177,.12),transparent 68%);
  pointer-events:none;
}

.showcase-card:hover{
  transform:translateY(-8px);
  border-color:rgba(23,85,177,.18);
  box-shadow:0 28px 68px rgba(7,31,80,.14);
}

.showcase-photo-wrap{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(216,173,82,.22),transparent 22%),
    linear-gradient(145deg,#eef4fe,#f8fbff);
}

.showcase-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,29,73,.02) 45%,rgba(7,29,73,.16) 100%);
  pointer-events:none;
}

.showcase-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.showcase-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  background:
    radial-gradient(circle at 72% 22%,rgba(216,173,82,.25),transparent 24%),
    linear-gradient(145deg,#0a255d,#1650a4);
  color:#fff;
  text-align:center;
}

.showcase-placeholder span{
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.18em;
}

.showcase-placeholder small{
  margin-top:8px;
  opacity:.78;
  font-size:.65rem;
  letter-spacing:.16em;
}

.showcase-topbar{
  position:absolute;
  inset:14px 14px auto 14px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.showcase-badge,
.showcase-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.showcase-badge{
  background:rgba(7,29,73,.84);
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.12em;
}

.showcase-number{
  background:rgba(255,255,255,.92);
  color:var(--showcase-navy);
  font-size:.68rem;
  font-weight:900;
  box-shadow:0 10px 20px rgba(7,31,80,.12);
}

.showcase-card-body{
  position:relative;
  padding:18px 18px 20px;
}

.showcase-role{
  display:block;
  color:var(--showcase-gold);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.showcase-card-body h3{
  margin:8px 0 4px;
  color:var(--showcase-navy);
  font-size:1.15rem;
  line-height:1.2;
}

.showcase-class{
  margin:0;
  color:var(--showcase-muted);
  font-size:.9rem;
}

.showcase-meta-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}

.showcase-mini-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--showcase-muted);
  font-size:.78rem;
  font-weight:700;
}

.showcase-mini-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2eb46f;
  box-shadow:0 0 0 5px rgba(46,180,111,.12);
}

.showcase-detail-btn{
  border:0;
  background:#edf4ff;
  color:var(--showcase-navy);
  padding:10px 12px;
  border-radius:12px;
  font-family:inherit;
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
  transition:all .2s ease;
}

.showcase-detail-btn:hover{
  background:var(--showcase-navy);
  color:#fff;
}

.empty-state.showcase-empty{
  grid-column:1 / -1;
  padding:40px 26px;
  border-radius:26px;
  text-align:center;
}

/* Modal */
.candidate-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
}

.candidate-modal.open{
  display:block;
}

.candidate-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,25,59,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.candidate-modal-dialog{
  position:relative;
  width:min(940px,calc(100% - 32px));
  max-height:min(88vh,760px);
  margin:5vh auto 0;
  overflow:auto;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  box-shadow:0 30px 100px rgba(7,31,80,.28);
}

.candidate-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--showcase-navy);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(7,31,80,.10);
}

.candidate-modal-layout{
  display:grid;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr);
}

.candidate-modal-photo{
  min-height:540px;
  background:
    radial-gradient(circle at 76% 18%,rgba(216,173,82,.26),transparent 22%),
    linear-gradient(145deg,#0b2a67,#1755b1);
}

.candidate-modal-photo img,
.candidate-modal-photo .showcase-placeholder{
  width:100%;
  height:100%;
  object-fit:cover;
}

.candidate-modal-content{
  padding:46px 42px 34px;
}

.candidate-modal-tag{
  margin:0;
  color:var(--showcase-gold);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
}

.candidate-modal-content h3{
  margin:12px 0 6px;
  color:var(--showcase-navy);
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1;
}

.candidate-modal-subtitle{
  margin:0;
  color:var(--showcase-muted);
  font-size:1rem;
}

.candidate-modal-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}

.meta-box{
  padding:16px 15px;
  border:1px solid #e2e9f4;
  border-radius:18px;
  background:#f8fbff;
}

.meta-box span{
  display:block;
  color:var(--showcase-muted);
  font-size:.76rem;
  font-weight:700;
}

.meta-box strong{
  display:block;
  margin-top:8px;
  color:var(--showcase-navy);
  font-size:1rem;
  line-height:1.3;
}

.candidate-modal-note{
  margin-top:22px;
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(216,173,82,.12),transparent 25%),
    #f3f7fe;
}

.candidate-modal-note span{
  color:var(--showcase-gold);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
}

.candidate-modal-note p{
  margin:10px 0 0;
  color:var(--showcase-muted);
  line-height:1.8;
}

@media (max-width: 1180px){
  .showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .showcase-hero-inner{grid-template-columns:1fr;}
  .showcase-hero-copy{padding-bottom:0;}
  .showcase-hero-panel{min-height:420px;}
}

@media (max-width: 900px){
  .showcase-toolbar{flex-direction:column;align-items:stretch;}
  .showcase-search-wrap{flex-basis:auto;}
  .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .candidate-modal-layout{grid-template-columns:1fr;}
  .candidate-modal-photo{min-height:360px;}
  .candidate-modal-content{padding:30px 24px 24px;}
}

@media (max-width: 640px){
  .showcase-hero{padding-top:22px;}
  .showcase-hero-inner,
  .results-shell{width:min(100% - 24px,1380px);}
  .showcase-stat-row{grid-template-columns:1fr;}
  .showcase-panel-card{left:18px;right:18px;bottom:18px;padding:20px 18px;}
  .showcase-panel-glow{inset:0;}
  .showcase-head{align-items:flex-start;}
  .showcase-grid{grid-template-columns:1fr;gap:18px;}
  .candidate-modal-dialog{width:min(100% - 18px,940px);margin-top:2.2vh;border-radius:24px;}
  .candidate-modal-meta{grid-template-columns:1fr;}
}

.showcase-detail-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}