/* ============================================
   PPDB LANDING PAGE — extends shared.css
   ============================================ */

/* ---------- HERO ---------- */
.ppdb-hero{
  position:relative;overflow:hidden;
  background:var(--green-deep);
  padding:52px 0 96px;
}
.ppdb-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(560px 420px at 88% -10%, rgba(255,138,46,0.18), transparent 60%),
    radial-gradient(420px 420px at -6% 110%, rgba(75,135,37,0.35), transparent 60%);
  pointer-events:none;
}
.ppdb-hero .wrap{position:relative;z-index:2;}
.ppdb-hero-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
}
.ppdb-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,138,46,0.14);border:1px solid rgba(255,138,46,0.4);
  color:#FFC98C;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;margin-bottom:20px;
}
.ppdb-badge::before{content:"●";color:var(--orange);font-size:9px;}
.ppdb-hero h1{
  color:#fff;font-size:clamp(32px,4.4vw,50px);max-width:600px;margin-top:0;
}
.ppdb-hero h1 em{font-style:normal;color:#FFC98C;}
.ppdb-hero p.lead{color:#D9E4CE;font-size:16.5px;max-width:520px;margin-top:18px;}
.ppdb-cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn-download{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;border:1px solid rgba(255,255,255,0.35);color:#fff;
  background:rgba(255,255,255,0.06);transition:all .25s ease;
}
.btn-download:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.6);transform:translateY(-2px);}
.btn-download svg{flex:none;}
.ppdb-stat-strip{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap;}
.ppdb-stat-strip .stat b{display:block;font-family:'Fraunces',serif;color:#fff;font-size:26px;}
.ppdb-stat-strip .stat span{display:block;color:#B9C8A9;font-size:12.5px;margin-top:2px;}

.ppdb-hero-art{
  position:relative;
  aspect-ratio:4/5;
  display:flex;align-items:flex-end;justify-content:center;
  isolation:isolate;
}
.ppdb-hero-blob{
  position:absolute;
  inset:4% 4% 0 4%;
  bottom:6%;
  background:
    radial-gradient(120% 120% at 30% 20%, #5C9C31 0%, var(--green) 45%, var(--green-deep) 100%);
  border-radius:46% 54% 58% 42% / 55% 45% 55% 45%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
  animation:ppdbBlobMove 9s ease-in-out infinite;
  z-index:0;
}
@keyframes ppdbBlobMove{
  0%,100%{border-radius:46% 54% 58% 42% / 55% 45% 55% 45%;}
  50%{border-radius:58% 42% 46% 54% / 45% 55% 45% 55%;}
}
.ppdb-hero-ring{
  position:absolute;
  inset:-5%;
  border:2px dashed rgba(255,255,255,0.25);
  border-radius:50%;
  z-index:0;
}
.ppdb-hero-dots{
  position:absolute;top:2%;right:4%;
  width:70px;height:70px;
  background-image:radial-gradient(var(--orange) 2.5px, transparent 2.5px);
  background-size:12px 12px;
  opacity:0.55;z-index:0;
}
.ppdb-hero-photo{
  position:relative;z-index:2;
  width:98%;
  max-width:480px;
  clip-path:inset(0 0 0 0 round 0 0 48% 48%);
  filter:drop-shadow(0 30px 24px rgba(0,0,0,0.45));
  animation:ppdbFloaty 4.5s ease-in-out infinite;
}
.ppdb-hero-photo img{width:100%;height:auto;object-fit:contain;display:block;}
@keyframes ppdbFloaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.ppdb-ground-shadow{
  position:absolute;
  bottom:2%;left:50%;
  transform:translateX(-50%);
  width:52%;height:22px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 72%);
  z-index:1;
  animation:ppdbShrinkGrow 4.5s ease-in-out infinite;
}
@keyframes ppdbShrinkGrow{
  0%,100%{transform:translateX(-50%) scale(1);opacity:0.8;}
  50%{transform:translateX(-50%) scale(0.82);opacity:0.5;}
}
.ppdb-arch-photo{
  border-radius:200px 200px 24px 24px;overflow:hidden;
  border:6px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
  aspect-ratio:3/4;
}
.ppdb-arch-photo img{width:100%;height:100%;object-fit:cover;}
.ppdb-hero-chip{
  position:absolute;bottom:-22px;left:-22px;
  background:#fff;border-radius:18px;padding:16px 20px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;max-width:230px;
  z-index:3;
}
.ppdb-hero-chip .dot{
  width:42px;height:42px;border-radius:50%;background:var(--orange);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;
}
.ppdb-hero-chip span{font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.35;}

@media(max-width:900px){
  .ppdb-hero-grid{grid-template-columns:1fr;gap:44px;}
  .ppdb-hero-art{max-width:340px;margin:0 auto;}
  .ppdb-stat-strip{gap:24px;}
}

/* ---------- BROSUR PEEK CAROUSEL ---------- */
.brosur-section{padding:72px 0;}
.brosur-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px;flex-wrap:wrap;}
.brosur-scroll{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;margin:0 -4px;
}
.brosur-scroll::-webkit-scrollbar{height:6px;}
.brosur-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
.brosur-slide{
  flex:0 0 auto;width:min(78vw,320px);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff;
}
.brosur-slide img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;}
.brosur-download-box{
  margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--green-soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;
}
.brosur-download-box p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:420px;}
.brosur-download-box strong{display:block;font-family:'Fraunces',serif;color:var(--green-deep);font-size:19px;margin-bottom:4px;}
.btn-download-solid{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;background:var(--green-deep);color:#fff;flex:none;transition:transform .25s ease;
}
.btn-download-solid:hover{transform:translateY(-2px);background:var(--green);}

