/* Styling Dasar */
:root {
    --light-bg: #f4f4f4;
    --light-text: #333;
    --light-accent: #007bff;
    --dark-bg: #121212;
    --dark-text: #e0e0e0;
    --dark-accent: #4da6ff;
    --dark-h1-color: #4da6ff;
    --dark-h2-color: #4da6ff;
    --font-family: 'Poppins', sans-serif;
    --header-height: 60px;
}

/* DIUBAH: Untuk aksesibilitas, gunakan persentase agar menghormati setelan browser pengguna */
html {
    font-size: 62.5%; 
}

html,
body {
    overflow-x: hidden;
    position: relative;
}

body {
    font-family: var(--font-family);
    margin: 0;
    background-color: var(--light-bg);
    color: var(--light-text);
    transition: background-color 0.3s, color 0.3s;
    padding-top: var(--header-height);
}

/* Dark Mode menggunakan atribut data-bs-theme */
[data-bs-theme="dark"] {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: #1e1e1e !important;
}

/* Styling Navbar */
.navbar-toggler .bi-list {
    color: rgba(0, 0, 0, 0.7);
    transition: color 0.3s;
}

[data-bs-theme="dark"] .navbar-toggler .bi-list {
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .navbar-brand {
    color: var(--dark-accent) !important;
}

[data-bs-theme="dark"] .nav-link {
    color: var(--dark-text) !important;
}

/* Custom Underline Effect for Nav Links */
.nav-link {
    position: relative;
    padding-bottom: 5px !important;
    overflow: hidden;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--light-accent);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

[data-bs-theme="dark"] .nav-link::after {
    background-color: var(--dark-accent);
}

/* Bagian Konten */
.section {
    padding: 60px 5%; 
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sectionLayanan {
    padding: 80px 5%;
    min-height: calc(100vh);
    /* min-height dihapus agar tinggi section lebih fleksibel sesuai konten */
    display: flex;
    flex-direction: column;
}

/* Hero Section */
.hero {
    min-height: calc(100vh - var(--header-height));
    background: url('../assets/img/hero_foto.jpeg') no-repeat center center;
    background-size: cover;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero h1 {
    font-size: 2.5rem; 
}

.hero p {
    font-size: 1.1rem;
}

/* Menyamakan ukuran gambar logo di dalam kartu layanan */
#Layanan .card-body img {
    height: 80px; 
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
}

/* Flowchart Proses Sertifikasi */
.flowchart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.flowchart-box {
    background-color: #ffffff;
    border: 2px solid var(--light-accent);
    border-radius: 8px;
    padding: 15px; 
    margin-bottom: 15px; 
    text-align: center;
    width: 90%; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flowchart-box.start-end {
    background-color: #28a745;
    color: white;
    border-color: #218838;
}

.flowchart-box h3 {
    margin: 0 0 5px 0;
    font-size: 1.4rem; /* DIUBAH: sedikit diperbesar agar terbaca (14px) */
    color: #333;
}

.flowchart-box.start-end h3 {
    color: white;
}

.flowchart-box p {
    margin: 0;
    font-style: italic;
    color: #555;
    font-size: 1.3rem; /* DIUBAH: sedikit diperbesar agar terbaca (13px) */
}

.arrow {
    font-size: 1.8em;
    color: var(--light-accent);
    margin-bottom: 15px;
    font-weight: bold;
}

/* Styling untuk Section Kontak */
.contact-info-box {
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    height: 100%;
}

[data-bs-theme="dark"] .contact-info-box {
    background-color: #1e1e1e;
}

.contact-link {
    color: var(--light-text);
    word-break: break-all;
}

[data-bs-theme="dark"] .contact-link {
    color: var(--dark-text);
}

/* Peta di Section Tentang Kami */
.map-container {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: 300px; 
}

/* DIUBAH: Aturan untuk iframe dipindahkan ke sini dari HTML */
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none; /* Menghapus border */
}

/* Footer */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

/* Tombol Scroll to Top */
#scrollToTopBtn {
    display: none; /* Sembunyi secara default */
    position: fixed; /* Tetap di posisi yang sama saat scroll */
    bottom: 20px; /* Jarak dari bawah */
    right: 30px; /* Jarak dari kanan */
    z-index: 99; /* Pastikan tombol di atas elemen lain */
    border: none;
    outline: none;
    background-color: var(--light-accent);
    color: white;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 25%; /* Membuatnya menjadi lingkaran */
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s, opacity 0.4s;
}

#scrollToTopBtn:hover {
    background-color: #0056b3; /* Warna sedikit lebih gelap saat hover */
}

