/* Gaya Dasar Halaman */
/* Menambahkan animasi scroll halus dan jarak aman untuk navbar sticky */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* Jarak ini memastikan judul tidak tertutup navbar. Sesuaikan angkanya jika navbar Anda lebih tinggi/pendek */
}

body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    scroll-behavior: smooth; /* Membuat efek scroll lebih halus */
}

/* Navigasi Fixed / Sticky (Tetap di atas saat di-scroll) */
/* --- GANTI BAGIAN NAVBAR LAMA DENGAN INI --- */
nav { 
    background-color: rgba(26, 36, 50, 0.85); /* Warna biru gelap transparan */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    display: flex; 
    justify-content: space-between; /* Memisahkan logo ke kiri dan menu ke kanan */
    align-items: center;
    padding: 12px 50px !important; /* Padding kiri-kanan lebih lebar */
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.nav-brand {
    color: white;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand img {
    height: 35px !important; /* Anda bisa mengecilkan angka ini (misal 30px) jika masih terasa terlalu besar */
    width: auto; /* Lebar akan menyesuaikan proporsi gambar secara otomatis */
    object-fit: contain;
}

.nav-links a { 
    color: #cbd5e1; 
    padding: 10px 15px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: bold;
    transition: 0.3s;
}

.nav-links a:hover { 
    color: white; 
}

/* Tombol transparan garis luar untuk Hubungi Kami di Navbar */
.btn-outline {
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    margin-left: 15px;
}

.btn-outline:hover {
    background-color: white;
    color: #1a2432 !important;
}

/* --- GANTI BAGIAN HEADER & HERO LAMA DENGAN INI --- */
.hero-modern { 
    background-color: #1a2432; /* Latar belakang biru dongker gelap */
    color: white; 
    display: flex; /* Membagi menjadi 2 kolom */
    justify-content: space-between; 
    align-items: center;
    padding: 60px 30px; 
    min-height: 30vh;
}

.hero-left, .hero-right {
    flex: 1; /* Lebar kolom seimbang 50% - 50% */
    padding: 20px;
}

/* Penyesuaian Kolom Kiri */
.hero-left .subtitle {
    text-transform: uppercase;
    letter-spacing: 5px; /* Spasi huruf lebar seperti di gambar */
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 15px;
}

.hero-left h1 {
    font-size: 65px; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif; 
}

/* Penyesuaian Kolom Kanan */
.hero-right p {
    font-size: 18px;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 30px;
    max-width: 90%;
}

.hero-banner-image {
    width: 100%;
    background-color: #1a2432; /* Melanjutkan warna gelap dari header di atasnya */
    text-align: center;
    padding-bottom: 50px;
}

.hero-banner-image img {
    width: 90%;
    max-width: 1000px; /* Batas maksimal lebar gambar agar tidak terlalu raksasa di monitor PC */
    height: auto;
    border-radius: 15px; /* Membuat sudut gambar melengkung manis */
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); /* Memberikan efek bayangan melayang */
}

.slider-container { width: 100%; overflow: hidden; }
.slider {
    display: flex;
    width: 400%; /* 4 gambar x 100% */
    animation: geser 16s infinite;
}
.slider img {
    width: 25%; /* 100 / 4 */
    height: 400px; /* Mengatur tinggi 3/4 agar pas */
    object-fit: cover; /* Memotong gambar agar tetap tajam */
}
@keyframes geser {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-25%); }
    50%, 70% { transform: translateX(-50%); }
    75%, 100% { transform: translateX(-75%); } /* Berhenti di gambar duplikat pertama */
}

/* Tombol Biru Solid di Hero */
.btn-primary { 
    background-color: #3b82f6; /* Biru terang */
    color: white; 
    padding: 15px 30px; 
    text-decoration: none; 
    border-radius: 30px; /* Bentuk melengkung membulat (pil) */
    font-weight: bold; 
    display: inline-block;
    transition: 0.3s;
    border: none;
}

.btn-primary:hover {
    background-color: #2563eb; /* Biru lebih gelap saat disentuh */
}

.btn { 
    background-color: #ff9900; 
    color: white; 
    padding: 10px 20px; 
    text-decoration: none; 
    border-radius: 5px; 
    font-weight: bold; 
    border: none;
    cursor: pointer;
}

/* --- Gaya Bingkai Form Multi-step --- */
.form-bingkai {
    background-color: #f8fafc;
    padding: 25px 30px; /* Sebelumnya 40px, diperkecil agar bingkai tidak terlalu memakan tempat */
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    margin-top: 20px;
}

