body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 20px;
  }
  
  .container {
    max-width: 1200px;
    margin: auto;
  }

  .task-section {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .task-box {
    background: #ffe570;
    display: flex;
    border-radius: 40px;
    padding: 20px;
    width: 55%;
    align-items: center;
    justify-content: space-between;
  }
  
  .task-text {
    font-weight: bold;
  }
  
  .check-task-btn {
    display: inline-block;
    background-color: #001056;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
  }
  
  .check-task-btn:hover {
    background-color: #002080;
  }
  
  
  .date-box {
    background: #c7f1fb;
    padding: 20px;
    border-radius: 40px;
    text-align: center;
    width: 35%;
  }
  
  .today-label {
    font-weight: bold;
  }
  
  .date-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
  }
  
  .month, .year {
    font-size: 1.5em;
    font-weight: bold;
  }
  
  .day-box {
    background: #d6e2ff;
    padding: 10px;
    border-radius: 15px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px; 
    width: 50px;
  }
  
  .day-name {
    font-size: 0.75em;
    display: block;
  }
  
  .day-number {
    font-size: 1.5em;
    font-weight: bold;
  }
  
  .teacher-cards {
    display: flex;
    flex-wrap: nowrap;          
    gap: 20px;
    padding: 20px 40px;
    justify-content: space-between;
  }
  
  .teacher-card {
    box-sizing:border-box;
    flex: 0 0 calc(50% - 10px); 
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 40px;
    padding: 20px 25px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
  }
  .teacher-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,.15);
    cursor: pointer;
  }
  
  .teacher-card.yellow { background:#fff89a; }
  .teacher-card.blue   { background:#a2e4ff; }
  
  .profile-circle{
  width:50px;
  height:50px;
  flex-shrink:0;

  border-radius:50%;
  object-fit:cover;    
}
  
  .teacher-card p { margin:0; }          
  
  .title {
    font-size: 0.7em;
    margin-top: -5px;
  }
  
  .attendance-section {
    max-height: 320px;
    display: flex;
    background: #e7f5f8;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-radius: 40px;
    margin: 0 40px 40px 40px;
  }  
  
  .attendance-image {
    width: 120px;
  }
  
  .attendance-text {
    text-align: right;
    font-size: 20px; 
    font-weight: bold;
    color: #001F5B; 
    padding-left: 20px;
  }
  
  .attendance-text button {
    margin-top: 15px;
    padding: 10px 15px;
    background: #001056;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }
  .contact-title {
    text-align: center;
    font-size: 24px;
    color: #001f5c;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .welcome-title {
    text-align: center;
    font-size: 24px;
    color: #001f5c;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .task-image {
    display: flex;
    align-items: flex-end;
    justify-content: center; 
    flex-shrink: 0;    
    max-height: 100%;
  }
  .task-img {
    width: 200px;
    height: auto;
  }
  .attendance-image {
    flex: 1 1 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 18px;
    box-sizing:border-box;
  }

  .video-wrapper{width:100%;max-width:560px;}   
.ratio{
  position:relative;
  width:100%;
  padding-top:56.25%;      
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
.ratio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

  .task-imgs {
    width: 250px;
    height: auto;
    object-fit: contain;
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7; 
    padding: 20px 30px 20px 10px;
    margin: 20px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }  

   .navbar h1 {
  color: #001F70;
  margin: 0;
  font-size: 24px;
  }

   .navbar-right {
  display: flex;
  align-items: center;
  gap: 50px;
  }

.navbar-right img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  object-fit: contain;
  transition: transform 0.2s;
  }

 .navbar-right img:hover {
  transform: scale(1.1);
  }

  .navbar-container {
    margin: 0 auto 20px auto; 
    background-color: #f7f7f7;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 20px 30px;
    max-width: 95%;
  }  
  
.hero-banner{
  display:flex;
  align-items:center;
  gap:30px;                  
  background:#e7f5f8;
  padding:30px 40px;         
  border-radius:40px;        
  margin: 0 40px 40px;        
}

.hero-img{
  flex:0 0 200px;            
}

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

.hero-text h2{
  margin:0 0 15px;
  font-size:32px;
  color:#070707;
}
.hero-text p{
  margin:0;
  font-size:18px;
  line-height:1.5;
  color:#070707;
}

@media(max-width:900px){
  .hero-banner{
    flex-direction:column;
    text-align:center;
    gap:25px;
    padding:30px 25px;
    border-radius:40px;
  }
  .hero-img{ flex:0 0 200px; }
}

.nav-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  gap:6px;                        
  color:#001F70;
  font-weight:bold;
  font-size:14px;
  transition:transform .2s;
  width:92px;
}
.nav-item img{
  width:32px;
  height:32px;
  object-fit:contain;
  filter:grayscale(100%);         
}
.nav-item:hover{ transform:scale(1.1); }

.nav-item.active img{ filter:none;  }                

.nav-item.active::before{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  width:48px; height:48px;
  border-radius:50%;
  background:#a6ddff;
  transform:translateX(-50%);
  z-index:-1;
}

.nav-item.active span{
  color:#001F70;
}

.navbar-right{
  display:flex;
  align-items:center;
  gap:45px;                       
}

.logo-right{
  width:30px;height:30px;
  object-fit:contain;
}

.nav-item span{
  white-space: nowrap;    
  text-align: center;     
  line-height: 1.2;       
}

.navbar-right{
  gap: 40px;              
}

@media(max-width:600px){
  .nav-item{ width: 72px; font-size:12px; }
}

/* ===== FOOTER =================================================== */
.site-footer{
  background:#E7F0FF;        /* biru sangat muda (sama dgn card)   */
  padding:40px 0 30px;
  margin-top:60px;           /* jarak dari konten di atas */
  font-family:"Segoe UI",sans-serif;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
}

/* brand/logo teks */
.site-footer .brand{
  color:#001F70;
  font-weight:700;
  font-size:20px;
  margin:0;
}

/* navigasi mini */
.footer-links{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#001F70;
  text-decoration:none;
  font-weight:600;
  transition:opacity .2s;
}
.footer-links a:hover{opacity:.7;}

/* copyright */
.site-footer .copyright{
  color:#5A6FA8;             /* abu-biru yg dipakai di sub-title */
  font-size:14px;
  margin:0;
}

/* ---- responsive kecil ---- */
@media(max-width:600px){
  .footer-links{gap:18px;}
}