/* ---------- DATA / PRESTASI ---------- */
.data-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
}
.data-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;
}
.data-card b{display:block;font-family:'Fraunces',serif;color:var(--orange-deep);font-size:34px;}
.data-card span{display:block;font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}
.data-source{font-size:12px;color:var(--ink-soft);margin-top:16px;text-align:right;}

/* ---------- TESTIMONI CARD ---------- */
.testi-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;box-shadow:var(--shadow);
}
.testi-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.testi-card p{font-size:15.5px;color:var(--ink);margin:0 0 12px;font-style:italic;}
.testi-card strong{font-family:'Fraunces',serif;color:var(--green-deep);}
.testi-card .role{display:block;font-size:13px;color:var(--ink-soft);}

/* ---------- KUOTA / CTA BANNER ---------- */
.quota-banner{
  background:var(--green-deep);border-radius:28px;padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.quota-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 300px at 50% 0%, rgba(255,138,46,0.2), transparent 65%);
}
.quota-banner *{position:relative;z-index:2;}
.quota-banner .eyebrow{justify-content:center;color:#E8C888;}
.quota-banner .eyebrow::before{background:var(--gold);}
.quota-banner h2{color:#fff;margin-top:12px;}
.quota-banner p{color:#D9E4CE;margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;}
.quota-banner .hadith{font-size:13.5px;color:#B9C8A9;margin-top:24px;font-style:italic;}
.quota-banner .ppdb-cta-row{justify-content:center;margin-top:26px;}

/* ---------- BIAYA PENDIDIKAN BANNER ---------- */
.biaya-banner{
  background:var(--green-deep);border-radius:28px;padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.biaya-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 300px at 50% 0%, rgba(255,138,46,0.2), transparent 65%);
}
.biaya-banner *{position:relative;z-index:2;}
.biaya-banner .eyebrow{justify-content:center;color:#E8C888;}
.biaya-banner .eyebrow::before{background:var(--gold);}
.biaya-banner h2{color:#fff;margin-top:12px;}
.biaya-banner p{color:#D9E4CE;margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;}
.biaya-banner button.btn-primary{margin-top:26px;border:none;font-family:inherit;cursor:pointer;}

/* ---------- BIAYA PENDIDIKAN MODAL ---------- */
.biaya-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,30,15,0.65);
  z-index:500;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.biaya-modal-overlay.active{display:flex;}
.biaya-modal{
  background:#fff;border-radius:20px;max-width:640px;width:100%;position:relative;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);overflow:hidden;
}
.biaya-modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,0.06);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:var(--ink);z-index:5;
}
.biaya-modal-close:hover{background:rgba(0,0,0,0.12);}
.biaya-modal-head{
  background:linear-gradient(120deg,#EAF2E3 0%, #fff 60%);padding:28px 28px 18px;
  display:flex;align-items:center;gap:14px;
}
.biaya-modal-head img{width:52px;height:52px;object-fit:contain;flex:none;}
.biaya-modal-head div strong{display:block;font-family:'Fraunces',serif;font-size:17px;color:var(--green-deep);}
.biaya-modal-head div span{font-size:12.5px;color:var(--ink-soft);}
.biaya-modal-title{
  background:var(--green-deep);color:#fff;text-align:center;font-weight:700;font-size:13.5px;
  letter-spacing:.03em;padding:14px;margin:0 28px 18px;border-radius:10px;
}
.biaya-modal-body{padding:0 28px 28px;}
.biaya-modal-body .biaya-image{border-radius:14px;}
.biaya-image{display:block;width:100%;height:auto;}
.biaya-download-row{display:flex;justify-content:center;margin-top:18px;}
.biaya-download-row .btn-download-solid{padding:12px 22px;font-size:14px;}
.biaya-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.biaya-table th{
  background:var(--gold);color:#fff;text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
}
.biaya-table th:first-child{border-radius:8px 0 0 0;text-align:center;width:40px;}
.biaya-table th:last-child{border-radius:0 8px 0 0;text-align:right;}
.biaya-table td{padding:9px 12px;border-bottom:1px solid var(--line);}
.biaya-table td:first-child{text-align:center;color:var(--ink-soft);}
.biaya-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.biaya-table tr:nth-child(even) td{background:#FAF7F0;}
.biaya-total{
  display:flex;justify-content:space-between;background:var(--green-deep);color:#fff;
  padding:12px 16px;border-radius:8px;margin-top:2px;font-weight:700;font-size:14px;
}
.biaya-note{font-size:11.5px;color:var(--ink-soft);margin-top:12px;}
.biaya-ketentuan{margin-top:16px;}
.biaya-ketentuan strong{display:block;color:var(--green-deep);font-size:13.5px;margin-bottom:6px;}
.biaya-ketentuan ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:12.5px;line-height:1.65;}
.biaya-modal-foot{
  background:var(--green-deep);color:#fff;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.biaya-modal-foot span{font-size:12px;color:#C9D8BC;}
.biaya-modal-foot strong{font-size:17px;font-family:'Fraunces',serif;}
@media(max-width:520px){
  .biaya-modal-head{flex-direction:column;text-align:center;}
  .biaya-modal-foot{flex-direction:column;text-align:center;}
}
/* ---------- MAP ---------- */
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.map-embed iframe{width:100%;height:280px;border:0;display:block;}

/* ---------- BROSUR LIGHTBOX (klik foto brosur untuk zoom + geser) ---------- */
.brosur-slide{cursor:pointer;}
.brosur-slide img{transition:transform .3s ease;}
.brosur-slide:hover img{transform:scale(1.03);}
.brosur-lightbox-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,20,8,0.9);
  z-index:600;align-items:center;justify-content:center;padding:20px;
  touch-action:pan-y;
}
.brosur-lightbox-overlay.active{display:flex;}
.brosur-lightbox-stage{position:relative;max-width:min(560px,92vw);max-height:82vh;}
.brosur-lightbox-stage img{
  width:100%;height:100%;max-height:82vh;object-fit:contain;border-radius:14px;
  display:block;box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);user-select:none;-webkit-user-select:none;
}
.brosur-lightbox-counter{
  position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;background:rgba(255,255,255,0.14);padding:6px 16px;border-radius:999px;
  white-space:nowrap;
}
.brosur-lightbox-close{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.14);border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s ease;
}
.brosur-lightbox-close:hover{background:rgba(255,255,255,0.28);}
.brosur-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.14);border:none;color:#fff;
  font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;
  transition:background .2s ease;
}
.brosur-lightbox-nav:hover{background:var(--orange);}
.brosur-lightbox-nav.prev{left:16px;}
.brosur-lightbox-nav.next{right:16px;}
@media(max-width:640px){
  .brosur-lightbox-nav{width:40px;height:40px;font-size:20px;}
  .brosur-lightbox-nav.prev{left:6px;}
  .brosur-lightbox-nav.next{right:6px;}
}