/* Mengurangi jarak atas pada label (Nama, Usia, dll) */
.form-step label {
    display: block;
    margin-top: 12px; /* Sebelumnya 20px, dipersempit agar lebih dekat dengan isian sebelumnya */
    font-weight: bold;
    color: #334155;
    font-size: 14px;
}

/* Mempertipis ketebalan kotak input dan pilihan */
.form-step input, 
.form-step select {
    width: 100%;
    padding: 8px 12px; /* Sebelumnya 12px 15px, diperkecil agar kotak tidak terlalu tebal */
    margin-top: 5px; /* Sebelumnya 8px, mendekatkan kotak isian dengan teks labelnya */
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px; /* Ukuran teks di dalam kotak isian sedikit disesuaikan */
}

/* Mengurangi jarak kosong sebelum tombol Lanjut */
.tombol-lanjut {
    margin-top: 20px; /* Sebelumnya 30px */
    width: 100%; 
}


.form-navigasi {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* Tombol kembali */
.btn-outline-dark {
    background: transparent;
    border: 2px solid #94a3b8;
    color: #475569;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-outline-dark:hover {
    background-color: #94a3b8;
    color: white;
}

/* Mengatur wadah agar ada jarak atas dan bawah */
.landing-page {
    padding: 40px 20px;
}

/* Memastikan gambar di tengah, tajam, dan tidak ada celah aneh */
.gambar-kecil-tajam {
    display: block; /* Mengubah sifat gambar menjadi blok penuh */
    margin: 0 auto; /* Ini adalah kunci ajaib agar gambar berada tepat di tengah (kiri-kanan seimbang) */
    
    /* Gunakan max-width agar gambar tidak pecah. Angka ini sesuaikan dengan ukuran asli gambar Anda. */
    max-width: 1000px; /* Jika gambar Anda ukuran aslinya 1000px, ia tidak akan dipaksa lebih besar dari itu */
    width: 100%; /* Membuat gambar otomatis mengecil secara proporsional jika dibuka di HP */
    
    height: auto; /* Menjaga proporsi agar tidak gepeng */
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

.btn:hover {
    background-color: #e68a00;
}

/* Konten Utama */
.section { 
    padding: 60px 20px; 
    max-width: 900px; 
    margin: auto; 
}

.section h3 { 
    border-bottom: 2px solid #004080; 
    padding-bottom: 10px; 
    color: #004080; 
}

/* Tabel Survei Servqual */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
}

table, th, td { 
    border: 1px solid #ddd; 
}

th, td { 
    padding: 12px; 
    text-align: center; 
}

th { 
    background-color: #004080; 
    color: white; 
}

.question-text { 
    text-align: left; 
}

/* --- Gaya Kuesioner Modern (Menggantikan Tabel Jadul) --- */
.panduan-skala {
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 14px;
    border-radius: 4px;
}

.panduan-skala p { margin: 5px 0; }

.kartu-survei {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: 0.3s;
}

.kartu-survei:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.label-dimensi {
    font-size: 12px;
    background: #1a2432;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.blok-pertanyaan {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #cbd5e1;
}

.blok-pertanyaan:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.teks-tanya {
    font-weight: bold;
    color: #334155;
    margin-bottom: 10px;
    font-size: 14px;
}

.opsi-radio {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.opsi-radio label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    cursor: pointer;
    font-weight: normal;
    margin-top: 0;
}

/* Footer */
footer#kontak {
    background-color: #111827; /* Warna latar belakang sangat gelap agar senada dengan tema modern */
    color: #cbd5e1; /* Warna teks abu-abu terang */
    padding: 50px;
    display: flex; /* Mengaktifkan Flexbox untuk menyejajarkan elemen */
    justify-content: space-between; /* Mendorong satu kolom ke kiri dan satu ke kanan */
    align-items: flex-start; /* Memastikan kedua kolom rata atas */
    gap: 40px; /* Memberikan jarak (spasi) antara kolom kiri dan kanan */
    flex-wrap: wrap; /* Memastikan kolom turun ke bawah jika dibuka di layar HP yang sempit */
}

/* Mengatur ukuran masing-masing kolom di dalam footer */
footer#kontak div {
    /* Menghapus flex: 1; dan menggantinya dengan batasan lebar (width) */
    width: 40%; /* Tiap kolom maksimal hanya mengambil 40% lebar layar */
    min-width: 280px; /* Batas aman lebar agar teks tidak terlalu terjepit di layar kecil */
}


/* Mengatur gaya Judul (H4) di footer */
footer#kontak h4 {
    color: white;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid #3b82f6; /* Garis bawah biru sebagai aksen desain */
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
}

