/* ===== HERO SECTION ===== */
.hero{
  min-height:100vh;
  background:
    linear-gradient(135deg,#2ecc71cc,#3498dbcc),
    url('../img/bg-madrasah.jpg') center/cover no-repeat;
  position:relative;
  color:#fff;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  align-items:center;
  min-height:100vh;
  padding:0 5%;
}

/* KARAKTER */
.hero-side{
  text-align:center;
}
.hero-side img{
  max-height:420px;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));
}

/* TENGAH */
.hero-center{
  text-align:center;
  padding:20px;
}

.hero-center h1{
  font-size:56px;
  letter-spacing:3px;
}

/* JUDUL UTAMA HERO */
.hero-title{
  font-size:64px;
  font-weight:900;
  letter-spacing:6px;
  color:#e53935;
  -webkit-text-stroke:3px #ffd700;
  text-shadow:
    0 0 10px rgba(255,215,0,.8),
    0 8px 20px rgba(0,0,0,.45);
  margin-bottom:10px;
  animation:heroGlow 3s infinite;
}

@keyframes heroGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.3)}
}

.hero-center h2{
  font-size:22px;
  font-weight:500;
  opacity:.95;
  margin-bottom:15px;
}

.subtitle{
  font-size:18px;
  opacity:.9;
  margin-bottom:25px;
}

/* RATING */
.rating-icon{
  font-size:30px;
  color:#ffd700;
  margin-bottom:25px;
  text-shadow:0 0 10px rgba(255,215,0,.8);
}

/* BUTTON */
.btn-survey{
  display:inline-block;
  background:linear-gradient(45deg,#ff9800,#ffc107);
  padding:16px 45px;
  border-radius:40px;
  font-size:18px;
  font-weight:bold;
  color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  transition:.3s;
}
.btn-survey:hover{transform:translateY(-4px)}

/* BADGE */
.badge-row{
  margin-top:35px;
}
.badge-row img{
  height:55px;
  margin:0 8px;
}

/* TOP BRAND / WBK */
.top-banner{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:10px 26px;
  margin:20px auto;
  border-radius:40px;
  background:linear-gradient(45deg,#ffd700,#ff9800);
  color:#1b5e20;
  font-weight:800;
  font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  animation:float 3s ease-in-out infinite;
}
.top-banner img{height:38px;}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* HEADER */
.main-header{
  background:linear-gradient(90deg,#1b5e20,#2ecc71);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 4px 15px rgba(0,0,0,.3);
}

.nav-container{
  width:94%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.skala-logo{
  font-size:28px;
  font-weight:900;
  letter-spacing:4px;
  display:flex;
}
.skala-logo span{
  animation:glowColor 2.5s infinite;
  text-shadow:0 0 8px rgba(255,255,255,.6),
              0 0 15px rgba(255,215,0,.8);
}
@keyframes glowColor{
  0%{color:#fff}
  25%{color:#ffd700}
  50%{color:#00e5ff}
  75%{color:#ff9800}
  100%{color:#fff}
}

/* MENU */
.nav-menu a{
  color:#fff;
  font-size:17px;
  font-weight:700;
  margin-left:22px;
  padding:8px 16px;
  border-radius:22px;
  text-decoration:none;
  transition:.3s;
}
.nav-menu a:hover,
.nav-menu a.active{
  background:#ffd700;
  color:#1b5e20;
}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side img{max-height:300px}
}

@media(max-width:768px){
  .hero-grid{
    grid-template-columns:1fr;
    padding:80px 20px 40px;
  }
  .hero-side{display:none}
  .hero-title{
    font-size:38px;
    letter-spacing:3px;
    -webkit-text-stroke:2px #ffd700;
  }
  .nav-container{flex-wrap:wrap}
  .nav-menu a{
    font-size:14px;
    margin-left:10px;
    padding:6px 12px;
  }
}


.login-body {
  background: linear-gradient(135deg,#0b4c91,#1e90ff);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
}

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

.login-box h2 {
  margin-bottom: 5px;
}

.login-box input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.login-box button {
  width: 100%;
  padding: 12px;
  background: #e60000;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.login-box button:hover {
  background: #b30000;
}

.error {
  margin-top: 10px;
  color: red;
  font-size: 14px;
}

/* ===== LOGIN ADMIN BUTTON ===== */
.btn-login-admin{
  background:linear-gradient(45deg,#e53935,#ff7043);
  color:#fff !important;
  font-weight:800;
  padding:8px 20px;
  border-radius:30px;
  margin-left:28px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:.3s;
}

.btn-login-admin:hover{
  background:linear-gradient(45deg,#ffd700,#ff9800);
  color:#1b5e20 !important;
  transform:translateY(-2px);
}

@media(max-width:768px){
  .btn-login-admin{
    display:inline-block;
    margin-top:10px;
    margin-left:0;
  }
}