/* ==========================================================
   KALDIK
   RTQ AL IMAM ADZ DZAHABIY
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.kaldik-hero {

    position: relative;

    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.72),
            rgba(0,0,0,.45),
            rgba(0,0,0,.30)
        ),
        url("../images/hero.jpg")
        center / cover no-repeat;

}


.kaldik-hero-content {

    position: relative;

    z-index: 2;

    color: #fff;

    padding: 40px 20px;

}


.kaldik-hero-label {

    display: inline-block;

    margin-bottom: 12px;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 3px;

    color: #d8b45a;

}


.kaldik-hero h1 {

    margin: 0;

    font-size: clamp(
        2rem,
        5vw,
        3.5rem
    );

    font-weight: 800;

}


.kaldik-hero p {

    margin: 12px 0 0;

    font-size: 1.1rem;

    opacity: .9;

}



/* ==========================================================
   PAGE
========================================================== */

.kaldik-page {

    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding: 80px 0 100px;

}



/* ==========================================================
   INTRO
========================================================== */

.kaldik-intro {

    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;

}


.kaldik-intro .section-label,
.kaldik-information .section-label,
.kaldik-note .section-label {

    display: inline-block;

    margin-bottom: 10px;

    color: #16804d;

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.kaldik-intro h2 {

    margin: 0 0 12px;

    color: #164b35;

    font-size: clamp(
        1.8rem,
        4vw,
        2.5rem
    );

}


.kaldik-intro p {

    margin: 0;

    color: #666;

    line-height: 1.8;

}



/* ==========================================================
   MAIN CALENDAR CARD
========================================================== */

.kaldik-main-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.08);

    border: 1px solid #e8eee9;

}



/* ==========================================================
   HEADER
========================================================== */

.kaldik-main-header {

    display: grid;

    grid-template-columns: 55px 1fr 55px;

    align-items: center;

    gap: 15px;

    padding: 25px 30px;

    background:
        linear-gradient(
            135deg,
            #145c3b,
            #0c442c
        );

    color: #fff;

}


.kaldik-main-title {

    text-align: center;

}


.kaldik-main-title h2 {

    margin: 0;

    font-size: 1.8rem;

    font-weight: 800;

}


.kaldik-main-title span {

    display: block;

    margin-top: 4px;

    color: #d9c27a;

    font-size: .95rem;

    font-weight: 600;

}


.kaldik-main-nav {

    width: 44px;

    height: 44px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: #fff;

    font-size: 1.1rem;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.kaldik-main-nav:hover {

    background: rgba(255,255,255,.18);

    transform: scale(1.05);

}



/* ==========================================================
   GREGORIAN RANGE
========================================================== */

.kaldik-gregorian-range {

    padding: 14px 20px;

    text-align: center;

    color: #393d3bcb;

    font-size: .9rem;

    background: #f7faf8;

    border-bottom: 1px solid #e8eee9;

}



/* ==========================================================
   WEEKDAYS
========================================================== */

.kaldik-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    background: #f1f5f2;

    border-bottom: 1px solid #e2e9e4;

}


.kaldik-weekdays div {

    padding: 15px 5px;

    text-align: center;

    color: #426052;

    font-size: .82rem;

    font-weight: 700;

}


.kaldik-weekdays div:first-child,
.kaldik-weekdays div:last-child {

    color: #a34b4b;

}



/* ==========================================================
   DAYS
========================================================== */

.kaldik-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    padding: 12px;

    gap: 6px;

}


/* ==========================================================
   LAYOUT TANGGAL + KEGIATAN
========================================================== */

.kaldik-day {

    min-height: 70px;

    padding: 10px;

    border-right:
        1px solid #e5ebe8;

    border-bottom:
        1px solid #e5ebe8;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    cursor: default;

    transition:
        background .2s ease;

}


.kaldik-day:hover {

    transform: translateY(-2px);

    border-color: #b8d4c3;

    box-shadow:
        0 5px 14px rgba(0,0,0,.07);

}


.kaldik-day.empty {

    background: #fafbfa;

    cursor: default;

    border-color: transparent;

}


.kaldik-day.empty:hover {

    transform: none;

    box-shadow: none;

}


.kaldik-day-number {

    font-size: 1rem;

    font-weight: 800;

    color: #254b38;

}


