/* Variables */
:root {
    --text-dark: #333;
    --text-light: #555;
    --text-muted: #888;
    --bg-white: #fff;
    --bg-off-white: #f9f9f9;
    --border-light: #ddd;
    --font-body: 'Montserrat', sans-serif;
    --font-brand: 'Dancing Script', cursive;
}

/* Global Styles & Typography */
body {
    font-family: var(--font-body);
    color: var(--text-light);
    background-color: var(--bg-white);
    line-height: 1.7;
    font-weight: 400; /* Regular default font weight */
}

/* Pastikan elemen umum juga menggunakan font body */
p, label, .form-text, .btn, input, textarea, select {
    font-family: var(--font-body);
}

main { /* Added rule for main content area */
    min-height: 75vh; /* Ensure main content takes up significant height */
    display: block; /* Ensure it behaves as a block */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400; /* Ganti dari 500 ke 400 */
    color: var(--text-dark);
    margin-bottom: 1rem;
}

a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--text-muted);
}

.container {
    max-width: 1200px; /* Slightly wider container */
}

/* Navbar */
.main-navbar {
     /* Minimal vertical padding */
    background-color: var(--bg-white) !important;
    box-shadow: none; /* Remove shadow */
    border-bottom: 1px solid var(--border-light); /* Subtle border */
}

.nav-link {
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text-light) !important;
    margin: 0 1rem;
    padding: 0.2rem 0 ;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-dark) !important;
}

/* Underline animation on hover */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 4px; /* Space between text and underline */
    right: 0;
    background: var(--text-dark); /* Underline color */
    transition: width .3s ease;
    -webkit-transition: width .3s ease;
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
    background: var(--text-dark);
}

/* Login Button Styling */
.navbar .btn-outline-dark {
    color: #555; /* Directly set a darker gray */
    border-color: #bbb; /* Directly set a darker border */
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.4rem 1rem !important;
    border-radius: 4px !important;
    transition: all 0.3s ease;
}

.navbar .btn-outline-dark:hover {
    background-color: var(--text-dark);
    border-color: var(--text-dark);
    color: var(--bg-white);
}

/* Hero Section - Simplified White Background */
.hero-section {
    min-height: auto; /* Remove fixed height */
    background: var(--bg-white);
    padding: 100px 0 300px 0; /* Adjust padding */
    margin-top: 0; /* Reset margin */
    text-align: center; 
    color: var(--text-dark);
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.hero-section p.lead {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-light);
    font-weight: 300;
}

/* Simpler buttons for hero */
.hero-section .btn {
    padding: 0.7rem 1.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}
.hero-section .btn-outline-dark { /* Primary action */
     color: var(--text-dark);
     border-color: var(--text-dark);
}
.hero-section .btn-outline-dark:hover {
     background-color: var(--text-dark);
     color: var(--bg-white);
}
.hero-section .btn-light { /* Secondary action - subtle */
     background-color: var(--bg-off-white);
     color: var(--text-dark);
     border: 1px solid #bbb; /* Directly set a darker border */
}
.hero-section .btn-light:hover {
    background-color: #eee;
    border-color: #bbb; /* Keep darker border on hover */
    color: var(--text-dark);
}

/* Sections */
.section-padding {
    padding: 80px 0;
}

.bg-off-white {
     background-color: var(--bg-off-white);
}

/* General Card Styling - Minimal */
.card {
    border: 1px solid var(--border-light);
    box-shadow: none; /* Remove shadow */
    border-radius: 0; /* Remove radius or make very small */
}
.card .card-body {
     padding: 1.5rem; /* Adjust padding */
}

/* Project Grid Styling */
.project-grid {
    /* Grid styles already handled by Bootstrap row-cols */
}

/* Style for the new project card */
.project-card {
    background-color: var(--bg-white);
    border: 1px solid #eee; /* Slightly softer border */
    border-radius: 4px; /* Optional: slightly rounded corners */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* Ensure image corners match card corners if rounded */
}

.project-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Subtle shadow on hover */
    transform: translateY(-3px);
}

.project-card-image-link {
    display: block;
}

