/* ===============================
   RESET
================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{

  font-family:'Poppins', sans-serif;

  background:
  linear-gradient(
    180deg,
    #140000 0%,
    #1b0000 20%,
    #0f0f0f 55%,
    #190000 100%
  );

  color:#ffffff;

  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

/* ===============================
   SPLASH SCREEN
================================= */

.splash-screen{
  position:fixed;

  inset:0;

  background:
  linear-gradient(
    180deg,
    #5c0000 0%,
    #2b0000 35%,
    #111111 70%,
    #000000 100%
  );

  z-index:99999;

  display:flex;

  justify-content:center;

  align-items:center;

  flex-direction:column;

  transition:1s ease;
}

.splash-screen.hide{
  opacity:0;
  visibility:hidden;
}

.logo{
  width:150px;
  height:150px;

  object-fit:contain;



  padding:12px;



  margin-bottom:25px;



  animation:pulse 2s infinite;
}

.splash-screen h1{
  font-family:'Cinzel', serif;

  font-size:2.5rem;

  text-align:center;

  margin-bottom:10px;

  letter-spacing:2px;
}

.splash-screen p{
  color:#d0d0d0;
  margin-bottom:30px;
}

.open-btn{
  padding:14px 35px;

  border:none;

  border-radius:50px;

  background:#c70000;

  color:#ffffff;

  font-weight:600;

  font-size:1rem;

  cursor:pointer;

  transition:0.3s ease;
}

.open-btn:hover{
  background:#ff0000;
  transform:translateY(-4px);
}

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.05);
  }

  100%{
    transform:scale(1);
  }

}

/* ===============================
   NAVBAR
================================= */

nav{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:999;

  padding:18px 8%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  transition:0.4s ease;
}

nav.scrolled{

  background:
  linear-gradient(
    90deg,
    rgba(30,0,0,0.95),
    rgba(0,0,0,0.95)
  );

  backdrop-filter:blur(8px);

  border-bottom:
  1px solid rgba(255,255,255,0.08);

}

.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-logo-img{

  width:42px;

  height:42px;
  
  object-fit:contain;
  
  padding:4px;
}

.nav-logo{

  font-family:'Cinzel', serif;

  font-size:1.2rem;

  font-weight:bold;

  color:#ffffff;
}

.nav-menu{
  display:flex;
  gap:30px;
}

.nav-menu a{

  color:#ffffff;

  font-size:0.95rem;

  transition:0.3s ease;

  position:relative;
}

.nav-menu a:hover{
  color:#ff2d2d;
}

.nav-menu a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0;
  height:2px;

  background:#ff2d2d;

  transition:0.3s ease;
}

.nav-menu a:hover::after{
  width:100%;
}

/* ===============================
   BURGER MENU
================================= */

.burger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}

.burger span{

  width:28px;
  height:3px;

  background:#ffffff;

  border-radius:10px;

  transition:0.3s ease;
}

/* ===============================
   HERO SECTION
================================= */

.hero{

  min-height:100vh;

  background:
  linear-gradient(
    rgba(25,0,0,0.78),
    rgba(0,0,0,0.82)
  ),

  url('../assets/hero-bg.jpg')
  center/cover no-repeat;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:40px 8%;
}

.hero-content{
  max-width:950px;
}

.hero h4{

  color:#d0d0d0;

  letter-spacing:4px;

  margin-bottom:20px;

  font-weight:400;
}

.hero h1{

  font-family:'Cinzel', serif;

  font-size:clamp(2.5rem, 5vw, 5rem);

  line-height:1.2;

  margin-bottom:25px;
}

.hero h1 span{
  color:#d10000;
}

.hero p{

  color:#d6d6d6;

  line-height:1.9;

  font-size:1.1rem;

  margin-bottom:40px;
}

/* ===============================
   COUNTDOWN
================================= */

.countdown{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;

  margin-bottom:40px;
}

.count-box{

  background:
  rgba(255,255,255,0.08);

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(6px);

  padding:22px;

  min-width:120px;

  border-radius:18px;
}

.count-box h2{

  font-size:2.5rem;

  color:#ff2d2d;

  margin-bottom:8px;
}

.count-box span{
  color:#d0d0d0;
  font-size:0.9rem;
}

/* ===============================
   EVENT STARTED
================================= */

