/* style.css */
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* --- BACKGROUND PATTERNS (Style Tambahan) --- */

/* OPSI 1: GELOMBANG (Mirip Samudera.id) - Class ini yang tadi hilang */
/* --- NEW PATTERNS --- */

/* 1. HEXAGON (SAINS & STRUKTUR) */
.bg-pattern-hex {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10s-10 4.477-10 10v20c0 5.523 4.477 10 10 10zM12 40c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10S2 4.477 2 10v20c0 5.523 4.477 10 10 10z' fill='%2394a3b8' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* 2. GRID / BLUEPRINT (TEKNIK & PRESISI) */
.bg-pattern-grid {
    background-color: #c6cbd1;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2394a3b8' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

/* 3. DOT NETWORK (TEKNOLOGI & KONEKSI) */
.bg-pattern-dots {
    background-color: #f8fafc;
    background-image: radial-gradient(#94a3b8 1px, transparent 1px);
    background-size: 20px 20px; /* Jarak antar titik */
    opacity: 1;
}/* --- SETTING DARK MODE --- */
.dark .bg-pattern-hex,
.dark .bg-pattern-grid {
    background-color: #0f172a;
    /* Ubah warna pattern jadi putih tipis */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10s-10 4.477-10 10v20c0 5.523 4.477 10 10 10zM12 40c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10S2 4.477 2 10v20c0 5.523 4.477 10 10 10z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.dark .bg-pattern-dots {
    background-color: #0f172a;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    opacity: 0.8; /* Sedikit diredupkan di dark mode */
}
.bg-pattern-wave {
    background-color: #f8fafc; /* Warna dasar terang */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 12.878 61.474 11 50 11c-11.385 0-16.12 1.705-24.66 5.663-3.136 1.453-6.14 2.656-9.043 3.337h4.887zm-10.35 0c2.56-.99 5.23-2.193 8.163-3.486C28.297 12.44 33.326 10 44 10c11.69 0 17.373 2.502 26.657 6.467 2.446 1.045 4.673 2.054 6.78 2.876L79.16 18.66c-2.903-1.07-5.59-2.185-8.878-3.493C61.428 11.66 55.485 9 44 9c-11.62 0-16.71 2.39-25.048 6.096-2.58 1.147-5.068 2.227-7.46 3.104l-.652.224-2.836.976h2.83zM0 20c.23-.07.464-.143.7-.222l2.35-.783C12.31 15.68 18.15 14 28 14c10.744 0 16.516 2.037 25.541 5.647l.462.186C56.636 18.775 60.108 18 64 18c6.307 0 10.957 2.073 17.202 5.093l.354.171C84.385 21.84 89.155 21 94 21c5.174 0 9.617.972 13.916 2.596l.89.336L108 23.633V20h-5.068c-2.228-.795-4.546-1.616-6.932-2.57C87.628 14.1 82.385 12 72 12c-10.744 0-16.516 2.037-25.541 5.647l-.462.186C43.364 19.225 39.892 20 36 20c-6.307 0-10.957-2.073-17.202-5.093l-.354-.171C15.615 13.16 10.845 14 6 14c-2.618 0-4.994.248-7.234.69l-.666.132V20H0z' fill='%2394a3b8' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* OPSI 2: TOPOGRAFI (Garis Peta Kontur) */
.bg-pattern-topo {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2394a3b8' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* DARK MODE SETTING */
.dark .bg-pattern-wave, 
.dark .bg-pattern-topo {
    background-color: #0f172a; 
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 12.878 61.474 11 50 11c-11.385 0-16.12 1.705-24.66 5.663-3.136 1.453-6.14 2.656-9.043 3.337h4.887zm-10.35 0c2.56-.99 5.23-2.193 8.163-3.486C28.297 12.44 33.326 10 44 10c11.69 0 17.373 2.502 26.657 6.467 2.446 1.045 4.673 2.054 6.78 2.876L79.16 18.66c-2.903-1.07-5.59-2.185-8.878-3.493C61.428 11.66 55.485 9 44 9c-11.62 0-16.71 2.39-25.048 6.096-2.58 1.147-5.068 2.227-7.46 3.104l-.652.224-2.836.976h2.83zM0 20c.23-.07.464-.143.7-.222l2.35-.783C12.31 15.68 18.15 14 28 14c10.744 0 16.516 2.037 25.541 5.647l.462.186C56.636 18.775 60.108 18 64 18c6.307 0 10.957 2.073 17.202 5.093l.354.171C84.385 21.84 89.155 21 94 21c5.174 0 9.617.972 13.916 2.596l.89.336L108 23.633V20h-5.068c-2.228-.795-4.546-1.616-6.932-2.57C87.628 14.1 82.385 12 72 12c-10.744 0-16.516 2.037-25.541 5.647l-.462.186C43.364 19.225 39.892 20 36 20c-6.307 0-10.957-2.073-17.202-5.093l-.354-.171C15.615 13.16 10.845 14 6 14c-2.618 0-4.994.248-7.234.69l-.666.132V20H0z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-image-full {
    /* 1. Warna Dasar (Cadangan jika gambar gagal load) */
    background-color: #f8fafc;

    /* 2. Gambar + Overlay Putih (Agar teks terbaca) */
    /* Angka 0.95 artinya 95% Putih (Transparan dikit) */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.80), rgba(224, 194, 194, 0.95)),
        url('img/hero-bg.jpg'); /* GANTI DENGAN FOTO ANDA */

    /* 3. Setting agar gambar diam saat discroll (Parallax) */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Dark Mode: Ganti Overlay jadi Gelap */
.dark .bg-image-full {
    background-color: #0f172a;
    /* Overlay diganti jadi warna biru gelap (0.95 opacity) */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95)),
        url('img/hero-bg.jpg');
}

.bg-image-pattern {
    background-color: #f8fafc;
    /* Ganti URL di bawah dengan lokasi file gambar Anda */
    background-image: url('img/pattern-kertas.png'); 
    background-repeat: repeat; /* Mengulang gambar */
    background-size: auto;     /* Ukuran asli gambar */
}

/* Dark Mode: Gelapkan gambar agar tidak silau */
.dark .bg-image-pattern {
    background-color: #0f172a;
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('img/pattern-kertas.png');
    background-blend-mode: overlay;
}

/* Preloader Styles */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0f3c66; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}
#preloader.hidden-loader { opacity: 0; visibility: hidden; }
.loader {
    border: 4px solid #f3f3f3; border-top: 4px solid #fbbf24;
    border-radius: 50%; width: 50px; height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Floating WhatsApp */
.float-wa {
    position: fixed; width: 60px; height: 60px; bottom: 40px; left: 40px; 
    background-color: #25d366; color: #FFF; border-radius: 50px;
    text-align: center; font-size: 30px; box-shadow: 2px 2px 3px #999;
    z-index: 100; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.float-wa:hover { transform: scale(1.1); background-color: #128C7E; }

/* Toast Notification */
#toast {
    visibility: hidden; min-width: 250px; margin-left: -125px;
    background-color: #333; color: #fff; text-align: center;
    border-radius: 8px; padding: 16px; position: fixed; z-index: 1000;
    left: 50%; bottom: 30px; font-size: 17px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.5s, bottom 0.5s;
}
#toast.show { visibility: visible; opacity: 1; bottom: 50px; }
#toast.success { background-color: #10B981; }
#toast.error { background-color: #EF4444; }

/* Active Menu State */
.nav-link.active { color: #3b82f6 !important; font-weight: 700; }
.dark .nav-link.active { color: #fbbf24 !important; }

/* Animations */
#backToTop { visibility: hidden; opacity: 0; transform: translateY(20px); transition: all 0.3s ease-in-out; }
#backToTop.show { visibility: visible; opacity: 1; transform: translateY(0); }
.reveal-up { opacity: 0; transform: translateY(50px); transition: all 1s ease-out; }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s ease-out; }
.reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s ease-out; }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.active-anim { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; }

body, div, nav, section, h1, h2, h3, p, a, input, textarea, button { 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
}

.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; }
.float-wa {
    position: fixed; width: 60px; height: 60px; bottom: 40px; left: 40px; 
    background-color: #25d366; color: #FFF; border-radius: 50px;
    font-size: 30px; box-shadow: 2px 2px 3px #999; z-index: 100; 
    display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.float-wa:hover { transform: scale(1.1); background-color: #128C7E; }

/* Preloader */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0f3c66; z-index: 9999; display: flex; 
    justify-content: center; align-items: center; transition: opacity 0.5s;
}
#preloader.hidden-loader { opacity: 0; visibility: hidden; }
.loader {
    border: 4px solid #f3f3f3; border-top: 4px solid #fbbf24;
    border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- ANIMATION UTILS --- */

/* 1. Back to Top Button Animation */
#backToTop.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translateY(0); 
}

/* 2. Initial States (Kondisi Awal: Tersembunyi) */
.reveal-up { 
    opacity: 0; 
    transform: translateY(50px); 
    transition: all 1s ease-out; 
}

.reveal-left { 
    opacity: 0; 
    transform: translateX(-50px); 
    transition: all 1s ease-out; 
}

.reveal-right { 
    opacity: 0; 
    transform: translateX(50px); 
    transition: all 1s ease-out; 
}

.reveal-scale { 
    opacity: 0; 
    transform: scale(0.8); 
    /* cubic-bezier memberikan efek 'membal' yang cantik saat muncul */
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* 3. Active State (Kondisi Akhir: Muncul) */
/* Class ini ditambahkan oleh Javascript saat elemen terlihat di layar */
.active-anim { 
    opacity: 1 !important; 
    transform: translate(0, 0) scale(1) !important; 
}
/* Toast */
#toast {
    visibility: hidden; min-width: 250px; background-color: #333; color: #fff; 
    text-align: center; border-radius: 8px; padding: 16px; position: fixed; 
    z-index: 1000; left: 50%; transform: translateX(-50%); bottom: 30px; opacity: 0; transition: 0.5s;
}
#toast.show { visibility: visible; opacity: 1; bottom: 50px; }