/* ****************************************************************** */
/* COUNTER */
.counter {background: #e6f0ec;padding: 1.5rem;border-radius: 16px; border: 1px solid #d4e3dd;}
.counter-grid {display: grid;text-align: center;}
.counter-item .num {font-weight: bold;color: #1b4d3e;}

/* CARD */
.card {display: flex;flex-direction: column;height: 100%;margin-bottom: 1.25rem;}
.card {background: white;border-radius: 1rem;padding: 1rem;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);border: 1px solid #e2e8f0;}
.card:hover {transform: translateY(-4px); box-shadow: 0 4px 12px rgba(44, 122, 77, 0.3);}
.card-grid {display: grid;gap: 1rem 1rem;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
.card-img {width: 100%;height: 160px;object-fit: cover;border-radius: 12px;margin-bottom: 12px;}
.card h4 {margin-bottom: 6px;}
.card p {color: #4a5568;line-height: 1.5;}
.card-footer {margin-top: auto;font-size: .9em;color: #94a3b8;text-align: right;}
.icon-box {
    background: #eef6f2;width: 45px;height: 45px;border-radius: 12px;display: flex;align-items: center;
    justify-content: center;font-size: 22px;margin-bottom: 12px;
}
.btn-link {color: #2c6e4f;text-decoration: none;font-weight: 600;display: inline-block;margin-top: 8px;}

/* CARD GRID */
.card-info-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.5rem;/* margin-bottom: 50px; */}
.card-info {background: white;border-radius: 1.5rem;padding: 1rem;text-align: center;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);transition: transform 0.2s; border: 1px solid #e3e3e3;}
.card-info:hover {transform: translateY(-5px);}
.card-info .svg-inline--fa {font-size: 2em;}
.card-info a {color: #2c7a4d;text-decoration: none; font-weight: 600;}
.card-info a:hover {text-decoration: underline;}

/* SIDEBAR */
.sidebar {background: white;border-radius: 15px;padding: 15px;margin-bottom: 20px;border: 1px solid #e2e8f0;}
.sidebar h4 {font-size: 15px;border-left: 4px solid #FFC107;padding-left: 10px;margin-bottom: 15px;}
.sidebar-header {margin: -15px -15px 15px;padding: 15px 15px 5px;background-color: #2c6e4f;border-top-left-radius: 15px;border-top-right-radius: 15px; color: #e6f0ec}
.sidebar-header h4 {margin-bottom: 10px;}
.event-item {display: flex;gap: 12px;margin-bottom: 15px;}
.event-date {background-color: rgba(var(--bs-primary-rgb), 1) !important;color: white;text-align: center;padding: 8px;border-radius: 10px;min-width: 50px;font-size: 11px;line-height: 1.3;}
.event-title {font-size: 1em;font-weight: 600;}
.event-place {font-size: .9em;color: #64748b; margin-top: 4px;}
.link-list {list-style: none;}
.link-list li {padding: 10px 0;border-bottom: 1px solid #e2e8f0;}
.link-list li a {text-decoration: none;color: #1e293b;font-size: 1em;font-weight: 500;}
.link-list li span {font-size: .8em;color: #2c6e4f;display: block; margin-top: 4px;}

/* Style untuk Kalender */
.calendar-wrapper {background: #fff;padding: 10px 0 5px 0;}
.calendar-month-nav {display: flex;justify-content: space-between;align-items: center;margin-top: -15px;margin-bottom: 15px;font-weight: bold;color: #333;}
.calendar-month-nav .nav-btn {background: none;border: none;color: #2c6e4f;cursor: pointer;padding: 5px 10px;}
.calendar-weekdays {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-weight: 600;font-size: 12px;color: #666;margin-bottom: 10px;}
/* Mengubah warna teks hari Minggu menjadi merah */
.calendar-weekdays div:first-child {color: #e63946;}
.calendar-days {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-size: 13px;row-gap: 8px;}
.calendar-days div {padding: 5px;color: #333;border-radius: 50%;width: 30px;height: 30px;line-height: 20px;font-size: 16px;}
/* Tanggal kosong di awal bulan */
.calendar-days .empty-day {background: transparent;}
/* Tanggal yang memiliki agenda kegiatan */
.calendar-days .has-event {background: #e8f5e9;color: #2c6e4f;font-weight: bold;cursor: pointer;position: relative;}
.calendar-days .has-event::after {content: '';position: absolute;bottom: 3px;left: 50%;transform: translateX(-50%);width: 4px;height: 4px;background: #2c6e4f;border-radius: 50%;}
/* Tanggal agenda yang sedang aktif/terdekat */
.calendar-days .has-event.active {background: #2c6e4f;color: white;}
.calendar-days .has-event.active::after {background: #ffd966;}
/* Gaya untuk tanggal hari ini */
.calendar-days .today {background: #ffd966 !important;color: #1b4d3e !important;font-weight: bold;border: 1px solid #dfdfdf;}
/* Pengaturan struktur Tooltip pada tanggal beragenda */
.calendar-days .has-event {position: relative;}
/* Kotak Popup Tooltip */
.calendar-days .has-event .tooltip-text {visibility: hidden;width: 140px;background-color: #333;color: #fff;text-align: center;border-radius: 6px;padding: 6px;position: absolute;z-index: 10;bottom: 125%;left: 50%;transform: translateX(-50%);opacity: 0;transition: opacity 0.2s;font-size: 11px;line-height: 1.3;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);pointer-events: none;}
/* Segitiga kecil di bawah kotak tooltip */
.calendar-days .has-event .tooltip-text::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #333 transparent transparent transparent;}
/* Efek saat kursor menyentuh tanggal beragenda */
.calendar-days .has-event:hover .tooltip-text {visibility: visible;opacity: 1;}

/* TESTIMOSI */
.testi-slider {
    background: rgba(var(--bs-light-dark-rgb), 1) !important;border-radius: 1rem;
    height: auto;padding: 1.5rem;border: 1px solid rgb(223, 223, 223)
}
.testi-slider .widget {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;text-align: center;padding: 1rem 1rem;color: white;
    border-top-left-radius: 1rem;border-top-right-radius: 1rem;margin: -1.5rem -1.5rem 1.5rem;
}
.testi-slider .testi-swiper {background-color: transparent;height: auto;}
.testi-slider .swiper-wrapper {padding-bottom: 20px;}
.testi-slider .testi-swiper .swiper-slide {
    background: white;
    border: 4px solid rgba(var(--bs-light-dark-rgb), 1) !important;
    border-radius: 1rem;text-align: center;padding: 1rem;
}
/* .swiper-slide p {font-size: 1em;} */
/* .swiper-slide h5 {font-size: 14px;margin-top: 6px;} */
.testi-swiper .swiper-horizontal>.swiper-pagination-bullets,
.testi-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.testi-swiper .swiper-pagination-custom,
.testi-swiper .swiper-pagination-fraction {bottom: 0 !important;}

.form-group {margin-bottom: 1rem;}
.form-group input,.form-group select,
.form-group textarea {width: 100%;padding: 12px 16px;border: 2px solid #e2e8f0;border-radius: .5rem;font-size: 0.95rem;transition: all 0.2s;font-family: inherit;}
.form-group input:focus,.form-group select:focus,
.form-group textarea:focus {outline: none;border-color: #2c7a4d;box-shadow: 0 0 0 3px rgba(44, 122, 77, 0.1);}
.form-group textarea {resize: vertical;min-height: 100px;}

/* DESKTOP (di atas 768px) */
@media screen and (min-width: 768px) {
    .counter-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5px;}
    .counter-item .num {font-size: 2.5em;}
}

/* DESKTOP (di bawah 768px) */
@media screen and (max-width: 768px) {
    .card-info-grid {gap: 1rem;}
    .card-info {border-radius: 1rem;}

    .counter {padding: 1rem;}
    .counter-grid {grid-template-columns: repeat(2, 1fr);gap: 1.25rem;}
    .counter-item .num {font-size: 2em;}
    .counter-item {font-size: .75em;}
    
    .testi-slider {padding: 1rem !important;}
    .testi-slider .widget {margin: -1rem -1rem 1rem;padding: 10px 15px;}
    .widget-title {font-size: 1.2em;}
}

.sidebar-kanan {margin: auto; height: auto;}
/* CARD */
.kartu {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 1.5rem;
    background: white;
    border-radius: 1.25rem;
    padding: 0%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}
.kartu:hover {box-shadow: 0 4px 12px rgba(44, 122, 77, 0.3);/*transform: translateY(-4px);*/}
.kartu-header {
    /* background-color: #2c6e4f; */
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    color: #e6f0ec;
}
.kartu-header-title {
    margin: 14px 16px;
    padding: 0 0 0 10px;
    border-left: 4px solid #FFC107;
}
.kartu-body {min-height: 5rem; padding: 1rem;}
.kartu-footer {
    padding: 8px 16px;
    background-color: #f3f3f3;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

@media screen and (max-width: 768px) {
    .kartu {margin-bottom: 1.25rem;border-radius: 1rem;}
    .kartu-header {border-top-left-radius: 1rem;border-top-right-radius: 1rem;}
    .kartu-header-title {margin: 10px 16px;padding: 0 0 0 10px;font-size: .9em;}
    .kartu-body {padding: 1rem;}
    .kartu-footer {padding: 8px 16px;border-bottom-left-radius: 1rem;border-bottom-right-radius: 1rem;}
}