/* ==============================
   Base reset ringan (aman)
============================== */
*,
*::before,
*::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* ==============================
   Logo & Header
============================== */
.logo {
    height: 50px;
    width: auto;
}

.custom-header {
    background-color: #080808;
}

/* Hover tombol login/register tetap sama */
.nav-auth .nav-link.btn:hover {
    background-color: #da9100 !important;
    color: #080808 !important;
}

/* ==============================
   Navigasi
============================== */
/* Posisi tengah (desktop) mengikuti versi asli */
.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Login & Register ke kanan (desktop) */
.nav-auth {
    margin-left: auto;
}

/* Style link navbar */
.nav-link {
    font-size: 16px;
    font-weight: 500;
    padding: 8px 15px;
}

/* Button Register */
.nav-auth .btn-success {
    border-radius: 20px;
    padding: 6px 18px;
    font-weight: 600;
}

/* Tombol hamburger — disembunyikan di desktop */
.navbar-toggler {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: none; /* munculkan hanya di mobile */
}

/* Menu mobile (default: hidden) */
.mobile-menu {
    display: none;
    background-color: #080808;
    padding: 10px 0;
    text-align: center;
}
.mobile-menu a {
    display: block;
    padding: 10px 16px;
    color: #ffffff;
}

/* Aktif saat tombol ditekan (JS toggle kelas .active) */
.mobile-menu.active {
    display: block;
}

/* ==============================
   Hero / Background
============================== */
.bg-home {
    background-image: url('../images/Fitness.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    /* gunakan tinggi fleksibel supaya aman di HP & desktop lebar */
    min-height: clamp(420px, 65vh, 800px);
    margin: 0 auto;
    position: relative;
    border-radius: 0; /* tetap sesuai file kamu */
    overflow: hidden;
}

/* Overlay gradasi untuk keterbacaan */
.overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10%;
    position: relative;
}

/* Aksen animasi */
.overlay:before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(218,145,0,0.2) 0%, rgba(0,0,0,0) 70%);
    transform: rotate(-45deg);
    animation: pulse 8s infinite alternate;
}

/* Konten hero */
.content {
    max-width: 600px;
    color: white;
    text-align: left;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out;
}

/* Judul & paragraf (fluid tipography) */
.content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    position: relative;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.content h1:after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: #da9100;
    margin-top: 20px;
}
.content p {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #e0e0e0;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.6; }
    100% { opacity: 0.4; }
}

/* ==============================
   Classes Section
============================== */
.classes-section {
    padding: 5rem 0;
    background-color: #080808;
    position: relative;
    overflow: hidden;
}

.classes-header {
    margin-bottom: 3rem;
    position: relative;
}

.classes-title {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

.title-underline {
    width: 80px;
    height: 4px;
    background: #da9100;
    margin: 0 auto;
    position: relative;
}
.title-underline:before,
.title-underline:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 4px;
    background: #da9100;
    left: 20px;
}
.title-underline:before { top: -8px; }
.title-underline:after  { bottom: -8px; }

/* Grid responsif: auto-fill agar rapih di berbagai lebar */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.class-card {
    background: #1a1a1a;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    height: 100%;
}
.class-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.class-img-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}
.class-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.class-card:hover img { transform: scale(1.1); }

/* Overlay hover */
.class-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 1rem;
}
.class-card:hover .class-overlay { opacity: 1; }

.class-details {
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.class-card:hover .class-details { transform: translateY(0); }

.class-details p {
    color: #ffffff;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.class-btn {
    display: inline-block;
    background: #da9100;
    color: #ffffff;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}
.class-btn i { margin-left: 5px; }
.class-btn:hover {
    background: #c58100;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Label kelas */
.class-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #da9100;
    position: relative;
}
.class-label span {
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1rem;
}
.class-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #da9100;
}

/* CTA */
.classes-cta { margin-top: 3rem; }
.btn-all-classes {
    display: inline-block;
    background: transparent;
    border: 2px solid #da9100;
    color: #da9100;
    font-weight: 600;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-all-classes:before {
    content: "";
    position: absolute;
    inset: 0 100% 0 0; /* animasi sapuan dari kiri */
    background: #da9100;
    transition: inset 0.4s ease;
    z-index: -1;
}
.btn-all-classes:hover { color: #ffffff; }
.btn-all-classes:hover:before { inset: 0; }
.btn-all-classes i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.btn-all-classes:hover i { transform: translateX(5px); }

/* ==============================
   Breakpoints / Responsiveness
============================== */

/* ≤ 1200px: rapikan grid */
@media (max-width: 1200px) {
    .classes-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* ≤ 992px: tablet & HP besar */
@media (max-width: 992px) {
    /* PENTING: batasi ke header saja agar tidak merusak .container lain */
    .custom-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Sembunyikan nav desktop, tampilkan hamburger */
    .nav-center, .nav-auth { display: none !important; }
    .navbar-toggler { display: block; }

    /* Hero: teks ke tengah & padding lebih rapat */
    .overlay {
        background: linear-gradient(180deg,
            rgba(0,0,0,0.7) 0%,
            rgba(0,0,0,0.8) 100%);
        justify-content: center;
        text-align: center;
        padding: 0 6%;
    }
    .content { max-width: 100%; }
    .content h1:after { margin: 15px auto 0; }

    /* Grid lebih padat */
    .classes-title { font-size: 2.2rem; }
    .classes-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }
}

/* ≤ 768px: tablet */
@media (max-width: 768px) {
    .bg-home { min-height: clamp(380px, 60vh, 720px); }

    .content h1 { font-size: 2.3rem; }
    .content p  { font-size: 1rem; }

    .class-img-container { height: 180px; }
    .class-details p     { font-size: .9rem; }
    .btn-all-classes     { padding: 12px 28px; font-size: .95rem; }
}

/* ≤ 576px: HP kecil */
@media (max-width: 576px) {
    .content h1 { font-size: 2rem; }
    .overlay { padding: 0 5%; }
    .classes-section { padding: 4rem 0; }

    .classes-title { font-size: 1.5rem; padding: 0 15px; }
    .classes-grid  { grid-template-columns: 1fr; padding: 0 15px; }
    .class-img-container { height: 200px; }

    .btn-all-classes { padding: 12px 25px; font-size: 0.9rem; }
}

/* ≤ 375px: sangat kecil */
@media (max-width: 375px) {
    .classes-title { font-size: 1.2rem; }
    .class-label   { padding: 10px; }
    .class-label span { font-size: 0.8rem; }
    .class-details p  { font-size: 0.8rem; }
}