/* =================================
Global Styles & Font
================================= */

/* Impor font yang bersih dan modern dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');



:root {
    --accent-color: #00A896;
    --light-bg: #f8f9fa;
    --dark-text: #333;

    /* Dashboard light theme palette (StockMate-inspired) */
    --dashboard-bg: #f4f6fb;
    --dashboard-surface: #ffffff;
    --dashboard-border: #e4e8f1;
    --dashboard-muted: #7b8196;
    --dashboard-text: #1b254b;
    --dashboard-primary: #3b82f6;
    --dashboard-soft-primary: #e6eeff;
    --dashboard-navbar-bg: #ffffff;
    --dashboard-navbar-border: #e2e6f0;
    --dashboard-sidebar-bg: #ffffff;
    --dashboard-sidebar-text: #1f2a44;
    --dashboard-sidebar-hover: rgba(59, 130, 246, 0.1);
    --dashboard-sidebar-active: rgba(59, 130, 246, 0.1);
}


/* Menargetkan semua tombol utama (btn-primary) di Light Mode */
body.light-mode .btn-primary {
    /* Menerapkan Hijau Gelap pada latar belakang & border */
    background-color: #007A6C !important;
    border-color: #007A6C !important;
    color: #fff !important;
    /* Teks tetap putih */

    /* Atur ulang box-shadow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
}

body.light-mode .btn-primary:hover {
    background-color: #00594e !important;
    border-color: #00594e !important;
    transform: scale(1.01);
}


/* ... (Kode CSS Global Variables dan Dark Mode di atas tidak diubah) ... */

/* =================================================== */
/* GLOBAL LIGHT MODE OVERRIDES */
body.light-mode {
    color: var(--light-text);
    background: var(--light-bg-body) !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: var(--light-text);
}

/* Navbar Light Mode */
body.light-mode .navbar {
    background-color: var(--light-surface) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .navbar-nav .nav-link {
    /* Navbar link warna gelap saat Light Mode */
    color: var(--light-text) !important;
}

/* --- PERBAIKAN HOVER/ACTIVE LINK (Light Mode) --- */
body.light-mode .navbar-nav .nav-link:hover,
body.light-mode .navbar-nav .nav-link.active {
    /* UBAH WARNA TEKS HOVER/ACTIVE menjadi HIJAU GELAP */
    color: #007A6C !important;
    border-bottom: none;
}

/* Border-bottom di desktop */
@media (min-width: 992px) {

    /* Mengubah warna garis bawah (border-bottom) menjadi HIJAU GELAP */
    body.light-mode .navbar-nav .nav-link:hover,
    body.light-mode .navbar-nav .nav-link.active {
        border-bottom: 3px solid #007A6C;
    }
}

body.light-mode .navbar-brand img {
    /* Logo glow dimatikan di light mode */
    filter: none;
}


/* 🟢 PERBAIKAN: Targetkan SEMUA ikon di dalam navbar untuk memastikan kontras */
body.light-mode .navbar i {
    color: var(--dark-text) !important;
    /* Paksa menjadi warna gelap */
    filter: none !important;
    /* Hapus semua glow yang mungkin membuatnya transparan */
    opacity: 1 !important;
    /* Pastikan visibilitas penuh */
}

/* Tombol Navbar Outline Primary */
body.light-mode .navbar .btn-outline-primary {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    background-color: transparent !important;
}


/* Tombol di navbar (Daftar/Masuk) */
body.light-mode .navbar .btn-primary {
    /* Mengubah warna menjadi hijau gelap */
    background-color: #007A6C !important;
    border-color: #007A6C !important;
    color: #fff !important;


}

body.light-mode .navbar .btn-primary:hover {
    /* Efek hover yang lebih gelap */
    background-color: #00594e !important;
    border-color: #00594e !important;
}

/* Hero Section Light Mode */
body.light-mode #beranda {
    background: var(--light-bg-body) !important;
    background-image: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Menyesuaikan Tombol CTA utama: Ajukan Permintaan Layanan */
body.light-mode #beranda .btn-primary {
    /* Mengubah warna menjadi hijau gelap */
    background-color: #007A6C !important;
    border-color: #007A6C !important;
    color: #fff !important;

}

body.light-mode #beranda::before {
    /* Peta SVG */
    opacity: 0.1;
    filter: grayscale(100%);
}

body.light-mode .full-height-hero h1 {
    /* Judul Hero menjadi warna aksen Teal */
    color: #007A6C !important;
    /* Hijau lebih gelap */
    text-shadow: none;
}

body.light-mode .full-height-hero p.lead {
    /* Subjudul Hero menjadi warna aksen Teal */
    color: #007A6C !important;
    /* Hijau lebih gelap */
    text-shadow: none;
    font-weight: 700;
}




