:root {
            --primary-color: #7DC5D6; /* Warna toska utama */
            --secondary-color: #4A90B3;
            --text-dark: #333333;
            --text-light: #666666;
            --bg-hero-color: #ffffff; 
        }


        .hero-section {
            background-color: var(--bg-hero-color);
            padding: 80px 0;
        }

        /* Mengatur tinggi dan transisi slider */
        .hero-slider-img {
            height: 450px; /* Sesuaikan tinggi slider ideal Anda */
            width: 100%;
        }

        /* Membuat Gradasi Menyatu ke Sisi Kiri, Kanan, Atas, dan Bawah Background (Borderless Effect) */
        .hero-carousel-wrapper {
            position: relative;
            /* Teknik Masking untuk memudarkan pinggiran gambar secara halus */
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                                linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
        }

        /* Efek gradasi bayangan tambahan agar menyatu sempurna antar-slide selanjutnya */
        .hero-carousel-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            /* Memberi shading halus di tepi agar pergantian gambar (fade) tidak kaku */
            box-shadow: inset 0 0 30px 15px var(--bg-hero-color);
        }

        /* Memperhalus transisi carousel-fade bawaan Bootstrap */
        .carousel-fade .carousel-item {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 0.8s; /* Ubah angka ini untuk mengatur kecepatan kelembutan transisi */
        }

        .carousel-fade .carousel-item.active {
            opacity: 1;
        }

        /* Responsif Mobile: Sesuaikan tinggi slider di layar HP agar proporsional */
        @media (max-width: 991.98px) {
            .hero-slider-img {
                height: 300px;
            }
            .hero-carousel-wrapper {
                -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
            }
        }
        
        .tanaya {
            color:#7DC5D6;
        }

        .bg-tanaya {
            background-color: #7DC5D6 !important;
            color: #ffffff;
        }

        /* Background Soft (Transparan) */
        .bg-tanaya-soft { background-color: rgba(125, 197, 214, 0.1) !important; }
        
        /* Border Color */
        .border-tanaya { border-color: #7DC5D6 !important; }
        
        /* Buttons */
        .btn-tanaya {
            background-color: #7DC5D6;
            border-color: #7DC5D6;
            color: white;
        }
        .btn-tanaya:hover {
            background-color: #6bb3c4;
            border-color: #6bb3c4;
            color: white;
        }
        .btn-outline-tanaya {
            color: #7DC5D6;
            border-color: #7DC5D6;
        }
        .btn-outline-tanaya:hover {
            background-color: #7DC5D6;
            color: white;
        }

        .text-justify {
            text-align: justify;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* Topbar & Navbar */
        .topbar {
            background-color: var(--primary-color);
            color: white;
            font-size: 0.85rem;
            padding: 8px 0;
        }

        .navbar-nav .nav-link {
            font-weight: 600;
            color: var(--primary-color) !important;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin-left: 20px;
        }

        .stat-box h2 {
            color: var(--primary-color);
            font-weight: 700;
        }

        /* Buttons */
        .btn-primary-custom {
            background-color: var(--primary-color);
            color: white;
            border-radius: 50px;
            padding: 12px 30px;
            border: none;
            transition: 0.3s;
        }
        .btn-outline-custom {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 600;
        }
        .btn-primary-custom:hover { background-color: var(--secondary-color); color: white; }

        /* Cards */
        .custom-card {
            border: 1px solid #eee;
            border-radius: 20px;
            transition: all 0.3s ease;
            height: 100%;
        }
        .custom-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        }
        .icon-box {
            width: 70px;
            height: 70px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 30px;
        }

        /* Search Bar Section */
        .search-container {
            background: white;
            padding: 20px;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-top: -30px;
        }

        /* Doctor Card */
        .doctor-card {
            border: 1px solid #eee;
            border-radius: 15px;
            padding: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .doctor-img {
            width: 80px; height: 80px;
            border-radius: 10px;
            object-fit: cover;
            margin-right: 20px;
        }

        /* Call to Action Banner */
        .cta-banner {
            background-color: var(--primary-color);
            border-radius: 20px;
            padding: 40px;
            color: white;
        }

        footer {
            padding: 60px 0 20px;
            background: #fdfdfd;
            border-top: 1px solid #eee;
        }

        /* Container Utama Dropdown di Desktop */
@media (min-width: 992px) {
    .custom-dropdown .dropdown-menu {
        min-width: 400px; /* Lebar dropdown dibuat jauh lebih lebar */
        padding: 1.5rem;   /* Memberi ruang napas di dalam box */
        border-radius: 20px !important;
        box-shadow: 0 15px 40px rgba(125, 197, 212, 0.15); /* Shadow lembut warna Tanaya */
        
        /* Animasi Slide & Fade */
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        pointer-events: none;
    }

    /* Trigger saat Hover */
    .custom-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Styling Item di Dalamnya */
    .custom-dropdown .dropdown-item {
        padding: 15px 20px;
        margin-bottom: 8px;
        border-radius: 12px !important; /* Biar selaras dengan tombol 'rounded biasa' */
        background-color: transparent;
        border: 1px solid transparent;
        transition: all 0.3s ease;
    }

    /* Efek Hover pada List Item */
    .custom-dropdown .dropdown-item:hover {
        background-color: #f0f8fa; 
        border-color: #e0f2f6;
        transform: scale(1.02); /* Efek sedikit membesar saat diarahkan kursor */
    }

    /* Mempercantik Teks Deskripsi */
    .custom-dropdown .dropdown-item .fw-bold {
        color: var(--primary-color);
        font-size: 1.05rem;
    }

    .custom-dropdown .dropdown-item .text-muted {
        font-size: 0.85rem;
        display: block;
        margin-top: 2px;
    }
}

/* Tetap menjaga responsivitas di Mobile agar tidak hancur */
@media (max-width: 991.98px) {
    .custom-dropdown .dropdown-menu {
        width: 100%;
        border: none;
        box-shadow: none;
        background-color: #f8fdff;
        padding: 0.5rem;
    }
}

.icon-wrapper-tanaya {
    /* Gunakan Flexbox untuk centering sempurna */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Ukuran kontainer */
    width: 24px;  /* Sedikit lebih besar dari ikon agar ada ruang napas */
    height: 24px;
    
    /* Warna & Efek */
    filter: invert(82%) sepia(18%) saturate(722%) hue-rotate(148deg) brightness(92%) contrast(85%);
    transition: all 0.3s ease;
    
    /* Reset margin/padding bawaan */
    vertical-align: middle;
    margin-right: 8px; /* Jarak ke teks di kanannya */
}

.icon-wrapper-tanaya img {
    width: 28px;  /* Ukuran ikon asli Anda */
    height: 28px;
    display: block; /* Menghilangkan gap bawah (descender) pada elemen inline */
}

.white {
    color:white;
}

.abu {
    color:#666666;
}

.putih {
    filter: brightness(0) invert(1);
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.article-content p {
     margin-bottom: 1.5rem;
}

.no-decoration {
    text-decoration: none;
}

.btn-outline-tanaya.active {
    background-color: #7DC5D6 !important;
    border-color: #7DC5D6 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(125, 197, 214, 0.3);
}

.custom-scroll-container {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Scroll lebih halus di iOS */
    gap: 10px; /* Jarak antar tombol */
}

/* Sembunyikan scrollbar tapi tetap bisa di-scroll (Opsional agar rapi) */
.custom-scroll-container::-webkit-scrollbar {
    display: none;
}
.custom-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.max-w-md { max-width: 400px; }
.max-w-xl { max-width: 650px; }
.text-xs { font-size: 0.725rem; }
.custom-search-input:focus {
    border-color: var(--bs-tanaya, #000) !important; /* Sesuaikan dengan variabel warna primer Anda */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-tanaya-rgb, 0,0,0), 0.15);
}
.hover-flat:hover {
    transform: translateY(-2px);
    background-color: #fff !important;
}
.transition-all { transition: all 0.2s ease-in-out; }

/* Mengatur ulang layout bawaan Laravel + Bootstrap 5 Pagination */
    .custom-pagination-wrapper nav {
        display: flex;
        flex-direction: column; /* Mengubah teks info berada di atas tombol angka, bukan di samping kiri */
        align-items: center;
        gap: 12px;
    }

    @media (min-width: 768px) {
        .custom-pagination-wrapper nav {
            flex-direction: row; /* Di layar laptop, teks info di kiri, tombol angka di kanan */
            justify-content: space-between;
        }
    }

    /* Mempercantik tampilan teks info hasil data */
    .custom-pagination-wrapper nav div p.text-muted {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
        color: #6c757d !important;
    }

    /* Membuat tombol angka pagination lebih clean dan bulat modern */
    .custom-pagination-wrapper .pagination {
        margin-bottom: 0 !important;
        gap: 4px;
    }

    .custom-pagination-wrapper .page-item .page-link {
        border-radius: 8px !important;
        border: 1px solid #e3e6ec;
        color: #495057;
        font-size: 0.9rem;
        padding: 6px 12px;
        transition: all 0.2s ease;
    }

    /* Mengubah warna latar tombol aktif agar senada dengan warna aksen Tanaya Anda */
    .custom-pagination-wrapper .page-item.active .page-link {
        background-color: #5bc0de !important; /* Ganti dengan kode hex warna btn-tanaya Anda jika berbeda */
        border-color: #5bc0de !important;
        color: #fff !important;
        font-weight: bold;
    }

    .custom-pagination-wrapper .page-item .page-link:hover {
        background-color: #f8f9fa;
        border-color: #cbd5e1;
    }
    .card-facility {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-facility:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
    }
    .text-justify {
        text-align: justify;
    }
    .tracking-wider {
        letter-spacing: 0.1em;
    }
    .text-xs {
        font-size: 0.75rem;
    }
    /* Tombol custom mengikuti warna tema klinik Anda */
    .btn-primary-custom {
        background-color: var(--primary-color); /* Sesuaikan warna brand Tanaya */
        color: #fff;
    }