/* assets/css/style.css */

/* === 1. CORE CLAYMORPHISM (Kartu Timbul) === */
/* Efek 3D Putih Timbul [cite: 203] */
.clay-card {
    background: #FFFFFF;
    border-radius: 24px; /* Sudut sangat bulat */
    /* Dual Shadow: Gelap di kanan-bawah, Terang di kiri-atas */
    box-shadow: 
        12px 12px 24px rgba(163, 177, 198, 0.4), 
        -12px -12px 24px rgba(255, 255, 255, 1.0);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Sedikit border transparan untuk ketajaman */
}

/* === 2. CLAY INPUT (Form Cekung) === */
/* Efek Masuk ke Dalam [cite: 206] */
.clay-input {
    background: #F3F5F7; /* Sedikit lebih gelap dari putih */
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    width: 100%;
    outline: none;
    /* Inner Shadow: Memberikan ilusi lubang/cekungan */
    box-shadow: 
        inset 6px 6px 10px rgba(163, 177, 198, 0.4), 
        inset -6px -6px 10px rgba(255, 255, 255, 0.8);
    color: #4A5568;
    transition: all 0.2s ease;
}

.clay-input:focus {
    /* Saat diketik, cekungan menajam */
    box-shadow: 
        inset 4px 4px 6px rgba(163, 177, 198, 0.5), 
        inset -4px -4px 6px rgba(255, 255, 255, 1.0),
        0 0 0 2px #3B82F6; /* Ring fokus biru */
}

/* === 3. CLAY BUTTON (Tombol Taktil) === */
/* Tombol Tebal yang Memuaskan [cite: 217] */
.clay-btn {
    background: #3B82F6; /* Electric Blue */
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    padding: 12px 24px;
    cursor: pointer;
    /* Shadow timbul tapi berwarna biru */
    box-shadow: 
        8px 8px 16px rgba(59, 130, 246, 0.4), 
        -4px -4px 12px rgba(255, 255, 255, 0.8);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clay-btn:hover {
    transform: translateY(-2px); /* Melayang sedikit saat disentuh [cite: 258] */
    box-shadow: 
        10px 10px 20px rgba(59, 130, 246, 0.5), 
        -4px -4px 12px rgba(255, 255, 255, 0.8);
}

.clay-btn:active {
    transform: translateY(2px) scale(0.98); /* Efek 'Mendelep' saat ditekan [cite: 217] */
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.2), /* Shadow masuk ke dalam */
        inset -4px -4px 8px rgba(255, 255, 255, 0.2);
}

/* Variasi Tombol Secondary (Putih) */
.clay-btn-secondary {
    background: #FFFFFF;
    color: #4A5568;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.3), 
        -6px -6px 12px rgba(255, 255, 255, 1.0);
}
.clay-btn-secondary:active {
    background: #F0F2F5;
    box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.3);
}

/* === 4. ANIMATION (Masuk Memantul) === */
@keyframes slideUpOvershoot {
    0% { transform: translateY(50px); opacity: 0; }
    70% { transform: translateY(-10px); opacity: 1; } /* Overshoot [cite: 257] */
    100% { transform: translateY(0); opacity: 1; }
}

.animate-entrance {
    animation: slideUpOvershoot 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}