/* ==========================================================================
   EXCLUSIVE CLAYMORPHISM & GLASSMORPHISM THEME - TRACER STUDY
   Skema Warna: Premium Sky Blue, Cloudy White, & Soft Glass-Blur
   ========================================================================== */

:root {
    /* Latar Belakang Utama (Sesuai Gradasi Biru Langit di Gambar) */
    --bg-main-gradient: linear-gradient(180deg, #b9daf9 0%, #eef6fe 50%, #ffffff 100%);
    
    /* Warna Claymorphism */
    --clay-white: #ffffff;
    --clay-blue-button: #3fa1fc;
    --clay-blue-hover: #1e87ec;
    --clay-input-bg: #f2f7fc;
    
    /* Warna Glassmorphism (Aksen Kaca Transparan Lembut) */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.6);
    
    /* Tipografi & Warna Teks */
    --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --teks-judul: #2b3a4a;
    --teks-body: #495a6c;
    --teks-muted: #7d8da1;
}

/* 1. Pengaturan Dasar & Background */
body {
    background: var(--bg-main-gradient);
    background-attachment: fixed;
    color: var(--teks-body);
    font-family: var(--font-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-heading);
    color: var(--teks-judul);
    font-weight: 600;
}

/* 2. Top Hero Section */
.hero-section { 
    background: var(--clay-white); 
    padding: 50px 0; 
    border-radius: 0 0 40px 40px; 
    box-shadow: 
        0 15px 30px rgba(63, 161, 252, 0.04),
        inset -6px -6px 12px rgba(0, 0, 0, 0.01),
        inset 6px 6px 12px rgba(255, 255, 255, 0.9);
}
.hero-section h2 { color: #1c529c; }

/* 3. Kartu Claymorphism (Efek 3D Gembung) */
.card-clay, .card-custom {
    background: var(--clay-white) !important;
    border-radius: 32px !important;
    border: none !important;
    padding: 1.75rem;
    box-shadow: 
        0 30px 60px rgba(32, 110, 200, 0.06),
        inset -12px -12px 24px rgba(0, 0, 0, 0.02),
        inset 12px 12px 24px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.card-clay:hover, .card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 40px 70px rgba(32, 110, 200, 0.12),
        inset -6px -6px 12px rgba(0, 0, 0, 0.01),
        inset 6px 6px 12px rgba(255, 255, 255, 0.9) !important;
}

/* 4. Aksen Glassmorphism (List Statistik Kaca) */
.list-clay-item {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 22px !important;
    margin-bottom: 14px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.01),
        inset -4px -4px 8px rgba(0, 0, 0, 0.015),
        inset 4px 4px 8px rgba(255, 255, 255, 0.6) !important;
}

/* 5. Input Field / Form Control */
.form-control, .form-select {
    background: var(--clay-input-bg) !important;
    border: 2px solid transparent !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    color: var(--teks-body) !important;
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.03),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background: var(--clay-white) !important;
    border-color: var(--clay-blue-button) !important;
    box-shadow: 
        0 0 0 4px rgba(63, 161, 252, 0.15),
        inset 2px 2px 4px rgba(0, 0, 0, 0.01) !important;
    outline: none;
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--teks-body);
    margin-bottom: 0.5rem;
}

/* 6. Tombol Utama Claymorphism */
.btn-clay-blue, .btn-success {
    background: var(--clay-blue-button) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 14px !important;
    font-weight: 600 !important;
    width: 100%;
    box-shadow: 
        0 12px 26px rgba(63, 161, 252, 0.3),
        inset -5px -5px 10px rgba(0, 0, 0, 0.15),
        inset 5px 5px 10px rgba(255, 255, 255, 0.35) !important;
    transition: all 0.2s ease;
}

.btn-clay-blue:hover, .btn-success:hover {
    background: var(--clay-blue-hover) !important;
    transform: scale(0.97) translateY(1px);
    box-shadow: 
        0 8px 16px rgba(63, 161, 252, 0.2),
        inset -3px -3px 6px rgba(0, 0, 0, 0.2),
        inset 3px 3px 6px rgba(255, 255, 255, 0.3) !important;
}

/* 7. Badge Statistik */
.badge-clay {
    padding: 8px 16px;
    border-radius: 14px;
    font-weight: 700;
    border: none;
    box-shadow: 
        inset -3px -3px 6px rgba(0,0,0,0.08), 
        inset 3px 3px 6px rgba(255,255,255,0.2);
}

.bg-glass-blue   { background-color: #3fa1fc !important; color: #ffffff !important; }
.bg-glass-green  { background-color: #4cd137 !important; color: #ffffff !important; }
.bg-glass-yellow { background-color: #ffaf40 !important; color: #ffffff !important; }
.bg-glass-cyan   { background-color: #18dcff !important; color: #ffffff !important; }

/* 8. Autocomplete Dropdown Box */
.wrapper-saran { position: relative; }
.box-saran { 
    position: absolute; 
    top: 105%; 
    left: 0; 
    right: 0; 
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 20px; 
    max-height: 200px; 
    overflow-y: auto; 
    z-index: 1000; 
    box-shadow: 0 15px 35px rgba(32, 110, 200, 0.1);
    padding: 8px;
}

.item-saran { 
    padding: 12px 16px; 
    cursor: pointer; 
    font-size: 0.9rem; 
    border-radius: 12px;
}

.item-saran:hover { 
    background-color: #e6f3ff; 
    color: var(--clay-blue-button);
    font-weight: 500;
}

/* 9. Area Isian Dinamis Kuesioner (Sisi Dalam Form) */
.form-section {
    display: none;
    animation: fadeIn 0.4s ease-in-out forwards;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    border-left: 4px solid var(--clay-blue-button);
    padding: 20px;
    border-radius: 0 20px 20px 0;
    margin-top: 15px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer Efek Bersih Semu */
footer {
    background: transparent;
    color: var(--teks-muted);
    border-top: 1px solid rgba(0,0,0,0.03);
}

/* Bootstrap grid adjustments */
.container { max-width: 1080px; }
.row.g-4 { padding-left: 15px; padding-right: 15px; }