/* Custom CSS for Alumni Website */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff; /* White Background */
    color: #000000; /* Black Text */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Ini yang mendorong footer ke bawah */
}

/* Navbar / Header */
.navbar {
    background-color: #0d6efd !important; /* Blue Header */
    transition: none;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: #ffffff !important; /* White text for better contrast on blue */
}

.navbar .navbar-toggler-icon {
    filter: invert(1); /* Make toggler icon white */
}

/* Logo Flip Effect */
#navbarLogo {
    transition: transform 0.5s ease-in-out; /* Default transition */
}

#navbarLogo:hover {
    transform: rotateY(180deg); /* Flip effect */
}


/* Hero Section on Landing Page */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://paguyuban8.metaweb.id/landingpage/assets/images/banner8.jpg') no-repeat center center / cover; /* Background gambar dengan overlay gelap */
    height: 100vh;
    color: white;
}

#hero h1, #hero .lead {
    color: #ffffff !important;
}


/* General Section Styles */
section {
    scroll-margin-top: 56px; /* Offset for fixed navbar */
    padding-top: 60px;
    padding-bottom: 60px;
}

h2 {
    color: #000000; /* Black headings */
}

/* Card Styles for Wirausaha */
.card {
    border: 1px solid #dee2e6;
    border-radius: 10px; /* Mengecilkan sudut melengkung lagi */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease; /* Transisi halus untuk semua properti */
    position: relative; /* Penting untuk overlay */
    overflow: hidden; /* Penting untuk efek scroll up */
}

.card:hover {
    background-color: #0d6efd; /* Warna biru saat hover */
    color: #ffffff; /* Warna teks putih saat hover */
    transform: translateY(-5px); /* Mengangkat sedikit ke atas */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Bayangan lebih jelas */
}

.card:hover .card-title,
.card:hover .card-text {
    color: #ffffff !important; /* Pastikan teks di dalam card juga putih */
}

/* Product Name Overlay */
.product-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Background gelap transparan */
    color: #ffffff;
    padding: 10px;
    text-align: center;
    transform: translateY(100%); /* Sembunyikan di bawah */
    transition: transform 0.3s ease-out;
    box-sizing: border-box;
}

.card:hover .product-name-overlay {
    transform: translateY(0); /* Munculkan saat hover */
}

/* Modal Content Styling */
.modal-content {
    border-radius: 10px; /* Menyamakan border-radius modal dengan card */
}

/* Force Lightbox Fullscreen */
.bs5-lightbox-modal.modal.fade.show .modal-dialog {
    max-width: 100vw; /* Memastikan lebar maksimal 100% viewport */
    height: 100vh; /* Memastikan tinggi 100% viewport */
    margin: 0; /* Menghilangkan margin */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs5-lightbox-modal.modal.fade.show .modal-content {
    height: 100%;
    border-radius: 0; /* Menghilangkan border-radius untuk tampilan full */
}

.modal-backdrop.fade.show {
    opacity: 1; /* Memastikan backdrop benar-benar solid hitam */
    background-color: rgba(0, 0, 0, 0.95); /* Warna hitam pekat */
    z-index: 1050; /* Pastikan di atas elemen lain */
}

.bs5-lightbox-modal {
    z-index: 1051; /* Pastikan modal di atas backdrop */
}

/* Footer */
footer.bg-dark {
    background-color: #0d6efd !important; /* Blue Footer */
    border-top: 5px solid gold; /* Gold line on top */
    color: #000000 !important; /* Black Text */
    position: relative; /* Penting untuk positioning counter */
}

footer.bg-dark p {
    color: #000000 !important; /* Black Text for paragraphs inside footer */
}

/* Profile Photos Styling */
.profile-img-container {
    position: relative;
    width: 120px; /* Ukuran container foto */
    height: 120px; /* Ukuran container foto */
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden; /* Penting untuk efek kilatan cahaya */
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar mengisi lingkaran tanpa distorsi */
    border-radius: 50%; /* Membuat gambar menjadi lingkaran */
    border: 2px solid gold; /* Border emas 2px */
    transition: transform 0.3s ease-in-out;
}

.profile-img-container:hover {
    transform: scale(1.05) rotateY(10deg); /* Efek membesar dan flip ringan */
}

/* Light Streak Effect */
.profile-img-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Warna kilatan cahaya */
    transform: skewX(-20deg); /* Sudut kilatan */
    transition: all 0.7s ease-in-out;
    z-index: 1;
}

.profile-img-container:hover::before {
    left: 125%; /* Gerakan kilatan cahaya */
}

.profile-info {
    margin-top: 10px;
}

.profile-info h6 {
    font-size: 1.1rem;
}

.profile-info p {
    font-size: 0.9rem;
}

/* Responsive Map */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Gallery Thumbnail Square */
.gallery-thumbnail-square {
    width: 100%;
    padding-bottom: 100%; /* Ini yang bikin jadi kotak (1:1 aspect ratio) */
    position: relative;
    overflow: hidden;
}

.gallery-thumbnail-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ini yang bikin gambar di-crop biar pas di kotak */
}