/* Sudut Ilmu - Cheerful Educational Theme */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --pink: #E91E63; --pink-light: #F48FB1; --pink-bg: #FCE4EC;
  --yellow: #FFC107; --yellow-light: #FFE082; --yellow-bg: #FFF8E1;
  --blue: #2196F3; --blue-light: #90CAF9; --blue-bg: #E3F2FD;
  --green: #4CAF50; --green-light: #A5D6A7; --green-bg: #E8F5E9;
  --earth: #795548; --earth-light: #BCAAA4;
  --text: #37474F; --text-light: #78909C; --white: #ffffff;
  --bg: #FAFAFA; --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --radius: 20px; --font: 'Nunito', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--text); line-height:1.7; background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font); font-weight:800; color:var(--text); line-height:1.3; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* LOADER */
#loading { position:fixed; inset:0; background:var(--white); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s; }
#loading.loaded { opacity:0; pointer-events:none; }
.loader-circle { width:50px; height:50px; border:4px solid var(--pink-light); border-top-color:var(--pink); border-radius:50%; animation:spin 1s linear infinite; }
.loader-text { margin-top:16px; font-weight:700; color:var(--pink); }
.loader { text-align:center; }
@keyframes spin { to { transform:rotate(360deg); } }

/* HEADER */
header { position:fixed; width:100%; top:0; background:rgba(255,255,255,0.9); backdrop-filter:blur(20px); z-index:1000; transition:.3s; border-bottom:1px solid rgba(0,0,0,0.05); }
header.scrolled { background:rgba(255,255,255,0.98); box-shadow:0 4px 30px rgba(0,0,0,0.08); }
header .navbar { padding:10px 0; transition:.3s; }
header.scrolled .navbar { padding:6px 0; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none!important; }
.logo img { width:48px; height:48px; border-radius:14px; box-shadow:0 4px 15px rgba(233,30,99,0.2); transition:.3s; }
.logo:hover img { transform:scale(1.05) rotate(3deg); }
.logo h1 { font-size:22px; margin:0; background:linear-gradient(135deg,var(--pink),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hamburger-btn { border:none; padding:8px; background:0 0; display:flex; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger-btn:focus { box-shadow:none; }
.hamburger-line { display:block; width:26px; height:3px; background:linear-gradient(90deg,var(--pink),var(--blue)); border-radius:5px; transition:.3s; }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) { transform:rotate(45deg) translate(5px,6px); }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity:0; }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) { transform:rotate(-45deg) translate(5px,-6px); }
.navbar-nav .nav-link { color:var(--text)!important; font-weight:700; font-size:15px; padding:8px 14px!important; position:relative; transition:.3s; }
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active { color:var(--pink)!important; }
.navbar-nav .nav-link::after { content:""; position:absolute; width:0; height:3px; bottom:2px; left:14px; background:linear-gradient(90deg,var(--pink),var(--yellow)); border-radius:2px; transition:.3s; }
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after { width:calc(100% - 28px); }

/* HERO */
.hero-section { position:relative; min-height:100vh; display:flex; align-items:center; padding:140px 0 100px; background:linear-gradient(160deg,var(--pink-bg) 0%,var(--yellow-bg) 40%,var(--blue-bg) 80%,var(--green-bg) 100%); overflow:hidden; }
.hero-section::before { content:""; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(233,30,99,0.1),transparent 70%); border-radius:50%; animation:floatBlob 8s ease-in-out infinite; }
.hero-section::after { content:""; position:absolute; bottom:-150px; left:-150px; width:500px; height:500px; background:radial-gradient(circle,rgba(33,150,243,0.1),transparent 70%); border-radius:50%; animation:floatBlob 10s ease-in-out infinite reverse; }
@keyframes floatBlob { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-30px) scale(1.05)} }
.hero-content { position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; }
.hero-logo { width:120px; height:120px; border-radius:30px; box-shadow:0 20px 60px rgba(233,30,99,0.2); margin-bottom:24px; animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; background:var(--white); border-radius:50px; font-weight:700; font-size:14px; color:var(--pink); box-shadow:0 4px 20px rgba(0,0,0,0.06); margin-bottom:24px; }
.hero-title { font-size:clamp(2.2rem,5vw,3.8rem); margin-bottom:20px; }
.hero-title span { background:linear-gradient(135deg,var(--pink),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-subtitle { font-size:1.15rem; color:var(--text-light); max-width:600px; margin:0 auto 20px; line-height:1.8; }
.hero-quote { font-size:1rem; color:var(--text); font-style:italic; background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); padding:16px 32px; border-radius:16px; display:inline-block; margin-bottom:32px; border-left:4px solid var(--yellow); }
.btn-cta { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; background:linear-gradient(135deg,var(--pink),var(--blue)); color:var(--white); border-radius:50px; font-weight:800; font-size:1.05rem; border:none; cursor:pointer; transition:.3s; box-shadow:0 10px 30px rgba(233,30,99,0.3); position:relative; overflow:hidden; }
.btn-cta::before { content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transition:.5s; }
.btn-cta:hover::before { left:100%; }
.btn-cta:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(233,30,99,0.4); color:white; }

