/* ==================================================
   Rassure Survey — Final Theme
   Palette:
   Deep Sapphire #253266 | Off White #F8F5F0 | Sand #E2D6C3
   Light Aqua #A8DCD9 | Dusk Blue #6B869F | Satin Gold #E3CA87
   ================================================== */

   /* ==================================================
   LABEL ALASAN (WARNA PUTIH)
   ================================================== */
/* ==================================================
   PAKSA SEMUA TEKS PERTANYAAN JADI PUTIH
   ================================================== */

   /* ==================================================
   PAKSA SEMUA TEKS PERTANYAAN JADI PUTIH
   ================================================== */
.survey-content .q-text {
    color: #ffffff !important; /* Warna putih bersih */
    font-weight: 700 !important; /* Tulisan tebal */
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Jika ada input teks atau textarea (seperti di no 4), 
   pastikan teks di dalamnya tetap biru gelap agar terbaca di kotak putih */
.survey-content .form-control {
    color: #253266 !important;
    font-weight: 500;
}
.survey-content .q-text {
    color: #ffffff !important; /* Warna putih bersih */
    font-weight: 700 !important; /* Tulisan tebal */
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Jika ada input teks atau textarea (seperti di no 4), 
   pastikan teks di dalamnya tetap biru gelap agar terbaca di kotak putih */
.survey-content .form-control {
    color: #253266 !important;
    font-weight: 500;
}

.survey-content .reason-label {
    color: #ffffff !important; /* Memaksa tulisan jadi putih */
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

/* Jika ada teks tebal (bold) di dalam label, beri warna Emas */
.survey-content .reason-label b {
    color: #E3CA87 !important; 
}
:root {
    --deep-sapphire: #253266;
    --deep-sapphire-dark: #1a2450;
    --deep-sapphire-soft: #334080;
    --off-white: #F8F5F0;
    --sand: #E2D6C3;
    --sand-soft: #EFE6D6;
    --light-aqua: #A8DCD9;
    --dusk-blue: #6B869F;
    --satin-gold: #E3CA87;
    --satin-gold-soft: #EBD9A5;

    --text-dark: #1a2340;
    --text-mute: #6B869F;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 10px rgba(37,50,102,0.06);
    --shadow-md: 0 8px 26px rgba(37,50,102,0.10);
    --shadow-lg: 0 18px 48px rgba(37,50,102,0.16);
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    font-family: 'Plus Jakarta Sans','Inter','Segoe UI',sans-serif;
    background: var(--off-white);
    color: var(--text-dark);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Background logo transparan (untuk halaman admin) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/images/logo-murni-teguh.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 44vmin;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ================== CONTAINER ================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.content-wrap { padding-top: 22px; padding-bottom: 50px; }

/* ================== NAVBAR ================== */
.navbar {
    background: var(--deep-sapphire);
    color: #fff;
    box-shadow: 0 2px 18px rgba(37,50,102,0.22);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 3px solid var(--satin-gold);
}
.navbar-inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding-top: 8px !important; padding-bottom: 8px !important;
    min-height: 62px;
}
.brand-wrap {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 6px 18px 6px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(227,202,135,0.28);
    border-radius: 50px;
    transition: all 0.25s ease;
}
.brand-wrap:hover { background: rgba(255,255,255,0.1); border-color: rgba(227,202,135,0.55); }
.brand-logo {
    height: 38px; width: 38px; object-fit: contain;
    border-radius: 50%; background: var(--off-white); padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title {
    font-size: 15.5px; font-weight: 800; letter-spacing: 0.4px; color: #fff;
}
.brand-title .accent {
    color: var(--satin-gold); font-style: italic;
    font-family: 'Playfair Display', serif;
    font-size: 19px; margin-left: 2px;
}
.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-links a {
    color: #fff; text-decoration: none;
    padding: 8px 14px; border-radius: 50px;
    font-size: 13px; font-weight: 600;
    transition: all 0.22s; white-space: nowrap; opacity: 0.9;
}
.nav-links a:hover {
    background: rgba(227,202,135,0.15); color: var(--satin-gold); opacity: 1;
}
.btn-logout {
    background: var(--satin-gold); color: var(--deep-sapphire);
    border: none; padding: 8px 16px; border-radius: 50px;
    font-size: 13px; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: all 0.2s;
}
.btn-logout:hover {
    background: var(--satin-gold-soft); transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(227,202,135,0.35);
}

/* ================== HEADINGS ================== */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.3px; color: var(--text-dark); }
h2 { font-size: 22px; color: var(--deep-sapphire); margin-bottom: 18px; }
h3 { font-size: 17px; }

/* ================== CARD ================== */
.card {
    background: #fff; border-radius: var(--radius); padding: 22px;
    box-shadow: var(--shadow-md); margin-bottom: 18px;
    border: 1px solid rgba(37,50,102,0.05);
    transition: box-shadow 0.25s;
}
.card:hover { box-shadow: var(--shadow-lg); }

/* ================== BUTTONS ================== */
.btn {
    display: inline-block; padding: 11px 24px; border: none;
    border-radius: 50px; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all 0.22s; text-align: center;
    font-family: inherit; letter-spacing: 0.3px;
}
.btn-primary { background: var(--deep-sapphire); color: #fff; }
.btn-primary:hover { background: var(--deep-sapphire-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,50,102,0.3); }
.btn-success { background: var(--light-aqua); color: var(--deep-sapphire); }
.btn-success:hover { background: #8fccc8; transform: translateY(-2px); }
.btn-danger  { background: #BD262E; color: #fff; }
.btn-danger:hover { background: #9d1f26; transform: translateY(-2px); }
.btn-gold { background: var(--satin-gold); color: var(--deep-sapphire); }
.btn-gold:hover { background: var(--satin-gold-soft); transform: translateY(-2px); }
.btn-block { display: block; width: 100%; }

/* ================== FORM ================== */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-weight: 700; margin-bottom: 7px;
    color: var(--deep-sapphire); font-size: 13px;
}
.form-control {
    width: 100%; padding: 12px 16px;
    border: 2px solid #e8e5df; border-radius: var(--radius-sm);
    font-size: 14.5px; font-family: inherit;
    color: var(--text-dark); background: #fdfcfa;
    transition: all 0.2s;
}
.form-control:focus {
    outline: none; border-color: var(--satin-gold);
    background: #fff; box-shadow: 0 0 0 4px rgba(227,202,135,0.12);
}

/* ================== SELECT ================== */
.select-wrap { position: relative; width: 100%; }
.select-wrap::after {
    content: "▾"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); font-size: 18px;
    color: var(--deep-sapphire); pointer-events: none; font-weight: 700;
}
.select-branch {
    width: 100%; padding: 18px 22px;
    border: 2px solid var(--sand); border-radius: var(--radius-sm);
    font-size: 16px; font-family: inherit; font-weight: 600;
    color: var(--deep-sapphire); background: #fff;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    transition: all 0.2s; box-shadow: var(--shadow-sm);
}
.select-branch:hover { border-color: var(--satin-gold); }
.select-branch:focus {
    outline: none; border-color: var(--satin-gold);
    box-shadow: 0 0 0 5px rgba(227,202,135,0.15);
}
.select-branch option { padding: 12px; font-size: 15px; font-weight: 500; color: var(--text-dark); background: #fff; }

/* ================== GRID ================== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ================== STAT CARD ================== */
.stat-card {
    background: var(--deep-sapphire); color: #fff;
    border-radius: var(--radius); padding: 22px 18px;
    text-align: center; box-shadow: var(--shadow-md);
    transition: transform 0.25s, box-shadow 0.25s;
    border-top: 3px solid var(--satin-gold);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ""; position: absolute; top: -40%; right: -20%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(227,202,135,0.15), transparent 70%);
    border-radius: 50%;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-card.green { background: var(--light-aqua); color: var(--deep-sapphire); border-top-color: var(--deep-sapphire); }
.stat-card.green::before { background: radial-gradient(circle, rgba(37,50,102,0.12), transparent 70%); }
.stat-card.gold { background: var(--satin-gold); color: var(--deep-sapphire); border-top-color: var(--deep-sapphire); }
.stat-card.red { background: linear-gradient(135deg, var(--dusk-blue), var(--deep-sapphire)); border-top-color: var(--satin-gold); }
.stat-card h3 { font-size: 30px; margin-bottom: 4px; font-weight: 800; position: relative; }
.stat-card p  { font-size: 12px; opacity: 0.9; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; position: relative; }

/* ================== QUESTION CARD ================== */
.question-card {
    background: #fff; border-radius: 14px;
    padding: 18px 18px 18px 22px; margin-bottom: 14px;
    border-left: 4px solid var(--light-aqua);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}
.question-card:hover { box-shadow: var(--shadow-md); border-left-color: var(--satin-gold); }
.question-card .q-text { font-weight: 700; margin-bottom: 12px; color: var(--deep-sapphire); font-size: 14.5px; }

.option-label {
    display: flex; align-items: center;
    padding: 12px 16px; margin-bottom: 8px;
    background: var(--off-white); border-radius: 12px;
    cursor: pointer; transition: all 0.22s;
    border: 2px solid transparent; font-weight: 500;
}
.option-label:hover { background: var(--sand-soft); border-color: var(--satin-gold); transform: translateX(4px); }
.option-label input { margin-right: 12px; accent-color: var(--deep-sapphire); transform: scale(1.15); }

/* ================== TABLE ================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
th {
    background: var(--deep-sapphire); color: #fff;
    padding: 14px 16px; text-align: left;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
}
td { padding: 14px 16px; border-bottom: 1px solid #eef2f5; font-size: 14px; }
tr:hover td { background: var(--off-white); }
tr:last-child td { border-bottom: none; }

/* ================== BADGE ================== */
.badge { padding: 5px 13px; border-radius: 50px; font-size: 12px; font-weight: 700; display: inline-block; }
.badge-success { background: var(--light-aqua); color: var(--deep-sapphire); }
.badge-danger  { background: #fadadd; color: #9d1f26; }
.badge-gold    { background: var(--satin-gold); color: var(--deep-sapphire); }

/* ================== AUTH ================== */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px; position: relative; overflow: hidden;
    background-image:
        linear-gradient(rgba(107,134,159,0.75), rgba(37,50,102,0.85)),
        url('/images/bg-rassure.jpg');
    background-size: cover; background-position: center;
}
.auth-card {
    position: relative; background: var(--off-white);
    border-radius: 22px; padding: 40px 34px;
    width: 100%; max-width: 420px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    border: 1px solid rgba(227,202,135,0.3);
}
.auth-card h2 { color: var(--deep-sapphire); margin-bottom: 6px; text-align: center; font-size: 22px; }
.auth-card p.subtitle { text-align: center; color: var(--dusk-blue); margin-bottom: 26px; font-size: 13.5px; }

/* ================== HERO ================== */
.hero {
    background-image:
        linear-gradient(rgba(107,134,159,0.65), rgba(37,50,102,0.8)),
        url('/images/bg-rassure.jpg');
    background-size: cover; background-position: center;
    color: #fff; padding: 55px 24px 50px; text-align: center;
    border-radius: 22px; margin-bottom: 26px;
    position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero h1 { font-size: 30px; margin-bottom: 10px; position: relative; color: #fff; font-weight: 800; }
.hero p  { font-size: 15px; opacity: 0.95; position: relative; color: var(--sand); }

/* ================== MENU TABS ================== */
.menu-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.menu-tabs a {
    padding: 10px 20px; background: #fff; color: var(--dusk-blue);
    text-decoration: none; border-radius: 50px;
    font-weight: 700; font-size: 13px;
    box-shadow: var(--shadow-sm); transition: all 0.2s;
    border: 1px solid transparent;
}
.menu-tabs a:hover, .menu-tabs a.active {
    background: var(--deep-sapphire); color: #fff;
    border-color: var(--satin-gold);
    box-shadow: 0 8px 20px rgba(37,50,102,0.25);
}

/* ================== CHART CARD ================== */
.chart-card {
    background: #fff; border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow-md); margin-bottom: 18px;
    border: 1px solid rgba(37,50,102,0.05);
}
.chart-card h3 {
    color: var(--deep-sapphire); margin-bottom: 20px;
    font-size: 16px; display: flex; align-items: center; gap: 8px;
    padding-bottom: 14px; border-bottom: 2px solid var(--sand);
}
.chart-wrap { position: relative; width: 100%; height: 320px; }
.chart-wrap.sm { height: 280px; }
.chart-wrap.lg { height: 380px; }

/* ================== MODAL ================== */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(37,50,102,0.65); backdrop-filter: blur(4px);
    z-index: 999; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-overlay > div { animation: fadeIn 0.22s ease-out; background: var(--off-white) !important; }

/* ================== SWEETALERT ================== */
.swal2-popup {
    border-radius: 18px !important;
    font-family: 'Plus Jakarta Sans','Inter',sans-serif !important;
    background: var(--off-white) !important;
}
.swal2-confirm, .swal2-cancel {
    border-radius: 50px !important; font-weight: 700 !important; padding: 10px 24px !important;
}
.swal2-confirm { background: var(--deep-sapphire) !important; }
.swal2-cancel  { background: var(--dusk-blue) !important; }

/* ==================================================
   WELCOME SCREEN — Kartu di Tengah
   Background: gambar klinik + overlay Dusk Blue transparan
   =============================urvey-page===================== */
/* ==================================================
   WELCOME SCREEN — Background Full Screen
   ================================================== */
/* ==================================================
   BACKGROUND FULL SCREEN UNTUK HALAMAN AWAL (MANUAL)
   ================================================== */
.welcome-screen {
    position: relative !important;
    min-height: 100vh !important; 
    width: 100vw !important;      
    margin: 0 !important;
    padding: 0 !important;
    
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important; 
    background-position: center center !important;
    background-attachment: fixed !important; 
    background-repeat: no-repeat !important;
    
    overflow-x: hidden !important;
}

/* Layer gambar background — FIXED, menutup seluruh viewport */
.welcome-screen::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Ubah dari 0.2 ke 0.45 agar lebih gelap */
    background: rgba(0, 0, 0, 0.45) !important; 
    z-index: 1 !important;
    pointer-events: none !important;
}
/* Layer overlay Dusk Blue transparan — FIXED juga */
/* Overlay Sangat Tipis agar gambar terlihat jelas */
/* ==================================================
   OVERLAY HALAMAN AWAL (DISAMAKAN DENGAN SURVEI)
   ================================================== */
.welcome-screen::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    
    /* Overlay transparan gelap 35% (sama seperti survei) */
    background: rgba(0, 0, 0, 0.35) !important; 
    
    /* Pastikan tidak ada efek blur */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    z-index: 1;
    pointer-events: none;
}
/* Pastikan background gambar menyala */
.welcome-screen, 
/* ==================================================
   BACKGROUND SURVEI (GAMBAR DIPERKECIL)
   ================================================== */
.survey-page {
    position: relative !important;
    min-height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 75px !important; 
    
    /* 1. Tambahkan warna dasar (biru gelap) agar pinggiran gambar tidak putih */
    background-color: #253266 !important; 
    
    /* 2. Masukkan gambar */
    background-image: url('/images/bg-rassure.jpg') !important;
    
    /* 3. UBAH BAGIAN INI: 80% membuat gambar lebih kecil (tidak full layar) */
    background-size: 60% auto !important; 
    
    /* 4. Posisi gambar di tengah */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; 
    
    overflow-x: hidden !important;


}
/* Kartu di atas semua layer */
.welcome-card {
    position: relative;
    z-index: 2;
    background: var(--off-white);
    border-radius: 24px;
    padding: 40px 34px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(227,202,135,0.2);
    text-align: center;
    animation: welcomeIn 0.6s cubic-bezier(0.22,1,0.36,1);
}

@keyframes welcomeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hapus elemen .welcome-overlay kalau masih ada di HTML (tidak dipakai lagi) */
.welcome-overlay { display: none !important; }

/* Overlay Dusk Blue transparan — tidak menutup gambar */
/* ==================================================
   WELCOME SCREEN — Background Full Screen
   ================================================== */
.welcome-screen {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden;
    /* Background TIDAK di sini — biar layer fixed yang handle */
    background: var(--deep-sapphire);
}

/* Layer gambar background — FIXED, menutup seluruh viewport */
.welcome-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/images/bg-rassure.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* Layer overlay Dusk Blue transparan — FIXED juga */
.welcome-screen::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    
    /* Slate Blue #596A88 dengan transparansi 85% (lebih tebal) */
    background: rgba(89, 106, 136, 0.85) !important; 
    
    z-index: 1;
    pointer-events: none;
}
/* Kartu di atas semua layer */
.welcome-card {
    position: relative;
    z-index: 2;
    background: var(--off-white);
    border-radius: 24px;
    padding: 40px 34px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(227,202,135,0.2);
    text-align: center;
    animation: welcomeIn 0.6s cubic-bezier(0.22,1,0.36,1);
}

@keyframes welcomeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hapus elemen .welcome-overlay kalau masih ada di HTML (tidak dipakai lagi) */
.welcome-overlay { display: none !important; }

/* Kartu utama */
.welcome-card {
    position: relative;
    background: var(--off-white);
    border-radius: 24px;
    padding: 40px 34px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(227,202,135,0.2);
    text-align: center;
    z-index: 2;
    animation: welcomeIn 0.6s cubic-bezier(0.22,1,0.36,1);
}
@keyframes welcomeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Judul Selamat Datang — Playfair Display (latin modern) */
.welcome-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 34px;
    color: var(--deep-sapphire);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    line-height: 1.15;
}
.welcome-divider {
    width: 80px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--satin-gold), transparent);
    margin: 0 auto 22px;
}

/* Logo kecil di dalam kartu */
.welcome-logo-wrap {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 18px;
}
.welcome-logo {
    max-width: 130px;
    height: auto;
    width: 100%;
    object-fit: contain;
    background: transparent;
    mix-blend-mode: multiply;
    filter: brightness(1.02) contrast(1.05);
}

/* Sub-judul */
.welcome-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--deep-sapphire);
    margin-bottom: 8px;
    letter-spacing: -0.1px;
}