/* =================================================== */
/* MODIFIKASI LIGHT MODE UNTUK SECTION LAIN */
/* =================================================== */

/* About Section Light Mode (#about) */
body.light-mode #about,
body.light-mode #contact {
    background-color: var(--light-surface) !important;
    color: var(--light-text);
    border: 1px solid var(--light-border);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    /* Shadow ringan */
}

body.light-mode #about:hover,
body.light-mode #contact:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-color);
}

/* Teks dan Ikon Khusus di About */
body.light-mode #about h2,
body.light-mode #about p {
    color: var(--light-text);
}

body.light-mode #about p.lead {
    color: #007A6C !important;
    /* Hijau lebih gelap */
    /* Lead text menggunakan aksen */
}

body.light-mode #about .bi-people-fill {
    color: var(--accent-color);
    /* Ikon People menjadi warna aksen */
    filter: none;
    /* HILANGKAN GLOW */
}

/* Services Section Light Mode (#services-3d) */
body.light-mode #services-3d {
    background: var(--light-bg-body) !important;
    background-image: none !important;
    /* Hapus grid gelap */
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Judul Layanan: Kategori Layanan */
body.light-mode #services-3d .content h2 {
    color: #007A6C !important;
}

/* Subjudul Layanan: Jelajahi berbagai dukungan... */
body.light-mode #services-3d .content p {
    color: #007A6C !important;
}

/* Card Layanan di Light Mode */
body.light-mode #services-3d .card.service-card {
    background-color: var(--light-surface) !important;
    border: 1px solid var(--light-border);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



body.light-mode #services-3d .card.service-card .bi {
    color: #007A6C !important;
    /* Ikon Layanan warna aksen */
    filter: none;
    /* HILANGKAN GLOW */
}

body.light-mode #services-3d .card.service-card .card-title,
body.light-mode #services-3d .card.service-card .card-text {
    color: #007A6C !important;
    /* Teks di card menjadi gelap */
    font-weight: 500;
}

/* Tombol Slider Kontrol di Light Mode */
body.light-mode #services-3d .controls button i {
    color: #007A6C !important;
    /* Ikon kontrol menjadi gelap */
    filter: none;
    /* HILANGKAN GLOW */
}

/* Tambahkan efek hover agar tetap konsisten */
body.light-mode #services-3d .controls button:hover i {
    /* Sedikit menggelapkan warna saat di-hover */
    color: #00594e !important;
    transform: scale(1.1);
}

/* --- Kontak (#contact) --- */

/* Judul Kontak: Hubungi Kami */
body.light-mode #contact h2 {
    color: #007A6C !important;
}

/* Label Formulir Kontak: Nama Anda, Email Anda, Pesan */
body.light-mode #contact .form-label {
    color: #007A6C !important;
    font-weight: 500;
}

body.light-mode #contact .form-control {
    /* Memastikan input fields kontras dan rapi di light mode */
    background-color: var(--light-surface);
    border-color: var(--light-border);
    color: var(--light-text);
}

/* Targetkan IKON (i) untuk styling visual di Contact */
body.light-mode #contact h2 .contact-icon .bi {
    /* UBAH WARNA IKON EMAIL menjadi HIJAU GELAP */
    color: #007A6C;
    font-size: 1.2em;
    vertical-align: -0.1em;
    /* Hapus filter/glow yang mungkin ada */
    filter: none;
}

/* Tombol "Kirim Pesan" di Contact Section */
body.light-mode #contact .btn-primary {
    /* Menerapkan Hijau Gelap pada latar belakang & border */
    background-color: #007A6C !important;
    border-color: #007A6C !important;
    font-weight: 500;
    color: #fff !important;
    /* Teks tetap putih */

    /* Hapus box-shadow dark mode */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Efek hover untuk tombol Kirim Pesan */
body.light-mode #contact .btn-primary:hover {
    background-color: #00594e !important;
    border-color: #00594e !important;
}

/* =================================================== */
/* GLOBAL DARK MODE BASE */
body {
    font-family: 'Poppins', sans-serif;
    color: #cccccc;
    /* Terapkan Gradient */
    background: linear-gradient(135deg, #121212 0%, #1a1a1a 50%, #121212 100%);
    /* Latar belakang body gelap */
    overflow-x: hidden;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: #ffffff;
    /* Judul jadi putih */
}


/* =================================
Navbar (TRANSPARAN / GLASSMORPHISM)
================================= */
.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    /* GANTI: Warna solid gelap, hilangkan blur dan transparansi */
    background-color: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(5px);

    /* Tambahkan bayangan ke bawah agar terlihat terpisah */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;

    transition: all 0.3s ease;
}

