/* =========================
   HTML
========================= */

html, body{
    margin:0;
    padding:0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

*, *::before, *::after{
    box-sizing:border-box;
}


/* =========================
   NAVBAR
========================= */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 999;
}


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


.logo img{
 height:65px;
}

.portal-title span{
 font-size:12px;
 color:#666;
}
.portal-title{
    display:flex;
    flex-direction:column;
    margin-left:15px;
}

.portal-title b{
    font-size:18px;
    color:#003366;
    font-weight:700;
}

.portal-title span{
    font-size:12px;
    color:#666;
}

.menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

.menu a{
  margin-left:20px;
  text-decoration:none;
  color:#333;
  position:relative;
  font-weight:500;
}

.menu a:hover{
  color:#1e3a8a;
}

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0%;
  height:2px;
  background:#1e3a8a;
  transition:0.3s;
}

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


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

/*.hero{
    margin-top:90px;
    overflow:hidden;
}


.hero-banner{
    width:100%;
    height:auto;
    display:block;
}*/

.hero{
    margin-top:90px;
    overflow:hidden;
}

.hero-banner{
    width:100%;
    height:auto;
    display:block;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/* =========================
   BUTTON
========================= */
.btn{
  margin-top:15px;
  padding:12px 22px;
  background:#ffcc00;
  color:black;
  text-decoration:none;
  border-radius:6px;
  font-weight:bold;
  transition:0.3s;
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}


/* =========================
   BADGE
========================= */
.badge{
  background:#facc15;
  color:#111;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
  margin-bottom:15px;
}



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


.section{
padding:30px 4%;
}


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

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

.card,
.quick-card{
    transition: all 0.3s ease;
	animation: fadeUp .8s ease;
}

.card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.quick-card:hover{
    transform:translateY(-10px);
    background:#111;
    color:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.30);
}


.card{
background:white;
border-radius:20px;
padding:15px;
text-align:center;
box-shadow:
0 10px 30px rgba(0,0,0,.1);
}


.card-icon{
font-size:50px;
}


.card h3{
color:#002855;
}


/* =========================
   ANNOUNCEMENT
========================= */
.announcement-cards{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  width:90%;
  margin:auto;
}

.announcement-cards .card{
  width:300px;
  background:linear-gradient(135deg, #1e3a8a, #2563eb);
  color:white;
  text-align:left;
  border-left:6px solid #ffcc00;
}


/* =========================
  JUBAH
========================= */

.jubah-container{
    width:60%;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
}

.jubah-container img{
    width:100%;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    transition:0.3s;
}

.jubah-container img:hover{
    transform:scale(1.03);
}



/* =========================
   AKSES PANTAS
========================= */

.quick-menu{
    width:90%;
    max-width:1200px;
    margin:40px auto 20px;
    text-align:center;
}


.quick-menu h1{
    font-size:38px;
    color:#000;   /* Hitam */
    margin-bottom:40px;
    font-weight:700;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:25px;
}

/*.quick-card{
    background:#fff;
    border-radius:18px;
    padding:60px 50px;
    min-height:280px;
    text-decoration:none;
    color:#333;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eee;
}*/

.quick-card{
    background:#fff;
    border-radius:18px;
    padding:40px 25px;
    height:400px;              /* semua kotak sama tinggi */
    text-decoration:none;
    color:#333;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eee;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;    /* isi berada di tengah menegak */
    text-align:center;
}




.quick-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border-radius:50%;
    background:#0b3d91;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    transition:.3s;
}

.quick-card:hover .quick-icon,
.quick-card:hover .quick-icon i{
    background:#fff;
    color:#0b3d91;
    transform:scale(1.08);
}

.quick-card h3{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.quick-card p{
    font-size:15px;
    line-height:1.6;
    color:#666;
	min-height:60px;
}

.quick-card:hover p{
    color:#f2f2f2;
}



/* =========================
   COUNTDOWN
========================= */
.countdown{
  margin:40px auto;
  text-align:center;
  background:rgba(255,255,255,0.9);
  padding:20px 10px;
  border:2px solid #1e3a8a;
  width:95%;
  backdrop-filter:blur(8px);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  box-sizing:border-box;
}


.timer-box{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

.timer-box div{
  background:#1e3a8a;
  padding:15px;
  border-radius:10px;
  min-width:90px;
  color:white;
}

.timer-box span{
  font-size:32px;
  font-weight:bold;
  display:block;
}

.timer-box small{
  color:#e5e7eb;
}



/* =========================
   FOOTER
========================= */
.footer{
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color:white;
  margin-top:50px;
  padding:50px 20px;
  border-top-left-radius:40px;
  border-top-right-radius:40px;
  position:relative;
  overflow:hidden;
}

.footer-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px;
  width:90%;
  margin:auto;
  text-align:center;
  position:relative;
  z-index:2;
}

.footer-box{
  flex:1;
  min-width:220px;
}

.footer-box h3{
  color:#ffcc00;
}

.footer-box p{
  color:#cbd5e1;
  font-size:14px;
}

.footer-bottom{
  text-align:center;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  color:#94a3b8;
  font-size:13px;
}
/* =========================
   INFO
========================= */

#info{
    padding-bottom:0px;
}