/* ============================================
   LANDING PAGE PPDB v2 — komponen tambahan
   (accordion, checklist, carousel alumni, stat-bar)
   ============================================ */

/* ---------- ACCORDION (FAQ, Program/Kurikulum/Persyaratan/Jadwal/Biaya) ---------- */
.accordion{display:flex;flex-direction:column;gap:12px;}
.accordion-item{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:box-shadow .25s ease, border-color .25s ease;
}
.accordion-item[open]{box-shadow:var(--shadow);border-color:transparent;}
.accordion-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;color:var(--green-deep);
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .25s ease;
}
.accordion-item[open] summary::after{transform:rotate(-135deg);}
.accordion-body{padding:0 24px 24px;color:var(--ink-soft);font-size:14.5px;line-height:1.7;}
.accordion-body p{margin:0 0 12px;}
.accordion-body p:last-child{margin-bottom:0;}
.accordion-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.accordion-sub{font-weight:700;color:var(--green-deep);font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;margin:14px 0 8px;}
.accordion-sub:first-child{margin-top:0;}

/* ---------- CHECKLIST GRID (alasan memilih, program unggulan, dsb) ---------- */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.check-item{
  display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.check-item:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green);}
.check-item .num{
  flex:none;width:40px;height:40px;border-radius:12px;background:var(--green-soft);
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
}
@media(max-width:600px){
  .check-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px;}
  .check-item{flex-direction:column;text-align:center;gap:8px;padding:14px 10px;font-size:12.5px;line-height:1.35;}
  .check-item .num{width:34px;height:34px;font-size:16px;border-radius:10px;}
}
@media(max-width:360px){
  .check-item{font-size:11.5px;padding:12px 8px;}
  .check-item .num{width:30px;height:30px;font-size:14px;}
}