.navbar-brand img {
    height: 50px;
    width: auto;

    /* === TAMBAHKAN ATAU MODIFIKASI INI UNTUK EFEK GLOW PADA LOGO === */
    filter: drop-shadow(0 0 10px rgba(0, 168, 150, 0.7));

    /* Opsi tambahan: Sedikit transisi untuk efek hover */
    transition: all 0.3s ease;

    /* --- TAMBAHKAN ANIMASI SOFT PULSE --- */
    animation: logoPulse 4s ease-in-out infinite alternate;
}



/* Opsi: Tambahkan efek glow yang lebih kuat saat hover */
.navbar-brand img:hover {
    filter: drop-shadow(0 0 15px rgba(0, 168, 150, 1));
    transform: scale(1.05);
    /* Sedikit membesar saat di-hover */
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #ffffff !important;
    /* Warna Tautan menjadi Putih/Terang */
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    padding-bottom: 0.3rem;
}

/* Efek hover + status 'active' untuk link navbar */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent-color) !important;
    border-bottom: none;
}

/* Border-bottom di desktop */
@media (min-width: 992px) {

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        border-bottom: 3px solid var(--accent-color);
    }
}

/* Tombol di navbar */
.navbar .btn-primary,
.navbar .btn-primary:focus {
    /* Pastikan warna latar belakang dan border adalah ACCENT COLOR */
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    /* Pastikan teks putih */
}

/* Hover Tombol Navbar Primary */
.navbar .btn-primary:hover {
    background-color: #007A6C !important;
    /* Warna sedikit lebih gelap saat hover */
    border-color: #007A6C !important;
}

/* Tombol Navbar Outline Primary */
.navbar .btn-outline-primary {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    background-color: transparent !important;
}

/* Hover Tombol Navbar Outline */
.navbar .btn-outline-primary:hover {
    background-color: var(--accent-color) !important;
    color: #fff !important;
}

/* =================================
Hero Section (Beranda)
================================= */
#beranda {
    background: linear-gradient(to bottom, #121212, #0d0d0d);
    background-color: var(--dark-bg-level-2);
    /* Warna dasar jika garis tidak sepenuhnya mengisi */
    background-image:
        /* Ganti rgba(255, 255, 255, 0.05) dengan warna ACCENT Anda yang disamarkan */
        linear-gradient(to right, rgba(0, 168, 150, 0.1) 1px, transparent 1px),
        /* Garis vertikal (Tosca samar) */
        linear-gradient(to bottom, rgba(0, 168, 150, 0.1) 1px, transparent 1px);
    /* Garis horizontal (Tosca samar) */
    background-size: 20px 20px;
    animation: moveBackground 60s linear infinite;
    /* === EFEK FEATHERING/GRADIENT DI BAGIAN BAWAH === */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: blur(1px) brightness(1.2);
}



.full-height-hero {
    min-height: 100vh;
    padding-top: 100px;
    /* Warna latar belakang hero yang lebih transparan agar gradient body terlihat */
    background-color: transparent;
    overflow: hidden;
    color: #ffffff;
    position: relative;
    z-index: 1;
    /* 🟢 BARU: Tambahkan filter kecerahan ambient ke Hero */
    filter: brightness(1.1);
    /* Sedikit lebih cerah secara keseluruhan */
}

header .display-4 {
    font-weight: 700;
    color: #ffffff;
}

.full-height-hero p.lead {
    font-size: 1.25rem;
    color: #cccccc;
    font-weight: 500;
    text-shadow: none;
    text-shadow: 0 0 5px rgba(0, 168, 150, 0.5);
}

/* SVG Background Peta */
.full-height-hero::before {
    content: "";
    background-image: url("/assets/world.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center 55%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    /* Opacity ditingkatkan untuk latar gelap */
    filter: drop-shadow(0 0 20px var(--accent-color));
    /* Glow yang kuat */
    z-index: 1;
    animation: slowRotate 120s linear infinite, slowPulse 6s ease-in-out infinite alternate;
    transform-origin: center;
}


.full-height-hero>.container {
    margin-top: -35vh;
    position: relative;
    z-index: 2;
}



/* =================================
About Section (#about) - DARK MODE
================================= */
#about {
    /* Konsisten dengan Hero */
    background-color: #111111;
    color: #cccccc;

    /* 1. Tambahkan Border Radius untuk tampilan yang lebih halus */
    border-radius: 15px;

    /* 2. Tambahkan Padding (Jika belum ada di HTML) */
    padding: 3rem;
    /* Menjamin ruang di dalam kotak */
    /* --- PENAMBAHAN UNTUK TAMPILAN TIDAK KAKU --- */

    /* 1. Garis Tepi (Border) dengan Efek Glow Halus */
    border: 1px solid rgba(0, 168, 150, 0.4);
    /* Border tipis hologram dengan accent color */

    /* 2. Efek Shadow/Glow */
    box-shadow: 0 0 20px rgba(0, 168, 150, 0.15);
    /* Glow yang lebih terasa dengan accent color */

    /* 3. Transisi untuk Efek Hover */
    transition: all 0.5s ease;
    /* Transisi yang lebih halus untuk efek hover */
}

