/* assets/css/style.css */

/* ====================================================== */
/* TEMA BARU: FRONTEND NEUMORPHISM MODERN */
/* ====================================================== */

.neumorphism-flat {
    background: #e0e5ec; /* Warna dasar yang sedikit lebih gelap */
    border-radius: 20px;
    /* **PERBAIKAN: Bayangan lebih halus dan menyebar** */
    box-shadow: 9px 9px 18px #a3b1c6, -9px -9px 18px #ffffff;
}

.neumorphism-inset {
    background: #e0e5ec;
    border-radius: 20px;
    /* **PERBAIKAN: Bayangan dalam yang lebih halus** */
    box-shadow: inset 7px 7px 14px #a3b1c6, inset -7px -7px 14px #ffffff;
}

.neumorphism-btn {
    background: #e0e5ec;
    border-radius: 12px; /* Sudut lebih tumpul */
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
    transition: all 0.2s ease-in-out;
}

.neumorphism-btn:active, .neumorphism-btn-pressed {
    /* **PERBAIKAN: Efek timbul (emboss) saat ditekan** */
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
    transform: translateY(2px);
}

.neumorphism-btn-red {
    border: none;
    color: white;
    box-shadow: 5px 5px 10px #c4303d, -5px -5px 10px #ff4250;
}

.neumorphism-btn-red:hover {
    box-shadow: 7px 7px 14px #c4303d, -7px -7px 14px #ff4250;
}

.neumorphism-btn-red:active {
    box-shadow: inset 5px 5px 10px #c4303d, inset -5px -5px 10px #ff4250;
}

/* === Tambahan CSS: Emboss Footer & Sosmed Icon === */
footer {
    background: #F0F2F5;
    border-radius: 20px;
    box-shadow: inset 6px 6px 12px #d9dbde,
                inset -6px -6px 12px #ffffff;
    padding: 20px;
    text-align: center;
}

footer a {
    display: inline-block;
    margin: 0 8px;
    font-size: 20px;
    color: #555;
    border-radius: 50%;
    padding: 10px;
    background: #F0F2F5;
    box-shadow: 6px 6px 12px #d9dbde,
                -6px -6px 12px #ffffff;
    transition: all 0.2s ease-in-out;
}

footer a:hover {
    box-shadow: inset 4px 4px 8px #d9dbde,
                inset -4px -4px 8px #ffffff;
    color: #E63946; /* Coral Red saat hover */
}



/* ====================================================== */
/* TEMA ADMIN PANEL GLASSMORPHISM (Tetap dipertahankan) */
/* ====================================================== */
.admin-bg {
    background-color: #1a202c;
    background-image: 
        radial-gradient(at 10% 20%, hsla(212,98%,45%,0.4) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(28,98%,55%,0.3) 0px, transparent 50%),
        radial-gradient(at 80% 90%, hsla(340,96%,66%,0.4) 0px, transparent 50%),
        radial-gradient(at 10% 90%, hsla(242,94%,68%,0.4) 0px, transparent 50%);
    min-height: 100vh;
}

.glassmorphism-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-main-content::-webkit-scrollbar { width: 8px; }
.admin-main-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.admin-main-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
.admin-main-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ====================================================== */
/* KELAS BANTUAN UNTUK ADMIN PANEL */
/* ====================================================== */
.admin-label {
    @apply block text-sm font-medium text-white/80 mb-1;
}

.admin-input {
    @apply w-full p-3 bg-white/10 text-white border border-white/20 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 outline-none transition;
}

.admin-input-file {
    @apply w-full text-sm text-white/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-white/10 file:text-white hover:file:bg-white/20;
}

.admin-btn-primary {
    @apply bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-2 px-4 rounded-lg hover:opacity-90 transition-opacity;
}

.admin-btn-secondary {
    @apply bg-white/10 text-white font-bold py-2 px-4 rounded-lg hover:bg-white/20 transition-colors;
}

.admin-status {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
}
.admin-status.aktif {
    @apply bg-green-500/30 text-green-300;
}
.admin-status.nonaktif {
    @apply bg-red-500/30 text-red-300;
}

.admin-action-edit {
    @apply text-blue-400 hover:text-blue-300 mr-4 font-medium;
}
.admin-action-delete {
    @apply text-red-400 hover:text-red-300 font-medium;
}