/* ---------- Variables ---------- */
:root{
  --blue-deep: #0A3D62;   /* primary */
  --blue-mid:  #1976D2;
  --accent:    #FF6B35;   /* energetic orange */
  --muted:     #6B7280;
  --white:     #F8F9FA;
  --glass:     rgba(255,255,255,0.06);
  --max-width: 1100px;
  --radius:    12px;
  --container-pad: 20px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#f4f6f8;color:#111}
a{color:inherit}

/* NAVBAR */
.nav-wrap{
  background: linear-gradient(180deg,var(--blue-deep), #07283a);
  color:var(--white);
  position:sticky;
  top:0;
  z-index:999;
  box-shadow: 0 6px 18px rgba(4,12,28,0.35);
}
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px var(--container-pad);
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
}
.brand{font-weight:700;color:var(--white);text-decoration:none}
.main-nav{display:flex;gap:14px;align-items:center}
.main-nav a{color:var(--white);text-decoration:none;padding:8px 10px;border-radius:8px;transition:all .18s}
.main-nav a:hover{background:rgba(255,255,255,0.06)}
.main-nav a.active{background:var(--white);color:var(--blue-deep);font-weight:700}
.hamburger{display:none;background:transparent;border:0;color:var(--white);font-size:20px}

/* HERO */
.hero{
  min-height:72vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--white);
  overflow:hidden;
  /* ganti path foto background di sini (update sesuai nama file di folder images) */
  background: center center / cover no-repeat url('images/bg.jpg');
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%);}
.hero-inner{position:relative;z-index:2;padding:36px;width:100%;max-width:980px}
.hero h1{font-size:2.6rem;margin:0 0 8px;color:var(--white);text-shadow:0 6px 20px rgba(0,0,0,0.6)}
.lead{margin:0 0 18px;color:rgba(248,249,250,0.9);font-size:1.05rem}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;transition:all .18s}
.btn.primary{background:var(--accent);color:var(--white);box-shadow:0 8px 24px rgba(255,107,53,0.16)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,107,53,0.2)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.12);color:var(--white)}

/* Sections & Container */
.section{padding:48px 0}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-pad)}
.card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:0 8px 30px rgba(16,24,40,0.06)}

/* Section Titles */
.section-title{font-size:1.4rem;color:var(--blue-deep);margin-bottom:6px}
.section-sub{color:var(--muted);margin-bottom:14px}

/* Gallery (home preview) */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.gallery-item{background:linear-gradient(180deg, #fff, #fbfdff);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .18s, box-shadow .18s}
.gallery-item img{width:100%;height:230px;object-fit:cover;display:block}
.gallery-item figcaption{padding:10px 12px;color:var(--muted);font-size:0.95rem}
.gallery-item:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(12,24,48,0.12)}

/* Profil */
.profil-section{padding:60px 0;background:linear-gradient(180deg,#fff,#f7fbff)}
.profil-card{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}
.profil-photo img{width:240px;height:240px;border-radius:50%;object-fit:cover;border:6px solid var(--blue-mid)}
.profil-right h2{color:var(--blue-deep);margin-bottom:8px}

/* Timeline */
.timeline-section{padding:48px 0;background:var(--light-bg)}
.timeline{max-width:900px;margin:auto;background:var(--white);padding:28px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.timeline .year{font-weight:700;color:var(--accent);margin-top:18px}

/* Nilai iframe */
.iframe-container{margin-top:12px}
.iframe-container iframe{width:100%;height:520px;border:0;border-radius:8px;box-shadow:0 10px 30px rgba(10,20,36,0.06)}
.spreadsheet-container {
  position: relative;
  width: 100%;
  height: 90vh; /* tinggi hampir satu layar penuh */
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(0,0,0,0.1);
}

.spreadsheet-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}.spreadsheet-wrapper {
  position: relative;
  width: 100%;
  height: 95vh; /* hampir memenuhi layar */
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(0,0,0,0.15);
}

.spreadsheet-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  transform: scale(1.05); /* sedikit zoom biar pas */
  transform-origin: top left;
}

/* Gallery full page: grid untuk banyak foto */
.gallery-section{padding:80px 8%;background:var(--white)}
.gallery-section .gallery-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:25px;justify-items:center}
.gallery-item{position:relative;width:100%;overflow:hidden;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,0.15);transition:transform .3s ease,box-shadow .3s ease}
.gallery-item img{width:100%;height:230px;object-fit:cover;border-radius:15px;transition:transform .3s ease}
.gallery-item:hover img{transform:scale(1.07)}
.gallery-item:hover{box-shadow:0 8px 16px rgba(0,0,0,0.3)}

/* Footer */
.site-footer{background:#fafbfd;padding:22px 0;margin-top:28px;border-top:1px solid #eef2f6;color:#445;text-align:center}

/* Responsive */
@media (max-width:900px){
  .gallery{grid-template-columns:1fr 1fr}
  .profil-card{grid-template-columns:1fr}
  .hero{min-height:60vh}
}
@media (max-width:700px){
  .main-nav{display:none;position:absolute;right:16px;top:64px;background:linear-gradient(180deg,var(--blue-deep),#07283a);padding:12px;border-radius:8px}
  .main-nav.open{display:flex;flex-direction:column}
  .hamburger{display:block}
  .gallery{grid-template-columns:1fr}
  .profil-photo img{width:180px;height:180px}
}

/* ---------- Materi Pembelajaran (baru) ---------- */
.materi-section { padding: 48px 0 80px; background: var(--light-bg); }
.materi-controls { display:flex; gap:12px; align-items:center; padding:16px; }
.materi-select { padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0; font-size:1rem; }

.materi-display { margin-top:18px; padding:20px; }
.materi-display h3 { margin:0 0 10px; color:var(--blue-deep); font-size:1.4rem; }
.materi-desc { color:var(--muted); margin:8px 0 16px; }

/* responsive video wrapper */
.video-wrap { position:relative; width:100%; padding-top:56.25%; /* 16:9 */ overflow:hidden; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.06); background:#000; }
.video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* materi gallery */
.materi-gallery { margin-top:20px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-top:10px; align-items:start; }
.gallery-grid img.materi-thumb { width:100%; height:110px; object-fit:cover; border-radius:8px; box-shadow:0 6px 18px rgba(8,18,38,0.08); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.gallery-grid img.materi-thumb:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(8,18,38,0.12); }

/* small helper */
.small{font-size:.9rem}
.muted{color:#6b7280}

/* responsive */
@media (max-width:700px){
  .materi-controls{flex-direction:column; align-items:stretch;}
  .gallery-grid img.materi-thumb{height:120px}
}