*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}body{background:#f4f6f9;color:#222;line-height:1.6;padding-top:70px}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button{cursor:pointer;border:none}.container{max-width:1200px;margin:0 auto;padding:0 20px}#mainHeader{position:fixed;top:0;width:100%;background:#0b3c5d;color:#fff;z-index:1000;padding:10px 20px;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform 0.3s ease;display:flex;justify-content:space-between;align-items:center}.header-inner{display:flex;align-items:center;gap:12px}.header-text{display:flex;flex-direction:column;gap:2px}.logo{height:40px;width:40px;object-fit:contain}.school-name{font-weight:700;font-size:18px;letter-spacing:0.5px}.school-subtitle{font-size:11px;opacity:0.9;font-weight:400}#mainHeader nav a{margin-left:16px;color:#fff;font-weight:500;text-decoration:none;transition:0.2s}#mainHeader nav a:hover{color:#f7b733}.login-btn{background:#c9bb00;color:#0b3c5d;padding:6px 14px;border-radius:20px;font-weight:600}.hero-section{position:relative;height:65vh;overflow:hidden;background:linear-gradient(135deg,#0b3c5d 0%,#1e6fa3 100%);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}.carousel-container{position:absolute;inset:0;width:100%;height:100%}.carousel-slides{position:relative;width:100%;height:100%}.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease;background-size:cover;background-position:center}.carousel-slide.active{opacity:1}.carousel-overlay{position:absolute;inset:0;background:rgba(11,60,93,0.5)}.carousel-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;z-index:5;padding:0 25px}.carousel-btn{background:rgba(255,255,255,0.3);color:#fff;border:none;width:45px;height:45px;border-radius:50%;font-size:20px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}.carousel-btn:hover{background:rgba(255,255,255,0.5);transform:scale(1.1)}.carousel-indicators{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}.carousel-indicator{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s ease}.carousel-indicator.active{background:#fff;width:30px;border-radius:5px}.hero-overlay{position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%230b3c5d" width="1200" height="600"/><path fill="%23ffffff" fill-opacity="0.05" d="M0,300 Q300,200 600,300 T1200,300 L1200,600 L0,600 Z"/></svg>');background-size:cover;opacity:0;z-index:0}.hero-content{position:relative;z-index:10;animation:fadeInUp 1s ease-out}.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:20px;line-height:1.2;text-shadow:2px 2px 4px rgba(0,0,0,0.2)}.hero-subtitle{font-size:1.3rem;margin-bottom:40px;opacity:0.95;text-shadow:1px 1px 2px rgba(0,0,0,0.2)}.hero-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.hero-btn{padding:14px 36px;border-radius:50px;font-weight:600;transition:all 0.3s ease;border:2px solid #fff;display:inline-block}.btn-primary{background:#fff;color:#0b3c5d;text-decoration:none}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.2)}.btn-secondary{background:transparent;color:#fff;border:2px solid #fff;text-decoration:none}.btn-secondary:hover{background:#fff;color:#0b3c5d;transform:translateY(-3px)}.hero-slide-indicators{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}.section-title{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:15px;color:#0b3c5d;position:relative;padding-bottom:20px}.section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,#f7b733,#fc4a1a);border-radius:2px}.section-subtitle{text-align:center;color:#666;margin-bottom:40px;font-size:1.1rem}.about-section{padding:80px 20px;background:linear-gradient(135deg,#fff 0%,#f4f6f9 100%)}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:50px}.about-card{background:#fff;padding:40px 30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.08);text-align:center;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);border-top:4px solid #0b3c5d}.about-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.12);border-top-color:#f7b733}.about-icon{font-size:3rem;margin-bottom:20px}.about-card h3{font-size:1.5rem;color:#0b3c5d;margin-bottom:15px}.about-card p{color:#666;line-height:1.8;font-size:0.95rem}.stats-section{padding:80px 20px;background:linear-gradient(135deg,#0b3c5d 0%,#1e6fa3 100%)}.stats-title{color:#fff!important}.stats-title::after{background:linear-gradient(90deg,#f7b733,#fc4a1a)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-top:50px;color:#fff}.stat-card{background:rgba(255,255,255,0.1);padding:40px 20px;border-radius:16px;text-align:center;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease;color:#fff}.stat-card:hover{background:rgba(255,255,255,0.15);transform:translateY(-5px)}.stat-number{font-size:3rem;font-weight:800;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);color:#fff}.stat-label{font-size:1rem;opacity:0.95;color:#fff}.features-section{padding:80px 20px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:50px}.feature-card{background:#fff;padding:40px 30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.08);text-align:center;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1)}.feature-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.12)}.feature-icon{font-size:3rem;margin-bottom:20px;display:block}.feature-card h3{font-size:1.3rem;color:#0b3c5d;margin-bottom:12px}.feature-card p{color:#666;line-height:1.7;font-size:0.95rem}.ekstrakurikuler{padding:80px 20px;background:#f4f6f9}.ekstrakurikuler .section-title{color:#0b3c5d}.ekstra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-top:50px}.ekstra-card{background:#fff;padding:35px 30px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,0.08);text-align:center;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);position:relative;border-left:5px solid #ddd;overflow:hidden}.ekstra-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(247,183,51,0.1),rgba(252,74,26,0.1));transform:scaleX(0);transform-origin:left;transition:transform 0.35s ease;z-index:0}.ekstra-card.active::before{display:none}.ekstra-card.active{border-left-color:#0b3c5d;background:linear-gradient(135deg,#f4f6f9 0%,#e8f2f9 100%)}.ekstra-card:hover::before{transform:scaleX(1)}.ekstra-card:hover{transform:translateY(-8px);box-shadow:0 12px 35px rgba(0,0,0,0.15)}.ekstra-icon{font-size:3rem;margin-bottom:15px;display:block;animation:bounce 2s ease-in-out infinite}.ekstra-card h3{color:#0b3c5d;font-size:1.25rem;margin-bottom:12px;font-weight:700}.ekstra-card p{color:#666;font-size:0.95rem;line-height:1.6;margin-bottom:15px;position:relative;z-index:1}.badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:0.75rem;font-weight:700;background:#f0f0f0;color:#666;text-transform:uppercase;position:relative;z-index:1}.badge-required{background:#0b3c5d;color:#fff}.ekstra-note{text-align:center;color:#999;font-size:0.9rem;margin-top:30px;padding:25px;background:#fff;border-radius:12px;border-left:4px solid #f7b733}.spmb.enrollment-section{margin:80px auto;background:linear-gradient(135deg,#0b3c5d,#1e6fa3);color:#fff;padding:80px 40px;border-radius:22px;text-align:center;max-width:1000px;box-shadow:0 15px 40px rgba(11,60,93,0.3)}.enrollment-section h2{font-size:2.2rem;margin-bottom:15px;font-weight:800}.enrollment-subtitle{margin:10px 0 40px;font-size:1.1rem;opacity:0.95}.enrollment-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px}.cta.cta-primary{padding:16px 40px;border-radius:30px;background:#f7b733;color:#0b3c5d;font-weight:600;display:inline-block;transition:all 0.3s ease}.cta.cta-primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(247,183,51,0.3)}.cta.cta-secondary{padding:16px 40px;border-radius:30px;background:transparent;color:#fff;border:2px solid #fff;font-weight:600;display:inline-block;transition:all 0.3s ease}.cta.cta-secondary:hover{background:#fff;color:#0b3c5d;transform:translateY(-3px)}.unggulan{max-width:1000px;margin:80px auto;padding:0 20px}.unggulan h2{text-align:center;margin-bottom:50px;font-size:2.5rem;font-weight:800;color:#0b3c5d}.vision-content{display:grid;gap:20px}.vision-item{background:#fff;padding:30px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,0.08);border-left:4px solid #0b3c5d;transition:all 0.3s ease}.vision-item:hover{box-shadow:0 12px 30px rgba(0,0,0,0.12);border-left-color:#f7b733}.vision-item h3{color:#0b3c5d;margin-bottom:10px;font-size:1.2rem}.vision-item p{color:#666;line-height:1.7}.spmb{margin:80px auto;background:linear-gradient(135deg,#f7b733,#fc4a1a);color:#fff;padding:60px 40px;border-radius:22px;text-align:center;max-width:1000px;box-shadow:0 15px 40px rgba(252,74,26,0.3)}.spmb h2{font-size:2rem;margin-bottom:15px}.spmb p{margin:10px 0 30px;font-size:1.1rem;opacity:0.95}.spmb-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0;max-width:800px;margin-left:auto;margin-right:auto}.spmb-item{background:rgba(255,255,255,0.1);padding:25px;border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease}.spmb-item:hover{background:rgba(255,255,255,0.15);transform:translateY(-3px)}.spmb-item h3{margin-bottom:10px;font-size:1rem}.spmb-item p{font-size:0.9rem;opacity:0.9}.spmb .cta{display:inline-block;margin-top:20px;padding:16px 40px;border-radius:30px;background:#fff;color:#fc4a1a;font-weight:600;transition:transform 0.3s ease,box-shadow 0.3s ease}.spmb .cta:hover{transform:translateY(-4px);box-shadow:0 12px 25px rgba(0,0,0,0.2)}.spmb .cta:active{transform:scale(0.96)}.gallery-preview{padding:80px 20px}.gallery-card{background:linear-gradient(135deg,#0b3c5d 0%,#1e6fa3 100%);border-radius:18px;padding:60px 40px;color:#fff;cursor:pointer;text-align:center;position:relative;overflow:hidden;box-shadow:0 15px 40px rgba(11,60,93,0.3);transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background 0.3s ease}.gallery-card:hover .gallery-overlay{background:rgba(0,0,0,0.2)}.gallery-card h3{font-size:2rem;margin-bottom:15px;font-weight:800;position:relative;z-index:2}.gallery-card p{font-size:1rem;opacity:0.9;position:relative;z-index:2}.gallery-cta{display:inline-block;margin-top:20px;font-size:1.1rem;font-weight:600;position:relative;z-index:2;animation:slideRight 2s ease-in-out infinite}.staf-section{padding:80px 20px;background:#f7f9fc}.staf-section h2{text-align:center;margin-bottom:15px;font-size:2.5rem;font-weight:800;color:#0b3c5d}.staf-subtitle{text-align:center;color:#666;margin-bottom:40px}.staf-outer-card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 22px rgba(0,0,0,.08)}.staf-inner-card{background:#f1f4f9;border-radius:16px;padding:18px;overflow:hidden}.staf-slider{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:10px}.staf-slider::-webkit-scrollbar{height:6px}.staf-slider::-webkit-scrollbar-thumb{background:#cfd6e0;border-radius:10px}.staf-slider::-webkit-scrollbar-track{background:#f1f4f9}.staf-card{min-width:160px;background:#fff;border-radius:14px;padding:12px;border:1px solid #ddd;cursor:pointer;transition:.3s;text-align:center}.staf-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.12)}.staf-card img{border-radius:10px;border:2px solid #ddd;background:#eee;height:100px;width:100%;object-fit:cover}.staf-card .jabatan{margin-top:8px;font-size:14px;font-weight:600;color:#2c3e50}.staf-note{text-align:center;color:#999;font-size:0.9rem;margin-top:15px}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);justify-content:center;align-items:center;z-index:2000;animation:fadeIn 0.3s ease}.modal-content{background:#fff;border-radius:18px;padding:24px;width:90%;max-width:420px;text-align:center;animation:slideUp 0.3s ease}.modal-content img{width:150px;border-radius:12px;border:3px solid #ddd;margin:0 auto 12px;background:#eee;height:150px;object-fit:cover}.modal-content ul{list-style:none;text-align:left;margin-top:14px;font-size:14px}.modal-content li{margin-bottom:6px}.close{float:right;font-size:22px;cursor:pointer;transition:color 0.2s}.close:hover{color:#f7b733}.ai-promo{background:linear-gradient(135deg,#0b3c5d,#1e6fa3);color:white;padding:100px 20px;text-align:center;position:relative;overflow:hidden}.ai-promo::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%230b3c5d" width="1200" height="400"/><path fill="%23ffffff" fill-opacity="0.03" d="M0,200 Q300,100 600,200 T1200,200 L1200,400 L0,400 Z"/></svg>');background-size:cover;opacity:0.5}.ai-content{position:relative;z-index:2;max-width:800px;margin:0 auto}.ai-promo h2{font-size:2.5rem;margin-bottom:15px;font-weight:800;background:linear-gradient(135deg,#f7b733,#fc4a1a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ai-promo p{margin:15px 0 30px;font-size:1.15rem;opacity:0.95;line-height:1.8}.ai-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:40px 0;max-width:900px;margin-left:auto;margin-right:auto}.ai-feature-item{background:rgba(255,255,255,0.1);padding:20px;border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease}.ai-feature-item:hover{background:rgba(255,255,255,0.15);transform:translateY(-3px)}.ai-feature-item p{font-size:0.95rem;margin:0}.ai-button{display:inline-block;margin-top:25px;padding:16px 45px;border-radius:30px;background:#fff;color:#0b3c5d;font-weight:700;transition:all .3s ease;box-shadow:0 8px 20px rgba(0,0,0,0.2);font-size:1rem}.ai-button:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.3);background:#f7b733;color:#0b3c5d}.ai-button:active{transform:scale(.96)}.cta-section{padding:80px 20px;background:linear-gradient(135deg,#0b3c5d 0%,#1e6fa3 100%);color:#fff;text-align:center}.cta-section h2{font-size:2.5rem;font-weight:800;margin-bottom:15px}.cta-section p{font-size:1.1rem;margin-bottom:40px;opacity:0.95}.cta-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.cta-btn{padding:14px 36px;border-radius:50px;font-weight:600;transition:all 0.3s ease;border:2px solid #fff;display:inline-block;text-decoration:none}.cta-btn-primary{background:#fff;color:#0b3c5d}.cta-btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.2)}.cta-btn-secondary{background:transparent;color:#fff}.cta-btn-secondary:hover{background:#fff;color:#0b3c5d;transform:translateY(-3px)}.quick-links{padding:60px 20px;background:#f4f6f9}.quick-links h3{text-align:center;color:#0b3c5d;margin-bottom:40px;font-size:1.8rem;font-weight:800}.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}.quick-link{display:block;padding:25px;background:#fff;border-radius:14px;color:#0b3c5d;font-weight:600;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;border:2px solid transparent}.quick-link:hover{transform:translateY(-5px);border-color:#0b3c5d;box-shadow:0 12px 30px rgba(0,0,0,0.12)}.card{background:#fff;border-radius:18px;padding:22px;margin:20px auto;max-width:1000px;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.3s;text-align:center}.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}.galeri-card{cursor:pointer}.galeri-card h3{font-size:18px;margin-bottom:6px;color:#0b3c5d}.galeri-card p{font-size:14px;color:#555}.galeri-card:hover{transform:translateY(-4px)}footer{background:#0b3c5d;color:white;padding:60px 20px 30px;text-align:left}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;max-width:1200px;margin:0 auto;margin-bottom:30px}.footer-section h4{margin-bottom:15px;font-size:1.1rem;color:#f7b733}.footer-section p{line-height:1.8;opacity:0.9;font-size:0.95rem}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);opacity:0.8}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;padding:30px 20px}.cards .card{text-align:center;font-size:15px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideRight{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}@media(max-width:1024px){.hero-title{font-size:2.8rem}.section-title{font-size:2rem}.about-grid,.features-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-content{grid-template-columns:1fr}.vision-content{max-width:100%}}@media(max-width:768px){.hero-section{height:50vh}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.hero-buttons{gap:10px}.header-text{gap:1px}.school-subtitle{display:none}.school-name{font-size:16px}#mainHeader nav a{font-size:12px;margin-left:12px}.section-title{font-size:1.8rem}.about-grid,.features-grid,.stats-grid{grid-template-columns:1fr}.spmb{margin:40px 20px;padding:40px 20px}.spmb h2{font-size:1.5rem}.spmb-content{grid-template-columns:1fr}.cta-buttons{flex-direction:column}.cta-btn{width:100%}.links-grid{grid-template-columns:repeat(2,1fr)}.footer-content{grid-template-columns:1fr;gap:30px}.hero-btn{padding:12px 28px;font-size:0.95rem}}.burger{display:none;font-size:26px;cursor:pointer;color:#fff}@media(max-width:768px){#mainHeader nav{display:none;flex-direction:column;background:#0b3c5d;position:absolute;top:70px;right:0;width:100%;text-align:center;padding:10px 0;box-shadow:0 8px 16px rgba(0,0,0,0.2)}#mainHeader nav a{margin:10px 0;display:block}.burger{display:block}#mainHeader nav.active{display:flex}}