.kartu
{
    padding: 20px;
}

/* Utility text-navy dipakai di beberapa halaman tapi belum pernah
   didefinisikan sebelumnya, jadi ikon jatuhnya warna default (hitam). */
.text-navy {
    color: var(--primary-navy, #063A69) !important;
}

/* Halaman Kontak Kami -- kartu alamat + grid info kontak */
.kontak-alamat {
    border-left: 5px solid var(--gold-ipdn, #FFD700);
}

.kontak-ikon-besar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary-navy, #063A69);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.kontak-kartu {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border-bottom: 4px solid transparent;
}

.kontak-kartu:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    border-bottom-color: var(--gold-ipdn, #FFD700);
}

/* Footer -- warna disesuaikan dengan logo IPDN (navy + emas).
   Struktur/markup tetap pakai class bawaan tema (footer-top, footer-info,
   social-links, footer-links) supaya spacing & perilaku hover tetap
   konsisten, cuma skema warnanya yang ditimpa di sini. */
#footer.footer-ipdn {
    background: var(--primary-navy, #063A69);
    color: rgba(255, 255, 255, 0.75);
}

#footer.footer-ipdn .footer-top {
    background: transparent;
    padding: 60px 0 30px 0;
}

#footer.footer-ipdn .footer-info p {
    color: rgba(255, 255, 255, 0.65);
}

#footer.footer-ipdn .social-links a {
    background: rgba(255, 255, 255, 0.12);
}

#footer.footer-ipdn .social-links a:hover {
    background: var(--gold-ipdn, #FFD700);
    color: var(--primary-navy, #063A69);
}

#footer.footer-ipdn .footer-top h4 {
    color: var(--gold-ipdn, #FFD700);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
}

#footer.footer-ipdn .footer-links ul i {
    color: var(--gold-ipdn, #FFD700);
}

#footer.footer-ipdn .footer-links ul a {
    color: rgba(255, 255, 255, 0.75);
}

#footer.footer-ipdn .footer-links ul a:hover {
    color: var(--gold-ipdn, #FFD700);
}

#footer.footer-ipdn .footer-links p {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

#footer.footer-ipdn .footer-links p i {
    color: var(--gold-ipdn, #FFD700);
}

#footer.footer-ipdn .footer-btn-kontak {
    background: var(--gold-ipdn, #FFD700);
    color: var(--primary-navy, #063A69);
    font-weight: 600;
    border: none;
}

#footer.footer-ipdn .footer-btn-kontak:hover {
    background: var(--accent-crimson, #c03f3f);
    color: #fff;
}

#footer.footer-ipdn .copyright {
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 30px;
}