/* Deskripsi */
.welcome-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: var(--dusk-blue);
    margin-bottom: 22px;
    line-height: 1.55;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

/* Label select */
.welcome-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--deep-sapphire);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

/* Footer kecil */
.welcome-footer {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    color: var(--dusk-blue);
    opacity: 0.7;
    margin-top: 24px;
    letter-spacing: 0.3px;
}

/* Select & button di kartu */
.welcome-card .select-branch {
    background: #fff;
    border: 2px solid var(--sand);
    text-align: left;
}
.welcome-card .select-branch:hover { border-color: var(--satin-gold); }
.welcome-card .select-branch:focus {
    border-color: var(--satin-gold);
    box-shadow: 0 0 0 5px rgba(227,202,135,0.15);
}

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 900px) {
    .navbar-inner { flex-wrap: wrap; padding: 8px 16px !important; }
    .nav-links { width: 100%; justify-content: flex-start; }
    .brand-wrap { padding: 5px 14px 5px 6px; }
    .brand-logo { height: 34px; width: 34px; }
    .brand-title { font-size: 13.5px; }
    .brand-title .accent { font-size: 16px; }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .hero h1 { font-size: 22px; }
    .stat-card h3 { font-size: 24px; }
    .nav-links a { font-size: 12px; padding: 6px 11px; }
    .btn-logout { font-size: 12px; padding: 6px 13px; }
    table { font-size: 12.5px; }
    th, td { padding: 10px 8px; }
    .chart-wrap { height: 260px; }
    .select-branch { padding: 15px 18px; font-size: 15px; }
    body::before { background-size: 75vmin; }
}
@media (max-width: 480px) {
    .welcome-card { padding: 32px 22px 24px; border-radius: 20px; max-width: 100%; }
    .welcome-title { font-size: 28px; }
    .welcome-subtitle { font-size: 18px; }
    .welcome-desc { font-size: 12.5px; }
    .welcome-logo { max-width: 110px; }
    .welcome-screen { padding: 16px 12px; background-attachment: scroll; }
}