.project-image-wrapper.card-img-top {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-off-white);
    border-bottom: 1px solid #eee;
}

.project-img {
    display: block;
    width: 100%;
    height: 250px; /* Adjust height as needed */
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-card-image-link:hover .project-img {
    transform: scale(1.05);
}

.project-img-placeholder {
    width: 100%;
    height: 250px; /* Match image height */
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.project-card .card-body {
    padding: 1rem; /* Adjust padding inside card body */
}

.project-title.card-title {
    font-weight: 500; /* Make title slightly bolder */
    font-size: 1.05rem;
    color: var(--text-dark);
    /* Allow title to wrap if long */
}

.project-year-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3em 0.6em;
    border: 1px solid #ddd;
}

.project-location {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem; /* Adjust spacing */
}

.project-category {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.project-detail-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
}

/* Footer - Minimal */
footer.main-footer {
    background-color: var(--bg-white);
    color: var(--text-muted);
    padding: 2.5rem 0;
    margin-top: 8rem; /* Increased margin-top significantly */
    border-top: 1px solid var(--border-light);
    font-size: 0.85rem;
}

/* Adjusted Reset - Remove text-center from here */
footer h5,
footer a,
footer .list-unstyled li,
footer hr { 
    margin: 0;
    padding: 0;
    border: none;
}

footer p.copyright-text {
    text-align: center; /* Ensure copyright is centered */
}

/* Simple Nav Links Section (Home page) */
.simple-nav-links a.page-link {
    color: var(--text-light);
    transition: color 0.3s ease;
}

.simple-nav-links a.page-link:hover {
    color: var(--text-dark);
}

.simple-nav-links span {
    margin: 0 0.5rem; /* Adjust spacing around pipe */
}

/* Animation Utilities (Unchanged) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    opacity: 0; /* Start hidden */
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-delay-1 { animation-delay: 0.2s; }
.animate-delay-2 { animation-delay: 0.4s; }
.animate-delay-3 { animation-delay: 0.6s; }

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    /* Navbar adjustments */
    .navbar-nav {
        background-color: var(--bg-white);
        padding: 1rem;
        border-radius: 0;
        margin-top: 1rem; /* Increased margin */
        border: 1px solid var(--border-light);
        box-shadow: none;
    }
    .nav-link {
        margin: 0.5rem 0;
        text-align: center;
    }
    .navbar .btn-outline-dark {
        display: block;
        text-align: center;
        margin-top: 1rem;
        width: 100%;
    }
    /* Hero adjustments */
    .hero-section {
         padding: 80px 0 60px 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    /* Project image height */
    .project-img, .project-img-placeholder {
         height: 250px;
    }
}

@media (max-width: 767.98px) {
     /* Navbar Brand */
    .navbar-brand.site-title {
        font-size: 2rem;
    }
     /* Hero adjustments */
    .hero-section {
         padding: 60px 0 40px 0;
    }
     .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section p.lead {
        font-size: 1rem;
    }
    .hero-section .btn {
        display: block;
        margin: 1rem auto 0;
        max-width: 250px;
    }
    .hero-section .btn:first-of-type {
        margin-top: 0;
    }

     /* Project image height */
     .project-img, .project-img-placeholder {
        height: 220px;
    }

    /* Footer adjustments */
    footer .col-lg-4 {
        margin-bottom: 2rem;
        text-align: center;
    }
     footer .col-lg-4:last-child {
        margin-bottom: 0;
    }
     footer .list-unstyled {
         display: inline-block;
         text-align: center;
    }
}

/* Navbar Logo */
.navbar-logo-img {
    max-height: 70px; /* Set desired height */
    width: auto;
}

/* Adjust alignment for large logo */
.navbar-nav {
    padding: 1rem;
}

/* Aturan khusus untuk elemen proyek agar lebih ringan */

/* Judul di halaman detail proyek */
.project-detail-page h1.display-5 { /* Asumsikan ada class .project-detail-page di body atau container */
    /* Coba Light (300) atau Regular (400) */
    font-weight: 400;
}
/* Jika tidak pakai class khusus, target langsung h1 di project_detail.php */
/* Contoh: Atur di <style> tag project_detail.php atau buat class khusus di sana */

/* Deskripsi di halaman detail proyek */
.project-description p {
    /* Coba Light (300) atau Regular (400) */
    font-weight: 300; /* Lebih ringan untuk deskripsi */
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.7;
}

/* Responsiveness Adjustments */
@media (max-width: 991.98px) { /* Medium devices (tablets, less than 992px) */
    .navbar-nav {
        text-align: center;
        padding-top: 0.5rem; /* Adjust as needed */
        margin-top: 0.5rem;
        border-top: 1px solid #eee;
    }
    .nav-link {
        margin: 0.5rem 0;
        padding: 0.5rem 0;
    }
    .navbar .btn-outline-dark {
        margin-top: 0.5rem;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section {
        padding: 60px 0 150px 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .project-img, .project-img-placeholder {
        height: 220px;
    }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones, less than 768px) */
    .navbar-brand.site-title {
        font-size: 1.3rem;
    }
    .navbar-logo-img {
        max-height: 50px; /* Perkecil logo sedikit di mobile */
    }

    .hero-section {
        padding: 50px 0 100px 0;
    }
     .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section p.lead {
        font-size: 1rem;
    }
    .hero-section .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem; /* Stack buttons */
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 200px;
    }
    .hero-section .btn:first-of-type {
        margin-bottom: 0.8rem; /* More space between stacked buttons */
    }

     .project-img, .project-img-placeholder {
        height: 200px;
    }

    footer .col-lg-4 {
        text-align: center;
        margin-bottom: 2rem;
    }
     footer .col-lg-4:last-child {
        margin-bottom: 0;
     }
     footer .list-unstyled {
        padding-left: 0;
     }
}

/* Logo Size Management */
.navbar-logo-img {
    max-height: 80px; /* Ukuran default (besar) */
    width: auto; /* Jaga rasio aspek */
    transition: max-height 0.3s ease;
}

/* Navbar Nav Alignment */
.navbar-nav {
    /* Adjust top padding if necessary to align with logo center */
    /* padding-top: 10px; Example */
}

/* Project Detail Specific Styles (Contoh, jika perlu) */
.project-detail-page h1.display-5 { /* Asumsikan ada class .project-detail-page di body atau container */
    font-size: 2.8rem; /* Sesuaikan jika perlu */
}
@media (max-width: 767.98px) {
    .project-detail-page h1.display-5 {
        font-size: 2.2rem;
    }
}
.project-description p {
    font-size: 1.1rem; /* Ukuran font deskripsi */
    color: #495057;    /* Warna teks sedikit lebih gelap */
    line-height: 1.7;  /* Jarak antar baris */
}

/* Styles for Contact page - move to style.css ideally */
.contact-section-padding { /* Custom class if needed */
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.site-title-like { /* Assuming you have styles for this */
    font-weight: 600;
}
.contact-card {
    border: none; /* Remove default card border if using shadow */
}

/* Homepage Featured Projects Gallery */
.homepage-gallery-card {
    overflow: hidden; /* Penting untuk wrapper gambar */
    border: none; /* Hapus border default card */
    background-color: transparent; /* Hapus bg card */
    box-shadow: none !important; /* Hapus shadow default jika ada */
}

.gallery-item-link {
    display: block;
    text-decoration: none;
}

.homepage-gallery-img-wrapper {
    height: 300px; /* Tentukan tinggi tetap untuk konsistensi */
    overflow: hidden;
    position: relative;
    background-color: var(--bg-off-white); /* Latar placeholder */
    border-radius: 4px; /* Sedikit lengkungan */
}

.homepage-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pastikan gambar menutupi area */
    transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item-link:hover .homepage-gallery-img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.homepage-gallery-placeholder {
    height: 300px; /* Sama dengan wrapper gambar */
    border-radius: 4px;
    font-size: 0.9rem;
    border: 1px dashed #ddd;
    text-align: center;
}

.homepage-gallery-card .card-body {
    padding: 0.75rem 0.25rem; /* Sedikit padding untuk judul */
}

.homepage-gallery-card .card-title a {
    font-size: 0.95rem;
    font-weight: 500;
}