html,
        body {
            height: 100%;
        }

        main {
            flex: 1;
        }

        .btn {
            transition: all 0.3s ease;
        }

        body {
            font-family: Arial, sans-serif;
            padding-top: 80px;
            display: flex;
            flex-direction: column;
        }

        .cropper-container {
            max-width: 100% !important;
            max-height: 300px !important;
        }

        .cropper-view-box,
        .cropper-face {
            border-radius: 50%;
        }


        /* ICON BULAT ORANGE */
        .icon-circle {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #ff6b2c, #ff8c42);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: all 0.3s ease, transform 0.2s ease;
        }

        /* ICON DI DALAM */
        .icon-circle i {
            color: #fff;
            font-size: 24px;
        }

        /* HOVER EFFECT (biar hidup) */
        .card:hover .icon-circle {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(255, 107, 44, 0.4);
        }

        .dropdown-menu {
            z-index: 9999;
        }

        .navbar {
            height: 80px;
            background-color: transparent;
            transition: background-color 0.3s;
        }

        .navbar.scrolled {
            background-color: #F5F5ED;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        :root {
            --primary-orange: #ff6b2c;
            --primary-red: #e53935;
        }

        .btn-primary {
            background: #ff6b2c;
            border: none;
            box-shadow: 0 4px 10px rgba(255, 107, 44, 0.3);
            transition: all 0.3s;
        }

        .btn-primary:hover {
            background: #e5531a;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 44, 0.4);
        }

        .btn-outline-primary {
            border-color: var(--primary-orange);
            color: var(--primary-orange);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-orange);
            color: #fff;
        }

        /* card dll tetap */
        .card {
            border-radius: 16px;
            border: 1px solid #eee;
            transition: all 0.3s ease;
            background: #fff;
            border: 1px solid #f1f1f1;
        }

        /* .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        } */

        .tutor-card:hover {
            transform: translateY(-8px);
        }

        .cropper-view-box,
        .cropper-face {
            pointer-events: auto;
        }

        #preview {
            max-width: 100%;
        }

        button[type="submit"] {
            position: relative;
            z-index: 10;
        }

        .tutor-card img {
            border: 3px solid #ff6b2c;
        }

        /* .tutor-card:hover {
            transform: translateY(-5px);
        } */

        .hero-desc {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
            max-width: 480px;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

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

        .fade-up {
            animation: fadeUp 0.6s ease forwards;
        }

        .empty-state {
            background: linear-gradient(135deg, #ffe5e0, #fff);
            border: 1px solid #ffd2cc;
            border-radius: 16px;
            animation: fadeUp 0.5s ease;
        }

        .empty-state i {
            background: #ff6b2c;
            color: white;
            padding: 15px;
            border-radius: 50%;
        }

        .kelas-card {
            border-radius: 18px;
            transition: all 0.3s ease;
            border: 1px solid #f1f1f1;
            background: #fff;
        }

        .kelas-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        }

        .kelas-info {
            line-height: 1.6;
        }

        .badge {
            font-size: 0.8rem;
            border-radius: 20px;
        }

        .kelas-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ff6b2c, #ff8c42);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        .kelas-icon i {
            color: #fff;
            font-size: 26px;
        }
        
 /* =========================
   TESTIMONI SECTION
========================= */

.testimoni-card{
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
    border:1px solid #f1f1f1;
    transition:all .3s ease;
    min-height:230px;
}

.testimoni-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* AVATAR */
.testimoni-card img{
    border:2px solid #fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* RATING */
.testimoni-card .text-warning i{
    font-size:18px;
    margin-right:2px;
}

    /* ISI TESTIMONI */
    .testimoni-card p{
        font-size:15px;
        line-height:1.8;
    }
    
    /* =========================
       CAROUSEL TESTIMONI
    ========================= */
    
    #carouselTestimoni{
        position:relative;
    }
    
    /* agar animasi lebih smooth */
    #carouselTestimoni .carousel-item{
        transition:transform .7s ease-in-out;
    }
    
    /* =========================
       MOBILE
    ========================= */
    
    @media(max-width:768px){
    
        .testimoni-card{
            padding:20px;
            min-height:auto;
        }
    
        .testimoni-card p{
            font-size:14px;
            line-height:1.7;
        }
    
        .testimoni-card .fw-bold{
            font-size:16px;
        }
    
        .testimoni-card small{
            font-size:13px;
        }
    
        .testimoni-card .text-warning i{
            font-size:16px;
        }
    
        /* spacing mobile */
        #carouselTestimoni .row{
            gap:15px 0;
        }
    
    }
    
.alumni-total-horizontal{

    background:linear-gradient(135deg,#ffffff,#f8fbff);

    border-radius:24px;

    padding:28px 35px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    width:100%;
    max-width:650px;

    border:1px solid #eef2ff;

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

    margin:auto;

    transition:all .3s ease;

}

.alumni-total-horizontal:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08);

}

/* LEFT */
.alumni-total-left{

    display:flex;
    align-items:center;

    gap:18px;

}

/* ICON */
.alumni-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    background:linear-gradient(135deg,#0d6efd,#4f8cff);

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

    color:#fff;

    font-size:32px;

    box-shadow:
        0 10px 20px rgba(13,110,253,.25);

}

/* LABEL */
.alumni-label{

    font-size:24px;

    font-weight:900;

    color:#111;

    letter-spacing:1px;

}

/* SUB */
.alumni-sub{

    color:#777;

    font-size:14px;

    margin-top:3px;

}

/* NUMBER */
.alumni-total-right{

    font-size:72px;

    font-weight:900;

    color:#0d6efd;

    line-height:1;

}

/* MOBILE */
@media(max-width:768px){

    .alumni-total-horizontal{

        flex-direction:column;

        text-align:center;

        padding:25px;

    }

    .alumni-total-left{

        flex-direction:column;

    }

    .alumni-total-right{

        font-size:56px;

    }

}
    

        /*.testimoni-card {*/
        /*    border-radius: 18px;*/
        /*    padding: 20px;*/
        /*    background: #fff;*/
        /*    border: 1px solid #f3f3f3;*/
        /*    transition: all 0.3s ease;*/
        /*}*/

        /*.testimoni-card:hover {*/
        /*    transform: translateY(-6px);*/
        /*    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);*/
        /*}*/

        /*.testimoni-avatar {*/
        /*    width: 50px;*/
        /*    height: 50px;*/
        /*    border-radius: 50%;*/
        /*    background: linear-gradient(135deg, #ff6b2c, #ff8c42);*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    justify-content: center;*/
        /*    color: white;*/
        /*    font-weight: bold;*/
        /*    font-size: 18px;*/
        /*}*/
        
        /*legalitas*/
        /*.legalitas-preview{*/
        /*    text-align:center;*/
        /*    padding:20px;*/
        /*}*/
        
        /*.legalitas-preview img{*/
        /*    width:auto !important;*/
        /*    max-width:350px;*/
        /*    height:auto;*/
        /*    display:inline-block;*/
        /*    border-radius:12px;*/
        /*    border:1px solid #eee;*/
        /*    box-shadow:0 4px 12px rgba(0,0,0,0.08);*/
        /*}*/