.kaldik-day-gregorian {

    margin-top: 3px;

    color: #8a958e;

    font-size: .7rem;

}


.kaldik-day-event {

    margin-top: 7px;

    font-size: .68rem;

    line-height: 1.25;

    font-weight: 700;

}


.kaldik-day.selected {

    outline: 2px solid #16804d;

    outline-offset: -2px;

}


.kaldik-day.today {

    box-shadow:
        inset 0 0 0 2px #d8b45a;

}



/* ==========================================================
   EVENT DETAIL
========================================================== */

.kaldik-event-detail {

    padding: 25px 30px;

    border-top: 1px solid #e8eee9;

    background: #fbfcfb;

}


.kaldik-event-empty {

    text-align: center;

    color: #7b857f;

    font-size: .9rem;

    padding: 15px;

}


.kaldik-event-date {

    margin-bottom: 15px;

}


.kaldik-event-date strong {

    display: block;

    color: #164b35;

    font-size: 1.1rem;

}


.kaldik-event-date span {

    color: #7a857e;

    font-size: .85rem;

}


.kaldik-event-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.kaldik-event {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 15px;

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 10px;

}


.kaldik-event-color {

    flex: 0 0 9px;

    width: 9px;

    height: 35px;

    border-radius: 5px;

}


.kaldik-event-name {

    color: #30473b;

    font-weight: 700;

}


.kaldik-event-type {

    margin-top: 3px;

    color: #89928d;

    font-size: .75rem;

}



/* ==========================================================
   LEGEND
========================================================== */

.kaldik-information {

    margin-top: 70px;

}


.kaldik-information-header {

    margin-bottom: 25px;

}


.kaldik-information-header h2 {

    margin: 0 0 10px;

    color: #164b35;

}


.kaldik-information-header p {

    margin: 0;

    color: #707a74;

    line-height: 1.7;

}


.kaldik-legend-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

}


.kaldik-legend-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    border: 1px solid #e5ebe7;

    border-radius: 10px;

    background: #fff;

    color: #43534a;

    font-size: .88rem;

}


.kaldik-color {

    width: 14px;

    height: 14px;

    flex: 0 0 14px;

    border-radius: 50%;

}



/* ==========================================================
   WARNA KALDIK
========================================================== */

.kaldik-color.administrasi {
    background: #607d8b;
}

.kaldik-color.kbm {
    background: #16804d;
}

.kaldik-color.uhab {
    background: #2196f3;
}

.kaldik-color.ujian {
    background: #9c27b0;
}

.kaldik-color.libur {
    background: #e53935;
}

.kaldik-color.dauroh {
    background: #f59e0b;
}

.kaldik-color.classmeeting {
    background: #795548;
}

.kaldik-color.rapot {
    background: #607d8b;
}

.kaldik-color.musabaqoh {
    background: #00897b;
}

.kaldik-color.pendaftaran {
    background: #c0a04b;
}



/* ==========================================================
   NOTE
========================================================== */

.kaldik-note {

    margin-top: 50px;

    padding: 28px 30px;

    border-left: 4px solid #d8b45a;

    border-radius: 0 12px 12px 0;

    background: #f7f5ed;

}


.kaldik-note h3 {

    margin: 0 0 8px;

    color: #164b35;

}


.kaldik-note p {

    margin: 7px 0;

    color: #68736c;

    line-height: 1.7;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .kaldik-page {

        width:
            min(
                100% - 20px,
                680px
            );

        padding:
            55px 0 70px;

    }


    .kaldik-hero {

        min-height: 280px;

    }


    .kaldik-main-header {

        grid-template-columns:
            45px 1fr 45px;

        padding:
            20px 15px;

    }


    .kaldik-main-nav {

        width: 38px;

        height: 38px;

    }


    .kaldik-main-title h2 {

        font-size: 1.4rem;

    }


    .kaldik-weekdays div {

        font-size: .7rem;

        padding: 11px 2px;

    }


    .kaldik-days {

        padding: 7px;

        gap: 4px;

    }


    .kaldik-day {

        min-height: 65px;

        padding: 6px;

    }


    .kaldik-day-number {

        font-size: .85rem;

    }


    .kaldik-day-gregorian {

        font-size: .6rem;

    }


    .kaldik-day-event {

        display: none;

    }


    .kaldik-legend-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .kaldik-event-detail {

        padding: 20px 15px;

    }

}