.event-started{

  width:100%;

  max-width:700px;

  margin:auto;

  padding:35px;

  border-radius:24px;

  text-align:center;

  background:
  linear-gradient(
    145deg,
    rgba(90,0,0,0.95),
    rgba(20,20,20,0.95)
  );

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 10px 40px rgba(255,0,0,0.15);
}

.event-started h2{

  font-size:2rem;

  margin-bottom:15px;

  color:#ffffff;
}

.event-started p{

  color:#d7d7d7;

  line-height:1.8;
}

/* ===============================
   EVENT FINISHED
================================= */

.event-finished{

  width:100%;

  max-width:720px;

  margin:auto;

  padding:40px;

  border-radius:28px;

  text-align:center;

  background:
  linear-gradient(
    145deg,
    rgba(40,0,0,0.95),
    rgba(15,15,15,0.96)
  );

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 10px 40px rgba(255,0,0,0.12);
}

.event-finished h2{

  font-size:2.2rem;

  margin-bottom:18px;

  color:#ffffff;
}

.event-finished p{

  color:#d8d8d8;

  line-height:1.9;

  margin-bottom:15px;
}

.event-finished span{

  color:#ff4d4d;

  font-size:0.95rem;

  letter-spacing:1px;
}

/* ===============================
   HERO BUTTON
================================= */

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;
}

.btn{

  padding:14px 34px;

  border-radius:50px;

  font-weight:600;

  transition:0.3s ease;

  display:inline-flex;

  align-items:center;

  justify-content:center;
}

.btn-primary{

  background:#c70000;

  color:#ffffff;
}

.btn-primary:hover{

  background:#ff0000;

  transform:translateY(-4px);
}

.btn-secondary{

  border:1px solid #ffffff;

  color:#ffffff;
}

.btn-secondary:hover{

  background:#ffffff;

  color:#000000;
}

/* ===============================
   SECTION
================================= */

section{
  padding:100px 8%;
}

.section-title{
  text-align:center;
  margin-bottom:60px;
}

.section-title h2{

  font-family:'Cinzel', serif;

  font-size:2.8rem;

  margin-bottom:18px;
}

.section-title p{

  max-width:760px;

  margin:auto;

  line-height:1.9;

  color:#cfcfcf;
}

/* ===============================
   ABOUT IMAGE
================================= */

.about-image{

  width:100%;

  margin-top:50px;


  overflow:hidden;

  position:relative;


}

/* IMAGE */

.about-image img{

  width:100%;

  display:block;

  object-fit:cover;

  transition:0.6s ease;
}

.about-image:hover img{
  transform:scale(1.03);
}

/* OVERLAY */

.about-image::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;
}

/* ===============================
   CARD
================================= */

.grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:30px;
}

.card{

  background:
  linear-gradient(
    145deg,
    rgba(35,0,0,0.95),
    rgba(20,20,20,0.95)
  );

  border-radius:24px;

  padding:35px;

  border:
  1px solid rgba(255,255,255,0.06);

  transition:0.4s ease;
}

.card:hover{

  transform:translateY(-8px);

  border-color:#d10000;

  box-shadow:
  0 10px 30px rgba(209,0,0,0.2);
}

.card h3{

  color:#ff2d2d;

  margin-bottom:20px;

  font-size:1.5rem;
}

.card p{

  color:#d4d4d4;

  line-height:1.9;

  margin-bottom:12px;
}

/* ===============================
   EVENT INFO
================================= */

.event-info{

  display:flex;

  flex-direction:column;

  gap:18px;

  margin-top:25px;
}

.event-item{

  display:flex;

  align-items:flex-start;

  gap:14px;

  color:#d6d6d6;

  line-height:1.7;
}

.event-item i{

  color:#ff2d2d;

  font-size:1.1rem;

  margin-top:4px;

  min-width:18px;
}

.event-item span{
  flex:1;
}

/* ===============================
   EVENT DETAIL
================================= */

.event-wrapper{

  display:flex;

  flex-direction:column;

  gap:40px;
}

.event-card{

  background:
  linear-gradient(
    145deg,
    rgba(40,0,0,0.95),
    rgba(15,15,15,0.96)
  );

  border-radius:30px;

  padding:45px;

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 15px 40px rgba(0,0,0,0.3);
}

.event-card h3{

  font-size:2rem;

  line-height:1.4;

  margin-bottom:35px;

  color:#ffffff;

  font-weight:700;

  text-transform:uppercase;
}

/* DETAIL */

.event-detail{

  display:flex;

  flex-direction:column;

  gap:28px;
}

