/* DOKTERRRR */
.social-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
background-color: white;
}
.social-icon:hover {
transform: scale(1.1);
background-color: #f8f9fa;
}
/* Main Section Wrapper with Background Image */
.agenda-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
/* Menambahkan background image */
background: url('/assets/img/bg5.png') no-repeat center center;
background-size: cover;
background-position: center;
background-attachment: fixed; /* Membuat background tidak ikut scroll */
}
/* Header Text */
.agenda-header {
text-align: center;
margin-bottom: 40px;
padding: 0 20px; /* Padding for header text on small screens */
}
.agenda-header h1 {
font-size: 2.5em;
color: var(--accent-color);
font-weight: 700;
}
/* Main container for the horizontal list */
.agenda-list {
display: flex;
gap: 15px;
align-items: flex-start;
justify-content: center; /* Center items on desktop */
width: 100%;
padding: 0 40px; /* Padding on the sides */
flex-wrap: wrap; /* Allow wrapping on medium screens */
}
/* Wrapper for each item + its detail card */
.agenda-item-wrapper {
display: flex;
gap: 15px;
align-items: flex-start;
}
/* The vertical, clickable agenda item */
.agenda-item {
background-color: var(--primary-dark-blue);
color: var(--text-light);
border: 1px solid #E0E7FF;
border-radius: 20px;
padding: 20px;
width: 120px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
flex-shrink: 0;
}
.agenda-item:not(.active):hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(58, 74, 107, 0.15);
background-color: #00BDE0; /* Warna biru lebih terang saat hover */
}
.agenda-item.active {
background-color: var(--primary-orange);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 189, 224, 0.3);
}
.agenda-arrow {
background-color: rgba(255, 255, 255, 0.15);
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.agenda-title-vertical {
flex-grow: 1;
display: flex;
align-items: center;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
}
.agenda-title-vertical h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 500;
white-space: nowrap;
}
.agenda-number {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 4rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.08);
}
/* The large detail card that appears on click */
.agenda-detail-card {
background-color: #fff;
border-radius: 25px;
box-shadow: 0 5px 15px rgba(0, 189, 224, 0.3);
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 350px; /* Menyamakan tinggi dengan .agenda-item */
border: 2px solid transparent; /* Border transparan untuk menjaga layout */
/* Animation properties */
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 0.5s ease-in-out, max-height 0.5s ease-in-out, opacity 0.3s ease-in-out 0.2s, padding 0.5s ease-in-out, border-color 0.5s ease;
}
.agenda-detail-card.active {
max-width: 600px;
opacity: 1;
padding: 25px;
}
.detail-card-body {
display: flex;
gap: 25px;
flex-grow: 1;
overflow: hidden;
}
.detail-card-image {
flex-basis: 40%;
}
.detail-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.detail-card-content {
flex-basis: 60%;
display: flex;
flex-direction: column;
}
.detail-card-content h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 10px;
}
.detail-card-content p {
color: var(--text-muted);
line-height: 1.6;
flex-grow: 1;
}
.detail-card-content ul {
list-style: none;
padding: 0;
margin-top: 15px;
}
.detail-card-content ul li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-weight: 500;
}
.detail-card-content ul li svg {
color: var(--primary-orange);
}
.detail-card-footer {
padding-top: 20px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.detail-btn {
background-color: #fff;
color: var(--text-dark);
border: 1px solid var(--border-color);
padding: 12px 20px;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
text-decoration: none;
}
.detail-btn:hover {
background-color: var(--primary-dark-blue);
color: var(--text-light);
border-color: var(--primary-dark-blue);
}
/* "View All" Button */
.view-all-btn {
margin-top: 25px;
padding: 12px 30px;
border: 1px solid var(--border-color);
background-color: #fff;
color: var(--text-dark);
font-weight: 500;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
}
.view-all-btn:hover {
background-color: var(--primary-dark-blue);
color: var(--text-light);
border-color: var(--primary-dark-blue);
}
/* === Responsive Design === */
@media (max-width: 768px) {
.agenda-section {
background-attachment: scroll; /* Agar background ikut scroll di mobile */
}
.agenda-list {
flex-direction: column; /* Stack wrappers vertically */
align-items: center; /* Center the stacked wrappers */
padding: 0 20px;
gap: 20px; /* Space between wrappers */
}
.agenda-item-wrapper {
flex-direction: column; /* Stack detail card below item card */
align-items: center;
width: 100%;
max-width: 400px;
gap: 10px;
}
.agenda-item {
width: 100%; /* Full width */
height: auto;
flex-direction: row; /* Horizontal layout for the item itself */
padding: 15px;
}
.agenda-title-vertical {
writing-mode: horizontal-tb;
transform: none;
text-align: left;
}
.agenda-number {
position: static;
transform: none;
font-size: 1.5rem;
margin-left: auto; /* Push to the right */
padding-left: 15px;
}
.agenda-arrow {
order: -1;
margin-right: 15px;
}
.agenda-detail-card {
height: auto;
max-width: 100%; /* Full width of its wrapper */
max-height: 0; /* Animate height */
}
.agenda-detail-card.active {
max-height: 500px; /* Or a larger value to ensure content fits */
}
.detail-card-body {
flex-direction: column;
}
}
/* Minimalist Sidebar Style */
.sidebar {
background: transparent;
border: none;
padding: 0;
}
.text-primary{
color: #031B4E !important;
}
.sidebar-title {
font-size: 1.2rem;
font-weight: 700;
color: #0d1a47;
margin-bottom: 1rem;
}
/* List style */
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
margin-bottom: 10px;
}
.sidebar li a {
color: #333;
display: flex;
align-items: center;
text-decoration: none;
transition: 0.3s ease;
}
.sidebar li a:hover {
color: #00BDE0;
text-decoration: underline;
}
.sidebar li i {
font-size: 1rem;
margin-right: 8px;
color: #00BDE0
;
}
.sidebar hr {
margin: 1.5rem 0;
border-top: 1px solid #dee2e6;
}
#preloader {
transition: opacity 0.5s ease;
}
/* Custom breadcrumb slash putih */
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: ">>";
color: white;
padding: 0 0.5rem;
}
/* ========================================= */
/* CSS MODERN MINIMALIS UNTUK TABEL INFORMASI */
/* ========================================= */
/* Mengatur font dasar dan kontainer utama */
#informasiTable_wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
color: #333;
}
/* Judul halaman di atas tabel */
.fw-bold.text-center {
color: #2d3748; /* Abu-abu gelap untuk judul */
}
/* Wrapper tabel yang sudah ada dari Bootstrap (shadow, rounded) */
/* Kita hanya perlu memastikan padding-nya pas */
.table-responsive.shadow {
padding: 24px;
border: 1px solid #e2e8f0; /* Tambahkan border halus */
border-radius: 12px; /* Sudut lebih tumpul */
}
/* Header Tabel (Thead) */
#informasiTable thead th {
background-color: #f8f9fa; /* Latar belakang abu-abu sangat muda */
color: #4a5568; /* Warna teks abu-abu untuk kontras yang lembut */
font-weight: 600; /* Sedikit lebih tebal */
font-size: 12px;
text-transform: uppercase; /* Gaya header profesional */
letter-spacing: 0.5px;
border-bottom: 2px solid #e2e8f0; /* Garis bawah yang tegas tapi tidak tebal */
padding: 16px 12px;
}
/* Badan Tabel (Tbody) */
#informasiTable tbody td {
color: #2d3748; /* Warna teks utama yang mudah dibaca */
padding: 16px 12px; /* Padding vertikal yang lapang */
vertical-align: middle;
}
/* Menghilangkan background belang dari .table-striped untuk tampilan lebih bersih */
#informasiTable.table-striped tbody tr:nth-of-type(odd) {
background-color: #ffffff;
}
/* Garis antar baris */
#informasiTable tbody tr {
border-bottom: 1px solid #f1f5f9; /* Garis pemisah yang sangat halus */
}
/* Menghapus garis di baris terakhir */
#informasiTable tbody tr:last-child {
border-bottom: none;
}
/* Efek hover yang halus */
#informasiTable.table-hover tbody tr:hover {
background-color: #f8fafc; /* Warna hover yang sangat lembut */
}
/* Tombol Aksi "Lihat Dokumen" */
.btn-primary {
background-color: #00BDE0; /* Biru standar Bootstrap */
border: none;
border-radius: 8px; /* Sudut tumpul */
padding: 8px 16px;
font-weight: 500;
font-size: 14px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
background-color: #0b5ed7; /* Biru sedikit lebih gelap saat hover */
transform: translateY(-2px); /* Efek mengangkat sedikit saat hover */
}
/* --- Kontrol DataTables --- */
/* Wrapper untuk 'Tampilkan' dan 'Cari' */
.dataTables_length, .dataTables_filter {
margin-bottom: 20px;
}
/* Label 'Tampilkan' dan 'Cari' */
.dataTables_length label,
.dataTables_filter label {
font-weight: 500;
color: #4a5568;
}
/* Input Dropdown dan Search */
.dataTables_length select,
.dataTables_filter input {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 8px 12px;
margin-left: 8px;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* Efek focus pada input */
.dataTables_length select:focus,
.dataTables_filter input:focus {
outline: none;
border-color: #0d6efd;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
/* Mengatur posisi flex untuk 'Tampilkan X data' */
.dataTables_length {
display: flex;
align-items: center;
}
/* Input Dropdown dan Search */
/* Label */
.dataTables_length label {
font-weight: 500;
color: #4a5568;
display: flex;
align-items: center;
margin-bottom: 0;
}
/* Input Dropdown dan Search */
.dataTables_length select{
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 8px 12px;
margin-left: 8px;
transition: all 0.2s ease;
background-color: white;
color: #334155;
font-size: 14px;
min-width: 60px;
}
/* Paginasi */
.dataTables_paginate .page-link {
border-radius: 6px !important; /* Menyamakan sudut */
margin: 0 4px;
border: 1px solid #e2e8f0;
color: #4a5568;
}
.dataTables_paginate .page-link:hover {
background-color: #f1f5f9;
}
.dataTables_paginate .page-item.active .page-link {
background-color: #0d6efd;
border-color: #0d6efd;
color: white;
}
/* CSS untuk Popup */
.dev-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.popup-content {
background-color: white;
padding: 30px;
border-radius: 15px;
max-width: 500px;
width: 90%;
text-align: center;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.popup-content h3 {
color: #031B4E;
margin-bottom: 15px;
font-size: 24px;
}
.popup-content p {
color: #555;
margin-bottom: 20px;
line-height: 1.6;
}
.popup-image {
max-width: 200px;
height: auto;
margin: 15px auto;
display: block;
}
.close-popup {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: #031B4E;
cursor: pointer;
transition: color 0.3s;
}
.close-popup:hover {
color: #00BDE0;
}
/* Animasi */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Responsive */
@media (max-width: 576px) {
.popup-content {
padding: 20px 15px;
}
.popup-content h3 {
font-size: 20px;
}
.popup-image {
max-width: 150px;
}
}
/*--------------------------------------------------------------
# appointment Section
--------------------------------------------------------------*/
.appointment-section {
width: 100%;
padding: 30px 15px 0 15px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
position: relative;
box-sizing: border-box;
overflow: visible; /* Changed from hidden to visible */
background-image: url(/assets/img/bg1.png);
background-color: #ecf5fb;
}
/* Container untuk foto dokter dan form */
.appointment-section > div {
display: flex;
gap: 30px;
align-items: flex-end;
justify-content: center;
max-width: 1200px;
width: 100%;
}
/* Gaya untuk "kartu" Foto Dokter */
.appointment-background {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 600px;
background-color: transparent;
overflow: hidden;
}
.appointment-background .foto-dokter {
max-width: 100%;
height: auto;
display: block;
border-radius: 0;
object-fit: contain;
}
/* Gaya untuk "kartu" Form */
.appointment-form-container {
flex: 1;
/* background-color: rgba(0, 189, 224, 0.8); Gunakan rgba untuk alpha channel */
background-color: var(--hover-color);
background-image: url(/assets/img/bg5.png);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 600px;
max-width: 450px;
box-sizing: border-box;
margin-bottom: -50px;
z-index: 10;
/* Efek tambahan untuk mempercantik
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2); */
}
/* Pastikan semua konten di dalam form tetap solid */
.appointment-form-container * {
opacity: 1 !important;
}
/* Tab "Buat Janji Sekarang" */
.appointment-now-tab {
position: absolute;
top: 30%;
left: 0;
transform: translate(-100%, -50%) rotate(-90deg);
transform-origin: 100% 50%;
background-color: #031B4E;
color: white;
padding: 10px 20px;
border-radius: 8px 8px 0 0;
font-size: 0.9em;
font-weight: 600;
white-space: nowrap;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 10;
}
/* Judul Form */
.appointment-form-content h2 {
color: white;
font-size: 30px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
}
/* Grup Form (Row) */
.appointment-form .form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.appointment-form .form-group {
flex: 1;
}
/* Label Form */
.appointment-form label {
display: block;
color: white;
font-size: 15px;
margin-bottom: 5px;
opacity: 0.8;
}
/* Input, Select, Textarea */
.appointment-form input[type="text"],
.appointment-form input[type="email"],
.appointment-form input[type="tel"],
.appointment-form select,
.appointment-form textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.1);
color: white;
font-size: 15px;
box-sizing: border-box;
outline: none;
transition: border-color 0.3s ease;
}
.appointment-form input::placeholder,
.appointment-form textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
border-color: white;
}
.appointment-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
}
.appointment-form textarea {
resize: vertical;
min-height: 80px;
}
/* Tombol Submit */
.appointment-submit-button {
background-color: white;
color: #00BDE0;
padding: 12px 25px;
border: none;
border-radius: 25px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.appointment-submit-button:hover {
background-color: #f0f0f0;
color: #009acb;
}
.appointment-submit-button .arrow {
font-size: 1.2em;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.appointment-section > div {
flex-direction: column;
gap: 20px;
align-items: center;
}
.appointment-section {
margin: 30px auto 0 auto;
padding: 0;
}
.appointment-background {
order: 2;
min-height: auto;
width: 100%;
height: 300px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.appointment-background .foto-dokter {
height: 100%;
object-fit: cover;
border-radius: 0;
}
.appointment-form-container {
order: 1;
width: 100%;
min-height: auto;
padding: 30px;
max-width: 100%;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 0; /* Reset for mobile */
}
.appointment-now-tab {
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform-origin: center;
padding: 8px 15px;
border-radius: 8px 8px 0 0;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}
.appointment-form .form-row {
flex-direction: column;
gap: 20px;
}
}
@media (max-width: 576px) {
.appointment-form-container {
padding: 20px;
}
.appointment-form-content h2 {
font-size: 1.6em;
}
.appointment-submit-button {
width: 100%;
}
}
/* Untuk layar sangat lebar */
@media (min-width: 1200px) {
.appointment-section > div {
max-width: 1200px;
}
}
#banner-links .banner-img {
width: 100%;
height: auto;
max-height: 120px; /* kamu bisa atur sesuai ukuran ideal */
object-fit: contain;
background-color: #fff;
padding: 4px;
border-radius: 4px;
transition: transform 0.3s ease;
}
#banner-links .banner-img:hover {
transform: scale(1.05);
}
.banner-links {
position: relative;
background-image: url('/assets/img/bg2.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
background-attachment: fixed; /* Efek parallax */
background-blend-mode: multiply;
padding: 80px 0;
z-index: 0;
overflow: hidden;
background-color: rgba(3, 27, 78, 1);
}
.banner-links::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.banner-links .container,
.banner-links .row,
.banner-links a {
position: relative;
z-index: 2; /* Pastikan konten di atas overlay */
}
/*--------------------------------------------------------------
# Pengumuman Item Component
--------------------------------------------------------------*/
.pengumuman-item {
background-color: var(--surface-color); /* Latar belakang kartu putih bersih */
padding: 40px 30px; /* Padding ditingkatkan */
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transisi lebih halus dan modern */
height: 100%;
border-radius: 20px; /* Radius sedikit lebih besar */
position: relative;
overflow: hidden; /* Penting untuk efek pseudo-elemen */
z-index: 1;
text-align: left;
border: 1px solid #E0E7FF; /* Border tipis untuk definisi */
display: flex; /* Menggunakan flexbox untuk layout internal */
flex-direction: column; /* Konten tertumpuk secara vertikal */
}
/* Efek Hover Latar Belakang - Gelombang Warna dari Bawah */
.pengumuman-item:before {
content: "";
position: absolute;
background: color-mix(in srgb, var(--accent-color), transparent 80%); /* Warna accent Anda */
top: 100%; /* Mulai dari bawah kartu */
left: 0;
right: 0;
bottom: 0;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transisi sama dengan kartu */
z-index: -1;
border-radius: 12px;
}
.pengumuman-item:hover:before {
top: 0; /* Naik ke atas saat hover */
}
/* Efek Hover Utama pada Kartu */
.pengumuman-item:hover {
background: var(--accent-color); /* Latar belakang menjadi accent-color */
border-color: var(--accent-color); /* Border juga accent-color */
transform: translateY(-8px); /* Sedikit naik */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Shadow lebih kuat dan menyebar */
}
/* Ikon Utama */
.pengumuman-item .icon {
margin-bottom: 20px; /* Jarak bawah ditingkatkan */
font-size: 38px; /* Ukuran ikon lebih besar */
color: var(--accent-color); /* Warna ikon sesuai accent */
display: flex;
align-items: center;
justify-content: flex-start; /* Sejajarkan ke kiri */
transition: color 0.4s ease; /* Transisi warna ikon */
}
/* Judul Pengumuman */
.pengumuman-item h4 {
font-weight: 700;
font-size: 20px; /* Ukuran judul sedikit lebih besar */
margin-bottom: 15px; /* Jarak bawah ditingkatkan */
line-height: 1.3; /* Jarak baris judul */
}
.pengumuman-item h4 a {
color: var(--heading-color); /* Warna judul sesuai heading-color Anda */
text-decoration: none;
transition: color 0.4s ease-in-out;
}
/* Paragraf Deskripsi Pengumuman */
.pengumuman-item p {
font-size: 15px; /* Ukuran font sedikit lebih besar */
color: var(--default-color); /* Warna teks default, bukan muted lagi */
line-height: 1.7; /* Jarak baris lebih longgar */
transition: color 0.4s ease-in-out;
margin-bottom: 0;
flex-grow: 1; /* Memastikan paragraf mengisi ruang yang tersisa */
}
/* Efek Hover pada Elemen di Dalam Kartu */
.pengumuman-item:hover .icon,
.pengumuman-item:hover h4 a,
.pengumuman-item:hover p {
color: var(--contrast-color); /* Semua teks dan ikon menjadi warna kontras (putih) */
}
/*--------------------------------------------------------------
# Responsive Adjustments for Pengumuman Item
--------------------------------------------------------------*/
@media (max-width: 991px) {
.pengumuman-item {
padding: 30px 25px; /* Padding lebih kecil di tablet */
}
.pengumuman-item .icon {
font-size: 32px;
}
.pengumuman-item h4 {
font-size: 18px;
}
.pengumuman-item p {
font-size: 14px;
}
}
@media (max-width: 767px) {
.pengumuman-item {
padding: 25px 20px; /* Padding lebih kecil di mobile */
text-align: left; /* Tetap sejajar kiri di mobile */
}
.pengumuman-item .icon {
margin-bottom: 15px;
font-size: 30px;
justify-content: flex-start; /* Tetap di kiri */
}
}
/* Pastikan .container ini ada atau tambahkan di bagian Global Styling Anda */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto; /* Memusatkan konten */
margin-left: auto; /* Memusatkan konten */
max-width: 1200px; /* Lebar maksimum untuk konten di tengah */
width: 100%; /* Memastikan konten mengambil lebar penuh hingga max-width */
box-sizing: border-box;
}
/*--------------------------------------------------------------
# Berita Section (Style yang Diperbarui sesuai Gambar)
--------------------------------------------------------------*/
.blogs-section {
width: 100%; /* Section akan mengisi lebar penuh halaman */
padding: 60px 0; /* Padding vertikal untuk section. Padding horizontal ditangani oleh .container */
box-sizing: border-box;
background: url('/assets/img/bg7.png');
background-color: #ffffff; /* Background untuk section berita */
}
/* Header di dalam section berita (di dalam .container) */
.blogs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding: 0 15px; /* Padding horizontal agar judul tidak menempel ke sisi .container */
/* Pastikan warna teks header cocok dengan tema Anda */
color: #1a2a4b; /* Default text color for the header */
}
.blogs-header h1 {
font-size: 2.5em;
color: inherit; /* Mengambil warna dari parent .blogs-header */
font-weight: 700;
margin: 0;
line-height: 1.2;
}
/* === Pagination Styling === */
.pagination {
justify-content: center;
margin-top: 20px;
}
.pagination .page-item .page-link {
color: #061b49;
border: 1px solid #061b49;
background-color: #fff;
transition: all 0.3s;
}
.pagination .page-item.disabled .page-link {
color: #ccc;
border-color: #ccc;
background-color: #f8f9fa;
}
.pagination .page-item.active .page-link {
background-color: #061b49;
color: #fff;
border-color: #061b49;
}
/* === Dropdown Filter Styling === */
.dropdown-toggle {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #061b49;
border: 1px solid #061b49;
}
.dropdown-menu {
border-radius: 0.5rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.dropdown-item {
padding: 10px 15px;
font-size: 14px;
color: #061b49;
transition: background-color 0.2s;
}
.dropdown-item:hover {
background-color: #061b49;
color: white;
}
.dropdown-item.active {
background-color: #061b49;
color: #fff;
}
/* === Search Box Styling === */
.input-group-text {
background-color: #061b49;
color: white;
border: none;
}
#tableSearchInput.form-control {
border: 1px solid #061b49;
box-shadow: none;
color: #061b49;
}
#tableSearchInput::placeholder {
color: #aaa;
font-style: italic;
}
/* === Responsiveness === */
@media (max-width: 576px) {
.input-group,
.dropdown {
width: 100%;
margin-bottom: 10px;
}
}
.view-all-button {
background-color: #061b49;
color: #ffffff; /* Tetap putih */
padding: 10px 20px 10px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
}
.view-all-button:hover {
background-color: #0c2b6d; /* Hover sedikit lebih terang */
color: #ffffff; /* <-- Tambahkan ini untuk tetap putih saat hover */
}
.view-all-button .arrow {
width: 32px;
height: 32px;
background-color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
color: #061b49; /* Navy untuk ikon panah */
transition: background-color 0.3s ease;
}
.view-all-button:hover .arrow {
background-color: #e0e7ff; /* Hover: putih kebiruan */
color: #061b49; /* Tetap navy */
}
.view-all-button.v2 {
background-color: #00BDE0; /* Warna dasar biru terang */
color: #ffffff; /* Teks tetap putih */
padding: 10px 20px 10px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
}
.view-all-button.v2:hover {
background-color: #00a7c6; /* Hover sedikit lebih gelap */
color: #ffffff;
}
.view-all-button.v2 .arrow {
width: 32px;
height: 32px;
background-color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
color: #00BDE0; /* Panah berwarna biru terang */
transition: background-color 0.3s ease, color 0.3s ease;
}
.view-all-button.v2:hover .arrow {
background-color: #e0faff; /* Hover: putih kebiruan */
color: #00a7c6; /* Warna panah sedikit lebih gelap saat hover */
}
/* Section Title (Gaya ini mungkin berkonflik dengan .section-title global template Anda) */
/* Saya mengisolasi gaya ini agar hanya berlaku jika ada di dalam .blogs-section */
.blogs-section .container.section-title {
text-align: center;
padding-bottom: 30px;
max-width: 800px; /* Batasi lebar teks judul untuk readability */
margin-left: auto;
margin-right: auto;
margin-top: -20px; /* Sesuaikan jarak jika double header */
}
.blogs-section .section-title h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
color: var(--heading-color, #1a2a4b);
/* Untuk menghilangkan garis bawah default dari template Medilab, tambahkan ini: */
padding-bottom: 0;
position: static; /* Ubah dari relative agar ::before dan ::after tidak relatif padanya */
}
/* Untuk menghilangkan garis bawah ::before dan ::after yang mungkin masih muncul dari .section-title global */
.blogs-section .section-title h2::before,
.blogs-section .section-title h2::after {
content: none; /* Hilangkan garis bawah */
}
.blogs-section .section-title p {
font-size: 1.1em;
color: #666;
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Blogs Grid Layout (Inti dari layout unik seperti gambar)
--------------------------------------------------------------*/
.blogs-grid {
display: grid;
/* Ini adalah kunci layout unik: 3 kolom di desktop.
- auto-fit: menyesuaikan jumlah kolom berdasarkan lebar yang tersedia.
- minmax(300px, 1fr): Setiap kolom minimal 300px, sisanya dibagi rata.
Ini menciptakan layout yang fleksibel.
*/
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; /* Jarak antar kartu */
padding: 0 15px; /* Tambahkan padding horizontal agar grid tidak menempel ke sisi .container */
}
/*--------------------------------------------------------------
# Blog Card Styles (Disalin persis dari desain blog kesehatan)
--------------------------------------------------------------*/
.blog-card {
background-color: #ECF5FB;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
position: relative;
min-height: 250px; /* Tinggi minimum agar kartu tanpa gambar tidak terlalu pendek */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
/* Gaya khusus untuk kartu BESAR (yang pertama, .large class) */
.blog-card.large {
grid-column: span 2; /* Membuat kartu ini membentang 2 kolom */
display: flex;
flex-direction: row; /* Gambar dan konten bersebelahan */
}
.blog-card.large .card-image {
flex: 1; /* Gambar mengambil 50% lebar */
min-height: 350px; /* Tinggi minimum untuk gambar di kartu besar */
background-position: left center; /* Sesuaikan posisi gambar */
}
.blog-card.large .card-content {
flex: 1; /* Konten mengambil 50% lebar */
padding: 30px; /* Padding lebih besar untuk konten kartu besar */
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Gaya dasar untuk gambar di dalam kartu */
.card-image {
width: 100%;
height: 200px; /* Tinggi default untuk gambar di kartu kecil */
background-color: #e0e0e0; /* Placeholder */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease-in-out;
}
.blog-card:hover .card-image {
transform: scale(1.03); /* Efek zoom gambar saat hover */
}
/* Gaya konten di dalam kartu */
.card-content {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.card-date {
font-size: 0.85em;
color: #666;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 5px;
}
.card-date::before {
content: '•';
color: #00BDE0; /* Biru utama */
font-size: 1.2em;
line-height: 1;
}
.card-title {
font-size: 1.2em;
font-weight: 600;
color: #1a2a4b;
margin-bottom: 15px;
line-height: 1.4;
flex-grow: 1; /* Judul mengisi ruang, mendorong elemen di bawah */
}
/* Tombol "Read More" (untuk kartu besar) */
.read-more {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #00BDE0;
font-weight: 600;
margin-top: auto; /* Mendorong ke bawah */
padding-top: 10px;
}
.read-more .arrow-circle {
width: 30px;
height: 30px;
background-color: #e6f2ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
color: #00BDE0;
transition: background-color 0.3s ease;
}
.read-more:hover .arrow-circle {
background-color: #cce0ff;
}
/* Panah Sudut Kanan Atas (untuk kartu kecil) */
.arrow-top-right {
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: #e6f2ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: #00BDE0;
text-decoration: none;
transition: background-color 0.3s ease;
}
.arrow-top-right:hover {
background-color: #cce0ff;
}
/* Penyesuaian khusus untuk kartu tanpa gambar */
/* Ini akan menargetkan kartu yang tidak memiliki anak elemen dengan kelas .card-image */
.blog-card:not(:has(.card-image)) {
padding: 20px; /* Padding diterapkan langsung di kartu */
justify-content: space-between;
position: relative;
min-height: 250px; /* Pastikan tinggi minimum */
}
.blog-card:not(:has(.card-image)) .card-content {
padding: 0; /* Hapus padding internal card-content jika sudah di kartu induk */
}
/*--------------------------------------------------------------
# Responsive Adjustments (penting untuk layout grid)
--------------------------------------------------------------*/
@media (max-width: 992px) {
.blogs-header h1 {
font-size: 2em;
}
.blogs-grid {
grid-template-columns: 1fr; /* Pada layar lebih kecil, semua kartu jadi 1 kolom */
padding: 0 10px; /* Sesuaikan padding untuk mobile */
}
.blog-card.large {
grid-column: span 1; /* Kartu besar tidak lagi membentang 2 kolom */
flex-direction: column; /* Kembali ke layout vertikal */
}
.blog-card.large .card-image {
min-height: 250px; /* Tinggi gambar kartu besar disesuaikan */
}
.blog-card.large .card-content {
padding: 20px; /* Padding konten kembali standar */
}
}
@media (max-width: 768px) {
.blogs-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.blogs-header h1 {
font-size: 1.8em;
}
.view-all-button {
width: 100%;
justify-content: center;
}
.blogs-section {
padding: 20px 0; /* Padding vertikal lebih kecil */
}
.container {
padding-left: 10px;
padding-right: 10px;
}
}
/* ----------------------------- */
/* INFORMASI SECTION MIRIP AWARDS */
/* ----------------------------- */
/* SECTION UTAMA */
.awards-section {
background-color: #1C315F;
padding: 100px 0;
}
/* JUDUL & TEKS */
.awards-content h2 {
font-size: 3rem;
font-weight: 700;
color: var(--contrast-color);
}
.awards-content p {
color: var(--contrast-color);
margin-top: 15px;
margin-bottom: 30px;
}
/* TOMBOL FILTER */
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-buttons .btn-filter {
border: 1px solid var(--accent-cyan);
color: var(--accent-cyan);
border-radius: 50px;
padding: 8px 20px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.filter-buttons .btn-filter:hover,
.filter-buttons .btn-filter.active {
background-color: var(--accent-cyan);
color: #fff;
}
/* KARTU (baik award atau informasi) */
.award-card {
background-color: #fff;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 25px rgba(0,0,0,0.05);
height: 100%;
}
.award-card .award-logo {
max-height: 100px;
width: auto;
margin-bottom: 20px;
}
/* Jika .award-logo berupa ikon font-awesome, ukurannya otomatis bisa disesuaikan */
.award-card .award-logo i {
font-size: 3rem;
color: var(--accent-color);
}
/* Judul */
.award-card .award-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--accent-color);
}
/* Deskripsi / Isi */
.award-card .award-institute {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 20px;
}
/* Link Sponsor atau Link Informasi */
.award-card .award-sponsor {
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-cyan);
text-decoration: none;
}
/* ----------------------------- */
/* SLIDE EFEK FOKUS TENGAH */
/* ----------------------------- */
.splide__slide {
padding: 20px 0;
transition: transform 0.4s ease, opacity 0.4s ease;
transform: scale(0.85);
opacity: 0.6;
color: var(--accent-cyan);
}
.splide__slide.is-active {
transform: scale(1);
opacity: 1;
}
/* ----------------------------- */
/* RESPONSIVE (Opsional) */
/* ----------------------------- */
@media (max-width: 768px) {
.award-card {
padding: 25px 15px;
}
.award-card .award-title {
font-size: 1.1rem;
}
.award-card .award-logo i {
font-size: 2.5rem;
}
}
/**
* Template Name: Medilab
* Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
--default-font: 'Poppins', sans-serif;
--heading-font: 'Poppins', sans-serif;
--nav-font: 'Poppins', sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
--default-color: #2B2B2B; /* Default color used for the majority of the text content across the entire website */
--heading-color: #064089; /* Color for headings, subheadings and title throughout the website */
--accent-color: #031B4E; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--hover-color: #00BDE0;
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
--nav-color: #031B4E; /* The default color of the main navmenu links */
--nav-hover-color: #07326A; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #031B4E; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: #07326A; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
--background-color: #EDF6FB;
--surface-color: #ffffff;
}
.dark-background {
--background-color: #060606;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #252525;
--contrast-color: #ffffff;
}
/* Smooth scroll */
:root {
scroll-behavior: smooth;
}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
color: var(--default-color);
background-color: var(--background-color);
font-family: var(--default-font);
overflow-x: hidden;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading-color);
font-family: var(--heading-font);
}
/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
width: 94px;
height: 94px;
background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
border-radius: 50%;
display: block;
overflow: hidden;
position: absolute;
left: 50%; /* Tempatkan titik tengah tombol di tengah kontainer */
top: 50%; /* Tempatkan titik tengah tombol di tengah kontainer */
transform: translate(-50%, -50%);
}
.pulsating-play-btn:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
animation-delay: 0s;
animation: pulsate-play-btn 2s;
animation-direction: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}
.pulsating-play-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 100;
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.pulsating-play-btn:hover:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border: none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 200;
animation: none;
border-radius: 0;
}
.pulsating-play-btn:hover:after {
border-left: 15px solid var(--accent-color);
transform: scale(20);
}
@keyframes pulsate-play-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
display: none;
background: #df1529;
color: #ffffff;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .sent-message {
display: none;
color: #ffffff;
background: #059652;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .loading {
display: none;
background: var(--surface-color);
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--accent-color);
border-top-color: var(--surface-color);
animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
color: var(--default-color);
z-index: 997;
background-color: var(--background-color);
transition: box-shadow 0.3s ease; /* Transisi untuk bayangan */
/* Aturan untuk sticky header */
position: sticky; /* Menggunakan position sticky */
top: 0; /* Menempel di bagian paling atas */
width: 100%; /* Memastikan lebar penuh */
}
.header .topbar {
background-color: var(--accent-color);
height: 95px;
padding: 0;
font-size: 14px;
/* Transisi diperhalus dari 2 detik menjadi 0.5 detik */
transition: height 0.5s ease, padding 0.5s ease, visibility 0.5s;
overflow: hidden; /* Tambahkan overflow hidden di sini */
}
/* Aturan untuk menyembunyikan Topbar saat di-scroll */
.scrolled .header .topbar {
height: 0;
padding: 0;
visibility: hidden;
}
/* Memberi bayangan pada header setelah di-scroll */
.scrolled .header {
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
}
.topbar-title {
display: block;
color: var(--contrast-color);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.topbar-subtitle {
display: block;
color: color-mix(in srgb, var(--contrast-color), transparent 30%);
font-size: 14px;
line-height: 1.2;
text-decoration: none;
transition: color 0.3s;
}
.topbar-subtitle:hover {
color: var(--contrast-color);
}
.header .topbar .social-links a {
color: color-mix(in srgb, var(--contrast-color), transparent 40%);
line-height: 0;
transition: 0.3s;
margin-left: 20px;
}
.header .topbar .social-links a:hover {
color: var(--contrast-color);
}
.header .branding {
min-height: 60px;
padding: 10px 0;
}
.header .logo {
line-height: 1;
}
.header .logo img {
max-height: 36px;
margin-right: 8px;
}
.header .logo h1 {
font-size: 20px;
margin: 0;
font-weight: 700;
color: var(--heading-color);
}
.header .cta-btn,
.header .cta-btn:focus {
color: var(--contrast-color);
background: var(--accent-color);
font-size: 14px;
padding: 8px 25px;
margin: 0 0 0 30px;
border-radius: 50px;
transition: 0.3s;
}
.header .cta-btn:hover,
.header .cta-btn:focus:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
@media (max-width: 1200px) {
.header .topbar {
display: none !important;
}
.header .logo {
order: 1;
}
.header .cta-btn {
order: 2;
margin: 0 15px 0 0;
padding: 6px 15px;
}
.header .navmenu {
order: 3;
}
}
.scrolled .header {
box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
.scrolled .header .topbar {
height: 0;
visibility: hidden;
overflow: hidden;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
@media (min-width: 1200px) {
.navmenu {
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navmenu li {
position: relative;
}
.navmenu > ul > li {
white-space: nowrap;
padding: 15px 14px;
}
.navmenu a,
.navmenu a:focus {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: var(--nav-color);
padding: 0 2px;
font-family: var(--nav-font);
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
position: relative;
text-transform: capitalize;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: 0.3s;
}
/* Animasi garis bawah dari tengah */
.navmenu > ul > li > a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
background-color: var(--nav-hover-color);
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.navmenu a:hover:before,
.navmenu li:hover > a:before,
.navmenu .active:before {
visibility: visible;
width: 100%;
}
.navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-hover-color);
}
/* Animasi rotasi ikon panah */
.navmenu .toggle-dropdown {
transition: transform 0.3s ease;
}
.navmenu .dropdown:hover > a > .toggle-dropdown {
transform: rotate(180deg);
}
/* -- Rotasi Ikon Level 2 Ditambahkan Di Sini -- */
.navmenu .dropdown-submenu:hover > a > .toggle-dropdown {
transform: rotate(-90deg);
}
/* Dropdown Level 1 Container */
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
left: 14px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
min-width: 200px;
border-radius: 4px;
top: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
.navmenu .dropdown:hover > ul {
opacity: 1;
visibility: visible;
}
/* Dropdown Level 2 (Fly-out) Container */
.navmenu .dropdown .dropdown-submenu ul {
top: 0;
left: 100%;
opacity: 0;
visibility: hidden;
}
.navmenu .dropdown .dropdown-submenu:hover > ul {
visibility: visible;
opacity: 1;
}
/* Aturan Umum untuk Semua Item di Dalam Dropdown */
.navmenu .dropdown ul li {
min-width: 200px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.navmenu .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
color: var(--nav-dropdown-color);
position: relative;
z-index: 1;
}
/* Efek Latar Belakang Sorot (Highlight) pada Hover */
.navmenu .dropdown ul a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
z-index: -1;
transition: width 0.3s ease;
}
.navmenu .dropdown ul a:hover::before {
width: 100%;
}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover > a {
color: var(--nav-dropdown-hover-color);
}
/* Animasi Muncul Berurutan (Staggered) untuk Dropdown Level 1 */
.navmenu .dropdown:hover > ul > li {
opacity: 1;
transform: translateY(0);
}
.navmenu .dropdown:hover > ul > li:nth-child(1) { transition-delay: 0.05s; }
.navmenu .dropdown:hover > ul > li:nth-child(2) { transition-delay: 0.1s; }
.navmenu .dropdown:hover > ul > li:nth-child(3) { transition-delay: 0.15s; }
.navmenu .dropdown:hover > ul > li:nth-child(4) { transition-delay: 0.2s; }
.navmenu .dropdown:hover > ul > li:nth-child(5) { transition-delay: 0.25s; }
/* Animasi Muncul Berurutan (Staggered) untuk Dropdown Level 2 */
.navmenu .dropdown .dropdown-submenu:hover > ul > li {
opacity: 1;
transform: translateY(0);
}
.navmenu .dropdown .dropdown-submenu:hover > ul > li:nth-child(1) { transition-delay: 0.05s; }
.navmenu .dropdown .dropdown-submenu:hover > ul > li:nth-child(2) { transition-delay: 0.1s; }
.navmenu .dropdown .dropdown-submenu:hover > ul > li:nth-child(3) { transition-delay: 0.15s; }
/* Aturan untuk Parent Level 2 agar tidak bisa diklik */
.navmenu .dropdown .dropdown-submenu > a {
cursor: default;
pointer-events: none;
}
.navmenu .dropdown .dropdown-submenu > a > i {
pointer-events: auto;
}
}
/* Mobile Navigation */
/* Mobile Navigation */
/* Mobile Navigation */
/* Mobile Navigation */
@media (max-width: 1199px) {
.mobile-nav-toggle {
color: var(--nav-color);
font-size: 28px;
line-height: 0;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s;
}
.navmenu {
padding: 0;
z-index: 9997;
}
.navmenu ul {
display: none;
list-style: none;
position: absolute;
inset: 60px 20px 20px 20px;
padding: 10px 0;
margin: 0;
border-radius: 6px;
background-color: var(--nav-mobile-background-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
box-shadow: none;
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-dropdown-color);
padding: 10px 20px;
font-family: var(--nav-font);
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: background-color 0.3s; /* Transisi untuk hover */
}
.navmenu a i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: transform 0.3s; /* Hanya transisi untuk rotasi */
}
.navmenu .active > a,
.navmenu a:hover {
color: var(--nav-dropdown-hover-color);
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}
/* Ikon akan berputar jika atau induknya punya kelas .active */
.navmenu .active > a > i {
transform: rotate(180deg);
}
/* Logika Buka-Tutup Dropdown dengan Slide */
.navmenu .dropdown ul {
position: static;
display: block; /* Ubah dari none ke block */
z-index: 99;
padding: 0;
margin: 10px 20px;
background-color: transparent; /* Hapus background di sini */
/* Properti untuk animasi slide */
max-height: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.navmenu .dropdown .dropdown-active {
max-height: 400px; /* Atur ketinggian maksimal yang cukup */
visibility: visible;
}
/* Tampilan submenu yang lebih dalam agar menjorok */
.navmenu .dropdown ul ul {
padding-left: 20px;
margin: 0;
}
/* Aturan untuk overlay dan tombol close */
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav-toggle {
color: #fff;
position: absolute;
font-size: 32px;
top: 15px;
right: 15px;
margin-right: 0;
z-index: 9999;
}
.mobile-nav-active .navmenu {
position: fixed;
overflow: hidden;
inset: 0;
background: rgba(33, 37, 41, 0.8);
transition: 0.3s;
}
.mobile-nav-active .navmenu > ul {
display: block;
}
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
color: var(--default-color);
background-color: var(--background-color);
border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
font-size: 14px;
position: relative;
}
.footer .footer-top {
padding-top: 50px;
}
.footer .footer-about .logo {
line-height: 1;
margin-bottom: 25px;
}
.footer .footer-about .logo img {
max-height: 40px;
margin-right: 6px;
}
.footer .footer-about .logo span {
color: var(--heading-color);
font-family: var(--heading-font);
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
}
.footer .footer-about p {
font-size: 14px;
font-family: var(--heading-font);
}
.footer .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 16px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin-right: 10px;
transition: 0.3s;
}
.footer .social-links a:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
.footer h4 {
font-size: 16px;
font-weight: bold;
position: relative;
padding-bottom: 12px;
}
.footer .footer-links {
margin-bottom: 30px;
}
.footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-links ul i {
padding-right: 2px;
font-size: 12px;
line-height: 0;
}
.footer .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
.footer .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-links ul a {
color: color-mix(in srgb, var(--default-color), transparent 30%);
display: inline-block;
line-height: 1;
}
.footer .footer-links ul a:hover {
color: var(--accent-color);
}
.footer .footer-contact p {
margin-bottom: 5px;
}
.footer .copyright {
padding-top: 25px;
padding-bottom: 25px;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .copyright p {
margin-bottom: 0;
}
.footer .credits {
margin-top: 8px;
font-size: 13px;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.6s ease-out;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background-color: var(--accent-color);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}
.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
color: var(--default-color);
background-color: var(--background-color);
position: relative;
}
.page-title .heading {
padding: 80px 0;
border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}
.page-title .heading h1 {
font-size: 38px;
font-weight: 700;
}
.page-title nav {
background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
padding: 20px 0;
}
.page-title nav ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
font-size: 16px;
font-weight: 600;
}
.page-title nav ol li+li {
padding-left: 10px;
}
.page-title nav ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 60px 0;
scroll-margin-top: 72px;
overflow: clip;
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 60px;
}
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
text-align: center;
padding-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 32px;
font-weight: 500;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}
.section-title h2:before {
content: "";
position: absolute;
display: block;
width: 160px;
height: 1px;
background: color-mix(in srgb, var(--default-color), transparent 60%);
left: 0;
right: 0;
bottom: 1px;
margin: auto;
}
.section-title h2::after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 3px;
background: var(--accent-color);
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.section-title p {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero{width:100%;min-height:calc(100vh - 112px);padding:80px 0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:1}.hero .container{z-index:3}.hero .welcome h2{margin:0;font-size:48px;font-weight:700}.hero .welcome p{font-size:24px;margin:0}.hero .content{margin-top:40px}.hero .content .why-box{color:var(--contrast-color);background:color-mix(in srgb,var(--accent-color) 90%,transparent 80%);padding:30px;border-radius:4px}.hero .content .why-box h3{color:var(--contrast-color);font-weight:700;font-size:25px;margin-bottom:30px}.hero .content .why-box p{margin-bottom:20px}.hero .content .why-box .more-btn{color:var(--contrast-color);background:color-mix(in srgb,var(--contrast-color),transparent 80%);display:inline-block;padding:6px 30px 8px 30px;border-radius:50px;transition:all ease-in-out 0.4s}.hero .content .why-box .more-btn i{font-size:14px}.hero .content .why-box .more-btn:hover{background:var(--surface-color);color:var(--accent-color)}.hero .content .icon-box{text-align:center;border-radius:10px;background:color-mix(in srgb,var(--surface-color),transparent 20%);box-shadow:0 2px 15px rgb(0 0 0 / .1);padding:40px 30px;width:100%}.hero .content .icon-box i{font-size:40px;color:var(--accent-color)}.hero .content .icon-box h4{font-size:20px;font-weight:700;margin:10px 0 20px 0}.hero .content .icon-box p{font-size:15px;color:color-mix(in srgb,var(--default-color),transparent 30%)}.hero .hero-content h1{color:#031B4E;font-weight:700;font-size:100px}.hero .hero-content h1 .text-primary{color:#00BDE0!important}.hero .hero-content h1 small,.hero .hero-content .lead{color:#ffffff!important}.hero .hero-content .btn{padding:12px 35px;font-size:16px;border-radius:50px;font-weight:600}.hero .hero-content .btn-primary{background-color:#031B4E;border-color:#031B4E;color:#fff}.hero .hero-content .btn-outline-secondary{color:#00BDE0;border-color:#00BDE0}.hero .hero-content .btn-outline-secondary:hover{background-color:#00BDE0;color:#fff}@media (max-width:768px){.hero{min-height:calc(100vh - 80px);padding:60px 0}.hero .welcome h2,.hero .hero-content h1{font-size:clamp(28px, 5vw, 36px);line-height:1.2;margin-bottom:1rem}.hero .welcome p,.hero .hero-content .lead{font-size:clamp(16px, 3.5vw, 20px);line-height:1.4;margin-bottom:1.5rem}.hero .content{margin-top:2rem}.hero .content .why-box{padding:25px 20px;margin-bottom:2rem;border-radius:8px}.hero .content .why-box h3{font-size:clamp(20px, 4vw, 24px);margin-bottom:1rem}.hero .content .why-box p{font-size:15px;line-height:1.5;margin-bottom:1rem}.hero .content .icon-box{padding:30px 20px;margin-bottom:1.5rem;border-radius:12px}.hero .content .icon-box i{font-size:35px}.hero .content .icon-box h4{font-size:clamp(18px, 3.5vw, 20px);margin:15px 0}.hero .content .icon-box p{font-size:14px;line-height:1.4}.hero .hero-content .btn{padding:12px 28px;font-size:15px;margin:.5rem .5rem .5rem 0;display:inline-block;min-width:140px}.hero .row>[class*="col-"]:last-child .icon-box{margin-bottom:0}}@media (max-width:576px){.hero{min-height:calc(100vh - 60px);padding:40px 0;text-align:center}.hero .welcome h2,.hero .hero-content h1{font-size:clamp(24px, 6vw, 32px);line-height:1.1;margin-bottom:1rem}.hero .welcome p,.hero .hero-content .lead{font-size:clamp(14px, 4vw, 18px);line-height:1.3;margin-bottom:1.5rem}.hero .content{margin-top:1.5rem}.hero .content .why-box{padding:20px 15px;margin-bottom:1.5rem;border-radius:10px}.hero .content .why-box h3{font-size:clamp(18px, 5vw, 22px);margin-bottom:1rem}.hero .content .why-box p{font-size:14px;line-height:1.4}.hero .content .why-box .more-btn{padding:8px 20px 10px 20px;font-size:14px}.hero .content .icon-box{padding:25px 15px;margin-bottom:1.5rem;border-radius:15px}.hero .content .icon-box i{font-size:32px}.hero .content .icon-box h4{font-size:clamp(16px, 4vw, 18px);margin:12px 0 15px 0}.hero .content .icon-box p{font-size:13px;line-height:1.3}.hero .hero-content .btn{padding:10px 20px;font-size:14px;margin:.25rem .25rem .5rem 0;width:100%;max-width:280px}}@media (max-width:375px){.hero{padding:30px 0}.hero .welcome h2,.hero .hero-content h1{font-size:clamp(30px, 7vw, 28px);font-size:50px}.hero .welcome p,.hero .hero-content .lead{font-size:clamp(13px, 4.5vw, 16px)}.hero .content .why-box{padding:18px 12px}.hero .content .why-box h3{font-size:clamp(16px, 5.5vw, 20px)}.hero .content .icon-box{padding:20px 12px}.hero .content .icon-box i{font-size:28px}.hero .hero-content .btn{padding:10px 16px;font-size:13px;min-width:120px}}@media (max-height:500px) and (orientation:landscape){.hero{min-height:100vh;padding:20px 0}.hero .welcome h2,.hero .hero-content h1{font-size:clamp(20px, 4vw, 28px);margin-bottom:.5rem}.hero .welcome p,.hero .hero-content .lead{font-size:clamp(13px, 3vw, 16px);margin-bottom:1rem}.hero .content{margin-top:1rem}.hero .content .why-box,.hero .content .icon-box{margin-bottom:1rem}}
/* --------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about{overflow-x:hidden;position:relative}.about .bg-cover{position:absolute;border-radius:60%;inset:0;width:150%;height:150%;object-fit:cover;z-index:1;opacity:.05;left:-25%;top:-25%}.about .container{position:relative;z-index:2;max-width:100%;overflow-x:hidden}.image-showcase-container{position:relative;width:100%;max-width:645px;height:649px;margin:0 auto;overflow:visible}.image-showcase-container .doctor-image{width:90%;height:100%;object-fit:cover;border-radius:30px;box-shadow:0 15px 40px rgb(0 0 0 / .1)}.about-open-hours-card{width:270px;max-height:302px;overflow-y:auto;border-radius:30px;background-color:var(--hover-color);box-shadow:0 10px 30px rgb(0 0 0 / .15);padding:20px;position:absolute;top:300px;right:-30px;max-width:calc(100vw - 40px);box-sizing:border-box}.about-open-hours-card .icon-box-hours{position:absolute;top:10px;right:25px;width:45px;height:45px;background-color:var(--bs-light-blue);color:var(--contrast-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem}.about-open-hours-card h6{font-size:1.1rem;font-weight:600;color:var(--contrast-color);margin-bottom:15px}.about-open-hours-card .hours-table{width:100%;border-collapse:collapse;font-size:.9rem}.about-open-hours-card .hours-table td{padding:6px 0}.about-open-hours-card .hours-table td:first-child{color:var(--contrast-color)}.about-open-hours-card .hours-table td:last-child{font-weight:600;text-align:right;color:var(--contrast-color)}.pulsating-play-btn{position:absolute;left:calc(50% - 40px);top:calc(50% - 40px);width:80px;height:80px;background:radial-gradient(var(--bs-primary) 50%,rgb(26 58 138 / .4) 52%);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:32px;transition:0.3s;z-index:20;text-decoration:none;animation:pulsate 2s infinite}.pulsating-play-btn:hover{transform:scale(1.1);color:#fff}@keyframes pulsate{0%{transform:scale(.9);box-shadow:0 0 0 0 rgb(26 58 138 / .7)}70%{transform:scale(1);box-shadow:0 0 0 20px #fff0}100%{transform:scale(.9);box-shadow:0 0 0 0 #fff0}}.about .content{max-width:650px}.about .content h3{font-size:clamp(28px, 5vw, 42px);font-weight:700;line-height:1.3;color:var(--accent-color);margin-bottom:1rem}.about .content .tagline{font-style:italic;color:var(--text-muted);font-size:clamp(14px, 2.5vw, 16px);margin-bottom:2rem}.about .content ul{list-style:none;padding:0;margin:0}.about .content ul li{margin-top:30px;display:flex;align-items:flex-start;gap:15px}.about .content ul li:first-child{margin-top:0}.about .content ul i{font-size:24px;color:var(--hover-color);margin-top:5px;flex-shrink:0}.about .content ul .content-wrapper{flex:1}.about .content ul h5{font-size:clamp(16px, 3vw, 18px);font-weight:700;color:var(--accent-color);margin-bottom:5px;line-height:1.2}.about .content ul p{font-size:clamp(14px, 2.5vw, 15px);color:#555;margin-bottom:5px;line-height:1.5}@media (min-width:1200px){.image-showcase-container{height:700px}.about-open-hours-card{width:270px;max-height:302px;top:300px;right:-30px}}@media (min-width:992px) and (max-width:1199px){.image-showcase-container{max-width:550px;height:580px}.about-open-hours-card{width:250px;max-height:280px;top:250px;right:-20px;padding:18px}.about-open-hours-card h6{font-size:1rem;margin-bottom:12px}.about-open-hours-card .hours-table{font-size:.85rem}}@media (max-width:991px){.about{padding:60px 0}.image-showcase-container{max-width:500px;height:auto;margin-bottom:3rem}.image-showcase-container .doctor-image{width:100%;height:450px;border-radius:25px}.about-open-hours-card{position:relative;right:auto;left:auto;top:-80px;margin:0 auto;width:280px;max-height:none;height:auto;min-height:300px;z-index:10}.pulsating-play-btn{left:calc(50% - 40px);top:calc(50% - 120px);width:70px;height:70px;font-size:28px}.about .content{text-align:center;margin-top:2rem}.about .content h3{margin-bottom:1.5rem}.about .content ul{max-width:600px;margin:0 auto}.about .content ul li{justify-content:flex-start;text-align:left;margin-top:25px}}@media (max-width:767px){.about{padding:40px 0;overflow-x:hidden}.about .bg-cover{width:120%;height:120%;left:-10%;top:-10%;opacity:.03}.image-showcase-container{max-width:min(400px, calc(100vw - 40px));margin-bottom:2rem}.image-showcase-container .doctor-image{height:380px;border-radius:20px;width:100%;max-width:100%}.about-open-hours-card{width:min(260px, calc(100vw - 60px));height:auto;min-height:280px;top:-60px;padding:16px;border-radius:25px;left:50%;right:auto;transform:translateX(-50%);overflow-y:hidden}.about-open-hours-card .icon-box-hours{width:40px;height:40px;font-size:1.2rem;right:15px}.about-open-hours-card h6{font-size:.95rem;margin-bottom:10px}.about-open-hours-card .hours-table{font-size:.8rem;width:100%}.about-open-hours-card .hours-table td{padding:4px 0;word-wrap:break-word}.pulsating-play-btn{top:calc(50% - 100px);width:65px;height:65px;font-size:24px;left:50%;transform:translateX(-50%)}.about .content{padding:0 1rem;max-width:100%;overflow-x:hidden}.about .content ul{width:100%;max-width:100%}.about .content ul li{margin-top:20px;gap:12px;width:100%;max-width:100%}.about .content ul i{font-size:20px;margin-top:3px}}@media (max-width:575px){.about{padding:30px 0;overflow-x:hidden}.image-showcase-container{max-width:min(320px, calc(100vw - 40px));margin-bottom:1.5rem}.image-showcase-container .doctor-image{height:320px;border-radius:18px;width:100%}.about-open-hours-card{width:min(240px, calc(100vw - 80px));height:auto;min-height:260px;top:-50px;padding:15px;border-radius:20px;left:50%;right:auto;transform:translateX(-50%)}.about-open-hours-card .icon-box-hours{width:35px;height:35px;font-size:1rem;right:15px;top:8px}.about-open-hours-card h6{font-size:.9rem;margin-bottom:8px;padding-right:50px}.about-open-hours-card .hours-table{font-size:.75rem;width:100%}.about-open-hours-card .hours-table td{padding:3px 0;word-wrap:break-word;max-width:120px}.pulsating-play-btn{top:calc(50% - 85px);width:55px;height:55px;font-size:20px;left:50%;transform:translateX(-50%)}@keyframes pulsate{0%{transform:translateX(-50%) scale(.9);box-shadow:0 0 0 0 rgb(26 58 138 / .7)}70%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 15px #fff0}100%{transform:translateX(-50%) scale(.9);box-shadow:0 0 0 0 #fff0}}.about .content{padding:0 1rem;max-width:100%;overflow-x:hidden}.about .content ul{width:100%;max-width:100%}.about .content ul li{margin-top:15px;gap:10px;width:100%;max-width:100%}.about .content ul .content-wrapper{width:100%;max-width:calc(100% - 40px)}.about .content ul i{font-size:18px;margin-top:2px}}@media (max-width:375px){.image-showcase-container{max-width:min(280px, calc(100vw - 40px))}.image-showcase-container .doctor-image{height:280px;width:100%}.about-open-hours-card{width:min(220px, calc(100vw - 100px));height:auto;min-height:100px;top:-40px;padding:12px;left:50%;right:auto;transform:translateX(-50%)}.about-open-hours-card h6{font-size:.85rem;padding-right:45px}.about-open-hours-card .hours-table{font-size:.7rem}.about-open-hours-card .hours-table td{max-width:100px}.pulsating-play-btn{top:calc(50% - 100px);width:50px;height:50px;font-size:18px;left:50%;transform:translateX(-50%)}.about .content ul li{margin-top:12px;gap:8px}.about .content ul .content-wrapper{max-width:calc(100% - 35px)}}@media (max-height:500px) and (orientation:landscape){.about{padding:20px 0}.image-showcase-container{height:auto;margin-bottom:0rem}.image-showcase-container .doctor-image{height:250px}.about-open-hours-card{height:200px;top:-30px;padding:10px}.about-open-hours-card h6{font-size:.8rem;margin-bottom:6px}.about-open-hours-card .hours-table{font-size:.7rem}.about-open-hours-card .hours-table td{padding:2px 0}.pulsating-play-btn{width:45px;height:45px;font-size:16px;top:calc(50% - 65px)}.about .content ul li{margin-top:10px}}
/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
color: var(--contrast-color);
background-color: var(--accent-color);
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
width: 54px;
height: 54px;
font-size: 24px;
border-radius: 50px;
border: 2px solid var(--background-color);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.stats .stats-item {
background-color: var(--surface-color);
margin-top: -27px;
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 0;
}
.stats .stats-item span {
font-size: 32px;
display: block;
margin: 10px 0;
font-weight: 700;
color: var(--heading-color);
}
.stats .stats-item p {
padding: 0;
margin: 0;
font-family: var(--heading-font);
font-size: 16px;
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
background-color: #ECF5FB; /* Ganti dengan warna yang Anda inginkan */
}
.service-item {
background-color: #fff;
border: 1px solid #E0E7FF;
border-radius: 20px;
padding: 30px;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
display: flex;
flex-direction: column;
}
.service-item .main-icon {
font-size: 3rem;
color: var(--accent-cyan, #00BDE0);
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.service-item h3 {
font-weight: 600;
font-size: 1.25rem;
color: var(--primary-dark-blue, #031B4E);
margin-bottom: 10px;
position: relative;
z-index: 2;
}
.service-item p {
color: var(--text-muted, #6c757d);
font-size: 0.9rem;
position: relative;
z-index: 2;
flex-grow: 1; /* Membuat paragraf mengisi sisa ruang */
}
.card-footer-custom {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #E0E7FF;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}
.doctor-count {
font-size: 0.9rem;
color: var(--text-dark, #2B2B2B);
font-weight: 500;
}
.doctor-count i {
color: var(--accent-cyan, #00BDE0);
font-size: 0.7rem;
vertical-align: middle;
}
.arrow-link {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bg-light, #F0F7FF);
color: var(--primary-blue, #064089);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s;
}
/* --- EFEK HOVER PADA KARTU --- */
.service-item:hover {
background-color: var(--accent-cyan, #00BDE0);
border-color: var(--accent-cyan, #00BDE0);
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 189, 224, 0.2);
}
.service-item:hover .main-icon,
.service-item:hover h3,
.service-item:hover p,
.service-item:hover .doctor-count {
color: #fff;
}
.service-item:hover .doctor-count i {
color: #fff;
}
.service-item:hover .arrow-link {
background-color: #fff;
color: var(--accent-cyan, #00BDE0);
}
.service-item:hover .card-footer-custom {
border-top-color: rgba(255, 255, 255, 0.3);
}
/* --- Ikon background di dalam kartu --- */
.card-bg-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 8rem;
color: #000;
opacity: 0.03;
z-index: 1;
transition: opacity 0.3s;
}
.service-item:hover .card-bg-icon {
opacity: 0.1;
}
/* Tautan agar menutupi seluruh kartu */
.service-item a.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
content: "";
background-color: transparent;
}
/*
* CSS Final: Galeri 3D Profesional dengan Gambar Full Card
*/
#gallery{
background-color: #EDF6FB;
}
/* 1. Kontainer Utama */
.pro-carousel-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* 2. Judul Galeri */
.pro-carousel-title {
font-size: 2.2rem; /* Ukuran font lebih besar */
font-weight: bold;
color: #0d274d; /* Warna biru tua */
margin-bottom: 35px;
text-align: center;
}
/* 3. Viewport (Area tempat carousel berada) */
.pro-carousel-viewport {
position: relative;
width: 320px; /* Lebar item utama */
height: 240px; /* Tinggi item utama, rasio 4:3 */
perspective: 1000px;
transform-style: preserve-3d;
}
/* 4. Item Carousel (Kolom Bootstrap Anda) */
.pro-carousel-viewport > [class*="col-"] {
position: absolute;
width: 100%;
height: 100%;
padding: 0 !important; /* Menghapus padding bootstrap */
/* Ini yang membuat gambar menjadi 'full card' */
border-radius: 12px;
overflow: hidden;
transition: transform 0.5s ease, opacity 0.1s ease;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
background-color: #e0e0e0; /* Warna placeholder */
}
/* 5. Memastikan semua elemen di dalam item mengisi ruang */
/* Ini adalah bagian PENTING untuk request 'full card' */
.pro-carousel-viewport .gallery-item,
.pro-carousel-viewport .gallery-item a,
.pro-carousel-viewport .gallery-item img {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
object-fit: cover; /* Kunci agar gambar pas tanpa distorsi */
}
/* 6. Navigasi */
.pro-carousel-nav {
margin-top: 30px;
display: flex;
gap: 15px;
}
.pro-carousel-nav button {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--accent-color);
border: 1px solid #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.pro-carousel-nav button:hover {
border-color: #a0a0a0;
transform: scale(1.05);
}
.pro-carousel-nav button svg {
width: 20px;
height: 20px;
stroke: #fff;
}
/* CONTACT SECTION */
.kontak-info {
max-width: 700px;
margin: 0 auto;
}
.kontak-keterangan {
color: #031B4E !important;
}
.kontak-info svg {
display: block;
margin: 0 auto;
}
.kontak-item span {
font-size: 1rem;
color: var(--accent-color);
}
.kontak-map iframe {
width: 100%;
height: 350px;
border: 0;
border-radius: 8px;
}
/*
============================================================
PENYEMPURNAAN CSS MOBILE - TAMPILAN MINIMALIS MODERN
============================================================
*/
/* Media query untuk layar tablet ke bawah */
@media (max-width: 992px) {
/* 1. Aturan Umum: Menambah Ruang & Konsistensi */
.section, section {
padding: 40px 0; /* Mengurangi padding vertikal section agar halaman tidak terlalu panjang */
}
.container {
padding-left: 20px;
padding-right: 20px; /* Sedikit padding horizontal tambahan agar konten tidak menempel di tepi */
}
.section-title {
padding-bottom: 40px; /* Mengurangi jarak bawah judul section */
}
.section-title h2 {
font-size: 28px; /* Ukuran font judul section yang konsisten */
}
/* 2. Menyempurnakan Kartu-Kartu (Services, Blogs, Awards, dll.) */
.featured-services .service-item,
.blogs-grid .blog-card,
.award-card {
padding: 25px; /* Padding internal yang konsisten */
margin-bottom: 25px; /* Jarak antar kartu yang konsisten */
border: 1px solid #eef0f2; /* Ganti box-shadow tebal dengan border tipis */
box-shadow: none !important; /* Hapus shadow untuk tampilan lebih datar/minimalis */
transition: none; /* Hapus transisi hover di mobile */
transform: none !important; /* Hapus efek hover di mobile */
}
/* Menghapus margin bawah untuk item terakhir di setiap grid */
.row > [class*="col-"]:last-child .service-item,
.row > [class*="col-"]:last-child .award-card,
.blogs-grid > .blog-card:last-child {
margin-bottom: 0;
}
/* 3. Menyempurnakan Form Janji Temu (Appointment) */
.appointment-section {
padding-top: 20px;
}
.appointment-form-container {
margin-top: 20px; /* Beri jarak dari atas */
margin-bottom: 20px; /* Beri jarak ke bawah */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important; /* Shadow yang lebih lembut */
border: 1px solid #eef0f2;
}
.appointment-background {
height: 250px; /* Sedikit lebih kecil agar tidak dominan */
}
/* 4. Menyempurnakan Banner Links / Stats */
#banner-links .stats-item,
.stats .stats-item {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #eef0f2;
box-shadow: none !important;
}
.row > [class*="col-"]:last-child .stats-item {
margin-bottom: 0;
}
}
.bg-dark-blue {
background-color: #001f4d;
color: #ffffff;
}
.sidebar h5 {
color: #ffffff;
}
.nav-item-custom {
padding: 0.65rem 1rem;
border-radius: 0.5rem;
color: #ffffff;
background-color: transparent;
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Supaya teks juga putih */
.nav-item-custom span {
color: #ffffff;
}
/* Icon ikut warna teks */
.nav-item-custom i {
color: inherit;
}
.nav-item-custom:hover {
background-color: #003366;
color: #ffffff;
}
.nav-item-custom.active {
background-color: #00cfff;
color: #001f4d;
font-weight: bold;
}
.nav-item-custom.active span {
color: #001f4d;
}
.nav-item-custom.active i {
color: #001f4d;
}
.category-content img {
display: block !important;
margin: 1rem auto !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
/* Rasio dipertahankan jika gambar terlalu tinggi */
aspect-ratio: 4 / 5 !important;
max-height: 500px !important; /* opsional: batas tinggi maksimum */
}
#pengaduan {
background-color: #ffffff;
padding: 60px 0;
font-family: 'Poppins', sans-serif;
}
/* Judul utama */
#pengaduan h2 {
font-weight: 700;
color: #002B5B;
margin-bottom: 10px;
}
/* Subjudul */
#pengaduan p.text-muted {
font-size: 16px;
color: #6c757d;
margin-bottom: 30px;
}
/* Gambar ikon */
#pengaduan img {
border-radius: 16px;
max-width: 60%;
height: auto; /* <- Perbaikan! Sebelumnya height: 100 (tanpa satuan) */
flex-direction: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Judul kecil */
#pengaduan h5 {
font-weight: 600;
color: #003566;
margin-bottom: 16px;
}
/* List informasi */
#pengaduan ul {
padding-left: 0;
list-style: none;
margin-bottom: 24px;
}
/* Item list */
#pengaduan ul li {
display: flex;
align-items: center;
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
}
/* Icon dalam list */
#pengaduan ul li i {
color: #0096FF;
margin-right: 8px;
font-size: 1em;
line-height: 1;
vertical-align: middle;
display: inline-block;
}