/* ==================================================
   USER NAVBAR (Khusus halaman user/form survei)
   ================================================== */
.survey-page {
    min-height: 100vh;
    width: 100%;
    background: var(--off-white);
    position: relative;

}

.user-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 9999;
    background: var(--deep-sapphire);
    border-bottom: 3px solid var(--satin-gold);
    box-shadow: 0 2px 18px rgba(37,50,102,0.25);
    border-radius: 0;
}

.user-navbar-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    box-sizing: border-box;
}
.user-navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.user-navbar-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    background: var(--off-white);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.user-navbar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.user-navbar-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.4px;
}
.user-navbar-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--satin-gold);
    font-size: 18px;
    margin-left: 2px;
}
.user-navbar-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--light-aqua);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 2px;
}
.user-navbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(227,202,135,0.15);
    border: 1px solid rgba(227,202,135,0.4);
    color: var(--satin-gold);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.user-navbar-back:hover {
    background: var(--satin-gold);
    color: var(--deep-sapphire);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(227,202,135,0.3);
}

/* Konten form */
.survey-content {
    max-width: 720px;   /* form tetap di tengah */
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Intro card */
.survey-intro {
    background: linear-gradient(135deg, var(--deep-sapphire) 0%, var(--deep-sapphire-soft) 100%);
    border-radius: 20px;
    padding: 28px 24px;
    margin-bottom: 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(227,202,135,0.2);
    box-shadow: var(--shadow-md);
}
.survey-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/logo-murni-teguh.png');
    background-repeat: no-repeat;
    background-position: right -20px center;
    background-size: 120px;
    opacity: 0.06;
    pointer-events: none;
}
.survey-intro-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    position: relative;
}
.survey-intro-desc {
    font-size: 13.5px;
    color: var(--sand);
    line-height: 1.55;
    position: relative;
    max-width: 520px;
}

