/* =======================================================
   1. GLOBAL & ROUNDED STYLES
   ======================================================= */
   .store-item, 
   .card, 
   .rounded-box, 
   .rounded-box-lg,
   .overlay {
       border-radius: 5px !important;
       overflow: hidden !important;
       border: none !important;
   }
   
   nav.navbar, 
   .navbar-collapse, 
   .dropdown, 
   .dropdown-menu {
       border-radius: 0 !important;
       overflow: visible !important; 
   }
   
   .store-item img, 
   .card img, 
   .rounded-box img, 
   .rounded-box-lg img {
       border-radius: 0 !important; 
       width: 100%;
       display: block;
   }
   
   /* =======================================================
      2. COLOR & THEME VARIABLES
      ======================================================= */
   :root {
       --light-bg: #f8f9fa;
       --light-text: #333;
       --light-card: #ffffff;
       
       --dark-bg: #121212;
       --dark-card: #1e2421;
       --dark-text: #e0e0e0;
       --dark-border: #333;
   }
   
   /* =======================================================
      3. INFO AKADEMIK CARD (ADAPTIVE)
      ======================================================= */
   /* Default (Light Mode) */
   .card-custom {
       background-color: var(--light-card);
       color: var(--light-text);
       transition: transform 0.3s;
   }
   .card-custom:hover {
       transform: translateY(-5px);
       box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   }
   .text-dark-adapt {
       color: #333;
   }
   
   /* Dark Mode Overrides */
   body.dark-theme .card-custom {
       background-color: var(--dark-card) !important;
       color: var(--dark-text) !important;
   }
   body.dark-theme .text-dark-adapt {
       color: #e0e0e0 !important;
   }
   
   /* =======================================================
      4. DARK THEME LOGIC
      ======================================================= */
   body.dark-theme {
       background-color: var(--dark-bg) !important;
       color: var(--dark-text) !important;
   }
   
   body.dark-theme .bg-light,
   body.dark-theme .bg-white {
       background-color: var(--dark-card) !important;
       color: var(--dark-text) !important;
       box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   }
   
   body.dark-theme .navbar.bg-light {
       background-color: var(--dark-card) !important;
       border-bottom: 1px solid var(--dark-border);
   }
   
   body.dark-theme .dropdown-menu {
       background-color: #2d3630;
       border: 1px solid #444;
   }
   body.dark-theme .dropdown-item { color: #e0e0e0; }
   body.dark-theme .dropdown-item:hover {
       background-color: #4caf50;
       color: #fff;
   }
   
   body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, 
   body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
   body.dark-theme a.text-dark {
       color: #ffffff !important;
   }
   body.dark-theme .text-secondary { color: #a5d6a7 !important; }
   body.dark-theme .form-control {
       background-color: #2c2c2c;
       border: 1px solid #444;
       color: #fff;
   }
   
   /* =======================================================
      5. MENU BOX WARNA-WARNI
      ======================================================= */
   @media (min-width: 768px) {
       .col-md-2-custom {
           flex: 0 0 20%;
           max-width: 20%;
       }
   }
   .feature-box {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: 10px 5px;
       border-radius: 5px;
       text-decoration: none !important;
       transition: transform 0.3s ease, filter 0.3s;
       color: white !important;
   }
   .feature-box:hover {
       transform: translateY(-5px);
       filter: brightness(110%);
   }
   .bg-red-custom { background-color: #e74c3c; }
   .bg-blue-custom { background-color: #3498db; }
   .bg-purple-custom { background-color: #9b59b6; }
   .bg-green-custom { background-color: #27ae60; }
   .bg-dark-custom { background-color: #34495e; }
   
   /* =======================================================
      6. FOOTER ADAPTIF (NEW)
      ======================================================= */
   .site-footer {
       transition: background-color 0.3s, color 0.3s;
       /* Default Light Mode Style */
       background-color: #f2f2f2; /* Abu-abu sangat muda */
       color: #333;
   }
   
   .site-footer a {
       color: #555;
       transition: 0.3s;
   }
   .site-footer a:hover {
       color: #28a745;
   }
   
   .site-footer .btn-social {
       /* Default button outline untuk light */
       color: #333;
       border-color: #333;
   }
   .site-footer .btn-social:hover {
       background-color: #333;
       color: #fff;
   }
   
   .footer-copyright {
       border-color: #ddd !important; /* Garis pemisah terang */
   }
   
   /* Dark Mode Overrides for Footer */
   body.dark-theme .site-footer {
       background-color: #111 !important; /* Hitam pekat */
       color: #eee !important;
   }
   
   body.dark-theme .site-footer a {
       color: #bbb;
   }
   body.dark-theme .site-footer a:hover {
       color: #4caf50;
   }
   
   body.dark-theme .site-footer .btn-social {
       color: #fff;
       border-color: #fff;
   }
   body.dark-theme .site-footer .btn-social:hover {
       background-color: #fff;
       color: #111;
   }
   
   body.dark-theme .footer-copyright {
       border-color: #333 !important; /* Garis pemisah gelap */
   }
   
   /* =======================================================
      7. SOCIAL BUTTONS (FOLLOW US)
      ======================================================= */
   .social-btn {
       width: 45px;
       height: 45px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
       transition: 0.3s;
   }
   .social-btn:hover {
       transform: rotate(360deg);
   }
   
   /* =======================================================
      8. MOBILE & UTILS
      ======================================================= */
   .mobile-bottom-nav {
       display: none;
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 60px;
       background-color: #ffffff;
       box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
       z-index: 9999;
       justify-content: space-around;
       align-items: center;
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
   }
   body.dark-theme .mobile-bottom-nav {
       background-color: #1e2421;
       border-top: 1px solid #333;
   }
   .mobile-bottom-nav__item {
       flex-grow: 1;
       text-align: center;
       font-size: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       color: #888;
       text-decoration: none;
       height: 100%;
   }
   .mobile-bottom-nav__item i { font-size: 20px; margin-bottom: 3px; }
   .mobile-bottom-nav__item--active { color: #28a745; font-weight: bold; }
   body.dark-theme .mobile-bottom-nav__item--active { color: #4caf50; }
   
   @media (max-width: 767.98px) {
       .mobile-bottom-nav { display: flex; }
       body { padding-bottom: 70px; }
   }
   
   .floating-container {
       position: fixed;
       right: 20px;
       bottom: 25px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
       z-index: 9990;
   }
   .btn-lg-square {
       width: 45px;
       height: 45px;
       border-radius: 50% !important;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   }
   @media (max-width: 767.98px) {
       .floating-container { bottom: 80px; }
   }
   /* =========================================
   1. CSS Khusus Tampilan Mobile
   ========================================= */
@media (max-width: 768px) {
    /* Memaksa Container menjadi hampir penuh */
    .container, .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Menyeimbangkan Row */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    /* Mengatur padding kolom */
    .col-12, .col-lg-4, .col-md-6, [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Widget Tab */
    .tab-content-box {
        padding: 10px !important;
    }

    /* Font Tab Menu */
    .custom-small-tab .nav-link {
        padding: 8px 5px !important;
        font-size: 11px !important;
    }

    /* Gambar Media */
    .media img {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Fix tombol floating tertutup menu bawah di HP */
    .floating-controls { 
        bottom: 80px !important; 
        right: 15px !important; 
    }
}

/* =========================================
   2. Styling Footer
   ========================================= */
.site-footer {
    font-size: 14px;
    color: #6c757d;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6;
}

.site-footer h4 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px !important;
}

.site-footer a {
    color: #6c757d;
    transition: 0.3s;
}

.site-footer a:hover {
    color: #007bff;
    text-decoration: none;
}

.btn-social {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
}

/* =========================================
   3. Floating Controls (Tombol Tema & BackToTop)
   ========================================= */
.floating-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.float-btn {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: none;
    transition: all 0.3s ease;
    color: #fff;
}

.btn-theme { background-color: #343a40; }
.btn-top { background-color: #007bff; display: none; }
.float-btn:hover { transform: translateY(-3px); color: #fff; }


    /* --- CSS KHUSUS TOMBOL SHARE (JsSocials) --- */

    /* 1. Mengatur jarak antar tombol */
    .jssocials-share {
        margin: 3px !important;
    }

    /* 2. Mengatur Ukuran Kotak (Padding) & Radius */
    .jssocials-share-link {
        padding: 5px 10px !important;
        /* Atas-Bawah 5px, Kiri-Kanan 10px */
        border-radius: 4px !important;
        /* Membuat sudut sedikit melengkung */
        transition: all 0.2s ease-in-out;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 3. Mengatur Ukuran Ikon */
    .jssocials-share-logo {
        font-size: 13px !important;
        /* Perkecil ikon */
        margin-right: 5px !important;
        /* Jarak ikon ke teks */
    }

    /* 4. Mengatur Ukuran Teks (Label) */
    .jssocials-share-label {
        font-size: 12px !important;
        /* Perkecil teks */
        font-weight: 600 !important;
        margin-left: 0 !important;
    }

    /* 5. Efek Hover (Opsional: Agar lebih interaktif) */
    .jssocials-share-link:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        /* Naik sedikit saat disentuh */
    }


        /* Container pembungkus agar teks tidak keluar area */
        .ticker-wrap {
            width: calc(100% - 200px);
            overflow: hidden;
            /* Sembunyikan teks yang lewat batas */
            white-space: nowrap;
            /* Paksa satu baris */
            padding-left: 20px;
            box-sizing: border-box;
        }

        /* Animasi teks berjalan */
        .ticker-move {
            display: inline-block;
            white-space: nowrap;
            animation: ticker 25s linear infinite;
            /* Kecepatan 25 detik, ubah jika ingin lebih cepat/lambat */
        }

        /* Teks melayang saat di-hover (Opsional: hapus jika ingin jalan terus walau di-hover) */
        .ticker-wrap:hover .ticker-move {
            animation-play-state: paused;
        }

        /* Definisi Gerakan dari Kanan ke Kiri */
        @keyframes ticker {
            0% {
                transform: translate3d(100%, 0, 0);
                /* Mulai dari luar kanan */
                visibility: visible;
            }

            100% {
                transform: translate3d(-100%, 0, 0);
                /* Berakhir di luar kiri */
            }
        }

        .ticker-item {
            display: inline-block;
            padding: 0 2rem;
            font-size: 14px;
            /* Sesuaikan ukuran font */
            color: #6c757d;
            /* text-secondary */
        }

        /* Mengatur Ukuran Font Menu Utama (Home, Profile, dll) */
        .navbar-nav .nav-link {
            font-size: 15px !important;
            /* Ganti 14px jika ingin lebih kecil/besar */
            font-weight: 500;
            /* Opsional: Ketebalan huruf */
        }

        /* Mengatur Ukuran Font Dropdown (Isi sub-menu) */
        .dropdown-menu .dropdown-item {
            font-size: 14px !important;
            /* Biasanya dropdown lebih kecil sedikit */
        }

        /* Opsional: Mengatur ukuran input pencarian di kanan */
        .input-group input.form-control {
            font-size: 14px;
        }