/* Saklar bahasa (ID/EN) di navigasi utama */
.bahasa-switcher > a {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.bahasa-switcher .bendera {
    font-size: 1.1rem;
    line-height: 1;
}

.bahasa-switcher .kode-bahasa {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bahasa-switcher ul li a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

/* Sembunyikan UI bawaan widget Google Translate -- kita pakai saklar
   bendera sendiri (.bahasa-switcher), bukan dropdown bawaan Google.
   body{top:0} mencegah halaman tergeser turun akibat banner Google.
   Google juga mendorong body turun lewat inline style + !important dari
   skrip-nya sendiri saat runtime, jadi CSS ini cuma lapisan pertama --
   ada juga MutationObserver di container/v_container.blade.php yang
   terus memaksa body tetap top:0 dan banner tetap tersembunyi. */
html body {
    top: 0px !important;
}

.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
#google_translate_element {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body > .skiptranslate {
    display: none !important;
}

/* Zona aman untuk konten hasil TinyMCE (deskripsi dosen, layanan, berita,
   visi-misi, sejarah, dll). Tanpa ini, bullet/numbering ketiban aturan lama
   ".about .content ul { list-style:none; padding:0 }" (dibuat untuk daftar
   fitur berikon di section "Tentang", bukan untuk konten WYSIWYG), dan
   tabel tidak bergaris sama sekali karena Bootstrap tidak menata <table>
   polos tanpa class .table. !important dipakai supaya pasti menang dari
   aturan lama itu di halaman mana pun konten ini dipasang. */
.konten-tinymce ul {
    list-style: disc !important;
    padding-left: 1.75rem !important;
    margin-bottom: 1rem;
}

.konten-tinymce ol {
    list-style: decimal !important;
    padding-left: 1.75rem !important;
    margin-bottom: 1rem;
}

.konten-tinymce ul ul {
    list-style: circle !important;
}

.konten-tinymce ol ol,
.konten-tinymce ul ol {
    list-style: lower-alpha !important;
}

.konten-tinymce li {
    padding-bottom: 4px;
}

.konten-tinymce table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.konten-tinymce th,
.konten-tinymce td {
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

.konten-tinymce th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.konten-tinymce img {
    max-width: 100%;
    height: auto;
}

/* Bootstrap 5.1.3 (versi yang dipakai template ini) belum punya utility
   object-fit-cover (baru ada di Bootstrap 5.2+), jadi didefinisikan manual
   supaya thumbnail foto (mis. berita) tidak gepeng/ketarik saat dipaksa
   mengisi kotak rasio (ratio-16x9, dsb). */
.object-fit-cover
{
    object-fit: cover;
}

.kartu-berita:hover
{
    background-color:#000080;
    transition: 1s;
    color: white;
}

/* Judul & teks di dalam kartu-berita pakai inline style (color: var(--primary-navy)
   / class Bootstrap text-secondary & text-muted), jadi warnanya tidak ikut
   berubah walau .kartu-berita:hover di atas sudah set color:white -- inline
   style & class Bootstrap sama-sama menang dari warna yang diwariskan induk.
   Akibatnya judul biru di atas background biru saat hover (tidak kebaca).
   Ditimpa langsung di sini supaya kartu berita di halaman cari/kategori/detail
   tetap kebaca saat hover. */
.kartu-berita:hover h4,
.kartu-berita:hover h5,
.kartu-berita:hover .text-secondary,
.kartu-berita:hover .text-muted {
    color: #ffffff !important;
}

.kartu-berita:hover small i {
    color: #ffffff !important;
}

.kartu-judul
{
    margin-bottom: 20px;
}

.kategoriTeks:hover
{
    color: #000080;
    letter-spacing: 2px;
    font-size: 18px;
    transition: 1s;
}

#visimisi
{
    background-color: #F8F8FF;
}

.kotak-visimisi
{
    padding: 60px;
    background-color: gold;
}

.gambar-tentang
{
    width: 75%;
    margin: 50px;
    margin-top: 0;
}

.padding-about
{
    padding: 30px;
}


.prodi-bg
{
    background-image: linear-gradient(
        rgba(229, 229, 224, 0.5),
        rgb(0 0 255 / 50%)
      ),  url(../img/gallery/gallery-2.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.prodi-bg .container
{
    width: 70%;
}

.prodi-bg .section-title h2
{
    color: #ffffff;
}

.prodi-bg .icon-box,
.prodi-bg .icon-box .title,
.prodi-bg .icon-box .title a,
.prodi-bg .icon-box .description,
.prodi-bg .section-title h2
{
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.card-tautan
{
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.tautan-list li
{
    border-bottom: 2px solid black;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 10px;
}

.tautan-list a:hover, .tautan-list li:hover
{
    border-bottom: 2px solid crimson;
    letter-spacing: 5px;
    transition-duration: 1s;
    font-weight: bold;
    font-size: 20px;
}

.tautan-list a:hover
{
    text-decoration: none;
    border: 0px;
}

.berita-depan .card:hover
{
    background-color: black;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.bg-navy
{
    background-color: #063A69;
}

.teks-kapital
{
    text-transform: uppercase;
}


.kotak-galeri, .kotak-galeri .test{
    position: relative;
    width: 170px;
    height: 150px;
    display: inline-block;
    margin: 5px;
}

.kotak-galeri .hapiyus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

.img-thumbnail{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.img-thumbnail:hover
{
transform: scale(1.2);
opacity: 0.7;
transition: 1s;
}

.kotak-galeri:hover  .hapiyus{
    opacity:1;
}

.kontener-kontak
{
    width: 70%;
}

.kontener-dosen
{
    border: 1px solid gainsboro;
}

.dosen-berita .card-title:hover
{
    color:crimson;
    transition-duration: 1s;
}


.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: transparent;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: var(--bs-danger);
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}


.bg-biru-alice
{
    background-color: #F0F8FF;
}

.bg-putih-hantu
{
    background-color: #F8F8FF;
}

.teks-titel
{
    font-family: "Roboto";
}

.swiper-button-prev, .swiper-button-next {
    background-color: crimson; /* Warna latar belakang baru */
    color: white; /* Warna teks baru */
    border-radius: 50%; /* Opsional: membuat tombol menjadi bulat */
    padding: 30px; /* Opsional: mengatur ukuran padding */
    font-weight: bold;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    transition-duration: 2s;
}

.swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: navy; /* Warna latar belakang saat hover */
    padding: 33px;
}

/* Tabel dari konten CMS (TinyMCE) hanya menyimpan border pada tag <table>,
   bukan pada tiap <td>/<th>, sehingga garis antar sel hilang di halaman depan.
   Aturan ini menjadi border bawaan untuk sel yang belum punya border sendiri;
   style inline yang sudah diatur admin tetap menang karena spesifisitasnya lebih tinggi. */
.content-wrapper table {
    border-collapse: collapse;
    width: 100%;
}

.content-wrapper table th,
.content-wrapper table td {
    border: 1px solid #333;
    padding: 8px;
}