/* ============================================================
   style.css — Mahasiswa Bandel | Kelas Kak Sony
   Responsive: HP · iPad · Laptop
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --pink:#d63384;--purple:#8b00ff;--blue:#4fc3f7;--cyan:#00e5ff;
  --bg:#08000f;--white:#ffffff;--muted:rgba(255,255,255,.55);
  --fd:'Cinzel',serif;--fb:'Raleway',sans-serif;
}
body{font-family:var(--fb);background:var(--bg);color:var(--white);overflow-x:hidden}

/* ══ HERO ══ */
#hero{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;padding:2rem 1rem;
  background:
    radial-gradient(ellipse 90% 65% at 50% 115%,rgba(139,0,255,.60) 0%,transparent 58%),
    radial-gradient(ellipse 70% 55% at 50% 125%,rgba(214,51,132,.50) 0%,transparent 55%),
    radial-gradient(ellipse 45% 35% at 80% 85%, rgba(79,195,247,.18) 0%,transparent 50%),
    #08000f;
}
#hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 8%,  rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 75% 12%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 60% 18%, rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 35%, rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 58%, rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 45% 72%, rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 5%  85%, rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.25) 0%,transparent 100%);
}
.hero-title-wrap{position:relative;z-index:2;width:100%;margin-bottom:clamp(1.5rem,4vw,3rem);}
.hero-title{
  font-family:var(--fd);font-size:clamp(2.8rem,10vw,7rem);font-weight:900;
  letter-spacing:.1em;color:var(--white);display:block;line-height:1;
  text-shadow:0 0 60px rgba(214,51,132,.55),0 0 120px rgba(139,0,255,.3);
}
.hero-subtitle{
  display:block;font-size:clamp(.65rem,2vw,.82rem);font-weight:400;
  letter-spacing:.42em;color:var(--muted);text-transform:uppercase;margin-top:.6rem;
}
.hero-row{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1.5rem,4vw,4rem);flex-wrap:wrap;padding:0 1rem;
}
.hero-left{flex:0 1 400px;text-align:left;}
.hero-tagline{
  font-size:clamp(.6rem,2vw,.85rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);margin-bottom:.8rem;
}
.hero-big-name{
  font-family:var(--fb);font-size:clamp(1.8rem,7vw,6.5rem);font-weight:700;
  color:rgba(255,255,255,.11);letter-spacing:.04em;line-height:1;
  text-transform:uppercase;display:block;margin-bottom:1.5rem;
  min-height:1.1em;word-break:break-word;transition:opacity .35s ease;
}
.hero-big-name.fade-out{opacity:0}
.hero-big-name.fade-in{opacity:1}
.hero-enjoy{
  font-size:clamp(.6rem,2vw,.85rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);
}

/* 4 Lingkaran jam */
.clock-grid{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.6rem,2vw,1.4rem);
}
.clock-ring-wrap{position:relative;display:flex;flex-direction:column;align-items:center;}
.ring-svg{position:absolute;top:0;left:0;transform:rotate(-90deg);width:100%;height:100%;}
.clock-circle{
  width:clamp(78px,14vw,130px);height:clamp(78px,14vw,130px);
  border-radius:50%;border:2px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
}
.clock-num{
  font-family:var(--fd);font-size:clamp(1.2rem,3.5vw,2.6rem);
  font-weight:700;line-height:1;color:var(--white);
}
.clock-lbl{
  font-size:clamp(.42rem,1vw,.55rem);letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;margin-top:.1rem;
}
.r-pink{stroke:var(--pink)}.r-cyan{stroke:var(--cyan)}
.r-purple{stroke:var(--purple)}.r-blue{stroke:var(--blue)}
.hero-chevron{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:1.4rem;z-index:2;
  animation:bounce 1.8s infinite;text-decoration:none;
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(9px)}
}

/* ══ BINTANG KELAS ══ */
#bintang{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(60px,8vw,90px) 0 clamp(50px,6vw,80px);
  background:
    radial-gradient(ellipse 85% 70% at 85% 50%,rgba(139,0,255,.28) 0%,transparent 65%),
    radial-gradient(ellipse 65% 55% at 15% 75%,rgba(214,51,132,.18) 0%,transparent 60%),
    #050009;
  overflow:hidden;
}
.sec-badge-wrap{
  display:flex;align-items:center;gap:0;
  margin-bottom:clamp(1.8rem,4vw,3.5rem);
}
.sec-line{flex:1;height:1px;border-top:1px dashed rgba(255,255,255,.18);}
.sec-badge{
  background:var(--purple);color:#fff;font-family:var(--fb);
  font-size:clamp(.6rem,1.5vw,.8rem);font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  padding:.5rem clamp(.8rem,1.5vw,1.6rem);white-space:nowrap;
}
.sec-badge-outline{background:transparent;border:1px solid rgba(255,255,255,.38);}