@media (max-width: 480px) {

    .kaldik-hero-content {

        padding:
            30px 15px;

    }


    .kaldik-hero h1 {

        font-size: 2rem;

    }


    .kaldik-hero p {

        font-size: .9rem;

    }


    .kaldik-legend-grid {

        grid-template-columns: 1fr;

    }


    .kaldik-day {

        min-height: 55px;

    }

}
/* ==========================================================
   KALDIK DATE GRID
========================================================== */

.kaldik-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    min-height: 260px;

}


.kaldik-day {

    min-height: 70px;

    padding: 14px;

    border-right:
        1px solid #e5ebe8;

    border-bottom:
        1px solid #e5ebe8;

    background: #ffffff;

    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    cursor: default;

    transition:
        background .2s ease;

}


.kaldik-day:hover {

    background:
        #f5faf7;

}


.kaldik-day-empty {

    background:
        #fafcfb;

    cursor: default;

}


.kaldik-day-hijri {

    font-size: 16px;

    font-weight: 600;

    color:
        #174f3b;

}


.kaldik-main-nav:disabled {

    opacity: .35;

    cursor: not-allowed;

}
/* ==========================================================
   LAYOUT TANGGAL + KEGIATAN
========================================================== */

.kaldik-day {

    min-height: 70px;

    padding: 10px;

    border-right:
        1px solid #e5ebe8;

    border-bottom:
        1px solid #e5ebe8;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    cursor: default;

    transition:
        background .2s ease;

}


/* ==========================================================
   TANGGAL HIJRIAH + MASEHI
========================================================== */

.kaldik-date {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

}


/* ----------------------------------------------------------
   TANGGAL HIJRIAH
---------------------------------------------------------- */

.kaldik-day-hijri {

    font-size: 18px;

    font-weight: 700;

    line-height: 1.1;

    color: #174f3b;

}


/* ==========================================================
   TANGGAL MASEHI
========================================================== */

.kaldik-day-gregorian {

    display: block;

    margin-top: 4px;

    font-size: .68rem;

    font-weight: 500;

    line-height: 1;

    color: #7f8b86;

}


/* ==========================================================
   KETERANGAN KEGIATAN
========================================================== */

.kaldik-day-event {

    display: block;

    margin-top: 8px;

    padding: 4px 5px;

    border-radius: 5px;

    font-size: .68rem;

    line-height: 1.25;

    font-weight: 700;

    text-align: left;

}
/* ==========================================================
   MOBILE FIX
   Mencegah kalender melebar keluar layar
========================================================== */

.kaldik-days {

    width: 100%;

    min-width: 0;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    box-sizing: border-box;

}


.kaldik-day {

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;

}


.kaldik-day-hijri {

    min-width: 0;

}


.kaldik-day-event {

    min-width: 0;

    max-width: 100%;

    overflow-wrap: anywhere;

    word-break: normal;

}


@media (max-width: 480px) {

    .kaldik-days {

        padding: 5px;

        gap: 3px;

    }


    .kaldik-day {

        min-height: 60px;

        padding: 7px 5px;

        border-radius: 7px;

    }


    .kaldik-day-hijri {

        font-size: 14px;

    }


    .kaldik-day-gregorian {

        margin-top: 3px;

        font-size: .58rem;

    }


    .kaldik-day-event {

        margin-top: 6px;

        font-size: .58rem;

        line-height: 1.2;

    }

}



/* ==========================================================
   KALENDER HARI INI DI HERO
========================================================== */

.home-date {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    transform: translateX(200px);

}


/* ==========================================================
   KERTAS KALENDER
========================================================== */

.home-date-card {

    width: 155px;

    min-height: 205px;

    background: rgba(255,255,255,.96);

    color: #164b35;

    border-radius: 3px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.28);

    overflow: hidden;

    position: relative;

}


/* ==========================================================
   BAGIAN HARI
========================================================== */

.home-date-weekday {

    padding: 9px 8px;

    background: #145c3b;

    color: #fff;

    text-align: center;

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: 1px;

}


/* ==========================================================
   ANGKA TANGGAL
========================================================== */

.home-date-number {

    padding: 17px 10px 5px;

    text-align: center;

}