#jadual{
    padding-top:0px;
}

#info h1{
    margin-bottom:0;
}


/*#info .grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

#info .card{
    width:100%;
}
*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


.page-container{
    max-width:1800px;
    margin:40px auto;
    padding:0 15px;
}

.page-title{
    text-align:center;
    font-size:36px;
    font-weight:700;
    margin-bottom:40px;
}



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

    .jubah-container{
        width:95%;
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .page-container{
        margin:120px 10px 40px;
        padding:0;
    }

    .page-title{
        font-size:28px;
    }

}

@media(max-width:768px){

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

}

@media(max-width:768px){

    .quick-menu{
        margin-bottom:0 !important;
    }

    #jadual{
        margin-top:-30px !important;
    }

}


@media(max-width:768px){

    .section{
        padding-left:15px;
        padding-right:15px;
    }


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


    .card{
        padding:20px 15px;
        border-radius:15px;
    }


    .card-icon{
        font-size:38px;
    }


    .card h3{
        font-size:18px;
        margin:10px 0;
    }


    .card p{
        font-size:14px;
        line-height:1.5;
    }

}


@media(max-width:768px){

    .quick-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .quick-menu h1{
        font-size:30px;
    }

    .quick-card{
        padding:25px 15px;
    }

    .quick-card h3{
        font-size:18px;
    }

    .quick-icon{
        width:65px;
        height:65px;
        font-size:30px;
    }

}

@media(max-width:480px){

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

}

@media (max-width:768px){

  .countdown{
    width:95%;
    padding:20px 10px;
  }

  .countdown h1{
    font-size:22px;
  }

  .timer-box{
    gap:8px;
  }

  .timer-box div{
    min-width:70px;
    padding:10px;
  }

  .timer-box span{
    font-size:24px;
  }

  .timer-box small{
    font-size:12px;
  }

}

@media (max-width:768px){

  #info{
      margin-bottom:0 !important;
      padding-bottom:0 !important;
  }

  #jadual{
      margin-top:0 !important;
      padding-top:0 !important;
  }

  #jadual h1,
  #jadual h2{
      margin-top:0 !important;
  }

}



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

 .navbar{
  flex-direction:column;
  padding:10px;
}

  .logo img{
    height:45px;
    width:auto;
  }

  .menu a{
  margin-left:0;
}

  .hero{
    
    margin-top:80px;
  }

  .hero h1{
    font-size:28px;
  }

  .hero p{
    font-size:15px;
  }
  
.portal-title{
    text-align:center;
}

.portal-title b{
    font-size:14px;
}

.portal-title span{
    font-size:10px;
}

  
  
}

@media(max-width:768px){

    .hero{
        margin-top:120px;
    }

    .hero-banner{
        width:100%;
        height:auto;
        object-fit:contain;
    }

}






.media-container{
    text-align:center;
    margin:40px auto;
}

.media-img{
    width:50%;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.18);
    transition:0.4s ease;
}

.media-img:hover{
    transform:scale(1.03);
    box-shadow:0 20px 45px rgba(0,0,0,0.3);
}

.video-wrapper{
    display:flex;
    justify-content:center;
    margin:50px auto;
}

.video-wrapper iframe{
    border:none;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.2);
    transition:0.4s ease;
}

.video-wrapper iframe:hover{
    transform:scale(1.02);
    box-shadow:0 20px 45px rgba(0,0,0,0.35);
}

.map-link a{
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
}

.map-link a:hover{
    color: #ffd700;
}

.quick-card{
    background:#fff;
    border-radius:18px;
    padding:40px 15px;
    height:380px;
	width:105%;
    text-decoration:none;
    color:#333;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eee;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}


/* ruang ikon sama */
.quick-icon{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}


/* ruang tajuk sama */
.quick-card h3{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 15px;
    line-height:1.3;
}

/* ruang penerangan sama */
.quick-card p{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    line-height:1.5;
}

/* AKSES PANTAS */
.quick-menu{
    width:90%;
    margin:auto;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr); /* 3 kotak setiap baris */
    gap:30px;
    align-items:stretch;
}

.quick-card{
    background:#fff;
    border-radius:18px;
    padding:40px 30px;
    min-height:250px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    text-decoration:none;
    color:#333;

    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}


.quick-card:hover{
    transform:translateY(-5px);
}


.quick-icon{
    font-size:45px;
    margin-bottom:20px;
    height:60px;

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


.quick-card h3{
    min-height:50px;
    margin:10px 0;
    font-size:20px;
}


.quick-card p{
    min-height:45px;
    margin:0;
    font-size:15px;
}

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

    .quick-grid{
        grid-template-columns:1fr; /* 1 kotak setiap baris */
        gap:20px;
    }

    .quick-card{
        width:100%;
        min-height:220px;
        padding:35px 20px;
    }

    .quick-icon{
        font-size:40px;
        height:50px;
    }

    .quick-card h3{
        font-size:18px;
        min-height:auto;
    }

    .quick-card p{
        font-size:14px;
        min-height:auto;
    }

}


.media-container,
.video-container{
    width:60%;
    margin:30px auto;
}

.media-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,0.15);
}

.video-container iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,0.15);
    display:block;
}