:root {
    /* GANTI DISINI: Warna Hijau diganti ke Ungu Modern */
    --warna-utama: #6c5ce7; 
    --warna-utama-gelap: #5649b9;
    
    /* Sisanya tetap sama */
    --warna-latar: #f8f9fa;
    --warna-kartu: #fff;
    --warna-teks-utama: #212529;
    --warna-teks-sekunder: #6c757d;
    --warna-border: #dee2e6;
    --font-judul: 'Poppins', sans-serif;
    --font-konten: 'Inter', sans-serif;
    --radius-kartu: 16px;
    --bayangan-kartu: 0 4px 6px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .08)
}

body {
    font-family: var(--font-konten);
    background-color: var(--warna-latar);
    color: var(--warna-teks-utama);
    margin: 0;
    padding: 2rem
}

.container {
    max-width: 900px;
    margin: 0 auto
}

.page-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem
}

.title-logo {
    height: 80px;
    width: auto
}

.main-title {
    font-family: var(--font-judul);
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    color: var(--warna-teks-utama);
    margin: 0;
    line-height: 1.3
}

.main-title .subtitle {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--warna-teks-sekunder)
}

.info-waktu {
    background: linear-gradient(135deg, var(--warna-utama), var(--warna-utama-gelap));
    color: #fff;
    padding: 1.5rem 2rem;
    border-radius: var(--radius-kartu);
    margin-bottom: 2.5rem;
    /* Update warna bayangan agar sesuai dengan ungu (bukan hijau lagi) */
    box-shadow: 0 10px 20px rgba(108, 92, 231, .2);
    text-align: center
}

#waktu-sekarang {
    font-family: var(--font-judul);
    font-size: 3rem;
    font-weight: 700
}

#tanggal-masehi,
#tanggal-hijriah {
    font-family: var(--font-konten);
    font-size: 1.1rem;
    font-weight: 400;
    opacity: .9;
    line-height: 1.5
}

#guru-display-section {
    margin-bottom: 2.5rem
}

.login-box {
    display: flex;
    gap: 10px;
    margin-top: 1rem
}

.login-box select {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--warna-border);
    border-radius: 8px
}

.login-box button {
    padding: 10px 20px;
    border: none;
    background-color: var(--warna-utama);
    color: #fff;
    border-radius: 8px;
    cursor: pointer
}

.display-box {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.display-box #guru-info {
    line-height: 1.4
}

.display-box button {
    padding: 8px 15px;
    border: 1px solid var(--warna-border);
    background-color: transparent;
    border-radius: 8px;
    cursor: pointer
}

.layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem
}

.card {
    background-color: var(--warna-kartu);
    padding: 2rem;
    border-radius: var(--radius-kartu);
    box-shadow: var(--bayangan-kartu);
    transition: transform .3s ease, box-shadow .3s ease;
    opacity: 0;
    animation: cascadeIn .6s ease-out forwards
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, .06), 0 4px 6px rgba(0, 0, 0, .1)
}

.card h2 {
    font-family: var(--font-judul);
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 0;
    color: var(--warna-utama-gelap);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--warna-border)
}

.seragam-columns {
    display: flex;
    justify-content: space-around;
    gap: 1.5rem
}

.seragam-col {
    flex-basis: 50%;
    text-align: center
}

.seragam-col h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--warna-teks-sekunder)
}

.seragam-col img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f0f0f0;
    border: 1px solid var(--warna-border);
    margin-bottom: 1rem
}

.seragam-col p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--warna-utama-gelap);
    margin: 0
}

.piket-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.piket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--warna-border)
}

.piket-item:last-child {
    border-bottom: none
}

.piket-item .nama {
    font-weight: 500
}

.piket-item .hubungi-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    background-color: var(--warna-utama);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    transition: background-color .2s
}

.piket-item .hubungi-btn:hover {
    background-color: var(--warna-utama-gelap)
}

#info-terbaru article:not(:last-child) {
    border-bottom: 1px solid var(--warna-border);
    padding-bottom: 15px;
    margin-bottom: 15px
}

#info-terbaru h3 {
    font-family: var(--font-judul);
    margin-bottom: 5px
}

#info-terbaru .timestamp {
    font-size: .8rem;
    color: var(--warna-teks-sekunder);
    margin-bottom: .5rem;
    display: block
}