/* Tambahkan Efek Hover (Opsional, tapi meningkatkan kesan dinamis) */
#about:hover {
    transform: translateY(-5px) scale(1.005);
    /* Sedikit naik dan membesar */
    box-shadow: 0 5px 30px rgba(0, 168, 150, 0.3);
    /* Glow lebih kuat saat hover */
    border-color: var(--accent-color);
    /* Border menjadi lebih terang/solid */
}

/* Pastikan style ikonnya terlihat menonjol */
#about .bi-people-fill {
    color: var(--accent-color);
    font-size: 10rem !important;
    /* Efek glow yang lebih menonjol */
    filter: drop-shadow(0 0 20px var(--accent-color));
}

#about h2 {
    color: #ffffff;
}

#about p.lead {
    color: var(--accent-color);
    font-weight: 500;
}

#about p {
    color: #cccccc;
}

#about .bi-people-fill {
    color: var(--accent-color);
    font-size: 10rem !important;
    filter: drop-shadow(0 0 10px var(--accent-color));
}


/* =================================
3D SLIDER LAYANAN (#services-3d)
================================= */
#services-3d {
    /* Menyesuaikan dengan style .banner yang Anda berikan */
    width: 100%;
    min-height: 100vh;
    /* Agar full height */
    text-align: center;
    position: relative;

    /* Background gradient yang sudah ada di body Anda */
    background: linear-gradient(135deg, var(--dark-bg-level-2) 0%, var(--dark-bg-level-1) 50%, var(--dark-bg-level-2) 100%);
    display: block !important;
    /* Overwrite flex dari full-height-hero */
    z-index: 50;

    /* === GABUNGKAN GRID DAN BACKGROUND UTAMA === */
    background-image:
        linear-gradient(to right, rgba(0, 168, 150, 0.1) 1px, transparent 1px),
        /* Grid Vertikal */
        linear-gradient(to bottom, rgba(0, 168, 150, 0.1) 1px, transparent 1px),
        /* Grid Horizontal */
        linear-gradient(135deg, #121212 0%, #1a1a1a 50%, #121212 100%);
    /* Gradient Utama (Layer Ketiga) */

    background-size: 20px 20px, 20px 20px, 100% 100%;
    /* Ukuran Grid, Ukuran Gradient */
    background-repeat: repeat, repeat, no-repeat;

    /* Tambahkan animasi grid (opsional) */
    animation: moveBackground 60s linear infinite;

    z-index: 50;

    /* === KOREKSI EFEK FEATHERING/GRADIENT ATAS DAN BAWAH === */
    mask-image:
        /* Lapisan 1: Memudar di bagian ATAS (hitam ke transparan) */
        linear-gradient(to top, black 85%, transparent 100%),
        /* Lapisan 2: Memudar di bagian BAWAH (transparan ke hitam) */
        linear-gradient(to bottom, black 85%, transparent 100%);

    -webkit-mask-image:
        linear-gradient(to top, black 85%, transparent 100%),
        linear-gradient(to bottom, black 85%, transparent 100%);

    /* === Mengatur bagaimana dua gradient ini digabung === */
    /* Karena kita ingin keduanya bekerja, kita harus atur komposisi maskernya.
       Source-in biasanya yang terbaik, tapi defaultnya adalah combine. */
    mask-composite: intersect;
    -webkit-mask-composite: source-in;

}


/* CONTAINER SLIDER */
#services-3d .slider {
    position: absolute;
    width: 200px;
    /* Ukuran card */
    height: 250px;
    /* Ukuran card */
    top: 30%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1500px) rotateX(-10deg) rotateY(0deg);
    /* Ini tetap untuk orientasi keseluruhan */
    animation: none;
    z-index: 999;
    will-change: transform;
}



/* 🟢 TAMBAHAN: Style untuk Kontrol Slider */
#services-3d .controls {
    position: absolute;
    bottom: 10vh;
    /* Sesuaikan jarak dari bawah */
    left: 50%;
    transform: translateX(-50%);
    width: 100px !important;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    /* Pastikan di atas elemen lain */
}

#services-3d .controls button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    /* Menghapus spasi ekstra */
    transition: all 0.3s ease;
    color: var(--accent-color) !important;
}

#services-3d .controls button i {
    color: var(--accent-color);
    /* Warna ikon sama dengan accent color */
    filter: drop-shadow(0 0 8px rgba(0, 168, 150, 0.8));
    /* Tambahkan glow kuat */
    transition: all 0.3s ease;
}

/* 🟢 TAMBAHAN: Pastikan animasi autoRun tidak berjalan lagi */
/* Jika Anda ingin tetap ada animasi namun bisa di-override, tambahkan class .paused */
.slider-paused {
    animation-play-state: paused !important;
}

