/*  UNIVERSITAS MUHAMMADIYAH SUMATERA UTARA   */ 
   
 /* CSS VARIABLES — palet warna utama USU */ 
 :root { 
     --hijau-tua:    #006B3C; 
     --hijau-muda:   #009A55; 
     --hijau-terang: #A7F3D0; 
     --putih:        #FFFFFF; 
     --abu-gelap:    #1E293B; 
     --abu-muda:     #64748B; 
     --bg-section:   #F8FAFC; 
     --shadow:       0 4px 20px rgba(0,0,0,0.08); 
 } 
   
 /* RESET DASAR — hapus margin/padding bawaan browser */ 
 * { 
     margin:     0; 
     padding:    0; 
     box-sizing: border-box; 
 } 
   
 /* BODY */ 
 body { 
     font-family:      "Segoe UI", Arial, sans-serif; 
     background-color: var(--putih); 
     color:            var(--abu-gelap); 
     line-height:      1.6; 
 } 
   
 /* SCROLL HALUS — untuk navigasi */ 
 html { 
     scroll-behavior: smooth; 
 }

 /* NAVBAR */ 
   
 #navbar { 
     position:         sticky; 
     top:              0; 
     z-index:          1000; 
     background-color: var(--hijau-tua); 
     box-shadow:       var(--shadow); 
     transition:       all 0.3s ease; 
 } 
   
 .navbar-container { 
     display:         flex; 
     align-items:     center; 
     justify-content: space-between; 
     max-width:       1200px; 
     margin:          0 auto; 
     padding:         16px 24px; 
 } 
   
 .navbar-logo { 
     display:     flex; 
     align-items: center; 
     gap:         12px; 
 } 
   
 .logo-bulat { 
     width:            52px; 
     height:           52px; 
     background-color: var(--putih); 
     color:            var(--hijau-tua); 
     border-radius:    50%; 
     display:          flex;
 }

 .align-items{     
     justify-content:  center; 
     font-weight:      bold; 
     font-size:        16px; 
 } 
   
 .logo-teks { 
     display:        flex; 
     flex-direction: column; 
 } 
   
 .logo-nama { 
     color:       var(--putih); 
     font-weight: bold; 
     font-size:   15px; 
 } 
  
 .logo-sub { 
     color:     var(--hijau-terang); 
     font-size: 11px; 
 } 
   
 .navbar-menu { 
     display: flex; 
     gap:     28px; 
 } 
   
 .menu-link { 
     color:           var(--putih); 
     text-decoration: none; 
     font-size:       14px; 
     font-weight:     500; 
     padding:         6px 0; 
     border-bottom:   2px solid transparent; 
     transition:      border-color 0.3s ease; 
 } 
   
 .menu-link:hover { 
     border-bottom-color: var(--hijau-terang); 
 } 
   
 .tombol-dark { 
     background-color: transparent; 
     border:           2px solid var(--hijau-terang); 
     color:            var(--hijau-terang); 
     padding:          8px 16px;
 
     border-radius :    20px; 
     cursor:           pointer; 
     font-size:       13px; 
     transition:      all 0.3s ease; 
 } 
   
 .tombol-dark:hover { 
     background-color: var(--hijau-terang); 
     color:            var(--hijau-tua); 
 }

 /*  HERO SECTION */ 
   
 #hero { 
     min-height:       85vh; 
     background-color: var(--hijau-tua); 
     background-image: linear-gradient( 
         135deg, 
         rgba(0, 107, 60, 0.95) 0%, 
         rgba(0, 154, 85, 0.85) 50%, 
         rgba(0, 107, 60, 0.95) 100% 
     ); 
     display:         flex; 
     align-items:     center; 
     justify-content: center; 
     position:        relative; 
 } 
   
 .hero-overlay { 
     width:   100%; 
     padding: 80px 24px; 
 } 
   
 .hero-konten { 
     max-width:  800px; 
     margin:     0 auto; 
     text-align: center; 
 } 
   
 .hero-label { 
     color:          var(--hijau-terang); 
     font-size:      16px; 
     letter-spacing: 3px; 
     text-transform: uppercase; 
     margin-bottom:  16px; 
 } 
   
 .hero-judul { 
     color:         var(--putih); 
     font-size:     52px; 
     font-weight:   800; 
     line-height:   1.2; 
     margin-bottom: 24px; 
 }
 
 .hero-sub { 
     color:         rgba(255, 255, 255, 0.85); 
     font-size:     18px; 
     line-height:   1.8; 
     margin-bottom: 40px; 
 } 
   
 .hero-tombol-grup { 
     display:         flex; 
     gap:             16px; 
     justify-content: center; 
     flex-wrap:       wrap; 
 } 
   
 .tombol-utama { 
     background-color: var(--putih); 
     color:            var(--hijau-tua); 
     padding:          14px 32px; 
     border-radius:    8px; 
     text-decoration:  none; 
     font-weight:      700; 
     font-size:        15px; 
     transition:       all 0.3s ease; 
 } 
   
 .tombol-utama:hover { 
     background-color: var(--hijau-terang); 
     transform:        translateY(-2px); 
 } 
   
 .tombol-outline { 
     border:          2px solid var(--putih); 
     color:           var(--putih); 
     padding:         14px 32px; 
     border-radius:   8px; 
     text-decoration: none; 
     font-weight:     700; 
     font-size:       15px; 
     transition:      all 0.3s ease; 
 } 
   
 .tombol-outline:hover { 
     background-color: var(--putih); 
     color:            var(--hijau-tua); 
     transform:        translateY(-2px);
 }

 /* STATISTIK */ 
   
 #statistik { 
     background-color: var(--hijau-tua); 
     padding:          60px 24px; 
 } 
   
 .statistik-container { 
     display:         flex; 
     justify-content: space-around; 
     align-items:     center; 
     max-width:       1200px; 
     margin:          0 auto; 
     flex-wrap:       wrap; 
     gap:             40px; 
 } 
   
 .stat-item { 
     text-align: center; 
     color:      var(--putih); 
 } 
   
 .stat-angka { 
     font-size:   56px; 
     font-weight: 800; 
     color:       var(--hijau-terang); 
 } 
   
 .stat-satuan { 
     font-size:   36px; 
     font-weight: 700; 
     color:       var(--putih); 
 } 
   
 .stat-label { 
     font-size:  15px; 
     color:      rgba(255, 255, 255, 0.8); 
 
margin-top: 8px; 
}

