/* ==========================================================================
           3. CSS KHUSUS HALAMAN BERANDA (PUBLIC TRAINING STYLE)
           ========================================================================== */
        .beranda-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            text-align: center;
        }

        .beranda-title { font-size: 32px; color: #e6cd0b; font-weight: 700; margin-bottom: 10px; }
        .beranda-title span { color: #e6cd0b; }
        .beranda-subtitle { font-size: 14px; color: #666; max-width: 800px; margin: 0 auto 30px auto; line-height: 1.6; }

        /* Navigasi Kategori (Tab Kategori) */
        .category-tabs {
            display: inline-flex;
            background-color: #ffffff;
            padding: 6px;
            border-radius: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            gap: 5px;
        }

        .tab-btn {
            border: none;
            background: none;
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 600;
            color: #555;
            border-radius: 25px;
            cursor: pointer;
            transition: 0.3s;
        }

        .tab-btn.active-tab {
            background-color: #1e40af;
            color: #ffffff;
        }
        
        /* ===========================
   DROPDOWN TAB BNSP
=========================== */

.tab-dropdown-container{
    position:relative;
    display:inline-block;
}

.tab-dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    overflow:hidden;

    z-index:999;
}

.tab-dropdown-menu button{

    width:100%;

    padding:12px 18px;

    border:none;

    background:#fff;

    text-align:left;

    font-size:14px;

    font-weight:600;

    color:#444;

    cursor:pointer;

    transition:.3s;
}

.tab-dropdown-menu button:hover{

    background:#1e40af;

    color:#fff;
}

.tab-dropdown-container:hover .tab-dropdown-menu{

    display:block;
}

.tab-dropdown-container:hover .fa-caret-down{

    transform:rotate(180deg);
}

.tab-btn .fa-caret-down{

    margin-left:6px;

    transition:.3s;
}

        /* BAR FILTER & PENCARIAN SEJAJAR */
        .filter-bar { 
            display: flex; 
            justify-content: center; 
            align-items: center;
            gap: 15px; 
            margin-bottom: 40px; 
        }

        .filter-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 0 15px;
            height: 45px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
            transition: 0.3s;
        }
        .filter-input-wrapper:focus-within {
            border-color: #1e40af;
        }
        .filter-input-wrapper i {
            color: #718096;
            margin-right: 10px;
            font-size: 14px;
        }

        .filter-select { 
            border: none;
            background: none;
            outline: none;
            font-size: 14px; 
            color: #4a5568; 
            width: 220px; 
            height: 100%;
            cursor: pointer; 
            font-weight: 500;
        }

        .filter-search { 
            border: none;
            background: none;
            outline: none;
            font-size: 14px; 
            color: #4a5568;
            width: 280px; 
            height: 100%;
        }

        /* Grid Pembungkus Kartu */
        .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; }

        /* Desain Kartu Utama */
        .training-card {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            color: #ffffff;
            text-align: left;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: transform 0.3s;
        }
        .training-card:hover { transform: translateY(-5px); }

        .card-header { padding: 25px; position: relative; }
        .card-header h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
        .card-subtext { font-size: 12px; color: rgba(255, 255, 255, 0.85); background-color: rgba(255,255,255,0.15); display: inline-block; padding: 4px 12px; border-radius: 20px; }
        .card-icon-bg { position: absolute; right: 20px; top: 25px; font-size: 24px; color: rgba(255,255,255,0.18); }

        .card-body { background-color: #ffffff; color: #333333; padding: 20px 25px; margin-top: auto; border-radius: 16px 16px 0 0; }
        .info-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 12px; }
        .info-row i { color: #4a5568; margin-right: 6px; }
        .divider-line { height: 1px; background-color: #f1f5f9; margin: 12px 0; }
        .price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .price-label { font-size: 13px; color: #666; }
        .price-value { font-size: 16px; font-weight: 700; color: #2d3748; }
        .date-badge { background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; }
        
        /* Tombol Detail Transparan Elegan Menyesuaikan Gradasi */
        .detail-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: rgba(0,0,0,0.06); color: #4a5568; border: 1px solid #e2e8f0; width: 100%; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.3s; }
        .detail-btn:hover { background-color: #2d3748; color: #ffffff; border-color: #2d3748; }

        /* VARIASI WARNA KALEM (GRADASI SOFT CORPORATE) */
        .card-bg-navy { background: linear-gradient(135deg, #2b4c7e 0%, #1a3053 100%); }
        .card-bg-teal { background: linear-gradient(135deg, #2e7d76 0%, #1c524d 100%); }
        .card-bg-maroon { background: linear-gradient(135deg, #8c4351 0%, #5c2b35 100%); }
        .card-bg-olive { background: linear-gradient(135deg, #586432 0%, #2b3216 100%); }
        .card-bg-indigo { background: linear-gradient(135deg, #4d5382 0%, #2e3254 100%); }
        .card-bg-slate { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); }

        /* Dummy section */
        .dummy-section { max-width: 900px; margin: 60px auto; text-align: center; padding: 40px 20px; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
        .dummy-section h2 { color: #0c1e36; margin-bottom: 15px; }
        
  /* --- RESPONSIF KONTEN BERANDA DI HP --- */
* {
    box-sizing: border-box; /* Penting! Jangan biarkan elemen melebar */
}

@media screen and (max-width: 768px) {
    /* Judul diperkecil agar muat di layar HP */
    .beranda-title { font-size: 24px; }
    .beranda-subtitle { font-size: 13px; }

    /* Tab kategori bisa digeser ke samping */
    .category-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding: 10px 5px;
        gap: 8px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 16px; /* Diperkecil agar lebih muat */
        font-size: 13px;
    }

    /* Dropdown menyesuaikan lebar layar */
    .tab-dropdown-menu {
        min-width: calc(100vw - 20px);
        left: 0;
        right: 0;
    }

    /* Filter tumpuk ke bawah dan penuh lebar */
    .filter-bar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .filter-input-wrapper {
        width: 100%;
    }
    
    .filter-select, .filter-search {
        width: 100%;
        box-sizing: border-box;
    }

    /* Kartu diperkecil agar pas di HP */
    .cards-grid {
        grid-template-columns: 1fr; /* 1 kolom penuh di HP */
        gap: 20px;
    }

    .training-card {
        min-width: unset; /* Hapus batas minimal lebar */
    }

    .card-header { padding: 18px; }
    .card-header h3 { font-size: 16px; }
    .card-body { padding: 15px 18px; }
}

/* Untuk layar HP yang SANGAT kecil (di bawah 400px) */
@media screen and (max-width: 400px) {
    .beranda-container { padding: 20px 12px; }
    .beranda-title { font-size: 20px; }
    .tab-btn { padding: 7px 12px; font-size: 12px; }
}