@media (max-width: 600px) {
    .user-navbar-inner {
        padding: 8px 16px;   /* lebih kecil di mobile */
        min-height: 56px;
    }
    .user-navbar-logo { height: 34px; width: 34px; }
    .user-navbar-title { font-size: 13.5px; }
    .user-navbar-title em { font-size: 15px; }
    .user-navbar-sub { font-size: 9.5px; letter-spacing: 1px; }
    .user-navbar-back { padding: 6px 14px; font-size: 12px; }
}

/* Beri jarak atas untuk konten form agar tidak tertutup navbar */
.survey-page {
    padding-top: 68px;   /* tinggi navbar (62px) + border (3px) + sedikit ruang */
}

/* Responsive mobile */
@media (max-width: 600px) {
    .user-navbar-inner {
        padding: 10px 16px;
        min-height: 56px;
    }
    .user-navbar-logo {
        height: 34px;
        width: 34px;
    }
    .user-navbar-title { font-size: 13.5px; }
    .user-navbar-title em { font-size: 15px; }
    .user-navbar-sub { font-size: 9.5px; letter-spacing: 1px; }
    .user-navbar-back { padding: 6px 12px; font-size: 12px; }
    .survey-page { padding-top: 62px; }
}

/* ==================================================
   SURVEY PAGE — Background Gambar Full Screen
   ================================================== */
.survey-page {
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding-top: 68px;   /* jarak dari navbar fixed */
    background: var(--deep-sapphire);
    overflow-x: hidden;
}

/* Background gambar full — FIXED */
.survey-page::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Ubah dari 0.2 ke 0.45 agar lebih gelap */
    background: rgba(0, 0, 0, 0.45) !important; 
    z-index: 1 !important;
    pointer-events: none !important;
}

.survey-page::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    
    /* Slate Blue #596A88 dengan transparansi 90% (lebih tebal) */
    background: rgba(89, 106, 136, 0.90) !important; 
    
    z-index: 1;
    pointer-events: none;
}
/* Konten di atas background */
.survey-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Navbar tetap di atas background */
.user-navbar {
    z-index: 9999;
}

