:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:90vh;position:relative;animation:slideUp .3s ease;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:20px 40px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.modal-title{font-size:24px;font-weight:700;color:#1f2937;margin:0;line-height:1.3}.modal-body{padding:30px 40px;overflow-y:auto;flex:1}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#f3f4f6;border-radius:10px}.modal-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}.modal-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.image-carousel{position:relative;width:100%;height:450px;border-radius:12px;overflow:hidden;margin-bottom:30px;background:#f3f4f6}.carousel-image{width:100%;height:100%;object-fit:cover}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff4d;border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;opacity:0}.image-carousel:hover .carousel-btn{opacity:1}.carousel-btn:hover{background:#ffffffe6}.carousel-btn.prev{left:20px}.carousel-btn.next{right:20px}.carousel-btn svg{color:#1f2937}.carousel-indicators{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px}.image-viewer-overlay{position:fixed;inset:0;background:#000000d9;z-index:2000;display:flex;align-items:center;justify-content:center}.image-viewer{max-width:90%;max-height:90%;box-shadow:0 10px 40px #00000080;cursor:zoom-out}.viewer-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0009;border:none;width:48px;height:48px;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2100}.viewer-btn.prev{left:24px}.viewer-btn.next{right:24px}.viewer-btn:hover{background:#000000d9}.indicator{width:8px;height:8px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:all .3s ease}.indicator.active{background:#fff;width:24px;border-radius:4px}.overview-section{margin-bottom:30px}.overview-title{font-size:14px;font-weight:700;color:#1563df;letter-spacing:1px;margin:0 0 20px;text-transform:uppercase}.info-grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.info-box{display:flex;gap:15px;padding:20px;background:#f9fafb;border-radius:12px;transition:all .3s ease}.info-box:hover{background:#f3f4f6;transform:translateY(-2px)}.info-icon{flex-shrink:0;width:48px;height:48px;background:#1563df;border-radius:12px;display:flex;align-items:center;justify-content:center}.info-icon svg{color:#fff}.info-content{display:flex;flex-direction:column;gap:4px;flex:1}.info-label{font-size:13px;color:#6b7280;font-weight:500}.info-value{font-size:16px;font-weight:600;color:#1f2937;line-height:1.4}.info-value.available{color:#059669}.info-value.sold-out{color:#dc2626}.map-section{margin-top:30px}.map-container{width:100%;height:400px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.modal-footer{padding:15px 40px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;flex-shrink:0}.btn-close-modal{padding:12px 32px;background:#1563df;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .3s ease}.btn-close-modal:hover{background:#0d4fb3}@media(max-width:768px){.modal-content{max-width:100%;border-radius:16px 16px 0 0;max-height:95vh}.modal-header,.modal-body,.modal-footer{padding-left:24px;padding-right:24px}.modal-title{font-size:24px}.info-grid-two{grid-template-columns:1fr}.image-carousel,.map-container{height:300px}}.lpnpp-header{background:transparent;box-shadow:none;position:fixed;top:0;left:0;right:0;z-index:1000;width:100%;transition:all .3s ease}.lpnpp-header.scrolled{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 8px #0000001a}.header-container{max-width:1840px;margin:0 auto;padding:20px 40px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:30px}.header-left{display:flex;align-items:center;gap:20px;flex:1;padding-left:30px}.header-logo{height:70px;width:auto;object-fit:contain;flex-shrink:0}.header-title{font-size:18px;font-weight:700;color:#fff;margin:0;letter-spacing:1px;line-height:1.3;text-shadow:0 2px 4px rgba(0,0,0,.3);transition:color .3s ease,text-shadow .3s ease}.lpnpp-header.scrolled .header-title{color:#1563df;text-shadow:none}.header-right{flex-shrink:0;padding-right:0}.penang2030-logo{height:50px;width:auto;object-fit:contain}@media(max-width:1200px){.header-container{padding:18px 30px 18px 0}.header-title{font-size:16px}.header-logo,.penang2030-logo{height:60px}}@media(max-width:768px){.header-container{padding:15px 20px 15px 0;gap:15px}.header-left{gap:12px}.header-logo{height:50px}.header-title{font-size:13px;letter-spacing:.5px}.penang2030-logo{height:50px}}@media(max-width:480px){.header-container{padding:12px 15px 12px 0}.header-logo{height:45px}.header-title{font-size:11px;letter-spacing:.3px}.penang2030-logo{height:45px}}.hero-section{position:relative;height:300px;background-image:url(/website/images/penang-back.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;margin-top:0;margin-bottom:-60px;padding-top:110px}.hero-overlay{position:absolute;inset:0;background:#0006}.hero-content{position:relative;z-index:2;text-align:center}.hero-title{font-size:40px;font-weight:700;color:#fff;margin:0;text-shadow:0 4px 8px rgba(0,0,0,.3);letter-spacing:1px;padding-bottom:70px}.filter-section{background:#fff;box-shadow:0 8px 24px #00000026;padding:25px 0;position:relative;z-index:100;border-radius:12px;margin:0 auto 40px;max-width:800px;min-height:95px}.filter-container{max-width:800px;margin:0 auto;padding:0 40px;display:flex;gap:15px;align-items:center;justify-content:center}.filter-select{flex:1;padding:12px 16px;font-size:15px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#1f2937;cursor:pointer;transition:all .3s ease;font-weight:500;min-height:45px}.filter-select:hover{border-color:#1563df}.filter-select:focus{outline:none;border-color:#1563df;box-shadow:0 0 0 3px #1563df1a}.filter-select:disabled{opacity:.5;cursor:not-allowed}.filter-select-multi{height:auto!important;min-height:45px;overflow-y:auto}.filter-select-multi option{padding:8px 12px;cursor:pointer}.filter-select-multi option:checked{background:linear-gradient(#1563df,#1563df);color:#fff}.filter-select-multi:focus option:checked{background:#1563df;color:#fff}.search-button{padding:12px 40px;background:#1563df;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.search-button:hover:not(:disabled){background:#0d47a1;transform:translateY(-2px);box-shadow:0 4px 12px #1563df4d}.search-button:disabled{opacity:.6;cursor:not-allowed}.reset-button{padding:12px 16px;background:#dbeafe;color:#1563df;border:2px solid #bfdbfe;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-width:48px}.reset-button svg{flex-shrink:0}.reset-button:hover:not(:disabled){background:#bfdbfe;border-color:#93c5fd;transform:translateY(-2px);box-shadow:0 4px 12px #1563df33}.reset-button:hover:not(:disabled) svg{animation:rotate .6s ease-in-out}.reset-button:disabled{opacity:.5;cursor:not-allowed}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.projects-container{max-width:1280px;margin:0 auto;padding:0 60px 60px}.why-choose-section{text-align:center;padding:60px 0 20px}.why-choose-title{font-size:36px;font-weight:400;color:#3b82f6;font-family:Brush Script MT,cursive;margin:0}.projects-section{margin-top:20px}.section-title{font-size:42px;font-weight:700;color:#1f2937;text-align:center;margin:0 0 50px}.projects-grid{display:grid;grid-template-columns:repeat(3,410px);gap:32px;margin-top:40px;justify-content:center}.project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .3s ease,box-shadow .3s ease;position:relative;width:100%;max-width:410px}.project-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.card-image{position:relative;width:100%;height:260px;overflow:hidden;background:#f3f4f6}.project-image{width:100%;height:100%;object-fit:cover;display:block}.badges{position:absolute;top:15px;left:15px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}.badge{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;background:#1563df;color:#fff}.badge-daerah{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;background:#0000004d;color:#fff}.card-image-blank{background:linear-gradient(135deg,#f5f7fa,#e8ecf1);min-height:260px;display:flex;align-items:center;justify-content:center;position:relative}.card-image-blank:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.card-image-blank:after{content:"No Image";position:absolute;top:50%;left:50%;transform:translateY(-50%,30px);font-size:14px;font-weight:500;color:#6b7280;opacity:.5;letter-spacing:.5px;margin-top:40px;margin-left:-35px}.card-content{padding:20px;background:#fff}.location{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:14px;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.location svg{flex-shrink:0}.project-name{font-size:1.25rem;font-weight:600;color:#1f2937;margin:.75rem 0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.project-details{display:flex;gap:20px;margin-bottom:15px}.detail-item{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:14px}.detail-item svg{flex-shrink:0}.error-state{text-align:center;padding:60px 20px;background:#fef2f2;border-radius:12px;margin:20px 0}.error-state p{color:#991b1b;font-size:16px;margin-bottom:20px}.retry-button{padding:12px 24px;background:#dc2626;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .3s ease}.retry-button:hover{background:#b91c1c}.loading-state{text-align:center;padding:60px 20px}.spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid #e5e7eb;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-state p{color:#6b7280;font-size:16px}.no-results{text-align:center;padding:80px 20px}.no-results svg{color:#9ca3af;margin-bottom:20px}.no-results p{color:#6b7280;font-size:16px}@media(max-width:1400px){.projects-container{padding:0 50px 60px}.filter-container{padding:0 50px}.project-grid{grid-template-columns:repeat(2,410px)}}@media(max-width:1200px){.projects-grid{grid-template-columns:repeat(2,1fr);gap:25px}.hero-title{font-size:48px}.projects-container{padding:0 30px 60px}.filter-container{padding:0 30px}}@media(max-width:900px){.projects-grid{grid-template-columns:410px}}@media(max-width:768px){.hero-section{height:400px}.hero-title{font-size:36px}.filter-container{flex-direction:column;padding:0 20px}.filter-select{max-width:100%;width:100%}.search-button{width:100%}.projects-grid{grid-template-columns:1fr}.section-title{font-size:32px}.why-choose-title{font-size:28px}.projects-container{padding:0 20px 40px}}@media(max-width:480px){.hero-section{height:300px}.hero-title,.section-title{font-size:28px}.filter-section{padding:20px 0}.filter-container{padding:0 15px}.projects-container{padding:0 15px 30px}.projects-grid{grid-template-columns:1fr}.project-card{width:100%}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;overflow-y:scroll;overflow-x:hidden}body{margin:0;padding:0;width:100%;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f9fafb;color:#1f2937;position:relative;overflow-x:hidden}#root{min-height:100vh;width:100%;position:relative;padding-top:0;margin-top:0}