/* Media Queries untuk tombol agar tetap terlihat di mobile */
@media screen and (max-width: 767px) {
    #services-3d .controls {
        bottom: 5vh;
        width: 200px;
    }
}


#services-3d .controls button:hover i {
    color: #fff;
    /* Putih saat hover */
    filter: drop-shadow(0 0 15px var(--accent-color));
    transform: scale(1.1);
}

/* Setiap item di slider */
#services-3d .slider .item {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    isolation: isolate;
    position: absolute;
    inset: 0 0 0 0;
    /* Formula 3D Rotation */
    transform:
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(350px);
    transition: transform 0.6s ease-in-out;
}

/* Style Card di dalam item */
#services-3d .slider .item .card.service-card {
    /* Style Card agar sesuai dengan tema Anda */
    width: 200px;
    height: 250px;
    padding: 1.5rem;
    background-color: var(--dark-bg-level-1) !important;
    border: 1px solid rgba(0, 168, 150, 0.4);
    box-shadow: 0 0 15px rgba(0, 168, 150, 0.15);
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
    flex-direction: column;
    transform: translateZ(0);
    /* Render layer terpisah agar tidak tembus */
}

#services-3d .slider .item .card.service-card .bi {
    color: var(--accent-color);
    font-size: 3.5rem !important;
    filter: drop-shadow(0 0 5px var(--accent-color));
}

#services-3d .slider .item .card.service-card .card-title {
    color: #fff;
    font-weight: 700;
}

#services-3d .slider .item .card.service-card .card-text {
    color: #ccc;
    text-align: center;
    font-size: 0.85rem;
}

/* Bagian Konten (Judul Besar) */
#services-3d .content {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: max-content;
    padding-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Dipusatkan */
    align-items: flex-end;
    /* Ditempatkan di bawah */
    z-index: 100;
    color: #fff;
}

#services-3d .content h1 {
    /* Mengganti font-family ke yang sudah Anda impor (Poppins) jika ICA Rubrik tidak tersedia */
    font-family: 'Poppins', sans-serif;
    font-size: 8em;
    /* Ukuran lebih kecil agar pas */
    line-height: 1em;
    color: #25283B;
    /* Warna gelap untuk efek stroke */
    position: relative;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    margin: 0;
    width: 100%;
    text-align: center;
}

#services-3d .content h1::after {
    position: absolute;
    inset: 0 0 0 0;
    content: attr(data-content);
    z-index: 2;
    -webkit-text-stroke: 2px var(--accent-color);
    /* Menggunakan warna aksen Anda */
    color: transparent;
}

#services-3d .content .author {
    font-family: Poppins;
    text-align: center;
    max-width: 500px;
    margin-top: 20px;
    color: #ffffff !important;
    text-shadow: none;
}

#services-3d .content h2 {
    font-size: 2em;
    color: #ffffff !important;
}

#services-3d .content p {
    color: #ffffff !important;
}

#services-3d .controls {
    position: absolute;
    bottom: 10vh;
    /* Sesuaikan jarak dari bawah */
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    /* Pastikan di atas elemen lain */
}



/* =================================
MODIFIKASI MEDIA QUERIES UNTUK 3D ROTASI
================================= */

/* Medium Screens (Tablet/Layar Sedang) */
@media screen and (max-width: 1023px) {

    /* 1. Kontainer Slider (Perluas area pandang) */
    #services-3d .slider {
        /* Sedikit lebih lebar agar putaran terlihat utuh */
        width: 250px;
        left: calc(50% - 125px);
        /* Kurangi perspektif sedikit */
        transform: perspective(1200px) rotateX(-10deg) rotateY(0deg);
    }

    /* 2. Item Card (Kurangi kedalaman) */
    #services-3d .slider .item {
        /* Kurangi kedalaman (translateZ) agar kartu di samping tidak keluar dari pandangan */
        transform: rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(280px);
    }
}

/* Small Screens (Mobile/Layar Kecil) */
@media screen and (max-width: 767px) {

    /* 1. Kontainer Slider (Rapatkan Kontainer) */
    #services-3d .slider {
        /* Rapatkan kontainer secara signifikan */
        width: 180px;
        left: calc(50% - 90px);
        top: 35%;
        /* Naikkan sedikit agar tidak terlalu rendah */

        /* Kurangi perspektif lebih jauh */
        transform: perspective(900px) rotateX(-10deg) rotateY(0deg) !important;
    }

    /* 2. Item Card (Kurangi Kedalaman Jauh) */
    #services-3d .slider .item {
        /* Kurangi translateZ secara drastis */
        transform: rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(200px);
    }

    /* 3. Kontrol Button (Tombol) */
    #services-3d .controls {
        width: 80px !important;
        /* Agar tombol sangat rapat */
        bottom: 5vh !important;
    }
}