/* ==================================================
   CARD STYLE MODERN — Glassmorphism
   ================================================== */
/* ==================================================
   CARD SOAL (DEEP SAPPHIRE - Mengikuti Navbar)
   ================================================== */
.survey-content .question-card {
    background: #253266; /* Deep Sapphire */
    border: 1px solid rgba(227, 202, 135, 0.25); /* Border tipis emas */
    border-left: 4px solid #E3CA87; /* Aksen kiri emas */
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.survey-content .question-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}

/* Teks Soal */
.survey-content .q-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff; /* Teks Putih */
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Nomor Soal */
.survey-content .q-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #E3CA87; /* Emas */
    color: #253266; /* Teks Biru */
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    margin-right: 10px;
    padding: 0 8px;
}
/* Form control di dalam card */
.survey-content .form-control {
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--sand);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14.5px;
}
.survey-content .form-control:focus {
    background: #fff;
    border-color: var(--satin-gold);
    box-shadow: 0 0 0 4px rgba(227,202,135,0.18);
}

/* Option cards (Puas/Tidak Puas) — glass */
.survey-content .option-card {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    border: 2px solid var(--sand);
    padding: 20px 14px;
    border-radius: 14px;
}
.survey-content .option-card:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(37,50,102,0.16);
}
.survey-content .option-card.selected {
    background: #fff;
    box-shadow: 0 12px 30px rgba(37,50,102,0.2);
}

/* Intro card — modern */
.survey-intro {
    background: linear-gradient(135deg, rgba(37,50,102,0.95), rgba(51,64,128,0.92));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(227, 202, 135, 0.3);
    border-radius: 20px;
    padding: 32px 28px;
    margin-bottom: 22px;
    box-shadow: 0 14px 40px rgba(37,50,102,0.3);
    position: relative;
    overflow: hidden;
}
.survey-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/logo-murni-teguh.png');
    background-repeat: no-repeat;
    background-position: right -30px center;
    background-size: 140px;
    opacity: 0.06;
    pointer-events: none;
}
.survey-intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--satin-gold), transparent);
}
.survey-intro-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
    position: relative;
}
.survey-intro-desc {
    font-size: 13.5px;
    color: var(--sand);
    line-height: 1.6;
    position: relative;
    max-width: 540px;
}

/* File upload di dalam card */
.survey-content .file-drop-zone {
    background: rgba(248,245,240,0.7);
    border: 2px dashed var(--dusk-blue);
    border-radius: 14px;
    padding: 24px 18px;
}
.survey-content .file-drop-zone:hover,
.survey-content .file-drop-zone.dragover {
    background: #fff;
    border-color: var(--satin-gold);
}

/* Reason textarea */
.survey-content .reason-wrap {
    background: rgba(248,245,240,0.8);
    border-left: 4px solid var(--satin-gold);
    border-radius: 12px;
    padding: 16px 18px;
}

/* Tombol submit — lebih menonjol */
.survey-content .btn-primary {
    background: linear-gradient(135deg, var(--deep-sapphire), var(--deep-sapphire-soft));
    border: 2px solid var(--satin-gold);
    box-shadow: 0 8px 24px rgba(37,50,102,0.4);
    font-size: 16px;
    padding: 17px !important;
    letter-spacing: 0.5px;
}
.survey-content .btn-primary:hover {
    background: linear-gradient(135deg, var(--deep-sapphire-soft), var(--deep-sapphire));
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37,50,102,0.5);
}

/* Responsive */
@media (max-width: 600px) {
    .survey-page { padding-top: 62px; }
    .survey-content { padding: 16px 12px 50px; }
    .survey-content .question-card { padding: 18px; border-radius: 16px; }
    .survey-intro { padding: 24px 20px; border-radius: 16px; }
    .survey-intro-title { font-size: 22px; }
    .survey-intro-desc { font-size: 12.5px; }
    .survey-content .q-text { font-size: 14px; }
    .survey-content .option-card { padding: 16px 10px; }
    .survey-content .option-emoji { font-size: 28px; }
}

/* ==================================================
   OPTION CARD — EMOTICON BESAR & TANPA BUTTON STYLE
   ================================================== */
.option-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 4px;
}
.option-grid-2 { grid-template-columns: repeat(2, 1fr); }

.option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px;
    background: #fff;
    border: 3px solid var(--sand);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    text-align: center;
    user-select: none;
    overflow: hidden;
}

/* Sembunyikan radio asli */
.option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Emoticon SUPER BESAR */
.option-emoji {
    font-size: 72px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s;
    filter: grayscale(0.5) opacity(0.75);
    display: block;
}

/* Label teks di bawah emoticon */
.option-label-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--deep-sapphire);
    letter-spacing: 0.4px;
    transition: all 0.25s;
}

/* Hover */
.option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(37,50,102,0.16);
}
.option-card:hover .option-emoji {
    transform: scale(1.15);
    filter: grayscale(0) opacity(1);
}
.option-card:hover .option-label-text {
    color: var(--deep-sapphire-dark);
}

/* Warna border saat hover */
.option-puas:hover  { border-color: var(--light-aqua); }
.option-tidak:hover { border-color: var(--satin-gold); }

/* ================ STATE TERPILIH ================ */
.option-card.selected {
    transform: translateY(-6px);
    border-width: 3px;
    box-shadow: 0 20px 50px rgba(37,50,102,0.22);
}
.option-card.selected .option-emoji {
    filter: grayscale(0) opacity(1);
    transform: scale(1.25);
}
.option-card.selected .option-label-text {
    font-size: 17px;
}