.event-row{

  display:flex;

  align-items:flex-start;

  gap:18px;
}

.event-row i{

  color:#ff2d2d;

  font-size:1.2rem;

  margin-top:5px;

  min-width:24px;
}

.event-row strong{

  display:block;

  color:#ffffff;

  margin-bottom:6px;

  font-size:1rem;
}

.event-row span{

  color:#d8d8d8;

  line-height:1.9;
}



/* DRESS CODE */

.dresscode-list{

  margin-top:12px;

  padding-left:22px;

  list-style:disc;

  color:#d8d8d8;
}

.dresscode-list li{

  margin-bottom:14px;

  line-height:1.9;

  color:#d8d8d8;
}

/* BULLET COLOR */

.dresscode-list li::marker{

  color:#ffffff;
}

/* ===============================
   RESPONSIVE EVENT
================================= */

@media(max-width:768px){

  /* WRAPPER */

  .event-wrapper{
    gap:28px;
  }

  /* CARD */

  .event-card{

    padding:28px 20px;

    border-radius:24px;
  }

  /* TITLE */

  .event-card h3{

    font-size:1.2rem;

    line-height:1.6;

    margin-bottom:28px;

    text-align:left;
  }

  /* DETAIL */

  .event-detail{
    gap:22px;
  }

  /* ROW */

  .event-row{

    display:flex;

    align-items:flex-start;

    gap:12px;
  }

  /* ICON */

  .event-row i{

    font-size:1rem;

    min-width:18px;

    margin-top:4px;
  }

  /* LABEL */

  .event-row strong{

    font-size:0.9rem;

    margin-bottom:5px;

    line-height:1.5;
  }

  /* TEXT */

  .event-row span{

    font-size:0.9rem;

    line-height:1.8;

    word-break:break-word;
  }

  /* DRESS CODE */

  .dresscode-list{

    padding-left:18px;

    margin-top:10px;
  }

  .dresscode-list li{

    font-size:0.9rem;

    line-height:1.8;

    margin-bottom:12px;

    word-break:break-word;
  }

}

/* ===============================
   EXTRA SMALL MOBILE
================================= */

@media(max-width:480px){

  .event-card{

    padding:24px 18px;
  }

  .event-card h3{

    font-size:1.05rem;

    line-height:1.7;
  }

  .event-row{

    gap:10px;
  }

  .event-row i{

    font-size:0.95rem;

    min-width:16px;
  }

  .event-row strong{

    font-size:0.85rem;
  }

  .event-row span{

    font-size:0.85rem;

    line-height:1.7;
  }

  .dresscode-list li{

    font-size:0.85rem;

    line-height:1.7;
  }

}

/* ===============================
   SUSUNAN ACARA
================================= */

.susunan-wrapper{

  display:flex;

  justify-content:center;
}

.susunan-card{

  width:100%;

  max-width:1000px;

  background:
  linear-gradient(
    145deg,
    rgba(40,0,0,0.95),
    rgba(15,15,15,0.96)
  );

  border-radius:30px;

  padding:45px;

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 15px 40px rgba(0,0,0,0.3);
}

.susunan-card h3{

  font-size:2rem;

  line-height:1.5;

  margin-bottom:35px;

  text-transform:uppercase;

  color:#ffffff;
}

/* LIST */

.susunan-list{

  padding-left:24px;

  color:#d8d8d8;
}

.susunan-list li{

  margin-bottom:18px;

  line-height:1.9;

  padding-left:8px;
}

/* NUMBER COLOR */

.susunan-list li::marker{

  color:#ff2d2d;

  font-weight:700;
}

/* ===============================
   RESPONSIVE SUSUNAN
================================= */

@media(max-width:768px){

  .susunan-card{

    padding:30px 22px;

    border-radius:24px;
  }

  .susunan-card h3{

    font-size:1.3rem;

    line-height:1.6;

    margin-bottom:28px;
  }

  .susunan-list{

    padding-left:20px;
  }

  .susunan-list li{

    font-size:0.92rem;

    line-height:1.8;

    margin-bottom:16px;
  }

}

@media(max-width:480px){

  .susunan-card{

    padding:24px 18px;
  }

  .susunan-card h3{

    font-size:1.1rem;
  }

  .susunan-list li{

    font-size:0.88rem;

    line-height:1.7;
  }

}

/* ===============================
   WISUDAWAN
================================= */

