/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
  background:#f4f4f4;
  padding-top:60px;
  overflow-x:hidden; /* 🔥 hilangkan geser kanan */
}

/* ================= CONTAINER ================= */
.container{
  width:90%;
  max-width:1100px;
  margin:auto;
}

/* ================= HEADER ================= */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:60px;
  background:#c40000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  z-index:1000;
}

.header a{
  color:#fff;
  text-decoration:none;
}

.header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  width:100px;
}

nav ul{
  display:flex;
  list-style:none;
  gap:20px;
}

nav a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}

/* ================= BUTTON ================= */
.btn{
  display:inline-block;
  padding:10px 15px;
  background:#c40000;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  transition:0.3s;
}

.btn:hover{
  background:#a80000;
}

.btn-login{
  background:#fff;
  color:#c40000 !important;
  padding:6px 12px;
  border-radius:6px;
  font-weight:bold;
}

.btn-login:hover{
  background:#c40000;
  color:#fff !important;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:100vh;
  background:url('../img/hero.png') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 15px;
}

.hero .overlay{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4)
  );
  z-index:1;
}

.hero-text{
  position:relative;
  z-index:2;
  max-width:700px;
  margin:auto;
  color:#fff;
}

.hero-text h1{
  font-size:42px;
  font-weight:bold;
  line-height:1.3;
  margin-bottom:15px;
  word-wrap:break-word;
}

.hero-text p{
  font-size:18px;
  margin-bottom:25px;
}

/* tombol hero */
.btn-primary{
  display:inline-block;
  background:#e60023;
  color:#fff;
  padding:12px 25px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
  max-width:100%;
}

.btn-primary:hover{
  background:#b8001c;
}

/* ================= SECTION ================= */
.section{
  padding:80px 5%;
}

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

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.card{
  background:#fff;
  padding:20px;
  text-align:center;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.bg-gray{
  background:#f5f5f5;
}

/* ================= TIMELINE ================= */
.timeline{
  display:grid;
  gap:20px;
}

.timeline-item{
  background:#fff;
  padding:20px;
  border-left:5px solid #c40000;
  border-radius:6px;
}

/* ================= FORM ================= */
.form{
  max-width:500px;
  margin:auto;
  display:grid;
  gap:15px;
}

.form input{
  padding:10px;
}

/* ================= FORM PAGE ================= */
.form-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#c40000,#ff4d4d);
  padding:20px;
}

.form-card{
  background:#fff;
  width:100%;
  max-width:450px;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  padding:30px;
}

.form-header{
  text-align:center;
  margin-bottom:20px;
}

.form-header h2{
  color:#c40000;
}

.form-group{
  display:flex;
  flex-direction:column;
  margin-bottom:15px;
}

.form-group input,
.form-group select{
  padding:12px;
  border:1px solid #ddd;
  border-radius:8px;
}

.form-group input:focus,
.form-group select:focus{
  border-color:#c40000;
  outline:none;
  box-shadow:0 0 5px rgba(196,0,0,0.3);
}

.form-row{
  display:flex;
  gap:10px;
}

/* ================= LOGIN ================= */
.login-page{
  background:linear-gradient(135deg,#c40000,#ff4d4d);
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-box{
  background:#fff;
  padding:30px;
  border-radius:12px;
  width:100%;
  max-width:400px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.login-box input{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:8px;
}

/* ================= ADMIN ================= */
.layout{
  display:flex;
  min-height:calc(100vh - 60px);
}

.sidebar{
  width:220px;
  background:#222;
  position:fixed;
  top:60px;
  left:0;
  height:calc(100vh - 60px);
  padding:20px;
  overflow-y:auto;
}

.sidebar h3{
  color:#fff;
}

.sidebar a{
  display:block;
  color:#fff;
  padding:10px;
  margin-bottom:5px;
  text-decoration:none;
  border-radius:6px;
}

.sidebar a:hover{
  background:#c40000;
}

.content{
  margin-left:220px;
  padding:20px;
  width:calc(100% - 220px);
}

/* ================= DASHBOARD ================= */
.dashboard-cards{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.card-box{
  background:#fff;
  padding:20px;
  border-radius:10px;
  flex:1;
  min-width:250px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.card-box h3{
  color:#c40000;
}

/* ================= FOOTER ================= */
.footer{
  background:#222;
  color:#fff;
  text-align:center;
  padding:20px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

  nav{
    display:none;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .form-row{
    flex-direction:column;
  }

  .sidebar{
    position:relative;
    width:100%;
    height:auto;
  }

  .content{
    margin-left:0;
    width:100%;
  }

  .dashboard-cards{
    flex-direction:column;
  }

  .hero-text h1{
    font-size:26px;
  }

  .hero-text p{
    font-size:14px;
  }
}

.btn-aksi{
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}

.btn-aksi:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.icon-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    margin-top:20px;
}

.icon-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#fff;
    border-radius:12px;
    text-decoration:none;
    color:#333;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:0.2s;
}

.icon-box img{
    width:60px;
    height:60px;
    margin-bottom:10px;
}

.icon-box span{
    font-size:14px;
    font-weight:600;
}

.icon-box:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.kop-surat{
    width:100%;
    margin-bottom:20px;
}

.kop-surat img{
    width:100%;
    height:auto;
    display:block;
}

#jabatanPanitia input,
#jabatanPeninjau input,
#jabatanPeserta select,
#jabatanPanitia select,
#jabatanPeninjau select{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    box-sizing:border-box;
}

/* ================= FILE INPUT FULL ================= */
.form-group input[type="file"]{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
}

/* ================= PREVIEW FOTO ================= */
.preview-img{
  width:100%;
  max-width:100%;
  margin-top:10px;
  border-radius:8px;
  display:block;
  object-fit:cover;
}

/* khusus kalau mau kecilkan tinggi preview */
.preview-img{
  max-height:200px;
}

/* LOGIN LOGO */
.login-logo{
    text-align:center;
    margin-bottom:15px;
}

.login-logo img{
    width:180px;
    height:auto;
    object-fit:contain;
}