/* Background saat terpilih */
.option-puas.selected {
    background: linear-gradient(135deg, #eefbfa 0%, #d7f2ef 100%);
    border-color: var(--light-aqua);
    box-shadow: 0 20px 50px rgba(168,220,217,0.45);
}
.option-puas.selected .option-label-text { color: #2d7d6e; }

.option-tidak.selected {
    background: linear-gradient(135deg, #fdf6e6 0%, #f3e6c6 100%);
    border-color: var(--satin-gold);
    box-shadow: 0 20px 50px rgba(227,202,135,0.5);
}
.option-tidak.selected .option-label-text { color: #8a6f2c; }

/* Efek centang sudut saat terpilih */
.option-card.selected::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: var(--deep-sapphire);
    color: var(--satin-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    animation: popIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 10px rgba(37,50,102,0.3);
}
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ==================================================
   TOMBOL SUBMIT FINAL (Bukan .btn)
   ================================================== */
.btn-submit-final {
    display: block;
    width: 100%;
    padding: 22px 32px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--deep-sapphire) 0%, var(--deep-sapphire-soft) 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 3px solid var(--satin-gold);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 12px 32px rgba(37,50,102,0.4);
    text-align: center;
}
.btn-submit-final:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(37,50,102,0.5);
    background: linear-gradient(135deg, var(--deep-sapphire-soft) 0%, var(--deep-sapphire) 100%);
    border-color: var(--satin-gold-soft);
}
.btn-submit-final:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37,50,102,0.4);
}

/* ==================================================
   RESPONSIVE — Mobile
   ================================================== */
@media (max-width: 600px) {
    .option-grid { gap: 12px; }
    .option-card { padding: 24px 14px; gap: 10px; border-radius: 16px; border-width: 2.5px; }
    .option-emoji { font-size: 56px; }
    .option-label-text { font-size: 14px; }
    .option-card.selected .option-emoji { transform: scale(1.15); }
    .option-card.selected .option-label-text { font-size: 15px; }
    .option-card.selected::after {
        width: 24px;
        height: 24px;
        font-size: 14px;
        top: 10px;
        right: 10px;
    }
    .btn-submit-final { padding: 18px 24px; font-size: 16px; }
}

@media (max-width: 400px) {
    .option-emoji { font-size: 48px; }
    .option-card { padding: 20px 12px; }
    .option-label-text { font-size: 13px; }
}

/* ==================================================
   BACK BUTTON (Pengganti Navbar)
   ================================================== */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border: 2px solid var(--satin-gold);
    color: var(--deep-sapphire);
    padding: 10px 20px;
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(37,50,102,0.15);
    transition: all 0.25s;
}
.back-btn:hover {
    background: var(--satin-gold);
    color: var(--deep-sapphire);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(227,202,135,0.4);
}

/* Branch info di intro */
.survey-intro-branch {
    display: inline-block;
    margin-top: 12px;
    background: rgba(227,202,135,0.15);
    border: 1px solid rgba(227,202,135,0.4);
    color: var(--satin-gold);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: relative;
}

/* Responsive */
@media (max-width: 600px) {
    .back-btn { padding: 8px 16px; font-size: 12.5px; }
    .survey-intro-branch { font-size: 11.5px; padding: 5px 12px; }
}

/* ==================================================
   USER NAVBAR — Layout Full Width (Brand Kiri, Tombol Kanan)
   ================================================== */
.user-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 65px;
    background: #253266; /* Deep Sapphire */
    border-bottom: 3px solid #E3CA87; /* Garis Emas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 9999;
}

.user-navbar-inner {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-logo-only {
    height: 40px; 
    width: auto;
    object-fit: contain;
    display: block;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
}



/* Brand (logo + text) */
.user-navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.user-navbar-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    background: var(--off-white);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.user-navbar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.user-navbar-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-navbar-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--satin-gold);
    font-size: 18px;
    margin-left: 2px;
}
.user-navbar-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--light-aqua);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================================================
   TOMBOL KEMBALI — DI UJUNG KANAN (Dengan Teks)
   ================================================== */
.back-btn-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(227,202,135,0.15); /* Emas transparan */
    border: 2px solid rgba(227,202,135,0.5);
    color: #E3CA87;
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
}

.back-btn-right:hover {
    background: #E3CA87;
    color: #253266;
    border-color: #E3CA87;
    transform: translateX(3px);
}

.survey-page {
    padding-top: 75px;
}

.back-btn-right:active {
    transform: translateX(-1px) scale(0.97);
}

/* Panah di dalam tombol */
.back-arrow {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.25s;
}
.back-btn-right:hover .back-arrow {
    transform: translateX(-3px);
}

/* Teks "Kembali" */
.back-text {
    font-weight: 700;
}

/* ==================================================
   RESPONSIVE MOBILE
   ================================================== */
@media (max-width: 600px) {
    .user-navbar { height: 56px; }
    .user-navbar-inner {
        padding: 8px 14px;
        gap: 10px;      
    }
    .user-navbar-logo { height: 34px; width: 34px; }
    .user-navbar-title { font-size: 13.5px; }
    .user-navbar-title em { font-size: 15px; }
    .user-navbar-sub { font-size: 9.5px; letter-spacing: 1px; }

    .back-btn-right {
        padding: 7px 14px 7px 11px;
        font-size: 12px;
        gap: 6px;
    }
    .back-arrow { font-size: 14px; }
}
/* ==================================================
   FIX: LOGO NAVBAR & TOMBOL KANAN
   ================================================== */
.user-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 62px;
    background: var(--deep-sapphire);
    border-bottom: 3px solid var(--satin-gold);
    box-shadow: 0 2px 18px rgba(37,50,102,0.25);
    z-index: 9999;
}

.user-navbar-inner {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Paksa logo kiri, tombol kanan */
}

/* Style Khusus Logo Rassuré di Kiri */
.navbar-logo-only {
    height: 40px; /* Atur tinggi logo agar pas di navbar */
    width: auto;
    object-fit: contain;
    /* Beri background putih tipis karena logo aslinya biru gelap */
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Style Tombol Kembali di Kanan */
.back-btn-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(227,202,135,0.15);
    border: 2px solid rgba(227,202,135,0.5);
    color: var(--satin-gold);
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    margin-left: auto; /* Pastikan mentok kanan */
}

.back-btn-right:hover {
    background: var(--satin-gold);
    color: var(--deep-sapphire);
    border-color: var(--satin-gold);
    transform: translateX(3px); /* Geser kanan saat hover */
    box-shadow: 0 6px 18px rgba(227,202,135,0.4);
}

