/* PT Hasta Abadi Perkasa - shared page design for galeri.html & sertifikat.html */
:root{--hap-gold:#d4af37;--hap-bg:#0d0f12;--hap-panel:#14171d;--hap-line:#29313d;--hap-muted:#a9b5c6}
body.hap-subpage{background:var(--hap-bg)!important;color:#edf1f7!important;font-family:'Plus Jakarta Sans','Manrope',sans-serif}
body.hap-subpage h1,body.hap-subpage h2,body.hap-subpage h3{color:#fff!important}
.hap-gold{color:var(--hap-gold)!important}
.section-eyebrow{display:inline-flex;gap:9px;align-items:center;color:var(--hap-gold);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.hap-hero{position:relative;overflow:hidden;background:linear-gradient(108deg,#0d1117 0%,#151b25 56%,#2c2517 100%);border-bottom:1px solid var(--hap-line);padding:71px 0 75px}
.hap-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.27;background:radial-gradient(circle at 88% 45%,rgba(212,175,55,.32),transparent 35%),repeating-linear-gradient(135deg,transparent 0 50px,rgba(255,255,255,.025) 50px 51px)}
.certificates-hero{background:linear-gradient(112deg,#0d1117 0%,#181d26 65%,#28221b 100%)}
.hap-hero-content{position:relative;z-index:1}
.hap-hero .breadcrumb{margin:0 0 22px;font-size:13px}
.hap-hero .breadcrumb a{color:#c0c9d7;text-decoration:none}
.hap-hero .breadcrumb .active{color:var(--hap-gold)}
.hap-hero h1{font-size:clamp(34px,4.3vw,59px);line-height:1.2;letter-spacing:-1.6px;font-weight:800;margin:18px 0}
.hero-lead{color:#c2cede;font-size:16px;line-height:1.8;max-width:815px;margin:0}
.hero-badges{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.hero-badges span{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(212,175,55,.38);border-radius:40px;padding:10px 16px;background:rgba(17,20,26,.75);color:#e4e8f0;font-size:12px;font-weight:700}
.hero-badges i{color:var(--hap-gold);font-size:16px}
.page-section{padding:73px 0 86px}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:35px}
.section-intro h2{font-size:clamp(27px,3vw,39px);font-weight:800;margin:12px 0}
.section-intro p{color:var(--hap-muted);font-size:14px;line-height:1.7;margin:0}
.text-link{color:var(--hap-gold);font-size:13px;font-weight:800;white-space:nowrap;text-decoration:none;margin-bottom:4px}
.text-link:hover{color:#ffe099}
.gallery-card{display:flex;flex-direction:column;height:100%;background:var(--hap-panel);border:1px solid var(--hap-line);border-radius:17px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.gallery-photo{position:relative;height:262px;background:#171a1e;overflow:hidden}
.gallery-photo img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-tag{position:absolute;top:17px;left:17px;z-index:2;border-radius:25px;background:var(--hap-gold);padding:8px 15px;color:#121212;font-weight:800;font-size:12px}
.gallery-card-body{padding:26px;flex:1;display:flex;flex-direction:column;gap:0}
.gallery-card-body h3{font-size:19px!important;line-height:1.45;font-weight:800;margin:9px 0 14px}
.gallery-card-body p{color:var(--hap-muted);font-size:13.5px;line-height:1.85;flex:1;margin:0 0 25px}
.gallery-card-footer{margin-top:auto;border-top:1px solid var(--hap-line);padding-top:16px;color:#b6c3d0;font-size:12px;font-weight:600}
.gallery-card-footer i{color:var(--hap-gold)}
.process-step{position:relative}
.process-step .gallery-card{border-top:3px solid var(--hap-gold)}
.process-step .gallery-photo{cursor:default}
.process-step .gallery-photo img{transition:none!important;transform:none!important;cursor:default}
.step-label{display:inline-block;font-size:13px;font-weight:800;color:var(--hap-gold);letter-spacing:2px;margin-bottom:5px}
.production-flow{row-gap:40px!important}
@media(min-width:992px){.process-step[data-step="1"]:after,.process-step[data-step="2"]:after{content:'➜';position:absolute;right:-20px;top:49%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;background:var(--hap-gold);border:4px solid var(--hap-bg);border-radius:50%;color:#111;font-size:21px;z-index:4;pointer-events:none}}
@media(max-width:991.98px){.process-step[data-step="1"]:after,.process-step[data-step="2"]:after{content:'↓';position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);color:var(--hap-gold);font-size:27px;font-weight:800;z-index:4;pointer-events:none}}
.info-band{padding:76px 0;background:#11161f;border-block:1px solid var(--hap-line)}
.info-band-inner{max-width:1050px;margin:0 auto}
.info-band h2{font-size:clamp(25px,3vw,37px);margin:15px 0 22px;font-weight:800}
.info-band p{color:#bac5d2;font-size:14px;line-height:1.9;text-align:justify;margin-bottom:17px}
.next-page-band{background:linear-gradient(100deg,#191c23,#282315);padding:43px 0;border-bottom:1px solid #594b26}
.next-page-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.next-page-inner h2{font-size:25px;font-weight:800;margin:9px 0}
.next-page-inner p{color:#c2c8d0;font-size:13px;margin:0}
.next-page-btn{white-space:nowrap;padding:14px 22px!important}
.certificate-item .gallery-card{border:1px solid #7f6a35}
.certificate-preview{position:relative;display:block;width:100%;height:440px;padding:21px;border:0;background:linear-gradient(140deg,#f5f4ef,#e0e2e6);cursor:zoom-in;overflow:hidden}
.certificate-preview:hover img{transform:scale(1.035)}
.certificate-preview img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .24s ease;user-select:none;-webkit-user-drag:none}
.certificate-preview:focus-visible{outline:3px solid var(--hap-gold);outline-offset:-4px}
.certificate-watermark{position:absolute;right:18px;bottom:17px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:800;border-radius:5px;padding:8px 12px;pointer-events:none}
.certificate-missing{display:none!important;height:100%;flex-direction:column;gap:11px;align-items:center;justify-content:center;text-align:center;color:#334155;font-size:13px;font-weight:700;overflow-wrap:anywhere;padding:40px}
.certificate-missing.show:not(.d-none){display:flex!important}
.certificate-missing small{font-weight:400}
.certificate-item .gallery-card-body{padding:25px 28px}
.certificate-item .gallery-card-body h3{font-size:19px!important}
.certificate-item .gallery-card-body p{margin-bottom:24px}
.certificate-note{display:flex;align-items:flex-start;gap:11px;margin-top:25px;color:#9eaaba;font-size:12px;line-height:1.8}
.certificate-note i{font-size:16px;color:var(--hap-gold);flex-shrink:0}
#certificateModal .modal-content{background:#14171d!important;border-color:#686a6d!important}
.certificate-modal-img{max-width:100%;max-height:74vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
#certificateModal .modal-body{padding:20px}
.hap-subpage .footer a{text-decoration:none}
.hap-subpage .footer .gallery-gold{color:var(--hap-gold)!important}
@media(max-width:768px){.hap-hero{padding:49px 0 55px}.section-intro,.next-page-inner{align-items:flex-start;flex-direction:column}.page-section{padding:52px 0 65px}.gallery-photo{height:250px}.certificate-preview{height:350px}.info-band p{text-align:left}.info-band{padding:58px 0}}
@media(max-width:480px){.gallery-photo{height:220px}.gallery-card-body{padding:22px}.hero-badges{gap:8px}.hero-badges span{font-size:11px;padding:9px 12px}.certificate-preview{height:300px;padding:12px}.section-eyebrow{font-size:10px}.next-page-btn{width:100%}}