/* style.css - Versi Responsif */

/* ==========================================================================
   1. Reset Dasar & Global Styles
   ========================================================================== */

   html {
	box-sizing: border-box;
	font-size: 16px; /* Basis untuk unit rem jika digunakan nanti */
	scroll-behavior: smooth;
  }
  
  *,
  *::before,
  *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
  }
  
  body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.6;
	color: #333;
	/*background: url(../img/bg.jpg) top center / cover no-repeat fixed; /* Lebih baik untuk background full-page */
	/* background-position: top; Disederhanakan di atas */
	padding-top: 60px; /* Jika ada admin bar fixed, beri ruang */
  }
  
  img {
	max-width: 100%;
	height: auto;
	display: block; /* Menghilangkan spasi ekstra di bawah gambar inline */
  }
  
  a {
	text-decoration: none;
	color: #007bff; /* Contoh warna link default, sesuaikan */
  }
  a:hover {
	text-decoration: underline;
	color: #0056b3;
  }
  
  /* ==========================================================================
	 2. Helper Classes (Contoh)
	 ========================================================================== */
  .DivWarning {
	background: #ccedf7;
	border: 1px solid #36d8e0;
	padding: 10px; /* Sedikit lebih banyak padding */
	margin-bottom: 1rem;
	border-radius: 4px;
  }
  
  .DivWarning2 {
	background: #f2dede;
	border: 1px solid red;
	padding: 10px;
	margin-bottom: 1rem;
	border-radius: 4px;
  }
  
  .white-wrapper {
	background: #fff;
	padding: 15px; /* Beri padding default */
	margin-bottom: 1rem;
	border-radius: 4px;
  }
  
  .no-margin { margin: 0 !important; }
  .line-normal { line-height: normal !important; }
  
  /* ==========================================================================
	 3. WP Admin Bar (Jika ini memang digunakan dan bukan sisa dari WordPress)
	 Sangat disarankan untuk menggunakan komponen navigasi yang lebih modern jika memungkinkan.
	 Ini adalah bagian yang paling kompleks untuk dibuat responsif tanpa JS.
	 ========================================================================== */
  #wpadminbar {
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999;
	/* min-width: 960px; DIHAPUS - ini menghalangi responsivitas */
	background: linear-gradient(to right, rgba(10, 168, 196, 1) 0%, rgba(2, 43, 78, 1) 100%);
	height: 50px; /* Tetapkan tinggi untuk konsistensi */
	overflow: hidden; /* Sembunyikan konten yang meluap di layar kecil */
  }
  
  #wpadminbar * {
	color: #fff;
	font-size: 14px;
  }
  
  #wpadminbar a,
  #wpadminbar a:hover,
  #wpadminbar a img,
  #wpadminbar a img:hover {
	outline: none;
	border: none;
	text-decoration: none;
	background: none;
  }
  
  #wpadminbar ul,
  #wpadminbar ul li {
	list-style: none;
	position: relative;
	/* z-index sudah ada di parent */
  }
  
  #wpadminbar .quicklinks > ul {
	display: flex; /* Gunakan flexbox untuk item menu utama */
	height: 100%;
	align-items: center; /* Pusatkan item secara vertikal */
	/* text-align: left; Tidak diperlukan dengan flex */
  }
  
  #wpadminbar .quicklinks > ul > li {
	/* float: left; DIHAPUS - digantikan flex */
	border-left: 1px solid #0AABCC;
	display: flex; /* Agar link mengisi tinggi li */
	align-items: stretch;
  }
  #wpadminbar .quicklinks > ul > li:first-child {
	border-left: none;
  }
  
  #wpadminbar .quicklinks > ul > li:hover {
	background: #134B6D;
  }
  #wpadminbar .quicklinks > ul > li:hover > a {
	border-left-color: #707070; /* Efek hover asli */
  }
  
  #wpadminbar .quicklinks ul li a {
	display: flex; /* Untuk padding dan alignment */
	align-items: center;
	padding: 0 15px; /* Sederhanakan padding */
	white-space: nowrap; /* Cegah teks membungkus */
  }
  #wpadminbar .quicklinks ul li.menupop a {
	padding-right: 30px; /* Ruang untuk panah dropdown */
  }
  
  /* Dropdown - Ini akan sulit tanpa JS untuk mobile.
	 Solusi CSS-only sederhana: sembunyikan di mobile atau buat scrollable. */
  #wpadminbar .quicklinks .menupop ul {
	display: none;
	position: absolute;
	top: 100%; /* Muncul di bawah item parent */
	left: 0;
	background: #134B6D;
	min-width: 180px; /* Lebar minimum dropdown */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
  #wpadminbar .quicklinks li:hover > ul,
  #wpadminbar .quicklinks li.hover > ul {
	display: block;
  }
  
  #wpadminbar .quicklinks .menupop ul li {
	float: none; /* Item dropdown vertikal */
	font-size: 13px;
	border-left: none;
	width: 100%;
  }
  #wpadminbar .quicklinks .menupop ul li a {
	padding: 10px 15px; /* Padding untuk item dropdown */
	width: 100%;
  }
  #wpadminbar .quicklinks .menupop ul li:hover {
	background: #099DBA;
  }
  
  /* Panah Dropdown (asumsi gambar masih relevan) */
  #wpadminbar .quicklinks li.menupop > a::after { /* Gunakan pseudo-element */
	content: '';
	
	width: 14px;
	height: 8px;
	background: url('../img/arrow-down.png') no-repeat center;
	margin-left: 8px;
	position: absolute; /* relatif terhadap 'a' jika 'a' adalah position:relative */
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
  }
  
  /* Sembunyikan menu teks di layar sangat kecil, mungkin tampilkan ikon hamburger (membutuhkan HTML & JS) */
  @media (max-width: 767px) {
	#wpadminbar .quicklinks ul li a span { /* Sembunyikan teks, sisakan ikon jika ada */
	  /* display: none;  Ini jika Anda punya ikon. Jika tidak, menu akan jadi sempit. */
	}
	#wpadminbar .quicklinks ul li a {
	  padding: 0 10px; /* Kurangi padding */
	}
	/* Alternatif: Buat #wpadminbar scrollable horizontal jika item terlalu banyak */
	#wpadminbar .quicklinks > ul {
	   overflow-x: auto;
	   overflow-y: hidden;
	   -webkit-overflow-scrolling: touch;
	}
  }
  
  #wpadminbar div.menu-right {
	float: right; /* Ini bisa tetap, atau integrasikan ke flex */
	/* position: relative; */ /* Mungkin tidak perlu */
	padding: 0 15px;
	height: 100%;
	display: flex;
	align-items: center;
  }
  #wpadminbar div.menu-right a { color: #fff; }
  #wpadminbar div.menu-right a:hover { text-decoration: underline; }
  
  /* Avatar dan Search di Admin Bar - Perlu disesuaikan lebih lanjut */
  #wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar > a img {
	width: 24px; /* Sedikit lebih besar */
	height: 24px;
	border: 1px solid #999;
	vertical-align: middle;
	margin-right: 8px; /* Atur margin */
	border-radius: 50%; /* Buat bulat */
  }
  
  #wpadminbar #adminbarsearch {
	/* float: right; */ /* Jika menu-right pakai flex, ini bisa jadi item flex */
	display: flex;
	align-items: center;
	padding: 0;
	margin-left: 10px;
  }
  #wpadminbar #adminbarsearch .adminbar-input {
	width: 150px; /* Atau buat lebih fleksibel */
	padding: 5px 8px;
	border: 1px solid #626262;
	background: #ddd;
	border-radius: 3px;
	/* Hapus box-shadow lama, style modern saja */
  }
  #wpadminbar #adminbarsearch .adminbar-button {
	padding: 5px 10px;
	margin-left: 5px;
	/* ... style lain disederhanakan ... */
	border-radius: 3px;
  }
  
  /* ==========================================================================
	 4. Layout Utama & Komponen
	 ========================================================================== */
  .main-wrapper {
	/* width: 1000px; DIHAPUS */
	max-width: 1200px; /* Lebar maksimum konten */
	margin: 20px auto; /* 20px atas-bawah, auto kiri-kanan untuk centering */
	padding: 15px; /* Padding untuk mobile */
	background-color: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
  }

  .main-content-area {
    margin-top: 50px; 
}
  
  @media (min-width: 768px) {
	.main-wrapper {
	  padding: 20px; /* Padding lebih besar untuk desktop */
	}
  }
  
  .footer-container {
	margin-top: 20px;
	padding: 20px 15px;
	border-top: 5px solid #0F3B56;
	background: linear-gradient(to right, rgba(10, 168, 196, 1) 0%, rgba(2, 43, 78, 1) 100%);
	color: #fff;
	text-align: center;
  }
  .footer-container a {
	  color: #fff;
	  text-decoration: underline;
  }
  
  /* Login Wrapper dari custom-homepage.css (asumsi digabung atau ini style global) */
  .login-wrapper2 {
	background: rgba(255, 255, 255, 0.8); /* Sedikit lebih solid untuk keterbacaan */
	border-radius: 8px;
	padding: 20px;
	margin-top: 5vh; /* Jarak dari atas */
	margin-bottom: 5vh;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  @media (min-width: 768px) {
	.login-wrapper2 {
	  padding: 30px;
	  margin-top: 100px; /* Seperti aslinya untuk desktop */
	}
  }
  
  /* Form Inputs (styling umum, bisa di-override oleh Bootstrap jika dipakai) */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 1.5;
	background-color: #fff;
	color: #495057;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  input[type="text"]:focus,
  input[type="password"]:focus,
  /* ... other input types ... */
  select:focus,
  textarea:focus {
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
  }
  
  input[type="submit"],
  button,
  .btn-login { /* Kelas .btn-login dari akhir file */
	display: inline-block;
	font-weight: 400;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: #0173BC; /* Warna dari .btn-login */
	border: 1px solid #0173BC;
	padding: 10px 20px; /* Padding lebih nyaman */
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 3px; /* Konsisten dengan .btn-login */
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  input[type="submit"]:hover,
  button:hover,
  .btn-login:hover {
	background-color: #0163A3;
	border-color: #015890;
	color: #fff;
	text-decoration: none;
  }
  
  /* Input spesifik dari halaman login */
  input[type="text"].username-input,
  input[type="password"].password-input {
	background-repeat: no-repeat;
	background-position: 10px center; /* Sesuaikan posisi ikon */
	background-size: 20px 20px; /* Ukuran ikon */
	padding-left: 40px !important; /* Ruang untuk ikon */
	width: 100%; /* Biarkan default width 100% dari atas */
  }
  input[type="text"].username-input {
	background-image: url(../img/bgusername.png); /* Pastikan path benar */
  }
  input[type="password"].password-input {
	background-image: url(../img/bgpassword.png); /* Pastikan path benar */
  }
  
  /* Tombol submit bulat */
  input[type="submit"].rounded-submit {
	background: #0173ba;
	border: 1px solid #0173ba;
	border-radius: 50%; /* Untuk bulat sempurna */
	height: 80px;
	width: 80px;
	color: #fff;
	font-weight: bold;
	margin-top: 10px;
	text-transform: uppercase;
	padding: 0; /* Hapus padding jika ukuran tetap */
	font-size: 0.9em;
  }
  
  /* ==========================================================================
	 5. Tabel
	 ========================================================================== */
  .table-responsive-wrapper { /* Bungkus tabel dengan div ini di HTML */
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch; /* Smooth scroll di iOS */
	  margin-bottom: 1rem;
  }
  
  table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px; /* Dari original */
	margin-bottom: 1rem; /* Spasi bawah standar */
  }
  
  table th,
  table td {
	padding: 8px; /* Padding standar, lebih baik dari 3px */
	border: 1px solid #e0e0e0; /* Border lebih soft */
	text-align: left;
	vertical-align: top;
	line-height: 1.4;
  }
  table.table-alert td { border-top: 1px solid #EEF7FB !important; } /* Specific override */
  
  table th {
	background: #023355;
	/* Gradien bisa dipertahankan jika diinginkan, pastikan prefix modern */
	/* background-image: linear-gradient(to top, #177196, #1B8FB2); */
	color: white;
	font-weight: bold; /* TH seharusnya bold */
	text-align: center; /* Dari original */
	border-bottom: 3px solid #3991E3;
  }
  
  tr.alternate { background: #f2f2f2; /* Warna alternate lebih soft */ }
  
  .left_column { /* Ini sepertinya untuk label di form tabel */
	font-weight: bold;
	color: #1A69B6;
	/* height: 22px; Dihapus, biarkan konten menentukan tinggi */
	padding: 8px 4px; /* Padding konsisten */
	text-shadow: #fff 0 1px 0;
	vertical-align: middle;
	background-color: #f8f8f8; /* Warna asli */
	width: 25%; /* Contoh lebar untuk kolom label */
	white-space: nowrap;
  }
  table.table-alert td.left_column { background: none; } /* Specific override */
  
  /* ==========================================================================
	 6. Komponen UI (Portlets, Units, Popups, dll.)
	 ========================================================================== */
  .portlet {
	margin-bottom: 25px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	overflow: hidden; /* Untuk menjaga border-radius dengan konten internal */
  }
  .portlet.blue { border-color: #0073B6; }
  .portlet.green { border-color: #339999; }
  /* ... warna portlet lain ... */
  
  .portlet > .portlet-title {
	padding: 10px 15px;
	margin-bottom: 0;
	color: #fff;
	font-weight: bold;
	font-size: 1.1rem;
  }
  .portlet.blue > .portlet-title { background: #0073B6; }
  .portlet.green > .portlet-title { background: #339999; }
  /* ... warna title portlet lain ... */
  
  .portlet > .portlet-body {
	padding: 15px;
  }
  
  /* Units (yellow, green, red, blue) */
  .yellow-unit, .green-unit, .red-unit, .blue-unit {
	padding: 15px;
	margin-bottom: 15px;
	line-height: 1.5;
	border-radius: 3px;
  }
  .yellow-unit { background-color: #f7f8dc; color: #6c6e00; }
  .green-unit { background-color: #e7f8dc; color: #386613; }
  .red-unit { background-color: #f9e1db; color: #942f1a; }
  .blue-unit { background-color: #eff8f8; color: #0f076b; } /* Warna teks disesuaikan agar kontras */
  
  .yellow-unit hr, .green-unit hr, .red-unit hr, .blue-unit hr {
	margin: 10px 0;
	border: 0;
	border-top: 1px solid rgba(0,0,0,0.1); /* HR lebih generik */
  }
  .yellow-unit h5, .green-unit h5, .red-unit h5, .blue-unit h5 {
	margin-top: 0; /* H5 biasanya punya margin default */
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
	text-shadow: none; /* Hapus text-shadow jika tidak terlalu penting */
  }
  /* Specific colors for h5 if needed, pastikan kontras baik */
  .yellow-unit h5 { color: #8a8d03; }
  /* ...etc... */
  
  /* Carousel - Ini sangat sulit dibuat responsif dengan CSS only karena style nth-child yang kompleks.
	 Pertimbangkan library JS untuk carousel atau simplifikasi besar-besaran.
	 Solusi sementara: buat scrollable horizontal di mobile. */
  .list_carousel_wrapper { /* Buat wrapper baru di HTML */
	  position: relative; /* Untuk .carousel-overlay */
	  margin-bottom: 20px;
  }
  .list_carousel {
	/* margin: 0 0 0 610px; DIHAPUS */
	/* width: 370px; DIHAPUS */
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap; /* Agar item berjajar horizontal */
	/* height: 90px; Biarkan konten menentukan atau set min-height */
	min-height: 100px;
	padding-bottom: 15px; /* Untuk scrollbar jika muncul */
	/* position: absolute; DIHAPUS dari sini, pindah ke wrapper jika perlu */
  }
  .list_carousel ul {
	/* Tidak perlu display: block; jika parent pakai white-space: nowrap */
	font-size: 0; /* Untuk menghilangkan spasi antar inline-block items */
  }
  .list_carousel li {
	display: inline-block; /* Untuk jajaran horizontal */
	vertical-align: middle;
	/* Ukuran yang lebih sederhana dan konsisten, atau gunakan persentase */
	width: 80px;
	height: 80px;
	margin: 5px;
	border: 1px solid #999;
	background-color: #eee;
	overflow: hidden;
	border-radius: 4px; /* Radius standar */
	font-size: 1rem; /* Reset font-size dari ul */
	text-align: center; /* Jika ada teks di dalam li */
  }
  .list_carousel li img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Agar gambar mengisi tanpa distorsi */
  }
  /* Hapus style nth-child yang kompleks untuk .list_carousel li,
	 karena itu sangat tidak responsif. Jika efek visualnya penting,
	 perlu pendekatan berbeda (mungkin SVG atau JS). */
  
  .carousel-overlay { /* Ini mungkin perlu penyesuaian posisi berdasarkan layout baru */
	/* background: url(../images/slider-overlay.png) no-repeat right 20px; */
	/* Posisi dan ukuran perlu di-rethink untuk responsif */
	/* display: none; Sembunyikan sementara jika mengganggu */
  }
  
  
  /* Pagination */
  #pagination {
	  margin-top: 1.5rem;
	  margin-bottom: 1rem;
	  text-align: center;
  }
  #pagination a {
	display: inline-block;
	background-color: #fff;
	border: 1px solid #999;
	color: #333;
	font-size: 11px; /* Bisa dinaikkan sedikit */
	border-radius: 3px;
	padding: 5px 8px; /* Padding lebih nyaman */
	text-decoration: none;
	margin: 0 2px;
  }
  #pagination a:hover,
  #pagination a.current { /* Tambah kelas .current untuk halaman aktif */
	background-color: #3081bc;
	border-color: #3081bc;
	color: #fff;
  }
  
  
  /* .box-flow (Flowchart-like items) */
  .box-flow {
	  text-align: center;
	  margin: 20px auto;
  }
  .box-flow .item {
	  margin: 15px;
	  display: inline-block;
	  vertical-align: middle;
	  position: relative;
	  max-width: 150px; /* Batasi lebar item */
  }
  .box-flow .item img { /* Ukuran gambar dalam item */
	  /* width: 145px; Dihapus, biarkan max-width:100% dari global img */
	  border: 1px solid #ddd;
	  border-radius: 4px;
  }
  .box-flow .item span { /* Arrow */
	  /* Ini juga sulit responsif. Pertimbangkan SVG atau ikon font. */
	  /* background: url(../images/panah.png) no-repeat; */
	  position: absolute;
	  z-index: 2;
	  width: 50px; /* Perkecil */
	  height: 40px; /* Perkecil */
	  background-size: contain; /* Agar panah diskalakan */
	  /* Posisi (right, top, bottom, left) perlu media query */
  }
  .box-flow .item span.right-arrow { /* Contoh penamaan baru */
	  right: -35px; top: 50%; transform: translateY(-50%);
  }
  .box-flow .item span.down-arrow {
	  left: 50%; bottom: -30px; transform: translateX(-50%);
  }
  
  /* Overlay pada item */
  #overlay { /* Jika ini untuk .box-flow .item */
	  background: rgba(0,0,0,.7);
	  text-align: center;
	  position: absolute;
	  padding: 10px; /* Beri padding */
	  top: 0; left: 0; /* Penuhi parent */
	  width: 100%;
	  height: 100%;
	  opacity: 0;
	  transition: opacity .3s ease; /* Transisi lebih cepat */
	  cursor: pointer;
	  display: flex; /* Untuk centering #plus */
	  align-items: center;
	  justify-content: center;
	  border-radius: 4px; /* Samakan dengan item */
  }
  .box-flow .item a:hover #overlay { /* Selector spesifik */
	  opacity: 1;
  }
  #plus { /* Ikon plus di overlay */
	  font-family: Helvetica, Arial, sans-serif;
	  font-weight: 900;
	  color: rgba(255,255,255,.85);
	  font-size: 40px; /* Perkecil sedikit */
	  /* padding: 30px; Dihapus, biarkan flex centering */
  }
  
  
  /* ==========================================================================
	 7. Media Queries untuk Penyesuaian Responsif
	 ========================================================================== */
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
	.login-wrapper2 {
	  max-width: 480px; /* Batasi lebar form login */
	  margin-left: auto;
	  margin-right: auto;
	}
	.left_column {
		width: 20%; /* Kolom label bisa lebih lebar */
	}
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
	body {
	  /* padding-top: height of #wpadminbar jika berbeda di desktop */
	}
	#wpadminbar .quicklinks > ul {
	   overflow-x: visible; /* Tidak perlu scroll lagi */
	}
  
	.left-container, .right-container { /* Asumsi dari custom-homepage.css */
	  /* Atur layout berdampingan jika ini untuk login page */
	  /* Contoh:
	  display: flex;
	  .left-container { flex: 1; }
	  .right-container { flex: 1; }
	  */
	}
	.login-wrapper2 {
		padding: 20px; /* Dari original Anda */
		margin-top: 100px; /* Dari original Anda */
	}
	.userlogin, .red { /* Dari original Anda, tampilkan di desktop */
	  display: block; /* Atau inline-block, flex, dll. tergantung kebutuhan */
	}
	ul.nav { /* Dari original Anda, sembunyikan di desktop */
	  /* display: none !important; Hati-hati dengan !important */
	}
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
	.main-wrapper {
	  padding: 30px;
	}
	.left_column {
		width: 15%;
	}
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
	/* Penyesuaian untuk layar sangat besar jika perlu */
  }
  
  /* Perbaikan media query dari kode asli Anda */
  /* @media (min-width:1170px) {
	  ul.nav {display:none !important;}
  } */
  /* Di atas sudah di-cover oleh @media (min-width: 768px) atau lebih besar, sesuaikan breakpointnya.
	 Jika ul.nav memang harus hilang di 1170px ke atas, maka: */
  @media (min-width: 1170px) {
	  ul.nav { display: none !important; }
  }
  
  /* @media (max-width:1170px) {
	  .userlogin, .red{
	  display:none;
	  }
  } */
  /* Ini berarti .userlogin dan .red akan disembunyikan untuk layar <= 1170px.
	 Dengan mobile-first, kita definisikan defaultnya (mobile) lalu ubah di layar besar.
	 Jadi, defaultnya:
	 .userlogin, .red { display: none; }
	 Lalu di media query yang sesuai (misal 768px atau 1171px):
	 @media (min-width: 1171px) {
		 .userlogin, .red { display: block; } (atau sesuai display aslinya)
	 }
	 Namun, karena di original ada (min-width:1170px) untuk ul.nav, dan (max-width:1170px) untuk .userlogin,
	 ada sedikit tumpang tindih logika. Saya asumsikan .userlogin tampil di atas 1170px.
  */
  .userlogin, .red { /* Default (mobile dan tablet) */
	  display: none;
  }
  @media (min-width: 1171px) { /* Tampil di layar > 1170px */
	  .userlogin, .red {
		  display: block; /* atau inline-block, flex, sesuai kebutuhan */
		  /* Style .red lainnya dari original */
	  }
	  .red{
		  background: #e74c3c;
		  padding-left: 10px;
		  transition: all 0.35s ease;
		  text-align:left;
		  margin-right:10px;
	  }
	  .red:hover{background:#c0392b;}
	  .red a {
		  width: 100%;
		  height: 100%;
		  display: block;
		  color: white; /* Pastikan link terlihat */
	  }
  }
  
  
  /* Sisa CSS yang mungkin belum ter-cover:
	 - .menu-body, .menu-bar dan semua variasinya: Ini terlihat seperti custom context menu.
	   Membuatnya responsif sangat tergantung pada bagaimana ia digunakan dan apakah masih relevan.
	   Jika iya, prinsipnya sama: hindari lebar tetap, gunakan unit relatif, dan media query.
	 - .filter_dialog, .filter_text: Sama seperti di atas.
	 - Calendar styles: Tabel kalender juga perlu .table-responsive-wrapper atau desain ulang untuk mobile (misal tampilan list).
	 - Drag handle: Style visual, tidak terlalu berpengaruh ke responsivitas layout.
	 - Banyak style spesifik seperti .logopdpt, .logosiakad, dll., yang ukurannya mungkin perlu disesuaikan di media query.
  */
  
  /* Contoh untuk Calendar */
  td.calendar-day {
	  min-height: 60px; /* Kurangi min-height untuk mobile */
	  padding: 5px;
  }
  * html div.calendar-day { height: 60px; } /* IE6 hack, mungkin bisa dihapus */
  
  div.day-number {
	  padding: 3px;
	  font-size: 0.9em;
	  width: auto; /* Biar lebih fleksibel */
	  min-width: 20px;
  }
  
  @media (min-width: 768px) {
	  td.calendar-day {
		  min-height: 80px; /* Kembalikan ke ukuran asli untuk tablet+ */
	  }
  }
  
  /* Dropdown (Bootstrap like) dari kode asli */
  .dropdown { /* Ini mungkin mengganggu jika position:fixed global */
	  /* position: fixed !important; Hati-hati dengan ini. Relatif terhadap apa? */
	  /* top:0; right:0; */
  }
  .dropdown-menu {
	  padding: 5px 0 !important;
	  /* Style lain dari Bootstrap dropdown biasanya sudah responsif */
  }
  .dropdown-menu a, .dropdown-menu h5 { color:#333 !important; }
  ul.dropdown-menu li.logout:hover{ background:#1A69B6; }
  ul.dropdown-menu li.logout:hover a { color:#fff !important; } /* Target link di dalam li hover */
  
  .navbar .nav li.dropdown > .dropdown-toggle .caret {
	  border-top-color: #fff !important;
	  border-bottom-color: #fff !important;
  }

  /* style.css atau file CSS kustom Anda */

.profile-card {
    border: none; /* Hapus border default card jika ingin lebih clean dengan shadow */
    border-radius: 0.5rem; /* Sedikit lebih rounded */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.profile-card:hover {
    /* transform: translateY(-5px); */ /* Efek hover halus, opsional */
    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */ /* Shadow lebih besar saat hover, opsional */
}

.profile-card .card-header {
    border-bottom: 1px solid #e9ecef; /* Garis pemisah header yang lebih halus */
    background-color: #f8f9fa; /* Warna header lebih netral */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.profile-card .card-header h5 {
    font-weight: 600;
    color: #495057;
}

.profile-avatar {
    /* Ukuran sudah di style inline, tapi bisa juga di sini */
    /* width: 150px; */
    /* height: 150px; */
    /* object-fit: cover;  Agar gambar mengisi tanpa distorsi */
    /* border: 3px solid #ffffff;  Border putih di sekitar avatar */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Shadow halus pada avatar */
}

.profile-card .card-title {
    font-weight: 600;
    color: #343a40;
}

.profile-card .card-text.text-muted {
    font-size: 0.9rem;
}

.profile-details {
    margin-top: 1rem; /* Jarak dari NIM */
    font-size: 0.95rem;
}

.profile-details li {
    padding: 0.5rem 0; /* Jarak antar item detail */
    /* border-bottom: 1px dashed #eee; */ /* Garis pemisah antar item, opsional */
    display: flex; /* Untuk alignment ikon dan teks */
    align-items: center; /* Vertikal align ikon dan teks */
}

.profile-details li:last-child {
    /* border-bottom: none; */ /* Hapus border pada item terakhir */
}

.profile-details i {
    /* color: #007bff; */ /* Warna ikon bisa di-set di HTML dengan text-primary atau di sini */
    font-size: 1.1rem; /* Ukuran ikon */
    width: 25px; /* Beri ruang tetap untuk ikon */
}

.profile-details strong {
    color: #495057;
    min-width: 80px; /* Agar label (Prodi, Angkatan) sejajar */
    display: inline-block;
}

/* Warna badge bisa disesuaikan lebih lanjut */
.profile-card .badge.bg-success {
    /* Warna default Bootstrap sudah bagus */
}
.profile-card .badge.bg-warning {
    /* Warna default Bootstrap sudah bagus */
}

/* Responsivitas tambahan jika diperlukan (Bootstrap grid sudah menangani kolom) */
@media (max-width: 767px) {
    .profile-card .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
    }
     .profile-details li {
        font-size: 0.9rem;
    }
}

/* style.css atau file CSS kustom Anda */

/* Detail Informasi */
.info-detail-container .card-title {
    color: #333; /* Warna judul lebih gelap */
}
.info-detail-container .card-subtitle i {
    margin-right: 0.3rem;
}
.post-content {
    font-size: 1rem; /* Ukuran font konten */
    color: #555;
}
.post-content p { /* Jika post_content dirender sebagai HTML dengan tag <p> */
    margin-bottom: 1rem;
}

/* Indeks Prestasi & Informasi Akademik Cards */
.card-header h5 {
    font-weight: 500; /* Sedikit lebih tipis dari bold */
}
.card-header i {
    font-size: 1.1rem; /* Ukuran ikon di header card */
}

/* Tabel Indeks Prestasi */
.table-responsive { /* Pastikan tabel bisa discroll di layar kecil jika terlalu lebar */
    /* Bootstrap sudah menyediakan ini, tetapi bisa dikustomisasi */
}
.table th {
    font-weight: 600; /* Header tabel lebih tebal */
    white-space: nowrap; /* Mencegah header tabel membungkus */
}

/* Daftar Informasi Akademik (List Group) */
.list-group-item-action {
    transition: background-color 0.2s ease-in-out;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #f8f9fa; /* Warna hover halus */
    color: #0d6efd; /* Warna teks link saat hover */
}
.list-group-item-action h6 {
    color: #0d6efd; /* Judul informasi sebagai link */
    transition: color 0.2s ease-in-out;
}
.list-group-item-action:hover h6,
.list-group-item-action:focus h6 {
    color: #0a58ca;
}
.list-group-item-action small i {
    margin-right: 0.2rem;
}

/* Pagination */
.pagination .page-item.disabled .page-link {
    /* Style untuk tombol prev/next yang disabled */
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}
.pagination .page-item.active .page-link {
    /* Style untuk halaman aktif */
    z-index: 3;
    color: #fff;
    background-color: #0d6efd; /* Warna primer Bootstrap */
    border-color: #0d6efd;
}

/* style.css atau file CSS kustom Anda */

/* Styling untuk menu navigasi di halaman payment jika diperlukan kustomisasi lebih lanjut */
.list-group-item-action i {
    width: 20px; /* Memberi ruang konsisten untuk ikon */
    text-align: center; /* Menengahkan ikon jika width diset */
}

.list-group-item.active {
    /* Bootstrap sudah memberi style, tapi bisa di-override */
    background-color: #007bff; 
    border-color: #007bff; 
    color: white; 
}
.list-group-item.active i {
     color: white; /* Warna ikon saat item aktif */
}

/* Styling untuk konten di dalam payment-data.php mungkin perlu ditambahkan di sini */
/* Misalnya, styling tabel, form, dll. yang spesifik untuk tampilan data pembayaran */

/* style.css atau file CSS kustom Anda */

/* Styling untuk menu navigasi di halaman administrasi jika diperlukan kustomisasi lebih lanjut */
.list-group-item-action i.bi { /* Target ikon Bootstrap secara spesifik */
    width: 22px; /* Memberi ruang konsisten untuk ikon */
    text-align: center; /* Menengahkan ikon jika width diset */
    font-size: 1.1rem; /* Ukuran ikon agar sedikit lebih besar dari teks */
    vertical-align: middle; /* Membantu alignment dengan teks */
}

.list-group-item.active {
    /* Bootstrap sudah memberi style, tapi bisa di-override */
    background-color: #0d6efd; /* Warna primer Bootstrap */
    border-color: #0d6efd; 
    color: white; 
}
.list-group-item.active i.bi {
    color: white; /* Warna ikon saat item aktif */
}

/* Styling untuk konten di dalam adm_s.php mungkin perlu ditambahkan di sini */
/* Misalnya, styling form pengajuan, tabel status, dll. */
/* Contoh untuk form di dalam adm_s.php: */
/*
.form-pengajuan .form-label {
    font-weight: 500;
}
.form-pengajuan textarea.form-control {
    min-height: 120px;
}
*/

/* style.css atau file CSS kustom Anda */

.administration-content h3 {
    font-weight: 500;
    color: #343a40; /* Warna judul yang lebih soft */
}

/* Styling untuk form yang ada di dalam form.php akan sangat bergantung pada
   struktur HTML yang dihasilkan oleh form.php.
   Contoh jika form.php menghasilkan form Bootstrap standar: */

/* .form-pengajuan-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 0.3rem;
    border: 1px solid #dee2e6;
}

.form-pengajuan-section .form-label {
    font-weight: 500;
}
*/
.form-pengajuan-section textarea.form-control {
    min-height: 120px; /* Contoh tinggi untuk textarea */
} 

/* Styling untuk tabel status jika ada di form.php */
/*
.status-pengajuan-table th {
    background-color: #e9ecef;
}
*/

/* css/style.css */

body.homepage-body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6; /* Warna background fallback jika gambar tidak load */
    color: #333;
    line-height: 1.6;
}

.hero-section {
    min-height: 75vh; /* Tinggi hero section, bisa disesuaikan */
    background: url('../img/kampus2.jpg') no-repeat center center; /* Ganti dengan path gambar kampus yang bagus */
    background-size: cover;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 51, 102, 0.65); /* Warna overlay biru tua semi-transparan, sesuaikan */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-logo {
    max-height: 120px; /* Ukuran logo di hero, sesuaikan */
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.hero-section h1 {
    font-weight: 700;
    font-size: 3.5rem; /* Ukuran font judul hero */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.hero-section .lead {
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.application-section {
    background-color: #ffffff; /* Background putih untuk kontras */
}

.section-title {
    font-weight: 600;
    color: #003366; /* Warna biru tua untuk judul section */
    position: relative;
    padding-bottom: 15px;
}

.section-title::after { /* Garis bawah dekoratif untuk judul section */
    content: '';
    position: absolute;
    display: block;
    width: 80px;
    height: 3px;
    background: #007bff; /* Warna biru primer Bootstrap */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.app-card {
    border: none; /* Hapus border default card */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 0.5rem; /* Sedikit rounded */
}

.app-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important; /* Shadow lebih menonjol saat hover */
}

.app-card .card-body {
    padding: 1.5rem 1rem; /* Padding internal card */
}

.app-icon {
    width: 80px; /* Ukuran ikon aplikasi */
    height: 80px;
    object-fit: cover; /* Atau 'contain' jika ingin semua ikon terlihat utuh */
    border-radius: 0.375rem; /* Rounded corners untuk ikon */
    border: 1px solid #eee; /* Border tipis pada ikon */
    padding: 5px; /* Beri sedikit padding di dalam border ikon */
    background-color: #fff; /* Background putih di belakang ikon */
}

.app-card .card-title {
    font-weight: 600;
    color: #343a40;
    margin-top: 0.75rem; /* Jarak dari ikon ke judul */
    font-size: 1rem; /* Ukuran font judul ikon */
}

.app-card-link {
    color: inherit; /* Mewarisi warna teks dari parent */
}
.app-card-link:hover {
    color: inherit; /* Pastikan warna tidak berubah aneh saat hover */
}

.footer-homepage {
    /* background-color: #003366; */ /* Contoh warna footer biru tua */
    /* color: #f8f9fa; */
    font-size: 0.9rem;
}

.footer-homepage p {
    margin-bottom: 0.25rem;
}

/* Penyesuaian Responsif jika diperlukan lebih lanjut */
@media (max-width: 767px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section .lead {
        font-size: 1.1rem;
    }
    .hero-logo {
        max-height: 100px;
    }
    .app-icon {
        width: 70px;
        height: 70px;
    }
    .section-title {
        font-size: 1.8rem;
    }
}