.back-arrow {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

/* Jarak konten form dari navbar fixed */
.survey-page {
    padding-top: 68px;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .user-navbar { height: 56px; }
    .user-navbar-inner { padding: 0 14px; }
    .navbar-logo-only { height: 32px; padding: 4px 8px; }
    .back-btn-right { padding: 7px 14px; font-size: 12px; gap: 6px; }
    .back-arrow { font-size: 14px; }
    .survey-page { padding-top: 62px; }
}
/* ==================================================
   NAVBAR WARNA OFF WHITE + LOGO RASSURÉ
   ================================================== */
.user-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 62px;
    background: var(--off-white); /* Warna Off White #F8F5F0 */
    border-bottom: 3px solid var(--satin-gold); /* Garis bawah emas */
    box-shadow: 0 4px 20px rgba(37,50,102,0.1);
    z-index: 9999;
}

.user-navbar-inner {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Rassuré (Tanpa Background Putih Kotak) */
.navbar-logo-only {
    height: 42px; 
    width: auto;
    object-fit: contain;
    /* Tidak perlu background karena navbar sudah terang */
    background: transparent; 
    padding: 0;
    box-shadow: none;
}

/* Tombol Kembali (Disesuaikan dengan Navbar Terang) */
.back-btn-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--deep-sapphire); /* Biru gelap */
    border: 2px solid var(--deep-sapphire);
    color: #fff; /* Teks Putih */
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    margin-left: auto;
}

.back-btn-right:hover {
    background: var(--satin-gold); /* Hover jadi Emas */
    color: var(--deep-sapphire);
    border-color: var(--satin-gold);
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(227,202,135,0.4);
}

