/* Tema Neumorphism Orange untuk AffiMers */
:root {
    --bg-color: #f7f0e9; /* Latar belakang soft orange/cream */
    --text-main: #44403c; /* stone-700 */
    --text-secondary: #78716c; /* stone-500 */
    --text-accent: #f97316; /* orange-500 */
    --border-color: #e7e5e4; /* stone-200 */
    --shadow-light: #ffffff;
    --shadow-dark: #d6d3d1; /* stone-300 */
    --primary-color: #f97316; /* orange-500 */
    --glow-color: rgba(249, 115, 22, 0.5);
}

.theme-bg {
    background-color: var(--bg-color);
}
.theme-text-main {
    color: var(--text-main);
}
.theme-text-secondary {
    color: var(--text-secondary);
}
.theme-text-accent {
    color: var(--text-accent);
}
.theme-link {
    color: var(--text-accent);
    font-weight: 600;
}
.theme-border {
    border-color: var(--border-color);
}

.card {
    background: var(--bg-color);
    border-radius: 20px;
    box-shadow: 9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
}

.card-image-container {
    height: 200px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover .card-image {
    transform: scale(1.05);
}

.btn {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
}
.btn-primary:hover {
    background-color: #ea580c; /* orange-600 */
}
.btn-primary:active {
    box-shadow: inset 4px 4px 8px #d97706, inset -4px -4px 8px #fb923c;
}

.btn-secondary {
    background: var(--bg-color);
    color: var(--text-main);
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}
.btn-secondary:hover {
    color: var(--text-accent);
}
.btn-secondary:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 40px;
    color: var(--text-secondary);
    background-color: var(--bg-color);
    border-radius: 8px;
    margin: 0 4px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    transition: all 0.2s ease;
}

.pagination-link:hover {
    color: var(--text-accent);
}

.pagination-link.active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    color: var(--text-accent);
    font-weight: 700;
}

/* Admin Panel Forms */
.form-input {
    width: 100%;
    border: none;
    outline: none;
    background: var(--bg-color);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    color: var(--text-main);
}
.form-input:focus {
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}