.graduate-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit, minmax(240px, 1fr));

  gap:30px;
}

.graduate-card{

  background:
  linear-gradient(
    160deg,
    rgba(40,0,0,0.95),
    rgba(18,18,18,0.96)
  );

  border-radius:24px;

  overflow:hidden;

  border:
  1px solid rgba(255,255,255,0.06);

  transition:0.4s ease;
}

.graduate-card:hover{

  transform:translateY(-10px);

  border-color:#d10000;

  box-shadow:
  0 10px 30px rgba(209,0,0,0.2);
}

.graduate-image{
  height:340px;
  overflow:hidden;
}

.graduate-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:0.5s ease;
}

.graduate-card:hover img{
  transform:scale(1.05);
}

.graduate-info{

  padding:22px;

  text-align:center;
}

.graduate-info h3{

  font-size:1rem;

  line-height:1.6;

  color:#ffffff;
}

/* ===============================
   GOOGLE MAP
================================= */

.map-container{

  overflow:hidden;

  border-radius:24px;

  border:
  2px solid rgba(255,255,255,0.08);

  margin-top:40px;
}

.map-container iframe{

  width:100%;

  height:450px;

  border:none;
}

/* ===============================
   FOOTER
================================= */

footer{

  background:
  linear-gradient(
    90deg,
    rgba(30,0,0,0.95),
    rgba(0,0,0,0.95)
  );

  text-align:center;

  padding:35px 20px;

  border-top:
  1px solid rgba(255,255,255,0.08);
}

footer p{
  color:#bdbdbd;
}

/* ===============================
   SCROLL REVEAL
================================= */

.reveal{

  opacity:0;

  transform:translateY(50px);

  transition:1s ease;
}

.reveal.active{

  opacity:1;

  transform:translateY(0);
}

/* ===============================
   RESPONSIVE TABLET
================================= */

@media(max-width:768px){

  /* NAVBAR */

  .burger{
    display:flex;
  }

  .nav-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:260px;
    height:100vh;

    background:#111111;

    flex-direction:column;

    align-items:center;

    padding-top:120px;

    gap:30px;

    transition:0.4s ease;

    border-left:
    1px solid rgba(255,255,255,0.08);
  }

  .nav-menu.active{
    right:0;
  }

  .nav-logo{
    font-size:1rem;
  }

  .nav-logo-img{
    width:36px;
    height:36px;
  }


/* ===============================
   RED GLOW EFFECT
================================= */

body::before{

  content:"";

  position:fixed;

  top:-200px;
  left:-200px;

  width:500px;
  height:500px;

  background:
  radial-gradient(
    rgba(255,0,0,0.12),
    transparent 70%
  );

  z-index:-1;

  pointer-events:none;
}

body::after{

  content:"";

  position:fixed;

  bottom:-250px;
  right:-250px;

  width:600px;
  height:600px;

  background:
  radial-gradient(
    rgba(180,0,0,0.15),
    transparent 70%
  );

  z-index:-1;

  pointer-events:none;
}

  /* HERO */


  .hero h1{
    font-size:2.2rem;
    line-height:1.4;
  }

  .hero p{
    font-size:0.95rem;
  }

  /* SECTION */

  section{
    padding:80px 6%;
  }

  .section-title h2{
    font-size:2rem;
  }

  /* COUNTDOWN */

  .countdown{
    gap:12px;
  }

  .count-box{
    min-width:85px;
    padding:16px;
  }

  .count-box h2{
    font-size:1.8rem;
  }

  /* MAP */

  .map-container iframe{
    height:300px;
  }

  /* WISUDAWAN */

  .graduate-grid{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .graduate-image{
    height:220px;
  }

  .graduate-info{
    padding:16px;
  }

  .graduate-info h3{
    font-size:0.9rem;
  }

  /* SPLASH */

  .logo{
    width:110px;
    height:110px;
  }

  .splash-screen h1{
    font-size:1.8rem;
  }

}

/* ===============================
   RESPONSIVE MOBILE
================================= */

@media(max-width:480px){
  
  .hero-buttons{
  flex-direction:column;
  }

  .btn{
  width:100%;
  }
    
  .graduate-image{
  height:420px;
  }
  
  .graduate-grid{
    grid-template-columns:1fr;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .count-box{
    min-width:75px;
  }

  .count-box h2{
    font-size:1.5rem;
  }

  .hero{
    padding-top:120px;
  }

}