:root{color-scheme:light}html{scroll-behavior:smooth}body{min-height:100vh;background-image:radial-gradient(circle at 90% 0,rgba(158,160,136,.12),transparent 28rem)}
*{-webkit-tap-highlight-color:transparent}.fade-up{animation:fadeUp .55s ease both}.fade-up-delay{animation:fadeUp .65s .12s ease both}.floaty{animation:floaty 5s ease-in-out infinite}.glass{background:rgba(255,255,255,.66);backdrop-filter:blur(16px)}.card-hover{transition:.25s ease}.card-hover:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(79,50,39,.11)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes floaty{50%{transform:translateY(-6px)}}
.mobile-bottom{padding-bottom:env(safe-area-inset-bottom)}input,select,textarea{outline:none}.form-control{width:100%;border:1px solid rgba(48,45,43,.12);background:#fff;border-radius:1rem;padding:.8rem 1rem;transition:.2s}.form-control:focus{border-color:#9ea088;box-shadow:0 0 0 4px rgba(158,160,136,.14)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:.75rem 1.1rem;font-weight:600;transition:.2s}.btn-primary{background:#9ea088;color:#fff}.btn-primary:hover{background:#858770;transform:translateY(-1px)}.btn-soft{background:#fff;color:#302d2b}.badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.35rem .65rem;font-size:.75rem;font-weight:600}.table-wrap{overflow:auto;border:1px solid rgba(48,45,43,.08);border-radius:1.25rem;background:rgba(255,255,255,.8)}table{width:100%;border-collapse:collapse}th,td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid rgba(48,45,43,.07);white-space:nowrap}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#6f625c;background:#fbf7f5}


/* Serein homepage image slider */
.hero-slider{position:relative;overflow:hidden;border-radius:2rem;background:#e8e5dc;box-shadow:0 18px 55px rgba(74,76,60,.12)}
.hero-slider-track{display:flex;height:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero-slide{position:relative;min-width:100%;height:100%;overflow:hidden}
.hero-slide>picture,.hero-slide>picture img{display:block;width:100%;height:100%}
.hero-slide>picture img{object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}
.hero-slider-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,25,20,.01) 46%,rgba(25,25,20,.17) 100%);pointer-events:none}
.hero-slider-actions{position:absolute;left:50%;bottom:1.2rem;z-index:7;display:flex;transform:translateX(-50%);gap:.65rem;transition:left .35s ease,transform .35s ease}
.hero-slider-btn{display:inline-flex;align-items:center;justify-content:center;height:2.75rem;border-radius:9999px;padding:0 1.05rem;background:rgba(251,243,241,.94);color:#302d2b;font-size:.78rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.09);backdrop-filter:blur(12px);transition:.2s ease;white-space:nowrap}
.hero-slider-btn.primary{background:#9ea088;color:#fff}
.hero-slider-btn:hover{transform:translateY(-1px)}
.hero-slider-arrow{position:absolute;top:50%;z-index:8;display:flex;width:2.7rem;height:2.7rem;align-items:center;justify-content:center;border-radius:9999px;background:rgba(251,243,241,.92);color:#302d2b;box-shadow:0 8px 24px rgba(0,0,0,.09);backdrop-filter:blur(12px);transform:translateY(-50%);transition:.2s ease}
.hero-slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.03)}
.hero-slider-arrow.prev{left:1rem}.hero-slider-arrow.next{right:1rem}
.hero-slider-dots{position:absolute;left:50%;bottom:4.7rem;z-index:8;display:flex;transform:translateX(-50%);gap:.45rem;transition:left .35s ease,transform .35s ease}
.hero-slider-dot{width:.48rem;height:.48rem;border-radius:9999px;background:rgba(255,255,255,.66);box-shadow:0 0 0 1px rgba(48,45,43,.08);transition:.25s ease}
.hero-slider-dot.active{width:1.55rem;background:#9ea088}

/* Slide portrait di desktop dibuat ke sisi kanan agar gambar tidak pecah/crop berlebihan */
.hero-slide-split{background:#f7f1ee}
.hero-split-copy{display:none}
.hero-split-media{display:block;width:100%;height:100%}

@media (min-width:768px){
  .hero-slider{height:560px;aspect-ratio:auto}
  .hero-slider-actions{bottom:1.5rem}
  .hero-slider-dots{bottom:5.2rem}
  .hero-slide-split{display:grid;grid-template-columns:56% 44%;align-items:stretch}
  .hero-slide-split .hero-split-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:4.25rem 5.4rem 7rem 4.75rem;background:linear-gradient(135deg,#f9f4f1 0%,#f0e6e1 100%)}
  .hero-split-kicker{font-size:.72rem;font-weight:600;letter-spacing:.23em;color:#858770}
  .hero-split-title{margin-top:1.2rem;font-family:"Cormorant Garamond",Georgia,serif;font-size:4.4rem;line-height:.88;font-weight:500;color:#302d2b}
  .hero-split-text{margin-top:1.3rem;max-width:28rem;font-size:.95rem;line-height:1.8;color:#6f625c}
  .hero-slide-split .hero-split-media{grid-column:2;grid-row:1;height:100%;overflow:hidden;background:#c7ac98}
  .hero-slide-split .hero-split-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
  .hero-slide-split .hero-slider-overlay{display:none}
  .hero-slider.slide-2-active .hero-slider-actions{left:28%;transform:translateX(-50%)}
  .hero-slider.slide-2-active .hero-slider-dots{left:28%;transform:translateX(-50%)}
}
@media (min-width:1100px){
  .hero-slider{height:590px}
}
@media (max-width:767px){
  .hero-slider{aspect-ratio:4/5;border-radius:1.55rem}
  .hero-slide>picture img{object-position:center}
  .hero-slide-split{display:block}
  .hero-slide-split .hero-split-copy{display:none}
  .hero-slide-split .hero-split-media{display:block;width:100%;height:100%}
  .hero-slide-split .hero-split-media img{width:100%;height:100%;object-fit:cover;object-position:center}
  .hero-slider-arrow{width:2.35rem;height:2.35rem}.hero-slider-arrow.prev{left:.7rem}.hero-slider-arrow.next{right:.7rem}
  .hero-slider-actions{bottom:.9rem;width:calc(100% - 2rem);justify-content:center}
  .hero-slider-btn{height:2.5rem;padding:0 .9rem}
  .hero-slider-dots{bottom:4.25rem}
}
@media (prefers-reduced-motion:reduce){.hero-slider-track{transition:none}}

/* Timetable navigation, filters, and date slider */
.tt-nav-arrow{display:inline-flex;height:2.75rem;width:2.75rem;flex:0 0 2.75rem;align-items:center;justify-content:center;border-radius:9999px;background:#fbf3f1;color:#302d2b;font-size:1.45rem;line-height:1;transition:.2s;box-shadow:inset 0 0 0 1px rgba(48,45,43,.06)}
.tt-nav-arrow:hover{background:#9ea088;color:#fff;transform:translateY(-1px)}
.tt-nav-arrow.is-disabled{opacity:.35;cursor:not-allowed}
.tt-month-select{min-width:12.5rem;border:1px solid rgba(48,45,43,.10);border-radius:.9rem;background:#fff;padding:.72rem 2.25rem .72rem .9rem;font-size:.92rem;font-weight:600;color:#302d2b;box-shadow:0 5px 18px rgba(79,50,39,.04)}
.tt-month-select:focus{border-color:#9ea088;box-shadow:0 0 0 4px rgba(158,160,136,.12)}
.tt-stat{display:flex;min-width:5rem;flex-direction:column;border-radius:1rem;background:#fbf3f1;padding:.7rem .8rem}
.tt-stat b{font-size:1rem;color:#302d2b}.tt-stat span{margin-top:.1rem;font-size:.65rem;color:#6f625c;white-space:nowrap}
.tt-filter-row{display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.15rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tt-filter-row::-webkit-scrollbar{display:none}
.tt-filter-pill{display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;border:1px solid rgba(48,45,43,.08);border-radius:9999px;background:#fff;padding:.62rem .9rem;font-size:.78rem;font-weight:600;color:#6f625c;transition:.2s}
.tt-filter-pill:hover{border-color:rgba(158,160,136,.45);background:#f8f6f2;color:#302d2b}
.tt-filter-pill.is-active{border-color:#9ea088;background:#9ea088;color:#fff;box-shadow:0 8px 20px rgba(133,135,112,.18)}
.tt-date-scroller{display:flex;gap:.55rem;overflow-x:auto;padding:.25rem .1rem .7rem;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tt-date-scroller::-webkit-scrollbar{display:none}
.tt-date-chip{position:relative;display:flex;min-width:4.25rem;scroll-snap-align:center;flex-direction:column;align-items:center;border:1px solid rgba(48,45,43,.07);border-radius:1.15rem;background:#fff;padding:.7rem .55rem .55rem;color:#302d2b;box-shadow:0 5px 18px rgba(79,50,39,.035);transition:.2s}
.tt-date-chip:hover{transform:translateY(-1px);border-color:rgba(158,160,136,.35);background:#f8f6f2}
.tt-date-chip.is-selected{border-color:#302d2b;background:#302d2b;color:#fff;box-shadow:0 10px 24px rgba(48,45,43,.15)}
.tt-date-day{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;opacity:.72}.tt-date-chip strong{margin-top:.18rem;font-size:1.05rem}
.tt-date-dot{margin-top:.38rem;height:.3rem;width:.3rem;border-radius:9999px;background:transparent}
.tt-date-dot.has-schedule{background:#9ea088}.tt-date-chip.is-selected .tt-date-dot.has-schedule{background:#fff}
.tt-level-dot{display:inline-block;height:.58rem;width:.58rem;flex:0 0 .58rem;border-radius:9999px}
.tt-level-beginner{background:#e8c8c0}.tt-level-all-level{background:#b9c0aa}.tt-level-intermediate{background:#b9aea8}.tt-level-other{background:#d8d2cd}
.tt-filter-pill.is-active .tt-level-dot{box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.tt-level-badge{display:inline-flex;align-items:center;gap:.45rem;border-radius:9999px;padding:.38rem .7rem;font-size:.72rem;font-weight:600}
.tt-level-badge-beginner{background:#f7e7e3;color:#76564f}.tt-level-badge-all-level{background:#edf0e8;color:#5e6650}.tt-level-badge-intermediate{background:#eee9e6;color:#675d58}.tt-level-badge-other{background:#f2efed;color:#6f625c}
@media (max-width:639px){
 .tt-month-select{min-width:0;width:100%}.tt-stat{min-width:0;padding:.65rem .45rem}.tt-date-chip{min-width:3.85rem}.tt-nav-arrow{height:2.55rem;width:2.55rem;flex-basis:2.55rem}
}

/* Refined timetable month picker + filter layout */
.tt-month-picker{position:relative;z-index:20}
.tt-month-trigger{display:flex;width:100%;min-width:15.5rem;align-items:center;gap:.7rem;border:1px solid rgba(48,45,43,.09);border-radius:1rem;background:#fff;padding:.65rem .72rem;box-shadow:0 6px 22px rgba(79,50,39,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.tt-month-trigger:hover{border-color:rgba(158,160,136,.45);box-shadow:0 9px 26px rgba(79,50,39,.07)}
.tt-month-trigger:focus-visible{outline:none;border-color:#9ea088;box-shadow:0 0 0 4px rgba(158,160,136,.13)}
.tt-month-trigger-icon{display:inline-flex;height:2.05rem;width:2.05rem;flex:0 0 2.05rem;align-items:center;justify-content:center;border-radius:.7rem;background:#f3eee9;color:#858770}
.tt-month-chevron{height:1.05rem;width:1.05rem;flex:0 0 1.05rem;color:#6f625c;transition:transform .2s}
.tt-month-picker.is-open .tt-month-chevron{transform:rotate(180deg)}
.tt-month-menu{position:absolute;top:calc(100% + .55rem);left:0;z-index:80;width:min(24rem,calc(100vw - 2rem));overflow:hidden;border:1px solid rgba(48,45,43,.08);border-radius:1.25rem;background:rgba(255,255,255,.98);box-shadow:0 22px 55px rgba(48,45,43,.16);backdrop-filter:blur(18px)}
.tt-month-menu-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(48,45,43,.06);padding:1rem 1rem .85rem}
.tt-month-close{display:inline-flex;height:2.15rem;width:2.15rem;align-items:center;justify-content:center;border-radius:9999px;background:#f6f1ed;color:#6f625c;font-size:1.35rem;line-height:1;transition:.2s}
.tt-month-close:hover{background:#9ea088;color:#fff}
.tt-month-options{display:grid;max-height:20rem;grid-template-columns:1fr;gap:.45rem;overflow:auto;padding:.7rem}
.tt-month-option{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid transparent;border-radius:.95rem;padding:.72rem .8rem;color:#302d2b;transition:.18s}
.tt-month-option:hover{border-color:rgba(158,160,136,.25);background:#f8f5f1}
.tt-month-option strong{display:block;font-size:.84rem}.tt-month-option small{display:block;margin-top:.15rem;font-size:.68rem;color:#6f625c}
.tt-month-option.is-current{border-color:rgba(158,160,136,.42);background:#eef0e9}
.tt-month-check{display:inline-flex;height:1.85rem;width:1.85rem;align-items:center;justify-content:center;border-radius:9999px;background:#9ea088;color:#fff}
.tt-month-backdrop{display:none}

/* keep all level filters tidy instead of clipping on small phones */
@media (max-width:639px){
  .tt-month-picker,.tt-month-trigger{width:100%;min-width:0}
  .tt-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;overflow:visible}
  .tt-filter-pill{width:100%;justify-content:center;padding:.68rem .6rem;font-size:.75rem}
  .tt-month-backdrop{position:fixed;inset:0;z-index:89;display:block;background:rgba(35,31,29,.34);backdrop-filter:blur(2px)}
  .tt-month-menu{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:90;width:100%;max-height:min(72vh,34rem);border:0;border-radius:1.6rem 1.6rem 0 0;padding-bottom:calc(.8rem + env(safe-area-inset-bottom));box-shadow:0 -20px 55px rgba(48,45,43,.18);animation:ttSheetUp .22s ease both}
  .tt-month-menu:before{content:"";display:block;width:2.7rem;height:.25rem;margin:.55rem auto .05rem;border-radius:9999px;background:#ddd4ce}
  .tt-month-menu-head{padding:.8rem 1.05rem .75rem}
  .tt-month-options{grid-template-columns:repeat(2,minmax(0,1fr));max-height:48vh;padding:.7rem 1rem 1rem}
  .tt-month-option{min-height:4.25rem;background:#fbf8f5;border-color:rgba(48,45,43,.05)}
  .tt-month-option.is-current{background:#eef0e9}
}
@keyframes ttSheetUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* =====================================================
   TIMETABLE MONTH PICKER - CLEAN UI
===================================================== */

.tt-month-picker {
    position: relative;
    z-index: 30;
}


/* BUTTON BULAN */
.tt-month-trigger {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 270px;

    padding: 12px 14px;

    border: 1px solid rgba(48, 45, 43, 0.08);
    border-radius: 18px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfaf8 100%
    );

    box-shadow:
        0 5px 18px rgba(48, 45, 43, 0.04);

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.tt-month-trigger:hover {
    border-color: rgba(158, 160, 136, 0.42);

    box-shadow:
        0 8px 24px rgba(48, 45, 43, 0.06);
}


.tt-month-trigger:focus {
    outline: none;

    border-color: #9ea088;

    box-shadow:
        0 0 0 4px rgba(158, 160, 136, 0.12);
}


/* ICON KALENDAR */
.tt-month-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border-radius: 13px;

    background: #f1ece6;

    color: #9ea088;
}


/* CHEVRON */
.tt-month-chevron {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    color: #746a64;

    transition: transform .2s ease;
}


.tt-month-picker.is-open
.tt-month-chevron {
    transform: rotate(180deg);
}


/* =====================================================
   DROPDOWN
===================================================== */

.tt-month-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 100%;
    min-width: 300px;
    max-width: 360px;

    overflow: hidden;

    border: 1px solid rgba(48, 45, 43, 0.08);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(48, 45, 43, 0.13);

    z-index: 100;
}


/* HEADER DROPDOWN */
.tt-month-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 15px 16px 13px;

    background: #fcfaf8;

    border-bottom:
        1px solid rgba(48, 45, 43, 0.06);
}


/* CLOSE */
.tt-month-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f0ece7;

    color: #70645e;

    font-size: 18px;

    cursor: pointer;

    transition: .2s ease;
}


.tt-month-close:hover {
    background: #9ea088;
    color: #fff;
}


/* =====================================================
   LIST BULAN
===================================================== */

.tt-month-options {
    display: flex;
    flex-direction: column;

    gap: 7px;

    max-height: 280px;

    overflow-y: auto;

    padding: 11px;
}


.tt-month-option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 13px 14px;

    border:
        1px solid rgba(48, 45, 43, 0.06);

    border-radius: 15px;

    background: #ffffff;

    color: #302d2b;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.tt-month-option:hover {
    background: #faf8f5;

    border-color:
        rgba(158, 160, 136, 0.32);

    transform: translateY(-1px);
}


.tt-month-option strong {
    display: block;

    font-size: 14px;
    font-weight: 700;
}


.tt-month-option small {
    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: #8b7d74;
}


/* BULAN AKTIF */
.tt-month-option.is-current {
    background: #f1f3ee;

    border-color: #c4cab6;
}


/* CHECK */
.tt-month-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #9ea088;

    color: #ffffff;
}


/* =====================================================
   NAVIGATION BULAN
===================================================== */

.tt-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    border:
        1px solid rgba(48, 45, 43, 0.07);

    border-radius: 50%;

    background: #f7f2ee;

    color: #8f9180;

    font-size: 24px;

    transition: .2s ease;
}


.tt-nav-arrow:hover {
    background: #eeebe4;

    border-color:
        rgba(158, 160, 136, 0.3);

    color: #6f725f;

    transform: translateY(-1px);
}


.tt-nav-arrow.is-disabled {
    opacity: .35;
    pointer-events: none;
}


/* =====================================================
   FILTER LEVEL
===================================================== */

.tt-filter-row {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.tt-filter-pill {
    display: inline-flex;

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

    gap: 7px;

    padding: 11px 16px;

    border:
        1px solid rgba(48, 45, 43, 0.06);

    border-radius: 999px;

    background: #fff;

    color: #6f625c;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition: .2s ease;
}


.tt-filter-pill:hover {
    background: #f7f5f1;

    border-color:
        rgba(158, 160, 136, .3);
}


.tt-filter-pill.is-active {
    background: #9ea088;

    border-color: #9ea088;

    color: #fff;

    box-shadow:
        0 8px 22px rgba(48, 45, 43, .08);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 639px) {

    .tt-month-picker {
        width: 100%;
    }


    .tt-month-trigger {
        width: 100%;

        min-width: 0;

        padding: 11px 12px;

        border-radius: 17px;
    }


    /*
     Dropdown tetap nempel ke form.
     BUKAN bottom sheet.
    */
    .tt-month-menu {
        position: absolute;

        top: calc(100% + 8px);

        left: 0;
        right: 0;

        width: 100%;
        min-width: 0;
        max-width: none;

        max-height: 290px;

        border-radius: 18px;

        box-shadow:
            0 18px 40px rgba(48, 45, 43, .13);
    }


    .tt-month-options {
        max-height: 210px;

        padding: 9px;
    }


    .tt-month-option {
        padding: 12px 13px;

        border-radius: 14px;
    }


    .tt-nav-arrow {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    /* FILTER 2 KOLOM */
    .tt-filter-row {
        display: grid;

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

        gap: 8px;
    }


    .tt-filter-pill {
        width: 100%;

        min-height: 44px;

        padding: 9px 8px;

        font-size: 12px;
    }

}