/* Kustomisasi untuk Dark Mode */
[data-bs-theme="dark"] #scrollToTopBtn {
    background-color: var(--dark-accent);
}

[data-bs-theme="dark"] #scrollToTopBtn:hover {
    background-color: #66b3ff;
}

/* Styling Dark Mode Lainnya */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2 {
    color: var(--dark-h2-color) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--dark-text);
    color: var(--dark-text);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--dark-accent);
    color: #fff;
}

/* PENYESUAIAN UKURAN FONT DATATABLES */
#tabelData,
#tabelData th,
#tabelData td,
.dataTables_info,
.dataTables_paginate .page-link {
    font-size: 1 rem; /* DIUBAH: agar lebih mudah dibaca (10px) */
}

.dataTables_paginate .page-link {
    padding: 0.25rem 0.6rem;
}

/* =============================================== */
/* ========== MEDIA QUERIES FOR DESKTOP ========== */
/* =============================================== */
@media (min-width: 768px) {
    /* Kembalikan font dasar ke ukuran normal untuk desktop */
    html {
        font-size: 16px;
    }

    /* Mengembalikan padding section ke ukuran semula untuk layar lebih besar */
    .section {
        padding: 80px 5%;
    }

    /* Mengembalikan ukuran font hero untuk desktop */
    .hero h1 {
        font-size: 4rem;
    }

    .hero p {
        font-size: 1.25rem;
    }
    
    /* Mengembalikan ukuran logo di kartu layanan */
    #Layanan .card-body img {
        height: 100px;
    }
    
    /* Mengembalikan ukuran font di flowchart */
    .flowchart-box h3 {
        font-size: 1.1rem; /* DIUBAH: satuan dari em ke rem agar konsisten */
    }
    
    .flowchart-box p {
        font-size: 1rem; /* DIUBAH: satuan dari em ke rem agar konsisten */
    }

    /* Mengembalikan tinggi peta */
    .map-container {
        height: 450px;
    }
}
.btn-tooltip {
    position: relative; /* Wajib ada agar posisi tooltip bisa diatur */
}

/* Pengaturan dasar untuk kotak dan segitiga tooltip */
.btn-tooltip::before,
.btn-tooltip::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Gaya untuk KOTAK tooltip */
.btn-tooltip::before {
    content: attr(aria-label); /* Mengambil teks dari atribut aria-label */
    background-color: #343a40; /* Warna latar belakang */
    color: #fff; /* Warna teks */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10;
    
    /* DIUBAH: Posisikan kotak di bawah tombol dengan jarak 10px */
    top: calc(100% + 10px); 
}

/* Gaya untuk SEGITIGA tooltip */
.btn-tooltip::after {
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;

    /* DIUBAH: Buat segitiga menunjuk ke ATAS dan posisikan di antara tombol & kotak */
    border-bottom-color: #343a40;
    top: calc(100% + 4px);
}

/* Tampilkan tooltip saat kursor diarahkan ke tombol */
.btn-tooltip:hover::before,
.btn-tooltip:hover::after {
    opacity: 1;
}

/* Pastikan modal-content dan modal-body fleksibel untuk mengisi layar */
#pdfModal .modal-content {
    height: 100vh; /* Gunakan 100% tinggi viewport */
    display: flex;
    flex-direction: column;
}

#pdfModal .modal-body {
    flex-grow: 1; /* Biarkan modal-body mengisi sisa ruang */
    overflow: auto; /* Tetap berikan scroll jika kontennya sangat panjang */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Mulai dari atas */
}

/* Pastikan canvas tidak lebih lebar dari containernya */
#pdf-renderer {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Loading spinner sederhana */
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}