:root {
    --biru-tua: #2C405B;
    --cream: #FBFCF7;
    --merah: #802B25;
    --oren: #DB5A2C;
    --hijau: #203704;

    --biru-pastel: #D3E2F2;
    --merah-pastel: #F3D6D2;
    --oren-pastel: #F3E3D2;
    --hijau-pastel: #E5F4D2;

    --biru-light: #c4dbf4;
    --merah-light: #ebbab3;
    --oren-light: #f0d6b9;
    --hijau-light: #F3F3EF;
}

/* .judul {
    font-family: 'Potta One', cursive;
}

.subjudul {
    font-family: 'Preahvihear', sans-serif;
}

.isi {
    font-family: 'Questrial', sans-serif;
} */


/* .grafik-box {
    min-height: 350px;
    background: #fbfcf7;
    border-radius: 15px;
    border: 1px solid #d3e2f2;
} */

body {
    background: #F8F8F8;
    font-family: 'Questrial', sans-serif;
}
.active-question{
    background: #802b25;
    color: white;
}
.gradient-bg {
    height: 100vh;
    width: 100%;
    position: relative;
    background: linear-gradient(
    135deg,
    var(--merah-pastel),
    var(--biru-pastel),
    var(--oren-pastel)
    );
}
.gradient-bg::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--cream), transparent 70%);
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    filter: blur(80px);
}
.login-card {
    width: 420px;
    padding: 45px 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    /* background: rgba(255, 255, 255, 0.18); */
    background-color: #f3f3f3;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 8px 32px rgba(44, 64, 91, 0.15);
}

.login-title {
    text-align: center;
    font-size: 52px;
    font-weight: bold;
    color: var(--merah);
    font-family: Poppins;
    margin-bottom: 40px;
}

.log-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    width: 100%;
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-family: Poppins;
    font-size: 15px;
    font-weight: 600;
    color: var(--merah);
}

.form-group input {
    width: 100%;
    padding: 14px 18px;
    border: none;
    outline: 2px solid var(--biru-tua);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    color: black;
    transition: 0.3s;
}

.form-group input::placeholder {
    color: rgba(44, 64, 91, 0.55);
}

.form-group input:focus {
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 0 4px rgba(44, 64, 91, 0.08);
}

.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: var(--merah);
    color: white;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    transition: 0.3s;
}

.login-btn:hover {
    background: var(--merah);
    transform: translateY(-2px);
}
.sidebar {
    background: #FBFCF7;
    height: 100vh;
    border-radius: 20px;
    padding: 20px;
}
.logo {
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--biru-tua);
    font-family: 'Potta One';
}
.menu {
    list-style: none;
    padding: 0;
    font-family: 'Preahvihear';
}
.menu li{
    margin: 15px 0;
}
.menu li a{
    color: #2C405B;
    cursor: pointer;
    text-decoration: none;
}

.main-content {
    padding: 30px;
}
.circle-group .circle {
    width: 30px;
    height: 30px;
    border: 2px solid #999;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
}

