:root {
            --bg-light: #f8f8f8;
            --text-dark: #333333;
            --text-muted: #666666;
            --accent-blue: #2196F3;
            --card-bg-light: #ffffff;
            --border-light: rgba(0, 0, 0, 0.1);
        }

        /* Styling dasar body */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Kontainer umum */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Judul bagian */
        .section-title {
            font-size: 2.5em;
            color: var(--text-dark);
            margin-bottom: 50px;
            font-weight: 700;
            text-align: center;
            position: relative;
            display: inline-block; /* Agar garis bawah pas di tengah */
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            width: 70px;
            height: 3px;
            background-color: var(--accent-blue);
            border-radius: 5px;
        }

        /* ========================================= */
        /* Bagian Galeri Fasilitas Klinik */
        /* ========================================= */
        #fasilitas-klinik-section {
            padding: 80px 0; /* Padding atas-bawah */
            background-color: var(--bg-light);
            text-align: center; /* Untuk memusatkan judul */
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Kolom adaptif */
            gap: 25px; /* Jarak antar item galeri */
            margin-top: 50px;
        }

        .gallery-item {
            background-color: var(--card-bg-light);
            border-radius: 10px;
            overflow: hidden; /* Penting untuk gambar melengkung */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative; /* Untuk overlay */
        }

        .gallery-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .gallery-item img {
            width: 100%;
            height: 200px; /* Tinggi gambar tetap */
            object-fit: cover; /* Memastikan gambar menutupi area */
            display: block; /* Menghilangkan spasi bawah gambar */
        }

        .item-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
            color: white; /* Warna teks overlay diatur menjadi putih */
            padding: 15px;
            opacity: 0;
            transition: opacity 0.3s ease;
            text-align: left;
        }

        .gallery-item:hover .item-overlay {
            opacity: 1;
        }

        .item-overlay h3 { /* Mengubah dari h4 menjadi h3 */
            font-size: 1.2em; /* Ukuran font tetap sama seperti sebelumnya */
            margin: 0;
            font-weight: 600;
            color: white; /* Pastikan teks h3 di overlay berwarna putih */
        }

        /* ========================================= */
        /* Modal (Pop-up) */
        /* ========================================= */
        .modal {
            display: none; /* Sembunyikan secara default */
            position: fixed; /* Tetap di layar */
            z-index: 1000; /* Di atas semua elemen lain */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Memungkinkan scroll jika konten terlalu besar */
            background-color: rgba(0, 0, 0, 0.8); /* Latar belakang gelap transparan */
            align-items: center; /* Pusatkan konten vertikal */
            justify-content: center; /* Pusatkan konten horizontal */
        }

        .modal-content {
            background-color: var(--card-bg-light);
            margin: auto;
            padding: 30px;
            border-radius: 12px;
            max-width: 700px; /* Lebar maksimum modal */
            width: 90%; /* Ambil 90% lebar layar */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            animation-name: animatemodal;
            animation-duration: 0.4s;
        }

        @keyframes animatemodal {
            from { transform: scale(0.7); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .modal-content img {
            width: 100%;
            height: auto;
            max-height: 400px; /* Tinggi maksimum gambar di modal */
            object-fit: contain; /* Gambar pas tanpa terpotong */
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .modal-content h3 {
            font-size: 1.8em;
            color: var(--accent-blue); /* Judul modal berwarna biru */
            margin-bottom: 15px;
            text-align: center;
            font-weight: 700;
        }

        .modal-content p {
            font-size: 1.1em;
            color: var(--text-dark); /* Warna teks deskripsi di modal adalah gelap (mudah dibaca di latar putih) */
            text-align: justify;
        }

        .close-button {
            color: #aaa;
            font-size: 35px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close-button:hover,
        .close-button:focus {
            color: var(--accent-blue);
            text-decoration: none;
            cursor: pointer;
        }

        /* ========================================= */
        /* Responsif */
        /* ========================================= */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2em;
                margin-bottom: 40px;
            }
            .gallery-grid {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 20px;
            }
            .gallery-item img {
                height: 180px;
            }
            .item-overlay h3 { /* Mengubah dari h4 menjadi h3 */
                font-size: 1em;
            }

            .modal-content {
                padding: 20px;
                width: 95%;
            }
            .modal-content h3 {
                font-size: 1.5em;
            }
            .modal-content p {
                font-size: 1em;
            }
            .close-button {
                font-size: 30px;
                top: 5px;
                right: 15px;
            }
        }

        @media (max-width: 480px) {
            #fasilitas-klinik-section {
                padding: 60px 0;
            }
            .section-title {
                font-size: 1.8em;
                margin-bottom: 30px;
            }
            .gallery-grid {
                grid-template-columns: 1fr; /* Satu kolom untuk mobile */
                gap: 15px;
            }
            .gallery-item img {
                height: 220px;
            }
            .modal-content {
                padding: 15px;
            }
            .modal-content h3 {
                font-size: 1.3em;
            }
            .modal-content p {
                font-size: 0.9em;
            }
            .close-button {
                font-size: 28px;
                top: 5px;
                right: 10px;
            }
        }

        .header-area {
            /* Ini adalah kontainer terluar, bisa disesuaikan jika logo akan berada di dalam struktur yang lebih besar */
            background-color: var(--card-bg-light); /* Latar belakang putih untuk area header */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Bayangan untuk pemisah visual */
            padding: 15px 0; /* Padding atas bawah untuk header */
            width: 100%;
            box-sizing: border-box;
        }
          /* Styling untuk kontainer tombol kanan header */
        .header-right-btn {
            /* Menggunakan flexbox untuk mensejajarkan ikon pengguna dan tombol secara horizontal */
            display: flex;
            align-items: center; /* Menyelaraskan item secara vertikal di tengah */
        }

    .user-icon-mobile {
            font-size: 24px; /* Ukuran sedikit lebih besar untuk target sentuh yang lebih mudah */
            color: #007bff; /* Warna yang sama dengan ikon desktop */
            display: flex; /* Menggunakan flexbox untuk penyejajaran internal */
            align-items: center; /* Menyelaraskan secara vertikal di tengah */
            justify-content: end; /* Menyelaraskan secara horizontal di tengah (jika ikon memiliki ruang ekstra) */
            height: 100%; /* Memastikan elemen mengambil tinggi penuh untuk penyejajaran yang konsisten */
        }

        /* Styling untuk ikon profil pengguna */
        .user-icon {
            font-size: 20px; /* Mengatur ukuran ikon */
            margin-right: 15px; /* Menambahkan spasi di antara ikon dan elemen berikutnya (tombol) */
            color: #007bff; /* Contoh warna untuk ikon (biru). Dapat disesuaikan agar sesuai dengan tema. */
        }

        /* Penyesuaian Responsif */
        @media (max-width: 991px) {
            /* Menyembunyikan seluruh bagian 'header-right-btn' (termasuk ikon pengguna dan tombol login/daftar)
               pada layar yang lebih kecil dari 992px (breakpoint umum untuk 'lg' dalam framework seperti Bootstrap).
               Ini memastikan menu seluler menjadi prioritas dan menghindari masalah tata letak.
               Dapat disesuaikan untuk menampilkan secara berbeda di seluler jika diperlukan (misalnya, di dalam menu seluler). */
            .header-right-btn {
                display: none;
            }
        }

        .main-header {
            /* Kontainer utama header, bisa disesuaikan jika ada elemen lain */
            display: flex;
            align-items: center;
            justify-content: center; /* Pusatkan logo untuk demo ini */
        }

        .container-fluid {
            /* Kontainer fluid untuk demo */
            padding: 0 15px;
        }

        .logo {
            /* Kontainer logo */
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .logo img {
            max-height: 100px; /* Tinggi maksimum logo */
            width: auto; /* Lebar otomatis menjaga rasio aspek */
            transition: max-height 0.3s ease; /* Transisi halus saat perubahan ukuran */
        }

        /* Responsif untuk Logo */
        @media (max-width: 992px) {
            .logo img {
                max-height: 70px; /* Logo lebih kecil di tablet */
            }
        }

        @media (max-width: 768px) {
            .logo img {
                max-height: 70px; /* Logo lebih kecil di mobile */
            }
        }