/* === Ambient Lighting Layer untuk Section Layanan === */
#services-3d::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 40%, rgba(0, 168, 150, 0.10), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0, 168, 150, 0.07), transparent 70%),
        radial-gradient(circle at 20% 90%, rgba(0, 255, 200, 0.05), transparent 80%);
    filter: blur(80px);
    opacity: 0.5;
    animation: ambientGlow 15s ease-in-out infinite alternate;
}

@keyframes ambientGlow {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(1.03);
    }

    100% {
        opacity: 0.2;
        transform: scale(1);
    }
}


/* Supaya konten di atasnya tetap terlihat tajam */
#services-3d>* {
    position: relative;
    z-index: 2;
}


/* =================================
Contact Section (#contact) - DARK MODE
================================= */
#contact {
    background-color: #111111 !important;
    border-radius: 15px;
    border: 1px solid rgba(0, 168, 150, 0.4);
    box-shadow: 0 0 20px rgba(0, 168, 150, 0.15);
    transition: all 0.5s ease;
    color: #cccccc;
    padding: 3rem;
}

/* style.css */

/* Targetkan WRAPPER (span) untuk animasi di Contact */
#contact h2 .contact-icon {
    /* Menerapkan animasi WIGGLE */
    animation: wiggleMessage 2.5s ease-in-out infinite;

    display: inline-block;
    vertical-align: middle;
}

/* Targetkan IKON (i) untuk styling visual di Contact */
#contact h2 .contact-icon .bi {
    color: var(--accent-color);
    font-size: 1.2em;
    vertical-align: -0.1em;
    /* Mengangkat sedikit ke atas */
    filter: drop-shadow(0 0 5px var(--accent-color));
}



#contact:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 5px 30px rgba(0, 168, 150, 0.3);
    border-color: var(--accent-color);
}

#contact h2 {
    color: #ffffff;
}

#contact .form-label {
    color: #cccccc;
}

/* Style Input Forms untuk Dark Mode */
#contact .form-control {
    background-color: #262626;
    border-color: #444;
    color: #fff;
}

#contact .form-control:focus {
    background-color: #262626;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 168, 150, 0.25);
}

/* Tombol "Kirim Pesan" */
#contact .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    font-weight: 500;
    transition: all 0.3s ease;
}

#contact .btn-primary:hover {
    background-color: #007A6C;
    border-color: #007A6C;
    opacity: 0.95;
}



/* =================================
Keyframes Animasi
================================= */

/* --- Keyframes BARU untuk Ikon Kontak (Wiggle/Undulation) --- */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes wiggleMessage {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-5px) rotate(2deg);
    }

    50% {
        transform: translateY(0) rotate(-2deg);
    }

    75% {
        transform: translateY(-5px) rotate(2deg);
    }
}

@keyframes slowPulse {
    0% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.1;
        transform: scale(1);
    }
}




@keyframes ctaPulse {
    0% {
        /* Mulai: Shadow tipis dan ukuran normal */
        box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.7);
        transform: scale(1);
        /* Ukuran normal */
    }

    50% {
        /* Tengah: Shadow menyebar dan zoom in */
        box-shadow: 0 0 0 15px rgba(0, 168, 150, 0.1);
        transform: scale(1.03);
        /* Sedikit zoom in */
    }

    100% {
        /* Kembali ke awal */
        box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.7);
        transform: scale(1);
        /* Kembali ke normal */
    }
}


/* --- Keyframes BARU untuk Logo Pulse --- */
@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(0, 168, 150, 0.7));
        transform: scale(1);
    }

    50% {
        /* Puncak Denyutan: Glow lebih kuat dan sedikit membesar */
        filter: drop-shadow(0 0 15px rgba(0, 168, 150, 1));
        transform: scale(1.015);
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(0, 168, 150, 0.7));
        transform: scale(1);
    }
}

/* Keyframes autoRun (Tambahkan ini jika belum ada di CSS Anda) */
@keyframes autoRun {
    from {
        /* Mengurangi kemiringan agar terlihat lebih tegak di jarak yang rapat */
        transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
    }

    to {

        transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
    }
}

/* --- Keyframes BARU untuk Judul Glowing (Glitch Effect) --- */
@keyframes headingGlow {

    0%,
    100% {
        text-shadow: 0 0 10px var(--accent-color), 0 0 20px rgba(0, 168, 150, 0.5);
    }

    50% {
        text-shadow: 0 0 15px #fff, 0 0 30px var(--accent-color), 0 0 45px rgba(0, 168, 150, 0.8);
    }
}

/* =================================
Register/Login Form Styles (Dark Mode)
================================= */

