*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color: transparent; /* Menghilangkan highlight biru di HP */
  outline: none; /* Menghilangkan garis biru saat fokus */
}
:root{--bg:#070812;--panel:#0d1020;--text:#f4f4fb;--muted:#9699aa;--accent:#8b7cff;--accent2:#55d6ff;--line:rgba(255,255,255,.1)}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(139,124,255,.12),transparent 30%),radial-gradient(circle at 90% 50%,rgba(85,214,255,.08),transparent 25%);z-index:-2}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:9999;box-shadow:0 0 15px var(--accent)}
#loader{position:fixed;inset:0;background:#05060d;z-index:20000;display:grid;place-content:center;text-align:center;transition:opacity .8s,visibility .8s}
#loader.hide{opacity:0;visibility:hidden}
.loader-ring{width:58px;height:58px;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent2);border-right-color:var(--accent);border-radius:50%;margin:0 auto 22px;animation:spin 1s linear infinite}
.loader-title{font-weight:800;letter-spacing:.2em;font-size:14px}.loader-sub{font-size:10px;color:#747789;letter-spacing:.18em;margin-top:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.stars{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:80px 80px;opacity:.08;animation:starMove 25s linear infinite}
@keyframes starMove{to{background-position:80px 160px}}
.cursor-glow{position:fixed;width:280px;height:280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(139,124,255,.09),transparent 65%);transform:translate(-50%,-50%);z-index:0}
.navbar{height:74px;position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:rgba(7,8,18,.55);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.3s}
.navbar.scrolled{border-color:var(--line);background:rgba(7,8,18,.82)}
.brand{font-weight:800;letter-spacing:.08em}.brand span{color:var(--accent2)}
.nav-links{display:flex;gap:25px;font-size:12px;color:#a7a9b8}.nav-links a{transition:.25s}.nav-links a:hover,.nav-links a.active{color:#fff}
.menu-btn{display:none;background:none;border:0;width:36px}.menu-btn span{height:2px;background:white;display:block;margin:6px 0}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:120px 8% 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#070812 5%,rgba(7,8,18,.7) 50%,rgba(7,8,18,.25)),url("https://raw.githubusercontent.com/PretyFX69/music-files/refs/heads/main/motion_photo_3494632366123075611.jpg") center/cover;filter:saturate(.7)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 30%,rgba(7,8,18,.2))}
.hero-content,.hero-card{position:relative;z-index:2}.hero-content{max-width:760px}
.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--accent2);font-weight:700;margin-bottom:18px}
h1{font-size:clamp(64px,12vw,160px);line-height:.8;letter-spacing:-.07em;font-weight:800}
h1 span{font-family:"Playfair Display",serif;font-weight:600;font-style:italic;color:#c9c3ff}
.hero-text{max-width:560px;color:#b0b2c0;line-height:1.8;margin:35px 0 30px;font-size:15px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border:1px solid var(--line);border-radius:999px;padding:14px 21px;cursor:pointer;transition:.3s;background:rgba(255,255,255,.04);font-size:12px}.btn:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}.btn.primary{background:linear-gradient(100deg,var(--accent),#5c9dff);border:0}.btn b{margin-left:12px}.btn.ghost{background:rgba(7,8,18,.5)}
.scroll-hint{font-size:10px;color:#7f8292;display:flex;gap:10px;align-items:center;margin-top:50px}.scroll-hint span{height:25px;width:1px;background:#777;display:block}
.hero-card{position:absolute;right:9%;bottom:15%;width:220px;padding:25px;background:rgba(13,16,32,.45);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.13);border-radius:18px;transform:rotate(4deg);animation:float 5s ease-in-out infinite}.mini-label{font-size:10px;color:var(--accent2)}.mini-title{font-family:"Playfair Display";font-size:28px;margin-top:8px}.mini-line{width:35px;height:2px;background:var(--accent);margin:15px 0}.hero-card p{font-size:11px;line-height:1.8;color:#aaa}
@keyframes float{50%{transform:rotate(2deg) translateY(-12px)}}
.section{padding:120px 8%;position:relative}.section-heading{max-width:850px;margin-bottom:35px}.section-heading h2{font-size:clamp(40px,7vw,86px);letter-spacing:-.05em;line-height:.95}.section-heading h2 em,.big-copy em,.ending-card em{font-family:"Playfair Display";font-weight:600;color:#aaa4ff}.section-heading>p:last-child{color:#777b8c;margin-top:18px;font-size:12px}code{color:#a9a2ff}
.intro{padding-top:150px}.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8%;align-items:end}.big-copy{font-size:clamp(26px,4vw,50px);line-height:1.2;letter-spacing:-.04em}.muted{color:#858897;line-height:1.9;font-size:14px}.stats{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats div{padding:28px 10px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{font-size:42px;display:block}.stats span{font-size:10px;color:#777b8d;text-transform:uppercase;letter-spacing:.2em}

.class-ig-card {
  display: flex;
  align-items: center;
  gap: 30px;
  background: rgba(13,16,32,0.6);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 40px;
  margin-bottom: 0; 
  backdrop-filter: blur(12px);
}
.class-ig-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);padding:3px;flex-shrink:0}
.class-ig-handle{font-size:12px;color:var(--accent2);font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.class-ig-name{font-size:24px;margin:6px 0 10px;font-weight:700}
.class-ig-bio{font-size:14px;color:#a1a4b2;line-height:1.6;margin-bottom:20px;max-width:650px}
.class-ig-btn{display:inline-block;font-weight:600}

.student-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.student-card{min-height:360px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0c0f1d;cursor:pointer;transition:.45s}.student-card:hover{transform:translateY(-8px);border-color:rgba(139,124,255,.5);box-shadow:0 20px 60px rgba(0,0,0,.35)}.student-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:.6s;opacity:.82}.student-card:hover img{transform:scale(1.07)}.student-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(4,5,12,.98))}.student-info{position:absolute;z-index:2;bottom:0;padding:22px;width:100%}.student-info small{color:var(--accent2);font-size:9px;letter-spacing:.15em}.student-info h3{font-size:20px;margin:6px 0}.student-info p{font-size:10px;color:#a1a4b2}.student-more{position:absolute;right:18px;bottom:18px;z-index:3;width:31px;height:31px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.memories-section{background:linear-gradient(180deg,transparent,rgba(139,124,255,.025),transparent)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.filter{padding:99px;border:1px solid var(--line);border-radius:99px;padding:9px 14px;background:none;font-size:10px;color:#999;cursor:pointer}.filter.active,.filter:hover{color:#fff;border-color:var(--accent);background:rgba(139,124,255,.1)}.gallery{columns:3 250px;column-gap:14px}.gallery-item{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;border-radius:12px;cursor:pointer;background:#111}.gallery-item img{width:100%;display:block;transition:.6s}.gallery-item:hover img{transform:scale(1.04);filter:brightness(.7)}.gallery-item:after{content:"View memory ↗";position:absolute;left:18px;bottom:16px;font-size:10px;opacity:0;transition:.3s}.gallery-item:hover:after{opacity:1}.gallery-item .gallery-overlay{position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:.3s}.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-count{position:absolute;top:10px;right:10px;z-index:2;padding:4px 10px;border-radius:99px;background:rgba(4,5,12,.6);backdrop-filter:blur(6px);font-size:10px;color:#fff;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;}

.memory-slider{position:relative}
.memory-slider img{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:15px}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:20px;line-height:1;display:none;place-items:center;cursor:pointer;z-index:4;transition:.25s}
.slide-nav:hover{background:rgba(0,0,0,.78)}
.slide-nav.prev{left:12px}.slide-nav.next{right:12px}
.slide-dots{display:none;justify-content:center;gap:6px;margin-top:14px}
.slide-dots span{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:.25s}
.slide-dots span.active{width:18px;background:var(--accent2)}
.timeline{max-width:900px;margin:auto;position:relative}.timeline:before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;background:linear-gradient(var(--accent),transparent)}.timeline-item{position:relative;padding:0 0 70px 60px}.timeline-dot{position:absolute;left:8px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--accent2);box-shadow:0 0 20px var(--accent2)}.timeline-year{font-size:11px;color:var(--accent2);letter-spacing:.2em}.timeline-item h3{font-size:30px;margin:8px 0}.timeline-item p{color:#858897;line-height:1.8;font-size:13px;max-width:650px}
.quote-section{min-height:600px;display:grid;place-items:center;overflow:hidden}.quote-bg{position:absolute;inset:10% 8%;border-radius:30px;background:linear-gradient(rgba(7,8,18,.7),rgba(7,8,18,.85)),url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1800&q=80") center/cover;filter:saturate(.5)}.quote-inner{position:relative;text-align:center;max-width:850px}.quote-mark{font-family:serif;font-size:100px;color:#8b7cff;line-height:.5}.quote-inner h2{font-size:clamp(42px,7vw,80px);line-height:1;letter-spacing:-.05em}.quote-inner h2 em{font-family:"Playfair Display";color:#aaa4ff}.quote-inner p{color:#9a9cab;margin:25px auto;max-width:500px;line-height:1.8;font-size:13px}
.ending-section{text-align:center}.ending-card{max-width:900px;margin:auto}.ending-card h2{font-size:clamp(45px,8vw,100px);line-height:.95;letter-spacing:-.06em}.ending-text{max-width:550px;margin:30px auto;color:#858897;font-size:13px;line-height:1.8}
footer{padding:40px 8%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#686c7c;font-size:10px}footer strong{color:white;display:block;margin-bottom:5px}.creator{color:#858897}.creator b{color:#aaa4ff}

.modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(2,3,8,.82);backdrop-filter:blur(14px)}.modal-box{position:relative;z-index:2;width:min(850px,100%);display:grid;grid-template-columns:.9fr 1.1fr;background:#0d1020;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 100px #000}.modal-box>img{width:100%;height:480px;object-fit:cover}.modal-info{padding:45px}.modal-info h2{font-size:45px;letter-spacing:-.05em}.modal-nick{color:#777b8d;font-size:14px;margin-top:10px}
.close-modal{position:absolute;right:16px;top:12px;background:rgba(0,0,0,.5);border:0;width:38px;height:38px;border-radius:50%;font-size:25px;cursor:pointer;z-index:5}
.memory-view{position:relative;z-index:2;max-width:1000px;width:100%;max-height:90vh}.memory-view img{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:15px}.memory-caption{padding:15px 5px}.memory-caption span{font-size:9px;color:var(--accent2);letter-spacing:.2em}.memory-caption h2{margin:6px 0;font-size:25px}.memory-caption p{color:#858897;font-size:11px}

.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 18px;background:#161a2d;border:1px solid var(--line);border-radius:99px;font-size:11px;opacity:0;pointer-events:none;transition:.35s;z-index:7000}.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}.reveal.show{opacity:1;transform:none}

@media(max-width:900px){.nav-links{position:absolute;top:74px;left:0;right:0;background:rgba(7,8,18,.96);padding:20px 6%;display:none;flex-direction:column}.nav-links.open{display:flex}.menu-btn{display:block}.hero-card{display:none}.student-grid{grid-template-columns:repeat(2,1fr)}.intro-grid{grid-template-columns:1fr;gap:25px}}
@media(max-width:600px){.navbar{padding:0 5%}.hero{padding:110px 6% 60px}.section{padding:90px 6%}.hero-bg{background-position:65% center}.hero-text{font-size:13px}.class-ig-card{flex-direction:column;text-align:center;padding:25px 20px}.class-ig-bio{margin-left:auto;margin-right:auto}.student-grid{grid-template-columns:1fr 1fr;gap:9px}.student-card{min-height:280px}.student-info{padding:15px}.student-info h3{font-size:15px}.stats strong{font-size:30px}.modal-box{grid-template-columns:1fr;max-height:90vh;overflow:auto}.modal-box>img{height:300px}.modal-info{padding:25px}.modal-info h2{font-size:35px}.quote-bg{inset:5% 0}.quote-section{min-height:500px}footer{flex-direction:column}.cursor-glow{display:none}}

/* INTRO SCREEN */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 15000;
  background: #05060d;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.welcome-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.welcome-content {
  padding: 20px;
  animation: floatWelcome 4s ease-in-out infinite;
}
.welcome-content h1 {
  margin: 15px 0;
  font-size: clamp(40px, 8vw, 80px);
}
.welcome-content .btn {
  font-size: 14px;
  padding: 16px 32px;
}
@keyframes floatWelcome {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.music-widget{position:fixed;top:104px;right:22px;z-index:6000;touch-action:none}

.music-orb{position:relative;width:58px;height:58px;flex-shrink:0;border:0;padding:0;border-radius:50%;background:none;cursor:grab;box-shadow:0 10px 30px rgba(0,0,0,.45);user-select:none;-webkit-user-select:none}
.music-orb:active,.music-orb.dragging{cursor:grabbing}
.music-orb.dragging{box-shadow:0 16px 40px rgba(0,0,0,.6)}
.music-orb img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,255,255,.18);pointer-events:none}
.music-orb.playing img{animation:coverSpin 7s linear infinite}
@keyframes coverSpin{to{transform:rotate(360deg)}}

.music-orb-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);pointer-events:none}
.music-orb-ring circle{fill:none;stroke-width:2.4}
.ring-bg{stroke:rgba(255,255,255,.14)}
.ring-progress{stroke:var(--accent2);stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset .2s linear;filter:drop-shadow(0 0 6px var(--accent2))}

/* Panel meteran detik + on/off, transparan & burem, muncul di bawah buletan saat dipencet */
.music-panel{position:absolute;top:calc(100% + 14px);right:0;width:212px;padding:16px 18px;border-radius:20px;background:rgba(13,16,32,.42);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 55px rgba(0,0,0,.45);opacity:0;transform:translateY(-8px) scale(.92);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.music-widget.open .music-panel{opacity:1;transform:none;pointer-events:auto}

.music-info{margin-bottom:12px;overflow:hidden}
.music-title{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-artist{display:block;font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.music-controls{display:flex;align-items:center;gap:10px}
.music-toggle{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:11px;display:grid;place-items:center;cursor:pointer;transition:.25s}
.music-toggle:hover{border-color:var(--accent);background:rgba(139,124,255,.15)}

.music-seek{flex:1;min-width:0}
.music-bar{position:relative;height:3px;border-radius:99px;background:rgba(255,255,255,.16);cursor:pointer}
.music-bar-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.music-times{display:flex;justify-content:space-between;margin-top:6px;font-size:9px;color:#7f8292;letter-spacing:.03em}

@media(max-width:600px){.music-widget{top:88px;right:14px}.music-orb{width:50px;height:50px}.music-panel{width:180px;padding:14px}}

.ig-section { padding-top: 30px; padding-bottom: 30px; }
.students-section { padding-top: 30px; }
.stats { margin-top: 40px; }

@media (max-width: 600px) {
  .section { padding: 45px 6%; }
  .ig-section { padding-top: 20px; padding-bottom: 20px; }
  .students-section { padding-top: 20px; }
  .stats { margin-top: 30px; }
  .section-heading { margin-bottom: 20px; }
}