/* CSS KHUSUS HALAMAN KURIKULUM */

/* Section Wrapper Umum */

.kurikulum-section {

    padding: 60px 0;

    background-color: #FAFAFA;

}

.kurikulum-section.bg-white {

    background-color: var(--white);

}

/* Header Section Text */

.section-header {

    text-align: center;

    margin-bottom: 40px;

}

.section-title {

    font-size: 28px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 16px;

}

.section-desc {

    color: var(--slate);

    font-size: 15px;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.6;

}

/* Tabs Struktur Kurikulum */

.tabs-wrapper {

    max-width: 1000px;

    margin: 0 auto;

}

.tabs-header {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 24px;

    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 8px;

    -ms-overflow-style: none;  /* IE and Edge */

    scrollbar-width: none;  /* Firefox */

}

.tabs-header::-webkit-scrollbar {

    display: none;

}

.tab-btn {

    background: var(--white);

    border: 1px solid rgba(0,0,0,0.05);

    padding: 12px 24px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    color: var(--slate);

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    gap: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.02);

}

.tab-btn.active {

    background: #eff6ff; /* blue-50 */

    color: #2563eb; /* blue-600 */

    border-color: #bfdbfe; /* blue-200 */

}

.tab-btn:hover:not(.active) {

    background: var(--light-gray);

}

.tab-content {

    background: var(--white);

    border-radius: 20px;

    padding: 32px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.02);

    display: none;

    animation: fadeIn 0.4s ease forwards;

}

.tab-content.active {

    display: block;

}

.tab-content h4 {

    font-size: 20px;

    font-weight: 700;

    color: var(--charcoal);

    margin-bottom: 16px;

}

.tab-content p {

    color: var(--slate);

    line-height: 1.7;

    margin-bottom: 16px;

    font-size: 14px;

}

@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

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

}

/* Accordion Program Unggulan */

.accordion-wrapper {

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.accordion-item {

    background: var(--white);

    border-radius: 16px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.03);

    overflow: hidden;

}

.accordion-header {

    padding: 16px 24px;

    display: flex;

    align-items: center;

    gap: 16px;

    cursor: pointer;

    user-select: none;

    background: var(--white);

    transition: background 0.3s;

}

.accordion-header:hover {

    background: #f8fafc;

}

.acc-icon {

    color: #3b82f6; /* blue-500 */

    display: flex;

    align-items: center;

    justify-content: center;

}

.acc-title {

    flex: 1;

    font-weight: 700;

    color: var(--charcoal);

    font-size: 16px;

    text-align: center;

}

.acc-title.active-text {

    color: #2563eb;

}

.acc-arrow {

    color: var(--slate-light);

    transition: transform 0.3s ease;

}

.accordion-item.active .acc-arrow {

    transform: rotate(180deg);

}

.accordion-body {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;

    background: #f8fafc;

}

.accordion-item.active .accordion-body {

    max-height: 300px; /* arbitrary large max height */

}

.accordion-content {

    padding: 24px;

    color: var(--slate);

    font-size: 14px;

    line-height: 1.7;

    text-align: center;

}

/* Ekstrakurikuler Cards */

.ekskul-grid {

    display: grid;

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

    gap: 24px;

    max-width: 1000px;

    margin: 0 auto;

}

@media (min-width: 768px) {

    .ekskul-grid {

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

    }

}

.ekskul-card {

    background: var(--white);

    border-radius: 20px;

    padding: 24px;

    text-align: center;

    box-shadow: 0 4px 20px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.03);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.ekskul-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

}

.ekskul-icon-wrap {

    width: 60px;

    height: 60px;

    background: #fef3c7; /* amber-100 */

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    color: #d97706; /* amber-600 */

}

.ekskul-card-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 12px;

}

.ekskul-card-desc {

    color: var(--slate);

    font-size: 13px;

    line-height: 1.6;

}

/* Penilaian & Waktu Grid */

.bottom-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 32px;

    max-width: 1000px;

    margin: 0 auto;

}

@media (min-width: 992px) {

    .bottom-grid {

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

    }

}

.bottom-card {

    background: var(--white);

    border-radius: 20px;

    padding: 32px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.03);

}

.bottom-card-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 16px;

}

.bottom-card-desc {

    color: var(--slate);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 24px;

}

/* Sistem Penilaian List */

.penilaian-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.penilaian-item {

    display: flex;

    gap: 16px;

    align-items: flex-start;

}

.penilaian-icon {

    color: #2563eb;

    margin-top: 2px;

    flex-shrink: 0;

}

.penilaian-text-wrap {

    flex: 1;

}

.penilaian-item-title {

    font-weight: 700;

    color: var(--charcoal);

    font-size: 14px;

    margin-bottom: 4px;

}

.penilaian-item-desc {

    font-size: 13px;

    color: var(--slate-light);

    line-height: 1.5;

}

/* Alokasi Waktu Timeline */

.waktu-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.waktu-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 0;

    border-bottom: 1px dashed rgba(0,0,0,0.08);

}

.waktu-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.waktu-time {

    font-weight: 800;

    font-size: 13px;

    color: var(--charcoal);

    margin-bottom: 4px;

}

.waktu-kegiatan {

    font-size: 12px;

    color: var(--slate);

}

.waktu-badge {

    font-size: 10px;

    font-weight: 700;

    padding: 6px 12px;

    border-radius: 9999px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.badge-yellow {

    background: #fef3c7;

    color: #d97706;

}

.badge-blue {

    background: #eff6ff;

    color: #2563eb;

}