/* REUSABLE SECTION STYLES  */ 
   
 .section-wrapper { 
     max-width: 1200px; 
     margin:    0 auto; 
     padding:   80px 24px; 
 } 
   
 .section-header { 
     text-align:    center; 
     margin-bottom: 56px; 
 } 
   
 .section-judul { 
     font-size:     36px; 
     font-weight:   800; 
     color:         var(--abu-gelap); 
     margin-bottom: 12px; 
 } 
   
 .section-sub { 
     font-size: 16px; 
     color:     var(--abu-muda); 
 } 
   
 /*  PROGRAM STUDI  */    
 #program { 
     background-color: var(--bg-section); 
 } 
   
 .program-grid { 
     display:               grid; 
     grid-template-columns: repeat(3, 1fr); 
     gap:                   28px; 
 } 
   
 .program-kartu { 
     background-color: var(--putih); 
     border-radius:    12px; 
     padding:          36px 28px; 
     box-shadow:       var(--shadow); 
     transition:       transform 0.3s ease, box-shadow 0.3s ease; 
     border-top:       4px solid transparent; 
 } 
   
 .program-kartu:hover { 
     transform:   translateY(-6px); 
     box-shadow:  0 12px 36px rgba(0,0,0,0.12); 
     border-top:  4px solid var(--hijau-muda); 
 } 
   
 .program-kartu.unggulan { 
     background-color: var(--hijau-tua); 
     border-top:       4px solid var(--hijau-terang); 
 } 
   
 .program-kartu.unggulan .kartu-judul, 
 .program-kartu.unggulan .kartu-deskripsi { 
     color: var(--putih); 
 } 
   
 .kartu-ikon { 
     font-size:     40px; 
     margin-bottom: 16px; 
 } 
   
 .kartu-judul { 
     font-size:     20px; 
     font-weight:   700; 
     margin-bottom: 12px; 
     color:         var(--abu-gelap); 
 } 
   
 .kartu-deskripsi { 
     font-size:     14px; 
     color:         var(--abu-muda); 
     line-height:   1.7; 
     margin-bottom: 20px; 
 } 
   
 .kartu-link { 
     color:           var(--hijau-muda); 
     text-decoration: none; 
     font-weight:     600; 
     font-size:       14px; 
 } 
   
 /*  BERITA  */ 
   
 .berita-grid { 
     display:               grid; 
     grid-template-columns: repeat(3, 1fr); 
     gap:                   28px; 
 } 

 .berita-kartu { 
     background-color: var(--putih); 
     border-radius:    12px; 
     overflow:         hidden; 
    box-shadow:       var(--shadow); 
     transition:       transform 0.3s ease; 
 } 
   
 .berita-kartu:hover { 
     transform: translateY(-4px); 
 } 
   
 .berita-gambar { 
     background-color: var(--bg-section); 
     height:           160px; 
     display:          flex; 
     align-items:      center; 
     justify-content:  center; 
     font-size:        56px; 
 } 
   
 .berita-isi { 
     padding: 20px; 
 } 
   
 .berita-tanggal { 
     font-size: 12px; 
     color:     var(--abu-muda); 
 } 
  
 .berita-judul { 
     font-size:     15px; 
     font-weight:   700; 
     margin:        8px 0 12px; 
     line-height:   1.5; 
     color:         var(--abu-gelap); 
 } 
   
 .berita-link { 
     color:           var(--hijau-muda); 
     text-decoration: none; 
     font-size:       13px; 
     font-weight:     600; 
 }
 /*  SAMBUTAN REKTOR  */ 
   
 .sambutan-container { 
     display:     flex; 
     gap:         60px; 
     align-items: center; 
 } 
   
 .sambutan-gambar { 
     flex-shrink: 0; 
 } 
   
 .foto-rektor { 
     width:            220px; 
     height:           220px; 
     background-color: var(--bg-section); 
     border-radius:    50%; 
     display:          flex; 
     align-items:      center; 
     justify-content:  center; 
     font-size:        80px; 
     border:           4px solid var(--hijau-muda); 
 } 
   
 .sambutan-label { 
     color:          var(--hijau-muda); 
     font-size:      13px; 
     letter-spacing: 2px; 
     text-transform: uppercase; 
     margin-bottom:  8px; 
 } 
   
 .sambutan-nama { 
     font-size:     24px; 
     font-weight:   800; 
     color:         var(--abu-gelap); 
     margin-bottom: 20px; 
 } 
   
 .sambutan-isi { 
     font-size:     15px; 
     line-height:   1.8; 
     color:         var(--abu-muda); 
     margin-bottom: 12px; 
 } 
   
 /*  FOOTER  */ 
   
 #footer { 
     background-color: var(--abu-gelap); 
     color:            var(--putih); 
 } 
   
 .footer-container { 
     display:               grid; 
     grid-template-columns: 2fr 1fr 1fr 1fr; 
     gap:                   48px; 
     max-width:             1200px; 
     margin:                0 auto; 
     padding:               60px 24px 40px; 
 } 
   
 .footer-logo { 
     width:            56px; 
     height:           56px; 
     background-color: var(--hijau-muda); 
     border-radius:    50%; 
     display:          flex; 
     align-items:      center; 
     justify-content:  center; 
     font-weight:      bold; 
     font-size:        18px; 
     margin-bottom:    16px; 
 } 
   
 .footer-tagline { 
     color:         var(--hijau-terang); 
     font-style:    italic; 
     margin-bottom: 12px; 
     font-size:     14px; 
 } 
   
 .footer-alamat { 
     color:       rgba(255,255,255,0.6); 
     font-size:   13px; 
     line-height: 1.8; 
 } 
   
 .footer-judul-kolom { 
     color:          var(--hijau-terang); 
     font-size:      14px; 
     font-weight:    700; 
     margin-bottom:  20px; 
     letter-spacing: 1px; 
     text-transform: uppercase; 
 } 
   
 .footer-link { 
     display:         block; 
     color:           rgba(255,255,255,0.7); 
     text-decoration: none; 
     font-size:       13px; 
     margin-bottom:   10px; 
     transition:      color 0.2s ease; 
 } 
   
 .footer-link:hover { 
     color: var(--hijau-terang); 
 } 
   
 .footer-bawah { 
     text-align:    center; 
     padding:       20px 24px; 
     border-top:    1px solid rgba(255,255,255,0.1); 
     font-size:     13px; 
     color:         rgba(255,255,255,0.4); 
 }
 /*  DARK MODE  */ 
   
 body.dark-mode { 
     background-color: #0F172A; 
     color:            #E2E8F0; 
 } 
   
 body.dark-mode .section-judul, 
 body.dark-mode .sambutan-nama, 
 body.dark-mode .berita-judul, 
 body.dark-mode .kartu-judul { 
     color: #E2E8F0; 
 } 
   
 body.dark-mode .program-kartu, 
 body.dark-mode .berita-kartu { 
     background-color: #1E293B; 
 } 
   
 body.dark-mode #program, 
 body.dark-mode #berita { 
     background-color: #0F172A; 
 } 
   
 /*   NAVBAR SAAT DI-SCROLL  */ 
   
 #navbar.navbar-scroll { 
     background-color: rgba(0, 60, 30, 0.98); 
     box-shadow:       0 4px 24px rgba(0,0,0,0.25); 
     padding:          0; 
 } 
   
 #navbar.navbar-scroll .navbar-container { 
     padding: 10px 24px; 
 }