/* Blob divider */
.blob-divider { position:relative; height:80px; margin-top:-40px; }
.blob-divider svg { position:absolute; bottom:0; width:100%; }

/* SECTION COMMON */
.section { padding:100px 0; position:relative; }
.section-header { text-align:center; margin-bottom:60px; }
.section-header h2 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:12px; }
.section-header h2 span { background:linear-gradient(135deg,var(--pink),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-header p { color:var(--text-light); font-size:1.1rem; max-width:600px; margin:0 auto; }
.section-header::after { content:""; display:block; width:60px; height:4px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--blue)); border-radius:4px; margin:16px auto 0; }

/* FOUNDER */
.founder-section { background:var(--white); }
.founder-card { display:flex; align-items:center; gap:60px; background:linear-gradient(135deg,var(--pink-bg),var(--yellow-bg)); border-radius:32px; padding:50px; box-shadow:var(--shadow); }
.founder-avatar { flex-shrink:0; }
.founder-avatar img { width:220px; height:220px; border-radius:24px; object-fit:cover; border:5px solid var(--white); box-shadow:0 16px 40px rgba(233,30,99,0.15); }
.founder-info h3 { font-size:2rem; margin-bottom:8px; }
.founder-role { color:var(--pink); font-weight:700; font-size:1.1rem; margin-bottom:20px; display:block; }
.founder-details { list-style:none; padding:0; }
.founder-details li { display:flex; align-items:center; gap:12px; padding:10px 0; font-size:1.05rem; border-bottom:1px dashed rgba(0,0,0,0.08); }
.founder-details li:last-child { border:none; }
.founder-details i { color:var(--pink); font-size:1.2rem; width:24px; text-align:center; }

/* FILOSOFI CARDS */
.filosofi-section { background:linear-gradient(160deg,var(--blue-bg),var(--green-bg)); }
.filosofi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.filosofi-card { background:var(--white); border-radius:24px; padding:40px 32px; box-shadow:var(--shadow); transition:.4s; position:relative; overflow:hidden; border-top:5px solid transparent; }
.filosofi-card:nth-child(1) { border-top-color:var(--pink); }
.filosofi-card:nth-child(2) { border-top-color:var(--blue); }
.filosofi-card:nth-child(3) { border-top-color:var(--green); }
.filosofi-card:hover { transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,0.12); }
.filosofi-icon { width:70px; height:70px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--white); margin-bottom:20px; }
.filosofi-card:nth-child(1) .filosofi-icon { background:linear-gradient(135deg,var(--pink),var(--pink-light)); }
.filosofi-card:nth-child(2) .filosofi-icon { background:linear-gradient(135deg,var(--blue),var(--blue-light)); }
.filosofi-card:nth-child(3) .filosofi-icon { background:linear-gradient(135deg,var(--green),var(--green-light)); }
.filosofi-card h4 { font-size:1.3rem; margin-bottom:14px; }
.filosofi-card p { font-size:.95rem; line-height:1.8; color:var(--text-light); }

