/* =========================================================
   ZENNIT — Paket Proyek Portofolio (/proyek-portofolio)
   Memakai kerangka rumus.css (rx-wrap, rx-hero, rx-btn, rx-cta).
   ========================================================= */
.pp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-12);align-items:center}
.pp-hero h1{margin-top:0}
.pp-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-8)}
.pp-ghost{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;color:var(--green-700);text-decoration:underline;text-underline-offset:4px}
.pp-facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-6)}
.pp-facts li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);font-weight:500;color:var(--gray-700)}
.pp-facts svg{color:var(--green-500)}
.pp-hero-shot{margin:0;transform:rotate(2deg)}
.pp-hero-shot img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);border:1px solid var(--gray-200)}

.pp-body{padding-top:var(--sp-12);padding-bottom:var(--sp-16)}
.pp-flash{background:var(--gold-soft);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);color:#5c3d00;margin-bottom:var(--sp-6)}
.pp-section{margin-top:var(--sp-16);scroll-margin-top:var(--sp-20)}
.pp-section:first-of-type{margin-top:0}
.pp-section h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text);margin-top:var(--sp-2);max-width:760px}
.pp-section h2 span{color:var(--green-500)}

.pp-isi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-8)}
.pp-isi-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5)}
.pp-isi-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--green-50);color:var(--green-600)}
.pp-isi-item b{display:block;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);margin-top:var(--sp-3)}
.pp-isi-item p{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700);margin-top:var(--sp-1)}

.pp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-8)}
.pp-project{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.pp-project img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;border-bottom:1px solid var(--gray-200);background:var(--gray-100)}
.pp-project-body{padding:var(--sp-5)}
.pp-no{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gray-500)}
.pp-project h3{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--text);margin-top:var(--sp-1)}
.pp-project p{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700);margin-top:var(--sp-2)}
.pp-tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.pp-tags li{font-size:var(--fs-xs);font-weight:600;color:var(--green-800);background:var(--green-50);border:1px solid var(--green-100);border-radius:99px;padding:2px var(--sp-3)}

.pp-steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-8)}
.pp-steps li{counter-increment:step;display:flex;flex-direction:column;gap:var(--sp-1);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5)}
.pp-steps li::before{content:counter(step);font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;color:var(--green-400)}
.pp-steps b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.pp-steps span{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--gray-700)}

.pp-prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-8);align-items:stretch}
.pp-price{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-6) var(--sp-5)}
.pp-price>b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug);color:var(--text)}
.pp-amount{margin-top:auto;padding-top:var(--sp-3)}
.pp-amount s{font-size:var(--fs-sm);color:var(--gray-400);margin-right:var(--sp-1)}
.pp-amount strong{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;color:var(--text)}
.pp-price small{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-700)}
.pp-buy{display:inline-flex;justify-content:center;border:1px solid var(--green-700);color:var(--green-800);border-radius:12px;padding:var(--sp-2) var(--sp-4);font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;transition:background .2s}
.pp-buy:hover{background:var(--green-50)}
.pp-price.is-bundle{background:var(--green-900);border-color:var(--green-900);color:var(--white)}
.pp-price.is-bundle>b,.pp-price.is-bundle .pp-amount strong{color:var(--white)}
.pp-price.is-bundle .pp-no,.pp-price.is-bundle small{color:rgba(255,255,255,.75)}
.pp-price.is-bundle .rx-btn{background:var(--gold);color:var(--green-900)}
.pp-badge{position:absolute;top:calc(var(--sp-3) * -1);right:var(--sp-4);background:var(--gold);color:var(--green-900);font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;border-radius:99px;padding:2px var(--sp-3)}
.pp-owned{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:600;color:var(--green-600)}
.pp-price.is-bundle .pp-owned{color:var(--green-400)}
.pp-note{font-size:var(--fs-md);color:var(--gray-700);margin-top:var(--sp-4)}
.pp-note a{color:var(--green-700);font-weight:600}

.pp-sample{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-8);align-items:center;background:var(--green-50);border:1px dashed var(--green-400);border-radius:var(--radius-md);padding:var(--sp-8)}
.pp-sample h2{font-size:var(--fs-3xl)}
.pp-sample p{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-3)}
.pp-sample-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.pp-sample-btn{display:flex;align-items:center;gap:var(--sp-2);background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);font-weight:600;color:var(--green-800);transition:border-color .2s}
.pp-sample-btn:hover{border-color:var(--green-400)}
.pp-sample-list small{font-size:var(--fs-sm);color:var(--gray-500)}

.pp-faq{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-6);max-width:820px}
.pp-faq details{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:var(--sp-4) var(--sp-5)}
.pp-faq summary{cursor:pointer;font-family:var(--font-display);font-size:var(--fs-base);font-weight:600;color:var(--text)}
.pp-faq p{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-2)}

@media(max-width:1000px){
  .pp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .pp-hero-shot{max-width:320px;margin:0 auto}
  .pp-isi,.pp-projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-steps,.pp-prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-sample{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .pp-isi,.pp-projects,.pp-steps,.pp-prices{grid-template-columns:minmax(0,1fr)}
  .pp-sample{padding:var(--sp-5)}
}