.download-lampiran {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--warna-latar);
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--warna-utama-gelap);
    font-weight: 500;
    border: 1px solid var(--warna-border);
    transition: all .2s ease
}

.download-lampiran:hover {
    background-color: #e9ecef;
    border-color: #ced4da
}

.download-lampiran .fa-file-arrow-down {
    margin-right: 8px
}

#jadwal-pribadi-content ul {
    list-style: none;
    padding: 0;
    margin: 0
}

#jadwal-pribadi-content li {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0
}

#jadwal-pribadi-content li:last-child {
    border-bottom: none
}

.toggle-jadwal-container {
    text-align: center;
    margin-top: 1.5rem
}

#btn-toggle-jadwal {
    background-color: transparent;
    color: var(--warna-utama);
    border: 1px solid var(--warna-utama);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all .2s ease
}

#btn-toggle-jadwal:hover {
    background-color: var(--warna-utama);
    color: #fff
}

#jadwal-mingguan-content {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--warna-border);
    animation: fadeIn .5s ease
}

.hari-jadwal h4 {
    font-family: var(--font-judul);
    font-size: 1.1rem;
    margin: 0 0 .5rem 0
}

.hari-jadwal ul {
    margin-bottom: 1rem
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.calendar-header h3 {
    font-family: var(--font-judul);
    font-size: 1.2rem;
    margin: 0;
    color: var(--warna-teks-utama)
}

.calendar-nav-btn {
    background: none;
    border: 1px solid var(--warna-border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--warna-teks-sekunder);
    transition: all .2s ease
}

.calendar-nav-btn:hover {
    background-color: var(--warna-latar);
    color: var(--warna-teks-utama)
}

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

.day-name {
    font-weight: 600;
    text-align: center;
    font-size: .8rem;
    color: var(--warna-teks-sekunder);
    padding-bottom: .5rem
}

.day-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    position: relative
}

.day-cell-inner {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative
}

.day-cell.today .day-cell-inner {
    font-weight: 700;
    border: 1px solid var(--warna-utama)
}

.dots-container {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px
}

.event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%
}

#penting-list {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--warna-border)
}

#penting-list ul {
    list-style: none;
    padding: 0;
    margin: 0
}

#penting-list li {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 8px;
    border-left-width: 5px;
    border-left-style: solid
}

footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--warna-border)
}

.credits h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-judul);
    font-size: 1.1rem;
    color: var(--warna-utama-gelap);
    margin: 0 0 1.5rem
}

.names-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap
}

.developer-item {
    flex-basis: 280px;
    min-width: 250px
}

.developer-item p {
    color: var(--warna-teks-utama);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 4px 0
}

.developer-item small {
    color: var(--warna-teks-sekunder);
    font-size: .85rem;
    font-style: italic;
    opacity: 0.9
}

.copyright {
    margin-top: 2rem;
    font-size: .85rem;
    color: var(--warna-teks-sekunder);
    opacity: .8
}

.admin-access {
    margin-top: 1.5rem
}

.btn-admin {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--warna-border);
    border-radius: 8px;
    color: var(--warna-teks-sekunder);
    text-decoration: none;
    font-size: .9rem;
    transition: all .2s ease
}

.btn-admin:hover {
    background-color: #e9ecef;
    color: var(--warna-teks-utama);
    border-color: #ced4da
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes cascadeIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media (max-width:768px) {
    html {
        font-size: 13.5px
    }

    body {
        padding: .8rem
    }

    #guru-display-section {
        margin-bottom: 1.5rem
    }

    .page-title-container {
        gap: 1rem
    }

    .title-logo {
        height: 40px
    }

    .main-title {
        font-size: 1.2rem
    }

    .main-title .subtitle {
        font-size: 1rem
    }

    .info-waktu {
        padding: 1.2rem
    }

    #waktu-sekarang {
        font-size: 2.3rem
    }

    #tanggal-masehi,
    #tanggal-hijriah {
        font-size: .9rem
    }

    .layout-grid {
        gap: 1.2rem
    }

    .card {
        padding: 1.2rem
    }

    .card h2 {
        font-size: 1.2rem
    }

    .seragam-col img {
        height: 110px
    }

    footer {
        margin-top: 2rem;
        padding-top: 1.5rem
    }

    .names-list {
        display: block
    }

    .developer-item {
        margin-bottom: 1.2rem
    }

    .developer-item:last-child {
        margin-bottom: 0
    }
}