/* Mengatur daftar (ul dan li) agar rapi */
footer#kontak ul {
    list-style-type: none; /* Menghilangkan titik (bullet) bawaan dari HTML */
    padding: 0;
    margin: 0;
    line-height: 1.6; /* Merenggangkan jarak antar baris teks agar mudah dibaca */
}

footer#kontak ul li {
    margin-bottom: 12px; /* Jarak antar item kontak */
}

.copyright { 
    text-align: center; 
    padding: 15px; 
    background-color: #111; 
    color: #888; 
    font-size: 12px;
}

/* =========================================
   DESAIN KOTAK RATING (MENGGANTIKAN BULATAN)
   ========================================= */

/* 1. Sembunyikan lingkaran radio bawaan browser */
.rating-container input[type="radio"] {
    display: none;
}

/* 2. Atur baris wadah agar kotak berjajar rata */
.rating-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}

/* 3. Desain Kotak (Label) saat kondisi normal */
.rating-box {
    flex: 1; 
    padding: 12px 0;
    
    /* 3 Baris sakti untuk menengahkan teks mutlak */
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: 1px solid #d1d5db; 
    border-radius: 8px; 
    font-size: 16px;
    color: #374151;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
}

/* 4. Efek saat mouse mengambang di atas kotak (Hover) */
.rating-box:hover {
    border-color: #6366f1; /* Warna garis ungu modern */
    background-color: #f8fafc;
}

/* 5. Efek saat kotak DIPILIH / DIKLIK */
.rating-container input[type="radio"]:checked + .rating-box {
    border-color: #6366f1;
    background-color: #eef2ff; /* Latar belakang ungu pudar */
    color: #4f46e5;
    font-weight: bold;
    box-shadow: 0 0 0 1px #6366f1; /* Memberi efek garis lebih tebal */
}

/* 6. Desain Teks Keterangan (Sangat Tidak Setuju - Sangat Setuju) */
.rating-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
    font-weight: bold;
}

/* === KODE RESPONSIF KHUSUS LAYAR HP (MOBILE) === */
@media screen and (max-width: 768px) {
    /* Menyesuaikan jarak aman layar */
    body { 
        padding: 10px; 
    }
    .form-bingkai, .section, .login-box, .card { 
        padding: 15px; 
        width: 100%; 
        box-sizing: border-box; 
    }
    
    /* Menyesuaikan teks agar proporsional */
    h1, h2, h3 { font-size: 20px !important; }
    p, label { font-size: 14px; }
    
    /* Mencegah input teks menyebabkan auto-zoom di iPhone/Android */
    input[type="text"], input[type="number"], select, textarea { 
        width: 100%; 
        box-sizing: border-box; 
        font-size: 16px; 
    }
    
    /* JURUS SWIPE: Memaksa area kuesioner yang panjang bisa digeser ke samping */
    .area-kuesioner-responsif {
        width: 100%;
        overflow-x: auto; /* Memunculkan scrollbar horizontal jika meluber */
        -webkit-overflow-scrolling: touch; /* Membuat scroll mulus di layar sentuh */
        padding-bottom: 15px;
    }
    
    /* Memastikan tombol mudah disentuh jempol */
    button { 
        padding: 15px; 
        font-size: 16px; 
    }
    
    /* Menjaga proporsi grafik di layar HP */
    .chart-container {
        height: 250px !important; 
    }

    /* === 1. NAVBAR MODE DESKTOP MINI (Menyamping & Rapi) === */
    header, nav, .navbar {
        display: flex !important;
        flex-direction: column !important; /* Menempatkan Logo di tengah atas */
        align-items: center !important;
        padding: 15px 10px !important;
    }
    
    /* Mengembalikan jejeran menu ke mode menyamping */
    nav ul, .menu, .nav-links {
        display: flex !important;
        flex-direction: row !important; /* Kembali ke samping! */
        flex-wrap: wrap !important; /* Jika mentok, turun ke baris baru dengan mulus */
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: 15px !important;
        gap: 15px !important; /* Jarak aman antar menu */
    }
    
    /* Mengecilkan ukuran font agar muat berjejer di layar sempit */
    nav ul li, .nav-links a {
        display: inline-block !important;
        width: auto !important; /* Membatalkan paksaan lebar 100% sebelumnya */
        font-size: 13px !important; /* Ukuran font diperkecil agar elegan */
        margin: 0 !important;
        white-space: nowrap !important; /* Mencegah teks terbelah (misal: "TENTANG" dan "KAMI" terpisah) */
    }
}