/* TENTANG */
.tentang-section { background:var(--white); }
.tentang-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-bottom:48px; }
.tentang-point { display:flex; align-items:flex-start; gap:16px; padding:24px; background:linear-gradient(135deg,rgba(233,30,99,0.04),rgba(33,150,243,0.04)); border-radius:20px; transition:.3s; }
.tentang-point:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.tentang-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; color:var(--white); }
.tentang-point:nth-child(1) .tentang-icon { background:linear-gradient(135deg,var(--pink),#AD1457); }
.tentang-point:nth-child(2) .tentang-icon { background:linear-gradient(135deg,var(--green),#2E7D32); }
.tentang-point:nth-child(3) .tentang-icon { background:linear-gradient(135deg,var(--blue),#1565C0); }
.tentang-point h4 { font-size:1.1rem; margin-bottom:4px; }
.visi-box { background:linear-gradient(135deg,var(--pink),var(--blue)); color:var(--white); border-radius:24px; padding:40px; text-align:center; position:relative; overflow:hidden; }
.visi-box::before { content:""; position:absolute; top:-50px; right:-50px; width:200px; height:200px; background:rgba(255,255,255,0.08); border-radius:50%; }
.visi-box h3 { font-size:1.5rem; margin-bottom:16px; color:var(--white); }
.visi-box p { font-size:1.05rem; line-height:1.8; max-width:800px; margin:0 auto; opacity:.95; }

/* PILAR & PROGRAM */
.pilar-section { background:linear-gradient(160deg,#1a1a2e,#16213e,#0f3460); color:var(--white); }
.pilar-section .section-header h2,.pilar-section .section-header h2 span { color:var(--white); -webkit-text-fill-color:var(--white); }
.pilar-section .section-header p { color:rgba(255,255,255,0.7); }
.pilar-section .section-header::after { background:linear-gradient(90deg,var(--pink),var(--yellow)); }
.pilar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:60px; }
.pilar-card { text-align:center; padding:40px 24px; background:rgba(255,255,255,0.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); border-radius:24px; transition:.4s; }
.pilar-card:hover { transform:translateY(-8px); background:rgba(255,255,255,0.1); border-color:var(--pink); }
.pilar-card-icon { width:80px; height:80px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; }
.pilar-card:nth-child(1) .pilar-card-icon { background:linear-gradient(135deg,var(--pink),var(--pink-light)); }
.pilar-card:nth-child(2) .pilar-card-icon { background:linear-gradient(135deg,var(--yellow),#FFB300); color:#5D4037; }
.pilar-card:nth-child(3) .pilar-card-icon { background:linear-gradient(135deg,var(--blue),var(--blue-light)); }
.pilar-card h4 { font-size:1.2rem; color:var(--white); }
.program-subtitle { text-align:center; margin-bottom:36px; }
.program-subtitle h3 { font-size:1.6rem; color:var(--white); margin-bottom:8px; }
.program-subtitle p { color:rgba(255,255,255,0.6); }
.badges-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.program-badge { display:flex; align-items:center; gap:14px; padding:18px 24px; background:rgba(255,255,255,0.08); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.08); border-radius:16px; transition:.3s; }
.program-badge:hover { background:rgba(255,255,255,0.14); transform:translateX(6px); border-color:var(--yellow); }
.program-badge i.fa-check-circle { color:var(--yellow); font-size:1.3rem; flex-shrink:0; }
.program-badge span { font-weight:700; font-size:.95rem; }

/* INDIKATOR */
.indikator-section { background:var(--white); }
.steps-container { max-width:700px; margin:0 auto; position:relative; }
.steps-container::before { content:""; position:absolute; left:32px; top:0; bottom:0; width:4px; background:linear-gradient(to bottom,var(--pink),var(--yellow),var(--green),var(--blue)); border-radius:4px; }
.step-item { display:flex; align-items:flex-start; gap:24px; margin-bottom:36px; position:relative; }
.step-number { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.2rem; color:var(--white); flex-shrink:0; z-index:1; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.step-item:nth-child(1) .step-number { background:linear-gradient(135deg,var(--pink),#C2185B); }
.step-item:nth-child(2) .step-number { background:linear-gradient(135deg,#FF9800,var(--yellow)); }
.step-item:nth-child(3) .step-number { background:linear-gradient(135deg,var(--green),#2E7D32); }
.step-item:nth-child(4) .step-number { background:linear-gradient(135deg,var(--blue),#1565C0); }
.step-item:nth-child(5) .step-number { background:linear-gradient(135deg,#9C27B0,#7B1FA2); }
.step-content { background:var(--bg); border-radius:16px; padding:20px 28px; flex:1; transition:.3s; }
.step-content:hover { transform:translateX(6px); box-shadow:var(--shadow); }
.step-content h4 { font-size:1.1rem; margin-bottom:4px; }
.step-content p { font-size:.9rem; color:var(--text-light); margin:0; }

/* GALERI */
.galeri-section { background:linear-gradient(160deg,var(--yellow-bg),var(--green-bg)); }
.galeri-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.galeri-item { border-radius:20px; overflow:hidden; position:relative; cursor:pointer; aspect-ratio:4/3; box-shadow:var(--shadow); transition:.4s; }
.galeri-item:hover { transform:translateY(-6px) scale(1.02); }
.galeri-item img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.galeri-item:hover img { transform:scale(1.08); }
.galeri-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.7),transparent); display:flex; align-items:flex-end; padding:20px; opacity:0; transition:.3s; }
.galeri-item:hover .galeri-overlay { opacity:1; }
.galeri-overlay span { color:var(--white); font-weight:700; font-size:.95rem; }

/* REFLEKSI */
.refleksi-section { background:linear-gradient(160deg,#1a1a2e,#16213e); color:var(--white); position:relative; overflow:hidden; }
.refleksi-section::before { content:""; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(233,30,99,0.1),transparent); border-radius:50%; }
.quote-card { text-align:center; max-width:800px; margin:0 auto 48px; padding:40px; background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.08); border-radius:24px; }
.quote-card .quote-icon { font-size:2.5rem; color:var(--yellow); margin-bottom:16px; }
.quote-card blockquote { font-size:1.2rem; font-style:italic; line-height:1.8; margin:0; color:rgba(255,255,255,0.9); }
.quote-card cite { display:block; margin-top:16px; color:var(--yellow); font-weight:700; font-style:normal; }

/* FOOTER */
footer { background:linear-gradient(160deg,#0d1117,#161b22); color:rgba(255,255,255,0.8); padding:60px 0 0; }
.footer-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand .logo img { width:48px; height:48px; }
.footer-brand .logo h5 { color:var(--white); margin:0; font-size:1.2rem; }
.footer-brand p { font-size:.9rem; margin-top:12px; }
.footer-logos { display:flex; align-items:center; gap:16px; margin-top:16px; }
.footer-logos img { width:40px; height:40px; border-radius:10px; }
.footer-bottom { text-align:center; padding:24px 0; }
.footer-bottom p { font-size:.9rem; margin:4px 0; }
.footer-thankyou { font-size:1.5rem; font-weight:900; background:linear-gradient(135deg,var(--pink),var(--yellow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }

/* SCROLL TO TOP */
.scroll-to-top { position:fixed; bottom:30px; right:30px; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--blue)); color:var(--white); border:none; font-size:1.2rem; cursor:pointer; opacity:0; visibility:hidden; transition:.3s; box-shadow:0 8px 24px rgba(233,30,99,0.3); z-index:999; }
.scroll-to-top.visible { opacity:1; visibility:visible; }
.scroll-to-top:hover { transform:translateY(-4px); }

/* MODAL */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:9999; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-close { position:absolute; top:20px; right:30px; color:var(--white); font-size:2rem; cursor:pointer; z-index:1; }
.modal-content { max-width:90%; max-height:90vh; border-radius:12px; }
.video-modal-content { width:90%; max-width:900px; aspect-ratio:16/9; }
.video-modal-content iframe { width:100%; height:100%; border-radius:12px; }
#caption { text-align:center; color:var(--white); margin-top:12px; }

/* Decorative blobs */
.deco-blob { position:absolute; border-radius:50%; opacity:.06; pointer-events:none; }

/* RESPONSIVE */
@media(max-width:992px) {
  .founder-card { flex-direction:column; text-align:center; gap:32px; padding:36px; }
  .founder-avatar img { width:180px; height:180px; }
  .pilar-grid { grid-template-columns:1fr; }
  .section { padding:70px 0; }
}
@media(max-width:768px) {
  .hero-section { padding:120px 0 70px; }
  .hero-logo { width:90px; height:90px; }
  .filosofi-grid { grid-template-columns:1fr; }
  .tentang-points { grid-template-columns:1fr; }
  .badges-grid { grid-template-columns:1fr; }
  .galeri-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .visi-box { padding:28px 20px; }
  .steps-container::before { left:28px; }
  .step-number { width:56px; height:56px; font-size:1rem; }
  .founder-card { padding:28px; }
}
@media(max-width:576px) {
  .hero-title { font-size:1.8rem; }
  .section-header h2 { font-size:1.5rem; }
  .btn-cta { padding:14px 28px; font-size:.95rem; }
  .pilar-card { padding:28px 16px; }
}