/* ---------- KEUNGGULAN / REASON CARD DENGAN ICON ---------- */
.reason-card .reason-num{margin-bottom:16px;}
.reason-card .reason-num svg{display:block;}

/* ---------- TAB GENERIK (independen dari .jenjang-tab/.jenjang-panel) ----------
   Dipakai untuk grup tab tingkat-atas (Prestasi tri-tab, Jenjang&Biaya tri-tab)
   supaya tidak mewarisi layout grid 2-kolom milik .jenjang-panel (khusus kartu prestasi). */
.tab-btn{padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink-soft);transition:.25s;}
.tab-btn.active{background:var(--green-deep);color:#fff;border-color:var(--green-deep);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- FOTO VM-GRID (rasio tetap, biar gak manjang) ----------
   Dipakai di semua foto dalam .vm-grid (Ekskul Preschool, Metode Pembelajaran SD/SMP, dll)
   supaya tidak ikut tinggi asli file foto (yang kadang portrait / rasio aneh). */
.vm-photo{aspect-ratio:4/3;}
.vm-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
@media(max-width:760px){.vm-photo{aspect-ratio:16/10;}}

/* ---------- KEUNGGULAN PROGRAM (versi non-kompetisi, preschool) ---------- */
.sorotan-card.light{
  background:#fff;border:1px solid var(--line);color:var(--ink);
}
.sorotan-card.light::after{display:none;}
.sorotan-card.light h4{color:var(--green-deep);}
.sorotan-card.light p{color:var(--ink-soft);}
.sorotan-card.light .tier-tag{background:var(--green-soft);color:var(--green-deep);}