.back-arrow {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

/* Jarak konten form dari navbar */
.survey-page {
    padding-top: 68px;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .user-navbar { height: 56px; }
    .user-navbar-inner { padding: 0 14px; }
    .navbar-logo-only { height: 32px; }
    .back-btn-right { padding: 7px 14px; font-size: 12px; gap: 6px; }
    .back-arrow { font-size: 14px; }
    .survey-page { padding-top: 62px; }
}

/* ==================================================
   KOTAK ALASAN (TANPA BACKGROUND PUTIH TRANSPARAN)
   ================================================== */
.survey-content .reason-wrap {
    background: transparent; /* Menghilangkan kotak putih transparan */
    border: none;            /* Memastikan tidak ada garis */
    padding: 0;              /* Merapatkan jarak agar menyatu dengan soal */
    margin-top: 20px;
}

/* ==================================================
   PAKSA SEMUA TEKS PERTANYAAN JADI PUTIH
   ================================================== */
.survey-content .q-text {
    color: #ffffff !important; /* Warna putih bersih */
    font-weight: 700 !important; /* Tulisan tebal */
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Jika ada input teks atau textarea (seperti di no 4), 
   pastikan teks di dalamnya tetap biru gelap agar terbaca di kotak putih */
.survey-content .form-control {
    color: #253266 !important;
    font-weight: 500;
}

/* ==================================================
   FIX: KOTAK UPLOAD BISA DIKLIK
   ================================================== */
.upload-custom-box {
    background: #ffffff !important; 
    border: 1px dashed #a0aab8 !important; 
    border-radius: 4px; 
    padding: 40px 20px;
    text-align: center;
    cursor: pointer; /* Kursor berubah jadi tangan */
    transition: all 0.2s ease;
    margin-bottom: 16px;
    display: block; /* Memastikan kotak memenuhi area */
}

.upload-custom-box:hover,
.upload-custom-box.dragover {
    background: #f9f9f9 !important;
    border-color: #6B869F !important;
}

.upload-content {
    /* HAPUS pointer-events: none; agar bisa diklik */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Pastikan menerima klik */
}

.upload-text-main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #666666; 
    margin-bottom: 4px;
}

.upload-link {
    color: #2b3b63; 
    text-decoration: underline;
    font-weight: 500;
}

.upload-text-sub {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #a0aab8; 
}

/* Styling untuk list preview file */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* ==================================================
   BACKGROUND FULL SCREEN UNTUK HALAMAN SURVEI (MANUAL)
   ================================================== */
.survey-page {
    position: relative !important;
    min-height: 100vh !important; 
    width: 100vw !important;      
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 75px !important; /* Jarak agar tidak tertutup navbar */
    
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important; 
    background-position: center center !important;
    background-attachment: fixed !important; 
    background-repeat: no-repeat !important;
    
    overflow-x: hidden !important;
}

/* ==================================================
   FIX MUTLAK: PAKSA BACKGROUND GAMBAR FULL LAYAR
   (Hanya mengatur gambar, tidak menyentuh desain lain)
   ================================================== */
/* ==================================================
   1. BACKGROUND FULL LAYAR (HALAMAN AWAL & SURVEI)
   ================================================== */
.welcome-screen, .survey-page {
    position: relative !important;
    min-height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    
    /* ⬇️ UBAH ANGKA INI UNTUK MENGGESER GAMBAR LEBIH KE BAWAH ⬇️ */
    /* 80% = agak ke bawah, 95% = hampir paling bawah, bottom = mentok bawah */
    background-position: center buttom !important; 
    
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
}

/* Jarak aman untuk form survei karena ada Navbar */
.survey-page {
    padding-top: 75px !important; 
}

/* Pastikan HTML dan Body tidak ada margin yang bikin celah */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* ==================================================
   PATCH FINAL: HILANGKAN CELAH KIRI-KANAN (FULL 100%)
   ================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Paksa Pembungkus Utama Mentok Kiri-Kanan */
.welcome-screen, 
.survey-page {
    width: 100vw !important; /* 100% lebar viewport */
    max-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important; /* Hapus padding yang bikin celah */
    left: 0 !important;
    right: 0 !important;
    
    /* Paksa Background Full */
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Khusus form survei, beri jarak aman dari navbar atas */
.survey-page {
    padding-top: 75px !important; 
}

/* ==================================================
   PASTIKAN OVERLAY (WARNA GELAP) TETAP MENTOK KIRI-KANAN
   ================================================== */
.welcome-screen::before, 
.welcome-screen::after,
.survey-page::before, 
.survey-page::after {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* ==================================================
   FIX TOTAL: BACKGROUND FULL LAYAR (KIRI, KANAN, ATAS, BAWAH)
   ================================================== */

/* 1. Paksa HTML dan Body Menutupi Seluruh Layar */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 2. Paksa Pembungkus Konten (Container) Menjadi 100% */
/* Ini kunci untuk menghilangkan celah putih di pinggir */
.container, 
.content-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Paksa Background Memenuhi Layar */
.welcome-screen, 
.survey-page {
    position: relative !important;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Gambar Background */
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    background-position: center 20% !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    
    /* Menghilangkan sudut melengkung jika ada */
    border-radius: 0 !important;
}

/* 4. Jarak aman untuk Halaman Survei (Karena ada Navbar Fixed) */
.survey-page {
    padding-top: 75px !important; 
}

/* 5. Pastikan Overlay (Warna Gelap) Juga Full Layar */
.welcome-screen::before, 
.welcome-screen::after,
.survey-page::before, 
.survey-page::after {
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ==================================================
   DASHBOARD MODERN (GLASSMORPHISM & INTERAKTIF)
   ================================================== */

/* Container Utama Dashboard */
.dashboard-wrapper {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
    background: #f4f7f9;
    min-height: 100vh;
}

/* Header Dashboard */
.dash-header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 15px;
}
.dash-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #253266;
    margin: 0;
}
.dash-subtitle {
    color: #6B869F;
    font-size: 14px;
    margin-top: 5px;
}

/* Grid untuk Card Statistik */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Card Statistik Modern */
.stat-card-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(37, 50, 102, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(37, 50, 102, 0.05);
    display: flex;
    flex-direction: column;
}
.stat-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(37, 50, 102, 0.1);
}
.stat-card-modern .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 24px;
}
.stat-card-modern .icon-box.blue { background: rgba(37, 50, 102, 0.1); color: #253266; }
.stat-card-modern .icon-box.gold { background: rgba(227, 202, 135, 0.2); color: #b8962e; }
.stat-card-modern .icon-box.aqua { background: rgba(168, 220, 217, 0.3); color: #2d7d6e; }
.stat-card-modern .icon-box.red  { background: rgba(189, 38, 46, 0.1); color: #BD262E; }

.stat-card-modern h3 {
    font-size: 32px;
    font-weight: 800;
    color: #253266;
    margin: 0 0 5px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.stat-card-modern p {
    font-size: 13px;
    font-weight: 600;
    color: #6B869F;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Chart */
.chart-card-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(37, 50, 102, 0.05);
    margin-bottom: 30px;
    border: 1px solid rgba(37, 50, 102, 0.05);
}
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef2f5;
}
.chart-header h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #253266;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table Modern */
.table-modern-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(37, 50, 102, 0.05);
    overflow-x: auto;
}
.table-modern {
    width: 100%;
    border-collapse: collapse;
}
.table-modern th {
    background: #f8fafb;
    color: #6B869F;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px;
    text-align: left;
    border-bottom: 2px solid #eef2f5;
}
.table-modern td {
    padding: 16px;
    border-bottom: 1px solid #eef2f5;
    color: #253266;
    font-size: 14px;
    font-weight: 500;
}
.table-modern tr:hover td {
    background: #fcfdfd;
}

/* Badge Modern */
.badge-modern {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}
.badge-modern.success { background: #d4f1ec; color: #2d7d6e; }
.badge-modern.warning { background: #fdf6e6; color: #b8962e; }
.badge-modern.danger  { background: #fadadd; color: #9d1f26; }

/* ==================================================
   FIX: KARENA NAVBAR SUDAH DIHAPUS
   ================================================== */
.survey-page {
    padding-top: 0 !important; /* Hapus jarak atas */
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    background-position: center 90% !important; /* Posisi gambar */
    background-attachment: fixed !important;
}

/* Memberi jarak aman di dalam konten, bukan di luar */
.survey-content {
    padding-top: 40px !important;
}

/* ==================================================
   NAVBAR PUTIH DENGAN LOGO RASSURÉ
   ================================================== */
.user-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 65px;
    background: #F8F5F0; /* Warna Putih Gading */
    border-bottom: 3px solid #E3CA87; /* Garis Emas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 9999;
}

.user-navbar-inner {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Rassuré */
.navbar-logo-only {
    height: 40px; 
    width: auto;
    object-fit: contain;
}

/* Tombol Login/Kembali di Kanan */
.back-btn-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #253266; /* Deep Sapphire */
    color: #ffffff;
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
}

.back-btn-right:hover {
    background: #E3CA87; /* Emas */
    color: #253266;
    transform: translateX(3px);
}

.back-arrow {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

/* ==================================================
   PATCH: MENGGESER BACKGROUND LEBIH KE ATAS
   (Tidak menyentuh kartu, tombol, atau form)
   ================================================== */

/* 1. Halaman Awal (http://127.0.0.1:8000/) */
.welcome-screen {
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    /* ⬇️ ANGKA 10% MEMBUAT GAMBAR LEBIH NAIK KE ATAS ⬇️ */
    background-position: center 10% !important; 
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* 2. Halaman Survei (http://127.0.0.1:8000/survey/1) */
.survey-page {
    background-image: url('/images/bg-rassure.jpg') !important;
    background-size: cover !important;
    /* ⬇️ ANGKA 10% MEMBUAT GAMBAR LEBIH NAIK KE ATAS ⬇️ */
    background-position: center 10% !important; 
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* ==================================================
   PATCH: NAVBAR DEEP SAPPHIRE (HALAMAN SURVEI)
   ================================================== */
.user-navbar {
    background: #253266 !important; /* Warna Deep Sapphire */
    border-bottom: 3px solid #E3CA87 !important; /* Garis bawah emas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Memastikan tombol kembali tetap terlihat kontras di atas warna gelap */
.back-btn-right {
    background: rgba(227, 202, 135, 0.15) !important;
    border: 2px solid rgba(227, 202, 135, 0.5) !important;
    color: #E3CA87 !important;
}

.back-btn-right:hover {
    background: #E3CA87 !important;
    color: #253266 !important;
}