.card-box {
    background: var(--cream);
    padding: 15px;
    border: 1px solid var(--biru-tua);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.stats-grid1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.stats-grid-sec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.stat {
    background: #f9f9f9;
    border: 1px solid var(--oren);
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 0 #bbb;
}
.stat-title {
    font-size: 17px;
    color: #ff6b2c;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    background-color: var(--oren-pastel);
    padding: 4px;
    font-family: Poppins;
}
.stat-value {
    font-size: 16px;
    font-weight: bold;
    padding: 6px;
    font-family: Poppins;
}
/* SUBJECT */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}
.subject {
    border-radius: 10px;
    padding: 14px 0;
    text-align: center;
    font-weight: bold;
    border: 1px solid #9c9c9c;
    box-shadow: 2px 2px 0 #bbb;
    font-size: 25px;
    font-family: Poppins;
}
.mtk { background: #e6caca; color: #8a2d2d;}
.ing { background: #cdd8e8; color: #2c3e70; }
.ind { background: #d7e6cd; color: #2e6b2c; }
.ipa { background: #e6d3c6; color: #cc5a1a; }

a{
    text-decoration: none;
}
/* GRAFIK */
.grafik-btn {
    border: 1px solid var(--hijau);
    background: var(--hijau-pastel);
    border-radius: 10px;
    font-family: Poppins;
    font-size: 15px;
}

.grafik-box {
    height: 225px;
    background: var(--cream);
    border-radius: 10px;
    border: 1px solid var(--biru-tua);
    position: relative;
    font-family: Poppins;
}
/* DOT */
.dot {
    width: 40px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
}
.dot.pink { background: #e5989b; top: 30px; left: 10%; }
.dot.blue { background: #457b9d; top: 90px; left: 34%; }
.dot.green { background: #8ab17d; top: 120px; left: 58%; }
.dot.orange { background: #f4a261; top: 70px; left: 82%; }
/* CALENDAR */
/* .calendar-box {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #ddd;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    gap: 5px;
}
.calendar-grid span {
    padding: 5px;
    text-align: center;
} */

.history-calendar-wrapper {
    width: 400px;
    min-width: 400px;
    max-width: 420px;
    font-family: Preahvihear;
}

.history-calendar-card {
    border: 1px solid var(--biru-tua);
    border-radius: 10px;
    padding: 15px;
    background: var(--cream);
}

#monthTitle {
    text-align: center;
    color: var(--biru-tua);
    margin-bottom: 15px;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.calendar-header span {
    text-align: center;
    border: 1px solid var(--biru-tua);
    border-radius: 4px;
    padding: 1px 0px;
    color: var(--biru-tua);
    font-size: 14px;
    background: var(--oren-pastel);
    font-weight: bold;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.calendar-day {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;

    color: var(--biru-tua);
    font-size: 13px;
    cursor: default;
}

.calendar-day.activity {
    border-radius: 50%;
    background: var(--oren-pastel);
    border: 1px solid var(--oren);
    cursor: pointer;
}

.calendar-day.today {
    border-radius: 50%;
    background: var(--biru-pastel);
    border: 1px solid var(--biru-tua);
}

.calendar-day.activity.selected {
    background: var(--oren);
    color: white;
}

.activity-container {
    width: 380px;
    border: 1px solid var(--biru-tua);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    background: var(--hijau-light);
    font-family: Preahvihear;
}
.recent-activity {
    position: relative;
    width: auto;
    min-height: 250px;
    border: 1px solid var(--biru-tua);
    border-radius: 10px;
    padding: 10px;
    background: var(--cream);
    font-family: Preahvihear;
}
.top-things {
    position: relative;
    width: 100%;
    padding: 10px;
    font-family: Preahvihear;
}
.isi{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
}
.activity-date {
    margin-bottom: 20px;
}

.activity-date h5 {
    color: var(--biru-tua);
    margin-bottom: 5px;
    font-size: 16px;
}

.activity-date ul {
    padding-left: 14px;
    font-size: 13px;
}

.activity-date:not(:last-child) {
    border-bottom: 2px dashed #999;
    padding-bottom: 5px;
}

.task-box1 {
    position: relative;
    background: #FBFCF7;
    border-radius: 10px;
    /* border: 1px solid #2C405B; */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.task-box {
    position: relative;
    background: #FBFCF7;
    border-radius: 8px;
    border: 1px solid #2C405B;
    padding: 14px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.options-box {
    position: relative;
    border-radius: 8px;
    border: 1px solid #2C405B;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* label kiri atas */
.task-label {
    position: absolute;
    top: -14px;
    left: 20px;
    background: var(--oren-pastel);
    border: 1px solid var(--oren);
    border-radius: 8px;
    padding: 4px 18px;
    font-weight: bold;
    font-size: 12px;
    font-family: Poppins;
    color: var(--biru-tua);
    box-shadow: var(--biru-tua);
}
.task-label-admin {
    position: absolute;
    top: -18px;
    left: 20px;
    background: var(--hijau-light);
    border: 1px solid var(--hijau);
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: bold;
    font-size: 16px;
    font-family: Poppins;
    color: var(--hijau);
    box-shadow: var(--hijau);
}
.activity-list{
    padding: 11px 14px;
    margin-top: 15px;
}
/* isi pakai grid */
.task-content {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
}

.task-content1 {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--biru-tua);
}
/* kiri (persen) */
.task-progress {
    padding-left: 30px;
    font-size: 23px;
    font-weight: bold;
    font-family: Poppins;
    color: #2c3e50;
}
.task-options {
    width: 40px;
    height: 40px;
    background:var(--hijau-pastel);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid var(--hijau);
    color: var(--hijau);
    font-family: Poppins;
    border-radius: 50%;
}
.text-options {
    font-size: 15px;
    font-family: Poppins;
    color: #2c3e50;
}
/* tengah */
.task-title {
    font-size: 18px;
    font-family: Poppins;
    font-weight: bold;
    margin-left: 20px;
    /* text-align: center; */
    color: #2c3e50;
}
/* kanan (tombol) */
.task-action {
    width: 34px;
    height: 34px;
    background: #cfe0b8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 2px solid #2d4a0c;
    color: #2d4a0c;
}
.task-footer {
    margin: 0 10px;
    padding: 5px 18px;
    border: 1px solid #2C405B;
    border-top: none;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: Poppins;
    color: #2C405B;
    background: var(--hijau-light);
}
.subject-card {
    border: 1px solid #2C405B;
    border-radius: 8px;
    padding: 8px 12px;
    background: #FBFCF7;
    display: flex;
    align-items: center;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: 0.1s;
    font-family: Poppins;
}

.subject-card:hover {
    transform: scale(1.02);
    cursor: pointer;
}

.check {
    background: #E4F2D2;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
}

.btn-prev {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    background: var(--biru-pastel);
    color: var(--biru-tua);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid var(--biru-tua);
}
.btn-next{
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    background: var(--oren-pastel);
    color: var(--oren);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid var(--oren);
}

.selected-option
{
    /* border: 2px solid #2C405B !important; */
    background: #d3e2f2 !important;
    /* border-radius: 10px !important; */
}
.quest-label{
    background: white !important;
    border: 1px solid var(--biru-tua) !important;
    color: var(--biru-tua) !important;
}
/* .selected-option .option-circle
{
    background: #d3e2f2 !important;
    color: var(--biru-tua) !important;
} */

.active-question
{
    background: var(--biru-tua) !important;
    color: white !important;
}

.answered-question
{
    background: var(--biru-pastel) !important;
    color: var(--biru-tua) !important;

}
.answered-question.active-question
{
    background: var(--biru-tua) !important;
    color: white !important;
}
.correct-option{
    background:#d4edda !important;
    border:1px solid var(--hijau) !important;
}

.wrong-option{
    background:#f8d7da !important;
    border:1px solid var(--merah) !important;
}
.quest-label.answered
{
    background: #D3EFD0;
    border: 1px solid #1E6F2D;
}

.quest-label.current
{
    background: #2C405B;
    color: white;
}
.option-correct
{
    background: var(--hijau-pastel);
    border: 1px solid var(--hijau);
}

.option-wrong
{
    background: var(--merah-pastel);
    border: 1px solid var(--merah);
}
.quest-label.correct
{
    background: var(--hijau-pastel) !important;
    color: var(--hijau) !important;
    border: 1px solid var(--hijau) !important;
    /* background: green !important;
    color: white !important; */
}

.quest-label.wrong
{
    background: var(--merah-pastel) !important;
    color: var(--merah) !important;
    border: 1px solid var(--merah) !important;
    /* background: red !important;
    color: white !important; */
}

.quest-label.current
{
    background: var(--biru-tua) !important;
    color: white !important;
}