.home-date-number span {

    display: block;

    font-size: 4rem;

    line-height: 1;

    font-weight: 800;

    color: #164b35;

}


/* ==========================================================
   BULAN + TAHUN
========================================================== */

.home-date-month {

    padding: 5px 8px 12px;

    text-align: center;

    color: #b18a2b;

    font-size: .76rem;

    font-weight: 800;

    line-height: 1.3;

}


/* ==========================================================
   KEGIATAN
========================================================== */

.home-date-event {

    margin: 0 10px 12px;

    padding: 8px 5px;

    border-top: 1px dashed #cfd8d3;

    text-align: center;

    color: #16804d;

    font-size: .68rem;

    line-height: 1.3;

    font-weight: 700;

}

/* ==========================================================
   KALENDER — SELURUH KOTAK BISA DIKLIK
========================================================== */

.home-date-card{

    display:block;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.home-date-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 14px 32px rgba(0,0,0,.32);

}

/* ==========================================================
   BACA SELENGKAPNYA
========================================================== */

.home-date-more {

    display: inline-block;

    margin-top: 14px;

    color: #fff;

    font-size: .78rem;

    font-weight: 700;

    text-decoration: none;

    text-shadow:
        1px 1px 4px rgba(0,0,0,.7);

}


.home-date-more:hover {

    color: #d8b45a;

    text-decoration: underline;

}


/* ==========================================================
   EFEK KERTAS SOBEK
========================================================== */

.home-date-card::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 8px;

    background:
        linear-gradient(
            135deg,
            transparent 5px,
            #fff 5px
        ) 0 0 / 10px 10px repeat-x;

}


/* ==========================================================
   KALENDER HERO - RESPONSIVE
   OPTIMASI HP / TABLET / IPAD
========================================================== */


/* ==========================================================
   DEFAULT
   DESKTOP
========================================================== */

.home-date{

    margin-left:auto;

    margin-right:0;

    transform:translateX(0);

}


/* ==========================================================
   TANGGAL MASEHI
========================================================== */

.home-date-gregorian {

    display: block;

    margin-top: 4px;
    margin-bottom: 10px;

    text-align: center;

    color: #7f8d88;

    font-size: .78rem;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .3px;

}

/* ==========================================================
   TABLET
   768px - 991.98px
========================================================== */

@media (min-width:768px) and (max-width:991.98px){

    .home-date{

        margin-left:auto;

        margin-right:0;

        margin-top:90px;

        transform:translateX(0);

    }


    .home-date-card{

        width:140px;

        min-height:190px;

    }


    .home-date-number{

        padding-top:14px;

    }


    .home-date-number span{

        font-size:3.5rem;

    }


    .home-date-month{

        font-size:.75rem;

    }


    .home-date-more{

        margin-top:14px;

        font-size:.8rem;

    }

}


/* ==========================================================
   IPAD / TABLET BESAR
   992px - 1199.98px
========================================================== */

@media (min-width:992px) and (max-width:1199.98px){

    .home-date{

        margin-left:auto;

        margin-right:0;

        margin-top:100px;

        transform:translateX(-10px);

    }


    .home-date-card{

        width:145px;

        min-height:195px;

    }


    .home-date-number span{

        font-size:3.7rem;

    }

}


/* ==========================================================
   HP
   max 767.98px
========================================================== */

@media (max-width:767.98px){

    .home-date{

        width:100%;

        margin-top:35px;

        margin-left:0;

        margin-right:0;

        transform:none;

        display:flex;

        align-items:center;

        justify-content:center;

    }


    .home-date-card{

        width:135px;

        min-height:180px;

        margin-left:auto;

        margin-right:auto;

    }


    .home-date-number{

        padding-top:14px;

    }


    .home-date-number span{

        font-size:3.3rem;

    }


    .home-date-month{

        font-size:.72rem;

    }


    .home-date-more{

        margin-top:12px;

        font-size:.75rem;

    }

}


/* ==========================================================
   HP KECIL
   max 480px
========================================================== */

@media (max-width:480px){

    .home-date{

        margin-top:30px;

    }


    .home-date-card{

        width:130px;

        min-height:175px;

    }


    .home-date-number span{

        font-size:3.1rem;

    }


    .home-date-month{

        font-size:.68rem;

    }


    .home-date-more{

        font-size:.72rem;

    }

}