/* =====================================================
   SIMKESMEN – Global Stylesheet
   File: public/css/simkesmen.css
   ===================================================== */

:root {
    --blue-deep:   #1a237e;
    --blue-mid:    #283593;
    --blue-bright: #3949ab;
    --green-soft:  #c8f7c5;
    --green-accent:#a8e6a3;
    --yellow:      #ffd600;
    --yellow-btn:  #f9c000;
    --pink:        #e91e8c;
    --pink-dark:   #c2185b;
    --red-btn:     #e53935;
    --green-btn:   #43a047;
    --white:       #ffffff;
    --text-dark:   #1a237e;
    --bg-light:    #eef0ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: var(--bg-light); color: var(--text-dark); }

/* ===== BUTTONS ===== */
.btn-yellow {
    background: var(--yellow-btn); color: var(--blue-deep);
    font-family: 'Poppins', sans-serif; font-weight: 800;
    border: none; border-radius: 999px; cursor: pointer;
    transition: all .2s; letter-spacing: .5px;
    box-shadow: 0 4px 16px rgba(249,192,0,.4);
}
.btn-yellow:hover { background: #ffd740; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,192,0,.5); }

.btn-pink {
    background: var(--pink); color: #fff;
    font-family: 'Poppins', sans-serif; font-weight: 700;
    border: none; border-radius: 999px; cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(233,30,140,.35);
}
.btn-pink:hover { background: var(--pink-dark); transform: translateY(-2px); }

.btn-white {
    background: #fff; color: var(--blue-deep);
    font-family: 'Poppins', sans-serif; font-weight: 700;
    border: none; border-radius: 999px; cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.btn-white:hover { background: #eef0ff; transform: translateY(-2px); }

/* ===== FORM INPUTS ===== */
.form-input {
    width: 100%; background: #fff; border: 2px solid #c5cae9;
    border-radius: 10px; padding: 10px 14px;
    font-family: 'Nunito', sans-serif; font-size: 15px;
    color: var(--blue-deep); outline: none; transition: border .2s;
}
.form-input:focus { border-color: var(--blue-bright); }

/* ===== CARD ===== */
.card-white { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(26,35,126,.1); }

/* ===== SECTION NOTICE ===== */
.section-notice {
    background: var(--pink); color: #fff; border-radius: 10px;
    padding: 8px 18px; font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 13px; display: inline-block; margin-bottom: 8px;
}

/* ===== ANSWER BUTTONS (Quiz) ===== */
.answer-btn {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 13px; padding: 7px 22px; border: none;
    border-radius: 8px; cursor: pointer; transition: all .15s; letter-spacing: .5px;
}
.answer-btn.benar  { background: var(--green-btn); color: #fff; }
.answer-btn.salah  { background: var(--red-btn);   color: #fff; }
.answer-btn.selected-benar { outline: 4px solid #1b5e20; }
.answer-btn.selected-salah { outline: 4px solid #b71c1c; }
.answer-btn:hover  { opacity: .85; transform: scale(1.04); }

/* ===== MULTIPLE CHOICE ===== */
.mc-option {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 2px solid #c5cae9; border-radius: 10px;
    padding: 10px 16px; cursor: pointer; transition: all .15s;
    font-family: 'Nunito', sans-serif; font-weight: 600; color: var(--blue-deep);
}
.mc-option:hover   { border-color: var(--blue-bright); background: #eef0ff; }
.mc-option.selected{ border-color: var(--blue-bright); background: #c5cae9; }

/* ===== ADMIN ===== */
.admin-nav-btn {
    width: 100%; text-align: left; padding: 14px 20px; border: none;
    background: transparent; color: #9fa8da; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
    border-left: 4px solid transparent; transition: .2s;
}
.admin-nav-btn:hover,
.admin-nav-btn.active {
    color: #fff; background: rgba(255,255,255,.1); border-left-color: var(--yellow-btn);
}

.tag-benar { background: #e8f5e9; color: #2e7d32; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.tag-salah { background: #ffebee; color: #c62828; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }

/* ===== TIMER ===== */
.timer-box {
    background: var(--green-soft); border: 3px solid var(--yellow-btn);
    border-radius: 12px; padding: 6px 18px;
    font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: 26px; color: var(--blue-deep); letter-spacing: 2px;
}
.timer-label {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 11px; color: var(--blue-deep); text-align: center;
    letter-spacing: 1.5px; text-transform: uppercase;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp  { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.fade-up { animation: fadeUp .5s ease both; }

@keyframes pulse   { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.pulse { animation: pulse 2s infinite; }

@keyframes flash   { 0%,100% { color: #e53935 } 50% { color: #fff } }
.flash-red { animation: flash .5s infinite; }