/* Container Card Utama */
.register-card-custom {
    /* Gunakan properti yang sama dengan #about/ #contact */
    background-color: #1a1a1a !important;
    border-radius: 15px !important;
    border: 1px solid rgba(0, 168, 150, 0.4);
    box-shadow: 0 0 20px rgba(0, 168, 150, 0.25) !important;
    /* Glow yang lebih kuat untuk fokus */
    transition: all 0.3s ease;
}

/* Style untuk Input Fields (form-control, form-select) */
.dark-input-custom {
    background-color: #262626 !important;
    /* Latar belakang input gelap */
    border-color: #444 !important;
    /* Border abu-abu tua */
    color: #ffffff !important;
    /* Teks input putih */
}

/* Style untuk saat input di-focus */
.dark-input-custom:focus {
    background-color: #262626 !important;
    border-color: var(--accent-color) !important;
    /* Border focus warna Teal */
    box-shadow: 0 0 0 0.25rem rgba(0, 168, 150, 0.25) !important;
}


/* Style untuk tombol Toggle Password */
.dark-btn-outline {
    background-color: #262626 !important;
    border-color: #444 !important;
}

.dark-btn-outline:hover {
    background-color: #333 !important;
    border-color: #444 !important;
}

/* Tombol Submit (Primary) */
/* ... (kode di atasnya) ... */

.btn-primary {
    /* Pastikan tombol primary memiliki glow dan warna aksen */
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 10px rgba(0, 168, 150, 0.5);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #007A6C !important;
    border-color: #007A6C !important;
    box-shadow: 0 0 15px rgba(0, 168, 150, 0.8);
    transform: scale(1.01);
}

.btn-primary.btn-lg {
    /* Menargetkan tombol CTA utama dengan ukuran besar */
    background-color: #00A896 !important;
    border-color: #00A896 !important;
    font-size: 1.25rem;
    padding: .5rem 1rem;

    /* Tombol tetap memiliki box-shadow dan tidak lagi beranimasi */
    box-shadow: 0 0 15px rgba(0, 168, 150, 0.6);
    animation: none !important;
    /* Memastikan tidak ada animasi */
}

/* ... (kode di bawahnya) ... */



.navbar-brand img {
    /* Pastikan tinggi (height) logo diatur dengan jelas */
    height: 50px;
    width: auto;
    display: inline-block;
    /* Memastikan elemen diatur dengan benar */

    /* Efek Glow yang sudah ada */
    filter: drop-shadow(0 0 10px rgba(0, 168, 150, 0.7));
    transition: all 0.3s ease;
    animation: logoPulse 4s ease-in-out infinite alternate;
}

/* Tambahkan ini jika ada konflik di halaman statis seperti register.html */
.navbar-brand {
    padding: 0;
    /* Hapus padding yang mungkin mendorong gambar */
}


/* =================================
Footer - DARK MODE
================================= */
footer {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

footer.border-top {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* =================================
Dashboard Light Theme Overrides
================================= */
body.dashboard-shell {
    background: var(--dashboard-bg);
    color: var(--dashboard-text);
    min-height: 100vh;
    --bs-body-bg: var(--dashboard-bg);
    --bs-body-color: var(--dashboard-text);
    
}

body.dashboard-shell h1,
body.dashboard-shell h2,
body.dashboard-shell h3,
body.dashboard-shell h4,
body.dashboard-shell h5,
body.dashboard-shell h6 {
    color: var(--dashboard-text);
}

.dashboard-shell .dashboard-navbar {
    background-color: var(--dashboard-navbar-bg) !important;
    border-bottom: 1px solid var(--dashboard-navbar-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.dashboard-shell .dashboard-navbar .navbar-brand,
.dashboard-shell .dashboard-navbar .navbar-text,
.dashboard-shell .dashboard-navbar .navbar-brand i {
    color: var(--dashboard-text) !important;
}

.dashboard-shell .navbar-current {
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.dashboard-shell .navbar-profile .avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--dashboard-soft-primary);
    display: grid;
    place-items: center;
    color: var(--dashboard-primary);
    font-size: 1.1rem;
}

.dashboard-shell .dashboard-navbar .btn-outline-secondary {
    border-color: var(--dashboard-border);
    color: var(--dashboard-text);
    background-color: transparent;
}

.dashboard-shell .dashboard-navbar .btn-outline-secondary:hover {
    border-color: var(--dashboard-primary);
    color: var(--dashboard-primary);
    background-color: rgba(37, 99, 235, 0.08);
}

.dashboard-shell .btn-profile {
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
}

.dashboard-shell .dashboard-sidebar {
    background-color: var(--dashboard-sidebar-bg);
    border-right: 1px solid var(--dashboard-border);
    box-shadow: 6px 0 24px rgba(15, 23, 42, 0.04);
    color: var(--dashboard-sidebar-text);
}

.dashboard-shell .dashboard-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard-shell .dashboard-sidebar .offcanvas-body {
    background-color: var(--dashboard-sidebar-bg);
    color: var(--dashboard-sidebar-text);
}

.dashboard-shell .sidebar-inner {
    min-height: 100%;
}

@media (min-width: 992px) {
    .dashboard-shell .sidebar-inner {
        position: sticky;
        top: 0;
        min-height: calc(100vh - 72px);
    }
}

@media (max-width: 991.98px) {
    .dashboard-shell .dashboard-sidebar {
        border-right: none;
        box-shadow: none;
    }

    .dashboard-shell .dashboard-navbar .navbar-current {
        display: none;
    }
}

.dashboard-shell .dashboard-sidebar,
.dashboard-shell .dashboard-sidebar .offcanvas-title {
    color: var(--dashboard-sidebar-text);
}

.dashboard-shell .dashboard-sidebar .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.dashboard-shell .dashboard-menu {
    font-size: 0.95rem;
}

.dashboard-shell .sidebar-brand .brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dashboard-soft-primary);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--dashboard-primary);
}

