/* Susunan beranda pada layar lebar mengikuti desain Palang Pintu. */
.palang-landing{background:#fffdf7;color:#153f36;overflow-x:hidden}
.palang-landing .navbar{height:65px;padding:7px max(70px,calc((100vw - 980px)/2));background:rgba(255,254,248,.92);backdrop-filter:blur(5px);border:0;box-shadow:0 1px 0 #d9ded4}
.palang-landing .logo{gap:9px;font-size:17px}.palang-landing .logo img{width:48px;height:48px}.palang-landing .logo small{font-size:8px}.palang-landing .navbar nav{gap:27px}.palang-landing .navbar nav a{font-size:12px}.palang-landing .btn-login{padding:11px 18px;border-radius:7px}
.palang-landing .hero{height:500px;min-height:500px;grid-template-columns:45% 55%;padding-left:max(70px,calc((100vw - 980px)/2));background:url('../image/beranda.webp') center top/auto 1000px no-repeat}
.palang-landing .hero-copy{padding:38px 20px 24px 0}.palang-landing .hero .eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:14px}.palang-landing .hero h1{font-size:58px;letter-spacing:-2px;margin-bottom:13px}.palang-landing .hero-description{font-size:22px;line-height:1.3;margin-bottom:14px}.palang-landing .hero-collaboration{font-size:11px;line-height:1.55;max-width:430px}.palang-landing .hero-button{margin:16px 0 13px;padding:11px 20px;font-size:12px}.palang-landing .public-note{max-width:380px;padding:9px 13px;font-size:9px}.palang-landing .public-note strong{font-size:19px}.palang-landing .hero-points{margin-top:11px;gap:18px;font-size:9px}
.palang-landing .hero-visual::before,.palang-landing .building{display:none}.palang-landing .hero-visual img{width:300px;max-height:340px;object-fit:contain;left:4%;top:102px;filter:drop-shadow(0 12px 18px #073d3522)}.palang-landing .hero-visual>p{right:5%;bottom:38px;font-size:10px;line-height:1.8;letter-spacing:3px}
.palang-landing .betawi-divider{height:18px;margin-top:0}.palang-landing .section{max-width:980px;padding:31px 28px}.palang-landing .section .eyebrow{font-size:9px;margin-bottom:13px}.palang-landing .section h2{font-size:34px;margin-bottom:13px}.palang-landing .section p{font-size:11px;line-height:1.7}.palang-landing .about{grid-template-columns:2fr .8fr;gap:50px;min-height:185px}.palang-landing .about blockquote{font-size:15px;padding:21px 24px}
.palang-landing .services{padding:22px 28px 25px;max-width:940px}.palang-landing .service-grid{gap:15px;margin-top:0}.palang-landing .service-card{min-height:160px;padding:18px 18px 22px 82px}.palang-landing .service-card i{left:16px;top:17px;width:52px;height:52px}.palang-landing .service-number{font-size:20px}.palang-landing .service-card h3{font-size:12px;margin:8px 0 5px}.palang-landing .service-card p{font-size:9px}.palang-landing .faq{padding-top:34px;padding-bottom:58px}.palang-landing .faq-item{max-width:700px;padding:11px 18px;margin:7px 0}.palang-landing .faq-item summary{font-size:10px}.palang-landing .footer{padding:25px 20px}.palang-landing .footer strong{font-size:11px}.palang-landing .footer p{font-size:8px;margin-top:5px}
@media(min-width:1400px){.palang-landing .navbar{padding-left:max(90px,calc((100vw - 1250px)/2));padding-right:max(90px,calc((100vw - 1250px)/2))}.palang-landing .hero{padding-left:max(90px,calc((100vw - 1250px)/2));height:620px;min-height:620px;background-size:auto 1240px}.palang-landing .hero-copy{padding-top:52px}.palang-landing .hero h1{font-size:74px}.palang-landing .hero-description{font-size:28px}.palang-landing .hero-visual img{width:390px;top:125px}.palang-landing .section{max-width:1250px;padding-left:28px;padding-right:28px}.palang-landing .services{max-width:1190px}}
@media(max-width:800px){.palang-landing .navbar{height:auto;padding:10px 18px}.palang-landing .hero{height:auto;min-height:0;grid-template-columns:1fr;padding:0 22px;background-size:auto 900px;background-position:62% top}.palang-landing .hero-copy{padding-top:35px}.palang-landing .hero-visual{min-height:330px}.palang-landing .hero-visual img{top:20px;left:50%;transform:translateX(-50%);width:260px}.palang-landing .hero-visual>p{display:none}.palang-landing .about{grid-template-columns:1fr}.palang-landing .service-grid{grid-template-columns:1fr}.palang-landing .services{border-radius:0}}

/* Sesuaikan posisi elemen dengan proporsi desain beranda. */
@media (min-width:801px) and (max-width:1399px){
 .palang-landing .hero-visual img{width:335px;max-height:360px;left:-8%;top:96px}
 .palang-landing .hero-visual>p{right:15%}
 .palang-landing .section{padding-top:25px;padding-bottom:25px}
 .palang-landing .about{min-height:165px}
 .palang-landing .services{padding-top:18px;padding-bottom:21px}
 .palang-landing .service-card{min-height:150px;padding-top:16px;padding-bottom:20px}
 .palang-landing .faq{padding-top:25px;padding-bottom:28px;position:relative;background:radial-gradient(circle at 2% 40%,rgba(57,117,94,.08),transparent 18%),radial-gradient(circle at 98% 75%,rgba(57,117,94,.09),transparent 20%)}
 .palang-landing .faq:after{content:"Lihat semua FAQ  →";position:absolute;right:28px;top:58px;font-size:10px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
 .palang-landing .faq-item{padding:10px 18px;margin:6px 0}
 .palang-landing .faq-item summary{list-style:none;display:flex;justify-content:space-between}
 .palang-landing .faq-item summary::-webkit-details-marker{display:none}
 .palang-landing .faq-item summary:after{content:"+";font-size:18px;line-height:10px}
 .palang-landing .faq-item[open] summary:after{content:"−"}
 .palang-landing .footer{padding:20px}
}

/* Foto gedung resmi menggantikan gedung pada artwork contoh. */
.palang-landing .hero{background-image:url('../image/beranda.webp')}
.palang-landing .building-photos{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.palang-landing .building-photos img{position:absolute;right:0;object-fit:cover;filter:saturate(.88) contrast(.96);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%)}
.palang-landing .building-photos .photo-pn{top:0;width:31%;height:57%;object-position:58% center}
.palang-landing .building-photos .photo-capil{right:0;bottom:0;width:28%;height:50%;object-position:45% center;clip-path:polygon(13% 8%,100% 0,100% 100%,0 100%)}
.palang-landing .building-photos:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(255,253,247,.10) 74%,transparent),linear-gradient(0deg,rgba(255,253,247,.58),transparent 30%);pointer-events:none}
.palang-landing .hero-copy,.palang-landing .hero-visual{z-index:2}.palang-landing .hero-visual .hero-logo{z-index:3}
@media(max-width:800px){.palang-landing .building-photos{opacity:.48}.palang-landing .building-photos .photo-pn{width:48%}.palang-landing .building-photos .photo-capil{width:45%}.palang-landing .building-photos:after{background:linear-gradient(0deg,#fffdf7 0,transparent 55%)}}

/* Siluet ondel-ondel dekoratif pada bidang konten. */
.palang-landing .about,.palang-landing .faq{position:relative;isolation:isolate}
.palang-landing .about>div,.palang-landing .about>blockquote,.palang-landing .faq>.eyebrow,.palang-landing .faq>h2,.palang-landing .faq>details{position:relative;z-index:1}
.palang-landing .ondel-silhouette{position:absolute;z-index:0;width:205px;height:285px;overflow:hidden;pointer-events:none;opacity:.075;filter:grayscale(1) sepia(.25) hue-rotate(85deg) saturate(.7)}
.palang-landing .ondel-silhouette img{display:block;width:450px;height:450px;max-width:none;object-fit:contain}
.palang-landing .ondel-left{left:-150px;top:8px}.palang-landing .ondel-left img{transform:translateX(-18px)}
.palang-landing .ondel-right{right:-150px;top:-5px}.palang-landing .ondel-right img{transform:translateX(-225px)}
@media(max-width:800px){.palang-landing .ondel-silhouette{width:180px;height:210px;opacity:.055}.palang-landing .ondel-silhouette img{width:330px;height:330px}.palang-landing .ondel-left{left:-120px}.palang-landing .ondel-right{right:-125px}}

/* Gunakan file foto asli tanpa regenerasi: PN kanan atas, Capil kanan bawah. */
.palang-landing .original-building-photos{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;pointer-events:none}
.palang-landing .original-building-photos:before{content:"";position:absolute;z-index:0;right:0;top:0;width:43%;height:100%;background:linear-gradient(90deg,transparent,#fffdf7 10%,#fffdf7)}
.palang-landing .original-building-photos img{position:absolute;right:0;z-index:1;display:block;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 25%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 25%,#000 100%)}
.palang-landing .original-building-photos .photo-pn{top:-2%;width:43%;height:67%;object-position:54% center;clip-path:polygon(0 0,100% 0,100% 65%,92% 68%,82% 71%,70% 75%,58% 80%,45% 85%,30% 91%,15% 97%,0 100%);filter:saturate(.9) contrast(.97) drop-shadow(-4px 7px 0 #efd58b)}
.palang-landing .original-building-photos .photo-capil-border{position:absolute;z-index:2;right:-1%;bottom:0;width:41%;height:64%;background:#efd58b;clip-path:polygon(0 44%,15% 41%,30% 34%,45% 28%,60% 22%,75% 17%,88% 13%,100% 9%,100% 11%,88% 15%,75% 19%,60% 24%,45% 30%,30% 36%,15% 43%,0 46%);transform:translateY(-5px);-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.8) 4%,#000 10%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.8) 4%,#000 10%,#000 100%)}
.palang-landing .original-building-photos .photo-capil{right:-1%;bottom:0;width:41%;height:64%;z-index:3;object-position:42% center;clip-path:polygon(0 44%,15% 41%,30% 34%,45% 28%,60% 22%,75% 17%,88% 13%,100% 9%,100% 100%,0 100%);filter:saturate(.9) contrast(.97)}
.palang-landing .original-building-photos:after{content:"";position:absolute;z-index:4;inset:0;background:url('../image/beranda.webp') center top/auto 1000px no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - 82px),#000 calc(100% - 48px),#000 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - 82px),#000 calc(100% - 48px),#000 100%);pointer-events:none}
.palang-landing .hero-copy,.palang-landing .hero-visual{position:relative;z-index:2}
@media(min-width:1400px){.palang-landing .original-building-photos:after{background-size:auto 1240px}}
@media(max-width:800px){.palang-landing .original-building-photos{opacity:.45}.palang-landing .original-building-photos .photo-pn{width:50%}.palang-landing .original-building-photos .photo-capil,.palang-landing .original-building-photos .photo-capil-border{width:48%}}

/* Sepasang ondel-ondel membingkai layanan tanpa mengganggu isi kartu. */
.palang-landing .about>.ondel-silhouette,.palang-landing .faq>.ondel-silhouette{display:none}
.palang-landing .services{position:relative;isolation:isolate}
.palang-landing .services:before,.palang-landing .services:after{content:"";position:absolute;z-index:0;top:-12px;width:255px;height:325px;background-image:url('../image/palangpintu-transparent.png');background-repeat:no-repeat;background-size:560px 560px;opacity:.105;filter:grayscale(1) sepia(.28) hue-rotate(86deg) saturate(.72);pointer-events:none}
.palang-landing .services:before{left:-205px;background-position:-15px 0}
.palang-landing .services:after{right:-205px;background-position:-290px 0}
.palang-landing .services>.eyebrow,.palang-landing .services>h2,.palang-landing .services>.service-grid{position:relative;z-index:1}
@media(max-width:800px){.palang-landing .services:before,.palang-landing .services:after{display:none}}

.palang-landing main { overflow-x: clip; }

/* Di ponsel, tinggi pembuka mengikuti isi agar layanan berikutnya langsung terlihat. */
@media (max-width: 800px) {
    .palang-landing .navbar { gap: 14px; padding: 12px 20px; }
    .palang-landing .navbar nav { gap: 16px; }
    .palang-landing .navbar nav a { min-height: 44px; display: inline-flex; align-items: center; }
    .palang-landing .logo small { font-size: 9px; }
    .palang-landing .hero {
        display: block;
        height: auto;
        min-height: 0;
        padding: 0 22px;
        background: linear-gradient(100deg, rgba(255,253,247,.96), rgba(255,253,247,.86)), url('../image/pn.webp') center / cover no-repeat;
    }
    .palang-landing .original-building-photos { display: none; }
    .palang-landing .hero-copy { max-width: 620px; margin: auto; padding: 32px 0 28px; }
    .palang-landing .hero .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .palang-landing .hero h1 { font-size: clamp(48px, 12vw, 64px); line-height: 1.05; letter-spacing: -2px; }
    .palang-landing .hero-description { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.3; }
    .palang-landing .hero-collaboration { max-width: none; font-size: 14px; line-height: 1.65; }
    .palang-landing .hero-button { min-height: 46px; margin: 20px 0 16px; font-size: 14px; }
    .palang-landing .public-note { max-width: none; padding: 12px; font-size: 12px; line-height: 1.5; }
    .palang-landing .hero-points { gap: 8px 16px; margin-top: 16px; font-size: 11px; flex-wrap: wrap; }
    .palang-landing .section { padding: 32px 22px; }
    .palang-landing .section h2 { font-size: clamp(29px, 7.5vw, 36px); }
    .palang-landing .section p { font-size: 14px; line-height: 1.7; }
    .palang-landing .about { min-height: 0; gap: 20px; }
    .palang-landing .about blockquote { font-size: 17px; padding: 20px; }
    .palang-landing .service-card { min-height: 0; padding: 20px 20px 42px 82px; }
    .palang-landing .service-card h3 { font-size: 17px; }
    .palang-landing .service-card p { font-size: 14px; }
    .palang-landing .faq-item { padding: 14px; }
    .palang-landing .faq-item summary { font-size: 14px; }
    .palang-landing .footer p { font-size: 12px; }
}