/* Foto + Biodata kiri-kanan */
.student-row{
  display:flex;align-items:flex-start;
  gap:clamp(1.2rem,3vw,3rem);
}
.photo-col{
  flex:0 0 clamp(180px,28vw,340px);
  max-width:clamp(180px,28vw,340px);
}
.photo-frame{
  border:2px solid rgba(139,0,255,.55);padding:5px;
  overflow:hidden;position:relative;
  transition:border-color .3s,box-shadow .3s;
}
.photo-frame img{
  width:100%;
  height:clamp(260px,45vw,520px);
  object-fit:cover;object-position:top center;display:block;
  will-change:transform;transition:transform .08s linear;
}
.photo-frame:hover{border-color:rgba(214,51,132,.8);box-shadow:0 0 50px rgba(214,51,132,.3);}
.photo-frame:hover img{transform:scale(1.05) translateY(-8px) !important;}
.bio-col{flex:1;min-width:0;}
.bio-item{display:flex;gap:.7rem;margin-bottom:clamp(.45rem,1.2vw,.85rem);align-items:flex-start;}
.bio-key{
  min-width:clamp(80px,12vw,130px);color:var(--pink);font-weight:700;
  font-size:clamp(.6rem,1.3vw,.78rem);letter-spacing:.1em;
  text-transform:uppercase;padding-top:.15rem;flex-shrink:0;
}
.bio-val{
  color:rgba(255,255,255,.85);font-weight:400;
  font-size:clamp(.78rem,1.5vw,.98rem);line-height:1.6;
}
.bio-divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:clamp(.8rem,2vw,1.4rem) 0;}
.student-sign{
  font-family:var(--fd);font-size:clamp(1rem,3vw,2.2rem);
  font-weight:700;color:var(--white);letter-spacing:.04em;
  text-shadow:0 0 30px rgba(214,51,132,.5);
}
/* HP: foto atas, biodata bawah */
@media(max-width:640px){
  .student-row{flex-direction:column;align-items:center;}
  .photo-col{flex:0 0 100%;max-width:min(300px,88vw);}
  .photo-frame img{height:clamp(240px,65vw,360px);}
  .bio-col{width:100%;}
  .bio-key{min-width:80px;}
}

/* ══ PROFILE VIDEO ══ */
#profile{
  padding:clamp(50px,8vw,80px) 0 clamp(60px,10vw,100px);
  background:#000008;
}
.vf-nav{
  display:flex;justify-content:center;align-items:center;
  gap:0;margin-bottom:clamp(1rem,3vw,2rem);flex-wrap:wrap;
}
.vf-btn{
  background:transparent;border:none;color:rgba(255,255,255,.5);
  font-family:var(--fb);font-size:clamp(.58rem,1.5vw,.76rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem clamp(.4rem,1.2vw,1.2rem);cursor:pointer;transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.vf-btn.active{color:#fff;border:1px solid rgba(255,255,255,.42);}
.vf-btn:not(.active):hover{color:#fff;}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.video-grid{grid-template-columns:1fr;}}
.video-cell{
  position:relative;overflow:hidden;cursor:pointer;
  aspect-ratio:16/10;background:#0d0015;
}
.video-cell video{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;transition:transform .55s ease,filter .4s;
  filter:brightness(.65);
}
.video-cell:hover video{transform:scale(1.07);filter:brightness(.4);}
.video-empty{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:rgba(255,255,255,.2);font-size:clamp(.7rem,2vw,.85rem);
  text-align:center;gap:.5rem;
}
.video-empty i{font-size:clamp(1.5rem,4vw,2.5rem);}
.vc-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;opacity:0;transition:opacity .35s;
  background:rgba(139,0,255,.15);backdrop-filter:blur(2px);
}
.video-cell:hover .vc-overlay{opacity:1;}
.vc-play{
  width:clamp(38px,8vw,54px);height:clamp(38px,8vw,54px);
  border-radius:50%;border:2px solid rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.9rem,3vw,1.4rem);color:#fff;margin-bottom:.7rem;
}
.vc-title{font-family:var(--fb);font-size:clamp(.65rem,2vw,1rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-align:center;}
.vc-sub{font-size:clamp(.55rem,1.5vw,.75rem);color:rgba(255,255,255,.7);text-align:center;margin-top:.2rem;}
.vc-num{position:absolute;bottom:.6rem;left:.7rem;font-size:clamp(.5rem,1.2vw,.68rem);letter-spacing:.18em;color:rgba(255,255,255,.3);font-weight:600;text-transform:uppercase;}

/* ══ LIGHTBOX ══ */
#lightbox{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.96);align-items:center;justify-content:center;
}
#lightbox.show{display:flex;}
#lb-video{max-width:95vw;max-height:90vh;width:100%;border-radius:4px;outline:none;box-shadow:0 0 80px rgba(139,0,255,.4);}
#lb-close{
  position:fixed;top:1rem;right:1rem;
  background:transparent;border:2px solid rgba(255,255,255,.45);
  color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:10000;transition:background .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
#lb-close:hover,#lb-close:focus{background:var(--pink);border-color:var(--pink);}

/* ══ SCROLL REVEAL ══ */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease;}
[data-reveal].revealed{opacity:1;transform:translateY(0);}