/* PT Insansandang Internusa - style.css (gabungan seluruh halaman) */
*{box-sizing: border-box;}
body{font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; overflow-x: hidden; color: #333; background: #f7f9fc; position: relative;}
header{position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1100px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-radius: 50px; display: flex; justify-content: space-between; align-items: center; padding: 12px 35px; z-index: 1000; transition: top .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s, border-radius .4s;}
header.scrolled{top: 10px; padding: 8px 25px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-radius: 30px;}
.logo{font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; color: #00529C; display: flex; align-items: center; gap: 12px; text-decoration: none;}
.logo-img{height: 32px; width: auto; object-fit: contain;}
nav{display: flex; align-items: center;}
nav a, nav .dropdown-btn{text-decoration: none; color: #333; margin-left: 22px; font-weight: 600; transition: color 0.3s ease; font-size: 0.9em; white-space: nowrap; cursor: pointer;}
nav a:hover, nav a.active, nav .dropdown:hover .dropdown-btn{color: #F4B41A;}
nav .dropdown{position: relative; display: inline-flex; align-items: center; padding-top: 10px; padding-bottom: 10px;}
nav .dropdown::after{content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 15px; display: block;}
nav .dropdown-content{display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); min-width: 190px; box-shadow: 0 12px 30px rgba(0, 82, 156, 0.15); border-radius: 16px; padding: 8px 0; z-index: 1001; border: 1px solid rgba(0, 82, 156, 0.1); margin-top: 0px;}
nav .dropdown-content a{color: #333 !important; padding: 10px 20px !important; margin-left: 0 !important; display: block !important; font-size: 0.85em !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04); transition: all 0.2s ease;}
nav .dropdown-content a:last-child{border-bottom: none;}
nav .dropdown-content a:hover{background: rgba(0, 82, 156, 0.06); color: #00529C !important; padding-left: 24px !important;}
nav .dropdown:hover .dropdown-content{display: block; animation: fadeInDropdown 0.2s ease;}
@keyframes fadeInDropdown{from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); }}
.menu-toggle{display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; cursor: pointer;}
.menu-toggle span{height: 3px; width: 100%; background-color: #00529C; border-radius: 3px; transition: all 0.3s ease;}
.page-header{position: relative; z-index: 1; padding: 160px 20px 40px 20px; text-align: center;}
.page-header h1{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 2.8em; margin-bottom: 15px;}
.page-header p{color: #666; max-width: 720px; margin: 0 auto; font-size: 1.05em; line-height: 1.6;}
.section-wrapper{position: relative; z-index: 1; padding: 20px 20px 80px 20px;}
.container{max-width: 1100px; margin: 0 auto;}
.cert-grid{display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; margin-bottom: 60px;}
.cert-card{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; padding: 35px 25px; box-shadow: 0 8px 25px rgba(0,0,0,0.04); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; align-items: center; text-align: center; grid-column: span 2;}
.cert-card:nth-child(4){grid-column: 2 / span 2;}
.cert-card:nth-child(5){grid-column: 4 / span 2;}
.cert-card:hover{transform: translateY(-8px); box-shadow: 0 16px 35px rgba(0, 82, 156, 0.12); border-color: rgba(244, 180, 26, 0.5);}
.cert-icon-wrapper{width: 100px; height: 100px; background: #ffffff; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 15px; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border: 1px solid #edf2f7;}
.cert-icon-wrapper img{max-width: 100%; max-height: 100%; object-fit: contain;}
.cert-card h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.3em; margin: 0 0 10px 0;}
.cert-badge{background: rgba(0, 82, 156, 0.08); color: #00529C; font-size: 0.8em; font-weight: 700; padding: 4px 14px; border-radius: 15px; margin-bottom: 15px;}
.cert-card p{color: #555; font-size: 0.9em; line-height: 1.6; margin: 0; flex-grow: 1;}
.halal-docs-section{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0, 82, 156, 0.15); border-radius: 28px; padding: 45px 35px; box-shadow: 0 10px 30px rgba(0, 82, 156, 0.05); margin-bottom: 30px;}
.halal-docs-header{text-align: center; margin-bottom: 40px;}
.halal-docs-header h2{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 2em; margin: 0 0 10px 0;}
.halal-docs-header p{color: #666; font-size: 0.98em; max-width: 700px; margin: 0 auto; line-height: 1.6;}
.halal-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.halal-img-card{background: #ffffff; border-radius: 20px; padding: 15px; border: 1px solid #e2e8f0; box-shadow: 0 8px 20px rgba(0,0,0,0.06); transition: all 0.3s ease; text-align: center;}
.halal-img-card:hover{transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 82, 156, 0.12); border-color: #F4B41A;}
.halal-img-card img{width: 100%; height: auto; border-radius: 12px; display: block; object-fit: contain;}
.halal-img-card h4{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.1em; margin: 15px 0 5px 0;}
.email-floating{position: fixed; bottom: 25px; left: 25px; z-index: 1002; display: flex; align-items: center; gap: 10px; text-decoration: none;}
.email-btn{width: 50px; height: 50px; background-color: #00529C; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 82, 156, 0.4); transition: all 0.3s ease;}
.email-btn svg{width: 24px; height: 24px; fill: #ffffff;}
.email-text{background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 20px; color: #111; font-weight: 600; font-size: 0.85em; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; pointer-events: none; white-space: nowrap;}
.email-floating:hover .email-text{opacity: 1; transform: translateX(0);}
.email-floating:hover .email-btn{background-color: #F4B41A; transform: scale(1.05);}
.lang-floating{position: fixed; bottom: 25px; right: 25px; z-index: 1002; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 82, 156, 0.2); border-radius: 30px; padding: 4px 6px; display: flex; align-items: center; gap: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);}
.lang-btn{background: transparent; border: none; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 0.8em; color: #555; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease;}
.lang-btn.active{background-color: #00529C; color: #ffffff;}
.flag-icon{width: 18px; height: 13px; border-radius: 2px; object-fit: cover;}
.site-footer{background-color: #001a38; color: #e0e0e0; padding: 60px 20px 25px 20px; font-size: 0.9em; position: relative; z-index: 2;}
.footer-main{max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.footer-col h4{font-family: 'Poppins', sans-serif; color: #F4B41A; font-size: 1.1em; margin-top: 0; margin-bottom: 20px; position: relative;}
.footer-col h4::after{content: ''; position: absolute; left: 0; bottom: -6px; width: 35px; height: 2px; background-color: #00529C;}
.footer-about p{color: #b0c4de; line-height: 1.7; margin-bottom: 20px; font-size: 0.9em;}
.footer-links{list-style: none; padding: 0; margin: 0;}
.footer-links li{margin-bottom: 10px;}
.footer-links a{color: #dcdcdc; text-decoration: none; transition: all 0.3s ease; display: inline-block; font-size: 0.9em;}
.footer-links a:hover{color: #F4B41A; padding-left: 5px;}
.operating-hours{color: #b0c4de; line-height: 1.7; font-size: 0.88em;}
.btn-catalog-footer{display: inline-block; margin-top: 15px; background: rgba(244, 180, 26, 0.15); color: #F4B41A; border: 1px solid #F4B41A; padding: 8px 18px; border-radius: 20px; text-decoration: none; font-size: 0.85em; font-weight: 600; transition: all 0.3s ease;}
.btn-catalog-footer:hover{background: #F4B41A; color: #001a38;}
.footer-bottom-bar{max-width: 1100px; margin: 20px auto 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; color: #88a0c0; font-size: 0.82em;}
.footer-legal a{color: #88a0c0; text-decoration: none; margin-left: 15px; transition: color 0.3s ease;}
.footer-legal a:hover{color: #F4B41A;}
body.modal-open{overflow: hidden !important;}
.modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 20, 45, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; padding: 15px;}
.modal-overlay.active{opacity: 1; visibility: visible;}
.modal-card{background: #ffffff; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; border-radius: 24px; padding: 35px 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); text-align: center; position: relative; transform: scale(0.85); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-overflow-style: none; scrollbar-width: none;}
.modal-card::-webkit-scrollbar{display: none;}
.modal-overlay.active .modal-card{transform: scale(1);}
.modal-close{position: absolute; top: 15px; right: 15px; background: rgba(0, 82, 156, 0.08); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; color: #00529C; cursor: pointer; transition: all 0.3s ease;}
.modal-close:hover{background: #00529C; color: #ffffff;}
.modal-logo{display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; color: #00529C; margin-bottom: 20px;}
.modal-logo-img{height: 60px; width: auto; object-fit: contain;}
.modal-card h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.35em; margin: 0 0 8px 0; font-weight: 700;}
.modal-card p.modal-desc{color: #555; font-size: 0.88em; line-height: 1.5; margin-bottom: 20px;}
.modal-cert-list{display: flex; flex-direction: column; gap: 14px; margin-bottom: 25px; text-align: left;}
.modal-cert-item{display: flex; align-items: center; gap: 16px; background: #f8f9fa; padding: 14px 18px; border-radius: 14px; border: 1px solid #edf2f7; transition: transform 0.2s ease, box-shadow 0.2s ease;}
.modal-cert-item:hover{transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); border-color: rgba(0, 82, 156, 0.2);}
.modal-cert-img-wrapper{flex-shrink: 0; width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 10px; padding: 6px; border: 1px solid #e2e8f0;}
.modal-cert-img-wrapper img{max-width: 100%; max-height: 100%; object-fit: contain;}
.modal-cert-info h4{margin: 0 0 4px 0; font-size: 0.92em; color: #00529C; font-family: 'Poppins', sans-serif; font-weight: 700;}
.modal-cert-info p{margin: 0; font-size: 0.82em; color: #555; line-height: 1.5;}
.modal-btn{background-color: #00529C; color: #ffffff; border: none; padding: 12px 36px; border-radius: 25px; font-weight: 600; font-size: 0.92em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 82, 156, 0.2);}
.modal-btn:hover{background-color: #F4B41A; box-shadow: 0 6px 16px rgba(244, 180, 26, 0.3); transform: translateY(-2px);}
.slider-container{position: relative; width: 100%; min-height: 100vh; overflow: hidden;}
.slide{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center; padding: 120px 10% 160px 10%; color: white;}
.slide.active{opacity: 1; z-index: 1;}
.slide-1{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.7)), url('../images/INSAN.webp') center/cover;}
.slide-2{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.6))}
.slides-ready .slide-2{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.6)), url('../images/Option%2024.webp') center/cover}
.slide-3{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.8))}
.slides-ready .slide-3{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.8)), url('../images/Option%202.webp') center/cover}
.slide-4{background: linear-gradient(rgba(0,82,156,0.65), rgba(0,0,0,0.75))}
.slides-ready .slide-4{background: linear-gradient(rgba(0,82,156,0.65), rgba(0,0,0,0.75)), url('../images/Team-Halal.webp') center/cover}
.hero-content{max-width: 650px;}
.hero-content h1, .hero-content .hero-title{font-size: 3.2em; margin-bottom: 15px; line-height: 1.2; font-family: 'Poppins', sans-serif;}
.hero-content p{font-size: 1.1em; margin-bottom: 25px; line-height: 1.6; opacity: 0.9;}
.btn-utama{background-color: #F4B41A; color: #fff; padding: 14px 32px; text-decoration: none; font-size: 1em; font-weight: bold; border-radius: 30px; transition: all 0.3s ease; display: inline-block;}
.btn-utama:hover{background-color: #00529C; transform: translateY(-3px);}
.slider-btn{position: absolute; top: 45%; transform: translateY(-50%); background-color: rgba(255,255,255,0.25); color: white; border: none; font-size: 20px; padding: 12px 18px; cursor: pointer; z-index: 2; border-radius: 50%; transition: 0.3s;}
.slider-btn:hover{background-color: #F4B41A;}
.prev{left: 15px;}
.next{right: 15px;}
.dots-container{position: absolute; bottom: 180px; width: 100%; text-align: center; z-index: 2;}
.dot{height: 10px; width: 10px; margin: 0 4px; background-color: rgba(255,255,255,0.4); border-radius: 50%; display: inline-block; cursor: pointer; transition: 0.3s;}
.dot.active, .dot:hover{background-color: #F4B41A; transform: scale(1.3);}
.floating-boxes{position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; width: 80%; max-width: 1000px; z-index: 2; gap: 20px;}
.box{flex: 1; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.35); border-top: 4px solid #F4B41A; border-radius: 15px; padding: 20px; text-align: center; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); transition: all 0.4s ease; animation: floatAnim 4s ease-in-out infinite;}
.box:nth-child(2){animation-delay: 2s;}
.box:hover{background: rgba(255, 255, 255, 0.35); transform: translateY(-8px);}
.box h4{margin: 0 0 8px 0; color: #ffffff; font-size: 1.05em; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
.box p{margin: 0; font-size: 0.85em; color: #f0f0f0; text-shadow: 0 1px 2px rgba(0,0,0,0.3);}
@keyframes floatAnim{0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); }}
.about-section{display: flex; align-items: center; justify-content: space-between; gap: 40px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; padding: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}
.about-text{flex: 1;}
.about-text h2{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 2em; margin-bottom: 20px;}
.about-text p{line-height: 1.8; color: #555; margin-bottom: 25px; font-size: 0.95em;}
.about-image{flex: 1; width: 100%;}
.about-image img{width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); display: block;}
.btn-outline{border: 2px solid #00529C; color: #00529C; padding: 10px 25px; text-decoration: none; font-weight: 600; border-radius: 30px; transition: 0.3s; display: inline-block;}
.btn-outline:hover{background-color: #00529C; color: white;}
.section-title{text-align: center; font-family: 'Poppins', sans-serif; color: #00529C; font-size: 2em; margin-bottom: 40px;}
.services-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;}
.service-card{background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); padding: 35px 25px; border-radius: 20px; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; border-bottom: 4px solid transparent;}
.service-card:hover{transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-bottom: 4px solid #F4B41A;}
.service-icon{display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: rgba(0, 82, 156, 0.08); border-radius: 50%; margin-bottom: 20px; color: #00529C; transition: all 0.3s ease;}
.service-card:hover .service-icon{background-color: #00529C; color: #ffffff;}
.service-card h3{color: #00529C; margin-bottom: 12px; font-size: 1.2em;}
.service-card p{color: #666; line-height: 1.6; font-size: 0.88em; margin: 0;}
.certification-card{background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); padding: 50px 30px; text-align: center; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}
.cert-logos{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px;}
.cert-img{height: 50px; width: auto; object-fit: contain; transition: 0.3s ease; cursor: pointer;}
.cert-img:hover{transform: scale(1.1);}
.map-container{display: flex; gap: 40px; align-items: center;}
.map-info{flex: 1;}
.map-info h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.8em; margin-bottom: 15px;}
.map-info p{color: #666; line-height: 1.6; margin-bottom: 25px; font-size: 0.95em;}
.info-item{display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.9); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;}
.info-item:hover{transform: translateX(8px); background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 20px rgba(0, 82, 156, 0.08); border-color: rgba(0, 82, 156, 0.2);}
.info-icon{width: 40px; height: 40px; background: rgba(0, 82, 156, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #00529C; flex-shrink: 0; transition: all 0.3s ease;}
.info-item:hover .info-icon{background-color: #00529C; color: #ffffff;}
.info-icon svg{width: 18px; height: 18px; fill: currentColor;}
.info-text strong{display: block; color: #00529C; font-size: 0.9em; margin-bottom: 2px;}
.info-text span{color: #555; font-size: 0.88em;}
.map-frame-wrapper{flex: 1.1; height: 380px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 3px solid #ffffff; transition: all 0.4s ease;}
.map-frame-wrapper:hover{transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0, 82, 156, 0.18); border-color: #F4B41A;}
.map-frame-wrapper iframe{width: 100%; height: 100%; border: 0;}
.js .reveal{opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.js .reveal.active{opacity: 1; transform: translateY(0);}
.about-card{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; padding: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 40px;}
.about-card h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.6em; margin-top: 0; margin-bottom: 20px;}
.about-card p{color: #555; line-height: 1.8; font-size: 0.98em; margin-bottom: 20px;}
.vision-mission-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px;}
.vm-box{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); padding: 35px; border-radius: 20px; border-top: 4px solid #00529C; box-shadow: 0 5px 20px rgba(0,0,0,0.03);}
.vm-box:nth-child(2){border-top-color: #F4B41A;}
.vm-box h4{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.3em; margin-top: 0; margin-bottom: 15px;}
.vm-box p{color: #555; line-height: 1.7; font-size: 0.95em; margin: 0;}
.vm-box ul{padding-left: 20px; color: #555; line-height: 1.7; font-size: 0.92em; margin: 0;}
.vm-box li{margin-bottom: 10px;}
.product-filter{display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 45px;}
.filter-btn{background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 82, 156, 0.2); padding: 11px 26px; border-radius: 30px; font-weight: 600; font-size: 0.9em; color: #00529C; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px);}
.filter-btn.active, .filter-btn:hover{background: #00529C; color: #ffffff; border-color: #00529C; box-shadow: 0 5px 18px rgba(0, 82, 156, 0.25); transform: translateY(-2px);}
.products-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px;}
.product-card{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.04); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column;}
.product-card.hide{display: none;}
.product-card:hover{transform: translateY(-8px); box-shadow: 0 16px 35px rgba(0, 82, 156, 0.12); border-color: rgba(244, 180, 26, 0.5);}
.product-img-wrapper{position: relative; height: 220px; width: 100%; overflow: hidden; background: #eef2f7;}
.product-img-wrapper img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.product-card:hover .product-img-wrapper img{transform: scale(1.08);}
.product-tag{position: absolute; top: 15px; left: 15px; background: rgba(0, 82, 156, 0.9); color: #ffffff; font-size: 0.78em; font-weight: 700; padding: 5px 14px; border-radius: 20px; backdrop-filter: blur(4px);}
.product-info{padding: 25px; display: flex; flex-direction: column; flex-grow: 1;}
.product-info h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.25em; margin: 0 0 10px 0;}
.product-info p{color: #666; font-size: 0.88em; line-height: 1.6; margin-bottom: 20px; flex-grow: 1;}
.product-specs{background: rgba(0, 82, 156, 0.04); border-radius: 12px; padding: 12px; margin-bottom: 20px; font-size: 0.82em; color: #444;}
.product-specs div{margin-bottom: 4px;}
.product-specs div:last-child{margin-bottom: 0;}
.product-specs strong{color: #00529C;}
.btn-inquire{display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #F4B41A; color: #111; text-decoration: none; font-weight: 700; font-size: 0.88em; padding: 12px 20px; border-radius: 25px; transition: all 0.3s ease;}
.btn-inquire:hover{background: #00529C; color: #ffffff; box-shadow: 0 4px 15px rgba(0, 82, 156, 0.2);}
.gallery-filter{display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px;}
body.page-gallery .filter-btn{background: #ffffff; border: 1px solid rgba(0, 82, 156, 0.2); padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 0.9em; color: #00529C; cursor: pointer; transition: all 0.3s ease;}
body.page-gallery .filter-btn.active, body.page-gallery .filter-btn:hover{background: #00529C; color: #ffffff; border-color: #00529C; box-shadow: 0 4px 15px rgba(0, 82, 156, 0.2);}
.gallery-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px;}
.gallery-item{position: relative; border-radius: 20px; overflow: hidden; height: 250px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); background: #ffffff; border: 1px solid #edf2f7; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; transform: translateZ(0);}
.gallery-item.hide{display: none;}
.gallery-item img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.gallery-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 82, 156, 0.9), rgba(0, 0, 0, 0.2)); opacity: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: #ffffff; transition: opacity 0.3s ease;}
.gallery-item:hover img{transform: scale(1.05);}
.gallery-item:hover .gallery-overlay{opacity: 1;}
.gallery-overlay h4{margin: 0 0 6px 0; font-size: 1.15em; font-family: 'Poppins', sans-serif; color: #F4B41A;}
.gallery-overlay p{margin: 0; font-size: 0.88em; opacity: 0.95;}
.lightbox-modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 20, 45, 0.88); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 20px;}
.lightbox-modal.active{opacity: 1; visibility: visible;}
.lightbox-content{position: relative; max-width: 900px; max-height: 85vh; text-align: center;}
.lightbox-content img{max-width: 100%; max-height: 75vh; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.2);}
.lightbox-caption{color: #ffffff; margin-top: 15px; font-family: 'Poppins', sans-serif; font-size: 1.1em;}
.lightbox-close{position: absolute; top: -40px; right: 0; color: #ffffff; font-size: 30px; cursor: pointer; background: none; border: none; transition: color 0.3s ease;}
.lightbox-close:hover{color: #F4B41A;}
.contact-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px;}
.contact-card{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}
.contact-card h3{font-family: 'Poppins', sans-serif; color: #00529C; font-size: 1.5em; margin-top: 0; margin-bottom: 20px;}
.form-group{margin-bottom: 20px;}
.form-group label{display: block; font-size: 0.88em; font-weight: 600; color: #00529C; margin-bottom: 8px;}
.form-control{width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid #dce4ec; background: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 0.9em; color: #333; transition: all 0.3s ease;}
.form-control:focus{outline: none; border-color: #00529C; box-shadow: 0 0 0 3px rgba(0, 82, 156, 0.12);}
textarea.form-control{resize: vertical; min-height: 130px;}
.btn-send{width: 100%; background-color: #00529C; color: #ffffff; border: none; padding: 14px 28px; border-radius: 30px; font-weight: 700; font-size: 0.95em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 82, 156, 0.2);}
.btn-send:hover{background-color: #F4B41A; color: #111; box-shadow: 0 6px 20px rgba(244, 180, 26, 0.3); transform: translateY(-2px);}
.info-list{display: flex; flex-direction: column; gap: 20px;}
body.page-contact .info-item{display: flex; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); transition: all 0.3s ease;}
body.page-contact .info-item:hover{background: #ffffff; transform: translateX(6px); box-shadow: 0 8px 20px rgba(0, 82, 156, 0.08); border-color: rgba(0, 82, 156, 0.2);}
body.page-contact .info-icon{width: 44px; height: 44px; background: rgba(0, 82, 156, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #00529C; flex-shrink: 0;}
body.page-contact .info-icon svg{width: 20px; height: 20px; fill: currentColor;}
body.page-contact .info-text strong{display: block; color: #00529C; font-size: 0.92em; margin-bottom: 4px;}
body.page-contact .info-text span{color: #555; font-size: 0.88em; line-height: 1.5;}
.map-card{background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}
.map-wrapper{width: 100%; height: 380px; border-radius: 16px; overflow: hidden; border: 2px solid #ffffff;}
.map-wrapper iframe{width: 100%; height: 100%; border: 0;}
@media (max-width: 992px){
.footer-main{grid-template-columns: 1fr 1fr;}
.cert-grid{grid-template-columns: repeat(2, 1fr);}
.cert-card{grid-column: auto !important;}
.halal-grid{grid-template-columns: 1fr;}
.hero-content h1, .hero-content .hero-title{font-size: 2.5em;}
.services-grid{grid-template-columns: repeat(2, 1fr);}
.contact-grid{grid-template-columns: 1fr;}
}
@media (max-width: 768px){
header{width: 92% !important; top: 12px !important; padding: 10px 18px !important; border-radius: 25px !important;}
.logo-img{height: 26px;}
.menu-toggle{display: flex;}
nav{position: absolute !important; top: 60px !important; left: 0 !important; width: 100% !important; max-height: 80vh !important; overflow-y: auto !important; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 20px !important; padding: 20px 25px !important; flex-direction: column !important; gap: 16px !important; box-shadow: 0 12px 30px rgba(0, 82, 156, 0.15) !important; border: 1px solid rgba(0, 82, 156, 0.1) !important; display: none;}
nav.active{display: flex !important;}
nav a, nav .dropdown{margin-left: 0 !important; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.05);}
nav a{font-size: 1em !important; padding: 6px 0; display: block;}
nav .dropdown{flex-direction: column; align-items: flex-start; padding-top: 0; padding-bottom: 0;}
nav .dropdown-btn{margin-left: 0 !important; padding: 6px 0; width: 100%; font-size: 1em;}
nav .dropdown-content{position: static !important; transform: none !important; box-shadow: none !important; border: none !important; background: rgba(0, 82, 156, 0.04) !important; width: 100% !important; border-radius: 10px !important; margin-top: 5px !important; padding: 5px 0 !important;}
nav .dropdown-content a{padding: 8px 15px !important; font-size: 0.9em !important;}
.page-header{padding-top: 120px;}
.page-header h1{font-size: 2em;}
.cert-grid{grid-template-columns: 1fr;}
.halal-docs-section{padding: 30px 20px;}
.lang-floating{bottom: 15px; right: 15px; padding: 3px 5px;}
.lang-btn{padding: 5px 9px; font-size: 0.75em;}
.email-floating{bottom: 15px; left: 15px;}
.email-btn{width: 44px; height: 44px;}
.slide{padding: 100px 6% 220px 6%; text-align: center;}
.hero-content h1, .hero-content .hero-title{font-size: 2em;}
.hero-content p{font-size: 0.95em;}
.slider-btn{padding: 8px 14px; font-size: 16px; top: 40%;}
.dots-container{bottom: 210px;}
.floating-boxes{flex-direction: column; width: 90%; bottom: 20px; gap: 10px;}
.box{padding: 14px;}
.box h4{font-size: 0.95em;}
.box p{font-size: 0.8em;}
.about-section{flex-direction: column; padding: 25px 20px; gap: 25px; text-align: center;}
.about-text h2{font-size: 1.6em;}
.services-grid{grid-template-columns: 1fr;}
.map-container{flex-direction: column; gap: 30px;}
.map-frame-wrapper{width: 100%; height: 280px;}
.vision-mission-grid{grid-template-columns: 1fr;}
.about-card{padding: 30px 20px;}
.products-grid{grid-template-columns: 1fr;}
.contact-card{padding: 25px;}
}
@media (max-width: 576px){
.footer-main{grid-template-columns: 1fr; gap: 30px;}
.footer-bottom-bar{flex-direction: column; text-align: center;}
.footer-legal a{margin: 0 8px;}
.cert-logos{gap: 15px;}
.cert-img{height: 38px;}
.modal-cert-item{flex-direction: column; align-items: center; text-align: center;}
}

/* ===== Tambahan struktur bersama ===== */
.ambient-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 8% 6%,rgba(0,82,156,.16),transparent 42%),radial-gradient(circle at 92% 94%,rgba(244,180,26,.18),transparent 45%),radial-gradient(circle at 50% 45%,rgba(0,128,255,.08),transparent 40%)}
.skip-link{position:absolute;left:-999px;top:10px;z-index:3000;background:#00529C;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip-link:focus{left:10px}
:focus-visible{outline:3px solid #F4B41A;outline-offset:3px}
button.menu-toggle{border:0;padding:0;background:none}
nav .dropdown-btn{background:none;border:0;font-family:inherit;text-align:left}
nav .dropdown:focus-within .dropdown-content,nav .dropdown.open .dropdown-content{display:block}
.hero-content .hero-title{margin-top:.67em}
.box{display:block;text-decoration:none;color:inherit}
.lightbox-close{position:fixed;top:14px;right:18px;font-size:34px}
body.page-index .section-wrapper{padding:80px 20px}
@media (min-width:769px){nav .dropdown-btn{padding:0}}
@media (hover:none){.gallery-overlay{opacity:1;background:linear-gradient(to top,rgba(0,82,156,.9),transparent 65%)}.gallery-overlay p{display:none}}
@media (max-width:768px){body.page-index .section-wrapper{padding:50px 15px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== Formulir, WhatsApp, halaman hukum ===== */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;font-size:.82em;color:#555;line-height:1.5}
.form-check input{margin-top:3px;flex-shrink:0}
.form-check a{color:#00529C;font-weight:600}
.form-status{margin-top:14px;font-size:.9em;line-height:1.5;border-radius:12px}
.form-status.ok,.form-status.err{padding:12px 16px}
.form-status.ok{background:rgba(22,163,74,.1);color:#166534}
.form-status.err{background:rgba(220,38,38,.08);color:#991b1b}
.btn-send:disabled{opacity:.6;cursor:wait;transform:none}
.wa-floating{position:fixed;bottom:90px;left:25px;z-index:1002;width:50px;height:50px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.4);transition:transform .3s ease}
.wa-floating:hover{transform:scale(1.08)}
.wa-floating svg{width:28px;height:28px;fill:#fff}
.legal-content h2{font-family:'Poppins',sans-serif;color:#00529C;font-size:1.15em;margin:28px 0 10px}
.legal-content p,.legal-content li{color:#555;line-height:1.8;font-size:.95em}
.legal-content ul{padding-left:22px}
.legal-content a{color:#00529C;font-weight:600}
.legal-date{color:#888;font-size:.85em}
html[lang="en"] .only-id{display:none}
html:not([lang="en"]) .only-en{display:none}
@media (max-width:768px){.wa-floating{bottom:72px;left:15px;width:44px;height:44px}}

/* ===== Tahap 5: motion ===== */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#00529C,#F4B41A);transform:scaleX(0);transform-origin:left;z-index:1100;pointer-events:none}
header{view-transition-name:site-header;transition:top .4s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1),background .4s,box-shadow .4s,border-radius .4s,transform .35s cubic-bezier(.16,1,.3,1)}
header.hide{transform:translate(-50%,-160%)}
header:focus-within{transform:translateX(-50%)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s ease both vtOut}
::view-transition-new(root){animation:.3s ease both vtIn}
@keyframes vtIn{from{opacity:0}}
@keyframes vtOut{to{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.section-sub{text-align:center;color:#666;max-width:680px;margin:-25px auto 35px;font-size:.95em;line-height:1.6}
.stats-section{padding-bottom:0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.stat-card{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-bottom:4px solid #F4B41A;border-radius:20px;padding:28px 20px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,.03)}
.stat-number{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:2.6em;color:#00529C;line-height:1.1}
.stat-label{display:block;margin-top:8px;color:#555;font-size:.9em;font-weight:600}
.process{display:grid;grid-template-columns:270px 1fr;gap:28px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.process-steps{display:flex;flex-direction:column;gap:6px}
.process-step{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-radius:14px;padding:10px 12px;font:600 .88em 'Montserrat',sans-serif;color:#444;text-align:left;cursor:pointer;transition:background .25s ease,color .25s ease}
.process-step .n{flex:0 0 30px;height:30px;border-radius:50%;background:rgba(0,82,156,.1);color:#00529C;display:flex;align-items:center;justify-content:center;font-size:.85em;transition:background .25s ease,color .25s ease}
.process-step:hover{background:rgba(0,82,156,.06)}
.process-step.done .n{background:rgba(0,82,156,.25)}
.process-step.active{background:rgba(0,82,156,.1);color:#00529C}
.process-step.active .n{background:#F4B41A;color:#111}
.process-panel{position:relative;min-height:340px}
.process-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.process-slide.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.process-slide img{width:100%;height:100%;max-height:340px;object-fit:cover;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.1)}
.process-slide h3{font-family:'Poppins',sans-serif;color:#00529C;font-size:1.3em;margin:0 0 10px}
.process-slide p{color:#555;line-height:1.7;font-size:.93em;margin:0}
@media (max-width:992px){.process{grid-template-columns:1fr}.process-steps{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.process-step{flex:0 0 auto;white-space:nowrap}.process-panel{min-height:440px}.process-slide{grid-template-columns:1fr;align-content:start}.process-slide img{height:220px}}
@media (max-width:576px){.stat-number{font-size:2.1em}.process{padding:18px}}

/* ===== Peta dimuat setelah diklik ===== */
.map-facade{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(0,82,156,.08),rgba(244,180,26,.14)),#eef2f7;text-align:center;padding:20px}
.map-facade-box{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px}
.map-facade-box svg{width:42px;height:42px;fill:#00529C}
.map-facade-box strong{color:#00529C;font-family:'Poppins',sans-serif;font-size:1.05em}
.map-facade-box span{color:#555;font-size:.85em;line-height:1.5}
.map-load-btn{background:#00529C;color:#fff;border:0;border-radius:25px;padding:11px 26px;font:700 .9em 'Montserrat',sans-serif;cursor:pointer;margin-top:4px;transition:background .3s ease,color .3s ease}
.map-load-btn:hover{background:#F4B41A;color:#111}
.map-open-link{color:#00529C;font-size:.82em;font-weight:600}

/* Latar slide versi mobile (gambar potret ringan) */
@media (max-width:768px){
.slide-1{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.7)), url('../images/mobile/INSAN.webp') center/cover;}
.slides-ready .slide-2{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.6)), url('../images/mobile/Option%2024.webp') center/cover}
.slides-ready .slide-3{background: linear-gradient(rgba(0,82,156,0.7), rgba(0,0,0,0.8)), url('../images/mobile/Option%202.webp') center/cover}
.slides-ready .slide-4{background: linear-gradient(rgba(0,82,156,0.65), rgba(0,0,0,0.75)), url('../images/mobile/Team-Halal.webp') center/cover}
}