.dashboard-shell .dashboard-menu p {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--dashboard-muted);
}

.dashboard-shell .dashboard-menu .nav-link {
    color: var(--dashboard-muted);
    font-weight: 500;
    border-radius: 0.85rem;
    padding: 0.65rem 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    background-color: transparent;
}

.dashboard-shell .dashboard-menu .nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1rem;
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--dashboard-primary);
}

.dashboard-shell .dashboard-menu .nav-link:hover {
    color: var(--dashboard-text);
    background-color: var(--dashboard-sidebar-hover);
    transform: translateX(4px);
}

.dashboard-shell .dashboard-menu .nav-link.active {
    color: var(--dashboard-text) !important;
    background-color: var(--dashboard-sidebar-hover);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
    transform: translateX(4px);
}

.dashboard-shell .dashboard-menu .nav-link.active i {
    background-color: var(--dashboard-primary);
    color: #ffffff;
}

.dashboard-shell #dashboard-content {
    background-color: var(--dashboard-bg);
}

.dashboard-shell .dashboard-content-inner {
    background-color: var(--dashboard-bg);
}

.dashboard-shell .card {
    background-color: var(--dashboard-surface);
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.dashboard-shell .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(225, 230, 239, 0.7) !important;
}

.dashboard-shell .card .text-muted {
    color: var(--dashboard-muted) !important;
}

.dashboard-shell .icon-shape {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background-color: var(--dashboard-soft-primary);
    color: var(--dashboard-primary);
}

.dashboard-shell .btn-primary {
    background-color: var(--dashboard-primary);
    border-color: var(--dashboard-primary);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.dashboard-shell .btn-primary:hover {
    background-color: #1e4dd8;
    border-color: #1e4dd8;
}

.dashboard-shell .btn-light {
    border-color: var(--dashboard-border);
}

.dashboard-shell .table {
    border-color: var(--dashboard-border);
}

.dashboard-shell .table thead {
    background-color: #f8faff;
    color: var(--dashboard-muted);
}

.dashboard-shell .table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

.dashboard-shell .form-control,
.dashboard-shell .form-select {
    border-radius: 0.75rem;
    border-color: var(--dashboard-border);
    background-color: #fdfdff;
    box-shadow: none;
}

.dashboard-shell .form-control:focus,
.dashboard-shell .form-select:focus {
    border-color: var(--dashboard-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.dashboard-shell .input-group-text {
    border-radius: 0.75rem 0 0 0.75rem;
    border-color: var(--dashboard-border);
    background-color: #f3f6ff;
    color: var(--dashboard-muted);
}

.dashboard-shell .modal-content {
    border-radius: 1.25rem;
    border: 1px solid var(--dashboard-border) !important;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15);
}

.dashboard-shell .modal-header,
.dashboard-shell .modal-footer {
    background-color: #f9fafe;
    border-color: var(--dashboard-border) !important;
}

.dashboard-shell .sidebar-logout-btn {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    background-color: transparent;
    font-weight: 600;
}

.dashboard-shell .sidebar-logout-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.dashboard-shell .sidebar-footer {
    margin-top: auto;
}

.profile-modal {
    border: 1px solid var(--dashboard-border);
    border-radius: 1.25rem;
}

.profile-modal .modal-header {
    border-bottom: 1px solid var(--dashboard-border);
}

.profile-modal .modal-footer {
    border-top: 1px solid var(--dashboard-border);
}

.dashboard-shell .dashboard-hero h3,
.dashboard-shell #lansia-hero-name {
    color: #ffffff;
}

.dashboard-shell .stat-card {
    border-radius: 1rem;
    border: 1px solid var(--dashboard-border) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.dashboard-shell .stat-card .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background-color: var(--dashboard-soft-primary);
    color: var(--dashboard-primary);
}