/* =====================================================================
   Wakaf Telaga @ Asia — SEGMEN "PROJEK SEDANG BERJALAN"
   Fail: /assets/css/projek-semasa.css   (dimuat SELEPAS style-v3.css)
   Sumber: sampel diluluskan Roy 9 Nov 2026
           Website/_draf-versi/segmen-lot-semasa-2026-11-03/segmen-projek-semasa.html
   SEMUA pemilih di-skop bawah #projek-semasa — fail ini tidak menyentuh
   mana-mana seksyen lain. Token warna (--emas, --krem, ...) datang dari
   :root dalam style-v3.css; hanya --ps-garis ditakrif di sini (skop seksyen).
   ===================================================================== */
#projek-semasa{--ps-garis:#EAE2CF;padding:72px 0;background:linear-gradient(180deg,var(--krem),var(--putih))}
#projek-semasa h2{font-family:var(--serif);font-weight:400;color:var(--hitam);font-size:clamp(27px,4.4vw,40px);line-height:1.24;text-align:center;margin-bottom:16px}

#projek-semasa .projek{background:#fff;border:1px solid var(--ps-garis);border-radius:20px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.06)}
#projek-semasa .projek-atas{display:grid;grid-template-columns:1fr}
@media(min-width:860px){#projek-semasa .projek-atas{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}#projek-semasa .projek-atas .gambar{aspect-ratio:auto;height:100%;min-height:420px}}

#projek-semasa .gambar{position:relative;aspect-ratio:16/10;background:#e9e2d2;min-height:220px}
#projek-semasa .gambar img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 30%}
#projek-semasa .gambar .lencana{z-index:1}
#projek-semasa .kapsyen{position:absolute;right:12px;bottom:12px;z-index:1;max-width:calc(100% - 24px);background:rgba(20,18,16,.72);color:#fff;font-size:12px;padding:5px 10px;border-radius:8px;line-height:1.4}
#projek-semasa .kapsyen:empty{display:none}
#projek-semasa .gambar .ganti{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;color:#7a705f;
  background:repeating-linear-gradient(135deg,#efe8d9 0 14px,#e7dfcd 14px 28px)}
#projek-semasa .gambar .ganti svg{width:44px;height:44px;opacity:.7}
#projek-semasa .gambar .ganti b{font-size:14px;letter-spacing:1.5px;text-transform:uppercase}
#projek-semasa .gambar .ganti span{font-size:13px}
#projek-semasa .lencana{position:absolute;left:16px;top:16px;background:rgba(20,18,16,.82);color:#fff;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:7px 12px;border-radius:50px}
#projek-semasa .lencana i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--emas-brand);margin-right:7px;font-style:normal;animation:ps-denyut 1.6s infinite}
@keyframes ps-denyut{50%{opacity:.35}}

#projek-semasa .butiran{padding:28px 26px}
#projek-semasa .lokasi-label{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--emas-tua);font-weight:700;margin-bottom:6px}
#projek-semasa .kemaskini{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--kelabu);margin-bottom:10px}
#projek-semasa .kemaskini:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emas-brand);margin-right:8px;vertical-align:1px;animation:ps-denyut 1.6s infinite}
#projek-semasa .butiran h3{font-family:var(--serif);font-weight:400;color:var(--hitam);font-size:26px;line-height:1.25;margin-bottom:12px}
#projek-semasa .butiran p{font-size:16px;color:var(--teks);margin-bottom:18px}

#projek-semasa .fakta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#projek-semasa .f{border:1px solid var(--ps-garis);border-radius:14px;padding:12px 14px;background:var(--krem)}
#projek-semasa .f small{display:block;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kelabu);font-weight:700}
#projek-semasa .f strong{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--hitam);line-height:1.3}
#projek-semasa .f > span{display:block;font-size:13px;color:var(--kelabu);line-height:1.5}

/* kemajuan */
#projek-semasa .kemajuan{border-top:1px solid var(--ps-garis);padding:28px 26px}
#projek-semasa .km-atas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 20px;margin-bottom:12px}
#projek-semasa .km-angka{font-family:var(--serif);font-size:clamp(34px,6vw,46px);line-height:1;color:var(--hitam)}
#projek-semasa .km-angka small{font-size:.42em;color:var(--kelabu)}
#projek-semasa .km-baki{font-weight:700;color:var(--hitam)}
#projek-semasa .km-baki span{display:block;font-weight:400;font-size:14px;color:var(--kelabu)}
#projek-semasa .bar{height:12px;background:#F1EADB;border-radius:999px;overflow:hidden;margin-bottom:20px}
#projek-semasa .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--emas-brand),var(--emas));border-radius:999px;transition:width .8s ease}
#projek-semasa .lot{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(min-width:720px){#projek-semasa .lot{grid-template-columns:repeat(10,1fr)}}
#projek-semasa .sel{position:relative;overflow:hidden;border:1px solid var(--ps-garis);border-radius:12px;padding:10px 4px 8px;text-align:center;background:#fff}
#projek-semasa .sel .isi{position:absolute;left:0;right:0;bottom:0;background:#F6EBCB;transition:height .8s ease}
#projek-semasa .sel.penuh{border-color:var(--emas)}
#projek-semasa .sel.penuh .isi{background:linear-gradient(135deg,var(--emas-brand),var(--emas))}
#projek-semasa .sel.semasa{border:2px solid var(--emas-tua)}
#projek-semasa .sel b,#projek-semasa .sel em{position:relative;display:block;font-style:normal}
#projek-semasa .sel b{font-size:12px;font-weight:700;color:var(--kelabu)}
@media(max-width:719px){#projek-semasa .sel b{font-size:11px;white-space:nowrap;letter-spacing:-.2px}}
#projek-semasa .sel em{font-size:13px;font-weight:700;color:var(--hitam)}
#projek-semasa .sel.penuh b{color:#3b3222}
#projek-semasa .semasa-nota{margin-top:12px;font-size:14px;color:var(--kelabu)}
#projek-semasa .semasa-nota b{color:var(--hitam)}

/* manfaat + langkah */
#projek-semasa .manfaat{font-size:15px;color:var(--teks);background:var(--krem);border-left:3px solid var(--emas);padding:8px 12px;border-radius:0 8px 8px 0;margin:-6px 0 18px}
#projek-semasa .manfaat:empty{display:none}
#projek-semasa .manfaat:before{content:"☀ ";color:var(--emas-tua)}
#projek-semasa .langkah{border-top:1px solid var(--ps-garis);padding:26px}
#projek-semasa .langkah h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--hitam);margin-bottom:14px}
#projek-semasa .langkah ol{list-style:none;padding:0;display:grid;gap:12px;counter-reset:l}
@media(min-width:720px){#projek-semasa .langkah ol{grid-template-columns:repeat(4,1fr)}}
#projek-semasa .langkah li{counter-increment:l;position:relative;padding:12px 12px 12px 50px;border:1px solid var(--ps-garis);border-radius:14px;background:#fff}
#projek-semasa .langkah li:before{content:counter(l);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
#projek-semasa .langkah li b{display:block;font-weight:600;color:var(--hitam);font-size:15px;line-height:1.35}
#projek-semasa .langkah li > span{display:block;font-size:13px;color:var(--kelabu);line-height:1.45;margin-top:2px}
#projek-semasa .langkah li.akhir-langkah{grid-column:1/-1;background:linear-gradient(135deg,#FBF4E2,var(--krem));border-color:var(--emas-terang)}
#projek-semasa .langkah li.akhir-langkah:before{content:"♥";font-size:15px}
#projek-semasa .langkah li.akhir-langkah b{font-family:var(--serif);font-weight:400;font-size:19px}
#projek-semasa .langkah li.akhir-langkah > span{font-size:15px;color:var(--teks);line-height:1.6;margin-top:4px}
#projek-semasa .langkah-nota{font-size:14px;color:var(--kelabu);margin-top:12px}
#projek-semasa .langkah-nota b{color:var(--hitam)}
#projek-semasa .lencana.penuh-semua i{animation:none;background:#7fd3a0}
#projek-semasa .pautan-pakej{display:block;margin-top:10px;font-size:13.5px;color:var(--emas-tua);text-decoration:underline;text-underline-offset:3px}
#projek-semasa .g-foto video{width:100%;height:100%;object-fit:cover;display:block}
#projek-semasa .g-vid{position:absolute;left:8px;top:8px;background:rgba(20,18,16,.75);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:50px}

/* persendirian (ditambah dlm sampel 10 Nov 2026) */
#projek-semasa .sendiri{border-top:1px solid var(--ps-garis);padding:24px 26px;display:grid;gap:16px;background:var(--krem)}
@media(min-width:860px){#projek-semasa .sendiri{grid-template-columns:1fr auto;align-items:center}}
#projek-semasa .sendiri-label{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--emas-tua);font-weight:700;margin-bottom:4px}
#projek-semasa .sendiri h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--hitam);margin-bottom:6px}
#projek-semasa .sendiri p{font-size:15px}
#projek-semasa .sendiri-cta{text-align:center}
#projek-semasa .sendiri-cta strong{display:block;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--hitam);line-height:1.2;margin-bottom:8px}
#projek-semasa .btn-garis{display:inline-block;border:2px solid var(--emas);color:var(--emas-tua);font-weight:500;font-size:15px;padding:11px 26px;border-radius:50px;text-decoration:none;white-space:nowrap}
#projek-semasa .btn-garis:hover{background:var(--emas);color:#141210}

/* galeri */
#projek-semasa .galeri{border-top:1px solid var(--ps-garis);padding:26px}
#projek-semasa .galeri h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--hitam);margin-bottom:4px}
#projek-semasa .galeri .g-sub{font-size:14px;color:var(--kelabu);margin-bottom:14px}
#projek-semasa .g-grid{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin:0 -26px;padding-left:26px;padding-right:26px;scroll-padding-left:26px}
#projek-semasa .g-grid::-webkit-scrollbar{height:6px}#projek-semasa .g-grid::-webkit-scrollbar-thumb{background:var(--ps-garis);border-radius:9px}
@media(min-width:720px){#projek-semasa .g-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}
#projek-semasa .g-item{scroll-snap-align:start;margin:0}
#projek-semasa .g-foto{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#e9e2d2;border:1px solid var(--ps-garis);display:block;width:100%;padding:0;cursor:default}
#projek-semasa button.g-foto{cursor:zoom-in}
#projek-semasa .g-foto img{width:100%;height:100%;object-fit:cover;display:block}
#projek-semasa .g-ganti{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#7a705f;background:repeating-linear-gradient(135deg,#efe8d9 0 12px,#e7dfcd 12px 24px);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
#projek-semasa .g-ganti svg{width:28px;height:28px;opacity:.7}
#projek-semasa .g-item figcaption{font-size:13px;color:var(--kelabu);margin-top:6px;line-height:1.4}
#projek-semasa .g-petunjuk{font-size:12px;color:var(--kelabu);margin-top:6px}
@media(min-width:720px){#projek-semasa .g-petunjuk{display:none}}
#projek-semasa dialog.g-besar{border:0;padding:0;background:transparent;max-width:min(94vw,1100px)}
#projek-semasa dialog.g-besar::backdrop{background:rgba(10,9,8,.85)}
#projek-semasa dialog.g-besar img{max-width:100%;max-height:82vh;height:auto;border-radius:12px;display:block}
#projek-semasa dialog.g-besar p{color:#fff;font-size:14px;margin-top:8px;text-align:center}
#projek-semasa dialog.g-besar button{position:absolute;top:8px;right:8px;width:40px;height:40px;padding:1px 6px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:22px;cursor:pointer}

/* apa anda terima + CTA */
#projek-semasa .terima{border-top:1px solid var(--ps-garis);padding:26px;display:grid;gap:22px}
@media(min-width:860px){#projek-semasa .terima{grid-template-columns:1.4fr 1fr;align-items:center}}
#projek-semasa .terima h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--hitam);margin-bottom:10px}
#projek-semasa .terima ul{list-style:none;padding:0;display:grid;gap:8px}
#projek-semasa .terima li{position:relative;padding-left:26px;font-size:15.5px}
#projek-semasa .terima li:before{content:"✓";position:absolute;left:0;color:var(--emas-tua);font-weight:800}
#projek-semasa .cta{text-align:center}
/* Butang ikut sampel (mengatasi .btn style-v3 di dalam seksyen ini sahaja) */
#projek-semasa .btn{display:inline-block;width:auto;max-width:none;margin:0;text-align:center;background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210;font-weight:500;font-size:16px;letter-spacing:.3px;line-height:1.3;padding:15px 34px;border-radius:50px;text-decoration:none;box-shadow:0 6px 18px rgba(201,162,75,.32);white-space:nowrap}
@media(max-width:420px){#projek-semasa .btn{white-space:normal;width:100%}}
#projek-semasa .cta small{display:block;margin-top:10px;font-size:12.5px;color:var(--kelabu)}
@media(prefers-reduced-motion:reduce){#projek-semasa .lencana i,#projek-semasa .kemaskini:before{animation:none}#projek-semasa .bar span,#projek-semasa .sel .isi{transition:none}}